/* PandaVision — pandavision.world
 *
 * The palette and the type are the studio's own, not a reference site's. Both
 * are read off the brand kit that renders the channel art
 * (skills/creative/brand-kits/build_yeahnah_panda_kit.py), so the site, the
 * avatars and the banners are demonstrably one brand:
 *
 *   ground  rgb(17,25,29)    near-black with a teal cast, never neutral grey
 *   ink     rgb(242,248,250)
 *   dim     rgb(147,168,177)
 *   cyan    rgb(63,224,232)  the panda's eyes; the studio's only accent
 *   display Big Shoulders    the condensed face the banners are set in
 *   mono    Geist Mono       labels, metadata, the schedule
 *
 * The version this replaces was built to a supplied reference and inherited
 * that reference's blue, its centred hero and its two identical stacked
 * sections. It was tidy and it was anonymous — the look every dark landing
 * page has. What is deliberate here:
 *
 * * ONE accent for the studio (cyan) and one per show, sampled from that
 *   show's own channel art. A show section is coloured by the show; chrome is
 *   never coloured by the show.
 * * Asymmetry where there was symmetry. The hero is a statement beside a
 *   broadcast slate, not a centred headline over two pills — the slate carries
 *   the weekly schedule, which is the single most specific thing the studio
 *   has to say and was nowhere on the old page.
 * * Rows, not a card grid, for the show roster. Four cards in a row read as
 *   four interchangeable products; four rows read as a line-up.
 * * Depth from hairlines, spacing and the art itself. No drop shadows, no
 *   glow, one gradient (the scrim that keeps hero text legible over a banner).
 *
 * Single-theme dark by design — the brand is dark, and a light variant would
 * be a different studio. Every colour is painted explicitly so the page never
 * borrows the host's ground.
 */

:root {
  --bg:          #0D1316;
  --bg-deep:     #090E10;
  --surface:     #131C20;
  --surface-hi:  #19242A;
  --line:        rgba(255, 255, 255, .085);
  --line-soft:   rgba(255, 255, 255, .05);
  --line-hard:   rgba(255, 255, 255, .16);
  --text:        #F2F8FA;
  --text-muted:  #9DB2BA;
  --text-faint:  #6A828C;
  --accent:      #3FE0E8;
  --accent-ink:  #06191B;
  --radius:      12px;
  --radius-sm:   8px;
  --pill:        30px;
  --shell:       1160px;

  --display: "Big Shoulders Display", "Big Shoulders", Oswald,
             "Arial Narrow", system-ui, sans-serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16.5px/1.62 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }

/* Keyboard users land here first and can jump the masthead. Visually hidden
   until focused, which is the only time it is useful. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .7rem 1.1rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* Display type. Big Shoulders is condensed and very tall-looking at its
   nominal size, so every use sets its own line-height and tracking rather than
   inheriting body metrics. */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 800;
  line-height: .94;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
}

/* Mono label. The signature device: it names a block without competing with
   the heading under it. */
.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ── The mark ───────────────────────────────────────────────────────────── */

/* Inline SVG rather than the 155KB avatar PNG: the masthead renders it at
   26px, where none of the raster detail survives anyway, and the PNG carries a
   baked radial background that would show as a box against a flat ground. The
   PNG is still the right file for the favicon and the share card, where the
   background is wanted. */
.mark { display: block; flex: none; }
.mark .fur   { fill: #F2F8FA; }
.mark .dark  { fill: #10171A; }
.mark .eye   { fill: var(--accent); }

/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(13, 19, 22, .82);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 66px;
  padding-top: env(safe-area-inset-top);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.masthead nav { display: flex; align-items: center; gap: .25rem; }

.masthead nav a {
  /* 44px minimum tap target, reached with inline-flex + min-height rather than
     padding, so the bar keeps its height. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .75rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}

.masthead nav a:hover, .masthead nav a:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
}

.masthead nav a[aria-current="page"] { color: var(--text); }

.masthead .nav-cta {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  padding: 0 1.15rem;
  border-radius: var(--pill);
  margin-left: .4rem;
}

.masthead .nav-cta:hover, .masthead .nav-cta:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  filter: brightness(1.08);
}

@media (max-width: 680px) { .masthead nav a:not(.nav-cta) { display: none; } }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(3.5rem, 11vh, 6.5rem) 0 clamp(3rem, 8vh, 5rem);
  border-bottom: 1px solid var(--line-soft);
}

.hero .shell {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

/* The asymmetry is the point: a statement column wide enough to hold a
   sentence, and a slate narrow enough to read as instrumentation beside it. */
@media (min-width: 900px) {
  .hero .shell { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); }
}

h1 {
  font-size: clamp(3.1rem, 8.5vw, 5.6rem);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

h1 .lede { color: var(--accent); display: block; }

/* The world-first claim. Set between the headline and the standfirst, in the
   accent, at a size that reads as a statement rather than a kicker — it is the
   one superlative on the site and it should be the line the eye lands on after
   the headline. */
.hero .claim {
  font-size: clamp(1.08rem, 2.4vw, 1.3rem);
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 1.1rem;
  max-width: 34ch;
  text-wrap: balance;
}

.hero .standfirst {
  font-size: clamp(1.02rem, 2.2vw, 1.14rem);
  color: var(--text-muted);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 2.1rem;
}

/* The broadcast slate. Numbers and a timetable, set in mono inside a hairline
   box — the one element on the page that looks like equipment rather than
   marketing, and the only place the weekly schedule is stated. */
.slate {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.slate h2 {
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: none;
  line-height: 1;
  color: var(--text-faint);
  padding: .95rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.slate h2 .on-air { color: var(--accent); }

.slate-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line-soft);
}

.slate-facts div {
  padding: 1.05rem 1.15rem 1.1rem;
  border-right: 1px solid var(--line-soft);
}
.slate-facts div:last-child { border-right: 0; }

.slate-facts b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: .85;
  letter-spacing: .01em;
}

.slate-facts span {
  display: block;
  margin-top: .55rem;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--text-faint);
}

.slate ol {
  list-style: none;
  margin: 0;
  padding: .45rem 0;
}

.slate ol a {
  display: flex;
  align-items: center;
  gap: .7rem;
  /* 44px: these measured 38px tall, and a four-row timetable where every row
     is a slightly-too-small target is four chances to mis-tap. */
  min-height: 44px;
  padding: .4rem 1.15rem;
  font-family: var(--mono);
  font-size: .82rem;
  text-decoration: none;
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}

.slate ol a:hover, .slate ol a:focus-visible {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
}

.slate .day { color: var(--text-faint); width: 3.1em; flex: none; }
.slate .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Channel ident. Replaced a column of four coloured dots, which read as a
   traffic light — a severity scale that was never meant and that put
   Misaligned permanently on amber. A face identifies the row without ranking
   it, and it is art the viewer has already seen on the channel. The accent
   survives as the ring, where it keys the row without being the whole mark. */
.slate .ident {
  width: 24px;
  height: auto;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  box-shadow: 0 0 0 1.5px var(--row-accent, var(--accent));
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: 0 1.4rem;
  border-radius: var(--pill);
  border: 1px solid transparent;
  font-family: var(--body);
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover, .btn-primary:focus-visible { filter: brightness(1.09); }

.btn-ghost { background: transparent; border-color: var(--line-hard); color: var(--text); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .26);
}

/* ── Section furniture ──────────────────────────────────────────────────── */

.band { padding: clamp(3.25rem, 9vh, 5.5rem) 0; border-bottom: 1px solid var(--line-soft); }
.band-deep { background: var(--bg-deep); }
/* For a band holding one line — a back link has no business claiming the same
   vertical space as a section of content. */
.band-tight { padding: 1.1rem 0; }

.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}

.band-head h2 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); }
.band-head p { margin: .55rem 0 0; color: var(--text-muted); max-width: 54ch; }
.band-head .side { font-family: var(--mono); font-size: .8rem; color: var(--text-faint); }

/* ── Show roster ────────────────────────────────────────────────────────── */

.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

/* A row, not a card. Four cards in a grid read as four interchangeable
   products; four rows read as a line-up, which is what this is. The show's
   colour is a rule down the leading edge — enough to key the row to its show
   without tinting anything. */
.roster > li > a {
  --accent: var(--row-accent);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.6rem);
  align-items: start;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--row-accent);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 3vw, 1.7rem);
  transition: border-color .18s ease, background .18s ease;
}

@media (min-width: 760px) {
  .roster > li > a { grid-template-columns: 148px minmax(0, 1fr); }
}

.roster > li > a:hover, .roster > li > a:focus-visible {
  background: var(--surface-hi);
  border-color: color-mix(in srgb, var(--row-accent) 50%, var(--line));
  border-left-color: var(--row-accent);
}

.roster figure { margin: 0; }

/* The avatar rather than the channel banner: two of the four banners have a
   tagline set into the artwork, and a tile cropped from 16:9 has no vertical
   overflow to pan away from it. The avatars carry no lettering, they are
   already square, and they are the mark a viewer recognises from YouTube. */
.roster img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing, the same way it is on .videos img. The <img>
     carries width/height attributes so the row reserves space before the file
     loads, but an explicit height plus width:100% makes BOTH dimensions
     definite and aspect-ratio is then ignored outright — which rendered these
     as 148x480 ellipses rather than circles. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #000;
}

.roster .row-body { display: flex; flex-direction: column; gap: .7rem; }

.roster .row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: wrap;
}

.roster h3 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.85rem, 4.4vw, 2.4rem);
  line-height: .95;
  letter-spacing: .01em;
  margin: 0;
}

.roster .when {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--row-accent);
  white-space: nowrap;
}

.roster .row-tag { color: var(--text); font-weight: 500; margin: 0; text-wrap: pretty; }
.roster .row-blurb { color: var(--text-muted); margin: 0; font-size: .95rem; text-wrap: pretty; }

/* Format chips: the show's mechanic, stated. A roster that says what a show
   DOES is the thing a template never has. */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 0; padding: 0; list-style: none; }

.chips li {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .02em;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: .3rem .7rem;
  /* Deliberately NOT white-space: nowrap. "a Safety Layer on the door" is
     213px of unbreakable mono, and beside an 84px avatar on a 320px screen it
     pushed the whole body 32px sideways. A chip that wraps to two lines is
     mildly less tidy; a page that scrolls sideways is broken. */
  max-width: 100%;
}

.roster .go {
  margin-top: auto;
  padding-top: .35rem;
  font-size: .87rem;
  font-weight: 600;
  color: var(--row-accent);
}

/* ── Episode cards ──────────────────────────────────────────────────────── */

.videos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 1rem;
}

.videos a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.videos a:hover, .videos a:focus-visible {
  background: var(--surface-hi);
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 50%, var(--line));
  transform: translateY(-2px);
}

.videos img {
  width: 100%;
  /* height:auto is load-bearing. The <img> carries explicit width/height (a
     good habit — it reserves space and prevents layout shift), but an explicit
     height plus width:100% makes BOTH dimensions definite and aspect-ratio is
     then ignored outright, which rendered these near-square. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #000;
  border-bottom: 1px solid var(--line-soft);
}

.v-body { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

.v-show {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--card-accent, var(--accent));
}

.v-title {
  font-weight: 500;
  font-size: .94rem;
  line-height: 1.4;
  letter-spacing: -.004em;
  /* Titles vary wildly in length; clamping keeps the grid even without
     truncating so hard the episode stops being identifiable. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.videos time {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--text-faint);
  margin-top: auto;
}

.empty { color: var(--text-muted); margin: 0; max-width: 48ch; }
.empty a { color: var(--accent); }

/* ── Show page ──────────────────────────────────────────────────────────── */

.show-hero { position: relative; border-bottom: 1px solid var(--line-soft); background: #000; }

.show-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
}

/* The one gradient on the site, and it earns its place: display type over
   channel art is unreadable without a scrim, and a flat overlay would kill the
   art it is protecting. */
.show-hero .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg) 2%, rgba(13, 19, 22, .86) 45%, rgba(13, 19, 22, .55) 100%);
}

.show-hero .shell {
  position: relative;
  padding-top: clamp(3.25rem, 10vh, 5.5rem);
  padding-bottom: clamp(2.25rem, 6vh, 3.25rem);
}

.show-hero h1 { font-size: clamp(3rem, 9vw, 5.4rem); margin-bottom: .8rem; }
.show-hero .tagline {
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  font-weight: 600;
  color: var(--accent);
  margin: 0;
  max-width: 34ch;
  text-wrap: balance;
}
.show-hero .blurb { color: var(--text-muted); margin: 1rem 0 0; max-width: 56ch; text-wrap: pretty; }
.show-hero .actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }

.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.spec > div { padding: 1.05rem 1.2rem; border-right: 1px solid var(--line-soft); }
.spec > div:last-child { border-right: 0; }

.spec dt {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.spec dd { margin: .5rem 0 0; font-weight: 500; }

.trailer { margin: clamp(2rem, 5vh, 3rem) 0 0; }

.trailer video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #000;
}

.backlink {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.backlink:hover, .backlink:focus-visible { color: var(--text); }

/* ── Documents and forms ────────────────────────────────────────────────── */

.doc { max-width: 44rem; padding: clamp(2.5rem, 7vh, 4rem) 0 clamp(3rem, 8vh, 4.5rem); }
.doc h1 { font-size: clamp(2.5rem, 7vw, 3.8rem); margin-bottom: .5rem; }
.doc h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 2.4rem 0 .6rem; }
.doc p, .doc li {
  color: var(--text-muted);
  text-wrap: pretty;
  /* The policy cites bare URLs, and a bare URL is one unbreakable word. On a
     320px screen that made the whole body scroll sideways by 29px — the single
     most common mobile defect, and invisible on a desktop browser. */
  overflow-wrap: anywhere;
}
.doc li { margin-bottom: .4rem; }
.doc a { color: var(--accent); }
.doc .updated { font-family: var(--mono); font-size: .78rem; color: var(--text-faint); margin: 0 0 2.5rem; }

.form-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.4rem, 4vw, 2rem);
  margin-top: 2rem;
}

.field { display: block; margin-bottom: 1.15rem; }
.field > span {
  display: block;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .5rem;
}
.field > span .req { color: var(--accent); }

.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-hard);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  font: 400 1rem/1.5 var(--body);
  min-height: 48px;
}

.field textarea { min-height: 170px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but fill anything they can parse — and taken out of the tab order and
   the accessibility tree so no real person can reach it by accident. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.note { font-size: .88rem; color: var(--text-faint); margin: 0 0 1.5rem; }

.alert {
  border: 1px solid var(--line-hard);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-hi);
  padding: 1rem 1.15rem;
  margin: 0 0 1.75rem;
}
.alert h2 { font-family: var(--body); font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.4; margin: 0 0 .35rem; }
.alert p, .alert li { margin: 0; color: var(--text-muted); font-size: .95rem; }
.alert ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.alert-bad { border-left-color: #F4486E; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer {
  padding: clamp(2.75rem, 7vh, 4rem) 0 calc(clamp(2.75rem, 7vh, 4rem) + env(safe-area-inset-bottom));
  color: var(--text-faint);
  font-size: .89rem;
  background: var(--bg-deep);
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line-soft);
}

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
}

.foot-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }

footer a {
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
footer a:hover, footer a:focus-visible { color: var(--text); text-decoration: underline; }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.4rem;
}

/* Social marks.
 *
 * Icon-only: four wordmarks in a footer that already carries a brand and a
 * nav is too many competing text blocks. The tile IS the 44px tap target —
 * not an 18px icon with padding hoping to reach 44 — so the touch area is
 * exactly what the eye sees a border around.
 */
.socials { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.social {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-faint);
  justify-content: center;
  text-decoration: none;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}

/* Overrides `footer a:hover`, which would repaint these white and underline
   them — an underline under an icon with no text renders as a stray rule. */
.social:hover, .social:focus-visible {
  color: var(--accent);
  border-color: rgba(63, 224, 232, .45);
  background-color: rgba(63, 224, 232, .09);
  text-decoration: none;
}

.social svg { display: block; }
.fine { font-family: var(--mono); font-size: .78rem; }
.foot-legal { margin: 1rem 0 0; color: var(--text-faint); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .videos a:hover { transform: none; }
}

/* ── Transcripts ─────────────────────────────────────────────────────── */
/* One page per published episode under /shows/<key>/transcripts/. They sit
   inside .doc so the prose rules (measure, overflow-wrap: anywhere) apply:
   a speaker label like LLAMA-3.3-70B-INSTRUCT is one unbreakable word. */

/* The eyebrow is a breadcrumb link here. Measured at 20px tall by
   tools/mobile_check.py; the vertical padding, pulled back by the matching
   negative margin, lifts the hit area to the 44px floor without moving a
   pixel of the layout. */
.tx-index .eyebrow a, .transcript-page .eyebrow a {
  color: inherit; text-decoration: none;
  display: inline-block; padding: 12px 0; margin: -12px 0;
}
.tx-index .eyebrow a:hover, .transcript-page .eyebrow a:hover { color: var(--accent); }

.tx-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.tx-list li { margin: 0; border-top: 1px solid var(--line-soft); }
.tx-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.tx-list a {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline;
  justify-content: space-between;
  padding: .85rem 0; min-height: 44px;
  color: var(--text); text-decoration: none;
}
.tx-list a:hover .tx-title, .tx-list a:focus-visible .tx-title { color: var(--accent); }
.tx-list .tx-title { flex: 1 1 18rem; overflow-wrap: anywhere; }
.tx-list time { font-family: var(--mono); font-size: .78rem; color: var(--text-faint); white-space: nowrap; }

.tx-meta a { color: var(--accent); }
.tx-topic {
  margin: 0 0 1.5rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text); font-weight: 500; overflow-wrap: anywhere;
}
.transcript h2 {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); margin: 2rem 0 .6rem;
}
.transcript p { margin: 0 0 .55rem; }
.transcript .speaker { color: var(--text); font-weight: 600; margin-right: .3rem; }
.transcript .cue { color: var(--text-faint); font-style: italic; }
.tx-note { margin-top: 2.5rem; }

/* ---- Models, About, FAQ and episode results (2026-10-21) ---- */
.doc-wide { max-width: 60rem; }
.doc p.lede { font-size: 1.12rem; color: var(--text); max-width: 60ch; margin: 0 0 1.6rem; }
.note-box {
  border-left: 3px solid var(--accent); background: var(--bg-deep);
  padding: .8rem 1rem; margin: 1.4rem 0; color: var(--text-muted); font-size: .95rem;
}
.table-wrap { overflow-x: auto; margin: 1.2rem 0; }
table.board { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.board th, table.board td {
  text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
table.board thead th {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--accent);
}
table.board .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.board a { color: var(--accent); }
table.board-small { max-width: 24rem; margin: 1rem 0; }
.won { color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.stats > div { background: var(--bg-deep); padding: .8rem 1rem; border-radius: 6px; }
.stats dt { font-weight: 600; margin: 0 0 .2rem; }
.stats dd { margin: 0; color: var(--text-muted); font-size: .92rem; }
ul.plain { list-style: none; padding: 0; }
.results { background: var(--bg-deep); border-radius: 8px; padding: 1rem 1.2rem; margin: 1.5rem 0 2rem; }
.results h2 { margin-top: 0; }
.result-line { font-weight: 600; }
ul.cast { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .45rem; }
ul.cast li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem; }
ul.cast code { font-family: var(--mono); font-size: .76rem; color: var(--text-faint); }
ul.cast .role { font-size: .85rem; color: var(--text-muted); }
ul.cast .badge {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  background: var(--accent); color: var(--accent-ink); padding: .1rem .45rem; border-radius: 3px;
}

/* ---- /links/ (2026-10-21) ---- */
.linkpage { max-width: 34rem; margin: 0 auto; text-align: center; padding: 1rem 0 2rem; }
.linkpage-avatar { border-radius: 50%; display: block; margin: 0 auto 1rem; }
.linkpage h1 { font-size: clamp(2.2rem, 7vw, 3rem); margin: 0 0 .4rem; }
.linkpage h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
  margin: 2rem 0 .7rem; font-family: var(--mono); }
.linkpage .lede { color: var(--text-muted); margin: 0 auto; max-width: 30rem; }
ul.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; text-align: left; }
ul.linklist a { display: flex; align-items: center; gap: .3rem .8rem; flex-wrap: wrap; padding: .8rem 1rem;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--accent); border-radius: 8px;
  background: var(--bg-deep); color: var(--text); text-decoration: none; }
ul.linklist a:hover, ul.linklist a:focus-visible { border-color: var(--accent); }
ul.linklist a span { color: var(--text-muted); font-size: .88rem; margin-left: auto; }
ul.linklist-social svg { color: var(--accent); flex: none; }