@layer reset, tokens, vendors, base, layouts, components, pages, utilities;
/* css/main.css */
/* Un Cinq base */
/* @uncinq/css-base — index.css */
/*
 * Imports in order: media queries, then reset, base, layouts. Each file scopes
 * itself to its own @layer (reset / base / layouts).
 *
 * The cascade layer ORDER is intentionally NOT declared here: this is an
 * imported package, so the order — including layers owned by sibling packages
 * (tokens, vendors, components) — belongs to the consuming project. Declare it
 * once at the top of your entry CSS, before any import. See the README.
 */
/* mediaqueries.css */
/* https://www.npmjs.com/package/postcss-custom-media */
/* @custom-media rules are resolved at build time and are not subject to cascade layers. */

/* ── Scale ──────────────────────────────────────────────────────────────
   Rungs on a ladder, not devices. A width tells you nothing about the
   hardware — a 1024px window on a 27" monitor is not a tablet — and naming
   the steps after devices left one of them a compound. Intent belongs one
   layer up, in the semantic custom media a component defines for itself
   (--toc-expand, --header-expand…). */

/* 768px */

/* 1024px */

/* 1440px */

/* 1600px */

/* ── Device names, deprecated ───────────────────────────────────────────
   Aliases of the scale above, kept so existing stylesheets keep working.
   Prefer --sm/--md/--lg/--xl in new code; these go away in the next major. */
/* @uncinq/css-base — reset.css */
/* ==========================================
 * Reset CSS et print, made by Josh W Comeau
 * https://www.joshwcomeau.com/css/custom-css-reset/
 * ========================================== 
 * Additions by Un Cinq
 * ========================================== */

@layer reset {

  /* 1. Use a more-intuitive box-sizing model */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* 2. Remove default margin */
  *:not(dialog) {
    margin: 0;
  }

  /* 3. Enable keyword animations */
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    /* 4. Increase line-height */
    /* line-height: 1.5; */
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    /* Un Cinq */
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    font-variant-ligatures: common-ligatures;
  }

  /* 6. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  /* 7. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }

  /* 8. Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  /* 9. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }

  /*
    10. Create a root stacking context
  */
  /* #root, #__next {
    isolation: isolate;
  } */
}

/* @uncinq/css-base — base.css */
/*
 * Imports all native element styles in @layer base.
 */
/* base/accessibility.css */
/*
 * .visually-hidden — hides content visually while keeping it accessible
 * to screen readers and other assistive technologies.
 *
 * Use for:
 *   - Icon-only buttons/links: <button><svg aria-hidden="true">…</svg><span class="visually-hidden">Close</span></button>
 *   - Form labels that must stay in the DOM for AT
 *   - Content intended only for screen readers
 *
 * .visually-hidden-focusable — same as above, but reveals on :focus / :focus-within.
 * Use for skip links that should be visible when reached by keyboard.
 *
 * Do NOT use to hide decorative content — use aria-hidden="true" instead.
 */
@layer base {
  .visually-hidden,
  .visually-hidden-focusable:not(:focus):not(:focus-within) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}
/* css/base/abbr.css */
@layer base {
  abbr[title] {
    text-decoration-line: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3rem;
  }
}
/* css/base/body.css */
@layer base {
  body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-text);
    font-size: var(--font-size-text, 1rem);
    font-weight: var(--font-weight-text, 400);
    line-height: var(--line-height-text, 1.5);
  }
}
/* css/base/headings.css */
/*
 * font-size tokens (--font-size-heading-01…06) reference the T-shirt scale
 * (--font-size-xl/lg/md/sm) defined in @uncinq/design-tokens.
 */
@layer base {
  h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--letter-spacing-heading);
    line-height: var(--line-height-heading);
    margin-block: var(--spacing-heading);
    max-width: var(--max-width-heading);
    text-transform: var(--text-transform-heading);
  }

  h1 { --font-size-heading: var(--font-size-heading-01); }
  h2 { --font-size-heading: var(--font-size-heading-02); }
  h3 { --font-size-heading: var(--font-size-heading-03); }
  h4 { --font-size-heading: var(--font-size-heading-04); }
  h5 { --font-size-heading: var(--font-size-heading-05); }
  h6 { --font-size-heading: var(--font-size-heading-06); }
}
/* css/base/typography.css */
@layer base {
  p {
    margin-block: var(--spacing-typography);
    max-width: var(--max-width-paragraph);
  }
}
/* css/base/link.css */
@layer base {
  a {
    color: var(--color-link);
    text-underline-offset: var(--text-decoration-offset);
    text-decoration-color: var(--link-color-text-decoration);
    text-decoration-line: var(--link-text-decoration-line);
    text-decoration-thickness: var(--text-decoration-thickness);

    &:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
      outline-offset: var(--focus-outline-offset);
    }

    &[target="_blank"]::after {
      background-color: currentColor;
      content: '';
      display: inline-block;
      height: var(--icon-size);
      margin-inline-start: var(--icon-margin-inline-start, var(--spacing-2xs));
      -webkit-mask: var(--icon-external-link) center / var(--icon-size) no-repeat;
              mask: var(--icon-external-link) center / var(--icon-size) no-repeat;
      vertical-align: baseline;
      width: var(--icon-size);
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--link-transition);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--color-link-hover);
        text-decoration-color: var(--link-color-text-decoration-hover);
      }
    }
  }
}
/* css/base/blockquote.css */
@layer base {
  blockquote {
    border-inline-start: var(--border-width-lg) var(--border-style-normal) var(--color-border);
    font-style: italic;
    margin-block: var(--spacing-typography);
    padding-inline-start: var(--spacing-sm);
  }

  blockquote cite {
    display: block;
    font-size: var(--font-size-xs);
    font-style: normal;
    margin-block-start: var(--spacing-typography);
  }
}
/* css/base/code.css */
@layer base {
  :where(code, kbd, samp) {
    font-family: var(--font-family-code);
    font-size: var(--font-size-xs);
  }

  :where(code):not(pre > code) {
    background-color: var(--color-background-muted);
    border-radius: var(--radius-sm);
    padding: var(--spacing-2xs);
  }

  pre {
    background-color: var(--color-background-muted);
    border-radius: var(--radius-md);
    overflow-x: auto;
    padding: var(--spacing-sm);
  }

  pre > code {
    font-size: var(--font-size-xs);
    background: none;
    padding: 0;
  }

  kbd {
    background-color: var(--color-background-muted);
    border: var(--border-width-sm) var(--border-style-normal) var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-2xs);
  }
}
/* css/base/list.css */
/*
 * Styles for content lists (prose context).
 * Navigation and UI lists are typically reset to list-style: none elsewhere.
 */
@layer base {
  :where(ul, ol) {
    padding-inline-start: var(--size-16);
  }

  :where(ul, ol) :where(ul, ol) {
    margin-block: var(--spacing-typography);
    padding-inline-start: var(--spacing-sm);
  }

  :where(li) {
    margin-block: var(--spacing-2xs);
  }
}
/* css/base/address.css */
@layer base {
  address {
    font-style: normal;
    margin-block: 0;

    p {
      margin-block: 0;
      text-wrap: unset;
    }
  }
}
/* css/base/details.css */
@layer base {
  details {
    background-color: var(--details-color-background);
    border: var(--border-width-sm) var(--border-style-normal) var(--details-color-border);
    border-radius: var(--details-border-radius);
    box-shadow: var(--details-box-shadow);
    color: var(--details-color-text);
    margin-block: var(--details-margin);

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--transition-normal);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --details-box-shadow: var(--details-box-shadow-hover);
      }
    }

    &[open] {
      border-color: var(--details-color-border-open);
    }
  }

  summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: var(--details-summary-font-family);
    font-size: var(--details-summary-font-size);
    font-weight: var(--details-summary-font-weight);
    justify-content: space-between;
    list-style: none;
    padding-block: var(--details-summary-padding-block);
    padding-inline: var(--details-summary-padding-inline);

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--details-icon-size);
      -webkit-mask: var(--details-icon) center / var(--details-icon-size) no-repeat;
              mask: var(--details-icon) center / var(--details-icon-size) no-repeat;
      transition: rotate var(--transition-normal);
      width: var(--details-icon-size);
    }
  }

  details[open] summary::after {
    rotate: 180deg;
  }

  summary + div {
    font-size: var(--details-content-font-size);
    padding-block: var(--details-content-padding-block);
    padding-inline: var(--details-content-padding-inline);
    text-align: var(--details-content-align, start);
  }
}
/* css/base/figure.css */
@layer base {
  figure {
    display: flex;
    flex-direction: column;
    gap: var(--figure-gap);
    margin-block: var(--figure-margin-block);

    picture {
      display: block;
    }

    img {
      height: auto;
      width: 100%;
    }

    figcaption {
      display: flex;
      flex-direction: column;
      font-size: var(--figure-figcaption-font-size);
      gap: var(--figure-figcaption-gap);
    }

    p {
      margin-block: 0;
    }

    picture + figcaption {
      align-items: baseline;
      justify-content: space-between;
    }

    @media (min-width: 48rem) {
      figcaption {
        flex-direction: row;
      }
      .credit {
        margin-inline-start: auto;
      }
    }
  }
}
/* css/base/form.css */
/* Largely inspired by https://knacss.com/ */
@layer base {

  label,
  legend {
    color: var(--label-color-text);
    display: block;
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
    padding-block: var(--label-padding-block);
    padding-inline: var(--label-padding-inline);
    text-align: var(--label-text-align);
    text-transform: var(--label-text-transform);
  }

  /* ── Input ─────────────────────────────────────────────────────────── */

  input:not(
    [type='button'],
    [type='reset'],
    [type='submit'],
    [type='checkbox'],
    [type='radio'],
    [type='range']
  ) {
    background-color: var(--input-color-background);
    border: 0;
    border-radius: var(--input-border-radius);
    box-shadow: inset 0 0 0 var(--input-border-width) var(--input-color-border);
    color: var(--input-color-text);
    display: block;
    font: inherit;
    line-height: var(--line-height-normal);
    outline-color: transparent;
    outline-offset: var(--focus-outline-offset, 2px);
    outline-style: var(--focus-outline-style);
    outline-width: var(--focus-outline-width);
    padding: var(--input-padding);
    width: 100%;
    
    &:disabled {
      opacity: var(--opacity-disabled);
    }

    &:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
    }

    &::placeholder {
      color: var(--input-color-placeholder);
      opacity: 100%;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--form-transition);
    }

    @media (hover: hover) and (pointer: fine) {
      &:not(:disabled):hover {
        box-shadow: inset 0 0 0 var(--input-border-width) var(--input-color-border-hover);
      }
    }
  }

  :where(input[type='search']) {
    -webkit-appearance: textfield;
            appearance: textfield;

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      -webkit-appearance: none;
              appearance: none;
    }
  }

  :where(input[type='number']) {
    -webkit-appearance: textfield;
            appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
              appearance: none;
      margin: 0;
    }
  }

  :where(input[type='date'], input[type='time'], input[type='datetime-local']) {
    &:not(:disabled) {
      cursor: pointer;
    }

    &::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 60%;
      -webkit-transition: opacity var(--form-transition);
      transition: opacity var(--form-transition);

      &:hover,
      &:focus-visible {
        opacity: 100%;
      }
    }
  }

  input[type='file'] {
    padding: var(--size-4, 0.25rem) var(--size-4, 0.25rem);
    
  }

  :where(input[type='file']) {
    &:not(:disabled) {
      cursor: pointer;
    }
    
    &::file-selector-button {
      background-color: var(--form-color-accent);
      border: 0;
      border-radius: var(--input-border-radius);
      color: var(--form-color-text-on-accent);
      cursor: pointer;
      font: inherit;
      margin-inline-end: var(--file-button-margin-end, 0.75rem);
      padding-block: var(--file-button-padding-block, 0.25rem);
      padding-inline: var(--file-button-padding-inline, 0.25rem);

      @media (prefers-reduced-motion: no-preference) {
        transition: var(--form-transition);
      }
    }

    @media (hover: hover) and (pointer: fine) {
      &:not(:disabled):hover {
        &::file-selector-button {
          background-color: var(--form-color-accent-hover);
        }
      }
    }
  }
}
/* css/base/form-checkbox.css */
/* Largely inspired by https://knacss.com/ */
@layer base {
  [type='checkbox']:not([role='switch']) {
    align-items: center;
    -webkit-appearance: none;
            appearance: none;
    background-color: var(--checkbox-color-background);
    border: 0;
    border-radius: var(--checkbox-border-radius);
    box-shadow: inset 0 0 0 var(--checkbox-border-width) var(--checkbox-color-border);
    display: inline-grid;
    flex: 0 0 auto;
    font: inherit;
    height: var(--checkable-size, 1.25rem);
    justify-content: center;
    line-height: 1;
    margin: 0;
    outline-color: transparent;
    outline-offset: var(--focus-outline-offset, 2px);
    outline-style: var(--focus-outline-style);
    outline-width: var(--focus-outline-width);
    position: relative;
    -webkit-user-select: none;
            user-select: none;
    width: var(--checkable-size, 1.25rem);

    &:is(:checked, :indeterminate) {
      background-color: var(--checkbox-color-background-checked);
      box-shadow: inset 0 0 0 var(--checkbox-border-width) var(--checkbox-color-border-checked);
    }

    &:not(:disabled) {
      cursor: pointer;
    }
    
    &:disabled {
      opacity: var(--opacity-disabled);
    }

    &:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
    }

    &:checked::after {
      background-color: var(--form-color-accent, #000000);
      content: '';
      height: 100%;
      -webkit-mask: var(--checkbox-mask-checked);
              mask: var(--checkbox-mask-checked);
      position: absolute;
      scale: var(--checkbox-scale-checked, 0.7);
      width: 100%;
    }

    &:indeterminate::after {
      background-color: currentcolor;
      content: '';
      height: 100%;
      -webkit-mask: var(--checkbox-mask-indeterminate);
              mask: var(--checkbox-mask-indeterminate);
      position: absolute;
      width: 100%;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--form-transition);
    }

    @media (hover: hover) and (pointer: fine) {
      &:not(:disabled, :read-only):hover {
        box-shadow: inset 0 0 0 var(--checkbox-border-width) var(--checkbox-color-border-hover);
      }
    }
  }

  [type='checkbox'] + label {
    --label-padding: var(--checkbox-label-padding);
  }

  [type='checkbox']:not(:disabled) + label {
    cursor: pointer;
  }
}
/* css/base/form-radio.css */
/* Largely inspired by https://knacss.com/ */
@layer base {
  [type='radio'] {
    -webkit-appearance: none;
            appearance: none;
    background-color: var(--radio-color-background);
    border: 0;
    border-radius: var(--radio-border-radius);
    box-shadow: inset 0 0 0 var(--radio-border-width) var(--radio-color-border);
    display: inline-grid;
    height: var(--checkable-size, 1.25em);
    margin: 0;
    outline-color: transparent;
    outline-offset: var(--focus-outline-offset, 2px);
    outline-style: var(--focus-outline-style);
    outline-width: var(--focus-outline-width);
    padding: 0;
    place-content: center;
    width: var(--checkable-size, 1.25em);

    &::before {
      background-color: var(--radio-color-background-checked);
      border: var(--radio-border-width-checked) solid var(--radio-color-border-checked);
      border-radius: var(--radius-pill, 9999px);
      content: '';
      height: calc(var(--checkable-size, 1.25em) / 1);
      scale: 0;
      width: calc(var(--checkable-size, 1.25em) / 1);
    }

    &:not(:disabled) {
      cursor: pointer;
    }
    
    &:disabled {
      opacity: var(--opacity-disabled);
    }
    
    &:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
    }

    &:checked::before {
      scale: var(--radio-scale-checked, 0.7);
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--form-transition);
    }

    @media (hover: hover) and (pointer: fine) {
      &:not(:disabled, :read-only):hover {
        box-shadow: inset 0 0 0 var(--radio-border-width) var(--radio-color-border-hover);
      }
    }
  }

  [type='radio'] + label {
    --label-padding: var(--radio-label-padding);
  }

  [type='radio']:not(:disabled) + label {
    cursor: pointer;
  }
}
/* css/base/form-range.css */
@layer base {
  .range {
    padding-block-end: var(--size-32);
    position: relative;
  }

  [type="range"] {
    -webkit-appearance: none;
            appearance: none;
    background: transparent;
    border: 0;
    color: var(--range-thumb-color);
    height: var(--range-thumb-size);
    margin: 0;
    outline-offset: var(--focus-outline-offset, 2px);
    padding: 0;
    width: 100%;

    &:not(:disabled) {
      cursor: pointer;
    }

    &:disabled {
      opacity: var(--opacity-disabled);
    }
  }

  [type="range"]:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
  }

  /* WebKit */
  [type="range"]::-webkit-slider-runnable-track {
    background: var(--range-track-color);
    border-radius: var(--range-track-height);
    height: var(--range-track-height);
  }

  [type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    background-color: currentcolor;
    border: var(--range-thumb-border-width) solid var(--range-thumb-color-border);
    border-radius: 50%;
    height: var(--range-thumb-size);
    margin-block-start: calc((var(--range-track-height) - var(--range-thumb-size)) * 0.5);
    width: var(--range-thumb-size);
  }

  /* Firefox */
  [type="range"]::-moz-range-track {
    background: var(--range-color-track);
    border-radius: var(--range-track-height);
    height: var(--range-track-height);
  }

  [type="range"]::-moz-range-thumb {
    background: currentcolor;
    border: var(--size-4) solid var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    height: var(--range-thumb-size);
    width: var(--range-thumb-size);
  }

  [type="range"]::-moz-range-progress {
    background: currentcolor;
    border-radius: var(--range-track-height);
    height: var(--range-track-height);
  }

  .range-value {
    background-color: var(--form-background);
    border-radius: var(--form-border-radius, var(--radius-xs));
    font-size: var(--font-size-xs, 0.875rem);
    left: 0;
    padding: var(--size-4) var(--size-8);
    position: absolute;
    translate: 0 1.4rem;
  }

  @supports (position-anchor: initial) {
    [data-range-output="anchor"] ::-webkit-slider-thumb {
      anchor-name: --thumb;
    }

    [data-range-output="anchor"] ::-moz-range-thumb {
      anchor-name: --thumb;
    }

    [data-range-output="anchor"] .range-value {
      position-anchor: --thumb;
      position-area: bottom;
      translate: 0 0;
    }
  }
}
/* css/base/form-select.css */
/* Largely inspired by https://knacss.com/ */
@layer base {
  select {
    -webkit-appearance: none;
            appearance: none;
    background-color: var(--select-color-background);
    background-image: var(--select-icon);
    background-position: right var(--select-icon-size) center;
    background-repeat: no-repeat;
    background-size: var(--select-icon-size);
    border: 0;
    border-radius: var(--select-border-radius);
    box-shadow: inset 0 0 0 var(--select-border-width) var(--select-color-border);
    color: var(--select-color-text);
    display: block;
    font: inherit;
    line-height: var(--line-height-normal, 1.5);
    outline-color: transparent;
    outline-offset: var(--focus-outline-offset, 2px);
    outline-style: var(--focus-outline-style);
    outline-width: var(--focus-outline-width);
    padding: var(--select-padding);
    padding-inline-end: var(--select-padding-end);
    -webkit-user-select: none;
            user-select: none;
    width: 100%;

    &:not(:disabled) {
      cursor: pointer;
    }
    
    &:disabled {
      opacity: var(--opacity-disabled);
    }

    &:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
    }

    &[multiple] {
      background-image: none;
      cursor: default;
      padding-inline-end: var(--size-16, 1rem);
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--form-transition);
    }

    @media (hover: hover) and (pointer: fine) {
      &:not(:disabled, :read-only):hover {
        box-shadow: inset 0 0 0 var(--select-border-width) var(--select-color-border-hover);
      }
    }
  }

  :where(optgroup) {
    color: var(--select-color-optgroup);
    font-weight: var(--font-weight-bold, 700);
  }
}
/* css/base/form-switch.css */
/* Largely inspired by https://knacss.com/ */
@layer base {
  [role="switch"] {
    align-items: center;
    -webkit-appearance: none;
            appearance: none;
    background-color: var(--switch-track-color);
    border: var(--switch-color-border) solid var(--switch-border-width);
    border-radius: var(--switch-border-radius);
    display: inline-flex;
    height: var(--checkable-size, 1.25rem);
    justify-content: start;
    margin: 0;
    outline-color: transparent;
    outline-offset: var(--focus-outline-offset, 2px);
    outline-style: var(--focus-outline-style);
    outline-width: var(--focus-outline-width);
    padding: 0;
    width: var(--switch-width);
    
    &:not(:disabled) {
      cursor: pointer;
    }
    
    &:disabled {
      opacity: var(--opacity-disabled);
    }

    &:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
    }

    &::before {
      content: "";
    }

    /* Thumb */
    &::after {
      background-color: var(--switch-thumb-color);
      border-radius: var(--switch-border-radius);
      content: "";
      flex-shrink: 0;
      height: var(--checkable-size, 1.25rem);
      scale: var(--switch-thumb-scale);
      width: var(--checkable-size, 1.25rem);
    }

    /* Checked */
    &:checked {
      background-color: var(--switch-track-color-checked);
    }
    &:checked::before {
      flex-grow: 1;
    }
    &:checked::after {
      background-color: var(--switch-thumb-color-checked);
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--form-transition);
      &::before {
        transition: var(--form-transition);
      }
      &::after {
        transition: var(--form-transition);
      }
    }
  }
}
/* css/base/form-textarea.css */
/* Largely inspired by https://knacss.com/ */
@layer base {
  textarea {
    background-color: var(--textarea-color-background);
    border: 0;
    border-radius: var(--textarea-border-radius);
    box-shadow: inset 0 0 0 var(--textarea-border-width) var(--textarea-color-border);
    color: var(--textarea-color-text);
    display: block;
    field-sizing: content;
    font: inherit;
    line-height: var(--line-height-normal, 1.5);
    min-height: var(--textarea-min-height, 5lh);
    outline-color: transparent;
    outline-offset: var(--focus-outline-offset, 2px);
    outline-style: var(--focus-outline-style);
    outline-width: var(--focus-outline-width);
    padding: var(--textarea-padding, 0.75rem 1rem);
    resize: vertical;
    width: 100%;
    
    &:disabled {
      opacity: var(--opacity-disabled);
    }

    &:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
    }

    &::placeholder {
      color: var(--textarea-color-placeholder);
      opacity: 100%;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--form-transition);
    }

    @media (hover: hover) and (pointer: fine) {
      &:not(:disabled, :read-only):hover {
        box-shadow: inset 0 0 0 var(--textarea-border-width) var(--textarea-color-border-hover);
      }
    }
  }
}
/* css/base/picture.css */
@layer base {
  picture {
    display: inline-block;
  }
}
/* css/base/sup.css */
@layer base {
  sup {
    margin-inline: 0.1em;
  }
}
/* css/base/table.css */
@layer base {
  table {
    border-collapse: collapse;
    font-size: var(--table-font-size);
    width: 100%;
  }

  th,
  td {
    border-block-end: var(--border-width-sm) var(--border-style-normal) var(--table-color-border);
    padding-block: var(--table-cell-padding-block);
    padding-inline: var(--table-cell-padding-inline);
    text-align: start;
    vertical-align: top;

    > *:first-child {
      margin-block-start: 0;
    }
    > *:last-child {
      margin-block-end: 0;
    }
  }

  thead th {
    background-color: var(--table-color-background-header);
    font-weight: var(--font-weight-bold);
  }

  tbody tr:last-child td,
  tbody tr:last-child th {
    border-block-end: none;
  }
}
/* css/base/video.css */
@layer base {
  video {
    height: auto;
    max-width: 100%;
  }
}
/* @uncinq/css-base — layouts.css */
/*
 * Imports all layout primitives in @layer layouts.
 */
/* css/layouts/container.css */
@layer layouts {
  .container {
    margin-inline: auto;
    max-width: var(--container-max-width, var(--container-max-width-mobile));
    padding-inline: var(--gutter);
    width: 100%;

    @media (width >= 48rem)      { --container-max-width: var(--container-max-width-tablet); }
    @media (width >= 64rem) { --container-max-width: var(--container-max-width-tablet-wide); }
    @media (width >= 90rem)      { --container-max-width: var(--container-max-width-laptop); }
    @media (width >= 100rem)     { --container-max-width: var(--container-max-width-desktop); }
  }
}
/* css/layouts/grid.css */
@layer layouts {
  .grid {
    --columns: var(--columns-mobile, 1);
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--grid-gap, var(--gap));

    /*
     * Each child inherits --grid-column, which updates at every breakpoint.
     * Override --grid-column-tablet / --grid-column-tablet-wide / etc. on a
     * specific child to give it a different column span than its siblings.
     */
    & > * {
      grid-column: var(--grid-column);
    }

    @media (width >= 48rem) {
      --columns: var(--columns-tablet);
      --grid-column: var(--grid-column-tablet);
    }
    @media (width >= 64rem) {
      --columns: var(--columns-tablet-wide);
      --grid-column: var(--grid-column-tablet-wide);
    }
    @media (width >= 90rem) {
      --columns: var(--columns-laptop);
      --grid-column: var(--grid-column-laptop);
    }
    @media (width >= 100rem) {
      --columns: var(--columns-desktop);
      --grid-column: var(--grid-column-desktop);
    }
  }
}
/* css/layouts/row.css */
/*
 * .row — flex row wrapper.
 *
 * Semantic column modifiers (applied to direct children). Each spans a share of the active grid column
 * count (--columns), so the proportion holds whatever the count and lands on whole columns when the
 * count is divisible (12, 24, 48…). At 12 columns these are the classic 1/3, 1/2, 2/3, 5/6:
 *   .col-xsmall  — cols / 3      (1/3 at 12 cols)
 *   .col-small   — cols / 2      (1/2 at 12 cols)
 *   .col-medium  — cols * 2 / 3  (2/3 at 12 cols)
 *   .col-large   — cols * 5 / 6  (5/6 at 12 cols)
 *
 * Width = span/cols * 100% − (1 − span/cols) * gap (the gap term gives back the gaps the item does
 * not occupy).
 *
 * Offset modifiers:
 *   .offset-center — margin-inline: auto at tablet-wide+
 *   .offset-end    — margin-inline-start: auto at tablet-wide+
 */
@layer layouts {
  .row {
    /* Mirror the grid's responsive column count so .col-* resolves against the same tracks. */
    --columns: var(--columns-mobile, 1);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--grid-gap, var(--gap));

    @media (width >= 48rem)      { --columns: var(--columns-tablet); }
    @media (width >= 64rem) { --columns: var(--columns-tablet-wide); }
    @media (width >= 90rem)      { --columns: var(--columns-laptop); }
    @media (width >= 100rem)     { --columns: var(--columns-desktop); }
  }

  /* Tablet+ */
  @media (width >= 48rem) {
    .row {
      flex-direction: row;
    }

    .col-xsmall { --col-span: calc(var(--columns) / 3); }
    .col-small  { --col-span: calc(var(--columns) / 2); }
    .col-medium { --col-span: calc(var(--columns) * 2 / 3); }
    .col-large  { --col-span: calc(var(--columns) * 5 / 6); }

    .col-xsmall,
    .col-small,
    .col-medium,
    .col-large {
      flex: 0 0 calc(
        var(--col-span) / var(--columns) * 100%
        - (1 - var(--col-span) / var(--columns)) * var(--grid-gap, var(--gap))
      );
    }

    .offset-center { margin-inline: auto; }
    .offset-end    { margin-inline-start: auto; }
  }
}
/* css/index.css */
/* components/alert.css */
@layer components {
  .alert {
    --color-link-default: var(--alert-color-text);
    background-color: var(--alert-color-background);
    border: var(--alert-border-width) var(--alert-border-style) var(--alert-color-border);
    border-radius: var(--alert-border-radius);
    color: var(--alert-color-text);
    font-size: var(--alert-font-size);
    margin: var(--alert-margin);
    padding-block: var(--alert-padding-block);
    padding-inline: var(--alert-padding-inline);

    &,
    .container {
      align-items: var(--alert-align);
      display: flex;
      flex-direction: var(--alert-direction, column);
      gap: var(--alert-gap);
      text-align: var(--alert-align);
    }

    .alert-heading {
      align-items: center;
      color: var(--alert-color-text);
      display: flex;
      font-weight: var(--font-weight-semibold);
      gap: var(--alert-gap);
    }

    &:has(.icon:first-child):not(:has(.alert-heading)) {
      flex-direction: row;
      align-items: flex-start;
    }
  }

  /* Variants */
  .alert-brand {
    --alert-color-background: var(--color-brand-muted);
    --alert-color-text: var(--color-brand-strong);
  }
  .alert-danger {
    --alert-color-background: var(--color-danger-muted);
    --alert-color-text: var(--color-danger-strong);
  }
  .alert-dark {
    --alert-color-background: var(--color-dark-muted);
    --alert-color-text: var(--color-dark-strong);
  }
  .alert-info {
    --alert-color-background: var(--color-info-muted);
    --alert-color-text: var(--color-info-strong);
  }
  .alert-light {
    --alert-color-background: var(--color-light-muted);
    --alert-color-text: var(--color-light-strong);
  }
  .alert-neutral {
    --alert-color-background: var(--color-neutral-muted);
    --alert-color-text: var(--color-neutral-strong);
  }
  .alert-primary {
    --alert-color-background: var(--color-brand-muted);
    --alert-color-text: var(--color-brand-strong);
  }
  .alert-secondary {
    --alert-color-background: var(--color-neutral-muted);
    --alert-color-text: var(--color-neutral-strong);
  }
  .alert-success {
    --alert-color-background: var(--color-success-muted);
    --alert-color-text: var(--color-success-strong);
  }
  .alert-warning {
    --alert-color-background: var(--color-warning-muted);
    --alert-color-text: var(--color-warning-strong);
  }
}
/* components/badge.css */
@layer components {
  .badge {
    background-color: var(--badge-color-background);
    border: var(--badge-border-width) var(--badge-border-style) var(--badge-color-border);
    border-radius: var(--badge-border-radius);
    color: var(--badge-color-text);
    display: inline-flex;
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: var(--badge-line-height);
    padding-block: var(--badge-padding-block);
    padding-inline: var(--badge-padding-inline);
    text-decoration: none;
    text-transform: var(--badge-text-transform);
  }

  @media (hover: hover) and (pointer: fine) {
    a.badge:hover {
      background-color: var(--badge-color-background-hover, var(--badge-color-background));
      color: var(--badge-color-text-hover, var(--badge-color-text));
    }
  }

  /* Variants */
  .badge-brand   {
    --badge-color-background: var(--color-brand);
    --badge-color-background-hover: var(--color-brand-strong);
    --badge-color-text: var(--color-text-on-brand);
  }
  .badge-danger    {
    --badge-color-background: var(--color-danger);
    --badge-color-background-hover: var(--color-danger-strong);
    --badge-color-text: var(--color-text-on-danger);
  }
  .badge-dark      {
    --badge-color-background: var(--color-dark);
    --badge-color-background-hover: var(--color-dark-strong);
    --badge-color-text: var(--color-text-on-dark);
  }
  .badge-info      {
    --badge-color-background: var(--color-info);
    --badge-color-background-hover: var(--color-info-strong);
    --badge-color-text: var(--color-text-on-info);
  }
  .badge-light     {
    --badge-color-background: var(--color-light);
    --badge-color-background-hover: var(--color-light-strong);
    --badge-color-text: var(--color-text-on-light);
  }
  .badge-neutral {
    --badge-color-background: var(--color-neutral);
    --badge-color-background-hover: var(--color-neutral-strong);
    --badge-color-text: var(--color-text-on-neutral);
  }
  .badge-primary   {
    --badge-color-background: var(--color-brand);
    --badge-color-background-hover: var(--color-brand-strong);
    --badge-color-text: var(--color-text-on-brand);
  }
  .badge-secondary {
    --badge-color-background: var(--color-neutral);
    --badge-color-background-hover: var(--color-neutral-strong);
    --badge-color-text: var(--color-text-on-neutral);
  }
  .badge-success   {
    --badge-color-background: var(--color-success);
    --badge-color-background-hover: var(--color-success-strong);
    --badge-color-text: var(--color-text-on-success);
  }
  .badge-warning   {
    --badge-color-background: var(--color-warning);
    --badge-color-background-hover: var(--color-warning-strong);
    --badge-color-text: var(--color-text-on-warning);
  }
}
/* components/banner.css */
@layer components {
  .banner {
    --alert-align: center;
    
    p {
      margin-block: 0;
    }

    /* Variants */
    &.alert-accent {
      --alert-color-background: var(--color-accent-strong);
      --alert-color-text: var(--color-accent-muted);
    }
    &.alert-brand {
      --alert-color-background: var(--color-brand-strong);
      --alert-color-text: var(--color-brand-muted);
    }
    &.alert-danger {
      --alert-color-background: var(--color-danger-strong);
      --alert-color-text: var(--color-danger-muted);
    }
    &.alert-dark {
      --alert-color-background: var(--color-dark-strong);
      --alert-color-text: var(--color-dark-muted);
    }
    &.alert-info {
      --alert-color-background: var(--color-info-strong);
      --alert-color-text: var(--color-info-muted);
    }
    &.alert-highlight {
      --alert-color-background: var(--color-highlight-muted);
      --alert-color-text: var(--color-highlight-strong);
    }
    &.alert-light {
      --alert-color-background: var(--color-light-muted);
      --alert-color-text: var(--color-light-strong);
    }
    &.alert-neutral {
      --alert-color-background: var(--color-neutral-strong);
      --alert-color-text: var(--color-neutral-muted);
    }
    &.alert-primary {
      --alert-color-background: var(--color-brand-strong);
      --alert-color-text: var(--color-brand-muted);
    }
    &.alert-secondary {
      --alert-color-background: var(--color-neutral-strong);
      --alert-color-text: var(--color-neutral-muted);
    }
    &.alert-success {
      --alert-color-background: var(--color-success-strong);
      --alert-color-text: var(--color-success-muted);
    }
    &.alert-warning {
      --alert-color-background: var(--color-warning-strong);
      --alert-color-text: var(--color-warning-muted);
    }
  }

}
/* components/breadcrumb.css */
@layer components {
  .breadcrumb-wrapper {
    background: var(--breadcrumb-color-background);
    border-block: var(--breadcrumb-border-width) var(--breadcrumb-border-style) var(--breadcrumb-color-border);
    overflow-x: auto;
    padding-block: var(--breadcrumb-padding-block);

    ol {
      display: flex;
      font-size: var(--breadcrumb-font-size);
      gap: var(--breadcrumb-gap);
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      align-items: center;
      color: var(--breadcrumb-color-text);
      display: flex;
      flex-shrink: 0;
      gap: var(--breadcrumb-gap);
      margin: 0;
      white-space: nowrap;

      a {
        color: inherit;
      }

      &::before {
        color: var(--breadcrumb-color-separator);
        content: var(--breadcrumb-separator);
      }

      &:first-child::before {
        display: none;
      }

      &[aria-current="page"] {
        color: var(--breadcrumb-color-text-active);
      }
    }
  }
}
/* components/button.css */
@layer components {
  .btn {
    --icon-margin-inline-start: 0;
    --icon-size: var(--btn-font-size);

    align-items: center;
    -webkit-appearance: none;
            appearance: none;
    background-color: var(--btn-color-background);
    border: var(--btn-border-width) var(--btn-border-style) var(--btn-color-border);
    border-radius: var(--btn-border-radius);
    box-shadow: var(--btn-shadow);
    color: var(--btn-color-text);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    gap: var(--btn-gap);
    justify-content: center;
    line-height: var(--btn-line-height);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    text-decoration-color: var(--btn-color-text-decoration);
    text-decoration-line: var(--btn-text-decoration-line);
    text-decoration-thickness: var(--text-decoration-thickness);
    text-transform: var(--btn-text-transform);
    text-underline-offset: var(--text-decoration-offset);

    &:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
      outline-offset: var(--focus-outline-offset, 2px);
    }

    &:disabled,
    &[aria-disabled='true'] {
      cursor: not-allowed;
      opacity: var(--opacity-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--btn-color-background-hover);
        border-color: var(--btn-color-border-hover);
        box-shadow: var(--btn-shadow-hover);
        color: var(--btn-color-text-hover);
        text-decoration-color: var(--btn-color-text-decoration-hover);
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--btn-transition);
    }
  }

  /* Variants */
  .btn-brand {
    --btn-color-background: var(--color-brand);
    --btn-color-background-hover: var(--color-brand-strong);
    --btn-color-border: var(--color-brand);
    --btn-color-border-hover: var(--color-brand-strong);
    --btn-color-text: var(--color-text-on-brand);
  }

  .btn-control {
    --btn-color-background: var(--btn-control-color-background);
    --btn-color-background-hover: var(--btn-control-color-background-hover);
    --btn-color-border: var(--btn-control-color-border);
    --btn-color-border-hover: var(--btn-control-color-border-hover);
    --btn-color-text: var(--btn-control-color-text);
    --btn-color-text-hover: var(--btn-control-color-text-hover);
  }

  .btn-danger {
    --btn-color-background: var(--color-danger);
    --btn-color-background-hover: var(--color-danger-strong);
    --btn-color-border: var(--color-danger);
    --btn-color-border-hover: var(--color-danger-strong);
    --btn-color-text: var(--color-text-on-danger);
  }

  .btn-dark {
    --btn-color-background: var(--color-dark);
    --btn-color-background-hover: var(--color-dark-strong);
    --btn-color-border: var(--color-dark);
    --btn-color-border-hover: var(--color-dark-strong);
    --btn-color-text: var(--color-text-on-dark);
  }

  .btn-ghost {
    --btn-color-background: transparent;
    --btn-color-background-hover: transparent;
    --btn-color-border: transparent;
    --btn-color-border-hover: transparent;
    --btn-color-text: var(--color-text);
    --btn-color-text-hover: var(--color-text-hover);
  }

  .btn-info {
    --btn-color-background: var(--color-info);
    --btn-color-background-hover: var(--color-info-strong);
    --btn-color-border: var(--color-info);
    --btn-color-border-hover: var(--color-info-strong);
    --btn-color-text: var(--color-text-on-info);
  }

  .btn-light {
    --btn-color-background: var(--color-light);
    --btn-color-background-hover: var(--color-light-strong);
    --btn-color-border: var(--color-light);
    --btn-color-border-hover: var(--color-light-strong);
    --btn-color-text: var(--color-text-on-light);
  }

  .btn-link {
    --btn-color-background: transparent;
    --btn-color-background-hover: transparent;
    --btn-color-border: transparent;
    --btn-color-border-hover: transparent;
    --btn-color-text: var(--color-text);
    --btn-color-text-hover: var(--color-text);
    --btn-color-text-decoration: initial;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --btn-color-text-decoration: transparent;
      }
    }
  }

  .btn-neutral {
    --btn-color-background: var(--color-neutral);
    --btn-color-background-hover: var(--color-neutral-strong);
    --btn-color-border: var(--color-neutral);
    --btn-color-border-hover: var(--color-neutral-strong);
    --btn-color-text: var(--color-text-on-neutral);
  }

  .btn-primary {
    --btn-color-background: var(--color-brand);
    --btn-color-background-hover: var(--color-brand-strong);
    --btn-color-border: var(--color-brand);
    --btn-color-border-hover: var(--color-brand-strong);
    --btn-color-text: var(--color-text-on-brand);
  }

  .btn-secondary {
    --btn-color-background: var(--color-neutral);
    --btn-color-background-hover: var(--color-neutral-strong);
    --btn-color-border: var(--color-neutral);
    --btn-color-border-hover: var(--color-neutral-strong);
    --btn-color-text: var(--color-text-on-neutral);
  }

  .btn-success {
    --btn-color-background: var(--color-success);
    --btn-color-background-hover: var(--color-success-strong);
    --btn-color-border: var(--color-success);
    --btn-color-border-hover: var(--color-success-strong);
    --btn-color-text: var(--color-text-on-success);
  }

  .btn-warning {
    --btn-color-background: var(--color-warning);
    --btn-color-background-hover: var(--color-warning-strong);
    --btn-color-border: var(--color-warning);
    --btn-color-border-hover: var(--color-warning-strong);
    --btn-color-text: var(--color-text-on-warning);
  }

  /* Sizes */
  .btn-xs {
    --btn-font-size: var(--font-size-xs);
    --btn-padding-inline: var(--spacing-xs);
    --btn-padding-block: var(--spacing-xs);
  }

  .btn-sm {
    --btn-font-size: var(--font-size-sm);
    --btn-padding-inline: var(--spacing-sm);
    --btn-padding-block: var(--spacing-sm);
  }

  .btn-md {
    --btn-font-size: var(--font-size-md);
    --btn-padding-inline: var(--spacing-md);
    --btn-padding-block: var(--spacing-md);
  }

  .btn-lg {
    --btn-font-size: var(--font-size-lg);
    --btn-padding-inline: var(--spacing-lg);
    --btn-padding-block: var(--spacing-lg);
  }

  .btn-xl {
    --btn-font-size: var(--font-size-xl);
    --btn-padding-inline: var(--spacing-xl);
    --btn-padding-block: var(--spacing-xl);
  }
}
/* components/btn-close.css */
/* Close button */
@layer components {
  .btn-close {
    align-items: center;
    -webkit-appearance: none;
            appearance: none;
    background-color: var(--btn-close-color-background, var(--btn-control-color-background));
    border: var(--btn-close-border-width, var(--btn-border-width)) var(--btn-close-border-style, var(--btn-border-style)) var(--btn-close-color-border, var(--btn-control-color-border));
    border-radius: var(--btn-close-border-radius, var(--btn-border-radius));
    color: var(--btn-close-color-text, var(--btn-control-color-text));
    cursor: pointer;
    display: inline-flex;
    font-size: var(--btn-close-font-size, var(--btn-font-size));
    font-weight: var(--btn-close-font-weight, var(--btn-font-weight));
    gap: var(--btn-close-gap, var(--btn-gap));
    padding: var(--btn-close-padding-block, var(--btn-padding-block)) var(--btn-close-padding-inline, var(--btn-padding-inline));
    text-decoration-color: var(--btn-close-color-text-decoration, var(--btn-color-text-decoration));
    text-decoration-line: var(--btn-text-decoration-line);
    text-decoration-thickness: var(--text-decoration-thickness);
    text-transform: var(--btn-text-transform);
    text-underline-offset: var(--text-decoration-offset);

    &::before {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--btn-close-icon-size, var(--icon-size));
      -webkit-mask: var(--icon-close) center / var(--btn-close-icon-size, var(--icon-size)) no-repeat;
              mask: var(--icon-close) center / var(--btn-close-icon-size, var(--icon-size)) no-repeat;
      width: var(--btn-close-icon-size, var(--icon-size));
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--btn-close-color-background-hover, var(--btn-control-color-background-hover));
        color: var(--btn-close-color-text-hover, var(--btn-control-color-text-hover));
        text-decoration-color: var(--btn-close-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--btn-transition);
    }
  }
}
/* components/btn-filter.css */
/* Filters toggle button — requires .btn base class */
@layer components {
  .btn-filter {
    /* Scope --btn-color-* to control values, allow per-button overrides */
    --btn-color-background:           var(--btn-filter-color-background, var(--btn-control-color-background));
    --btn-color-background-hover:     var(--btn-filter-color-background-hover, var(--btn-control-color-background-hover));
    --btn-color-border:       var(--btn-filter-color-border, var(--btn-control-color-border));
    --btn-color-border-hover: var(--btn-filter-color-border-hover, var(--btn-control-color-border-hover));
    --btn-color-text:         var(--btn-filter-color-text, var(--btn-control-color-text));
    --btn-color-text-hover:   var(--btn-filter-color-text-hover, var(--btn-control-color-text-hover));

    &::before {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--btn-filter-icon-size, var(--icon-size));
      -webkit-mask: var(--icon-filter) center / var(--btn-filter-icon-size, var(--icon-size)) no-repeat;
              mask: var(--icon-filter) center / var(--btn-filter-icon-size, var(--icon-size)) no-repeat;
      width: var(--btn-filter-icon-size, var(--icon-size));
    }
  }
}
/* components/btn-menu.css */
/* Menu toggle button */
@layer components {
  .btn-menu {
    align-items: center;
    -webkit-appearance: none;
            appearance: none;
    background-color: var(--btn-menu-color-background, var(--btn-control-color-background));
    border: var(--btn-menu-border-width, var(--btn-border-width)) var(--btn-menu-border-style, var(--btn-border-style)) var(--btn-menu-color-border, var(--btn-control-color-border));
    border-radius: var(--btn-menu-border-radius, var(--btn-border-radius));
    color: var(--btn-menu-color-text, var(--btn-control-color-text));
    cursor: pointer;
    display: inline-flex;
    font-size: var(--btn-menu-font-size, var(--btn-font-size));
    font-weight: var(--btn-menu-font-weight, var(--btn-font-weight));
    gap: var(--btn-menu-gap, var(--btn-gap));
    padding-block: var(--btn-menu-padding-block, var(--btn-padding-block));
    padding-inline: var(--btn-menu-padding-inline, var(--btn-padding-inline));
    text-decoration-color: var(--btn-menu-color-text-decoration, var(--btn-color-text-decoration));
    text-decoration-line: var(--btn-text-decoration-line);
    text-decoration-thickness: var(--text-decoration-thickness);
    text-transform: var(--btn-text-transform);
    text-underline-offset: var(--text-decoration-offset);

    &::before {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--btn-menu-icon-size, var(--icon-size));
      -webkit-mask: var(--icon-menu) center / var(--btn-menu-icon-size, var(--icon-size)) no-repeat;
              mask: var(--icon-menu) center / var(--btn-menu-icon-size, var(--icon-size)) no-repeat;
      width: var(--btn-menu-icon-size, var(--icon-size));
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--btn-menu-color-background-hover, var(--btn-control-color-background-hover));
        color: var(--btn-menu-color-text-hover, var(--btn-control-color-text-hover));
        text-decoration-color: var(--btn-menu-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--btn-transition);
    }
  }
}
/* components/btn-search.css */
/* Search button — requires .btn base class */
@layer components {
  .btn-search {
    /* Scope --btn-color-* to control values, allow per-button overrides */
    --btn-color-background: var(--btn-search-color-background, var(--btn-control-color-background));
    --btn-color-background-hover: var(--btn-search-color-background-hover, var(--btn-control-color-background-hover));
    --btn-color-border: var(--btn-search-color-border, var(--btn-control-color-border));
    --btn-color-border-hover: var(--btn-search-color-border-hover, var(--btn-control-color-border-hover));
    --btn-color-text: var(--btn-search-color-text, var(--btn-control-color-text));
    --btn-color-text-hover: var(--btn-search-color-text-hover, var(--btn-control-color-text-hover));

    &::before {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--btn-search-icon-size, var(--icon-size));
      -webkit-mask: var(--icon-search) center / var(--btn-search-icon-size, var(--icon-size)) no-repeat;
              mask: var(--icon-search) center / var(--btn-search-icon-size, var(--icon-size)) no-repeat;
      width: var(--btn-search-icon-size, var(--icon-size));
    }
  }
}
/* components/btn-share.css */
/* Share button — requires .btn base class */
@layer components {
  .btn-share {
    /* Scope --btn-color-* to control values, allow per-button overrides */
    --btn-color-background: var(--btn-share-color-background, var(--btn-control-color-background));
    --btn-color-background-hover: var(--btn-share-color-background-hover, var(--btn-control-color-background-hover));
    --btn-color-border: var(--btn-share-color-border, var(--btn-control-color-border));
    --btn-color-border-hover: var(--btn-share-color-border-hover, var(--btn-control-color-border-hover));
    --btn-color-text: var(--btn-share-color-text, var(--btn-control-color-text));
    --btn-color-text-hover: var(--btn-share-color-text-hover, var(--btn-control-color-text-hover));

    &::before {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--btn-share-icon-size, var(--icon-size));
      -webkit-mask: var(--icon-share) center / var(--btn-share-icon-size, var(--icon-size)) no-repeat;
              mask: var(--icon-share) center / var(--btn-share-icon-size, var(--icon-size)) no-repeat;
      width: var(--btn-share-icon-size, var(--icon-size));
    }
  }
}
/* components/btn-toc.css */
/* Table of contents toggle button — requires .btn base class */
@layer components {
  .btn-toc {
    /* Scope --btn-color-* to control values, allow per-button overrides */
    --btn-color-background: var(--btn-toc-color-background, var(--btn-control-color-background));
    --btn-color-background-hover: var(--btn-toc-color-background-hover, var(--btn-control-color-background-hover));
    --btn-color-border: var(--btn-toc-color-border, var(--btn-control-color-border));
    --btn-color-border-hover: var(--btn-toc-color-border-hover, var(--btn-control-color-border-hover));
    --btn-color-text: var(--btn-toc-color-text, var(--btn-control-color-text));
    --btn-color-text-hover: var(--btn-toc-color-text-hover, var(--btn-control-color-text-hover));

    &::before {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--btn-toc-icon-size, var(--icon-size));
      -webkit-mask: var(--icon-toc) center / var(--btn-toc-icon-size, var(--icon-size)) no-repeat;
              mask: var(--icon-toc) center / var(--btn-toc-icon-size, var(--icon-size)) no-repeat;
      width: var(--btn-toc-icon-size, var(--icon-size));
    }
  }
}
/* components/card.css */
/*
 * .card is a backwards-compatible alias for .item.
 * Prefer using .item directly: <article class="item page">
 * 
 * Structure:
 * <article class="card">
 *   <div class="content">
 *     <p class="title">...</p>
 *     <p class="description">...</p>
 *   </div>
 *   <div class="media">
 *     picture | video
 *   </div>
 * </article>
 *
 * Optional sizing: --card-max-width / --card-width are unset by default.
 * Prefer ch units so the width tracks the text measure, like --items-min-width.
 */
@layer components {
  .card {
    --media-color-background: var(--card-media-color-background);
    --media-ratio: var(--card-media-ratio);
    --surtitle-margin-block-end: calc(var(--card-gap) * -1);

    background-color: var(--card-color-background);
    border: var(--card-border-width) var(--card-border-style) var(--card-color-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    color: var(--card-color-text);
    display: flex;
    flex-direction: column;
    max-width: var(--card-max-width);
    overflow: hidden;
    width: var(--card-width);

    .content {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: var(--card-gap);
      padding-block: var(--card-padding-block);
      padding-inline: var(--card-padding-inline);
      text-decoration: none;
    }

    a.content {
      &::before {
        content: '';
        inset: 0;
        position: absolute;
      }
      &:focus-visible {
        outline: none;
      }
    }

    .surtitle {
      margin-block-start: 0;
    }

    .title {
      color: var(--card-title-color);
      font-family: var(--card-title-font-family);
      font-size: var(--card-title-font-size);
      font-weight: var(--card-title-font-weight);
      line-height: var(--card-title-line-height);
    }

    .description {
      font-size: var(--card-font-size);
    }

    .btn,
    .description,
    .title {
      margin-block: 0;
    }

    .media {
      border: var(--card-media-border-width) var(--card-media-border-style) var(--card-media-color-border);
      border-radius: var(--card-media-border-radius);
      margin-block: var(--card-media-margin-block);
      margin-inline: var(--card-media-margin-inline);
      order: var(--card-media-order, -1);
    }

    .media-icon {
      --media-border-radius: var(--card-media-icon-border-radius);
      --media-border-style: var(--card-media-icon-border-style);
      --media-border-width: var(--card-media-icon-border-width);
      --media-color-background: var(--card-media-icon-color-background, var(--card-media-color-background));
      --media-color-border: var(--card-media-icon-color-border);
      --media-ratio: var(--card-media-icon-ratio);
      --card-media-margin-block: var(--card-media-icon-margin-block);
      --card-media-margin-inline: var(--card-media-icon-margin-inline);
      --icon-color: var(--card-media-icon-color, currentColor);
      --icon-size: var(--card-media-icon-size);
    }

    /* Focus */
    &:has(a.content:focus-visible) {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
      outline-offset: var(--focus-outline-offset);
    }

    /* Hover */
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --card-shadow: var(--card-shadow-hover);
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--card-transition);
    }
  }
}
/* components/drawer.css */
/*
 * .drawer — panel sliding in from an edge.
 *
 * A variant is pure configuration: this file declares nothing but --panel-*
 * tokens. components/panel.css owns every rule — structure, placement,
 * open/closed contract and backdrop.
 *
 * Works on a <dialog> opened with showModal() and on any element carrying
 * popover="auto", opened with showPopover(). Both land in the top layer and
 * get the native ::backdrop. Reach for the second form when the panel is not
 * always modal: combined with .panel-inline-* it becomes a region of the
 * page above a breakpoint, which a <dialog> cannot be without claiming
 * role="dialog" the whole time.
 *
 * Position variants: .drawer-start | .drawer-end | .drawer-top | .drawer-bottom
 * Inline variants:   .panel-inline-* — see components/panel.css
 *
 * Triggers: .js-dialog-toggle[data-target="#id"]
 * Close:    .js-dialog-close inside the panel, Escape, or a click outside
 */
@layer components {
  .drawer {
    /* Structure */
    --panel-backdrop-blur: var(--drawer-backdrop-blur);
    --panel-backdrop-color: var(--drawer-backdrop-color);
    --panel-border-style: var(--drawer-border-style);
    --panel-border-width: var(--drawer-border-width);
    --panel-color-background: var(--drawer-color-background);
    --panel-color-border: var(--drawer-color-border);
    --panel-color-text: var(--drawer-color-text);
    --panel-content-padding-block: var(--drawer-content-padding-block, var(--drawer-padding-block));
    --panel-content-padding-inline: var(--drawer-content-padding-inline, var(--drawer-padding-inline));
    --panel-footer-padding-block: var(--drawer-footer-padding-block, var(--drawer-padding-block));
    --panel-footer-padding-inline: var(--drawer-footer-padding-inline, var(--drawer-padding-inline));
    --panel-header-padding-block: var(--drawer-header-padding-block, var(--drawer-padding-block));
    --panel-header-padding-inline: var(--drawer-header-padding-inline, var(--drawer-padding-inline));
    --panel-shadow: var(--drawer-shadow);
    --panel-transition-duration: var(--drawer-transition-duration);
    --panel-transition-easing: var(--drawer-transition-easing);

    /* Placement — two edges pinned, the opposite ones auto. The margin stays
       at 0 so the UA rules that centre a modal <dialog> do not apply. */
    --panel-inline-size: var(--drawer-width);
    --panel-inset-block: var(--drawer-top) var(--drawer-bottom);
    --panel-inset-inline: var(--drawer-start) var(--drawer-end);
    --panel-max-inline-size: 100%;
    --panel-translate: var(--drawer-translate);
  }

  /* ── Position variants ───────────────────────────────────────────── */

  .drawer-start {
    --drawer-end: auto;
    --drawer-start: 0;
    --drawer-translate: translateX(-100%);
  }

  .drawer-end {
    --drawer-end: 0;
    --drawer-start: auto;
    --drawer-translate: translateX(100%);
  }

  .drawer-top {
    --drawer-bottom: auto;
    --drawer-end: 0;
    --drawer-start: 0;
    --drawer-top: 0;
    --drawer-translate: translateY(-100%);
    --panel-block-size: var(--drawer-height);
    --panel-inline-size: auto;
  }

  .drawer-bottom {
    --drawer-bottom: 0;
    --drawer-end: 0;
    --drawer-start: 0;
    --drawer-top: auto;
    --drawer-translate: translateY(100%);
    --panel-block-size: var(--drawer-height);
    --panel-inline-size: auto;
  }
}
/* components/dropdown.css */
/*
 * .dropdown — contextual menu, vanilla JS driven.
 *
 * JS (components/dropdown.js) manages classes on .dropdown-menu:
 *   .showing  — open transition starting
 *   .show     — fully open
 *   .hiding   — close transition starting
 *   aria-expanded on .js-dropdown-toggle
 *
 * Trigger:  .js-dropdown-toggle (nextElementSibling must be .dropdown-menu)
 *
 * Expected HTML:
 *   <div class="dropdown">
 *     <button class="js-dropdown-toggle" aria-expanded="false">Label</button>
 *     <ul class="dropdown-menu" role="menu">
 *       <li><a class="dropdown-item" href="…">Item</a></li>
 *       <li><hr class="dropdown-divider"></li>
 *       <li><a class="dropdown-item" href="…">Item</a></li>
 *     </ul>
 *   </div>
 */
@layer components {

  /* ── Container ───────────────────────────────────────────────────── */

  .dropdown {
    display: inline-flex;
    position: relative;
  }

  /* ── Trigger ─────────────────────────────────────────────────────── */

  .dropdown-toggle {
    align-items: center;
    -webkit-appearance: none;
            appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    margin-inline-start: calc(var(--spacing-xs) * -1);
    padding-block: var(--spacing-2xs);
    padding-inline: var(--spacing-xs);

    &::before {
      content: '';
      inset: 0;
      position: absolute;
    }

    &::after {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--dropdown-icon-size);
      -webkit-mask: var(--dropdown-icon) center / var(--dropdown-icon-size) no-repeat;
              mask: var(--dropdown-icon) center / var(--dropdown-icon-size) no-repeat;
      transition: rotate var(--dropdown-transition-duration) var(--dropdown-transition-easing);
      width: var(--dropdown-icon-size);
    }

    &:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
      outline-offset: var(--focus-outline-offset);
    }

    &[aria-expanded="true"]::after {
      rotate: 180deg;
    }
  }

  /* ── Menu panel ──────────────────────────────────────────────────── */

  .dropdown-menu {
    background-color: var(--dropdown-color-background);
    border: var(--dropdown-border-width) var(--dropdown-border-style) var(--dropdown-color-border);
    border-radius: var(--dropdown-border-radius);
    box-shadow: var(--dropdown-shadow);
    color: var(--dropdown-color-text);
    list-style: none;
    min-width: var(--dropdown-min-width);
    opacity: 0;
    overflow: hidden;
    padding: var(--dropdown-padding, 0);
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: translateY(var(--dropdown-translate-y));
    visibility: hidden;
    z-index: var(--dropdown-z-index);

    @media (prefers-reduced-motion: no-preference) {
      transition-duration: var(--dropdown-transition-duration);
      transition-property: opacity, transform, visibility;
      transition-timing-function: var(--dropdown-transition-easing);
    }

    /* Visible during all transition phases */
    &.show,
    &.showing,
    &.hiding {
      pointer-events: auto;
      visibility: visible;
    }

    /* Fully open */
    &.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Items ───────────────────────────────────────────────────────── */

    li a {
      border-radius: var(--dropdown-item-border-radius);
      color: var(--dropdown-color-text);
      font-size: var(--dropdown-item-font-size);
      display: block;
      padding-block: var(--dropdown-item-padding-block);
      padding-inline: var(--dropdown-item-padding-inline);
      text-decoration: none;
      white-space: nowrap;

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background-color: var(--dropdown-item-color-background-hover);
        }
      }
    }
  }
  

  /* ── Alignment variants ──────────────────────────────────────────── */

  .dropdown-menu-end {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}
/* components/embed.css */
/*
 * .embed — responsive iframe/embed container.
 * Maintains aspect ratio for third-party embeds (video, map, social…).
 *
 * Structure:
 *   .embed
 *     iframe | video | embed | object
 */
@layer components {
  .embed {
    aspect-ratio: var(--embed-ratio);
    border: var(--embed-border);
    border-radius: var(--embed-border-radius);
    box-shadow: var(--embed-box-shadow);
    overflow: hidden;

    iframe,
    embed,
    object,
    video {
      height: 100%;
      width: 100%;
    }
  }
}
/* components/form.css */
@layer components {
  .form {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 1fr));

    .help {
      color: var(--help-color-text);
      font-size: var(--help-font-size);
      font-weight: var(--help-font-weight);
      margin: var(--help-margin);
      text-align: var(--help-text-align);
    }

    .actions,
    .full {
      grid-column: 1 / -1;
    }
    
    .actions {
      align-items: start;
      display: flex;
      flex-direction: column;
      gap: var(--gap);
      > * {
        margin-block: 0;
      }
    }

  }

  .form-check {
    display: flex;
  }
}
/* components/items.css */
/*
 * .items — responsive grid.
 *
 * Structure:
 *   .items
 *     .item
 */
@layer components {
  .items {
    -moz-column-gap: var(--items-column-gap, var(--items-gap));
         column-gap: var(--items-column-gap, var(--items-gap));
    container-type: inline-size;
    container-name: items;
    display: grid;
    grid-template-columns: repeat(var(--items-cols, auto-fill), minmax(min(var(--items-min-width, var(--max-width-item)), 100%), 1fr));
    justify-content: start;
    row-gap: var(--items-row-gap, var(--items-gap));
  }
}
/* components/list.css */
/*
 * .list — compact labelled list with dash markers.
 *
 * Structure:
 *   div.list
 *     p              (optional label)
 *     ul | ol
 *       li
 */
@layer components {
  .list {
    p {
      font-weight: var(--list-label-font-weight);
      margin-block: var(--list-label-margin-block);
    }

    &,
    ul,
    ol {
      margin-block-end: 0;
    }

    li {
      font-size: var(--list-item-font-size);
      margin-block: var(--list-item-gap);
    }
  }
}
/* components/map.css */
/*
 * .map — map container, Leaflet-powered via js-map.
 *
 * Structure:
 *   div.map.js-map[data-markers][data-zoom][data-tile][data-marker-hidden]
 */
@layer components {
  .map {
    aspect-ratio: var(--map-ratio);
    background-color: var(--map-color-background);
    border-radius: var(--map-border-radius);
    margin-block: var(--map-margin-block);
    overflow: hidden;

    @media not (width >= 48rem) {
      --map-ratio: var(--map-ratio-mobile);
      .container & {
        margin-inline: calc(-1 * var(--gutter));
      }
      .row {
        display: block;
      }
    }
  }
}
/* components/media.css */
/*
 * .media — structural base for all media components.
 * .media-logo — logo media component.
 * .media-icon — icon media component.
 */
@layer components {

  .media {
    aspect-ratio: var(--media-ratio);
    background-color: var(--media-color-background);
    overflow: hidden;

    picture {
      display: block;
    }

    img,
    picture,
    video {
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
    }
  }

  .media-logo {
    picture {
      align-items: center;
      display: flex;
      justify-content: center;
    }
    img {
      max-height: var(--media-logo-max-height);
      max-width: var(--media-logo-max-width);
      -o-object-fit: contain;
         object-fit: contain;
    }
  }

  .media-icon {
    --media-ratio: none;
    --media-color-background: transparent;
  }

}
/* components/modal.css */
/*
 * .modal — centred panel.
 *
 * A variant is pure configuration: this file declares nothing but --panel-*
 * tokens. components/panel.css owns every rule — structure, placement,
 * open/closed contract and backdrop.
 *
 * Works on a <dialog> opened with showModal() and on any element carrying
 * popover="auto", opened with showPopover(). Both land in the top layer and
 * get the native ::backdrop. Reach for the second form only when the panel is not
 * always modal, typically when .panel-inline-* turns it into a region of the
 * page above a breakpoint.
 *
 * Per-instance sizing: override --modal-max-width on the element.
 *
 * Triggers: .js-dialog-toggle[data-target="#id"]
 * Close:    .js-dialog-close inside the panel, Escape, or a click outside
 */
@layer components {
  .modal {
    /* Structure */
    --panel-backdrop-blur: var(--modal-backdrop-blur);
    --panel-backdrop-color: var(--modal-backdrop-color);
    --panel-border-style: var(--modal-border-style);
    --panel-border-width: var(--modal-border-width);
    --panel-color-background: var(--modal-color-background);
    --panel-color-border: var(--modal-color-border);
    --panel-color-text: var(--modal-color-text);
    --panel-content-padding-block: var(--modal-content-padding-block, var(--modal-padding-block));
    --panel-content-padding-inline: var(--modal-content-padding-inline, var(--modal-padding-inline));
    --panel-footer-padding-block: var(--modal-footer-padding-block, var(--modal-padding-block));
    --panel-footer-padding-inline: var(--modal-footer-padding-inline, var(--modal-padding-inline));
    --panel-header-padding-block: var(--modal-header-padding-block, var(--modal-padding-block));
    --panel-header-padding-inline: var(--modal-header-padding-inline, var(--modal-padding-inline));
    --panel-radius: var(--modal-radius);
    --panel-shadow: var(--modal-shadow);
    --panel-transition-duration: var(--modal-transition-duration);
    --panel-transition-easing: var(--modal-transition-easing);

    /* Placement — inset 0 with auto margins centres the panel on both axes.
       The height is fit-content and not auto: with both block insets set, an
       auto height is resolved to fill the gap and the auto margins collapse to
       0, so the panel would neither centre nor shrink to its content. The UA
       dialog stylesheet uses fit-content for that very reason. */
    --panel-block-size: fit-content;
    --panel-inline-size: 100%;
    --panel-inset-block: 0;
    --panel-inset-inline: 0;
    --panel-margin: auto;
    /* min() replaces the mobile breakpoint: the panel always keeps
       --modal-margin clear of the viewport edges, whatever the max is set to */
    --panel-max-block-size: min(var(--modal-max-height), 100% - var(--modal-margin) * 2);
    --panel-max-inline-size: min(var(--modal-max-width), 100% - var(--modal-margin) * 2);
    --panel-min-block-size: var(--modal-min-height);
    --panel-opacity: 0;
    --panel-translate: var(--modal-translate);
  }
}
/* components/nav.css */
/*
 * .nav — base navigation list, vertical by default.
 *
 * Structure:
 *   <ul|ol class="nav">
 *     <li>
 *       <a href="...">...</a>
 *     </li>
 *   </ul>
 *
 * Direction is set by context (e.g. header sets flex-direction: row).
 */
@layer components {
  .nav {
    font-family: var(--nav-font-family);
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
    line-height: var(--nav-line-height);

    &,
    :is(ul, ol) {
      display: flex;
      flex-direction: var(--nav-direction, column);
      gap: var(--nav-gap);
      list-style: var(--nav-list-style, none);
      margin-block: var(--nav-margin-block, 0);
      margin-inline: var(--nav-margin-inline);
      padding-block: var(--nav-padding-block);
      padding-inline: var(--nav-padding-inline, 0);
    }

    /* ── Nav item ────────────────────────────────────────────────── */

    li {
      margin-block: var(--nav-item-margin-block, 0);
      margin-inline: var(--nav-item-margin-inline, 0);
      position: relative;
    }

    /* ── Links ───────────────────────────────────────────────────── */

    a:where(:not(.btn)),
    li > span {
      color: var(--nav-color-text);
      display: block;
      padding-block: var(--nav-link-padding-block);
      padding-inline: var(--nav-link-padding-inline);
      text-transform: var(--nav-link-text-transform);
      &.active {
        --nav-color-text: var(--nav-color-text-active);
      }
    }

    /* ── Dropdown ───────────────────────────────────────────────────── */

    .dropdown-toggle {
      color: var(--nav-color-text);
    }

    /* ── Item highlighted ───────────────────────────────────────────────────── */

    .nav-item-highlighted {
      line-height: var(--line-height-snug);
      margin-inline: var(--nav-padding-inline);
    }
  }
}
/* components/nav-accessibility.css */
/*
 * .nav-accessibility — skip navigation links for keyboard/AT users.
 *
 * Hidden off-screen by default; slides in when a child receives focus.
 * Must be the first focusable element in <body>.
 *
 * Expected HTML (partials/nav/accessibility.html):
 *   <ul class="nav nav-accessibility">
 *     <li><a href="#main">…</a></li>
 *     <li><a href="#navigation">…</a></li>
 *     <li><a href="#footer">…</a></li>
 *   </ul>
 */
@layer components {
  .nav-accessibility {
    flex-direction: row;
    font-size: var(--font-size-xs);
    inset-inline-start: 0;
    overflow: hidden;
    position: absolute;
    transform: translateY(-100%);
    z-index: 300;

    &:focus-within {
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: transform var(--duration-fast) var(--easing-out);
    }

    a {
      background: var(--color-background);
      &:focus {
        background: var(--color-text);
        color: var(--color-background);
        outline: none;
      }
    }
  }
}
/* components/nav-title.css */
/*
 * .nav-title — navigation title.
 */
@layer components {
  .nav-title {
    font-size: var(--nav-title-font-size);
    font-weight: var(--nav-title-font-weight);
    margin-block: var(--nav-title-margin-block, 0);
    padding-block: var(--nav-title-padding-block);
    padding-inline: var(--nav-title-padding-inline);
  }
}
/* components/pagination.css */
/*
 * .pagination — page navigation list.
 *
 * Structure:
 *   nav[role="navigation"]
 *     ul.pagination
 *       li[.disabled]
 *         a.first | a.previous | a.next | a.last   (nav controls)
 *       li.item[.item-adjacent][.active]
 *         a                                         (page number)
 *
 * Icon glyphs for .first, .last, .previous, .next are defined by the theme
 * via a::before / a::after content.
 */
@layer components {
  .pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pagination-gap);
    justify-content: center;
    list-style: none;
    margin-block: 0;
    padding-inline-start: 0;

    li {
      margin-block: 0;
    }

    a {
      align-items: center;
      background-color: var(--pagination-item-color-background);
      border-radius: var(--pagination-item-border-radius);
      color: var(--pagination-item-color-text);
      display: flex;
      font-size: var(--pagination-item-font-size);
      font-weight: var(--pagination-item-font-weight);
      justify-content: center;
      min-height: var(--pagination-item-size);
      min-width: var(--pagination-item-size);
      padding-inline: var(--spacing-2xs);
      text-decoration: none;

      &:hover {
        background-color: var(--pagination-item-color-background-hover);
        color: var(--pagination-item-color-text-hover);
      }
    }

    /* Active page */
    .active a {
      --pagination-item-color-background: var(--pagination-item-color-background-active);
      --pagination-item-color-text: var(--pagination-item-color-text-active);
      cursor: default;
      pointer-events: none;
    }

    /* Disabled nav control */
    .disabled a {
      opacity: var(--pagination-disabled-opacity);
      pointer-events: none;
    }

    :is(.first, .previous, .next, .last) {
      &::after {
        background-color: currentColor;
        content: '';
        flex-shrink: 0;
        height: var(--pagination-icon-size);
        width: var(--pagination-icon-size);
      }
    }

    .first::after {
      -webkit-mask: var(--pagination-icon-first) center / var(--pagination-icon-size) no-repeat;
              mask: var(--pagination-icon-first) center / var(--pagination-icon-size) no-repeat;
      rotate: 180deg;
    }

    .previous::after {
      -webkit-mask: var(--pagination-icon-previous) center / var(--pagination-icon-size) no-repeat;
              mask: var(--pagination-icon-previous) center / var(--pagination-icon-size) no-repeat;
      rotate: 180deg;
    }

    .next::after {
      -webkit-mask: var(--pagination-icon-next) center / var(--pagination-icon-size) no-repeat;
              mask: var(--pagination-icon-next) center / var(--pagination-icon-size) no-repeat;
    }

    .last::after {
      -webkit-mask: var(--pagination-icon-last) center / var(--pagination-icon-size) no-repeat;
              mask: var(--pagination-icon-last) center / var(--pagination-icon-size) no-repeat;
    }

    /* On small screens: hide first/last controls and non-adjacent page numbers */
    @media not (width >= 48rem) {
      .first,
      .last,
      li:has(.first),
      li:has(.last),
      .item:not(.item-adjacent):not(.active) {
        display: none;
      }
    }
  }
}
/* components/panel.css */
/*
 * Shared skeleton for .modal and .drawer.
 *
 * Both are the same panel — header / content / footer, same open/closed
 * contract — and differ only in where they sit: modal.css centres them,
 * drawer.css sticks them to an edge.
 *
 * The tag picks the strategy, not the class. Either variant can be:
 * - <dialog> opened with showModal() — [open], native ::backdrop, top layer,
 *   and the browser handles Escape, the focus trap and inertness;
 * - any element carrying popover="auto", opened by components/dialog.js
 *   with showPopover() — same top layer, same ::backdrop, but no role of its
 *   own. Use this when the panel becomes a static region of the page above a
 *   breakpoint (see .panel-inline-*): a <dialog> is exposed as role="dialog"
 *   even when it is only styled as a sidebar, whereas dialog.js sets that
 *   role solely while the panel is open.
 *
 * Most selectors here are :where()-wrapped so they carry no specificity: the
 * variants and the host components always win without escalating. The
 * .panel-inline-* variants are the exception — they must beat .modal and
 * .drawer, which they do on source order, so this file is imported last.
 *
 * Structure reads --panel-* tokens; each variant aliases them from its own
 * namespace, so --modal-* and --drawer-* stay the public API.
 *
 * Expected HTML:
 *   <dialog class="modal" id="x" aria-labelledby="xLabel">
 *     <div class="header">
 *       <p class="title" id="xLabel">...</p>
 *       <button class="btn-close js-dialog-close"></button>
 *     </div>
 *     <div class="content">...</div>
 *     <div class="footer">...</div>
 *   </dialog>
 */
@layer components {

  /* ── Open / closed ─────────────────────────────────────────────────
   * `display` is only ever declared on a state selector: declaring it on the
   * panel itself would beat the UA rule that hides a closed <dialog>. Both
   * rules carry no specificity, so .panel-inline-* can put the panel back
   * into the flow with a single class. */

  :where(.modal, .drawer):not(:where([open], :popover-open)) {
    display: none;
  }

  /* :is() and not :where() on the state: this has to beat the base rule below,
     which is 0,0,0 and comes later in the file. 0,1,0 wins on specificity
     rather than on source order, and still leaves a host component — .toc
     .drawer is 0,2,0 — room to override without escalating. */
  :where(.modal, .drawer):is([open], :popover-open) {
    display: flex;
    opacity: 1;
    transform: none;
  }

  /* ── Panel ─────────────────────────────────────────────────────── */

  :where(.modal, .drawer) {
    --color-link: var(--panel-color-text);
    --color-link-hover: var(--panel-color-text);
    --nav-color-text: var(--color-link);

    background-color: var(--panel-color-background);
    border: 0;
    border-radius: var(--panel-radius, 0);
    box-shadow: var(--panel-shadow);
    color: var(--panel-color-text);
    flex-direction: column;
    overflow: hidden;
    /* padding lives on the sections, so a click on the panel itself is
       always a click on the backdrop */
    padding: 0;

    /* Placement — every value comes from the variant. A modal centres itself
       with inset 0 + margin auto; a drawer pins two edges and leaves the
       others auto. Declaring position/inset explicitly also covers <dialog>,
       whose UA rules would otherwise centre an edge panel. */
    block-size: var(--panel-block-size, auto);
    inline-size: var(--panel-inline-size, auto);
    inset-block: var(--panel-inset-block, auto);
    inset-inline: var(--panel-inset-inline, auto);
    margin: var(--panel-margin, 0);
    max-block-size: var(--panel-max-block-size, none);
    max-inline-size: var(--panel-max-inline-size, none);
    min-block-size: var(--panel-min-block-size, auto);
    /* Closed state, so also the values the panel animates FROM — the
       @starting-style block below restates these two. A drawer leaves opacity
       alone and only slides; a modal sets 0 and fades as well. */
    opacity: var(--panel-opacity, 1);
    position: fixed;
    transform: var(--panel-translate, none);

    /* allow-discrete keeps the panel displayed while it transitions out, and
       keeps a <dialog> in the top layer until the transition ends */
    @media (prefers-reduced-motion: no-preference) {
      transition-behavior: allow-discrete;
      transition-duration: var(--panel-transition-duration);
      transition-property: display, opacity, overlay, transform;
      transition-timing-function: var(--panel-transition-easing);
    }

    /* ── Header ──────────────────────────────────────────────────── */

    & > .header {
      align-items: center;
      border-block-end: var(--panel-border-width) var(--panel-border-style) var(--panel-color-border);
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      padding-block: var(--panel-header-padding-block);
      padding-inline: var(--panel-header-padding-inline);

      & .title {
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-heading);
        margin: 0;
      }
    }

    /* ── Body ────────────────────────────────────────────────────── */

    & > .content {
      flex-grow: 1;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-block: var(--panel-content-padding-block);
      padding-inline: var(--panel-content-padding-inline);
    }

    /* ── Footer ──────────────────────────────────────────────────── */

    & > .footer {
      border-block-start: var(--panel-border-width) var(--panel-border-style) var(--panel-color-border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      gap: var(--spacing-sm);
      padding-block: var(--panel-footer-padding-block);
      padding-inline: var(--panel-footer-padding-inline);

      @media (width >= 48rem) {
        flex-direction: row;
        justify-content: flex-end;
      }
    }
  }

  /* ── Inline variants ───────────────────────────────────────────────
   * Above the chosen breakpoint the panel stops being an overlay and becomes
   * a region of the page: the host component then only styles what is its
   * own (sticky behaviour, labels, nav layout). Written once here, so adding
   * a property to .modal or .drawer means neutralising it right below rather
   * than patching every host component.
   *
   * The panel must NOT be a <dialog> when one of these is used — see the
   * strategy note at the top of this file. components/dialog.js also closes
   * an open panel carrying one of these classes when the viewport width
   * changes, since CSS alone cannot release the backdrop, the scroll lock
   * and the inert background. */

  .panel-inline-sm {
    @media (width >= 48rem) {
      /* Colours go too, not just geometry: a region of the page carries none
         of the panel's chrome and takes the page's own text and link colours.
         `inherit` on a custom property hands it back to the parent, which is
         exactly what is wanted here — and it has to be done token by token.
         Resetting --panel-color-text, which the three derive from, would make
         them invalid at computed-value time rather than page-valued, and every
         link would fall back to the surrounding text colour instead of the
         site's link colour. Keep this list in step with the panel rule above. */
      --color-link: inherit;
      --color-link-hover: inherit;
      --nav-color-text: inherit;

      background-color: transparent;
      block-size: auto;
      border-radius: 0;
      box-shadow: none;
      color: inherit;
      display: flex;
      inline-size: auto;
      inset-block: auto;
      inset-inline: auto;
      margin: 0;
      max-block-size: none;
      max-inline-size: none;
      min-block-size: auto;
      opacity: 1;
      overflow: visible;
      position: static;
      transform: none;
      transition: none;

      > .header,
      > .footer {
        display: none;
      }

      > .content {
        flex-grow: 0;
        overflow-y: visible;
        overscroll-behavior: auto;
        padding: 0;
      }
    }
  }

  .panel-inline-md {
    @media (width >= 64rem) {
      /* Colours go too, not just geometry: a region of the page carries none
         of the panel's chrome and takes the page's own text and link colours.
         `inherit` on a custom property hands it back to the parent, which is
         exactly what is wanted here — and it has to be done token by token.
         Resetting --panel-color-text, which the three derive from, would make
         them invalid at computed-value time rather than page-valued, and every
         link would fall back to the surrounding text colour instead of the
         site's link colour. Keep this list in step with the panel rule above. */
      --color-link: inherit;
      --color-link-hover: inherit;
      --nav-color-text: inherit;

      background-color: transparent;
      block-size: auto;
      border-radius: 0;
      box-shadow: none;
      color: inherit;
      display: flex;
      inline-size: auto;
      inset-block: auto;
      inset-inline: auto;
      margin: 0;
      max-block-size: none;
      max-inline-size: none;
      min-block-size: auto;
      opacity: 1;
      overflow: visible;
      position: static;
      transform: none;
      transition: none;

      > .header,
      > .footer {
        display: none;
      }

      > .content {
        flex-grow: 0;
        overflow-y: visible;
        overscroll-behavior: auto;
        padding: 0;
      }
    }
  }

  .panel-inline-lg {
    @media (width >= 90rem) {
      /* Colours go too, not just geometry: a region of the page carries none
         of the panel's chrome and takes the page's own text and link colours.
         `inherit` on a custom property hands it back to the parent, which is
         exactly what is wanted here — and it has to be done token by token.
         Resetting --panel-color-text, which the three derive from, would make
         them invalid at computed-value time rather than page-valued, and every
         link would fall back to the surrounding text colour instead of the
         site's link colour. Keep this list in step with the panel rule above. */
      --color-link: inherit;
      --color-link-hover: inherit;
      --nav-color-text: inherit;

      background-color: transparent;
      block-size: auto;
      border-radius: 0;
      box-shadow: none;
      color: inherit;
      display: flex;
      inline-size: auto;
      inset-block: auto;
      inset-inline: auto;
      margin: 0;
      max-block-size: none;
      max-inline-size: none;
      min-block-size: auto;
      opacity: 1;
      overflow: visible;
      position: static;
      transform: none;
      transition: none;

      > .header,
      > .footer {
        display: none;
      }

      > .content {
        flex-grow: 0;
        overflow-y: visible;
        overscroll-behavior: auto;
        padding: 0;
      }
    }
  }

  .panel-inline-xl {
    @media (width >= 100rem) {
      /* Colours go too, not just geometry: a region of the page carries none
         of the panel's chrome and takes the page's own text and link colours.
         `inherit` on a custom property hands it back to the parent, which is
         exactly what is wanted here — and it has to be done token by token.
         Resetting --panel-color-text, which the three derive from, would make
         them invalid at computed-value time rather than page-valued, and every
         link would fall back to the surrounding text colour instead of the
         site's link colour. Keep this list in step with the panel rule above. */
      --color-link: inherit;
      --color-link-hover: inherit;
      --nav-color-text: inherit;

      background-color: transparent;
      block-size: auto;
      border-radius: 0;
      box-shadow: none;
      color: inherit;
      display: flex;
      inline-size: auto;
      inset-block: auto;
      inset-inline: auto;
      margin: 0;
      max-block-size: none;
      max-inline-size: none;
      min-block-size: auto;
      opacity: 1;
      overflow: visible;
      position: static;
      transform: none;
      transition: none;

      > .header,
      > .footer {
        display: none;
      }

      > .content {
        flex-grow: 0;
        overflow-y: visible;
        overscroll-behavior: auto;
        padding: 0;
      }
    }
  }

  /* ── Trigger ───────────────────────────────────────────────────────
   * Once the panel has gone inline there is nothing left to open, so its
   * trigger goes with it.
   *
   * The trigger carries its own breakpoint rather than being reached from the
   * panel: the only reliable link between the two is data-target matching the
   * id, and no selector can compare two values. Any positional rule would work
   * only as long as nobody moves the markup — and a filter button lives in the
   * page heading, not beside the panel. Both classes come from one site param,
   * so the pair cannot disagree. */

  @media (width >= 48rem) { .panel-trigger-sm { display: none; } }
  @media (width >= 64rem) { .panel-trigger-md { display: none; } }
  @media (width >= 90rem) { .panel-trigger-lg { display: none; } }
  @media (width >= 100rem) { .panel-trigger-xl { display: none; } }

  /* ── Entry transition ──────────────────────────────────────────────
   * Opening is a discrete display change, so the start state has to be
   * spelled out. It is exactly the closed state, which now lives in tokens —
   * one block covers both variants, panel and ::backdrop alike. */

  @starting-style {
    :where(.modal, .drawer):is([open], :popover-open) {
      opacity: var(--panel-opacity, 1);
      transform: var(--panel-translate, none);
    }
  }

  /* ── Backdrop ──────────────────────────────────────────────────────
   * Both paths put the panel in the top layer — showModal() for a <dialog>,
   * showPopover() for anything else — so both get the native ::backdrop, and
   * it inherits from the panel: it reads the very --panel-* tokens the panel
   * declares. No backdrop node is ever injected, and no z-index is involved.
   *
   * This is why the class-driven path uses popover rather than a plain
   * element. A backdrop placed outside the panel sits in the root stacking
   * context, while the panel stays confined to its nearest stacking ancestor
   * — a sticky sidebar wrapper, a sticky header — so the veil paints over the
   * panel and no z-index can lift it out. Placing the backdrop next to the
   * panel only moves the problem: it then inherits the same confinement and
   * anything painted later shows through it. The top layer removes the
   * question entirely, which is exactly what it exists for. */

  :where(.modal, .drawer)::backdrop {
    -webkit-backdrop-filter: blur(var(--panel-backdrop-blur));
            backdrop-filter: blur(var(--panel-backdrop-blur));
    background-color: var(--panel-backdrop-color);
    opacity: 0;

    @media (prefers-reduced-motion: no-preference) {
      transition-behavior: allow-discrete;
      transition-duration: var(--panel-transition-duration);
      transition-property: display, opacity, overlay;
      transition-timing-function: var(--panel-transition-easing);
    }
  }

  :where(.modal, .drawer):is([open], :popover-open)::backdrop {
    opacity: 1;
  }

  @starting-style {
    :where(.modal, .drawer):is([open], :popover-open)::backdrop {
      opacity: 0;
    }
  }

  /* ── Page scroll lock ────────────────────────────────────────────── */

  body:has(:where(.modal, .drawer):where([open], :popover-open)) {
    overflow: hidden;
  }
}
/* components/surtitle.css */
/*
 * .surtitle — eyebrow label displayed above a heading.
 *
 * Expected HTML:
 *   <p class="surtitle">Category</p>
 *   <h2>Main title</h2>
 */
@layer components {
  .surtitle {
    background-color: var(--surtitle-color-background);
    border-color: var(--surtitle-border-color);
    border-radius: var(--surtitle-border-radius);
    border-style: var(--surtitle-border-style);
    border-width: var(--surtitle-border-width);
    color: var(--surtitle-color-text);
    font-size: var(--surtitle-font-size);
    font-weight: var(--surtitle-font-weight);
    letter-spacing: var(--surtitle-letter-spacing);
    line-height: var(--surtitle-line-height);
    margin-block-end: var(--surtitle-margin-block-end);
    margin-block-start: var(--surtitle-margin-block-start);
    padding-block: var(--surtitle-padding-block);
    padding-inline: var(--surtitle-padding-inline);
    text-transform: var(--surtitle-text-transform);
  }
}
/* Tokens */
/* tokens/design-system.css */

/* 1. Design tokens — primitive + semantic */

/* primitive.css — barrel, do not edit */

/**
 * Do not edit directly, this file was auto-generated.
 */

/* primitive/blur.css */
@layer tokens {
  :root {
    --blur-xs: 2px;
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;
    --blur-xl: 32px;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* primitive/color.css */
@layer tokens {
  :root {
    --color-black: oklch(0 0 0);
    --color-white: oklch(1 0 0);
    --color-amber-50: oklch(0.987 0.022 95.277);
    --color-amber-100: oklch(0.962 0.059 95.617);
    --color-amber-200: oklch(0.924 0.12 95.746);
    --color-amber-300: oklch(0.879 0.169 91.605);
    --color-amber-400: oklch(0.828 0.189 84.429);
    --color-amber-500: oklch(0.769 0.188 70.08);
    --color-amber-600: oklch(0.666 0.179 58.318);
    --color-amber-700: oklch(0.555 0.163 48.998);
    --color-amber-800: oklch(0.473 0.137 46.201);
    --color-amber-900: oklch(0.414 0.112 45.904);
    --color-amber-950: oklch(0.279 0.077 45.635);
    --color-blue-50: oklch(0.97 0.014 254.604);
    --color-blue-100: oklch(0.932 0.032 255.585);
    --color-blue-200: oklch(0.882 0.059 254.128);
    --color-blue-300: oklch(0.809 0.105 251.813);
    --color-blue-400: oklch(0.707 0.165 254.624);
    --color-blue-500: oklch(0.623 0.214 259.815);
    --color-blue-600: oklch(0.546 0.245 262.881);
    --color-blue-700: oklch(0.488 0.243 264.376);
    --color-blue-800: oklch(0.424 0.199 265.638);
    --color-blue-900: oklch(0.379 0.146 265.522);
    --color-blue-950: oklch(0.282 0.091 267.935);
    --color-cyan-50: oklch(0.984 0.019 200.873);
    --color-cyan-100: oklch(0.956 0.045 203.388);
    --color-cyan-200: oklch(0.917 0.08 205.041);
    --color-cyan-300: oklch(0.865 0.127 207.078);
    --color-cyan-400: oklch(0.789 0.154 211.53);
    --color-cyan-500: oklch(0.715 0.143 215.221);
    --color-cyan-600: oklch(0.609 0.126 221.723);
    --color-cyan-700: oklch(0.52 0.105 223.128);
    --color-cyan-800: oklch(0.45 0.085 224.283);
    --color-cyan-900: oklch(0.398 0.07 227.392);
    --color-cyan-950: oklch(0.302 0.056 229.695);
    --color-emerald-50: oklch(0.979 0.021 166.113);
    --color-emerald-100: oklch(0.95 0.052 163.051);
    --color-emerald-200: oklch(0.905 0.093 164.15);
    --color-emerald-300: oklch(0.845 0.143 164.978);
    --color-emerald-400: oklch(0.765 0.177 163.223);
    --color-emerald-500: oklch(0.696 0.17 162.48);
    --color-emerald-600: oklch(0.596 0.145 163.225);
    --color-emerald-700: oklch(0.508 0.118 165.612);
    --color-emerald-800: oklch(0.432 0.095 166.913);
    --color-emerald-900: oklch(0.378 0.077 168.94);
    --color-emerald-950: oklch(0.262 0.051 172.552);
    --color-fuchsia-50: oklch(0.977 0.017 320.058);
    --color-fuchsia-100: oklch(0.952 0.037 318.852);
    --color-fuchsia-200: oklch(0.903 0.076 319.062);
    --color-fuchsia-300: oklch(0.833 0.145 321.434);
    --color-fuchsia-400: oklch(0.74 0.238 322.16);
    --color-fuchsia-500: oklch(0.667 0.295 322.15);
    --color-fuchsia-600: oklch(0.591 0.293 322.896);
    --color-fuchsia-700: oklch(0.518 0.253 323.949);
    --color-fuchsia-800: oklch(0.452 0.211 324.591);
    --color-fuchsia-900: oklch(0.401 0.17 325.612);
    --color-fuchsia-950: oklch(0.293 0.136 325.661);
    --color-gray-50: oklch(0.985 0.002 247.839);
    --color-gray-100: oklch(0.967 0.003 264.542);
    --color-gray-200: oklch(0.928 0.006 264.531);
    --color-gray-300: oklch(0.872 0.01 258.338);
    --color-gray-400: oklch(0.707 0.022 261.325);
    --color-gray-500: oklch(0.556 0.022 264.364);
    --color-gray-600: oklch(0.439 0.02 264.531);
    --color-gray-700: oklch(0.373 0.014 264.542);
    --color-gray-800: oklch(0.279 0.01 264.542);
    --color-gray-900: oklch(0.208 0.006 264.542);
    --color-gray-950: oklch(0.145 0.005 264.542);
    --color-green-50: oklch(0.982 0.018 155.826);
    --color-green-100: oklch(0.962 0.044 156.743);
    --color-green-200: oklch(0.925 0.084 155.995);
    --color-green-300: oklch(0.871 0.15 154.449);
    --color-green-400: oklch(0.792 0.209 151.711);
    --color-green-500: oklch(0.723 0.219 149.579);
    --color-green-600: oklch(0.627 0.194 149.214);
    --color-green-700: oklch(0.527 0.154 150.069);
    --color-green-800: oklch(0.448 0.119 151.328);
    --color-green-900: oklch(0.393 0.095 152.535);
    --color-green-950: oklch(0.266 0.065 152.934);
    --color-indigo-50: oklch(0.962 0.018 272.314);
    --color-indigo-100: oklch(0.93 0.034 272.788);
    --color-indigo-200: oklch(0.87 0.065 274.039);
    --color-indigo-300: oklch(0.785 0.115 274.713);
    --color-indigo-400: oklch(0.673 0.182 276.935);
    --color-indigo-500: oklch(0.585 0.233 277.117);
    --color-indigo-600: oklch(0.511 0.262 276.966);
    --color-indigo-700: oklch(0.457 0.24 277.023);
    --color-indigo-800: oklch(0.398 0.195 277.366);
    --color-indigo-900: oklch(0.359 0.144 278.697);
    --color-indigo-950: oklch(0.257 0.09 281.288);
    --color-lime-50: oklch(0.986 0.031 120.757);
    --color-lime-100: oklch(0.967 0.067 122.328);
    --color-lime-200: oklch(0.938 0.127 124.321);
    --color-lime-300: oklch(0.897 0.196 126.665);
    --color-lime-400: oklch(0.841 0.238 128.85);
    --color-lime-500: oklch(0.768 0.233 130.85);
    --color-lime-600: oklch(0.648 0.2 131.684);
    --color-lime-700: oklch(0.532 0.157 131.589);
    --color-lime-800: oklch(0.453 0.124 130.933);
    --color-lime-900: oklch(0.405 0.101 131.063);
    --color-lime-950: oklch(0.274 0.072 132.109);
    --color-orange-50: oklch(0.98 0.016 73.684);
    --color-orange-100: oklch(0.954 0.038 75.164);
    --color-orange-200: oklch(0.901 0.076 70.697);
    --color-orange-300: oklch(0.837 0.128 66.29);
    --color-orange-400: oklch(0.75 0.183 55.934);
    --color-orange-500: oklch(0.705 0.213 47.604);
    --color-orange-600: oklch(0.646 0.222 41.116);
    --color-orange-700: oklch(0.553 0.195 38.402);
    --color-orange-800: oklch(0.47 0.157 37.304);
    --color-orange-900: oklch(0.408 0.123 38.172);
    --color-orange-950: oklch(0.266 0.079 36.259);
    --color-pink-50: oklch(0.971 0.014 343.198);
    --color-pink-100: oklch(0.948 0.028 342.258);
    --color-pink-200: oklch(0.899 0.061 343.231);
    --color-pink-300: oklch(0.823 0.12 346.018);
    --color-pink-400: oklch(0.718 0.202 349.761);
    --color-pink-500: oklch(0.656 0.241 354.308);
    --color-pink-600: oklch(0.592 0.249 0.584);
    --color-pink-700: oklch(0.525 0.223 3.958);
    --color-pink-800: oklch(0.459 0.187 3.815);
    --color-pink-900: oklch(0.408 0.153 2.432);
    --color-pink-950: oklch(0.284 0.109 3.907);
    --color-purple-50: oklch(0.977 0.014 308.299);
    --color-purple-100: oklch(0.946 0.033 307.174);
    --color-purple-200: oklch(0.902 0.063 306.703);
    --color-purple-300: oklch(0.827 0.119 306.383);
    --color-purple-400: oklch(0.714 0.203 305.504);
    --color-purple-500: oklch(0.627 0.265 303.9);
    --color-purple-600: oklch(0.558 0.288 302.321);
    --color-purple-700: oklch(0.496 0.265 301.924);
    --color-purple-800: oklch(0.438 0.218 303.724);
    --color-purple-900: oklch(0.381 0.176 304.987);
    --color-purple-950: oklch(0.291 0.149 302.717);
    --color-red-50: oklch(0.971 0.013 17.38);
    --color-red-100: oklch(0.936 0.032 17.717);
    --color-red-200: oklch(0.885 0.062 18.334);
    --color-red-300: oklch(0.808 0.114 19.571);
    --color-red-400: oklch(0.704 0.191 22.216);
    --color-red-500: oklch(0.637 0.237 25.331);
    --color-red-600: oklch(0.577 0.245 27.325);
    --color-red-700: oklch(0.505 0.213 27.518);
    --color-red-800: oklch(0.444 0.177 26.899);
    --color-red-900: oklch(0.396 0.141 25.723);
    --color-red-950: oklch(0.258 0.092 26.042);
    --color-rose-50: oklch(0.969 0.015 12.422);
    --color-rose-100: oklch(0.941 0.03 12.58);
    --color-rose-200: oklch(0.892 0.058 10.001);
    --color-rose-300: oklch(0.81 0.101 2.432);
    --color-rose-400: oklch(0.712 0.194 13.428);
    --color-rose-500: oklch(0.645 0.246 16.439);
    --color-rose-600: oklch(0.586 0.253 17.585);
    --color-rose-700: oklch(0.514 0.222 16.935);
    --color-rose-800: oklch(0.455 0.188 13.697);
    --color-rose-900: oklch(0.41 0.159 10.272);
    --color-rose-950: oklch(0.271 0.105 12.094);
    --color-sienna-50: oklch(0.973 0.012 22);
    --color-sienna-100: oklch(0.945 0.028 22.5);
    --color-sienna-200: oklch(0.9 0.06 23.5);
    --color-sienna-300: oklch(0.832 0.108 25);
    --color-sienna-400: oklch(0.727 0.16 25.5);
    --color-sienna-500: oklch(0.63 0.198 24);
    --color-sienna-600: oklch(0.53 0.195 22);
    --color-sienna-700: oklch(0.45 0.17 20);
    --color-sienna-800: oklch(0.38 0.136 18);
    --color-sienna-900: oklch(0.322 0.106 16);
    --color-sienna-950: oklch(0.218 0.072 15);
    --color-sky-50: oklch(0.977 0.013 236.62);
    --color-sky-100: oklch(0.951 0.026 236.824);
    --color-sky-200: oklch(0.901 0.058 230.902);
    --color-sky-300: oklch(0.828 0.111 230.318);
    --color-sky-400: oklch(0.746 0.16 232.661);
    --color-sky-500: oklch(0.685 0.169 237.323);
    --color-sky-600: oklch(0.588 0.158 241.966);
    --color-sky-700: oklch(0.5 0.134 242.749);
    --color-sky-800: oklch(0.443 0.11 240.79);
    --color-sky-900: oklch(0.391 0.09 240.876);
    --color-sky-950: oklch(0.293 0.066 243.157);
    --color-teal-50: oklch(0.984 0.014 180.72);
    --color-teal-100: oklch(0.953 0.051 180.801);
    --color-teal-200: oklch(0.91 0.096 180.426);
    --color-teal-300: oklch(0.855 0.138 181.071);
    --color-teal-400: oklch(0.777 0.152 181.912);
    --color-teal-500: oklch(0.704 0.14 182.503);
    --color-teal-600: oklch(0.6 0.118 184.704);
    --color-teal-700: oklch(0.511 0.096 186.391);
    --color-teal-800: oklch(0.437 0.078 188.216);
    --color-teal-900: oklch(0.386 0.063 188.416);
    --color-teal-950: oklch(0.277 0.046 192.524);
    --color-violet-50: oklch(0.969 0.016 293.756);
    --color-violet-100: oklch(0.943 0.029 294.588);
    --color-violet-200: oklch(0.894 0.057 293.283);
    --color-violet-300: oklch(0.811 0.111 293.571);
    --color-violet-400: oklch(0.702 0.183 293.541);
    --color-violet-500: oklch(0.606 0.25 292.717);
    --color-violet-600: oklch(0.541 0.281 293.009);
    --color-violet-700: oklch(0.491 0.27 292.581);
    --color-violet-800: oklch(0.432 0.232 292.222);
    --color-violet-900: oklch(0.38 0.189 293.745);
    --color-violet-950: oklch(0.283 0.141 291.089);
    --color-yellow-50: oklch(0.987 0.026 102.212);
    --color-yellow-100: oklch(0.973 0.071 103.193);
    --color-yellow-200: oklch(0.945 0.129 101.54);
    --color-yellow-300: oklch(0.905 0.182 98.111);
    --color-yellow-400: oklch(0.852 0.199 91.936);
    --color-yellow-500: oklch(0.795 0.184 86.047);
    --color-yellow-600: oklch(0.681 0.162 75.834);
    --color-yellow-700: oklch(0.554 0.135 66.442);
    --color-yellow-800: oklch(0.476 0.114 61.907);
    --color-yellow-900: oklch(0.421 0.095 57.708);
    --color-yellow-950: oklch(0.286 0.066 53.813);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* primitive/font.css */
@layer tokens {
  :root {
    --font-family-mono: ui-monospace, monospace;
    --font-family-sans: system-ui, sans-serif;
    --font-family-serif: Georgia, serif;
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    --line-height-none: 1;
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    --text-decoration-offset: 0.25rem;
    --text-decoration-thickness: 1px;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* primitive/shadow.css */
@layer tokens {
  :root {
    --shadow-none: 0 0 0 0 transparent;
    --shadow-sm: 0 1px 2px 0 var(--color-shadow-light), 0 1px 1px -1px var(--color-shadow-light);
    --shadow-md: 0 4px 6px -1px var(--color-shadow-light), 0 2px 4px -2px var(--color-shadow-light);
    --shadow-lg: 0 10px 15px -3px var(--color-shadow-light), 0 4px 6px -4px var(--color-shadow-light);
    --shadow-center-sm: 0 0 2px 2px var(--color-shadow-light);
    --shadow-center-md: 0 0 4px 4px var(--color-shadow-light);
    --shadow-center-lg: 0 0 8px 8px var(--color-shadow-light);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* primitive/size.css */
@layer tokens {
  :root {
    --size-1: 0.0625rem;
    --size-2: 0.125rem;
    --size-3: 0.1875rem;
    --size-4: 0.25rem;
    --size-5: 0.3125rem;
    --size-6: 0.375rem;
    --size-7: 0.4375rem;
    --size-8: 0.5rem;
    --size-9: 0.5625rem;
    --size-10: 0.625rem;
    --size-11: 0.6875rem;
    --size-12: 0.75rem;
    --size-13: 0.8125rem;
    --size-14: 0.875rem;
    --size-15: 0.9375rem;
    --size-16: 1rem;
    --size-17: 1.0625rem;
    --size-18: 1.125rem;
    --size-19: 1.1875rem;
    --size-20: 1.25rem;
    --size-22: 1.375rem;
    --size-24: 1.5rem;
    --size-25: 1.5625rem;
    --size-26: 1.625rem;
    --size-28: 1.75rem;
    --size-30: 1.875rem;
    --size-32: 2rem;
    --size-36: 2.25rem;
    --size-40: 2.5rem;
    --size-44: 2.75rem;
    --size-48: 3rem;
    --size-50: 3.125rem;
    --size-52: 3.25rem;
    --size-56: 3.5rem;
    --size-60: 3.75rem;
    --size-64: 4rem;
    --size-68: 4.25rem;
    --size-72: 4.5rem;
    --size-76: 4.75rem;
    --size-80: 5rem;
    --size-96: 6rem;
    --size-100: 6.25rem;
    --size-112: 7rem;
    --size-128: 8rem;
    --size-144: 9rem;
    --size-150: 9.375rem;
    --size-160: 10rem;
    --size-768: 48rem;
    --size-1024: 64rem;
    --size-1200: 75rem;
    --size-1280: 80rem;
    --size-1440: 90rem;
    --size-1600: 100rem;
    --size-1920: 120rem;
  }
}
/* semantic.css — barrel, do not edit */
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/blur.css */
@layer tokens {
  :root {
    --blur-backdrop: var(--blur-sm);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/border.css */
@layer tokens {
  :root {
    --border-style-normal: solid;
    --border-width-none: 0px;
    --border-width-sm: 1px;
    --border-width-md: 2px;
    --border-width-lg: 4px;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/color.css */
@layer tokens {
  :root {
    --color-accent: var(--color-brand);
    --color-accent-hover: var(--color-brand-hover);
    --color-accent-muted: var(--color-brand-muted);
    --color-accent-strong: var(--color-brand-strong);
    --color-active: var(--color-accent);
    --color-backdrop: oklch(from var(--color-black) l c h / var(--opacity-backdrop));
    --color-background: var(--color-white);
    --color-background-accent: var(--color-accent);
    --color-background-disabled: var(--color-gray-100);
    --color-background-media: var(--color-gray-200);
    --color-background-muted: var(--color-gray-100);
    --color-background-muted-hover: var(--color-gray-200);
    --color-background-surface: var(--color-background);
    --color-border: var(--color-gray-200);
    --color-border-on-muted: var(--color-gray-300);
    --color-border-hover: var(--color-gray-500);
    --color-border-hover-on-muted: var(--color-gray-600);
    --color-brand: var(--color-sienna-600);
    --color-brand-hover: var(--color-sienna-700);
    --color-brand-muted: var(--color-sienna-100);
    --color-brand-strong: var(--color-sienna-900);
    --color-credit: var(--color-text-muted);
    --color-danger: var(--color-red-600);
    --color-danger-hover: var(--color-red-700);
    --color-danger-muted: var(--color-red-100);
    --color-danger-strong: var(--color-red-800);
    --color-dark: var(--color-gray-900);
    --color-dark-hover: var(--color-black);
    --color-dark-muted: var(--color-gray-100);
    --color-dark-strong: var(--color-black);
    --color-focus: var(--color-text);
    --color-heading: var(--color-black);
    --color-highlight: var(--color-yellow-100);
    --color-highlight-hover: var(--color-yellow-200);
    --color-highlight-muted: var(--color-yellow-100);
    --color-highlight-strong: var(--color-yellow-900);
    --color-info: var(--color-blue-600);
    --color-info-hover: var(--color-blue-700);
    --color-info-muted: var(--color-blue-100);
    --color-info-strong: var(--color-blue-800);
    --color-light: var(--color-gray-200);
    --color-light-hover: var(--color-gray-300);
    --color-light-muted: var(--color-gray-100);
    --color-light-strong: var(--color-gray-700);
    --color-link: var(--color-text);
    --color-link-active: var(--color-active);
    --color-link-hover: var(--color-accent);
    --color-neutral: var(--color-gray-600);
    --color-neutral-hover: var(--color-gray-700);
    --color-neutral-muted: var(--color-gray-100);
    --color-neutral-strong: var(--color-gray-800);
    --color-shadow: var(--color-black);
    --color-shadow-light: oklch(from var(--color-shadow) l c h / var(--opacity-shadow));
    --color-shadow-medium: oklch(from var(--color-shadow) l c h / var(--opacity-backdrop));
    --color-shadow-strong: oklch(from var(--color-shadow) l c h / var(--opacity-overlay));
    --color-success: var(--color-green-600);
    --color-success-hover: var(--color-green-700);
    --color-success-muted: var(--color-green-100);
    --color-success-strong: var(--color-green-800);
    --color-text: var(--color-gray-900);
    --color-text-disabled: var(--color-gray-300);
    --color-text-hover: var(--color-gray-700);
    --color-text-muted: oklch(from var(--color-text) l c h / var(--opacity-muted));
    --color-text-on-accent: var(--color-white);
    --color-text-on-black: var(--color-white);
    --color-text-on-brand: var(--color-white);
    --color-text-on-danger: var(--color-white);
    --color-text-on-dark: var(--color-white);
    --color-text-on-highlight: var(--color-gray-900);
    --color-text-on-info: var(--color-white);
    --color-text-on-light: var(--color-gray-900);
    --color-text-on-muted: var(--color-gray-900);
    --color-text-on-neutral: var(--color-white);
    --color-text-on-success: var(--color-white);
    --color-text-on-surface: var(--color-text);
    --color-text-on-warning: var(--color-gray-900);
    --color-text-on-white: var(--color-black);
    --color-warning: var(--color-amber-500);
    --color-warning-hover: var(--color-amber-600);
    --color-warning-muted: var(--color-amber-100);
    --color-warning-strong: var(--color-amber-700);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/focus.css */
@layer tokens {
  :root {
    --focus-color-outline: var(--color-focus);
    --focus-outline-offset: 2px;
    --focus-outline-style: solid;
    --focus-outline-width: 1px;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/form.css */
@layer tokens {
  :root {
    --form-border-radius: var(--radius-xs);
    --form-border-width: var(--border-width-sm);
    --form-color-accent: var(--color-accent);
    --form-color-accent-hover: var(--color-accent-hover);
    --form-color-accent-muted: var(--color-accent-muted);
    --form-color-background: var(--color-white);
    --form-color-border: var(--color-border);
    --form-color-border-hover: var(--color-border-hover);
    --form-color-text: var(--color-text);
    --form-color-text-on-accent: var(--color-text-on-accent);
    --form-padding: var(--spacing-control);
    --form-shadow: var(--shadow-control);
    --form-shadow-hover: var(--shadow-control-hover);
    --form-transition: var(--transition-normal);
    --input-border-radius: var(--form-border-radius);
    --input-border-width: var(--form-border-width);
    --input-color-background: var(--form-color-background);
    --input-color-border: var(--form-color-border);
    --input-color-border-hover: var(--form-color-border-hover);
    --input-color-placeholder: var(--color-text-muted);
    --input-color-text: var(--form-color-text);
    --input-padding: var(--form-padding);
    --file-button-margin-inline-end: var(--size-12);
    --file-button-padding-block: var(--size-6);
    --file-button-padding-inline: var(--size-10);
    --textarea-border-radius: var(--form-border-radius);
    --textarea-border-width: var(--form-border-width);
    --textarea-color-background: var(--form-color-background);
    --textarea-color-border: var(--form-color-border);
    --textarea-color-border-hover: var(--form-color-border-hover);
    --textarea-color-placeholder: var(--color-text-muted);
    --textarea-color-text: var(--form-color-text);
    --textarea-min-height: 5lh;
    --textarea-padding: var(--form-padding);
    --select-border-radius: var(--form-border-radius);
    --select-border-width: var(--form-border-width);
    --select-color-background: var(--form-color-background);
    --select-color-border: var(--form-color-border);
    --select-color-border-hover: var(--form-color-border-hover);
    --select-color-optgroup: var(--color-text-muted);
    --select-color-text: var(--form-color-text);
    --select-icon: var(--icon-chevron);
    --select-icon-size: var(--icon-size);
    --select-padding: var(--form-padding);
    --select-padding-end: 2rem;
    --label-color-text: var(--form-color-text);
    --label-font-size: var(--font-size-xs);
    --label-font-weight: var(--font-weight-medium);
    --label-line-height: var(--line-height-snug);
    --label-padding-inline: 0;
    --label-padding-block: var(--spacing-2xs);
    --label-text-align: start;
    --label-text-transform: uppercase;
    --help-color-text: var(--color-text-muted);
    --help-font-size: var(--font-size-xs);
    --help-font-weight: var(--font-weight-normal);
    --help-margin: 0;
    --help-text-align: start;
    --checkable-color: var(--form-color-accent);
    --checkable-size: 1.25em;
    --checkbox-border-radius: 0;
    --checkbox-border-width: var(--form-border-width);
    --checkbox-color-background: var(--form-color-background);
    --checkbox-color-background-checked: var(--form-color-background);
    --checkbox-color-background-hover: var(--form-color-background);
    --checkbox-color-border: var(--form-color-border);
    --checkbox-color-border-checked: var(--checkable-color);
    --checkbox-color-border-hover: var(--form-color-border-hover);
    --checkbox-label-padding: 0 0 0 .3125rem;
    --checkbox-mask-checked: var(--icon-tick) center no-repeat;
    --checkbox-mask-indeterminate: var(--icon-dash) center no-repeat;
    --checkbox-scale-checked: 0.7;
    --radio-border-radius: var(--radius-pill);
    --radio-border-width: var(--form-border-width);
    --radio-border-width-checked: var(--border-width-md);
    --radio-color-background: var(--form-color-background);
    --radio-color-background-checked: var(--checkable-color);
    --radio-color-background-hover: var(--form-color-background);
    --radio-color-border: var(--form-color-border);
    --radio-color-border-checked: var(--checkable-color);
    --radio-color-border-hover: var(--form-color-border-hover);
    --radio-label-padding: 0 0 0 .3125rem;
    --radio-scale-checked: 0.5;
    --range-thumb-border-width: var(--size-4);
    --range-thumb-border-color: var(--color-white);
    --range-thumb-color: var(--form-color-accent);
    --range-thumb-size: var(--size-24);
    --range-track-color: var(--form-color-border);
    --range-track-height: calc(var(--border-width-sm) + 2px);
    --switch-border-radius: var(--radius-pill);
    --switch-border-width: var(--form-border-width);
    --switch-color-background: var(--form-color-background);
    --switch-color-background-checked: var(--form-color-background);
    --switch-color-background-hover: var(--form-color-background);
    --switch-color-border: var(--form-color-border);
    --switch-thumb-color: var(--form-color-accent);
    --switch-thumb-color-checked: var(--form-color-background);
    --switch-thumb-scale: 0.6;
    --switch-track-color: var(--form-color-background);
    --switch-track-color-checked: var(--form-color-accent);
    --switch-width: var(--size-40);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/grid.css */
@layer tokens {
  :root {
    --columns-mobile: 1;
    --columns-tablet: 12;
    --columns-tablet-wide: 12;
    --columns-laptop: 12;
    --columns-desktop: 12;
    --gap: var(--spacing-md);
    --gap-column: var(--spacing-md);
    --gap-row: var(--spacing-fluid-sm);
    --span-full: 1 / -1;
    --span-half: span calc(var(--columns) / 2);
    --span-quarter: span calc(var(--columns) / 4);
    --span-third: span calc(var(--columns) / 3);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/icon.css */
@layer tokens {
  :root {
    --icon-size: var(--size-16);
    --icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%222%22 y1=%228%22 x2=%2212%22 y2=%228%22/><polyline points=%228 4 12 8 8 12%22/></svg>');
    --icon-arrow-skip: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%222%22 y1=%228%22 x2=%2210%22 y2=%228%22/><polyline points=%226 4 10 8 6 12%22/><line x1=%2214%22 y1=%223%22 x2=%2214%22 y2=%2213%22/></svg>');
    --icon-chevron: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%222 5 8 11 14 5%22/></svg>');
    --icon-close: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%223%22 y1=%223%22 x2=%2213%22 y2=%2213%22/><line x1=%2213%22 y1=%223%22 x2=%223%22 y2=%2213%22/></svg>');
    --icon-dash: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%223%22 y1=%228%22 x2=%2213%22 y2=%228%22/></svg>');
    --icon-external-link: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M10 2h4v4%22/><path d=%22M6.7 9.3 14 2%22/><path d=%22M12 8.7v4a1.3 1.3 0 0 1-1.3 1.3H3.3a1.3 1.3 0 0 1-1.3-1.3V5.3a1.3 1.3 0 0 1 1.3-1.3h4%22/></svg>');
    --icon-filter: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M1.3 3.3h13.4%22/><path d=%22M4 8h8%22/><path d=%22M6 12.7h4%22/></svg>');
    --icon-menu: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%222%22 y1=%224%22 x2=%2214%22 y2=%224%22/><line x1=%222%22 y1=%228%22 x2=%2214%22 y2=%228%22/><line x1=%222%22 y1=%2212%22 x2=%2214%22 y2=%2212%22/></svg>');
    --icon-plus: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%228%22 y1=%223%22 x2=%228%22 y2=%2213%22/><line x1=%223%22 y1=%228%22 x2=%2213%22 y2=%228%22/></svg>');
    --icon-search: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%227%22 cy=%227%22 r=%225%22/><line x1=%2210.5%22 y1=%2210.5%22 x2=%2214%22 y2=%2214%22/></svg>');
    --icon-share: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M8 1.3v8.7%22/><path d=%22m10.7 4-2.7-2.7-2.7 2.7%22/><path d=%22M2.7 8v5.3a1.3 1.3 0 0 0 1.3 1.3h8a1.3 1.3 0 0 0 1.3-1.3v-5.3%22/></svg>');
    --icon-tick: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%223 8.5 6.5 12 13 4%22/></svg>');
    --icon-toc: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M10.7 3.3H2%22/><path d=%22M10.7 8H2%22/><path d=%22M10.7 12.7H2%22/><path d=%22M14 3.3h.01%22/><path d=%22M14 8h.01%22/><path d=%22M14 12.7h.01%22/></svg>');
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/motion.css */
@layer tokens {
  :root {
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 600ms;
    --easing: var(--easing-in-out);
    --easing-linear: cubic-bezier(0, 0, 1, 1);
    --easing-in: cubic-bezier(0.42, 0, 1, 1);
    --easing-out: cubic-bezier(0, 0, 0.58, 1);
    --easing-in-out: cubic-bezier(0.42, 0, 0.58, 1);
    --easing-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
    --easing-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --easing-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-bounce: cubic-bezier(0.165, 0.84, 0.44, 1);
    --transition-fast: all var(--duration-fast) var(--easing);
    --transition-normal: all var(--duration-normal) var(--easing);
    --transition-slow: all var(--duration-slow) var(--easing);
    --transition-box-shadow: box-shadow var(--duration-normal) var(--easing);
    --transition-color: color var(--duration-normal) var(--easing), background-color var(--duration-normal) var(--easing), border-color var(--duration-normal) var(--easing), outline-color var(--duration-normal) var(--easing), fill var(--duration-normal) var(--easing), stroke var(--duration-normal) var(--easing), text-decoration var(--duration-normal) var(--easing);
    --transition-opacity: opacity var(--duration-normal) var(--easing);
    --transition-transform: transform var(--duration-normal) var(--easing);
    --transition-property-color: color, background-color, border-color, outline-color, fill, stroke, text-decoration;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/opacity.css */
@layer tokens {
  :root {
    --opacity-backdrop: 0.5;
    --opacity-disabled: 0.5;
    --opacity-hover: 0.75;
    --opacity-muted: 0.7;
    --opacity-overlay: 0.75;
    --opacity-shadow: 0.1;
    --opacity-subtle: 0.35;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/radius.css */
@layer tokens {
  :root {
    --radius-2xs: var(--size-2);
    --radius-xs: var(--size-4);
    --radius-sm: var(--size-8);
    --radius-md: var(--size-12);
    --radius-lg: var(--size-16);
    --radius-xl: var(--size-24);
    --radius-2xl: var(--size-32);
    --radius-none: 0px;
    --radius-control: var(--radius-sm);
    --radius-surface: var(--radius-md);
    --radius-pill: 9999px;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/ratio.css */
@layer tokens {
  :root {
    --ratio-cinema: 21 / 9;
    --ratio-hero: 4 / 1;
    --ratio-landscape: 4 / 3;
    --ratio-photography: 3 / 2;
    --ratio-portrait: 3 / 4;
    --ratio-print: 5 / 4;
    --ratio-social: 4 / 5;
    --ratio-square: 1 / 1;
    --ratio-story: 9 / 16;
    --ratio-video: 16 / 9;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/shadow.css */
@layer tokens {
  :root {
    --shadow-control: var(--shadow-none);
    --shadow-control-hover: var(--shadow-none);
    --shadow-surface: var(--shadow-sm);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/size.css */
@layer tokens {
  :root {
    --size-tablet: var(--size-768);
    --size-tablet-wide: var(--size-1024);
    --size-laptop: var(--size-1440);
    --size-desktop: var(--size-1600);
    --size-desktop-wide: var(--size-1920);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/spacing.css */
@layer tokens {
  :root {
    --spacing-2xs: var(--size-5);
    --spacing-xs: var(--size-10);
    --spacing-sm: var(--size-20);
    --spacing-md: var(--size-30);
    --spacing-lg: var(--size-40);
    --spacing-xl: var(--size-60);
    --spacing-2xl: var(--size-100);
    --spacing-3xl: var(--size-150);
    --spacing-fluid-2xs: clamp(0.3125rem, 0.2025rem + 0.4695vw, 0.625rem);
    --spacing-fluid-xs: clamp(0.625rem, 0.4049rem + 0.9390vw, 1.25rem);
    --spacing-fluid-sm: clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem);
    --spacing-fluid-md: clamp(1.875rem, 1.2148rem + 2.8169vw, 3.75rem);
    --spacing-fluid-lg: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);
    --spacing-fluid-xl: clamp(3.125rem, 2.0246rem + 4.6948vw, 6.25rem);
    --spacing-fluid-2xl: clamp(3.75rem, 2.4296rem + 5.6338vw, 7.5rem);
    --spacing-card: var(--spacing-sm);
    --spacing-control: var(--spacing-xs);
    --spacing-heading: var(--spacing-fluid-sm);
    --spacing-section: var(--spacing-fluid-2xl);
    --spacing-surface: var(--spacing-fluid-sm);
    --spacing-typography: var(--spacing-fluid-xs);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/typography.css */
@layer tokens {
  :root {
    --font-family-code: var(--font-family-mono);
    --font-family-heading: var(--font-family-sans);
    --font-family-text: var(--font-family-sans);
    --font-weight-control: var(--font-weight-medium);
    --font-weight-heading: var(--font-weight-bold);
    --font-weight-text: var(--font-weight-normal);
    --line-height-heading: var(--line-height-tight);
    --line-height-text: var(--line-height-normal);
    --font-size-2xs: var(--size-12);
    --font-size-xs: var(--size-14);
    --font-size-sm: var(--size-16);
    --font-size-md: var(--size-18);
    --font-size-lg: var(--size-24);
    --font-size-xl: var(--size-48);
    --font-size-2xl: var(--size-64);
    --font-size-display: var(--size-96);
    --font-size-fluid-2xs: clamp(0.625rem, 0.5810rem + 0.1878vw, 0.75rem);
    --font-size-fluid-xs: clamp(0.75rem, 0.7060rem + 0.1878vw, 0.875rem);
    --font-size-fluid-sm: clamp(0.875rem, 0.8310rem + 0.1878vw, 1rem);
    --font-size-fluid-md: clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem);
    --font-size-fluid-lg: clamp(1.125rem, 0.9930rem + 0.5634vw, 1.5rem);
    --font-size-fluid-xl: clamp(1.5rem, 0.9718rem + 2.2535vw, 3rem);
    --font-size-fluid-2xl: clamp(3rem, 2.6479rem + 1.5023vw, 4rem);
    --font-size-fluid-display: clamp(4rem, 3.2958rem + 3.0047vw, 6rem);
    --font-size-heading-01: var(--font-size-fluid-xl);
    --font-size-heading-02: var(--font-size-fluid-lg);
    --font-size-heading-03: var(--font-size-fluid-md);
    --font-size-heading-04: var(--font-size-fluid-sm);
    --font-size-heading-05: var(--font-size-fluid-sm);
    --font-size-heading-06: var(--font-size-fluid-sm);
    --font-size-small: var(--font-size-fluid-sm);
    --font-size-text: var(--font-size-fluid-md);
    --letter-spacing-none: 0em;
    --letter-spacing-sm: 0.025em;
    --letter-spacing-md: 0.05em;
    --letter-spacing-lg: 0.1em;
    --letter-spacing-xl: 0.2em;
    --max-width-heading: 50ch;
    --max-width-item: 30ch;
    --max-width-paragraph: 70ch;
    --text-transform-heading: none;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* semantic/z-index.css */
@layer tokens {
  :root {
    --z-index-below: -1;
    --z-index-base: 0;
    --z-index-raised: 10;
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-drawer: 300;
    --z-index-modal: 400;
    --z-index-toast: 500;
    --z-index-tooltip: 600;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* themes/dark.css */
@layer tokens {
  @media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme="light"]) {
      --color-background: var(--color-gray-950);
      --color-background-disabled: var(--color-gray-900);
      --color-background-media: var(--color-gray-800);
      --color-background-muted: var(--color-gray-900);
      --color-background-muted-hover: var(--color-gray-800);
      --color-border: var(--color-gray-800);
      --color-heading: var(--color-white);
      --color-shadow: var(--color-white);
      --color-text: var(--color-gray-200);
      --color-text-disabled: var(--color-gray-600);
      --color-text-hover: var(--color-gray-300);
      --color-text-muted: var(--color-gray-400);
      --form-color-background: var(--color-gray-900);
    }
  }
}
/* 2. Component tokens — generic */
/* index.css — auto-generated, do not edit */
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/alert.css */
@layer tokens {
  :root {
    --alert-align: start;
    --alert-border-radius: var(--radius-none);
    --alert-border-style: var(--border-style-normal);
    --alert-border-width: var(--border-width-sm);
    --alert-font-size: var(--font-size-small);
    --alert-gap: var(--spacing-sm);
    --alert-margin: 0;
    --alert-padding-block: var(--spacing-sm);
    --alert-padding-inline: 0;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/badge.css */
@layer tokens {
  :root {
    --badge-border-radius: var(--radius-pill);
    --badge-border-style: solid;
    --badge-border-width: 0;
    --badge-color-background: var(--color-background-muted);
    --badge-color-background-hover: var(--color-background-muted-hover);
    --badge-color-border: transparent;
    --badge-font-size: var(--font-size-2xs);
    --badge-font-weight: var(--font-weight-control);
    --badge-line-height: var(--line-height-snug);
    --badge-padding-inline: var(--spacing-xs);
    --badge-padding-block: var(--spacing-2xs);
    --badge-text-transform: none;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/breadcrumb.css */
@layer tokens {
  :root {
    --breadcrumb-border-style: var(--border-style-normal);
    --breadcrumb-border-width: var(--border-width-sm);
    --breadcrumb-color-border: var(--color-border);
    --breadcrumb-color-separator: var(--color-text-muted);
    --breadcrumb-color-text: var(--color-text-muted);
    --breadcrumb-color-text-active: var(--color-text);
    --breadcrumb-font-size: var(--font-size-xs);
    --breadcrumb-gap: var(--spacing-xs);
    --breadcrumb-padding-block: var(--spacing-xs);
    --breadcrumb-separator: "/";
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/button.css */
@layer tokens {
  :root {
    --btn-border-radius: var(--radius-control);
    --btn-border-style: var(--border-style-normal);
    --btn-border-width: var(--border-width-sm);
    --btn-color-background: var(--color-brand);
    --btn-color-background-hover: var(--color-brand-hover);
    --btn-color-border: var(--color-brand);
    --btn-color-border-hover: var(--color-brand-hover);
    --btn-color-text: var(--color-text-on-brand);
    --btn-color-text-hover: var(--color-text-on-brand);
    --btn-color-text-decoration: transparent;
    --btn-color-text-decoration-hover: transparent;
    --btn-control-color-background: var(--color-background-muted);
    --btn-control-color-background-hover: var(--color-background-muted-hover);
    --btn-control-color-border: transparent;
    --btn-control-color-border-hover: transparent;
    --btn-control-color-text: var(--color-text);
    --btn-control-color-text-hover: var(--color-text);
    --btn-font-size: var(--font-size-fluid-sm);
    --btn-font-weight: var(--font-weight-control);
    --btn-gap: var(--spacing-xs);
    --btn-line-height: var(--line-height-snug);
    --btn-padding-inline: var(--spacing-control);
    --btn-padding-block: var(--spacing-control);
    --btn-shadow: var(--shadow-control);
    --btn-shadow-hover: var(--shadow-control-hover);
    --btn-text-decoration-line: underline;
    --btn-text-transform: none;
    --btn-transition: var(--transition-color);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/card.css */
@layer tokens {
  :root {
    --card-border-radius: var(--item-border-radius);
    --card-border-style: var(--item-border-style);
    --card-border-width: var(--item-border-width);
    --card-color-background: var(--item-color-background);
    --card-color-border: var(--item-color-border);
    --card-color-text: var(--item-color-text);
    --card-gap: var(--item-gap);
    --card-media-border-radius: var(--item-media-border-radius);
    --card-media-border-style: var(--item-media-border-style);
    --card-media-border-width: var(--item-media-border-width);
    --card-media-color-background: var(--item-media-color-background);
    --card-media-icon-align: var(--item-media-icon-align);
    --card-media-icon-border-radius: var(--item-media-icon-border-radius);
    --card-media-icon-border-style: var(--item-media-icon-border-style);
    --card-media-icon-border-width: var(--item-media-icon-border-width);
    --card-media-icon-color: var(--item-media-icon-color);
    --card-media-icon-color-background: var(--item-media-icon-color-background);
    --card-media-icon-margin-inline: var(--item-media-icon-margin-inline);
    --card-media-icon-margin-block: var(--item-media-icon-margin-block);
    --card-media-icon-ratio: var(--item-media-icon-ratio);
    --card-media-icon-size: var(--item-media-icon-size);
    --card-media-icon-width: var(--item-media-icon-width);
    --card-media-order: var(--item-media-order);
    --card-media-ratio: var(--item-media-ratio);
    --card-order: var(--item-order);
    --card-padding-inline: var(--item-padding-inline);
    --card-padding-block: var(--item-padding-block);
    --card-shadow: var(--item-shadow);
    --card-shadow-hover: var(--item-shadow-hover);
    --card-surtitle-margin-block-end: calc(var(--card-gap) * -1);
    --card-title-color: var(--item-title-color);
    --card-title-font-family: var(--item-title-font-family);
    --card-title-font-size: var(--item-title-font-size);
    --card-title-font-weight: var(--item-title-font-weight);
    --card-title-line-height: var(--item-title-line-height);
    --card-transition: var(--transition-box-shadow);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/container.css */
@layer tokens {
  :root {
    --container-max-width-mobile: 100%;
    --container-max-width-tablet: 100%;
    --container-max-width-tablet-wide: 100%;
    --container-max-width-laptop: 100%;
    --container-max-width-desktop: var(--size-desktop);
    --grid-column: var(--grid-column-mobile);
    --grid-column-desktop: var(--span-quarter);
    --grid-column-laptop: var(--span-quarter);
    --grid-column-mobile: var(--span-full);
    --grid-column-tablet: var(--span-half);
    --grid-column-tablet-wide: var(--span-third);
    --gutter: var(--spacing-fluid-md);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/details.css */
@layer tokens {
  :root {
    --details-border-radius: var(--radius-surface);
    --details-box-shadow: var(--shadow-sm);
    --details-box-shadow-hover: var(--shadow-md);
    --details-color-background: var(--color-background);
    --details-color-border: var(--color-border);
    --details-color-border-open: var(--color-border-hover);
    --details-color-text: var(--color-text);
    --details-icon: var(--icon-chevron);
    --details-icon-size: var(--icon-size);
    --details-margin: var(--spacing-sm);
    --details-content-padding-inline: var(--spacing-sm);
    --details-content-padding-block: var(--spacing-sm);
    --details-summary-font-family: var(--font-family-heading);
    --details-summary-font-size: var(--font-size-md);
    --details-summary-font-weight: var(--font-weight-heading);
    --details-summary-padding-inline: var(--spacing-sm);
    --details-summary-padding-block: var(--spacing-sm);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/drawer.css */
@layer tokens {
  :root {
    --drawer-backdrop-blur: var(--blur-backdrop);
    --drawer-backdrop-color: var(--color-backdrop);
    --drawer-border-style: var(--border-style-normal);
    --drawer-border-width: var(--border-width-sm);
    --drawer-bottom: 0;
    --drawer-color-background: var(--color-background-surface);
    --drawer-color-border: var(--color-border);
    --drawer-color-text: var(--color-text-on-surface);
    --drawer-end: 0;
    --drawer-height: 50vh;
    --drawer-padding-block: var(--spacing-surface);
    --drawer-padding-inline: var(--spacing-surface);
    --drawer-shadow: var(--shadow-surface);
    --drawer-start: auto;
    --drawer-top: 0;
    --drawer-transition-duration: var(--duration-slow);
    --drawer-transition-easing: var(--easing-out-expo);
    --drawer-translate: translateX(100%);
    --drawer-width: 320px;
    --drawer-z-index: var(--z-index-drawer);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/dropdown.css */
@layer tokens {
  :root {
    --dropdown-border-radius: var(--radius-surface);
    --dropdown-border-style: var(--border-style-normal);
    --dropdown-border-width: var(--border-width-sm);
    --dropdown-color-background: var(--color-background-surface);
    --dropdown-color-border: var(--color-border);
    --dropdown-color-text: var(--color-text-on-surface);
    --dropdown-icon: var(--icon-chevron);
    --dropdown-icon-size: var(--icon-size);
    --dropdown-item-border-radius: var(--radius-xs);
    --dropdown-item-color-background: var(--color-background);
    --dropdown-item-color-background-hover: var(--color-background-muted);
    --dropdown-item-font-size: var(--font-size-xs);
    --dropdown-item-padding-inline: var(--spacing-xs);
    --dropdown-item-padding-block: var(--spacing-xs);
    --dropdown-min-width: 12rem;
    --dropdown-padding: var(--size-4);
    --dropdown-shadow: var(--shadow-sm);
    --dropdown-transition-duration: var(--duration-fast);
    --dropdown-transition-easing: var(--easing-out);
    --dropdown-translate-y: -4px;
    --dropdown-z-index: var(--z-index-dropdown);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/embed.css */
@layer tokens {
  :root {
    --embed-border-radius: var(--radius-none);
    --embed-border-style: var(--border-style-normal);
    --embed-border-width: var(--border-width-sm);
    --embed-box-shadow: none;
    --embed-color-border: var(--color-border);
    --embed-max-width: 100%;
    --embed-ratio: var(--ratio-video);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/figure.css */
@layer tokens {
  :root {
    --figure-figcaption-font-size: var(--font-size-sm);
    --figure-figcaption-gap: var(--spacing-xs);
    --figure-gap: var(--spacing-xs);
    --figure-margin-block: var(--spacing-md);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/heading.css */
@layer tokens {
  :root {
    --heading-gap: var(--spacing-xs);
    --heading-margin-block-end: var(--spacing-fluid-md);
    --heading-surtitle-margin-block-end: calc(var(--heading-gap) * -1);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/hero.css */
@layer tokens {
  :root {
    --hero-color-background: var(--color-background);
    --hero-color-link: var(--color-text);
    --hero-color-text: var(--color-text);
    --hero-gap: var(--spacing-sm);
    --hero-height: clamp(25rem, 23.2394rem + 7.5117vw, 30rem);
    --hero-home-height: clamp(30rem, 26.4789rem + 15.0235vw, 40rem);
    --hero-media-brightness: 0.3;
    --hero-max-height: calc(100vh - var(--header-height));
    --hero-padding-block: var(--spacing-md);
    --hero-padding-inline: 0px;
    --hero-title-color: var(--color-text);
    --hero-title-font-size: var(--font-size-heading-01);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/item.css */
@layer tokens {
  :root {
    --item-border-radius: var(--radius-surface);
    --item-border-style: var(--border-style-normal);
    --item-border-width: var(--border-width-sm);
    --item-btn-border-width: 0;
    --item-btn-color-background: transparent;
    --item-btn-color-text: var(--color-brand);
    --item-btn-padding: 0;
    --item-btn-text-decoration: none;
    --item-btn-text-decoration-hover: underline;
    --item-color-background: var(--color-background);
    --item-color-border: var(--color-border);
    --item-color-text: var(--color-text-muted);
    --item-gap: var(--spacing-sm);
    --item-media-border-radius: var(--radius-none);
    --item-media-border-style: var(--item-border-style);
    --item-media-border-width: var(--item-border-width);
    --item-media-color-background: var(--media-color-background);
    --item-media-icon-align: start;
    --item-media-icon-border-radius: var(--item-media-border-radius);
    --item-media-icon-border-style: var(--item-media-border-style);
    --item-media-icon-border-width: var(--item-media-border-width);
    --item-media-icon-color: var(--item-title-color);
    --item-media-icon-color-background: transparent;
    --item-media-icon-color-border: transparent;
    --item-media-icon-margin-inline: var(--item-padding-inline);
    --item-media-icon-margin-block: var(--item-padding-block);
    --item-media-icon-ratio: var(--ratio-square);
    --item-media-icon-size: var(--font-size-fluid-md);
    --item-media-icon-width: auto;
    --item-media-order: -2;
    --item-media-ratio: var(--ratio-video);
    --item-metas-border-end: 0;
    --item-metas-border-start: 0;
    --item-metas-color-background: var(--item-color-background);
    --item-metas-color-text: var(--color-text-muted);
    --item-metas-font-size: var(--font-size-2xs);
    --item-metas-order: -1;
    --item-metas-padding-inline: var(--spacing-card);
    --item-metas-padding-block: var(--spacing-card);
    --item-metas-padding-block-start: var(--spacing-card);
    --item-metas-padding-block-end: 0;
    --item-order: none;
    --item-padding-inline: var(--spacing-card);
    --item-padding-block: var(--spacing-card);
    --item-padding-block-start: var(--spacing-card);
    --item-padding-block-end: var(--spacing-card);
    --item-shadow: var(--shadow-sm);
    --item-shadow-hover: var(--shadow-md);
    --item-surtitle-margin-block-end: calc(var(--item-gap) * -1);
    --item-title-color: var(--color-text);
    --item-title-font-family: var(--font-family-heading);
    --item-title-font-size: var(--font-size-fluid-md);
    --item-title-font-weight: var(--font-weight-heading);
    --item-title-line-height: var(--line-height-heading);
    --item-transition: var(--transition-box-shadow);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/items.css */
@layer tokens {
  :root {
    --items-cols: auto-fill;
    --items-gap: var(--gap);
    --items-min-width: 30ch;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/link.css */
@layer tokens {
  :root {
    --link-color-text-decoration: initial;
    --link-color-text-decoration-hover: transparent;
    --link-text-decoration-line: underline;
    --link-transition: var(--transition-color);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/list.css */
@layer tokens {
  :root {
    --list-item-font-size: var(--font-size-sm);
    --list-item-gap: var(--spacing-2xs);
    --list-item-marker: '-';
    --list-item-marker-gap: var(--spacing-2xs);
    --list-label-font-weight: var(--font-weight-bold);
    --list-label-margin-block: var(--spacing-2xs);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/logo.css */
@layer tokens {
  :root {
    --logo-color: var(--color-text);
    --logo-font-family: var(--font-family-heading);
    --logo-font-size: var(--font-size-md);
    --logo-font-weight: var(--font-weight-heading);
    --logo-height: var(--size-24);
    --logo-height-tablet: var(--size-32);
    --logo-letter-spacing: 0;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/map.css */
@layer tokens {
  :root {
    --map-border-radius: var(--radius-none);
    --map-color-background: var(--color-background-muted);
    --map-margin-block: var(--spacing-md);
    --map-ratio: var(--ratio-cinema);
    --map-ratio-mobile: var(--ratio-square);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/media.css */
@layer tokens {
  :root {
    --media-color-background: var(--color-background-media);
    --media-logo-max-height: 70%;
    --media-logo-max-width: 60%;
    --media-ratio: var(--ratio-video);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/modal.css */
@layer tokens {
  :root {
    --modal-backdrop-blur: var(--blur-backdrop);
    --modal-backdrop-color: var(--color-backdrop);
    --modal-border-style: var(--border-style-normal);
    --modal-border-width: var(--border-width-sm);
    --modal-color-background: var(--color-background-surface);
    --modal-color-border: var(--color-border);
    --modal-color-text: var(--color-text-on-surface);
    --modal-margin: var(--spacing-sm);
    --modal-max-height: 100dvh;
    --modal-max-width: 30rem;
    --modal-min-height: 0;
    --modal-padding-block: var(--spacing-surface);
    --modal-padding-inline: var(--spacing-surface);
    --modal-radius: var(--radius-surface);
    --modal-shadow: var(--shadow-surface);
    --modal-transition-duration: var(--duration-slow);
    --modal-transition-easing: var(--easing-out-expo);
    --modal-translate: translateY(1rem);
    --modal-z-index: var(--z-index-modal);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/nav.css */
@layer tokens {
  :root {
    --nav-color-text: var(--color-link);
    --nav-color-text-active: var(--color-link-active);
    --nav-color-text-hover: var(--color-link-hover);
    --nav-color-text-muted: var(--color-text-muted);
    --nav-font-size: var(--font-size-text);
    --nav-gap: 0;
    --nav-line-height: var(--line-height-snug);
    --nav-margin-inline: 0;
    --nav-margin-block: 0;
    --nav-link-padding-inline: var(--spacing-xs);
    --nav-link-padding-block: var(--spacing-xs);
    --nav-title-font-size: var(--font-size-md);
    --nav-title-font-weight: var(--font-weight-heading);
    --nav-title-padding-inline: var(--nav-link-padding-inline);
    --nav-title-padding-block: var(--nav-link-padding-block);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/pagination.css */
@layer tokens {
  :root {
    --pagination-disabled-opacity: var(--opacity-disabled);
    --pagination-gap: var(--spacing-2xs);
    --pagination-icon-first: var(--icon-arrow-skip);
    --pagination-icon-last: var(--icon-arrow-skip);
    --pagination-icon-next: var(--icon-arrow);
    --pagination-icon-previous: var(--icon-arrow);
    --pagination-icon-size: var(--icon-size);
    --pagination-item-border-radius: var(--radius-sm);
    --pagination-item-color-background: transparent;
    --pagination-item-color-background-active: var(--color-brand);
    --pagination-item-color-background-hover: var(--color-background-muted);
    --pagination-item-color-text: var(--color-text);
    --pagination-item-color-text-active: var(--color-text-on-brand);
    --pagination-item-color-text-hover: var(--color-text);
    --pagination-item-font-size: var(--font-size-sm);
    --pagination-item-font-weight: var(--font-weight-normal);
    --pagination-item-size: 2.25rem;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/surtitle.css */
@layer tokens {
  :root {
    --surtitle-color-text: var(--color-text-muted);
    --surtitle-font-size: var(--font-size-xs);
    --surtitle-font-weight: var(--font-weight-bold);
    --surtitle-letter-spacing: var(--letter-spacing-md);
    --surtitle-line-height: var(--line-height-normal);
    --surtitle-margin-block-end: var(--spacing-2xs);
    --surtitle-margin-block-start: 0;
    --surtitle-text-transform: uppercase;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/table.css */
@layer tokens {
  :root {
    --table-cell-padding-inline: var(--spacing-sm);
    --table-cell-padding-block: var(--spacing-xs);
    --table-color-background-header: var(--color-background-muted);
    --table-color-background-striped: var(--color-background-muted);
    --table-color-border: var(--color-border);
    --table-font-size: var(--font-size-sm);
  }
}
/* 3. Hugolify-specific tokens */
/* hugolify.css — barrel, do not edit */

/* components */
/* Do not edit directly, this file was auto-generated. */

/* components/audio.css */
@layer tokens {
  :root {
    --audio-width: 100%;
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/back.css */
@layer tokens {
  :root {
    --back-font-size: var(--font-size-small);
    --back-gap: var(--spacing-2xs);
    --back-icon: var(--icon-arrow);
    --back-icon-size: var(--icon-size);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/block-editorial.css */
@layer tokens {
  :root {
    --block-editorial-full-gap: 0px;
    --block-editorial-full-padding-block: 0px;
    --block-editorial-full-padding-inline: 0px;
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/block-informations.css */
@layer tokens {
  :root {
    --block-informations-media-icon-size: var(--font-size-fluid-xl);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/block-instagram.css */
@layer tokens {
  :root {
    --block-instagram-item-max-width: 300px;
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/block-latest.css */
@layer tokens {
  :root {
    --block-latest-gap: var(--gap);
    --block-latest-list-items-margin-block-start: var(--spacing-lg);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/block-logos.css */
@layer tokens {
  :root {
    --block-logos-item-ratio: var(--ratio-square);
    --block-logos-item-image-max-height: 60%;
    --block-logos-item-image-max-width: 70%;
    --block-logos-items-min-width-sm: 10ch;
    --block-logos-items-min-width-md: 18ch;
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/block-quote.css */
@layer tokens {
  :root {
    --block-quote-gap: var(--gap);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/block-selected.css */
@layer tokens {
  :root {
    --block-selected-gap: var(--gap);
    --block-selected-list-items-margin-block-start: var(--spacing-lg);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/block-testimonials.css */
@layer tokens {
  :root {
    --block-testimonials-columns: 3;
    --block-testimonials-gap: var(--gap);
    --block-testimonials-list-gap: var(--spacing-sm);
  }
}

/* tokens/component/block-title.css */

/* tokens/component/block-video.css */

/* Do not edit directly, this file was auto-generated. */

/* components/block.css */
@layer tokens {
  :root {
    --block-gap: var(--spacing-md);
    --block-gap-tablet: var(--spacing-lg);
    --block-gap-laptop: var(--spacing-lg);
    --block-gap-desktop: var(--spacing-xl);
    --block-padding-block: var(--spacing-section);
    --block-bg-color: var(--color-background-muted);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/card.css */
@layer tokens {
  :root {
    --card-border-width: var(--border-width-none);
    --card-color-background: var(--color-background-muted);
    --card-media-color-background: transparent;
    --card-transition: var(--transition-normal);
    --card-font-size: var(--font-size-xs);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/carousel.css */
@layer tokens {
  :root {
    --carousel-arrow-border-width: var(--border-width-sm);
    --carousel-arrow-color: var(--color-link);
    --carousel-arrow-color-background: transparent;
    --carousel-arrow-color-background-hover: transparent;
    --carousel-arrow-color-border: var(--color-link);
    --carousel-arrow-color-border-hover: var(--color-link-hover);
    --carousel-arrow-color-hover: var(--color-link-hover);
    --carousel-arrow-margin-inline: var(--spacing-xs);
    --carousel-pagination-color-active: var(--color-active);
    --carousel-pagination-margin-block: var(--spacing-sm);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/comparison.css */
@layer tokens {
  :root {
    --comparison-badge-color-background: var(--color-brand-muted);
    --comparison-badge-color-text: var(--color-brand-strong);
    --comparison-item-box-shadow-highlighted: var(--shadow-lg);
    --comparison-item-color-background: var(--color-background-muted);
    --comparison-item-color-background-on-block-light: var(--color-background);
    --comparison-item-color-background-highlighted: var(--color-background-muted);
    --comparison-item-footer-color-text: var(--item-color-text);
    --comparison-item-footer-gap: var(--spacing-xs);
    --comparison-item-footer-padding: var(--comparison-item-padding);
    --comparison-item-header-color-text: var(--item-color-text);
    --comparison-item-header-gap: var(--spacing-xs);
    --comparison-item-header-padding: var(--comparison-item-padding);
    --comparison-item-padding: var(--spacing-sm);
    --comparison-pricing-font-size: var(--font-size-lg);
    --comparison-pricing-font-weight: var(--font-weight-bold);
    --comparison-pricing-sub-font-size: var(--font-size-xs);
    --comparison-pricing-sub-color-text: var(--color-text-muted);
    --comparison-list-color-border: var(--color-border);
    --comparison-list-item-padding-block: var(--spacing-xs);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/editorial.css */
@layer tokens {
  :root {
    --editorial-content-padding-inline-end: 0px;
    --editorial-content-padding-inline-start: 0px;
    --editorial-gap: var(--gap);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/footer.css */
@layer tokens {
  :root {
    --footer-color-background: var(--color-background-muted);
    --footer-color-border: var(--color-border);
    --footer-color-text: var(--color-text);
    --footer-gap: var(--spacing-lg);
    --footer-padding-block: var(--spacing-xl);
    --footer-logo-height: var(--logo-height);
    --footer-logo-height-tablet: var(--logo-height-tablet);
    --footer-logo-height-tablet-wide: var(--footer-logo-height-tablet);
    --footer-logo-height-laptop: var(--footer-logo-height-tablet);
    --footer-logo-height-desktop: var(--footer-logo-height-tablet);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/gallery.css */
@layer tokens {
  :root {
    --gallery-gap: var(--gap);
    --gallery-item-color-background: var(--color-background-media);
    --gallery-item-radius: 0;
    --gallery-item-ratio: 1;
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/header.css */
@layer tokens {
  :root {
    --header-color-background: var(--color-background);
    --header-color-border: var(--color-border);
    --header-color-link: var(--color-link);
    --header-color-text: var(--color-text);
    --header-gap: var(--spacing-sm);
    --header-height: 84px;
    --header-offset: var(--spacing-sm);
    --header-offset-scroll-up: calc(var(--header-height) + var(--header-offset));
    --header-padding-inline: 0px;
    --header-padding-block: var(--spacing-sm);
    --header-shadow: var(--shadow-sm);
    --header-z-index: calc(var(--z-index-drawer) - 1);
    --header-logo-max-width: 85%;
    --header-transition-duration: var(--duration-normal);
    --header-transition-easing: var(--easing-out);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/images.css */
@layer tokens {
  :root {
    --images-gap: var(--gap);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/item.css */
@layer tokens {
  :root {
    --item-font-size: var(--font-size-small);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/items.css */
@layer tokens {
  :root {
    --items-carousel-max-width: 75vw;
    --items-nav-margin-block-start: var(--spacing-fluid-md);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/main-menu.css */
@layer tokens {
  :root {
    --main-menu-color-background: var(--color-background);
    --main-menu-color-text: var(--color-text);
    --main-menu-color-text-hover: var(--color-brand);
    --main-menu-padding-inline: var(--spacing-sm);
    --main-menu-padding-block: var(--spacing-sm);
    --main-menu-shadow: var(--shadow-sm);
    --main-menu-z-index: var(--z-index-sticky);
    --main-menu-font-size: var(--font-size-text);
    --main-menu-dropdown-color-background: var(--color-background-muted);
    --main-menu-dropdown-radius: var(--radius-surface);
    --main-menu-dropdown-shadow: var(--shadow-sm);
    --main-menu-panel-color-background: var(--color-background);
    --main-menu-panel-color-text: var(--color-text);
    --main-menu-panel-font-size: var(--font-size-md);
    --main-menu-panel-font-size-sub: var(--font-size-sm);
    --main-menu-panel-separator-border-style: var(--border-style-normal);
    --main-menu-panel-separator-border-width: var(--border-width-sm);
    --main-menu-panel-separator-color-border: var(--color-border);
    --main-menu-panel-separator-spacing: var(--spacing-sm);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/metas.css */
@layer tokens {
  :root {
    --metas-font-size: var(--font-size-small);
    --metas-gap: var(--spacing-2xs);
    --metas-separator: '—';
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/more.css */
@layer tokens {
  :root {
    --more-gap: var(--spacing-xs);
    --more-icon: var(--icon-arrow);
    --more-icon-size: var(--icon-size);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/offer.css */
@layer tokens {
  :root {
    --offer-color-text: var(--color-text);
    --offer-gap: var(--spacing-xs);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/pagination-between.css */
@layer tokens {
  :root {
    --pagination-between-font-size: var(--font-size-lg);
    --pagination-between-font-weight: var(--font-weight-bold);
    --pagination-between-margin-block-start: var(--spacing-lg);
    --pagination-between-padding-block: var(--spacing-lg);
    --pagination-between-item-padding: 0;
    --pagination-between-link-border-radius: var(--radius-control);
    --pagination-between-link-border-style: var(--border-style-normal);
    --pagination-between-link-border-width: 0;
    --pagination-between-link-color-background: transparent;
    --pagination-between-link-color-background-hover: var(--color-background-muted);
    --pagination-between-link-color-border: var(--color-border);
    --pagination-between-link-color-text-decoration: transparent;
    --pagination-between-link-color-text-decoration-hover: transparent;
    --pagination-between-link-gap: var(--spacing-sm);
    --pagination-between-link-padding-inline: var(--spacing-sm);
    --pagination-between-link-padding-block: var(--spacing-sm);
    --pagination-between-link-shadow: var(--shadow-none);
    --pagination-between-link-shadow-hover: var(--shadow-sm);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/press.css */
@layer tokens {
  :root {
    --press-badge-border-radius: var(--radius-xs);
    --press-badge-border-style: var(--border-style-normal);
    --press-badge-border-width: var(--border-width-none);
    --press-badge-color-background: var(--color-background-muted);
    --press-card-border-radius: var(--radius-surface);
    --press-card-border-style: var(--border-style-normal);
    --press-card-border-width: var(--border-width-none);
    --press-card-color-background: var(--color-background-muted);
    --press-card-color-border: var(--color-border);
    --press-card-title-font-size: var(--font-size-md);
    --press-card-title-font-weight: var(--font-weight-heading);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/pricing.css */
@layer tokens {
  :root {
    --pricing-color-text: var(--color-text);
    --pricing-font-size: var(--font-size-md);
    --pricing-font-weight: var(--font-weight-heading);
    --pricing-discount-border-radius: var(--radius-sm);
    --pricing-discount-color-text: var(--color-text-on-brand);
    --pricing-discount-color-background: var(--color-brand);
    --pricing-discount-font-size: var(--font-size-sm);
    --pricing-discount-padding-block: var(--spacing-2xs);
    --pricing-discount-padding-inline: var(--spacing-xs);
    --pricing-frequency-color-text: var(--color-text-muted);
    --pricing-frequency-font-size: var(--font-size-sm);
    --pricing-frequency-font-style: normal;
    --pricing-original-color-text: var(--color-text-muted);
    --pricing-original-font-size: var(--font-size-sm);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/push.css */
@layer tokens {
  :root {
    --push-border-radius: var(--radius-surface);
    --push-color: var(--color-white);
    --push-color-background: var(--color-dark);
    --push-color-brightness: 0.3;
    --push-content-gap: var(--spacing-sm);
    --push-content-padding-block: var(--spacing-fluid-md);
    --push-content-padding-inline: var(--spacing-fluid-md);
    --push-card-padding-block: var(--spacing-fluid-md);
    --push-card-padding-inline: var(--spacing-fluid-md);
    --push-ratio: var(--ratio-cinema);
    --push-ratio-double: var(--ratio-photography);
    --push-ratio-mobile: var(--ratio-landscape);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/quote.css */
@layer tokens {
  :root {
    --quote-border-radius: 0;
    --quote-border-style: none;
    --quote-border-width: 0;
    --quote-color-background: transparent;
    --quote-color-border: transparent;
    --quote-color-text: var(--color-text);
    --quote-flex-direction: column;
    --quote-gap: var(--spacing-xs);
    --quote-padding: var(--spacing-xs);
    --quote-font-size: var(--font-size-fluid-lg);
    --quote-font-style: italic;
    --quote-font-weight: var(--font-weight-normal);
    --quote-line-height: var(--line-height-normal);
    --quote-figcaption-font-size: var(--font-size-small);
    --quote-figcaption-gap: var(--spacing-xs);
    --quote-cite-font-weight: var(--font-weight-bold);
    --quote-cite-font-style: normal;
    --quote-cite-color-text: var(--color-text);
    --quote-author-color-text: var(--color-text-muted);
    --quote-author-line-height: var(--line-height-snug);
    --quote-avatar-size: var(--size-48);
    --quote-avatar-color-background: var(--color-background-muted);
    --quote-avatar-border-radius: var(--radius-pill);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/reference.css */
@layer tokens {
  :root {
    --reference-border-radius: var(--radius-2xs);
    --reference-border-style: solid;
    --reference-border-width: 0;
    --reference-color-background: var(--color-gray-200);
    --reference-color-border: transparent;
    --reference-color-text: var(--color-text);
    --reference-font-size: var(--font-size-2xs);
    --reference-font-weight: var(--font-weight-control);
    --reference-padding-inline: var(--spacing-xs);
    --reference-padding-block: var(--spacing-2xs);
    --reference-text-transform: uppercase;
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/screenshot.css */
@layer tokens {
  :root {
    --screenshot-border-radius: var(--radius-sm);
    --screenshot-bar-color-background: #D9D9D9;
    --screenshot-bar-height: var(--size-20);
    --screenshot-dot-color-red: #EE0E00;
    --screenshot-dot-color-yellow: #EEAB00;
    --screenshot-dot-color-green: #0EB000;
    --screenshot-dot-gap: var(--size-8);
    --screenshot-dot-offset-left: var(--size-16);
    --screenshot-dot-offset-top: var(--size-6);
    --screenshot-dot-size: var(--size-8);
    --screenshot-shadow: var(--shadow-center-md);
    --screenshot-figcaption-padding-block-start: var(--spacing-xs);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/sidebar.css */
@layer tokens {
  :root {
    --sidebar-gap: var(--spacing-md);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/sidebarmenu.css */
@layer tokens {
  :root {
    --sidebarmenu-sticky-top: calc(var(--header-height) + var(--spacing-md));
    --sidebarmenu-max-height: calc(100vh - var(--sidebarmenu-sticky-top));
    --sidebarmenu-label-font-size: var(--font-size-heading-05);
    --sidebarmenu-label-font-weight: var(--font-weight-heading);
    --sidebarmenu-label-font-family: var(--font-family-heading);
    --sidebarmenu-label-line-height: var(--line-height-heading);
    --sidebarmenu-label-color: var(--color-heading);
    --sidebarmenu-label-margin-block-end: var(--spacing-sm);
    --sidebarmenu-nav-link-padding-inline: var(--spacing-2xs);
    --sidebarmenu-nav-link-padding-block: var(--spacing-2xs);
    --sidebarmenu-nav-link-font-size: var(--font-size-xs);
    --sidebarmenu-nav-link-color: var(--color-text);
    --sidebarmenu-nav-link-color-active: var(--color-brand);
    --sidebarmenu-nav-sub-font-size: var(--font-size-xs);
    --sidebarmenu-nav-sub-indent: var(--spacing-md);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/status.css */
@layer tokens {
  :root {
    --status-border-radius: var(--radius-pill);
    --status-border-style: solid;
    --status-border-width: 0;
    --status-color-background: var(--color-background-muted);
    --status-color-border: transparent;
    --status-color-text: var(--color-text-on-muted);
    --status-font-size: var(--font-size-2xs);
    --status-font-weight: var(--font-weight-control);
    --status-padding-inline: var(--spacing-xs);
    --status-padding-block: var(--spacing-2xs);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/timeline.css */
@layer tokens {
  :root {
    --timeline-connector-color: var(--color-border);
    --timeline-connector-width: var(--border-width-md);
    --timeline-gap: var(--spacing-lg);
    --timeline-marker-size: var(--size-24);
    --timeline-marker-color-background: var(--color-brand);
    --timeline-marker-color-text: var(--color-text-on-brand);
    --timeline-marker-border-radius: var(--radius-pill);
    --timeline-marker-font-size: var(--font-size-sm);
    --timeline-marker-font-weight: var(--font-weight-heading);
    --timeline-step-gap: var(--spacing-sm);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/toc.css */
@layer tokens {
  :root {
    --toc-sticky-top: var(--header-offset-scroll-up);
    --toc-label-font-size: var(--font-size-heading-05);
    --toc-label-font-weight: var(--font-weight-heading);
    --toc-label-font-family: var(--font-family-heading);
    --toc-label-line-height: var(--line-height-heading);
    --toc-label-color: var(--color-heading);
    --toc-label-margin-block-end: var(--spacing-sm);
    --toc-nav-indent: var(--size-16);
    --toc-nav-font-size: var(--font-size-xs);
    --toc-nav-item-gap: var(--spacing-2xs);
    --toc-nav-link-color-text-decoration: transparent;
    --toc-nav-link-color-text-decoration-hover: var(--color-link);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* components/transcription.css */
@layer tokens {
  :root {
    --transcription-color-text: var(--color-text-muted);
    --transcription-font-size: var(--font-size-xs);
    --transcription-margin-block-start: var(--spacing-xs);
    --transcription-padding: var(--spacing-xs);
    --transcription-summary-font-size: var(--font-size-xs);
    --transcription-summary-font-weight: var(--font-weight-normal);
  }
}




/* Responsive breakpoints of the components that own a panel.
   Aliases of the @uncinq/css-base scale, driven by the same site params as the
   .panel-inline-* classes in the markup so the two cannot drift. `none` means
   the panel never goes inline: the component's own responsive rules are
   switched off with `not all`, and the partial renders a <dialog> instead of
   a popover, since a panel that is always an overlay has nothing to hide.
   main.css is executed as a Hugo template for this block — see
   partials/head/css.html. */

/* Vendors */
/* vendors/leaflet.css */
@layer vendors {
  .leaflet-container {
    z-index: 1;
    a {
      text-decoration: none !important;
    }
  }
}

/* vendors/splide.css */
@layer vendors {
  .splide {
    .splide__list {
      display: flex;
      list-style: none;
      margin-block-end: 0;
      padding-inline-start: 0 !important;
    }
    &:not(.is-initialized) .splide__list {
      -moz-column-gap: var(--items-column-gap, var(--items-gap));
           column-gap: var(--items-column-gap, var(--items-gap));
      row-gap: var(--items-row-gap, var(--items-gap));
    }
    &:has(.splide__pagination) {
      margin-block-end: var(--carousel-pagination-margin-block);
    }
    .splide__slide {
      flex-shrink: 0;
      margin-block: 0 !important;
    }
    .splide__pagination {
      inset-block-end: auto;
      inset-block-start: 100%;
      margin-block: var(--carousel-pagination-margin-block);
      li {
        margin-block: 0 !important;
      }
    }
    .splide__pagination__page {
      border-radius: var(--carousel-pagination-border-radius, 50%);
      height: var(--carousel-pagination-height, .5rem);
      margin: var(--carousel-pagination-margin, .1875rem);
      opacity: var(--carousel-pagination-opacity, 1);
      width: var(--carousel-pagination-width, .5rem);

      &:hover {
        opacity: var(--carousel-pagination-opacity-hover, .75);
      }

      @media (prefers-reduced-motion: no-preference) {
        transition: var(--transition-normal);
      }
    
      &.is-active {
        background: var(--carousel-pagination-color-active, var(--color-active));
        transform: var(--carousel-pagination-transform-active);
        
        &:hover {
          opacity: var(--carousel-pagination-opacity-active-hover, .75);
        }
      }
    }
    .splide__arrow {
      background: var(--carousel-arrow-color-background);
      border-color: var(--carousel-arrow-color-border);
      border-style: var(--border-style-normal);
      border-width: var(--carousel-arrow-border-width);
      color: var(--carousel-arrow-color);

      &:not(:disabled) {
        opacity: 1 !important;
      }

      @media (prefers-reduced-motion: no-preference) {
        transition: var(--transition-normal);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          --carousel-arrow-color: var(--carousel-arrow-color-hover);
          --carousel-arrow-color-border: var(--carousel-arrow-color-border-hover);
        }
      }
    }
    /* Render the `arrowPath` chevron as a Lucide-style stroke, not Splide's fill. */
    .splide__arrow svg {
      fill: none;
      height: 100%;
      scale: .7;
      stroke: var(--carousel-arrow-color);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      width: 100%;
    }

    figure {
      --figure-margin-block: 0;
    }
    
    @media (width >= 48rem) {
      .splide__arrow {
        margin-inline: var(--carousel-arrow-margin-inline);
      }
      .splide__arrow--next {
        inset-inline-start: 100%;
        inset-inline-end: auto;
      }
      .splide__arrow--prev {
        inset-inline-start: auto;
        inset-inline-end: 100%;
      }
    }
  }
}


/* Base */
/* base/fonts.css */

/* Layouts */
/* layouts/footer.css */
/*
 * footer[role="contentinfo"] — site footer.
 *
 * Expected HTML (partials/footer/footer.html):
 *   <footer role="contentinfo" id="footer">
 *     <div class="container">
 *       <div class="top">
 *         logo, description, information, nav columns
 *       </div>
 *       <div class="bottom">
 *         nav legal, credit, nav social
 *       </div>
 *     </div>
 *   </footer>
 */
@layer layouts {
  footer[role="contentinfo"] {
    --color-link: var(--footer-color-text);
    --color-text: var(--footer-color-text);
    --color-text-muted: oklch(from var(--color-text) l c h / var(--opacity-muted));
    --surtitle-color-text: var(--color-text-muted);
    --nav-color-text: var(--footer-color-text);

    --logo-height: var(--footer-logo-height);
    --logo-height-tablet: var(--footer-logo-height-tablet);
    --logo-height-tablet-wide: var(--footer-logo-height-tablet-wide);
    --logo-height-laptop: var(--footer-logo-height-laptop);
    --logo-height-desktop: var(--footer-logo-height-desktop);

    background-color: var(--footer-color-background);
    color: var(--footer-color-text);
    display: flex;
    flex-direction: column;
    gap: var(--footer-gap);
    padding-block: var(--footer-padding-block);

    /* ── Top — grid of columns ───────────────────────────────────── */

    .top {
      @media (width >= 48rem) {
        .grid > * {
          grid-column: span 4;
        }
      }
      @media (width >= 64rem) {
        .grid > * {
          grid-column: span 3;
        }
        .brand {
          grid-column: span 6;
        }
      }
    }

    /* ── Bottom — legal + credit + social ────────────────────────── */

    .bottom {
      .row {
        justify-content: space-between;
      }
    }

    /* ── Footer title (mirrors .nav-title) ───────────────────────── */

    .footer-title {
      font-size: var(--nav-title-font-size);
      font-weight: var(--nav-title-font-weight);
      margin-block-start: 0;
    }

    /* ── Nav  ───────────────────────────────────────── */

    .nav-title {
      --nav-title-margin-block: 0 var(--spacing-typography);
      --nav-title-padding-block: 0;
      --nav-title-padding-inline: 0;
    }
    .nav-title + .nav {
      --nav-margin-block: calc(var(--nav-link-padding-block) * -1) 0;
      --nav-line-height: initial;
    }
    .nav {
      --nav-item-margin-inline: calc(var(--nav-link-padding-inline) * -1) 0;
    }
    .dropdown-menu {
      --nav-item-margin-inline: 0;
    }

    /* ── Nav legal and social ───────────────────────────────────────── */

    .nav-legal {
      @media (width >= 48rem) {
        --nav-direction: row;
        margin-inline-start: 0;
      }
    }

    /* ── Information ───────────────────────────────────────── */

    .information {
      .btn {
        margin-block-start: var(--spacing-typography);
      }
    }
  }
}

/* layouts/grid.css */
@layer layouts {
  .grid {
    --grid-column: var(--span-full);
    row-gap: var(--grid-row-gap, var(--gap-row));

    /* Layouts */
    > * {
      margin-block: 0 !important;
    }

    > .content {
      display: flex;
      flex-direction: column;
      row-gap: var(--grid-row-gap, var(--gap-row));
    }

    .toc {
      margin-block-end: var(--gap);
      order: -1;
    }

    @media (width >= 64rem) {

      .featured-image {
        --grid-column: span 4;
      }

      /* ── Content ────────────────────────────────────────────── */
      .content {
        --grid-column: span 8;
      }
      .content:first-child:last-child {
        --grid-column: var(--span-full);
      }
      .sidebar--menu + div {
        --grid-column: span 10;
      }

      /* ── Sidebar ────────────────────────────────────────────── */
      .sidebar,
      .toc {
        --grid-column: span 4;
      }
      .sidebar:has(& + .toc) {
        align-self: start;
      }
      .sidebar--menu {
        --grid-column: span 2;
      }
      .toc {
        order: initial;
      }

      /* ── Sidebar + TOC ──────────────────────────────────────── */
      &:has(.sidebar + .toc) {
        grid-template-rows: auto auto 1fr auto;
        .content {
          grid-row: span 2;
        }
      }
    }

    @media (width >= 90rem) {
      /* ── Sidebar ────────────────────────────────────────────── */
      .sidebar:not(.sidebar--menu),
      .toc {
        --grid-column: span 4 / -1;
      }
    }


  }
}

/* layouts/header.css */
/*
 * header[role="banner"] — sticky site header.
 *
 * JS behaviour (components/menu.js) toggles:
 *   header.is-sticky          — scrolled past header height
 *   html.is-scrolling-down    — user scrolling downward
 *   html.is-menu-open         — mobile panel open
 *   html.is-dropdown-menu-open — a dropdown is open
 *
 * Expected HTML structure:
 *   <header role="banner">
 *     <nav role="navigation">
 *       <div class="container">
 *         <a class="logo">...</a>
 *         <button class="btn btn-search">...</button>
 *         <button class="btn-menu">...</button>
 *         <div class="main-menu">...</div>
 *       </div>
 *     </nav>
 *   </header>
 */
@layer layouts {
  header[role="banner"] {
    --color-link: var(--header-color-link);
    --color-text: var(--header-color-text);
    --color-text-muted: oklch(from var(--color-text) l c h / var(--opacity-muted));
    --surtitle-color-text: var(--color-text-muted);
    --nav-color-text: var(--color-link);

    background-color: var(--header-color-background);
    padding-block: var(--header-padding-block);
    padding-inline: var(--header-padding-inline);
    position: sticky;
    top: 0;
    z-index: var(--header-z-index);

    @media (prefers-reduced-motion: no-preference) {
      transition: background var(--header-transition-duration) var(--header-transition-easing),
                  box-shadow var(--header-transition-duration) var(--header-transition-easing),
                  top var(--header-transition-duration) var(--header-transition-easing);
    }

    /* Auto-hide on scroll down */
    html:not(.is-dropdown-menu-open).is-scrolling-down &:not(:hover) {
      top: calc(var(--header-height, 0px) * -1);
    }

    /* Shadow when sticky */
    &.is-sticky {
      --color-link: var(--header-sticky-color-link, var(--header-color-link));
      --color-text: var(--header-sticky-color-text, var(--header-color-text));

      background-color: var(--header-sticky-color-background, var(--header-color-background));
      box-shadow: var(--header-shadow);
    }

    /* ── Inner nav ───────────────────────────────────────────────── */

    .container {
      align-items: center;
      display: flex;
      gap: var(--header-gap);
      justify-content: space-between;
    }

    /* ── Logo ────────────────────────────────────────────────────── */

    .logo {
      margin-inline-end: auto;
      text-decoration: none;
      img {
        max-width: var(--header-logo-max-width);
      }
    }

    /* ── Main menu ────────────────────────────────────────────── */

    .main-menu .nav {
      margin-inline: calc(var(--nav-padding-inline) * -1);
    }

  }
}

/* base/main.css */
@layer layouts {
  main:not(:has([class*="block-"]:first-child)) {
    padding-block-start: var(--spacing-section);
  }
  main:not(:has([class*="block-"]:last-child)) {
    padding-block-end: var(--spacing-section);
  }
}


/* Components — Hugolify-specific */
/* components/avatar.css */
@layer components {
  .avatar {
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
}
/* components/audio.css */
/*
 * audio — native audio player, block-level, centered.
 *
 * Structure:
 *   audio.js-audio
 */
@layer components {
  audio {
    display: block;
  }
}

/* components/back.css */
@layer components {
  .back {
    align-items: center;
    display: inline-flex;
    font-size: var(--back-font-size);
    gap: var(--back-gap);

    &::before {
      background-color: currentColor;
      content: '';
      display: inline-block;
      flex-shrink: 0;
      height: var(--back-icon-size);
      -webkit-mask: var(--back-icon) center / var(--back-icon-size) no-repeat;
              mask: var(--back-icon) center / var(--back-icon-size) no-repeat;
      rotate: 180deg;
      width: var(--back-icon-size);
    }
  }
}
/* components/block.css */
/*
 * [class*="block-"] — generic wrapper for all page content blocks.
 *
 * Each block section (block-editorial, block-pushes, block-latest…)
 * gets consistent vertical rhythm, plus centered heading/footing at laptop+.
 *
 * Inner structure:
 *   .heading  — section header (surtitle + title + text)
 *   .footing  — section footer (text + CTAs)
 *   .content  — main block content
 */
@layer components {
  .block {
    padding-block: var(--block-padding-block);

    /* ── Container ─────────────── */

    .block-content {
      display: grid;
      gap: var(--block-gap);
      padding-block: 0;

      /* fixes overflow in multi column layouts */
      > * {
        min-width: 0;
      }
    }

    /* ── Heading & footing ─────────────── */

    .heading {
      margin-block-end: 0;
    }

    .footing {
      margin-block-start: var(--block-footing-margin-block-start);
    }

    @media (width >= 48rem) { --block-gap: var(--block-gap-tablet); }
    @media (width >= 90rem) { --block-gap: var(--block-gap-laptop); }
    @media (width >= 100rem) { --block-gap: var(--block-gap-desktop); }
  }
}

/* components/block-align.css */
/*
 * .block-align-center — align center variant for block sections.
 *
 * Applied alongside a block class: <section class="block-editorial block-align-center">
 */
@layer components {
  .block-align-center {
    text-align: center;
    .heading {
      h2, p {
        margin-inline: auto;
      }
    }

    @media (width >= 64rem) {
      .items {
        grid-template-columns: repeat(auto-fit, calc((100% - var(--items-column-gap, var(--items-gap)) * (var(--items-cols) - 1)) / var(--items-cols)));
        justify-content: center;
      }
    }
  }
  .block-align-end {
    text-align: end;
    .heading {
      h2, p {
        margin-inline-start: auto;
      }
    }
  }
  .block-align-start {
    text-align: start;
    .heading {
      h2, p {
        margin-inline-end: auto;
      }
    }
  }
}

/* components/block-grid.css */
/*
 * .block-full — full-width variant for block sections.
 * .block-medium — medium-width variant for block sections.
 *
 * Applied alongside a block class: <section class="block-editorial block-full">
 */
@layer components {
  .block-full {
    padding-block: var(--block-full-padding-block, var(--block-padding-block));
    padding-inline: var(--block-full-padding-inline, 0);
  }
}

/* components/block-layout.css */
/*
 * .block-carousel — carousel variant for block sections.
 * .block-list — list variant for block sections.
 *
 * Applied alongside a block class: <section class="block-logos block-carousel">
 */
@layer components {
  .block-carousel {
    overflow: hidden;
  }
}

/* components/block-theme.css */
@layer components {

  .block-accent {
    --block-color-background: var(--color-accent);
    --color-text: var(--color-text-on-accent);
  }

  .block-black {
    --block-color-background: var(--color-text);
    --color-text: var(--color-text-on-black);
  }

  .block-dark {
    --block-color-background: var(--color-dark);
    --color-text: var(--color-text-on-dark);
  }

  .block-highlight {
    --block-color-background: var(--color-highlight);
    --color-text: var(--color-text-on-highlight);
  }

  .block-light {
    --block-color-background: var(--color-light);
    --color-text: var(--color-text-on-light);
  }

  .block-neutral {
    --block-color-background: var(--color-neutral);
    --color-text: var(--color-text-on-neutral);
  }

  .block-white {
    --block-color-background: var(--color-white);
    --color-text: var(--color-text-on-white);
  }

  .block-accent,
  .block-black,
  .block-dark,
  .block-highlight,
  .block-light,
  .block-neutral,
  .block-white {
    --color-text-muted: oklch(from var(--color-text) l c h / var(--opacity-muted));
    --color-heading: var(--color-text);
    --color-link: var(--color-text);
    --surtitle-color-text: var(--color-text-muted);
    background: var(--block-color-background);
    color: var(--color-text);
  }

  /* Legacy */
  .block-bg {
    background-color: var(--block-bg-color);
  }
}

/* components/btn-menu.css */
/*
 * .btn-menu — menu button in header. On mobile it toggles the main menu.
 *
 * Structure:
 *     button.btn-menu
 *       span
 */
@layer components {
  .btn-menu {
    span {
      display: var(--btn-menu-text-display, none);
    }
  }
}

/* components/btn-toggle-video.css */
/*
 * .btn-toggle-video — play/pause control overlaid on autoplay videos that
 * have no native controls. The `.is-playing` state (set by video.js) decides
 * which icon is shown.
 *
 * Structure:
 *     button.btn-toggle-video.js-btn-toggle-video[.is-playing]
 *       i.icon.icon-pause
 *       i.icon.icon-play
 */
@layer components {
  .btn-toggle-video {

    .icon-pause {
      display: none;
    }

    &.is-playing {
      .icon-play {
        display: none;
      }

      .icon-pause {
        display: inline-flex;
      }
    }
  }
}

/* components/card.css */
/*
 * Structure:
 * <aside class="card">
 *   <div class="content">
 *     <p class="title">...</p>
 *     <p class="description">...</p>
 *   </div>
 *   <div class="media">
 *     picture | video
 *   </div>
 * </aside>
 */
@layer components {
  .card {
    .media {
      --media-ratio: var(--card-media-ratio);
      margin-block-start: var(--card-padding-block);
      margin-inline-start: var(--card-padding-inline);
      max-width: var(--card-media-max-width);
    }
    .btn,
    .more {
      align-self: start;
    }
    .more {
      font-size: var(--font-size-xs);
    }
  }
}

/* components/comparison.css */
/*
 * .comparison — pricing / feature comparison block.
 *
 * Structure:
 *   .comparison
 *     div
 *       .item[.item-highlighted]
 *         header
 *           .badge         (optional)
 *           h2 | h3
 *           p              (subtitle)
 *           .pricing       (price display)
 *             + p          (billing period)
 *         .content
 *           ul > li        (feature list)
 *         footer
 *           .btn           (CTA)
 *
 */
@layer components {
  .comparison {
    --item-color-background: var(--comparison-item-color-background);

    header {
      color: var(--comparison-item-header-color-text);
      display: flex;
      flex-direction: column;
      gap: var(--comparison-item-header-gap);
      padding: var(--comparison-item-header-padding);
      > * {
        margin-block: 0;
      }
    }

    h2,
    h3 {
      margin-block-start: 0;
    }

    footer {
      color: var(--comparison-item-header-color-text);
      display: flex;
      flex-direction: column;
      gap: var(--comparison-item-footer-gap);
      margin-block-start: auto;
      padding: var(--comparison-item-footer-padding);
      > * {
        margin-block: 0;
      }
    }

    .badge {
      --badge-color-background: var(--comparison-badge-color-background);
      --badge-color-text: var(--comparison-badge-color-text);
      position: absolute;
      inset-block-start: var(--spacing-xs);
      inset-inline-end: var(--spacing-xs);
    }

    /* ── Pricing ───────────────────────────────────────────────── */

    .pricing {
      font-size: var(--comparison-pricing-font-size);
      font-weight: var(--comparison-pricing-font-weight);

      & + p {
        color: var(--comparison-pricing-sub-color-text);
        font-size: var(--comparison-pricing-sub-font-size);
        margin-block-start: 0;
      }
    }

    /* ── Feature list ──────────────────────────────────────────── */

    .content {
      ul {
        border-block-end: var(--border-width-sm) var(--border-style-normal) var(--comparison-list-color-border);
        list-style: none;
        margin-block: 0;
        padding-inline-start: 0;
      }

      li {
        border-block-start: var(--border-width-sm) var(--border-style-normal) var(--comparison-list-color-border);
        margin-block: 0;
        padding-block: var(--comparison-list-item-padding-block);
      }
    }

    /* ── CTA ───────────────────────────────────────────────────── */

    .btn {
      width: 100%;
    }

    /* ── Highlighted ───────────────────────────────────────── */

    &.item-highlighted {
      --item-color-background: var(--comparison-item-color-background-highlighted);
      --item-shadow: var(--comparison-item-box-shadow-highlighted);
    }

  }
}

/* components/contact-card.css */
@layer components {
  .contact-card {
    --card-border-width: 0;
    --card-color-background: var(--color-background-muted);
    --card-padding-block: var(--spacing-md);
    --card-padding-inline: var(--spacing-md);
    min-width: 0;

    .nav-social {
      margin-left: calc(var(--nav-padding-inline) * -1);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --card-shadow: unset;
      }
    }
  }
}
/* components/contact-list.css */
@layer components {
  .contact-list {
    font-size: var(--font-size-small);
    list-style: none;
    padding-left: 0;

    li {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
/* components/content-body.css */
@layer components {
  .content-body {
    > *:first-child {
      margin-block-start: 0;
    }
    > *:last-child {
      margin-block-end: 0;
    }
  }
}

/* components/credit.css */
@layer components {
  .credit {
    --color-link: var(--color-credit);
    color: var(--color-credit);
    font-size: var(--font-size-xs);
  }
}

/* components/cta.css */
@layer components {
  .cta {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  @media (width >= 48rem) {
    .cta {
      flex-direction: row;
    }
  }
}

@layer components {
  .datas {
    ul {
      list-style: none;
      margin-block: 0;
      padding-inline-start: 0;
    }
    li {
      border-block-end: var(--border-width-sm) var(--border-style-normal) var(--color-border);
      margin-block: 0;
      padding-block: var(--spacing-xs);
    }
    li:last-of-type {
      border-block-end: none;
    }
    dl {
      display: flex;
      justify-content: space-between;
    }
    dt {
      font-weight: 700;
    }
  }
}
/* components/editorial.css */
/*
 * .editorial — text + media side-by-side block.
 *
 * Structure:
 *   .editorial
 *     .content   — text, CTAs
 *     .media     — image / screenshot
 *
 */
@layer components {
  .editorial {
    display: grid;
    gap: var(--editorial-gap);
    grid-template-columns: 1fr;

    @media (width >= 48rem) {
      align-items: center;
      grid-template-columns: 1fr 1fr;

      .content {
        padding-inline-start: var(--editorial-content-padding-inline-start);
        padding-inline-end: var(--editorial-content-padding-inline-end);
      }
    }

    .media {
      --media-ratio: none;
    }

    h2 {
      margin-block-start: 0;
    }

    .cta {
      margin-block-start: var(--gap);
    }

    /* ── Content text ─────────────────────────────────────────── */

    figure {
      display: block;
      margin-block: 0;
    }

    img {
      height: auto;
      width: 100%;
    }


    /* ── Mobile: media full-bleed, above content ──────────────── */

    @media not (width >= 48rem) {
      .media {
        margin-inline: calc(-1 * var(--gutter));
        max-width: none;
        order: -1;
        width: calc(100% + 2 * var(--gutter));
      }
    }
  }
  
}

/* components/featured-image.css */
@layer components {
  .featured-image {
    margin-block: 0;

    img {
      height: auto;
      width: 100%;
    }

    @media not (width >= 48rem) {
      margin-inline: calc(var(--gutter) * -1);
      max-width: unset;

      figcaption {
        padding-inline: var(--gutter);
      }
    }
  }
}
/* components/filters.css */
/*
 * .filters — vertical list of filters
 */
@layer components {
  .filters {
    .content {
      > div {
        &:not(:first-child) {
          padding-block-start: var(--spacing-md);
        }
        &:not(:last-child) {
          border-block-end: var(--border-width-sm) var(--border-style-normal) var(--color-border);
          padding-block-end: var(--spacing-md);
        }
      }
    }
    .list {
      --list-item-font-size: var(--font-size-xs);
      :is(ul, ol) {
        list-style: none;
        padding-inline-start: 0;
      }
      li {
        display: flex;
        gap: var(--list-item-gap);
        align-items: center;
      }
      &:not(.list-mini_card):not(.list-tags) {
        li {
          &::before {
            content: var(--list-item-marker);
          }
        }
      }
    }
  }
}
/* components/gallery.css */
/*
 * .gallery — thumbnail grid with optional Tobii lightbox.
 *
 * Structure:
 *   .gallery[.js-gallery]
 *     a[href][data-type="image"][data-caption]
 *       img | picture
 */
@layer components {
  .gallery {
    gap: var(--gallery-gap);

    /* A gallery never becomes a carousel: it keeps a fixed number of columns
       all the way down. No !important needed now that the carousel is the
       opt-in .scrollsnap-* utility rather than a rule on every .items-*. */
    @media not (width >= 64rem) {
      grid-template-columns: 1fr 1fr 1fr;
    }
    @media not (width >= 48rem) {
      grid-template-columns: 1fr 1fr;
    }

    figure {
      margin-block: 0;
    }

    a {
      background-color: var(--gallery-item-color-background);
      display: block;
      overflow: hidden;
    }

    img {
      aspect-ratio: var(--gallery-item-ratio);
      border-radius: var(--gallery-item-radius);
      display: block;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
    }
  }
}

@layer components {
  .gauge {
    aspect-ratio: var(--gauge-ratio, 1);
    justify-content: space-around;
    max-width: 100%;
    position: relative;
    width: var(--gauge-size, 200px);

    svg {
      display: block;

      &.fail {
        --gauge-color: var(--color-danger-muted);
        --gauge-stroke-color: var(--color-danger);
        --color-text: var(--color-danger);
      }

      &.average {
        --gauge-color: var(--color-warning-muted);
        --gauge-stroke-color: var(--color-warning);
        --color-text: var(--color-warning);
      }

      &.pass {
        --gauge-color: var(--color-success-muted);
        --gauge-stroke-color: var(--color-success);
        --color-text: var(--color-success);
      }
    }

    .circle-bg {
      fill: none;
      stroke: var(--gauge-color, var(--color-gray-300));
      stroke-width: var(--gauge-stroke-size, 2.4);
    }

    .circle {
      fill: none;
      stroke: var(--gauge-stroke-color, var(--color-gray-500));
      stroke-width: var(--gauge-stroke-size, 2.4);
      stroke-linecap: round;
    }

    @media (prefers-reduced-motion: no-preference) {
      &.show {
        .circle {
          animation-name: progress;
          animation-duration: var(--duration-slow);
          animation-timing-function: var(--easing);
          animation-fill-mode: forwards;
        }
      }
    }

    figcaption {
      align-items: center;
      bottom: 0;
      display: flex;
      font-size: 2rem;
      font-weight: var(--font-weight-bold);
      justify-content: center;
      left: 0;
      margin-top: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
}

/* components/heading.css */
/*
 * .heading — section header block (surtitle + title + text + CTAs).
 *
 * Expected HTML (blocks/heading.html):
 *   <header class="heading">
 *     <div class="container">           optional
 *       <p class="surtitle">…</p>       optional
 *       <h2>…</h2>
 *       <div class="text">…</div>       optional
 *       <div class="cta">…</div>        optional
 *     </div>
 *   </header>
 *
 * Variants:
 *   .heading-filter — row layout for list pages with a filter alongside the title
 */
@layer components {
  .heading {
    margin-block-end: var(--heading-margin-block-end);

    &,
    & > .container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: var(--heading-gap);
    }

    h1, h2, h3, p {
      margin-block: 0;
    }

    .surtitle {
      margin-block-end: var(--heading-surtitle-margin-block-end);
    }

  }

  /* ── Filter variant ──────────────────────────────────────────────── */

  .heading-filter {
    align-items: baseline;
    flex-direction: row;

    .surtitle {
      flex: 0 0 100%;
      max-width: none;
    }
    .btn-filter {
      margin-inline-start: auto;
    }
  }
}

/* components/hero.css */
/*
 * .hero — page header with optional cover, side media, and alignment variants.
 *
 * Modifier classes (set by Hugo template):
 *   .hero-center          — centered content
 *   .hero-end             — right-aligned (content on right)
 *   .hero-with-cover      — background media (image or video)
 *   .hero-with-cover-image
 *   .hero-with-cover-video
 *   .hero-with-darken     — darkness under text
 *   .hero-cover-darken    — brightness filter on cover
 *   .hero-with-image      — side image (not cover)
 *   .hero-with-video      — side video (not cover)
 *
 * Expected HTML structure:
 *   <header class="hero [modifiers]">
 *     <div class="hero-cover">...</div>       ← optional, absolute
 *     <div class="container">
 *       <div class="row">
 *         <div class="hero-content">...</div>
 *         <div class="hero-media">...</div>   ← optional
 *       </div>
 *     </div>
 *   </header>
 */
@layer components {
  .hero {
    --color-heading: var(--hero-title-color);
    --color-link: var(--hero-color-link);
    --color-text: var(--hero-color-text);
    --color-text-muted: oklch(from var(--color-text) l c h / var(--opacity-muted));
    --font-size-heading: var(--hero-title-font-size);
    --surtitle-color-text: var(--color-text-muted);

    background-color: var(--hero-color-background);
    color: var(--color-text);
    margin-block: var(--hero-margin-block);
    position: relative;

    .container {
      position: relative;
    }

    .row {
      align-items: center;
      height: var(--hero-height);
      justify-content: center;
      max-height: var(--hero-max-height);
      min-height: var(--hero-min-height);
      padding-block: var(--hero-padding-block);
    }
  }

  /* ── Content ─────────────────────────────────────────────────── */

  .hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--hero-gap);
    padding-inline: var(--hero-padding-inline);
    max-width: 100%;

    .heading {
      margin-block-end: 0;
    }

    p {
      margin-block: 0;
    }

    .description {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-typography);
    }

    /* ── Buttons — first = primary, second = outline ─────────────── */

    .btn {
      --btn-color-background: var(--color-brand);
      --btn-color-text: var(--color-text-on-brand);
      --btn-color-border: var(--color-brand);
    }

    .btn + .btn {
      --btn-color-background: transparent;
      --btn-color-text: var(--color-brand);
    }

    &.hero-cover-darken {
      & .btn + .btn {
        --btn-color-text: var(--color-white);
        --btn-color-border: var(--color-white);
      }
    }

    @media (width >= 48rem) {
      width: calc(50% - (var(--gap) * 0.5));

      &:first-child:last-child {
        width: 100%;
      }
    }
  }

  /* ── Media ───────────────────────────────────────────────────── */

  .hero-media {
    img,
    video {
      height: auto;
      width: 100%;
    }
    @media (width >= 48rem) {
      flex: 1;
    }
  }

  /* ── Alignment variants ──────────────────────────────────────── */

  .hero-center {
    .hero-content {
      align-items: center;
      margin-inline: auto;
      text-align: center;

      .heading {
        align-items: center;
      }

      .cta {
        justify-content: center;
      }
    }
  }

  .hero-end {
    @media (width >= 48rem) {
      .hero-content {
        margin-inline-start: auto;
      }
    }
  }
  
  .hero-vertical-start {
    .hero-content {
      margin-block-end: auto;
    }
  }
  
  .hero-vertical-end {
    .hero-content {
      margin-block-start: auto;
    }
  }

  /* ── Cover (background media) ────────────────────────────────── */

  .hero-with-cover {
    overflow: hidden;
  }

  .hero-cover {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;

    img,
    video {
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      pointer-events: none;
      width: 100%;
    }
    .video {
      height: 100%;
    }
    video {
      --ratio-video: auto;
    }

    iframe {
      aspect-ratio: var(--ratio-16-9);
      height: 100%;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: auto;

      @media (orientation: landscape) {
        height: auto;
        width: 100vw;
      }
    }
  }

  /* ── Hero cover darken ─────────────────────────────────────── */

  .hero-with-darken,
  .hero:has(.hero-cover-darken) {
    --color-heading: var(--color-white);
    --color-link: var(--color-white);
    --color-text: var(--color-white);
    --btn-color-text: var(--color-white);
    --surtitle-color-text: var(--color-gray-300);

    .hero-content {
      .btn {
        --btn-color-background: var(--color-light);
        --btn-color-background-hover: var(--color-light-strong);
        --btn-color-border: var(--color-light);
        --btn-color-border-hover: var(--color-light-strong);
        --btn-color-text: var(--color-text-on-light);
      }
      .btn + .btn {
        --btn-color-background: transparent;
        --btn-color-text: var(--color-white);
      }
    }
  }
  .hero-with-darken {
    /* Logical gradient directions (flipped under RTL) */
    --hero-gradient-stop: 100%;
    --hero-gradient-to-end: to right;   /* toward inline-end */
    --hero-gradient-to-start: to left;  /* toward inline-start */
    &:dir(rtl) {
      --hero-gradient-to-end: to left;
      --hero-gradient-to-start: to right;
    }

    @media (width >= 48rem) {
      --hero-gradient-stop: 50%;
    }
    @media (width >= 100rem) {
      --hero-gradient-stop: 33%;
    }

    &::before {
      background: linear-gradient(var(--hero-gradient-to-end), var(--color-shadow-strong) 0%, var(--color-shadow-light) var(--hero-gradient-stop));
      content: '';
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }
    
    &.hero-center {
      &::before {
        background: var(--color-shadow-strong)
      }
    }
    &.hero-end {
      &::before {
        background: linear-gradient(var(--hero-gradient-to-start), var(--color-shadow-strong) 0%, var(--color-shadow-light) 100%);
      }
    }
    &.hero-vertical-end {
      &::before {
        background: linear-gradient(to top, var(--color-shadow-strong) 0%, var(--color-shadow-light) 100%);
      }
    }
    &.hero-vertical-start {
      &::before {
        background: linear-gradient(to bottom, var(--color-shadow-strong) 0%, var(--color-shadow-light) 100%);
      }
    }
    .container {
      z-index: 2;
    }
  }
  .hero-cover-darken {
    filter: brightness(var(--hero-media-brightness));
  }
}

/* components/hero-theme.css */
@layer components {

  .hero-accent {
    --hero-color-background: var(--color-accent);
    --hero-color-link: var(--color-text-on-accent);
    --hero-color-text: var(--color-text-on-accent);
    --hero-title-color: var(--color-text-on-accent);
    .btn {
      --btn-color-background: var(--color-text-on-accent);
      --btn-color-border: var(--color-text-on-accent);
      --btn-color-text: var(--color-accent);
    }
  }

  .hero-black {
    --hero-color-background: var(--color-text);
    --hero-color-link: var(--color-text-on-black);
    --hero-color-text: var(--color-text-on-black);
    --hero-title-color: var(--color-text-on-black);
  }

  .hero-dark {
    --hero-color-background: var(--color-dark);
    --hero-color-link: var(--color-text-on-dark);
    --hero-color-text: var(--color-text-on-dark);
    --hero-title-color: var(--color-text-on-dark);
  }

  .hero-highlight {
    --hero-color-background: var(--color-highlight);
    --hero-color-link: var(--color-text-on-highlight);
    --hero-color-text: var(--color-text-on-highlight);
    --hero-title-color: var(--color-text-on-highlight);
  }

  .hero-light {
    --hero-color-background: var(--color-light);
    --hero-color-link: var(--color-text-on-light);
    --hero-color-text: var(--color-text-on-light);
    --hero-title-color: var(--color-text-on-light);
  }

  .hero-neutral {
    --hero-color-background: var(--color-neutral);
    --hero-color-link: var(--color-text-on-neutral);
    --hero-color-text: var(--color-text-on-neutral);
    --hero-title-color: var(--color-text-on-neutral);
  }

  .hero-white {
    --hero-color-background: var(--color-white);
    --hero-color-link: var(--color-text-on-white);
    --hero-color-text: var(--color-text-on-white);
    --hero-title-color: var(--color-text-on-white);
  }

}

/* components/highlight.css */
@layer components {
  .highlight {
    overflow: auto;
  }
}

/* components/hugolify.css */
/*
 * .hugolify — footer credit.
 *
 * Structure:
 *   .hugolify
 */
@layer components {
  .hugolify {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    max-width: none;
    text-align: center;
  }
}

/* components/images.css */
/*
 * .images — layout container for a collection of figures.
 * Figures stack on mobile, wrap on tablet+.
 * .half on a figure makes it share the row with another .half figure.
 *
 * Structure:
 *   .images
 *     figure[.half]
 *       picture | img
 *       figcaption
 */
@layer components {
  .images {
    display: flex;
    flex-direction: column;
    gap: var(--images-gap);

    @media (width >= 48rem) {
      flex-direction: row;
      flex-wrap: wrap;

      figure {
        flex: 1 1 100%;
      }

      figure.half {
        flex: 1 1 calc(50% - var(--images-gap) / 2);
      }
    }
  }
}

/* components/item.css */
/*
 * .item — structural base for all card-like components.
 * Use alongside a content-type class: <article class="item page">
 *
 * Content-type classes (.page, .post, .project…) override --item-* tokens only.
 * No structure duplication needed in content-type modules.
 *
 * Optional sizing: --item-max-width / --item-width are unset by default.
 * Prefer ch units so the width tracks the text measure, like --items-min-width.
 */
@layer components {
  .item {
    --media-color-background: var(--item-media-color-background);
    --media-ratio: var(--item-media-ratio);
    --surtitle-margin-block-end: calc(var(--item-gap) * -1);

    background-color: var(--item-color-background);
    border: var(--item-border-width) var(--item-border-style) var(--item-color-border);
    border-radius: var(--item-border-radius);
    box-shadow: var(--item-shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: var(--item-max-width);
    overflow: hidden;
    position: relative;
    width: var(--item-width);

    .content {
      align-items: var(--item-align, start);
      color: var(--item-color-text);
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: var(--item-gap);
      order: var(--item-order);
      padding-block-end: var(--item-padding-block-end);
      padding-block-start: var(--item-padding-block-start);
      padding-inline: var(--item-padding-inline);
      text-decoration: none;
      text-align: var(--item-align, start);
    }

    .metas {
      background-color: var(--item-metas-color-background);
      border-block-end: var(--item-metas-border-end);
      border-block-start: var(--item-metas-border-start);
      color: var(--item-metas-color-text, var(--item-color-text));
      font-size: var(--item-metas-font-size, var(--metas-font-size));
      order: var(--item-metas-order);
      padding-block-end: var(--item-metas-padding-block-end);
      padding-block-start: var(--item-metas-padding-block-start);
      padding-inline: var(--item-metas-padding-inline);
    }

    a.content {
      &::before {
        content: '';
        inset: 0;
        position: absolute;
      }
      &:focus-visible {
        outline: none;
      }
    }

    .surtitle {
      margin-block-start: 0;
    }

    .title {
      color: var(--item-title-color, var(--item-color-text));
      font-family: var(--item-title-font-family);
      font-size: var(--item-title-font-size);
      font-weight: var(--item-title-font-weight);
      line-height: var(--item-title-line-height);
      margin-block: 0;
    }

    .description {
      font-size: var(--item-font-size);
      margin-block: 0;
    }

    .btn {
      margin-inline-end: auto;
      margin-block-start: auto;
    }

    .media {
      border: var(--item-media-border-width) var(--item-media-border-style) var(--item-media-color-border);
      border-radius: var(--item-media-border-radius);
      margin-block: var(--item-media-margin-block);
      margin-inline: var(--item-media-margin-inline);
      max-width: var(--item-media-max-width);
      order: var(--item-media-order, -1);
      width: var(--item-media-width);

      .icon {
        display: block;
      }
    }

    .media:has(.icon) {
      --icon-color: var(--item-media-icon-color, currentColor);
      --icon-size: var(--item-media-icon-size);
      --item-media-border-radius: var(--item-media-icon-border-radius);
      --item-media-border-style: var(--item-media-icon-border-style);
      --item-media-border-width: var(--item-media-icon-border-width);
      --item-media-color-background: var(--item-media-icon-color-background);
      --item-media-color-border: var(--item-media-icon-color-border);
      --item-media-margin-block: var(--item-media-icon-margin-block);
      --item-media-margin-inline: var(--item-media-icon-margin-inline);
      --media-ratio: var(--item-media-icon-ratio);
      align-items: center;
      align-self: var(--item-media-icon-align);
      display: flex;
      justify-content: center;
      width: var(--item-media-icon-width);
    }

    /* Focus */
    &:has(a.content:focus-visible) {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
      outline-offset: var(--focus-outline-offset);
    }

    /* Hover */
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --item-shadow: var(--item-shadow-hover);
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--item-transition);
    }
  }
}

/* components/items.css */
@layer components {
  .items {
    list-style: none;
    padding-inline-start: 0;
    & + nav {
      margin-block-start: var(--items-nav-margin-block-start);
    }
  }

  /* ── Center + fixed columns at tablet-wide and up ─────────────── */
  @media (width >= 64rem) {
    [class^="items-"],
    [class*=" items-"] {
      grid-template-columns: repeat(auto-fit, calc((100% - var(--items-column-gap, var(--items-gap)) * (var(--items-cols) - 1)) / var(--items-cols)));
      justify-content: center;
    }

    .items-1  { --items-cols: 1; }
    .items-2  { --items-cols: 2; }
    .items-3  { --items-cols: 3; }
    .items-4  { --items-cols: 4; }
    .items-5  { --items-cols: 5; }
    .items-6  { --items-cols: 6; }
    .items-7  { --items-cols: 7; }
    .items-8  { --items-cols: 8; }
    .items-9  { --items-cols: 9; }
    .items-10 { --items-cols: 10; }
    .items-11 { --items-cols: 11; }
    .items-12 { --items-cols: 12; }
    .items-13 { --items-cols: 13; }
    .items-14 { --items-cols: 14; }
    .items-15 { --items-cols: 15; }
    .items-16 { --items-cols: 16; }
    .items-17 { --items-cols: 17; }
    .items-18 { --items-cols: 18; }
    .items-19 { --items-cols: 19; }
    .items-20 { --items-cols: 20; }
    .items-21 { --items-cols: 21; }
    .items-22 { --items-cols: 22; }
    .items-23 { --items-cols: 23; }
    .items-24 { --items-cols: 24; }
  }
}
@layer components {
  .keyfeatures {
    --alert-color-border: var(--color-background-muted);
    --alert-color-background: var(--color-background-muted);
    --alert-color-text: var(--color-text-on-muted);
    ul {
      list-style: none;
      margin-block: 0;
      padding-inline-start: 0;
    }
    li {
      display: flex;
      font-size: var(--font-size-small);
      gap: var(--spacing-2xs);

      span {
        opacity: .8;
      }
    }
  }
}


/* components/latest.css */
@layer components {
  .latest {
    margin-block: var(--spacing-section);
    
    @media (width >= 48rem) {
      .heading {
        align-items: baseline;
        flex-direction: row;
        justify-content: space-between;
      }
    }
  }
}

/* components/list.css */
@layer components {
  aside.list {
    --list-item-gap: var(--spacing-xs);

    ul {
      list-style: none;
      margin-bottom: 0;
      padding-left: 0;
    }
    li {
      display: flex;
      gap: var(--spacing-xs);

      .avatar {
        align-self: start;
        flex-shrink: 0;
      }

      span {
        color: var(--color-text-muted);
        font-size: var(--font-size-fluid-xs);
      }
    }
  }
}

/* components/items.css */
@layer components {
  .list-tags {
    p {
      margin-block-end: var(--spacing-xs);
    }
    ul, 
    ol {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--spacing-2xs);
      list-style: none;
      margin: 0;
      padding: 0;
    }
    li {
      line-height: var(--line-height-none);
      margin: 0;
      &::before {
        content: none;
      }
      a {
        background-color: var(--badge-color-background);
        border: var(--badge-border-width) var(--badge-border-style) var(--badge-color-border);
        border-radius: var(--badge-border-radius);
        color: var(--badge-color-text);
        display: inline-flex;
        font-size: var(--badge-font-size);
        font-weight: var(--badge-font-weight);
        padding: var(--badge-padding-block) var(--badge-padding-inline);
        text-decoration: none;

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            background-color: var(--badge-color-background-hover);
            color: var(--badge-color-text-hover);
          }
        }
      }
    }
  }
}
/* components/logo.css */
/*
 * .logo — site logo, image or text fallback.
 *
 * Expected HTML (commons/logo.html):
 *   <a class="logo" href="/" aria-label="…">
 *     <img src="…" alt="" role="presentation" width="…" height="…">
 *     OR site.Title (text fallback)
 *   </a>
 */
@layer components {
  .logo {
    display: inline-flex;
    font-family: var(--logo-font-family);
    font-size: var(--logo-font-size);
    font-weight: var(--logo-font-weight);
    letter-spacing: var(--logo-letter-spacing);
    line-height: 1;
    text-decoration: none;

    img {
      display: block;
      height: var(--logo-height);
      width: auto;
    }

    @media (width >= 48rem) { --logo-height: var(--logo-height-tablet); }
    @media (width >= 64rem) { --logo-height: var(--logo-height-tablet-wide); }
    @media (width >= 90rem) { --logo-height: var(--logo-height-laptop); }
    @media (width >= 100rem) { --logo-height: var(--logo-height-desktop); }
  }
}

/* components/main-menu.css */
/*
 * .main-menu — mobile navigation panel (.drawer or .modal).
 *
 * Header bar sticky behaviour → components/header.css
 *
 * JS behaviour (components/menu.js) toggles classes on <html>:
 *   html.is-menu-open          — panel is open
 *   html.is-dropdown-menu-open — a dropdown is open
 *
 * Panel trigger: .js-dialog-toggle[data-target="#navigation"]
 * Dropdown trigger: .js-dropdown-toggle
 */
@layer components {
  .main-menu {
    --modal-max-width: 60ch;

    /* ── Panel (below --header-expand) ────────────────────────────────
     * In this context .dropdown-menu behaves as a plain inline sub-list.
     * The .show class set by components/dialog.js controls open/closed. */
    @media not (width >= 64rem) {
      .nav {
        --nav-item-margin-inline: calc(var(--nav-link-padding-inline) * -1) 0;
      }
      .nav ~ .nav {
        border-block-start: var(--main-menu-panel-separator-border-width) var(--main-menu-panel-separator-border-style) var(--main-menu-panel-separator-color-border);
        margin-block-start: var(--main-menu-panel-separator-spacing);
        padding-block-start: var(--main-menu-panel-separator-spacing);
      }
      .nav:not(.nav-language) {
        .dropdown {
          --dropdown-color-text: var(--nav-color-text);
          --dropdown-item-color-background: transparent;
          --dropdown-item-color-background-hover: transparent;
          --dropdown-item-padding-inline: var(--nav-link-padding-inline);
          --dropdown-padding: 0;
          flex-direction: column;
        }
        .dropdown-toggle {
          display: none;
        }
        .dropdown-menu {
          background-color: transparent;
          border: 0;
          border-radius: 0;
          box-shadow: none;
          font-size: var(--main-menu-panel-font-size-sub);
          min-width: 0;
          opacity: 1;
          pointer-events: auto;
          position: static;
          transform: none;
          visibility: visible;

          li a {
            white-space: normal;
          }
        }
      }

      .nav-item-highlighted {
        margin-block: var(--nav-padding-block);
      }
    }

    /* Expanded: inline flex nav inside the header. The panel styling itself —
     * position, size, shadow, background, text and link colours — is
     * neutralised by .panel-inline from @uncinq/css-components;
     * only what is specific to the menu stays here. */
    @media (width >= 64rem) {
      .nav {
        align-items: baseline;
        flex-direction: row;
        margin-inline: 0;
      }

      .nav-item-highlighted {
        &:first-child {
          margin-inline-start: 0;
        }
        &:last-child {
          margin-inline-end: 0;
        }
      }

      .content {
        align-items: baseline;
        display: flex;
      }
    }
  }
}

/* components/metas.css */
@layer components {
  .metas {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: var(--metas-font-size);
    gap: var(--metas-gap);

    > * {
      margin-block: 0;
    }

    > *:not(:first-child):not(.share):not(.status)::before {
      content: var(--metas-separator, "-");
      display: inline-block;
      margin-inline-end: var(--metas-gap);
      vertical-align: middle;
    }

    .share {
      display: none;
    }

    @media (width >= 48rem) {
      .share {
        display: initial;
        margin-block-start: 0;
        margin-inline-start: auto;
      }
    }
  }
}
/* components/more.css */
@layer components {
  .more {
    align-items: center;
    display: inline-flex;
    gap: var(--more-gap);
    &::before {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--more-icon-size);
      -webkit-mask: var(--more-icon) center / var(--more-icon-size) no-repeat;
              mask: var(--more-icon) center / var(--more-icon-size) no-repeat;
      width: var(--more-icon-size);
    }
  }
}
@layer components {
  .nav-social {
    --nav-direction: row;
    --nav-font-size: var(--font-size-small);
    --nav-gap: var(--spacing-2xs);
    --nav-link-padding-block: var(--spacing-2xs);
    --nav-link-padding-inline: var(--spacing-2xs);
    --nav-social-icon-size: var(--size-20, 1.25rem);

    a {
      display: inline-flex;

      &::after {
        content: none;
      }
    }

    /* Sized only when an icon is rendered (theme-icons imported);
       otherwise the link shows its text label. */
    .icon {
      --icon-size: var(--nav-social-icon-size);
    }
  }
}

/* components/notes.css */
@layer components {
  [href^="#nb-"] span {
    display: none;
  }

  .notes {
    p {
      font-size: var(--font-size-small);
    }
    li {
      font-size: var(--font-size-xs);
      font-style: italic;
      text-wrap: pretty;
    }
  }
}
/* components/offer.css */
@layer components {
  
}
/* components/pagination-between.css */
/*
 * .pagination-between — prev/next navigation with top-border separator.
 *   Page numbers are hidden; only .previous and .next are shown.
 *   Icon glyphs (::before / ::after) are defined by the theme.
 *
 * Variants:
 *   .pagination-between-with-title   — large card-style areas with article title
 *   .pagination-between-with-image   — same layout with an image thumbnail
 *
 * Structure:
 *   ul.pagination-between
 *     li[.disabled]
 *       a.previous
 *         p.surtitle        (optional — e.g. "Previous")
 *         span              (optional — article title)
 *     li[.disabled]
 *       a.next
 *         p.surtitle        (optional — e.g. "Next")
 *         span              (optional — article title)
 */
@layer components {
  .pagination-between {
    --color-link: var(--pagination-between-color-text);
    --color-link-hover: var(--pagination-between-color-text-hover);
    --link-color-text-decoration: var(--pagination-between-link-color-text-decoration);
    --font-size-text: var(--pagination-between-font-size);
    --font-weight-text: var(--pagination-between-font-weight);

    border-block-start: var(--border-width-sm) var(--border-style-normal) var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    list-style: none;
    margin-block-start: var(--pagination-between-margin-block-start);
    padding-inline-start: 0;
    padding-block: var(--pagination-between-padding-block);

    li {
      font-size: var(--font-size-text);
      font-weight: var(--font-weight-text);
      padding: var(--pagination-between-item-padding);
      position: relative;
    }

    a {
      align-items: normal;
      background: var(--pagination-between-link-color-background);
      border: var(--pagination-between-link-border-width) var(--pagination-between-link-border-style) var(--pagination-between-link-color-border);
      border-radius: var(--pagination-between-link-border-radius);
      box-shadow: var(--pagination-between-link-shadow);
      display: inline-block;
      padding-block: var(--pagination-between-link-padding-block);
      padding-inline: var(--pagination-between-link-padding-inline);

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          --link-color-text-decoration: var(--pagination-between-link-color-text-decoration-hover);
          --pagination-between-link-color-background: var(--pagination-between-link-color-background-hover);
          --pagination-between-link-shadow: var(--pagination-between-link-shadow-hover);
        }
      }
    }

    .previous {
      margin-inline-end: auto;
    }

    .next {
      margin-inline-start: auto;
      text-align: end;
    }

    .disabled {
      opacity: var(--opacity-disabled);
      pointer-events: none;
    }

    @media (width >= 48rem) {
      flex-direction: row;
      justify-content: space-between;
      li {
        flex: 1;
      }
    }

  }

  /* ── with-title and with-image ──────────────────────────────────────────── */

  .pagination-between-with-title,
  .pagination-between-with-image {
    a {
      display: inline-flex;
      flex-direction: column;
      gap: var(--pagination-between-link-gap);
    }
    .content {
      display: flex;
      flex-direction: column;
    }
  }

  /* ── with-image ──────────────────────────────────────────── */

  .pagination-between-with-image {
    img {
      display: block;
      height: auto;
      max-width: 100%;
    }
  }
}

/* components/press.css */
/*
 * .press — press mention card or badge
 *
 */
@layer components {
  .press {
    /* Badge */
    --badge-border-radius: var(--press-badge-border-radius);
    --badge-border-style: var(--press-badge-border-style);
    --badge-border-width: var(--press-badge-border-width);
    --badge-color-background: var(--press-badge-color-background);
    --badge-color-text: var(--color-text-on-light);

    /* Card */
    --card-border-radius: var(--press-card-border-radius);
    --card-border-style: var(--press-card-border-style);
    --card-border-width: var(--press-card-border-width);
    --card-color-background: var(--press-card-color-background);
    --card-color-border: var(--press-card-color-border);
    --card-title-font-size: var(--press-card-title-font-size);
    --card-title-font-weight: var(--press-card-title-font-weight);
    .metas {
      font-size: var(--press-metas-font-size);
    }
  }
}

/* components/pricing.css */
/*
 * .pricing — price display element.
 *
 * Structure:
 *   p.pricing
 *     del                  (optional — original price)
 *     span                 (optional — discount badge)
 *     [text node]          (current price)
 *     i                    (optional — frequency, e.g. "/ month")
 */
@layer components {
  .pricing {
    align-items: baseline;
    color: var(--pricing-color-text);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--pricing-font-size);
    font-weight: var(--pricing-font-weight);
    gap: var(--spacing-xs);
    margin-block: 0;

    del {
      color: var(--pricing-original-color-text);
      font-size: var(--pricing-original-font-size);
      font-weight: var(--font-weight-normal);
    }

    span {
      background-color: var(--pricing-discount-color-background);
      border-radius: var(--pricing-discount-border-radius);
      color: var(--pricing-discount-color-text);
      font-size: var(--pricing-discount-font-size);
      font-weight: var(--font-weight-normal);
      padding: var(--pricing-discount-padding);
    }

    i {
      color: var(--pricing-frequency-color-text);
      font-size: var(--pricing-frequency-font-size);
      font-style: var(--pricing-frequency-font-style);
      font-weight: var(--font-weight-normal);
    }
  }
}

/* components/push.css */
/*
 * .push — display a video or image with a surtitle, title, description, and cta.
 *
 * Structure:
 *   div.push
 *     div.content
 *       .surtitle
 *       h2|h3
 *       .text
 *       .cta
 *     div.media
 *       img | video
 */
@layer components {
  .push {
    --media-color-background: var(--push-color-background);
    --card-padding-block: var(--push-card-padding-block);
    --card-gap: var(--push-content-gap);
    --card-padding-inline: var(--push-card-padding-inline);
    border-radius: var(--push-border-radius);
    position: relative;
    overflow: hidden;

    &:not(.push-card) {
      --color-heading: var(--push-color);
      --surtitle-color-text: oklch(from var(--push-color) l c h / var(--opacity-muted));
      --btn-color-background: var(--color-light);
      --btn-color-background-hover: var(--color-light-strong);
      --btn-color-border: var(--color-light);
      --btn-color-border-hover: var(--color-light-strong);
      --btn-color-text: var(--color-text-on-light);
      color: var(--push-color);
    }

    > .content {
      align-items: flex-start;
      aspect-ratio: var(--push-ratio-mobile);
      display: flex;
      flex-direction: column;
      gap: var(--push-content-gap);
      justify-content: center;
      padding-block: var(--push-content-padding-block);
      padding-inline: var(--push-content-padding-inline);
      position: relative;
      z-index: 1;

      @media (width >= 48rem) {
        aspect-ratio: var(--push-ratio);
      }
      > * {
        margin-block: 0;
      }
    }

    .media {
      height: 100%;
      inset: 0;
      position: absolute;
      width: 100%;
    }

    .surtitle {
      margin-block-end: calc(var(--push-content-gap) * -1);
    }
    
    .btn::after {
      content: '';
      inset: 0;
      position: absolute;
    }
  }

  /* Darken */
  .push-darken {
    /* Logical gradient directions (flipped under RTL) */
    --push-gradient-to-end: to right;   /* toward inline-end */
    --push-gradient-to-start: to left;  /* toward inline-start */

    &:dir(rtl) {
      --push-gradient-to-end: to left;
      --push-gradient-to-start: to right;
    }

    > .content {
      background: linear-gradient(var(--push-gradient-to-end), var(--color-shadow-strong) 0%, var(--color-shadow-light) 100%);
    }
    @media (width >= 48rem) {
      &.push-end {
        > .content {
          background: linear-gradient(var(--push-gradient-to-start), var(--color-shadow-strong) 0%, var(--color-shadow-light) 100%);
        }
      }
    }
    &.push-card,
    &.push-center {
      > .content {
        background: transparent;
      }
      .media {
        filter: brightness(var(--hero-cover-brightness));
      }
    }
  }

  /* Center */
  .push-center {
    > .content {
      align-items: center;
      &:not(:has(.card)) {
        text-align: center;
      }
    }
  }

  /* Align end */
  .push-end {
    @media (width >= 48rem) {
      > .content {
        align-items: flex-end;
        &:not(:has(.card)) {
          text-align: end;
        }
      }
    }
  }
}
/* components/quote.css */
/*
 * .quote — standalone quote widget.
 *
 * Structure:
 *   figure.quote
 *     blockquote
 *       p
 *     figcaption
 *       picture          (optional — author avatar)
 *       div
 *         cite           (author name)
 *         a | span       (author role / link)
 */
@layer components {
  .quote {
    background-color: var(--quote-color-background);
    border: var(--quote-border-width) var(--quote-border-style) var(--quote-color-border);
    border-radius: var(--quote-border-radius);
    display: flex;
    flex-direction: var(--quote-flex-direction);
    gap: var(--quote-gap);
    padding: var(--quote-padding);

    blockquote {
      border-inline-start: 0;
      color: var(--quote-color-text);
      font-size:   var(--quote-font-size);
      font-style:  var(--quote-font-style);
      font-weight: var(--quote-font-weight);
      line-height: var(--quote-line-height);
      margin-block: 0;
      margin-inline: 0;
      padding-inline-start: 0;
      text-align: center;
      text-transform: var(--quote-text-transform);
    }

    p {
      margin-block: 0;
      margin-inline: auto;
    }

    figcaption {
      align-items: center;
      display: flex;
      flex-direction: row;
      font-size: var(--quote-figcaption-font-size);
      gap: var(--quote-figcaption-gap);
      justify-content: center;
      margin-block: 0;

      /* Avatar */
      picture {
        align-items: center;
        aspect-ratio: 1;
        background-color: var(--quote-avatar-color-background);
        border-radius: var(--quote-avatar-border-radius);
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        overflow: hidden;
        width: var(--quote-avatar-size);

        img {
          display: block;
          height: auto;
          width: 100%;
        }
      }

      /* Author block */
      div {
        color: var(--quote-author-color-text);
        line-height: var(--quote-author-line-height);
        text-align: center;
        text-transform: var(--quote-author-text-transform);
      }

      /* When avatar present: author text aligns left */
      picture + div {
        text-align: start;
      }

      cite {
        color: var(--quote-cite-color-text);
        font-style: var(--quote-cite-font-style);
        font-weight: var(--quote-cite-font-weight);
      }
    }
  }
}

/* components/reference.css */
@layer components {
  .reference {
    background-color: var(--reference-color-background);
    border: var(--reference-border-width) var(--reference-border-style) var(--reference-color-border);
    border-radius: var(--reference-border-radius);
    color: var(--reference-color-text);
    display: inline-block;
    font-size: var(--reference-font-size);
    font-weight: var(--reference-font-weight);
    padding-block: var(--reference-padding-block);
    padding-inline: var(--reference-padding-inline);
    text-align: center;
    text-transform: var(--reference-text-transform);
  }
}


/* components/related.css */
@layer components {
  .related {
    background-color: var(--color-background-muted);
    margin-block: 0;
    padding-block: var(--spacing-section);

    div + & {
      margin-block-start: var(--spacing-section);
    }
    & + & {
      padding-block-start: 0;
    }
    &:last-child {
      margin-block-end: calc(var(--spacing-section) * -1);
    }

    @media (width >= 48rem) {
      .heading {
        align-items: baseline;
        flex-direction: row;
        justify-content: space-between;
      }
    }
  }
}
/* components/screenshot.css */
/*
 * .screenshot — browser-chrome wrapper for images/videos.
 *
 * Structure:
 *   .screenshot
 *     > span            — top bar (macOS traffic-light dots)
 *     > figure
 *         picture / img / video
 *         figcaption
 */
@layer components {
  .screenshot {
    position: relative;

    /* ── Top bar ──────────────────────────────────────────────── */

    > span {
      background-color: var(--screenshot-bar-color-background);
      border-start-start-radius: var(--screenshot-border-radius);
      border-start-end-radius: var(--screenshot-border-radius);
      display: block;
      height: var(--screenshot-bar-height);
    }

    /* ── Traffic-light dots ───────────────────────────────────── */

    &::before,
    &::after,
    > span::before {
      border-radius: 50%;
      content: '';
      height: var(--screenshot-dot-size);
      position: absolute;
      top: var(--screenshot-dot-offset-top);
      width: var(--screenshot-dot-size);
      z-index: 1;
    }

    &::before {
      background-color: var(--screenshot-dot-color-red);
      left: var(--screenshot-dot-offset-left);
    }

    &::after {
      background-color: var(--screenshot-dot-color-yellow);
      left: calc(var(--screenshot-dot-offset-left) + var(--screenshot-dot-size) + var(--screenshot-dot-gap));
    }

    > span::before {
      background-color: var(--screenshot-dot-color-green);
      left: calc(1rem + (var(--screenshot-dot-size) + var(--screenshot-dot-gap)) * 2);
    }

    /* ── Figure ────────────────────────────────────────────────── */

    figure {
      margin: 0;
    }
    figcaption {
      padding-inline: 0;
    }

    /* ── Media ────────────────────────────────────────────────── */

    video,
    picture {
      border-end-start-radius: var(--screenshot-border-radius);
      border-end-end-radius: var(--screenshot-border-radius);
      box-shadow: var(--screenshot-shadow);
      overflow: hidden;
    }

    video,
    img {
      display: block;
      height: auto;
      width: 100%;
    }

  }
}

/* components/sidebar.css */
/*
 * .sidebar — aside section.
 * 
 */
@layer components {
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-gap);

    > * {
      margin-block: 0;
    }

    .btn {
      align-self: start;
    }

    .card {
      width: 100%;
    }
  }
}

/* components/sidebarmenu.css */
/*
 * .sidebarmenu — section navigation, sticky sidebar on tablet+, drawer on mobile.
 *
 * Structure:
 *   aside.sidebarmenu
 *     div                      (sticky wrapper)
 *       p                      (label — tablet+ only)
 *       button.js-dialog-toggle  (toggle — mobile only)
 *       div.drawer
 *         div.header
 *           p.title
 *           button.js-dialog-close
 *         div.content
 *           nav
 *             ul.nav
 *               li > a[.active]
 *                 ul > li > a[.active]
 */
@layer components {
  .sidebarmenu {
    /* ── Sticky wrapper (tablet-wide+) ───────────────────────────── */
    @media (width >= 64rem) {
      overflow-y: auto;

      max-height: var(--sidebarmenu-max-height);
      position: sticky;
      top: var(--sidebarmenu-sticky-top);

      @media (prefers-reduced-motion: no-preference) {
        transition: max-height var(--duration-slow) var(--easing-out),
                    top        var(--duration-slow) var(--easing-out);
      }

      html.is-scrolling-down & {
        max-height: calc(100vh - var(--spacing-md));
        top: var(--spacing-md);
      }
    }

    /* ── Label ──────────────────────────────────────────────── */
    > div > p {
      color: var(--sidebarmenu-label-color);
      display: none;
      font-family: var(--sidebarmenu-label-font-family);
      font-size: var(--sidebarmenu-label-font-size);
      font-weight: var(--sidebarmenu-label-font-weight);
      line-height: var(--sidebarmenu-label-line-height);
      margin-block-end: var(--sidebarmenu-label-margin-block-end);

      @media (width >= 64rem) {
        display: block;
      }
    }

    /* ── Nav ────────────────────────────────────────────────── */
    nav {
      ul {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      ul ul {
        font-size: var(--sidebarmenu-nav-sub-font-size);
        padding-inline-start: var(--sidebarmenu-nav-sub-indent);
      }

      a {
        color: var(--sidebarmenu-nav-link-color);
        display: block;
        font-size: var(--sidebarmenu-nav-link-font-size);
        padding-block: var(--sidebarmenu-nav-link-padding-block);
        padding-inline: var(--sidebarmenu-nav-link-padding-inline);

        &.active {
          color: var(--sidebarmenu-nav-link-color-active);
        }
      }
    }

    /* ── Title (drawer header) ───────────────────────────── */
    .title {
      color: var(--sidebarmenu-label-color);
      font-family: var(--sidebarmenu-label-font-family);
      font-size: var(--sidebarmenu-label-font-size);
      font-weight: var(--sidebarmenu-label-font-weight);
    }
  }
}

/* components/status.css */
@layer components {
  .status {
    background-color: var(--status-color-background);
    border: var(--status-border-width) var(--status-border-style) var(--status-color-border);
    border-radius: var(--status-border-radius);
    color: var(--status-color-text);
    display: inline-block;
    font-size: var(--status-font-size);
    font-weight: var(--status-font-weight);
    padding-block: var(--status-padding-block);
    padding-inline: var(--status-padding-inline);
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) {
    a.status:hover {
      background-color: var(--status-color-background-hover, var(--status-color-background));
      color: var(--status-color-text-hover, var(--status-color-text));
    }
  }

  /* Variants */
  .status-exclusive    {
    --status-color-background: var(--color-danger);
    --status-color-background-hover: var(--color-danger-strong);
    --status-color-text: var(--color-text-on-danger);
  }
}

/* components/text.css */
@layer components {
  .text {
    p:first-child {
      margin-block-start: 0;
    }
    p:last-child {
      margin-block-end: 0;
    }
  }
}

/* components/timeline.css */
/*
 * .timeline — ordered list of chronological steps.
 *
 * Structure:
 *   ol.timeline
 *     li
 *       article.step
 *         p.surtitle        (optional — step number / label)
 *         p.title
 *         [p | div]         (optional — body text)
 */
@layer components {
  .timeline {
    display: flex;
    flex-direction: column;
    gap: var(--timeline-gap);
    list-style: none;
    margin-block: 0;
    padding-inline-start: 0;
    position: relative;

    /* Vertical connector line */
    &::before {
      background-color: var(--timeline-connector-color);
      content: '';
      inset-block: 0;
      inset-inline-start: calc(var(--timeline-marker-size) / 2);
      position: absolute;
      width: var(--timeline-connector-width);
    }

    li {
      margin-block: 0;
      padding-inline-start: calc(var(--timeline-marker-size) + var(--timeline-step-gap));
      position: relative;
    }

    /* Step marker (number from counter or CSS) */
    li::before {
      align-items: center;
      background-color: var(--timeline-marker-color-background);
      border-radius: var(--timeline-marker-border-radius);
      color: var(--timeline-marker-color-text);
      content: counter(timeline-counter);
      counter-increment: timeline-counter;
      display: flex;
      font-size: var(--timeline-marker-font-size);
      font-weight: var(--timeline-marker-font-weight);
      height: var(--timeline-marker-size);
      inset-block-start: 0;
      inset-inline-start: 0;
      justify-content: center;
      position: absolute;
      width: var(--timeline-marker-size);
    }
  }

  ol.timeline {
    counter-reset: timeline-counter;
  }

  .step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);

    p {
      margin-block: 0;
    }

    .title {
      font-weight: var(--font-weight-heading);
    }
  }
}

/* components/toc.css */
/*
 * .toc — table of contents, sticky sidebar on laptop+, drawer on mobile.
 *
 * Structure:
 *   div.toc
 *     div                      (sticky wrapper)
 *       p                      (label — laptop+ only)
 *       button.js-dialog-toggle  (toggle — mobile only)
 *       div.drawer
 *         div.header
 *           p.title
 *           button.js-dialog-close
 *         div.content
 *           nav#TableOfContents
 *             ul | ol
 *               li > a
 */
@layer components {
  .toc {
    /* ── Sticky wrapper (tablet-wide+) ───────────────────────────── */
    @media (width >= 64rem) {
      > div {
        position: sticky;
        top: var(--toc-sticky-top);

        @media (prefers-reduced-motion: no-preference) {
          transition: top var(--duration-slow) var(--easing-out);
        }

        html.is-scrolling-down & {
          top: var(--header-offset);
        }
      }
    }

    /* ── Label ──────────────────────────────────────────────── */
    > div > p {
      color: var(--toc-label-color);
      display: none;
      font-family: var(--toc-label-font-family);
      font-size: var(--toc-label-font-size);
      font-weight: var(--toc-label-font-weight);
      line-height: var(--toc-label-line-height);
      margin-block-end: var(--toc-label-margin-block-end);
      margin-block-start: 0;

      @media (width >= 64rem) {
        display: block;
      }
    }

    /* ── Nav ────────────────────────────────────────────────── */
    nav {
      width: 100%;

      ol,
      ul {
        padding-inline-start: var(--toc-nav-indent);
      }

      li {
        font-size: var(--toc-nav-font-size);

        &:not(:last-child) {
          margin-block-end: var(--toc-nav-item-gap);
        }
      }

      ol ol {
        list-style-type: circle;
        margin-block-start: var(--toc-nav-item-gap);
      }

      a {
        text-decoration-color: var(--toc-nav-link-color-text-decoration);

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            text-decoration-color: var(--toc-nav-link-color-text-decoration-hover);
          }
        }
      }
    }

    /* ── Title (drawer header) ───────────────────────────── */
    .title {
      color: var(--toc-label-color);
      font-family: var(--toc-label-font-family);
      font-size: var(--toc-label-font-size);
      font-weight: var(--toc-label-font-weight);
    }
  }
}

/* components/tooltip.css */
/*
 * .tooltip — information pop-up.
 *
 * Expected HTML:
 *   <span class="tooltip">
 *     <span class="tooltip-inner">…</span>
 *   </a>
 */
@layer components {
  .tooltip-inner {
    background-color: var(--color-dark);
    border-radius: var(--radius-xs);
    color: var(--color-text-on-dark);
    display: inline-flex;
    font-size: var(--font-size-xs);
    padding-block: var(--spacing-2xs);
    padding-inline: var(--spacing-xs);
    text-decoration: none;
  }
}

/* components/transcription.css */
/*
 * .transcription — collapsible transcript via <details>/<summary>.
 *
 * Structure:
 *   div.transcription
 *     details
 *       summary
 *       div | p  (transcript content)
 */
@layer components {
  .transcription {
    --details-color-background: transparent;
    --details-color-text: var(--transcription-color-text);
    --details-border-radius: 0;
    --details-box-shadow: none;
    --details-box-shadow-hover: none;
    --details-margin: var(--transcription-margin);
    --details-padding: var(--transcription-padding);
    --details-content-font-size: var(--transcription-font-size);
    --details-summary-font-size:  var(--transcription-summary-font-size);
    --details-summary-font-weight: var(--transcription-summary-font-weight);
    
    details {
      border: none;
    }
    summary {
      display: inline-flex;
      gap: var(--spacing-xs)
    }
  }
}

/* components/video.css */
/*
 * .video — wrapper for videos.
 *
 * Structure:
 *   .video
 *     video
 *     button
 */
@layer components {
  .video {
    position: relative;

    video {
      aspect-ratio: var(--ratio-video);
      width: 100%;
    }

    .btn-toggle-video {
      --btn-color-background: transparent;
      --btn-color-background-hover: transparent;
      --btn-color-border: transparent;
      --btn-color-border-hover: transparent;
      inset-block-end: 0;
      inset-inline-end: 0;
      position: absolute;
      z-index: 10;
    }
  }
}


/* Blocks */
/* components/blocks/block-alert.css */
/*
 * .block-alert — block section displaying an alert message.
 *
 * Structure:
 *   section.block-alert[.block-light]
 *     .container
 *       .alert[.alert-{variant}]
 */
/* components/blocks/block-audio.css */
/*
 * .block-audio — full-width block section wrapping an audio player.
 *
 * Structure:
 *   section.block-audio[.block-light]
 *     .heading
 *     .container
 *       audio.js-audio
 *       div.transcription
 *     .footing
 */
@layer components {
  .block-audio {
    audio {
      @media (width >= 64rem) {
        margin-inline: auto;
      }
    }
  }
}

/* components/blocks/block-comparison.css */
/*
 * .block-comparison — pricing / feature comparison block.
 *
 * Structure:
 *   section.block-comparison[.block-light]
 *     .heading
 *     .container
 *       .items.items-{2-6}
 *         div
 *           .item[.item-highlighted]
 *             header
 *               .badge         (optional)
 *               h2 | h3
 *               p              (subtitle)
 *               .pricing       (price display)
 *                 + p          (billing period)
 *             .content
 *               ul > li        (feature list)
 *             footer
 *               .btn           (CTA)
 *     .footing
 *
 * Column variants: .items-2 through .items-6
 * (set via `column` in content config, default 3)
 */
@layer components {
  .block-comparison {

    /* ── Grid ──────────────────────────────────────────────────── */

    .items {
      justify-content: center;
    }

    /* ── variants ───────────────────────────────────── */

    &.block-bg,
    &.block-light {
      .comparison {
        --item-color-background: var(--comparison-item-color-background-on-block-light);
      }
    }

    &.block-full {
      .items {
        padding-inline: var(--gutter);
      }
    }

  }
}

/* components/blocks/block-cta.css */
/*
 * .block-cta — call-to-action block, centered at tablet-wide+.
 *
 * Structure:
 *   section.block-cta[.block-light]
 *     .heading
 *     .container
 *       .cta
 *         a.btn  (primary)
 *         a.btn  (secondary, optional)
 *     .footing
 */
@layer components {
  .block-cta {

    /* themes */
    &.block-accent {
      --btn-color-background: var(--color-text-on-accent);
      --btn-color-border:  var(--color-text-on-accent);
      --btn-color-text: var(--color-accent);
    }
    &.block-dark {
      --btn-color-background:var(--color-text-on-dark);
      --btn-color-border: var(--color-text-on-dark);
      --btn-color-text: var(--color-dark);
    }

    /* alignment */
    &.block-align-center {
      .cta {
        margin-inline: auto;
      }
    }
    &.block-align-end {
      .cta {
        margin-inline-start: auto;
        margin-inline-end: 0;
      }
    }
  }
}

/* components/blocks/block-datas.css */
/*
 * .block-datas — full-width block section wrapping a list of data.
 *
 * Structure:
 *   section.block-datas[.block-light]
 *     .heading
 *     .container
 *       .items
 *     .footing
 */
@layer components {
  .block-datas {
    .items {
      li {
        margin-block: 0;
      }
    }
    .gauge {
      margin-inline: auto;
    }
    .value  {
      font-size: var(--font-size-fluid-xl);
    }
    .title {
      margin-block: 0;
    }
  }
}

/* components/blocks/block-editorial.css */
/*
 * .block-editorial — text + media side-by-side block.
 *
 * Structure:
 *   section.block-editorial[.block-editorial-rtl][.block-light]
 *     .heading
 *     .container
 *       .grid
 *         .content   — text, CTAs
 *         .media     — image / screenshot
 *     .footing
 *
 * Variants:
 *   .block-editorial-rtl  — reverses content/media order
 *   .block-editorial-full  — full width media and content
 */
@layer components {

  .block-editorial {
    .editorial {
      .heading {
        align-items: start;
        margin-block-end: var(--gap);
        margin-inline: 0;
        text-align: start;
      }
    }
  }

  .block-editorial-rtl {
    @media (width >= 48rem) {
      .media {
        order: -1;
      }
    }
  }

  .block-editorial.block-full {
    --block-full-padding-inline: var(--block-editorial-full-padding-inline, 0);
    .media {
      margin-inline: 0;
      width: 100%;
    }
    .content {
      margin-inline: var(--gutter);
    }
    @media (width >= 48rem) {
      --block-padding-block: var(--block-editorial-full-padding-block, 0);
      .editorial {
        gap: var(--block-editorial-full-gap, var(--gap));
      }
    }
  }
}

/* components/blocks/block-figure.css */
/*
 * .block-figure — full-width image/figure block.
 *
 * Structure:
 *   section.block-figure[.block-figure-{variant}][.block-light]
 *     .heading
 *     figure
 *       picture / img
 *       figcaption
 *     .footing
 *
 * Variants (set via .grid / .offset in content config):
 *   .block-figure-start     — heading left-aligned at tablet+
 *   .block-figure-end       — heading right-aligned at tablet+
 *   .block-figure-full      — figure full viewport width, figcaption padded
 *   .block-figure-large     — figure full bleed on mobile
 *   .block-figure-container — figure full bleed on mobile (same as large)
 */
@layer components {
  .block-figure {
    figure {
      margin-block: 0;
    }
  }

  /* ── Alignment variants — tablet+ ────────────────────────── */

  /* Full bleed: figcaption indented to match container gutter */
  .block-figure.block-full {
    figcaption {
      padding-inline: var(--gutter);
    }
  }

  @media (width >= 48rem) {
    .block-figure.block-start {
      .heading {
        align-items: flex-start;
        margin-inline-start: 0;
        text-align: start;
      }
    }

    .block-figure.block-end {
      .heading {
        align-items: flex-end;
        margin-inline-end: 0;
        text-align: end;
      }
    }
  }

  /* ── Full-bleed variants — mobile only ───────────────────── */

  @media not (width >= 48rem) {
    .block-figure.block-container {
      > .container {
        padding-inline: 0;
      }

      figcaption {
        padding-inline: var(--gutter);
      }
    }
  }
}

/* components/blocks/block-embed.css */
/*
 * .block-embed — block section wrapping a third-party embed.
 *
 * Structure:
 *   section.block-embed[.block-light]
 *     .heading
 *     .container
 *       .embed
 *         iframe | video | embed | object
 *     .footing
 */

/* components/blocks/block-gallery.css */
/*
 * .block-gallery — gallery block with optional heading and footing.
 *
 * Structure:
 *   section.block-gallery[.block-light]
 *     .heading
 *     .container
 *       .gallery[.js-gallery]
 *         a[href][data-type="image"][data-caption]
 *           img | picture
 *     .footing
 */

/* components/blocks/block-informations.css */
/*
 * .block-informations — block section displaying informations cards.
 *
 * Structure:
 *   section.block-informations[.block-light]
 *     .container
 *       .heading
 *       .items
 *         div
 *           [item card]
 *       .footing
 *
 */

@layer components {
  .block-informations {
    .media:has(.icon) {
      --icon-size: var(--block-informations-media-icon-size);
    }
  }
}
  
/* components/blocks/block-instagram.css */
/*
 * .block-instagram — block section displaying an Instagram feed.
 *
 * Structure:
 *   section.block-instagram[.block-light]
 *     .heading
 *     .container
 *       div.instagram.js-instagram[data-limit][data-token]
 *         div > a > img    (injected by JS)
 *       .cta-group
 *     .footing
 */
@layer components {
  .block-instagram {
    text-align: center;

    .instagram {
      -moz-column-gap: var(--items-column-gap, var(--items-gap));
           column-gap: var(--items-column-gap, var(--items-gap));
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      row-gap: var(--items-row-gap, var(--items-gap));

      div {
        flex: 1;
        max-width: var(--block-instagram-item-max-width);
      }

      a {
        display: block;

        &::after {
          content: none;
        }
      }

      img {
        height: auto;
        width: 100%;
      }
    }
  }
}

/* components/blocks/block-latest.css */
/*
 * .block-latest — block section displaying the latest content items.
 *
 * Layouts (modifier on section):
 *   .block-latest-grid  (default) — items grid, uses commons/items partial
 *   .block-latest-list  — 2-col layout (heading | list), items as plain links
 *
 * Structure — grid:
 *   section.block-latest.block-grid.block-latest-{section}[.block-light]
 *     .container
 *       .heading
 *       .items
 *         div
 *           [item card]
 *       .footing
 *
 * Structure — list:
 *   section.block-latest.block-list.block-latest-{section}[.block-light]
 *     .container
 *       .heading
 *       ol.list
 *         li
 *           a
 *       .footing
 */
@layer components {


  /* ── List ─────────────────────────────────────────────────────────── */
  .block-latest.block-list {
    .block-content {
      @media (width >= 48rem) {
        gap: var(--block-selected-gap, var(--gap));
        grid-template-columns: 1fr 1fr;
      }
    }

    .heading {
      @media (width >= 48rem) {
        align-items: flex-start;
        margin-block-end: 0;
        margin-inline-start: 0;
        max-width: none;
        text-align: start;
      }
    }

    @media (width >= 48rem) {
      .footing {
        grid-column: 2 / -1;
        margin-inline: 0;
        text-align: start;
      }
    }

    .list {
      list-style: none;
      padding-inline-start: 0;
    }
  }
}

/* components/blocks/block-images.css */
/*
 * .block-images — block section wrapping a collection of figures.
 *
 * Structure:
 *   section.block-images[.block-light]
 *     .heading
 *     .container
 *       .images
 *         figure[.half]
 *           picture | img
 *           figcaption
 *     .footing
 */
@layer components {
  .block-images {
    figure {
      margin: 0;
    }
    img {
      width: 100%;
    }
  }
}

/* components/blocks/block-logos.css */
/*
 * .block-logos — block section displaying a grid or carousel of logos.
 *
 * Layouts:
 *   grid (default) — uses .items.items-{n} for columns
 *   carousel       — Splide carousel
 *
 * Structure — grid:
 *   section.block-logos[.block-light]
 *     .heading
 *     .container
 *       .logos.items.items-{n}
 *         div
 *           picture | span | a > picture
 *     .footing
 */
@layer components {
  .block-logos {
    /* ── Logo item ───────────────────────────────────────────── */
    .logos > div {
      aspect-ratio: var(--block-logos-item-ratio);
    }

    @media not (width >= 64rem) {
      .logos {
        --items-min-width: var(--block-logos-items-min-width-md);
      }
      .container:has(.carousel) {
        padding-inline: 0;
      }
    }
    @media not (width >= 48rem) {
      .logos {
        --items-min-width: var(--block-logos-items-min-width-sm);
      }
    }

    picture,
    span {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
    }

    span {
      font-weight: var(--font-weight-bold);
    }

    img {
      height: 100%;
      max-height: var(--block-logos-item-image-max-height);
      max-width: var(--block-logos-item-image-max-width);
      -o-object-fit: contain;
         object-fit: contain;
      width: 100%;
    }

    a {
      text-decoration: none;

      &::after {
        content: none;
      }
    }
  }
}

/* components/blocks/block-map.css */
/*
 * .block-map — block section wrapping a .map.
 *
 * Structure — with grid (map inside container):
 *   section.block-map.block-{grid}[.block-light]
 *     .heading
 *     .container
 *       .row
 *         div
 *           div.map.js-map
 *     .footing
 *
 * Structure — full-width (map direct child):
 *   section.block-map[.block-light]
 *     .heading
 *     div.map.js-map
 *     .footing
 */
@layer components {
  .block-map {
    .map {
      margin-block: 0;
    }
  }
}

/* components/blocks/block-newsletter.css */
/*
 * .block-newsletter — block section for subscribing to the newsletter.
 *
 * Structure:
 *   section.block-newsletter[.block-light]
 *     .container
 *       form
 */
@layer components {
  .block-newsletter {
    .newsletter {
      margin-inline: auto;
      max-width: var(--max-width-paragraph);
      div {
        display: flex;
      }
    }
  }
}

/* components/blocks/block-paragraph.css */
/*
 * .block-paragraph — full-width block section wrapping a paragraph.
 *
 * Structure:
 *   section.block-paragraph[.block-light]
 *     .heading
*      .paragraph
 *     .footing
 */
@layer components {
  .block-paragraph {
    .paragraph {
      .heading {
        margin-block-end: var(--gap);
      }
      
      .notes,
      .cta {
        margin-block-start: var(--gap);
      }
    }

    &.block-align-center {
      .text p {
        margin-inline: auto;
      }
    }

    &.block-align-end {
      .text p {
        margin-inline-start: auto;
      }
    }
  }
}

/* components/blocks/block-pushes.css */
/*
 * .block-pushes — full-width block section wrapping a .push.
 *
 * Structure:
 *   section.block-pushes[.block-light]
 *     .heading
 *     .container
 *       .push
 *     .footing
 */
@layer components {
  .block-pushes {
    .carousel {
      .push {
        display: flex;
        height: 100%;
      }
      .content {
        align-self: center;
        width: 100%;
      }
    }

    &.block-full {
      --push-border-radius: 0;
    }

    @media not (width >= 48rem) {
      .items .push,
      .carousel .push {
        margin-inline: 0
      }
      .push {
        border-radius: 0;
      }
      &:not(.block-full) {
        .carousel,
        .push {
          margin-inline: calc(var(--gutter) * -1);
        }
      }
    }

    .items-2 {
      .push {
        min-height: 100%;
        @media (width >= 48rem) {
          --push-ratio: var(--push-ratio-double);
        }
      }
    }
  }
}

/* components/blocks/block-quote.css */
/*
 * .block-quote — full-width block section wrapping a .quote.
 *
 * Structure:
 *   section.block-quote[.block-light]
 *     .heading
 *     .container
 *       .row
 *         div
 *           figure.quote
 *     .footing
 */
@layer components {
  .block-quote {
    .quote {
      --figure-margin-block: 0;
      --quote-gap: var(--block-quote-gap);
      --quote-padding: 0;
    }
    &.block-accent,
    &.block-dark {
      .quote {
        --quote-color-text: var(--color-text);
        --quote-cite-color-text: var(--color-text);
      }
    }
  }
}

/* components/blocks/block-search.css */
/*
 * .block-search — block section wrapping a .search.
 *
 * Structure — with grid (search inside container):
 *   section.block-search.block-{grid}[.block-light]
 *     .heading
 *     .container
 *       .row
 *         div
 *           .search
 *     .footing
 *
 * Structure — full-width (search direct child):
 *   section.block-search[.block-light]
 *     .heading
 *     .search
 *     .footing
 */
/* components/blocks/block-selected.css */
/*
 * .block-selected — block section displaying a selection of content items.
 *
 * Layouts (modifier on section):
 *   .block-grid  (default) — items grid, uses commons/items partial
 *   .block-list  — 2-col layout (heading | list), items as plain links
 *
 * Structure — grid:
 *   section.block-selected.block-grid.block-selected-{section}[.block-light]
 *     .container
 *       .heading
 *       .items
 *         div
 *           [item card]
 *       .footing
 *
 * Structure — list:
 *   section.block-selected.block-list.block-selected-{section}[.block-light]
 *     .container
 *       .heading
 *       ol.list
 *         li
 *           a
 *       .footing
 */
@layer components {

  /* ── Grid ─────────────────────────────────────────────────────────── */
  .block-selected.block-grid {
    .items {
      justify-content: center;
    }
  }

  /* ── List ─────────────────────────────────────────────────────────── */
  .block-selected.block-list {
    .block-content {
      @media (width >= 48rem) {
        gap: var(--block-selected-gap, var(--gap));
        grid-template-columns: 1fr 1fr;
      }
    }

    .heading {
      @media (width >= 48rem) {
        align-items: flex-start;
        margin-inline-start: 0;
        max-width: none;
        text-align: start;
      }
    }

    @media (width >= 48rem) {
      .footing {
        grid-column: 2 / -1;
        margin-inline: 0;
        text-align: start;
      }
    }

    .list {
      list-style: none;
      padding-inline-start: 0;
      /* @media (--tablet) {
        margin-block-start: var(--block-selected-list-items-margin-block-start);
      } */
    }
  }
}

/* components/blocks/block-testimonials.css */
/*
 * .block-testimonials — block section displaying a collection of .quote items.
 *
 * Layouts (modifier on section):
 *   .block-testimonials-grid      (default) — multi-column grid, quote as card
 *   .block-testimonials-carousel  — horizontal carousel via Splide, quote as card
 *   .block-testimonials-list      — 2-col layout (heading | list), quote inline
 *
 * Structure — grid / carousel:
 *   section.block-testimonials.block-grid[.block-light]
 *     .heading
 *     .container
 *       .testimonials
 *         div
 *           figure.quote
 *     .footing
 *
 * Structure — list:
 *   section.block-testimonials.block-list[.block-light]
 *     .container
 *       .heading
 *       ol.items
 *         li
 *           figure.quote
 *     .footing
 */
@layer components {

  /* ── Base ─────────────────────────────────────────────────────────── */
  .block-testimonials {
    .testimonials > div,
    .splide__slide {
      container-type: inline-size;
    }

    /*
     * Card look for the .quote: only the values that differ from the .quote
     * design-system defaults are set here. Site-level customisation overrides
     * the plain --quote-* tokens scoped to .block-testimonials.
     */
    .quote {
      --quote-border-radius: var(--radius-md);
      --quote-color-background: var(--color-background-muted);
      --quote-font-style: normal;
      --quote-gap: var(--spacing-lg);
      height: 100%;
      margin: 0;

      /* ── Compact ────────────────────────────────────── */
      --quote-figcaption-font-size: var(--font-size-2xs);
      --quote-font-size: var(--font-size-small);
      --quote-padding: var(--spacing-sm);

      /* ── Default ────────────────────────────────────── */
      @container (width >= 25rem) {
        --quote-figcaption-font-size: var(--font-size-small);
        --quote-font-size: var(--font-size-fluid-lg);
        --quote-padding: var(--spacing-lg);
        --max-width-paragraph: var(--max-width-heading);
      }

      figcaption {
        margin-block-start: auto;
      }
    }
  }

  /* ── List ─────────────────────────────────────────────────────────── */
  .block-testimonials.block-list {
    ol {
      list-style: none;
      padding-inline-start: 0;
    }
  }

  /* ── Carousel ─────────────────────────────────────────────────────────── */
  .block-testimonials.block-carousel {
    overflow: hidden;
    .splide__track {
      overflow: visible;
    }
  }
}

/* components/blocks/block-timeline.css */
/*
 * .block-timeline — full-width section wrapping a .timeline.
 *
 * Structure:
 *   section.block-timeline[.block-light]
 *     .heading
 *     .timeline
 *     .footing
 */
@layer components {
  .block-timeline {
    .timeline {
      margin-block: 0;
    }
    &.block-accent {
      --timeline-marker-color-background: var(--color-text-on-accent);
      --timeline-marker-color-text: var(--color-accent);
    }
    &.block-dark {
      --timeline-marker-color-background: var(--color-text-on-dark);
      --timeline-marker-color-text: var(--color-dark);
    }
  }
}

/* components/blocks/block-title.css */
/*
 * .block-title — block section displaying a title/heading only.
 *
 * Structure:
 *   section.block-title[.block-light]
 *     .heading
 */
/* components/blocks/block-video.css */
/*
 * .block-video — block section displaying a video with optional transcription.
 *
 * Structure:
 *   section.block-video[.block-light]
 *     .heading
 *     .container > .row > .col
 *       figure
 *       .transcription
 *     .footing
 */
@layer components {
  .block-video {
    figure {
      margin-block: 0;
    }
    details {
      --details-summary-padding-block: 0;
      --details-summary-padding-inline: 0;
      --details-content-padding-inline: 0;
    }
  }
}



/* Pages */
/* pages/home.css */
@layer pages {
  .home-page {
    .hero {
      .row {
        height: var(--hero-home-height, var(--hero-height));
        max-height: var(--hero-home-max-height, var(--hero-max-height));
        min-height: var(--hero-home-min-height, var(--hero-min-height));
      }
    }
  }
}

/* Utilities */
/* css/utilities.css */
/*
 * Imports every utility in @layer utilities — the last layer, so a utility
 * wins over the grid or the display a component declares for itself.
 */
/* css/utilities/display.css */
@layer utilities {
  .d-none { display: none; }
}

/* css/utilities/scrollsnap.css */
/*
 * .scrollsnap — turns a grid into a horizontal carousel with snap points:
 * items keep their own width, the grid stops wrapping, and the row scrolls,
 * bleeding into the gutter so the next one peeks in.
 *
 *   .scrollsnap      carousel at every width
 *   .scrollsnap-sm   carousel below --sm (mobile)
 *   .scrollsnap-md   carousel below --md (mobile + tablet)
 *   .scrollsnap-lg   carousel below --lg
 *   .scrollsnap-xl   carousel below --xl
 *
 * The suffix names the rung where the carousel STOPS and the grid comes back —
 * the same reading as `expand: md` on a panel.
 *
 * Opt-in, on the element that owns the grid (.items, .logos…), so the same
 * component is a carousel in one context and a plain grid in another. The class
 * is written by Hugo from a param — see partials/func/SetScrollsnap.html in
 * hugolify-theme.
 *
 * A utility rather than a component rule because it has to win over the grid
 * the component declares for itself in @layer components.
 *
 * Item width: --items-min-width (or --max-width-item), capped by
 * --items-carousel-max-width so the next item always peeks in.
 */
@layer utilities {
  .scrollsnap,
  .scrollsnap-sm,
  .scrollsnap-md,
  .scrollsnap-lg,
  .scrollsnap-xl {
    grid-auto-columns: min(var(--items-min-width, var(--max-width-item)), var(--items-carousel-max-width, 75vw));
    grid-auto-flow: column;
    grid-template-columns: none;
    justify-content: start;
    margin-inline: calc(var(--gutter) * -1);
    overflow-x: auto;
    padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;

    > * {
      scroll-margin-inline: var(--gutter);
      scroll-snap-align: start;
    }
  }

  /* Above its rung a variant hands every property back to the layer below —
     the component's own grid rules — so there is no second set of values here
     to keep in step with the block above. */
  @media (width >= 48rem) {
    .scrollsnap-sm {
      grid-auto-columns: revert-layer;
      grid-auto-flow: revert-layer;
      grid-template-columns: revert-layer;
      justify-content: revert-layer;
      margin-inline: revert-layer;
      overflow-x: revert-layer;
      padding-inline: revert-layer;
      scroll-snap-type: revert-layer;

      > * {
        scroll-margin-inline: revert-layer;
        scroll-snap-align: revert-layer;
      }
    }
  }
  @media (width >= 64rem) {
    .scrollsnap-md {
      grid-auto-columns: revert-layer;
      grid-auto-flow: revert-layer;
      grid-template-columns: revert-layer;
      justify-content: revert-layer;
      margin-inline: revert-layer;
      overflow-x: revert-layer;
      padding-inline: revert-layer;
      scroll-snap-type: revert-layer;

      > * {
        scroll-margin-inline: revert-layer;
        scroll-snap-align: revert-layer;
      }
    }
  }
  @media (width >= 90rem) {
    .scrollsnap-lg {
      grid-auto-columns: revert-layer;
      grid-auto-flow: revert-layer;
      grid-template-columns: revert-layer;
      justify-content: revert-layer;
      margin-inline: revert-layer;
      overflow-x: revert-layer;
      padding-inline: revert-layer;
      scroll-snap-type: revert-layer;

      > * {
        scroll-margin-inline: revert-layer;
        scroll-snap-align: revert-layer;
      }
    }
  }
  @media (width >= 100rem) {
    .scrollsnap-xl {
      grid-auto-columns: revert-layer;
      grid-auto-flow: revert-layer;
      grid-template-columns: revert-layer;
      justify-content: revert-layer;
      margin-inline: revert-layer;
      overflow-x: revert-layer;
      padding-inline: revert-layer;
      scroll-snap-type: revert-layer;

      > * {
        scroll-margin-inline: revert-layer;
        scroll-snap-align: revert-layer;
      }
    }
  }
}



/* Modules / Sections */

/* css/modules/docs.css — hugolify-theme-docs entry point */

/* Tokens */
/* docs.css — barrel, do not edit */
/* Do not edit directly, this file was auto-generated. */

/* doc.css */
@layer tokens {
  :root {
    --doc-media-icon-border-radius: var(--item-border-radius);
    --doc-media-icon-color-border: var(--item-color-border);
    --doc-media-icon-width: var(--size-40);
  }
}



/* Components */
/* components/doc.css */
/*
 * .doc remaps the full --item-* API (and the inner --btn-*) onto its
 * --doc-* tokens, so any value can be tuned from doc.json without
 * touching this file.
 * Usage: <article class="item doc">
 */
@layer components {
  .doc {
    .media:has(.icon) {
      --item-media-icon-border-radius: var(--doc-media-icon-border-radius);
      --item-media-icon-color-border: var(--doc-media-icon-color-border);
      --item-media-icon-width: var(--doc-media-icon-width);
    }
    .btn {
      display: none;
    }
  }
}

/* components/docs.css */

/* Pages */
/* pages/doc.css */

/* pages/docs.css */


/* css/modules/expertises.css — hugolify-theme-expertises entry point */

/* Tokens */
/* expertises.css — barrel, do not edit */

/* Do not edit directly, this file was auto-generated. */

/* expertises.css */
@layer tokens {
  :root {
    --expertises-min-width: var(--max-width-item);
    --expertises-nav-margin-block-start: var(--spacing-fluid-md);
  }
}



/* Components */
/* components/expertise.css */
/*
 * .expertise remaps the full --item-* API (and the inner --btn-*) onto its
 * --expertise-* tokens, so any value can be tuned from expertise.json without
 * touching this file.
 * Usage: <article class="item expertise">
 */
/* components/expertises.css */
/*
 * .expertises remaps the full --items-* API onto its --expertises-* tokens, so any
 * value can be tuned from expertises.json without touching this file.
 * Usage: <article class="items expertises">
 */
@layer components {
  .expertises {
    --items-min-width: var(--expertises-min-width);
    --items-nav-margin-block-start: var(--expertises-nav-margin-block-start);
  }
}


/* Pages */
@layer layout {
  .page-expertises {
    @media (width >= 48rem) {
      .grid {
        .content {
          --grid-column: span 8;
        }
        .sidebar {
          --grid-column: span 4;
        }
      }
    }
  }
}




/* components */
/* components/page.css */
/*
 * .page overrides --item-* tokens via --page-* to customize the item base.
 * Only add properties that diverge from the default item tokens.
 * Usage: <article class="item page">
 */
@layer components {
  .page {
    --btn-border-width: var(--item-btn-border-width);
    --btn-color-background: var(--item-btn-color-background);
    --btn-color-text: var(--item-btn-color-text);
    --btn-color-text-decoration: transparent;
    --btn-padding-inline: 0;
    --btn-padding-block: 0;

    /* Hover */
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --btn-color-text-decoration: initial;
      }
    }
  }
}
/* components/pages.css */
/*
 * .pages overrides --items-* tokens via --pages-* to customize the item base.
 * Only add properties that diverge from the default items tokens.
 * Usage: <article class="items pages">
 */

/* css/modules/persons.css — hugolify-theme-persons entry point */

/* Tokens */
/* persons.css — barrel, do not edit */
/* Do not edit directly, this file was auto-generated. */

/* person.css */
@layer tokens {
  :root {
    --person-border-width: 0px;
    --person-color-background: transparent;
    --person-media-border-radius: var(--radius-pill);
    --person-media-max-width: 100px;
    --person-padding-inline: 0px;
    --person-shadow: var(--shadow-none);
    --person-shadow-hover: var(--shadow-none);
  }
}

/* Do not edit directly, this file was auto-generated. */

/* persons.css */
@layer tokens {
  :root {
    --persons-min-width: 25ch;
    --persons-nav-margin-block-start: var(--items-nav-margin-block-start);
  }
}



/* Components */
/* components/person.css */
/*
 * .person remaps the full --item-* API (and the inner --btn-*) onto its
 * --person-* tokens, so any value can be tuned from person.json without
 * touching this file.
 * Usage: <article class="item person">
 */
@layer components {
  .person {
    --item-border-width: var(--person-border-width);
    --item-color-background: var(--person-color-background);
    --item-media-border-radius: var(--person-media-border-radius);
    --item-media-max-width: var(--person-media-max-width);
    --item-padding-inline: var(--person-padding-inline);
    --item-shadow: var(--person-shadow);
    --item-shadow-hover: var(--person-shadow-hover);
    
    &.card {
      align-items: start;

      @media (width >= 48rem) {
        flex-direction: row;
        .media {
          margin-block-end: var(--card-padding-block);
        }
      }

      .media {
        flex-shrink: 0;
      }
    }
  }
}

/* components/persons.css */
/*
 * .persons remaps the full --items-* API onto its --persons-* tokens, so any
 * value can be tuned from persons.json without touching this file.
 * Usage: <article class="items persons">
 */
@layer components {
  .persons {
    --items-min-width: var(--persons-min-width);
    --items-nav-margin-block-start: var(--persons-nav-margin-block-start);
  }
}


/* Pages */
@layer layout {
  .page-persons {
    @media (width >= 48rem) {
      .grid {
        .featured-image,
        .content {
          --grid-column: span 6;
        }
      }
    }
    @media (width >= 64rem) {
      .grid {
        .featured-image,
        .sidebar {
          --grid-column: span 3;
        }
      }
    }
  }
}



/* Modules / Taxonomies */

/* css/modules/persons-places.css — hugolify-theme-persons-places entry point */

/* Tokens */
/* tokens/persons-places.css — tokens for hugolify-theme-persons-places */
/*
@layer tokens {
  :root {
  }
}
*/


/* Components */
/* components/persons-place.css */
/*
 * Usage: <article class="item persons_place">
 */
@layer components {
  .persons_place {
    .btn {
      display: none;
    }
  }
}



/* Pages */





/* css/modules/places.css — hugolify-theme-places entry point */

/* Tokens */
/* places.css — barrel, do not edit */

/* Do not edit directly, this file was auto-generated. */

/* places.css */
@layer tokens {
  :root {
    --places-min-width: 40ch;
  }
}



/* Components */
/* components/place.css */
/*
 * .place remaps the full --item-* API (and the inner --btn-*) onto its
 * --place-* tokens, so any value can be tuned from place.json without
 * touching this file.
 * Usage: <article class="item place">
 */
@layer components {
  .place {
    address {
      font-size: var(--item-font-size);
    }
    .btn {
      display: none;
    }
  }
}

/* components/places.css */
/*
 * .places remaps the full --items-* API onto its --places-* tokens, so any
 * value can be tuned from places.json without touching this file.
 * Usage: <article class="items places">
 */
@layer components {
  .places {
    --items-min-width: var(--places-min-width);
  }
}


/* Pages */



/* css/modules/posts.css — hugolify-theme-posts entry point */

/* Tokens */
/* posts.css — barrel, do not edit */

/* Do not edit directly, this file was auto-generated. */

/* posts.css */
@layer tokens {
  :root {
    --posts-min-width: var(--max-width-item);
    --posts-nav-margin-block-start: var(--spacing-fluid-md);
  }
}



/* Components */
/* components/post.css */
/*
 * .post remaps the full --item-* API (and the inner --btn-*) onto its
 * --post-* tokens, so any value can be tuned from post.json without
 * touching this file.
 * Usage: <article class="item post">
 */
@layer components {
  .post {
    .btn {
      display: none;
    }
  }
}

/* components/posts.css */
/*
 * .posts remaps the full --items-* API onto its --posts-* tokens, so any
 * value can be tuned from posts.json without touching this file.
 * Usage: <article class="items posts">
 */
@layer components {
  .posts {
    --items-min-width: var(--posts-min-width);
    --items-nav-margin-block-start: var(--posts-nav-margin-block-start);
  }
}


/* Pages */
/* pages/post.css */
/* pages/posts.css */


/* Modules / Taxonomies */
/* css/modules/posts-authors.css — hugolify-theme-posts-authors entry point */

/* Tokens */
/* tokens/posts-authors.css — tokens for hugolify-theme-posts-authors */
/*
@layer tokens {
  :root {
  }
}
*/


/* Components */
/* components/posts-authors.css */
/*
 * Usage: <article class="item author">
 */
@layer components {
  .author {
    .btn {
      display: none;
    }
  }
}



/* Pages */



/* css/modules/posts-categories.css — hugolify-theme-posts-categories entry point */

/* Tokens */
/* tokens/posts-categories.css — tokens for hugolify-theme-posts-categories */
/*
@layer tokens {
  :root {
  }
}
*/


/* Components */
/* components/posts-category.css */
/*
 * Usage: <article class="item category">
 */
@layer components {
  .category {
    .btn {
      display: none;
    }
  }
}



/* Pages */



/* css/modules/posts-expertises.css — hugolify-theme-posts-expertises entry point */

/* Tokens */
/* tokens/posts-expertises.css — tokens for hugolify-theme-posts-expertises */
/*
@layer tokens {
  :root {
  }
}
*/


/* Components */
/* components/posts-expertise.css */
/*
 * Usage: <article class="item posts_expertise">
 */
@layer components {
  .posts_expertise {
    .btn {
      display: none;
    }
  }
}



/* Pages */



/* css/modules/posts-tags.css — hugolify-theme-posts-tags entry point */

/* Tokens */
/* tokens/posts-tags.css — tokens for hugolify-theme-posts-tags */
/*
@layer tokens {
  :root {
  }
}
*/


/* Components */
/* components/posts-tag.css */
/*
 * Usage: <article class="item tag">
 */
@layer components {
  .tag {
    .btn {
      display: none;
    }
  }
}



/* Pages */






/* css/modules/publications.css — hugolify-theme-publications entry point */

/* Tokens */
/* publications.css — barrel, do not edit */
/* Do not edit directly, this file was auto-generated. */

/* publication.css */
@layer tokens {
  :root {
    --publication-concerned-font-size: var(--font-size-xs);
    --publication-press-order: -1;
    --publication-press-padding-inline: var(--spacing-card);
    --publication-press-padding-block-start: var(--spacing-card);
    --publication-press-padding-block-end: 0;
  }
}

/* Do not edit directly, this file was auto-generated. */

/* publications.css */
@layer tokens {
  :root {
    --publications-min-width: 25ch;
    --publications-nav-margin-block-start: var(--items-nav-margin-block-start);
  }
}



/* Components */
/* components/publication.css */
/*
 * .publication remaps the full --item-* API (and the inner --btn-*) onto its
 * --publication-* tokens, so any value can be tuned from publication.json without
 * touching this file.
 * Usage: <article class="item publication">
 */
@layer components {
  .publication {

    .press {
      margin-block: 0;
      order: var(--publication-press-order);
      padding-block-end: var(--publication-press-padding-block-end);
      padding-block-start: var(--publication-press-padding-block-start);
      padding-inline: var(--publication-press-padding-inline);
    }

    &:has(.media) {
      .press {
        inset-block-start: 0;
        inset-inline-start: 0;
        pointer-events: none;
        position: absolute;
      }
    }

    &:not(:has(.media)) {
      .press + .metas {
        padding-block-start: calc(var(--item-metas-padding-block-start) / 2);
      }
    }

    .concerned {
      font-size: var(--publication-concerned-font-size);
    }

    .btn {
      display: none;
    }
  }
}

/* components/publications.css */
/*
 * .publications remaps the full --items-* API onto its --publications-* tokens, so any
 * value can be tuned from publications.json without touching this file.
 * Usage: <article class="items publications">
 */
@layer components {
  .publications {
    --items-min-width: var(--publications-min-width);
    --items-nav-margin-block-start: var(--publications-nav-margin-block-start);
  }
}


/* Pages */



/* Modules / Taxonomies */







/* Override Tokens */
/* Custom Theme tokens */

/* Custom Site tokens */

/* Override CSS */