/* ===== 00-reset.css ===== */
/* VESPRO · reset — layer order is declared here, once. */
@layer reset, tokens, base, layout, components, pages, utilities;

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

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 2;
  }

  body { min-height: 100svh; }

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

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

  button { background: none; border: 0; padding: 0; cursor: pointer; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; overflow-wrap: break-word; }

  p, li, dd, dt, figcaption, blockquote { overflow-wrap: break-word; }

  a { color: inherit; }

  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  legend { padding: 0; }

  dialog { border: 0; padding: 0; background: none; max-inline-size: unset; max-block-size: unset; }

  :target { scroll-margin-block-start: 6rem; }
}

/* ===== 10-tokens.css ===== */
/* VESPRO · tokens — the single source of the design system.
   Lapis & gold on ivory — carta by day, lapis night by candle.
   Palette is authoritative: tools/check.mjs parses this file and fails
   the build if any contrast rule from the spec breaks. */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* -------- palette (Giorno, Sera) -------- */
    --carta:        light-dark(oklch(96.5% 0.010 92),  oklch(20.5% 0.045 265));
    --carta-2:      light-dark(oklch(93.5% 0.014 92),  oklch(24.5% 0.05 265));
    --inchiostro:   light-dark(oklch(23.5% 0.035 265), oklch(93% 0.012 90));
    --inchiostro-2: light-dark(oklch(41% 0.045 264),   oklch(76% 0.03 265));
    --lapis:        light-dark(oklch(38% 0.17 264),    oklch(79% 0.085 262));
    --oro:          light-dark(oklch(60% 0.125 84),    oklch(81% 0.125 87));
    --nebbia:       light-dark(oklch(88.5% 0.02 262),  oklch(35% 0.055 265));
    --vespro:       oklch(30% 0.09 265);
    /* accent for small labels: lapis by day, gold by candlelight */
    --accent:       light-dark(oklch(38% 0.17 264),    oklch(81% 0.125 87));
    /* the Green Star keeps its green — nothing else does */
    --verde:        light-dark(oklch(45% 0.09 150),    oklch(76% 0.10 150));
    /* form errors: dried-blood red on paper, ember on lapis */
    --errore:       light-dark(oklch(44% 0.13 30),     oklch(79% 0.11 35));

    /* derived */
    --rule-c: color-mix(in oklab, var(--inchiostro) 16%, transparent);
    --rule: 1px solid var(--rule-c);
    --scrim: color-mix(in oklab, var(--carta) 88%, transparent);
    --halo: light-dark(0 0 0 0 transparent, 0 0 1.5rem oklch(81% 0.125 87 / 0.25));
    --ink-soft: color-mix(in oklab, var(--inchiostro) 72%, var(--carta));

    /* -------- type -------- */
    --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --f-text: "Newsreader", "newsreader-fb", Georgia, "Times New Roman", serif;

    --fs-2xs: 0.72rem;
    --fs-xs: 0.78rem;
    --fs-s: 0.9375rem;
    --fs-m: 1.0625rem;
    --fs-l: clamp(1.15rem, 1.05rem + 0.5vi, 1.35rem);
    --fs-xl: clamp(1.4rem, 1.2rem + 1vi, 1.9rem);
    --fs-2xl: clamp(1.9rem, 1.5rem + 2vi, 2.9rem);
    --fs-3xl: clamp(2.4rem, 1.7rem + 3.4vi, 4rem);
    --fs-display: clamp(2.6rem, 1.2rem + 5.6vi, 6.5rem);

    --lh-tight: 1.06;
    --lh-heading: 1.18;
    --lh-body: 1.72;

    --track-caps: 0.16em;

    /* -------- space -------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: clamp(1.25rem, 1rem + 1vi, 1.75rem);
    --sp-6: clamp(1.75rem, 1.3rem + 2vi, 2.75rem);
    --sp-7: clamp(2.5rem, 1.6rem + 4vi, 4.5rem);
    --sp-8: clamp(3.5rem, 2rem + 6.5vi, 7rem);
    --sp-9: clamp(5rem, 2.5rem + 10vi, 10.5rem);

    /* -------- layout -------- */
    --measure: 68ch;
    --wrap-max: 75rem;
    --wrap-pad: clamp(1.25rem, 4vi, 3rem);
    --header-h: 4.25rem;

    /* -------- motion: slow cinema -------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 150ms;
    --dur-2: 300ms;
    --dur-3: 600ms;
    --dur-4: 1200ms;
    --dur-scene: 2200ms;
  }

  [data-theme="giorno"] { color-scheme: light; }
  [data-theme="sera"] { color-scheme: dark; }
}

/* ===== 20-base.css ===== */
/* VESPRO · base — faces, elements, defaults. */
@layer base {
  /* -------- faces -------- */
  @font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-var-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-var.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-var-italic.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
  }
  /* metric-adjusted local fallback to soften swap shift */
  @font-face {
    font-family: "newsreader-fb";
    src: local("Georgia"), local("Times New Roman");
    size-adjust: 96%;
    font-display: swap;
  }

  html {
    background: var(--carta);
    accent-color: var(--lapis);
    scrollbar-color: color-mix(in oklab, var(--inchiostro) 35%, transparent) transparent;
  }

  body {
    font-family: var(--f-text);
    font-size: var(--fs-m);
    line-height: var(--lh-body);
    font-weight: 380;
    color: var(--inchiostro);
    background: var(--carta);
    font-optical-sizing: auto;
    font-variant-numeric: oldstyle-nums proportional-nums;
    text-rendering: optimizeLegibility;
  }

  /* paper grain — one fixed translucent layer over everything */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.32 0 0 0 0 0.28 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
  }

  ::selection {
    background: color-mix(in oklab, var(--oro) 32%, transparent);
  }

  h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 440;
    line-height: var(--lh-heading);
    text-wrap: balance;
    font-variant-numeric: lining-nums;
  }

  a {
    color: var(--lapis);
    text-decoration: underline;
    text-decoration-thickness: 0.055em;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 38%, transparent);
    transition: text-decoration-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  a:hover { text-decoration-color: currentColor; }

  :focus-visible {
    outline: 2px solid var(--oro);
    outline-offset: 3px;
    border-radius: 1px;
  }

  hr {
    border: 0;
    block-size: 1px;
    background: var(--rule-c);
    margin-block: var(--sp-7);
  }

  strong { font-weight: 620; }
  em { font-style: italic; }

  i[lang="it"], .it {
    font-style: italic;
    font-variation-settings: normal;
  }

  blockquote {
    font-family: var(--f-display);
    font-style: italic;
    font-size: var(--fs-xl);
    line-height: 1.4;
    font-weight: 380;
    text-wrap: pretty;
  }

  code, pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }

  table { border-collapse: collapse; inline-size: 100%; }
  th, td {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border-block-end: var(--rule);
    font-variant-numeric: tabular-nums lining-nums;
  }
  th {
    font-family: var(--f-display);
    font-size: var(--fs-xs);
    font-weight: 560;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--inchiostro-2);
  }

  /* -------- MPA view transitions: through the fog -------- */
  @view-transition { navigation: auto; }

  ::view-transition-old(root) {
    animation: vt-out var(--dur-2) var(--ease-out) both;
  }
  ::view-transition-new(root) {
    animation: vt-in var(--dur-3) var(--ease-out) both;
  }
  @keyframes vt-out { to { opacity: 0; filter: blur(8px); } }
  @keyframes vt-in { from { opacity: 0; filter: blur(8px); } }

  .wordmark { view-transition-name: wordmark; }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
  }
}

/* ===== 30-layout.css ===== */
/* VESPRO · layout — wraps, sections, prose with marginalia. */
@layer layout {
  .wrap {
    inline-size: min(100% - 2 * var(--wrap-pad), var(--wrap-max));
    margin-inline: auto;
  }
  .wrap--narrow { max-inline-size: 56rem; }

  .section { padding-block: var(--sp-8); }
  .section--tight { padding-block: var(--sp-7); }
  .section--alt { background: var(--carta-2); }

  .stack > * + * { margin-block-start: var(--sp-5); }
  .stack--s > * + * { margin-block-start: var(--sp-3); }
  .stack--l > * + * { margin-block-start: var(--sp-7); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    align-items: center;
  }

  /* Longform: a manuscript page. Single column; from 82rem the outer
     margin opens and .note--margin sidenotes move into it. */
  .prose {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-5);
  }
  .prose > * {
    grid-column: 1;
    max-inline-size: var(--measure);
  }
  .prose p { text-wrap: pretty; }

  @media (min-width: 82rem) {
    .prose {
      grid-template-columns: minmax(0, var(--measure)) var(--sp-7) 13rem;
    }
    .prose > * { grid-column: 1; }
    .prose > .note--margin {
      grid-column: 3;
      align-self: start;
      max-inline-size: none;
    }
  }

  .full-bleed {
    inline-size: 100vi;
    margin-inline-start: calc(50% - 50vi);
  }

  .frame {
    border: var(--rule);
    padding: var(--sp-6);
  }

  main { display: block; }

  /* page offset under the fixed-position header */
  .page-top-pad { padding-block-start: calc(var(--header-h) + var(--sp-7)); }
}

@layer layout {
  /* A zone that keeps its own night: light-dark() re-resolves inside. */
  .zone-dark {
    color-scheme: dark;
    background: var(--carta);
    color: var(--inchiostro);
  }
}

/* ===== 40-components.css ===== */
/* VESPRO · components — chrome, buttons, manuscript apparatus. */
@layer components {
  /* -------- skip link -------- */
  .skip {
    position: fixed;
    inset-block-start: var(--sp-3);
    inset-inline-start: var(--sp-3);
    z-index: 200;
    translate: 0 calc(-100% - var(--sp-5));
    background: var(--carta);
    color: var(--inchiostro);
    border: 1px solid var(--oro);
    padding: var(--sp-3) var(--sp-5);
    font-family: var(--f-display);
    font-size: var(--fs-s);
    text-decoration: none;
    transition: translate var(--dur-2) var(--ease-out);
  }
  .skip:focus-visible { translate: 0 0; }

  /* -------- header -------- */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    block-size: var(--header-h);
    display: flex;
    align-items: stretch;
    /* night glass in both schemes: the header is the film's title bar,
       legible over golden hour, ivory paper and lapis night alike */
    color-scheme: dark;
    color: var(--inchiostro);
    background: color-mix(in oklab, oklch(20.5% 0.045 265) 72%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-block-end: 1px solid transparent;
  }
  /* the hairline settles in as the page starts to scroll */
  @media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html.js .site-header {
      animation: header-settle linear both;
      animation-timeline: scroll();
      animation-range: 0 120px;
    }
    @keyframes header-settle {
      from { border-block-end-color: transparent; }
      to { border-block-end-color: var(--rule-c); }
    }
  }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header { border-block-end-color: var(--rule-c); }
  }
  html.no-js .site-header, html:not(.js):not(.no-js) .site-header { border-block-end-color: var(--rule-c); }

  .site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    inline-size: min(100% - 2 * var(--wrap-pad), var(--wrap-max));
    margin-inline: auto;
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    color: var(--inchiostro);
    margin-inline-end: auto;
  }
  .wordmark svg { block-size: 1.55rem; inline-size: auto; color: var(--accent); }
  .wordmark__text {
    font-family: var(--f-display);
    font-size: 1.02rem;
    font-weight: 560;
    letter-spacing: 0.3em;
    margin-inline-end: -0.3em; /* optical: swallow the last tracking gap */
  }

  .site-nav { display: contents; }
  .site-nav__list {
    display: none;
    align-items: center;
    gap: var(--sp-5);
  }
  .site-nav__list a {
    font-family: var(--f-display);
    font-size: var(--fs-xs);
    font-weight: 540;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--inchiostro-2);
    text-decoration: none;
    position: relative;
    padding-block: var(--sp-2);
  }
  .site-nav__list a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 1px;
    background: var(--oro);
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--dur-2) var(--ease-out);
  }
  .site-nav__list a:hover { color: var(--inchiostro); }
  .site-nav__list a:hover::after { scale: 1 1; }
  .site-nav__list a[aria-current="page"] { color: var(--inchiostro); }
  .site-nav__list a[aria-current="page"]::after { scale: 1 1; }

  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: var(--inchiostro);
  }
  .nav-toggle svg { inline-size: 1.4rem; block-size: auto; }
  .nav-toggle .icon-close { display: none; }

  .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: var(--inchiostro-2);
    transition: color var(--dur-1) var(--ease-out);
  }
  .theme-toggle:hover { color: var(--oro); }
  .theme-toggle svg { inline-size: 1.25rem; block-size: auto; }
  .theme-toggle .icon-giorno, .theme-toggle .icon-sera { display: none; }
  [data-scheme="sera"] .theme-toggle .icon-giorno { display: block; }
  [data-scheme="giorno"] .theme-toggle .icon-sera { display: block; }
  html.no-js .theme-toggle { display: none; }

  /* mobile: nav opens as a fog panel below the bar */
  @media (max-width: 59.99rem) {
    html.js .nav-toggle { display: inline-flex; }
    html.js .site-nav.is-open .nav-toggle .icon-menu { display: none; }
    html.js .site-nav.is-open .nav-toggle .icon-close { display: block; }
    html.js .site-nav__list {
      position: fixed;
      inset-block-start: var(--header-h);
      inset-inline: 0;
      block-size: calc(100svh - var(--header-h));
      flex-direction: column;
      justify-content: center;
      gap: var(--sp-6);
      background: color-mix(in oklab, var(--carta) 94%, transparent);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
    html.js .site-nav.is-open .site-nav__list { display: flex; }
    html.js .site-nav.is-open .site-nav__list a { font-size: var(--fs-l); letter-spacing: 0.18em; }
    /* no-js: the list simply flows under the bar as a second row */
    html.no-js .site-nav__list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-3) var(--sp-4);
      position: static;
    }
    html.no-js .site-header { position: static; block-size: auto; flex-wrap: wrap; padding-block: var(--sp-3); }
    html.no-js .site-header__bar { flex-wrap: wrap; }
  }
  @media (min-width: 60rem) {
    .site-nav__list { display: flex; }
  }

  /* -------- buttons -------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: var(--f-display);
    font-size: var(--fs-s);
    font-weight: 540;
    letter-spacing: 0.03em;
    padding: 0.8em 1.6em;
    border: 1px solid transparent;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
      border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
      translate var(--dur-1) var(--ease-out);
  }
  .btn:active { translate: 0 1px; }

  .btn--primary {
    background: var(--inchiostro);
    color: var(--carta);
  }
  .btn--primary:hover {
    border-color: var(--oro);
    box-shadow: var(--halo);
  }

  .btn--ghost {
    border-color: var(--rule-c);
    color: var(--inchiostro);
  }
  .btn--ghost:hover { border-color: var(--oro); box-shadow: var(--halo); }

  .btn--brass {
    background: var(--oro);
    color: light-dark(oklch(96.5% 0.010 92), oklch(20.5% 0.045 265));
  }
  .btn--brass:hover { box-shadow: var(--halo); border-color: color-mix(in oklab, var(--inchiostro) 30%, transparent); }

  .btn--s { font-size: var(--fs-xs); padding: 0.68em 1.25em; letter-spacing: 0.06em; }

  /* -------- manuscript apparatus -------- */
  .eyebrow {
    font-family: var(--f-display);
    font-size: var(--fs-xs);
    font-weight: 580;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--accent);
  }

  .deck {
    font-size: var(--fs-l);
    line-height: 1.55;
    color: var(--inchiostro-2);
    text-wrap: pretty;
  }

  .note {
    font-size: var(--fs-s);
    line-height: 1.55;
    color: var(--inchiostro-2);
    border-inline-start: 2px solid var(--oro);
    padding-inline-start: var(--sp-4);
  }
  .note strong { color: var(--inchiostro); font-weight: 560; }

  .folio {
    font-family: var(--f-display);
    font-size: var(--fs-2xs);
    font-weight: 560;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--inchiostro-2);
  }

  .toll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.9em;
    block-size: 1.9em;
    border: 1px solid color-mix(in oklab, var(--oro) 70%, transparent);
    border-radius: 50%;
    font-family: var(--f-display);
    font-size: var(--fs-xs);
    font-weight: 560;
    font-variant-numeric: lining-nums;
    color: var(--accent);
    flex: none;
  }

  .stars {
    display: inline-flex;
    gap: var(--sp-2);
    color: var(--oro);
  }
  .stars svg { inline-size: 0.95rem; block-size: auto; }

  .divider-bell {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    color: var(--inchiostro-2);
  }
  .divider-bell::before, .divider-bell::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--rule-c);
  }
  .divider-bell svg { inline-size: 1rem; block-size: auto; opacity: 0.8; }

  .contour-divider {
    inline-size: 100%;
    color: var(--inchiostro);
    opacity: 0.5;
  }
  .contour-divider svg { inline-size: 100%; block-size: auto; }

  .card {
    background: var(--carta-2);
    border: var(--rule);
    padding: var(--sp-6);
    container-type: inline-size;
  }
  .section--alt .card { background: var(--carta); }

  /* -------- evening band (always dusk, both schemes) -------- */
  .band {
    color-scheme: dark;
    background:
      linear-gradient(oklch(30% 0.06 300 / 0.35), transparent 45%),
      oklch(20.5% 0.045 265);
    color: oklch(93% 0.014 90);
    padding-block: var(--sp-8);
    text-align: center;
  }
  .band .eyebrow { color: oklch(80% 0.11 85); }
  .band .deck { color: oklch(75% 0.015 85); }

  /* -------- reveal on scroll (CSS-only, view timeline) --------
     Gated on no-preference: under reduced motion the content is simply
     there — a view() timeline ignores duration guards, so gate the media. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      html.js .reveal {
        animation: reveal-rise var(--dur-3) var(--ease-out) both;
        animation-timeline: view();
        animation-range: entry 0% entry 42%;
      }
      @keyframes reveal-rise {
        from { opacity: 0; translate: 0 1.25rem; }
        to { opacity: 1; translate: 0 0; }
      }
    }
  }
}

/* -------- footer + specimen chrome extras (same components layer) -------- */
@layer components {
  .site-footer {
    border-block-start: var(--rule);
    padding-block: var(--sp-7) var(--sp-6);
    font-size: var(--fs-s);
    color: var(--inchiostro-2);
  }
  .site-footer .divider-bell { margin-block-end: var(--sp-7); }
  .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sp-6);
    align-items: start;
  }
  .site-footer__col > * + * { margin-block-start: var(--sp-3); }
  .site-footer__id .wordmark__text { font-size: 1.2rem; color: var(--inchiostro); }
  .site-footer__tag { max-inline-size: 22rem; text-wrap: pretty; }
  .site-footer address { font-style: normal; line-height: 1.7; }
  .site-footer__soft { color: color-mix(in oklab, var(--inchiostro-2) 75%, transparent); }
  .site-footer__nav { display: grid; gap: var(--sp-2); }
  .site-footer a { color: inherit; }
  .site-footer a:hover { color: var(--inchiostro); }
  .site-footer__plain {
    margin-block-start: var(--sp-7);
    text-align: center;
    font-style: italic;
    font-size: var(--fs-s);
  }
  .site-footer .folio { margin-block-start: var(--sp-4); }
  .stars__green { color: var(--verde); display: inline-flex; margin-inline-start: var(--sp-2); }

  .site-nav__cta-item { display: none; }
  @media (max-width: 59.99rem) {
    html.js .site-nav__cta-item { display: block; }
  }
  @media (max-width: 30rem) {
    .header-cta { display: none; }
  }
}

/* -------- inline art defaults -------- */
@layer components {
  .art-plate { color: var(--inchiostro); inline-size: 100%; block-size: auto; }
  .art-hills, .art-divider { color: var(--inchiostro); display: block; inline-size: 100%; block-size: auto; }
  .art-map { color: var(--inchiostro); inline-size: 100%; block-size: auto; }
  .art-wheel { inline-size: 100%; block-size: auto; color: var(--inchiostro); }
  .wheel-sector { fill: transparent; stroke: currentColor; stroke-opacity: 0.35; stroke-width: 0.8; transition: fill var(--dur-2) var(--ease-out); }
  .wheel-label { fill: currentColor; font-family: var(--f-display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
  .crypt-tick { fill: currentColor; font-family: var(--f-display); font-size: 11px; opacity: 0.75; }
}

/* -------- contact sheet (internal) -------- */
@layer pages {
  .page-assets .sheet-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-5); align-items: end; }
  .page-assets .sheet-cell, .page-assets .sheet-plate, .page-assets .sheet-sigil { border: var(--rule); padding: var(--sp-5); background: var(--carta-2); display: grid; gap: var(--sp-3); justify-items: center; }
  .page-assets .sheet-cell svg { block-size: 2rem; inline-size: auto; }
  .page-assets .sheet-cell .stars svg { block-size: 1.1rem; }
  .page-assets .sheet-plate svg { inline-size: 100%; max-inline-size: 13rem; }
  .page-assets .sheet-plate--wide svg { max-inline-size: 100%; }
  .page-assets .sheet-sigil svg { inline-size: 6rem; }
  .page-assets figcaption { font-size: var(--fs-s); color: var(--inchiostro-2); }
  .page-assets .sheet-hills { border: var(--rule); margin-block-end: var(--sp-3); position: relative; }
  .page-assets .sheet-hills--stack { block-size: 20rem; overflow: hidden; }
  .page-assets .sheet-hills--stack svg { position: absolute; inset-block-end: 0; }
  .page-assets .sheet-hills--stack svg:nth-child(1) { opacity: 0.45; }
  .page-assets .sheet-hills--stack svg:nth-child(2) { opacity: 0.7; }
  .page-assets .sheet-wide { border: var(--rule); padding: var(--sp-6); background: var(--carta-2); }
  .page-assets .sheet-wide svg { inline-size: 100%; }
  .page-assets .sheet-wheel { max-inline-size: 30rem; margin-inline: auto; }
}

/* ===== 50-pages.css ===== */
/* VESPRO · pages — page-scoped compositions arrive with each page build. */
@layer pages {
  /* (home, cucina, cantina, storia, orto, ospitalita, riservazioni,
     giornale, contatti, privacy, 404 — added task by task) */
}

/* -------- specimen (internal) -------- */
@layer pages {
  .page-specimen .sp-display { font-family: var(--f-display); font-size: var(--fs-display); font-weight: 460; line-height: var(--lh-tight); letter-spacing: -0.015em; text-wrap: balance; }
  .page-specimen .sp-3xl { font-family: var(--f-display); font-size: var(--fs-3xl); font-weight: 450; line-height: 1.12; text-wrap: balance; }
  .page-specimen .sp-2xl, .band .sp-2xl { font-family: var(--f-display); font-size: var(--fs-2xl); font-weight: 450; line-height: 1.16; text-wrap: balance; }
  .page-specimen .sp-xl { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 420; line-height: 1.3; }
  .page-specimen .sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-3); }
  .page-specimen .sw { block-size: 4.75rem; border: var(--rule); display: flex; align-items: end; padding: var(--sp-2) var(--sp-3); font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-2xs); }
  .page-specimen .sw--carta { background: var(--carta); }
  .page-specimen .sw--carta-2 { background: var(--carta-2); }
  .page-specimen .sw--inchiostro { background: var(--inchiostro); color: var(--carta); }
  .page-specimen .sw--inchiostro-2 { background: var(--inchiostro-2); color: var(--carta); }
  .page-specimen .sw--lapis { background: var(--lapis); color: var(--carta); }
  .page-specimen .sw--oro { background: var(--oro); color: light-dark(oklch(96.5% 0.010 92), oklch(20.5% 0.045 265)); }
  .page-specimen .sw--nebbia { background: var(--nebbia); }
  .page-specimen .sw--vespro { background: var(--vespro); color: oklch(93% 0.014 90); }
  .page-specimen .band { margin-block-start: var(--sp-8); }
}

/* ==================== home — la discesa della sera ==================== */
@layer pages {
  /* -------- hero -------- */
  .page-home .hero {
    position: relative;
    min-block-size: 100svh;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    overflow: clip;
    padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-9);
  }
  .hero__sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      light-dark(oklch(90% 0.055 80), oklch(26% 0.075 265)) 0%,
      light-dark(oklch(95% 0.022 95), oklch(23% 0.055 265)) 52%,
      var(--carta) 96%);
  }
  .hero__dusk {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      oklch(46% 0.11 264 / 0.5) 0%,
      oklch(32% 0.09 265 / 0.3) 55%,
      transparent 85%);
    opacity: 0.18;
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      html.js .hero__dusk {
        animation: hero-dusk linear both;
        animation-timeline: scroll();
        animation-range: 0svh 130svh;
      }
      @keyframes hero-dusk { to { opacity: 1; } }
    }
  }
  .hero__hills {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: min(52svh, 30rem);
    pointer-events: none;
  }
  .hero__hill { position: absolute; inset-inline: 0; inset-block-end: 0; }
  .hero__hill svg { inline-size: 100%; display: block; }
  .hero__hill--a { color: color-mix(in oklab, var(--inchiostro) 40%, var(--carta)); }
  .hero__hill--a svg { block-size: min(34svh, 19rem); }
  .hero__hill--b { color: color-mix(in oklab, var(--inchiostro) 60%, var(--carta)); }
  .hero__hill--b svg { block-size: min(25svh, 14.5rem); }
  .hero__hill--c { color: color-mix(in oklab, var(--inchiostro) 88%, var(--carta)); }
  .hero__hill--c svg { block-size: min(17svh, 9.5rem); }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      html.js .hero__hill--a { animation: hill-a linear both; animation-timeline: scroll(); animation-range: 0 120svh; }
      html.js .hero__hill--b { animation: hill-b linear both; animation-timeline: scroll(); animation-range: 0 120svh; }
      html.js .hero__hill--c { animation: hill-c linear both; animation-timeline: scroll(); animation-range: 0 120svh; }
      @keyframes hill-a { to { translate: 0 -1.1rem; } }
      @keyframes hill-b { to { translate: 0 -2.6rem; } }
      @keyframes hill-c { to { translate: 0 -4.6rem; } }
    }
  }
  .hero__fog {
    position: absolute;
    inset-inline: -18%;
    block-size: 7rem;
    background: radial-gradient(52% 100% at 50% 50%,
      color-mix(in oklab, var(--nebbia) 88%, transparent), transparent 72%);
  }
  .hero__fog--1 { inset-block-end: 4.5rem; opacity: 0.75; }
  .hero__fog--2 { inset-block-end: 0.25rem; opacity: 0.95; block-size: 8.5rem; }
  html.js .hero__fog--1 { animation: fog-drift 110s var(--ease-in-out) infinite alternate; }
  html.js .hero__fog--2 { animation: fog-drift 84s var(--ease-in-out) infinite alternate-reverse; }
  @keyframes fog-drift { from { translate: -3.5% 0; } to { translate: 3.5% 0; } }

  .hero__content { position: relative; display: grid; gap: var(--sp-5); justify-items: center; max-inline-size: 56rem; }
  .hero__title {
    font-size: var(--fs-display);
    font-weight: 430;
    line-height: var(--lh-tight);
    letter-spacing: -0.015em;
  }
  .hero__title i { font-style: italic; }
  .hero__deck { max-inline-size: 46ch; }
  .hero__cta { justify-content: center; margin-block-start: var(--sp-2); }

  .hero__cue {
    position: absolute;
    inset-block-end: var(--sp-5);
    inset-inline: 0;
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    opacity: 0.85;
  }
  .hero__cue-line {
    inline-size: 1px;
    block-size: 3.2rem;
    background: linear-gradient(var(--inchiostro), transparent);
    transform-origin: top;
  }
  html.js .hero__cue-line { animation: cue-grow 1.5s var(--ease-out) 0.5s both; }
  @keyframes cue-grow { from { scale: 1 0; } }

  /* -------- manifesto -------- */
  .manifesto__quote { text-align: center; display: grid; gap: var(--sp-4); justify-items: center; }
  .manifesto__quote p { font-size: var(--fs-2xl); max-inline-size: 22ch; }
  .manifesto .prose { margin-block-start: var(--sp-7); }

  /* -------- the evening timeline -------- */
  /* text always sits on ≤30% dusk (AA-safe); the plunge to night happens
     in the nightfall spacer below the content */
  .evening {
    background: linear-gradient(180deg,
      var(--carta) 0%,
      color-mix(in oklab, oklch(52% 0.10 268) 13%, var(--carta)) 55%,
      color-mix(in oklab, oklch(44% 0.11 266) 28%, var(--carta)) 100%);
    padding-block-end: var(--sp-8);
  }
  .evening__nightfall {
    block-size: clamp(9rem, 22svh, 15rem);
    background: linear-gradient(180deg,
      color-mix(in oklab, oklch(44% 0.11 266) 28%, var(--carta)) 0%,
      color-mix(in oklab, oklch(30% 0.09 265) 58%, light-dark(oklch(20.5% 0.045 265), var(--carta))) 55%,
      light-dark(oklch(20.5% 0.045 265), var(--carta)) 100%);
  }
  .evening__head { text-align: center; margin-block-end: var(--sp-8); }
  .evening__title { font-size: var(--fs-2xl); font-weight: 450; }
  .evening__list {
    --rope-x: 4.9rem;
    position: relative;
    max-inline-size: 46rem;
    margin-inline: auto;
    display: grid;
    gap: var(--sp-7);
  }
  .evening__list::before {
    content: "";
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: var(--rope-x);
    inline-size: 1px;
    background: color-mix(in oklab, var(--inchiostro) 24%, transparent);
  }
  .evening__list::after {
    content: "";
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: var(--rope-x);
    inline-size: 1px;
    background: var(--oro);
    transform-origin: top;
    scale: 1 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      html.js .evening__list::after {
        animation: rope-progress linear both;
        animation-timeline: view();
        animation-range: entry 15% exit 85%;
      }
      @keyframes rope-progress { to { scale: 1 1; } }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .evening__list::after { scale: 1 1; opacity: 0.5; }
  }
  .evening__station {
    display: grid;
    grid-template-columns: 3.4rem 3rem minmax(0, 1fr);
    align-items: start;
    column-gap: var(--sp-3);
  }
  .evening__time {
    font-family: var(--f-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: var(--fs-s);
    font-weight: 560;
    text-align: end;
    padding-block-start: 0.15rem;
  }
  .evening__node {
    justify-self: center;
    inline-size: 0.85rem;
    block-size: 0.85rem;
    margin-block-start: 0.35rem;
    border-radius: 50%;
    border: 1px solid var(--oro);
    background: var(--carta);
  }
  .evening__node--toll {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    margin-block-start: -0.1rem;
    display: grid;
    place-items: center;
    font-family: var(--f-display);
    font-size: var(--fs-xs);
    font-weight: 580;
    font-variant-numeric: lining-nums;
    color: var(--accent);
  }
  .evening__body h3 { font-size: var(--fs-l); font-weight: 500; margin-block-end: var(--sp-2); }
  .evening__body p { font-size: var(--fs-s); max-inline-size: 52ch; }
  @media (max-width: 40rem) {
    .evening__station { grid-template-columns: 2.9rem 2.2rem minmax(0, 1fr); }
    .evening__list { --rope-x: 3.95rem; }
  }

  /* -------- dark zone sections -------- */
  .signatures h2, .thresholds h2 { font-size: var(--fs-2xl); font-weight: 450; }
  .sig-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
    gap: var(--sp-5);
  }
  .sig-card {
    border: var(--rule);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .sig-card:hover { border-color: color-mix(in oklab, var(--oro) 65%, transparent); box-shadow: var(--halo); }
  .sig-card__toll {
    font-family: var(--f-display);
    font-size: var(--fs-3xl);
    font-weight: 340;
    line-height: 1;
    color: var(--oro);
    font-variant-numeric: lining-nums;
  }
  .sig-card__name { font-size: var(--fs-l); font-weight: 480; }
  .sig-card__gloss { font-size: var(--fs-s); color: var(--inchiostro-2); }
  .signatures__more { text-align: center; font-size: var(--fs-s); }

  .recognition {
    border-block: var(--rule);
    padding-block: var(--sp-6);
  }
  .recognition__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4) var(--sp-7);
  }
  .recognition__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--f-display);
    font-size: var(--fs-xs);
    font-weight: 540;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--inchiostro-2);
  }
  .recognition .stars svg { inline-size: 0.85rem; }

  .threshold-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
    gap: var(--sp-5);
  }
  .threshold-card {
    border: var(--rule);
    text-decoration: none;
    color: inherit;
    display: grid;
    grid-template-rows: 11rem auto auto 1fr;
    gap: var(--sp-3);
    padding-block-end: var(--sp-6);
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .threshold-card:hover { border-color: color-mix(in oklab, var(--oro) 65%, transparent); box-shadow: var(--halo); }
  .threshold-card__art {
    background: var(--carta-2);
    border-block-end: var(--rule);
    overflow: clip;
    display: grid;
    place-items: end center;
    color: var(--inchiostro);
  }
  .threshold-card__art svg { inline-size: 100%; block-size: auto; display: block; }
  .threshold-card__art--plate { place-items: center; }
  .threshold-card__art--plate svg { inline-size: auto; block-size: 9.5rem; }
  .threshold-card .eyebrow, .threshold-card h3, .threshold-card__line { padding-inline: var(--sp-6); }
  .threshold-card h3 { font-size: var(--fs-l); font-weight: 500; }
  .threshold-card:hover h3 { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.16em; text-decoration-color: var(--oro); }
  .threshold-card__line { font-size: var(--fs-s); color: var(--inchiostro-2); }

  .band__title { font-size: var(--fs-2xl); font-weight: 450; }
  .band .stack { justify-items: center; display: grid; }
  .band__cta { justify-content: center; }
  .band__small { font-size: var(--fs-xs); color: var(--inchiostro-2); letter-spacing: 0.02em; }
}

/* ==================== interior page head ==================== */
@layer pages {
  .page-head { padding-block-end: var(--sp-6); }
  .page-head__title {
    font-size: var(--fs-3xl);
    font-weight: 440;
    line-height: 1.08;
    letter-spacing: -0.012em;
    max-inline-size: 24ch;
  }
  .page-head .deck { margin-block-start: var(--sp-2); }
}

/* ==================== cucina ==================== */
@layer pages {
  .menu-folio {
    position: relative;
    border: var(--rule);
    padding: var(--sp-7);
    background: var(--carta);
  }
  .menu-folio::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid color-mix(in oklab, var(--inchiostro) 9%, transparent);
    pointer-events: none;
  }
  .menu-folio__head {
    display: grid;
    gap: var(--sp-2);
    margin-block-end: var(--sp-6);
    padding-block-end: var(--sp-5);
    border-block-end: var(--rule);
  }
  .menu-folio__name { font-size: var(--fs-xl); font-weight: 500; }
  .menu-folio__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    color: var(--inchiostro-2);
    font-size: var(--fs-s);
  }
  .menu-folio__price {
    font-family: var(--f-display);
    font-size: var(--fs-xl);
    font-weight: 480;
    color: var(--inchiostro);
  }
  .courses { display: grid; gap: var(--sp-5); }
  .courses > li {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    column-gap: var(--sp-4);
    align-items: start;
  }
  .courses--plain { counter-reset: course; }
  .courses--plain > li::before {
    counter-increment: course;
    content: counter(course, decimal-leading-zero);
    font-family: var(--f-display);
    font-size: var(--fs-xs);
    font-weight: 560;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--accent);
    padding-block-start: 0.42em;
  }
  .courses__name { font-size: var(--fs-l); font-weight: 490; }
  .courses__gloss { font-size: var(--fs-s); color: var(--inchiostro-2); max-inline-size: 58ch; margin-block-start: 2px; }
  .courses__coda {
    border-block-start: var(--rule);
    padding-block-start: var(--sp-5);
    margin-block-start: var(--sp-2);
  }
  .toll--bell svg { inline-size: 0.95rem; block-size: auto; }
  .menu-folio__note {
    margin-block-start: var(--sp-6);
    padding-block-start: var(--sp-4);
    border-block-start: var(--rule);
    font-size: var(--fs-s);
    font-style: italic;
    color: var(--inchiostro-2);
  }

  .pairing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--sp-5);
  }
  .pairing-card {
    border: var(--rule);
    background: var(--carta);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
  }
  .pairing-card__name { font-size: var(--fs-xl); font-weight: 480; }
  .pairing-card__desc { font-size: var(--fs-s); color: var(--inchiostro-2); }
  .pairing-card__price {
    font-family: var(--f-display);
    font-size: var(--fs-l);
    font-weight: 520;
    color: var(--accent);
  }
  .pairing-note { font-size: var(--fs-s); color: var(--inchiostro-2); }

  .priore { background: var(--carta-2); }
  .priore .deck { max-inline-size: 56ch; }
  .priore__price { font-size: var(--fs-m); }
  .priore__price .tnum { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 500; }

  .dietary { font-size: var(--fs-m); max-inline-size: var(--measure); }
}

/* ==================== cantina ==================== */
@layer pages {
  .cantina-descent {
    display: grid;
    gap: var(--sp-7);
    align-items: start;
  }
  @media (min-width: 64rem) {
    .cantina-descent { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
  }
  .cantina-descent__figure {
    border: var(--rule);
    background: var(--carta-2);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-4);
  }
  .cantina-descent__figure svg { inline-size: 100%; block-size: auto; color: var(--inchiostro); }

  .colophon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
    gap: var(--sp-5);
    border-block: var(--rule);
    padding-block: var(--sp-6);
  }
  .colophon__item { display: grid; gap: var(--sp-2); justify-items: center; text-align: center; }
  .colophon dt {
    font-family: var(--f-display);
    font-size: var(--fs-2xs);
    font-weight: 560;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--inchiostro-2);
  }
  .colophon dd {
    font-family: var(--f-display);
    font-size: var(--fs-3xl);
    font-weight: 340;
    line-height: 1;
    color: var(--oro);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .cantina-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--sp-5);
  }
  .cantina-card {
    border: var(--rule);
    background: var(--carta);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
  }
  .cantina-card h3 { font-size: var(--fs-l); font-weight: 500; }
  .cantina-card p:last-child { font-size: var(--fs-s); color: var(--inchiostro-2); }

  .verticali td:first-child { font-weight: 560; }
  .cantina-quote { text-align: center; display: grid; gap: var(--sp-4); justify-items: center; padding-block: var(--sp-5); }
  .cantina-quote p { max-inline-size: 30ch; }
}

/* ==================== print — the nightly card ==================== */
@layer pages {
  .print-head { display: none; }
  @media print {
    .site-header, .site-footer, .skip, .band, .zone-dark, .contour-divider,
    .hero__cue, .evening__nightfall { display: none !important; }
    body::after { display: none; }
    :root { color-scheme: light; }
    body { background: #fff; font-size: 10.5pt; }
    .page-top-pad { padding-block-start: 0; }
    .print-head {
      display: block;
      text-align: center;
      font-family: var(--f-display);
      font-size: 0.72rem;
      font-weight: 560;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      margin-block-end: 1.2rem;
    }
    .menu-folio { break-inside: avoid-page; page-break-inside: avoid; padding: 1.2rem; }
    .menu-folio__head { break-after: avoid; }
    .section { padding-block: 1rem; }
    .page-head { padding-block: 0 0.6rem; }
    a { text-decoration: none; color: inherit; }
  }
}

@layer pages {
  /* inside the descent split, prose gives up its margin column */
  .cantina-descent .prose { grid-template-columns: minmax(0, 1fr); }
  .cantina-descent .prose > .note--margin { grid-column: 1; max-inline-size: var(--measure); }
}

/* ==================== storia ==================== */
@layer pages {
  .storia-elevation {
    border: var(--rule);
    background: var(--carta-2);
    padding: var(--sp-7) var(--sp-6) var(--sp-5);
    display: grid;
    gap: var(--sp-4);
  }
  .storia-elevation svg { inline-size: 100%; max-inline-size: 52rem; margin-inline: auto; block-size: auto; color: var(--inchiostro); }

  .chronicle {
    position: relative;
    display: grid;
    gap: var(--sp-7);
    max-inline-size: 52rem;
    margin-inline: auto;
  }
  .chronicle::before {
    content: "";
    position: absolute;
    inset-block: 0.4rem;
    inset-inline-start: 8.6rem;
    inline-size: 1px;
    background: color-mix(in oklab, var(--inchiostro) 22%, transparent);
  }
  .chronicle__era {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    column-gap: var(--sp-6);
  }
  .chronicle__years {
    font-family: var(--f-display);
    font-size: var(--fs-s);
    font-weight: 560;
    text-align: end;
    color: var(--accent);
    padding-block-start: 0.3rem;
    position: relative;
  }
  .chronicle__years::after {
    content: "";
    position: absolute;
    inset-inline-end: -1.75rem;
    inset-block-start: 0.62rem;
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border-radius: 50%;
    border: 1px solid var(--oro);
    background: var(--carta);
  }
  .chronicle__body { padding-inline-start: var(--sp-5); }
  .chronicle__body h3 { font-size: var(--fs-xl); font-weight: 480; margin-block-end: var(--sp-3); }
  .chronicle__body p { max-inline-size: 58ch; }
  @media (max-width: 40rem) {
    .chronicle::before { inset-inline-start: 0; display: none; }
    .chronicle__era { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); }
    .chronicle__years { text-align: start; }
    .chronicle__years::after { display: none; }
    .chronicle__body { padding-inline-start: 0; }
  }

  .team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--sp-5);
  }
  .team__card {
    border: var(--rule);
    background: var(--carta);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-2);
    justify-items: center;
    text-align: center;
  }
  .team__sigil svg { inline-size: 5.2rem; block-size: auto; color: var(--inchiostro); }
  .team__card h3 { font-size: var(--fs-l); font-weight: 520; margin-block-start: var(--sp-2); }
  .team__role {
    font-family: var(--f-display);
    font-size: var(--fs-2xs);
    font-weight: 560;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
  }
  .team__line { font-size: var(--fs-s); color: var(--inchiostro-2); }
  .team__note { font-style: italic; color: var(--inchiostro-2); }

  .milestones { display: grid; gap: var(--sp-4); }
  .milestones__row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    column-gap: var(--sp-5);
    align-items: baseline;
    border-block-end: var(--rule);
    padding-block-end: var(--sp-4);
  }
  .milestones dt {
    font-family: var(--f-display);
    font-size: var(--fs-l);
    font-weight: 520;
    color: var(--accent);
  }
}

/* ==================== orto ==================== */
@layer pages {
  .wheel-figure {
    display: grid;
    gap: var(--sp-6);
    align-items: center;
    justify-items: center;
  }
  @media (min-width: 60rem) {
    .wheel-figure { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
  .wheel-figure__art { inline-size: min(100%, 27rem); }
  .wheel-month { cursor: pointer; outline: none; }
  .wheel-month .wheel-sector { transition: fill var(--dur-2) var(--ease-out), stroke-opacity var(--dur-2) var(--ease-out); }
  .wheel-month:hover .wheel-sector { fill: color-mix(in oklab, var(--oro) 10%, transparent); }
  .wheel-month.is-selected .wheel-sector { fill: color-mix(in oklab, var(--oro) 20%, transparent); stroke-opacity: 0.9; }
  .wheel-month:focus-visible .wheel-sector { stroke: var(--oro); stroke-opacity: 1; stroke-width: 2; }
  .wheel-month[data-month="7"] .wheel-label { fill: var(--accent); }
  .wheel-panel {
    border: var(--rule);
    background: var(--carta-2);
    padding: var(--sp-7);
    inline-size: min(100%, 26rem);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
    min-block-size: 13rem;
  }
  .wheel-panel__month { font-family: var(--f-display); font-size: var(--fs-2xl); font-weight: 450; }
  .wheel-panel__desc { color: var(--inchiostro); }
  .wheel-panel__hint { font-size: var(--fs-xs); color: var(--inchiostro-2); font-style: italic; }
  .wheel-table { max-inline-size: 52rem; margin-inline: auto; inline-size: 100%; }
  .wheel-table summary {
    font-family: var(--f-display);
    font-size: var(--fs-s);
    font-weight: 540;
    cursor: pointer;
    padding: var(--sp-4) 0;
    color: var(--inchiostro-2);
  }
  .wheel-table summary:hover { color: var(--inchiostro); }
  .wheel-table td:first-child { font-weight: 560; white-space: nowrap; }

  .orto-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--sp-5);
  }
  .orto-card {
    border: var(--rule);
    background: var(--carta);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
    justify-items: start;
  }
  .orto-card__art { justify-self: center; }
  .orto-card__art svg { block-size: 7.5rem; inline-size: auto; color: var(--inchiostro); }
  .orto-card h3 { font-size: var(--fs-l); font-weight: 500; }
  .orto-card p:last-child { font-size: var(--fs-s); color: var(--inchiostro-2); }
}

/* ==================== ospitalità ==================== */
@layer pages {
  .spaces {
    display: grid;
    gap: var(--sp-5);
  }
  @media (min-width: 60rem) { .spaces { grid-template-columns: 1fr 1fr; } }
  .space-card {
    border: var(--rule);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
  }
  .space-card h3 { font-size: var(--fs-xl); font-weight: 480; }
  .space-card__meta {
    font-family: var(--f-display);
    font-size: var(--fs-2xs);
    font-weight: 560;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--inchiostro-2);
  }
  .space-card p:last-child { font-size: var(--fs-s); color: var(--inchiostro-2); }

  .celle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--sp-5);
  }
  .cella-card {
    border: var(--rule);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
    container-type: inline-size;
  }
  .cella-card h3 { font-size: var(--fs-l); font-weight: 500; }
  .cella-card__view { font-size: var(--fs-s); color: var(--inchiostro-2); }
  .cella-card__rate { font-size: var(--fs-s); color: var(--inchiostro-2); }
  .cella-card__rate .tnum {
    font-family: var(--f-display);
    font-size: var(--fs-l);
    font-weight: 520;
    color: var(--inchiostro);
  }
  .cella-card--torre { grid-column: 1 / -1; background: var(--carta-2); }
  @container (min-width: 34rem) {
    .cella-card--torre {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      align-items: center;
    }
    .cella-card--torre h3 { grid-column: 1; font-size: var(--fs-xl); }
    .cella-card--torre .cella-card__view { grid-column: 1; }
    .cella-card--torre .cella-card__rate { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  }
  .celle__note { font-style: italic; color: var(--inchiostro-2); font-size: var(--fs-s); max-inline-size: var(--measure); }
}

/* ==================== riservazioni ==================== */
@layer pages {
  .resa-layout {
    display: grid;
    gap: var(--sp-7);
    align-items: start;
  }
  @media (min-width: 64rem) {
    .resa-layout { grid-template-columns: minmax(0, 1fr) 19rem; }
    .resa-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-5)); }
  }

  .wizard { display: grid; gap: var(--sp-6); }
  html.js .wizard__step[data-inactive] { display: none; }
  .wizard__step { display: grid; gap: var(--sp-5); border: var(--rule); padding: var(--sp-6); background: var(--carta); }
  .wizard__legend { display: grid; gap: var(--sp-1); padding: 0; margin-block-end: var(--sp-2); }
  .wizard__step-title { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 480; outline: none; }

  .wizard__progress {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .wizard__progress .toll { background: var(--carta); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
  .wizard__progress .toll.is-current { border-color: var(--oro); color: var(--inchiostro); box-shadow: var(--halo); }
  .wizard__progress .toll.is-done { background: var(--oro); color: light-dark(oklch(96.5% 0.010 92), oklch(20.5% 0.045 265)); border-color: var(--oro); }
  .wizard__progress li:not(:last-child) { margin-inline-end: var(--sp-4); position: relative; }
  .wizard__progress li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(100% + var(--sp-1));
    inset-block-start: 50%;
    inline-size: var(--sp-4);
    block-size: 1px;
    background: var(--rule-c);
  }

  .field { display: grid; gap: var(--sp-2); }
  .field > label, .field--choices > legend {
    font-family: var(--f-display);
    font-size: var(--fs-xs);
    font-weight: 580;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--inchiostro-2);
  }
  .field--choices > legend { margin-block-end: var(--sp-2); }
  .field__optional { text-transform: none; letter-spacing: 0.02em; font-weight: 460; }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"],
  .field input[type="date"], .field select, .field textarea {
    inline-size: 100%;
    max-inline-size: 26rem;
    padding: 0.68em 0.9em;
    border: 1px solid color-mix(in oklab, var(--inchiostro) 32%, transparent);
    border-radius: 2px;
    background: var(--carta);
    color: var(--inchiostro);
    font-size: var(--fs-m);
  }
  .field textarea { max-inline-size: 34rem; field-sizing: content; min-block-size: 3.2lh; resize: vertical; }
  .field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--errore); }
  .field__hint { font-size: var(--fs-xs); color: var(--inchiostro-2); }
  .field__error { font-size: var(--fs-s); color: var(--errore); font-weight: 500; }
  .field__error::before { content: "— "; }

  .choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
    border: var(--rule);
    border-radius: 2px;
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  }
  .choice + .choice { margin-block-start: var(--sp-3); }
  .choice:hover { border-color: color-mix(in oklab, var(--inchiostro) 40%, transparent); }
  .choice:has(:checked) { border-color: var(--oro); background: var(--carta-2); }
  .choice input { accent-color: var(--lapis); margin-block-start: 0.3em; inline-size: 1.05rem; block-size: 1.05rem; }
  .choice strong { font-weight: 560; display: block; }
  .choice small { display: block; font-size: var(--fs-xs); color: var(--inchiostro-2); margin-block-start: 2px; }

  .wizard__nav { display: flex; gap: var(--sp-4); align-items: center; }
  #resa-next, #resa-submit { margin-inline-start: auto; }
  html.no-js #resa-submit { margin-inline-start: 0; }
  .wizard__whisper { font-size: var(--fs-s); font-style: italic; color: var(--inchiostro-2); max-inline-size: 52ch; }
  .wizard__consent { font-size: var(--fs-s); color: var(--inchiostro-2); max-inline-size: 52ch; }
  .wizard__noscript { margin-block-end: var(--sp-4); }

  .wizard__review { display: grid; gap: var(--sp-3); }
  .wizard__review-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--sp-4);
    border-block-end: var(--rule);
    padding-block-end: var(--sp-3);
  }
  .wizard__review dt {
    font-family: var(--f-display);
    font-size: var(--fs-2xs);
    font-weight: 580;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--inchiostro-2);
    padding-block-start: 0.2em;
  }

  .resa-aside { display: grid; gap: var(--sp-5); border: var(--rule); background: var(--carta-2); padding: var(--sp-6); }

  .confirm__panel { text-align: center; display: grid; gap: var(--sp-4); justify-items: center; background: var(--carta); }
  .confirm__bell svg { block-size: 2.6rem; inline-size: auto; color: var(--accent); transform-origin: 50% 8%; }
  @media (prefers-reduced-motion: no-preference) {
    .confirm__bell svg { animation: bell-toll 1.3s var(--ease-in-out) 0.4s both; }
    @keyframes bell-toll {
      0% { rotate: 0deg; } 22% { rotate: 13deg; } 48% { rotate: -9deg; }
      72% { rotate: 5deg; } 100% { rotate: 0deg; }
    }
  }
  .confirm__title { font-size: var(--fs-2xl); font-weight: 450; outline: none; }
  .confirm__lede { max-inline-size: 46ch; color: var(--inchiostro-2); }
  .confirm .wizard__review { text-align: start; inline-size: 100%; max-inline-size: 34rem; }
  .confirm__small { font-size: var(--fs-s); color: var(--inchiostro-2); }
  @media print {
    .confirm__actions { display: none; }
    .page-riservazioni .page-head, .page-riservazioni .section[aria-label] { display: none; }
  }
}

/* ==================== contatti ==================== */
@layer pages {
  .contatti-layout {
    display: grid;
    gap: var(--sp-7);
    align-items: start;
  }
  @media (min-width: 64rem) {
    .contatti-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  }
  .contatti-address { font-style: normal; line-height: 1.7; }
  .contatti-soft { color: var(--inchiostro-2); font-size: var(--fs-s); }

  .mappa { position: relative; border: var(--rule); background: var(--carta-2); padding: var(--sp-5); display: grid; gap: var(--sp-4); }
  .mappa__base { position: relative; }
  .mappa__base svg { inline-size: 100%; block-size: auto; color: var(--inchiostro); opacity: 0.55; }
  .mappa__overlay { position: absolute; inset: var(--sp-5) var(--sp-5) auto; inline-size: calc(100% - 2 * var(--sp-5)); block-size: auto; }
  .mappa__road { stroke: var(--oro); stroke-width: 2.1; stroke-linecap: round; }
  .mappa__road--salita { stroke-dasharray: 5 4; }
  .mappa__dot { fill: var(--inchiostro); }
  .mappa__house-ring { stroke: var(--oro); stroke-width: 1.4; fill: var(--carta); }
  .mappa__label { fill: var(--inchiostro); font-family: var(--f-display); font-size: 13px; letter-spacing: 0.04em; }
  .mappa__label--house { font-weight: 620; letter-spacing: 0.14em; font-size: 13.5px; }
  .mappa__label--soft { fill: var(--inchiostro-2); font-size: 11.5px; }
  .mappa__label--road { fill: var(--inchiostro-2); font-size: 11.5px; letter-spacing: 0.1em; }
  .mappa__label--fog { fill: var(--inchiostro-2); font-family: var(--f-text); font-style: italic; font-size: 13px; }
  .mappa__north, .mappa__scale { stroke: var(--inchiostro-2); stroke-width: 1.1; }

  .faq { interpolate-size: allow-keywords; }
  .faq details { border-block-end: var(--rule); }
  .faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    font-family: var(--f-display);
    font-size: var(--fs-l);
    font-weight: 480;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+";
    font-size: var(--fs-l);
    color: var(--accent);
    transition: rotate var(--dur-2) var(--ease-out);
    flex: none;
  }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details p { max-inline-size: 60ch; padding-block-end: var(--sp-5); color: var(--inchiostro-2); }
  @supports (interpolate-size: allow-keywords) {
    .faq details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* ==================== giornale ==================== */
@layer pages {
  .giornale-index { display: grid; gap: var(--sp-7); }
  .giornale-entry {
    border-block-end: var(--rule);
    padding-block-end: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
  }
  .giornale-entry__meta {
    font-family: var(--f-display);
    font-size: var(--fs-2xs);
    font-weight: 560;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--inchiostro-2);
  }
  .giornale-entry__title { font-size: var(--fs-2xl); font-weight: 450; line-height: 1.12; }
  .giornale-entry__title a { color: inherit; text-decoration: none; }
  .giornale-entry__title a:hover { text-decoration: underline; text-decoration-thickness: 0.045em; text-underline-offset: 0.14em; text-decoration-color: var(--oro); }
  .giornale-entry__line { color: var(--inchiostro-2); max-inline-size: 60ch; }

  .art__byline {
    font-family: var(--f-display);
    font-size: var(--fs-s);
    font-weight: 540;
    color: var(--accent);
  }
  .art__body { font-size: 1.125rem; }
  .art__body > p:first-of-type::first-letter {
    initial-letter: 3 2;
    -webkit-initial-letter: 3 2;
    font-family: var(--f-display);
    font-weight: 520;
    color: var(--accent);
    padding-inline-end: 0.12em;
  }
  @supports not (initial-letter: 3) {
    .art__body > p:first-of-type::first-letter {
      float: inline-start;
      font-size: 3.1em;
      line-height: 0.82;
      padding-block-start: 0.08em;
      padding-inline-end: 0.14em;
    }
  }
  .art__body blockquote {
    border-block: var(--rule);
    padding-block: var(--sp-5);
    margin-block: var(--sp-3);
    text-align: center;
  }
  .art__body blockquote p { max-inline-size: 30ch; margin-inline: auto; }
  .art__colophon { margin-block-start: var(--sp-8); display: grid; gap: var(--sp-4); }
  .art__siblings {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    font-size: var(--fs-s);
    padding-block-start: var(--sp-4);
  }
}

/* ==================== 404 + privacy ==================== */
@layer pages {
  .page-404 main { display: grid; }
  .lost {
    min-block-size: calc(100svh - var(--header-h));
    display: grid;
    align-content: center;
    position: relative;
    overflow: clip;
    text-align: center;
  }
  .lost__inner { display: grid; gap: var(--sp-5); justify-items: center; position: relative; z-index: 1; }
  .lost__code {
    font-family: var(--f-display);
    font-size: clamp(5rem, 3rem + 9vi, 10rem);
    font-weight: 300;
    line-height: 1;
    color: color-mix(in oklab, var(--inchiostro) 22%, transparent);
    font-variant-numeric: lining-nums;
  }
  .lost__title { font-size: var(--fs-2xl); font-weight: 450; }
  .lost__deck { max-inline-size: 40ch; }
  .lost__fog { position: absolute; inset-inline: 0; inset-block-end: 0; opacity: 0.6; pointer-events: none; }
  .lost__hills { color: var(--inchiostro); opacity: 0.5; }
  .lost__hills svg { inline-size: 100%; block-size: 9rem; display: block; }

  .privacy__legal {
    font-size: var(--fs-s);
    color: var(--inchiostro-2);
    border-block-start: var(--rule);
    padding-block-start: var(--sp-5);
  }
}

/* ==================== cinema — lapis & gold ==================== */
@layer pages {
  /* -------- flusso band (home) -------- */
  .flusso-band { overflow: clip; margin-block-start: var(--sp-7); }
  .flusso-band svg { display: block; inline-size: 100%; block-size: clamp(15rem, 34vi, 24rem); }
  .art-flusso .flusso__acqua { stroke-linecap: round; }
  .art-flusso .lz-0 { stroke: color-mix(in oklab, var(--lapis) 80%, var(--inchiostro)); stroke-opacity: 0.9; }
  .art-flusso .lz-1 { stroke: var(--lapis); stroke-opacity: 0.8; }
  .art-flusso .lz-2 { stroke: color-mix(in oklab, var(--lapis) 68%, var(--carta)); stroke-opacity: 0.75; }
  .art-flusso .lz-3 { stroke: color-mix(in oklab, var(--lapis) 45%, var(--carta)); stroke-opacity: 0.65; }
  .art-flusso .flusso__vena { stroke: var(--oro); stroke-opacity: 0.92; stroke-linecap: round; }
  .art-flusso .flusso__cerchio { stroke: var(--oro); stroke-opacity: 0.26; stroke-width: 1.5; }

  /* -------- hero gold veins -------- */
  .hero__vene { position: absolute; inset-inline: 0; inset-block-end: 0; pointer-events: none; }
  .hero__vene svg { display: block; inline-size: 100%; block-size: min(44svh, 26rem); }
  .art-veins .hero__vena { stroke: var(--oro); stroke-opacity: 0.75; stroke-linecap: round; }

  /* -------- the drawn line: veins & engravings draw themselves -------- */
  @media (prefers-reduced-motion: no-preference) {
    html.js .art-veins .hero__vena {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: vein-draw 3.2s var(--ease-out) both;
    }
    html.js .art-veins .hero__vena:nth-of-type(2) { animation-delay: 0.35s; }
    html.js .art-veins .hero__vena:nth-of-type(3) { animation-delay: 0.7s; }
    html.js .art-veins .hero__vena:nth-of-type(4) { animation-delay: 1.05s; }
    @supports (animation-timeline: view()) {
      html.js .art-flusso .flusso__vena {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: vein-draw linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 60%;
      }
      html.js .draw-in svg path[pathLength] {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: vein-draw linear both;
        animation-timeline: view();
        animation-range: entry 8% cover 50%;
      }
    }
    @keyframes vein-draw { to { stroke-dashoffset: 0; } }
  }

  /* -------- entrance: the curtain of evening -------- */
  @media (prefers-reduced-motion: no-preference) {
    html.js .hero__content > * { animation: rise-in 1s var(--ease-out) both; }
    html.js .hero__content > .eyebrow { animation-delay: 0.15s; }
    html.js .hero__content > .hero__title { animation-delay: 0.3s; }
    html.js .hero__content > .hero__deck { animation-delay: 0.55s; }
    html.js .hero__content > .hero__cta { animation-delay: 0.75s; }
    html.js .hero__hills { animation: hills-in var(--dur-scene) var(--ease-out) both; }
    html.js .site-header { animation-name: header-settle, header-in; animation-duration: auto, 1.2s; animation-timing-function: linear, var(--ease-out); animation-fill-mode: both, both; }
    @keyframes rise-in { from { opacity: 0; translate: 0 1.3rem; } }
    @keyframes hills-in { from { opacity: 0; translate: 0 2.5rem; } }
    @keyframes header-in { from { opacity: 0; } }
  }

  /* -------- fireflies in the nightfall -------- */
  .evening__nightfall { position: relative; }
  .ff {
    position: absolute;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: oklch(86% 0.13 90);
    box-shadow: 0 0 12px oklch(86% 0.13 90 / 0.85);
    opacity: 0;
  }
  .ff:nth-child(1) { inset-inline-start: 16%; inset-block-start: 58%; }
  .ff:nth-child(2) { inset-inline-start: 31%; inset-block-start: 40%; }
  .ff:nth-child(3) { inset-inline-start: 47%; inset-block-start: 66%; }
  .ff:nth-child(4) { inset-inline-start: 58%; inset-block-start: 34%; }
  .ff:nth-child(5) { inset-inline-start: 71%; inset-block-start: 55%; }
  .ff:nth-child(6) { inset-inline-start: 84%; inset-block-start: 44%; }
  .ff:nth-child(7) { inset-inline-start: 24%; inset-block-start: 74%; }
  @media (prefers-reduced-motion: no-preference) {
    html.js .ff { animation: ff-drift 12s var(--ease-in-out) infinite; }
    html.js .ff:nth-child(2) { animation-delay: 2.2s; animation-duration: 14s; }
    html.js .ff:nth-child(3) { animation-delay: 4.6s; animation-duration: 11s; }
    html.js .ff:nth-child(4) { animation-delay: 1.4s; animation-duration: 16s; }
    html.js .ff:nth-child(5) { animation-delay: 6.1s; animation-duration: 13s; }
    html.js .ff:nth-child(6) { animation-delay: 3.3s; animation-duration: 15s; }
    html.js .ff:nth-child(7) { animation-delay: 7.4s; animation-duration: 12.5s; }
    @keyframes ff-drift {
      0% { opacity: 0; translate: 0 0; }
      12% { opacity: 0.9; }
      45% { opacity: 0.3; translate: 14px -30px; }
      65% { opacity: 0.85; }
      100% { opacity: 0; translate: -10px -58px; }
    }
  }

  /* -------- candlelight breathes in the dark zone -------- */
  @media (prefers-reduced-motion: no-preference) {
    .zone-dark .btn--brass {
      animation: candle 5.5s var(--ease-in-out) infinite;
    }
    @keyframes candle {
      0%, 100% { box-shadow: 0 0 1.4rem oklch(81% 0.125 87 / 0.22); }
      42% { box-shadow: 0 0 2rem oklch(81% 0.125 87 / 0.34); }
      55% { box-shadow: 0 0 1.2rem oklch(81% 0.125 87 / 0.18); }
      70% { box-shadow: 0 0 1.8rem oklch(81% 0.125 87 / 0.3); }
    }
  }
}

/* ===== 90-utilities.css ===== */
/* VESPRO · utilities + global guards. */
@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .tnum { font-variant-numeric: tabular-nums lining-nums; }
  .nowrap { white-space: nowrap; }
  .center { text-align: center; }
  .measure { max-inline-size: var(--measure); }
  .mx-auto { margin-inline: auto; }

  html.js .js-hide { display: none; }
  html.no-js .no-js-hide { display: none; }

  /* The one global motion guard: when the visitor asks for calm, the
     site is a book — every timeline, drift, and parallax stops. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      animation-delay: 0ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer utilities {
  html.nav-locked { overflow: hidden; }
}

@layer utilities {
  /* no-JS: the wizard is one long form; its submit must show despite the
     pre-hidden attribute that prevents a flash for scripted visitors */
  html.no-js #resa-submit[hidden] { display: inline-flex; }
}