/* =========================================================
   THE ACADEMY · slides 02–20
   Sizes use --u, a "slide unit": 1% of a 16:9 frame that fits the screen.
   Landscape screens and the PDF scale like a slide; portrait screens
   switch to fixed type sizes and the layouts stack.
   ========================================================= */

:root {
  --u: min(1vw, 1.7778vh);

  --fs-eyebrow: max(10px, calc(var(--u) * .74));
  --fs-small:   max(12px, calc(var(--u) * .9));
  --fs-body:    max(14px, calc(var(--u) * 1.1));
  --fs-lead:    max(16px, calc(var(--u) * 1.4));
  --fs-pull:    max(19px, calc(var(--u) * 1.85));
  --fs-h2:      max(30px, calc(var(--u) * 3.7));
  --fs-name:    max(34px, calc(var(--u) * 4.6));
  --fs-statement: max(26px, calc(var(--u) * 3.3));
  --fs-stat:    max(54px, calc(var(--u) * 8.4));

  --pad-x: max(var(--gutter), calc(var(--u) * 5.2));
  --pad-y: max(20px, calc(var(--u) * 3));
  --gap:   calc(var(--u) * 3.6);
  --line: rgba(200, 160, 70, .26);
  --panel: #0f0f10;
}

/* ---------- Frame ---------- */
.slide:not(.cover) {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: max(var(--pad-y), env(safe-area-inset-top)) var(--pad-x) max(var(--pad-y), env(safe-area-inset-bottom));
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(200,160,70,.06), transparent 60%),
    var(--black);
  border-top: 1px solid rgba(255,255,255,.04);
}
.slide__body { align-self: center; width: 100%; max-width: 1640px; margin-inline: auto; padding-block: calc(var(--u) * 2); }

.chrome {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; max-width: 1640px; margin-inline: auto;
  padding-bottom: calc(var(--u) * 1.1);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 1.1em;
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; color: var(--muted);
}
.eyebrow b { color: var(--gold); font-weight: 600; letter-spacing: .1em; }
.chrome__mark {
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); opacity: .8;
}

/* ---------- Type ---------- */
.h2 {
  margin: 0 0 calc(var(--u) * 1.6);
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-h2); line-height: .95; letter-spacing: .01em;
  color: var(--bone); max-width: 18ch;
}
.h2--serif {
  font-family: var(--serif); font-weight: 500; text-transform: none;
  font-size: calc(var(--fs-h2) * .92); line-height: 1.05; max-width: 20ch;
}
.h2 em, .h2--serif em { color: var(--gold); }
.lead { margin: 0 0 calc(var(--u) * 1.4); font-size: var(--fs-lead); line-height: 1.5; color: rgba(243,239,230,.86); max-width: 38em; }
.body { margin: 0 0 calc(var(--u) * 1.4); font-size: var(--fs-body); line-height: 1.6; color: rgba(243,239,230,.84); max-width: 40em; }
.lead em, .body em { font-family: var(--serif); font-size: 1.1em; color: var(--bone); }
.pull {
  margin: 0 0 calc(var(--u) * 1.4);
  padding-left: calc(var(--u) * 1.4);
  border-left: 2px solid var(--gold);
  font-family: var(--serif); font-style: italic; font-size: var(--fs-pull); line-height: 1.3;
  color: var(--bone); max-width: 30em;
}
.pull--lg { font-size: calc(var(--fs-pull) * 1.08); }
.pull--center { border: 0; padding: 0; text-align: center; margin: calc(var(--u) * 2.4) auto 0; max-width: 46em; font-style: normal; }
.pull--center em { color: var(--gold); }
.tag {
  display: inline-block; margin: 0 0 calc(var(--u) * 1);
  padding: .45em 1em; border: 1px solid var(--gold); border-radius: 99px;
  font-size: var(--fs-eyebrow); letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.name {
  margin: 0;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-name); line-height: 1.02;
  padding-top: .08em;   /* room for accents (Peña) under background-clip */
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.name--sm { font-size: calc(var(--fs-name) * .6); margin-top: calc(var(--u) * .6); }
.role {
  margin: calc(var(--u) * .7) 0 calc(var(--u) * 1.6);
  display: flex; flex-wrap: wrap; align-items: center; gap: .8em;
  font-size: var(--fs-small); letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}
.note { margin-top: calc(var(--u) * .4); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); background: var(--panel); border: 1px solid rgba(255,255,255,.06); max-width: 40em; }
.note p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: rgba(243,239,230,.84); }
.note .note__label { margin-bottom: .5em; display: flex; flex-wrap: wrap; gap: .8em; align-items: center; font-size: var(--fs-eyebrow); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.source { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.source a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.source a:hover { color: var(--gold); }

/* ---------- Placeholders (visible on purpose until real content lands) ---------- */
.need {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .35em .8em;
  border: 1px dashed var(--gold); border-radius: 4px;
  font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: max(9px, calc(var(--u) * .66)); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-hi); background: rgba(200,160,70,.08);
  white-space: nowrap;
}
.need::before { content: "●"; font-size: .8em; color: var(--gold); }
.tbd { color: var(--muted) !important; font-style: italic; }

.ph {
  position: relative; margin: 0;
  display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center;
  min-height: 120px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
    linear-gradient(160deg, #1a1915, #0c0c0c 70%);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.ph::before, .ph::after {            /* gold corner brackets */
  content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--gold); opacity: .6;
}
.ph::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.ph::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.ph > span:not(.need) {
  padding: 0 1.5em; text-align: center;
  font-size: var(--fs-eyebrow); letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.ph--tall { aspect-ratio: 4 / 5; }
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--poster { aspect-ratio: 2 / 3; }

/* ---------- Reveal on scroll (only when JS runs; print and no-JS show everything) ---------- */
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .is-in .reveal { opacity: 1; transform: none; }

/* =========================================================
   Layouts
   ========================================================= */

/* Statement (02, 14) */
.s-statement .slide__body { max-width: 1200px; text-align: center; }
.statement {
  margin: 0 auto;
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-statement); line-height: 1.22; color: var(--bone);
  max-width: 26em;
}
.statement em { color: var(--gold); }
.statement__aside {
  margin: calc(var(--u) * 3) auto 0; max-width: 40em;
  font-size: var(--fs-small); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); line-height: 1.8;
}
.statement__aside--body { text-transform: none; letter-spacing: 0; font-size: var(--fs-lead); line-height: 1.6; color: rgba(243,239,230,.8); }
.statement__aside::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto calc(var(--u) * 2); background: var(--gold); }

/* Split: text + image (03, 06, 07, 09, 16) */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--gap); align-items: center; }
.split--portrait { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
.split--flip { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
.split .ph--tall, .split .ph--portrait { max-height: 68svh; width: 100%; height: auto; }
.split .ph--portrait { justify-self: center; max-width: calc(68svh * .75); }
.split .ph--tall { justify-self: end; max-width: calc(68svh * .8); }

/* Stats (04) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); margin: calc(var(--u) * 1.4) 0 calc(var(--u) * 2.4); }
.stat { padding: calc(var(--u) * 1.8) 0 0; border-top: 1px solid var(--gold); display: flex; flex-direction: column; gap: calc(var(--u) * .6); }
.stat__num {
  font-family: var(--display); font-weight: 900; font-size: var(--fs-stat); line-height: .9;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { font-size: var(--fs-lead); line-height: 1.35; color: rgba(243,239,230,.82); max-width: 16em; }
.s-stats .h2 { max-width: 28ch; }

/* Tone (05) */
.tone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gap); align-items: center; }
.tone .h2 { max-width: none; font-size: calc(var(--fs-h2) * .68); }   /* three beats, one per line (Oct 23) */
.tone__words { display: flex; flex-wrap: wrap; gap: .4em 1.2em; margin: 0 0 calc(var(--u) * 1.8); }
.tone__words span {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: calc(var(--fs-h2) * .56); letter-spacing: .08em; color: var(--gold);
}
.tone__words span + span::before { content: "/"; margin-right: 1.2em; color: var(--slate); }
.mood {
  display: grid; gap: calc(var(--u) * .8);
  background: #050505;   /* the gaps between the photos are black, not the room behind (Jorel, Oct 27) */
  grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  height: min(62svh, calc(var(--u) * 36));
}
.mood__a { grid-row: 1 / 3; }
.mood .ph { min-height: 0; }

/* Cast cards (08) */
.cast__head { display: grid; grid-template-columns: auto 1fr; gap: var(--gap); align-items: end; margin-bottom: calc(var(--u) * 2); }
.cast__head .h2, .cast__head .lead { margin: 0; }
.cast__head .h2 { max-width: 13ch; }
.cast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .9); }
.card {
  display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 1.1); align-items: start;
  padding: calc(var(--u) * 1.1); background: var(--panel); border: 1px solid rgba(255,255,255,.06);
}
.card__ph {
  width: calc(var(--u) * 4.6); min-width: 44px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: max(13px, calc(var(--u) * 1.3)); letter-spacing: .06em; color: var(--gold);
  background: radial-gradient(circle at 30% 25%, #2a261c, #111 70%); border: 1px solid var(--line);
}
.card h3 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: max(17px, calc(var(--u) * 1.45)); letter-spacing: .03em; line-height: 1; }
.card__sport { margin: .45em 0 .55em; font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.card p:last-child { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: rgba(243,239,230,.78); }

/* Scene (10) */
.scene { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--gap); align-items: center; }
.script {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: max(12px, calc(var(--u) * .9)); line-height: 1.32;
  color: #1b1a17;
  background: linear-gradient(180deg, #f4efe3, #ebe4d3);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(200,160,70,.2);
  columns: 2; column-gap: calc(var(--u) * 3);
  transform: rotate(-.6deg);
}
.script p { margin: 0 0 .9em; break-inside: avoid; }
.script__cue { margin: 0 0 .1em !important; padding-left: 38%; font-weight: 700; break-after: avoid; }
.script__line { padding: 0 6% 0 12%; }
.script__action { font-style: normal; }
.js .is-in .script.reveal { transform: rotate(-.6deg); }

/* Columns (11) */
.columns { list-style: none; margin: calc(var(--u) * 1.6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.4); }
.columns li { border-top: 1px solid var(--gold); padding-top: calc(var(--u) * 1.6); }
.columns__num { font-family: var(--display); font-weight: 900; font-size: calc(var(--fs-h2) * 1.2); line-height: 1; color: var(--gold); text-transform: uppercase; }
.columns h3, .arc h3 { margin: calc(var(--u) * .8) 0 calc(var(--u) * .6); font-family: var(--serif); font-weight: 600; font-size: var(--fs-pull); }
.columns p, .arc p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: rgba(243,239,230,.82); }

/* Arc timeline (12) */
.arc { list-style: none; margin: calc(var(--u) * 2.4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.4); position: relative; }
.arc::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(200,160,70,.2)); }
.arc li { position: relative; padding-top: calc(var(--u) * 2.2); }
.arc li::before { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--black); border: 2px solid var(--gold); box-shadow: 0 0 18px rgba(200,160,70,.5); }
.arc li:last-child::before { background: var(--gold); }
.arc__when { font-size: var(--fs-eyebrow); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.arc h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: calc(var(--fs-h2) * .62); letter-spacing: .02em; }

/* Episodes (13) */
.episodes__head { display: flex; align-items: baseline; gap: calc(var(--u) * 2); flex-wrap: wrap; }
.episodes__head .role { margin: 0; }
.episodes { list-style: none; margin: calc(var(--u) * .6) 0 0; padding: 0; columns: 2; column-gap: calc(var(--u) * 3.4); }
.episodes li {
  display: grid; grid-template-columns: calc(var(--u) * 4.6) 1fr; column-gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.1) 0; border-bottom: 1px solid rgba(255,255,255,.08); break-inside: avoid;
}
.ep__num { grid-row: span 2; font-family: var(--display); font-weight: 900; font-size: calc(var(--fs-h2) * .62); color: var(--gold); line-height: 1; }
.ep__title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-pull); line-height: 1.1; }
.ep__line { font-size: var(--fs-small); color: rgba(243,239,230,.75); margin-top: .3em; }

/* Comps (15) */
.posters { list-style: none; margin: calc(var(--u) * 1.4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 1.2); }
.posters .ph { max-height: 40svh; }
.poster__net { margin: .9em 0 .2em; font-size: var(--fs-eyebrow); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.poster__title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: var(--fs-lead); }

/* Creator placeholder copy (16) */
.placeholder-copy { padding: calc(var(--u) * 1.4); border: 1px dashed var(--line); margin-bottom: calc(var(--u) * 1.4); max-width: 40em; }
.placeholder-copy p { margin: .8em 0 0; font-size: var(--fs-body); color: var(--muted); font-style: italic; }
.ph .need { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); }

/* Contact (17) */
.s-contact { background: radial-gradient(120% 80% at 50% 110%, #12100b 0%, var(--black) 60%); }
.s-contact .chrome { visibility: hidden; }   /* the light banks own the top of this slide */
.contact { text-align: center; }
.s-contact .wordmark__the, .s-contact .wordmark__main, .s-contact .cover__tagline { animation: none; }
.s-contact .wordmark__main::after { display: none; }
.wordmark--sm .wordmark__main { font-size: calc(var(--u) * 10); }
.wordmark--sm .wordmark__the { font-size: calc(var(--u) * 2.4); }
.contact__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2);
  margin: calc(var(--u) * 3.6) auto 0; max-width: 1100px;
  padding-top: calc(var(--u) * 2); border-top: 1px solid var(--line);
}
.contact__label { margin: 0 0 .6em; font-size: var(--fs-eyebrow); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.contact__value { margin: 0; font-family: var(--serif); font-weight: 500; font-size: var(--fs-pull); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5em; }
.contact__value--sm { font-size: var(--fs-lead); margin-top: .3em; }
.contact__legal { margin: calc(var(--u) * 3) 0 0; font-size: var(--fs-eyebrow); letter-spacing: .14em; color: var(--muted); }
.button {
  display: inline-block; margin-top: .9em; padding: .8em 1.6em;
  border: 1px solid var(--gold); color: var(--gold); text-decoration: none;
  font-size: var(--fs-eyebrow); letter-spacing: .28em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.button:hover { background: var(--gold); color: var(--black); }
.screen-only .need { display: flex; width: max-content; margin: .8em auto 0; }
.print-only { display: none !important; }

/* =========================================================
   Portrait iPad, narrow windows, phones: stack everything
   ========================================================= */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  :root {
    --fs-eyebrow: 11px; --fs-small: 14px; --fs-body: 16px; --fs-lead: 18px; --fs-pull: 22px;
    --fs-h2: clamp(34px, 7vw, 54px); --fs-name: clamp(40px, 9vw, 68px);
    --fs-statement: clamp(26px, 5vw, 40px); --fs-stat: clamp(64px, 15vw, 110px);
    --pad-y: 28px; --gap: 32px;
  }
  .deck { scroll-snap-type: none; }   /* tall stacked slides scroll freely */
  .slide:not(.cover) { min-height: auto; }
  .s-statement, .s-contact { min-height: 100svh !important; }
  .slide__body { padding-block: 40px 24px; }
  .chrome { padding-bottom: 12px; }

  .split, .split--portrait, .split--flip, .tone, .scene, .cast__head { grid-template-columns: 1fr; }
  .split--flip .ph { order: -1; }
  .split .ph--portrait, .split .ph--tall { max-height: none; max-width: 520px; width: 100%; justify-self: start; aspect-ratio: 4 / 3.4; }
  .stats, .columns, .arc { grid-template-columns: 1fr; gap: 28px; }
  .stat { flex-direction: row; align-items: baseline; gap: 18px; }
  .stat__num { min-width: 3.2ch; }
  .mood { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 150px; }
  .mood__a { grid-row: span 2; }
  .cast { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { padding: 16px; gap: 14px; }
  .card__ph { width: 52px; }
  .script { columns: 1; transform: none; padding: 28px 22px; font-size: 13.5px; }
  .js .is-in .script.reveal { transform: none; }
  .script__cue { padding-left: 32%; }
  .arc::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--gold), rgba(200,160,70,.2)); }
  .arc li { padding: 0 0 0 36px; }
  .episodes { columns: 1; }
  .episodes li { grid-template-columns: 56px 1fr; padding: 14px 0; }
  .posters { grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
  .posters .ph { max-height: none; }
  .contact__grid { grid-template-columns: 1fr; gap: 24px; }
  .wordmark--sm .wordmark__main { font-size: clamp(64px, 17vw, 140px); }
  .wordmark--sm .wordmark__the { font-size: clamp(24px, 5vw, 44px); }
  .s-contact .cover__lights { top: 8%; }
}

@media screen and (max-width: 560px) {
  :root { --fs-lead: 17px; --fs-pull: 20px; --gap: 26px; }
  .cast { grid-template-columns: 1fr; }
  .posters { grid-template-columns: 1fr 1fr; }
  .mood { grid-auto-rows: 120px; }
  .stat { flex-direction: column; gap: 6px; }
  .chrome__mark { display: none; }
  .need { white-space: normal; }
  .script { font-size: 12.5px; padding: 22px 16px; }
  .script__cue { padding-left: 28%; }
  .script__line { padding: 0 2% 0 8%; }
}

/* =========================================================
   Print / PDF
   ========================================================= */
@media print {
  :root { --u: .13333in; }
  .slide:not(.cover) { display: grid !important; height: 7.5in; padding: .42in .62in; border: 0; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .script.reveal { transform: rotate(-.6deg) !important; }
  .split .ph--portrait, .split .ph--tall { max-height: 5.2in; max-width: 3.9in; }
  .mood { height: 4.6in; }
  .posters .ph { max-height: 3.1in; }
  /* Chrome's PDF output paints wrapped gradient-clipped text as solid bars; use flat gold */
  .name, .stat__num { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold); }
  .arc li::before { box-shadow: none; }
  .script { box-shadow: 0 0 0 1px rgba(200,160,70,.3); }
  .print-only { display: block !important; }
  .screen-only { display: none !important; }
  .s-contact .cover__lights { opacity: 1; top: 2%; width: 4.4in; }
}

/* =========================================================
   Welcome note (03), Executive summary (04), Audience (07)
   ========================================================= */

/* Welcome: a letter on cream paper, with Bruce's portrait beside it */
.welcome { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .6fr); gap: var(--gap); align-items: center; max-width: 1240px; }
.letter {
  position: relative;
  padding: calc(var(--u) * 3) calc(var(--u) * 3.6);
  background: linear-gradient(180deg, #f4efe3, #ebe4d3);
  color: #22201b;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(200,160,70,.25);
  font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.5;
}
.letter p { margin: 0 0 .8em; max-width: 34em; }
.letter em { font-style: italic; color: #000; }
.letter__need { position: absolute; top: calc(var(--u) * -1.1); left: calc(var(--u) * 3.6); }
.letter__need .need { background: #1a1813; }
.letter__hello { font-size: 1.35em; font-style: italic; }
.letter__sign { margin: 1.2em 0 0 !important; font-size: 1.5em; font-style: italic; font-weight: 500; color: var(--gold-deep); }
.letter__title { margin: 0 !important; font-family: var(--sans); font-size: var(--fs-eyebrow); letter-spacing: .26em; text-transform: uppercase; color: #6b6458; }
.ph--round { aspect-ratio: 1; border-radius: 50%; width: 100%; max-width: calc(var(--u) * 20); justify-self: center; }
.ph--round::before, .ph--round::after { display: none; }
.ph--round .need { bottom: 16%; }

/* Executive summary: six fact tiles */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: calc(var(--u) * 1.2) 0 0; background: var(--line); border: 1px solid var(--line); }
.fact { background: var(--black); padding: calc(var(--u) * 2) calc(var(--u) * 2.2); min-height: calc(var(--u) * 10); display: flex; flex-direction: column; gap: calc(var(--u) * .9); }
.fact dt { font-size: var(--fs-eyebrow); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.fact dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6em; font-family: var(--serif); font-weight: 500; font-size: var(--fs-pull); line-height: 1.2; color: var(--bone); }
.summary__credit { margin: calc(var(--u) * 2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8em; font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.summary__credit strong { color: var(--bone); font-weight: 500; }

/* Audience: three segment cards */
.audiences { list-style: none; margin: calc(var(--u) * 1.4) 0 calc(var(--u) * 2); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4); }
.audience { padding: calc(var(--u) * 2.2); background: var(--panel); border: 1px solid rgba(255,255,255,.06); border-top: 2px solid var(--gold); }
.audience__num { font-family: var(--display); font-weight: 900; font-size: calc(var(--fs-h2) * .8); line-height: 1; color: var(--gold); opacity: .9; }
.audience h3 { margin: calc(var(--u) * 1.2) 0 .3em; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: calc(var(--fs-h2) * .58); letter-spacing: .02em; }
.audience__who { margin: 0 0 calc(var(--u) * 1.1); font-size: var(--fs-eyebrow); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.audience p:last-child { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: rgba(243,239,230,.82); }
.audience em { font-family: var(--serif); font-size: 1.08em; color: var(--bone); }
.s-audience .h2 { max-width: 26ch; }
.s-audience .source { display: flex; flex-wrap: wrap; align-items: center; gap: .8em; }

@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .welcome { grid-template-columns: 1fr; }
  .welcome .ph--round { order: -1; max-width: 180px; justify-self: start; }
  .letter { padding: 36px 26px 28px; }
  .letter__need { left: 26px; top: -12px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact { min-height: 0; padding: 20px 18px; }
  .audiences { grid-template-columns: 1fr; }
  .audience { padding: 24px 22px; }
}
@media screen and (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .letter { font-size: 16.5px; }
}
@media print {
  .letter { box-shadow: 0 0 0 1px rgba(200,160,70,.3); }
}

/* =========================================================
   Images: filled frames, cast photos, and location backgrounds
   ========================================================= */

/* A filled placeholder: photo covers the frame, keeps the gold corners */
.ph--img { background: #0c0c0c; }
.ph--img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
}
.ph--img::before, .ph--img::after { z-index: 1; }
.ph--round img { border-radius: 50%; object-position: 50% 30%; }
.ph--round.ph--img { border: 2px solid var(--gold); }
.ph--poster img { object-position: 50% 25%; }
.split .ph--portrait.ph--img img { object-position: 50% 20%; }

.card__ph--img { overflow: hidden; padding: 0; }
.card__ph--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: saturate(.85); }

/* Location background: a campus photo behind each slide, faded toward the edges */
.slide__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* image is set inline per slide (background-image), so paths resolve from the page */
  background-position: center; background-size: cover; background-repeat: no-repeat;
  /* Brightness scales with --dark: 1 = as first built, 0 = the bare photo. CURATE's
     "Background darkness" slider sets it per slide (style.dark in curate/edits.json).
     The top and bottom fade (--fade) is fixed, so slides always blend into each other. */
  --dark: .85;
  --fade: linear-gradient(180deg, transparent, rgba(0,0,0,.18) 6%, rgba(0,0,0,.55) 14%, #000 26%, #000 70%, rgba(0,0,0,.55) 84%, rgba(0,0,0,.18) 93%, transparent);
  opacity: calc(1 - 0.15 * var(--dark));
  filter: saturate(calc(1 - .15 * var(--dark))) contrast(calc(1 + .05 * var(--dark)));
  -webkit-mask-image: var(--fade);
          mask-image: var(--fade);
}
.slide__bg::after {          /* warm the plate toward the brand gold, darken under the text */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 20%, rgba(5,5,5,calc(0.45 * var(--dark))) 55%, rgba(5,5,5,var(--dark)) 85%),
              linear-gradient(180deg, rgba(5,5,5,calc(0.25 * var(--dark))), rgba(5,5,5,calc(0.05 * var(--dark))) 40%, rgba(5,5,5,calc(0.45 * var(--dark)))), rgba(200,160,70,calc(0.06 * var(--dark)));
}
.cover .slide__bg, .s-contact .slide__bg { z-index: -5; opacity: calc(1 - 0.40 * var(--dark)); }
/* Busy slides keep their background quieter so the copy stays readable */
.s-cast .slide__bg, .s-episodes .slide__bg, .s-scene .slide__bg, .s-tone .slide__bg, .s-comps .slide__bg { opacity: calc(1 - 0.45 * var(--dark)); }
/* The Phenoms (11): 35% less darkening than first built (Jorel, Oct 25) */
.s-cast .slide__bg { --dark: .65; }
/* Text sits right over the plate on these; keep it quieter */
.s-statement .slide__bg, #world .slide__bg, #why-now .slide__bg { opacity: calc(1 - 0.50 * var(--dark)); }

/* Comps: show the whole poster over a blurred copy of itself */
.ph--poster .ph__blur { filter: blur(14px) brightness(.55) saturate(.8); transform: scale(1.2); }
.ph--poster .ph__fit { object-fit: contain; filter: none; }

@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .slide__bg {
    --fade: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 10%, #000 22%, #000 62%, rgba(0,0,0,.55) 82%, transparent);
    opacity: calc(1 - 0.30 * var(--dark));
  }
  .split .ph--portrait.ph--img, .split .ph--tall.ph--img { aspect-ratio: 4 / 4.4; }
  .welcome .ph--round { max-width: 160px; }
}

/* Bruce's 2026 photo has a 16 px black band across its top; zoom 3% from the bottom edge so it never shows */
.img--trim-top { transform: scale(1.03); transform-origin: 50% 100%; }
.ph--img:has(.img--trim-top) { overflow: hidden; }

/* Logline (03): the hook sits up top above the tunnel opening; the logline sits low, over the floor */
.logline {
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding-block: calc(var(--u) * 3.2) calc(var(--u) * 1.6);
}
.logline .statement { max-width: 22em; }
.logline__line { margin-top: 0; max-width: 52em; line-height: 2; color: rgba(243,239,230,.88); text-shadow: 0 1px 12px rgba(0,0,0,calc(.9 * var(--shadow, 1))); }
.logline__line::before { margin-bottom: calc(var(--u) * 1.6); }
.logline__line em { font-family: var(--serif); font-size: 1.35em; letter-spacing: .04em; text-transform: none; color: var(--gold); }
#logline .slide__bg { opacity: calc(1 - 0.50 * var(--dark)); }

@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .logline { gap: 56vh; justify-content: flex-start; padding-block: 32px 24px; }
}
@media screen and (max-width: 560px) {
  .logline { gap: 42vh; }
}
@media print {
  .logline__line { text-shadow: none; }   /* Chrome's PDF output draws text-shadow as black boxes */
}

/* Cover (01): the Higgsfield stadium photo is the hero image, with its own light towers in the top corners.
   Show it nearly full strength and without the corner fade the location plates use, so the lights read. */
#cover .slide__bg { opacity: calc(1 - 0.16 * var(--dark)); --fade: linear-gradient(180deg, #000 72%, rgba(0,0,0,.55) 86%, rgba(0,0,0,.18) 94%, transparent); }
/* a touch darker overall plus a soft vignette, to keep the AI detail from drawing the eye */
#cover .slide__bg::after { background: radial-gradient(ellipse 80% 75% at 50% 48%, transparent 45%, rgba(0,0,0,calc(0.42 * var(--dark))) 100%), linear-gradient(180deg, rgba(5,5,5,calc(0.22 * var(--dark))), rgba(5,5,5,calc(0.06 * var(--dark))) 40%, rgba(5,5,5,calc(0.4 * var(--dark)))), rgba(200,160,70,calc(0.05 * var(--dark))); }
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  /* show the whole stadium across the width so both light towers stay in frame; it fades to black below */
  /* photo is 118vw wide, so 66.4vw tall; --top is where it starts. The mask fades its bottom edge into black. */
  #cover .slide__bg {
    --top: 27vw;                      /* below the title, so the game shows under it */
    opacity: calc(1 - 0.10 * var(--dark)); background-size: 118% auto; background-position: 50% var(--top);
    --fade: linear-gradient(180deg, transparent var(--top), #000 calc(var(--top) + 12vw), #000 calc(var(--top) + 44vw), transparent calc(var(--top) + 66vw));
  }
}
@media screen and (max-width: 560px) {
  #cover .slide__bg { --top: 62vw; }   /* iPhone: the stadium sits under the title, so the game shows below it */
}

/* Photos added in CURATE: placed freely on the desktop slide and in the PDF (left/top/width come from
   css/edits.css). Tablet and phone stack the slides, so they're hidden there for now. */
.cur-added { display: none; margin: 0; }
.cur-added img { display: block; width: 100%; height: auto; }
@media print, screen and (min-width: 901px) and (orientation: landscape) {
  .cur-added { display: block; position: absolute; z-index: 4; left: 35%; top: 30%; width: 30%; }
}

/* =========================================================
   The Phenoms (11): card hover, and the enlarged character panel (site/js/cast.js)
   ========================================================= */
.s-cast .card { cursor: pointer; outline: none; }
.s-cast .card__more { display: none; }
.s-cast .card.reveal {
  /* the reveal still staggers in; transform uses the spring so hover bounces */
  transition: opacity .9s var(--ease-out) var(--d, 0s),
              transform .5s cubic-bezier(.34, 1.56, .64, 1),
              border-color .35s, box-shadow .35s, background-color .35s;
}
.s-cast .card__ph img { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) {
  .js .is-in .s-cast .card.reveal:hover, .js .s-cast.is-in .card.reveal:hover {
    transform: translateY(-6px) scale(1.035);
    border-color: rgba(200,160,70,.55);
    background-color: #141312;
    box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(200,160,70,.2);
    z-index: 2;
  }
  .s-cast .card:hover .card__ph img { transform: scale(1.08); }
}
.js .s-cast.is-in .card.reveal:focus-visible { transform: translateY(-6px) scale(1.035); border-color: var(--gold); z-index: 2; }
body.curating .s-cast .card { cursor: auto; }
body.curating .s-cast .card.reveal:hover { transform: none !important; box-shadow: none !important; }

html.cast-open { overflow: hidden; }
.cast-modal {
  position: fixed; inset: 0; z-index: 900;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: max(24px, env(safe-area-inset-top)) clamp(12px, 3vw, 48px) max(24px, env(safe-area-inset-bottom));
  column-gap: clamp(8px, 2vw, 32px);
}
.cast-modal[hidden] { display: none; }
.cast-modal__backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(80% 80% at 50% 45%, rgba(18,15,10,.82), rgba(3,3,3,.94));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cast-modal__stage { position: relative; grid-column: 2; display: grid; place-items: center; min-height: 0; touch-action: pan-y; }
.cast-modal__panel {
  position: relative; width: min(920px, 100%); max-height: min(86svh, 860px); overflow: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(200,160,70,.4) transparent;
  background: linear-gradient(180deg, #151411, #0b0b0b);
  border: 1px solid rgba(200,160,70,.35);
  box-shadow: 0 40px 120px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03) inset;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4.5vw, 64px) clamp(30px, 4vw, 52px);
  transform-origin: 50% 50%;
}
.cast-modal__close {
  position: absolute; top: 12px; right: 14px; width: 44px; height: 44px;
  border: 0; background: none; color: var(--muted); font-size: 34px; line-height: 1; cursor: pointer;
  transition: color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.cast-modal__close:hover, .cast-modal__close:focus-visible { color: var(--gold); transform: rotate(90deg); outline: none; }
.cast-modal__head { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
.cast-modal__photo {
  width: clamp(150px, 19vw, 260px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold); box-shadow: 0 0 0 8px rgba(200,160,70,.08), 0 20px 50px rgba(0,0,0,.6);
  background: #111;
}
.cast-modal__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.cast-modal__count { margin: 0 0 .7em; font-size: 12px; letter-spacing: .3em; color: var(--muted); font-variant-numeric: tabular-nums; }
.cast-modal__name {
  margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 4.4vw, 64px); line-height: .95; letter-spacing: .01em; padding-top: .06em;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cast-modal__sport { margin: .7em 0 0; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.cast-modal__hook { margin: 1em 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.35; color: var(--bone); max-width: 30em; }
.cast-modal__more {
  margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid rgba(200,160,70,.3);
  columns: 2; column-gap: clamp(24px, 3.5vw, 52px);
}
.cast-modal__more p { margin: 0 0 1em; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; color: rgba(243,239,230,.88); break-inside: avoid; }
.cast-modal__more p:first-child::first-letter {
  float: left; font-family: var(--display); font-weight: 900; color: var(--gold);
  font-size: 3.4em; line-height: .82; padding: .06em .1em 0 0;
}
.cast-modal__more .card__flag { column-span: all; margin: .4em 0 0; }
.cast-modal__nav {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid rgba(200,160,70,.45); background: rgba(10,10,10,.6); color: var(--gold); cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1), border-color .25s;
}
.cast-modal__nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cast-modal__nav:hover, .cast-modal__nav:focus-visible { background: rgba(200,160,70,.16); border-color: var(--gold); outline: none; }
.cast-modal__nav--prev:hover { transform: translateX(-4px) scale(1.06); }
.cast-modal__nav--next:hover { transform: translateX(4px) scale(1.06); }
.cast-modal__dots {
  position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; justify-content: center; gap: 8px; pointer-events: none;
}
.cast-modal__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(243,239,230,.25); transition: background .3s, transform .3s; }
.cast-modal__dots span.is-on { background: var(--gold); transform: scale(1.4); }
.cast-modal__hint { display: none; }

/* Tablet and phone: no chevrons, swipe instead; one column */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .cast-modal { grid-template-columns: 1fr; padding-inline: 12px; }
  .cast-modal__nav { display: none; }
  .cast-modal__stage { grid-column: 1; }
  .cast-modal__panel { max-height: 82svh; }
  .cast-modal__head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cast-modal__photo { width: clamp(140px, 36vw, 220px); }
  .cast-modal__hook { margin-inline: auto; }
  .cast-modal__more { columns: 1; }
  .cast-modal__hint {
    display: block; position: absolute; left: 0; right: 0; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 16px);
    margin: 0; text-align: center; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); pointer-events: none;
  }
}
@media screen and (max-width: 560px) {
  .cast-modal__panel { padding: 30px 20px 26px; }
  .cast-modal__name { font-size: clamp(30px, 9vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .s-cast .card.reveal, .s-cast .card__ph img { transition: opacity .3s; }
}
@media print {
  .cast-modal { display: none !important; }
}

/* Looping video in a photo frame (site/js/media.js): sits on the still, which is its first frame */
.ph__video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
  opacity: 0; transition: opacity .8s ease;
}
.ph__video.is-ready { opacity: 1; }
.ph__video.is-ready.is-fading { opacity: 0; }
@media print { .ph__video { display: none !important; } }

/* Bruce's notes, Oct 26 */
.letter p:not(.letter__sign):not(.letter__title) { font-family: "Courier Prime", "Courier New", monospace; font-size: calc(var(--fs-lead) * .82); line-height: 1.55; }
.s-tone .lead + .lead { margin-top: calc(var(--u) * .4); }
.script, .js .is-in .script.reveal { transform: none; }      /* script page sits level */
@media print { .script.reveal { transform: none !important; } }

/* PDF: Chrome tiles a masked photo into blocks (a dark box near the top) and drops the fade.
   In print the photo is unmasked and the same top/bottom fade is painted on top of it instead. */
@media print {
  .slide__bg { -webkit-mask-image: none !important; mask-image: none !important; }
  .slide__bg::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, #050505, rgba(5,5,5,.82) 6%, rgba(5,5,5,.45) 14%, transparent 26%, transparent 70%, rgba(5,5,5,.45) 84%, rgba(5,5,5,.82) 93%, #050505);
  }
  #cover .slide__bg::before { background: linear-gradient(180deg, transparent 72%, rgba(5,5,5,.45) 86%, rgba(5,5,5,.82) 94%, #050505); }
}

/* Soft dark backing behind text that sits over bright parts of a photo (Jorel, Oct 26) */
#world .split__text, #why-now .slide__body { position: relative; isolation: isolate; }
#world .split__text::before, #why-now .slide__body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--u) * -4) calc(var(--u) * -6);
  background: radial-gradient(closest-side, rgba(5,5,5,.72), rgba(5,5,5,.5) 55%, transparent);
}
#why-now .slide__body::before { inset: calc(var(--u) * -3) calc(var(--u) * -4); background: radial-gradient(60% 62% at 42% 52%, rgba(5,5,5,.72), rgba(5,5,5,.48) 60%, transparent); }

/* Audience (08): cream cards with dark type */
.s-audience .audience { background: linear-gradient(180deg, #f4efe3, #ebe4d3); border: 0; border-top: 3px solid var(--gold); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.s-audience .audience h3 { color: #1d1b17; }
.s-audience .audience__num { color: var(--gold-deep); }
.s-audience .audience__who { color: #8a6a22; }
.s-audience .audience p:last-child { color: #2c2924; }
.s-audience .audience em { color: #1d1b17; }
@media print { .s-audience .audience { box-shadow: none; } }

/* Season arc (15): bigger, bolder markers and labels */
.arc::before { top: 12px; height: 3px; background: linear-gradient(90deg, var(--gold), rgba(200,160,70,.35)); }
.arc li { padding-top: calc(var(--u) * 3); }
.arc li::before { width: 26px; height: 26px; border-width: 4px; box-shadow: 0 0 0 5px rgba(5,5,5,.6), 0 0 22px rgba(200,160,70,.6); }
.arc__when { font-size: calc(var(--fs-eyebrow) * 1.6); font-weight: 700; letter-spacing: .24em; color: var(--gold-hi); text-shadow: 0 1px 10px rgba(0,0,0,calc(.9 * var(--shadow, 1))); }
.arc h3 { font-size: calc(var(--fs-h2) * .78); text-shadow: 0 2px 14px rgba(0,0,0,calc(.85 * var(--shadow, 1))); }
@media screen and (max-width: 900px), screen and (orientation: portrait) { .arc::before { left: 11px; width: 3px; top: 0; } .arc li { padding-left: 44px; } }
@media print { .arc__when, .arc h3 { text-shadow: none; } .arc li::before { box-shadow: none; } }

/* Scene (13): level the gym so its horizontals sit parallel to the script page */
#scene .slide__bg { rotate: var(--level, -0.6deg); }   /* measured on the wall and bleacher lines */

/* Dark backing behind text over bright photos: Tone (02) and The Creator (19) (Jorel, Oct 26) */
.s-tone .tone__text, #creator .split__text { position: relative; isolation: isolate; }
.s-tone .tone__text::before, #creator .split__text::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--u) * -4) calc(var(--u) * -5);
  background: radial-gradient(ellipse 72% 68% at 48% 48%, rgba(5,5,5,.84), rgba(5,5,5,.66) 60%, transparent 100%);
}

/* Text backings stop at the photo frames, so they never shade the edge of a picture */
#creator .split__text::before { left: 0; }                      /* photo on the left */
#world .split__text::before { right: calc(var(--gap) * -.5); }   /* photo on the right */
.s-tone .tone__text::before { right: calc(var(--gap) * -.5); }

/* Why Now (07): instead of one big dark cloud, a small rounded backing behind each group of words */
#why-now .slide__body::before { display: none; }
#why-now .h2, #why-now .stats__body, #why-now .source { width: fit-content; }
#why-now .h2, #why-now .stat, #why-now .stats__body, #why-now .source { position: relative; isolation: isolate; }
#why-now .h2::before, #why-now .stat::before, #why-now .stats__body::before, #why-now .source::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--u) * -.7) calc(var(--u) * -1.1);
  border-radius: calc(var(--u) * 1);
  background: rgba(5,5,5,.62);
}
#why-now .stat::before { top: calc(var(--u) * 1.1); bottom: calc(var(--u) * -.8); left: calc(var(--u) * -.6); right: calc(var(--u) * .2); }   /* below the gold rule */
#why-now .source::before { inset: calc(var(--u) * -.35) calc(var(--u) * -.8); border-radius: calc(var(--u) * .6); }
/* stats: the backing hugs the number and its label, not the whole column */
#why-now .stat { align-items: flex-start; }
#why-now .stat::before { display: none; }
#why-now .stat__num, #why-now .stat__label { position: relative; isolation: isolate; }
#why-now .stat__num::before, #why-now .stat__label::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background: rgba(5,5,5,.62);
}
#why-now .stat__num::before   { inset: calc(var(--u) * -.4) calc(var(--u) * -.8) calc(var(--u) * -.3); border-radius: calc(var(--u) * .8) calc(var(--u) * .8) 0 0; }
#why-now .stat__label::before { inset: calc(var(--u) * -.3) calc(var(--u) * -.8) calc(var(--u) * -.7); border-radius: 0 calc(var(--u) * .8) calc(var(--u) * .8) calc(var(--u) * .8); }
#why-now .h2 { max-width: 25ch; }
#why-now .stat__num { isolation: auto; }
#why-now .stat__num::before { display: none; }
#why-now .stat__num {   /* gold text and its dark backing in one background: text-clipped gold over a padded dark box */
  background: var(--gold-metal), rgba(5,5,5,.62);
  -webkit-background-clip: text, padding-box; background-clip: text, padding-box;
  padding: calc(var(--u) * .4) calc(var(--u) * .8) calc(var(--u) * .3);
  margin: calc(var(--u) * -.4) calc(var(--u) * -.8) calc(var(--u) * -.3);
  border-radius: calc(var(--u) * .8) calc(var(--u) * .8) 0 0;
}
@media print { #why-now .stat__num { background: rgba(5,5,5,.62); color: var(--gold); -webkit-background-clip: border-box; background-clip: border-box; } }

/* =========================================================
   Phones (Oct 26): rules carried over from jorelodell.com
   ========================================================= */
/* floating pills: frosted, safe-area aware, hidden while scrolling (html.is-scrolling, set in deck.js) */
.pdf-dl, .cur-pill, .deck-nav { transition: opacity .3s ease, transform .3s ease; }
html.is-scrolling .pdf-dl, html.is-scrolling .cur-pill:not(.is-on), html.is-scrolling .deck-nav { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .deck-nav { display: none; }                                   /* the counter collided with copy; slides scroll on phones */
  .pdf-dl { right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
  .cur-pill { left: max(14px, env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  .pdf-dl__btn, .cur-pill { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(12,12,14,.55); }
  .slide, .s-statement, .s-contact { min-height: 100svh; }
  .slide:last-child { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }   /* room for the pills at the very end */
}
@media screen and (max-width: 560px) {
  .pdf-dl__btn, .cur-pill { font-size: 10px; padding: 7px 12px; }   /* 10% smaller on iPhone */
  /* headlines sized to the screen so names don't break mid-word */
  .name { font-size: clamp(30px, 10.4vw, 46px); line-height: 1; }
  .s-lead .name, #alani .name { font-size: clamp(28px, 9.2vw, 42px); }
  .h2 { font-size: clamp(28px, 9vw, 44px); }
  .h2--serif { font-size: clamp(24px, 7.4vw, 36px); }
  .tone__words { gap: .2em .9em; }
  .tone__words span { font-size: clamp(18px, 6vw, 26px); letter-spacing: .05em; }
  .tone__words span + span::before { margin-right: .9em; }
  /* letter-spaced caps: tracking cut roughly in half */
  .logline__line { letter-spacing: .08em; line-height: 1.75; font-size: 14px; }
  .role, .eyebrow, .stat__label, .audience__who, .card__sport, .arc__when { letter-spacing: .14em; }
  .cover__flag, .cover__kicker { letter-spacing: .22em; }
}

/* ---------------------------------------------------------------- slide order (CURATE > Slides)
   Hidden slides and unused spare slides take no space on any screen or in the PDF (deck.js sets them). */
.slide[hidden], .slide--spare:not(.is-used) { display: none !important; }

/* ---------------------------------------------------------------- frame that opens full screen (site/js/media.js)
   Hover: the same gentle spring forward as the Phenoms cards. Click or tap: the 16:9 player below. */
.ph--zoom { cursor: zoom-in; outline: none; }
.ph--zoom.reveal {
  transition: opacity .9s var(--ease-out) var(--d, 0s),
              transform .55s cubic-bezier(.34, 1.56, .64, 1),
              border-color .35s, box-shadow .35s;
}
.ph__expand {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 34px; height: 34px; padding: 8px;
  border-radius: 50%; background: rgba(5,5,5,.55); border: 1px solid rgba(200,160,70,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .75; transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none;
}
@media (hover: hover) {
  .js .is-in .ph--zoom.reveal:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(200,160,70,.55);
    box-shadow: 0 22px 54px rgba(0,0,0,.65), 0 0 0 1px rgba(200,160,70,.25);
    z-index: 2;
  }
  .ph--zoom:hover .ph__expand { opacity: 1; transform: scale(1.12); }
}
.js .is-in .ph--zoom.reveal:focus-visible { transform: translateY(-6px) scale(1.03); border-color: var(--gold); z-index: 2; }
body.curating .ph--zoom { cursor: auto; }
body.curating .ph--zoom.reveal:hover { transform: none !important; box-shadow: none !important; }
body.curating .ph__expand { display: none; }

html.vplayer-open { overflow: hidden; }
.vplayer {
  position: fixed; inset: 0; margin: auto; height: fit-content; max-width: none; overflow: visible;
  width: min(1400px, 94vw, calc((100svh - 120px) * 16 / 9));
  padding: 0; border: 0; background: transparent; color: var(--bone);
}
.vplayer::backdrop { background: rgba(0,0,0,.88); }
.vplayer[open] { animation: vplayer-pop .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes vplayer-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.vplayer__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(200,160,70,.25); }
.vplayer__still, .vplayer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vplayer__video { opacity: 0; transition: opacity .8s ease; }
.vplayer__video.is-ready { opacity: 1; }
.vplayer__video.is-ready.is-fading { opacity: 0; }
.vplayer__close {
  position: absolute; top: -48px; right: 0; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(243,239,230,.4); background: rgba(12,12,14,.6); color: var(--bone);
  font: 24px/1 var(--sans); cursor: pointer;
}
.vplayer__close:hover, .vplayer__close:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
@media (max-width: 560px), (orientation: portrait) {
  .vplayer { width: calc(100vw - 24px); }
  .vplayer__close { top: auto; bottom: calc(100% + 10px); }
  .ph__expand { width: 30px; height: 30px; padding: 7px; right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .vplayer[open] { animation: none; } .ph--zoom.reveal { transition: opacity .3s; } }
@media print { .vplayer, .ph__expand { display: none !important; } }

/* ---------------------------------------------------------------- soft text backings (Jorel, Oct 26)
   Every dark backing behind words is solid in the middle and feathers to nothing on every side
   (an eased fade, --fx wide at the sides and --fy tall at the top and bottom), so you can hardly tell
   it's there. Each box is grown by its feather so the words still sit on the solid part.
   The PDF can't print masks cleanly, so print uses a soft radial version instead. */
.s-tone .tone__text::before, #creator .split__text::before, #world .split__text::before,
#alani .split__text::before, #alani .split__text::after,
#why-now .h2::before, #why-now .stat::before, #why-now .stats__body::before, #why-now .source::before, .note::before {
  --fx: calc(var(--u) * 3); --fy: calc(var(--u) * 3); --a: .62;
  border-radius: 0 !important;
  background: rgba(5,5,5,calc(var(--a) * var(--shadow, 1))) !important;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, rgba(0,0,0,.1) calc(var(--fx) * .2), rgba(0,0,0,.35) calc(var(--fx) * .4), rgba(0,0,0,.65) calc(var(--fx) * .6), rgba(0,0,0,.9) calc(var(--fx) * .8), #000 var(--fx),
                    #000 calc(100% - var(--fx)), rgba(0,0,0,.9) calc(100% - var(--fx) * .8), rgba(0,0,0,.65) calc(100% - var(--fx) * .6), rgba(0,0,0,.35) calc(100% - var(--fx) * .4), rgba(0,0,0,.1) calc(100% - var(--fx) * .2), transparent),
    linear-gradient(180deg, transparent, rgba(0,0,0,.1) calc(var(--fy) * .2), rgba(0,0,0,.35) calc(var(--fy) * .4), rgba(0,0,0,.65) calc(var(--fy) * .6), rgba(0,0,0,.9) calc(var(--fy) * .8), #000 var(--fy),
                    #000 calc(100% - var(--fy)), rgba(0,0,0,.9) calc(100% - var(--fy) * .8), rgba(0,0,0,.65) calc(100% - var(--fy) * .6), rgba(0,0,0,.35) calc(100% - var(--fy) * .4), rgba(0,0,0,.1) calc(100% - var(--fy) * .2), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, rgba(0,0,0,.1) calc(var(--fx) * .2), rgba(0,0,0,.35) calc(var(--fx) * .4), rgba(0,0,0,.65) calc(var(--fx) * .6), rgba(0,0,0,.9) calc(var(--fx) * .8), #000 var(--fx),
                    #000 calc(100% - var(--fx)), rgba(0,0,0,.9) calc(100% - var(--fx) * .8), rgba(0,0,0,.65) calc(100% - var(--fx) * .6), rgba(0,0,0,.35) calc(100% - var(--fx) * .4), rgba(0,0,0,.1) calc(100% - var(--fx) * .2), transparent),
    linear-gradient(180deg, transparent, rgba(0,0,0,.1) calc(var(--fy) * .2), rgba(0,0,0,.35) calc(var(--fy) * .4), rgba(0,0,0,.65) calc(var(--fy) * .6), rgba(0,0,0,.9) calc(var(--fy) * .8), #000 var(--fy),
                    #000 calc(100% - var(--fy)), rgba(0,0,0,.9) calc(100% - var(--fy) * .8), rgba(0,0,0,.65) calc(100% - var(--fy) * .6), rgba(0,0,0,.35) calc(100% - var(--fy) * .4), rgba(0,0,0,.1) calc(100% - var(--fy) * .2), transparent);
  mask-composite: intersect;
}

/* big backings behind whole text columns (feathers never under ~40px, so they stay soft on tablets and phones) */
.s-tone .tone__text::before, #creator .split__text::before, #world .split__text::before {
  --a: .74; --fx: max(44px, calc(var(--u) * 6)); --fy: max(44px, calc(var(--u) * 6));
  inset: calc(-1 * var(--fy) - var(--u)) calc(-1 * var(--fx) - var(--u) * 2);
}
#world .split__text::before { --a: .6; right: calc(var(--gap) * -.5); }
#creator .split__text::before { left: calc(var(--u) * -1); }                 /* fades out before the photo on the left */
.s-tone .tone__text::before { right: calc(var(--gap) * -.5); }             /* ... and before the photos on the right */
@media print, screen and (min-width: 901px) and (orientation: landscape) {
  #alani .split__text::before { --a: .7; --fx: calc(var(--u) * 5); --fy: calc(var(--u) * 5); left: calc(var(--u) * -1); right: calc(var(--u) * -7); bottom: calc(var(--u) * -6); height: 80%; }
  #alani .split__text::after  { --a: .5; --fx: calc(var(--u) * 5); --fy: calc(var(--u) * 4); left: calc(var(--u) * -1); right: 4%; top: calc(var(--u) * -5); height: 38%; }
}

/* Why Now: one soft backing per group of words */
#why-now .h2::before, #why-now .stats__body::before {
  --fx: max(30px, calc(var(--u) * 2.6)); --fy: max(24px, calc(var(--u) * 2));
  inset: calc(-1 * var(--fy) - var(--u) * .6) calc(-1 * var(--fx) - var(--u) * .8);
}
#why-now .source::before { --a: .55; --fx: max(24px, calc(var(--u) * 2)); --fy: max(14px, calc(var(--u) * 1.2)); inset: calc(-1 * var(--fy) - var(--u) * .3) calc(-1 * var(--fx) - var(--u) * .6); }
#why-now .stat::before {
  display: block; --fx: max(24px, calc(var(--u) * 1.8)); --fy: max(20px, calc(var(--u) * 1.3));
  top: calc(var(--u) * .3); bottom: calc(-1 * var(--fy) - var(--u) * .9); left: calc(-1 * var(--fx) - var(--u) * .4); right: calc(var(--u) * -1);
}
#why-now .stat__label::before { display: none; }                                   /* the stat's own backing covers number and label */
#why-now .stat__num { background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; padding: 0; margin: 0; border-radius: 0; }

@media print {
  .s-tone .tone__text::before, #creator .split__text::before, #world .split__text::before,
  #alani .split__text::before, #alani .split__text::after,
  #why-now .h2::before, #why-now .stat::before, #why-now .stats__body::before, #why-now .source::before, .note::before {
    -webkit-mask-image: none; mask-image: none;
    background: radial-gradient(closest-side, rgba(5,5,5,calc(var(--a) * var(--shadow, 1))) 72%, rgba(5,5,5,calc(calc(var(--a) * var(--shadow, 1)) * .7)) 84%, rgba(5,5,5,calc(calc(var(--a) * var(--shadow, 1)) * .3)) 93%, transparent) !important;
  }
  #why-now .stat__num { background: none; color: var(--gold); -webkit-background-clip: border-box; background-clip: border-box; }
}

/* note boxes (Dr. B's role, Big Al's contradiction, the Creator's slate): no border, the same feathered backing */
.note { position: relative; isolation: isolate; background: none; border: 0; }
.note::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  --a: .82; --fx: max(28px, calc(var(--u) * 2.4)); --fy: max(20px, calc(var(--u) * 1.8));
  inset: calc(-1 * var(--fy) + var(--u) * .6) calc(-1 * var(--fx) + var(--u) * .7);
}

/* ---------------------------------------------------------------- "Bruce to confirm" tags (.need)
   Editors only: hidden on the public site and in the PDF. curate.js sets html.cur-on on localhost and
   the editor address, where each tag is a checkbox: click it, then Approve, and it's gone for good
   (saved as CURATE value need.<name> → ok, which hides [data-need="<name>"] everywhere). */
html:not(.cur-on) .need { display: none !important; }
@media print { .need { display: none !important; } }
html.cur-on .need[data-need] { cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color .2s, border-color .2s; }
html.cur-on .need[data-need]::before {
  content: ""; flex: none; width: max(13px, 1.3em); height: max(13px, 1.3em); box-sizing: border-box;
  border: 1.5px solid var(--gold); border-radius: 3px; background: rgba(5,5,5,.5);
}
html.cur-on .need[data-need]:hover { background: rgba(200,160,70,.18); border-style: solid; }
.need-ask {
  position: fixed; z-index: 1200; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px;
  border: 1px solid rgba(200,160,70,.55); border-radius: 10px; background: rgba(8,8,8,.96);
  box-shadow: 0 14px 40px rgba(0,0,0,.6); font: 500 12px/1.3 var(--sans); color: var(--bone);
  animation: need-ask-in .18s ease-out;
}
.need-ask[hidden] { display: none; }
.need-ask__q { max-width: 26em; }
.need-ask__q b { color: var(--gold-hi); font-weight: 600; }
.need-ask button { padding: 7px 12px; border-radius: 8px; border: 1px solid #333; background: #111; color: var(--bone); font: 600 12px/1 var(--sans); cursor: pointer; }
.need-ask .need-ask__yes { background: var(--gold); border-color: var(--gold); color: #050505; }
.need-ask button:hover { border-color: var(--gold); }
@keyframes need-ask-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media print { .need-ask { display: none !important; } }
@media (max-width: 560px) { .need-ask { flex-wrap: wrap; max-width: calc(100vw - 16px); } .need-ask__q { flex-basis: 100%; } }

/* ---------------------------------------------------------------- letter-hugging shadows (Jorel, Oct 26, take 2)
   On screen the darkness follows the letters themselves: deep right at each letter, fading out gradually within
   a short distance, instead of a box behind the block. (drop-shadow, not text-shadow, so the gold numbers keep
   their metallic fill.) The PDF uses the same letter shadows (Oct 27): the old soft print backings showed up as dark
   ovals in the PDF, and Chrome now prints these shadows cleanly. */
@media screen, print {
  .s-tone .tone__text::before, #creator .split__text::before, #world .split__text::before,
  #alani .split__text::before, #alani .split__text::after, .note::before,
  #why-now .h2::before, #why-now .stat::before, #why-now .stats__body::before, #why-now .source::before { display: none !important; }
  /* on each text box, not on the column around it, so CURATE can set one box's shadow on its own (Jorel, Oct 27) */
  .s-tone .tone__text [data-ed], #world .split__text [data-ed], #big-al .note [data-ed],
  #why-now .h2, #why-now .stat [data-ed], #why-now .stats__body, #why-now .source {
    filter: drop-shadow(0 0 2px rgba(5,5,5,calc(.95 * var(--shadow, 1)))) drop-shadow(0 0 7px rgba(5,5,5,calc(.85 * var(--shadow, 1)))) drop-shadow(0 0 18px rgba(5,5,5,calc(.6 * var(--shadow, 1))));
  }
}

/* ---------------------------------------------------------------- Dr. B (09) and Big Al (10): boxed text (Jorel, Oct 26)
   The one-liner sits in a long, thin charcoal bar (65%, so the room behind shows through); the bio in a cream box
   with black type. No shadow around either box; the letter shadows sit on the loose words only.
   Dr. B's soft dark backing behind the bio is no longer needed, on screen or in the PDF. */
.s-boxed .pull {
  padding: calc(var(--u) * .9) calc(var(--u) * 1.6);
  background: rgba(38,37,35,.65); border-left: 3px solid var(--gold);
}
.s-boxed .body {
  padding: calc(var(--u) * .9);   /* 60% less space around the words (Jorel); measured from cap tops to baseline */
  text-box: trim-both cap alphabetic;
  background: linear-gradient(180deg, #f4efe3, #ebe4d3); color: #141210;
  border-top: 2px solid var(--gold);
}
.s-boxed .body em { color: #141210; }
.s-boxed .pull, .s-boxed .body { box-sizing: border-box; }
#alani .split__text::before, #creator .split__text::before { display: none !important; }
@media print, screen and (min-width: 901px) and (orientation: landscape) {
  .s-boxed .pull, .s-boxed .body { max-width: calc(var(--u) * 48); }   /* the bar and the box end at the same edge */
}
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .s-boxed .pull { padding: 14px 18px; margin-bottom: 16px; }
  .s-boxed .body { padding: 8px; }
  .s-boxed .pull, .s-boxed .body { max-width: none; }
}
@media screen, print {
  #alani .split__text, #creator .split__text { filter: none; }
  .s-boxed .tag, .s-boxed .name, .s-boxed .role, .s-boxed .note [data-ed] {
    filter: drop-shadow(0 0 2px rgba(5,5,5,calc(.95 * var(--shadow, 1)))) drop-shadow(0 0 7px rgba(5,5,5,calc(.85 * var(--shadow, 1)))) drop-shadow(0 0 18px rgba(5,5,5,calc(.6 * var(--shadow, 1))));
  }
}

/* ---------------------------------------------------------------- character pop-up, bigger (Jorel, Oct 26)
   The whole panel and everything on it about 15% larger, the photo much larger, so you step into their world. */
.cast-modal__panel {
  width: min(1060px, 100%); max-height: min(92svh, 1000px);
  padding: clamp(32px, 4.6vw, 64px) clamp(28px, 5.2vw, 74px) clamp(34px, 4.6vw, 60px);
}
.cast-modal__close { width: 50px; height: 50px; font-size: 40px; }
.cast-modal__head { gap: clamp(24px, 3.4vw, 52px); }
.cast-modal__photo { width: clamp(200px, 27vw, 380px); box-shadow: 0 0 0 10px rgba(200,160,70,.08), 0 24px 60px rgba(0,0,0,.6); }
.cast-modal__count { font-size: 14px; }
.cast-modal__name { font-size: clamp(40px, 5vw, 74px); }
.cast-modal__sport { font-size: 15px; }
.cast-modal__hook { font-size: clamp(22px, 1.95vw, 29px); }
.cast-modal__more { margin-top: clamp(28px, 3.4vw, 46px); padding-top: clamp(24px, 3vw, 36px); column-gap: clamp(28px, 4vw, 60px); }
.cast-modal__more p { font-size: clamp(18px, 1.44vw, 22px); }
.cast-modal__nav { width: 68px; height: 68px; }
.cast-modal__nav svg { width: 30px; height: 30px; }
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .cast-modal__panel { max-height: 88svh; }
  .cast-modal__photo { width: clamp(180px, 52vw, 320px); }
}
@media screen and (max-width: 560px) {
  .cast-modal__panel { padding: 34px 22px 30px; max-height: 80svh; }   /* stays clear of the swipe hint */
  .cast-modal__name { font-size: clamp(34px, 10.3vw, 50px); }
  .cast-modal__sport { font-size: 13px; letter-spacing: .16em; }
}

/* The Parents (12): Julius's description in the same cream box as the leads' bios, black type (Jorel, Oct 26) */
#parents .body {
  padding: calc(var(--u) * .52);   /* the same space on every side, 60% less than first built (Jorel) */
  text-box: trim-both cap alphabetic;   /* measured from the tops of the capitals to the baseline, so top and bottom read equal */
  background: linear-gradient(180deg, #f4efe3, #ebe4d3); color: #141210;
  border-top: 2px solid var(--gold); box-sizing: border-box;
}
#parents .body em { color: #141210; }
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  #parents .body { padding: 6px; }
}
/* the OPPONENT label tops the column, like the LEAD labels. On desktop and in the PDF it takes up no room, so the
   headline, name and boxes stay where they were placed in CURATE (it follows the headline's -4.83u nudge, plus a gap). */
#parents .tag { display: block; width: fit-content; }
@media print, screen and (min-width: 901px) and (orientation: landscape) {
  #parents .tag { position: relative; height: calc(var(--u) * 2.4); box-sizing: border-box; display: flex; align-items: center;
                  margin: 0 0 calc(var(--u) * -2.4); top: calc(var(--u) * (-4.83 - 3.4)); }
}
@media screen and (max-width: 900px), screen and (orientation: portrait) { #parents .tag { margin-bottom: 14px; } }
@media print { #parents .tag { height: calc(var(--u) * 2); margin-bottom: calc(var(--u) * -2); top: calc(var(--u) * (-4.83 - 2.45)); } }

/* Why Now (07), Jorel's rebuild, Oct 26
   The gold rule over each number now belongs to the number, so it travels with it when the number is moved in
   CURATE (desktop and PDF; tablet and phone keep the rule on the stat as before). */
@media print, screen and (min-width: 901px) and (orientation: landscape) {
  #why-now .stat { border-top: 0; }
  #why-now .stat__num { align-self: stretch; position: relative; }
  #why-now .stat__num::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(var(--u) * -1.8); height: 1px; background: var(--gold);
  }
}
/* the paragraph under the numbers in a 65% charcoal box with white type, same space on every side (Jorel) */
#why-now .stats__body {
  padding: calc(var(--u) * 1.3); box-sizing: border-box;
  background: rgba(38,37,35,.65); color: var(--bone);
  border-top: 2px solid var(--gold);
  text-box: trim-both cap alphabetic;
}
#why-now .stats__body em { color: var(--bone); }
#why-now .stats__body::before { display: none !important; }
@media screen { #why-now .stats__body { filter: none; } }
@media screen and (max-width: 900px), screen and (orientation: portrait) { #why-now .stats__body { padding: 16px; } }
/* the three lines under the numbers: deeper letter shading than the rest (Jorel, Oct 26) */
@media screen, print {
  #why-now .stat [data-ed].stat__label {
    filter: drop-shadow(0 0 1px rgba(0,0,0,calc(.67 * var(--shadow, 1)))) drop-shadow(0 0 4px rgba(0,0,0,calc(.64 * var(--shadow, 1)))) drop-shadow(0 0 10px rgba(0,0,0,calc(.61 * var(--shadow, 1)))) drop-shadow(0 0 24px rgba(0,0,0,calc(.5 * var(--shadow, 1))));   /* 16%, then another 20% lighter (Jorel) */
  }
}

/* The Creator (19), laid out like Julius's page (Jorel, Oct 26): name, role, the CREATED BY oval under the role,
   the bio in the cream box, and "Also on the slate" in the gold-ruled serif italic at the bottom. */
#creator .tag { display: block; width: fit-content; margin-top: calc(var(--u) * .6); }
#creator .note { padding-left: 0; padding-right: 0; }
#creator .note p:not(.note__label) {
  margin: 0; padding-left: calc(var(--u) * 1.4); border-left: 2px solid var(--gold);
  font-family: var(--serif); font-style: italic; font-size: var(--fs-pull); line-height: 1.3; color: var(--bone);
}
#creator .note p:not(.note__label) i { font-style: normal; }   /* the film title stands out in roman inside the italic */
@media screen and (max-width: 900px), screen and (orientation: portrait) { #creator .tag { margin-bottom: 14px; } }

/* Dr. B (09), laid out like Julius's page (Jorel, Oct 27): her line as the headline on top, then name, role and the
   SERIES REGULAR oval under the role, the bio in the cream box, and her role in the show in the gold-ruled serif
   italic at the bottom. The headline is her own: Cormorant upright with "a chip on her shoulder" in gold italic. */
#alani .hook {
  margin: 0 0 calc(var(--u) * .6);
  font-family: var(--serif); font-weight: 400; font-size: calc(var(--fs-h2) * .82); line-height: 1.05;
  letter-spacing: -.005em; color: var(--bone); max-width: 18ch;
}
#alani .hook em { font-style: italic; font-weight: 500; color: var(--gold); }
#alani .tag { display: block; width: fit-content; margin: calc(var(--u) * .6) 0 calc(var(--u) * 1.6);
              background: rgba(5,5,5,.6); }   /* a dark fill, so the oval reads over the bright seats */
#alani .note { margin-top: calc(var(--u) * 1.6); padding-left: 0; padding-right: 0; }
#alani .note p:not(.note__label) {
  margin: 0; padding-left: calc(var(--u) * 1.4); border-left: 2px solid var(--gold);
  font-family: var(--serif); font-style: italic; font-size: var(--fs-pull); line-height: 1.3; color: var(--bone);
}
@media print, screen and (min-width: 901px) and (orientation: landscape) {
  #alani .name { font-size: calc(var(--u) * 3.1); }   /* the same size as Julius's name */
  #alani .body { max-width: calc(var(--u) * 48); }
}
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  #alani .hook { font-size: clamp(26px, 7.8vw, 40px); }
  #alani .tag { margin: 4px 0 14px; }
}
@media screen, print { #alani .hook { filter: drop-shadow(0 0 2px rgba(5,5,5,calc(.95 * var(--shadow, 1)))) drop-shadow(0 0 7px rgba(5,5,5,calc(.85 * var(--shadow, 1)))) drop-shadow(0 0 18px rgba(5,5,5,calc(.6 * var(--shadow, 1)))); } }

/* Back to Grand Avenue Studios (Jorel, Oct 27): top left, exactly as on the Travel Ball page (studio.css .tb__home).
   It fades out while the deck scrolls and back in after 1.5 s of rest (html.ga-moving, set in deck.js). */
.ga-home {
  position: fixed; z-index: 45; top: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; text-decoration: none; color: var(--bone);
  opacity: .85; transition: opacity .6s ease;
}
.ga-home:hover, .ga-home:focus-visible { opacity: 1; outline: none; }
.ga-home img { width: 44px; height: auto; }
html.ga-moving .ga-home { opacity: 0; pointer-events: none; transition-duration: .25s; }
@media print { .ga-home { display: none !important; } }
/* on desktop the slides' top label row starts after the Grand Avenue link, so the two never sit on each other */
@media screen and (min-width: 901px) and (orientation: landscape) {
  .slide > .chrome { padding-left: max(0px, calc(304px - var(--gutter))); }
}
/* Tone grid on iPad portrait and phones: the cells are wide and short there, so the draft photo is framed from
   near its top (his head was cut off when centred) (Jorel, Oct 27). Desktop keeps CURATE's framing. */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .mood [data-ed="tone.img.mood-silhouette"] { object-position: 50% 12%; }
}

/* the big gold numbers (Why Now): the $ reaches above and below the line, past the painted box; room for the
   paint, taken back with the margin, so nothing moves (Oct 27) */
.stat__num, #why-now .stat__num { padding-top: .12em; padding-bottom: .08em; margin-top: -.12em; margin-bottom: -.08em; }