/* Message research: the story wall (a photo of index cards with our notes on the Skindler vest:
   what we learned, our read of it and what we chose to film, ending on the
   film's story direction, drawn by research.js from data/storywall.json and scrubbable like the
   other heroes), when it's worth it,
   what it changes in the film, what you get, and one paper price card (the films' price cards in
   booth.css are the model). Prices and the deliverables come from offer.json (base.js bindOffer).
   Ink: typewriter black, stamp black, red pen; the story direction glows in the studio's orange. */
:root {
  --paper: #f3e8d4;
  --ink: #17120d;
  --type-ink: #262421;
  --pen: #c8261b;
  --orange-deep: #c9561d;
  --orange: #ff7a2e;
  --floor-shadow: rgba(0, 0, 0, .6);
  --type-face: "Special Elite", "Courier New", monospace;
  --pen-face: "Caveat Brush", "Comic Sans MS", cursive;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* The story wall */
.monitor.floor { aspect-ratio: 16 / 9; background: #1b1a18; }
.kw { position: absolute; inset: 0; container-type: inline-size; background-size: cover; background-position: center; }
.kw[data-wall="phone"] { display: none; }
.burn.b { top: auto; bottom: 3%; left: 2%; }
@media (max-width: 380px) { .floor .burn.r { top: auto; bottom: 3%; } }
.kf-beam { position: absolute; top: 0; bottom: 0; width: 18%; margin-left: -9%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 220, .16) 45%, rgba(255, 250, 240, .32) 50%, rgba(255, 240, 220, .16) 55%, transparent); }
.kf-card { position: absolute; }
.kf-type, .kf-why, .kf-stamp { position: absolute; mix-blend-mode: multiply; }
.kf-type { right: 8%; font-family: var(--type-face); color: var(--type-ink); opacity: .92; }
.kf-type s { text-decoration: none; background: linear-gradient(var(--pen), var(--pen)) 0 58% / var(--strike, 0%) .11em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kf-why { left: 9%; right: 5%; font-family: var(--pen-face); line-height: 1; color: var(--pen); white-space: nowrap;
  clip-path: inset(0 calc(100% - var(--pen-in, 0%)) 0 0); }
.kf-stamp { right: 7%; bottom: 9%; padding: .25em .5em .15em; border: .12em solid currentColor; border-radius: .15em;
  font-family: var(--type-face); font-weight: 700; line-height: 1; letter-spacing: .08em; color: #1b1a18; filter: url(#ink); opacity: 0; white-space: nowrap; }
.kf-card.learned .kf-stamp { color: #5d5850; }
.kf-glow { position: absolute; inset: 1%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  box-shadow: 0 0 1.6cqw .2cqw rgba(255, 122, 46, .7), 0 0 4cqw .8cqw rgba(255, 122, 46, .3); }
@media (max-width: 700px) {
  .monitor.floor { aspect-ratio: 4 / 5; }
  .kw[data-wall="desk"] { display: none; }
  .kw[data-wall="phone"] { display: block; }
  /* The typing on the phone wall is too small to read, so the wall's text shows below it as a list. */
  .wall-text.sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    list-style: none; margin: 24px 0 0; padding: 0; border-bottom: 1px solid var(--rule); font-size: var(--s-label); line-height: 1.4; }
  .wall-text.sr li { border-top: 1px solid var(--rule); padding: 14px 0; }
}

/* The five triggers and the five deliverables: one big line each. */
.when-list, .get { list-style: none; margin: 0; padding: 0; display: grid; border-bottom: 1px solid var(--rule); max-width: 980px; }
.when-list li, .get li { border-top: 1px solid var(--rule); padding: 16px 0; font-size: var(--s-title); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.get { counter-reset: get; }
.get li { display: grid; grid-template-columns: 2ch minmax(0, 1fr); gap: 16px; counter-increment: get; }
.get li::before { content: counter(get); color: var(--mid); font-variant-numeric: tabular-nums; }

/* What it changes: the question, then the part of the film it decides. */
table.changes { min-width: 0; max-width: 980px; }
.changes th, .changes td { font-size: var(--s-label); line-height: 1.3; padding: 16px 24px 16px 0; }
.changes thead th { font-size: 14px; }
.changes tbody th { width: 55%; }
.changes td { color: var(--mid); }

/* The price card, and the plain facts beside it. */
.price-row { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px clamp(24px, 5vw, 72px); align-items: start; }
.price-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px 26px 28px; border-radius: 6px;
  background-color: var(--paper); background-image: var(--noise); color: var(--ink); box-shadow: 0 30px 60px -34px var(--floor-shadow); }
.price-card > * { margin: 0; }
.price-card h3 { font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -.02em; }
.price-card .price { font-size: clamp(52px, 6vw, 76px); line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.price-card .when { font-size: 20px; }
.price-card .what { font-size: 20px; line-height: 1.3; padding-top: 14px; border-top: 2px solid var(--ink); }
.price-card .book { margin-top: 8px; align-self: flex-start; padding: 10px 18px; border-radius: 999px; font-size: 16px;
  background: var(--ink); color: var(--paper); }
.price-card .book:hover, .price-card .book:focus-visible { background: var(--orange-deep); }
.price-card .book:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.plain { display: grid; gap: 28px; }
.plain > div { border-top: 1px solid var(--rule); padding-top: 16px; display: grid; gap: 8px; }
.plain h3 { font-size: var(--s-label); }
.plain p { font-size: var(--s-label); line-height: 1.4; color: var(--mid); max-width: 46ch; }
.ask { margin-top: clamp(56px, 9vh, 112px); font-size: var(--s-title); line-height: 1.12; letter-spacing: -.02em; }

@media (max-width: 800px) {
  .price-row { grid-template-columns: minmax(0, 1fr); }
  .changes thead { display: none; }
  .changes tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .changes th, .changes td { padding: 0; border: 0; width: auto; }
  .changes tbody th { width: auto; }
}