/* ==========================================================================
   Streamverse — wedding.streamverseai.com
   Two acts on one page: a sticky scroll-scrubbed stage, then an editorial
   document. Plain CSS, no build step, no framework.

   Note vs. the Southdown engine this forks from: that engine keeps its CSS in a
   JS template literal inside an @layer, which cost a debugging session when a
   stray backtick in a comment killed the whole string (HANDOFF §5.8) and which
   makes page-level overrides a layering puzzle (§5.7). Here the stylesheet is a
   real file and there is only one cascade. Keep it that way.
   ========================================================================== */

@font-face{font-family:"Fraunces";src:url(assets/font/fraunces-latin.woff2) format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:"InterVar";src:url(assets/font/inter-latin.woff2) format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;}

:root{
  --paper:#F5F0E7;
  --paper-hi:#FBF8F2;
  --ink:#17130E;
  --ink-soft:#5C5346;
  --rule:#DFD5C4;
  --gold:#8A6420;          /* 5.0:1 on paper */
  --gold-hi:#C89B4E;       /* 7.1:1 on ink   */
  --bar-h:66px;
  --display:"Fraunces",Iowan Old Style,"Palatino Linotype",Georgia,serif;
  --body:"InterVar",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --measure:38rem;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:clamp(1rem,.96rem + .18vw,1.09rem);line-height:1.62;
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{margin:0;font-weight:inherit;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
::selection{background:var(--gold);color:#fff;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px;}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;text-decoration:none;font-size:.9rem;}
.skip:focus{left:0;}

/* ---------- persistent chrome ------------------------------------------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--bar-h);padding:0 clamp(16px,4vw,56px);}
.bar__rule{height:1px;background:var(--rule);position:relative;overflow:hidden;}
.bar__rule span{position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0;}
.brand__mark{width:26px;height:26px;flex:none;color:var(--ink);}
.brand__name{font-family:var(--display);font-variation-settings:"opsz" 40,"SOFT" 0,"WONK" 0;
  font-weight:600;font-size:1.06rem;letter-spacing:-.005em;white-space:nowrap;}
.bar__end{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);min-width:0;}
.tag{margin:0;font-size:.83rem;color:var(--ink-soft);white-space:nowrap;}
.tag b{color:var(--ink);font-weight:600;}
.tag__short{display:none;}

/* ---------- buttons ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:.94rem;font-weight:550;text-decoration:none;white-space:nowrap;
  padding:13px 24px;border-radius:2px;border:1px solid transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;}
.btn--sm{padding:9px 16px;font-size:.86rem;}
.btn--lg{padding:16px 30px;font-size:1rem;}
.btn--solid{background:var(--ink);color:var(--paper-hi);}
.btn--solid:hover{background:#2E2519;transform:translateY(-1px);}
.btn--ghost{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 28%,transparent);}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px);}
.btn--gold{background:var(--gold-hi);color:#17130E;}
.btn--gold:hover{background:#DCB169;transform:translateY(-1px);}

/* ==========================================================================
   ACT ONE — the stage
   Default (no JS, reduced motion, data saver): a plain stacked sequence.
   .is-live upgrades it to the sticky scrubbed stage.
   ========================================================================== */
.film{position:relative;}
/* The live stage needs scenes in one layer and copy in another, but read as a
   document those two layers would print four pictures and then four blocks of text.
   display:contents dissolves the two wrappers in the static state so `order` can
   interleave them back into scene, words, scene, words. */
.film__sticky{padding-top:var(--bar-h);display:flex;flex-direction:column;}
.film__scenes,.film__copy{display:contents;}
.film:not(.is-live) .scene[data-scene="0"]{order:1}
.film:not(.is-live) .beat[data-beat="0"]{order:2}
.film:not(.is-live) .scene[data-scene="1"]{order:3}
.film:not(.is-live) .beat[data-beat="1"]{order:4}
.film:not(.is-live) .scene[data-scene="2"]{order:5}
.film:not(.is-live) .beat[data-beat="2"]{order:6}
.film:not(.is-live) .scene[data-scene="3"]{order:7}
.film:not(.is-live) .beat[data-beat="3"]{order:8}
.scene{margin:0;position:relative;}
/* Capped so the first heading shares the opening screen with the picture. Left
   uncapped, a 16:9 full-bleed still pushes every word below the fold, and the one
   visitor who most needs the words — reduced motion, no JS, data saver — is the one
   who gets a wordless photograph. */
.scene__still{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  max-height:56vh;max-height:56svh;}
.scene__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;z-index:1;}
.film__scrim{display:none;}
/* Static state uses the document's own wrapper geometry so the fallback shares one
   left edge with everything below it, rather than sitting in its own centred column. */
.beat{padding:clamp(26px,5vw,46px) clamp(18px,5vw,56px) clamp(40px,7vw,72px);
  width:100%;max-width:74rem;margin:0 auto;}
.film:not(.is-live) .beat__title{max-width:20ch;}
.beat__num{margin:0 0 12px;font-family:var(--display);font-variation-settings:"opsz" 14,"SOFT" 0,"WONK" 0;
  font-size:.78rem;letter-spacing:.18em;color:var(--ink-soft);}
.beat__num span{color:var(--gold);font-weight:600;}
.beat__eyebrow{margin:0 0 14px;font-size:.76rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);}
.beat__title{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  font-weight:400;font-size:clamp(2rem,1.15rem + 3.5vw,3.6rem);line-height:1.04;
  letter-spacing:-.018em;margin:0 0 18px;text-wrap:balance;}
.beat__body{margin:0;font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);line-height:1.55;
  color:color-mix(in srgb,var(--ink) 84%,var(--ink-soft));max-width:34em;}
.beat__cue{margin:20px 0 0;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);font-weight:600;}
.beat__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;}

/* --- live (JS) mode ------------------------------------------------------ */
.film.is-live{will-change:transform;}
.film.is-live .film__sticky{position:sticky;top:0;height:100vh;height:100svh;
  padding-top:0;overflow:hidden;display:block;}
/* isolate + z-index:1 is load-bearing, not tidiness. read() sets an inline
   z-index of ~100-120 on each scene so the active one wins its crossfade; without
   a stacking context of its own here, those numbers compete with the scrim (2) and
   the copy (3) and the film paints straight over its own words. */
.film.is-live .film__scenes{display:block;position:absolute;inset:0;z-index:1;isolation:isolate;}
.film.is-live .scene{position:absolute;inset:0;opacity:0;overflow:hidden;will-change:opacity;}
/* The opening scene is visible from the first paint (index.html sets .is-live before
   paint), so the largest paint happens at FCP instead of waiting for scrub.js. read()
   takes over its opacity on the first tick; if the engine never loads it still shows. */
.film.is-live .scene[data-scene="0"]{opacity:1;}
.film.is-live .scene__still{position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;object-position:center 42%;will-change:transform;}
.film.is-live .scene.has-clip .scene__still{opacity:0;}
/* Calibrated against the walled-garden scene, not the barn. The barn is dark and
   flatters any treatment; the garden is a sunlit frame full of white chairs and it
   is where body copy goes illegible. Anything changed here gets re-checked there. */
.film.is-live .film__scrim{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  width:min(66vw,900px);
  background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 93%,transparent) 40%,
    color-mix(in srgb,var(--paper) 66%,transparent) 66%,color-mix(in srgb,var(--paper) 24%,transparent) 86%,
    transparent 100%);}
/* The evening lands in a candlelit barn. A paper wash over a night frame reads as
   fog and throws away the one scene that does the emotional work, so the scrim has
   a dark twin whose opacity follows that scene's own crossfade — the page gets
   darker as the day does, and the finale copy flips to cream to sit on it. */
.film.is-live .film__scrim--dark{opacity:0;
  background:linear-gradient(90deg,#17130E 0%,color-mix(in srgb,#17130E 88%,transparent) 40%,
    color-mix(in srgb,#17130E 58%,transparent) 66%,color-mix(in srgb,#17130E 20%,transparent) 86%,
    transparent 100%);}
/* Scoped to is-live on purpose: in the static stacked layout this beat sits on
   paper like every other one, and cream-on-cream would erase the offer. */
.film.is-live .beat--onDark{color:var(--paper);}
.film.is-live .beat--onDark .beat__title{color:var(--paper-hi);
  text-shadow:0 2px 24px color-mix(in srgb,#17130E 80%,transparent);}
.film.is-live .beat--onDark .beat__body{color:color-mix(in srgb,var(--paper) 84%,var(--ink));}
.film.is-live .beat--onDark .beat__eyebrow,
.film.is-live .beat--onDark .beat__num span{color:var(--gold-hi);}
.film.is-live .beat--onDark .beat__num{color:color-mix(in srgb,var(--paper) 62%,var(--ink));}
.film.is-live .beat--onDark .beat__body,
.film.is-live .beat--onDark .beat__num,
.film.is-live .beat--onDark .beat__eyebrow{text-shadow:0 1px 12px #17130E;}
.film.is-live .beat--onDark .btn--solid{background:var(--gold-hi);color:#17130E;}
.film.is-live .beat--onDark .btn--solid:hover{background:#DCB169;}
.film.is-live .beat--onDark .btn--ghost{color:var(--paper);
  border-color:color-mix(in srgb,var(--paper) 45%,transparent);}
.film.is-live .beat--onDark .btn--ghost:hover{border-color:var(--paper);}
/* All four beats share one grid cell, each centred in the padded box. Grid stacking
   rather than absolute positioning is what makes the centring real: an absolutely
   positioned card has to be placed with a top percentage, and then a card that grows
   (the finale, which carries the buttons) pushes its own CTA past the fold. Here the
   padding is the guarantee and the height bands only tighten the rhythm. */
.film.is-live .film__copy{position:absolute;inset:0;z-index:3;pointer-events:none;
  display:grid;grid-template-columns:minmax(0,1fr);
  padding:calc(var(--bar-h) + 22px) clamp(18px,5vw,56px) 76px;}
.film.is-live .beat{grid-area:1/1;align-self:center;justify-self:start;
  width:min(46vw,560px);max-width:none;margin:0;padding:0;opacity:0;
  will-change:opacity,transform;}
.film.is-live .beat__cta{pointer-events:auto;}
.film.is-live .beat__title{margin-bottom:16px;
  text-shadow:0 1px 18px color-mix(in srgb,var(--paper) 82%,transparent);}
.film.is-live .beat__body{text-shadow:0 1px 10px var(--paper),0 0 26px color-mix(in srgb,var(--paper) 78%,transparent);}
.film.is-live .beat__num,.film.is-live .beat__eyebrow,.film.is-live .beat__cue{
  text-shadow:0 1px 10px var(--paper);}

/* Laptop-height windows. The finale beat carries the buttons, so it is the tallest
   card and starts clipping at a greater viewport height than the opening does —
   two bands, not one (the lesson from HANDOFF §5.10). Flex centring inside a padded
   box does most of the work; these only tighten the rhythm so nothing reaches the fold. */
@media (min-width:861px) and (max-height:820px){
  .film.is-live .beat__title{font-size:clamp(1.9rem,1rem + 2.7vw,2.8rem);margin-bottom:12px;}
  .film.is-live .beat__body{font-size:1.01rem;line-height:1.48;}
  .film.is-live .beat__num{margin-bottom:8px;}
  .film.is-live .beat__eyebrow{margin-bottom:10px;}
  .film.is-live .beat__cta{margin-top:18px;}
  .film.is-live .beat__cue{margin-top:14px;}
  .film.is-live .film__copy{padding-top:calc(var(--bar-h) + 14px);padding-bottom:56px;}
}
@media (min-width:861px) and (max-height:600px){
  .film.is-live .beat__title{font-size:clamp(1.75rem,.9rem + 2.4vw,2.35rem);}
  .film.is-live .beat__body{font-size:.97rem;line-height:1.44;}
  .film.is-live .beat__cue{display:none;}
  .film.is-live .film__copy{padding-bottom:44px;}
}

/* ==========================================================================
   ACT TWO — the document
   ========================================================================== */
.wrap{width:100%;max-width:74rem;margin:0 auto;padding:0 clamp(18px,5vw,56px);}
/* The narrow sections keep the wide wrapper and constrain their children instead.
   Centring a narrower wrapper would shift the left edge section to section, and on a
   page this long the eye reads that as drift. One left edge, top to bottom. */
.wrap--narrow > *{max-width:52rem;}
.band{padding:clamp(64px,9vw,132px) 0;}
.band--rule{border-top:1px solid var(--rule);}
.band--lede{padding-top:clamp(56px,7vw,100px);}

.eyebrow{margin:0 0 20px;font-size:.75rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);}
.h-display{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  font-weight:400;font-size:clamp(1.85rem,1.15rem + 2.6vw,3.05rem);line-height:1.08;
  letter-spacing:-.016em;margin:0 0 clamp(24px,3vw,42px);max-width:20ch;text-wrap:balance;}
.h-display--xl{font-size:clamp(2.1rem,1.2rem + 3.4vw,3.7rem);max-width:16ch;}
.lead{font-size:clamp(1.1rem,1.02rem + .45vw,1.32rem);line-height:1.55;
  color:color-mix(in srgb,var(--ink) 88%,var(--ink-soft));}
.band p{max-width:var(--measure);}
.band em{font-style:normal;box-shadow:inset 0 -.42em 0 color-mix(in srgb,var(--gold) 22%,transparent);}

.cols{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px);}
@media (min-width:900px){
  .cols{grid-template-columns:1fr 1fr;align-items:start;}
  .cols--wide{grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,86px);}
}

/* link list ---------------------------------------------------------------- */
.linklist{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule);}
.linklist li{border-bottom:1px solid var(--rule);}
.linklist a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 2px;text-decoration:none;font-weight:550;transition:padding-left .2s ease,color .2s ease;}
.linklist a span{font-weight:400;font-size:.84rem;color:var(--ink-soft);text-align:right;}
.linklist a:hover{padding-left:8px;color:var(--gold);}

/* reel --------------------------------------------------------------------- */
.reel{margin:0;}
.reel__v{width:100%;height:auto;background:#17130E;border:1px solid var(--rule);}
.reel figcaption{margin-top:14px;font-size:.87rem;line-height:1.5;color:var(--ink-soft);}

/* stats -------------------------------------------------------------------- */
.stats{margin:0;padding:clamp(24px,3vw,34px);background:var(--paper-hi);
  border:1px solid var(--rule);}
.stat + .stat{margin-top:26px;padding-top:26px;border-top:1px solid var(--rule);}
.stat dt{font-family:var(--display);font-variation-settings:"opsz" 100,"SOFT" 0,"WONK" 0;
  font-weight:400;font-size:clamp(1.9rem,1.3rem + 1.7vw,2.5rem);line-height:1;letter-spacing:-.02em;}
.stat dt span{color:var(--gold);font-size:.7em;padding:0 .1em;}
.stat dd{margin:10px 0 0;font-size:.95rem;line-height:1.5;color:var(--ink-soft);}
.stat cite{display:block;margin-top:8px;font-style:normal;font-size:.78rem;letter-spacing:.02em;
  color:var(--ink-soft);}

/* spec list ---------------------------------------------------------------- */
.spec{list-style:none;counter-reset:s;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule);}
@media (min-width:820px){.spec{grid-template-columns:1fr 1fr;column-gap:clamp(34px,5vw,72px);}}
/* align-content:start stops the two rows stretching to the tallest cell in the
   grid row, which was pushing short entries' body copy away from their heading. */
.spec li{counter-increment:s;padding:22px 0 24px;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:2.6rem 1fr;gap:4px 0;align-content:start;}
.spec li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;
  font-family:var(--display);font-variation-settings:"opsz" 14,"SOFT" 0,"WONK" 0;
  font-size:.82rem;letter-spacing:.1em;color:var(--gold);padding-top:.42em;}
.spec h3{font-size:1.04rem;font-weight:600;line-height:1.35;}
.spec p{margin:6px 0 0;font-size:.94rem;line-height:1.5;color:var(--ink-soft);max-width:34em;}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--paper-hi);border:1px solid var(--rule);padding:.06em .34em;border-radius:2px;}

/* steps -------------------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;
  gap:clamp(28px,3.4vw,44px);}
@media (min-width:880px){.steps{grid-template-columns:repeat(2,1fr);}}
.steps li{padding-top:22px;border-top:2px solid var(--ink);}
.steps__k{margin:0 0 10px;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);}
.steps h3{font-family:var(--display);font-variation-settings:"opsz" 60,"SOFT" 0,"WONK" 0;
  font-weight:400;font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);line-height:1.18;
  letter-spacing:-.012em;margin-bottom:12px;}
.steps p{font-size:.97rem;line-height:1.55;color:var(--ink-soft);}

/* price band --------------------------------------------------------------- */
.band--ink{background:var(--ink);color:var(--paper);}
.band--ink .eyebrow{color:var(--gold-hi);}
.band--ink .band p{color:inherit;}
.price{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  font-weight:400;font-size:clamp(3.6rem,2rem + 7vw,7rem);line-height:.92;letter-spacing:-.035em;
  margin:0 0 22px;color:var(--paper-hi);}
.price__sub{font-size:clamp(1.02rem,.98rem + .35vw,1.18rem);line-height:1.55;
  color:color-mix(in srgb,var(--paper) 76%,var(--ink));max-width:34em;}
.tiers{display:grid;grid-template-columns:1fr;gap:26px;margin:clamp(34px,4vw,52px) 0 0;
  padding-top:clamp(28px,3.4vw,40px);border-top:1px solid color-mix(in srgb,var(--paper) 22%,transparent);}
@media (min-width:720px){.tiers{grid-template-columns:1fr 1fr;gap:44px;}}
.tier h3{font-size:1.02rem;font-weight:600;margin-bottom:8px;color:var(--gold-hi);}
.tier p{font-size:.95rem;line-height:1.55;color:color-mix(in srgb,var(--paper) 70%,var(--ink));}
.fineprint{margin-top:clamp(28px,3.4vw,40px);font-size:.87rem;line-height:1.55;
  color:color-mix(in srgb,var(--paper) 58%,var(--ink));max-width:44em;}
.offer__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.6vw,44px);}

/* questions ---------------------------------------------------------------- */
.qa{border-top:1px solid var(--rule);}
.q{padding:clamp(26px,3vw,36px) 0;border-bottom:1px solid var(--rule);}
.q h3{font-family:var(--display);font-variation-settings:"opsz" 60,"SOFT" 0,"WONK" 0;
  font-weight:400;font-size:clamp(1.18rem,1.02rem + .6vw,1.45rem);line-height:1.25;
  letter-spacing:-.01em;margin-bottom:14px;}
.q p{color:var(--ink-soft);font-size:1rem;}

/* close + footer ----------------------------------------------------------- */
.band--close{padding-bottom:clamp(72px,10vw,150px);}
.foot{border-top:1px solid var(--rule);background:var(--paper-hi);
  padding:clamp(40px,5vw,64px) 0 clamp(48px,6vw,72px);font-size:.88rem;line-height:1.6;
  color:var(--ink-soft);}
.foot__grid{display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:760px){.foot__grid{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);}}
.foot__brand{font-family:var(--display);font-variation-settings:"opsz" 40,"SOFT" 0,"WONK" 0;
  font-weight:600;font-size:1.02rem;color:var(--ink);margin-bottom:6px;}
.foot a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;}
.foot a:hover{color:var(--ink);}
.foot__note{font-size:.81rem;color:color-mix(in srgb,var(--ink-soft) 88%,var(--paper-hi));}

/* ==========================================================================
   Phones. The stage copy moves to the bottom, clear of the home indicator, and
   the scrim flips to a bottom-up wash — the same treatment the engine uses.
   ========================================================================== */
@media (max-width:860px){
  :root{--bar-h:58px;}
  .tag__full{display:none;} .tag__short{display:inline;}
  .bar__in{gap:10px;padding:0 16px;}
  .btn--sm{padding:9px 14px;font-size:.82rem;}
  .film.is-live .film__scrim{width:100%;height:66%;top:auto;bottom:0;
    background:linear-gradient(0deg,var(--paper) 6%,color-mix(in srgb,var(--paper) 72%,transparent) 44%,transparent 100%);}
  /* The dark twin carries both classes, so the rule above repaints it in paper unless
     it gets its own bottom-up gradient here. Without this the finale is cream text on
     a cream wash and the offer, with its buttons, all but disappears on a phone. */
  .film.is-live .film__scrim--dark{
    background:linear-gradient(0deg,#17130E 6%,color-mix(in srgb,#17130E 78%,transparent) 44%,transparent 100%);}
  .film.is-live .film__copy{
    padding:calc(var(--bar-h) + 16px) 18px calc(38px + env(safe-area-inset-bottom));}
  .film.is-live .beat{align-self:end;justify-self:stretch;width:auto;max-width:34rem;}
  .film.is-live .beat__title{font-size:clamp(1.75rem,5.6vw + .5rem,2.4rem);}
  .film.is-live .beat__body{font-size:1rem;}
  .film.is-live .scene__still,.film.is-live .scene__video{object-position:center 44%;}
  .h-display{max-width:none;}
  .btn{width:100%;}
  .bar .btn,.linklist .btn{width:auto;}
  .beat__cta .btn,.offer__cta .btn{width:100%;}
}
@media (max-width:430px){
  .brand__name{display:none;}
}

/* Nothing here moves for anyone who asked for stillness: no scrub, no sticky
   stage, no video fetch (see scrub.js — it never upgrades). */
@media (prefers-reduced-motion:reduce){
  .btn:hover,.linklist a:hover{transform:none;padding-left:2px;}
}