/* =====================================================================
   Previously — Story Board: EVIDENCE WALL reskin (PHONE + DESKTOP)
   ---------------------------------------------------------------------
   RETARGETED 2026-09-27 for the live Rebecca Park DOM
   (supersedes work/story-board/story-board-wall.HELD.css, which targeted
   the old Carla Walker DOM — 21+ selectors absent).
   James approved the Evidence Wall direction for PHONE *AND* LAPTOP
   ("Yess to both", 2026-09-26 ~22:12 PDT) — no desktop remodel, the wall
   ships as designed.
   ---------------------------------------------------------------------
   Visual language (from the approved mockup):
   bone index cards with red pushpins + tape corners, dashed red string
   down the timeline, polaroid-style Who's Who, chapters as evidence tags,
   YOU ARE HERE marker kept as the red status tag.
   ---------------------------------------------------------------------
   Selector map (old -> live):
     .stage            -> .stage-frame   (the framed screening room)
     .stage-frame      -> .video-wrap    (inner video well)
     .person           -> .card          (#who .cards > .card)
     .people-grid      -> .cards
     .person .medal    -> DROPPED (no photo element in live .card)
     .person h3 / p    -> .card .nm / .card .rl
     .person.on        -> .card.active   (emerald glow neutralized)
     .beat-dot         -> .beat .bdot    (size/color only; base position kept)
     .beat-card        -> .beat .btxt    (bone index card)
     .beat-date/label  -> .beat .bdate / .beat .blabel
     .beat-jump        -> DROPPED (no jump links in live beats)
     .beat.now         -> .beat.active
     .tl-progress      -> DROPPED (no such element)
     .chapter          -> .chapters li
     .chapter .fill/.go-> DROPPED (no fill bar / go arrow in live chapters)
     .chapter .time    -> .chapters .cts
     .chapter.now      -> .chapters li.active (emerald inset neutralized)
     .case-card/.picker-row -> DROPPED (no case-file picker in live DOM)
     .back-to-now      -> DROPPED (no such element in live DOM)
     .stage-cap        -> DROPPED (caption is .video-meta; no reskin rule)
     Desktop .board grid + sticky .stage + .stage-cap + nth-of-type
     placement         -> DROPPED: the live >=1024px .page grid IS the
                          current desktop design; the reskin must not
                          fight it. Desktop keeps the aesthetic rules only
                          (polaroid rail, roomier cards) per the approved
                          desktop mockup.
   Tokens: --bone / --red / --graphite defined here. Live --ink means
   bone (#efe9db), NOT the reskin's charcoal, so the tag-hole uses the
   #101114 literal instead of var(--ink). --sans/--serif reuse the page's.
   No JS changes; inline <script> untouched so the CSP sha256 hash stands.
   Buttons are NEVER red (graphite CTAs). No green anywhere.
   ===================================================================== */

:root{
  --bone:#EDE6D6;
  --red:#E8321E;
  --graphite:#2B2B30;
}

/* ============ WALL LANGUAGE — ALL WIDTHS ============ */

/* pinboard backdrop: faint dot grid over charcoal */
body {
  background-image:
    radial-gradient(rgba(237,230,214,.055) 1px, transparent 1.4px),
    radial-gradient(120% 50% at 50% -10%, rgba(0,0,0,.5), transparent 60%);
  background-size: 22px 22px, 100% 100%;
}

/* ---------- masthead: chrome owns the back button ---------- */
/* The shared chrome renders "← Culture" (data-back-label) at the top of
   <body>; the page-local backlink duplicated it one line below. Hide the
   local one so there is exactly one way back. */
.masthead .backlink { display: none; }

/* ---------- mobile standout title (James's signature rule) ---------- */
/* Desktop gets the giant layered "203" hero; the phone masthead gets the
   same language at phone scale — an outlined episode number tucked behind
   the title, so the title reads as a layered piece, not a plain heading. */
@media (max-width: 1023px) {
  .masthead { position: relative; overflow: hidden; }
  .masthead::after {
    content: "203";
    position: absolute; z-index: 0;
    right: -10px; top: 46px;
    font-family: var(--serif);
    font-size: clamp(120px, 40vw, 190px);
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1px rgba(237,230,214,.10);
    pointer-events: none; user-select: none;
    letter-spacing: -.02em;
  }
  .masthead > * { position: relative; z-index: 1; }
}

/* section heads: evidence-lab labels (exhibit number pills stay) */
.sec-head h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.sec-head h2::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 10px;
  box-shadow: 0 0 8px rgba(232,50,30,.7);
}

/* tilt entrance: cards land with their wall rotation */
@keyframes rise-wall {
  from { opacity: 0; transform: translateY(16px) rotate(var(--tilt, -1.2deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--tilt, -1.2deg)); }
}

/* screening room: framed photo with tape strip */
.stage-frame {
  position: relative;
  overflow: visible;
  border: 6px solid #232326;
  border-radius: 6px;
  background: #101114;
}
.stage-frame::before { /* tape holding the frame to the wall */
  content: "";
  position: absolute; z-index: 5;
  top: -15px; left: 50%;
  width: 92px; height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(237,230,214,.30);
  border-left: 1px dashed rgba(0,0,0,.25);
  border-right: 1px dashed rgba(0,0,0,.25);
}
.video-wrap { overflow: hidden; border-radius: 2px; }

/* Who's Who: polaroids */
.card {
  --tilt: -1.2deg;
  /* entrance that actually runs: duration + fill, resting on the wall tilt */
  animation: rise-wall .55s cubic-bezier(.2,.7,.3,1) backwards;
  transform: rotate(var(--tilt));
  background: var(--bone);
  border: 0;
  border-radius: 4px;
  color: #191A1C;
  padding: 10px 10px 13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.cards .card:nth-child(even) { --tilt: 1.4deg; }
.card::before { /* pushpin through the top of the polaroid */
  content: "";
  position: absolute;
  top: -9px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 -2px 3px rgba(0,0,0,.35);
}
.card .nm {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: #191A1C;
}
.card .rl { color: #4A4B4E; font-size: 11.5px; }
.card.active {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-color: transparent;
  box-shadow: none;              /* neutralize base emerald glow */
  background: var(--bone);       /* keep the polaroid, not the gradient */
}
.card.active .rl { color: #4A4B4E; }
.card.active .nowtag { background: var(--red); color: #fff; }

/* timeline: dashed red string, pins on the string */
.timeline::before {
  background: repeating-linear-gradient(180deg, var(--red) 0 7px, transparent 7px 12px);
  opacity: .85;
}
.beat {
  --tilt: -.7deg;
  animation: rise-wall .55s cubic-bezier(.2,.7,.3,1) backwards;
  transform: rotate(var(--tilt));
}
.timeline .beat:nth-child(odd) { --tilt: .8deg; }
.beat .bdot {
  width: 16px; height: 16px;
  background: var(--red);
  border: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,.55),
              inset 0 -2px 3px rgba(0,0,0,.35),
              0 0 0 3px rgba(232,50,30,.25);
}

/* beats: bone index cards with tape corners */
.beat .btxt {
  position: relative;
  background: var(--bone);
  border: 0;
  border-radius: 3px;
  color: #191A1C;
  box-shadow: 0 10px 22px rgba(0,0,0,.5);
  padding: 16px 15px;
}
.beat .btxt::after { /* tape strip, top-right corner */
  content: "";
  position: absolute;
  top: -9px; right: 26px;
  width: 64px; height: 18px;
  background: rgba(237,230,214,.35);
  transform: rotate(3deg);
  border-left: 1px dashed rgba(0,0,0,.2);
  border-right: 1px dashed rgba(0,0,0,.2);
}
.beat .bdate { color: #8A6D3B; }
.beat.active .bdate { color: var(--red); }
.beat .blabel { color: #191A1C; }
.beat.active .blabel { color: #191A1C; font-weight: 600; }
.beat.active .btxt {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-color: transparent;
}
.beat .here { background: var(--red); color: #fff; } /* YOU ARE HERE: red status tag */

/* chapters: evidence tags */
.chapters {
  background: transparent;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chapters li {
  width: auto;
  display: flex;
  align-items: center;
  background: var(--bone);
  color: #191A1C;
  border: 0;
  border-radius: 4px;
  padding: 9px 12px 9px 22px;
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
  gap: 10px;
  min-height:44px; /* a11y 2026-09-27: 44px tap target */
  box-sizing:border-box;
}
.chapters li::before { /* punched tag hole */
  content: "";
  position: absolute;
  left: 8px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: #101114;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.chapters .cts { color: #8A6D3B; background: transparent; font-weight: 700; padding: 0; }
.chapters .ct { color: #191A1C; font-size: 13px; }
.chapters .cnum { color: #8A6D3B; }
.chapters li.active {
  background: var(--red);
  border-color: transparent;
  box-shadow: none;              /* neutralize base emerald inset */
}
.chapters li.active .cts,
.chapters li.active .ct,
.chapters li.active .cnum { background: transparent; color: #fff; }

/* ============ DESKTOP (min-width:1024px): keep the live .page grid ============
   The live >=1024px .page grid (hero / watch+story / who+story /
   chapters+story / foot) IS the current desktop design — the reskin does
   not restructure it. Desktop gets the aesthetic rules only, per the
   approved desktop mockup: polaroid rail for Who's Who, roomier cards,
   and reskin-wins overrides where the base desktop layer would fight
   the wall language. */
@media (min-width: 1024px) {

  /* Who's Who: polaroid rail, like the approved desktop mockup */
  #who .cards {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 12px 4px 18px;
    margin: 0 -4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #who .cards::-webkit-scrollbar { display: none; }
  #who .cards .card { flex: 0 0 152px; scroll-snap-align: start; }
  #who .card {
    padding: 10px 10px 13px;   /* keep the compact polaroid, not the roomy base */
    min-height: 0;
  }
  #who .card.active {
    border-color: transparent;
    box-shadow: none;
    background: var(--bone);
    outline: 3px solid var(--red);
    outline-offset: 2px;
  }
  #who .card.active .nowtag { background: var(--red); color: #fff; }

  /* keep the video well sharp inside the frame */
  .stage-frame .video-wrap { border-radius: 2px; }

  /* chapters: evidence tags (override the base desktop 2-col list grid) */
  #chapters .chapters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: none;
    background: none;
    overflow: visible;
  }
  #chapters .chapters li {
    width: auto;
    display: flex;
    align-items: center;
    background: var(--bone);
    color: #191A1C;
    border: 0;
    border-radius: 4px;
    padding: 10px 14px 10px 24px;
    position: relative;
    box-shadow: 0 6px 14px rgba(0,0,0,.4);
    gap: 10px;
  }
  #chapters .chapters li::before { /* punched tag hole */
    content: "";
    position: absolute;
    left: 8px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: #101114;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  }
  #chapters .chapters li:last-child { border-bottom: none; }
  #chapters .chapters .cts { color: #8A6D3B; background: transparent; font-weight: 700; padding: 0; }
  #chapters .chapters .ct { color: #191A1C; font-size: 13.5px; }
  #chapters .chapters .cnum { color: #8A6D3B; }
  #story .beat.active .bdot {
    background: var(--red);
    border-color: var(--red);
    box-shadow: 0 2px 5px rgba(0,0,0,.55),
                inset 0 -2px 3px rgba(0,0,0,.35),
                0 0 0 3px rgba(232,50,30,.25);
  }
  #story .beat.active .bdate { color: var(--red); }
  #story .here { background: var(--red); color: #fff; }
  #chapters .chapters li.active { background: var(--red); box-shadow: none; }
  #chapters .chapters li.active .cts,
  #chapters .chapters li.active .ct,
  #chapters .chapters li.active .cnum { color: #fff; }

  /* roomier index cards on the wide wall */
  .beat .btxt { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .beat { animation: none; }
}

/* keyboard operability (story-board-a11y.js adds tabindex + Enter/Space):
   a visible focus ring in the wall language — red outline, never a fill. */
.card:focus-visible,
.beat:focus-visible,
.chapters li:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.card:focus:not(:focus-visible),
.beat:focus:not(:focus-visible),
.chapters li:focus:not(:focus-visible) {
  outline: none;
}
