/* nmn.css — page-local styling for the NeoSimply NMN landing page.
   Type and the four Renaissance moves come from the two shared sheets linked in
   the head. Only what is specific to this page lives here.
   Full brief in SPEC.md. Read it before changing anything. */

:root{
  /* ONE dark world. Flavia: "i dont want the white background!" — the page
     used to drop out of the hero's night into cream paper, and every dark
     photograph then sat on it as a hard-edged rectangle. Now the whole page
     stays inside the world the hero clip opens: these darks are SAMPLED off
     the clip's own corners (#000707 to #151b1f), not picked from a palette,
     so the hero's last frame and the first section share a surface.
     Nothing here is #fff and nothing is #000 — that rule survives the flip. */
  --night:#0a1114;            /* the page ground, middle of the clip's range */
  --night-2:#131a1f;          /* one lifted step, for cards */
  --lt:#f2ede3;               /* text; same value the hero HUD already uses */
  --lt-2:#8a8f99;             /* dim; ditto */
  --lt-3:#b8b4a9;             /* body copy, between the two */
  --line:rgba(242,237,227,.16);
  --gold:#c9a96e;
  --wrap:76rem; --pad:clamp(1rem,4vw,3.25rem);
  --bar-h:4.5rem;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--night)}
body{
  /* the night lives on html so the fixed veil can sit between it and the
     content; body itself must stay transparent for her to show through */
  background:transparent; color:var(--lt);
  font-family:var(--sans,'Instrument Sans',system-ui,sans-serif);
  font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* the sticky bar never covers the last line of the page */
  padding-bottom:var(--bar-h);
}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}


/* ---- brand mark, small and top left, no title card ---------------------- */
/* Their page puts a small mark in the corner and lets the artwork own the
   screen. A headline in a centred box is what every other supplement page does. */
.mark{
  position:absolute; z-index:6; top:clamp(1rem,3vw,2rem); left:var(--pad);
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lt); opacity:.82;
}
.mark b{font-weight:600}


/* ---- a normal section, on the same night as the hero -------------------- */
/* Sections carry NO background of their own — the body is the one surface and
   the hairline under each tag is what marks a chapter. That is the whole
   "too many backgrounds" fix: there is nothing left to count. */
.sec{ padding:clamp(3.5rem,9vw,7rem) 0 }
.sec__tag{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--lt-2); margin-bottom:1rem;
}
/* Headline scale was the timid thing on this page: Springs gives one
   statement the screen, Vanholtz is nothing but scale. Half again bigger. */
.sec h2{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-weight:500; font-size:clamp(2.4rem,5.8vw,4.6rem);
  line-height:1; letter-spacing:-.02em; max-width:18ch;
}
.lede{ margin-top:1.6rem; max-width:52ch; font-size:1.06rem; color:var(--lt-3) }


/* ---- the sticky buy bar -------------------------------------------------- */
/* Appears once the hero is passed and never leaves. No animation on it and no
   animation on the price: a number that moves while somebody is deciding
   whether to trust it reads as a trick. */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:var(--bar-h);
  display:flex; align-items:center; gap:1rem;
  padding:0 var(--pad);
  background:rgba(10,17,20,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(105%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.buybar.is-on{ transform:none }
.buybar__name{
  flex:1 1 auto; min-width:0;
  font-size:.82rem; color:var(--lt-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.buybar__price{ font-size:1.15rem; font-weight:600; letter-spacing:-.01em }
.buybar__cta{
  flex:0 0 auto;
  background:var(--gold); color:#231f14;
  font-weight:600; font-size:.92rem; letter-spacing:.01em;
  padding:.72rem 1.35rem; border-radius:999px;
  text-decoration:none; white-space:nowrap;
  transition:filter .2s ease;
}
.buybar__cta:hover{ filter:brightness(1.07) }

@media (max-width:640px){
  .buybar__name{ display:none }
  .buybar{ justify-content:space-between }
}


/* ---- II. what it is ------------------------------------------------------ */
.what h2{ max-width:16ch }


/* ---- III. the formula ---------------------------------------------------- */
/* The credibility screen. Numbers set in the sans, right aligned so they scan
   as a column, laid out like a specification rather than a sales list.
   ⭐ The numbers ARE the design here. Nothing decorative belongs on this screen. */
.formula__grid{
  margin-top:clamp(2rem,5vw,3.5rem);
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;
  align-items:start;
}
.formula__grid{ max-width:44rem }

.spec{ width:100%; border-collapse:collapse; font-size:.95rem }
.spec caption{
  text-align:left; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--lt-2); padding-bottom:.9rem;
}
.spec th,.spec td{
  padding:.62rem 0; border-bottom:1px solid var(--line);
  text-align:left; font-weight:400; color:var(--lt-3);
}
.spec td:last-child{
  text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--lt);
}
.spec tr:last-child th,.spec tr:last-child td{ border-bottom:0 }
.spec__note{ margin-top:1rem; font-size:.82rem; color:var(--lt-2) }




/* ---- IV. the proof ------------------------------------------------------- */
/* The stat band off her Rockside page: hairline above and below, serif
   numerals, tiny caps labels. */
.figures{
  margin-top:clamp(1.8rem,4vw,3rem);
  display:grid; gap:1.6rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-top:clamp(1.6rem,4vw,2.4rem);
  padding-bottom:clamp(1.6rem,4vw,2.4rem);
}
.fig b{
  display:block;
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(2.2rem,5vw,3.4rem); font-weight:500; line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.fig span{ display:block; margin-top:.45rem; font-size:.8rem; color:var(--lt-2) }

/* Reviews are quoted verbatim and attributed. They are the customer's words,
   never ours, and nothing from inside them is ever lifted into a headline.
   The card is the one lifted surface the dark page allows itself. */
.reviews{
  margin-top:clamp(2.4rem,6vw,4rem);
  display:grid; gap:clamp(1.4rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.review{
  background:var(--night-2); padding:clamp(1.3rem,2.5vw,1.9rem);
  border:1px solid rgba(242,237,227,.09);
}
.review__stars{ color:var(--gold); font-size:.85rem; letter-spacing:.1em }
.review p{
  margin-top:.9rem; font-size:.97rem; line-height:1.55; color:var(--lt-3);
}
.review cite{
  display:block; margin-top:1rem; font-style:normal;
  font-size:.76rem; letter-spacing:.06em; color:var(--lt-2);
}


/* ---- VI. the offer ------------------------------------------------------- */
.offer__grid{
  margin-top:clamp(2rem,5vw,3rem);
  display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:820px){ .offer__grid{ grid-template-columns:.85fr 1.15fr } }
.offer__price{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(3rem,8vw,5rem); font-weight:500; line-height:1;
  letter-spacing:-.02em;
}
.offer__terms{ margin-top:1.6rem; display:grid; gap:.55rem; font-size:.95rem;
  color:var(--lt-3) }
.offer__terms li{ list-style:none; padding-left:1.3rem; position:relative }
.offer__terms li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.42rem; height:.42rem; background:var(--gold); border-radius:50%;
}
.btn{
  display:inline-block; margin-top:2rem;
  background:var(--gold); color:#231f14;
  font-weight:600; font-size:1rem;
  padding:.95rem 2rem; border-radius:999px; text-decoration:none;
  transition:filter .2s ease;
}
/* Micro-interactions, the course's smallest rule: a control acknowledges
   the hand. Grow a breath on hover, press down on click. Never more. */
.btn:hover{ filter:brightness(1.07); transform:translateY(-2px) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn{ transition:filter .2s ease, transform .25s cubic-bezier(.22,1,.36,1) }


/* ---- VII. close ---------------------------------------------------------- */
/* One line, one button, nothing else. The photograph that used to sit between
   them is now the offer image, and the close gets the room instead. */
.close{ text-align:center }
.close h2{ margin:0 auto; max-width:20ch }
.close .btn{ margin-top:clamp(2.4rem,6vw,4rem) }
.legal{
  border-top:1px solid var(--line);
  color:rgba(242,237,227,.42);
  font-size:.74rem; line-height:1.6; padding:2.5rem 0 3rem;
}


/* ============================================================
   NOT-A-TEMPLATE PASS
   Three defects, all named in the course and all present in the
   first build of this page:
     1. four identical cards in a neat grid  -> the cheap signal
     2. every figure the same size           -> nothing leads
     3. nothing moves below the hero         -> the page is dead
   ============================================================ */

/* ---- 1. scale contrast on the figures ---------------------------------- */
/* One number carries the screen and the rest support it. Their page does the
   same thing: large headline, medium subhead, small detail, and never three
   things competing. */
.figures{ grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); align-items:end }
.fig--lead{ grid-column:span 2 }
.fig--lead b{ font-size:clamp(4.5rem,13vw,9rem); line-height:.82 }
.fig--lead span{ font-size:.95rem; color:var(--lt) }
.fig--lead .fig__stars{
  display:block; color:var(--gold); font-size:1rem; letter-spacing:.18em;
  margin-bottom:.4rem;
}

/* ---- 2. break the review grid ------------------------------------------ */
/* Scattered and rotated rather than a tidy row, the way Zera's own services
   section is deliberately thrown off-grid. One review is promoted to a pull
   quote and set in the serif so it reads as a voice, not a card. */
.reviews{ grid-template-columns:repeat(12,1fr); align-items:start }
.review{ transition:transform .5s cubic-bezier(.22,1,.36,1) }
.review:nth-child(1){ grid-column:1 / span 7; transform:rotate(-.5deg) }
.review:nth-child(2){ grid-column:9 / span 4; margin-top:3.5rem; transform:rotate(1deg) }
.review:nth-child(3){ grid-column:2 / span 4; margin-top:-1rem; transform:rotate(.8deg) }
.review:nth-child(4){ grid-column:7 / span 5; margin-top:2rem; transform:rotate(-1.2deg) }
.review:hover{ transform:rotate(0) translateY(-4px) }

/* the promoted one */
.review--lead{ background:transparent; border:0; padding:0 }
.review--lead p{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(1.5rem,3.2vw,2.35rem); line-height:1.16;
  letter-spacing:-.015em; color:var(--lt);
}
/* .review--lead p wins specificity over .review__stars, and the stars ARE a
   p, so without this they silently drop the gold and go paper-white. */
.review--lead .review__stars{ font-size:1rem; color:var(--gold) }

@media (max-width:760px){
  .reviews{ grid-template-columns:1fr }
  .review{ grid-column:1 / -1 !important; margin-top:0 !important; transform:none !important }
  .fig--lead{ grid-column:span 2 }
}

/* ---- 3. the page moves ------------------------------------------------- */
/* Reveal on scroll and nothing else. Fade up, short distance, eased on the
   curve the rest of the portfolio uses. Order within a block is handled by a
   small stagger so the eyebrow, heading and body do not all arrive together. */
[data-rise]{
  opacity:0; transform:translateY(1.4rem);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0s);
}
[data-rise].is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  [data-rise]{ opacity:1; transform:none; transition:none }
}

/* ---- texture ------------------------------------------------------------ */
/* A hairline rule under each section tag. On one continuous surface this
   line is what marks the chapters, so it earns its place. */
.sec__tag{ display:flex; align-items:center; gap:.9rem }
.sec__tag::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.28 }


/* ---- 4. type metrics, measured ------------------------------------------ */
/* From tokens.css and SPEC 6, taken off the Shopify Renaissance page. The
   build had been inheriting lighter, looser defaults. All three faces are
   variable with real weight axes to 700, so nothing here is a fake bold. */
.sec h2,
.offer__price{
  font-weight:700;
  line-height:.9;
  letter-spacing:-.03em;
}
/* The lede is the one metric that does NOT transfer.
   tokens.css records .96 / -.04em, but that was measured off the Shopify
   Renaissance page where the lede is large display type. Ours is 1.06rem body
   copy, so .96 puts the leading below the font size and the lines overlap —
   and Romanian is worse than English for it, because ă â î ș ț carry marks
   above and cedillas below that then collide. Heading metrics applied as
   measured; the lede keeps the tightened tracking at half strength and a
   leading that can actually be read. */
.lede{ line-height:1.34; letter-spacing:-.02em }


/* ---- 5. full-bleed photography ------------------------------------------ */
/* Flavia: "the photos must be all stretched an i wanna make it look as one
   piece." This is the pattern from her Rockside page and from every reference
   reel: the photograph takes the whole screen, near full height, and the
   words sit ON it, bottom left — an eyebrow and one serif line. Never a
   caption paragraph underneath. The slate images were shot on near-black
   stone, so their edges run straight into the page's own dark and the cut
   between section and photograph disappears: one piece. */
.bleed{
  position:relative;
  margin:clamp(2.5rem,6vw,4.5rem) 0 0;
  width:100%;
  height:min(92svh, 56.6vw);   /* never upscale past the 2000px plate's ratio */
  overflow:hidden;
}
.beat--bleed .bleed{ margin-top:0 }
.bleed img{
  width:100%; height:100%;
  object-fit:cover;
  background:#0d0d0a;
}
/* the words need ground to sit on whatever the photograph is doing */
.bleed::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(4,8,10,.72) 0%, rgba(4,8,10,0) 38%);
}
.bleed__label{
  position:absolute; z-index:2;
  left:var(--pad); bottom:clamp(1.6rem,4vw,3rem);
  max-width:34ch;
}
.bleed__tag{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--lt-2); margin-bottom:.55rem;
}
.bleed__line{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-weight:600; font-size:clamp(1.6rem,3.2vw,2.6rem);
  line-height:1; letter-spacing:-.02em; color:var(--lt);
}
/* compliance, one word, out of the way */
.bleed__mark{
  position:absolute; z-index:2;
  top:clamp(1rem,2.5vw,1.8rem); right:var(--pad);
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(242,237,227,.5);
}

/* On a phone the width-capped height would shrink the bleed to a thin strip
   (56.6vw of 390px is a letterbox, not a chapter). Give it real height and
   let cover crop the sides — the subjects are centred, the crop is free. */
@media (max-width:860px){
  .bleed{ height:68svh }
}


/* ---- the chapter rail ---------------------------------------------------- */
/* Roman numerals down the right edge, the Renaissance page's own device.
   The live chapter's numeral is paper-bright, the rest sit dim. */
.rail{
  position:fixed; z-index:30;
  right:clamp(.7rem,1.6vw,1.6rem); top:50%;
  transform:translateY(-50%);
  display:grid; gap:1.1rem;
  text-align:center;
}
.rail a{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:.95rem; text-decoration:none;
  color:rgba(242,237,227,.32);
  transition:color .35s ease;
}
.rail a.is-live{ color:var(--lt) }
.rail a:hover{ color:var(--gold) }
@media (max-width:1100px){ .rail{ display:none } }


/* ---- the reprise --------------------------------------------------------- */
/* The film in reverse: the capsule closes itself before the ask. */
.reprise__track{ height:220vh; position:relative }
.reprise__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:linear-gradient(160deg,#000707 0%,#0a1114 55%,#151b1f 100%);
}
.reprise__video{
  display:block; width:100%; height:100%;
  object-fit:cover; background:#000707;
}
@media (max-width:860px){
  .reprise__track{ height:auto }
  .reprise__stage{ position:static; height:72svh }
  /* canvas phones scrub the seal under the thumb: they get a real track */
  .reprise__track.is-canvas{ height:200vh; position:relative }
  .reprise__track.is-canvas .reprise__stage{ position:sticky; top:0; height:100svh }
}


/* ---- the story chapter --------------------------------------------------- */
/* The molecule's history: big serif years lead, short lines follow. The
   facts carry names and dates and we claim nothing in our own voice. */
.story__rows{ margin-top:clamp(2.4rem,6vw,4rem); display:grid; gap:clamp(2rem,5vw,3.2rem) }
.story__row{
  display:grid; gap:1rem 3rem;
  grid-template-columns:1fr;
  border-top:1px solid var(--line);
  padding-top:clamp(1.4rem,3vw,2.2rem);
  align-items:start;
}
@media (min-width:820px){ .story__row{ grid-template-columns:.38fr .62fr } }
.story__year{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-weight:700; line-height:.82; letter-spacing:-.03em;
  font-size:clamp(3.2rem,8vw,6.4rem);
  font-variant-numeric:tabular-nums;
}
.story__row p{ max-width:52ch; color:var(--lt-3); font-size:1.02rem }
.story__row p b{ color:var(--lt); font-weight:600 }

/* one quiet story line under the serif, still on the photograph */
.bleed__sub{
  margin-top:.7rem; max-width:44ch;
  font-size:.88rem; line-height:1.5; color:rgba(242,237,227,.78);
}


/* The bottle answers the hand, nothing more. A still product at the moment
   of decision; motion here would read as selling too hard. */
.offer__grid img{
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.offer__grid img:hover{ transform:scale(1.015) rotate(.4deg) }

/* ---- the comparison ------------------------------------------------------ */
.compare{ margin-top:clamp(2.5rem,6vw,4rem); max-width:44rem }
.compare .sec__tag{ margin-bottom:1.2rem }

/* ---- the questions ------------------------------------------------------- */
/* Native accordion. The plus rotates, the answer glides, nothing else. */
.faq__list{ margin-top:clamp(1.8rem,4vw,2.6rem); max-width:52rem }
.faq__list details{ border-top:1px solid var(--line) }
.faq__list details:last-child{ border-bottom:1px solid var(--line) }
.faq__list summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding:1.1rem 0;
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(1.15rem,2vw,1.45rem); font-weight:600; color:var(--lt);
}
.faq__list summary::-webkit-details-marker{ display:none }
.faq__list summary::after{
  content:"+"; font-family:var(--sans,'Instrument Sans',sans-serif);
  font-weight:400; color:var(--gold);
  transition:transform .3s ease;
}
.faq__list details[open] summary::after{ transform:rotate(45deg) }
.faq__list details p{
  padding:0 0 1.3rem; max-width:56ch;
  color:var(--lt-3); font-size:.98rem; line-height:1.6;
}

/* the bottle in the offer: alpha film, floats on the night. The transform
   seats it over the capsule of light in the veil woman's palm (measured in
   the browser, not guessed) so she holds the product at the ask. */
.offer__video{
  display:block; width:100%; height:auto;
  background:transparent;
}

/* how it is taken, and who it is not for: two quiet columns under the ask */
.offer__notes{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--line);
  display:grid; gap:1.6rem 3rem;
  grid-template-columns:1fr;
  max-width:56rem;
}
@media (min-width:760px){ .offer__notes{ grid-template-columns:1fr 1fr } }
.offer__notes-tag{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--lt-2); margin-bottom:.5rem;
}
.offer__notes p:not(.offer__notes-tag){
  font-size:.92rem; line-height:1.6; color:var(--lt-3); max-width:44ch;
}


/* ---- the veil ------------------------------------------------------------ */
/* Fixed behind everything. Her presence is kept quiet: dimmed, darkened at
   the edges, so the words always win. Opaque stages (hero, reprise) pass
   over her, which turns her into an apparition between films. */
.veil{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.veil::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,17,20,.62) 0%, rgba(10,17,20,.16) 45%,
                           rgba(10,17,20,.34) 100%),
    linear-gradient(0deg, rgba(10,17,20,.5) 0%, rgba(10,17,20,.12) 40%);
}
.veil__video, .veil__old, .veil__young, .veil__meet{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:68% center;
  opacity:.66;
}
/* phones crop hard: her face lives at 47 percent of the frame, so centre
   the aging stills on HER, not on the gold swirl */
@media (max-width:860px){
  .veil__old, .veil__young{ object-position:47% center }
}
.veil__old, .veil__young{ display:none }
.veil__meet{ opacity:0 }
@media (max-width:860px){
  .veil__video{ display:none }
  .veil__old, .veil__young{ display:block }
  .veil__young{ opacity:0 }
}


/* ---- the birth bloom ----------------------------------------------------- */
.birth{
  position:fixed; inset:-20%;
  z-index:35; pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 46%,
    rgba(255,244,214,.98) 0%,
    rgba(240,197,110,.92) 18%,
    rgba(201,169,110,.55) 38%,
    rgba(20,17,8,0) 68%);
  will-change:opacity, transform;
}
@media (max-width:860px){ .birth{ display:none } }




/* ==========================================================================
   THE PAGE THAT FEELS AGING (driven by --age from age-feel.js)
   1 = aged: drained color, grey gold, slow heavy reveals, tired spacing.
   0 = alive again, reached as the formula arrives and the veil woman turns
   young. The chapters BEFORE the formula wear the filter; from the formula
   on, the page is always fluid. */
:root{ --age:1 }
#c1, #c2{
  filter: saturate(calc(1 - var(--age)*0.75))
          brightness(calc(1 - var(--age)*0.10))
          contrast(calc(1 - var(--age)*0.06));
}
#c1 p, #c1 li, #c2 p{
  letter-spacing: calc(var(--age)*0.02em);
}
/* aged reveals crawl; young ones breathe */
[data-rise]{
  transition-duration: calc(.7s + var(--age)*0.9s), calc(.7s + var(--age)*0.9s);
}

/* the aged voice: one serif line that opens each drained chapter, the words
   the visitor reads while the world is still grey */
.age-line{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.3;
  color:var(--lt); max-width:30ch;
  margin:0 0 clamp(2rem,5vw,3.2rem);
}

/* the thumb scrub: on phones a canvas paints the hero frames under the
   finger; the film elements stand hidden behind it */
.capsule__canvas{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
}
.is-canvas .capsule__video, .is-canvas .capsule__birth, .is-canvas .reprise__video{ visibility:hidden }

/* youth is light: a warm bloom that rises as the morph runs backwards,
   so by the meeting she is luminous. Driven by veil.js with the same t. */
.veil__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 55% at 62% 38%, rgba(255,214,140,.38) 0%, rgba(255,214,140,0) 70%),
    radial-gradient(90% 80% at 50% 60%, rgba(201,169,110,.16) 0%, rgba(201,169,110,0) 75%);
  mix-blend-mode:screen;
  opacity:0;
}