/* ═══════════════════════════════════════════════════════════════════════════
   OPUS NOIR
   No border-radius. No box-shadow. No gradient text. Hairlines carry the
   structure; the imagery carries the colour. Violet is punctuation, never
   wallpaper.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --void:#06040A;      /* page ground                                   */
  --ink:#0B0710;       /* raised surface, one step off the void         */
  --halo:#9D4EDD;      /* accent. hairlines + active states only        */
  --gold:#C9A227;      /* edition marks, rules                          */
  --mist:#C6A2DE;      /* muted -- the raw #E0AAFF read as candy pink, not haute parfumerie */
  --paper:#EDE7F2;     /* text. never pure white -- reads more costly   */
  --quiet:#6E6478;
  --line:rgba(224,170,255,.09);
  --line-soft:rgba(224,170,255,.05);

  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --serif:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --slow:1100ms;

  --gut:clamp(20px,4.5vw,72px);   /* page gutter        */
  --bar:clamp(56px,7vw,104px);    /* left chapter rail  */
}

/* ── lenis smooth scroll ───────────────────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── modern luxury bespoke hardware cursors (zero-latency OS composited) ──── */
:root {
  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cdefs%3E%3Cfilter id='v-glow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='1.2' flood-color='%239D4EDD' flood-opacity='0.75'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M3 2L19 10L11.5 12.2L8.5 19.5L3 2Z' fill='%230B0710' stroke='%239D4EDD' stroke-width='1.2' stroke-linejoin='round' filter='url(%23v-glow)'/%3E%3Cpath d='M4.8 4.6L15.6 10.3L10.5 11.8L8.4 16.8L4.8 4.6Z' fill='%23190F29'/%3E%3Ccircle cx='3.8' cy='2.8' r='0.9' fill='%23FFFFFF'/%3E%3C/svg%3E") 3 2, auto;

  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cdefs%3E%3Cfilter id='g-glow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='1.5' flood-color='%23D4AF37' flood-opacity='0.85'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M3 2L19 10L11.5 12.2L8.5 19.5L3 2Z' fill='%23140E05' stroke='%23D4AF37' stroke-width='1.3' stroke-linejoin='round' filter='url(%23g-glow)'/%3E%3Cpath d='M4.8 4.6L15.6 10.3L10.5 11.8L8.4 16.8L4.8 4.6Z' fill='%23281E0A'/%3E%3Ccircle cx='3.8' cy='2.8' r='1' fill='%23FFF6D6'/%3E%3C/svg%3E") 3 2, pointer;

  --cursor-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cdefs%3E%3Cfilter id='t-glow'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='1.5' flood-color='%239D4EDD' flood-opacity='0.8'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='14' cy='14' r='11' fill='%230B0710' stroke='%239D4EDD' stroke-width='1.2' filter='url(%23t-glow)'/%3E%3Cpath d='M8 14H20M8 14L11.5 10.5M8 14L11.5 17.5M20 14L16.5 10.5M20 14L16.5 17.5' stroke='%23EDE7F2' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, grab;

  --cursor-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24' fill='none'%3E%3Cpath d='M5 3H11M8 3V21M5 21H11' stroke='%239D4EDD' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='1.2' fill='%23EDE7F2'/%3E%3C/svg%3E") 8 12, text;
}

html, body {
  cursor: var(--cursor-default);
}
a, button, [role="button"], .cta, .fin, .sound, .buy, .wordmark {
  cursor: var(--cursor-pointer);
}
.scrub, #turn-canvas {
  cursor: var(--cursor-grab);
}
p, h1, h2, h3, h4, h5, .lede, .rv, blockquote, dt, dd {
  cursor: var(--cursor-text);
}



/* ── interactive cursor-following spotlight ─────────────────────────────── */
.spotlight {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle 500px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(157,78,221,.05) 0%, rgba(27,15,46,.02) 45%, transparent 75%);
  /* screen blend shows its own colour at close to full strength wherever the
     backdrop is dark -- against the obsidian void, opacity:.9 here read as a
     dominant magenta wash over the whole page rather than a cursor gesture.
     Cut hard; this should read as a whisper of light, not a room tint. */
  mix-blend-mode: screen; opacity: .3;
  transition: opacity 400ms var(--ease);
}

*,*::before,*::after{box-sizing:border-box}
/* REVERTED: overflow-x:hidden here broke position:sticky for the ENTIRE page
   -- any non-visible overflow on an ancestor silently disables sticky for
   every descendant, which is exactly how .hero-pin > .hero and .scrub .stick
   stay pinned while their content scrubs. This one line undid both pins.
   Do not set overflow on html or any ancestor of a sticky element again --
   see .notes below for the correct, locally-scoped fix instead. */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--paper);
  font-family:var(--sans);font-size:15px;line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--halo);color:#fff}

/* ── the grade ────────────────────────────────────────────────────────────
   Eight images and five videos came out of five separate generation sessions
   with five different colour temperatures -- the pour video in particular
   runs warm amber against a page that is otherwise obsidian/violet. A single
   colourist pass over the whole page pulls every asset toward one family
   instead of regenerating each one until they happen to match. This is the
   difference between "a folder of AI renders" and "a shot campaign".        */
/* ── 06 · custom magnetic cursor ──────────────────────────────────────────
   HTML (#cursor > .c-dot/.c-ring/.c-badge) and the follow/magnetic-pull logic
   in cursorSystem() already existed with no CSS at all -- an invisible div
   moving correctly in the DOM. This is the missing half.                    */
@media (pointer:fine){
  body, a, button, [data-cursor]{ cursor:none; }
}
#cursor{
  position:fixed;top:0;left:0;z-index:9990;pointer-events:none;
  width:0;height:0;                       /* origin point; children centre on it */
  transition:opacity 300ms var(--ease);
}
#cursor.hidden{opacity:0}
#cursor .c-dot{
  position:absolute;top:-2px;left:-2px;width:4px;height:4px;border-radius:50%;
  background:var(--halo);
}
#cursor .c-ring{
  position:absolute;top:-16px;left:-16px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);
  transition:width 400ms var(--ease),height 400ms var(--ease),
             top 400ms var(--ease),left 400ms var(--ease),
             border-color 400ms var(--ease),background 400ms var(--ease);
}
#cursor.magnetic .c-ring{
  width:64px;height:64px;top:-32px;left:-32px;
  border-color:var(--halo);background:rgba(157,78,221,.08);
}
#cursor.has-text .c-ring{border-color:var(--paper)}
#cursor .c-badge{
  position:absolute;top:22px;left:-30px;width:60px;text-align:center;
  opacity:0;transform:translateY(4px);
  transition:opacity 300ms var(--ease),transform 300ms var(--ease);
}
#cursor .c-badge span{
  display:inline-block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);white-space:nowrap;
}
#cursor.has-text .c-badge{opacity:1;transform:translateY(0)}

.grade{
  position:fixed;inset:0;z-index:96;pointer-events:none;
  background:#1b0f2e;mix-blend-mode:color;opacity:.24;
}
.grain{ /* breaks up the dead-flat digital gradients that read as synthetic */
  position:fixed;inset:0;z-index:97;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;background-size:180px 180px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}

/* ── structural overlays ─────────────────────────────────────────────────── */

/* five architectural columns, edge to edge, behind everything */
.grid-rule{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.grid-rule span{border-left:1px solid var(--line-soft)}
.grid-rule span:last-child{border-right:1px solid var(--line-soft)}
@media (max-width:760px){ .grid-rule{grid-template-columns:repeat(2,1fr)} }

/* the running chapter index */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--bar);z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;pointer-events:none;mix-blend-mode:difference;
}
.rail b{
  font:500 10px/1 var(--sans);letter-spacing:.16em;color:var(--quiet);
  display:flex;align-items:center;gap:8px;transition:color 600ms var(--ease);
}
.rail b::after{
  content:"";width:8px;height:1px;background:currentColor;
  transition:width 700ms var(--ease);
}
.rail b.on{color:var(--paper)}
.rail b.on::after{width:26px}
@media (max-width:760px){ .rail{display:none} }

/* ── masthead ────────────────────────────────────────────────────────────── */
.mast{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut) 22px calc(var(--bar) + 8px);
  transition:transform 700ms var(--ease),opacity 700ms var(--ease);
}
.mast.hide{transform:translateY(-100%);opacity:0}
.mast .wordmark{
  font-family:var(--serif);font-size:16px;letter-spacing:.3em;text-transform:uppercase;
}
.mast nav{display:flex;gap:clamp(16px,2.5vw,34px)}
.mast nav a{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);
  position:relative;padding-block:4px;transition:color 500ms var(--ease);
}
.mast nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--halo);transition:width 600ms var(--ease);
}
.mast nav a:hover{color:var(--paper)}
.mast nav a:hover::after{width:100%}
.mast .sound{
  font:inherit;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);
  background:none;border:0;padding:4px 0;margin:0;position:relative;
  transition:color 500ms var(--ease);
  /* deliberately no explicit cursor override here -- this button carries
     data-cursor="magnetic", which the hide-native-cursor rule above (near
     the top of this file) targets. A pointer declaration used to live on
     this rule and, being more specific, silently beat that hide rule on
     just this one control. */
}
.mast .sound::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--halo);transition:width 600ms var(--ease);
}
.mast .sound:hover,.mast .sound[aria-pressed="true"]{color:var(--paper)}
.mast .sound:hover::after,.mast .sound[aria-pressed="true"]::after{width:100%}
@media (max-width:760px){
  .mast{padding-left:var(--gut)}
  .mast nav a:not(.buy){display:none}
}

/* ── shared section furniture ────────────────────────────────────────────── */
.chapter{
  position:relative;z-index:2;
  padding:clamp(96px,14vh,200px) var(--gut) clamp(96px,14vh,200px)
          calc(var(--bar) + var(--gut));
}
@media (max-width:760px){ .chapter{padding-left:var(--gut)} }

.kicker{
  display:flex;align-items:baseline;gap:14px;margin:0 0 clamp(28px,5vh,64px);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--quiet);
}
.kicker i{font-style:normal;color:var(--halo);font-variant-numeric:tabular-nums}
.kicker s{flex:1;height:1px;background:var(--line);text-decoration:none;max-width:180px}

h2{
  font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(38px,7vw,104px);line-height:.98;letter-spacing:-.015em;
}
h2 em{font-style:italic;color:var(--mist)}

.lede{
  max-width:46ch;color:var(--quiet);font-size:clamp(14px,1.15vw,17px);
  line-height:1.75;margin:clamp(24px,4vh,44px) 0 0;
}
.lede strong{color:var(--paper);font-weight:400}

/* line-clip reveal */
.rv{display:block;overflow:hidden}
.rv > *{
  display:block;transform:translateY(105%);
  transition:transform var(--slow) var(--ease);
  transition-delay:var(--d,0ms);
}
.in .rv > *{transform:none}
.fade{
  opacity:0;transform:translateY(22px);
  transition:opacity 900ms var(--ease),transform 900ms var(--ease);
  transition-delay:var(--d,0ms);
}
.in .fade{opacity:1;transform:none}

/* ── 00 loader ───────────────────────────────────────────────────────────── */
#loader{
  position:fixed;inset:0;z-index:100;background:var(--void);
  display:grid;place-items:center;
  transition:opacity 900ms var(--ease),visibility 900ms;
}
#loader.done{opacity:0;visibility:hidden}
#loader .n{
  font-family:var(--serif);font-size:clamp(56px,12vw,140px);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
#loader .track{
  position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(32px,6vh,64px);
  height:1px;background:var(--line);
}
#loader .track i{display:block;height:1px;background:var(--paper);width:0}
#loader .sig{
  position:absolute;left:var(--gut);bottom:calc(clamp(32px,6vh,64px) + 18px);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--quiet);
}

/* ── 01 vessel ───────────────────────────────────────────────────────────── */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;z-index:2}
.hero video,.hero .plate{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    /* one wide, reliable scrim under the type block. An earlier version paired
       this with a second radial gradient meant to "protect" the bottle's
       brightness -- its transparent hole reached back into the text's own
       zone and cancelled the scrim exactly where the title sits. A single
       layer that only the RIGHT edge fades out of is easier to reason about
       and cannot fight itself like that. */
    linear-gradient(100deg,rgba(6,4,10,.95) 0%,rgba(6,4,10,.86) 26%,rgba(6,4,10,.5) 42%,transparent 58%),
    linear-gradient(to top,rgba(6,4,10,.88) 0%,transparent 40%);
}
.hero .type{
  position:absolute;z-index:3;left:calc(var(--bar) + var(--gut));
  max-width:min(36vw,520px);              /* stay left of the bottle, off the halo */
  bottom:clamp(48px,9vh,104px);
}
@media (max-width:760px){ .hero .type{left:var(--gut);max-width:82vw} }
.hero h1{
  font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(46px,7.4vw,104px);line-height:.92;letter-spacing:-.03em;
  text-shadow:0 4px 32px rgba(0,0,0,.6);   /* insurance against any bright pixel behind */
}
.hero h1 .two{padding-left:.14em;font-style:italic}
.hero .sub{
  display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,44px);align-items:baseline;
  margin-top:clamp(20px,3.5vh,38px);padding-top:20px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet);
}
.hero .sub b{color:var(--paper);font-weight:400}
.cue{
  position:absolute;z-index:3;right:var(--gut);bottom:clamp(48px,9vh,104px);
  writing-mode:vertical-rl;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--quiet);display:flex;align-items:center;gap:14px;
}
.cue::after{content:"";width:1px;height:54px;background:linear-gradient(var(--halo),transparent)}
@media (max-width:760px){ .cue{display:none} }

/* ── hero-pin: GSAP scroll-zoom ──────────────────────────────────────────────
   .hero-pin is a 200svh wrapper that gives GSAP 100vh of scroll distance to
   work with while the section itself is sticky. .hero-bottle is a new inner
   layer that GSAP scales independently — the ::after gradient scrim and the
   .type text both sit OUTSIDE it, so they move at their own speed and create
   the parallax depth illusion seen in agency scroll-reel sites.             */
.hero-pin { height: 200svh; }
.hero-pin > .hero { position: sticky; top: 0; }
.hero-bottle {
  position: absolute; inset: 0;
  transform-origin: center center;
  will-change: transform;
}
.hero-bottle video,
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;         /* video fallback */
  display: block;
}

/* ── 02 accord ───────────────────────────────────────────────────────────── */
.accord-head{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,64px)}
@media (min-width:960px){
  .accord-head{grid-template-columns:1.15fr .85fr;align-items:end}
}

/* overflow-x:hidden scoped HERE, not on html/body: this section is not an
   ancestor of anything position:sticky (.hero-pin > .hero and .scrub .stick
   both live in separate sections), so it can't break either pin. GSAP's
   .note entrance animation starts each card translate(±110px) off-canvas
   before easing in -- that transform briefly extends past the row's own
   bounds, which this clips locally. */
/* Per spec, overflow-x:hidden paired with overflow-y:visible is not a legal
   combination -- the UA FORCES y to compute as auto whenever x is non-visible
   and y is visible, even if y is declared visible explicitly (confirmed: this
   file tried exactly that and getComputedStyle still reported auto). .notes
   then became its own scrollable box the instant its content ran a few px
   taller than its box, showing a real scrollbar for exactly this section.
   The only way to keep x clipped without that side effect is to make y
   non-visible too -- .notes never needs its own vertical scroll (the page
   scrolls, not this div), so hiding it is free. */
.notes{margin-top:clamp(56px,9vh,120px);border-top:1px solid var(--line);overflow:hidden}
.note{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line)}
@media (min-width:860px){
  .note{grid-template-columns:88px 1fr 1.25fr;align-items:center;gap:clamp(24px,4vw,64px)}
  /* grid items default to min-width:auto, which lets the <img>'s own intrinsic
     width win over the track and overflow the row -- most visible once
     `order` reshuffles a flip card. min-width:0 lets the track actually
     constrain it. */
  .note > *{min-width:0}
  .note.flip figure{order:3}
  .note.flip .txt{order:2}
}
.note .idx{
  font-size:10px;letter-spacing:.2em;color:var(--quiet);font-variant-numeric:tabular-nums;
  padding-top:clamp(24px,3vh,34px);align-self:start;
}
.note .txt{padding:clamp(28px,4.5vh,52px) 0}
.note h3{
  font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(26px,3.4vw,46px);line-height:1.05;letter-spacing:-.01em;
}
.note h3 span{
  display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--halo);font-family:var(--sans);margin-bottom:14px;
}
.note p{margin:16px 0 0;color:var(--quiet);max-width:42ch;font-size:14px}
.note figure{margin:0;overflow:hidden;position:relative}
.note figure img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  transform:scale(1.06);filter:saturate(.92);
  transition:transform 1400ms var(--ease),filter 1400ms var(--ease);
}
.note:hover figure img{transform:scale(1);filter:saturate(1.04)}

/* ambient mist, screen-blended -- this is why no alpha PNG was needed */
.mist-bed{position:relative;z-index:2;height:clamp(280px,46vh,520px);overflow:hidden}
.mist-bed video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:screen;opacity:.55;
}
.mist-bed q{
  position:absolute;inset:0;display:grid;place-items:center;quotes:none;
  padding-inline:var(--gut);text-align:center;
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,3.6vw,52px);
  line-height:1.2;letter-spacing:-.01em;
}

/* ── 03 alchemy ──────────────────────────────────────────────────────────── */
.alchemy{position:relative;z-index:2}
/* width must stay definite: with only min-height set, aspect-ratio resolves the
   other way and inflates the box past the viewport */
.alchemy .frame{position:relative;overflow:hidden;width:100%;aspect-ratio:21/9;min-height:340px}
.alchemy .frame video{
  width:100%;height:100%;object-fit:cover;
  /* this clip's source ran warm amber against an otherwise obsidian/violet page.
     hue-rotating it to force "violet" turned amber into an ugly magenta wash --
     a lie the eye catches immediately. Just desaturate slightly and let the
     vignette below contain it; a graded video and a properly regenerated one
     (see PROMPTS-VIDEO.md) are not the same fix, but this at least stops it
     reading as a foreign asset. */
  filter:saturate(.82) contrast(1.04);
}
.alchemy .frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(6,4,10,.82),transparent 50%),
    linear-gradient(to bottom,rgba(6,4,10,.5),transparent 24%,transparent 70%,rgba(6,4,10,.65)),
    radial-gradient(80% 90% at 50% 50%,transparent 55%,rgba(6,4,10,.4) 100%);
}
.alchemy .over{
  position:absolute;z-index:2;left:calc(var(--bar) + var(--gut));
  bottom:clamp(28px,6vh,72px);right:var(--gut);
}
@media (max-width:760px){ .alchemy .over{left:var(--gut)} }
.spec{
  display:grid;margin-top:clamp(48px,8vh,96px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid var(--line);
}
.spec div{
  padding:clamp(22px,3.5vh,38px) clamp(18px,2vw,32px) clamp(22px,3.5vh,38px) 0;
  border-bottom:1px solid var(--line);
}
.spec dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet);margin:0}
.spec dd{margin:12px 0 0;font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);line-height:1.1}

/* ── 04 flacon: scrub + finishes ─────────────────────────────────────────── */
.flacon{position:relative;z-index:2}
.scrub{position:relative;height:300svh}          /* scroll distance for the turn */
.scrub .stick{
  position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;
}
.scrub canvas{width:min(74vh,86vw);height:auto;display:block}     /* ratio comes from the canvas's own width/height attrs, matching the source frames (1000x562) */
.scrub .ghost{ /* oversized display type sitting behind the bottle */
  position:absolute;z-index:-1;left:50%;top:50%;translate:-50% -50%;
  font-family:var(--serif);font-size:clamp(90px,22vw,340px);line-height:.8;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(224,170,255,.12);
  white-space:nowrap;pointer-events:none;user-select:none;
}
.scrub .deg{
  position:absolute;right:var(--gut);top:50%;translate:0 -50%;
  font-size:10px;letter-spacing:.2em;color:var(--quiet);font-variant-numeric:tabular-nums;
}
@media (max-width:760px){ .scrub .deg{display:none} }

.finishes{
  display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:clamp(48px,8vh,96px);
}
.fin{
  background:var(--void);padding:clamp(20px,3vw,34px);position:relative;
  transition:background 500ms var(--ease),transform 400ms var(--ease);
  cursor:pointer;user-select:none;
}
.fin::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid transparent;
  transition:border-color 400ms var(--ease),box-shadow 400ms var(--ease);
}
.fin:hover{background:var(--ink)}
.fin:hover::before{border-color:rgba(224,170,255,.25)}
.fin.active{background:#0e0817}
.fin.active::before{
  border-color:var(--halo);
  box-shadow:inset 0 0 20px rgba(157,78,221,.18),0 0 24px rgba(157,78,221,.12);
}
.fin-badge{
  position:absolute;top:16px;right:16px;
  font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);padding:3px 7px;
  border:1px solid var(--line);background:rgba(6,4,10,.6);backdrop-filter:blur(4px);
  transition:color 400ms var(--ease),border-color 400ms var(--ease),background 400ms var(--ease);
}
.fin.active .fin-badge{
  color:var(--gold);border-color:var(--gold);background:rgba(201,162,39,.08);
}
.fin img{
  width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.95);
  transition:transform 1000ms var(--ease),filter 1000ms var(--ease);transform:scale(.96);
}
.fin:hover img,.fin.active img{transform:scale(1);filter:saturate(1.05)}
.fin h4{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,26px);margin:22px 0 0}
.fin p{margin:8px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}

.detail{
  display:grid;gap:clamp(24px,4vw,64px);margin-top:clamp(56px,9vh,110px);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .detail{grid-template-columns:1.1fr .9fr;align-items:center} }
.detail img{width:100%;object-fit:cover;aspect-ratio:4/5;max-height:72vh}   /* 4:5 at a wide column was rendering ~1175px tall -- taller than the viewport */

/* ── 05 reserve ──────────────────────────────────────────────────────────── */
.reserve{position:relative;z-index:2;overflow:hidden}
.reserve .frame{position:relative;width:100%;aspect-ratio:16/9;min-height:420px;overflow:hidden}
.reserve .frame video{width:100%;height:100%;object-fit:cover}
.reserve .frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--void),transparent 55%);
}
.acquire{
  position:relative;z-index:3;margin-top:-14vh;
  padding:0 var(--gut) clamp(80px,12vh,150px) calc(var(--bar) + var(--gut));
}
@media (max-width:760px){ .acquire{padding-left:var(--gut)} }
.edition{
  display:flex;align-items:baseline;gap:16px;margin-bottom:26px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.edition b{
  font-family:var(--serif);font-size:clamp(28px,4vw,54px);letter-spacing:0;
  font-weight:400;font-variant-numeric:tabular-nums;color:var(--paper);
}
.cta{
  display:inline-flex;align-items:center;gap:18px;margin-top:clamp(32px,5vh,56px);
  padding:20px 30px;border:1px solid var(--line);position:relative;overflow:hidden;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  transition:color 600ms var(--ease),border-color 600ms var(--ease);
}
.cta span{position:relative;z-index:2}
.cta::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--paper);
  transform:translateY(101%);transition:transform 700ms var(--ease);
}
.cta:hover{color:var(--void);border-color:var(--paper)}
.cta:hover::before{transform:none}
.cta i{position:relative;z-index:2;width:26px;height:1px;background:currentColor;font-style:normal}

/* ── colophon ────────────────────────────────────────────────────────────── */
footer{
  position:relative;z-index:2;border-top:1px solid var(--line);
  padding:clamp(48px,8vh,90px) var(--gut) 40px calc(var(--bar) + var(--gut));
}
@media (max-width:760px){ footer{padding-left:var(--gut)} }
.colophon{display:grid;gap:clamp(24px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.colophon h5{
  margin:0 0 16px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--quiet);font-weight:500;
}
.colophon p,.colophon li{margin:0 0 8px;font-size:12px;color:var(--quiet);line-height:1.7}
.colophon ul{margin:0;padding:0;list-style:none}
.colophon a{border-bottom:1px solid var(--line);transition:border-color 500ms var(--ease)}
.colophon a:hover{border-color:var(--halo)}
.sig-row{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  margin-top:clamp(40px,6vh,72px);padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv > *{transform:none}
  .fade{opacity:1;transform:none}
  .scrub{height:auto}
  .scrub .stick{position:static;height:auto;padding-block:12vh}
  .hero-pin{height:auto}
  .hero-pin > .hero{position:relative}
}