/* ============================================================
   FIVE SEASONS — front page
   A nocturne: house lights down, one candle, twelve seats.
   Loaded only by index.html. Nothing here touches interior pages.
   ============================================================ */

@property --mx{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --my{syntax:'<percentage>';inherits:false;initial-value:44%}

:root{
  --char:#070706;              /* deeper than --ink, for the curtain */
  --amber:#f2d59a;             /* candle highlight */
  --ember:#a86a2b;             /* sharp warm accent, desaturated */
  --cue:.4s;                   /* when the hero type starts to rise */
}
html.cue-late{--cue:4.8s}
/* a cut-short overture must not leave the headline waiting for its old cue.
   Same specificity as .cue-late, so this rule has to stay below it. */
html.overture-skip{--cue:.4s}

/* ============================================================
   FIXED ATMOSPHERICS
   ============================================================ */
.grain,.vignette{position:fixed;inset:0;pointer-events:none}
.vignette{
  z-index:298;
  background:radial-gradient(ellipse 105% 88% at 50% 48%,transparent 45%,rgba(0,0,0,.3) 78%,rgba(0,0,0,.48) 100%);
}
.grain{
  z-index:299;opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* the gold thread: reading progress */
.thread{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:320;
  background:rgba(201,162,95,.08);pointer-events:none;
}
.thread__fill{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));
  box-shadow:0 0 12px rgba(232,201,135,.45);
}

/* ============================================================
   OVERTURE — the curtain, once per session

   A six-and-a-half second cold open. Nothing about it is subtle,
   and that is the point: it is the only chance the page gets to
   behave like the room does. Timeline, for anyone editing it:

     0.20s  a wick draws itself down out of the dark
     0.95s  the strike — a flare of light at its foot
     1.05s  the house mark burns up through the flare
     1.60s  the name is set, letter by letter, tracking closing
     2.50s  a hairline rule opens out from the centre
     3.05s  Ragusa · Sicilia
     3.55s  the twelve numerals surface on the cloth
     4.20s  the house lights wash up behind the cloth
     4.35s  the title lifts away
     4.50s  twelve panels leave in a wave — odd down, even up
     4.80s  the hero headline is already rising behind them
     6.40s  the last panel is clear (home.js removes the node at 6.60s)

   Any pointer, key, wheel or touch cuts to the reveal immediately,
   and a hint says so from 2.4s onward.
   ============================================================ */
html.no-overture .overture{display:none}
.overture{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;
  cursor:pointer;
}
html.overture-skip .overture{pointer-events:none}

/* --- the cloth: twelve panels, one per seat --- */
.overture__curtain{
  position:absolute;inset:0;z-index:1;
  display:grid;grid-template-columns:repeat(12,1fr);
}
.overture__panel{
  position:relative;
  background:linear-gradient(180deg,#0b0b09,var(--char) 40%,#050504);
  box-shadow:inset -1px 0 0 rgba(201,162,95,.13);
  will-change:transform;
  animation:panel-up 1.3s cubic-bezier(.72,0,.18,1) forwards;
  animation-delay:calc(4.5s + var(--p,0) * .055s);
}
/* alternate panels leave downward — the cloth comes apart, it does not lift */
.overture__panel:nth-child(odd){animation-name:panel-down}
.overture__panel:nth-child(1){--p:0}
.overture__panel:nth-child(2){--p:1}
.overture__panel:nth-child(3){--p:2}
.overture__panel:nth-child(4){--p:3}
.overture__panel:nth-child(5){--p:4}
.overture__panel:nth-child(6){--p:5}
.overture__panel:nth-child(7){--p:6}
.overture__panel:nth-child(8){--p:7}
.overture__panel:nth-child(9){--p:8}
.overture__panel:nth-child(10){--p:9}
.overture__panel:nth-child(11){--p:10}
.overture__panel:nth-child(12){--p:11}
@keyframes panel-up{to{transform:translateY(-101%)}}
@keyframes panel-down{to{transform:translateY(101%)}}

/* each panel owns a seat: the numerals surface just before the cloth goes,
   so the curtain reads as twelve of something rather than as bars */
.overture__panel i{
  position:absolute;left:50%;bottom:19%;
  transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-family:var(--display);font-style:normal;
  font-size:.56rem;letter-spacing:.32em;
  color:var(--gold-dim);
  opacity:0;animation:numeral-in 1.1s var(--ease) 3.55s forwards;
}
@keyframes numeral-in{to{opacity:.62}}

/* the house lights coming up behind the cloth */
.overture__wash{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 46%,rgba(242,213,154,.5),rgba(168,106,43,.14) 55%,transparent 78%);
  opacity:0;mix-blend-mode:screen;
  animation:wash-up 2.1s var(--ease) 4.2s forwards;
}
@keyframes wash-up{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* --- the title card --- */
.overture__core{
  position:relative;z-index:4;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.9rem,2vh,1.5rem);
  animation:core-out .95s cubic-bezier(.5,0,.75,0) 4.35s forwards;
}

/* the wick, and the strike at its foot */
.overture__wick{
  position:relative;
  width:1px;height:clamp(54px,11vh,110px);
  background:linear-gradient(180deg,transparent,rgba(201,162,95,.35) 45%,var(--gold-bright));
  transform:scaleY(0);transform-origin:50% 0;
  animation:wick-draw .85s cubic-bezier(.3,.7,.2,1) .2s forwards;
}
.overture__spark{
  position:absolute;left:50%;bottom:-2px;
  width:clamp(180px,26vw,340px);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,228,.95),rgba(242,213,154,.5) 22%,rgba(168,106,43,.18) 46%,transparent 68%);
  opacity:0;transform:translate(-50%,50%) scale(.16);
  animation:strike 1.15s cubic-bezier(.16,1,.3,1) .95s forwards;
}
@keyframes wick-draw{to{transform:scaleY(1)}}
@keyframes strike{
  0%{opacity:0;transform:translate(-50%,50%) scale(.16)}
  16%{opacity:1;transform:translate(-50%,50%) scale(.75)}
  100%{opacity:0;transform:translate(-50%,50%) scale(1.5)}
}

.overture__mark{
  height:clamp(44px,7.5vh,74px);width:auto;
  opacity:0;transform:scale(.82);
  filter:drop-shadow(0 0 34px rgba(232,201,135,.55));
  animation:mark-in .95s cubic-bezier(.16,1,.3,1) 1.05s forwards;
}
@keyframes mark-in{
  0%{opacity:0;transform:scale(.82)}
  100%{opacity:1;transform:scale(1)}
}

/* the name, set letter by letter while the tracking closes */
.overture__word{
  display:flex;
  font-family:var(--display);text-transform:uppercase;font-weight:300;
  font-size:clamp(1.15rem,3vw,2.1rem);color:var(--bone);
  letter-spacing:.62em;padding-left:.62em;
  animation:track-close 1.9s cubic-bezier(.16,1,.3,1) 1.6s forwards;
}
.overture__word b{
  display:block;font-weight:inherit;
  opacity:0;transform:translateY(.5em);
  filter:blur(9px);
  animation:letter-set .95s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(1.6s + var(--l,0) * .075s);
}
.overture__word b.sp{width:.5em}
.overture__word b:nth-child(1){--l:0}
.overture__word b:nth-child(2){--l:1}
.overture__word b:nth-child(3){--l:2}
.overture__word b:nth-child(4){--l:3}
.overture__word b:nth-child(5){--l:4}
.overture__word b:nth-child(6){--l:5}
.overture__word b:nth-child(7){--l:6}
.overture__word b:nth-child(8){--l:7}
.overture__word b:nth-child(9){--l:8}
.overture__word b:nth-child(10){--l:9}
.overture__word b:nth-child(11){--l:10}
.overture__word b:nth-child(12){--l:11}
@keyframes letter-set{
  0%{opacity:0;transform:translateY(.5em);filter:blur(9px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes track-close{
  0%{letter-spacing:.62em;padding-left:.62em}
  100%{letter-spacing:.24em;padding-left:.24em}
}

.overture__rule{
  width:clamp(120px,22vw,280px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim) 22%,var(--gold-bright) 50%,var(--gold-dim) 78%,transparent);
  transform:scaleX(0);
  animation:rule-open .9s cubic-bezier(.16,1,.3,1) 2.5s forwards;
}
@keyframes rule-open{to{transform:scaleX(1)}}

.overture__meta{
  font-family:var(--display);font-style:italic;
  font-size:clamp(.8rem,1.5vw,1rem);
  color:var(--gold-dim);letter-spacing:.3em;
  opacity:0;animation:soft-in .9s var(--ease) 3.05s forwards;
}
@keyframes soft-in{to{opacity:1}}
@keyframes core-out{to{opacity:0;transform:translateY(-2.2rem) scale(.97)}}

.overture__skip{
  position:absolute;z-index:4;bottom:clamp(1.5rem,5vh,3rem);left:0;right:0;
  text-align:center;
  font-family:var(--display);text-transform:uppercase;
  font-size:.6rem;letter-spacing:.34em;color:var(--ash);
  opacity:0;animation:hint-in 2s var(--ease) 2.4s forwards;
}
@keyframes hint-in{0%{opacity:0}18%{opacity:.55}62%{opacity:.55}100%{opacity:0}}

/* clicking, scrolling or typing cuts straight to the reveal */
html.overture-skip .overture .overture__core{animation:core-out .38s var(--ease) forwards}
html.overture-skip .overture .overture__skip,
html.overture-skip .overture .overture__wash{animation:none;opacity:0;transition:opacity .25s linear}
html.overture-skip .overture .overture__panel{
  animation:panel-up .62s cubic-bezier(.72,0,.18,1) forwards;
  animation-delay:calc(var(--p,0) * .02s);
}
html.overture-skip .overture .overture__panel:nth-child(odd){animation-name:panel-down}

/* the header waits behind the cloth */
html.overture-on .site-header{opacity:0;animation:soft-in 1.1s var(--ease) 5.4s forwards}
html.overture-skip .site-header{animation:soft-in .5s var(--ease) .2s forwards}

@media (max-width:640px){
  /* six wider panels read better than twelve slivers on a phone */
  .overture__curtain{grid-template-columns:repeat(6,1fr)}
  .overture__panel:nth-child(n+7){display:none}
  .overture__word{font-size:clamp(1rem,4.4vw,1.4rem)}
}

/* ============================================================
   HERO — a column of light, and words in the dark
   ============================================================ */
.hero-x{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:grid;align-items:center;
  background:
    radial-gradient(ellipse 55% 45% at 72% 52%,rgba(60,40,12,.55),transparent 70%),
    radial-gradient(ellipse 90% 70% at 20% 30%,#131009,var(--ink) 65%);
}

/* ambient candle halo — blooms open behind the curtain, then breathes */
.hero-x__halo{
  position:absolute;z-index:0;inset:auto 0 -10% 0;height:70%;
  background:radial-gradient(ellipse 42% 60% at 72% 60%,rgba(201,162,95,.20),transparent 68%);
  animation:
    halo-in 2.8s var(--ease) calc(var(--cue) - 1s) both,
    halo-breathe 7.5s ease-in-out calc(var(--cue) + 1.8s) infinite;
}
@keyframes halo-in{
  0%{opacity:0;transform:scale(.78)}
  100%{opacity:.72;transform:scale(1)}
}
@keyframes halo-breathe{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

/* the seed video, screened over the dark so only its light survives.
   It pushes in for eighteen seconds — slow enough that you feel it
   rather than watch it. */
.hero-x__column{
  position:absolute;z-index:1;top:-6%;right:-3vw;
  width:min(52vw,660px);height:112%;
  object-fit:cover;object-position:center;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 52% 56%,#000 24%,transparent 78%);
          mask-image:radial-gradient(ellipse 58% 62% at 52% 56%,#000 24%,transparent 78%);
  animation:column-push 18s cubic-bezier(.2,.6,.2,1) calc(var(--cue) - 1.4s) both;
}
@keyframes column-push{
  0%{transform:scale(1.24);opacity:.32}
  24%{opacity:.95}
  100%{transform:scale(1);opacity:.95}
}
@keyframes column-push-m{
  0%{transform:translateX(-50%) scale(1.24);opacity:.25}
  24%{opacity:.8}
  100%{transform:translateX(-50%) scale(1);opacity:.8}
}

/* hidden engraving, revealed only where the candle falls */
.hero-x__engrave{
  position:absolute;z-index:2;inset:0;pointer-events:none;
  background:url("../assets/key-poster.jpg") center/cover no-repeat;
  filter:brightness(2.9) contrast(1.05) saturate(1.15);
  mix-blend-mode:screen;opacity:.7;
  -webkit-mask-image:radial-gradient(circle 20rem at var(--mx,50%) var(--my,44%),#000 0%,rgba(0,0,0,.45) 42%,transparent 68%);
          mask-image:radial-gradient(circle 20rem at var(--mx,50%) var(--my,44%),#000 0%,rgba(0,0,0,.45) 42%,transparent 68%);
  animation:candle-drift 26s ease-in-out infinite;
}
/* a live pointer takes over from the drift */
.hero-x.has-candle .hero-x__engrave{animation:none}
@keyframes candle-drift{
  0%,100%{--mx:34%;--my:52%}
  33%{--mx:66%;--my:38%}
  66%{--mx:52%;--my:66%}
}

.hero-x__stage{
  position:relative;z-index:3;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(8rem,17vh,11.5rem) var(--pad) clamp(6.5rem,13vh,9rem);
}
.hero-x__eyebrow{
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:.4em;font-size:.7rem;color:var(--gold);
  margin-bottom:clamp(1.4rem,3vw,2.2rem);
  opacity:0;
  animation:eyebrow-in 1.6s var(--ease) calc(var(--cue) - .35s) forwards;
}
@keyframes eyebrow-in{
  0%{opacity:0;letter-spacing:.9em}
  100%{opacity:1;letter-spacing:.4em}
}
.hero-x__title{
  font-size:clamp(2.9rem,10.5vw,9.5rem);
  font-weight:300;line-height:.93;letter-spacing:-.008em;
  max-width:13ch;margin-left:-.03em;
  text-shadow:0 4px 60px rgba(7,7,6,.75);
}
/* each word is pulled up from behind its own baseline, slowly */
.hero-x__title .w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.18em;margin-bottom:-.18em;
}
.hero-x__title .w>i{
  display:inline-block;font-style:inherit;
  opacity:0;transform:translateY(115%);
  animation:word-rise 1.55s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--cue) + var(--n,0) * .155s);
}
.hero-x__title em.w>i{
  padding-right:.06em;
  color:var(--gold-bright);
}
/* The italic word carries a slow sheen. A text-clipped gradient needs the
   headline's inherited text-shadow switched off — the shadow paints over the
   clipped background and would dull the gold — and it needs a plain gold
   fallback anywhere the clip is unsupported, or the word paints as nothing. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-x__title em.w>i{
    background:linear-gradient(100deg,var(--gold) 26%,#fff4dc 46%,var(--gold-bright) 56%,var(--gold) 76%);
    background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    text-shadow:none;
    animation:
      word-rise 1.55s cubic-bezier(.16,1,.3,1) calc(var(--cue) + var(--n,0) * .155s) forwards,
      sheen 6s var(--ease) calc(var(--cue) + 2s) infinite;
  }
}
.hero-x__title em.w{font-style:italic}
.hero-x__title .w:nth-child(1){--n:0}
.hero-x__title .w:nth-child(2){--n:1}
.hero-x__title .w:nth-child(3){--n:2}
.hero-x__title .w:nth-child(4){--n:3}
.hero-x__title .w:nth-child(5){--n:4}
.hero-x__title .w:nth-child(6){--n:5}
.hero-x__title .w:nth-child(7){--n:6}
@keyframes word-rise{
  0%{opacity:0;transform:translateY(115%)}
  30%{opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes sheen{
  0%,100%{background-position:100% 0}
  45%,55%{background-position:0 0}
}

.hero-x__sub{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.05rem,1.85vw,1.42rem);line-height:1.55;
  letter-spacing:.03em;color:var(--ash-bright);
  max-width:36ch;margin:clamp(1.6rem,3.4vw,2.4rem) 0 clamp(1.8rem,3.6vw,2.6rem);
  margin-left:clamp(0rem,6vw,7rem);
  opacity:0;animation:soft-in 1.4s var(--ease) calc(var(--cue) + .85s) forwards;
}
.hero-x__actions{
  display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.4rem);flex-wrap:wrap;
  margin-left:clamp(0rem,6vw,7rem);
  opacity:0;animation:soft-in 1.4s var(--ease) calc(var(--cue) + 1.1s) forwards;
}
.link-quiet{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;
  font-size:.78rem;color:var(--ash-bright);
  border-bottom:1px solid transparent;padding-bottom:.25rem;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.link-quiet:hover{color:var(--gold-bright);border-bottom-color:var(--gold-dim)}

/* vertical rail on the right edge */
.hero-x__rail{
  position:absolute;z-index:3;right:calc(var(--pad) * .45);top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:.42em;font-size:.68rem;color:var(--gold-dim);
  opacity:0;animation:soft-in 1.5s var(--ease) calc(var(--cue) + 1.35s) forwards;
}

/* scroll cue with a travelling spark */
.hero-x__cue{
  position:absolute;z-index:3;left:var(--pad);bottom:2rem;
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:.3em;font-size:.66rem;color:var(--ash);
  padding-left:3.2rem;
  opacity:0;animation:soft-in 1.5s var(--ease) calc(var(--cue) + 1.55s) forwards;
}
.hero-x__cue::before{
  content:'';position:absolute;left:0;top:50%;width:2.4rem;height:1px;
  background:rgba(201,162,95,.28);
}
.hero-x__cue::after{
  content:'';position:absolute;left:0;top:50%;width:.85rem;height:1px;
  background:var(--gold-bright);
  animation:spark-run 3.4s var(--ease) infinite;
}
@keyframes spark-run{
  0%{transform:translateX(0);opacity:0}
  25%{opacity:1}
  75%{transform:translateX(1.55rem);opacity:1}
  100%{transform:translateX(1.55rem);opacity:0}
}

@media (max-width:900px){
  .hero-x__rail{display:none}
  .hero-x__column{
    right:auto;left:50%;transform:translateX(-50%);opacity:.8;
    width:min(96vw,520px);
    animation-name:column-push-m;
  }
  .hero-x__title{max-width:11ch}
  .hero-x__sub,.hero-x__actions{margin-left:0}
  .hero-x__engrave{opacity:.5}
}

/* ============================================================
   TICKER — fragments of the evening
   ============================================================ */
.ticker{
  overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(20,18,16,.85),rgba(10,10,10,.85));
  padding-block:.95rem;
}
.ticker__track{width:max-content;animation:ticker-run 52s linear infinite}
body[data-active-lang="en"] .ticker .ticker__track[data-lang-en],
body[data-active-lang="it"] .ticker .ticker__track[data-lang-it]{display:flex}
.ticker__track span{
  position:relative;white-space:nowrap;
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:.34em;font-size:.68rem;color:var(--gold);opacity:.82;
  padding-inline:clamp(1.6rem,3.4vw,3rem);
}
.ticker__track span::after{
  content:'';position:absolute;right:0;top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--gold-dim);opacity:.55;
}
@keyframes ticker-run{to{transform:translateX(-50%)}}

/* ============================================================
   CONCEPT — inherited, quietly enlarged
   ============================================================ */
.concept{background:radial-gradient(ellipse 60% 70% at 50% 50%,#100d08,var(--ink) 72%)}
.concept p.big{letter-spacing:.01em}

/* ============================================================
   THE TWELVE — the marks ignite in order
   ============================================================ */
.twelve{
  padding-block:clamp(3.5rem,8vw,6.5rem);
  background:var(--ink);border-top:1px solid var(--line);
  text-align:center;
}
.twelve__marks{
  list-style:none;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(.55rem,2.3vw,2.3rem);
  margin:0 0 clamp(2rem,4.5vw,3.2rem);
}
.twelve__marks li{
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
  opacity:.16;
}
.twelve__marks li i{
  font-family:var(--display);font-style:normal;font-weight:500;
  font-size:clamp(.6rem,1.1vw,.78rem);letter-spacing:.16em;color:var(--ash);
  transition:color .8s var(--ease);
}
.twelve__marks li::after{
  content:'';width:1px;height:clamp(26px,5.2vw,58px);
  background:linear-gradient(180deg,var(--gold-bright),transparent);
}
.twelve__marks.in li{animation:ignite 1.2s var(--ease) forwards;animation-delay:calc(var(--i,0) * .085s)}
.twelve__marks.in li i{color:var(--amber);transition-delay:calc(var(--i,0) * .085s)}
@keyframes ignite{from{opacity:.16}to{opacity:1}}
.twelve__marks li:nth-child(1){--i:0}
.twelve__marks li:nth-child(2){--i:1}
.twelve__marks li:nth-child(3){--i:2}
.twelve__marks li:nth-child(4){--i:3}
.twelve__marks li:nth-child(5){--i:4}
.twelve__marks li:nth-child(6){--i:5}
.twelve__marks li:nth-child(7){--i:6}
.twelve__marks li:nth-child(8){--i:7}
.twelve__marks li:nth-child(9){--i:8}
.twelve__marks li:nth-child(10){--i:9}
.twelve__marks li:nth-child(11){--i:10}
.twelve__marks li:nth-child(12){--i:11}
.twelve__line{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.2rem,2.6vw,2rem);line-height:1.45;
  color:var(--bone);max-width:34ch;margin-inline:auto;
}
.twelve__line em{font-style:italic;color:var(--gold-bright)}

/* ============================================================
   THE INDEX — four ways in, lit one at a time
   ============================================================ */
.idx{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(5rem,10vw,8.5rem);
  background:var(--ink);
}
.idx__bg{position:absolute;inset:0;z-index:0}
.idx__layer{
  position:absolute;inset:0;margin:0;
  opacity:0;transform:scale(1.09);
  transition:opacity 1.3s var(--ease),transform 3s var(--ease);
}
.idx__layer.is-on{opacity:1;transform:scale(1)}
.idx__layer img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.02)}
.idx__bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.9) 42%,rgba(10,10,10,.52) 100%),
    linear-gradient(180deg,var(--ink) 0%,rgba(10,10,10,.35) 20%,rgba(10,10,10,.35) 80%,var(--ink) 100%);
}
.idx .wrap{position:relative;z-index:2}
.idx__head{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.idx__head h2{
  font-size:clamp(2.1rem,5.4vw,4rem);font-weight:300;
  margin-top:.9rem;color:var(--bone);
}
.idx__head h2 em{font-style:italic;color:var(--gold-bright)}

.idx__list{list-style:none;border-top:1px solid var(--line)}
.idx__row{border-bottom:1px solid var(--line)}
.idx__hit{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  grid-template-areas:
    'num name meta go'
    'gap desc desc desc';
  align-items:baseline;
  column-gap:clamp(.9rem,2.6vw,2.4rem);
  padding-block:clamp(1.3rem,3vw,2.2rem);
}
.idx__num{
  grid-area:num;min-width:3.4ch;
  font-family:var(--display);font-style:italic;
  font-size:clamp(.78rem,1.05vw,.95rem);letter-spacing:.18em;
  color:var(--gold-dim);
}
.idx__name{
  grid-area:name;
  font-family:var(--display);font-weight:300;line-height:.98;
  font-size:clamp(1.85rem,5.2vw,4.3rem);color:var(--bone);
  transition:color .55s var(--ease),transform .7s var(--ease);
}
.idx__meta{
  grid-area:meta;white-space:nowrap;
  font-family:var(--display);font-style:italic;
  font-size:clamp(.95rem,1.5vw,1.3rem);color:var(--gold);
}
.idx__go{
  grid-area:go;font-size:1.05rem;color:var(--gold-bright);
  opacity:0;transform:translateX(-.7rem);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.idx__desc{
  grid-area:desc;overflow:hidden;
  max-height:0;opacity:0;
  color:var(--ash);font-size:.97rem;line-height:1.72;max-width:58ch;
  transition:max-height .8s var(--ease),opacity .55s var(--ease),margin-top .6s var(--ease);
}
.idx__desc strong{color:var(--bone);font-weight:500}
.idx__row.is-active .idx__name{
  color:var(--gold-bright);font-style:italic;
  transform:translateX(clamp(.25rem,1.3vw,1.3rem));
}
.idx__row.is-active .idx__go{opacity:1;transform:none}
.idx__row.is-active .idx__desc{max-height:18rem;opacity:1;margin-top:1rem}
.idx__foot{
  text-align:center;margin-top:clamp(2rem,4vw,3rem);
  font-family:var(--display);font-style:italic;color:var(--ash);
  font-size:1.05rem;
}

@media (max-width:760px){
  .idx__hit{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      'num name'
      'gap meta'
      'gap desc';
    row-gap:.45rem;
  }
  .idx__go{display:none}
  .idx__row.is-active .idx__desc,.idx__row .idx__desc{max-height:none;opacity:1;margin-top:.85rem}
  .idx__row.is-active .idx__name{transform:none}
  .idx__bg::after{
    background:linear-gradient(180deg,var(--ink) 0%,rgba(10,10,10,.88) 30%,rgba(10,10,10,.9) 70%,var(--ink) 100%);
  }
}

/* ============================================================
   EPISODES — stay, and the villa
   ============================================================ */
.epi{
  position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  align-items:center;
  padding:clamp(2.5rem,6vw,5rem) var(--pad);
  max-width:calc(var(--maxw) + var(--pad) * 2);margin-inline:auto;
}
.epi__media{
  grid-column:1/8;grid-row:1;position:relative;overflow:hidden;
  border:1px solid var(--line);
  margin-left:calc(var(--pad) * -1);
}
.epi__media img{
  display:block;width:100%;aspect-ratio:5/4;object-fit:cover;
  transition:transform 1.8s var(--ease);
}
.epi:hover .epi__media img{transform:scale(1.035)}
.epi__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.45),transparent 45%);
}
.epi__card{
  grid-column:7/13;grid-row:1;position:relative;z-index:2;
  background:rgba(11,10,8,.87);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);
  padding:clamp(1.8rem,3.8vw,3.2rem);
  margin-left:clamp(-3.5rem,-2.6vw,-1rem);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.epi__card h2{
  font-size:clamp(1.9rem,3.8vw,2.9rem);font-style:italic;
  color:var(--gold-bright);margin:.8rem 0 1.2rem;
}
.epi__card p{color:var(--ash);margin-bottom:1.4rem}
.epi--rev .epi__media{grid-column:6/13;margin-left:0;margin-right:calc(var(--pad) * -1)}
.epi--rev .epi__media::after{background:linear-gradient(270deg,rgba(10,10,10,.45),transparent 45%)}
.epi--rev .epi__card{grid-column:1/7;margin-left:0;margin-right:clamp(-3.5rem,-2.6vw,-1rem)}

@media (max-width:860px){
  .epi{grid-template-columns:1fr}
  .epi__media,.epi--rev .epi__media{
    grid-column:1;grid-row:1;
    margin-inline:calc(var(--pad) * -1);
  }
  .epi__media img{aspect-ratio:4/3}
  .epi__card,.epi--rev .epi__card{
    grid-column:1;grid-row:2;margin:-2.75rem .5rem 0;
  }
}

/* ============================================================
   THE FIGURE — Mikko
   ============================================================ */
.figure-x{
  padding-block:clamp(4.5rem,10vw,8rem);
  background:radial-gradient(ellipse 65% 60% at 24% 38%,#1a1408,var(--ink) 72%);
  border-block:1px solid var(--line);
}
.figure-x__grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.figure-x__media{
  position:sticky;top:6.5rem;
  border:1px solid var(--line);overflow:hidden;
}
.figure-x__media img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.figure-x__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(10,10,10,.6));
}
.figure-x__body h2{
  font-size:clamp(1.85rem,3.9vw,3rem);font-weight:300;
  margin:.9rem 0 1.6rem;color:var(--bone);
}
.figure-x__quote{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,2.9vw,2.15rem);line-height:1.32;
  color:var(--amber);
  border-left:1px solid var(--gold-dim);
  padding-left:clamp(1rem,2vw,1.8rem);
  margin:0 0 .4rem;
}
.figure-x__quote em{color:var(--gold-bright)}
.figure-x__body p{color:var(--ash);line-height:1.8;margin-bottom:1.6rem}
.ledger{margin:2.2rem 0 2rem;border-top:1px solid var(--line)}
.ledger__row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1.2rem;padding:.9rem 0;border-bottom:1px solid var(--line);
}
.ledger dt{
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:.24em;font-size:.7rem;color:var(--ash);
}
.ledger dd{
  font-family:var(--display);font-style:italic;line-height:1;
  font-size:clamp(1.5rem,2.7vw,2.3rem);color:var(--gold-bright);
}
@media (max-width:860px){
  .figure-x__grid{grid-template-columns:1fr}
  .figure-x__media{position:relative;top:auto;max-width:440px}
}

/* ============================================================
   MUSIC — a waveform that only moves while it plays
   ============================================================ */
.music .player{gap:1.4rem}
.wave{display:flex;align-items:flex-end;gap:3px;height:34px;flex-shrink:0}
.wave i{
  display:block;width:2px;height:100%;
  background:var(--gold-dim);transform-origin:50% 100%;transform:scaleY(.14);
  animation:wave-beat 1.15s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.player:has(.playing) .wave i{animation-play-state:running;background:var(--gold)}
@keyframes wave-beat{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
.wave i:nth-child(1){animation-delay:-.05s;animation-duration:.9s}
.wave i:nth-child(2){animation-delay:-.42s;animation-duration:1.2s}
.wave i:nth-child(3){animation-delay:-.18s;animation-duration:.75s}
.wave i:nth-child(4){animation-delay:-.62s;animation-duration:1.05s}
.wave i:nth-child(5){animation-delay:-.3s;animation-duration:1.35s}
.wave i:nth-child(6){animation-delay:-.72s;animation-duration:.85s}
.wave i:nth-child(7){animation-delay:-.12s;animation-duration:1.15s}
.wave i:nth-child(8){animation-delay:-.52s;animation-duration:.95s}
.wave i:nth-child(9){animation-delay:-.26s;animation-duration:1.25s}
.wave i:nth-child(10){animation-delay:-.68s;animation-duration:.8s}
.wave i:nth-child(11){animation-delay:-.36s;animation-duration:1.1s}
.wave i:nth-child(12){animation-delay:-.58s;animation-duration:.7s}
.wave i:nth-child(13){animation-delay:-.22s;animation-duration:1.3s}
.wave i:nth-child(14){animation-delay:-.48s;animation-duration:.88s}
.wave i:nth-child(15){animation-delay:-.08s;animation-duration:1.02s}
.wave i:nth-child(16){animation-delay:-.66s;animation-duration:1.18s}
@media (max-width:560px){.wave{display:none}}

/* ============================================================
   CLOSE — the last candle
   ============================================================ */
.close-x{
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding-block:clamp(6rem,13vw,10rem);background:var(--ink);
}
.close-x__plate{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.3;filter:saturate(.8);
}
.close-x::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 62% 62% at 50% 48%,rgba(10,10,10,.5),rgba(10,10,10,.94) 76%);
}
.close-x .wrap{position:relative;z-index:2}
.close-x h2{
  font-size:clamp(2.3rem,6.2vw,4.8rem);font-weight:300;line-height:1.04;
  max-width:24ch;margin:1.1rem auto 1.2rem;color:var(--bone);
}
.close-x h2 em{font-style:italic;color:var(--gold-bright)}
.close-x p{color:var(--ash);max-width:48ch;margin:0 auto 2.4rem}
.close-x__note{
  margin-top:1.8rem;font-size:.8rem;letter-spacing:.1em;
  color:var(--ash);text-transform:none;
}

/* ============================================================
   REDUCED MOTION — everything settles at its resting state
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .overture{display:none}
  .hero-x__engrave,.ticker__track,.hero-x__cue::after{animation:none}
  .hero-x__halo{animation:none;opacity:.85;transform:none}
  .hero-x__column{animation:none;opacity:.95}
  .hero-x__eyebrow,.hero-x__sub,.hero-x__actions,.hero-x__rail,.hero-x__cue{opacity:1;animation:none;letter-spacing:.4em}
  .hero-x__sub,.hero-x__actions{letter-spacing:normal}
  .hero-x__title .w{overflow:visible}
  .hero-x__title .w>i{opacity:1;transform:none;animation:none}
  .hero-x__title em.w>i{background:none;color:var(--gold-bright);-webkit-text-fill-color:var(--gold-bright)}
  .site-header{opacity:1;animation:none}
  .twelve__marks li{opacity:1;animation:none}
  .twelve__marks li i{color:var(--amber)}
  .overture__curtain,.overture__panel,.overture__panel i,.overture__wash,.overture__core,
  .overture__wick,.overture__spark,.overture__mark,.overture__word,
  .overture__word b,.overture__rule,.overture__meta,.overture__skip{animation:none}
  .wave i{animation:none;transform:scaleY(.5)}
  .epi:hover .epi__media img{transform:none}
  .idx__layer{transition:opacity .3s linear}
  .idx__layer.is-on{transform:none}
}