:root {
  --paper: #fbf7f0;
  --paper-2: #f3ecdf;
  --card: #fffdf9;
  --ink: #1c1916;
  --ink-2: #4a433c;
  --ink-3: #6b6259;
  --line: #e4dacb;
  --accent: #a61e4d;
  --accent-soft: #f6e3e9;
  --night: #16131c;
  --night-2: #221e2b;
  --night-ink: #f3eee6;
  --night-ink-2: #c9c1b6;
  --gold: #e3b36a;
  --radius: 14px;
  --wrap: 1120px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 800; line-height: 1.1; margin: 0; letter-spacing: -0.025em; }
h3, h4 { font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
em { font-style: italic; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 12px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(251, 247, 240, 0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav a.link { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav a.link:hover { color: var(--ink); }
.nav a.pill { color: var(--paper); background: var(--ink); padding: 7px 14px; border-radius: 999px; }
.nav a.pill:hover { background: var(--accent); color: #fff; }

/* type helpers */
.eyebrow { font: 600 12.5px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.lede { font-family: var(--sans); font-size: clamp(21px, 2.4vw, 28px); line-height: 1.35; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; line-height: 1.5; }

/* sections */
section { padding: 88px 0; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 14px; }
.section-head p { color: var(--ink-2); font-size: 18px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* hero */
.hero { padding: 64px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(46px, 7vw, 84px); letter-spacing: -0.025em; margin-bottom: 18px; font-weight: 600; }
.hero .lede { margin-bottom: 18px; }
.hero .bio { color: var(--ink-2); max-width: 560px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--sans); padding: 13px 20px; border-radius: 999px; text-decoration: none; border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero-art { margin: 0; }
.hero-art img { border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(60, 20, 60, 0.45); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-art figcaption { margin-top: 12px; }

/* proof strip */
.proof { padding: 28px 0 72px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.stat { padding: 24px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat:nth-child(4n) { border-right: 0; }
.stat:nth-last-child(-n+4) { border-bottom: 0; }
.stat b { display: block; font-family: var(--display); font-size: clamp(34px, 3.4vw, 46px); font-weight: 400; line-height: 1; margin-bottom: 10px; letter-spacing: 0.01em; }
.stat span { display: block; color: var(--ink-2); font-size: 15px; line-height: 1.45; }

/* testimonial */
.quote { margin: 40px 0 0; padding: 30px 34px; border-left: 4px solid var(--accent); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; }
.quote blockquote { margin: 0; }
.quote .big { font-family: var(--sans); font-size: clamp(19px, 2.1vw, 23px); line-height: 1.45; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 14px; }
.quote p { color: var(--ink-2); font-size: 16.5px; }
.quote figcaption { font-size: 15px; color: var(--ink-3); }
.quote figcaption b { color: var(--ink); }

/* path */
.path { background: var(--paper-2); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 22px; position: relative; }
.step .when { font: 600 12.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.step h3 { font-size: 22px; margin: 12px 0 12px; }
.step p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; margin: 0; }
.step .num { position: absolute; top: 20px; right: 20px; font-family: var(--display); font-size: 15px; color: var(--accent); font-weight: 400; }
.arc-note { margin-top: 26px; color: var(--ink-2); font-size: 16px; max-width: 760px; }

/* case studies */
.case { padding: 72px 0; border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 0; padding-top: 0; }
.case-head { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 30px; max-width: 820px; }
.case-head h3 { font-size: clamp(30px, 3.8vw, 42px); }
.case-head .sub { font-family: var(--sans); font-size: 19px; font-weight: 500; line-height: 1.4; color: var(--ink-2); margin: 8px 0 0; }
.role { display: inline-block; margin-top: 12px; font-size: 14.5px; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); padding: 7px 12px; border-radius: 10px; }
.case-body { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: start; }
.case-body.flip { grid-template-columns: 1.05fr 0.95fr; }
.case-body.flip > .case-text { order: 2; }
.case-text h4 { font: 700 13px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 10px; }
.case-text h4:first-child { margin-top: 0; }
.case-text p { color: var(--ink-2); }
.case-text ul { margin: 0 0 1em; padding-left: 20px; color: var(--ink-2); }
.case-text li { margin-bottom: 8px; }
.result { background: var(--accent-soft); border-radius: 12px; padding: 16px 18px; color: var(--ink); font-weight: 500; font-size: 16px; }
.result b { color: var(--accent); }

/* media */
.media { display: grid; gap: 14px; }
.media.two { grid-template-columns: 1fr 1fr; }
.media.three { grid-template-columns: repeat(3, 1fr); }
figure { margin: 0; }
.shot img, .shot video { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--paper-2); }
.shot figcaption { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin-top: 8px; }
.shot figcaption b { color: var(--ink-2); font-weight: 600; }
.shot.wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.shot.tall img { aspect-ratio: 9 / 11; object-fit: cover; object-position: top; }
.tag { display: inline-block; font: 700 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: var(--ink); color: var(--paper); margin-right: 6px; vertical-align: 1px; }
.tag.mine { background: var(--accent); color: #fff; }
.tag.live { background: #2f6b4f; color: #fff; }
[data-zoom] { cursor: zoom-in; }

/* video frame */
.phone { max-width: 300px; }
.phone video { aspect-ratio: 608 / 864; object-fit: cover; }

/* kiss list loop */
.loop { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.loop svg { width: 100%; height: auto; display: block; }

/* creator ladder */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ladder li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px; color: var(--ink-2); }
.ladder li span { font-family: var(--display); font-weight: 400; color: var(--accent); font-size: 20px; line-height: 1.2; }
.tiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.tiers li { font-size: 13.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); }
.tiers li:nth-child(1) { border-color: #e2b25a; }
.tiers li:nth-child(2) { border-color: #c9435f; }
.tiers li:nth-child(3) { border-color: #3f9b6e; }
.tiers li:nth-child(4) { border-color: #6a8fd6; }
.titles { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 8px 0 0; }
.titles li { font-family: var(--sans); font-weight: 500; font-size: 15px; background: var(--paper-2); border: 1px solid var(--line); padding: 6px 12px; border-radius: 10px; color: var(--ink); }

/* AI section */
.ai { background: var(--night); color: var(--night-ink); }
.ai .eyebrow { color: var(--gold); }
.ai .section-head p, .ai p { color: var(--night-ink-2); }
.ai h2, .ai h3, .ai h4 { color: var(--night-ink); }
.ai a { color: var(--gold); }
.pipeline { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: stage; }
.pipeline li { background: var(--night-2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pipeline li::before { counter-increment: stage; content: counter(stage, decimal-leading-zero); font-family: var(--display); color: var(--gold); font-weight: 400; font-size: 17px; letter-spacing: 0.04em; }
.pipeline h4 { font-size: 19px; }
.pipeline p { font-size: 14.5px; line-height: 1.5; margin: 0; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.thumbs.two { grid-template-columns: 1fr 1fr; }
.thumbs.one { grid-template-columns: 1fr; }
.thumbs img { border-radius: 7px; aspect-ratio: 9 / 16; object-fit: cover; width: 100%; background: #2b2636; }
.thumbs.one img { aspect-ratio: 16 / 9; }
.textcard { font-size: 13.5px; line-height: 1.5; color: var(--night-ink); background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 8px; padding: 10px 12px; margin-top: auto; }
.textcard .sp { color: var(--gold); font-weight: 600; letter-spacing: .04em; font-size: 12px; }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.frames figure img { border-radius: 12px; aspect-ratio: 9 / 16; object-fit: cover; width: 100%; background: #2b2636; }
.frames figcaption { font-size: 13.5px; color: var(--night-ink-2); margin-top: 8px; }
.frames figcaption b { color: var(--night-ink); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 48px; align-items: center; margin-bottom: 72px; }
.balcony video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; border: 0; background: #2b2636; }
.ai .shot figcaption { color: var(--night-ink-2); }
.ai-h3 { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 14px; }
.looklist { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.looklist li { border-left: 3px solid var(--gold); padding-left: 14px; color: var(--night-ink-2); }
.looklist b { color: var(--night-ink); }
.coverage { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: center; margin-bottom: 56px; }
.after { max-width: 860px; margin: -24px 0 48px; font-size: 16px; }
.scene { background: #fbf7f0; color: var(--ink); border-radius: 14px; padding: 24px 24px 20px; font-size: 15.5px; }
.scene .slug { font: 700 12.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.scene p { color: var(--ink); margin: 0 0 10px; }
.scene .who { font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 3px; }
.scene .dir { color: var(--ink-3); font-style: italic; }
.scene .shotcue { float: right; font: 700 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); padding: 4px 6px; border-radius: 5px; margin-left: 10px; }
.choices { display: grid; gap: 8px; margin: 12px 0 14px; }
.choices span { display: block; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14.5px; text-align: center; }
.choices span.prem { border-color: var(--accent); color: var(--accent); }
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
.principles div { border-top: 2px solid var(--gold); padding-top: 14px; }
.principles h4 { font-size: 19px; margin-bottom: 8px; }
.principles p { font-size: 15px; line-height: 1.55; margin: 0; }
.ai-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 28px; }
.ai-foot p { margin: 0; font-size: 16px; }
.ai-foot b { color: var(--night-ink); }

/* writing sample */
.ws-panel { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.ws-panel[hidden] { display: none; }
.ws-panel > div:first-child { position: sticky; top: 84px; }
.ws-title { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 14px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tabs button { font: 600 15px/1 var(--sans); padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.plan { margin: 14px 0; padding: 10px 14px; border: 1.5px dashed var(--accent); border-radius: 10px; font-size: 14.5px; }
.plan span { display: block; font: 700 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.plan b { display: block; }
.gain { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; margin: 2px 0 0; }
.script { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; box-shadow: 0 24px 50px -36px rgba(40, 20, 30, .35); }
.script .setup { color: var(--ink-3); font-style: italic; margin-bottom: 16px; font-size: 15.5px; }
.line { margin: 0 0 10px; font-size: 16px; }
.line .who { font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 3px; }
.line .who.you { color: var(--ink-3); }
.branch { border-left: 3px solid var(--line); padding: 4px 0 4px 18px; margin: 18px 0; }
.branch h4 { font: 700 12.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.recap { font-size: 14px; background: var(--paper-2); border-radius: 10px; padding: 10px 12px; color: var(--ink-2); margin-top: 8px; }
.recap b { color: var(--ink); }
.notes { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.notes li { border-left: 3px solid var(--accent); padding-left: 14px; color: var(--ink-2); font-size: 15.5px; }

/* more work */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { font-size: 24px; }
.card p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.card .media { margin-top: 4px; }
.credits { margin-top: 36px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); }
.credits h4 { font: 700 13px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.credits p { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink); }

/* how i work */
.how { background: var(--paper-2); }
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.rules div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.rules h3 { font-size: 23px; margin-bottom: 10px; }
.rules p { color: var(--ink-2); margin: 0 0 10px; }
.rules .proofline { font-size: 14.5px; color: var(--ink-3); margin: 0; }
.rules .proofline b { color: var(--accent); }

/* about */
.about .wrap { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 56px; align-items: start; }
.portrait img { border-radius: 16px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.portrait { max-width: 380px; }
.about h2 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 18px; }
.about p { color: var(--ink-2); font-size: 17.5px; }
.issues { margin-top: 26px; border: 1px dashed var(--line); border-radius: 12px; padding: 16px 18px; background: var(--card); }
.issues h4 { font: 700 12.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.issues ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15.5px; }
.issues li { margin-bottom: 4px; }
.bread { margin-top: 22px; max-width: 360px; }
.bread img { border-radius: 12px; }

/* contact */
.contact { background: var(--ink); color: var(--paper); text-align: left; }
.contact h2 { font-size: clamp(34px, 5vw, 56px); color: var(--paper); max-width: 860px; margin-bottom: 18px; }
.contact p { color: #d9d0c3; max-width: 680px; font-size: 18px; }
.contact .cta .btn { border-color: var(--paper); color: var(--paper); }
.contact .cta .btn:hover { background: var(--paper); color: var(--ink); }
.contact .cta .btn.solid { background: var(--paper); color: var(--ink); }
.contact .cta .btn.solid:hover { background: var(--gold); border-color: var(--gold); }
.foot { background: var(--ink); color: #9d9489; font-size: 13.5px; padding: 0 0 36px; }
.foot .wrap { border-top: 1px solid #3a342e; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* lightbox */
.lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
.lb::backdrop { background: rgba(16, 13, 20, 0.88); }
.lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb img { max-width: 94vw; max-height: 84vh; width: auto; height: auto; border-radius: 10px; }
.lb figcaption { color: #eee6da; font-size: 14px; max-width: 760px; text-align: center; padding: 0 12px; }
.lb button { position: fixed; top: 14px; right: 16px; background: #fbf7f0; color: #1c1916; border: 0; border-radius: 999px; width: 42px; height: 42px; font-size: 22px; line-height: 42px; cursor: pointer; }

/* responsive */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  section { padding: 64px 0; }
  .hero { padding: 36px 0 24px; }
  .hero .wrap, .case-body, .case-body.flip, .demo-grid, .ws-panel, .about .wrap, .ai-foot, .coverage { grid-template-columns: 1fr; gap: 32px; }
  .case-body.flip > .case-text { order: 0; }
  .ws-panel > div:first-child { position: static; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(4n) { border-right: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .portrait { max-width: 320px; }
  .case { padding: 56px 0; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 16px; }
  .nav .wrap { height: 54px; }
  .nav ul { gap: 14px; }
  .nav .hide-sm { display: none; }
  .brand { font-size: 17px; }
  .nav a.link { font-size: 14px; }
  .nav a.pill { padding: 6px 12px; }
  .steps, .pipeline, .principles, .cards, .rules { grid-template-columns: 1fr; }
  .stat { padding: 18px 16px; }
  .stat span { font-size: 14px; }
  .media.three { grid-template-columns: 1fr 1fr; }
  .frames { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .frames figcaption { font-size: 12px; }
  .script { padding: 22px 18px; }
  .scene { padding: 20px 18px 16px; }
  .phone { max-width: 240px; }
}
@media (max-width: 380px) {
  .nav .hide-xs { display: none; }
}

/* reality stars road */
.road { list-style: none; margin: 0 0 1em; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: grid; gap: 12px; }
.road li { position: relative; color: var(--ink-2); font-size: 16px; }
.road li::before { content: ""; position: absolute; left: -25px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.road li:last-child::before { background: var(--accent); }
.road b { color: var(--ink); }

/* kiss list loop + micro-games */
.loop9 { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: loop; display: grid; gap: 6px; }
.loop9 li { counter-increment: loop; position: relative; font-size: 15px; line-height: 1.5; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px 9px 42px; }
.loop9 li::before { content: counter(loop); position: absolute; left: 14px; top: 8px; font-family: var(--display); font-weight: 400; color: var(--accent); font-size: 19px; }
.loop9 b { color: var(--ink); }
.k { font-style: normal; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--ink); color: var(--paper); margin-left: 4px; vertical-align: 1px; }
.k.prem { background: var(--accent); color: #fff; }
.games { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.games video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-2); display: block; }
.games figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.35; }
@media (max-width: 860px) {
  .demo-grid { grid-template-columns: 1fr; }
  .balcony { max-width: 320px; }
  .after { margin-top: 0; }
}
@media (max-width: 640px) {
  .games { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 861px) {
  .case-body > .media { position: sticky; top: 84px; }
}

/* screenplay sample: real script-page layout, so the TV sample reads as a TV script */
.screenplay { font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 14.5px; line-height: 1.42; color: #1c1916; background: #fff; }
.screenplay p { margin: 0; }
.screenplay .sp-center { text-align: center; text-decoration: underline; margin-bottom: 16px; }
.screenplay .sp-fade { margin-bottom: 14px; }
.screenplay .sp-scene { font-weight: 700; margin: 18px 0 12px; }
.screenplay .sp-action { margin-bottom: 14px; }
.screenplay .sp-char { margin: 14px 0 0 36%; }
.screenplay .sp-paren { margin-left: 28%; }
.screenplay .sp-dia { margin: 0 12% 0 18%; }
.screenplay .sp-dia + .sp-action { margin-top: 14px; }
.screenplay .sp-trans { text-align: right; margin: 16px 0 12px; }
.screenplay .sp-end { text-align: center; font-weight: 700; text-decoration: underline; }
@media (max-width: 640px) {
  .screenplay { font-size: 13px; }
  .screenplay .sp-char { margin-left: 24%; }
  .screenplay .sp-paren { margin-left: 16%; }
  .screenplay .sp-dia { margin: 0 2% 0 9%; }
}

/* development slate */
.dev { margin-top: 36px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.dev-head { max-width: 760px; margin-bottom: 22px; }
.dev-head h3 { font-size: clamp(26px, 3vw, 32px); margin: 8px 0 10px; }
.dev-head p { color: var(--ink-2); margin: 0; }
.dev-body { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.slate { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.slate li { display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.slate li:last-child { border-bottom: 0; padding-bottom: 0; }
.slate b { font-family: var(--sans); font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.slate .st { font: 600 12px/1.4 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.slate .lg { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.unsold { margin: 24px 0 0; padding-top: 18px; border-top: 1px dashed var(--line); color: var(--ink-2); font-size: 15.5px; }
.unsold b { color: var(--ink); }
.yt-facade { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; padding: 20px 22px; cursor: pointer; text-align: left; color: #fff; font: inherit; background: radial-gradient(120% 95% at 18% 8%, #ff9cc2 0%, #c04f9d 40%, #3d1e66 100%); }
.yt-facade .yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); width: 76px; height: 54px; border-radius: 15px; background: rgba(20, 10, 30, .55); display: grid; place-items: center; font-size: 22px; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { background: #e62117; }
.yt-title { font-family: var(--sans); font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
.yt-sub { font-size: 14.5px; opacity: .92; margin-top: 4px; }
.yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.songs { display: grid; gap: 6px; margin-top: 10px; }
.song { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.song:hover { border-color: var(--ink-3); }
.song i { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); }
.song i::before { content: ""; position: absolute; left: 12px; top: 9px; border-left: 9px solid var(--paper); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.song[aria-pressed="true"] i { background: var(--accent); }
.song[aria-pressed="true"] i::before { left: 10px; top: 9px; width: 3px; height: 12px; border: 0; background: #fff; box-shadow: 7px 0 0 #fff; }
.song-t { font-weight: 600; font-size: 15px; line-height: 1.3; }
.song-t small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); }
.song-d { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.songs-note { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 860px) {
  .dev { padding: 20px; }
  .dev-body { grid-template-columns: 1fr; }
}

@media (min-width: 861px) {
  .dev-body > figure { position: sticky; top: 84px; }
}

.viral { margin: 12px 0 0; color: var(--ink-2); font-size: 15.5px; }
.viral b { color: var(--ink); }

.play { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.play span { font: 700 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.btn.small { padding: 9px 15px; font-size: 14px; }

/* ===== Direction A (Your Story), with Prime Time accents ===== */
:root {
  --stage: #120d1c;
  --stage-ink: #f4eefc;
  --stage-ink-2: #cfc3e6;
  --hot: #ff3d8b;
  --hot-2: #ff72aa;
  --gilt: #ffcf5a;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
}
.nav { background: rgba(18, 13, 28, 0.9); border-bottom-color: rgba(255, 255, 255, 0.08); }
.brand { color: var(--stage-ink); font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 21px; }
.nav a.link { color: var(--stage-ink-2); }
.nav a.link:hover { color: #fff; }
.nav a.pill { background: var(--hot); color: #fff; }
.nav a.pill:hover { background: var(--hot-2); color: #fff; }
.nav :focus-visible { outline-color: var(--gilt); }
.path-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 14px; white-space: nowrap; }
.path-chip b { color: var(--hot-2); font-weight: 600; }
.path-chip[hidden] { display: none; }

.hero.stage { position: relative; isolation: isolate; overflow: hidden; background: var(--stage); color: var(--stage-ink); padding: 68px 0 30px; }
.hero.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(720px 540px at 82% 30%, rgba(255, 61, 139, 0.32), transparent 70%),
  radial-gradient(620px 520px at 4% 100%, rgba(150, 40, 140, 0.32), transparent 70%),
  radial-gradient(900px 520px at 40% -12%, rgba(255, 190, 120, 0.1), transparent 70%); }
.hero.stage .wrap { display: block; }
.hero.stage .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.hero.stage .eyebrow { color: var(--hot-2); letter-spacing: 0.2em; }
/* the name is the show's title card: condensed caps, with the surname in the stage pink */
.hero.stage h1 { color: #fff; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(64px, 8.4vw, 124px); line-height: 0.9; letter-spacing: 0.005em; margin: 8px 0 28px; }
.hero.stage h1 .g { color: var(--hot); }
.narration { font-family: var(--sans); font-weight: 500; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -0.005em; color: #e7ddf6; max-width: 560px; margin: 0 0 30px; }
.prompt { font: 600 12.5px/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: #bfb2d9; margin: 0 0 12px; }
.choose { display: grid; gap: 10px; max-width: 520px; }
.choice { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 22px; border: 0; border-radius: 16px; background: #fff; color: #1d1428; font: 600 16.5px/1.25 var(--sans); text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.choice:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32); }
.choice .arw { opacity: 0.45; }
.choice[aria-pressed="true"] { background: linear-gradient(90deg, var(--hot), var(--hot-2)); color: #fff; box-shadow: 0 0 0 3px rgba(255, 140, 192, 0.35), 0 12px 40px rgba(255, 61, 139, 0.45); }
.choice[aria-pressed="true"] .arw { opacity: 1; }
.choice.gem { background: rgba(255, 255, 255, 0.07); color: #fff; border: 1px solid rgba(255, 214, 120, 0.6); box-shadow: none; }
.choice.gem:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.gemicon { color: var(--gilt); margin-right: 8px; }
.hero.stage :focus-visible { outline-color: var(--gilt); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
.hero-card { margin: 0; }
.hero-card .frame { position: relative; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.hero-card .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 13, 28, 0) 45%, rgba(18, 13, 28, 0.9)); pointer-events: none; }
.hero-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.bubble { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; margin: 0; background: #fff; color: #1d1428; border-radius: 20px; padding: 24px 22px 18px; font-size: 17.5px; line-height: 1.42; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); }
.bubble .who { position: absolute; top: -13px; left: 18px; background: var(--hot); color: #fff; font: 700 11.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.hero-card figcaption { margin-top: 12px; font-size: 14px; color: var(--stage-ink-2); }

/* the ratings ticker (Prime Time) */
.ticker { background: #000; overflow: hidden; }
.ticker-track { display: flex; align-items: center; gap: 22px; width: max-content; padding: 15px 0 15px 24px; color: var(--gilt); font: 400 17px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; animation: tick 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track i { color: var(--hot); font-style: normal; font-size: 11px; }
.ticker-track .lab { background: var(--gilt); color: #000; padding: 5px 9px; font-size: 13px; letter-spacing: 0.14em; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; row-gap: 12px; padding: 15px 24px; }
}

/* point of view sits right under the hero now */
#pov { padding-top: 76px; }
#pov .section-head { max-width: 820px; }
#pov h2 { font-size: clamp(38px, 5.2vw, 60px); letter-spacing: -0.02em; }

/* three stats instead of eight */
.proof { padding-top: 8px; }
.stats { grid-template-columns: repeat(3, 1fr); }
.stats .stat { border-right: 1px solid var(--line); border-bottom: 0; }
.stats .stat:last-child { border-right: 0; }

/* "My role" as a broadcast lower third */
.role { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 0 14px 0 0; border: 0; border-radius: 0; background: #fff; color: var(--ink); box-shadow: 0 10px 26px -14px rgba(40, 10, 40, 0.45); font-size: 14.5px; line-height: 1.45; }
.role b { align-self: stretch; display: inline-flex; align-items: center; background: var(--hot); color: #fff; font: 400 14px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 12px; }

/* LIVE badge for VMS Live! */
.live-bug { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 4px 9px; border-radius: 4px; background: #e8173f; color: #fff; font: 700 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 0.2em; }
.live-bug::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

/* Tom's quote as a confessional */
.quote.confessional { position: relative; margin: 28px 0 0; padding: 22px 24px 20px; border: 0; border-radius: 4px; background: var(--stage); color: var(--stage-ink); box-shadow: 0 20px 50px -24px rgba(18, 13, 28, 0.6); }
.quote.confessional::before { content: "Confessional"; display: block; margin-bottom: 12px; font: 700 11.5px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gilt); }
.quote.confessional::after { content: "● REC"; position: absolute; top: 22px; right: 24px; font: 700 11.5px/1 var(--sans); letter-spacing: 0.14em; color: #ff4d6d; }
.quote.confessional .big { color: #fff; font-size: clamp(18px, 2vw, 21px); margin-bottom: 12px; }
.quote.confessional figcaption { color: var(--stage-ink-2); }
.quote.confessional figcaption b { color: #fff; }

/* the AI walkthrough opens fully on the AI path and stays collapsed on the others */
.walkthrough { margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px; }
.walkthrough > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; font: 600 17px/1.35 var(--sans); color: var(--gilt); }
.walkthrough > summary::-webkit-details-marker { display: none; }
.walkthrough > summary::before { content: "▸"; display: inline-block; transition: transform 0.15s ease; }
.walkthrough[open] > summary { margin-bottom: 22px; }
.walkthrough[open] > summary::before { transform: rotate(90deg); }
.walkthrough > summary span { color: var(--night-ink-2); font-weight: 400; font-size: 15px; }

@media (max-width: 860px) {
  .hero.stage { padding-top: 44px; }
  .hero.stage .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-card { max-width: 460px; }
  .choose { max-width: none; }
  .stats { grid-template-columns: 1fr; }
  .stats .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats .stat:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .bubble { left: 14px; right: 14px; bottom: 14px; padding: 20px 16px 14px; font-size: 15.5px; }
  .ticker-track { font-size: 15px; gap: 18px; }
  .role { padding-right: 10px; }
}

/* the pipeline results box sits on the dark AI section */
.ai .ai-result { background: rgba(255, 207, 90, 0.1); border: 1px solid rgba(255, 207, 90, 0.35); color: var(--night-ink); }
.ai .ai-result b { color: var(--gilt); }

/* hero scene: Katina on her own party set, speaking straight into the choice */
.hero.stage .hero-grid { grid-template-areas: "intro art" "choose art"; row-gap: 0; align-items: start; }
.hero-intro { grid-area: intro; align-self: end; }
.hero-choose { grid-area: choose; }
.hero-card.moment { grid-area: art; align-self: center; }
.hero-card.moment .frame { aspect-ratio: 4 / 5; background: #1a1026; }
.hero-card.moment img { aspect-ratio: auto; }
.hero-card.moment .set { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
.hero-card.moment .katina { position: absolute; left: 50%; bottom: 0; z-index: 1; width: auto; height: 94%; transform: translateX(-50%); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.hero-card.moment .bubble { z-index: 2; }
@media (max-width: 860px) {
  .hero.stage .hero-grid { grid-template-areas: "intro" "art" "choose"; row-gap: 24px; }
  .hero-card.moment { max-width: 460px; }
  .hero-card.moment .frame { aspect-ratio: 1 / 1; }
  .hero-card.moment .katina { height: 97%; }
  .hero-card.moment figcaption { display: none; }
  .hero-intro .narration { margin-bottom: 0; }
}

/* Katina faces the copy (the art faces screen-right, so it's mirrored) and is framed thighs-up, closer to her line. */
.hero-card.moment .katina { height: 150%; bottom: -52%; left: 55%; transform: translateX(-50%) scaleX(-1); }
@media (max-width: 860px) {
  /* Phones: a short close-up strip with her line above her, so the choices stay above the fold. */
  .hero.stage { padding: 18px 0 22px; }
  .hero.stage .hero-grid { row-gap: 14px; }
  .hero.stage .eyebrow { margin-bottom: 8px; }
  .hero.stage h1 { font-size: clamp(34px, 12.6vw, 64px); margin: 0 0 12px; }
  .narration { font-size: 16px; line-height: 1.5; }
  .hero-card.moment { max-width: none; }
  .hero-card.moment .frame { aspect-ratio: auto; height: 196px; border-radius: 22px; }
  .hero-card.moment .set { object-position: 30% 38%; }
  .hero-card.moment .katina { height: 300%; top: 24%; bottom: auto; left: 76%; }
  .hero-card.moment .bubble { top: 14px; bottom: auto; left: 14px; right: 34%; padding: 18px 14px 12px; font-size: 14.5px; line-height: 1.38; border-radius: 16px; }
  .hero-card.moment .bubble::after { content: ""; position: absolute; right: -9px; bottom: 16px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
  .hero-card.moment .bubble .who { top: -11px; left: 12px; padding: 5px 10px; font-size: 10.5px; }
  .prompt { margin-bottom: 8px; }
  .choose { gap: 8px; }
  .choice { padding: 12px 18px; font-size: 16px; }
  .track { margin-top: 22px; }
}

/* one image per state now (set and Katina baked together, eyes to camera); phones crop into her head and shoulders */
.hero-card.moment .scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .hero-card.moment .scene-img { inset: auto; max-width: none; width: 170%; height: auto; left: -12%; top: -12%; object-fit: fill; }
}
@media (max-width: 860px) {
  .hero-card.moment .scene-img { width: 140%; left: -3%; top: -5%; }
  .hero-card.moment .bubble { right: 40%; }
}
@media (max-width: 860px) {
  /* A fixed shape, not a fixed height: the crop is sized by width, so the frame must scale with it or her face slides out of frame on wider phones. */
  .hero-card.moment .frame { height: auto; aspect-ratio: 11 / 6; }
}
/* Laptop-height screens: the card gives up some of its lower half (her face stays put) so Katina, her line and the branch
   track all fit on screen together after a choice. */
@media (min-width: 861px) {
  .hero-card.moment .frame { max-height: max(400px, calc(100vh - 330px)); }
  .hero-card.moment .scene-img { object-position: 50% 10%; }
}
.btn.copy { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }

/* The premium choice, Episode-style: gold, a slow glow pulse, and a glint that sweeps across with a sparkle. */
.choice.gem { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 240, 190, 0.9); background: linear-gradient(100deg, #f5b82e 0%, #ffe07a 45%, #f7c948 62%, #e9a21c 100%); color: #3d2600; animation: gem-pulse 2.6s ease-in-out infinite; }
.choice.gem:hover { background: linear-gradient(100deg, #f8c23e 0%, #fff0a8 45%, #fad461 62%, #eeae2a 100%); color: #3d2600; }
.choice.gem:focus-visible { outline-color: #fff; }
.choice.gem .gemicon { color: #c2187a; font-size: 17px; text-shadow: 0 0 6px rgba(255, 255, 255, 0.9); }
.choice.gem .arw { opacity: 0.75; }
/* the glint sits between the gold and the label (negative z-index inside the button's own stacking context) */
.choice.gem::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -45%; width: 34%; z-index: -1; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); animation: gem-shine 3.4s ease-in-out infinite; }
.choice.gem::before { content: "✦"; position: absolute; top: 5px; right: 46px; font-size: 12px; line-height: 1; color: #fff; text-shadow: 0 0 6px #fff, 0 0 12px rgba(255, 240, 190, 0.9); opacity: 0; pointer-events: none; animation: gem-twinkle 3.4s ease-in-out infinite; }
@keyframes gem-shine { 0% { left: -45%; } 55%, 100% { left: 135%; } }
@keyframes gem-twinkle { 0%, 38% { opacity: 0; transform: scale(0.3) rotate(0deg); } 48% { opacity: 1; transform: scale(1.1) rotate(45deg); } 60%, 100% { opacity: 0; transform: scale(0.3) rotate(90deg); } }
@keyframes gem-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 207, 90, 0.2), 0 10px 30px rgba(255, 184, 46, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(255, 207, 90, 0.34), 0 14px 44px rgba(255, 184, 46, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .choice.gem, .choice.gem::before { animation: none; }
  .choice.gem::after { display: none; }
}

/* ===== The stage, site-wide: every section lives on the hero's set ===== */
:root {
  color-scheme: dark;
  --paper: #120d1c;
  --paper-2: #1a1326;
  --card: rgba(255, 255, 255, 0.045);
  --ink: #f4eefc;
  --ink-2: #cfc3e6;
  --ink-3: #a597c2;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #ff72aa;
  --accent-soft: rgba(255, 61, 139, 0.14);
  --night: #0c0814;
  --night-2: #1a1326;
  --night-ink: #f4eefc;
  --night-ink-2: #cfc3e6;
  --gold: #ffcf5a;
}
::selection { background: rgba(255, 61, 139, 0.45); color: #fff; }
.skip { color: #1d1428; }

/* section lighting: alternating spotlights so the long read doesn't go flat */
section { position: relative; }
.how { background: radial-gradient(900px 520px at 0% 0%, rgba(255, 61, 139, 0.12), transparent 70%), var(--paper-2); }
.path { background: radial-gradient(800px 500px at 100% 10%, rgba(150, 40, 140, 0.14), transparent 70%); }
.work { background: radial-gradient(900px 600px at 0% 20%, rgba(255, 61, 139, 0.08), transparent 70%), radial-gradient(900px 600px at 100% 80%, rgba(150, 40, 140, 0.1), transparent 70%); }
.ai { background: radial-gradient(900px 560px at 100% 0%, rgba(255, 207, 90, 0.1), transparent 70%), var(--night); }
.writing { background: radial-gradient(900px 560px at 0% 0%, rgba(150, 40, 140, 0.14), transparent 70%), var(--paper-2); }
.more { background: radial-gradient(900px 560px at 100% 20%, rgba(255, 61, 139, 0.1), transparent 70%); }
.about { background: radial-gradient(800px 500px at 0% 100%, rgba(255, 207, 90, 0.08), transparent 70%), var(--paper-2); }
.contact { background: radial-gradient(760px 520px at 85% 20%, rgba(255, 61, 139, 0.3), transparent 70%), radial-gradient(640px 520px at 0% 100%, rgba(150, 40, 140, 0.3), transparent 70%), var(--night); color: var(--ink); }
.contact h2 { color: #fff; }
.contact p { color: var(--ink-2); }
.contact .cta .btn { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.contact .cta .btn:hover { background: #fff; color: #1d1428; }
.contact .cta .btn.solid { background: var(--hot); border-color: var(--hot); color: #fff; }
.contact .cta .btn.solid:hover { background: var(--gilt); border-color: var(--gilt); color: #2a1a00; }
.foot { background: var(--night); color: var(--ink-3); }
.foot .wrap { border-top-color: var(--line); }

/* headings and numbers get the stage treatment */
.section-head h2, .case-head h3, .about h2 { color: #fff; }
.stats { background: rgba(255, 255, 255, 0.035); }
.stat b { color: var(--gilt); }
.step .num { font: 400 20px/1 var(--display); letter-spacing: 0.04em; color: var(--hot-2); }
.result { background: rgba(255, 207, 90, 0.08); border: 1px solid rgba(255, 207, 90, 0.32); color: var(--ink); }
.result b { color: var(--gilt); }
.role { color: #1d1428; }
.quote.confessional { background: #1c1429; border: 1px solid rgba(255, 255, 255, 0.1); }

/* tags and chips */
.tag { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tag.mine { background: var(--hot); color: #fff; }
.tag.live { background: #1f9d6a; color: #fff; }
.k { background: rgba(255, 255, 255, 0.16); color: #fff; }
.k.prem { background: linear-gradient(100deg, #f5b82e, #ffe07a 50%, #e9a21c); color: #3d2600; }
.tiers li:nth-child(1) { color: #f1c56d; }
.tiers li:nth-child(2) { color: #ff7d98; }
.tiers li:nth-child(3) { color: #5fd39c; }
.tiers li:nth-child(4) { color: #9dbcff; }

/* in-sample choices look like the hero's: white pills, and gold for premium */
.choices span { background: #fff; color: #1d1428; border-color: transparent; }
.choices span.prem { background: linear-gradient(100deg, #f5b82e, #ffe07a 50%, #e9a21c); color: #3d2600; border-color: rgba(255, 240, 190, 0.9); }
.scene { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--ink); }

/* media and cards sit on the stage with a little glow */
.shot img, .shot video, .portrait img, .bread img { box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.7); }
.script:not(.screenplay) { background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.screenplay { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.section-head .eyebrow { color: var(--hot-2); }
.ai .section-head .eyebrow { color: var(--gilt); }

/* The branch track: read-only, drawn after a choice. "You chose" heads it; Chapter 1 forks three ways, one prong per
   choice, and the chosen prong lights up and runs along a pink line through that path's chapters. Phones get it standing up. */
.track[hidden] { display: none; }
.track { display: block; margin-top: 30px; }
.track-head { margin: 0 0 12px; font: 600 12px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stage-ink-2); }
.track-head b { display: inline-block; margin-left: 6px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hot-2); }
.track-toc { display: flex; align-items: center; padding: 12px 0; }
.track-root, .track-stop { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #221a33; border: 1px solid rgba(255, 61, 139, 0.45); color: var(--stage-ink); font-size: 13.5px; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.track-root b, .track-stop b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 61, 139, 0.18); color: var(--hot-2); font-size: 12px; font-weight: 700; }
.track-root b { background: var(--hot); color: #fff; }
.track-stop:hover { background: #2e2345; border-color: var(--hot); }
/* one continuous line behind the chapters, so they read as beads on a string when they slide */
.track-list { position: relative; display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; background: linear-gradient(var(--hot), var(--hot)) 0 50% / 100% 2px no-repeat; transition: transform 0.6s cubic-bezier(0.6, 0, 0.25, 1); }
.track[data-lane="0"] .track-list { transform: translateY(-20px); }
.track[data-lane="2"] .track-list { transform: translateY(20px); }
.track-list li { position: relative; }
.track-list .track-ghost { position: absolute; pointer-events: none; }
.track-fork { display: block; flex: none; overflow: visible; }
.track-fork path { fill: none; stroke-width: 2; stroke-linecap: round; }
.track-fork .base { stroke-dasharray: 3 4; transition: opacity 0.3s; }
.track[data-lane="0"] .base.b0, .track[data-lane="1"] .base.b1, .track[data-lane="2"] .base.b2 { opacity: 0; }
.track-fork.h .base { stroke: url(#tf-h); }
.track-fork.v .base { stroke: url(#tf-v); }
.track-fork .lit { stroke: var(--hot); stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 0.35s ease-in; }
.track[data-lane="0"] .lit.l0, .track[data-lane="1"] .lit.l1, .track[data-lane="2"] .lit.l2 { stroke-dashoffset: 0; transition: stroke-dashoffset 0.55s 0.2s ease-out; }
.track-fork.v { display: none; }
@media (max-width: 900px) {
  .track-toc { flex-direction: column; align-items: flex-start; padding: 0; }
  .track[data-lane="0"] .track-list { transform: translateX(-20px); }
  .track[data-lane="2"] .track-list { transform: translateX(20px); }
  .track-fork.h { display: none; }
  .track-fork.v { display: block; margin: -4px 0; }
  .track-list { flex-direction: column; align-items: flex-start; gap: 4px; background-position: 31px 0; background-size: 2px calc(100% - 16px); }
  .track-root, .track-stop { gap: 12px; padding: 4px 8px 4px 20px; background: none; border: 0; font-size: 15px; }
  .track-root b, .track-stop b { width: 24px; height: 24px; background: #221a33; border: 2px solid var(--hot); }
  .track-root b { background: var(--hot); }
  .track-stop:hover { background: none; text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) { .track-fork .lit, .track[data-lane] .lit, .track-fork .base, .track-list { transition: none; } }

/* The story line: on wide screens a line runs down the margin with a node at every section; pink once a branch is chosen. */
@media (min-width: 1240px) {
  html[data-path] main > section:not(.hero)::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 600px); border-left: 2px solid rgba(255, 61, 139, 0.7); pointer-events: none; }
  .section-head, .case-head, .the-end { position: relative; }
  html[data-path] .section-head::before, html[data-path] .case-head::before, html[data-path] .the-end::before { content: ""; position: absolute; left: -69px; top: 3px; width: 12px; height: 12px; border-radius: 50%; }
  .the-end::before { top: 50%; margin-top: -6px; }
  html[data-path] .section-head::before, html[data-path] .case-head::before, html[data-path] .the-end::before { background: var(--hot); border-color: var(--hot); box-shadow: 0 0 0 4px rgba(255, 61, 139, 0.2); }
}

/* The end, and a way back to Chapter 1 */
.the-end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.the-end-label { margin: 0; font: 600 21px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink-2); }
.replay { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); color: #fff; font: 600 15.5px/1 var(--sans); cursor: pointer; }
.replay span { font-size: 18px; color: var(--hot-2); transition: transform 0.45s ease; }
.replay:hover { background: rgba(255, 255, 255, 0.12); }
.replay:hover span { transform: rotate(-200deg); }
@media (prefers-reduced-motion: reduce) { .replay span { transition: none; } }

/* Decision stories: the obvious move, dimmed like an unpicked choice, and the call I made, lit like the hero's picked one. */
.call { margin: 26px 0; padding: 18px 20px 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); }
.call p.call-label { margin: 0 0 12px; font: 600 12px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hot-2); }
.call .call-label b { margin-left: 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.call .call-opt { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; font: 600 15.5px/1.35 var(--sans); }
.call .call-opt + .call-opt { margin-top: 8px; }
.call-k { flex: none; width: auto; min-width: 108px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; opacity: 0.8; }
.call .call-opt.road { background: rgba(255, 255, 255, 0.07); color: var(--stage-ink-2); }
.call .call-opt.took { background: linear-gradient(90deg, var(--hot), #ff72aa); color: #fff; box-shadow: 0 10px 30px -12px rgba(255, 61, 139, 0.7); }
.call .call-opt > span:nth-child(2) { flex: 1; min-width: 0; }
.call .call-opt .arw { margin-left: auto; padding-left: 8px; }
.call .call-why { margin: 14px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 640px) {
  .call { padding: 16px; }
  .call .call-opt { flex-wrap: wrap; gap: 2px 10px; padding: 10px 14px; font-size: 15px; }
  .call-k { width: 100%; }
}

/* The bakery demo: three statics, then the scene itself, bigger so it can be watched in place. */
.coverage.scene-demo { grid-template-columns: 1fr; gap: 22px; }
.coverage.scene-demo > div:first-child { max-width: 760px; }
.frames.four { grid-template-columns: repeat(3, 1fr) 1.35fr; align-items: start; }
.frames .scene-clip video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; }
@media (max-width: 640px) {
  .frames.four { grid-template-columns: repeat(3, 1fr); }
  .frames .scene-clip { grid-column: 1 / -1; }
}

/* Model tag under each walkthrough step */
.pipeline .model { margin: -4px 0 0; font: 600 12.5px/1.4 var(--sans); letter-spacing: 0.02em; color: var(--gilt); }
/* Career path: the people line */
.step .people { margin-top: 10px; }
/* Development slate: loglines tucked behind a toggle */
.loglines { margin-top: 14px; }
.loglines > summary { cursor: pointer; list-style: none; display: inline-flex; gap: 8px; align-items: baseline; font: 600 12px/1.4 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.loglines > summary::-webkit-details-marker { display: none; }
.loglines > summary::before { content: "▸"; display: inline-block; transition: transform 0.15s ease; }
.loglines[open] > summary::before { transform: rotate(90deg); }
.loglines dl { margin: 12px 0 0; display: grid; gap: 10px; }
.loglines dt { font-weight: 800; font-size: 15.5px; }
.loglines dd { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
/* Kathryn's quote closes the career path; keep it to reading width */
.path .quote.confessional { max-width: 760px; margin-top: 34px; }

/* Malcolm's text thread reads as a phone conversation: his texts on the left, yours on the right */
.script.texts { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
.script.texts .text { margin: 0; max-width: 80%; padding: 9px 14px; border-radius: 18px; font-size: 15.5px; line-height: 1.4; }
.script.texts .text.them { align-self: flex-start; background: rgba(255, 255, 255, 0.11); color: var(--ink); border-bottom-left-radius: 6px; }
.script.texts .text.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.script.texts .setup { margin: 0 0 8px; }
.script.texts .choices { margin: 10px 0; }
.script.texts .branch { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.script.texts .branch h4 { margin-bottom: 4px; }
/* Premium choices carry the in-game gem */
.choices .gem { font-style: normal; margin-right: 7px; }

/* What he's done, on the first screen, without waiting for a click */
.hero-intro .creds { margin: -4px 0 18px; font: 600 15px/1.45 var(--sans); color: rgba(255, 255, 255, 0.78); max-width: 560px; }
/* Results sit directly under the role line so a skimmer gets the numbers first */
.case-head .result { margin: 14px 0 0; }
.section-head .ai-result { margin: 18px 0; }
/* Development block: the sales list stays visible; reels, songs, loglines and viral work sit behind the toggle. */
.dev-body { grid-template-columns: 1fr; gap: 0; }
.dev-body .slate { max-width: 760px; }
.dev-body .loglines { margin-top: 20px; }
.loglines .yt { margin: 14px 0 0; max-width: 640px; }
.loglines .songs-label { margin: 18px 0 0; font-size: 15px; color: var(--ink-2); }
.loglines .songs { max-width: 640px; }
.loglines dl { margin-top: 18px; }
.loglines .viral { margin-top: 18px; }

/* ===== Broadcast package: the site styled as the on-air graphics for a show called "Arthur Gradstein", taken from Reality
   Stars' own HUD (Katina's slanted name plate, the PR Showdown score bars, the gold ratings label). Two worlds on purpose:
   square, flat broadcast graphics frame everything; rounded game UI appears only for choices and dialogue. ===== */
:root {
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --stage: #0f0e11;
  --paper: #0f0e11;
  --paper-2: #141317;
  --night: #0b0a0d;
  --night-2: #17151a;
  --card: #17151a;
  --ink: #f2f0ec;
  --ink-2: #b5b0a8;
  --ink-3: #8f8980;
  --stage-ink: #f2f0ec;
  --stage-ink-2: #b5b0a8;
  --night-ink: #f2f0ec;
  --night-ink-2: #b5b0a8;
  --line: #2a272e;
  --hot: #ff3d8b;
  --hot-2: #ff72aa;
  --accent: #ff72aa;
  --accent-soft: rgba(255, 61, 139, 0.14);
  --gilt: #ffcf5a;
  --gold: #ffcf5a;
  --rec: #ff3b3b;
  --plate-ink: #140d12;
  --bar: #f6f3ee;
  --bar-ink: #1d1a21;
  --radius: 2px;
  --r-game: 16px;
}
body { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { font-stretch: 85%; }
::selection { background: var(--hot); color: var(--plate-ink); }

/* one soft key light behind Katina; every other glow and gradient fill is gone */
.hero.stage::before { background: radial-gradient(560px 520px at 78% 40%, rgba(255, 61, 139, 0.16), transparent 70%); }
.how, .writing, .about { background: var(--paper-2); }
.path, .work, .more { background: var(--paper); }
.ai, .contact, .foot { background: var(--night); }
.nav { background: rgba(15, 14, 17, 0.94); border-bottom-color: var(--line); }
.narration { color: #e6e1da; }
.prompt { color: var(--ink-2); }
.hero-intro .creds { font-size: 17px; color: var(--ink); }

/* labels: one condensed-caps voice instead of eight letter-spacings */
.eyebrow, .prompt, .track-head, .call-k, .line .who, .branch h4, .plan span, .issues h4, .credits h4, .tag, .live-bug { letter-spacing: 0.08em; font-stretch: 75%; }

/* section labels are lower thirds: a slanted pink plate with dark type (gold for the AI and contact chapters) */
.section-head .eyebrow, .hero.stage .eyebrow, .about .eyebrow, .contact .eyebrow { display: inline-block; margin: 0 0 18px; padding: 8px 22px 8px 12px; background: var(--hot); color: var(--plate-ink); font: 600 13px/1 var(--sans); font-stretch: 75%; letter-spacing: 0.1em; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.ai .section-head .eyebrow, .contact .eyebrow { background: var(--gilt); color: var(--plate-ink); }
.case-head .eyebrow, .card .eyebrow { color: var(--hot-2); }

/* the title card: GRADSTEIN on a slanted plate, like Katina's name card in the launch trailer */
.hero.stage h1 .g { display: inline-block; margin-top: 0.08em; padding: 0.07em 0.26em 0.01em 0.1em; background: var(--hot); color: var(--plate-ink); clip-path: polygon(0 0, 100% 0, calc(100% - 0.2em) 100%, 0 100%); }
.bubble .who { border-radius: 0; padding: 7px 18px 7px 10px; background: var(--hot); color: var(--plate-ink); font: 400 13px/1 var(--display); letter-spacing: 0.1em; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.hero-card .frame, .hero-card.moment .frame { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--line); }

/* game UI stays rounded: Episode-style choices, centered, and the picked one turns flat pink */
.choice { justify-content: center; text-align: center; box-shadow: none; }
.choice:hover { transform: none; box-shadow: none; background: #ece8f0; }
.choice .arw { display: none; }
.choice[aria-pressed="true"], .choice[aria-pressed="true"]:hover { background: var(--hot); color: var(--plate-ink); box-shadow: none; }
.choice.gem, .choice.gem::before, .choice.gem::after { animation-iteration-count: 3; }

.nav a.pill { border-radius: var(--radius); background: var(--hot); color: var(--plate-ink); font-weight: 700; }
.nav a.pill:hover { background: var(--gilt); color: var(--plate-ink); }
.path-chip { border-radius: var(--radius); border-color: var(--line); background: #1a181d; }
@media (max-width: 640px) { .brand { font-size: 17px; } }

/* the ticker, with a pause button */
.ticker { position: relative; }
.ticker.paused .ticker-track { animation-play-state: paused; }
.ticker-pause { position: absolute; top: 50%; right: 10px; z-index: 1; display: grid; place-items: center; width: 30px; height: 26px; transform: translateY(-50%); padding: 0; border: 1px solid #3a3640; border-radius: var(--radius); background: #000; cursor: pointer; }
.ticker-pause span { display: block; box-sizing: border-box; width: 9px; height: 10px; border-left: 3px solid var(--gilt); border-right: 3px solid var(--gilt); }
.ticker.paused .ticker-pause span { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent var(--gilt); }
.ticker-pause:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }
.ticker-pause[hidden] { display: none; }

/* point of view: four numbered rows split by hairlines, no boxes */
#pov .rules { display: block; counter-reset: rule; border-top: 1px solid var(--line); }
#pov .rules > div { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 28px; row-gap: 6px; align-items: baseline; padding: 22px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
#pov .rules > div::before { counter-increment: rule; content: counter(rule, decimal-leading-zero); font: 400 32px/1 var(--display); color: var(--gilt); }
#pov .rules h3 { margin: 0; font-size: 23px; }
#pov .rules .proofline { font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 760px) {
  #pov .rules > div { grid-template-columns: 44px minmax(0, 1fr); }
  #pov .rules .proofline { grid-column: 2; }
}

/* career path: rows, with the years on a slanted plate (no more cards stretching to match the longest) */
.steps { display: block; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 32px; row-gap: 6px; padding: 26px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.step > .num { grid-column: 1; grid-row: 1; position: static; font: 400 34px/1 var(--display); color: var(--gilt); }
.step > .when { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; padding: 7px 18px 7px 10px; background: var(--hot); color: var(--plate-ink); font: 400 14px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.step > :not(.num):not(.when) { grid-column: 2; }
.step h3 { margin: 0 0 4px; font-size: 24px; }
.step p { max-width: 72ch; }
@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; }
  .step > .num, .step > .when, .step > :not(.num):not(.when) { grid-column: 1; grid-row: auto; }
  .step > .when { margin-bottom: 6px; }
}

/* "My role" and quote credits as lower thirds: pink plate, off-white bar */
.role { padding: 7px 14px 7px 0; background: var(--bar); color: var(--bar-ink); box-shadow: none; border-radius: 0; }
.role b { margin: -7px 0; padding: 10px 20px 10px 12px; background: var(--hot); color: var(--plate-ink); clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }

/* results as a ratings board: black band, the ticker's gold label, gold numbers */
.result, .ai .ai-result { background: #000; border: 0; border-radius: 0; padding: 14px 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }
.result b, .ai .ai-result b { color: var(--gilt); font: 400 24px/1 var(--display); letter-spacing: 0.02em; }
.result::before { content: "Ratings"; display: inline-block; margin-right: 10px; padding: 5px 9px; background: var(--gilt); color: #000; font: 400 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 3px; }
.ai .ai-result::before { content: "Dailies"; }

/* the confessional: viewfinder corners, REC in red, the quote burned in like subtitles, the credit as a lower third */
.quote.confessional { border: 0; border-radius: 0; padding: 30px 30px 26px; color: var(--ink); box-shadow: none; background:
  linear-gradient(#fff, #fff) top 12px left 12px / 18px 2px no-repeat, linear-gradient(#fff, #fff) top 12px left 12px / 2px 18px no-repeat,
  linear-gradient(#fff, #fff) top 12px right 12px / 18px 2px no-repeat, linear-gradient(#fff, #fff) top 12px right 12px / 2px 18px no-repeat,
  linear-gradient(#fff, #fff) bottom 12px left 12px / 18px 2px no-repeat, linear-gradient(#fff, #fff) bottom 12px left 12px / 2px 18px no-repeat,
  linear-gradient(#fff, #fff) bottom 12px right 12px / 18px 2px no-repeat, linear-gradient(#fff, #fff) bottom 12px right 12px / 2px 18px no-repeat,
  #1c1a20; }
.quote.confessional::before { color: var(--ink-2); }
.quote.confessional::after { top: 30px; right: 32px; color: var(--rec); }
.quote.confessional blockquote { margin: 0 0 16px; }
.quote.confessional .big { display: inline; margin: 0; padding: 3px 8px; background: #000; color: #fff; font: 600 clamp(17px, 1.8vw, 20px)/1.9 var(--sans); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.quote.confessional figcaption { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 6px 12px 6px 0; background: var(--bar); color: var(--bar-ink); font-size: 14px; line-height: 1.4; }
.quote.confessional figcaption b { align-self: stretch; display: inline-flex; align-items: center; margin: -6px 0; padding: 6px 18px 6px 10px; background: var(--hot); color: var(--plate-ink); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* the call: a lower-third header, then the two options as Episode choice bubbles (the road not taken struck through) */
.call { margin: 30px 0; padding: 0; border: 0; border-radius: 0; background: none; }
.call p.call-label { display: inline-flex; align-items: center; margin: 0 0 14px; padding: 0 0 0 12px; background: var(--hot); color: var(--plate-ink); font: 600 12.5px/1 var(--sans); font-stretch: 75%; letter-spacing: 0.1em; text-transform: uppercase; }
.call .call-label b { margin-left: 12px; padding: 9px 16px 9px 20px; background: var(--bar); color: var(--bar-ink); font: 700 15px/1 var(--sans); font-stretch: 85%; letter-spacing: 0; text-transform: none; clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%); }
.call .call-opt { border-radius: var(--r-game); }
.call .call-opt.road { background: rgba(255, 255, 255, 0.06); color: var(--ink-3); }
.call .call-opt.road > span:nth-child(2) { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(242, 240, 236, 0.4); }
.call .call-opt.took { background: var(--hot); color: var(--plate-ink); box-shadow: none; }
.call .call-opt.took::after { content: "✓"; margin-left: auto; padding-left: 10px; font-weight: 800; font-size: 17px; }
.call .call-k { opacity: 0.85; }
.call .call-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 14px 0 0; padding: 12px 14px; background: #000; color: var(--ink-2); font: 600 14.5px/1.35 var(--sans); }
.call .call-result::before { content: "Result"; align-self: center; padding: 5px 8px; background: var(--gilt); color: #000; font: 400 12px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.call .call-result b { color: var(--gilt); font: 400 24px/1 var(--display); letter-spacing: 0.02em; }
.call .call-result i { color: var(--hot-2); font-style: normal; }

/* credit tags sit on the image corner, like a network bug */
.shot, .media figure, .frames figure, .games figure, .card figure { position: relative; }
figure > figcaption .tag { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; pointer-events: none; }
.tag { border-radius: var(--radius); padding: 5px 7px; font: 700 10.5px/1 var(--sans); font-stretch: 75%; letter-spacing: 0.1em; background: rgba(0, 0, 0, 0.78); color: #fff; }
.tag.mine { background: var(--hot); color: var(--plate-ink); }
.tag.live { background: var(--gilt); color: var(--plate-ink); }
.live-bug { border-radius: var(--radius); background: var(--rec); }

/* imagery: square corners, hairline borders, no drop shadows */
.shot img, .shot video, .portrait img, .bread img, .frames figure img, .frames .scene-clip video, .balcony video, .thumbs img, .games video, .yt-facade, .yt iframe, .lb img, .hero-art img, .loop9 li, .textcard { border-radius: var(--radius); box-shadow: none; }
.shot img, .shot video, .frames figure img, .frames .scene-clip video { border: 1px solid var(--line); }
/* the bakery demo reads as a multicam: three cameras and the program feed, on air in red */
.frames.four figure::before { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 4px 7px; background: rgba(0, 0, 0, 0.78); color: #fff; font: 700 10.5px/1 var(--sans); font-stretch: 75%; letter-spacing: 0.12em; pointer-events: none; }
.frames.four figure:nth-child(1)::before { content: "CAM 1"; }
.frames.four figure:nth-child(2)::before { content: "CAM 2"; }
.frames.four figure:nth-child(3)::before { content: "CAM 3"; }
.frames.four figure.scene-clip::before { content: "PGM"; background: var(--rec); }
.frames.four .scene-clip video { outline: 2px solid var(--rec); outline-offset: -2px; }

/* everything else broadcast-side goes square and flat */
.btn, .replay, .lb button, .step, .card, .pipeline li, .script, .issues, .dev, .credits, .scene, .plan, .gain, .recap, .stats, .titles li, .loop, .ladder li, .song, .k { border-radius: var(--radius); }
.script, .script:not(.screenplay), .screenplay { box-shadow: none; }
.k.prem, .choices span.prem { background: var(--gilt); }
.contact .cta .btn.solid { background: var(--hot); border-color: var(--hot); color: var(--plate-ink); }
.contact .cta .btn.solid:hover { background: var(--gilt); border-color: var(--gilt); color: var(--plate-ink); }
.tabs button { border-radius: var(--radius); border: 1px solid #3a3640; background: transparent; color: var(--ink-2); font-stretch: 85%; padding: 10px 14px; }
.tabs button:hover { border-color: var(--ink-3); color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--hot); border-color: var(--hot); color: var(--plate-ink); }
.notes li, .looklist li { position: relative; border-left: 0; padding-left: 20px; }
.notes li::before, .looklist li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--hot); }
.looklist li::before { background: var(--gilt); }
.script.texts .text.me { background: var(--hot); color: var(--plate-ink); }
.script.texts .text.them { background: #26232b; }
.track-root, .track-stop { background: #1a181d; border-color: rgba(255, 61, 139, 0.5); }
.track-root b { color: var(--plate-ink); }
.track-stop:hover { background: #242129; }
@media (max-width: 900px) {
  .track-root b, .track-stop b { background: #1a181d; }
  .track-root b { background: var(--hot); }
}
html[data-path] .section-head::before, html[data-path] .case-head::before, html[data-path] .the-end::before { box-shadow: none; }

/* More work: Nickelodeon visible as an episode-guide row; the rest behind one toggle */
.cards.one { grid-template-columns: 1fr; }
.cards.two { grid-template-columns: 1fr 1fr; }
.card { padding: 22px 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.cards.one .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px 36px; align-items: start; }
.cards.one .card > .media { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
.more-fold { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.more-fold > summary { cursor: pointer; list-style: none; display: block; font: 600 17px/1.35 var(--sans); color: var(--gilt); }
.more-fold > summary::-webkit-details-marker { display: none; }
.more-fold > summary::before { content: "▸"; display: inline-block; margin-right: 10px; transition: transform 0.15s ease; }
.more-fold[open] > summary { margin-bottom: 26px; }
.more-fold[open] > summary::before { transform: rotate(90deg); }
.more-fold .dev { margin-top: 30px; }
@media (max-width: 860px) {
  .cards.one .card, .cards.two { grid-template-columns: 1fr; }
  .cards.one .card > .media { grid-column: auto; grid-row: auto; }
}

/* ===== Round 6: less furniture, fewer bugs ===== */
:focus-visible { outline-color: var(--gilt); border-radius: 0; }
.live-bug { background: #d0102a; }
h1, h2, h3 { text-wrap: balance; }
/* headlines read as broadcast titles, not Inter */
.section-head h2, .case-head h3, .about h2, .contact h2, .ws-title { font-stretch: 70%; font-weight: 700; letter-spacing: 0; }

/* ratings boards: one number per cell, the qualifiers in a note underneath */
.board { list-style: none; margin: 16px 0 0; padding: 0 0 2px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: #000; }
.board::before { content: attr(data-label); grid-column: 1 / -1; justify-self: start; margin: 12px 0 2px 16px; padding: 5px 9px; background: var(--gilt); color: #000; font: 400 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.board li { padding: 10px 16px 14px; border-left: 1px solid var(--line); }
.board li:first-child { border-left: 0; }
.board b { display: block; font: 400 34px/1 var(--display); letter-spacing: 0.01em; color: var(--gilt); }
.board span { display: block; margin-top: 6px; font: 500 13.5px/1.35 var(--sans); font-stretch: 85%; color: var(--ink-2); }
.board-note { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-3); }
.section-head .board { margin-top: 18px; }

/* "My role" goes back to a plain line: one plate fewer per case */
.role { display: block; margin-top: 12px; padding: 0; background: none; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.role b { display: inline; margin: 0; padding: 0 6px 0 0; background: none; clip-path: none; color: var(--hot-2); font: 400 14px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }

/* decision-story results: each number keeps its label on the same line */
.call .call-result { gap: 8px 22px; }
.call .call-result > span { display: inline-flex; align-items: baseline; gap: 8px; }
.call .call-result i { display: none; }

/* the walkthrough summary sits on one line and clears the principles below it */
.walkthrough { margin-bottom: 56px; }
.walkthrough > summary { display: block; }
.walkthrough > summary::before { margin-right: 10px; }
.walkthrough > summary span::before { content: "· "; }
.walkthrough[open] > summary span { display: none; }

/* the pipeline as rundown rows, like the point of view */
.pipeline { display: block; border-top: 1px solid var(--line); margin-bottom: 40px; }
.pipeline li { display: grid; grid-template-columns: 48px 170px minmax(0, 1fr) 220px; grid-template-areas: "num title desc media" "num title model media"; column-gap: 24px; row-gap: 4px; align-items: start; padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.pipeline li::before { grid-area: num; }
.pipeline li > h4 { grid-area: title; }
.pipeline li > p:not(.model) { grid-area: desc; }
.pipeline li > .model { grid-area: model; margin: 0; }
.pipeline li > .thumbs, .pipeline li > .textcard { grid-area: media; margin: 0; }
@media (max-width: 860px) {
  .pipeline li { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "num title" "num desc" "num model" "num media"; }
}

/* career rows: the year plates already sequence them */
.step > .num { display: none; }
.step > .when { grid-row: 1; }

/* the writing tabs fit on one row on desktop */
.writing .section-head { max-width: none; }

/* game modes: the text column stays in view beside its long media column */
@media (min-width: 861px) and (min-height: 820px) {
  #game-modes .case-body.flip > .case-text { position: sticky; top: 84px; }
}

/* laptop-height screens: keep the gem above the fold */
@media (min-width: 861px) and (max-height: 860px) {
  .hero.stage { padding-top: 36px; }
  .hero.stage h1 { font-size: clamp(64px, 7vw, 100px); margin-bottom: 18px; }
}

/* the ticker: label pinned left, a full-height pause cap on the right */
.ticker { overflow: clip; }
.ticker > .lab { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding: 0 12px; background: var(--gilt); color: #000; font: 400 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.ticker-track { padding-left: 110px; }
.ticker-pause { top: 0; bottom: 0; right: 0; width: 44px; height: auto; transform: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; }

/* the title plate: glyphs centered, the G lined up with ARTHUR's A */
.hero.stage h1 .g { padding: 0.04em 0.26em 0.04em 0.1em; margin-left: -0.1em; }

/* chapter numbers on the margin story line, matching the track */
@media (min-width: 1240px) {
  html[data-path] [data-ch][data-ch]::before { content: attr(data-ch); left: -75px; top: -3px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--hot); color: var(--plate-ink); font: 700 12px/1 var(--sans); }
}

/* phones */
@media (max-width: 900px) {
  .track-root, .track-stop, .track-stop:hover { background: none; }
}
@media (max-width: 860px) {
  .hero.stage .eyebrow { margin-bottom: 8px; }
  .hero.stage h1 { margin-bottom: 8px; }
  .hero-intro .creds { margin-bottom: 10px; }
}
@media (max-width: 640px) {
  .quote.confessional figcaption { grid-template-columns: 1fr; padding: 0; background: none; color: var(--ink-2); }
  .quote.confessional figcaption b { justify-self: start; margin: 0 0 6px; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .tabs button { white-space: normal; text-align: left; min-height: 52px; }
  #reality-stars .case-body > .media.two { grid-template-columns: 1fr; }
  #reality-stars .phone { max-width: 280px; }
  .section-head p { font-size: 16.5px; }
  .hero-intro .creds { font-size: 15.5px; font-weight: 500; }
  .board { grid-template-columns: 1fr 1fr; }
  .board b { font-size: 30px; }
  .board li:nth-child(odd) { border-left: 0; }
  .board li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .board li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .walkthrough > summary span { display: block; margin: 4px 0 0 18px; }
  .walkthrough > summary span::before { content: none; }
}

/* the AI principles as a reality-show rules card: a gold label, Rule 1–4, the statements in the title-card face */
.principles { grid-template-columns: 1fr 1fr; gap: 36px 64px; counter-reset: house-rule; }
.principles > .principles-label { grid-column: 1 / -1; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); font: 400 15px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gilt); }
.principles > div { border: 0; padding: 0; }
.principles > div::before { counter-increment: house-rule; content: "Rule " counter(house-rule); display: block; margin-bottom: 10px; font: 600 12.5px/1 var(--sans); font-stretch: 75%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hot-2); }
.principles h4 { margin: 0 0 12px; font: 400 30px/1.04 var(--display); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; color: #fff; }
.principles p { font-size: 15.5px; line-height: 1.6; }
@media (max-width: 760px) {
  .principles { grid-template-columns: 1fr; gap: 28px; }
  .principles h4 { font-size: 26px; }
}

/* ===== Round 7: final review fixes ===== */
/* real italics (the italic axis is loaded now), and no faux bold or slant if a style is missing */
body { font-synthesis: none; }
p, li, figcaption { text-wrap: pretty; }
.narration, .contact p, .call .call-opt > span:nth-child(2) { text-wrap: balance; }
.call-k { width: 92px; }
.ticker .x { text-transform: none; }
section { padding: 64px 0; }

/* ratings boards: the label floats above the cells, so every column holds a number and none sit empty */
.board { position: relative; padding-top: 44px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.board::before { position: absolute; top: 12px; left: 16px; margin: 0; }

/* decision-story results: the label in its own column, each number and its words on one line */
.call .call-result { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px; align-items: baseline; }
.call .call-result::before { grid-row: 1; align-self: center; }
.call .call-result > span { grid-column: 2; }
.call .call-result b { white-space: nowrap; }

/* lists: square bullets everywhere, chips flush left */
.case-text ul.titles { padding-left: 0; }
.case-text > ul:not(.titles):not(.notes) { list-style: none; padding-left: 0; }
.case-text > ul:not(.titles):not(.notes) > li { position: relative; padding-left: 20px; }
.case-text > ul:not(.titles):not(.notes) > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--hot); }
.issues { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 18px 0 0; }
.issues ul { list-style: none; padding-left: 0; }
.issues li { position: relative; padding-left: 18px; }
.issues li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--gilt); }

/* the career path ends on two confessionals: the manager and the report */
.path .quotes.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; margin-top: 34px; }
.path .quotes.two .quote.confessional { max-width: none; margin: 0; }

/* folded cases keep their header, ratings and decision stories; the rest is one click away */
.case.is-folded .case-body { display: block; }
.case.is-folded .case-body > .media, .case.is-folded .case-text > :not(.call) { display: none; }
#ai.is-folded .coverage, #ai.is-folded .walkthrough, #ai.is-folded .principles { display: none; }
.read-case { display: block; margin: 18px 0 0; padding: 8px 0; border: 0; background: none; color: var(--gilt); font: 600 17px/1.35 var(--sans); text-align: left; cursor: pointer; }
.read-case::before { content: "▸"; display: inline-block; margin-right: 10px; }
.read-case:hover { color: #fff; }
.read-case[hidden] { display: none; }
#ai .read-case { margin: -40px 0 48px; }

/* writing samples: show names sit above the scene names; long scripts open capped behind an Episode-style choice */
.tabs small { display: block; margin-bottom: 4px; font: 600 10.5px/1.2 var(--sans); font-stretch: 75%; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.script.capped { max-height: 760px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); }
.keep-reading { display: block; margin: 14px auto 0; padding: 13px 34px; border: 0; border-radius: var(--r-game); background: #fff; color: var(--bar-ink); font: 700 15px/1 var(--sans); cursor: pointer; }
.keep-reading:hover { background: #ece8f0; }
/* the choice sits under the script, which is the panel's last column */
.ws-panel > .keep-reading { grid-column: -2 / -1; justify-self: center; margin-top: -30px; }

/* the Kiss List loop: folded, and a hairline board of nine cells when open */
.loop-fold { margin: 20px 0; }
.loop-fold > summary { cursor: pointer; list-style: none; font: 600 17px/1.35 var(--sans); color: var(--gilt); }
.loop-fold > summary::-webkit-details-marker { display: none; }
.loop-fold > summary::before { content: "▸"; display: inline-block; margin-right: 10px; transition: transform 0.15s ease; }
.loop-fold[open] > summary { margin-bottom: 16px; }
.loop-fold[open] > summary::before { transform: rotate(90deg); }
.loop9 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.loop9 li { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 38px 14px 14px; font-size: 14.5px; }
.loop9 li::before { left: 14px; top: 10px; }
.loop9 b { display: block; }
.loop9 .kk { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* About: the bread joins the portrait, cropped landscape */
.about .about-media { display: grid; gap: 18px; align-content: start; max-width: 380px; }
.about .about-media .portrait, .about .about-media .bread { max-width: none; margin: 0; }
.about .about-media .bread img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 60%; }

/* Contact ends on the show's closing card: the email on the pink plate, the rest as off-white bars */
.contact .cta { gap: 10px; }
.contact .cta .btn { border: 0; border-radius: 0; background: var(--bar); color: var(--bar-ink); font: 700 15px/1 var(--sans); font-stretch: 85%; padding: 14px 18px; }
.contact .cta .btn:hover { background: var(--gilt); color: var(--plate-ink); }
.contact .cta .btn.solid { background: var(--hot); color: var(--plate-ink); font: 400 24px/1 var(--display); letter-spacing: 0.02em; padding: 13px 30px 13px 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.contact .cta .btn.solid:hover { background: var(--gilt); }

@media (max-width: 900px) {
  .path .quotes.two { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  section { padding: 52px 0; }
  /* phones read the About text before the bread, as before */
  .about .about-media { display: contents; }
  .about .about-media .portrait, .about .about-media .bread { max-width: 320px; }
  .about .about-media .bread { order: 2; }
}
@media (max-width: 640px) {
  .board { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
  .script.capped { max-height: 620px; }
  .loop9 { grid-template-columns: 1fr; }
  .loop9 li { padding: 12px 14px 12px 44px; }
  .loop9 li::before { top: 11px; }
  /* tap targets of at least 44px */
  .nav a.link { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
  .nav a.pill { display: inline-flex; align-items: center; min-height: 40px; margin: -6px 0; padding: 0 14px; }
  .track-stop { min-height: 44px; }
  .play .btn.small { min-height: 44px; }
  /* portrait media centered, and smaller corner tags on small images */
  #reality-stars .phone, .shot.balcony { margin-left: auto; margin-right: auto; }
  .shot.balcony { max-width: 320px; }
  .games figure > figcaption .tag, .media.two .shot > figcaption .tag { top: 6px; right: 6px; padding: 3px 5px; font-size: 9px; }
}

/* ===== Round 8: hero fade and ticker label ===== */
/* desktop: the fade only seats the bubble on the floor, so it starts lower and uses studio black; phones crop into her face, so no fade */
.hero-card .frame::after { background: linear-gradient(180deg, rgba(15, 14, 17, 0) 55%, rgba(15, 14, 17, 0.85)); }
/* the ticker label points into the crawl, like a colon: a gold arrow on a black cap, so items vanish into black, never against the gold */
.ticker > .lab { padding: 0 34px 0 12px; background: #000; }
.ticker > .lab::before { content: ""; position: absolute; inset: 0 10px 0 0; z-index: -1; background: var(--gilt); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.ticker-track { padding-left: 122px; }
@media (max-width: 860px) {
  .hero-card .frame::after { content: none; }
  .hero.stage h1 { margin-bottom: 14px; }
}
/* names get plates (GRADSTEIN, KATINA), labels don't: the hero's chapter label is a kicker, off-white caps after a short pink bar */
.hero.stage .eyebrow { display: flex; align-items: center; gap: 10px; padding: 0; background: none; clip-path: none; color: var(--ink); letter-spacing: 0.14em; }
.hero.stage .eyebrow::before { content: ""; flex: none; width: 24px; height: 3px; background: var(--hot); }
.narration.is-new { animation: toast-in 0.4s 0.05s both; }
.track-stop small { display: none; }
/* the phone track stays left-aligned, with each chapter's teaser in the space to its right, like an episode guide */
@media (max-width: 900px) {
  .track-list { align-items: stretch; width: calc(100% - 20px); }
  .track-stop { display: flex; width: 100%; }
  .track-stop span { flex: none; width: 7.4em; }
  .track-stop small { display: block; flex: 1; min-width: 0; font: 500 13.5px/1.3 var(--sans); font-stretch: 85%; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .narration.is-new { animation: none; } }
/* the shot plan and review steps show the skills' real output, at their own proportions */
.thumbs.skill-shot img { aspect-ratio: auto; height: auto; object-fit: contain; border: 1px solid var(--line); background: #121117; }
/* phones read "The look" before the clip it describes */
@media (max-width: 860px) { .demo-grid > div { order: -1; } }

/* ===== Round 9: the eighth review ===== */
/* decision blocks hold one width everywhere, folded cases included, so the lit choice never stretches into a page-wide bar */
.call { max-width: 640px; }
/* walkthrough rows: the tool line follows its description however tall the media column runs */
.pipeline li { grid-template-rows: auto 1fr; }
/* the two skill screenshots get a wider column, big enough to see the gap check, the Generate button and Approve/Regenerate */
@media (min-width: 861px) {
  .pipeline li:has(.skill-shot) { grid-template-columns: 48px 170px minmax(0, 1fr) 400px; }
}
.thumbs.skill-shot { position: relative; }
.thumbs.skill-shot::after { content: "Click to enlarge"; position: absolute; right: 8px; bottom: 8px; padding: 5px 8px; background: rgba(0, 0, 0, 0.78); color: #fff; font: 600 11px/1 var(--sans); letter-spacing: 0.04em; pointer-events: none; }
@media (hover: none) { .thumbs.skill-shot::after { content: "Tap to enlarge"; } }
/* step 01 shows the script itself, set like the writing samples, instead of a dashed placeholder */
.textcard.scriptcard { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); background: #0d0c10; color: var(--ink); font-size: 14px; line-height: 1.4; }
.textcard.scriptcard .sc-slug { color: var(--ink-3); font: 600 11px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.textcard.scriptcard .sc-line b { display: block; margin-bottom: 2px; color: var(--hot-2); font: 700 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
/* step 08 shows the finished scene's first frame */
.thumbs.scene-thumb { grid-template-columns: 124px; }
.thumbs.scene-thumb img { aspect-ratio: 9 / 16; }
/* coverage: the face pass as before and after */
.thumbs .ba { position: relative; display: block; min-width: 0; }
.thumbs .ba::after { content: attr(data-ba); position: absolute; left: 6px; bottom: 6px; padding: 4px 6px; background: rgba(0, 0, 0, 0.78); color: #fff; font: 600 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
/* "You got a date!" is landscape footage: show all of it on black instead of cropping its title */
.games video.fit { object-fit: contain; background: #000; }
/* nav: the path chip shares the Résumé pill's line and height */
.nav ul { align-items: center; }
.nav li { display: flex; align-items: center; }
/* the career path's two confessionals end on one line */
.path .quotes.two .quote.confessional { display: flex; flex-direction: column; }
.path .quotes.two .quote.confessional figcaption { margin-top: auto; align-self: flex-start; }
/* side-by-side images share one proportion so their captions line up */
#kiss-list .media.two .shot img, .more .cards.one .media.two .shot img { aspect-ratio: 3 / 2; object-fit: cover; }
#kiss-list .media.two .shot:first-child img { object-fit: contain; background: #fff; }
.about .about-media .bread img { object-position: 50% 90%; }
/* role lines wrap without a one-word last line */
.role { text-wrap: pretty; }
/* the footer rule spans the column, not the padded wrap */
.foot .wrap { position: relative; border-top: 0; }
.foot .wrap::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: var(--line); }
@media (max-width: 640px) { .foot .wrap::before { left: 16px; right: 16px; } }
@media (max-width: 860px) {
  /* Katina's name plate clears the top of the frame */
  .hero-card.moment .bubble { top: 26px; }
  /* the Result label stays on the first line when the result wraps */
  .call .call-result::before { align-self: start; }
  /* the portrait and the bread photo fill the column */
  .about .about-media .portrait, .about .about-media .bread { max-width: none; }
}
@media (min-width: 641px) { .path-chip { box-sizing: border-box; height: 38px; padding-block: 0; } }

/* ===== Round 10: tap targets, video durations, the writing button ===== */
/* the writing samples get a button beside Résumé, outlined so Résumé stays the primary action */
.nav a.pill.pill-alt { background: none; box-shadow: inset 0 0 0 1.5px var(--hot-2); color: #fff; }
.nav a.pill.pill-alt:hover { background: rgba(255, 61, 139, 0.16); color: #fff; }
.nav .pill .hide-sm { display: inline; white-space: pre; } /* keeps the space before "samples" where the pill turns flex (641-860px) */
@media (max-width: 640px) { .nav .pill .hide-sm { display: none; } }
/* every control is at least 44px tall for touch (text links inside paragraphs are exempt) */
.read-case { min-height: 44px; padding: 10px 0; }
.keep-reading, .contact .cta .btn { min-height: 44px; }
.walkthrough > summary, .more-fold > summary, .loop-fold > summary { padding: 11px 0; }
.loglines > summary { min-height: 44px; align-items: center; }
.skip { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 860px) {
  .brand, .nav a.link { min-height: 44px; display: inline-flex; align-items: center; }
  .nav a.link { min-width: 44px; justify-content: center; }
}
/* in-page jumps (Writing samples, Work, AI, About, the interview skip) land below the fixed nav */
html { scroll-padding-top: 60px; }
@media (max-width: 640px) { html { scroll-padding-top: 54px; } }

/* ===== Round 11: the story bible excerpt ===== */
/* one card under the four scenes: the bible adds a sample without adding a section */
.bible { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 56px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.bible-thumb { display: block; }
.bible-thumb img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); transform: rotate(-2deg); transition: transform 0.25s ease; }
.bible:hover .bible-thumb img { transform: rotate(0deg) scale(1.03); }
.bible .eyebrow { margin-bottom: 8px; }
.bible h3 { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 10px; }
.bible p:not(.eyebrow) { color: var(--ink-2); margin: 0 0 10px; max-width: 680px; }
.bible .btn { margin-top: 6px; min-height: 44px; }
.bible .btn small { font: 500 13px/1 var(--sans); color: var(--ink-3); }
.bible .btn:hover small { color: inherit; }
.bible .btn { white-space: nowrap; }
/* phones: the eyebrow and headline sit beside the thumbnail; the copy and button run full width below it */
@media (max-width: 640px) {
  .bible { grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; padding: 16px; align-items: center; margin-top: 40px; }
  .bible > div { display: contents; }
  .bible-thumb { grid-column: 1; grid-row: 1 / span 2; }
  .bible .eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .bible h3 { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  .bible p:not(.eyebrow) { grid-column: 1 / -1; margin: 14px 0 0; }
  .bible .btn { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bible-thumb img, .bible:hover .bible-thumb img { transform: none; transition: none; } }

/* ===== Round 12: the turnaround's baseline ===== */
/* what the rebuild's result is measured against, as a quiet caption under the board */
.call .call-basis { margin: 8px 0 0; font: 500 13.5px/1.4 var(--sans); font-stretch: 85%; color: var(--ink-3); }

/* ===== Round 13: proof strip ===== */
/* the ticker holds its opening frame (the four proof points) before it starts to roll */
.ticker-track { animation-delay: 3s; }
/* site.js keeps the crawl (and its hold) paused until the ticker is on screen */
.ticker.is-waiting .ticker-track { animation-play-state: paused; }

/* ===== The casting stage hero (Oct 11): Arthur as a blank default on a character-select grid, then a matched shot per role =====
   Every role shot is cropped so his face lands at 48% / 31%, 19% of the frame tall; the default's face sits at 59.6% / 19%, 8.2% tall,
   so a pick pushes in on it to the same spot and size while the new shot wipes in behind a pink light band (the band and the
   reveal edge share one timeline, so the band always rides the seam). */
.stage-cc .sframe { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #d4d4d8; box-shadow: 0 0 0 1px var(--line); isolation: isolate; container-type: inline-size; }
.stage-cc .bg-base { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 32%, #f0f0f2 0%, #d6d6da 55%, #bdbdc3 100%); }
.stage-cc .bg-base::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(30, 24, 40, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 24, 40, 0.07) 1px, transparent 1px); background-size: 30px 30px; }
.stage-cc .vig { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(10, 8, 14, 0.35) 100%); transition: opacity 0.8s ease; }
/* the edit bay is already dark: a full vignette sinks its corners into the page, so it gets half */
.shots[data-role="ai"] .vig { opacity: 0.5; }

/* the default: the push-in (0.6s, easing out) lands before the wipe's seam reaches his face; back to the default it shows at once */
.shots .base-layer { position: absolute; inset: 0; z-index: 1; transform-origin: 59.6% 19%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0s linear 1.2s; will-change: transform; }
.shots[data-role="base"] .base-layer { transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0s; }
.shots .base-fig { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; } /* the contact shadow is in the image */
.shots[data-role]:not([data-role="base"]) .base-layer { transform: translate(-11.6%, 12%) scale(2.317); opacity: 0; }
/* a returning visitor (or Replay) lands on the state directly */
.shots.is-instant .base-layer, .shots.is-instant .say { transition: none; }

/* role shots */
.shots .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; opacity: 0; }
.shots .shot.on { opacity: 1; z-index: 2; }
.shots .shot.in { opacity: 1; z-index: 3;
  -webkit-mask-image: linear-gradient(100deg, #000 48.75%, transparent 51.25%); mask-image: linear-gradient(100deg, #000 48.75%, transparent 51.25%);
  -webkit-mask-size: 400% 100%; mask-size: 400% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: wipe-reveal 1s cubic-bezier(0.65, 0, 0.35, 1) both; }
.shots[data-wipe="match"] .shot.in { animation: wipe-reveal-match 1.1s linear both; }
/* the mask is four frames wide so it covers the whole frame at every step; the seam sits at x = 2 - 3 × mask-position, at mid-height */
@keyframes wipe-reveal { from { -webkit-mask-position: 72% 0; mask-position: 72% 0; } to { -webkit-mask-position: 28% 0; mask-position: 28% 0; } }
/* the first pick of the creative director (both faces to camera) is a match wipe: the seam eases in, crosses his head (34% to 62%)
   at an even, slow speed, then eases out; the segments join at the same speed */
@keyframes wipe-reveal-match {
  0% { -webkit-mask-position: 72% 0; mask-position: 72% 0; animation-timing-function: cubic-bezier(0.4, 0, 0.5, 0.72); }
  35% { -webkit-mask-position: 55.33% 0; mask-position: 55.33% 0; animation-timing-function: linear; }
  70% { -webkit-mask-position: 46% 0; mask-position: 46% 0; animation-timing-function: cubic-bezier(0.45, 0.2, 0.6, 1); }
  100% { -webkit-mask-position: 28% 0; mask-position: 28% 0; }
}
/* the band: its core (14% of the frame in from its left edge) travels from -16% to 116% of the frame, exactly where the mask's
   edge is; it moves on transform (translateX in band widths, 5 × the frame percentage), so it never re-lays out the page */
.shots .wipe-band { position: absolute; top: -10%; bottom: -10%; left: 0; width: 20%; z-index: 4; pointer-events: none; opacity: 0; will-change: transform;
  background: linear-gradient(90deg, rgba(255, 61, 139, 0) 0%, rgba(255, 61, 139, 0) 62%, rgba(255, 61, 139, 0.35) 66%, rgba(255, 228, 240, 0.9) 70%, rgba(255, 61, 139, 0.55) 76%, rgba(255, 61, 139, 0.2) 88%, rgba(255, 61, 139, 0) 100%);
  transform: translateX(-150%) skewX(-10deg); mix-blend-mode: screen; }
.shots .wipe-band.go { animation: wipe-band 1s cubic-bezier(0.65, 0, 0.35, 1) both; }
.shots[data-wipe="match"] .wipe-band.go { animation: wipe-band-match 1.1s linear both; }
@keyframes wipe-band { 0% { transform: translateX(-150%) skewX(-10deg); opacity: 1; } 100% { transform: translateX(510%) skewX(-10deg); opacity: 1; } }
@keyframes wipe-band-match {
  0% { transform: translateX(-150%) skewX(-10deg); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.5, 0.72); }
  35% { transform: translateX(100%) skewX(-10deg); opacity: 1; animation-timing-function: linear; }
  70% { transform: translateX(240%) skewX(-10deg); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0.2, 0.6, 1); }
  100% { transform: translateX(510%) skewX(-10deg); opacity: 1; }
}

/* the HUD tag and the speech bubble scale with the frame (cqw), so line breaks and the bubble's spot on each shot hold at every size */
.stage-cc .slot-tag { position: absolute; z-index: 7; top: 3.5cqw; left: 3.5cqw; display: inline-flex; align-items: center; gap: 0.65em; padding: 0.5em 0.85em; background: #000; color: #fff; font: 600 clamp(10px, 2.65cqw, 20px)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.stage-cc .slot-tag b { color: var(--gilt); font: 400 1.3em/1 var(--display); letter-spacing: 0.05em; } /* the role is the HUD's headline, in the title face */
/* .say covers the frame, so the bubble and its tail are both placed in frame percentages: beside his head, the tail on his mouth */
.shots .say { position: absolute; inset: 0; z-index: 6; pointer-events: none; filter: drop-shadow(0 0.8cqw 2.2cqw rgba(0, 0, 0, 0.34));
  opacity: 0; visibility: hidden; }
/* each shot's bubble is revealed (and the old one hidden) by the same mask, keyframes and timing as the shot, so it reads as baked in */
.shots .say.on, .shots .say.in, .shots .say.out { opacity: 1; visibility: visible; }
.shots .say.in, .shots .say.out { -webkit-mask-size: 400% 100%; mask-size: 400% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: wipe-reveal 1s cubic-bezier(0.65, 0, 0.35, 1) both; }
.shots .say.in { -webkit-mask-image: linear-gradient(100deg, #000 48.75%, transparent 51.25%); mask-image: linear-gradient(100deg, #000 48.75%, transparent 51.25%); }
.shots .say.out { -webkit-mask-image: linear-gradient(100deg, transparent 48.75%, #000 51.25%); mask-image: linear-gradient(100deg, transparent 48.75%, #000 51.25%); }
.shots[data-wipe="match"] .say.in, .shots[data-wipe="match"] .say.out { animation: wipe-reveal-match 1.1s linear both; }
.shots .say::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(var(--tail)); }
.hero-card.moment.stage-cc.shots .say .bubble { position: absolute; z-index: 1; top: var(--t, auto); right: var(--r, auto); bottom: var(--b, auto); left: var(--l, auto);
  width: var(--w); max-width: none; margin: 0; padding: 1.3em 1em 0.95em; border-radius: 1.1em; font-size: clamp(12.5px, 3.6cqw, 40px); line-height: 1.38;
  box-shadow: none; text-wrap: wrap; } /* greedy wrap, so Safari and Chrome break the lines alike */
.hero-card.moment.stage-cc.shots .say .bubble::after { content: none; }
.hero-card.moment.stage-cc.shots .say .bubble .who { top: -1em; left: 1.4em; padding: 0.55em 1.4em 0.55em 0.8em; font-size: 0.74em; }
/* per shot: --l/--r/--t/--b place the bubble, --w is its width, --tail is the tail (two points inside the bubble, then the tip by his mouth) */
.shots .say[data-at="base"] { --l: 10%; --t: 12%; --w: 37.7cqw; --tail: 45.7% 15.5%, 53.3% 20.5%, 45.7% 19.5%; --tip: 53.3% 20.5%; }
.shots .say[data-at="cd"] { --r: 3%; --b: 61.5%; --w: 32.5cqw; --tail: 66.5% 33.5%, 61.2% 35.2%, 66.5% 37.2%; --tip: 61.2% 35.2%; }
.shots .say[data-at="nd"] { --l: 2%; --t: 53%; --w: 37cqw; --tail: 28% 53.6%, 36.6% 45%, 33.6% 53.6%; --tip: 36.6% 45%; } /* on the board's blank lower half, so every beat above stays readable */
.shots .say[data-at="ai"] { --l: 58%; --t: 42.5%; --w: 35.7cqw; --tail: 59.5% 46%, 56.5% 38.5%, 63% 46%; --tip: 56.5% 38.5%; }
/* small phones set the type at its 12.5px floor, so the creative director's bubble runs a line longer; it sits a little lower to clear the tag */
@container (max-width: 345px) { .shots .say[data-at="cd"] { --b: 59.5%; --tail: 66.5% 35.5%, 61.2% 36.5%, 66.5% 39.2%; --tip: 61.2% 36.5%; } }
/* the narrative director's line runs five lines at that floor, and phones show only the top square of the frame, so his bubble rises
   to stay whole, still under the board's last beat */
@container (max-width: 345px) { .shots .say[data-at="nd"] { --t: 44.5%; --tail: 28% 45.1%, 36.6% 36.5%, 33.6% 45.1%; --tip: 36.6% 36.5%; } }

/* the skip link sits under the role choices, outside their group (it isn't a role) */
.hero.stage .hero-grid { grid-template-areas: "intro art" "choose art" "skip art"; }
.hero-skip { grid-area: skip; max-width: 520px; margin-top: 10px; }
/* desktop: the frame sits at the top of its column, level with the chapter line, so the narration growing after a pick never moves it */
@media (min-width: 861px) { .hero-card.moment.shots { align-self: start; } }
@media (max-width: 860px) {
  /* phones: the choices sit in the bottom of the game frame, Episode-style, so they're on the first screen; the frame shows the
     top square of each 4:5 shot (only legs and torso go), so every tuned percentage still holds. A pick moves them under the
     frame as one slim row (Round 14c, at the end of this file) */
  .hero.stage .hero-grid { grid-template-areas: "intro" "art" "skip"; row-gap: 14px; }
  .hero-card.moment.shots { aspect-ratio: 1 / 1; overflow: hidden; }
  .hero-choose { grid-area: art; align-self: end; z-index: 8; padding: 14% 4% 4%; background: linear-gradient(180deg, rgba(10, 8, 14, 0) 0%, rgba(10, 8, 14, 0.5) 42%, rgba(10, 8, 14, 0.7) 100%); }
  .hero-choose .prompt { justify-self: start; margin: 0 0 2px; padding: 6px 9px; background: #000; color: #fff; font-size: 11px; letter-spacing: 0.12em; }
  .hero-choose .choice { min-height: 44px; padding: 10px 16px; border: 1.5px solid #1d1428; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
  .hero-choose .choice:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; } /* gold vanishes on the light grid */
  .hero-skip { max-width: none; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shots .base-layer, .shots[data-role="base"] .base-layer { transition: none; }
  .shots .shot.in { animation: none; -webkit-mask-image: none; mask-image: none; }
  .shots .wipe-band.go { animation: none; }
  .shots .say.in, .shots .say.out { animation: none; -webkit-mask-image: none; mask-image: none; }
  .shots .say.out { opacity: 0; visibility: hidden; }
}

/* The hero says what it is: an "AI render" tag on the frame (the HUD's black-tag style, top right, clear of every bubble), a line
   under it linking to the real face in About and to "How I cast myself" at the end of the AI chapter */
.stage-cc .made-tag { position: absolute; z-index: 7; top: 3.5cqw; right: 3.5cqw; padding: 0.55em 0.75em; background: rgba(0, 0, 0, 0.8); color: #fff; font: 600 clamp(9px, 2.2cqw, 15px)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.stage-cc .made-tag:hover, .stage-cc .made-tag:focus-visible { background: #000; color: var(--gilt); }
@container (max-width: 300px) { .stage-cc .made-tag { display: none; } } /* the tiniest phones: it would run into the role name; the line below still says it */
.made-cap { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--stage-ink-2); }
.made-cap a { color: var(--gilt); }
.made-cap a[href="#made"] { white-space: nowrap; }
.made-cap { text-wrap: wrap; } /* greedy, so its first line runs as close to the frame's width as the words allow ('pretty' pulled "About." down to an 80% line) */
.made-cap--phone { display: none; }
@media (max-width: 860px) { .made-cap--desk { display: none; } .made-cap--phone { display: block; margin: 0 0 12px; } }
.made { max-width: 780px; margin-top: 8px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ai p.made-kicker { margin: 0 0 12px; font: 700 11.5px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gilt); }
#ai.is-folded .made { display: none; }

/* ---- Round 14 (Oct 12): the default stage goes dark and on-palette, a character-select pedestal instead of the light-grey
   viewport that read as a placeholder; the skip link loses the in-app-purchase glow ---- */
.stage-cc .sframe { background: #231d29; }
/* lit as a casting set at night (web designer, Round 14b): a mid-dark plum wall, never page-black, with him the brightest thing */
.stage-cc .bg-base { background:
  radial-gradient(20% 26% at 59.6% 6%, rgba(255, 244, 250, 0.22), transparent 72%),     /* top spot on head and shoulders */
  radial-gradient(13% 11% at 59.6% 15%, rgba(255, 120, 180, 0.34), transparent 70%),    /* hair light: keeps his head off the wall */
  radial-gradient(32% 40% at 59.6% 36%, rgba(255, 96, 164, 0.40), transparent 72%),     /* pink backlight */
  radial-gradient(26% 5% at 59.6% 93.6%, rgba(255, 150, 200, 0.95), rgba(255, 61, 139, 0.6) 40%, transparent 78%), /* pedestal pool, hot core */
  radial-gradient(70% 13% at 59.6% 94%, rgba(255, 61, 139, 0.30), transparent 76%),     /* its spill on the floor */
  radial-gradient(28% 80% at 0% 55%, rgba(255, 61, 139, 0.18), transparent 70%),        /* side washes */
  radial-gradient(28% 80% at 100% 55%, rgba(255, 61, 139, 0.18), transparent 70%),
  linear-gradient(180deg, transparent 78%, rgba(0, 0, 0, 0.22)),                        /* the floor falls off toward the lens */
  radial-gradient(85% 70% at 59.6% 42%, #6e5a78 0%, #4a3d55 45%, #2e2636 78%, #231d29 100%); }
.stage-cc .bg-base::after {
  background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(80% 70% at 59.6% 50%, #000 40%, transparent); mask-image: radial-gradient(80% 70% at 59.6% 50%, #000 40%, transparent); }
.shots[data-role="base"] .vig { opacity: 0.45; }  /* the full vignette sank the lit set's corners into the page */
.choice.gem, .choice.gem::after, .choice.gem::before { animation: none; }
.choice.gem::after, .choice.gem::before { content: none; }
.choice.gem { box-shadow: none; background: var(--gilt); }
.choice.gem:hover { background: #ffd977; }
.choice.gem .gemicon { text-shadow: none; }
/* the AI shot's bubble tail rises from its top-left corner, so its name plate moves to the other corner */
.hero-card.moment.stage-cc.shots .say[data-at="ai"] .bubble .who { left: auto; right: 1.4em; }
.track-head { display: flex; align-items: baseline; }
@media (max-width: 860px) {
  /* the scrim starts lower so it doesn't grey his bubble; the bubble already asks, so the second prompt is for screen readers only */
  .hero-choose { background: linear-gradient(180deg, rgba(10, 8, 14, 0) 0, rgba(10, 8, 14, 0) 18%, rgba(10, 8, 14, 0.55) 45%, rgba(10, 8, 14, 0.72) 100%); }
  .hero-choose .prompt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* the card shows its work: the four frames cropped alike, one box marking the face lock */
.made-strip { margin: 18px 0 14px; }
.made-strip img { display: block; width: 100%; max-width: 760px; height: auto; border-radius: 4px; }
.made-strip figcaption { margin-top: 8px; font-size: 13.5px; color: var(--stage-ink-2); }
/* the skip link is for visitors who'd rather not pick: it folds away after the first pick */
.hero.is-chosen .choice.gem { display: none; }
/* the narration under the credits runs at the credits' size at every width, so the intro reads as one block */
.hero-intro .narration { font-size: 17px; line-height: 1.45; }
@media (max-width: 640px) { .hero-intro .narration { font-size: 15.5px; } }
/* and it wraps like the credits, filling its 560px line, so its edge matches theirs and stays put from role to role (balanced
   wrapping gave every role's sentence a different, narrower width) */
.hero-intro .narration { text-wrap: pretty; }
/* the path chip is a status, not a link: it rides beside his name, small and muted, and steps aside where the header gets tight */
.brand-wrap { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-wrap .path-chip { padding: 4px 10px; font-size: 13px; color: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.18); }
@media (max-width: 900px) { .brand-wrap .path-chip { display: none; } }
/* split the difference (Oct 12): section kickers take the hero's bar-and-caps and the timeline years turn gold, so the pink plates
   that remain (names, the "My call" label) stand out; the confessional quotes keep their full REC treatment */
.section-head .eyebrow, .about .eyebrow, .contact .eyebrow { display: flex; align-items: center; gap: 10px; padding: 0; background: none; clip-path: none; color: var(--ink); letter-spacing: 0.14em; }
.ai .section-head .eyebrow, .contact .eyebrow { background: none; color: var(--ink); }
.section-head .eyebrow::before, .about .eyebrow::before, .contact .eyebrow::before { content: ""; flex: none; width: 24px; height: 3px; background: var(--hot); }
.ai .section-head .eyebrow::before, .contact .eyebrow::before { background: var(--gilt); }
.step > .when { padding: 0; background: none; clip-path: none; color: var(--gilt); font: 400 22px/1 var(--display); letter-spacing: 0.02em; }

/* ---- Round 14c (Oct 12): the role choices stay up after a pick, so a visitor can flip between the three shots, and the three
   paths, at one tap each; the toast and the track's Change button are gone. On phones a pick moves the three buttons out of the
   frame to one slim row right under it, with short labels, so every shot and its bubble show in full ---- */
.choice .short { display: none; }
@media (max-width: 860px) {
  .hero.is-chosen .hero-grid { grid-template-areas: "intro" "art" "choose" "skip"; }
  .hero.is-chosen .hero-choose { grid-area: choose; align-self: auto; margin-top: -4px; padding: 0; background: none; }
  .hero.is-chosen .choose { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hero.is-chosen .hero-choose .choice { position: relative; min-height: 44px; padding: 6px 8px; border-radius: 12px; font-size: 13px; line-height: 1.15; box-shadow: none; }
  .hero.is-chosen .choice .full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero.is-chosen .choice .short { display: block; }
}
@media (min-width: 600px) and (max-width: 860px) { .hero.is-chosen .hero-choose .choice { font-size: 15px; } }
/* the narrowest phones (320px): his name and the two header pills fit side by side instead of overlapping */
@media (max-width: 359px) {
  .brand { font-size: 15px; }
  .nav ul { gap: 8px; }
  .nav a.pill { padding: 0 10px; }
}

/* Oct 13 punch list: the story-rooms quote under the writing samples, and the two folds (the road to Reality Stars, how the hero was cast). */
.writing .quote.confessional.rooms { max-width: 760px; margin: 36px 0 0; }
.made-fold { margin-top: 12px; }
.made-fold > summary { cursor: pointer; list-style: none; font: 600 17px/1.35 var(--sans); color: var(--gilt); }
.made-fold > summary::-webkit-details-marker { display: none; }
.made-fold > summary::before { content: "\25B8"; display: inline-block; margin-right: 10px; transition: transform 0.15s ease; }
.made-fold[open] > summary { margin-bottom: 16px; }
.made-fold[open] > summary::before { transform: rotate(90deg); }
.road-fold > summary { font-size: 16px; }

.ai .pipeline-note { max-width: 760px; margin: 0 0 40px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.ai .pipeline-note a { color: var(--hot); }