/* ============================================================================
   FICO D'INDIA — site.css (v2 · "Calcare & Pala")
   Cream limestone page · ink night · pad green · dead-pad brown · carmine.
   Fraunces + JetBrains Mono. Everything moves with scroll, nothing "plays".
   ========================================================================== */

:root {
  --fsize: 1.0416667vw;
  --cream:   #F2ECDF;
  --cream-2: #E7DFCC;
  --ink:     #171A15;
  --ink-2:   #22271F;
  --ink-3:   #343B30;
  --pala:    #7E9B57;
  --pala-2:  #B9C47D;
  --secco:   #8B7A5C;
  --paglia:  #C8A76B;
  --frutto:  #E5955A;
  --carminio:#9B1E3A;
  --mare:    #2C8FA3;
  --pietra:  #B8B1A4;

  --font-d: "Fraunces", "Iowan Old Style", "Times New Roman", serif;
  --font-m: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 3.75vw;
  --hair: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);

  --ui: var(--ink);
  --bg: var(--cream);
}
@media (min-width: 1921px) { :root { --fsize: 20px; } }
@media (max-width: 1366px) { :root { --fsize: 1.25vw; } }
@media (max-width: 991px)  { :root { --fsize: 2.604vw; --gutter: 6vw; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fsize); background: var(--ink); scrollbar-width: none; overflow-x: clip; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; font-family: var(--font-d); font-optical-sizing: auto; font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--ink); background: var(--cream); line-height: 1; -webkit-font-smoothing: antialiased; }
a, button, [data-cursor] { cursor: pointer; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
strong { font-weight: 500; }
::selection { color: var(--cream); background: var(--carminio); }

html[data-theme="dark"]  { --ui: var(--cream); }
html[data-theme="light"] { --ui: var(--ink); }
html[data-theme="color"] { --ui: var(--cream); }

section, footer { position: relative; }
[data-bg="light"] { background: var(--cream); color: var(--ink); }
[data-bg="dark"]  { background: var(--ink);   color: var(--cream); }
[data-bg="color"] { background: var(--carminio); color: var(--cream); }

/* ---------------------------------------------------------------- TYPE */
.l1, .l2, .mono { font-family: var(--font-m); }
.l1 { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; line-height: 1.4; }
.l2 { font-size: .56rem; letter-spacing: .32em; text-transform: uppercase; font-weight: 500; line-height: 1.5; opacity: .72; }
.mono { font-size: .72rem; line-height: 1.6; letter-spacing: .02em; }
.coord { font-family: var(--font-m); font-size: .6rem; letter-spacing: .18em; }
.coord::before { content: "[ "; opacity: .5; } .coord::after { content: " ]"; opacity: .5; }

.giant { font-size: 21vw; line-height: .78; letter-spacing: -.045em; font-weight: 300; font-variation-settings: "SOFT" 100, "WONK" 1; white-space: nowrap; }
.d1 { font-size: 11rem; line-height: .86; letter-spacing: -.035em; font-weight: 300; font-variation-settings: "SOFT" 100, "WONK" 1; }
.d2 { font-size: 6.6rem;  line-height: .92; letter-spacing: -.03em;  font-weight: 300; font-variation-settings: "SOFT" 60, "WONK" 1; }
.d3 { font-size: 3.8rem;  line-height: .96; letter-spacing: -.02em;  font-weight: 300; }
.d4 { font-size: 2.2rem;  line-height: 1.05; letter-spacing: -.015em; font-weight: 400; }
.p1 { font-size: 1.28rem; line-height: 1.42; font-weight: 300; }
.p2 { font-size: 1rem;    line-height: 1.55; font-weight: 400; }
.p3 { font-size: .86rem;  line-height: 1.6;  font-weight: 400; }
.it { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.num { font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; background: var(--ink); color: var(--cream); padding: .45rem .7rem; }
[data-bg="dark"] .tag, [data-bg="color"] .tag { background: var(--cream); color: var(--ink); }
sup a { font-family: var(--font-m); font-size: .55em; color: var(--carminio); text-decoration: none; letter-spacing: 0; }
[data-bg="dark"] sup a, [data-bg="color"] sup a { color: var(--frutto); }
.wrap { padding-inline: var(--gutter); }
.hair-t { border-top: var(--hair); }

/* soft entrance for ordinary blocks (no chars, no lines: one quiet move) */
.in { opacity: 0; transform: translateY(1.2rem); filter: blur(4px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out); }
.in.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .in { opacity: 1; transform: none; filter: none; transition: none; } }

/* ---------------------------------------------------------------- CHROME */
#grid { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: grid; grid-template-columns: repeat(6, 1fr); padding-inline: var(--gutter); color: var(--ui); opacity: .13; transition: color .5s var(--ease-out); }
#grid i { border-left: 1px solid currentColor; }
#grid i:last-child { border-right: 1px solid currentColor; }
@media (max-width: 991px) { #grid { grid-template-columns: repeat(3, 1fr); } }

.site-header { position: fixed; top: var(--apulsense-bar-h, 0px); left: 0; width: 100%; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.2rem var(--gutter); color: var(--ui); pointer-events: none; transition: color .5s var(--ease-out), top .4s var(--ease-out); }
.site-header > * { pointer-events: auto; }
.site-header .logo { display: flex; flex-direction: column; gap: .25rem; }
.site-header .logo b { font-weight: 400; font-style: italic; font-size: 1.15rem; letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.site-header .mid { justify-self: center; }
.site-header .right { display: flex; justify-content: flex-end; gap: 1.6rem; align-items: center; }
.audio-btn { display: inline-flex; align-items: center; gap: .6rem; }
.audio-btn .bars { display: inline-flex; gap: 2px; align-items: flex-end; height: .8rem; }
.audio-btn .bars i { width: 2px; height: 30%; background: currentColor; transform-origin: bottom; }
.audio-btn.is-on .bars i { animation: eq .9s ease-in-out infinite; }
.audio-btn.is-on .bars i:nth-child(2) { animation-delay: -.3s; }
.audio-btn.is-on .bars i:nth-child(3) { animation-delay: -.6s; }
.audio-btn.is-on .bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%,100% { height: 30%; } 50% { height: 100%; } }
@media (max-width: 991px) { .site-header { grid-template-columns: 1fr auto; } .site-header .mid { display: none; } }

#rail { position: fixed; right: 2.4vw; top: 14vh; height: 72vh; width: 1px; z-index: 90; color: var(--ui); --p: 0; transition: color .5s var(--ease-out); }
#rail .track { position: absolute; inset: 0; background: currentColor; opacity: .22; }
#rail .fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p) * 100%); background: currentColor; }
#rail .thumb { position: absolute; left: 50%; top: calc(var(--p) * 100%); transform: translate(-50%, -50%); font-family: var(--font-m); font-size: .56rem; letter-spacing: .1em; background: var(--bg); color: var(--ink); padding: .25rem .35rem; }
html[data-theme="dark"] #rail .thumb, html[data-theme="color"] #rail .thumb { background: var(--ink); color: var(--cream); }
#rail a { position: absolute; left: 50%; width: .5rem; height: 1px; background: currentColor; transform: translateX(-50%); }
#rail a::after { content: attr(data-t); position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-family: var(--font-m); font-size: .52rem; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .25s; }
#rail a:hover::after { opacity: 1; }
@media (max-width: 991px) { #rail { display: none; } }

#cursor { position: fixed; top: 0; left: 0; z-index: 10000; width: 12px; height: 12px; pointer-events: none; }
#cursor > div { position: relative; width: 100%; height: 100%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--frutto); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cream) 85%, transparent), 0 2px 10px rgb(0 0 0 / .25); display: grid; place-items: center; overflow: hidden; transition: width .35s var(--ease-out), height .35s var(--ease-out); }
#cursor span { opacity: 0; white-space: nowrap; font-family: var(--font-m); font-size: .52rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); transition: opacity .3s; }
#cursor.is-big > div { width: 5.2rem; height: 5.2rem; background: var(--cream); }
#cursor.is-big span { opacity: 1; }
@media (max-width: 991px), (pointer: coarse) { #cursor { display: none; } }

/* ---------------------------------------------------------------- PRELOADER */
#preloader { position: fixed; inset: 0; z-index: 1000; background: var(--ink); color: var(--cream); display: grid; grid-template-rows: auto 1fr auto; padding: calc(1.6rem + var(--apulsense-bar-h, 0px)) var(--gutter) 1.6rem; will-change: clip-path; }
#preloader .pre-top, #preloader .pre-bot { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
#preloader .pre-bot { align-items: flex-end; }
#preloader .pre-mid { display: grid; place-items: center; }
#preloader .pre-pala { width: 8.5rem; height: auto; overflow: visible; }
#preloader .pre-pala .outline { fill: none; stroke: var(--cream); stroke-width: .8; opacity: .5; }
#preloader .pre-pala .fill { fill: var(--pala); clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0); transition: clip-path .18s linear; }
#preloader .pre-pala .areola { fill: var(--cream); opacity: .5; }
#preloader .pre-num { font-size: 11rem; line-height: .8; letter-spacing: -.05em; }
#preloader .pre-num small { font-size: 2.2rem; letter-spacing: 0; vertical-align: top; margin-left: .2em; font-style: italic; }
#preloader .pre-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: color-mix(in srgb, var(--cream) 18%, transparent); }
#preloader .pre-bar i { display: block; height: 100%; width: 100%; background: var(--pala); transform-origin: left; transform: scaleX(0); }
@media (max-width: 991px) { #preloader .pre-num { font-size: 5.6rem; } }

/* ---------------------------------------------------------------- SCRUB STAGES + VEIL */
.scrub { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); --veil: 0; }
.stage canvas, .stage .poster, .stage > video, .stage > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage .poster.is-hidden { opacity: 0; }
.stage .media { position: absolute; inset: 0; }
.stage .media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage .glare { position: absolute; inset: 0; background: var(--cream); mix-blend-mode: screen; opacity: calc(var(--veil) * .9); pointer-events: none; z-index: 1; }
.stage .veil { position: absolute; inset: 0; background: var(--cream); opacity: calc(var(--veil) * var(--veil)); pointer-events: none; z-index: 3; }
.stage .shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(23 26 21 / .5), transparent 32%, transparent 60%, rgb(23 26 21 / .6)); pointer-events: none; }
.stage .over { position: absolute; inset: 0; z-index: 2; color: var(--cream); pointer-events: none; }
.stage .cap { position: absolute; max-width: 22rem; opacity: 0; transform: translateY(1rem); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.stage .cap.is-on { opacity: 1; transform: none; }
.stage .cap .l2 { display: block; margin-bottom: .6rem; opacity: .85; }
.stage .cap .d4 { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.stage .loading { position: absolute; left: var(--gutter); bottom: 1.6rem; z-index: 3; color: var(--cream); opacity: .75; }
.stage .loading.is-hidden { display: none; }
.stage .corner { position: absolute; }
.stage .corner.tl { left: var(--gutter); top: calc(6.2rem + var(--apulsense-bar-h, 0px)); transition: top .4s var(--ease-out); }
.stage .corner.tr { right: var(--gutter); top: calc(6.2rem + var(--apulsense-bar-h, 0px)); text-align: right; transition: top .4s var(--ease-out); }
.stage .corner.bl { left: var(--gutter); bottom: 2rem; }
.stage .corner.br { right: var(--gutter); bottom: 2rem; text-align: right; }

/* giant word cut by the bottom edge */
.cutword { position: absolute; left: 0; right: 0; bottom: -.16em; text-align: center; pointer-events: none; will-change: transform; }

/* ---------------------------------------------------------------- HERO */
#hero .tagline { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-size: 1.7rem; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 300; }
#hero .tagline small { display: block; margin-top: 1rem; font-style: normal; }
#hero .hint { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .8rem; }
#hero .hint i { display: block; width: 1px; height: 2.4rem; background: currentColor; transform-origin: top; animation: hint 1.8s var(--ease-in-out) infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
#hero .cap.c1 { left: var(--gutter); top: 44%; }
#hero .cap.c2 { right: var(--gutter); top: 30%; text-align: right; }
#hero .cap.c3 { left: 50%; top: 40%; transform: translate(-50%, 1rem); text-align: center; max-width: 30rem; }
#hero .cap.c3.is-on { transform: translate(-50%, 0); }
#hero .cap.c3 .d4 { font-size: 4rem; }

/* ---------------------------------------------------------------- MANIFESTO */
#manifesto { padding: 14vh var(--gutter) 12vh; }
#manifesto .fade-text { max-width: 76rem; --p: 0; -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--p) * 120% - 10%), transparent calc(var(--p) * 120% + 18%)); mask-image: linear-gradient(to bottom, #000 calc(var(--p) * 120% - 10%), transparent calc(var(--p) * 120% + 18%)); }
.strike { position: relative; display: inline-block; }
.strike svg { position: absolute; left: -4%; top: 0; width: 108%; height: 100%; overflow: visible; pointer-events: none; }
.strike svg path { fill: none; stroke: var(--carminio); stroke-width: .06em; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 0)); }
.strike.ring svg path { stroke: var(--pala); }
#manifesto .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5vw; margin-top: 12vh; }
#manifesto .fact { border-top: var(--hair); padding-top: 1.2rem; }
#manifesto .fact .num { font-size: 5.6rem; line-height: .9; display: block; margin: .5rem 0 .8rem; }
#manifesto .fact .num small { font-size: 1.4rem; letter-spacing: 0; font-style: italic; margin-left: .15em; }
@media (max-width: 991px) { #manifesto .facts { grid-template-columns: 1fr; } }

/* chapter heads */
.chap { padding: 12vh var(--gutter) 6vh; display: grid; grid-template-columns: 1fr 2fr; gap: 3.75vw; align-items: end; }
.chap .l1 { display: flex; gap: 1.2rem; align-items: baseline; }
.chap .l1 i { font-style: normal; font-size: 1.8rem; font-family: var(--font-d); font-weight: 300; letter-spacing: -.02em; }
.chap .d2 { margin-top: 1.6rem; }
.chap .p1 { max-width: 34rem; }
@media (max-width: 991px) { .chap { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ORIGINE · IL VIAGGIO (globe) */
#viaggio { position: relative; }
#viaggio .journey { height: 560vh; position: relative; }
#viaggio .journey .hold { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 5fr 7fr; align-items: start; padding: 9vh var(--gutter) 0; overflow: hidden; }
#viaggio .journey .hold .globe-box { align-self: center; margin-top: -6vh; }
#viaggio .globe-box { position: relative; width: min(84vh, 46vw); aspect-ratio: 1; justify-self: center; }
#viaggio .globe-box svg { width: 100%; height: 100%; }
.g-sea { fill: var(--ink-2); }
.g-land { fill: var(--ink-3); stroke: color-mix(in srgb, var(--cream) 22%, transparent); stroke-width: .6; }
.g-grat { fill: none; stroke: color-mix(in srgb, var(--cream) 8%, transparent); stroke-width: .7; }
.g-outline { fill: none; stroke: color-mix(in srgb, var(--cream) 40%, transparent); stroke-width: 1; }
.g-route { fill: none; stroke: var(--frutto); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
.g-pt .g-dot { fill: var(--cream); opacity: .35; transition: opacity .4s; }
.g-pt .g-halo { fill: none; stroke: var(--cream); stroke-width: 1; opacity: 0; transform-origin: center; transform-box: fill-box; }
.g-pt.is-on .g-dot { opacity: 1; fill: var(--frutto); }
.g-pt.is-on .g-halo { opacity: .5; animation: halo 2.2s var(--ease-out) infinite; }
@keyframes halo { 0% { transform: scale(.3); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.g-cur { fill: var(--frutto); }
.g-cur-halo { fill: var(--frutto); opacity: .25; }
#viaggio .glabel { position: absolute; font-family: var(--font-m); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); opacity: 0; transition: opacity .5s; transform: translate(-50%, -140%); white-space: nowrap; }
#viaggio .glabel.is-on { opacity: .9; }
#viaggio .glabel small { display: block; text-transform: none; letter-spacing: .08em; opacity: .6; font-size: .5rem; margin-top: .2rem; }
#viaggio .stops { position: relative; height: 72vh; }
#viaggio .stop { position: absolute; inset: 0; display: grid; align-content: center; gap: 1.2rem; opacity: 0; transform: translateY(1.4rem); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); pointer-events: none; }
#viaggio .stop.is-on { opacity: 1; transform: none; pointer-events: auto; }
#viaggio .stop .year { font-size: 7rem; line-height: .82; letter-spacing: -.05em; display: flex; align-items: baseline; gap: 1.2rem; }
#viaggio .stop .year .l2 { max-width: 12rem; }
#viaggio .stop .d4 { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
#viaggio .stop .p2 { max-width: 30rem; opacity: .9; }
#viaggio .stop .card { width: 13rem; margin-top: .6rem; }
#viaggio .stop .card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
#viaggio .stats { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.6rem; display: flex; gap: 3vw; justify-content: space-between; border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); padding-top: .8rem; background: var(--ink); }
#viaggio .stats div .l2 { display: block; margin-bottom: .4rem; }
#viaggio .stats div .num { font-size: 1.9rem; }
#viaggio .quote { padding: 10vh var(--gutter) 14vh; display: grid; grid-template-columns: 1fr 1fr; gap: 3.75vw; align-items: end; }
@media (min-width: 992px) and (max-height: 820px) {
  #viaggio .journey .hold { padding-top: 7vh; }
  #viaggio .stops { height: 78vh; }
  #viaggio .stop { gap: .8rem; }
  #viaggio .stop .year { font-size: 4.6rem; }
  #viaggio .stop .p2 { font-size: .9rem; line-height: 1.45; }
  #viaggio .stop .card { width: 9rem; }
  #viaggio .stats { bottom: 1rem; padding-top: .6rem; }
  #viaggio .stats div .num { font-size: 1.5rem; }
}
#viaggio .quote .d3 { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
@media (max-width: 991px) {
  #viaggio .journey { height: auto; }
  #viaggio .journey .hold { position: relative; height: auto; grid-template-columns: 1fr; padding-top: 8vh; padding-bottom: 6vh; }
  #viaggio .globe-box { width: 84vw; margin: 0 auto 4vh; }
  #viaggio .stops { height: auto; display: grid; gap: 8vh; }
  #viaggio .stop { position: relative; opacity: 1; transform: none; pointer-events: auto; }
  #viaggio .stop .year { font-size: 4.2rem; }
  #viaggio .stats { position: static; flex-wrap: wrap; margin-top: 6vh; }
  #viaggio .quote { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- PUGLIA · IL MURO CHE SI COSTRUISCE */
#muro .wall-wrap { height: 360vh; position: relative; }
#muro .wall-hold { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; padding: 5.5rem var(--gutter) 1.6rem; overflow: hidden; }
#muro .wall-head { display: flex; justify-content: space-between; align-items: end; gap: 3vw; margin-bottom: 1.4rem; }
#muro .wall-head .p2 { max-width: 30rem; }
#muro .wall-head .count { font-size: 2.4rem; }
.wall { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: min(4.3vw, calc((100svh - 20.5rem) / 10)); gap: .45vw; grid-auto-flow: dense; }
.stone { position: relative; overflow: hidden; background: var(--pietra); --drop: -80vh; --rot: 0deg; --op: 0; transform: translateY(var(--drop)) rotate(var(--rot)); opacity: var(--op); will-change: transform; }
.stone img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.stone:hover img { transform: scale(1.06); }
.stone .s-cap { position: absolute; left: .8rem; bottom: .7rem; color: var(--cream); opacity: 0; transform: translateY(.4rem); transition: .5s var(--ease-out); text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.stone:hover .s-cap { opacity: 1; transform: none; }
.stone.s1 { clip-path: polygon(2% 10%, 12% 1%, 88% 0%, 99% 8%, 100% 90%, 91% 100%, 8% 99%, 0% 88%); }
.stone.s2 { clip-path: polygon(0% 14%, 9% 2%, 92% 0%, 100% 12%, 98% 86%, 88% 100%, 6% 98%, 1% 84%); }
.stone.s3 { clip-path: polygon(4% 3%, 96% 0%, 100% 18%, 97% 96%, 84% 100%, 3% 97%, 0% 80%, 1% 12%); }
.stone.s4 { clip-path: polygon(0% 6%, 16% 0%, 84% 2%, 100% 14%, 99% 82%, 92% 99%, 12% 100%, 0% 92%); }
.stone.key { background: var(--cream-2); color: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; padding: .9rem 1rem; }
.stone.key .n { font-family: var(--font-m); font-size: .58rem; letter-spacing: .24em; opacity: .55; margin-bottom: auto; }
.stone.key .d4 { font-size: clamp(1rem, 1.3vw, 1.5rem); line-height: 1.05; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.stone.key .p3 { font-size: .74rem; line-height: 1.4; opacity: .85; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.stone.key.q .d4 { font-size: clamp(.95rem, 1.2vw, 1.3rem); }
.stone.key.q { background: var(--pala); color: var(--cream); }
.stone.c2 { grid-column: span 2; } .stone.c3 { grid-column: span 3; } .stone.c4 { grid-column: span 4; } .stone.c5 { grid-column: span 5; }
.stone.r2 { grid-row: span 2; } .stone.r3 { grid-row: span 3; }
@media (max-width: 991px) {
  #muro .wall-wrap { height: auto; }
  #muro .wall-hold { position: relative; height: auto; }
  .wall { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 15vw; gap: 1vw; }
  .stone { --drop: 0; --op: 1; transform: none; }
  .stone.c5 { grid-column: span 6; } .stone.c4 { grid-column: span 4; }
  .stone.key { grid-row: span 2; padding: .8rem .9rem; }
  .stone.key .d4 { font-size: clamp(1rem, 3.4vw, 1.5rem); }
  .stone.key .p3 { -webkit-line-clamp: 3; font-size: .7rem; }
  #hero .corner.tr { top: calc(9.6rem + var(--apulsense-bar-h, 0px)); }
  #hero .corner.tr .coord:not(.clock) { display: none; }
}

/* ---------------------------------------------------------------- LA PALA · SI SECCA */
#pala .dry-wrap { height: 420vh; position: relative; }
#pala .dry-hold { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 6fr 6fr; gap: 3.75vw; align-items: center; padding: 0 var(--gutter); overflow: hidden; }
#pala .pad { position: relative; width: 100%; max-height: 82vh; aspect-ratio: 3 / 4; justify-self: end; overflow: hidden; }
#pala .pad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#pala .pad .live { filter: url(#wrinkle); will-change: filter; }
#pala .pad .tone { position: absolute; inset: 0; background: var(--secco); mix-blend-mode: multiply; opacity: var(--t, 0); }
#pala .pad .dead { opacity: var(--x, 0); }
#pala .pad .meter { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; color: var(--cream); display: flex; justify-content: space-between; align-items: end; text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
#pala .pad .meter .num { font-size: 2.4rem; }
#pala .steps { position: relative; height: 70vh; }
#pala .step { position: absolute; inset: 0; display: grid; align-content: center; gap: 1rem; opacity: 0; transform: translateY(1.2rem); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); pointer-events: none; }
#pala .step.is-on { opacity: 1; transform: none; pointer-events: auto; }
#pala .step .d3 { max-width: 12ch; }
#pala .step .p2 { max-width: 28rem; }
#pala .step .plate { width: 11rem; border: var(--hair); padding: .5rem; background: color-mix(in srgb, var(--cream) 92%, var(--paglia)); margin-top: .6rem; }
#pala .step .plate img { width: 100%; height: auto; }
#pala .step .plate .l2 { display: block; margin-top: .5rem; font-size: .48rem; }
#pala .glossary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5vw; padding: 8vh var(--gutter) 12vh; }
#pala .glossary div { border-top: var(--hair); padding-top: 1rem; }
#pala .glossary .l1 { display: block; margin-bottom: .7rem; }
@media (max-width: 991px) {
  #pala .dry-wrap { height: auto; }
  #pala .dry-hold { position: relative; height: auto; grid-template-columns: 1fr; padding-top: 4vh; }
  #pala .pad { max-height: none; }
  #pala .steps { height: auto; display: grid; gap: 6vh; margin-top: 6vh; }
  #pala .step { position: relative; opacity: 1; transform: none; pointer-events: auto; }
  #pala .glossary { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- NOTTE */
#notte { overflow: clip; }
#notte .night-wrap { height: 260vh; position: relative; }
#notte .night-hold { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 var(--gutter); overflow: hidden; }
#notte .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
#notte .moon { position: absolute; right: 12vw; width: 14vw; height: 14vw; border-radius: 50%; background: var(--cream); box-shadow: 0 0 6vw color-mix(in srgb, var(--cream) 30%, transparent); transform: translateY(var(--my, 60vh)); opacity: .92; }
#notte .stoma { position: relative; width: 22rem; height: 12rem; justify-self: center; }
#notte .stoma svg { width: 100%; height: 100%; overflow: visible; }
#notte .stoma .cell { fill: var(--pala); opacity: .9; }
#notte .stoma .pore { fill: var(--ink); }
#notte .stoma .l2 { position: absolute; left: 0; right: 0; bottom: -2rem; text-align: center; }
#notte .txt { position: relative; }
#notte .txt .p1 { max-width: 30rem; margin-top: 1.4rem; }
#notte .txt .row { display: flex; gap: 2.5vw; margin-top: 2.4rem; }
#notte .txt .row > div { flex: 1; border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent); padding-top: 1rem; }
#notte .txt .row .d4 { margin: .4rem 0 .5rem; font-size: 1.6rem; }
@media (max-width: 991px) {
  #notte .night-wrap { height: auto; }
  #notte .night-hold { position: relative; height: auto; grid-template-columns: 1fr; padding: 10vh var(--gutter); gap: 6vh; }
  #notte .moon { width: 26vw; height: 26vw; right: -4vw; top: 2vh; transform: none; opacity: .4; z-index: 0; }
  #notte .txt { z-index: 1; padding-top: 4vh; }
  #notte .txt .row { flex-direction: column; }
}

/* ---------------------------------------------------------------- PIETRA */
#ciottoli { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25vw; padding: 12vh var(--gutter) 14vh; align-items: start; }
#ciottoli .txt { grid-column: 1 / span 4; padding-top: 4vh; }
#ciottoli .txt .p2 { margin-top: 1.6rem; opacity: .85; }
#ciottoli figure { overflow: hidden; }
#ciottoli figure:nth-of-type(1) { grid-column: 6 / span 3; margin-top: 7vh; }
#ciottoli figure:nth-of-type(2) { grid-column: 9 / span 4; }
#ciottoli figure:nth-of-type(3) { grid-column: 5 / span 4; margin-top: -3vh; }
#ciottoli figure img { width: 100%; height: auto; transition: transform 1.4s var(--ease-out); }
#ciottoli figure:hover img { transform: scale(1.04); }
#ciottoli figcaption { margin-top: .6rem; }
@media (max-width: 991px) { #ciottoli .txt, #ciottoli figure:nth-of-type(n) { grid-column: 1 / -1; margin: 0; } }

/* ---------------------------------------------------------------- REPORTAGE */
#rep-title .over { display: grid; align-content: end; padding: 0 var(--gutter) 3rem; }
#rep-title .dateline { display: flex; flex-wrap: wrap; gap: 2.5vw; border-bottom: 1px solid color-mix(in srgb, var(--cream) 30%, transparent); padding-bottom: 1rem; margin-bottom: 2rem; }
#rep-title .d1 { font-size: 9rem; }
#rep-title .lead { max-width: 34rem; margin-top: 1.6rem; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
#sentiero .cap.c1 { left: var(--gutter); bottom: 18%; }
#sentiero .cap.c2 { right: var(--gutter); top: 24%; text-align: right; }
#sentiero .cap.c3 { left: var(--gutter); top: 26%; }
#sentiero .cap.c4 { right: var(--gutter); bottom: 16%; text-align: right; }

.article { display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 3.75vw; padding: 12vh var(--gutter); }
.article .meta { position: sticky; top: 16vh; align-self: start; display: grid; gap: 1.6rem; }
.article .meta dl { display: grid; gap: .3rem; border-top: var(--hair); padding-top: .8rem; margin: 0; }
.article .meta dt { font-family: var(--font-m); font-size: .54rem; letter-spacing: .3em; text-transform: uppercase; opacity: .6; }
.article .meta dd { margin: 0 0 .4rem; font-size: .9rem; line-height: 1.45; }
.article .prose { font-size: 1.1rem; line-height: 1.55; font-weight: 300; }
.article .prose p { margin-bottom: 1.3em; }
.article .prose p:first-of-type::first-letter { font-size: 4.6em; float: left; line-height: .78; padding: .08em .12em 0 0; font-weight: 300; font-variation-settings: "SOFT" 100, "WONK" 1; }
.article .prose h3 { font-size: 2rem; font-weight: 300; line-height: 1.05; margin: 2.2em 0 .7em; letter-spacing: -.02em; font-variation-settings: "SOFT" 80, "WONK" 1; }
.article .prose .pull { font-size: 2.1rem; line-height: 1.1; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; border-left: 1px solid var(--carminio); padding-left: 2vw; margin: 2em 0; color: var(--carminio); }
.article .fig { margin: 2.4em 0; }
.article .fig img { width: 100%; height: auto; }
.article .fig figcaption { margin-top: .7rem; display: flex; justify-content: space-between; gap: 1rem; }
.article .fig.wide { width: 118%; }
.article .fig.right { width: 60%; margin-left: 40%; }
.article .side { position: sticky; top: 16vh; align-self: start; }
.article .side img { width: 100%; height: auto; }
.article .side figcaption { margin-top: .6rem; }
@media (max-width: 991px) { .article { grid-template-columns: 1fr; } .article .meta, .article .side { position: static; } .article .fig.wide, .article .fig.right { width: 100%; margin: 2em 0; } }

#diagnosi { padding: 12vh var(--gutter); }
#diagnosi .dia-head { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: end; margin-bottom: 8vh; }
#diagnosi .dia-head .p1 { max-width: 30rem; }
#diagnosi .hyp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5vw; }
#diagnosi .hyp article { border-top: 1px solid color-mix(in srgb, var(--cream) 30%, transparent); padding-top: 1.2rem; display: grid; grid-template-rows: auto auto 1fr auto; gap: .8rem; min-height: 22rem; }
#diagnosi .hyp article .d3 { font-size: 3rem; line-height: .95; }
#diagnosi .hyp article .p3 { opacity: .9; }
#diagnosi .verdict { font-family: var(--font-m); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; display: inline-flex; gap: .6rem; align-items: center; }
#diagnosi .verdict i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cream); }
#diagnosi .verdict.hi i { background: var(--frutto); }
#diagnosi .macro { display: grid; grid-template-columns: 5fr 7fr; gap: 5vw; margin-top: 12vh; align-items: center; }
#diagnosi .macro img { width: 100%; height: auto; }
#diagnosi .macro figcaption { margin-top: .7rem; display: flex; justify-content: space-between; }
#diagnosi .sym li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; padding: .8rem 0; border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent); align-items: baseline; }
#diagnosi .sym li b { font-family: var(--font-m); font-weight: 500; font-size: .6rem; letter-spacing: .2em; }
#diagnosi .sym .chk { font-family: var(--font-m); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75; margin-left: .6rem; white-space: nowrap; }
@media (max-width: 991px) { #diagnosi .dia-head, #diagnosi .hyp, #diagnosi .macro { grid-template-columns: 1fr; } }

#fonti { padding: 8vh var(--gutter) 12vh; }
#fonti .f-head { border-bottom: var(--hair); padding-bottom: 1.6rem; margin-bottom: 2.4rem; display: flex; justify-content: space-between; align-items: end; gap: 3vw; }
#fonti .f-head .p3 { max-width: 26rem; opacity: .8; }
#fonti ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3vw; counter-reset: f; }
#fonti li { border-top: var(--hair); padding: .9rem 0; display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; font-size: .84rem; line-height: 1.45; }
#fonti li::before { counter-increment: f; content: counter(f, decimal-leading-zero); font-family: var(--font-m); font-size: .6rem; letter-spacing: .15em; opacity: .6; padding-top: .2rem; }
#fonti li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
#fonti li small { display: block; font-family: var(--font-m); font-size: .56rem; letter-spacing: .12em; opacity: .55; margin-top: .3rem; text-transform: uppercase; }
#fonti .note { margin-top: 3rem; max-width: 40rem; opacity: .8; }
@media (max-width: 991px) { #fonti ol { grid-template-columns: 1fr; } #fonti .f-head { flex-direction: column; align-items: flex-start; } }

/* ---------------------------------------------------------------- GALLERIA · PROVINO A CONTATTO */
#provino .g-head { padding: 12vh var(--gutter) 4vh; display: flex; justify-content: space-between; align-items: end; gap: 3vw; flex-wrap: wrap; }
#provino .g-head .p2 { max-width: 30rem; }
#provino .strip { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 14vh; cursor: grab; }
#provino .strip::-webkit-scrollbar { display: none; }
#provino .strip.is-drag { cursor: grabbing; }
#provino .track { position: relative; height: 38rem; width: max-content; padding-inline: var(--gutter); }
#provino .ruler { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: color-mix(in srgb, var(--ink) 25%, transparent); }
#provino .tick { position: absolute; top: 0; height: .7rem; width: 1px; background: color-mix(in srgb, var(--ink) 55%, transparent); }
#provino .tick span { position: absolute; top: 1rem; left: 0; transform: translateX(-50%); font-family: var(--font-m); font-size: .56rem; letter-spacing: .16em; white-space: nowrap; opacity: .8; }
#provino .gap { position: absolute; top: 0; height: 1px; border-top: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent); background: none; }
#provino .gap span { position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%); font-family: var(--font-m); font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; opacity: .55; white-space: nowrap; }
#provino .shot { position: absolute; top: 3.6rem; width: 14rem; user-select: none; -webkit-user-drag: none; transition: transform .5s var(--ease-out); }
#provino .shot.p { width: 10.2rem; }
#provino .shot img { width: 100%; height: auto; display: block; pointer-events: none; }
#provino .shot .m { display: flex; justify-content: space-between; margin-top: .5rem; font-family: var(--font-m); font-size: .52rem; letter-spacing: .14em; opacity: .7; }
#provino .shot:hover { transform: translateY(-.6rem) scale(1.04); z-index: 3; }
#provino .shot.v { width: 15rem; }
#provino .shot.v .thumb { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
#provino .shot.v .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
#provino .shot.v .thumb i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.4rem; height: 2.4rem; border: 1px solid var(--cream); border-radius: 50%; display: grid; place-items: center; color: var(--cream); font-style: normal; font-family: var(--font-m); font-size: .5rem; }
#provino .foot { padding: 0 var(--gutter) 12vh; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
#provino .foot .btns { display: flex; gap: .8rem; }
.btn { display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.6rem; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-m); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; background: currentColor; transform: translateY(101%); transition: transform .5s var(--ease-in-out); z-index: -1; border-radius: inherit; }
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--bg); }
[data-bg="dark"] .btn:hover, [data-bg="color"] .btn:hover { color: var(--ink); }

#lightbox { position: fixed; inset: 0; z-index: 900; background: rgb(23 26 21 / .96); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-out); padding: 4vh var(--gutter); }
#lightbox.is-open { opacity: 1; pointer-events: auto; }
#lightbox img { max-width: 100%; max-height: 82vh; width: auto; height: auto; }
#lightbox .lb-cap { position: absolute; left: var(--gutter); bottom: 2.4vh; color: var(--cream); display: flex; gap: 2.5vw; }
#lightbox .lb-close { position: absolute; right: var(--gutter); top: 2.4vh; color: var(--cream); }
#lightbox .lb-nav { position: absolute; inset-inline: var(--gutter); top: 50%; display: flex; justify-content: space-between; transform: translateY(-50%); color: var(--cream); }

/* ---------------------------------------------------------------- EPILOGO */
#epilogo .credits { padding: 8vh var(--gutter) 3vh; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; }
#epilogo .credits > div { border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent); padding-top: 1.2rem; }
#epilogo .credits .l2 { display: block; margin-bottom: .8rem; }
#epilogo .credits .p3 { opacity: .9; }
#epilogo .bottom { padding: 3vh var(--gutter) 2.4vh; display: flex; justify-content: space-between; align-items: end; gap: 3vw; border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent); }
#epilogo .bottom .d3 { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
#fine .over { display: grid; place-content: center; text-align: center; }
#fine .over .p1 { max-width: 30rem; margin-top: 1.6rem; }
@media (max-width: 991px) { #epilogo .credits { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- MOBILE TYPE */
@media (max-width: 991px) {
  .giant { font-size: 24vw; }
  .d1 { font-size: 5.2rem; } .d2 { font-size: 3.8rem; } .d3 { font-size: 2.6rem; } .d4 { font-size: 1.7rem; }
  .p1 { font-size: 1.15rem; }
  #hero .tagline { font-size: 1.3rem; padding-inline: var(--gutter); top: 24%; }
  #hero .cap { max-width: 78vw; }
  #hero .cap.c1, #hero .cap.c2, #hero .cap.c3 { top: auto; bottom: 30%; left: var(--gutter); right: auto; text-align: left; transform: translateY(1rem); }
  #hero .cap.c3.is-on, #hero .cap.is-on { transform: none; }
  #hero .cap.c3 .d4 { font-size: 2.6rem; }
  #viaggio .journey .hold .globe-box { order: -1; margin-top: 0; }
  #notte .moon { top: 14vh; }
  #provino .track { padding-top: 2.4rem; }
  #rep-title .d1 { font-size: 4.2rem; }
  .article .prose { font-size: 1.05rem; }
}
@media (max-width: 600px) {
  .stone.key .p3 { display: none; }
  .stone.key { grid-row: span 1; grid-column: span 3; }
}
@media (prefers-reduced-motion: reduce) {
  #hero .hint i, .audio-btn.is-on .bars i, .g-pt.is-on .g-halo { animation: none; }
}