/* =====================================================================
   ESICHIA · design system
   Il sito è un racconto a capitoli su una parete di calce pugliese:
   archi delle masserie come cornici, colonne doriche come segni,
   lettere incise nella pietra, il verde profondo come la sera.
   ===================================================================== */
@layer base, layout, components, modifiers, motion;

@font-face { font-family: "Gilda Display"; src: url(/assets/fonts/gilda-display.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url(/assets/fonts/jost.woff2) format("woff2"); font-weight: 300 500; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(/assets/fonts/bodoni-moda-italic.woff2) format("woff2"); font-style: italic; font-weight: 400 500; font-display: swap; }
@font-face { font-family: "GFS Didot"; src: url(/assets/fonts/gfs-didot.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* colori con un ruolo */
  --calce: #f3f1ec;            /* parete di calce */
  --calce-2: #e7e3da;          /* calce in ombra, superfici */
  --niche: #e9e5dd;            /* fondo delle nicchie scavate nella parete */
  --tile: 340px;               /* scala della texture: più piccola = parete vista da più lontano */
  --ink: #031e09;              /* testo */
  --deep: #073c13;             /* verde profondo del marchio */
  --night: #04280c;            /* verde della sera, footer */
  --olive: #556b2f;            /* secondario */
  --salvia: #b0be8c;           /* verde chiaro, sul fondo scuro */
  --tufo: #a88a5c;             /* pietra leccese: filetti delle cornici e numeri */
  --tufo-light: #e2d2b0;
  --verde: #62705b;            /* fondi verdi: capitoli scuri, epilogo, menu (delicati, vicini alla calce) */
  --verde-scuro: #55654f;      /* piè di pagina */
  --sub: color-mix(in srgb, var(--ink) 68%, var(--calce));
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --rule-light: color-mix(in srgb, #fff 22%, transparent);
  /* caratteri */
  --display: "Gilda Display", "Didot", "Bodoni 72", Georgia, serif;
  --didot: "GFS Didot", "Didot", "Bodoni 72", Georgia, serif;
  --italic: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  /* misure */
  --gutter: clamp(20px, 5vw, 72px);
  --max: 82rem;
  --read: 38rem;
  --header: clamp(64px, 7vw, 88px);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --chapter: clamp(96px, 13vw, 200px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-sm: 0 1px 2px rgb(3 30 9 / .12);
  --shadow-md: 0 18px 40px -18px rgb(3 30 9 / .38), 0 2px 6px rgb(3 30 9 / .08);
  --shadow-lg: 0 40px 80px -30px rgb(3 30 9 / .5), 0 6px 18px rgb(3 30 9 / .12);
  --texture: url(/assets/calcare.webp);
  color-scheme: light;
}

/* ============================ BASE ============================ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
  body {
    margin: 0; min-height: 100svh; color: var(--ink);
    background: var(--calce) var(--texture) 0 0 / var(--tile) var(--tile);
    font: 300 1.0625rem/1.78 var(--sans); letter-spacing: .005em;
    text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-kerning: normal;
    overflow-x: clip;
  }
  h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.06; color: var(--deep); margin: 0; text-wrap: balance; letter-spacing: -.005em; }
  h1 { font-size: clamp(2.6rem, 6.2vw, 6rem); }
  h2 { font-size: clamp(2.1rem, 4.6vw, 4.2rem); }
  h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; }
  h1 em, h2 em, h3 em { font-family: var(--italic); font-style: italic; }
  p { margin: 0 0 1em; text-wrap: pretty; }
  a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: var(--tufo); transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
  a:hover { color: var(--olive); text-decoration-color: currentColor; }
  strong { font-weight: 500; color: var(--deep); }
  em { font-family: var(--italic); font-style: italic; font-size: 1.04em; }
  img, video, svg { display: block; max-width: 100%; }
  picture { display: contents; }
  ul, ol { padding: 0; margin: 0; list-style: none; }
  figure, blockquote, dl, dd { margin: 0; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 1px solid var(--tufo); outline-offset: 4px; }
  ::selection { background: var(--salvia); color: var(--ink); }
  mark.todo { background: #f3e2a9; color: #5a4300; font: 400 .78rem/1.4 var(--sans); padding: .15em .45em; letter-spacing: 0; }
  table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; }
  th, td { text-align: left; vertical-align: top; padding: .9em 1em .9em 0; border-bottom: 1px solid var(--rule); }
  th { font: 500 .72rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--olive); }
  [lang="grc"] { font-family: var(--didot); letter-spacing: .02em; }
  .col-icon { height: 1em; width: auto; flex: none; }
  .nowrap { white-space: nowrap; }
  /* parole lunghe (tedesco, francese): vanno a capo con il trattino invece di uscire dallo schermo */
  p, li, dd, dt, td, th, blockquote, figcaption, summary { overflow-wrap: break-word; }
  h1, h2, h3, :lang(de) p, :lang(de) li, :lang(de) dd, :lang(de) td { hyphens: auto; -webkit-hyphens: auto; }
  .btn, .nowrap, .langs a, .langs span, .logo { hyphens: manual; -webkit-hyphens: manual; }
  .table-wrap { max-width: 100%; }
}

/* ============================ LAYOUT ============================ */
@layer layout {
  .skip { position: absolute; left: -9999px; z-index: 100; }
  .skip:focus { left: var(--gutter); top: 12px; background: var(--deep); color: #fff; padding: 10px 16px; }

  /* --- intestazione: trasparente sopra il video, poi di calce --- */
  .site-header {
    position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5);
    padding: 0 var(--gutter); color: var(--deep);
    transition: background-color .5s var(--ease), color .5s var(--ease), height .5s var(--ease), box-shadow .5s var(--ease), transform .6s var(--ease-out);
  }
  .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s var(--ease);
    background: color-mix(in srgb, var(--calce) 82%, transparent) var(--texture) 0 0 / var(--tile); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--rule); }
  .has-hero .site-header:not(.is-scrolled) { color: #fff; }
  .site-header.is-scrolled { height: calc(var(--header) - 14px); }
  .site-header.is-scrolled::before { opacity: 1; }
  .site-header.is-hidden { transform: translateY(-100%); }
  .brand { grid-column: 2; color: inherit; display: block; line-height: 0; }
  .logo { height: clamp(17px, 1.9vw, 25px); width: auto; transition: height .5s var(--ease); }
  .is-scrolled .logo { height: clamp(15px, 1.6vw, 21px); }
  .primary { grid-column: 1; grid-row: 1; display: flex; gap: clamp(14px, 1.9vw, 34px); white-space: nowrap; }
  .primary a, .langs a, .langs span { color: inherit; text-decoration: none; font: 400 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; position: relative; padding: 8px 0; }
  .primary a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .45s var(--ease-out); }
  .primary a:hover::after, .primary a[aria-current]::after { transform: scaleX(1); }
  .tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
  .langs { display: flex; gap: 14px; }
  .langs span { opacity: 1; }
  .langs a { opacity: .62; } .langs a:hover { opacity: 1; }
  .langs span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; }
  .menu-toggle { display: none; align-items: center; gap: 12px; background: none; border: 0; padding: 10px 0; cursor: pointer; font: 400 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
  .menu-toggle i { width: 26px; height: 9px; position: relative; display: block; }
  .menu-toggle i::before, .menu-toggle i::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
  .menu-toggle i::before { top: 0; } .menu-toggle i::after { top: 8px; left: 8px; }
  .menu-toggle[aria-expanded="true"] i::before { top: 4px; transform: rotate(18deg); }
  .menu-toggle[aria-expanded="true"] i::after { top: 4px; left: 0; transform: rotate(-18deg); }
  body:has(.menu-toggle[aria-expanded="true"]) .site-header { color: #fff; }
  body:has(.menu-toggle[aria-expanded="true"]) .site-header::before { opacity: 1; background: var(--verde); border-bottom-color: var(--rule-light); backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* --- menu a tutto schermo --- */
  .menu-panel { position: fixed; inset: 0; z-index: 40; color: #fff; background: var(--verde); overflow: auto;
    padding: calc(var(--header) + 4vh) var(--gutter) 40px; display: grid; align-content: space-between; gap: 40px; }
  .menu-panel::before { content: ""; position: absolute; inset: 0; background: var(--texture) 0 0 / var(--tile); mix-blend-mode: multiply; opacity: .3; pointer-events: none; }
  .menu-panel[hidden] { display: none; }
  .menu-panel ol { display: grid; justify-items: center; gap: clamp(8px, 2.4vh, 28px); position: relative; }
  .menu-panel li a { display: grid; justify-items: center; gap: 6px; color: #fff; text-decoration: none; font: 400 min(clamp(2rem, 7.4vw, 3.4rem), 5.4vh)/1.1 var(--display); letter-spacing: .01em; }
  .menu-panel li a[aria-current] { color: var(--tufo-light); }
  .menu-panel li a span { font: 400 .8rem/1 var(--didot); color: var(--tufo-light); letter-spacing: .3em; }
  .menu-panel__foot { position: relative; display: grid; justify-items: center; text-align: center; gap: 18px; font-size: .95rem; }
  .menu-panel__foot a { color: #fff; text-decoration-color: var(--tufo-light); }
  .menu-panel__foot .langs a, .menu-panel__foot .langs span { color: #fff; }
  .menu-panel__col { position: absolute; right: -6vw; bottom: 6vh; color: color-mix(in srgb, #fff 4%, transparent); pointer-events: none; }
  .menu-panel__col .col-icon { height: 62vh; }

  /* --- filo del racconto: progresso di lettura sul margine --- */
  .thread { position: fixed; left: clamp(10px, 1.6vw, 26px); top: 18vh; bottom: 18vh; width: 1px; background: var(--rule); z-index: 30; pointer-events: none; }
  .thread span { position: absolute; inset: 0; background: var(--tufo); transform-origin: top; transform: scaleY(var(--progress, 0)); }
  .has-hero .thread { opacity: var(--thread-o, 0); transition: opacity .6s var(--ease); }
  @media (max-width: 900px) { .thread { display: none; } }

  main { display: block; }

  /* --- piè di pagina --- */
  .site-footer { position: relative; background: var(--verde-scuro); color: color-mix(in srgb, #fff 78%, transparent); padding: clamp(72px, 10vw, 140px) var(--gutter) 32px; isolation: isolate; }
  .site-footer::before { content: ""; position: absolute; inset: 0; background: var(--texture) 0 0 / var(--tile); mix-blend-mode: multiply; opacity: .3; z-index: -1; }
  .site-footer a { color: #fff; text-decoration-color: color-mix(in srgb, var(--tufo-light) 60%, transparent); }
  .site-footer a:hover { color: var(--salvia); }
  .site-footer__cta { text-align: center; padding-top: clamp(32px, 4vw, 48px); }
  main:has(> .epilogue:last-child) + .site-footer .site-footer__cta { display: none; }
  .site-footer__brand { color: #fff; display: grid; justify-items: center; padding-bottom: clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--rule-light); }
  .logo--full { height: clamp(64px, 9vw, 120px); width: auto; }
  .site-footer__cols { max-width: var(--max); margin: 0 auto; display: grid; gap: 40px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); padding: clamp(40px, 6vw, 72px) 0; }
  .site-footer h2 { font: 500 .7rem/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--tufo-light); margin-bottom: 18px; }
  .site-footer li { margin: 0 0 10px; }
  .site-footer li a { text-decoration: none; font: 400 1.08rem/1.4 var(--display); }
  .langs--footer a, .langs--footer span { color: #fff; }
  .site-footer__legal { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--rule-light); padding-top: 24px; display: grid; gap: 14px; font-size: .78rem; }
  .site-footer .legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  .site-footer .legal a, .site-footer .legal button { color: color-mix(in srgb, #fff 80%, transparent); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; letter-spacing: .04em; }
  .site-footer .legal a:hover, .site-footer .legal button:hover { color: #fff; }
  .company { color: color-mix(in srgb, #fff 58%, transparent); margin: 0; }
  body:has(main > .epilogue:last-child) .site-footer > .arcade { display: none; }
}

/* ============================ COMPONENTI ============================ */
@layer components {
  /* --- piccoli segni tipografici --- */
  .eyebrow { display: inline-flex; align-items: center; gap: 14px; font: 400 .72rem/1.3 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--olive); margin: 0 0 22px; }
  .eyebrow--light { color: color-mix(in srgb, #fff 86%, transparent); }
  .eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
  .eyebrow [lang="grc"] { text-transform: none; letter-spacing: .12em; font-size: 1.25em; }
  .tag { display: inline-block; justify-self: center; font: 400 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--olive); border: 1px solid color-mix(in srgb, var(--olive) 40%, transparent); padding: .7em 1em .62em; margin-top: 14px; }
  .tag--gold { color: var(--tufo); border-color: color-mix(in srgb, var(--tufo) 55%, transparent); }

  /* --- bottoni: il riempimento scorre come la luce sulla pietra --- */
  .btn { --c: var(--deep); --t: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate;
    color: var(--c); border: 1px solid var(--c); padding: 1.15em 2.4em 1.1em; text-decoration: none;
    font: 400 .74rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; transition: color .5s var(--ease), border-color .5s var(--ease); }
  .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out); }
  .btn:hover { color: var(--t); }
  .btn:hover::before { transform: scaleX(1); transform-origin: left; }
  .btn--light { --c: #fff; --t: var(--deep); }
  .btn--solid { color: var(--t); }
  .btn--solid::before { transform: scaleX(1); transform-origin: left; }
  .btn--solid:hover { color: var(--c); }
  .btn--solid:hover::before { transform: scaleX(0); transform-origin: right; }
  .btn--small { padding: .95em 1.6em .9em; font-size: .68rem; }
  .has-hero .site-header:not(.is-scrolled) .btn--small { --c: #fff; --t: var(--deep); }
  .link-arrow { display: inline-flex; align-items: center; gap: 14px; font: 400 .74rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--deep); padding: 10px 0; }
  .link-arrow svg { width: 40px; height: 10px; transition: transform .5s var(--ease-out); }
  .link-arrow:hover svg, a:hover > .link-arrow svg, a:hover .link-arrow svg { transform: translateX(8px); }
  .cta-line { text-align: center; margin: clamp(40px, 6vw, 72px) 0 0; }

  /* --- apertura della home: video in una cornice --- */
  .hero { position: relative; height: 100svh; min-height: 600px; color: #fff; overflow: clip; display: grid; align-items: end; justify-items: center; text-align: center; isolation: isolate; background: var(--verde-scuro); }
  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__video, .hero__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.06); }
  /* immagine d'attesa sotto il video: verticale sul telefono, resta visibile se il video non parte (es. risparmio energetico) */
  .hero__poster { position: absolute; inset: 0; overflow: hidden; }
  /* pausa: si tocca il video; il pulsante esiste solo per tastiera e lettori di schermo, mai visibile */
  .hero__toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .hero:has(.hero__toggle:focus-visible) .hero__frame { outline: 1px solid rgb(255 255 255 / .7); outline-offset: -6px; }
  .hero__veil { position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(70% 55% at 50% 72%, rgb(28 36 26 / .5), rgb(28 36 26 / 0) 75%), linear-gradient(0deg, rgb(28 36 26 / .55) 0%, rgb(28 36 26 / 0) 50%), linear-gradient(180deg, rgb(28 36 26 / .4) 0%, rgb(28 36 26 / 0) 22%); }
  .hero__frame { position: absolute; inset: clamp(12px, 1.8vw, 26px); border: 1px solid rgb(255 255 255 / .3); pointer-events: none; }
  .hero__frame::before, .hero__frame::after, .hero__frame span::before, .hero__frame span::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid rgb(255 255 255 / .75); }
  .hero__frame::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
  .hero__frame::after { top: -6px; right: -6px; border-left: 0; border-bottom: 0; }
  .hero__frame span::before { bottom: -6px; left: -6px; border-right: 0; border-top: 0; }
  .hero__frame span::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
  .hero__content { position: relative; display: grid; justify-items: center; padding: 0 var(--gutter) clamp(96px, 15vh, 170px); max-width: 72rem; transform: translate3d(0, var(--hero-text, 0px), 0); opacity: var(--hero-o, 1); }
  .hero__title { color: #fff; font-size: clamp(3rem, 7.6vw, 8rem); line-height: .96; letter-spacing: -.015em; margin-bottom: clamp(20px, 3vh, 34px); text-shadow: 0 2px 30px rgb(3 30 9 / .25); }
  .hero__line { display: block; }
  .hero__title em { color: #f1ead9; font-weight: 400; font-size: .84em; letter-spacing: -.01em; }
  .hero--page .hero__title { font-size: clamp(2.6rem, 5.8vw, 6rem); max-width: 18ch; text-wrap: balance; }
  .hero__lead { font: italic 400 clamp(1.1rem, 1.7vw, 1.45rem)/1.5 var(--italic); max-width: 34ch; color: color-mix(in srgb, #fff 90%, transparent); margin-bottom: clamp(28px, 4vh, 44px); }
  .scroll-cue { position: absolute; left: 50%; translate: -50% 0; bottom: clamp(26px, 4vh, 44px); display: grid; justify-items: center; gap: 14px; color: #fff; text-decoration: none; font: 400 .64rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
  .scroll-cue span { writing-mode: horizontal-tb; }
  .scroll-cue i { width: 1px; height: 48px; background: rgb(255 255 255 / .3); position: relative; overflow: hidden; }
  .scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: cue 2.4s var(--ease) infinite; }

  /* --- prologo: la parola incisa nella pietra --- */
  .prologue { position: relative; padding: var(--chapter) var(--gutter); display: grid; justify-items: center; overflow: clip; }
  .prologue__text { position: relative; max-width: 40rem; display: grid; justify-items: start; }
  .prologue__text > .link-arrow, .split__text > .link-arrow { justify-self: center; }
  .prose--large { font: 400 clamp(1.4rem, 2.3vw, 2.05rem)/1.48 var(--display); color: var(--ink); letter-spacing: -.003em; }
  .prose--large p { margin-bottom: .8em; }
  .prose--dropcap > p:first-child::first-letter { float: left; font: 400 4.1em/.8 var(--didot); color: var(--deep); margin: .06em .1em 0 -.04em; padding-right: .04em; }
  .prose--large.prose--dropcap > p:first-child::first-letter { font-size: 3.4em; }

  /* --- capitoli --- */
  .chapter { position: relative; padding: var(--chapter) var(--gutter); }
  .chapter + .chapter:not(.chapter--dark) { padding-top: calc(var(--chapter) * .55); }
  .chapter__head { display: grid; justify-items: center; text-align: center; gap: 22px; max-width: 54rem; margin: 0 auto clamp(48px, 7vw, 96px); }
  .chapter__head h2 { max-width: 20ch; }
  .chapter__head h2 a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease-out); }
  .chapter__head h2 a:hover { background-size: 100% 1px; }
  .chapter__num { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--tufo); font: 400 .95rem/1 var(--didot); letter-spacing: .3em; }
  .chapter__num .col-icon { height: 22px; }
  .chapter__num--solo { gap: 18px; }
  .chapter__num::before, .chapter__num::after { content: ""; width: clamp(28px, 5vw, 64px); height: 1px; background: currentColor; opacity: .55; }
  .chapter__num--light { color: var(--tufo-light); }
  .chapter--text .chapter__head { margin-bottom: clamp(32px, 4vw, 56px); }
  .chapter--text { padding-bottom: clamp(40px, 6vw, 96px); }
  .chapter--text .prose:not(.prose--large) { font-size: 1.125rem; }
  .chapter--text .chapter__head h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
  .chapter__body, .chapter--text > .prose, .chapter--text > .quote { max-width: var(--read); margin-inline: auto; }
  .chapter--legal, .chapter + .chapter--legal { padding-block: clamp(28px, 4vw, 48px); }
  .chapter--legal .chapter__head { justify-items: start; text-align: left; max-width: var(--read); margin: 0 auto 20px; }
  .chapter--legal .chapter__head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: none; }
  .prose { max-width: var(--read); }
  .prose--center { text-align: center; margin: -32px auto clamp(40px, 5vw, 64px); font-size: 1.12rem; }
  .prose ul, .prose ol { margin: 0 0 1.2em; display: grid; gap: .5em; }
  .prose ul li { padding-left: 1.6em; position: relative; }
  .prose ul li::before { content: ""; position: absolute; left: 0; top: .85em; width: .8em; height: 1px; background: var(--tufo); }
  .prose ol { counter-reset: n; }
  .prose ol li { counter-increment: n; padding-left: 2.2em; position: relative; }
  .prose ol li::before { content: counter(n, upper-roman); position: absolute; left: 0; font: 400 .85em/1.9 var(--didot); color: var(--tufo); letter-spacing: .1em; }
  .prose--light, .prose--light strong { color: color-mix(in srgb, #fff 86%, transparent); }

  /* --- citazione --- */
  .quote { text-align: center; margin: clamp(32px, 5vw, 64px) auto; max-width: 34rem; position: relative; padding-top: 44px; }
  .quote::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var(--tufo); }
  .quote p { font: italic 400 clamp(1.4rem, 2.4vw, 2rem)/1.4 var(--italic); color: var(--deep); margin: 0; }

  /* --- le cornici: arco di masseria, passe-partout, finestra --- */
  .frame { --r: 999px 999px 0 0; --pad: clamp(9px, 1.1vw, 15px); --lo: clamp(8px, 1vw, 13px);
    --ri: calc(50cqw - var(--pad)) calc(50cqw - var(--pad)) 0 0; --rl: calc(50cqw + var(--lo)) calc(50cqw + var(--lo)) 0 0;
    container-type: inline-size; position: relative; isolation: isolate; padding: var(--pad); border-radius: var(--r);
    background: var(--niche) var(--texture) 37px 53px / var(--tile); background-blend-mode: multiply;
    box-shadow: inset 6px 8px 14px rgb(96 80 52 / .30), inset 2px 3px 3px rgb(96 80 52 / .22), inset -3px -4px 8px rgb(255 255 255 / .9), 0 1px 0 rgb(255 255 255 / .9); }
  .frame--mat { --r: 3px; --ri: 2px; --rl: 4px; }
  .frame__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--ri); background: var(--calce-2);
    -webkit-clip-path: inset(0 round var(--ri)); clip-path: inset(0 round var(--ri)); }
  .frame__img img { width: 100%; height: 116%; object-fit: cover; position: absolute; inset: -8% 0 auto; transform: translate3d(0, var(--drift, 0px), 0) scale(var(--zoom, 1.02)); transition: transform 1.4s var(--ease-out); }
  /* profondità: la foto sta più in fondo della pietra che la circonda */
  .frame__img::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: var(--ri);
    box-shadow: inset 0 16px 22px -10px rgb(26 20 8 / .55), inset 10px 0 18px -12px rgb(26 20 8 / .35), inset 0 0 0 1px rgb(60 46 22 / .35); }
  /* scanalatura incisa intorno alla nicchia */
  .frame__line { position: absolute; inset: calc(-1 * var(--lo)); border-radius: var(--rl); pointer-events: none; z-index: -1;
    border: 1px solid rgb(120 96 60 / .32); box-shadow: 1px 1px 0 rgb(255 255 255 / .85), inset 1px 1px 0 rgb(255 255 255 / .6); transition: border-color .6s var(--ease); }
  .frame--mat .frame__img { aspect-ratio: 4 / 3; }
  /* --- apertura delle pagine interne --- */
  .page-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 110px); align-items: center;
    min-height: min(100svh, 980px); padding: calc(var(--header) + clamp(40px, 6vw, 80px)) var(--gutter) clamp(64px, 8vw, 120px); max-width: 96rem; margin: 0 auto; }
  .page-hero--after { min-height: 0; padding-top: clamp(64px, 8vw, 128px); }
  .page-hero__text { max-width: 40rem; }
  .page-hero h1 { font-size: clamp(2.6rem, 5.6vw, 5.6rem); line-height: 1; margin-bottom: clamp(22px, 3vw, 36px); }
  .page-hero__lead { font: italic 400 clamp(1.15rem, 1.7vw, 1.45rem)/1.55 var(--italic); color: color-mix(in srgb, var(--ink) 80%, var(--calce)); max-width: 36ch; }
  .page-hero--after .page-hero__lead { font-size: clamp(1.3rem, 2.2vw, 1.95rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 84%, var(--calce)); max-width: 30ch; }
  .page-hero__lead p:last-child { margin: 0; }
  .page-hero__frame { justify-self: center; width: min(100%, 560px); }
  .page-hero__frame .frame__img { aspect-ratio: 4 / 5.1; max-height: 74svh; }
  .page-hero__rule { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--rule); transform-origin: left; }
  .page-hero--plain { grid-template-columns: 1fr; min-height: clamp(380px, 62svh, 640px); text-align: center; justify-items: center; }
  .page-hero--plain .page-hero__text { max-width: 54rem; display: grid; justify-items: center; }
  .page-legal .page-hero--plain h1 { font-size: clamp(2.3rem, 4.8vw, 4.4rem); }
  .page-legal .page-hero--plain { min-height: clamp(320px, 44svh, 460px); padding-bottom: clamp(40px, 5vw, 64px); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 clamp(28px, 4vw, 44px); font: 400 .7rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sub); }
  .crumbs li + li::before { content: "·"; margin: 0 12px; color: var(--tufo); }
  .crumbs a { color: inherit; text-decoration: none; }
  .crumbs a:hover { color: var(--deep); }
  .page-hero--plain .crumbs ol { justify-content: center; }
  @media (max-width: 700px) {
    .crumbs li:not(:nth-last-child(2)) { display: none; }
    .crumbs li:nth-last-child(2)::before { content: "←"; margin: 0 10px 0 0; }
    .page-hero__text:has(.crumbs) > .eyebrow { display: none; }
  }

  /* --- galleria di archi --- */
  .arches { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(40px, 5vw, 72px) clamp(24px, 2.6vw, 40px); max-width: var(--max); margin: 0 auto; counter-reset: a; }
  .arches > .arch-card { flex: 0 1 300px; min-width: 0; }
  .arches--home { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .arches--journal > .arch-card { flex-basis: 440px; }
  .arches--home .arch-card:nth-child(even) { margin-top: clamp(40px, 6vw, 96px); }
  .arch-card a { display: grid; gap: 10px; justify-items: center; text-align: center; text-decoration: none; color: var(--ink); }
  .arch-card .frame { justify-self: stretch; margin: clamp(10px, 1.1vw, 14px) clamp(10px, 1.1vw, 14px) 20px; }
  .arch-card .frame__img { aspect-ratio: 3 / 4.2; }
  .arch-card__num { font: 400 .9rem/1 var(--didot); letter-spacing: .3em; color: var(--tufo); transform: translateZ(30px); }
  .arch-card h3 { transition: color .3s var(--ease); transform: translateZ(24px); }
  .arch-card p { color: var(--sub); margin: 0; font-size: .98rem; line-height: 1.65; }
  .arch-card .link-arrow { margin-top: 6px; }
  .reviews__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .reviews__read { flex-basis: 100%; font: italic 400 1.1rem/1.4 var(--italic); color: var(--sub); }
  .arch-card__mark { font: 400 .64rem/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--tufo); }
  .arches--signature > .arch-card { flex-basis: 330px; }
  .signature__lead { text-align: center; font: italic 400 clamp(1.15rem, 1.8vw, 1.5rem)/1.5 var(--italic); color: var(--sub); max-width: 34ch; margin: -12px auto clamp(40px, 5vw, 64px); }
  .arch-card a:hover h3 { color: var(--olive); }
  .arch-card a:hover { --zoom: 1.08; }
  .arch-card a:hover .frame__line { border-color: rgb(120 96 60 / .6); }

  /* --- l'essenziale: collage --- */
  .chapter--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 140px); align-items: center; max-width: 96rem; margin: 0 auto; }
  .chapter--split .chapter__head { justify-items: start; text-align: left; margin: 0 0 32px; }
  .collage { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 3.4vw, 52px); align-items: end; padding-top: 24px; }
  .collage > .frame .frame__img { aspect-ratio: 3 / 4.4; }
  .collage__small { margin-bottom: 18%; }
  .split__text { max-width: 34rem; display: grid; }
  .index-list { margin: 28px 0 30px; border-top: 1px solid var(--rule); }
  .index-list a { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font: 400 clamp(1.25rem, 1.8vw, 1.55rem)/1.2 var(--display); color: var(--deep); transition: padding .5s var(--ease-out), color .3s; }
  .index-list a span { font: 400 .8rem/1 var(--didot); color: var(--tufo); letter-spacing: .2em; min-width: 2.6em; }
  .index-list a:hover { padding-left: 12px; color: var(--olive); }

  /* --- capitoli scuri, con il porticato in cima --- */
  .chapter--dark { background: var(--verde); color: color-mix(in srgb, #fff 84%, transparent); isolation: isolate; margin-top: 64px; }
  .chapter--dark::before { content: ""; position: absolute; inset: 0; background: var(--texture) 0 0 / var(--tile); mix-blend-mode: multiply; opacity: .3; z-index: -1; pointer-events: none; }
  .chapter--dark h2, .chapter--dark h3 { color: #fff; }
  .chapter--dark .chapter__num { color: var(--tufo-light); }
  .arcade, .epilogue__arcade { position: absolute; left: 0; right: 0; top: -60px; height: 60px; pointer-events: none; opacity: .85;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='60' viewBox='0 0 84 60'%3E%3Cg fill='none' stroke='%23a88a5c' stroke-width='1'%3E%3Cpath d='M10 60V31a32 32 0 0 1 64 0V60'/%3E%3Cpath d='M16 60V31a26 26 0 0 1 52 0V60' opacity='.45'/%3E%3Cpath d='M4 31h12M68 31h12M0 59.5h84'/%3E%3C/g%3E%3C/svg%3E") 50% 100% / 84px 60px repeat-x; }
  .arcade--top { top: -60px; }

  /* --- tre passi --- */
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--max); margin: 0 auto; }
  .step { position: relative; padding: 12px clamp(20px, 3.4vw, 56px) 0; text-align: center; }
  .step + .step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: repeating-linear-gradient(90deg, var(--rule-light) 0 1px, transparent 1px 4px); }
  .chapter:not(.chapter--dark) .step + .step::before { background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 4px); }
  .step__num { display: block; font: 400 clamp(3.6rem, 6vw, 5.6rem)/1 var(--didot); color: var(--tufo-light); margin-bottom: 22px; }
  .chapter:not(.chapter--dark) .step__num { color: var(--tufo); }
  .step h3 { margin-bottom: 14px; }
  .step p { margin: 0 auto; max-width: 28ch; color: inherit; }
  .chapter--dark .step p { color: color-mix(in srgb, #fff 78%, transparent); }
  .chapter--dark .prose { margin: 56px auto 0; text-align: center; }

  /* --- finestra parallax (dalla skill) --- */
  .px-window { position: relative; min-height: 86svh; overflow: hidden; display: grid; place-items: center; padding: clamp(80px, 12vw, 160px) var(--gutter); isolation: isolate; color: #fff; }
  .px-window__media { position: absolute; inset: 0; z-index: -2; }
  .px-window__media img { position: absolute; left: 0; top: -25%; width: 100%; height: 150%; object-fit: cover; will-change: transform; }
  .px-window__veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 50% 50%, rgb(40 50 38 / .4), rgb(40 50 38 / .15)); }
  .px-window:not(:has(.px-window__inner)) { min-height: 72svh; }
  .px-window:not(:has(.px-window__inner)) .px-window__veil { background: linear-gradient(180deg, rgb(3 30 9 / .12), rgb(3 30 9 / 0) 30%, rgb(3 30 9 / 0) 70%, rgb(3 30 9 / .12)); }
  .px-window__inner { max-width: 46rem; text-align: center; padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 72px); background: rgb(70 82 64 / .42); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / .22); outline: 1px solid rgb(255 255 255 / .12); outline-offset: 10px; }
  .px-window__inner .chapter__head { margin-bottom: 28px; }
  .px-window__inner h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); }
  .px-window__inner .chapter__num { color: var(--tufo-light); }
  .px-window__inner .prose { color: color-mix(in srgb, #fff 90%, transparent); margin: 0 auto; }
  .px-window__inner strong, .px-window__inner a { color: #fff; }
  .px-window--cta .px-window__inner p { color: color-mix(in srgb, #fff 90%, transparent); max-width: 38ch; margin-inline: auto; }
  .px-window--cta .px-window__inner .cta-line { margin-top: clamp(28px, 4vw, 40px); }
  .px-window__inner .btn--solid { color: var(--t); }
  .px-window__inner .btn--solid:hover { color: var(--c); }
  .px-window--cta .px-window__title { margin-bottom: 22px; text-wrap: balance; }
  .season { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 34px; }
  .season li { display: grid; justify-items: center; gap: 10px; font: 400 .62rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, #fff 50%, transparent); }
  .season li::before { content: ""; width: 100%; height: 3px; background: rgb(255 255 255 / .18); }
  .season li.on { color: #fff; } .season li.on::before { background: color-mix(in srgb, var(--salvia) 80%, transparent); }
  .season li.best::before { background: var(--tufo-light); height: 7px; margin-top: -4px; }
  .season li.best span { color: var(--tufo-light); font-weight: 500; }

  /* --- il colonnato --- */
  .colonnade { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(36px, 4vw, 56px) clamp(20px, 2.6vw, 40px); max-width: var(--max); margin: 0 auto; perspective: 1200px; }
  .colonnade > .pillar { flex: 1 1 200px; max-width: 280px; }
  .chapter:has(.colonnade), .chapter__body:has(.colonnade) { overflow-x: clip; }
  .pillar { display: grid; justify-items: center; align-content: start; text-align: center; gap: 12px; padding: 0 6px; }
  .pillar .col-icon { height: clamp(64px, 7vw, 96px); color: var(--deep); margin-bottom: 8px; filter: drop-shadow(0 10px 14px rgb(3 30 9 / .18)); }
  .pillar__num { font: 400 .85rem/1 var(--didot); color: var(--tufo); letter-spacing: .3em; }
  .pillar h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
  .pillar p { color: var(--sub); font-size: .98rem; margin: 0; max-width: 26ch; }
  .chapter--dark .pillar .col-icon { color: var(--tufo-light); }
  .chapter--dark .pillar p { color: color-mix(in srgb, #fff 74%, transparent); }

  /* --- domande frequenti --- */
  .faq { max-width: 52rem; margin: 0 auto; border-top: 1px solid var(--rule); }
  .faq details { border-bottom: 1px solid var(--rule); }
  .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; cursor: pointer; font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.3 var(--display); color: var(--deep); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary i { position: relative; width: 18px; height: 18px; flex: none; }
  .faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--tufo); transition: transform .5s var(--ease-out); }
  .faq summary i::after { transform: rotate(90deg); }
  .faq details[open] summary i::after { transform: rotate(0); }
  .faq details p { margin: 0; padding: 0 3rem 30px 0; color: var(--sub); max-width: 44rem; }
  .faq summary:hover { color: var(--olive); }

  /* --- epilogo --- */
  .epilogue { position: relative; background: var(--verde); color: #fff; text-align: center; display: grid; justify-items: center; gap: 36px; padding: clamp(110px, 14vw, 220px) var(--gutter) clamp(100px, 12vw, 180px); margin-top: 64px; isolation: isolate; }
  .epilogue::before { content: ""; position: absolute; inset: 0; background: var(--texture) 0 0 / var(--tile); mix-blend-mode: multiply; opacity: .3; z-index: -1; }
  .epilogue::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: clamp(48px, 7vw, 96px); background: linear-gradient(var(--tufo-light), transparent); translate: -50% 0; opacity: .6; }
  .epilogue__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .epilogue h2 { color: #fff; font: italic 400 clamp(1.9rem, 4.2vw, 3.8rem)/1.2 var(--italic); max-width: 24ch; }
  .epilogue .chapter__num span { letter-spacing: .14em; font-size: 1.2rem; }
  .epilogue + .site-footer, main:has(> .epilogue:last-child) + .site-footer { padding-top: clamp(48px, 7vw, 96px); }

  /* --- dettagli delle esperienze --- */
  .inscriptions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-width: 64rem; margin: 0 auto; border-block: 1px solid var(--rule); }
  .inscriptions li { display: grid; justify-items: center; text-align: center; gap: 18px; padding: clamp(32px, 4vw, 52px) clamp(16px, 2.4vw, 32px); font: 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.35 var(--display); color: var(--deep); }
  .inscriptions li + li { border-left: 1px solid var(--rule); }
  .inscriptions .col-icon { height: 40px; color: var(--tufo); }
  .ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(32px, 5vw, 72px); max-width: 60rem; margin: 0 auto; }
  .ledger > div { display: grid; grid-template-columns: 10.5rem 1fr; gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px dotted color-mix(in srgb, var(--tufo) 70%, transparent); }
  .ledger dt { font: 400 .7rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--olive); }
  .ledger dd { font: 400 1.12rem/1.45 var(--display); color: var(--ink); }
  .chapter--ways-note { text-align: center; }
  .chapter--ways-note .chapter__head h2 { font-size: clamp(1.9rem, 3.8vw, 3.3rem); max-width: 22ch; }
  .chapter--ways-note .prose { margin: 0 auto; font-size: 1.12rem; }
  .people { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 40px; }
  .people li { flex: 1 1 200px; max-width: 260px; }
  .people li { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 34px 18px 30px; border: 1px solid var(--rule); background: color-mix(in srgb, #fff 18%, transparent); }
  .people__initial { width: 76px; height: 96px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid var(--tufo); border-radius: 999px 999px 0 0; font: 400 2.4rem/1 var(--didot); color: var(--deep); }
  .people__photo { width: min(100%, 190px); margin: 4px 0 18px; }
  .people strong { font: 400 1.3rem/1.2 var(--display); }
  .people li > span:last-child { font: 400 .7rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
  .chapter__body:has(.colonnade) { max-width: var(--max); }
  .chapter__body .steps { grid-template-columns: 1fr; gap: 40px; margin: 44px 0; }
  .chapter__body .step { text-align: left; padding: 0 0 0 clamp(72px, 9vw, 110px); }
  .chapter__body .step + .step::before { display: none; }
  .chapter__body .step__num { position: absolute; left: 0; top: -4px; font-size: clamp(2.6rem, 4vw, 3.4rem); }
  .chapter__body .step p { margin: 0; max-width: none; }
  .chapter__body .ledger { grid-template-columns: 1fr; }
}

/* ============================ RESPONSIVE ============================ */
@layer modifiers {
  @media (max-width: 1420px) { .primary a, .tools .langs a, .tools .langs span { letter-spacing: .17em; } .tools { gap: 16px; } }
  @media (max-width: 1239px) {
    .site-header { grid-template-columns: auto 1fr; }
    .brand { grid-column: 1; }
    .primary, .tools .langs, .tools .btn { display: none; }
    .tools { grid-column: 2; }
    .menu-toggle { display: inline-flex; }
  }
  @media (max-width: 1100px) {
    .arches--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .arches--home .arch-card:nth-child(even) { margin-top: 0; }
    .arches--home .arch-card:nth-child(2), .arches--home .arch-card:nth-child(4) { translate: 0 clamp(32px, 6vw, 72px); }
  }
  @media (max-width: 900px) {
    .page-hero { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--header) + 36px); gap: 48px; }
    .page-hero--after { padding-top: 56px; }
    .page-hero__frame { width: min(86%, 460px); }
    .chapter--split { grid-template-columns: 1fr; }
    .collage { max-width: 520px; width: 100%; margin: 0 auto; }
    .steps { grid-template-columns: 1fr; gap: 56px; }
    .step + .step::before { left: 20%; right: 20%; top: -28px; bottom: auto; width: auto; height: 1px; background: var(--rule-light) !important; }
    .inscriptions li + li { border-left: 0; border-top: 1px solid var(--rule); }
    .hero__content { padding-bottom: clamp(96px, 16vh, 150px); }
    .scroll-cue i { height: 36px; }
  }
  @media (max-width: 700px) {
    table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
    table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    table.stack tr { padding: 18px 0; border-bottom: 1px solid var(--rule); }
    table.stack td { border: 0; padding: 4px 0; }
    table.stack td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font: 500 .66rem/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--olive); margin-top: 6px; }
    .crumbs li { min-width: 0; overflow-wrap: anywhere; }
    .page-hero h1, .hero--page .hero__title { font-size: clamp(2.2rem, 10.5vw, 3.4rem); }
  }
  @media (max-width: 520px) {
    .btn { padding: 1.1em 1.35em 1.05em; letter-spacing: .15em; font-size: .7rem; white-space: nowrap; max-width: 100%; }
    .link-arrow { letter-spacing: .18em; }
  }
  @media (max-width: 380px) {
    .btn { letter-spacing: .09em; padding-inline: 1.1em; }
  }
  @media (max-width: 340px) {
    .btn { font-size: .64rem; letter-spacing: .06em; padding-inline: .9em; white-space: normal; text-wrap: balance; line-height: 1.5; }
  }
  @media (max-width: 700px) {
    .arches--home, .arches:not(.arches--journal) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 22px; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 28px; scrollbar-width: none; }
    .arches::-webkit-scrollbar { display: none; }
    .arches:not(.arches--journal) > .arch-card { flex: 0 0 78%; scroll-snap-align: center; translate: none !important; }
    .hero__title { font-size: clamp(2.7rem, 12.5vw, 4rem); }
    .hero__veil { background: linear-gradient(0deg, rgb(28 36 26 / .72) 0%, rgb(28 36 26 / .22) 55%, rgb(28 36 26 / .35) 100%); }
    .season { grid-template-columns: repeat(6, 1fr); row-gap: 18px; }
    .ledger > div { grid-template-columns: 1fr; gap: 6px; }
    .faq details p { padding-right: 0; }
    .px-window__inner { padding-inline: 22px; }
  }
}

/* ============================ MOVIMENTO ============================ */
@layer motion {
  @keyframes cue { 0% { top: -40%; } 60%, 100% { top: 110%; } }
  @keyframes rise { from { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .hero__in { opacity: 0; animation: rise 1.3s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * .16s + .35s); }
  .page-hero__rule { animation: draw 1.6s var(--ease-out) .4s both; }

  /* comparsa allo scroll, una volta sola */
  .js .reveal { opacity: 0; translate: 0 24px; transition: opacity 1.1s var(--ease-out), translate 1.1s var(--ease-out); transition-delay: var(--delay, 0s); }
  .js .reveal.is-visible { opacity: 1; translate: none; }
  /* le cornici si svelano dal basso, come una porta che si apre */
  .js .frame .frame__img { -webkit-clip-path: inset(100% 0 0 0 round var(--ri)); clip-path: inset(100% 0 0 0 round var(--ri)); transition: clip-path 1.5s var(--ease-out), -webkit-clip-path 1.5s var(--ease-out); transition-delay: var(--delay, 0s); }
  .js .frame.is-visible .frame__img { -webkit-clip-path: inset(0 0 0 0 round var(--ri)); clip-path: inset(0 0 0 0 round var(--ri)); }

  /* colonnato in 3D legato allo scroll, dove il browser lo supporta */
  @supports (animation-timeline: view()) {
    @keyframes stand { from { opacity: 0; transform: rotateX(62deg) translate3d(0, 80px, -120px); } to { opacity: 1; transform: none; } }
    .js .colonnade .pillar { transform-origin: 50% 100%; animation: stand linear both; animation-timeline: view(); animation-range: entry 5% cover 38%; opacity: 1; transition: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .reveal, .hero__in { opacity: 1; translate: none; transform: none; filter: none; }
    .js .frame .frame__img { -webkit-clip-path: inset(0 round var(--ri)); clip-path: inset(0 round var(--ri)); }
    .js .colonnade .pillar { animation: none; }
    [data-tilt] { transform: none !important; }
  }
}

/* banner dei cookie con i colori del marchio */
#cc-main { --cc-font-family: var(--sans); --cc-bg: var(--calce); --cc-primary-color: var(--ink); --cc-secondary-color: var(--sub);
  --cc-btn-primary-bg: var(--deep); --cc-btn-primary-border-color: var(--deep); --cc-btn-primary-hover-bg: var(--night); --cc-btn-primary-hover-border-color: var(--night);
  --cc-btn-secondary-bg: transparent; --cc-btn-secondary-border-color: var(--deep); --cc-btn-secondary-color: var(--deep); --cc-btn-secondary-hover-bg: var(--calce-2);
  --cc-btn-border-radius: 0; --cc-modal-border-radius: 0; --cc-separator-border-color: var(--rule); --cc-toggle-on-bg: var(--deep); --cc-link-color: var(--deep); }
#cc-main .cm, #cc-main .pm { background-image: var(--texture); background-size: var(--tile); box-shadow: var(--shadow-lg); border: 1px solid var(--rule); }
#cc-main .cm__title, #cc-main .pm__title { font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--deep); }
#cc-main .cm .cm__btn, #cc-main .pm .pm__btn { font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }

/* recensioni: targhe incise nella parete, scorrono di lato */
@layer components {
  .reviews { display: flex; gap: clamp(20px, 2.6vw, 36px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px var(--gutter) 28px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; justify-content: safe center; }
  .reviews::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 min(84vw, 400px); scroll-snap-align: center; display: grid; align-content: start; gap: 18px; text-align: center; padding: clamp(28px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
    background: var(--niche) var(--texture) 21px 9px / var(--tile); background-blend-mode: multiply; border-radius: 2px;
    box-shadow: inset 6px 8px 14px rgb(96 80 52 / .26), inset 2px 3px 3px rgb(96 80 52 / .18), inset -3px -4px 8px rgb(255 255 255 / .9), 0 1px 0 rgb(255 255 255 / .9); }
  .review__stars { margin: 0; color: var(--tufo); letter-spacing: .3em; font-size: .95rem; }
  .review blockquote p { margin: 0; font: italic 400 clamp(1.1rem, 1.5vw, 1.3rem)/1.55 var(--italic); color: var(--ink); }
  .review__by { margin: 0; display: grid; gap: 4px; font-size: .9rem; color: var(--sub); }
  .review__by strong { font: 400 1.05rem/1.3 var(--display); color: var(--deep); }
  .review__by .review__country { font: 300 .9rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--sub); }
  .review__by span { font: 400 .66rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
  .reviews__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
}

/* --- modulo di richiesta (Contatti) --- */
@layer components {
  .inquiry { display: grid; gap: 22px; margin-top: 36px; }
  .inquiry__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 22px; }
  .inquiry__field { display: grid; gap: 8px; min-width: 0; }
  .inquiry__field > span, .inquiry__choice legend { font: 400 .72rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--deep); }
  .inquiry small { letter-spacing: .06em; text-transform: none; color: var(--sub); font-size: .9em; }
  .inquiry input[type="text"], .inquiry input[type="email"], .inquiry input[type="tel"], .inquiry textarea {
    width: 100%; min-width: 0; font: 300 1rem/1.5 var(--sans); color: var(--ink); background: color-mix(in srgb, #fff 55%, transparent);
    border: 1px solid var(--rule); border-radius: 2px; padding: .8em .9em; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
  .inquiry textarea { resize: vertical; min-height: 9rem; }
  .inquiry input:focus-visible, .inquiry textarea:focus-visible { outline: none; border-color: var(--tufo); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tufo) 22%, transparent); }
  .inquiry__choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
  .inquiry__choice legend { margin-bottom: 10px; padding: 0; }
  .inquiry__choice label { position: relative; cursor: pointer; }
  .inquiry__choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .inquiry__choice span { display: inline-block; padding: .6em 1.05em; border: 1px solid var(--rule); border-radius: 999px; font: 300 .95rem/1.3 var(--sans); color: var(--ink);
    background: color-mix(in srgb, #fff 40%, transparent); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
  .inquiry__choice input:checked + span { background: var(--deep); border-color: var(--deep); color: #fff; }
  .inquiry__choice input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tufo) 35%, transparent); }
  .inquiry__check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font: 300 .92rem/1.55 var(--sans); color: var(--sub); cursor: pointer; }
  .inquiry__check input { width: 18px; height: 18px; margin-top: .2em; accent-color: var(--deep); }
  .inquiry__privacy { font: 300 .88rem/1.6 var(--sans); color: var(--sub); margin: 0; }
  .inquiry__privacy a { color: var(--deep); }
  .inquiry__send { margin: 0; }
  .inquiry__send .btn { white-space: nowrap; }
  .inquiry__status { margin: 0; font: 400 1rem/1.5 var(--sans); color: var(--deep); min-height: 1.5em; }
  .inquiry__status.is-error { color: #8a2a12; }
  .inquiry.is-sent > :not(.inquiry__status) { display: none; }
  .inquiry.is-sent .inquiry__status { font: italic 400 clamp(1.25rem, 2vw, 1.6rem)/1.45 var(--italic); padding: 28px 0; }
}

/* --- WhatsApp discreto, solo sul telefono --- */
@layer components {
  .wa-float { display: none; }
  @media (max-width: 900px) {
    .wa-float { position: fixed; z-index: 35; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 42px; height: 42px;
      display: grid; place-items: center; border-radius: 50%; color: #fff;
      background: color-mix(in srgb, var(--deep) 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      border: 1px solid rgb(255 255 255 / .22); box-shadow: 0 6px 18px -8px rgb(3 30 9 / .45);
      opacity: 0; transform: translateY(8px) scale(.94); pointer-events: none;
      transition: opacity .5s var(--ease), transform .5s var(--ease); -webkit-tap-highlight-color: transparent; }
    .wa-float svg { width: 19px; height: 19px; fill: currentColor; }
    .wa-float.is-on { opacity: .92; transform: none; pointer-events: auto; }
    .wa-float:active { transform: scale(.94); }
    html.show--consent .wa-float, html.show--preferences .wa-float { opacity: 0; pointer-events: none; }
  }
  @media (prefers-reduced-motion: reduce) { .wa-float { transition: opacity .3s linear; transform: none; } }
}