@layer tokens, base, layout, components, utilities;

/* ===== styles/tokens.css ===== */
/* ==========================================================================
   tokens.css — the ONLY place design values live.
   Layer 1: primitives (raw values) → used by semantic tokens only.
   Layer 2: semantic (meaning)      → used by components.
   Layer 3: component tokens        → declared inside each component file,
                                      always pointing at semantic tokens.

   Brand: one color slot ("brand") so the palette can change by editing primitives
   + the semantic mapping below — components never name a hue.
     brand  dusk blue, from the evening sky over Piazza IV Novembre → --dusk-*
     ink    #231F20 (brochures)  → --ink-900
     rule   #513D2E (logo rule)  → --brown-700, warm bronze on dark → --bronze-300

   Breakpoints can't read custom properties, so they are documented here and
   used as literals in @media / @container preludes only:
     --bp-sm: 30em   --bp-md: 48em   --bp-lg: 64em   --bp-xl: 80em
   ========================================================================== */

@layer tokens {
  :root {
    /* ---------- 1. Primitives ----------
       Hex first, so browsers without oklch() (e.g. Chrome ≤ 110 on Windows 7) still get the palette.
       Modern browsers switch to the oklch() values in the @supports block below. */

    /* Dusk (brand), hue 268 */
    --dusk-50: #f5f7fc;
    --dusk-100: #e9edf7;
    --dusk-200: #c8d1e5;
    --dusk-300: #a8b4d2;
    --dusk-500: #576892;
    --dusk-600: #41517c;
    --dusk-700: #2d3b62;
    --dusk-800: #1f2a48;
    --dusk-900: #141c31;

    /* Bronze (warm accent, sunset) */
    --bronze-300: #d8b795;
    --bronze-500: #b47f52;

    /* Ink (warm near-black), hue 0.6 */
    --ink-50: #f7f5f3;
    --ink-100: #e7e4e2;
    --ink-300: #bbb6b5;
    --ink-500: #6d6769;
    --ink-600: #575152;
    --ink-700: #413b3d;
    --ink-800: #2e2a2b;
    --ink-900: #231f20;
    --ink-950: #161314;

    --white: #ffffff;
    --black-alpha-40: #00000066;
    --black-alpha-08: #00000014;

    /* Brown (logo rule) */
    --brown-300: #bb9e89;
    --brown-700: #513d2e;

    /* Mauve (Brochure B) */
    --mauve-100: #f0e5e3;
    --mauve-400: #a2847d;
    --mauve-800: #46322e;

    /* Spacing: 4/8 scale */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Font families (self-hosted, see fonts.css) */
    --font-cormorant: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
    --font-inter: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
    --font-system-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Fluid type scale, ratio ≈ 1.25 */
    --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --step-0-5: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --step-1: clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);
    --step-2: clamp(1.625rem, 1.4rem + 1.1vw, 2.375rem);
    --step-3: clamp(2rem, 1.55rem + 2vw, 3.25rem);
    --step-4: clamp(2.375rem, 1.7rem + 3vw, 4.25rem);
    --step-5: clamp(2.75rem, 1.8rem + 3.6vw, 5.25rem);

    --weight-light: 300;
    --weight-book: 350;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.14em;

    --leading-tight: 1.05;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-loose: 1.65;

    /* Durations */
    --duration-0: 0ms;
    --duration-150: 150ms;
    --duration-300: 300ms;
    --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);

    /* ---------- 2. Semantic ---------- */

    /* Surfaces & text (light) */
    --color-bg: var(--white);
    --color-text: var(--ink-900);
    --color-text-muted: var(--ink-600);
    --color-heading: var(--ink-900);
    --color-link: var(--dusk-600);
    --color-link-hover: var(--ink-900);
    --color-rule: var(--brown-700);
    --color-border: var(--ink-100);
    --color-border-strong: var(--ink-300);
    --color-focus: var(--dusk-700);
    --color-selection: var(--dusk-200);

    /* Surfaces (data-surface): white | tint | brand | ink */
    --color-surface-white-bg: var(--white);
    --color-surface-white-text: var(--ink-900);
    --color-surface-white-muted: var(--ink-600);
    --color-surface-white-link: var(--dusk-600);
    --color-surface-white-rule: var(--brown-700);
    --color-surface-white-focus: var(--dusk-700);
    --color-surface-white-button-bg: var(--dusk-800);
    --color-surface-white-button-text: var(--white);
    --color-surface-white-button-hover: var(--dusk-600);

    --color-surface-tint-bg: var(--dusk-50);
    --color-surface-tint-text: var(--ink-900);
    --color-surface-tint-muted: var(--ink-600);
    --color-surface-tint-link: var(--dusk-600);
    --color-surface-tint-rule: var(--brown-700);
    --color-surface-tint-focus: var(--dusk-700);
    --color-surface-tint-button-bg: var(--dusk-800);
    --color-surface-tint-button-text: var(--white);
    --color-surface-tint-button-hover: var(--dusk-600);

    --color-surface-brand-bg: var(--dusk-800);
    --color-surface-brand-text: var(--dusk-50);
    --color-surface-brand-muted: var(--dusk-200);
    --color-surface-brand-link: var(--white);
    --color-surface-brand-rule: var(--bronze-300);
    --color-surface-brand-focus: var(--bronze-300);
    --color-surface-brand-button-bg: var(--white);
    --color-surface-brand-button-text: var(--dusk-900);
    --color-surface-brand-button-hover: var(--bronze-300);

    --color-surface-ink-bg: var(--ink-900);
    --color-surface-ink-text: var(--ink-50);
    --color-surface-ink-muted: var(--ink-300);
    --color-surface-ink-link: var(--dusk-200);
    --color-surface-ink-rule: var(--bronze-300);
    --color-surface-ink-focus: var(--bronze-300);
    --color-surface-ink-button-bg: var(--ink-50);
    --color-surface-ink-button-text: var(--ink-900);
    --color-surface-ink-button-hover: var(--bronze-300);

    /* Default (page-level) button = white surface button */
    --color-button-primary-bg: var(--color-surface-white-button-bg);
    --color-button-primary-text: var(--color-surface-white-button-text);
    --color-button-primary-bg-hover: var(--color-surface-white-button-hover);

    /* Media placeholder (missing image) */
    --color-media-fallback: var(--dusk-100);
    --color-media-fallback-text: var(--dusk-600);

    /* Content placeholders ([to be provided]) */
    --color-placeholder-bg: var(--mauve-100);
    --color-placeholder-text: var(--mauve-800);
    --color-placeholder-border: var(--mauve-400);

    /* Notice (draft banners) */
    --color-notice-bg: var(--mauve-100);
    --color-notice-text: var(--ink-900);
    --color-notice-border: var(--mauve-800);

    /* Overlay / scrim */
    --color-scrim: var(--black-alpha-40);
    --color-shadow-soft: var(--black-alpha-08);

    /* Typography roles */
    --font-display: var(--font-cormorant);
    --font-body: var(--font-inter);
    --font-ui: var(--font-inter);
    --font-mono: var(--font-system-mono);

    --font-size-small: var(--step--1);
    --font-size-body: var(--step-0);
    --font-size-lead: var(--step-0-5);
    --font-size-h4: var(--step-1);
    --font-size-h3: var(--step-2);
    --font-size-h2: var(--step-3);
    --font-size-h1: var(--step-4);
    --font-size-display: var(--step-5);
    --font-size-label: var(--step--1);
    --font-size-statement: var(--step-3);
    --font-size-placeholder: 0.8em;
    --font-size-footer: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);

    --font-weight-body: var(--weight-regular);
    --font-weight-lead: var(--weight-book);
    --font-weight-strong: var(--weight-semibold);
    --font-weight-ui: var(--weight-medium);
    --font-weight-ui-light: var(--weight-light);
    --font-weight-display: var(--weight-light);
    --font-weight-heading: var(--weight-regular);

    --line-height-body: var(--leading-loose);
    --line-height-heading: var(--leading-snug);
    --line-height-lead: var(--leading-normal);
    --line-height-display: var(--leading-tight);
    --line-height-ui: var(--leading-normal);

    --letter-spacing-label: var(--tracking-wider);
    --letter-spacing-ui: var(--tracking-wide);
    --letter-spacing-display: var(--tracking-tight);
    --letter-spacing-heading: var(--tracking-normal);

    /* Layout */
    --measure: 65ch;
    --measure-narrow: 45ch;
    --hero-text-max: 46rem;
    --container-max: 80rem;
    --container-text: 46rem;
    --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
    --space-section: clamp(3.5rem, 2rem + 6vw, 8rem);
    --space-block-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    --space-stack: var(--space-6);
    --space-stack-sm: var(--space-3);
    --space-stack-lg: var(--space-10);
    --card-min: 16rem;
    --item-min: 18rem;
    --viewport-min: 100svh;
    --media-fit-max: 88svh;
    /* Header height is derived from the logo, so the hero can fill exactly the rest of the screen */
    --logo-height-ratio: 0.285;
    --header-logo-height: calc(var(--header-logo-width) * var(--logo-height-ratio));
    --header-height: calc(var(--header-logo-height) + 2 * var(--space-1) + 2 * var(--space-3) + var(--border-hairline));
    --hero-min-height: calc(var(--viewport-min) - var(--header-height));
    --header-offset-hidden: calc((var(--header-height) + var(--space-4)) * -1);
    --header-logo-width: clamp(10rem, 8.5rem + 5vw, 13.5rem);
    --footer-logo-width: 13rem;

    --split-media-min: 26rem;
    --footer-col-min: 14rem;

    /* Component-scaled values (em = scales with the component's own font size) */
    --button-padding-block: 0.75em;
    --button-padding-inline: 1.5em;
    --line-height-button: var(--leading-snug);

    /* Rules & borders */
    --border-hairline: 0.0625rem;
    --border-rule: 0.1875rem;
    --border-burger: 0.09375rem;
    --angle-cross: 45deg;
    --rule-short: 3rem;
    --rule-logo: 0.1875rem;

    /* Radii — the brand is square-cornered */
    --radius-none: 0;
    --radius-button: var(--radius-none);
    --radius-card: var(--radius-none);

    /* Interaction */
    --tap-target: 2.75rem;
    --tap-target-min: 1.5rem;
    --focus-ring-width: 0.1875rem;
    --focus-ring-offset: 0.1875rem;
    --underline-offset: 0.18em;
    --underline-thickness: 0.06em;
    --underline-thickness-hover: 0.12em;
    --duration-ui: var(--duration-150);
    --duration-reveal: var(--duration-300);
    --ease-ui: var(--ease-out);
    --scale-hover: 1.02;
    --shadow-header: 0 var(--space-1) var(--space-6) var(--color-shadow-soft);

    /* Photo treatments (editorial, restrained colour) */
    --filter-muted: saturate(0.55) contrast(1.04) brightness(1.02);
    --filter-mono: grayscale(1) contrast(1.12) brightness(1.04);
    --filter-none: none;

    /* Media */
    --ratio-portrait: 4 / 5;
    --ratio-square: 1 / 1;
    --ratio-landscape: 3 / 2;
    --ratio-wide: 21 / 9;
    --ratio-band-narrow: 4 / 3;
    --ratio-map: 3 / 2;
    --ratio-logo: 280.72 / 80;

    /* Stacking */
    --z-base: 0;
    --z-raised: 1;
    --z-header: 50;
    --z-banner: 100;

    /* Safe areas */
    --safe-bottom: env(safe-area-inset-bottom, 0);
    --safe-left: env(safe-area-inset-left, 0);
    --safe-right: env(safe-area-inset-right, 0);

    color-scheme: light;
  }

/* oklch() primitives for browsers that support it (same colors, wider-gamut math) */
  @supports (color: oklch(0% 0 0)) {
    :root {
      --dusk-50: oklch(97.5% 0.007 268);
      --dusk-100: oklch(94.5% 0.014 268);
      --dusk-200: oklch(86% 0.03 268);
      --dusk-300: oklch(77% 0.045 268);
      --dusk-500: oklch(52% 0.07 268);
      --dusk-600: oklch(44% 0.075 268);
      --dusk-700: oklch(36% 0.07 268);
      --dusk-800: oklch(29% 0.058 268);
      --dusk-900: oklch(23% 0.042 268);
      --bronze-300: oklch(80% 0.06 68);
      --bronze-500: oklch(64% 0.09 60);
      --ink-50: oklch(97% 0.003 60);
      --ink-100: oklch(92% 0.004 60);
      --ink-300: oklch(78% 0.006 30);
      --ink-500: oklch(52% 0.008 0.6);
      --ink-600: oklch(44% 0.008 0.6);
      --ink-700: oklch(36% 0.008 0.6);
      --ink-800: oklch(29% 0.007 0.6);
      --ink-900: oklch(24.42% 0.0064 0.59);
      --ink-950: oklch(19% 0.006 0.6);

      --white: oklch(100% 0 0);
      --black-alpha-40: oklch(0% 0 0 / 0.4);
      --brown-300: oklch(72% 0.045 58.2);
      --brown-700: oklch(37.77% 0.0372 58.2);
      --mauve-100: oklch(93% 0.012 33.3);
      --mauve-400: oklch(63.94% 0.0385 33.35);
      --mauve-800: oklch(34% 0.03 33.3);
    }
  }

  /* Light theme only (client decision, 9 Oct 2026). To bring dark mode back, redefine the
     semantic tokens inside @media (prefers-color-scheme: dark) here; components need no change. */

  /* ---------- Increased contrast ---------- */
  @media (prefers-contrast: more) {
    :root {
      --color-text-muted: var(--color-text);
      --color-border: var(--color-border-strong);
      --color-link: var(--color-text);
      --color-surface-white-muted: var(--color-surface-white-text);
      --color-surface-tint-muted: var(--color-surface-tint-text);
      --color-surface-brand-muted: var(--color-surface-brand-text);
      --color-surface-ink-muted: var(--color-surface-ink-text);
      --underline-thickness: var(--underline-thickness-hover);
    }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-ui: var(--duration-0);
      --duration-reveal: var(--duration-0);
    }
  }
}

/* ===== styles/fonts.css ===== */
/* fonts.css — self-hosted, OFL-licensed (see /fonts/OFL-*.txt). Latin + Latin Extended subsets only.
   Cormorant Garamond (headings) + Inter (body and UI). No Google Fonts CDN (visitor IPs would go to Google). */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  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-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-latin-ext-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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-family: "Inter";
  src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  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-family: "Inter";
  src: url("/fonts/inter-latin-ext-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ===== styles/base.css ===== */
/* base.css — reset, element typography, .prose (Portable Text target). */

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    hanging-punctuation: first last;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    min-block-size: var(--viewport-min);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input,
  button,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  :where(h1, h2, h3, h4) {
    font-family: var(--font-display);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-heading);
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-display);
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
  }
  h2 { font-size: var(--font-size-h2); }
  h3 { font-size: var(--font-size-h3); }
  h4 { font-size: var(--font-size-h4); }

  p,
  li,
  dd,
  figcaption,
  blockquote {
    text-wrap: pretty;
  }

  strong,
  b {
    font-weight: var(--font-weight-strong);
  }

  a {
    color: var(--color-link);
    text-decoration-line: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
    transition: color var(--duration-ui) var(--ease-ui), text-decoration-thickness var(--duration-ui) var(--ease-ui);
  }

  @media (hover: hover) {
    a:hover {
      color: var(--color-link-hover);
      text-decoration-thickness: var(--underline-thickness-hover);
    }
  }

  address {
    font-style: normal;
  }

  :focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }

  ::selection {
    background-color: var(--color-selection);
    color: var(--color-text);
  }

  [hidden] {
    display: none !important;
  }

  /* Skip link */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-4);
    z-index: var(--z-banner);
    padding: var(--space-3) var(--space-4);
    min-block-size: var(--tap-target);
    background-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--letter-spacing-ui);
    text-transform: uppercase;
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    transform: none;
  }

  main:focus {
    outline: none;
  }

  /* --------------------------------------------------------------------
     .prose — styles every element Portable Text can output, by element.
     -------------------------------------------------------------------- */
  .prose {
    max-inline-size: var(--measure);
  }

  .prose > * + * {
    margin-block-start: var(--space-stack);
  }

  .prose :where(h2, h3, h4) {
    margin-block-start: var(--space-stack-lg);
  }

  .prose :where(h2, h3, h4) + * {
    margin-block-start: var(--space-stack-sm);
  }

  .prose h2 { font-size: var(--font-size-h3); }
  .prose h3 { font-size: var(--font-size-h4); }

  .prose h4 {
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
  }

  .prose :where(ul, ol) {
    padding-inline-start: var(--space-6);
  }

  .prose li + li {
    margin-block-start: var(--space-2);
  }

  .prose li::marker {
    color: var(--color-rule);
  }

  .prose blockquote {
    padding-inline-start: var(--space-6);
    border-inline-start: var(--border-rule) solid var(--color-rule);
    font-size: var(--font-size-lead);
    font-style: italic;
  }

  .prose hr {
    inline-size: var(--rule-short);
    border: 0;
    border-block-start: var(--border-rule) solid var(--color-rule);
  }

  .prose :where(code) {
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
  }

  .prose :where(table) {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
  }

  .prose :where(th, td) {
    overflow-wrap: anywhere;
  }

  .prose :where(th, td) {
    padding: var(--space-2) var(--space-3);
    border-block-end: var(--border-hairline) solid var(--color-border);
    text-align: start;
    vertical-align: top;
  }

  .prose :where(th) {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-ui);
  }

  .prose :where(dl) dt {
    font-weight: var(--font-weight-strong);
  }

  .prose :where(dd) + dt {
    margin-block-start: var(--space-3);
  }

  /* Placeholder for content that still has to be supplied */
  .placeholder {
    display: inline;
    padding-inline: var(--space-1);
    background-color: var(--color-placeholder-bg);
    color: var(--color-placeholder-text);
    outline: var(--border-hairline) dashed var(--color-placeholder-border);
    font-family: var(--font-ui);
    font-size: var(--font-size-placeholder);
    font-style: normal;
    letter-spacing: var(--tracking-normal);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* ===== styles/layout.css ===== */
/* layout.css — container, section rhythm, surfaces, grid utilities. */

@layer layout {
  /* main is the query container for full-bleed blocks (hero, split, media-band) that restyle their own root */
  main {
    container-type: inline-size;
  }

  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--container-max));
    margin-inline: auto;
  }

  .container[data-width="text"] {
    inline-size: min(100% - 2 * var(--gutter), var(--container-text));
  }

  .section {
    padding-block: var(--space-section);
    container-type: inline-size;
  }

  .section[data-spacing="tight"] {
    padding-block: calc(var(--space-section) / 2);
  }

  .section[data-spacing="none"] {
    padding-block: 0;
  }

  /* --------------------------------------------------------------
     Surfaces: one attribute sets bg, text, links, rules and focus
     for everything inside. Maps to a `surface` select field in Sanity: white | tint | brand | ink.
     -------------------------------------------------------------- */
  [data-surface] {
    --surface-bg: var(--color-surface-white-bg);
    --surface-text: var(--color-surface-white-text);
    --surface-muted: var(--color-surface-white-muted);
    --surface-link: var(--color-surface-white-link);
    --surface-rule: var(--color-surface-white-rule);
    --surface-focus: var(--color-surface-white-focus);
    --surface-button-bg: var(--color-surface-white-button-bg);
    --surface-button-text: var(--color-surface-white-button-text);
    --surface-button-hover: var(--color-surface-white-button-hover);

    --color-text: var(--surface-text);
    --color-heading: var(--surface-text);
    --color-text-muted: var(--surface-muted);
    --color-link: var(--surface-link);
    --color-link-hover: var(--surface-text);
    --color-rule: var(--surface-rule);
    --color-focus: var(--surface-focus);
    --color-button-primary-bg: var(--surface-button-bg);
    --color-button-primary-text: var(--surface-button-text);
    --color-button-primary-bg-hover: var(--surface-button-hover);

    background-color: var(--surface-bg);
    color: var(--surface-text);
  }

  [data-surface="tint"] {
    --surface-bg: var(--color-surface-tint-bg);
    --surface-text: var(--color-surface-tint-text);
    --surface-muted: var(--color-surface-tint-muted);
    --surface-link: var(--color-surface-tint-link);
    --surface-rule: var(--color-surface-tint-rule);
    --surface-focus: var(--color-surface-tint-focus);
    --surface-button-bg: var(--color-surface-tint-button-bg);
    --surface-button-text: var(--color-surface-tint-button-text);
    --surface-button-hover: var(--color-surface-tint-button-hover);
  }

  [data-surface="brand"] {
    --surface-bg: var(--color-surface-brand-bg);
    --surface-text: var(--color-surface-brand-text);
    --surface-muted: var(--color-surface-brand-muted);
    --surface-link: var(--color-surface-brand-link);
    --surface-rule: var(--color-surface-brand-rule);
    --surface-focus: var(--color-surface-brand-focus);
    --surface-button-bg: var(--color-surface-brand-button-bg);
    --surface-button-text: var(--color-surface-brand-button-text);
    --surface-button-hover: var(--color-surface-brand-button-hover);
  }

  [data-surface="ink"] {
    --surface-bg: var(--color-surface-ink-bg);
    --surface-text: var(--color-surface-ink-text);
    --surface-muted: var(--color-surface-ink-muted);
    --surface-link: var(--color-surface-ink-link);
    --surface-rule: var(--color-surface-ink-rule);
    --surface-focus: var(--color-surface-ink-focus);
    --surface-button-bg: var(--color-surface-ink-button-bg);
    --surface-button-text: var(--color-surface-ink-button-text);
    --surface-button-hover: var(--color-surface-ink-button-hover);
  }

  /* Stack: vertical rhythm for direct children */
  .stack > * + * {
    margin-block-start: var(--space-stack);
  }

  /* Auto grid, zero media queries */
  .auto-grid {
    display: grid;
    gap: var(--space-block-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
  }

  /* Short brand rule (the line under the logo) */
  .rule {
    display: block;
    inline-size: var(--rule-short);
    block-size: var(--border-rule);
    border: 0;
    background-color: var(--color-rule);
  }

  /* Small-caps UI label (the "FONTANA MAGGIORE" voice) */
  .label {
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--letter-spacing-label);
    line-height: var(--line-height-ui);
    text-transform: uppercase;
  }

  .lead {
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-lead);
    line-height: var(--line-height-lead);
    max-inline-size: var(--measure);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: var(--border-hairline);
    block-size: var(--border-hairline);
    padding: 0;
    margin: calc(var(--border-hairline) * -1);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ===== components/breadcrumb/breadcrumb.css ===== */
@layer components {
  .breadcrumb {
    padding-block-start: var(--space-6);
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    letter-spacing: var(--letter-spacing-ui);
    color: var(--color-text-muted);
  }

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    list-style: none;
  }

  .breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-inline: var(--space-2);
  }

  .breadcrumb__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target-min);
    color: var(--color-text-muted);
  }
}

/* ===== components/button/button.css ===== */
@layer components {
  .button {
    --button-bg: var(--color-button-primary-bg);
    --button-text: var(--color-button-primary-text);
    --button-border: var(--color-button-primary-bg);
    --button-bg-hover: var(--color-button-primary-bg-hover);
    --button-text-hover: var(--color-button-primary-text);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--tap-target);
    min-inline-size: var(--tap-target);
    padding: var(--button-padding-block) var(--button-padding-inline);
    border: var(--border-hairline) solid var(--button-border);
    border-radius: var(--radius-button);
    background-color: var(--button-bg);
    color: var(--button-text);
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--letter-spacing-ui);
    line-height: var(--line-height-button);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition:
      background-color var(--duration-ui) var(--ease-ui),
      color var(--duration-ui) var(--ease-ui),
      border-color var(--duration-ui) var(--ease-ui);
  }

  .button[data-variant="secondary"] {
    --button-bg: transparent;
    --button-text: var(--color-text);
    --button-border: currentColor;
    --button-bg-hover: var(--color-text);
    --button-text-hover: var(--color-bg);
  }

  [data-surface] .button[data-variant="secondary"] {
    --button-text-hover: var(--surface-bg);
  }

  .button[data-variant="text"] {
    --button-bg: transparent;
    --button-border: transparent;
    --button-text: var(--color-link);
    --button-bg-hover: transparent;
    --button-text-hover: var(--color-link-hover);

    padding-inline: 0;
    text-decoration-line: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
  }

  @media (hover: hover) {
    .button:hover {
      background-color: var(--button-bg-hover);
      border-color: var(--button-bg-hover);
      color: var(--button-text-hover);
      text-decoration-thickness: var(--underline-thickness-hover);
    }

    .button[data-variant="text"]:hover {
      border-color: transparent;
    }
  }
}

/* ===== components/consent-banner/consent-banner.css ===== */
@layer components {
  .consent-banner {
    position: fixed;
    inset-inline: var(--space-3);
    inset-block-end: calc(var(--space-3) + var(--safe-bottom));
    z-index: var(--z-banner);
    margin-inline: auto;
    max-inline-size: var(--container-text);
    max-block-size: calc(var(--viewport-min) - 2 * var(--space-3));
    overflow-y: auto;
    border: var(--border-hairline) solid var(--color-border-strong);
    border-block-start: var(--border-rule) solid var(--color-rule);
    box-shadow: 0 var(--space-2) var(--space-8) var(--color-scrim);
  }

  .consent-banner__inner {
    position: relative;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
  }

  .consent-banner__title {
    padding-inline-end: var(--tap-target);
  }

  .consent-banner__text {
    font-size: var(--font-size-small);
    line-height: var(--line-height-ui);
  }

  .consent-banner__categories {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    border: 0;
    margin: 0;
  }

  .consent-banner__category {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding-block: var(--space-3);
    border-block-start: var(--border-hairline) solid var(--color-border);
  }

  .consent-banner__check {
    inline-size: var(--space-5);
    block-size: var(--space-5);
    margin-block-start: var(--space-1);
    accent-color: var(--color-button-primary-bg);
  }

  .consent-banner__label {
    display: grid;
    gap: var(--space-1);
    cursor: pointer;
  }

  .consent-banner__check:disabled + .consent-banner__label {
    cursor: default;
  }

  .consent-banner__cat-title {
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--letter-spacing-ui);
  }

  .consent-banner__always {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-ui-light);
  }

  .consent-banner__cat-desc {
    font-size: var(--font-size-small);
    line-height: var(--line-height-ui);
    color: var(--color-text-muted);
  }

  .consent-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .consent-banner__actions .button {
    flex: 1 1 auto;
  }

  .consent-banner__close {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    display: grid;
    place-items: center;
    inline-size: var(--tap-target);
    block-size: var(--tap-target);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-ui);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-display);
  }
}

/* ===== components/contact-card/contact-card.css ===== */
@layer components {
  .contact-card__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12) var(--space-block-gap);
  }

  .contact-card__rule {
    margin-block: var(--space-5) var(--space-6);
  }

  .contact-card__intro {
    max-inline-size: var(--measure-narrow);
    margin-block-end: var(--space-8);
  }

  .contact-card__address {
    display: grid;
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-lead);
    line-height: var(--line-height-lead);
  }

  .contact-card__name {
    font-weight: var(--font-weight-strong);
  }

  .contact-card__list {
    display: grid;
    gap: var(--space-4);
    margin-block-start: var(--space-8);
  }

  .contact-card__row {
    display: grid;
    gap: var(--space-1);
  }

  .contact-card__row dt {
    color: var(--color-text-muted);
  }

  .contact-card__row dd {
    font-size: var(--font-size-lead);
    overflow-wrap: break-word;
  }

  .contact-card__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target);
  }

  .contact-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
  }

  .contact-card__map-link {
    display: block;
    aspect-ratio: var(--ratio-map);
    overflow: hidden;
    border: var(--border-hairline) solid var(--color-border);
  }

  .contact-card__map-link .picture__img {
    transition: transform var(--duration-reveal) var(--ease-ui);
  }

  @media (hover: hover) {
    .contact-card__map-link:hover .picture__img {
      transform: scale(var(--scale-hover));
    }
  }

  .contact-card__map-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-5);
    margin-block-start: var(--space-3);
  }

  .contact-card__map-text {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target);
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--letter-spacing-ui);
  }

  .contact-card__credit {
    flex-basis: 100%;
    font-family: var(--font-ui);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
  }

  .contact-card__credit a {
    color: inherit;
  }

  @container (min-width: 56em) {
    .contact-card__grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: start;
    }
  }
}

/* ===== components/cta/cta.css ===== */
@layer components {
  .cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8) var(--space-block-gap);
    align-items: end;
  }

  .cta__title {
    max-inline-size: var(--measure-narrow);
  }

  .cta__body {
    margin-block-start: var(--space-4);
    max-inline-size: var(--measure-narrow);
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-lead);
    line-height: var(--line-height-lead);
    color: var(--color-text-muted);
  }

  .cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  @container (min-width: 56em) {
    .cta__inner {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .cta__actions {
      justify-content: end;
    }
  }
}

/* ===== components/feature-grid/feature-grid.css ===== */
@layer components {
  .feature-grid__header {
    max-inline-size: var(--measure);
    margin-block-end: var(--space-12);
  }

  .feature-grid__eyebrow {
    margin-block-end: var(--space-3);
    color: var(--color-text-muted);
  }

  .feature-grid__intro {
    margin-block-start: var(--space-4);
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-lead);
    line-height: var(--line-height-lead);
  }

  .feature-grid__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
    column-gap: var(--space-block-gap);
    row-gap: 0;
    padding: 0;
    list-style: none;
    counter-reset: feature;
  }

  .feature-grid__item {
    position: relative;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-3);
    align-content: start;
    padding-block: var(--space-5) var(--space-10);
    border-block-start: var(--border-rule) solid var(--color-rule);
    counter-increment: feature;
  }

  .feature-grid__item-title {
    font-size: var(--font-size-h3);
  }

  .feature-grid__item-title::before {
    content: counter(feature, decimal-leading-zero);
    display: block;
    margin-block-end: var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-muted);
  }

  .feature-grid__link {
    color: inherit;
    text-decoration: none;
  }

  /* Whole card is clickable; the title link is the only focusable element */
  .feature-grid__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--z-raised);
  }

  .feature-grid__link:focus-visible {
    outline: none;
  }

  .feature-grid__item:has(.feature-grid__link:focus-visible) {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }

  .feature-grid__text {
    color: var(--color-text);
    max-inline-size: var(--measure-narrow);
  }

  .feature-grid__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: end;
    min-block-size: var(--tap-target);
    color: var(--color-text);
  }

  .feature-grid__arrow {
    transition: transform var(--duration-ui) var(--ease-ui);
  }

  @media (hover: hover) {
    .feature-grid__item:has(.feature-grid__link):hover .feature-grid__arrow {
      transform: translateX(var(--space-1));
    }

    .feature-grid__item:has(.feature-grid__link):hover .feature-grid__item-title {
      text-decoration-line: underline;
      text-decoration-thickness: var(--underline-thickness);
      text-underline-offset: var(--underline-offset);
    }
  }
}

/* ===== components/hero/hero.css ===== */
@layer components {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding-block: var(--space-section);
    padding-inline: var(--gutter);
  }

  .hero__text {
    max-inline-size: var(--hero-text-max);
  }

  .hero__eyebrow {
    margin-block-end: var(--space-6);
    color: var(--color-text-muted);
  }

  .hero__title {
    font-size: var(--font-size-display);
    line-height: var(--line-height-display);
  }

  .hero__rule {
    margin-block: var(--space-6) var(--space-5);
  }

  .hero__subtitle {
    color: var(--color-text);
  }

  .hero__intro {
    margin-block-start: var(--space-5);
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-lead);
    line-height: var(--line-height-lead);
    color: var(--color-text);
    max-inline-size: var(--measure-narrow);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
  }

  .hero__media {
    aspect-ratio: var(--ratio-portrait);
    overflow: hidden;
  }

  @container (min-width: 48em) {
    .hero:has(.hero__media) {
      grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
      min-block-size: var(--hero-min-height);
    }

    .hero__content {
      padding-inline-start: max(var(--gutter), calc((100cqi - var(--container-max)) / 2));
      padding-inline-end: var(--space-block-gap);
    }

    .hero__media {
      position: relative;
      aspect-ratio: auto;
    }

    .hero__media > .picture {
      position: absolute;
      inset: 0;
    }
  }

  @container (min-width: 72em) {
    .hero:has(.hero__media) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
}

/* ===== components/item-list/item-list.css ===== */
@layer components {
  .item-list__header {
    max-inline-size: var(--measure);
    margin-block-end: var(--space-10);
  }

  .item-list__eyebrow {
    margin-block-end: var(--space-3);
    color: var(--color-text-muted);
  }

  .item-list__intro {
    margin-block-start: var(--space-4);
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-lead);
    line-height: var(--line-height-lead);
  }

  .item-list__list {
    padding: 0;
    list-style: none;
  }

  /* grid: professions etc. */
  .item-list[data-variant="grid"] .item-list__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--item-min), 100%), 1fr));
    gap: var(--space-6) var(--space-block-gap);
  }

  .item-list[data-variant="grid"] .item-list__item {
    display: grid;
    gap: var(--space-2);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-rule);
  }

  .item-list[data-variant="grid"] .item-list__item-title {
    font-family: var(--font-display);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
  }

  .item-list__text {
    color: var(--color-text-muted);
  }

  .item-list__link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target-min);
    font-size: var(--font-size-small);
    overflow-wrap: anywhere;
  }

  /* inline: large display words that wrap (cities) */
  .item-list[data-variant="inline"] .item-list__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-6);
  }

  .item-list[data-variant="inline"] .item-list__item {
    display: inline-flex;
    flex-direction: column;
  }

  .item-list[data-variant="inline"] .item-list__item-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-display);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-heading);
  }

  .item-list[data-variant="inline"] .item-list__text {
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    letter-spacing: var(--letter-spacing-ui);
  }
}

/* ===== components/lang-switch/lang-switch.css ===== */
@layer components {
  .lang-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    list-style: none;
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--letter-spacing-ui);
  }

  .lang-switch__item + .lang-switch__item::before {
    content: "/";
    margin-inline-end: var(--space-1);
    color: var(--color-text-muted);
  }

  .lang-switch__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target);
    padding-inline: var(--space-1);
    color: var(--color-text);
    text-decoration: none;
  }

  span.lang-switch__link {
    color: var(--color-text-muted);
  }

  a.lang-switch__link {
    text-decoration-line: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
  }
}

/* ===== components/logo/logo.css ===== */
@layer components {
  .logo {
    --logo-color: currentColor;
    --logo-rule-color: var(--color-rule);

    display: block;
    inline-size: var(--logo-width);
    block-size: auto;
    aspect-ratio: var(--ratio-logo);
    fill: var(--logo-color);
  }

  .logo__rule {
    fill: var(--logo-rule-color);
  }
}

/* ===== components/media-band/media-band.css ===== */
@layer components {
  .media-band__frame {
    aspect-ratio: var(--ratio-band-narrow);
    overflow: hidden;
  }

  /* fit: whole photo, never cropped; capped to the viewport height, centered */
  .media-band[data-variant="fit"] .media-band__frame {
    display: grid;
    place-items: center;
    aspect-ratio: auto;
    padding-inline: var(--gutter);
  }

  .media-band[data-variant="fit"] .picture {
    inline-size: auto;
    block-size: auto;
    background-color: transparent;
  }

  .media-band[data-variant="fit"] .picture__img {
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: var(--media-fit-max);
    object-fit: contain;
  }

  .media-band[data-variant="fit"] .media-band__caption {
    text-align: center;
  }

  .media-band__caption {
    padding-block: var(--space-3);
    border-block-end: var(--border-hairline) solid var(--color-border);
    color: var(--color-text-muted);
  }

  .media-band__caption > .container {
    display: block;
  }

  @container (min-width: 48em) {
    .media-band:not([data-variant="fit"]) .media-band__frame {
      aspect-ratio: var(--ratio-wide);
    }

    .media-band[data-variant="tall"] .media-band__frame {
      aspect-ratio: var(--ratio-landscape);
    }
  }
}

/* ===== components/notice/notice.css ===== */
@layer components {
  .notice {
    padding-block: var(--space-6) 0;
  }

  .notice__box {
    padding: var(--space-4) var(--space-5);
    border-inline-start: var(--border-rule) solid var(--color-notice-border);
    background-color: var(--color-notice-bg);
    color: var(--color-notice-text);
    max-inline-size: var(--measure);
  }

  .notice__text {
    margin-block-start: var(--space-1);
    font-size: var(--font-size-small);
    line-height: var(--line-height-ui);
  }
}

/* ===== components/page-header/page-header.css ===== */
@layer components {
  .page-header {
    padding-block: var(--space-12) var(--space-8);
  }

  .page-header__eyebrow {
    margin-block-end: var(--space-4);
    color: var(--color-text-muted);
  }

  .page-header__title {
    font-size: var(--font-size-h1);
    max-inline-size: var(--measure-narrow);
  }

  .page-header__rule {
    margin-block: var(--space-6);
  }

  .page-header__lead {
    color: var(--color-text);
  }
}

/* ===== components/picture/picture.css ===== */
@layer components {
  .picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background-color: var(--color-media-fallback);
  }

  .picture__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  .picture__img[data-focus="top"] { object-position: center top; }
  .picture__img[data-focus="bottom"] { object-position: center bottom; }
  .picture__img[data-focus="left"] { object-position: left center; }
  .picture__img[data-focus="right"] { object-position: right center; }

  .picture__img[data-tone="muted"] { filter: var(--filter-muted); }
  .picture__img[data-tone="mono"] { filter: var(--filter-mono); }

  /* Shared fallback when an editor leaves the image empty */
  .media-fallback {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: var(--space-24);
    background-color: var(--color-media-fallback);
  }
}

/* ===== components/referral/referral.css ===== */
@layer components {
  .referral__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8) var(--space-block-gap);
  }

  .referral__eyebrow {
    margin-block-end: var(--space-3);
  }

  .referral__rule {
    margin-block: var(--space-5);
  }

  .referral__tagline {
    font-family: var(--font-display);
    font-weight: var(--font-weight-display);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-heading);
    max-inline-size: var(--measure-narrow);
  }

  @container (min-width: 60em) {
    .referral__inner {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
  }
}

/* ===== components/rich-text/rich-text.css ===== */
@layer components {
  .rich-text__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8) var(--space-block-gap);
  }

  .rich-text__eyebrow {
    margin-block-end: var(--space-3);
    color: var(--color-text-muted);
  }

  .rich-text__rule {
    margin-block-start: var(--space-5);
  }

  .rich-text__body {
    font-size: var(--font-size-body);
  }

  .rich-text__body > p:first-child {
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-lead);
    line-height: var(--line-height-lead);
  }

  .rich-text[data-layout="plain"] .rich-text__body > p:first-child {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  @container (min-width: 60em) {
    .rich-text[data-layout="aside"] .rich-text__inner:has(.rich-text__header) {
      grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    }
  }
}

/* ===== components/site-footer/site-footer.css ===== */
@layer components {
  .site-footer {
    --logo-width: var(--footer-logo-width);

    padding-block: var(--space-16) var(--space-8);
    padding-block-end: calc(var(--space-8) + var(--safe-bottom));
    font-size: var(--font-size-footer);
    line-height: var(--line-height-ui);
    container-type: inline-size;
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--footer-col-min), 100%), 1fr));
    gap: var(--space-10) var(--space-block-gap);
  }

  .site-footer__logo {
    display: inline-block;
    color: var(--color-text);
  }

  .site-footer__heading {
    margin-block-end: var(--space-4);
    color: var(--color-text-muted);
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
  }

  .site-footer__address {
    margin-block-end: var(--space-3);
  }

  .site-footer__list {
    display: grid;
    overflow-wrap: break-word;
    gap: var(--space-1);
    padding: 0;
    list-style: none;
  }

  .site-footer__list a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target-min);
  }

  .site-footer__link {
    color: var(--color-text);
  }

  .site-footer__button {
    min-block-size: var(--tap-target-min);
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    text-decoration-line: underline;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
  }

}

/* ===== components/site-header/site-header.css ===== */
@layer components {
  .site-header {
    --logo-width: var(--header-logo-width);
    --burger-width: var(--space-6);
    --burger-line: var(--border-burger);
    --burger-gap: var(--space-2);
    --burger-angle: var(--angle-cross);

    /* In normal flow at the top, so it scrolls away with the page like any other content.
       Sticky with a negative offset = parked just above the viewport; scripts/menu.js sets
       data-scroll="shown" only when the user scrolls back up, and it slides down. */
    position: sticky;
    inset-block-start: var(--header-offset-hidden);
    z-index: var(--z-header);
    background-color: var(--color-bg);
    padding-block: var(--space-3);
    container-type: inline-size;
    transition: inset-block-start var(--duration-reveal) var(--ease-ui), box-shadow var(--duration-reveal) var(--ease-ui);
  }

  .site-header[data-scroll="shown"] {
    inset-block-start: 0;
    box-shadow: var(--shadow-header);
  }

  /* ---------- Mobile (default) ---------- */
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand toggle"
      "menu  menu";
    align-items: center;
    column-gap: var(--space-6);
  }

  .site-header__brand {
    grid-area: brand;
    justify-self: start;
    display: block;
    color: var(--color-text);
    padding-block: var(--space-1);
  }

  .site-header__toggle {
    grid-area: toggle;
    display: grid;
    place-items: center;
    inline-size: var(--tap-target);
    block-size: var(--tap-target);
    margin-inline-end: calc(var(--tap-target) / -4);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
  }

  /* Three lines → X */
  .site-header__burger,
  .site-header__burger::before,
  .site-header__burger::after {
    display: block;
    inline-size: var(--burger-width);
    block-size: var(--burger-line);
    background-color: currentColor;
    transition: transform var(--duration-ui) var(--ease-ui), background-color var(--duration-ui) var(--ease-ui);
  }

  .site-header__burger {
    position: relative;
  }

  .site-header__burger::before,
  .site-header__burger::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
  }

  .site-header__burger::before { transform: translateY(calc(var(--burger-gap) * -1)); }
  .site-header__burger::after { transform: translateY(var(--burger-gap)); }

  .site-header[data-menu="open"] .site-header__burger { background-color: transparent; }
  .site-header[data-menu="open"] .site-header__burger::before { transform: rotate(var(--burger-angle)); }
  .site-header[data-menu="open"] .site-header__burger::after { transform: rotate(calc(var(--burger-angle) * -1)); }

  .site-header__menu {
    grid-area: menu;
    padding-block: var(--space-4) var(--space-2);
  }

  /* JS present and menu closed: collapse (no JS = menu always visible) */
  .site-header[data-menu="closed"] .site-header__menu {
    display: none;
  }

  .site-header__list {
    display: grid;
    padding: 0;
    list-style: none;
  }

  .site-header__list li + li {
    border-block-start: var(--border-hairline) solid var(--color-border);
  }

  .site-header__link {
    position: relative;
    display: flex;
    align-items: center;
    min-block-size: var(--tap-target);
    padding-block: var(--space-2);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--letter-spacing-label);
    text-decoration: none;
    text-transform: uppercase;
  }

  .site-header__link[aria-current="page"] {
    color: var(--color-link);
  }

  .site-header__lang .lang-switch {
    margin-inline-start: calc(var(--space-1) * -1);
  }

  .site-header__lang {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: var(--border-hairline) solid var(--color-border);
  }

  /* ---------- Desktop ---------- */
  @container (min-width: 56em) {
    .site-header__inner {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "brand menu";
    }

    .site-header__toggle {
      display: none;
    }

    .site-header__menu,
    .site-header[data-menu="closed"] .site-header__menu {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--space-6);
      padding: 0;
    }

    .site-header__list {
      display: flex;
      gap: 0 var(--space-5);
    }

    .site-header__list li + li {
      border: 0;
    }

    .site-header__link {
      display: inline-flex;
      padding-block: 0;
    }

    .site-header__link[aria-current="page"] {
      color: var(--color-text);
    }

    .site-header__link::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: var(--space-2);
      block-size: var(--border-rule);
      background-color: var(--color-rule);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--duration-ui) var(--ease-ui);
    }

    .site-header__link[aria-current="page"]::after {
      transform: scaleX(1);
    }

    .site-header__lang {
      margin: 0;
      padding: 0;
      border: 0;
    }

    .site-header__lang .lang-switch {
      margin: 0;
    }
  }

  @media (hover: hover) {
    .site-header__link:hover::after {
      transform: scaleX(1);
    }
  }
}

/* ===== components/split/split.css ===== */
@layer components {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .split__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding-block: var(--space-section);
    padding-inline: var(--gutter);
  }

  .split__text {
    max-inline-size: var(--measure);
  }

  .split__eyebrow {
    margin-block-end: var(--space-4);
    color: var(--color-text-muted);
  }

  .split__rule {
    margin-block: var(--space-5) var(--space-6);
  }

  .split__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
  }

  .split__media {
    position: relative;
    aspect-ratio: var(--ratio-landscape);
    overflow: hidden;
  }

  .split__caption {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface-white-bg);
    color: var(--color-surface-white-text);
  }

  /* No image: text panel spans the full width */
  .split:not(:has(.split__media)) .split__text {
    inline-size: 100%;
    margin-inline: auto;
  }

  @container (min-width: 48em) {
    .split:has(.split__media) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .split__media {
      aspect-ratio: auto;
      min-block-size: var(--split-media-min);
    }

    .split__media > .picture {
      position: absolute;
      inset: 0;
    }

    .split[data-variant="image-left"] .split__media {
      order: -1;
    }

    .split:has(.split__media):not([data-variant="image-left"]) .split__content {
      padding-inline-start: max(var(--gutter), calc((100cqi - var(--container-max)) / 2));
    }

    .split[data-variant="image-left"] .split__content {
      padding-inline-end: max(var(--gutter), calc((100cqi - var(--container-max)) / 2));
    }
  }
}