/* GORELLI — "Il Segno", dramatised.
   Layout: a film. Full-bleed sticky scenes framed by letterbox bars that open as you scroll; Italian on screen,
   English as subtitles (the toggle swaps them); between scenes, typographic interludes on cellar black. */
:root {
  --night: #0A0908;      /* cellar black */
  --night-2: #12100E;
  --bone: #EFE8DB;       /* main text */
  --bone-2: #DCD4C6;     /* subtitles */
  --ash: #948C80;        /* labels */
  --garnet: #7E1A28;     /* the wine, held to the light */
  --garnet-hi: #C2475A;
  --candle: #C9AB73;     /* the gold foil of his labels */
  --rule: rgba(239, 232, 219, .14);

  --f-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --f-sub: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --lb: max(0px, calc((100svh - 100vw / 2.39) / 2));   /* letterbox bar for a 2.39:1 frame */
  color-scheme: dark;
}
@media (orientation: portrait) { :root { --lb: 11svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--bone);
  font-family: var(--f-display); font-optical-sizing: auto; font-size: 18px; line-height: 1.5;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--candle); outline-offset: 4px; }
em { font-style: italic; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--night); padding: .6rem 1rem; }
.skip .l + .l { display: none; }

/* ---------- the two languages: main text and subtitles ---------- */
.bi { display: flex; flex-direction: column; }
.bi > .l, .card .l, .road__h .l { order: 2; }
.l {
  font-family: var(--f-sub); font-style: normal; font-weight: 400; letter-spacing: .01em;
  font-size: clamp(.86rem, 1.25vw, 1rem); line-height: 1.5; color: var(--bone-2);
  max-width: 52ch; margin-top: .7em; text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 1px 16px rgba(0, 0, 0, .85);
}
.bi > .l::before {
  content: ""; display: block; width: 1.75rem; height: 1px; background: currentColor; opacity: .45; margin-bottom: .6em;
}
html[data-primary="it"] .l[lang="it"], html[data-primary="en"] .l[lang="en"] {
  order: 1; font: inherit; letter-spacing: inherit; color: inherit; max-width: none; margin-top: 0; text-shadow: inherit;
}
html[data-primary="it"] .l[lang="it"]::before, html[data-primary="en"] .l[lang="en"]::before { display: none; }
/* single-line labels show only the main language */
.card .l, .title__cue .l, .figures dt .l, .places .l, .proto summary .l, .road__h .l, .wine__kind .l, .press__h .l, .evidence__kicker .l, .ainote .l, .bottle figcaption .l { display: none; }
html[data-primary="it"] :is(.card, .title__cue, .figures dt, .places, .proto summary, .road__h, .wine__kind, .press__h, .evidence__kicker, .ainote, .bottle figcaption) .l[lang="it"],
html[data-primary="en"] :is(.card, .title__cue, .figures dt, .places, .proto summary, .road__h, .wine__kind, .press__h, .evidence__kicker, .ainote, .bottle figcaption) .l[lang="en"] { display: inline; }
html[data-primary="it"] .contact__line .l[lang="en"], html[data-primary="en"] .contact__line .l[lang="it"] { display: none; }

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; gap: 1.5rem;
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) var(--gutter) 1rem;
  font-family: var(--f-sub); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  background: linear-gradient(rgba(10, 9, 8, .78), rgba(10, 9, 8, 0));
  transition: opacity .8s, transform .8s;               /* there from the first screen (KC 2026-10-16) */
}
html.past-intro .bar, html:not(.js) .bar { opacity: 1; transform: none; pointer-events: auto; }
.bar__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; letter-spacing: .38em; }
.bar__brand svg { width: 1.9rem; height: auto; color: var(--bone); }
.bar__toc { display: flex; gap: .2rem; margin-left: auto; }
.bar__toc a {
  text-decoration: none; color: var(--ash); padding: .35rem .5rem; letter-spacing: .12em;
  font-family: var(--f-display); font-size: .95rem; text-transform: none; transition: color .4s;
}
.bar__toc a:hover, .bar__toc a[aria-current="true"] { color: var(--bone); }
.bar__toc a[aria-current="true"] { box-shadow: inset 0 -1px 0 var(--candle); }
.bar__lang { display: flex; gap: .15rem; }
.bar__lang button {
  font: inherit; letter-spacing: .2em; color: var(--ash); background: none; border: 0; padding: .4rem .45rem; cursor: pointer;
}
.bar__lang button[aria-pressed="true"] { color: var(--bone); box-shadow: inset 0 -1px 0 var(--bone); }
.bar__read {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--candle); opacity: .7;
  transform-origin: 0 50%; transform: scaleX(var(--read, 0));
}
@media (max-width: 760px) { .bar__toc { display: none; } .bar__lang { margin-left: auto; } }

/* ---------- scenes: sticky stage, copy that scrolls over it ---------- */
.scene { position: relative; --p: 0; --s: 0; --x: .42; }
.scene__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scene__media {
  position: absolute; inset: 0; transform: scale(calc(1.12 - .12 * var(--p))); transform-origin: 50% 62%;
  will-change: transform;
}
.paint, .film { position: absolute; inset: 0; width: 100%; height: 100%; }
.film { object-fit: cover; opacity: 0; transition: opacity 1.8s ease; }
.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.still--a { opacity: clamp(0, calc(1 - (var(--p) - var(--x)) * 6), 1); }
.still--b { opacity: clamp(0, calc((var(--p) - var(--x)) * 6), 1); }
.film.on { opacity: 1; }
.shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10, 9, 8, .86) 0%, rgba(10, 9, 8, .48) 28%, rgba(10, 9, 8, .1) 55%, rgba(10, 9, 8, 0) 70%),
    radial-gradient(130% 100% at 50% 45%, transparent 62%, rgba(10, 9, 8, .42) 100%);
}
.shade--deep { background: linear-gradient(to top, rgba(10, 9, 8, .88), rgba(10, 9, 8, .18) 60%), radial-gradient(130% 100% at 50% 45%, transparent 58%, rgba(10, 9, 8, .45)); }
.lb {
  position: absolute; left: 0; right: 0; z-index: 3; background: var(--night);
  height: calc(var(--lb) * (1 - clamp(0, calc(var(--p) * 2.6), 1)));
}
.lb--t { top: 0; } .lb--b { bottom: 0; }
.card {
  position: absolute; z-index: 4; left: var(--gutter); top: calc(max(var(--lb), 4.5rem) + 1.2rem); margin: 0;
  display: flex; align-items: baseline; gap: .9rem;
  font-family: var(--f-sub); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--bone);
  text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 1px 18px rgba(0, 0, 0, .9);
  opacity: clamp(0, calc(1 - (var(--s) - .3) * 4), 1);
}
.scene--intro .card { display: none; }
.card__n { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: .04em; color: var(--candle); }
.card--static { position: static; opacity: 1; padding: 0 var(--gutter); }
.scene__copy { position: relative; z-index: 5; margin-top: -100svh; }
.beat {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18svh var(--gutter) calc(var(--lb) + 12svh); max-width: 82rem;
}
.beat > * { max-width: 46rem; }
.beat--center { align-items: center; justify-content: center; text-align: center; margin: 0 auto; }
.beat--center .bi { align-items: center; }
.beat--right { align-items: flex-end; margin-left: auto; }
.beat--right > * { max-width: 34rem; }
.beat--spacer { min-height: 60svh; }

/* ---------- type scale ---------- */
.big { margin: 0; font-weight: 400; font-size: clamp(2.5rem, 7.2vw, 6.4rem); line-height: .98; letter-spacing: -.012em; text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, .55); }
.huge { margin: 0; font-weight: 400; font-size: clamp(3.4rem, 12vw, 11rem); line-height: .9; letter-spacing: -.02em; text-wrap: balance; }
.lead { margin: 0; font-size: clamp(1.35rem, 2.6vw, 2.15rem); line-height: 1.28; text-wrap: pretty; text-shadow: 0 2px 30px rgba(0, 0, 0, .7); }
.big em, .huge em, .lead em { font-style: italic; }

/* ---------- overture ---------- */
.scene--intro .title {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; opacity: clamp(0, calc(1 - var(--p) * 3.2), 1); pointer-events: none;
}
.wordmark {
  margin: 0; font-weight: 500; font-size: clamp(2.8rem, 10.5vw, 9.2rem); line-height: 1;
  letter-spacing: .34em; margin-right: -.34em; font-variation-settings: "opsz" 96;
}
.js .wordmark { opacity: 0; letter-spacing: .9em; margin-right: -.9em; animation: track 2.4s cubic-bezier(.2, .6, .1, 1) 1.1s forwards; }
/* the sun: his emblem, hanging below the wordmark as on the labels; it radiates in */
.sun { display: block; width: clamp(15rem, 40vw, 34rem); height: auto; overflow: visible; filter: drop-shadow(0 2px 16px rgba(0, 0, 0, .5)); }
.sun--intro { margin: .2rem 0 0; }
.js .sun--intro .sun__reveal { r: 0; animation: radiate 1.9s cubic-bezier(.3, 0, .2, 1) 1.6s forwards; }
.sun--coda { width: clamp(9rem, 18vw, 15rem); }
.js .sun--coda .sun__reveal { r: 0; transition: r 2.2s cubic-bezier(.3, 0, .2, 1) .3s; }
.js .sun--coda.in .sun__reveal { r: 400px; }
@keyframes radiate { to { r: 400px; } }
.title__sub {
  margin: 1.1rem 0 0; font-family: var(--f-sub); font-size: clamp(.7rem, 1.1vw, .82rem); letter-spacing: .5em;
  text-transform: uppercase; color: var(--bone-2); margin-right: -.5em;
}
.title__cue {
  position: absolute; bottom: max(1rem, calc(var(--lb) / 2 - 2.2rem)); margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-family: var(--f-sub); font-size: .68rem; letter-spacing: .4em; text-transform: uppercase; color: var(--ash);
}
.title__cue i { order: 3; width: 1px; height: 2.4rem; background: linear-gradient(var(--bone-2), transparent); transform-origin: top; animation: cue 2.6s ease-in-out infinite; }
.js .title__sub, .js .title__cue, .js .title__links { opacity: 0; animation: fade 1.2s ease 1.2s forwards; }
.js .title__cue { animation-delay: 2s; }
.title__links { margin: 1.6rem 0 0; display: flex; gap: 2rem; pointer-events: auto; font-family: var(--f-sub); font-size: .75rem;
  letter-spacing: .3em; text-transform: uppercase; }
.title__links a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .3rem; }
.title__links a:hover, .title__links a:focus-visible { border-color: var(--candle); }
.title__links .l { display: none; font: inherit; letter-spacing: inherit; color: inherit; margin: 0; text-shadow: none; }
html[data-primary="it"] .title__links .l[lang="it"], html[data-primary="en"] .title__links .l[lang="en"] { display: inline; }
.curtain { position: absolute; left: 0; right: 0; height: 50.5svh; z-index: 5; background: var(--night); display: none; }
.js .curtain { display: block; animation: curtain 1.7s cubic-bezier(.75, 0, .2, 1) 2.1s forwards; }
.curtain--t { top: 0; transform-origin: top; } .curtain--b { bottom: 0; transform-origin: bottom; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes track { to { opacity: 1; letter-spacing: .34em; margin-right: -.34em; } }
@keyframes fade { to { opacity: 1; } }
@keyframes curtain { to { transform: scaleY(0); } }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.figures { display: flex; flex-wrap: wrap; gap: 1.2rem 3.2rem; margin: 2.6rem 0 0; }
.figures div { display: flex; flex-direction: column-reverse; }
.figures dt { font-family: var(--f-sub); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ash); margin-top: .3rem; }
.figures dt .l { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; text-shadow: none; }
.figures dd { margin: 0; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1; font-variant-numeric: lining-nums; }
.figures small { font-size: .42em; letter-spacing: .08em; margin-left: .12em; color: var(--bone-2); }
.figures em { font-size: .5em; margin-left: .2em; }

/* ---------- painted stand-ins (replaced by the films when they exist) ---------- */
.paint { overflow: hidden; }
.paint--nebbia {
  background:
    radial-gradient(70% 45% at 72% 38%, rgba(215, 163, 94, .2), transparent 62%),
    linear-gradient(180deg, #0f141a 0%, #1f2a31 30%, #4b585e 47%, #6c787c 52%, #252c30 64%, #0c0e0f 100%);
}
.paint--nebbia .glow { position: absolute; left: 58%; top: 34%; width: 40vw; height: 20vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 190, 128, .32), transparent); filter: blur(30px); animation: breathe 14s ease-in-out infinite alternate; }
.land { position: absolute; inset: 0; width: 100%; height: 100%; }
.paint--nebbia .far { fill: #2b363c; }
.paint--nebbia .mid { fill: #182024; }
.paint--nebbia .near { fill: #0d1012; }
.paint--nebbia .rows line { stroke: #000; stroke-opacity: .55; stroke-width: 6; }
.paint--nebbia .rows { filter: drop-shadow(0 -1px 0 rgba(140, 152, 158, .14)); }
.fog { position: absolute; left: -30%; width: 160%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(176, 188, 192, .55), rgba(176, 188, 192, 0)); filter: blur(28px); animation: drift 46s linear infinite alternate; }
.fog.f1 { top: 47%; }
.fog.f2 { top: 55%; opacity: .75; animation-duration: 63s; animation-direction: alternate-reverse; }
.fog.f3 { top: 38%; opacity: .45; height: 18%; animation-duration: 80s; }

.paint--bicchieri { background: radial-gradient(80% 60% at 55% 62%, #1e1712, #0a0807 70%); }
.shaft { position: absolute; inset: -30%; background: linear-gradient(112deg, transparent 40%, rgba(215, 163, 94, .17) 47%, rgba(215, 163, 94, .05) 54%, transparent 60%); animation: breathe 11s ease-in-out infinite alternate; }
.dust { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(1.2px 1.2px at 20% 30%, rgba(239, 232, 219, .5), transparent), radial-gradient(1px 1px at 60% 40%, rgba(239, 232, 219, .45), transparent), radial-gradient(1.4px 1.4px at 45% 70%, rgba(215, 163, 94, .5), transparent), radial-gradient(1px 1px at 80% 20%, rgba(239, 232, 219, .4), transparent), radial-gradient(1.2px 1.2px at 30% 85%, rgba(239, 232, 219, .35), transparent); background-size: 340px 280px; animation: dust 40s linear infinite; }
.glasses { position: absolute; left: 50%; top: 56%; width: min(70vw, 52rem); transform: translate(-50%, -50%); overflow: visible; }
.glasses .bowl { fill: none; stroke: rgba(239, 232, 219, .32); stroke-width: 1.1; }
.glasses .table { stroke: rgba(215, 163, 94, .25); stroke-width: 1; }
.glasses .wine { filter: drop-shadow(0 0 14px rgba(194, 71, 90, .45)); }

.paint--tino { background: radial-gradient(85% 70% at 50% 62%, #4b1230 0%, #2b0a1f 38%, #13060e 68%, #070405 100%); opacity: clamp(0, calc(1 - (var(--p) - var(--x)) * 6), 1); }
.paint--tino::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 20% 30%, rgba(215, 163, 94, .16), transparent 70%); }
.bub { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(239, 232, 219, .22); background: radial-gradient(circle at 35% 30%, rgba(239, 232, 219, .18), rgba(126, 26, 40, .05) 60%); animation: bubble 5.5s ease-in-out var(--d) infinite; }
.paint--botti { opacity: clamp(0, calc((var(--p) - var(--x)) * 6), 1); background: #070504; }
.paint--botti svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.paint--botti .vault { fill: #050403; }
.paint--botti .casks ellipse:not([fill]) { fill: none; stroke: rgba(215, 163, 94, .16); stroke-width: 2; }
.paint--botti .floor { fill: #050403; }
.paint--botti .beam { mix-blend-mode: screen; animation: breathe 9s ease-in-out infinite alternate; }
.film--a { opacity: 0; } .film--a.on { opacity: clamp(0, calc(1 - (var(--p) - var(--x)) * 6), 1); }
.film--b.on { opacity: clamp(0, calc((var(--p) - var(--x)) * 6), 1); }

.paint--stagione .sky { position: absolute; inset: 0; animation: sky 24s ease-in-out infinite; }
.sky--dawn { background: linear-gradient(180deg, #1b2533, #4b5b6b 55%, #8b8e88 70%); }
.sky--day { background: linear-gradient(180deg, #3d5266, #8ea2ae 60%, #c9c3b2 72%); animation-delay: -16s; }
.sky--dusk { background: linear-gradient(180deg, #1b1520, #5a2c34 50%, #c0784a 70%); animation-delay: -8s; }
.paint--stagione .hill { fill: #1a1f17; }
.paint--stagione .woods { fill: #0e120d; }
.cloud { position: absolute; top: 52%; width: 50vw; height: 22vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent); filter: blur(30px); animation: cloud 19s linear infinite; }
.cloud.c2 { top: 66%; width: 36vw; animation-duration: 27s; animation-delay: -9s; }

.paint--bicchiere { background: radial-gradient(60% 50% at 50% 58%, #1a1110, #070605 75%); }
.paint--bicchiere .pool { position: absolute; left: 50%; top: 70%; width: 46vw; height: 9vw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(138, 18, 38, .5), rgba(126, 26, 40, .15) 55%, transparent); filter: blur(10px); animation: breathe 7s ease-in-out infinite alternate; }
.paint--bicchiere .glasses { top: 52%; width: min(46vw, 30rem); }

.paint--notte { background: linear-gradient(180deg, #03050b 0%, #0a1222 45%, #18243a 62%, #0b0f17 80%, #050608 100%); }
.stars { position: absolute; inset: 0 0 45% 0; background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 33% 9%, #dfe6ff, transparent), radial-gradient(1.4px 1.4px at 58% 22%, #fff, transparent), radial-gradient(1px 1px at 76% 12%, #fff, transparent), radial-gradient(1px 1px at 88% 30%, #cdd7ff, transparent), radial-gradient(1.2px 1.2px at 44% 35%, #fff, transparent), radial-gradient(1px 1px at 22% 40%, #fff, transparent), radial-gradient(1px 1px at 67% 41%, #fff, transparent); background-size: 520px 360px; opacity: .55; animation: twinkle 6s ease-in-out infinite alternate; }
.paint--notte .ridge { fill: #06080c; }
.paint--notte .valley { fill: #040507; }
.paint--notte .lights circle { fill: #e8b46a; filter: drop-shadow(0 0 4px rgba(232, 180, 106, .9)); }
.paint--notte .fog.f1 { top: 64%; opacity: .32; }
.paint--notte .fog.f2 { top: 70%; opacity: .25; }

@keyframes drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes dust { to { background-position: 340px -280px; } }
@keyframes bubble { 0%, 100% { transform: scale(.6); opacity: 0; } 30% { opacity: 1; } 70% { transform: scale(1); opacity: .8; } 80% { transform: scale(1.15); opacity: 0; } }
@keyframes sky { 0%, 100% { opacity: 0; } 20%, 45% { opacity: 1; } 65% { opacity: 0; } }
@keyframes cloud { from { transform: translateX(-60vw); } to { transform: translateX(120vw); } }
@keyframes twinkle { to { opacity: .85; } }

/* ---------- IV: the span of years ---------- */
.span {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 3rem); width: 100%;
  max-width: none !important; margin-bottom: 3rem;
  font-size: clamp(3.4rem, 13vw, 12.5rem); line-height: 1; font-variant-numeric: lining-nums;
}
.span__yr--a { color: var(--bone); }
.span__yr--b { color: transparent; -webkit-text-stroke: 1px rgba(239, 232, 219, .75); }
.span__line { position: relative; height: 1px; background: rgba(239, 232, 219, .18); }
.span__line i { position: absolute; inset: 0; background: var(--candle); transform-origin: 0 50%; transform: scaleX(clamp(0, calc(var(--p) * 1.6), 1)); }
.beat--span { max-width: none; width: 100%; justify-content: flex-end; }
.beat--span .span-legend { max-width: 46rem; }
.span-legend { font-size: clamp(1.8rem, 4.4vw, 3.6rem); }

/* ---------- the road (timeline) ---------- */
.road { padding: 22svh var(--gutter) 18svh; background: linear-gradient(var(--night), var(--night-2) 40%, var(--night)); }
.road__h { margin: 0 0 6svh; font-weight: 400; font-style: italic; font-size: clamp(2.2rem, 5vw, 4rem); }
.road__list { list-style: none; margin: 0; padding: 0; max-width: 78rem; }
.road__row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 3rem; align-items: baseline;
  padding: 2.2rem 0; border-top: 1px solid var(--rule);
}
.road__row:last-child { border-bottom: 1px solid var(--rule); }
.yr {
  font-size: clamp(3rem, 9vw, 8rem); line-height: .9; font-variant-numeric: lining-nums; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px rgba(239, 232, 219, .5); transition: color 1.4s ease .2s;
}
.yr .l { font: inherit; color: inherit; margin: 0; max-width: none; letter-spacing: inherit; text-shadow: none; }
.yr .l::before { display: none; }
html[data-primary="it"] .yr .l[lang="en"], html[data-primary="en"] .yr .l[lang="it"] { display: none; }
.road__row.in .yr, html:not(.js) .yr { color: var(--bone); }
.road__row--key .yr { -webkit-text-stroke-color: var(--candle); }
.road__row--key.in .yr { color: var(--candle); }
.road__row .bi { margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.9rem); line-height: 1.25; }
.road__row cite { font-style: italic; }
@media (max-width: 640px) { .road__row { grid-template-columns: 1fr; } }

/* ---------- the wines: one studio, the bottles always on the left (reviews 2026-10-16) ---------- */
.wines { padding: 12svh var(--gutter) 14svh; display: grid; gap: clamp(5rem, 14svh, 10rem); background: var(--night); }
.wine {
  display: grid; grid-template-columns: minmax(0, 27.5rem) minmax(0, 34rem); grid-template-rows: auto 1fr;
  grid-template-areas: "art head" "art text"; column-gap: clamp(2.5rem, 6vw, 6rem); justify-content: center;
  max-width: 78rem; margin: 0 auto; width: 100%;
}
.wine__head { grid-area: head; align-self: start; padding-top: 6rem; }   /* same inset beside every bottle */
.wine__text { grid-area: text; padding-top: 1.4rem; }
.bottle { grid-area: art; margin: 0; }
.bottle img { display: block; width: 100%; height: auto; }
.bottle figcaption { margin: .75rem auto 0; max-width: 21rem; text-align: center; }
.wine__kind { margin: 0 0 1rem; font-family: var(--f-sub); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--candle); }
.wine__kind .l { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; text-shadow: none; }
.wine__name { margin: 0; font-weight: 400; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .95; letter-spacing: -.015em; text-wrap: balance; }
.wine__name em { display: block; font-size: .5em; letter-spacing: 0; color: var(--bone-2); margin-top: .3em; }
.wine__name--single em { font-size: 1em; color: var(--bone); margin: 0; }
.wine .bi { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.34; max-width: 34rem; }
.press__h { margin: 2.2rem 0 0; font-family: var(--f-sub); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ash); }
.press__h .l { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; text-shadow: none; }
.press { list-style: none; padding: 0; margin: .8rem 0 0; border-top: 1px solid var(--rule); max-width: 34rem; }
.press li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .2rem 1.2rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.press__v { font-family: var(--f-sub); font-size: .8rem; letter-spacing: .2em; color: var(--ash); padding-top: .3rem; grid-row: span 2; font-variant-numeric: tabular-nums; }
.press__s { font-size: 1.3rem; line-height: 1.25; }
.press__s q { font-style: italic; quotes: "“" "”"; }
.press__w { font-family: var(--f-sub); font-size: .78rem; letter-spacing: .08em; color: var(--bone-2); }
@media (max-width: 760px) {
  .wine { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "art" "text"; }
  .wine__head { align-self: start; padding-top: 0; }
  .bottle { width: min(100%, 21rem); justify-self: center; margin-top: .6rem; }
  .wine__text { padding-top: .6rem; }
}

/* ---------- VI: they wrote ---------- */
.voices { padding: 18svh 0 10svh; background: radial-gradient(70% 50% at 50% 50%, #170d0e, var(--night) 70%); }
.voice { margin: 0 auto; min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); max-width: 86rem; }
.voice--b { align-items: flex-end; text-align: right; }
.voice--c { align-items: center; text-align: center; min-height: 70svh; }
.voice blockquote { margin: 0; position: relative; }
.voice blockquote p { margin: 0; font-style: italic; font-size: clamp(2.6rem, 7.6vw, 7.2rem); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.voice .score { font-style: normal; font-size: clamp(6rem, 22vw, 20rem); line-height: .85; font-variant-numeric: lining-nums; }
.score sup { font-size: .3em; vertical-align: top; position: relative; top: .3em; color: var(--candle); }
.score span { font-size: .28em; color: var(--bone-2); }
.voice__tr { margin: 1.4rem 0 0; font-family: var(--f-sub); font-size: clamp(.9rem, 1.3vw, 1.05rem); color: var(--bone-2); }
html[data-primary="en"] .voice__tr { display: none; }
.voice figcaption { margin-top: 2rem; font-family: var(--f-sub); font-size: .76rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ash); }

/* ---------- VII ---------- */
.places { margin: 2.2rem 0 0; font-family: var(--f-sub); font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--candle); line-height: 2; }
.places .l { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; text-shadow: none; max-width: none; }
.contact { margin: 2.4rem 0 0; font-size: 1.3rem; }
.contact__line { margin: 1rem 0 0; font-family: var(--f-sub); font-size: .95rem; color: var(--bone-2); }
.contact__line .l { font: inherit; color: inherit; margin: 0; display: inline; text-shadow: none; }

/* ---------- coda + footer ---------- */
.coda { min-height: 72svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem; text-align: center; padding: 10svh var(--gutter); }
.coda .bi { align-items: center; }
.foot { padding: 8svh var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 6svh); border-top: 1px solid var(--rule); display: grid; gap: 1rem; font-family: var(--f-sub); font-size: .82rem; color: var(--ash); }
.foot__brand { margin: 0; font-family: var(--f-display); font-size: 1.4rem; letter-spacing: .4em; color: var(--bone); }
.foot__place { margin: 0; letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; }
.foot__ai { margin: 1rem 0 0; max-width: 46rem; font-family: var(--f-sub); font-size: .86rem; color: var(--bone-2); }
.foot__ai .l { font-size: inherit; text-shadow: none; }
.foot__legal { margin: 0; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity 1.4s cubic-bezier(.2, .6, .2, 1), transform 1.4s cubic-bezier(.2, .6, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
/* subtitles come in a beat after the line, as in a film */
html.js[data-primary="it"] .reveal .l[lang="en"], html.js[data-primary="en"] .reveal .l[lang="it"] { opacity: 0; transition: opacity 1s ease .8s; }
html.js[data-primary="it"] .reveal.in .l[lang="en"], html.js[data-primary="en"] .reveal.in .l[lang="it"] { opacity: 1; }

/* ---------- Giuseppe Gorelli ---------- */
.persona {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "portrait text";
  gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; max-width: 88rem; margin: 0 auto; padding: 18svh var(--gutter) 16svh;
}
.persona figure { margin: 0; }
.persona__portrait { grid-area: portrait; justify-self: center; align-self: start; width: min(100%, 27rem); }
.persona__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; box-shadow: 0 40px 80px rgba(0, 0, 0, .55); }
.persona__text { grid-area: text; }
.persona__kicker { margin: 0 0 1rem; font-family: var(--f-sub); font-size: .74rem; letter-spacing: .38em; text-transform: uppercase; color: var(--candle); }
.persona__name { margin: 0 0 1.8rem; font-weight: 400; font-size: clamp(3.4rem, 9vw, 8.6rem); line-height: .9; letter-spacing: -.02em; }
.persona__name em { display: block; }
.persona__more { margin: 1.6rem 0 0; max-width: 34rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.35; }
/* the table photograph: small and square, after the road (reviews, KC 2026-10-16) */
.road__table { margin: 4rem 0 0; width: min(100%, 17.5rem); }
.road__table img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%;
  filter: brightness(.9) saturate(.88) contrast(.97); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.road__table figcaption { margin-top: .8rem; display: flex; flex-direction: column; gap: .3rem; }
.road__table figcaption .bi { font-size: 1.05rem; line-height: 1.3; }
.said--after { margin-top: 2.2rem; }
.persona figcaption, .road__table figcaption { margin-top: .8rem; display: flex; flex-direction: column; gap: .3rem; }
.persona figcaption .bi { font-size: 1.05rem; line-height: 1.3; }
.credit { display: block; margin-top: .45rem; font-family: var(--f-sub); font-size: .75rem; line-height: 1.4; letter-spacing: .04em; color: var(--ash); }
@media (max-width: 760px) {
  .persona { grid-template-columns: 1fr; grid-template-areas: "text" "portrait"; }
}

/* ---------- real things: the cask and the sign on a quiet dark ground (reviews 2026-10-16) ---------- */
.evidence {
  display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 30rem); column-gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center; justify-content: center; padding: 16svh var(--gutter); background: var(--night);
}
.evidence--sign { grid-template-columns: minmax(0, 30rem) minmax(0, 32.5rem); padding-top: 10svh; }
.evidence__photo { margin: 0; }
.evidence__photo img { display: block; width: 100%; height: auto; object-fit: cover; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.evidence__photo--cask img { aspect-ratio: 4 / 5; object-position: 50% 56%; }     /* the chalkboard and the burned mark */
.evidence__photo--sign img { aspect-ratio: 5 / 4; object-position: 57% 50%; }     /* the whole plaque and its wall */
.evidence__kicker { margin: 0 0 1.2rem; font-family: var(--f-sub); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--candle); }
.evidence__kicker .l { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; text-shadow: none; }
.evidence .lead { margin: 0; }
.evidence .credit { margin-top: 1.2rem; }
.evidence .places { margin: 1.6rem 0 0; }
.evidence .contact { margin: 2rem 0 0; }
/* one gentle grade on every real photograph: a little darker, a little less saturated; nothing else changes */
.persona img, .evidence__photo img { filter: brightness(.9) saturate(.88) contrast(.97); }
.made { margin: 1.4rem 0 0; font-style: italic; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.4; max-width: 34rem; }
@media (max-width: 760px) {
  .evidence, .evidence--sign { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; padding: 12svh var(--gutter); }
  .evidence--sign .evidence__photo { order: -1; }
}

/* the note at the first film: these scenes were made with AI (reviews 2026-10-16) */
.ainote {
  position: absolute; z-index: 4; right: var(--gutter); bottom: calc(var(--lb) + 1.1rem);
  font-family: var(--f-sub); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ash); text-decoration: none; border-bottom: 1px solid var(--rule);
}
.ainote .l { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; text-shadow: none; }

/* ---------- chapter names, and the chapter menu on phones ---------- */
.bar__now { margin: 0; min-width: 9rem; font-family: var(--f-display); font-size: .95rem; letter-spacing: .02em; text-transform: none; color: var(--bone-2); }
.bar__menu { display: none; font: inherit; letter-spacing: .2em; color: var(--bone); background: none; border: 1px solid var(--rule); padding: .4rem .7rem; cursor: pointer; margin-left: auto; }
.bar__menu .l { font: inherit; color: inherit; margin: 0; text-shadow: none; }
html[data-primary="it"] .bar__menu .l[lang="en"], html[data-primary="en"] .bar__menu .l[lang="it"] { display: none; }
.menu { position: fixed; inset: 0; z-index: 39; background: var(--night); padding: calc(env(safe-area-inset-top, 0px) + 5rem) var(--gutter) 3rem; overflow-y: auto; }
html.menu-open .proto { display: none; }
html.menu-open body { overflow: hidden; }
.menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.menu a { display: grid; grid-template-columns: 3.2rem 1fr; align-items: baseline; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.menu__n { font-family: var(--f-display); font-size: 1.4rem; color: var(--candle); }
.menu .bi { font-size: 1.7rem; line-height: 1.15; }
@media (max-width: 760px) {
  .bar__now { display: none; }
  .bar__menu { display: block; }
  .bar__lang { margin-left: .4rem; }
  .proto__more { display: none; }
  .proto summary { padding: .35rem .6rem; font-size: .7rem; }
}

/* ---------- prototype notes (removed by the release build) ---------- */
.tbd { border-bottom: 1px dashed var(--candle); color: var(--candle); }
.proto { position: fixed; left: 1rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index: 60; max-width: min(26rem, calc(100vw - 2rem)); font-family: var(--f-sub); font-size: .8rem; }
.proto summary { cursor: pointer; list-style: none; padding: .55rem .8rem; background: rgba(10, 9, 8, .86); border: 1px solid rgba(215, 163, 94, .5); color: var(--candle); letter-spacing: .08em; backdrop-filter: blur(6px); }
.proto summary .l { font: inherit; color: inherit; margin: 0; text-shadow: none; }
.proto ol { margin: 0; padding: 1rem 1rem 1rem 2.2rem; background: rgba(10, 9, 8, .94); border: 1px solid rgba(215, 163, 94, .3); border-top: 0; max-height: 50svh; overflow: auto; }
.proto li { margin: 0 0 .6rem; color: var(--bone); }
.proto li .l { font-size: .78rem; }

/* ---------- film grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .085; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }

/* ---------- reduced motion: the film holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .sun--intro .sun__reveal, .js .sun--coda .sun__reveal { r: 400px; }
  .js .wordmark, .js .title__sub, .js .title__cue { opacity: 1; letter-spacing: .34em; }
  .js .title__sub { letter-spacing: .5em; }
  .js .curtain { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal .l { opacity: 1 !important; }
  .scene__media { transform: none; }
  .grain { display: none; }
}