/* Modern Mazel: the love story, and the living backdrop behind every page.
   Loaded after styles.css (the shared design system) on every page.

   Three states, chosen by classes that a tiny script in <head> puts on <html>:
     (no class)    no JavaScript: the four chapters stack as a plain, finished sequence
     .js           same sequence, with gentle fades as each chapter scrolls into view
     .story-live   motion allowed: the stage pins and the camera pushes through the story
   Everything the scroll animates is transform or opacity, with one exception: the
   pen stroke that draws each line (stroke-dashoffset, which repaints one small SVG
   and never touches layout). */

@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/frank-ruhl-libre-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@property --draw {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  --ink-gold: #b08a4c;
  --glow: #f0d79f;
  --blush: #e7b7a6;
  --hebrew: "Frank Ruhl Libre", "SBL Hebrew", "Times New Roman", serif;
}

[lang="he"] { font-family: var(--hebrew); }

/* =====================================================
   The backdrop: quiet, textural, and moving at several depths
   ===================================================== */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  --warm: 0.3;
  --calm: 1;
}
.bd { position: absolute; }

/* Candlelight: two soft pools of warmth that brighten as the wedding nears. */
.bd-glow {
  inset: -20% -30%;
  background:
    radial-gradient(42% 36% at 30% 30%, rgba(240, 215, 159, 0.62), rgba(240, 215, 159, 0) 70%),
    radial-gradient(46% 40% at 76% 74%, rgba(231, 183, 166, 0.4), rgba(231, 183, 166, 0) 70%);
  opacity: calc(0.25 + var(--warm) * 0.75);
}

/* Chuppah cloth: pale folds drifting across the page. */
.bd-fabric {
  left: -20%;
  top: -6%;
  width: 140%;
  max-width: none;
  height: 112%;
  opacity: calc(0.7 * var(--calm));
}

/* "I am my beloved's and my beloved is mine", as a watermark. */
.bd-phrase {
  top: 16%;
  left: 50%;
  width: max-content;
  margin-left: -42vmax;
  color: var(--gold);
  font-family: var(--hebrew);
  font-size: clamp(5rem, 15vmax, 15rem);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  opacity: calc(0.07 * var(--calm));
}

/* Papercut ornament: an olive branch and a pomegranate bough in fine gold line. */
.bd-branch {
  width: clamp(190px, 34vmin, 380px);
  color: var(--ink-gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(0.34 * var(--calm));
}
.bd-branch--a { left: -3vmin; top: 9%; }
.bd-branch--b { right: -4vmin; top: 62%; }

/* A tallit's stripes and fringe, hung along the top like the edge of a canopy. */
.bd-tallit {
  left: 0;
  top: var(--header-h);
  width: 100%;
  max-width: none;
  height: clamp(54px, 10vmin, 104px);
  color: var(--blue);
  opacity: calc(0.07 * var(--calm));
}
.bd-tallit rect { fill: currentColor; }
.bd-tallit path { fill: none; stroke: currentColor; stroke-width: 1; }

.bd-petal,
.bd-star {
  top: 0;
  left: 0;
  will-change: transform;
}
.bd-petal svg { width: 100%; height: 100%; fill: var(--blush); }
.bd-petal { opacity: calc(var(--warm) * 0.75); }
.bd-star svg { width: 100%; height: 100%; fill: var(--gold); }
.bd-star:nth-child(3n) svg { fill: #8fb0d6; }

.motion .bd-drift { will-change: transform; }
.motion .bd-fabric path { animation: cloth 16s ease-in-out infinite alternate; }
.motion .bd-fabric path:nth-child(2) { animation-duration: 21s; animation-delay: -6s; }
.motion .bd-fabric path:nth-child(3) { animation-duration: 26s; animation-delay: -11s; }
.motion .bd-petal svg { animation: petal 9s ease-in-out infinite alternate; }
.motion .bd-petal:nth-child(2n) svg { animation-duration: 12s; animation-delay: -4s; }
.motion .bd-star svg { animation: twinkle-soft 4.6s ease-in-out infinite; }
.motion .bd-star:nth-child(2n) svg { animation-duration: 6.2s; animation-delay: -2.4s; }
.motion .bd-star:nth-child(3n) svg { animation-duration: 7.4s; animation-delay: -5s; }

@keyframes cloth {
  from { transform: translate3d(-2.5%, 0, 0) scaleY(1); }
  to { transform: translate3d(2.5%, 1.5%, 0) scaleY(1.06); }
}
@keyframes petal {
  from { transform: rotate(-18deg) translateX(-8px); }
  to { transform: rotate(24deg) translateX(10px); }
}
@keyframes twinkle-soft {
  0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); }
  50% { opacity: 0.85; transform: scale(1) rotate(20deg); }
}

/* The page sits on the backdrop, so the plain sections let it show through. */
.section--paper { background: rgba(255, 253, 249, 0.86); }
.section--sand { background: rgba(242, 235, 221, 0.88); }
.trust { background: rgba(255, 253, 249, 0.9); }

/* =====================================================
   The story: shared pieces
   ===================================================== */

.story { position: relative; }

.art { display: block; width: 100%; height: 100%; overflow: visible; }
.ink {
  fill: none;
  stroke: var(--ink-gold);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ink--fine { stroke-width: 1.45; stroke-opacity: 0.84; }
.art--4 .ink { stroke-width: 4.2; }
.art--4 .ink--fine { stroke-width: 2.7; }
.art--4 .ink--leaf { stroke-opacity: 0.7; }

.glow { fill: var(--glow); opacity: 0.3; }
.lit { fill: var(--glow); }
.spark { fill: var(--gold); }

.chapter .eyebrow { margin-bottom: 10px; }
.chapter__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 6.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.chapter__text {
  max-width: 34ch;
  margin: 10px auto 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* The chuppah: ink sketch, photograph and traced lines share one sheet, so they register. */
.plate { position: relative; overflow: hidden; background: var(--sand); }
.plate__sheet { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2 / 3; }
.plate__sheet img,
.plate__sheet .art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.plate__photo img { object-fit: cover; }

.story__skip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
.story__skip::after { content: "\00a0\2192"; }
.story__skip:hover { color: var(--blue); }

/* =====================================================
   The story as a calm, finished sequence
   (no JavaScript, reduced motion, or a very short screen)
   ===================================================== */

html:not(.story-live) .story { padding: 20px 0 clamp(36px, 7vw, 72px); }
html:not(.story-live) .story__stage {
  display: grid;
  gap: clamp(30px, 6vw, 52px);
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
html:not(.story-live) .chapter { text-align: center; }
html:not(.story-live) .chapter__art { width: min(74vw, 320px); margin: 0 auto 8px; }
html:not(.story-live) .chapter__art .art { aspect-ratio: 1; height: auto; }
html:not(.story-live) .chapter--4 .chapter__art { width: 100%; max-width: 440px; margin-bottom: 0; }
html:not(.story-live) .plate {
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius) var(--radius);
}
html:not(.story-live) .plate__sheet { top: -9%; }
html:not(.story-live) .plate__ink,
html:not(.story-live) .art--4,
html:not(.story-live) .story__flash,
html:not(.story-live) .story__pips,
html:not(.story-live) .story__cue { display: none; }
html:not(.story-live) .chapter--4 { display: flex; flex-direction: column; }
html:not(.story-live) .chapter__copy--prelude { order: -1; margin-bottom: 22px; }
html:not(.story-live) .story__ui { display: flex; justify-content: flex-end; margin-bottom: -22px; }
html:not(.story-live) .story .hero__body { margin-top: 22px; padding-bottom: 0; }

.js:not(.story-live) .chapter { opacity: 0; transition: opacity 1.1s ease; }
.js:not(.story-live) .chapter.is-in { opacity: 1; }
.story-plain .chapter { opacity: 1 !important; }   /* story.js failed to load: show everything */

@media (min-width: 760px) {
  html:not(.story-live) .story__stage { grid-template-columns: repeat(3, 1fr); align-items: start; }
  html:not(.story-live) .story__ui,
  html:not(.story-live) .chapter--4 { grid-column: 1 / -1; }
  html:not(.story-live) .chapter__art { width: min(100%, 300px); }
  html:not(.story-live) .chapter__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
  html:not(.story-live) .chapter--4 {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas: "prelude art" "body art";
    align-items: center;
    column-gap: clamp(36px, 5vw, 64px);
    margin-top: clamp(10px, 3vw, 40px);
    text-align: left;
  }
  html:not(.story-live) .chapter--4 .chapter__art { grid-area: art; justify-self: end; }
  html:not(.story-live) .chapter__copy--prelude { grid-area: prelude; align-self: end; margin-bottom: 30px; }
  html:not(.story-live) .story .hero__body { grid-area: body; align-self: start; margin-top: 0; text-align: left; }
html:not(.story-live) .story .hero__body h1,
html:not(.story-live) .story .hero__body h2 { margin-inline: 0; }
  html:not(.story-live) .story .hero__body .lede { margin-inline: 0; }
  html:not(.story-live) .chapter--4 .chapter__text { margin-inline: 0; }
  html:not(.story-live) .story .hero .btn-row { justify-content: flex-start; }
}

/* =====================================================
   The story, live: one pinned stage, one continuous push forward
   ===================================================== */

.story-live .story {
  height: 540vh;
  height: 540svh;
  margin-top: calc(-1 * var(--header-h));
}
.story-live.in-story { scroll-behavior: auto; }

.story-live .story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  transition: opacity 0.22s ease;
}
.story-live .story__stage.is-skipping { opacity: 0; }

.story-live .chapter {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  --plate: min(92vw, 50vh);
  --plate: min(92vw, 50svh);
  --art-top: calc(var(--header-h) + 1.5vh);
}
.story-live .chapter__art {
  position: absolute;
  left: 50%;
  top: var(--art-top);
  width: var(--plate);
  height: var(--plate);
  margin-left: calc(var(--plate) / -2);
}
.story-live .cam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.story-live .chapter:not(.chapter--1) .cam { opacity: 0; }
.story-live .chapter.is-off .cam { visibility: hidden; }

.story-live .chapter__copy {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--art-top) + var(--plate) + 1vh);
  text-align: center;
  opacity: var(--copy, 0);
  transform: translate3d(0, calc((1 - var(--copy, 0)) * 16px), 0);
  will-change: transform, opacity;
}

/* The pen. --draw runs 0 to 1 for each drawing; each stroke knows its own slot. */
.story-live .ink {
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1.03px * clamp(0, calc((var(--b) - var(--draw)) * var(--k)), 1));
  opacity: clamp(0, calc((var(--draw) - var(--a)) * 90), 1);
}
.story-live .chapter { --draw: 0; --act: 0; overflow: visible; }
.story-live .chapter--1 { --copy: 1; }
/* Chapter one draws itself as the page opens, before anyone scrolls. */
.story-live .chapter--1 { animation: draw-in 2.9s cubic-bezier(0.45, 0.05, 0.3, 1) 0.25s both; }
@keyframes draw-in {
  from { --draw: 0; }
  to { --draw: 1; }
}

/* ---- Small touches. --act runs 0 to 1 while each chapter holds the screen. ---- */

/* 1. Two hands reach across the table, and something sparks. */
.story-live .reach--a { transform: rotate(calc((1 - var(--act)) * 10deg)); }
.story-live .reach--b { transform: rotate(calc((1 - var(--act)) * -10deg)); }
.story-live .chapter--1 .spark,
.story-live .chapter--3 .spark,
.story-live .chapter--4 .spark {
  --pop: clamp(0, calc((var(--act) - 0.78) * 5), 1);
  opacity: var(--pop);
  transform: scale(var(--pop)) rotate(calc((1 - var(--pop)) * -40deg));
}
.story-live .glow--spark,
.story-live .glow--ring { opacity: calc(clamp(0, calc((var(--act) - 0.7) * 4), 1) * 0.5); }
.glow--lamp { opacity: 0.24; }
.story-live .glow--lamp { opacity: calc(clamp(0, calc((var(--draw) - 0.12) * 4), 1) * 0.24); }
.motion .steam path { animation: steam 3.6s ease-in-out infinite; }
.motion .steam--b path { animation-delay: -1.7s; }
@keyframes steam {
  0% { transform: translateY(5px); stroke-opacity: 0; }
  35% { stroke-opacity: 0.84; }
  100% { transform: translateY(-9px); stroke-opacity: 0; }
}

/* 2. The lights come on, one bulb at a time, and then a window. */
.story-live .bulb .lit,
.story-live .bulb .glow { --on: clamp(0, calc(var(--act) * 8 - var(--i)), 1); }
.story-live .bulb .lit { opacity: var(--on); }
.story-live .bulb .glow { opacity: calc(var(--on) * 0.42); }
.story-live .glow--window { opacity: calc(clamp(0, calc((var(--act) - 0.62) * 3.4), 1) * 0.62); }
.lit { opacity: 0.95; }
.glow--bulb { opacity: 0.42; }
.glow--window { opacity: 0.62; }
.star { opacity: 0.8; }
.motion .star { animation: twinkle-soft 3.8s ease-in-out infinite; }
.motion .star--2 { animation-delay: -1.3s; }
.motion .star--3 { animation-delay: -2.2s; }
.motion .star--4 { animation-delay: -3s; }

/* 3. The box opens and the ring rises out of it. */
.lid { transform: rotate(-112deg); }
.story-live .lid { transform: rotate(calc(clamp(0, calc(var(--act) * 2.4), 1) * -112deg)); }
.story-live .ring {
  --rise: clamp(0, calc((var(--act) - 0.22) * 2.2), 1);
  opacity: var(--rise);
  transform: translateY(calc((1 - var(--rise)) * 26px)) scale(calc(0.45 + var(--rise) * 0.55));
}

/* 4. Drawing, then ink, then the photograph. */
.story-live .chapter--4 {
  --plate-h: min(150vw, 76vh);
  --plate-h: min(150vw, 76svh);
}
.story-live .chapter--4 .chapter__art {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--plate-h);
  margin: 0;
}
.story-live .plate { position: absolute; inset: 0; background: none; }
.story-live .plate__sheet {
  transform: translate3d(0, calc(var(--hero, 0) * var(--lift, 0px) * -1), 0);
  will-change: transform;
}
.story-live .plate__ink { opacity: var(--ink, 0); will-change: opacity; }
.story-live .plate__photo { display: block; opacity: 0; will-change: opacity; }
.story-live .has-photo .plate__photo { opacity: var(--photo, 0); }
.story-live .art--4 { opacity: var(--lines, 1); }
.story-live .story:not(.is-armed) .plate__sheet img { display: none; }
/* The photograph has no hard bottom edge on a phone: it melts into the page. */
.story-live .plate::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(250, 246, 238, 0), var(--ivory) 88%);
  opacity: var(--veil, 0);
}

.story-live .chapter__copy--prelude { top: auto; bottom: calc(86px + env(safe-area-inset-bottom)); }
.story-live .chapter__copy--prelude .chapter__title { font-size: clamp(1.6rem, 6.2vw, 2.5rem); }

.story-live .story .hero__body {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 4px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--ivory);
  --copy: var(--hero, 0);
  transform: translate3d(0, calc((1 - var(--hero, 0)) * 60px), 0);
}
.story-live .story .hero__body::before {
  content: "";
  position: absolute;
  inset: auto 0 100% 0;
  height: 84px;
  background: linear-gradient(to top, var(--ivory) 8%, rgba(250, 246, 238, 0));
}
.story-live .story .hero__body.is-active { pointer-events: auto; }
.story-live .story .hero__body h1,
.story-live .story .hero__body h2 { max-width: 11em; font-size: clamp(2.05rem, 8.6vw, 3rem); }
.story-live .story .hero__body .lede { max-width: 36ch; margin: 10px auto 16px; font-size: 1.02rem; line-height: 1.5; }
.story-live .story .hero__body .eyebrow { margin-bottom: 8px; }
.story-live .story .hero .btn-row { gap: 4px; }
.story-live .story .hero .btn--ghost {
  min-height: 44px;
  border-color: transparent;
  background: none;
  color: var(--blue);
}
.story-live .story .hero__areas { display: none; }

/* Light that fills the screen between chapters one and two. */
.story__flash {
  position: absolute;
  left: 0;
  top: 0;
  width: 70vmax;
  height: 70vmax;
  margin: -35vmax 0 0 -35vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff8e6 0%, rgba(250, 236, 200, 0.92) 30%, rgba(250, 240, 214, 0.5) 62%, rgba(250, 246, 238, 0) 100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Quiet controls: where you are, and the way out. */
.story-live .story__ui {
  position: absolute;
  left: var(--gutter);
  right: calc(var(--gutter) - 4px);
  top: calc(var(--header-h) + 2px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: calc(1 - var(--hero, 0));
}
.story-live .story__skip { pointer-events: auto; }
.story-live .story__ui.is-done .story__skip { visibility: hidden; }
.story__pips { display: flex; gap: 9px; margin: 0; padding: 0; list-style: none; }
.story__pips li {
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: background-color 0.4s ease;
}
.story__pips li.is-on { background: var(--gold); }

.story__cue {
  position: absolute;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  margin: 0;
  padding-bottom: 20px;
  color: var(--gold-deep);
  font-size: 0;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transform: translateX(-50%);
  opacity: var(--cue, 1);
  pointer-events: none;
}
.story__cue::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 20px;
  background: var(--gold);
  transform-origin: top;
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: translateY(8px) scaleY(1); opacity: 0; }
}

/* ---- Wider screens: words on the left, the picture on the right ---- */

@media (min-width: 980px) {
  .story-live .chapter {
    --plate: min(42vw, 68vh, 620px);
    --plate: min(42vw, 68svh, 620px);
    --edge: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter)));
    --art-top: calc(var(--header-h) + (100vh - var(--header-h) - var(--plate)) / 2);
    --art-top: calc(var(--header-h) + (100svh - var(--header-h) - var(--plate)) / 2);
  }
  .story-live .chapter__art { left: auto; right: var(--edge); margin-left: 0; }
  .story-live .chapter__copy {
    left: var(--edge);
    right: auto;
    top: var(--header-h);
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(40vw, 500px);
    text-align: left;
  }
  .story-live .chapter__title { font-size: clamp(2.4rem, 3.7vw, 3.5rem); }
  .story-live .chapter__text { max-width: 30ch; margin: 18px 0 0; font-size: 1.2rem; }
  .story-live .chapter .eyebrow { margin-bottom: 16px; }

  .story-live .chapter--4 {
    --plate-h: min(76vh, 720px);
    --plate-h: min(76svh, 720px);
    --plate-w: calc(var(--plate-h) * 0.75);
  }
  .story-live .chapter--4 .chapter__art {
    left: auto;
    right: calc(var(--edge) + (var(--plate) - var(--plate-w)) / 2);
    top: calc(var(--header-h) + (100vh - var(--header-h) - var(--plate-h)) / 2);
    top: calc(var(--header-h) + (100svh - var(--header-h) - var(--plate-h)) / 2);
    width: var(--plate-w);
    height: var(--plate-h);
  }
  .story-live .plate { border-radius: 999px 999px var(--radius) var(--radius); }
  .story-live .plate::after { display: none; }
  .story-live .plate__sheet { top: -6%; transform: none; }
  .story-live .cam--frame::before {
    content: "";
    position: absolute;
    inset: -14px -14px 14px 14px;
    border: 1px solid var(--gold);
    border-radius: 999px 999px var(--radius) var(--radius);
    opacity: calc(var(--photo, 0) * 0.65);
  }
  .story-live .chapter__copy--prelude { top: var(--header-h); bottom: 0; }
  .story-live .chapter__copy--prelude .chapter__title { font-size: clamp(2.4rem, 3.7vw, 3.5rem); }
  .story-live .story .hero__body {
    left: var(--edge);
    right: auto;
    top: var(--header-h);
    bottom: 0;
    padding: 0;
    background: none;
    transform: translate3d(0, calc((1 - var(--hero, 0)) * 22px), 0);
  }
  .story-live .story .hero__body::before { display: none; }
  .story-live .story .hero__body h1,
  .story-live .story .hero__body h2 { max-width: none; margin-inline: 0; font-size: clamp(2.7rem, 4vw, 3.8rem); }
  .story-live .story .hero__body .lede { max-width: 40ch; margin: 18px 0 26px; font-size: 1.2rem; }
  .story-live .story .hero .btn-row { flex-direction: row; justify-content: flex-start; gap: 12px; }
  .story-live .story .hero .btn--ghost { min-height: 54px; border-color: var(--ink); color: var(--ink); }
  .story-live .story .hero .btn--ghost:hover { background: var(--ink); color: var(--paper); }
  .story-live .story .hero__areas { display: block; }

  .story-live .story__ui {
    left: var(--edge, var(--gutter));
    right: auto;
    top: auto;
    bottom: 34px;
    gap: 26px;
    justify-content: flex-start;
  }
  .story-live .story__ui { --edge: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); }
  .story__cue { bottom: 30px; padding-bottom: 26px; font-size: 0.7rem; }
}

/* Short phones: the headline card needs the room more than the supporting line does. */
@media (max-width: 979px) and (max-height: 620px) {
  .story-live .chapter { --plate: min(92vw, 45vh); --plate: min(92vw, 45svh); }
  .story-live .story .hero__body .lede { display: none; }
  .story-live .story .hero__body h1,
  .story-live .story .hero__body h2 { margin-bottom: 14px; }
  .story-live .chapter__text { font-size: 0.96rem; }
}

/* =====================================================
   Reduced motion: nothing moves, chapters simply fade in
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .js:not(.story-live) .chapter { transition: opacity 1.1s ease !important; }
  .bd-star { display: none; }
}

@media print {
  .backdrop, .story__ui, .story__cue { display: none !important; }
}