@layer reset, tokens, libs, base, vendors, 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(--code-font-family, var(--font-family-code));
    font-size: var(--code-font-size, var(--font-size-xs));
  }

  :where(code):not(pre > code) {
    background-color: var(--code-color-background, var(--color-background-muted));
    border-radius: var(--code-border-radius, var(--radius-sm));
    color: var(--code-color-text, var(--color-on-muted));
    padding: var(--code-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.
 *
 * Markers stay outside, the user agent default, so wrapped lines and nested
 * lists hang under the item text. The indent is in em because the marker
 * scales with the font, and ol gets more room than ul for two-digit numbers.
 * Nested lists need no indent rule, every list carries its own: only their
 * block margin is set.
 *
 * The marker types are optional hooks: unset, revert-layer hands them back to
 * the user agent, which keeps its disc, circle, square progression.
 */
@layer base {
  :where(ul) {
    list-style-type: var(--list-style-type, revert-layer);
    padding-inline-start: var(--list-padding-inline-start, 1.5em);
  }

  :where(ol) {
    list-style-type: var(--list-ordered-style-type, revert-layer);
    padding-inline-start: var(--list-ordered-padding-inline-start, 2em);
  }

  :where(ul, ol) :where(ul, ol) {
    margin-block-end: var(--list-nested-margin-block-end, var(--spacing-typography));
    margin-block-start: var(--list-nested-margin-block-start, var(--spacing-typography));
  }

  :where(li) {
    margin-block: var(--list-item-gap, 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-color: var(--details-color-border);
    border-radius: var(--details-border-radius);
    border-style: var(--details-border-style, var(--border-style-normal));
    border-width: var(--details-border-width, var(--border-width-sm));
    box-shadow: var(--details-box-shadow);
    color: var(--details-color-text);
    margin-block: var(--details-margin);

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--details-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;
      width: var(--details-icon-size);

      @media (prefers-reduced-motion: no-preference) {
        transition: var(--details-icon-transition, rotate var(--duration-normal) var(--easing));
      }
    }
  }

  details[open] summary::after {
    -webkit-mask-image: var(--details-icon-open, var(--details-icon));
            mask-image: var(--details-icon-open, var(--details-icon));
    rotate: var(--details-icon-rotate-open, 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-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-block: var(--checkbox-label-padding-block);
    --label-padding-inline: var(--checkbox-label-padding-inline);
  }

  [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-block: var(--radio-label-padding-block);
    --label-padding-inline: var(--radio-label-padding-inline);
  }

  [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 {
  /*
   * The UA default (vertical-align: super) raises the glyph inside the line
   * box, so the line box grows and any block holding a <sup> gets taller than
   * one without. Zeroing line-height takes the superscript out of the line box
   * calculation, and relative positioning raises it without affecting layout.
   * A label with a required marker then measures exactly like a label without,
   * and two fields side by side stay aligned.
   */
  sup {
    font-size: 0.75em;
    inset-block-start: -0.5em;
    line-height: 0;
    margin-inline: 0.1em;
    position: relative;
    vertical-align: baseline;
  }
}
/* 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 */
/*
 * .container — centered wrapper, responsive max-width, gutter on both sides.
 *
 * --container-bleed publishes how far a child may pull out of the container to
 * reach the edge of the screen. The property inherits, so it reaches a child
 * from a .container however far up it sits, and the var() fallback each
 * consumer writes is its answer to "no .container above me at all".
 *
 * Anything that PULLS OUT — a negative margin, an inset — falls back to 0: with
 * nothing published, the child has no idea what its parent has to give, and a
 * gutter pulled out of a card or a full-bleed block is a guess that overflows.
 * Anything that puts room back INSIDE the child's own box falls back to
 * var(--gutter), the breathing room every other box gets. Inside a container
 * the two collapse to the published value and the pair cancels out.
 *
 * It is a token per rung, paired with --container-max-width-* in
 * @uncinq/component-tokens: a rung whose max-width is 100% bleeds by one gutter
 * (the container spans the viewport, so the child reaches the edge), a rung
 * that caps bleeds by 0 — dead space then sits on both sides, and a negative
 * margin would stop short of the edge, reading as a misalignment rather than a
 * bleed. The two decisions live side by side in the same token file, so
 * changing one without the other is a visible omission:
 *
 *   --container-max-width-desktop: 100%;
 *   --container-bleed-desktop: var(--gutter);
 */
@layer layouts {
  .container {
    --container-bleed: var(--container-bleed-mobile);
    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);
                             --container-bleed: var(--container-bleed-tablet); }
    @media (width >= 64rem) { --container-max-width: var(--container-max-width-tablet-wide);
                             --container-bleed: var(--container-bleed-tablet-wide); }
    @media (width >= 90rem)      { --container-max-width: var(--container-max-width-laptop);
                             --container-bleed: var(--container-bleed-laptop); }
    @media (width >= 100rem)     { --container-max-width: var(--container-max-width-desktop);
                             --container-bleed: var(--container-bleed-desktop); }
  }
}
/* css/layouts/grid.css */
@layer layouts {
  .grid {
    --columns: var(--columns-mobile, 1);
    display: grid;
    /*
     * minmax(0, 1fr), not 1fr: a bare 1fr track has an `auto` minimum, so one
     * child with a wide min-content (a long line in a <pre>, a wide table)
     * would stretch the track past the container and scroll the whole page.
     * A 0 minimum keeps the tracks equal and leaves the overflow to the child.
     */
    grid-template-columns: repeat(var(--columns), minmax(0, 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, applied from tablet+ alongside the column modifiers:
 *   .offset-center — margin-inline: auto
 *   .offset-end    — margin-inline-start: auto
 */
@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;
    gap: var(--grid-gap, var(--gap));

    /*
     * A flex item's automatic minimum is its min-content: one child with a long
     * unbreakable line (a <pre>, a wide table) would refuse to shrink and push
     * the row past its container. A 0 minimum leaves the overflow to the child.
     */
    > * {
      min-width: 0;
    }

    @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) {
    /*
     * Wrap only along a row. In a stacked (column) row it never wraps anyway,
     * and a multi-line flex container sizes each line to its widest child
     * instead of to the container, so a wide child would widen every item.
     */
    .row {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .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: 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(--spacing-xs);
    }

    * {
      margin-block: 0;
    }

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

  /* Restore the hidden attribute, which display: flex would otherwise override */
  .alert[hidden] {
    display: none;
  }

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

}
/* 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);
    padding-inline: var(--breadcrumb-padding-inline);

    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: baseline;
    -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);

    &::before,
    &::after,
    > svg {
      align-self: center;
    }

    &: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-hover);
    --btn-color-border: var(--color-brand);
    --btn-color-border-hover: var(--color-brand-hover);
    --btn-color-text: var(--color-on-brand);
    --btn-color-text-hover: var(--color-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-hover);
    --btn-color-border: var(--color-danger);
    --btn-color-border-hover: var(--color-danger-hover);
    --btn-color-text: var(--color-on-danger);
    --btn-color-text-hover: var(--color-on-danger);
  }

  .btn-dark {
    --btn-color-background: var(--color-dark);
    --btn-color-background-hover: var(--color-dark-hover);
    --btn-color-border: var(--color-dark);
    --btn-color-border-hover: var(--color-dark-hover);
    --btn-color-text: var(--color-on-dark);
    --btn-color-text-hover: var(--color-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-hover);
    --btn-color-border: var(--color-info);
    --btn-color-border-hover: var(--color-info-hover);
    --btn-color-text: var(--color-on-info);
    --btn-color-text-hover: var(--color-on-info);
  }

  .btn-light {
    --btn-color-background: var(--color-light);
    --btn-color-background-hover: var(--color-light-hover);
    --btn-color-border: var(--color-light);
    --btn-color-border-hover: var(--color-light-hover);
    --btn-color-text: var(--color-on-light);
    --btn-color-text-hover: var(--color-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-hover);
    --btn-color-border: var(--color-neutral);
    --btn-color-border-hover: var(--color-neutral-hover);
    --btn-color-text: var(--color-on-neutral);
    --btn-color-text-hover: var(--color-on-neutral);
  }

  .btn-primary {
    --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-on-brand);
    --btn-color-text-hover: var(--color-on-brand);
  }

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

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

  .btn-warning {
    --btn-color-background: var(--color-warning);
    --btn-color-background-hover: var(--color-warning-hover);
    --btn-color-border: var(--color-warning);
    --btn-color-border-hover: var(--color-warning-hover);
    --btn-color-text: var(--color-on-warning);
    --btn-color-text-hover: var(--color-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/btn-toggle-video.css */
/*
 * .btn-toggle-video — play/pause control overlaid on a video that autoplays
 * without the native controls (WCAG). It stays transparent so the video shows
 * through it, and the `.is-playing` state, set by the script driving the
 * video, decides which of the two icons is displayed. The .video wrapper
 * places it — see video.css.
 *
 * Structure:
 *   button.btn.btn-toggle-video[.is-playing]
 *     .icon-pause
 *     .icon-play
 */
@layer components {
  .btn-toggle-video {
    --btn-color-background: transparent;
    --btn-color-background-hover: transparent;
    --btn-color-border: transparent;
    --btn-color-border-hover: transparent;

    &:not(.is-playing) .icon-pause {
      display: none;
    }

    &.is-playing .icon-play {
      display: none;
    }
  }
}
/* components/card.css */
/*
 * .card — self-contained content card.
 *
 * Historically a backwards-compatible alias for .item, but .item is NOT
 * defined in this package (it lives in the Hugolify design system theme).
 * Within @uncinq/css-components, .card is the complete implementation and the
 * class to use. It reads --card-* from @uncinq/component-tokens.
 *
 * 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-color-text-active: var(--drawer-color-text-active);
    --panel-color-text-hover: var(--drawer-color-text-hover);
    --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(--dropdown-toggle-padding-inline) * -1);
    padding-block: var(--dropdown-toggle-padding-block);
    padding-inline: var(--dropdown-toggle-padding-inline);

    &::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 {
      background-color: var(--dropdown-item-color-background);
      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(min(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 100%), 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. Columns are intrinsic, not breakpoint-driven:
 * children wrap once they no longer fit at --items-min-width.
 *
 * The children are yours to provide. Within this package that is .card;
 * .item is defined by the Hugolify design system theme, not here.
 *
 * Structure:
 *   .items
 *     .card | .item | any child
 */
@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. Markers and indent come from css-base.
 *
 * 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;

    .video {
      height: 100%;
    }

    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-color-text-active: var(--modal-color-text-active);
    --panel-color-text-hover: var(--modal-color-text-hover);
    --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 with showPopover() by the
 *   script you provide — 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 a script can set 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 must be imported
 * AFTER modal.css and drawer.css. Alphabetical order already gives that in
 * css/index.css; keep it if you import file by file.
 *
 * 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) {
    /* The panel paints its own background, so it restates the whole text
       context a host may have set for its own (a header recolours text,
       muted text, surtitles and links). Muted and surtitle are derived again
       here: a value derived on an ancestor is inherited already computed, so
       it would keep the host's colour. */
    --color-credit: var(--color-text-muted);
    --color-link: var(--panel-color-text);
    --color-link-active: var(--panel-color-text-active);
    --color-link-hover: var(--panel-color-text-hover);
    --color-text: var(--panel-color-text);
    --color-text-muted: oklch(from var(--color-text) l c h / var(--opacity-muted));
    --nav-color-text: var(--color-link);
    --nav-color-text-active: var(--color-link-active);
    --surtitle-color-text: var(--color-text-muted);

    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. Your script must also close 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 the --panel-color-text-* tokens they 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-credit: inherit;
      --color-link: inherit;
      --color-link-active: inherit;
      --color-link-hover: inherit;
      --color-text: inherit;
      --color-text-muted: inherit;
      --nav-color-text: inherit;
      --nav-color-text-active: inherit;
      --surtitle-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 the --panel-color-text-* tokens they 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-credit: inherit;
      --color-link: inherit;
      --color-link-active: inherit;
      --color-link-hover: inherit;
      --color-text: inherit;
      --color-text-muted: inherit;
      --nav-color-text: inherit;
      --nav-color-text-active: inherit;
      --surtitle-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 the --panel-color-text-* tokens they 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-credit: inherit;
      --color-link: inherit;
      --color-link-active: inherit;
      --color-link-hover: inherit;
      --color-text: inherit;
      --color-text-muted: inherit;
      --nav-color-text: inherit;
      --nav-color-text-active: inherit;
      --surtitle-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 the --panel-color-text-* tokens they 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-credit: inherit;
      --color-link: inherit;
      --color-link-active: inherit;
      --color-link-hover: inherit;
      --color-text: inherit;
      --color-text-muted: inherit;
      --nav-color-text: inherit;
      --nav-color-text-active: inherit;
      --surtitle-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/push.css */
/*
 * .push — a video or an image with a surtitle, title, text and CTA laid over it.
 * Reads --push-* from @uncinq/component-tokens.
 *
 * Structure, the same for every modifier:
 * <div class="push">
 *   <div class="content">
 *     <p class="surtitle">...</p>
 *     <h2 class="title">...</h2>
 *     <div class="text">...</div>
 *     <a class="btn">...</a>
 *   </div>
 *   <div class="media">
 *     picture | .video > video
 *   </div>
 * </div>
 *
 * The push carries the ratio and places .content inside it; .content is only
 * the text box, which .push-card turns into a card. The ratio is drawn by
 * .push::after, so that pseudo-element is taken.
 *
 * Modifiers:
 *   .push-center | .push-end                         horizontal position of the content
 *   .push-align-start | -center | -end               text alignment
 *   .push-vertical-start | .push-vertical-end        vertical position of the content
 *   .push-card                                       background behind the text
 *   .push-darken                                     gradient under the text
 */
@layer components {
  .push {
    --media-color-background: var(--push-color-background);
    --ratio-video: auto;
    --video-fit: cover;

    border-radius: var(--push-border-radius);
    display: grid;
    /* A fixed track: sized by its content, it would widen to the ratio box's
       transferred size whenever the push is stretched by a min-height. */
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    padding-block: var(--push-content-padding-block);
    padding-inline: var(--push-content-padding-inline);
    position: relative;

    @media (width >= 48rem) {
      --push-content-max-inline-size: var(--push-content-max-inline-size-tablet);
    }
    @media (width >= 90rem) {
      --push-content-max-inline-size: var(--push-content-max-inline-size-laptop);
    }

    /* The ratio: an empty box sharing the single grid cell with .content, and
       stretched over the padding by negative margins so that the ratio is the
       push's own. The push takes the taller of the two, so a text that needs
       more room grows it rather than being cut, even under a min-height. */
    &::after {
      aspect-ratio: var(--push-ratio-mobile);
      content: '';
      grid-area: 1 / 1;
      justify-self: stretch;
      margin-block: calc(var(--push-content-padding-block) * -1);
      margin-inline: calc(var(--push-content-padding-inline) * -1);

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

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

      color: var(--push-color);
    }

    /* A grid item stacks above the media and the darken overlay through its
       z-index alone. Left unpositioned, it is no containing block, so the
       .btn::after overlay below covers the whole push, not just the text. */
    > .content {
      align-self: var(--push-content-justify, center);
      display: flex;
      flex-direction: column;
      gap: var(--push-content-gap);
      grid-area: 1 / 1;
      justify-self: var(--push-content-items, flex-start);
      max-inline-size: var(--push-content-max-inline-size);
      width: 100%;
      z-index: 1;

      @media (width >= 48rem) {
        text-align: var(--push-content-align, start);
      }

      > * {
        margin-block: 0;
      }

      /* The button keeps its own width rather than stretching across the
         box, and follows the text alignment, which applies from --sm up. */
      > .btn {
        align-self: start;

        @media (width >= 48rem) {
          align-self: var(--push-content-align, start);
        }
      }
    }

    /* A background: clicks go through it, to the push's own link. */
    .media {
      height: 100%;
      inset: 0;
      pointer-events: none;
      position: absolute;
      width: 100%;

      /* …except the pause control a .video lays over an autoplaying video,
         which has to stay usable (WCAG 2.2.2). */
      .btn-toggle-video {
        pointer-events: auto;
      }
    }

    .surtitle {
      margin-block-end: calc(var(--push-content-gap) * -1);
    }

    .btn::after {
      content: '';
      inset: 0;
      position: absolute;
    }
  }

  /* Card: the text box takes the look of a .card. Each value reads an optional
     --push-card-* first, unset by default, so push cards can be restyled
     without touching the cards themselves. */
  .push-card > .content {
    background-color: var(--push-card-color-background, var(--card-color-background));
    border-color: var(--push-card-color-border, var(--card-color-border));
    border-radius: var(--push-card-border-radius, var(--card-border-radius));
    border-style: var(--push-card-border-style, var(--card-border-style));
    border-width: var(--push-card-border-width, var(--card-border-width));
    box-shadow: var(--push-card-shadow, var(--card-shadow));
    color: var(--push-card-color-text, var(--card-color-text));
    padding-block: var(--push-card-padding-block, var(--card-padding-block));
    padding-inline: var(--push-card-padding-inline, var(--card-padding-inline));

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

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

  @media (hover: hover) and (pointer: fine) {
    .push-card:hover > .content {
      --push-card-shadow: var(--push-card-shadow-hover, var(--card-shadow-hover));
    }
  }

  /* 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 */

    /* The shadow comes from the edge the content sits against. Only this
       variable changes from one variant to the next; the ::before below is
       the single place that paints it. */
    --push-darken: linear-gradient(var(--push-gradient-to-end), var(--push-gradient-color-from) 0%, var(--push-gradient-color-to) var(--push-gradient-stop));

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

    @media (width >= 48rem) {
      &.push-end {
        --push-darken: linear-gradient(var(--push-gradient-to-start), var(--push-gradient-color-from) 0%, var(--push-gradient-color-to) var(--push-gradient-stop));
      }
    }

    /* A vertical offset tilts the gradient the same way, as in .hero.
       Declared after the horizontal ones, so it wins when both are set. */
    &.push-vertical-start {
      --push-darken: linear-gradient(to bottom, var(--push-gradient-color-from) 0%, var(--push-gradient-color-to) var(--push-gradient-stop));
    }
    &.push-vertical-end {
      --push-darken: linear-gradient(to top, var(--push-gradient-color-from) 0%, var(--push-gradient-color-to) var(--push-gradient-stop));
    }

    /* …except when the text carries its own background, or is centered: the
       media is dimmed as a whole instead. */
    &.push-card,
    &.push-center {
      --push-darken: transparent;

      .media {
        filter: brightness(var(--push-media-brightness));
      }
    }

    /* Painted on the push itself, edge to edge: .content is only the text box.
       Same layering as .hero: the overlay sits above the media, the content
       above the overlay. */
    &::before {
      background: var(--push-darken);
      content: '';
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }
  }

  /* Offset: horizontal position of the content */
  .push-center {
    @media (width >= 48rem) {
      --push-content-items: center;
    }
  }

  .push-end {
    @media (width >= 48rem) {
      --push-content-items: flex-end;
    }
  }

  /* Text alignment */
  .push-align-start {
    --push-content-align: start;
  }

  .push-align-center {
    --push-content-align: center;
  }

  .push-align-end {
    --push-content-align: end;
  }

  /* Vertical position of the content (centered by default) */
  .push-vertical-start {
    --push-content-justify: flex-start;
  }

  .push-vertical-end {
    --push-content-justify: flex-end;
  }
}
/* 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);
  }
}
/* components/video.css */
/*
 * .video — wrapper for a native video, with an optional control overlaid on it
 * when the video autoplays without the native ones (WCAG).
 * Inside a .media the wrapper is stretched to fill it — see media.css.
 *
 * Structure:
 *   div.video
 *     video
 *     button.btn.btn-toggle-video
 */
@layer components {
  .video {
    position: relative;

    video {
      aspect-ratio: var(--video-ratio, var(--ratio-video));
      -o-object-fit: var(--video-fit, contain);
         object-fit: var(--video-fit, contain);
      width: 100%;
    }

    .btn-toggle-video {
      inset-block-end: 0;
      inset-inline-end: 0;
      position: absolute;
      z-index: 10;
    }
  }
}
/* Utilities — @layer utilities, last layer */
/* 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.
 *
 * 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.
 *
 * 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.
 *
 * Bleed: --container-bleed, published by .container in @uncinq/css-base — one
 * gutter while the container spans the viewport, 0 once it caps, so the row
 * never pulls out into dead space it cannot cross.
 *
 * The property inherits, so it reaches the row from a .container however far
 * up it sits, and the fallback is the answer to "no .container above me at
 * all". Margin and padding take DIFFERENT fallbacks, because outside a
 * container they answer two different questions:
 *
 *   margin  — how far may I pull out of my parent? Unknown, so 0. Nothing
 *             published a bleed, the parent may be a card or a column with no
 *             room to give, and pulling a gutter out of it is a guess that
 *             overflows. Inside a container the published value decides, and
 *             at a capped rung that is 0 too.
 *   padding — how far in from MY edge should the first item sit? A gutter,
 *             the same breathing room every other box gets. A full-bleed block
 *             (.block-full, padding-inline: 0) spans the viewport with no
 *             inset of its own, so without this the cards touch the screen.
 *
 * Inside a container the two collapse back to one value — --container-bleed is
 * defined, both read it, and the padding puts back inside the scroll box
 * exactly what the negative margin took out, landing the first item on the
 * container's content edge.
 *
 * scroll-margin-inline follows the PADDING, not the margin: it is what makes
 * an item snap flush with the content edge instead of the padding edge, so it
 * has to cancel the padding whatever the margin does.
 */
@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(--container-bleed, 0px) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: var(--container-bleed, var(--gutter));
    scroll-snap-type: x mandatory;

    > * {
      scroll-margin-inline: var(--container-bleed, 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;
      overflow-y: 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;
      overflow-y: 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;
      overflow-y: 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;
      overflow-y: revert-layer;
      padding-inline: revert-layer;
      scroll-snap-type: revert-layer;

      > * {
        scroll-margin-inline: revert-layer;
        scroll-snap-align: revert-layer;
      }
    }
  }
}
/* 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-700);
    --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-500);
    --color-link: var(--color-text);
    --color-link-active: var(--color-active);
    --color-link-hover: var(--color-accent);
    --color-neutral: var(--color-gray-500);
    --color-neutral-hover: var(--color-gray-600);
    --color-neutral-muted: var(--color-gray-200);
    --color-neutral-strong: var(--color-gray-700);
    --color-on-accent: var(--color-white);
    --color-on-black: var(--color-white);
    --color-on-brand: var(--color-white);
    --color-on-danger: var(--color-white);
    --color-on-dark: var(--color-white);
    --color-on-highlight: var(--color-gray-900);
    --color-on-info: var(--color-white);
    --color-on-light: var(--color-gray-900);
    --color-on-muted: var(--color-gray-900);
    --color-on-neutral: var(--color-white);
    --color-on-success: var(--color-white);
    --color-on-surface: var(--color-text);
    --color-on-warning: var(--color-gray-900);
    --color-on-white: var(--color-black);
    --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-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-on-accent: var(--color-on-accent);
    --form-color-text: var(--color-text);
    --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-inline: .3125rem 0;
    --checkbox-label-padding-block: 0;
    --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-inline: .3125rem 0;
    --radio-label-padding-block: 0;
    --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/gradient.css */
@layer tokens {
  :root {
    --gradient-darken-color-from: var(--color-shadow-strong);
    --gradient-darken-color-to: var(--color-shadow-light);
    --gradient-darken-stop: 100%;
    --gradient-darken-stop-tablet: 50%;
    --gradient-darken-stop-desktop: 33%;
  }
}
/**
 * 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-in-out-quart: cubic-bezier(0.77, 0, 0.175, 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: 60rem;
    --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-on-muted: var(--color-gray-200);
      --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: var(--spacing-sm);
  }
}
/**
 * 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-on-brand);
    --btn-color-text-hover: var(--btn-color-text);
    --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/carousel.css */
@layer tokens {
  :root {
    --carousel-arrow-border-width: var(--border-width-sm);
    --carousel-arrow-border-radius: var(--radius-pill);
    --carousel-arrow-color: var(--color-link);
    --carousel-arrow-color-background: transparent;
    --carousel-arrow-color-background-hover: var(--color-link);
    --carousel-arrow-color-border: var(--color-link);
    --carousel-arrow-color-border-hover: var(--color-link-hover);
    --carousel-arrow-color-hover: var(--color-background);
    --carousel-arrow-gap: var(--spacing-xs);
    --carousel-arrow-icon: var(--icon-arrow);
    --carousel-arrow-icon-size: var(--icon-size);
    --carousel-arrow-margin-block: var(--spacing-sm);
    --carousel-arrow-margin-inline: var(--spacing-xs);
    --carousel-arrow-opacity-disabled: var(--opacity-disabled);
    --carousel-arrow-size: var(--spacing-lg);
    --carousel-pagination-border-style: var(--border-style-normal);
    --carousel-pagination-border-width: var(--border-width-sm);
    --carousel-pagination-border-radius: var(--radius-pill);
    --carousel-pagination-color: var(--color-neutral);
    --carousel-pagination-color-active: var(--color-active);
    --carousel-pagination-color-border: transparent;
    --carousel-pagination-color-border-active: transparent;
    --carousel-pagination-color-border-hover: transparent;
    --carousel-pagination-color-hover: var(--color-neutral-hover);
    --carousel-pagination-gap: var(--spacing-2xs);
    --carousel-pagination-height: var(--spacing-xs);
    --carousel-pagination-margin-block: var(--spacing-sm);
    --carousel-pagination-width: var(--spacing-xs);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */

/* components/container.css */
@layer tokens {
  :root {
    --container-bleed-mobile: var(--gutter);
    --container-bleed-tablet: var(--gutter);
    --container-bleed-tablet-wide: var(--gutter);
    --container-bleed-laptop: var(--gutter);
    --container-bleed-desktop: 0px;
    --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-border-style: var(--border-style-normal);
    --details-border-width: var(--border-width-sm);
    --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-open: var(--details-icon);
    --details-icon-rotate-open: 180deg;
    --details-icon-size: var(--icon-size);
    --details-icon-transition: rotate var(--duration-normal) var(--easing);
    --details-margin: var(--spacing-sm);
    --details-content-align: start;
    --details-content-font-size: var(--font-size-text);
    --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);
    --details-transition: var(--transition-normal);
  }
}
/**
 * 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-on-surface);
    --drawer-color-text-active: var(--color-on-surface);
    --drawer-color-text-hover: var(--color-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-on-surface);
    --dropdown-icon: var(--icon-chevron);
    --dropdown-icon-size: var(--icon-size);
    --dropdown-item-border-radius: var(--radius-xs);
    --dropdown-item-color-background: transparent;
    --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(--spacing-2xs);
    --dropdown-shadow: var(--shadow-sm);
    --dropdown-toggle-padding-block: var(--spacing-2xs);
    --dropdown-toggle-padding-inline: var(--spacing-xs);
    --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-gradient-color-from: var(--gradient-darken-color-from);
    --hero-gradient-color-to: var(--gradient-darken-color-to);
    --hero-gradient-stop: var(--gradient-darken-stop);
    --hero-gradient-stop-tablet: var(--gradient-darken-stop-tablet);
    --hero-gradient-stop-desktop: var(--gradient-darken-stop-desktop);
    --hero-height: clamp(25rem, 23.2394rem + 7.5117vw, 30rem);
    --hero-home-height: clamp(30rem, 26.4789rem + 15.0235vw, 40rem);
    --hero-media-brightness: 0.5;
    --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);
    --list-nested-margin-block-end: var(--spacing-typography);
    --list-nested-margin-block-start: var(--spacing-typography);
    --list-ordered-padding-inline-start: 2em;
    --list-padding-inline-start: 1.5em;
  }
}
/**
 * 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-on-surface);
    --modal-color-text-active: var(--color-on-surface);
    --modal-color-text-hover: var(--color-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-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/push.css */
@layer tokens {
  :root {
    --push-border-radius: var(--radius-surface);
    --push-color: var(--color-white);
    --push-color-background: var(--color-dark);
    --push-content-gap: var(--spacing-sm);
    --push-content-max-inline-size: 100%;
    --push-content-max-inline-size-tablet: 50%;
    --push-content-max-inline-size-laptop: 33.33%;
    --push-content-padding-block: var(--spacing-fluid-md);
    --push-content-padding-inline: var(--spacing-fluid-md);
    --push-gradient-color-from: var(--gradient-darken-color-from);
    --push-gradient-color-to: var(--gradient-darken-color-to);
    --push-gradient-stop: var(--gradient-darken-stop);
    --push-media-brightness: var(--hero-media-brightness);
    --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/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/avatars.css */
@layer tokens {
  :root {
    --avatars-border-width: var(--border-width-sm);
    --avatars-color-background: var(--color-background-muted);
    --avatars-color-border: var(--color-background);
    --avatars-color-text: var(--color-on-muted);
    --avatars-font-size: var(--font-size-2xs);
    --avatars-font-weight: var(--font-weight-control);
    --avatars-overlap: calc(var(--avatars-size) * -.3);
    --avatars-size: 30px;
  }
}

/* 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-card-opacity: var(--theme-card-opacity);
    --block-gap: var(--spacing-fluid-md);
    --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/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-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/filters.css */
@layer tokens {
  :root {
    --filters-group-border-style: var(--border-style-normal);
    --filters-group-border-width: var(--border-width-sm);
    --filters-group-color-border: var(--color-border);
    --filters-group-padding-block-start: var(--spacing-md);
    --filters-group-padding-block-end: var(--spacing-md);
    --filters-list-font-size: var(--font-size-xs);
    --filters-more-gap: var(--spacing-2xs);
    --filters-more-icon-size: 1em;
    --filters-more-padding-block: var(--spacing-2xs);
    --filters-search-status-color-text: var(--color-text-muted);
    --filters-search-status-font-size: var(--font-size-xs);
    --filters-search-status-margin-block: var(--spacing-xs);
  }
}

/* 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/footing.css */
@layer tokens {
  :root {
    --footing-gap: var(--spacing-xs);
    --footing-margin-block-start: var(--spacing-fluid-md);
  }
}

/* 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/hero.css */
@layer tokens {
  :root {
    --hero-card-opacity: var(--theme-card-opacity);
  }
}

/* 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-carousel-nav-border-radius: var(--carousel-arrow-border-radius);
    --items-carousel-nav-gap: var(--carousel-arrow-gap);
    --items-carousel-nav-icon-next: var(--carousel-arrow-icon);
    --items-carousel-nav-icon-previous: var(--carousel-arrow-icon);
    --items-carousel-nav-icon-size: var(--carousel-arrow-icon-size);
    --items-carousel-nav-margin-block-end: var(--carousel-arrow-margin-block);
    --items-carousel-nav-opacity-disabled: var(--carousel-arrow-opacity-disabled);
    --items-carousel-nav-size: var(--carousel-arrow-size);
    --items-carousel-pagination-border-style: var(--carousel-pagination-border-style);
    --items-carousel-pagination-border-width: var(--carousel-pagination-border-width);
    --items-carousel-pagination-border-radius: var(--carousel-pagination-border-radius);
    --items-carousel-pagination-color: var(--carousel-pagination-color);
    --items-carousel-pagination-color-active: var(--carousel-pagination-color-active);
    --items-carousel-pagination-color-border: var(--carousel-pagination-color-border);
    --items-carousel-pagination-color-border-active: var(--carousel-pagination-color-border-active);
    --items-carousel-pagination-color-border-hover: var(--carousel-pagination-color-border-hover);
    --items-carousel-pagination-color-hover: var(--carousel-pagination-color-hover);
    --items-carousel-pagination-gap: var(--carousel-pagination-gap);
    --items-carousel-pagination-height: var(--carousel-pagination-height);
    --items-carousel-pagination-margin-block-start: var(--carousel-pagination-margin-block);
    --items-carousel-pagination-width: var(--carousel-pagination-width);
    --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-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/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-family: var(--font-family-heading);
    --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-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-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(--list-ordered-padding-inline-start);
    --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: currentColor;
  }
}

/* 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);
  }
}


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

/* semantic/animation.css */
@layer tokens {
  :root {
    --anim-delay: var(--duration-fast);
    --anim-distance: var(--spacing-md);
    --anim-duration: var(--duration-slow);
    --anim-easing: var(--easing-in-out-quart);
  }
}

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

/* semantic/theme.css */
@layer tokens {
  :root {
    --theme-card-opacity: var(--opacity-shadow);
  }
}




/* 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 and the Blocks one,
   see partials/head/css.html. */

/* Base */
/* base/animation.css */
/*
 * [data-anim] reveals a part of the page once, when it first scrolls into
 * view: it fades in and rises by --anim-distance. The parts that paint a
 * background band, block and hero, are the exception: they only fade.
 *
 * js/features/animation.js observes every [data-anim] and sets data-anim-show
 * on it at first intersection. The attribute itself comes from the theme
 * markup, and only when site.Params.animation is true, so with animations off
 * no selector here matches and nothing is ever hidden.
 *
 * Everything sits behind prefers-reduced-motion: no-preference, because the
 * from-state is what hides the content and it must never reach a reader who
 * refuses motion. The to-state is keyed on the attribute the script adds
 * rather than on an animation, for the same reason: a page whose JS never ran
 * was never hidden in the first place.
 *
 * Tokens: tokens/semantic/animation.css.
 */
@layer base {
  @media (prefers-reduced-motion: no-preference) {
    /* Each [data-anim] hides and reveals itself, so one nested inside another
       stays hidden until it intersects on its own. */
    [data-anim] {
      opacity: 0;
      transition-delay: var(--anim-delay);
      transition-duration: var(--anim-duration);
      transition-property: opacity, translate;
      transition-timing-function: var(--anim-easing);
      translate: 0 var(--anim-distance);
    }

    /* A block and a hero each paint a full-width background band, and two
       adjacent bands carry different colours, so a rising one slides against
       the edge of its neighbour instead of with it. These fade in place. Same
       specificity as the rule above, so this has to stay after it. */
    [data-anim="block"],
    [data-anim="hero"] {
      translate: 0 0;
    }

    [data-anim][data-anim-show] {
      opacity: 1;
      translate: 0 0;
    }
  }
}

/* base/fonts.css */

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

/* vendors/pagefind.css */
@layer vendors {
  .pagefind-ui__form {
    display: flex;
    flex-direction: column;
    .pagefind-ui__search-input {
      flex: 1;
    }
    .pagefind-ui__search-clear {
      display: none;
    }
    .pagefind-ui__drawer {
      flex-basis: 100%;
    }
    .pagefind-ui__results {
      display: flex;
      flex-direction: column;
      gap: var(--gap);
      list-style: none;
      margin-block: 0;
      padding-inline-start: 0;
    }
    .pagefind-ui__result {
      display: flex;
      gap: var(--gap);
    }
    .pagefind-ui__result-thumb {
      flex: 1;
    }
    .pagefind-ui__result-inner {
      flex: 3;
    }
    .pagefind-ui__result-image {
      height: auto;
      width: 100%;
    }
  }
}

/* vendors/splide.css */
/*
 * Splide, dressed with the --carousel-* tokens so it and the CSS carousels
 * (.scrollsnap-nav, .scrollsnap-pagination) wear the same skin.
 *
 * splide.min.css is injected at runtime into @layer libs — see
 * features/carousel.js — which is declared before this layer in main.css. Its
 * state rules (.is-active {background:#fff}, :hover {opacity:.9}, arrows at
 * 0,3,0) therefore lose to everything here without a single !important, and
 * without counting specificity against a minified file at every edit.
 */
@layer vendors {
  .splide {
    .splide__list {
      display: flex;
      list-style: none;
      margin-block-end: 0;
      padding-inline-start: 0 !important;
    }
    &:has(.splide__pagination) {
      margin-block-end: var(--carousel-pagination-margin-block);
    }
    .splide__slide {
      flex-shrink: 0;
      margin-block: 0 !important;
    }
    /* fallback before js init */
    &: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));
      }
      .splide__slide {
        width: calc(100% / var(--perPage, 1));
      }
    }
    
    .splide__pagination {
      /* Spacing on the list, not on each page, so the dots keep the same
         --carousel-pagination-gap as the scrollsnap ones. */
      gap: var(--carousel-pagination-gap);
      inset-block-end: auto;
      inset-block-start: 100%;
      justify-content: center;
      list-style: none;
      margin-block: var(--carousel-pagination-margin-block);
      /* Splide pads it 0 1em from libs, which base's list indent beats on the
         start side only: without this the centered dots sit off-center. */
      padding-inline: 0;
      li {
        margin-block: 0 !important;
      }
    }
    .splide__pagination__page {
      background: var(--carousel-pagination-color);
      border-color: var(--carousel-pagination-color-border);
      border-radius: var(--carousel-pagination-border-radius);
      border-style: var(--carousel-pagination-border-style);
      border-width: var(--carousel-pagination-border-width);
      height: var(--carousel-pagination-height);
      margin: 0;
      /* Splide dims its dots and blows up the current one; the state is the
         colors' job here, the same as .scrollsnap-pagination-dot. */
      opacity: 1;
      width: var(--carousel-pagination-width);

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

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          --carousel-pagination-color: var(--carousel-pagination-color-hover);
          --carousel-pagination-color-border: var(--carousel-pagination-color-border-hover);
        }
      }

      &.is-active {
        --carousel-pagination-color: var(--carousel-pagination-color-active);
        --carousel-pagination-color-border: var(--carousel-pagination-color-border-active);
        transform: none;
      }
    }
    .splide__arrow {
      background: var(--carousel-arrow-color-background);
      border-color: var(--carousel-arrow-color-border);
      border-radius: var(--carousel-arrow-border-radius);
      border-style: var(--border-style-normal);
      border-width: var(--carousel-arrow-border-width);
      color: var(--carousel-arrow-color);
      height: var(--carousel-arrow-size);
      /* Splide fades its arrows by default; ours are opaque until the row
         reaches its end, like .scrollsnap-nav-btn. Specificity carries it —
         these rules are one class deeper than Splide's own. */
      opacity: 1;
      width: var(--carousel-arrow-size);

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

      @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-background: var(--carousel-arrow-color-background-hover);
          --carousel-arrow-color-border: var(--carousel-arrow-color-border-hover);
        }
      }

      /* The arrow is the --carousel-arrow-icon mask, like .scrollsnap-nav and
         .back, so the <svg> Splide injects steps aside and the glyph stays a
         token both carousels read. */
      svg {
        display: none;
      }

      &::before {
        background-color: currentColor;
        content: '';
        height: var(--carousel-arrow-icon-size);
        -webkit-mask: var(--carousel-arrow-icon) center / var(--carousel-arrow-icon-size) no-repeat;
                mask: var(--carousel-arrow-icon) center / var(--carousel-arrow-icon-size) no-repeat;
        width: var(--carousel-arrow-icon-size);
      }

      /* One arrow for both buttons: prev is next, turned around — Splide's own
         mirroring went out with its <svg>. */
      &.splide__arrow--prev::before {
        rotate: 180deg;
      }
    }

    figure {
      --figure-margin-block: 0;
    }
    
    @media (width >= 48rem) {
      .splide__arrow {
        margin-inline: var(--carousel-arrow-margin-inline);
      }

      /* Outside the track, in the side margin the block leaves around it. */
      .splide__arrow--next {
        inset-inline-end: auto;
        inset-inline-start: 100%;
      }
      .splide__arrow--prev {
        inset-inline-end: 100%;
        inset-inline-start: auto;
      }
    }

    /* ── Full-bleed block ─────────────── */
    .block-full & {
      @media (width >= 48rem) {
        .splide__arrow--next {
          inset-inline-end: 0;
          inset-inline-start: auto;
        }
        .splide__arrow--prev {
          inset-inline-end: auto;
          inset-inline-start: 0;
        }
      }
    }
  }
}


/* 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-credit: var(--color-text-muted);
    --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 {
        align-items: baseline;
        gap: var(--gap);
        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);
      }
    }

    .credit {
      margin-block: 0;
    }
  }
}

/* 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 ──────────────────────────────────────── */
      /*
       * The content spans the sidebar row and the TOC row. The TOC row must
       * be the 1fr one: the content's extra height then lands there and the
       * TOC stays right under the sidebar. Two auto rows would share it
       * equally and push the TOC down.
       *
       * Each element above the content (a heading, metas...) takes a full
       * row, so the sidebar row is the one at the index of .content and
       * the TOC row the next: as many auto rows as that index, then 1fr.
       * Up to three elements above the content.
       */
      &:has(.sidebar + .toc) .content {
        grid-row: span 2;
      }
      &:has(> .content:nth-child(1) + .sidebar + .toc) {
        grid-template-rows: repeat(1, auto) 1fr;
      }
      &:has(> .content:nth-child(2) + .sidebar + .toc) {
        grid-template-rows: repeat(2, auto) 1fr;
      }
      &:has(> .content:nth-child(3) + .sidebar + .toc) {
        grid-template-rows: repeat(3, auto) 1fr;
      }
      &:has(> .content:nth-child(4) + .sidebar + .toc) {
        grid-template-rows: repeat(4, auto) 1fr;
      }
    }

    @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-credit: var(--color-text-muted);
    --color-link: var(--header-color-link);
    --color-link-active: var(--header-color-link-active, var(--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);
    --nav-color-text-active: var(--color-link-active);

    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);
  }
}

/* layouts/row.css */
/*
 * Proportions of the .row layouts, same as their .grid counterparts:
 *   .row > .content + .sidebar   : content 8 / sidebar 4 (pages and docs single)
 *   .row > .sidebar--menu + div  : docs menu 2 / page 10
 *
 * Widths reuse the .col-* formula of @uncinq/css-base, so gutters line up with
 * the grid. Below tablet-wide everything stacks, the sidebar holding the TOC first.
 */
@layer layouts {
  .row {
    > .sidebar:has(.toc) {
      order: -1;
    }

    @media (width >= 48rem) {
      /* Full width until tablet-wide, like the one-column grid */
      > .content,
      > .sidebar,
      > .sidebar--menu + div {
        --col-span: var(--columns);
        flex: 0 0 calc(
          var(--col-span) / var(--columns) * 100%
          - (1 - var(--col-span) / var(--columns)) * var(--grid-gap, var(--gap))
        );
      }
    }

    @media (width >= 64rem) {
      /* ── Content + sidebar, only when the sidebar has something to show ── */
      &:has(> .sidebar:not(.sidebar--menu) > *) {
        > .content { --col-span: calc(var(--columns) * 2 / 3); }
        > .sidebar { --col-span: calc(var(--columns) / 3); }
      }

      /* ── Docs menu + page ──────────────────────────────────────────────── */
      > .sidebar--menu       { --col-span: calc(var(--columns) / 6); }
      > .sidebar--menu + div { --col-span: calc(var(--columns) * 5 / 6); }

      > .sidebar:has(.toc) {
        order: initial;
      }
    }
  }
}


/* Components — Hugolify-specific */
/* components/avatar.css */
@layer components {
  .avatar {
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
}
/* components/avatars.css */
/*
 * .avatars — a group of persons as overlapping round avatars, the last one
 * counting those left out.
 *
 * Expected HTML (hugolify-theme, commons/avatars.html):
 *   <ul class="avatars">
 *     <li><a><picture class="avatar"><img></picture></a></li>
 *     <li><a><span class="avatar">AB</span></a></li>
 *     <li class="avatars-count">+2</li>
 *   </ul>
 *
 * The images are requested at the xsmall size (50x50), larger than
 * --avatars-size, so they stay sharp on dense screens. Each avatar is ringed
 * with --avatars-color-border so the overlap reads as a cut-out: set it to the
 * background the group sits on.
 */
@layer components {
  .avatars {
    align-items: center;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      margin: 0;

      & + li {
        margin-inline-start: var(--avatars-overlap);
      }
    }

    a {
      display: block;
      text-decoration: none;
    }

    .avatar,
    .avatars-count {
      align-items: center;
      background-color: var(--avatars-color-background);
      block-size: var(--avatars-size);
      border-radius: var(--radius-pill);
      box-shadow: 0 0 0 var(--avatars-border-width) var(--avatars-color-border);
      color: var(--avatars-color-text);
      display: flex;
      font-size: var(--avatars-font-size);
      font-weight: var(--avatars-font-weight);
      inline-size: var(--avatars-size);
      justify-content: center;
      line-height: 1;
      overflow: hidden;
    }

    img {
      block-size: 100%;
      display: block;
      inline-size: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
  }
}

/* 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;
      }

      /* The carousel nav belongs to the row it drives, not to the block's own
         rhythm, so the grid row gap between the two is taken back and the
         --items-carousel-nav-margin-block-end token is left as the only
         distance that counts. Everywhere else a .scrollsnap-nav lands
         (.related, .latest) the parent is in normal flow with no gap to take
         back, and the token holds on its own.

         Taken back on the ROW rather than on the nav: a negative
         margin-block-end bigger than the nav's own height makes its grid track
         contribution negative, tracks floor at zero, and the gap comes back in
         full below the buttons. The row is always taller than the gap, so its
         contribution stays positive whatever --block-gap grows to.

         :not([hidden]) because the nav is display:none while the row does not
         overflow, and the row would otherwise be pulled up into the heading. */
      > .scrollsnap-nav:not([hidden]) + * {
        margin-block-start: calc(var(--block-gap) * -1);
      }

      /* The other way the nav leaves the screen: scrollsnap.nav: pointer on a
         touch device. It stays in the DOM, and the hidden attribute is not how
         it goes — that one is the JS and the overflow — so the rule above
         still matches it, and there is no gap to take back under buttons
         nobody sees.

         Both classes and the same :not([hidden]) as above, because a media
         query carries no specificity of its own: this selector has to outrank
         the rule it cancels rather than merely follow it. */
      @media not (any-pointer: fine) {
        > .scrollsnap-nav-pointer:not([hidden]) + * {
          margin-block-start: 0;
        }
      }

      /* The pagination is the same story on the other side of the row, and
         carried by the row for the same reason — a dot row is shorter than the
         gap, so its own negative margin would floor its track at zero. :has()
         because CSS has no previous sibling. */
      > *:has(+ .scrollsnap-pagination:not([hidden])) {
        margin-block-end: calc(var(--block-gap) * -1);
      }

      @media not (any-pointer: fine) {
        > *:has(+ .scrollsnap-pagination-pointer:not([hidden])) {
          margin-block-end: 0;
        }
      }
    }

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

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

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

    /* ── Scrollsnap ─────────────── */

    /* The carousel bleeds by --container-bleed, which drops to 0 once the
       container caps (desktop) — the row then stops at the container edge.
       Republish it as the real distance to the viewport edge so the row keeps
       reaching the screen, gutter included.
       A custom property, not the margin: the utility owns margin-inline in
       @layer utilities and wins over @layer components whatever we declare.
       Below --desktop the container spans the viewport and the calc falls
       under --gutter, so max() hands back the token value unchanged — the two
       meet exactly at the rung, --size-desktop being the width the container
       caps at AND the width --desktop kicks in.
       Lengths only, no percentage: the utility feeds this to the items'
       scroll-margin-inline, which takes <length> and would drop a % outright,
       losing the snap offset that lands each card on the content edge.

       Under .container, because republishing is correcting a bleed the
       container already grants, not granting one. A block asked for grid:
       "full" has no .container at all, its content already spans the viewport,
       and the row has nothing left to pull out of — setting the property there
       would hand it a bleed the utility is meant to withhold. */
    .container .items:is([class^="scrollsnap"], [class*=" scrollsnap"]) {
      --container-bleed: max(
        var(--gutter),
        calc((100vw - var(--size-desktop)) / 2 + var(--gutter))
      );
    }
  }
}

/* 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,
    .footing {
      h1, h2, h3, p {
        margin-inline: auto;
      }
      .cta {
        justify-content: center;
      }
    }

    /* The columns come from components/items.css: an incomplete row only
       needs to be moved */
    @media (width >= 64rem) {
      .items {
        justify-content: center;
      }
    }
  }
  .block-align-end {
    text-align: end;
    .heading,
    .footing {
      h1, h2, h3, p {
        margin-inline-start: auto;
      }
      .cta {
        justify-content: end;
      }
    }

    @media (width >= 64rem) {
      .items {
        justify-content: end;
      }
    }
  }
  .block-align-start {
    text-align: start;
    .heading {
      h1, h2, h3, p {
        margin-inline-end: auto;
      }
    }
  }
}

/* A .scrollsnap-* row resets justify-content to start from @layer utilities,
   which undoes the alignment above whatever @layer components declares — so
   the align-center and align-end answers have to live in that same layer,
   where specificity wins over the bare utility class without an !important.
   `safe` aligns the row while it fits and falls back to start once it
   overflows: plain center or end would push the first item out past the
   scroll origin, out of reach. */
@layer utilities {
  .block-align-center .items:is([class^="scrollsnap"], [class*=" scrollsnap"]) {
    justify-content: safe center;
  }
  .block-align-end .items:is([class^="scrollsnap"], [class*=" scrollsnap"]) {
    justify-content: safe end;
  }
}

/* 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);

    /* Without a .container, the block's own heading and footing would touch
       the viewport edges. Direct children only: a .heading nested in the body
       (editorial, paragraph…) sits in content that already handles its inset. */
    > .block-content > :is(.heading, .footing) {
      padding-inline: var(--block-full-heading-padding-inline, var(--gutter));
    }
  }
}

/* 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-on-accent);
  }

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

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

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

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

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

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

  /* all themes: colours follow the block text colour */
  .block-accent,
  .block-black,
  .block-dark,
  .block-highlight,
  .block-light,
  .block-neutral,
  .block-white {
    /* base */
    --color-active: var(--color-text);
    --color-background-surface: oklch(from var(--color-text) l c h / var(--opacity-shadow));
    --color-border: oklch(from var(--color-text) l c h / var(--opacity-subtle));
    --color-credit: var(--color-text-muted);
    --color-heading: var(--color-text);
    --color-link: var(--color-text);
    --color-link-hover: var(--color-text);
    --color-text-muted: oklch(from var(--color-text) l c h / var(--opacity-muted));
    --color-on-surface: var(--color-text);

    /* components */
    --comparison-item-color-background: var(--theme-card-color-background);
    --comparison-item-color-background-highlighted: var(--theme-card-color-background);
    --comparison-item-footer-color-text: var(--theme-card-color-text);
    --comparison-item-header-color-text: var(--theme-card-color-text);
    --comparison-list-color-border: var(--color-border);
    --comparison-pricing-sub-color-text: var(--color-text-muted);
    --details-color-text: var(--color-text);
    --help-color-text: var(--color-text-muted);
    --item-color-background: var(--theme-card-color-background);
    --item-color-border: var(--color-background-surface);
    --item-color-text: var(--theme-card-color-text);
    --item-metas-color-text: var(--color-text-muted);
    --item-title-color: var(--theme-card-title-color);
    --label-color-text: var(--color-text);
    --pricing-color-text: var(--color-text);
    --push-card-color-background: var(--color-background-muted);
    --push-card-color-text: var(--color-on-muted);
    --push-card-title-color: var(--color-on-muted);
    --quote-author-color-text: var(--color-text-muted);
    --quote-cite-color-text: var(--color-text);
    --quote-color-text: var(--color-text);
    --surtitle-color-text: var(--color-text-muted);
    --timeline-connector-color: var(--color-border);
    --transcription-color-text: var(--color-text-muted);

    /* cards (.card, items, quotes...): a veil of the block text colour.
       Overrides, unset by default:
       --block-card-color-background, -color-text, -color-link, -title-color. */
    --theme-card-color-background: var(
      --block-card-color-background,
      oklch(from var(--color-text) l c h / var(--block-card-opacity))
    );
    --theme-card-color-text: var(--block-card-color-text, var(--color-text));
    --theme-card-color-link: var(--block-card-color-link, var(--theme-card-color-text));
    --theme-card-title-color: var(--block-card-title-color, var(--block-card-color-text, var(--color-heading)));

    background: var(--block-color-background);
    color: var(--color-text);

    .card {
      --card-color-background: var(--theme-card-color-background);
      --card-color-text: var(--theme-card-color-text);
      --card-title-color: var(--theme-card-title-color);
      --color-link: var(--theme-card-color-link);
      --color-link-hover: var(--color-link);
    }
  }

  /* space out consecutive blocks of the same theme */
  .block:not(.block-video.block-full, .block-figure.block-full):not(.block-accent, .block-black, .block-dark, .block-highlight, .block-light, .block-neutral, .block-white) + .block:not(.block-accent, .block-black, .block-dark, .block-highlight, .block-light, .block-neutral, .block-white),
  .block-accent + .block-accent,
  .block-black + .block-black,
  .block-dark + .block-dark,
  .block-highlight + .block-highlight,
  .block-light + .block-light,
  .block-neutral + .block-neutral,
  .block-white + .block-white {
    padding-block-start: var(--block-theme-padding-top, 0);
  }

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

    /* The push card has its own background: its button keeps the default colors */
    .push-card {
      --btn-color-background: var(--color-brand);
      --btn-color-text: var(--color-on-brand);
    }
  }

  /* 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/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-footer-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);
    }
  }
}
/* 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-credit, 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 {
      align-items: baseline;
      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(--filters-group-padding-block-start);
        }
        &:not(:last-child) {
          border-block-end: var(--filters-group-border-width) var(--filters-group-border-style) var(--filters-group-color-border);
          padding-block-end: var(--filters-group-padding-block-end);
        }
      }
    }
    .list {
      --list-item-font-size: var(--filters-list-font-size);
      :is(ul, ol) {
        list-style: none;
        padding-inline-start: 0;
      }
      li {
        display: flex;
        gap: var(--list-item-gap);
        align-items: center;

        /* The display above beats the browser's own [hidden] rule */
        &[hidden] {
          display: none;
        }
      }
      &:not(.list-mini_card):not(.list-tags) {
        li {
          &::before {
            content: var(--list-item-marker);
          }
        }
      }
    }
  }
}
/* components/filters-more.css */
/*
 * .filters-more — terms past site.Params.filters.more.limit, folded behind a
 * "show more" that goes away once unfolded, the focus being carried over by
 * features/filters-more.js. Rendered when site.Params.filters.more.enable is
 * true, see commons/filters/taxonomy.html in hugolify-theme.
 *
 * Structure:
 *   div.list
 *     ol            (the terms up to the limit)
 *     details.filters-more
 *       summary
 *       ol[start]   (the rest)
 *
 * A <details> comes with a frame of its own from css-base; here it is one
 * more line in the list, so the frame steps aside.
 */
@layer components {
  .filters-more {
    --details-box-shadow: none;
    --details-box-shadow-hover: none;
    --details-color-background: transparent;
    --details-icon-size: var(--filters-more-icon-size);
    --details-margin: 0;
    --details-summary-font-family: inherit;
    --details-summary-font-size: var(--list-item-font-size);
    --details-summary-font-weight: inherit;
    --details-summary-padding-block: var(--filters-more-padding-block);
    --details-summary-padding-inline: 0;

    border: none;

    summary {
      display: inline-flex;
      gap: var(--filters-more-gap);
    }

    /* Taking away the control the user has just pressed drops the focus back
       to the document, against WCAG 2.4.3 Focus Order. Only a fold that
       features/filters-more.js has taken over loses its summary, the script
       being there to catch the focus. Script off, the summary stays, which
       native <details> handles on its own. */
    &.is-initialized[open] > summary {
      display: none;
    }
  }
}

/* components/filters-search.css */
/*
 * .filters-search — field narrowing the terms of .filters, driven by
 * features/filters-search.js. Rendered when site.Params.filters.search.enable
 * is true, see commons/filters/search.html in hugolify-theme.
 *
 * Structure:
 *   div.filters-search
 *     label.visually-hidden
 *     input[type=search]
 *     p[role=status]  (empty until nothing matches)
 */
@layer components {
  .filters-search {
    [role='status'] {
      color: var(--filters-search-status-color-text);
      font-size: var(--filters-search-status-font-size);
      margin-block: var(--filters-search-status-margin-block) 0;

      /* Kept in the DOM while empty so screen readers announce its updates */
      &:empty {
        margin: 0;
      }
    }
  }
}

/* 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 {
      align-items: inherit;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: var(--heading-gap);
    }

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

    .surtitle:has(+ *) {
      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-link-hover: var(--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 {
      padding-inline: var(--hero-container-padding-inline, var(--gutter));
      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 {
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: var(--hero-gap);
    padding-inline: var(--hero-padding-inline);
    max-width: 100%;

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

    .back {
      inset-block-start: var(--gutter);
      inset-inline-start: var(--gutter);
      position: absolute;
    }

    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-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;

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

  .hero-end {
    @media (width >= 48rem) {
      .hero-content {
        align-items: end;
        margin-inline-start: auto;
        text-align: end;
      }
    }
  }
  
  .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-hover);
        --btn-color-border: var(--color-light);
        --btn-color-border-hover: var(--color-light-hover);
        --btn-color-text: var(--color-on-light);
        --btn-color-text-hover: var(--color-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-to-end: to right;   /* toward inline-end */
    --hero-gradient-to-start: to left;  /* toward inline-start */

    /* The shadow comes from the edge the content sits against. Only this
       variable changes from one variant to the next; the ::before below is
       the single place that paints it. Its colors and its stop are tokens, but
       the gradient is composed here on purpose: a custom property is
       substituted on the element that declares it, so a --hero-darken sitting
       on :root would freeze the direction and the stop before :dir(rtl), the
       breakpoints or any variant below could change them. */
    --hero-darken: linear-gradient(var(--hero-gradient-to-end), var(--hero-gradient-color-from) 0%, var(--hero-gradient-color-to) var(--hero-gradient-stop));

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

    @media (width >= 48rem) {
      --hero-gradient-stop: var(--hero-gradient-stop-tablet);
    }
    @media (width >= 100rem) {
      --hero-gradient-stop: var(--hero-gradient-stop-desktop);
    }

    &.hero-center {
      --hero-darken: var(--hero-gradient-color-from);
    }
    &.hero-end {
      --hero-darken: linear-gradient(var(--hero-gradient-to-start), var(--hero-gradient-color-from) 0%, var(--hero-gradient-color-to) var(--hero-gradient-stop));
    }

    &.hero-vertical-end {
      --hero-darken: linear-gradient(to top, var(--hero-gradient-color-from) 0%, var(--hero-gradient-color-to) var(--hero-gradient-stop));
    }
    &.hero-vertical-start {
      --hero-darken: linear-gradient(to bottom, var(--hero-gradient-color-from) 0%, var(--hero-gradient-color-to) var(--hero-gradient-stop));
    }

    &::before {
      background: var(--hero-darken);
      content: '';
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    .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-on-accent);
    --hero-color-text: var(--color-on-accent);
    --hero-title-color: var(--color-on-accent);
    .btn {
      --btn-color-background: var(--color-on-accent);
      --btn-color-border: var(--color-on-accent);
      --btn-color-text: var(--color-accent);
    }
  }

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

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

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

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

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

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

  /* ── Cards ───────────────────────────────────────────────────── */

  /* A themed hero gives its cards a veil of its text colour through
     --theme-card-*. Overrides, unset by default:
     --hero-card-color-background, -color-text, -color-link, -title-color. */
  .hero-accent,
  .hero-black,
  .hero-dark,
  .hero-highlight,
  .hero-light,
  .hero-neutral,
  .hero-white {
    --theme-card-color-background: var(
      --hero-card-color-background,
      oklch(from var(--color-text) l c h / var(--hero-card-opacity))
    );
    --theme-card-color-text: var(--hero-card-color-text, var(--color-text));
    --theme-card-color-link: var(--hero-card-color-link, var(--theme-card-color-text));
    --theme-card-title-color: var(--hero-card-title-color, var(--hero-card-color-text, var(--color-heading)));

    .card {
      --card-color-background: var(--theme-card-color-background);
      --card-color-text: var(--theme-card-color-text);
      --card-title-color: var(--theme-card-title-color);
      --color-link: var(--theme-card-color-link);
      --color-link-hover: var(--color-link);
    }
  }

}

/* 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-end: 0;
      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;
    > li {
      margin-block: 0;
    }
    & + nav {
      margin-block-start: var(--items-nav-margin-block-start);
    }
  }

  /* ── Fixed columns at tablet and up ──────────────────────── */
  @media (width >= 48rem) {
    [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)));
    }

    .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-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;
          }
        }
      }
      .dropdown-menu {
        --nav-item-margin-inline: 0;
      }
      .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;
      }

      .dropdown-menu {
        inset-inline-end: 0;
        inset-inline-start: auto;
      }
    }
  }
}

/* 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(--spacing-sm, 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-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/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-family: var(--quote-font-family);
      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(--related-color-background, var(--color-background-muted));
    margin-block: var(--related-color-margin-block, 0);
    padding-block: var(--related-color-padding-block, var(--spacing-section));

    div + & {
      margin-block-start: var(--related-color-padding-block, var(--spacing-section));
    }
    & + & {
      padding-block-start: 0;
    }
    &:last-child {
      margin-block-end: calc(var(--related-color-padding-block, 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/scrollsnap-nav.css */
/*
 * .scrollsnap-nav — prev/next buttons for a .scrollsnap-* carousel.
 *
 * The utility (@uncinq/css-components, css/utilities/scrollsnap.css) scrolls
 * and snaps on its own; these buttons only add a pointer and keyboard way to
 * move the row — desktop has no swipe.
 *
 * Injected before the scrolling grid by js/components/scrollsnap.js, on the
 * grids that opted in with .js-scrollsnap-nav (see func/SetScrollsnap.html),
 * and hidden again whenever the row stops overflowing: above the carousel's
 * rung the grid comes back and the buttons go away by themselves, so no
 * breakpoint is repeated here.
 *
 * Two things hide the nav, and a neighbour reading its state needs both: the
 * hidden attribute while the row does not overflow, and the media query below
 * for scrollsnap.nav: pointer. See how .block-content takes its grid gap back
 * in components/block.css.
 *
 * They sit above the row, not under it: they come first in the DOM so a
 * keyboard reaches them without crossing every item, and reading order has to
 * match what is on screen.
 *
 * The glyph is the --icon-arrow mask, like .back and the pagination controls;
 * the colors come from the --carousel-arrow-* tokens, so the buttons sit
 * between the two families they belong to.
 *
 * Structure:
 *   .scrollsnap-nav[.scrollsnap-nav-pointer][hidden]
 *     button.scrollsnap-nav-btn.scrollsnap-nav-prev[aria-disabled]
 *     button.scrollsnap-nav-btn.scrollsnap-nav-next
 *   .items.scrollsnap-md.js-scrollsnap-nav
 */
@layer components {
  .scrollsnap-nav {
    display: flex;
    gap: var(--items-carousel-nav-gap);
    justify-content: flex-end;
    margin-block-start: var(--items-carousel-nav-margin-block-start);
    margin-block-end: var(--items-carousel-nav-margin-block-end);

    /* The utilities layer would otherwise lose to this display. */
    &[hidden] {
      display: none;
    }
  }

  /* scrollsnap.nav: pointer — a touch screen swipes the row, so the buttons
     would only eat space above it. any-pointer rather than pointer, so a mouse
     plugged into a tablet still gets them. */
  @media not (any-pointer: fine) {
    .scrollsnap-nav-pointer {
      display: none;
    }
  }

  .scrollsnap-nav-btn {
    align-items: center;
    background: var(--carousel-arrow-color-background);
    border-color: var(--carousel-arrow-color-border);
    border-radius: var(--items-carousel-nav-border-radius);
    border-style: var(--border-style-normal);
    border-width: var(--carousel-arrow-border-width);
    color: var(--carousel-arrow-color);
    cursor: pointer;
    display: flex;
    height: var(--items-carousel-nav-size);
    justify-content: center;
    padding: 0;
    width: var(--items-carousel-nav-size);

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

    @media (hover: hover) and (pointer: fine) {
      &:hover:not([aria-disabled="true"]) {
        --carousel-arrow-color: var(--carousel-arrow-color-hover);
        --carousel-arrow-color-background: var(--carousel-arrow-color-background-hover);
        --carousel-arrow-color-border: var(--carousel-arrow-color-border-hover);
      }
    }

    /* aria-disabled, not disabled: the button keeps its focus when the row
       reaches its end under the click. */
    &[aria-disabled="true"] {
      cursor: default;
      opacity: var(--items-carousel-nav-opacity-disabled);
    }

    /* The glyph is a mask, so it takes the button's own color with it. */
    &::before {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--items-carousel-nav-icon-size);
      width: var(--items-carousel-nav-icon-size);
    }

    /* One arrow for both buttons: prev is next, turned around. */
    &.scrollsnap-nav-prev::before {
      -webkit-mask: var(--items-carousel-nav-icon-previous) center / var(--items-carousel-nav-icon-size) no-repeat;
              mask: var(--items-carousel-nav-icon-previous) center / var(--items-carousel-nav-icon-size) no-repeat;
      rotate: 180deg;
    }

    &.scrollsnap-nav-next::before {
      -webkit-mask: var(--items-carousel-nav-icon-next) center / var(--items-carousel-nav-icon-size) no-repeat;
              mask: var(--items-carousel-nav-icon-next) center / var(--items-carousel-nav-icon-size) no-repeat;
    }
  }
}

/* components/scrollsnap-pagination.css */
/*
 * .scrollsnap-pagination — dots reporting, and driving, the position of a
 * .scrollsnap-* carousel.
 *
 * One dot per viewport-wide page rather than per item, so a row of nine cards
 * three columns wide reads as three dots. The count is measured in JS — see
 * js/components/scrollsnap.js — which also injects the whole thing after the
 * row on the grids that opted in with .js-scrollsnap-pagination.
 *
 * Colors come from the --carousel-pagination-* family, so the dots match the
 * Splide ones.
 *
 * Two things hide the pagination, and a neighbour reading its state needs
 * both: the hidden attribute while the row does not overflow, and the media
 * query below for scrollsnap.pagination: pointer. See how .block-content takes
 * its grid gap back in components/block.css.
 *
 * Structure:
 *   .items.scrollsnap-md.js-scrollsnap-pagination
 *   .scrollsnap-pagination[.scrollsnap-pagination-pointer][hidden]
 *     button.scrollsnap-pagination-dot[aria-current]
 */
@layer components {
  .scrollsnap-pagination {
    display: flex;
    gap: var(--items-carousel-pagination-gap);
    justify-content: center;
    margin-block-start: var(--items-carousel-pagination-margin-block-start);

    /* The utilities layer would otherwise lose to this display. */
    &[hidden] {
      display: none;
    }
  }

  /* scrollsnap.pagination: pointer — same reading as the nav's own variant. */
  @media not (any-pointer: fine) {
    .scrollsnap-pagination-pointer {
      display: none;
    }
  }

  .scrollsnap-pagination-dot {
    background-color: var(--items-carousel-pagination-color);
    border-color: var(--items-carousel-pagination-color-border);
    border-radius: var(--items-carousel-pagination-border-radius);
    border-style: var(--items-carousel-pagination-border-style);
    border-width: var(--items-carousel-pagination-border-width);
    cursor: pointer;
    height: var(--items-carousel-pagination-height);
    padding: 0;
    width: var(--items-carousel-pagination-width);

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

    /* States redefine the tokens rather than the properties, the way the
       arrows do — one place declares what a dot is made of. */
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --items-carousel-pagination-color: var(--items-carousel-pagination-color-hover);
        --items-carousel-pagination-color-border: var(--items-carousel-pagination-color-border-hover);
      }
    }

    /* aria-current rather than a class: the state is the same one a screen
       reader is told about, so there is only one to keep true. Declared after
       :hover, so the current dot keeps its look under the pointer. */
    &[aria-current="true"] {
      --items-carousel-pagination-color: var(--items-carousel-pagination-color-active);
      --items-carousel-pagination-color-border: var(--items-carousel-pagination-color-border-active);
      cursor: default;
    }
  }
}

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

    > * {
      margin-block: 0;
    }

    /* The TOC fills the rest of the sidebar so its sticky wrapper can travel */
    > .toc:last-child {
      flex-grow: 1;
    }

    .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-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 {
      /* Sub-lists keep the item gap, not the prose rhythm of css-base. */
      --list-nested-margin-block-end: var(--toc-nav-item-gap);
      --list-nested-margin-block-start: var(--toc-nav-item-gap);
      width: 100%;

      /* The font size sits on the list, not the item, so an em indent is
         measured at the size of the markers it has to hold. */
      ol,
      ul {
        font-size: var(--toc-nav-font-size);
        padding-inline-start: var(--toc-nav-indent);
      }

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

      ol ol {
        list-style-type: circle;
      }

      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-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)
    }
  }
}


/* Blocks: with hugolify-admin, only the blocks the site enables
   (params.admin.blocks.enable), like js/main.js; otherwise all of them.
   A block without a stylesheet of its own uses its base block's one
   (paragraph-list → block-paragraph.css). Sorted, so the cascade does not
   depend on the order of the list. */
/* components/blocks/block-alert.css */
/*
 * .block-alert — block section displaying an alert message.
 *
 * Structure:
 *   section.block-alert[.block-light]
 *     .container
 *       .alert[.alert-{variant}]
 */
@layer components {
  .block-alert {
    --max-width-paragraph: var(--max-width);
    
    @media (width >= 48rem) {
      &.block-align-center {
        --alert-align: center;
        p {
          margin-inline: auto;
        }
      }
      &.block-align-end {
        --alert-align: end;
        p {
          margin-inline-start: auto;
        }
      }
    }
  }
}

/* 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 {
    @media (width >= 48rem) {
      &.block-align-center {
        --details-content-align: center;
        audio,
        p {
          margin-inline: auto;
        }
      }
      &.block-align-end {
        --details-content-align: end;
        audio,
        p {
          margin-inline-start: 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)
 */

/* 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-on-accent);
      --btn-color-border:  var(--color-on-accent);
      --btn-color-text: var(--color-accent);
    }
    &.block-dark {
      --btn-color-background:var(--color-on-dark);
      --btn-color-border: var(--color-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 {
    .item {
      --item-align: normal;
      --item-border-radius: 0;
      --item-border-width: 0;
      --item-color-background: transparent;
      --item-color-text: var(--color-text);
      --item-media-color-background: transparent;
      --item-padding-bocks: 0;
      --item-padding-inline: 0;
      --item-shadow: none;
      --item-shadow-hover: none;
      --item-title-color: var(--color-heading);
      margin-block: 0;
    }
    .gauge {
      margin: 0 auto;
    }
    .value {
      color: var(--datas-value-color, var(--color-heading));
      font-family: var(--datas-value-font-family, var(--font-family-heading));
      font-size: var(--datas-value-font-size, var(--font-size-fluid-xl));
      font-weight: var(--datas-value-font-weight, var(--font-weight-heading));
      line-height: var(--datas-value-line-height, var(--line-height-none));
      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-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-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;
    }
  }

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

  /* ── 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-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-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-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-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.newsletter
 *         div                (email + submit)
 *         div.form-check*    (optional checkboxes, e.g. consent)
 *         div.alert[hidden]  (provider's answer, filled by js/components/newsletter.js)
 *
 * States (set by the script on form.newsletter): .is-submitting, .is-success, .has-error
 */
@layer components {
  .block-newsletter {
    .newsletter {
      display: grid;
      gap: var(--gap);
      max-width: var(--max-width-paragraph);
      width: 100%;
      .row {
        flex-wrap: nowrap;
      }
      .btn {
        flex-shrink: 0;
      }
      &.is-submitting {
        cursor: progress;
      }
      /* Once subscribed, only the provider's message remains */
      &.is-success > :not(.alert) {
        display: none;
      }
    }

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

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

/* components/blocks/block-paragraph.css */
/*
 * .block-paragraph — full-width block section wrapping a paragraph.
 * .block-paragraph-list — the same paragraph, repeated in an .items grid.
 *
 * Both blocks render the same .paragraph component (commons/paragraph.html),
 * so the inner rules are shared through :is() rather than duplicated.
 *
 * Structure:
 *   section.block-paragraph[.block-light]
 *     .heading
 *     .paragraph
 *     .footing
 *
 *   section.block-paragraph-list[.block-light]
 *     .heading
 *     .items.items-{1,2}
 *       .paragraph
 *     .footing
 */
@layer components {
  :is(.block-paragraph, .block-paragraph-list) {
    --items-row-gap: var(--gap-row);

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

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

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

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

/* 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 {
    /* How many pushes stand side by side: the grid counts them with
       --items-cols, the carousel with --perPage, set inline by the template.
       One by default — a lone push spans the whole block. */
    --push-columns: 1;

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

      /* Full bleed, a carousel lays its dots over the slides
         (vendors/splide.css). That holds for a lone push spanning the
         viewport; standing side by side, the pushes are cards again and their
         dots go back below the track, with the room that takes. */
      .carousel:has(.splide__pagination) {
        /* No style query for this one: --push-columns is set on the carousel
           itself, and a query only ever reads an ancestor. The arithmetic
           stands in: 0 for one column, 1 from two up. */
        margin-block-end: calc(var(--carousel-pagination-margin-block) * min(1, var(--push-columns) - 1));
      }
      .carousel .splide__pagination {
        @container not style(--push-columns: 1) {
          inset-block-end: auto;
          inset-block-start: 100%;
        }
      }
    }

    .items {
      --push-columns: var(--items-cols, 1);
    }
    .carousel {
      --push-columns: var(--perPage, 1);
    }

    @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);
        }
      }

      /* A scrolling row is the exception: its items keep their own width and
         scroll inside the gutter, so a push there neither bleeds nor loses
         its corners. Declared last to win over :not(.block-full), which
         carries the same specificity. Under .block-full the radius stays 0,
         --push-border-radius being the one the block already set. */
      :is(.scrollsnap, .scrollsnap-sm, .scrollsnap-md, .scrollsnap-lg, .scrollsnap-xl) .push {
        border-radius: var(--push-border-radius);
        margin-inline: 0;
        min-height: 100%;
      }
    }

    /* Sharing the width with its neighbours, a push is no longer wide enough
       for the cinema ratio, nor for a text box capped at a share of its width,
       and has to fill the height its row settles on. Its padding narrows with
       it, keeping the share of the push it takes with two to a row.
       Tablet and up only: below that, pushes are always stacked full width.
       The style query reads --push-columns from the push's own parent, which
       inherits it from the .items or .carousel above. */
    @media (width >= 48rem) {
      .push {
        @container not style(--push-columns: 1) {
          --push-content-max-inline-size: 100%;
          --push-content-padding-block: calc(var(--spacing-fluid-md) * 2 / var(--push-columns));
          --push-content-padding-inline: calc(var(--spacing-fluid-md) * 2 / var(--push-columns));
          --push-ratio: var(--push-ratio-double);
          min-height: 100%;
        }
      }
    }
  }
}

/* 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 {
    --block-quote-align: start;
    
    .quote {
      --figure-margin-block: 0;
      --quote-gap: var(--block-quote-gap);
      --quote-padding: 0;

      blockquote {
        text-align: var(--block-quote-align);
      }
      figcaption {
        justify-content: var(--block-quote-align);
        div:first-child {
          text-align: var(--block-quote-align);
        }
      }
    }
    &.block-accent,
    &.block-dark {
      .quote {
        --quote-color-text: var(--color-text);
        --quote-cite-color-text: var(--color-text);
      }
    }

    &.block-align-center {
      --block-quote-align: center;
    }

    &.block-align-end {
      --block-quote-align: end;
    }
  }
}

/* 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. In a themed
     * block the card takes the colours of the theme (components/block-theme.css).
     */
    .quote {
      --quote-border-radius: var(--radius-md);
      --quote-color-background: var(--theme-card-color-background, var(--color-background-muted));
      --quote-color-text: var(--theme-card-color-text, var(--color-text));
      --quote-cite-color-text: var(--quote-color-text);
      --quote-author-color-text: oklch(from var(--quote-color-text) l c h / var(--opacity-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 {
      display: grid;
      list-style: none;
      padding-inline-start: 0;
      row-gap: var(--block-testimonials-list-gap);

      > li {
        margin-block: 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-on-accent);
      --timeline-marker-color-text: var(--color-accent);
    }
    &.block-black,
    &.block-dark {
      --timeline-marker-color-background: var(--color-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.
 *
 * .scrollsnap lives in @uncinq/css-components (css/utilities/scrollsnap.css),
 * imported by main.css.
 */
/* css/utilities/display.css */
@layer utilities {
  .d-none { display: none; }
}



/* 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-radius: 0px;
    --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-radius: var(--person-border-radius);
    --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 pages {
  .page-persons {
    @media (width >= 48rem) {
      .grid {
        .featured-image,
        .content {
          --grid-column: span calc(var(--columns) / 2);
        }
      }
    }
    @media (width >= 64rem) {
      .grid {
        .featured-image,
        .sidebar {
          --grid-column: span calc(var(--columns) / 4);
        }
      }
    }
  }
}



/* 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 */
/* theme.css: barrel, do not edit */

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

/* theme/components/block-cta.css */
@layer tokens {
  :root {
    --block-cta-box-border-radius: var(--radius-2xl);
    --block-cta-box-border-radius-desktop: var(--size-64);
    --block-cta-box-color-background: var(--color-brand);
    --block-cta-box-color-text: var(--color-on-brand);
    --block-cta-box-padding: var(--size-30);
    --block-cta-box-padding-desktop: var(--size-80);
  }
}

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

/* theme/components/breadcrumb.css */
@layer tokens {
  :root {
    --breadcrumb-font-size: var(--font-size-2xs);
  }
}

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

/* theme/components/btn.css */
@layer tokens {
  :root {
    --btn-font-size: var(--font-size-xs);
    --btn-gap: var(--size-8);
    --btn-line-height: var(--line-height-normal);
    --btn-padding-inline: var(--size-20);
    --btn-padding-block: var(--size-12);
    --btn-text-transform: uppercase;
    --btn-border-radius: var(--radius-2xl);
    --btn-letter-spacing: var(--letter-spacing-md);
    --btn-icon: var(--icon-arrow);
    --btn-icon-margin-inline-start: -0.35rem;
    --btn-icon-size: var(--size-22);
    --btn-icon-transition-duration: 2s;
    --btn-icon-transition-easing: cubic-bezier(0.085, 1.335, 0.285, 0.995);
    --btn-icon-translate-hover: 0.3rem;
  }
}

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

/* theme/components/container.css */
@layer tokens {
  :root {
    --container-max-width-desktop: 90rem;
  }
}

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

/* theme/components/header.css */
@layer tokens {
  :root {
    --header-color-background: transparent;
    --header-color-link: var(--color-black);
    --header-color-text: var(--color-black);
    --header-height: 98px;
    --header-height-expand: 106px;
    --header-nav-border-radius: var(--size-44);
    --header-nav-color-background: var(--color-white);
    --header-nav-padding-block: var(--size-12);
    --header-nav-padding-inline: var(--size-28);
    --header-nav-shadow: var(--shadow-md);
    --header-padding-block: var(--size-16);
    --header-padding-inline: var(--size-30);
    --header-shadow: var(--shadow-none);
  }
}

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

/* theme/components/hero.css */
@layer tokens {
  :root {
    --hero-height: auto;
    --hero-home-height: auto;
    --hero-home-min-height: calc(37.5rem - var(--header-height));
    --hero-home-min-height-tablet: calc(43.75rem - var(--header-height));
    --hero-home-title-font-size: min(1.725rem + 5.7vw, 6rem);
    --hero-media-brightness: 0.3;
    --hero-max-height: none;
    --hero-card-opacity: 0.125;
    --hero-min-height: calc(25rem - var(--header-height));
    --hero-min-height-tablet: calc(31.25rem - var(--header-height));
    --hero-padding-block-end: min(1.625rem + 4.5vw, 5rem);
  }
}

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

/* theme/components/item.css */
@layer tokens {
  :root {
    --item-cover-color-background: var(--color-dark);
    --item-cover-color-text: var(--color-on-dark);
    --item-cover-gradient-color-from: var(--color-black);
    --item-cover-gradient-color-to: transparent;
    --item-cover-gradient-stop: 50%;
    --item-cover-media-ratio: 2 / 3;
    --item-cover-metas-opacity: 0.8;
    --item-cover-padding: var(--size-20);
    --item-cover-shadow: var(--shadow-offset);
    --item-cover-title-font-family: var(--font-family-text);
    --item-cover-title-font-size: var(--size-20);
    --item-cover-title-font-weight: var(--font-weight-bold);
    --item-cover-title-line-height: var(--line-height-tight);
  }
}

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

/* theme/components/items.css */
@layer tokens {
  :root {
    --items-cover-carousel-max-width: 85vw;
    --items-cover-carousel-max-width-tablet: 45vw;
    --items-cover-cols: 1;
    --items-cover-cols-tablet: 3;
    --items-cover-cols-desktop: 4;
    --items-cover-gap-column: var(--size-24);
    --items-cover-gap-row: var(--size-40);
    --items-cover-gap-row-tablet: var(--size-80);
  }
}

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

/* theme/components/logo.css */
@layer tokens {
  :root {
    --logo-color: var(--color-black);
    --logo-font-size: var(--font-size-lg);
  }
}

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

/* theme/components/pagination.css */
@layer tokens {
  :root {
    --pagination-item-border-radius: var(--radius-none);
  }
}

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

/* theme/components/person.css */
@layer tokens {
  :root {
    --person-media-max-width: 100%;
  }
}

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

/* theme/components/quote.css */
@layer tokens {
  :root {
    --quote-font-size: min(1.425rem + 2.1vw, 3rem);
    --quote-font-style: normal;
    --quote-line-height: var(--line-height-tight);
  }
}

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

/* theme/components/surtitle.css */
@layer tokens {
  :root {
    --surtitle-font-size: var(--font-size-2xs);
    --surtitle-font-weight: var(--font-weight-normal);
  }
}

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

/* theme/semantic/color.css */
@layer tokens {
  :root {
    --color-gray-100: oklch(96.42% 0 0);
    --color-gray-200: oklch(92.49% 0 0);
    --color-gray-300: oklch(76.68% 0 0);
    --color-gray-400: oklch(68.30% 0 0);
    --color-gray-500: oklch(59.99% 0 0);
    --color-gray-600: oklch(51.03% 0 0);
    --color-gray-700: oklch(42.02% 0 0);
    --color-gray-800: oklch(32.11% 0 0);
    --color-gray-900: oklch(21.78% 0 0);
    --color-brand: var(--color-black);
    --color-brand-hover: var(--color-gray-800);
    --color-brand-muted: var(--color-gray-200);
    --color-brand-strong: var(--color-black);
    --color-heading: var(--color-text);
    --color-light: var(--color-gray-100);
    --color-light-hover: var(--color-gray-200);
    --color-shadow-offset: oklch(from var(--color-background-muted) calc(l - var(--color-shadow-offset-step)) c h);
    --color-shadow-offset-step: 0.04;
  }
}

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

/* theme/semantic/radius.css */
@layer tokens {
  :root {
    --radius-control: var(--radius-xs);
    --radius-surface: var(--radius-sm);
  }
}

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

/* theme/semantic/shadow.css */
@layer tokens {
  :root {
    --shadow-offset: -5px 5px 0 0 var(--color-shadow-offset);
  }
}

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

/* theme/semantic/spacing.css */
@layer tokens {
  :root {
    --spacing-heading: var(--size-24);
    --spacing-typography: var(--size-24);
  }
}

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

/* theme/semantic/typography.css */
@layer tokens {
  :root {
    --font-family-sans: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-serif: "Playfair Display", Times, serif;
    --font-family-heading: var(--font-family-serif);
    --font-weight-control: var(--font-weight-bold);
    --font-weight-heading: var(--font-weight-normal);
    --font-size-heading-01: min(1.525rem + 3.3vw, 4rem);
    --font-size-heading-02: min(1.375rem + 1.5vw, 2.5rem);
    --font-size-heading-03: min(1.325rem + 0.9vw, 2rem);
    --font-size-heading-04: min(1.275rem + 0.3vw, 1.5rem);
    --font-size-heading-05: var(--size-20);
    --font-size-heading-06: var(--font-size-sm);
    --font-size-small: var(--font-size-xs);
    --font-size-text: var(--font-size-sm);
  }
}


/* Custom Site tokens */

/* Override CSS */
/* theme.css */
/*
 * Theme 5 for hugolify-theme-design-system.
 *
 * The design system imports "theme.css" last in its own css/main.css and ships
 * an empty file under that name: this module is declared before it in
 * module.yaml, so this file shadows that placeholder. The same goes for the
 * generated tokens/theme.css.
 *
 * What lives here: only what the tokens cannot say. Every value that is a
 * design decision sits in assets/tokens/theme/ and reaches the CSS as a custom
 * property; the token files name the SASS variable each one replaces.
 */

/* Base */
/* theme/base/fonts.css */
/*
 * Roboto 400 and 700 for the text, Playfair Display 400 for the headings: the
 * three faces the SASS theme self-hosts from static/assets/fonts/.
 *
 * The url() is relative to the compiled stylesheet, and PostCSS does not rebase
 * it. Since hugolify-theme v2.48.0 head/css.html publishes the design system's
 * stylesheet at /assets/css/main.css, where the SASS layer compiles too: both
 * reach static/assets/fonts/ with ../fonts/.
 */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair-display.woff2') format('woff2');
  /* Basic latin and more */
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-regular.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-bold.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* theme/base/shadow.css */
@layer tokens {
  /* The flat offset shadow is a step darker than the card it sits under
     (tokens/theme/semantic/color.css). In a themed block or hero the card is a
     veil of the text colour over the ground: the shadow takes that colour,
     composited, a step down. The tokens built on it, the cover card's included,
     are composed again there, as set on :root they are resolved with the
     colours of the page. */
  :where(.block-accent, .block-black, .block-dark, .block-highlight, .block-light, .block-neutral, .block-white) {
    --color-shadow-offset: oklch(
      from color-mix(in srgb, var(--color-text) calc(var(--block-card-opacity) * 100%), var(--block-color-background))
      calc(l - var(--color-shadow-offset-step)) c h
    );
    --shadow-offset: -5px 5px 0 0 var(--color-shadow-offset);
    --item-cover-shadow: var(--shadow-offset);
  }
  :where(.hero-accent, .hero-black, .hero-dark, .hero-highlight, .hero-light, .hero-neutral, .hero-white) {
    --color-shadow-offset: oklch(
      from color-mix(in srgb, var(--color-text) calc(var(--hero-card-opacity) * 100%), var(--hero-color-background))
      calc(l - var(--color-shadow-offset-step)) c h
    );
    --shadow-offset: -5px 5px 0 0 var(--color-shadow-offset);
    --item-cover-shadow: var(--shadow-offset);
  }
}

@layer components {
  /* A scrollsnap row clips what overflows it while it scrolls, the 5px of the
     offset shadow under its items included: it gets them back as padding, given
     back by a negative margin so the row does not move. The bleed of the row
     already leaves room for the shadow on the left of the first item. */
  :is(.scrollsnap, .scrollsnap-sm, .scrollsnap-md, .scrollsnap-lg, .scrollsnap-xl) {
    margin-block-end: -5px;
    margin-inline-start: -5px;
    padding-block-end: 5px;
    padding-inline-start: 5px;
  }
}

/* theme/base/typography.css */
@layer base {
  /* The blockquote of the content is set like the quote block: large,
     upright, in the font of the headings. css-base reads no token for it,
     so the --quote-* tokens are read here. */
  blockquote {
    font-family: var(--quote-font-family);
    font-size: var(--quote-font-size);
    font-style: var(--quote-font-style);
    line-height: var(--quote-line-height);
  }
}


/* Layouts */
/* theme/layouts/header.css */
/*
 * The header floats over the hero: the bar is transparent, the nav inside it
 * is drawn as a white pill. The hero slides under the header by
 * --header-height, see theme/components/hero.css.
 */
@layer tokens {
  /* The header grows once the menu is inline */
  @media (width >= 64rem) {
    :root {
      --header-height: var(--header-height-expand);
    }
  }
}

@layer layouts {
  header[role='banner'] > nav > .container {
    background-color: var(--header-nav-color-background);
    border-radius: var(--header-nav-border-radius);
    box-shadow: var(--header-nav-shadow);
    padding-block: var(--header-nav-padding-block);
    padding-inline: var(--header-nav-padding-inline);
  }
}


/* Components */
/* theme/components/btn.css */
/*
 * Theme 5 buttons are uppercase, letter-spaced, and led by an arrow that slides
 * forward under the pointer: the link-arrow mixin of the SASS theme, redrawn as
 * a masked icon the way the design system draws .more and .back.
 *
 * The arrow is only for buttons that go somewhere. Controls that open, close or
 * filter something in place keep a bare label, which is what the :not() list is
 * for: the component classes of @uncinq/css-components, the in-page anchors,
 * and anything wired to a panel.
 */
@layer components {
  .btn {
    letter-spacing: var(--btn-letter-spacing);
  }

  .btn:not(
    .btn-close,
    .btn-filter,
    .btn-menu,
    .btn-search,
    .btn-share,
    .btn-toc,
    .btn-toggle-video,
    .js-dialog-toggle,
    .js-dropdown-toggle,
    [aria-controls],
    [href^='#']
  ) {
    &::before {
      background-color: currentColor;
      content: '';
      flex-shrink: 0;
      height: var(--btn-icon-size);
      margin-inline-start: var(--btn-icon-margin-inline-start);
      -webkit-mask: var(--btn-icon) center / var(--btn-icon-size) no-repeat;
              mask: var(--btn-icon) center / var(--btn-icon-size) no-repeat;
      width: var(--btn-icon-size);

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

    @media (hover: hover) and (pointer: fine) {
      &:hover::before {
        translate: var(--btn-icon-translate-hover);
      }
    }
  }
}

/* theme/components/hero.css */
/*
 * The hero of theme 5 slides under the floating header, which shows over it.
 * The container hands the header's height back as padding, so the content
 * still starts under the header.
 *
 * Every page has one: layouts/partials/commons/hero.html builds it from the
 * title, the description and the image of the page when the front matter has
 * no hero. Its colours come from its theme class, dark unless the admin picks
 * another one (see commons/hero.html).
 */
@layer components {
  .hero {
    margin-block-start: calc(var(--header-height) * -1);

    @media (width >= 48rem) {
      --hero-min-height: var(--hero-min-height-tablet);
    }

    .container {
      padding-block-start: var(--header-height);
    }

    .row {
      padding-block: 0 var(--hero-padding-block-end);
    }

    /* The buttons take the colours of the hero itself, the first one solid,
       the second one outlined, so a hero theme turns them over with the rest
       instead of leaving white buttons on a light ground. */
    .hero-content {
      .btn {
        --btn-color-background: var(--hero-color-text);
        --btn-color-background-hover: var(--hero-color-text);
        --btn-color-border: var(--hero-color-text);
        --btn-color-border-hover: var(--hero-color-text);
        --btn-color-text: var(--hero-color-background);
        --btn-color-text-hover: var(--hero-color-background);
      }

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

/* theme/components/item.css */
/*
 * The cover card of theme 5: the image covers the whole card, a shade rises
 * from its bottom edge and the text sits over it, in white. A flat shadow is
 * offset to the bottom left. Without an image the card keeps the shape of one,
 * dark.
 *
 * It dresses the item types the SASS theme dressed with its card mixin, and the
 * informations of a block that come with an image. The other types
 * (documentation, products...) keep the item of the design system.
 */
@layer components {
  .item:is(
    .casestudy,
    .expertise,
    .page,
    .person,
    .place,
    .post,
    .project,
    .publication,
    .realestate,
    .service
  ),
  .block-informations .item:has(.media-image) {
    --btn-color-background: transparent;
    --btn-color-background-hover: var(--color-light);
    --btn-color-border: var(--color-light);
    --btn-color-border-hover: var(--color-light);
    --btn-color-text: var(--color-light);
    --btn-color-text-hover: var(--color-on-light);
    --item-border-radius: var(--radius-none);
    --item-border-width: var(--border-width-none);
    --item-color-background: var(--item-cover-color-background);
    --item-color-text: var(--item-cover-color-text);
    --item-gap: var(--spacing-2xs);
    --item-media-border-radius: var(--radius-none);
    --item-media-border-width: var(--border-width-none);
    --item-media-color-background: transparent;
    --item-media-ratio: var(--item-cover-media-ratio);
    --item-metas-color-background: transparent;
    --item-metas-color-text: var(--item-cover-color-text);
    --item-metas-font-size: var(--font-size-small);
    --item-metas-order: 0;
    --item-metas-padding-block-end: 0;
    --item-metas-padding-block-start: 0;
    --item-metas-padding-inline: 0;
    --item-padding-block-end: var(--item-cover-padding);
    --item-padding-block-start: var(--item-cover-padding);
    --item-padding-inline: var(--item-cover-padding);
    --item-shadow: var(--item-cover-shadow);
    --item-shadow-hover: var(--item-cover-shadow);
    --item-title-color: var(--item-cover-color-text);
    --item-title-font-family: var(--item-cover-title-font-family);
    --item-title-font-size: var(--item-cover-title-font-size);
    --item-title-font-weight: var(--item-cover-title-font-weight);
    --item-title-line-height: var(--item-cover-title-line-height);

    /* The image and the text share one grid cell: the card is as tall as the
       image or as the text, whichever is taller, so a long title on a short
       image grows the card rather than spilling out of it */
    display: grid;

    > .content,
    > .media {
      grid-area: 1 / 1;
    }

    /* Over the image, gathered at its bottom edge */
    .content {
      background-image: linear-gradient(
        to top,
        var(--item-cover-gradient-color-from),
        var(--item-cover-gradient-color-to) var(--item-cover-gradient-stop)
      );
      justify-content: flex-end;
      z-index: 1;
    }

    .description,
    .metas {
      opacity: var(--item-cover-metas-opacity);
    }

    /* The date and the categories run as one line of text that wraps, where
       the design system lays them out as a flex row */
    .metas {
      display: block;
    }

    /* The design system pushes the button to the bottom of the card with an
       auto margin, which here would lift the text away from it */
    .btn {
      margin-block-start: var(--spacing-xs);
    }
  }
}

/* theme/components/items.css */
/*
 * The lists of cover cards (see theme/components/item.css) run on a fixed
 * grid, one card per row, then three from --sm and four from --md, with tall
 * gaps between the rows. The design system lets the cards fill the row from a
 * minimum width instead.
 *
 * Below the carousel breakpoint the scrollsnap utility takes the grid over: it
 * sizes each card with min(--items-min-width, --items-carousel-max-width), so
 * the minimum width is let go to 100% and the carousel width decides alone.
 */
@layer components {
  .items:is(
    .casestudies,
    .expertises,
    .pages,
    .persons,
    .places,
    .posts,
    .products,
    .projects,
    .publications,
    .services
  ) {
    --items-carousel-max-width: var(--items-cover-carousel-max-width);
    --items-column-gap: var(--items-cover-gap-column);
    --items-min-width: 100%;
    --items-row-gap: var(--items-cover-gap-row);
    grid-template-columns: repeat(var(--items-cover-cols), minmax(0, 1fr));

    @media (width >= 48rem) {
      --items-carousel-max-width: var(--items-cover-carousel-max-width-tablet);
      --items-row-gap: var(--items-cover-gap-row-tablet);
      grid-template-columns: repeat(
        var(--items-cover-cols-tablet),
        minmax(0, 1fr)
      );
    }

    @media (width >= 64rem) {
      grid-template-columns: repeat(
        var(--items-cover-cols-desktop),
        minmax(0, 1fr)
      );
    }
  }

  /* A latest block holding fewer cards than the row gathers them in its
     middle: fixed tracks, the empty ones collapsed. */
  .block-latest
    .items:is(
      .casestudies,
      .expertises,
      .pages,
      .persons,
      .places,
      .posts,
      .products,
      .projects,
      .publications,
      .services
    ) {
    @media (width >= 48rem) {
      --items-cols: var(--items-cover-cols-tablet);
      grid-template-columns: repeat(
        auto-fit,
        calc(
          (100% - var(--items-column-gap) * (var(--items-cols) - 1)) /
            var(--items-cols)
        )
      );
      justify-content: center;
    }

    @media (width >= 64rem) {
      --items-cols: var(--items-cover-cols-desktop);
    }
  }
}

/* theme/components/publication.css */
@layer components {
  /* The press badge runs in the text of the cover card, over the date, where
     the publications module pins it to the top corner of the image. It is set
     light, the way the SASS theme drew it. */
  .item.publication .press {
    --badge-font-weight: var(--font-weight-normal);
    order: 0;
    padding: 0;
    pointer-events: auto;
    position: static;
  }
}


/* Blocks */
/* theme/components/blocks/block-comparison.css */
@layer components {
  /* The flat offset shadow of theme 5, which stays put under the pointer */
  .block-comparison .item {
    --item-shadow: var(--shadow-offset);
    --item-shadow-hover: var(--shadow-offset);
  }
}

/* theme/components/blocks/block-cta.css */
/*
 * The call to action of theme 5 is a rounded panel inside the container, black
 * by default, its content centred. The panel is .block-cta-box, an element the
 * design system knows nothing about: see layouts/partials/blocks/templates/cta.html.
 *
 * A block theme colours the panel rather than the section, which stays on the
 * page ground.
 *
 * A panel holding a single button is a link as a whole: the button stretches
 * an invisible ::after over the panel, and the panel turns over under the
 * pointer, its two colours swapped. With several buttons, each one stays its
 * own target and the panel stays put.
 */
@layer components {
  .block-cta {
    background: none;
  }

  .block-cta:is(
    .block-accent,
    .block-black,
    .block-dark,
    .block-highlight,
    .block-light,
    .block-neutral,
    .block-white
  ) {
    --block-cta-box-color-background: var(--block-color-background);
    --block-cta-box-color-text: var(--color-text);
    color: inherit;
  }

  /* With its section left on the page ground, a themed call to action spaces
     out like an unthemed block: the design system only closes the gap between
     two unthemed blocks, or two blocks of the same theme. */
  :is(
      .block:not(
        .block-accent,
        .block-black,
        .block-dark,
        .block-highlight,
        .block-light,
        .block-neutral,
        .block-white
      ),
      .block-cta
    )
    + .block-cta,
  .block-cta
    + .block:not(
      .block-accent,
      .block-black,
      .block-dark,
      .block-highlight,
      .block-light,
      .block-neutral,
      .block-white
    ) {
    padding-block-start: var(--block-theme-padding-top, 0);
  }

  .block-cta-box {
    --color-heading: var(--block-cta-box-color-text);
    --color-link: var(--block-cta-box-color-text);
    --color-text: var(--block-cta-box-color-text);
    --surtitle-color-text: var(--block-cta-box-color-text);
    background-color: var(--block-cta-box-color-background);
    border-radius: var(--block-cta-box-border-radius);
    color: var(--color-text);
    display: grid;
    gap: var(--block-gap);
    padding: var(--block-cta-box-padding);
    position: relative;
    text-align: center;

    @media (width >= 64rem) {
      border-radius: var(--block-cta-box-border-radius-desktop);
      padding: var(--block-cta-box-padding-desktop);
    }

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

    .heading {
      align-items: center;

      h2,
      p {
        margin-inline: auto;
      }
    }

    .cta {
      justify-content: center;
    }

    /* The buttons read the colours of the panel: the first one solid, the
       others outlined */
    .btn {
      --btn-color-background: var(--block-cta-box-color-text);
      --btn-color-background-hover: var(--block-cta-box-color-background);
      --btn-color-border: var(--block-cta-box-color-text);
      --btn-color-border-hover: var(--block-cta-box-color-text);
      --btn-color-text: var(--block-cta-box-color-background);
      --btn-color-text-hover: var(--block-cta-box-color-text);
    }

    .btn + .btn {
      --btn-color-background: transparent;
      --btn-color-background-hover: var(--block-cta-box-color-text);
      --btn-color-text: var(--block-cta-box-color-text);
      --btn-color-text-hover: var(--block-cta-box-color-background);
    }

    /* A single button stretches over the panel. Its ::after is otherwise the
       external link icon, hence the mask and the size taken back. */
    .cta:not([role='group']) .btn::after {
      background-color: transparent;
      content: '';
      height: auto;
      inset: 0;
      margin: 0;
      -webkit-mask: none;
              mask: none;
      position: absolute;
      width: auto;
      z-index: 1;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .block-cta-box:has(.cta:not([role='group'])):hover {
      --color-heading: var(--block-cta-box-color-background);
      --color-link: var(--block-cta-box-color-background);
      --color-text: var(--block-cta-box-color-background);
      --surtitle-color-text: var(--block-cta-box-color-background);
      background-color: var(--block-cta-box-color-text);
    }
  }
}

/* theme/components/blocks/block-informations.css */
@layer components {
  /* A tinted surface and the flat offset shadow of theme 5, the card of the
     block theme when the block has one. An information with an image is
     drawn as a cover card instead, see theme/components/item.css. */
  .block-informations .item {
    --item-border-width: var(--border-width-none);
    --item-color-background: var(--theme-card-color-background, var(--color-background-muted));
    --item-shadow: var(--shadow-offset);
    --item-shadow-hover: var(--shadow-offset);
  }
}

/* theme/components/blocks/block-testimonials.css */
@layer components {
  /* Square, on the tinted surface the design system already gives them, with
     the flat offset shadow of theme 5 */
  .block-testimonials .quote {
    --quote-border-radius: var(--radius-surface);
    box-shadow: var(--shadow-offset);
  }
}


/* Pages */
/* theme/pages/home.css */
@layer pages {
  /* The home hero is taller and its title larger. css-base sets the size of
     each heading on the heading itself, so the h1 is reached directly. */
  .home-page .hero {
    @media (width >= 48rem) {
      --hero-home-min-height: var(--hero-home-min-height-tablet);
    }

    h1 {
      --font-size-heading: var(--hero-home-title-font-size);
    }
  }
}

/* theme/pages/post.css */
@layer pages {
  /* The metas open the sidebar of a post (see layouts/partials/posts/sidebar.html):
     stacked, without separators, the share button under them. */
  .page-posts .sidebar .metas {
    align-items: start;
    flex-direction: column;

    > *::before {
      content: none;
    }

    .share {
      margin-block-start: var(--spacing-xs);
      margin-inline-start: 0;
    }
  }
}