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

    /* Dusk (brand), hue 268 */
    --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 (warm accent, sunset) */
    --bronze-300: oklch(80% 0.06 68);
    --bronze-500: oklch(64% 0.09 60);

    /* Ink (warm near-black), hue 0.6 */
    --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 (logo rule) */
    --brown-300: oklch(72% 0.045 58.2);
    --brown-700: oklch(37.77% 0.0372 58.2);

    /* Mauve (Brochure B) */
    --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);

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

    /* 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: 13rem;
    --viewport-min: 100svh;
    --media-fit-max: 88svh;
    --hero-min-height: min(88svh, 56rem);
    --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;
    --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;

    /* 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: 284 / 80;

    /* Stacking */
    --z-base: 0;
    --z-raised: 1;
    --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 dark;
  }

  /* ---------- Dark mode: semantic layer only ---------- */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: var(--ink-950);
      --color-text: var(--ink-50);
      --color-text-muted: var(--ink-300);
      --color-heading: var(--ink-50);
      --color-link: var(--dusk-200);
      --color-link-hover: var(--white);
      --color-rule: var(--bronze-300);
      --color-border: var(--ink-800);
      --color-border-strong: var(--ink-600);
      --color-focus: var(--bronze-300);
      --color-selection: var(--dusk-700);

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

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

      --color-surface-brand-bg: var(--dusk-800);
      --color-surface-ink-bg: var(--dusk-900);
      --color-surface-ink-muted: var(--dusk-200);

      --color-media-fallback: var(--ink-800);
      --color-media-fallback-text: var(--dusk-200);

      --color-placeholder-bg: var(--mauve-800);
      --color-placeholder-text: var(--mauve-100);
      --color-placeholder-border: var(--mauve-400);

      --color-notice-bg: var(--mauve-800);
      --color-notice-text: var(--ink-50);
      --color-notice-border: var(--mauve-400);
    }
  }

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

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

    border-block-end: var(--border-hairline) solid var(--color-border);
    background-color: var(--color-bg);
    padding-block: var(--space-3);
    container-type: inline-size;
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "brand lang"
      "nav   nav";
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-6);
  }

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

  .site-header__nav {
    grid-area: nav;
  }

  .site-header__lang {
    grid-area: lang;
    justify-self: end;
  }

  .site-header__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    padding: 0;
    list-style: none;
  }

  .site-header__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target);
    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::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);
  }

  @media (hover: hover) {
    .site-header__link:hover {
      color: var(--color-text);
    }

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

  @container (min-width: 56em) {
    .site-header__inner {
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "brand nav lang";
    }

    .site-header__nav {
      justify-self: end;
    }
  }
}

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