/* A story page: one reading column of serif text; photos and graphics break
   out wide or full-bleed; graphics sit on dark "asphalt" bands. Light page by
   design (abc13.com is light). */
:root {
  --paper: #f4f5f5;
  --ink: #1b1f21;
  --muted: #5b6366;
  --rule: #d3d8d9;
  --asphalt: #232829;
  --on-asphalt: #e9ecec;
  --on-asphalt-2: #c3cacc;
  --stripe: #e2b93b;   /* parking-stripe yellow */
  --heat: #d9822b;     /* sodium streetlight */
  --teal: #2f8f8a;
  --display: "proxima-nova", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 20px/1.62 var(--body); }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--stripe); outline-offset: 2px; }

.col, .story > p, .story > .sub, .story > .brk, .story > .pull, .story > .bignum, .story > .guess, .story > .help, .story > .end, .story > .graphic {
  max-width: calc(680px + var(--gut-l) + var(--gut-r));
  margin-left: auto; margin-right: auto;
  padding-left: var(--gut-l); padding-right: var(--gut-r);
}
.col-in, .band-in, .hero-in { max-width: 1080px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }

.preview-bar { background: #fff4c2; color: #4a3d00; font: 400 15px/1.4 var(--display); padding-block: 10px; }
.held-bar { background: #fde3e1; color: #7a0000; font: 400 15px/1.4 var(--display); padding-block: 10px; }
.held-bar ul { margin: 6px 0 0; padding-left: 18px; }

/* hero: photo with the title in its top */
.hero { position: relative; background: var(--asphalt); color: #fff; }
/* Wide screens crop the photo hard: keep more sky (where the title sits) than ground. */
.hero-img { width: 100%; max-height: 94vh; object-fit: cover; object-position: 50% 35%; }
.hero-over { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,.55), rgba(10,22,40,0) 55%); padding-top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 4vw, 40px)); }
.hero.plain .hero-over { position: static; background: none; padding-block: 28px 40px; }
.logo img { width: clamp(240px, 30vw, 400px); height: auto; margin-bottom: clamp(14px, 3vw, 30px); }
.kicker { font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--stripe); margin-bottom: 10px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.hero h1 { margin: 0; font: 800 clamp(40px, 8.4vw, 96px)/.95 var(--display); letter-spacing: -.015em; text-transform: uppercase; max-width: 12ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(10,25,45,.35); }
.hero .dek { margin: 14px 0 0; max-width: 32ch; font: 400 clamp(17px, 2.2vw, 23px)/1.4 var(--display); text-shadow: 0 1px 12px rgba(10,25,45,.55); }
@media (max-width: 600px) {
  /* On a phone the title would cover the photo: put it under instead. */
  .hero:not(.plain) .hero-over { position: static; background: var(--asphalt); padding-block: 18px 26px; }
  .hero-img { max-height: 70vh; }
}
.byline { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-block: 18px 6px; font: 400 14px/1.4 var(--display); color: var(--muted); }
.byline .by { color: var(--ink); font-weight: 700; }

/* text */
.story { padding-block: 26px 10px; }
.story > p { margin-top: 0; margin-bottom: .95em; }
.story > .sub { font: 800 clamp(24px, 3.2vw, 30px)/1.15 var(--display); margin-top: 1.6em; margin-bottom: .6em; text-wrap: balance; }
.brk { border: 0; height: 24px; margin-block: 34px; background: radial-gradient(circle, var(--muted) 2.5px, transparent 3px) center / 24px 24px repeat-x; max-width: 120px !important; }
.pull { margin-block: 1.4em; }
.pull p { margin: 0; font: italic 400 clamp(24px, 3.4vw, 32px)/1.3 var(--body); text-wrap: balance; border-left: 4px solid var(--heat); padding-left: 18px; }
.pull cite { display: block; margin-top: 10px; padding-left: 22px; font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--muted); }

/* figures */
figure { margin: 0; }
.fig { margin-block: 36px; }
.fig.wide { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.fig.full :is(img, video) { width: 100%; max-height: 92vh; object-fit: cover; }
.fig.full figcaption { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
figcaption, .credits { font: 400 15px/1.45 var(--display); color: var(--muted); margin-top: 8px; }
.credit { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #848c8f; }
.credits { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.pair-in { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair-one { position: relative; min-width: 0; }
.pair-one :is(img, video) { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.tag { position: absolute; left: 10px; top: 10px; background: rgba(14,18,22,.82); color: #fff; font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 7px 9px; }
@media (max-width: 520px) { .pair-in { grid-template-columns: 1fr; } .pair-one :is(img, video) { aspect-ratio: 4/3; } }

/* dark bands for graphics */
.band { background: var(--asphalt); color: var(--on-asphalt); padding-block: 40px; margin-block: 40px; }
.band figcaption, .band .source { color: #a9b2b4; }
.source { font: 400 13px/1.4 var(--display); color: var(--muted); margin: 10px 0 0; }
.scroll-x { overflow-x: auto; }

.bignum { margin-block: 30px; }
.bignum .v { font: 800 clamp(56px, 11vw, 104px)/1 var(--display); letter-spacing: -.02em; color: var(--heat); font-variant-numeric: tabular-nums; }
.bignum .what { font: 700 clamp(20px, 2.8vw, 26px)/1.25 var(--display); margin: 8px 0 0; text-wrap: balance; }

.graphic { margin-block: 30px; }
.dots svg { width: 100%; height: auto; display: block; }
.dots .stad { fill: none; stroke: var(--ink); stroke-width: 2; }
.dots .field { fill: var(--rule); }
.dots circle { fill: var(--rule); }
.dots circle.on { fill: var(--heat); }

.steps { width: 100%; height: auto; display: block; min-width: 620px; }
.st-l { font: 800 17px var(--display); }
.st-t { font: 400 14px var(--body); }

/* annotated photo */
.anno { position: relative; }
.anno :is(img, video) { width: 100%; }
.hot { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 0; padding: 0; background: var(--stripe); color: #1d1a10; font: 800 14px/30px var(--display); cursor: pointer; box-shadow: 0 0 0 5px rgba(226,185,59,.35); }
.hot[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.45); }
.anno-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.anno-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font: 400 16px/1.45 var(--display); color: var(--on-asphalt-2); transition: color .2s; }
.anno-list li.on { color: #fff; }
.anno-list .n { width: 28px; height: 28px; border-radius: 50%; background: var(--stripe); color: #1d1a10; font-weight: 800; display: grid; place-items: center; font-size: 13px; }

/* guess */
.guess { margin-block: 36px; border-top: 3px solid var(--ink); padding-top: 16px; }
.guess .q { font: 800 clamp(22px, 3vw, 28px)/1.2 var(--display); margin: 0 0 14px; text-wrap: balance; }
.guess-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.guess input[type=range] { flex: 1 1 220px; min-width: 0; accent-color: var(--heat); }
.guess output { font: 800 30px/1 var(--display); min-width: 3.2ch; font-variant-numeric: tabular-nums; }
.lbl { font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.btn { background: var(--stripe); color: #1d1a10; border: 0; border-radius: 3px; padding: 10px 16px; font: 800 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.bars { display: grid; gap: 10px; margin-top: 18px; }
.bar { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; font: 700 15px/1.2 var(--display); }
.bar .track { height: 28px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.bar .fill { height: 100%; width: 0; background: var(--heat); display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; color: #fff; font: 700 13px/1 var(--display); transition: width .8s cubic-bezier(.2,.7,.2,1); white-space: nowrap; }
.bar.you .fill { background: var(--muted); }
@media (max-width: 480px) { .bar { grid-template-columns: 1fr; gap: 4px; } }

/* waffle */
.waffle-wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px 36px; align-items: center; }
.waffle-wrap .source { grid-column: 1 / -1; }
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.waffle i { aspect-ratio: 1; border-radius: 2px; }
.legend { display: grid; gap: 14px; font: 400 17px/1.4 var(--display); color: var(--on-asphalt-2); }
.legend div { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.legend b { color: #fff; font-size: 20px; }
.legend .sw { width: 18px; height: 18px; border-radius: 2px; margin-top: 3px; }
@media (max-width: 720px) { .waffle-wrap { grid-template-columns: 1fr; } .waffle { max-width: 340px; } }

/* months */
.strip { display: grid; gap: 3px; }
.strip div { height: 44px; display: flex; align-items: flex-end; padding: 4px; font: 700 11px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.months .key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font: 600 15px/1.35 var(--display); }
.months .key i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }

/* help box */
.help { margin-block: 36px; }
.help > * { margin: 0; }
.help { font: 400 17px/1.5 var(--display); }
.help b { display: block; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.help p + p { margin-top: 4px; }
.help .num { font-weight: 800; user-select: all; }
.help { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); padding-block: 14px 16px; }

/* scroll zoom and scene: a photo held still while the script's lines pass over it */
.zoom, .scene { position: relative; background: #0b0f16; margin-block: 40px; }
.zoom-stick, .scene-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.zoom-frame { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * var(--ar))); height: max(calc(100vw / var(--ar)), 100svh); transform: translate(-50%, -50%); }
.zoom-frame :is(img, video) { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--zx) var(--zy); will-change: transform; }
.scene-stick :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.zoom-steps { position: relative; margin-top: -100vh; margin-top: -100svh; padding-bottom: 30vh; }
.zstep { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 var(--gut-r) 16vh var(--gut-l); }
.zstep:first-child { padding-top: 60vh; }
.zstep .card { max-width: 30em; margin: 0 auto; background: rgba(14,18,22,.88); color: var(--on-asphalt); padding: 16px 20px; border-left: 3px solid var(--heat); font-size: 19px; line-height: 1.55; }
.zstep .card p { margin: 0; }
.zstep .card .sub { margin: 0; font: 800 22px/1.2 var(--display); }
.zstep .card .pull p { border: 0; padding: 0; font-size: 22px; }
.zoom-credit { position: absolute; right: var(--gut-r); bottom: 8px; margin: 0; font: 400 11px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #a9b2b4; }

/* cast */
.cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.card-p { background: #313739; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.card-p .ph { aspect-ratio: 4/3; background: #2b3133; }
.card-p .ph :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.nophoto { height: 100%; display: grid; place-items: center; font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #848c8f; }
.cb { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cb .lbl { color: #a9b2b4; }
.cb h3 { margin: 0; font: 800 21px/1.15 var(--display); color: #fff; }
.cb p { margin: 0; font: 400 16px/1.45 var(--display); color: var(--on-asphalt-2); }
.chip { align-self: flex-start; margin-top: auto; font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 3px; color: #c4cbcd; box-shadow: inset 0 0 0 1.5px #6b7477; }
.chip.housed { background: var(--teal); color: #fff; box-shadow: none; }

.end { text-align: left; color: var(--heat); font-size: 14px; margin-block: 10px 50px; }
.foot { background: var(--asphalt); color: #a9b2b4; padding-block: 28px 40px; font: 400 13px/1.4 var(--display); }
.foot img { width: 260px; margin-bottom: 10px; }
.foot p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .zoom-frame :is(img, video) { transform: none !important; }
}

/* Loops: silent and decorative; the poster is the still, so the page reads the same without them. */
video { display: block; max-width: 100%; height: auto; background: #111; }
.motion-toggle { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 8px 13px; cursor: pointer;
  background: rgba(14,18,22,.82); color: #fff; font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.motion-toggle[hidden] { display: none; }

/* The opening: the top photo or loop holds the screen; the title, then the
   opening's lines, scroll over it. */
.hero.opening { position: relative; background: #0b0f16; }
.op-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.op-stick :is(img, video) { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.op-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,18,.62), rgba(8,12,18,.28) 45%, rgba(8,12,18,.55)); }
.op-steps { position: relative; margin-top: -100vh; margin-top: -100svh; padding-bottom: 35vh; }
.op-title { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: 12vh; padding-top: calc(env(safe-area-inset-top, 0px) + 24px); }
.op-title .hero-in { width: 100%; }
.op-down { width: 14px; height: 14px; margin-top: 28px; border-right: 2px solid rgba(255,255,255,.8); border-bottom: 2px solid rgba(255,255,255,.8); transform: rotate(45deg); animation: op-nudge 2.4s ease-in-out infinite; }
@keyframes op-nudge { 50% { transform: translate(0, 6px) rotate(45deg); } }

/* Side by side: the photo holds still in one column while the text scrolls in the other. */
.side { max-width: calc(1180px + var(--gut-l) + var(--gut-r)); margin: 48px auto; padding-left: var(--gut-l); padding-right: var(--gut-r);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 48px; align-items: start; }
.side-right .side-media { order: 2; }
.side-media { position: sticky; top: max(24px, 10vh); }
.side-media :is(img, video) { width: 100%; max-height: 78vh; object-fit: cover; }
.side-text { min-width: 0; padding-block: 4vh 0; }
.side-text > p { margin: 0 0 .95em; }
.side-text > .sub { font: 800 clamp(24px, 3.2vw, 30px)/1.15 var(--display); margin: 0 0 .6em; }
.side-text > .pull { margin-block: 1.2em; }
@media (max-width: 860px) {
  .side { grid-template-columns: 1fr; margin-block: 32px; }
  .side-right .side-media { order: 0; }
  .side-media { position: static; }
}
@media (prefers-reduced-motion: reduce) { .op-down { animation: none; } }

/* Stadiums from above: one dot per 100 people. Lit seats are the stadium lights. */
.stadiums .band-in { display: grid; gap: 14px; }
.st-count { font: 800 clamp(40px, 7vw, 76px)/1 var(--display); color: var(--heat); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.st-count { color: #fff; } .st-count .st-n { color: var(--heat); }
.st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.st svg { width: 100%; height: auto; display: block; }
.st { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.st.waiting { opacity: 0; transform: translateY(24px) scale(.96); }
.st .bowl { fill: #2b3133; stroke: #6b7477; stroke-width: 2; }
.st .field { fill: #2f6b3d; }
.st .ez { fill: #285a34; }
.st .yd { stroke: rgba(255,255,255,.45); stroke-width: 1.2; }
.st circle { fill: #4a5356; }
.st circle.on { fill: var(--heat); }
.st-line { margin: 0; font: 700 clamp(20px, 2.6vw, 26px)/1.25 var(--display); color: #fff; min-height: 1.3em; }
@media (max-width: 640px) { .st-row { grid-template-columns: 1fr; } }

/* The byline sits in the title card, under the intro. */
.top-by { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 18px 0 0; font: 700 13px/1.4 var(--display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.88); text-shadow: 0 1px 10px rgba(10,25,45,.5); }
.byline { padding-block: 10px 4px; }
.guess .after { margin: 8px 0 0; font: 400 20px/1.55 var(--body); }
.st-n { font: 800 26px var(--display); }

/* A quote with the screen to itself: held still while its words light up. */
.big { position: relative; height: 220vh; background: var(--asphalt); margin-block: 40px; }
.big-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.big-stick > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.big-shade { position: absolute; inset: 0; background: rgba(8,12,18,.62); }
.big-q { position: relative; margin: 0; max-width: 16em; text-align: center; }
.big-q p { margin: 0; font: italic 400 clamp(38px, 6.4vw, 84px)/1.12 var(--body); color: #fff; text-wrap: balance; }
.big-q .w { transition: color .35s ease, opacity .35s ease; }
.big-q .w.dim { opacity: .18; }
.big-q cite { display: block; margin-top: 26px; font: 700 14px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--heat); opacity: 0; transition: opacity .6s ease .2s; }
.big.done .big-q cite, .big:not(:has(.w.dim)) .big-q cite { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .big { height: auto; } .big-stick { position: relative; min-height: 80vh; } .big-q cite { opacity: 1; } }

/* On a phone the staircase turns on its side: one step per row, each a little
   further in and a little lower, so it still reads as going down. */
.steps-list { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 700px) {
  svg.steps { display: none; }
  .steps-list { display: grid; gap: 0; }
  .steps-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline;
    margin-left: calc(var(--i) * (100% - 200px) / max(1, var(--n) - 1)); padding: 10px 12px 12px;
    background: hsl(192 6% calc(34% - var(--i) * 2%)); border-top: 3px solid #fff; border-left: 3px solid #fff;
    font: 400 15px/1.4 var(--body); color: #d5dbdc; }
  .steps-list li b { display: block; font: 800 17px/1.2 var(--display); color: #fff; margin-bottom: 2px; }
  .steps-list .sn { font: 800 20px/1 var(--display); color: rgba(241,243,243,.4); }
  .steps-list li.hi { background: var(--stripe); color: #1d1a10; }
  .steps-list li.last { background: var(--heat); color: #1d1a10; }
  .steps-list li:is(.hi, .last) b, .steps-list li:is(.hi, .last) .sn { color: #1d1a10; }
  /* Someone with no photo doesn't need a big empty box on a phone. */
  .card-p .ph:has(.nophoto) { aspect-ratio: auto; height: 56px; }
  /* A smaller pause button that covers less of the words. */
  .motion-toggle { padding: 7px 11px; font-size: 11px; }
}

/* Scenes: each line gets about two-thirds of a screen, not a whole one. */
.scene .zstep { min-height: 64vh; min-height: 64svh; }
.scene .zstep:first-child { padding-top: 46vh; }

/* Side by side on a wide screen: the photo is cropped square so it carries as much weight as the words; --fx keeps the subject in frame. */
@media (min-width: 861px) {
  .side { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .side-media :is(img, video) { aspect-ratio: 1 / 1; height: auto; max-height: 80vh; object-fit: cover; object-position: var(--fx, 50%) 50%; }
}

/* Lines over a photo come in three looks (stepKind in src/views/story.js). */
/* Narration: a frosted panel, alternating sides on a wide screen. */
.zstep.note .card { background: rgba(12,16,20,.58); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-left: 0; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 18px 22px; }
@media (min-width: 900px) {
  .zstep.note:nth-child(odd) .card { margin: 0 auto 0 7vw; }
  .zstep.note:nth-child(even) .card { margin: 0 7vw 0 auto; }
}
/* A short beat: big type straight on the picture. */
.zstep.beat { align-items: center; padding-bottom: 0; }
.zstep.beat .card { background: radial-gradient(closest-side, rgba(8,12,18,.55), rgba(8,12,18,0)); border: 0; padding: 48px 56px;
  max-width: 15em; text-align: center; color: #fff; font: 800 clamp(32px, 5.6vw, 66px)/1.08 var(--display); letter-spacing: -.01em;
  text-shadow: 0 2px 28px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5); text-wrap: balance; }
.zstep.beat .card .sub { font: inherit; margin: 0; }
/* A quote: large italics on a soft shadow. */
.zstep.voice { align-items: center; padding-bottom: 0; }
.zstep.voice .card { background: radial-gradient(closest-side, rgba(8,12,18,.6), rgba(8,12,18,0)); border: 0; padding: 48px 60px;
  max-width: 24em; text-align: center; color: #fff; font: italic 400 clamp(23px, 2.9vw, 34px)/1.35 var(--body);
  text-shadow: 0 2px 24px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.5); text-wrap: balance; }
.zstep.voice .card .pull { margin: 0; }
.zstep.voice .card .pull p { border: 0; padding: 0; font: inherit; }
.zstep.voice .card .pull cite { padding: 0; margin-top: 14px; color: var(--heat); text-shadow: none; }
@media (max-width: 600px) { .zstep.beat .card, .zstep.voice .card { padding: 36px 18px; } }

/* video: YouTube's picture and a play button; the player loads only when tapped */
.video { margin-block: 44px 20px; scroll-margin-top: 24px; }
.video-head { font: 800 clamp(24px, 3.2vw, 30px)/1.15 var(--display); margin: 0 0 14px; text-wrap: balance; }
.yt { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0f16; overflow: hidden; color: #fff; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(10, 18, 30, .78); box-shadow: 0 0 0 3px #fff; transition: transform .15s; }
.yt-play::after { content: ""; position: absolute; left: 34px; top: 26px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff; }
.yt:hover .yt-play, .yt:focus-visible .yt-play { transform: scale(1.08); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.watch-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.watch-link::after { content: " \2193"; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }