/* Juniper Hill Game Studio site. Ported from the Claude Design "Studio Site" boards (R3, R2). Reads only --b-* and
   room tokens (tokens.css, brand.css); adds none of its own except --tv-w / --u for the TV's size and --tilt.
   Breakpoints (brand.css): <1024 no room, wall colour band, paper full-bleed, textures off except paper ·
   1024–1599 the room collapses to the header band · ≥1600 the full room (lamp, baseboard, floor).
   Texture budget (--b-tex-max 2): at 1024 and up a page with a TV has flat paper (wall + woodgrain). */

/* ---------- textures by width, lite room ---------- */
@media (max-width: 1023.98px) {
  :root { --tex-wall: none; --tex-tv: none; --tex-cork: none; --tex-crate: none; --tex-floor: none; }
}
@media (min-width: 1024px) {
  .has-tv { --tex-paper: none; }
}
:root[data-lite] {
  --tex-wall: none; --tex-tv: none; --tex-cork: none; --tex-crate: none; --tex-floor: none; --tex-paper: none;
  --b-f-display: 'Bungee Fallback', 'Arial Black', sans-serif;
  --b-f-text: 'Atkinson Fallback', system-ui, sans-serif;
  --b-f-crt: 'VT323 Fallback', 'Courier New', monospace;
}

/* Bungee is caps only; its fallback face is not, so every display line is set in caps to read the same in both */
.eyebrow, .display-h1, .cs__title, .follow__h, .latest__ep, .latest__title, .earlier__h, .ep-card__n, .article__title, .prose h2,
.pn__ep, .presenter__slot > span:first-child, .done-tag, .waitlist__h, .nf__h, .share__title { text-transform: uppercase; }

/* ---------- page ---------- */
[hidden] { display: none !important; }
html { background: var(--b-wall-solid); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--b-wall-solid) var(--tex-wall) 0 0 / 612px auto;
  color: var(--ink); font: var(--b-t-body) / var(--b-t-body-lh) var(--b-f-text);
}
.room-shade { position: absolute; inset: 0; background: var(--b-m-shade); pointer-events: none; }
.room-lamp {
  display: none; position: absolute; left: -260px; top: 40px; width: 1100px; height: 1000px; pointer-events: none;
  background: radial-gradient(closest-side, var(--lamp), transparent); mix-blend-mode: screen;
}
.room-spill {
  position: absolute; left: 0; right: 0; top: 0; height: min(100%, 1600px); pointer-events: none;
  background: radial-gradient(ellipse 900px 800px at 50% 520px, var(--b-m-spill), transparent); mix-blend-mode: screen;
}
.room-floor { display: none; position: relative; }
.room-floor .baseboard { height: 10px; box-shadow: 0 -3px 8px rgba(0, 0, 0, .4); }
.floor { height: 110px; background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 40%), var(--b-floor-solid); }
@media (min-width: 1600px) { .room-lamp, .room-floor { display: block; } }
.baseboard { position: relative; height: 8px; background: linear-gradient(180deg, var(--baseboard-hi), var(--baseboard) 40%); box-shadow: 0 -2px 6px rgba(0, 0, 0, .35); }

.main {
  position: relative; flex: 1 0 auto; box-sizing: border-box; width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 48px 48px 64px; display: flex; flex-direction: column; gap: 52px;
}
.main--article { max-width: 960px; padding-top: 44px; gap: 36px; }
.main--narrow { max-width: 820px; gap: 40px; }
.main--legal { max-width: 820px; padding: 64px 48px 96px; }
.main--center { align-items: center; gap: 40px; padding-top: 56px; padding-bottom: 72px; }
.page-devlog .main { padding-top: 44px; }
@media (min-width: 1600px) {
  .main { padding: 64px 48px 72px; }
  .main--legal { padding: 80px 48px 120px; }
  .main--center { padding: 72px 48px 80px; }
}
@media (max-width: 1023.98px) {
  .main, .main--article, .main--narrow { padding: 20px 0 40px; gap: 24px; }
  .page-devlog .main, .page-about .main { gap: 28px; }
  .main--legal { padding: 20px 0 48px; }
  .main--center { padding: 28px 0 48px; gap: 28px; }
}

/* ---------- focus: a visible ring on every interactive element ---------- */
:focus-visible { outline: var(--b-focus-w) solid var(--b-focus-paper); outline-offset: var(--b-focus-offset); }
.site-header :focus-visible, .site-footer :focus-visible, .ep-card:focus-visible, .pn:focus-visible,
.video :focus-visible, .key--dark:focus-visible, .platform--dark:focus-visible { outline-color: var(--b-focus-dark); }
.video__play:focus-visible { outline-offset: -10px; }

/* ---------- header ---------- */
.site-header { position: relative; background: var(--b-wall-solid) var(--tex-wall) 0 0 / 612px auto; overflow: hidden; }
.site-header__shade { position: absolute; inset: 0; background: var(--b-m-shade); }
.site-header__spill { position: absolute; left: -60px; top: -80px; width: 420px; height: 260px; background: radial-gradient(closest-side, var(--b-m-spill), transparent); mix-blend-mode: screen; }
.site-header__inner {
  position: relative; max-width: 1320px; margin: 0 auto; box-sizing: border-box; padding: 14px 48px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
}
.brand { display: flex; border-radius: var(--r-2); }
.brand:focus-visible { outline-offset: 3px; }
.logo-plate { display: inline-flex; padding: 14px; background: var(--well); border-radius: var(--r-2); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .45); }
.logo-plate img { display: block; width: 240px; height: auto; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nav__item {
  display: flex; align-items: center; min-height: var(--b-target); box-sizing: border-box; padding: 0 16px; border-radius: var(--r-2);
  font: 700 16px/1 var(--b-f-text); color: var(--paper); text-decoration: none; transition: background var(--b-dur-quick);
}
.nav__item:hover { background: rgba(244, 236, 219, .14); }
.nav__item--on, .nav__item--on:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 1023.98px) { .site-header__inner { padding: 14px 16px 16px; } }

/* ---------- footer ---------- */
.site-footer { position: relative; background: linear-gradient(180deg, var(--deck-hi), var(--deck) 22%, var(--deck) 80%, #0f0f12); border-top: 4px solid var(--deck-edge); }
.site-footer__inner {
  max-width: 1320px; margin: 0 auto; box-sizing: border-box; padding: 24px 48px 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer__brand img { display: block; width: 48px; height: auto; flex: none; }
.site-footer__text { display: flex; flex-direction: column; gap: 4px; font: 400 14px/1.3 var(--b-f-text); color: var(--deck-label); }
.site-footer__name { font: 700 15px/1.35 var(--b-f-text); color: var(--deck-brand); }
.site-footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-footer__soon { font: 400 14px/1.3 var(--b-f-text); color: var(--deck-label); padding: 0 4px; }
@media (max-width: 1023.98px) { .site-footer__inner { padding: 24px 16px 28px; } }

/* ---------- keycap ---------- */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; margin: 0;
  min-width: var(--b-target); min-height: var(--b-target); padding: 0 20px;
  background: var(--b-key-face); border: 2px solid var(--b-key-edge); border-bottom-width: var(--b-key-lip); border-radius: var(--r-2);
  color: var(--b-key-ink); font: 700 15px/1 var(--b-f-text); letter-spacing: .06em; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .3); transition: transform var(--b-dur-snap), box-shadow var(--b-dur-snap);
}
.key--sm { padding: 0 12px; font-size: 13px; }
a.key:active, button.key:active, .key[aria-busy="true"] { border-bottom-width: var(--b-key-lip-down); transform: translateY(var(--b-key-drop)); box-shadow: none; }
.key[aria-busy="true"] { cursor: progress; }
.key:disabled:not([aria-busy="true"]) { background: var(--b-key-off-face); border-color: var(--b-key-off-edge); color: var(--b-key-off-ink); box-shadow: none; cursor: not-allowed; }

/* ---------- paper sheet (PaperSheet) ---------- */
.sheet {
  position: relative; box-sizing: border-box; padding: 32px; border-radius: var(--r-1); color: var(--ink);
  background: var(--b-paper-solid) var(--tex-paper) 0 0 / 432px auto; box-shadow: var(--b-shadow-paper); transform: rotate(var(--tilt, 0deg));
}
.tape { position: absolute; top: -10px; width: 110px; height: 24px; background: var(--tape); box-shadow: 0 0 0 1px var(--tape-edge); }
.tape--l { left: 44px; transform: rotate(-3deg); }
.tape--r { right: 44px; transform: rotate(2deg); }
.tape--c { left: 50%; top: -9px; width: 60px; height: 18px; margin-left: -30px; }
@media (max-width: 1023.98px) {
  .sheet { transform: none; border-radius: 0; padding: 20px; }
  .sheet > .tape { display: none; }
}

/* ---------- type bits ---------- */
.sample {
  display: inline-block; align-self: flex-start; padding: 1px 7px; border-radius: 2px; transform: rotate(-2deg); white-space: nowrap;
  font: 700 11px/1.4 var(--b-f-text); letter-spacing: .08em; color: var(--paper); background: var(--marker);
}
.eyebrow { font: 400 13px/1 var(--b-f-display); letter-spacing: .06em; color: var(--marker); white-space: nowrap; }
.eyebrow-row, .meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack > * { margin: 0; }
.lede { margin: 0; font: 400 19px/1.55 var(--b-f-text); color: var(--ink-soft); text-wrap: pretty; max-width: 52ch; }
.deck { font: 400 21px/1.5 var(--b-f-text); color: var(--ink-soft); text-wrap: pretty; }
.muted { margin: 0; font: 400 17px/1.5 var(--b-f-text); color: var(--ink-soft); text-wrap: pretty; }
.small { margin: 0; font: 400 15px/1.5 var(--b-f-text); color: var(--ink-soft); text-wrap: pretty; }
.meta { font: 700 14px/1.3 var(--b-f-text); color: var(--ink-soft); white-space: nowrap; }
.display-h1 { font: 400 clamp(32px, 4vw, 44px)/1.05 var(--b-f-display); color: var(--ink); }
.sheet a:not([class]) { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.tag { font: 700 11px/1 var(--b-f-text); letter-spacing: .08em; color: var(--paper); background: var(--ink); padding: 4px 6px 3px; border-radius: var(--r-1); }
.tag--draft { background: var(--marker); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; box-sizing: border-box; padding: 0 9px; border: 1.5px solid rgba(44, 22, 6, .6);
  border-radius: 12px; background: var(--paper); font: 700 13px/1 var(--b-f-text); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.chip__dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.arrow-link {
  display: inline-flex; align-items: center; min-height: var(--b-target); font: 700 17px/1 var(--b-f-text); color: var(--ink);
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.arrow-link:focus-visible { outline-offset: 3px; }
.btn-ink {
  display: inline-flex; align-items: center; min-height: var(--b-target); box-sizing: border-box; padding: 0 20px; border-radius: var(--r-2);
  font: 700 16px/1 var(--b-f-text); background: var(--ink); color: var(--paper); text-decoration: none;
}
.btn-ink:hover { background: var(--ink-soft); }
.dash-rule { height: 0; border-top: 2px dashed rgba(59, 54, 50, .35); }

/* ---------- PlatformLink: text labels, never platform marks ---------- */
.platform {
  display: inline-flex; align-items: center; min-height: var(--b-target); box-sizing: border-box; white-space: nowrap;
  font: 700 18px/1 var(--b-f-text); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.platform:hover { text-decoration-thickness: 2.5px; }
.platform:focus-visible { outline-offset: 3px; }
.platform--soon { font: 400 17px/1.3 var(--b-f-text); color: var(--ink-soft); text-decoration: none; white-space: normal; }
.platform--dark { color: var(--paper); }
.platform--soon.platform--dark { color: var(--deck-label); }

/* ---------- the TV (SiteTv): a 600-unit cabinet scaled to --tv-w ---------- */
.tv { width: var(--tv-w, 600px); max-width: 100%; flex: none; container-type: inline-size; }
.tv__cab {
  --u: calc(100cqw / 600);
  position: relative; box-sizing: border-box; padding: calc(14 * var(--u)) calc(62 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border: calc(4 * var(--u)) solid var(--tv-edge); border-radius: calc(22 * var(--u));
  background: linear-gradient(180deg, rgba(255, 236, 200, .14), rgba(255, 236, 200, 0) 30%, var(--tv-shade)), var(--b-tv-solid) var(--tex-tv) 0 0 / var(--tex-tv-size);
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, .22), inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 0 24px rgba(0, 0, 0, .45),
    0 0 calc(140 * var(--u)) calc(50 * var(--u)) var(--tv-glow, var(--glow-menu)), 0 24px 48px rgba(0, 0, 0, .6);
}
.tv--fault { --tv-glow: var(--glow-fault); }
.tv__bezel { padding: calc(8 * var(--u)); border-radius: calc(26 * var(--u)); background: linear-gradient(180deg, var(--bezel-hi), var(--bezel) 18%); box-shadow: inset 0 0 30px #000, 0 1px 0 rgba(255, 235, 200, .18); }
.tv__glass {
  position: relative; aspect-ratio: 4 / 3; border: calc(8 * var(--u)) solid var(--glass-rim); border-radius: calc(24 * var(--u)); overflow: hidden;
  background: radial-gradient(ellipse 72% 72% at 50% 48%, var(--crt-green-bg), #081407 60%, #020502 100%); box-shadow: inset 0 0 60px #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--u)); text-align: center;
}
.tv--fault .tv__glass { background: #000; }
.tv__poster, .attract-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, .25) 50%) 0 0 / 100% 4px,
    linear-gradient(90deg, rgba(255, 0, 0, .06), rgba(0, 255, 0, .02), rgba(0, 0, 255, .06)) 0 0 / 6px 100%;
}
/* VT323 never below 20px (DESIGN.md), whatever the TV's size */
.tv__sub { position: relative; font: 400 max(20px, calc(22 * var(--u)))/1 var(--b-f-crt); letter-spacing: 3px; color: var(--crt-green); text-shadow: 0 0 6px rgba(74, 246, 38, .75), 0 0 18px rgba(74, 246, 38, .35); white-space: nowrap; }
.tv__box {
  position: relative; max-width: 86%; padding: calc(12 * var(--u)) calc(28 * var(--u)); border: 2px dashed var(--crt-green); background: #10260f;
  font: 400 max(20px, calc(40 * var(--u)))/1 var(--b-f-crt); color: var(--crt-green); text-shadow: 0 0 6px rgba(74, 246, 38, .75);
  box-shadow: 0 0 14px rgba(74, 246, 38, .25), inset 0 0 12px rgba(74, 246, 38, .15);
}
.tv__fault { font: 400 max(20px, calc(44 * var(--u)))/1 var(--b-f-crt); letter-spacing: 3px; color: var(--b-crt-red-ink); }
.tv__fault-sub { font: 400 max(20px, calc(24 * var(--u)))/1.2 var(--b-f-crt); letter-spacing: 1px; color: var(--b-crt-red-ink-2); }
.tv__caption {
  position: absolute; z-index: 1; left: 50%; bottom: 13%; transform: translateX(-50%); white-space: nowrap;
  padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(6 * var(--u)); background: var(--b-caption-plate);
  font: 400 max(20px, calc(54 * var(--u)))/1 var(--b-f-crt); letter-spacing: calc(6 * var(--u));
  color: var(--crt-green); text-shadow: var(--b-glow-crt-green);
}
.tv__caption[data-blink] { animation: b-blink var(--b-attract-blink) steps(1, end) infinite; }
.tv--fault .tv__caption { color: var(--b-crt-red-ink); text-shadow: var(--b-glow-crt-red); }
.tv__knob {
  position: absolute; right: calc(9 * var(--u)); top: calc(30 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); box-sizing: border-box; border-radius: 50%;
  border: calc(3 * var(--u)) solid var(--knob-ring); background: radial-gradient(circle at 35% 30%, var(--knob-hi), var(--knob) 55%); box-shadow: 0 4px 6px rgba(0, 0, 0, .5);
}
.tv__knob--2 { top: calc(82 * var(--u)); transform: rotate(70deg); }

/* TvLogo (md 128 × 98): the console's logo slot, Play page hero only */
.tvlogo {
  position: relative; flex: none; display: inline-block; width: 128px; height: 98px; box-sizing: border-box; padding: 7px 26px 7px 7px;
  border: 3px solid var(--tv-edge); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 240, 210, .22), 0 6px 12px rgba(0, 0, 0, .4);
  background: linear-gradient(180deg, rgba(255, 236, 200, .14), rgba(255, 236, 200, 0) 30%, var(--tv-shade)), var(--b-tv-solid) var(--tex-tv) 0 0 / 260px auto;
}
.tvlogo__glass { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; border: 3px solid var(--glass-rim); border-radius: 11px; background: var(--b-m-glass); overflow: hidden; }
.tvlogo__txt { font: 400 22px/1 var(--b-f-crt); letter-spacing: .06em; color: var(--b-m-glass-ink); text-shadow: var(--b-m-text-glow); }
.tvlogo__knob { position: absolute; right: 6px; top: 14px; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--knob-ring); background: radial-gradient(circle at 35% 30%, var(--knob-hi), var(--knob) 55%); }
.tvlogo__knob--2 { top: 40px; }

/* ---------- coming soon (root, Play) ---------- */
.page-cs { --tv-w: 580px; }
@media (min-width: 1440px) { .page-cs { --tv-w: 680px; } }
@media (min-width: 1600px) { .page-cs { --tv-w: 720px; } }
.cs { display: grid; grid-template-columns: var(--tv-w) minmax(0, 1fr); grid-template-areas: "tv head" "tv body"; grid-template-rows: auto auto; column-gap: 56px; row-gap: 28px; align-items: start; align-content: center; }
.cs__head-cell { grid-area: head; min-width: 0; }
.cs__tv-cell { grid-area: tv; align-self: center; justify-self: center; width: 100%; display: flex; justify-content: center; }
.cs__body-cell { grid-area: body; min-width: 0; }
.cs__head-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cs__head-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 260px; }
.cs__headline { margin: 0; font: 700 clamp(28px, 2.6vw, 38px)/1.18 var(--b-f-text); color: var(--ink); text-wrap: balance; max-width: 24ch; }
.cs__title { margin: 0; font: 400 clamp(30px, 3vw, 44px)/1.05 var(--b-f-display); color: var(--ink); }
.cs__body { display: flex; flex-direction: column; gap: 18px; }
.cs__body .stack { gap: 6px; }
.cs__body .lede { max-width: 46ch; }
@media (max-width: 1023.98px) {
  .page-cs { --tv-w: 100%; }
  .cs { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tv" "body"; gap: 24px; }
  .cs__tv-cell { box-sizing: border-box; padding: 0 16px; }
}

/* ---------- FollowSheet ---------- */
.follow { display: flex; justify-content: center; width: 100%; }
.follow__sheet { width: 100%; max-width: 820px; padding: 30px; }
.follow__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.follow__head { display: flex; flex-direction: column; gap: 8px; }
.follow__h { margin: 0; font: 400 24px/1.1 var(--b-f-display); color: var(--ink); }
.follow__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.follow .arrow-link { font-size: 18px; }
@media (max-width: 1023.98px) { .follow__sheet { max-width: none; padding: 20px; } }

/* ---------- Devlog ---------- */
.page-devlog { --tv-w: 500px; }
@media (min-width: 1600px) { .page-devlog { --tv-w: 560px; } }
.devlog__head { padding: 32px; }
.devlog__head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.devlog__intro { gap: 10px; flex: 1 1 420px; }
.devlog__intro .display-h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1; }
.devlog__intro .lede { max-width: 58ch; }
.devlog__feeds { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.latest { display: grid; grid-template-columns: var(--tv-w) minmax(0, 1fr); column-gap: 56px; align-items: center; }
.latest__tv { justify-self: center; width: 100%; display: flex; justify-content: center; }
.latest__sheet { padding: 36px; }
.latest__sheet .stack { gap: 14px; }
.latest__ep { font: 400 15px/1 var(--b-f-display); letter-spacing: .04em; color: var(--marker); white-space: nowrap; }
.latest__title { margin: 0; font: 400 clamp(28px, 2.8vw, 40px)/1.05 var(--b-f-display); color: var(--ink); text-wrap: balance; }
.latest__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.latest__go .meta { font-weight: 400; font-size: 15px; }
.latest__note { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.earlier { display: flex; flex-direction: column; gap: 18px; }
.earlier__head { display: flex; align-items: center; gap: 14px; }
.earlier__h {
  margin: 0; padding: 7px 10px 6px; transform: rotate(-2deg); box-shadow: 1px 2px 2px rgba(0, 0, 0, .35);
  font: 400 18px/1 var(--b-f-display); letter-spacing: 1px; color: var(--paper); background: var(--marker);
}
.earlier__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
@media (max-width: 1023.98px) {
  .page-devlog { --tv-w: 100%; }
  .devlog__head, .latest__sheet { padding: 20px; }
  .latest { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .latest__tv { box-sizing: border-box; padding: 0 16px; }
  .latest__note { padding: 0 16px; }
  .earlier__head { padding: 0 16px; }
  .earlier__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 12px; }
}

/* EpisodeCard: ruled paper */
.ep-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; padding: 18px 20px 16px 34px;
  text-decoration: none; color: var(--ink); border-radius: var(--r-1);
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(59, 54, 50, .13) 27px 28px) 0 48px / 100% calc(100% - 48px) no-repeat,
    var(--b-paper-solid) var(--tex-paper) 0 0 / 300px auto;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 3px 6px 14px rgba(40, 20, 5, .4); transition: transform var(--b-dur-quick) var(--b-ease-out);
}
.ep-card:hover { transform: rotate(-.6deg) translateY(-3px); }
.ep-card:focus-visible { outline-offset: 3px; }
.ep-card__margin { position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: var(--marker); opacity: .55; }
.ep-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-card__n { font: 400 15px/1 var(--b-f-display); color: var(--marker); letter-spacing: .04em; white-space: nowrap; }
.ep-card__date, .ep-card__read { margin-left: auto; font: 700 13px/1 var(--b-f-text); color: var(--ink-soft); }
.ep-card__title { font: 700 19px/1.3 var(--b-f-text); text-wrap: balance; }
.ep-card__sum { font: 400 15px/1.55 var(--b-f-text); color: var(--ink-soft); text-wrap: pretty; }
.ep-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; }

/* TapedNote */
.note {
  position: relative; margin: 0; padding: 18px 22px 16px; border-radius: var(--r-1); transform: rotate(-.5deg); color: var(--pencil);
  background: var(--paper) var(--tex-paper) 0 0 / 300px auto; box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 3px 6px 14px rgba(40, 20, 5, .35);
}
.note p { margin: 0; font: 400 17px/1.6 var(--b-f-text); text-wrap: pretty; }
.note__tape { position: absolute; top: -9px; height: 20px; background: var(--tape); box-shadow: 0 0 0 1px var(--tape-edge); }
.note__tape--l { left: 22px; width: 72px; transform: rotate(-6deg); }
.note__tape--r { right: 26px; width: 56px; height: 18px; transform: rotate(5deg); }
.note__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.note__top b { font: 700 18px/1.3 var(--b-f-text); color: var(--ink); }
.note__kind { font: 700 12px/1 var(--b-f-text); letter-spacing: .08em; color: var(--ink-soft); border: 1.5px solid var(--ink-soft); border-radius: 2px; padding: 3px 5px; }
.note__mark { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 700 16px/1.3 var(--b-f-text); color: var(--marker); transform: rotate(-1.2deg); transform-origin: left; }
.note__mark span:last-child { border-bottom: 2.5px solid var(--marker); padding-bottom: 1px; }

/* ---------- Article ---------- */
.article { padding: 56px 64px 52px; }
.article__col { max-width: 68ch; margin: 0 auto; display: flex; flex-direction: column; font: 400 18px/1.6 var(--b-f-text); color: var(--ink); }
.crumbs { display: flex; gap: 6px; font: 700 14px/1.4 var(--b-f-text); color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.article__meta { margin-top: 20px; }
.article__title { margin: 16px 0 0; font: 400 clamp(32px, 4vw, 44px)/1.05 var(--b-f-display); text-wrap: balance; }
.article__deck { margin: 14px 0 0; font: 400 21px/1.5 var(--b-f-text); color: var(--ink-soft); text-wrap: pretty; }
.article__byline { margin-top: 22px; padding: 14px 0; border-top: 1.5px dashed rgba(59, 54, 50, .5); border-bottom: 1.5px dashed rgba(59, 54, 50, .5); font: 700 15px/1.3 var(--b-f-text); }
.prose h2 { margin: 36px 0 0; font: 400 var(--b-t-h2)/1.15 var(--b-f-display); text-wrap: balance; }
.prose h3 { margin: 28px 0 0; font: 700 var(--b-t-h3)/1.25 var(--b-f-text); }
.prose h4 { margin: 24px 0 0; font: 700 18px/1.3 var(--b-f-text); }
.prose p, .prose ul, .prose ol { margin: 14px 0 0; text-wrap: pretty; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.prose blockquote {
  margin: 18px 0 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--marker);
  font: 700 19px/1.5 var(--b-f-text); color: var(--ink);
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: 10px; }
.prose hr { margin: 32px 0 4px; height: 0; border: 0; border-top: 1.5px dashed rgba(59, 54, 50, .5); }
.prose :not(pre) > code { font: 700 .9em/1 var(--b-f-text); background: rgba(29, 23, 18, .08); border-radius: var(--r-1); padding: 2px 5px; }
.prose em { font-style: italic; }
.prose img { max-width: 100%; height: auto; }
/* CrtCode: code on the glass, VT323 22px minimum, no glow */
.crt-code { margin: 18px 0 0; padding: 10px; border-radius: 26px; background: linear-gradient(180deg, var(--bezel-hi), var(--bezel) 18%); box-shadow: inset 0 0 30px #000, 0 1px 0 rgba(255, 235, 200, .18), var(--b-shadow-object); }
.crt-code__glass { position: relative; border: 8px solid var(--glass-rim); border-radius: var(--r-glass); overflow: hidden; background: radial-gradient(ellipse 72% 72% at 50% 48%, var(--crt-green-bg), #081407 60%, #020502 100%); box-shadow: inset 0 0 60px #000; }
.crt-code__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px 8px; border-bottom: 2px dashed rgba(74, 246, 38, .35); }
.crt-code__label { font: 400 22px/1 var(--b-f-crt); letter-spacing: .06em; color: var(--crt-green); }
.crt-code__lang { font: 400 22px/1 var(--b-f-crt); color: #9fd69a; }
.crt-code pre { margin: 0; padding: 12px 20px 16px; overflow-x: auto; font: 400 22px/1.3 var(--b-f-crt); color: var(--crt-green); tab-size: 2; }
.crt-code code { font: inherit; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; }
.crt-code__n { color: #3e7a34; text-align: right; user-select: none; }
.crt-code__t { white-space: pre; }
/* previous / next */
.pn-row { display: flex; flex-wrap: wrap; gap: 18px; }
.pn {
  position: relative; flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; padding: 16px 20px; min-height: var(--b-target);
  text-decoration: none; color: var(--ink); border-radius: var(--r-1); background: var(--b-paper-solid) var(--tex-paper) 0 0 / 300px auto;
  box-shadow: var(--b-shadow-paper); transition: transform var(--b-dur-quick) var(--b-ease-out);
}
.pn--next { align-items: flex-end; text-align: right; }
.pn--prev:hover { transform: rotate(-.6deg) translateY(-3px); }
.pn--next:hover { transform: rotate(.6deg) translateY(-3px); }
.pn__ep { font: 400 14px/1 var(--b-f-display); letter-spacing: .04em; color: var(--marker); }
.pn b { font: 700 18px/1.3 var(--b-f-text); text-wrap: balance; }
@media (max-width: 1023.98px) {
  .article { padding: 24px 18px 36px; }
  .pn-row { padding: 0 12px; }
}

/* VideoSlot */
.video { margin: 0; padding: 10px; border-radius: 26px; background: linear-gradient(180deg, var(--bezel-hi), var(--bezel) 18%); box-shadow: inset 0 0 30px #000, 0 1px 0 rgba(255, 235, 200, .18), var(--b-shadow-object); }
/* FAULT post (post-mortems): the room is red-lit the way the 404's TV lights it (R3 has no FAULT article board) */
[data-b-mood="fault"] .video { box-shadow: inset 0 0 30px #000, 0 1px 0 rgba(255, 235, 200, .18), 0 0 140px 50px var(--glow-fault), var(--b-shadow-object); }
.video__glass {
  position: relative; aspect-ratio: 16 / 9; border: 8px solid var(--glass-rim); border-radius: var(--r-glass); overflow: hidden; background: #000; box-shadow: inset 0 0 60px #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; --u: 1px;
}
.video__glass--coming { background: radial-gradient(ellipse 72% 72% at 50% 48%, var(--crt-green-bg), #081407 60%, #020502 100%); }
.video__glass iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__key { position: relative; }
.video__plate { position: absolute; left: 30px; bottom: 26px; padding: 4px 10px 2px; background: var(--b-caption-plate); white-space: nowrap; font: 400 22px/1 var(--b-f-crt); color: #c9c9cf; }
.video__cap { padding: 10px 12px 2px; font: 400 15px/1.45 var(--b-f-text); color: var(--deck-label); text-wrap: pretty; }
.video__cap a { color: var(--paper); font-weight: 700; text-underline-offset: 3px; }
.video__print, [data-print-only] { display: none; }
.video__print { margin: 0; padding: 10px 14px; font: 700 14px/1.4 var(--b-f-text); color: #000; }
.print-head p { margin: 6px 0 0; font: 400 13px/1.4 var(--b-f-text); color: #000; }
@media (max-width: 1023.98px) {
  .video { margin: 0 12px; padding: 8px; }
  .video__plate { left: 16px; bottom: 14px; }
}

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.about__sheet { padding: 48px 56px 44px; }
.about__col { max-width: 62ch; }
.about__col p { font: 400 18px/1.6 var(--b-f-text); text-wrap: pretty; }
.about__col p.deck { font: 400 21px/1.5 var(--b-f-text); }
.about__col p.about__overview { color: var(--ink); }   /* the studio overview, full ink; the project below it changes */
.about__aside { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
.presenter { margin: 0; display: flex; justify-content: center; }
.presenter__slot {
  width: 100%; max-width: 380px; aspect-ratio: 1; box-sizing: border-box; border: 3px dashed rgba(244, 236, 219, .5); border-radius: var(--r-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(10, 8, 6, .35);
  font: 400 15px/1 var(--b-f-display); letter-spacing: .06em; color: var(--paper-2);
}
.presenter__sub { font: 400 14px/1.3 var(--b-f-text); letter-spacing: 0; color: var(--deck-label); }
/* the portrait (site/media/presenter.webp): a print taped to the wall, the paper its border */
.presenter--photo { display: block; width: 100%; max-width: 380px; margin: 0 auto; padding: 12px; }
.presenter--photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.facts { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.facts__dl { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); border-top: 1.5px solid rgba(59, 54, 50, .35); }
.facts__dl dt { padding: 11px 16px 11px 0; border-bottom: 1.5px solid rgba(59, 54, 50, .18); font: 700 15px/1.4 var(--b-f-text); color: var(--ink-soft); white-space: nowrap; }
.facts__dl dd { margin: 0; padding: 11px 0; border-bottom: 1.5px solid rgba(59, 54, 50, .18); font: 400 16px/1.4 var(--b-f-text); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
@media (max-width: 1023.98px) {
  .about { display: flex; flex-direction: column; gap: 28px; }
  .about__sheet { padding: 28px 20px 32px; }
  .about__aside { padding: 0; }
  .presenter__slot, .presenter--photo { max-width: 300px; }
  .facts { padding: 20px; }
}

/* ---------- Contact, forms ---------- */
.contact { padding: 48px 56px 44px; }
.contact .stack { gap: 18px; }
.mailto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1.5px dashed rgba(59, 54, 50, .45); }
.mailto li { border-bottom: 1.5px dashed rgba(59, 54, 50, .45); }
.mailto__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 60px; box-sizing: border-box; padding: 12px 10px; color: var(--ink); text-decoration: none; border-radius: var(--r-2); }
.mailto__row:hover { background: rgba(29, 23, 18, .06); }
.mailto__text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 200px; min-width: 0; }
.mailto__text b { font: 700 19px/1.25 var(--b-f-text); }
.mailto__text span { font: 400 15px/1.4 var(--b-f-text); color: var(--ink-soft); text-wrap: pretty; }
.mailto__subject { font: 700 13px/1 var(--b-f-text); letter-spacing: .04em; color: var(--ink); border: 1.5px solid var(--b-field-line); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.mailto__arrow { font: 700 20px/1 var(--b-f-text); }
.mailto__note { margin: 12px 0 0 !important; font: 400 15px/1.5 var(--b-f-text); color: var(--ink-soft); overflow-wrap: anywhere; }
.mailto__note b { color: var(--ink); }
.js [data-no-js], .no-js [data-js-only] { display: none !important; }
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--check { gap: 2px; }
.field__label { display: flex; gap: 8px; align-items: baseline; font: 700 15px/1.2 var(--b-f-text); color: var(--ink); }
.field__opt { font-weight: 400; color: var(--ink-soft); }
.field__input {
  width: 100%; height: var(--b-field-h); box-sizing: border-box; margin: 0; padding: 0 18px;
  border: var(--b-field-line-w) solid var(--b-field-line); border-radius: var(--b-field-r); background: var(--b-field-bg); box-shadow: var(--b-field-inset);
  font: 400 17px var(--b-f-text); color: var(--ink);
}
select.field__input { padding: 0 16px; cursor: pointer; }
.field__area { height: auto; min-height: 120px; padding: 12px 16px; border-radius: var(--b-field-r-area); font: 400 17px/1.5 var(--b-f-text); resize: vertical; }
.field__input[aria-invalid="true"] { border: var(--b-field-line-error-w) solid var(--b-error); }
.field__input:disabled { background: var(--b-field-bg-off); color: var(--ink-soft); cursor: not-allowed; }
.field__hint { font: 400 14px/1.4 var(--b-f-text); color: var(--ink-soft); }
.field__hint--check { padding-left: 34px; }
.field__err, .form__alert { margin: 0; font: 700 15px/1.4 var(--b-f-text); color: var(--b-error); text-wrap: pretty; }
.field__err::before, .form__alert::before { content: "↳ "; }
.form__alert a { color: var(--b-error); text-underline-offset: 3px; }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--b-target); font: 700 16px/1.3 var(--b-f-text); color: var(--ink); cursor: pointer; }
.check input { width: var(--b-check); height: var(--b-check); margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.check input[aria-invalid="true"] { outline: var(--b-field-line-error-w) solid var(--b-error); outline-offset: 2px; }
.form__done { display: flex; flex-direction: column; gap: 12px; }
.form__done p { margin: 0; font: 400 19px/1.55 var(--b-f-text); text-wrap: pretty; }
.done-tag { align-self: flex-start; font: 400 15px/1 var(--b-f-display); letter-spacing: .04em; color: var(--paper); background: var(--ink); padding: 7px 10px 6px; border-radius: var(--r-2); }
.waitlist { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.waitlist > [data-js-only], .waitlist > [data-no-js] { display: flex; flex-direction: column; gap: 12px; }
.waitlist__h { margin: 0; font: 400 24px/1.1 var(--b-f-display); }
@media (max-width: 1023.98px) { .contact { padding: 28px 20px 32px; } }

/* ---------- Privacy, Terms (ReadingSheet) ---------- */
.legal { padding: 52px 64px 44px; }
.legal__col { max-width: 68ch; margin: 0 auto; color: var(--ink); }
.legal__col p { font: 400 18px/1.6 var(--b-f-text); text-wrap: pretty; }
.legal__col p.legal__writing { font: 400 21px/1.5 var(--b-f-text); }
.legal__col p.legal__date { padding-top: 14px; border-top: 1.5px dashed rgba(59, 54, 50, .45); font: 700 14px/1.3 var(--b-f-text); color: var(--ink-soft); }
@media (max-width: 1023.98px) { .legal { padding: 28px 20px 32px; } }

/* ---------- 404 (FAULT) ---------- */
.page-404 { --tv-w: 540px; }
@media (min-width: 1600px) { .page-404 { --tv-w: 600px; } }
.nf__tv { width: 100%; display: flex; justify-content: center; }
.nf__sheet { width: 100%; max-width: 600px; }
.nf__sheet .sheet { padding: 32px 36px 30px; }
.nf__sheet .stack { gap: 14px; }
.nf__h { margin: 0; font: 400 clamp(26px, 3vw, 34px)/1.1 var(--b-f-display); }
.nf__ways { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 4px; }
.nf__ways .arrow-link { font-size: 16px; }
@media (max-width: 1023.98px) {
  .page-404 { --tv-w: 100%; }
  .nf__tv { box-sizing: border-box; padding: 0 16px; }
  .nf__sheet { max-width: none; }
  .nf__sheet .sheet { padding: 24px 20px 28px; }
}

/* ---------- print (print.css does the rest): no wall under a short last page ---------- */
@media print {
  html, body { background: #fff !important; }
  body { min-height: 0 !important; display: block !important; overflow: visible !important; }
  /* a framed box flush with the page's content edge loses its right border to the page clip */
  figure.video[data-print="video"], .crt-code { margin-right: 2px !important; }
}

/* ---------- share image, 1200 × 630 (not a page anyone visits) ---------- */
.share {
  --tex-paper: none; --tv-w: 400px;
  width: var(--b-og-w); height: var(--b-og-h); min-height: 0; margin: 0; overflow: hidden; box-sizing: border-box; padding: var(--b-og-safe);
  display: flex; flex-direction: row; align-items: center; gap: 44px;
}
.share__shade { position: absolute; inset: 0; background: var(--b-m-shade); }
.share__spill { position: absolute; left: -200px; top: -120px; width: 900px; height: 900px; background: radial-gradient(closest-side, var(--b-m-spill), transparent); mix-blend-mode: screen; }
.share__tv { position: relative; flex: none; }
.share__side { position: relative; flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.share__sheet {
  position: relative; padding: 34px 36px 32px; background: var(--b-paper-solid); border-radius: var(--r-1); box-shadow: var(--b-shadow-paper);
  transform: rotate(-.8deg); display: flex; flex-direction: column; gap: 16px; color: var(--ink);
}
.share__sheet .tape--l { left: 36px; top: -11px; }
.share__eyebrow-row { display: flex; align-items: center; gap: 14px; }
.share__eyebrow { font: 700 var(--b-og-label)/1 var(--b-f-text); letter-spacing: .08em; color: var(--marker); white-space: nowrap; }
.share__eyebrow-row .sample { font-size: 14px; }
.share__title { font: 400 var(--b-og-title)/1 var(--b-f-display); color: var(--ink); text-wrap: balance; }
.share__title--long { font-size: var(--b-og-title-long); line-height: 1.02; }
.share__sub { font: 700 var(--b-og-sub)/1.25 var(--b-f-text); color: var(--ink-soft); text-wrap: pretty; }
.share__logo { display: flex; justify-content: flex-end; }