/* ============================================================
   PLAYGROUND — screen & stage
   House style: auditorium black · playbill ivory · velvet red — black, red, white
   ONE family, three voices — Archivo Extended 800 (display) · Archivo (body) ·
   Archivo 600 letterspaced caps (micro/slate). The wordmark is the wordmark.
   ============================================================ */

:root {
  --house-black: #100e0c;
  --house-deep: #191612;
  --house-line: rgba(239, 231, 216, 0.14);
  --playbill: #efe7d8;
  --playbill-deep: #e6dcc8;
  --velvet: #8c1d2f;
  --velvet-bright: #b02940;
  --fog: rgba(239, 231, 216, 0.6);
  --fog-faint: rgba(239, 231, 216, 0.38);
  --ink-on-paper: #201b15;
  --ink-soft-on-paper: rgba(32, 27, 21, 0.66);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-data: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --pace: 640ms;
  --ease-stage: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Archivo display voice — direction C: extended, heavy, one confident grotesque.
   Every display role gets the treatment (a missed class here renders 400/normal —
   that was the "lightweight" SCREEN/STAGE bug) */
h1, h2, h3, h4, .hero-title, .section-title, .drawer-label, .production-title,
.foot-brand, .member h3, .monogram, .half-name, .pg-title, .mq-head, .plate-title,
.pt, .tc-title, .board-title, .row-title, .nc-title, .plaque-t, .show-card-title,
.dossier-name, .dossier-mono, .hn, .ct-title {
  font-stretch: 125%;
  font-weight: 800;
}

/* the micro voice — 600 letterspaced caps wherever the data/slate role is used
   (one family now; the role is marked by weight and tracking, not by another font) */
.slate, .menu-toggle, .drawer-close, .drawer-index, .drawer-foot, .stamp,
.half-sub, .ov-hint, .section-cta, .foot-office h4, .foot-office address,
.foot-legal, .ledger-head, .ledger-row, .col-head, .plate-slate, .board-slate,
.tc-slate, .ps, .mq-slate, .row-slate, .nc-slate, .plaque-s, .show-slate,
.show-back a, .bio-cue, .dossier-close, .dossier-role, .honors-label,
.honor .hl, .honors-bodies, .nav-fallback a, .reel-close-x, .ct-slate {
  font-weight: 600;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--house-black);
  color: var(--playbill);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--velvet); color: var(--playbill); }

:focus-visible {
  outline: 2px solid var(--velvet-bright);
  outline-offset: 3px;
}

/* ---------- utility type ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fog);
}

.slate {
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fog);
}

.slate b, .slate strong { color: var(--playbill); font-weight: 700; }

/* sticker stamp — red-inked section label */
.stamp {
  display: inline-block;
  position: relative;
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--velvet-bright);
  border: 1px solid var(--velvet-bright);
  padding: 0.45rem 0.8rem;
  transform: rotate(-2deg);
}

.stamp::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(176, 41, 64, 0.4);
  pointer-events: none;
}

/* ivory programme section: stamp in velvet so it reads on paper */
.programme .stamp { color: var(--velvet); border-color: var(--velvet); }
.programme .stamp::after { border-color: rgba(140, 29, 47, 0.4); }

/* settle-in: JS adds will-settle before observing, is-settled on entry */
.stamp.will-settle {
  opacity: 0;
  transform: rotate(2.5deg) translateY(10px);
}

.stamp.is-settled {
  opacity: 1;
  transform: rotate(-2deg) translateY(0);
  transition: opacity 500ms var(--ease-stage), transform 500ms var(--ease-stage);
}

/* ============================================================
   HEADER
   ============================================================ */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  flex-direction: row-reverse;   /* menu left, brand right; drawer still opens from the left */
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background var(--pace) var(--ease-stage), backdrop-filter var(--pace);
}

/* blur lives on a pseudo-element: backdrop-filter on the header itself would
   become the containing block for the fixed-position mobile nav */
.site-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(16, 14, 12, 0);
  transition: background var(--pace) var(--ease-stage), backdrop-filter var(--pace);
}

.site-head.is-solid {
  border-bottom: 1px solid var(--house-line);
}

.site-head.is-solid::before {
  background: rgba(16, 14, 12, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  color: var(--playbill);
}

.brand img { height: 40px; width: auto; }

/* menu button — Courier caps, red hairline */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid rgba(176, 41, 64, 0.55);
  color: var(--playbill);
  font-family: var(--font-data);
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: border-color 220ms;
}

/* only offer the drawer button when JS can drive it */
html.js .menu-toggle { display: inline-flex; }

.menu-toggle:hover { border-color: var(--velvet-bright); }

/* no-JS fallback nav (only rendered inside <noscript>) */
.nav-fallback { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }

.nav-fallback a {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
}

.nav-fallback a:hover { color: var(--playbill); }

/* ---------- section nav: persistent secondary links on section pages ----------
   site.js renders it from the drawer's list (Home + PGStudio skipped) and inserts it
   between brand and MENU, so the header's row-reverse seats it right beside the button.
   Desktop only (>= 960px) and never on body.home — the drawer stays the primary nav.
   Small Archivo caps like the eyebrows, dot-separated, current page = brass hairline.
   Text-shadow keeps it legible over the light hero art before the header goes solid. */
.section-nav { display: none; }

@media (min-width: 1024px) {
  html.js body:not(.home) .section-nav {
    display: block;
    margin-left: clamp(1rem, 2.4vw, 2.2rem);
    margin-right: auto;   /* absorbs the free space so the row hugs MENU, brand stays alone at right */
  }

  .section-nav ul { list-style: none; display: flex; align-items: center; }

  .section-nav li { display: flex; align-items: center; }

  .section-nav li + li::before {
    content: "";
    flex: none;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    margin: 0 clamp(0.7rem, 1.1vw, 1rem);
    background: var(--fog-faint);
    box-shadow: 0 1px 2px rgba(16, 14, 12, 0.7);
  }

  .section-nav a {
    position: relative;
    display: inline-block;
    padding: 0.55rem 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--playbill);
    opacity: 0.8;
    text-shadow: 0 1px 2px rgba(16, 14, 12, 0.9), 0 0 10px rgba(16, 14, 12, 0.7);
    transition: opacity 220ms;
  }

  .section-nav a:hover,
  .section-nav a[aria-current="page"] { opacity: 1; }

  .section-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.15rem;
    height: 1px;
    background: var(--brass);
    box-shadow: 0 1px 2px rgba(16, 14, 12, 0.7);
  }

  .site-head.is-solid .section-nav a { text-shadow: none; }
  .site-head.is-solid .section-nav li + li::before,
  .site-head.is-solid .section-nav a[aria-current="page"]::after { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) { .section-nav a { transition: none; } }

/* ---------- playbill drawer ---------- */

body.drawer-lock { overflow: hidden; }

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(16, 14, 12, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease-stage), visibility 0s 400ms;
}

.drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms var(--ease-stage);
}

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  padding: 1.1rem clamp(1.5rem, 4vw, 2.5rem) 2rem;
  overflow-y: auto;
  background: var(--house-deep);
  border-right: 1px solid rgba(176, 41, 64, 0.4);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 400ms var(--ease-stage), visibility 0s 400ms;
}

.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 400ms var(--ease-stage);
}

.drawer-close {
  align-self: flex-end;
  background: none;
  border: 1px solid var(--house-line);
  color: var(--fog);
  font-family: var(--font-data);
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: color 220ms, border-color 220ms;
}

.drawer-close:hover { color: var(--playbill); border-color: var(--velvet-bright); }

.drawer-links {
  list-style: none;
  margin: 2.4rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drawer-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.3rem 0;
  transition: transform 300ms var(--ease-stage);
}

.drawer-links a:hover { transform: translateX(4px); }

.drawer-index {
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--fog-faint);
}

.drawer-label {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vh, 3rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--playbill);
}

.drawer-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.05em;
  width: 100%;
  height: 2px;
  background: var(--velvet-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-stage);
}

.drawer-links a:hover .drawer-label::after { transform: scaleX(1); }

.drawer-star {
  color: var(--velvet-bright);
  font-size: 1rem;
  margin-left: 0.4rem;
}

.drawer-foot {
  margin-top: auto;
  border-top: 1px solid var(--house-line);
  padding-top: 1.2rem;
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--fog);
}

.drawer-foot p + p { margin-top: 0.7rem; }

.drawer-foot a:hover { color: var(--playbill); }

.drawer-social { display: flex; gap: 1.2rem; }

/* ---------- drawer refresh: play-key bullets + the frame on hover ---------- */
/* numbers out — a small play triangle bullets each destination */
.drawer-index { font-size: 0; }
.drawer-index::before { content: ""; display: inline-block;
  width: 0.66rem; height: 0.8rem;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--fog-faint);
  transition: background 220ms; }
.drawer-links a:hover .drawer-index::before { background: var(--playbill); }

/* the current page: the whole word goes house red — no right-side marker */
.drawer-star { display: none; }
.drawer-links a[aria-current="page"] .drawer-label { color: var(--velvet-bright); }
.drawer-links a[aria-current="page"] .drawer-index::before { background: var(--velvet-bright); }

/* hover wears the rectangle, never the underline */
.drawer-label::after { display: none; }
.drawer-links a { position: relative; }
.drawer-links a::after { content: ""; position: absolute; inset: -0.28em -0.55em;
  border: 2px solid #ffffff; opacity: 0; pointer-events: none;
  transition: opacity 260ms var(--ease-stage); }
.drawer-links a:hover::after { opacity: 1; }

/* ============================================================
   THE SPLIT HOUSE — interactive screen/stage hero
   ============================================================ */

/* the split house is the whole home page: exactly one viewport tall, and the page itself never scrolls
   (the old 54rem floor left 100+px of nothing to scroll into on shorter laptop windows) */
.split { position: relative; height: 100svh; min-height: 100svh; display: flex; overflow: hidden; }
body.home { height: 100svh; overflow: hidden; }

.half { position: relative; flex: 1 1 0; min-width: 0; overflow: visible; display: block;
  transition: flex-grow 550ms var(--ease-stage); }

.half-clip { position: absolute; inset: 0; overflow: hidden; display: block; }

html.js .half.is-live { flex-grow: 2.6; }

.half .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: filter 600ms ease, transform 800ms var(--ease-stage); }

/* carousel slides are injected by JS after load and HARD-CUT above the base
   key-art (which never moves, so no-JS keeps a single lit still). No opacity
   transition on purpose: a dissolve read as a double exposure while stills
   were still loading. site.js appends a slide only once it is decoded and
   removes the previous one in the same paint. */
.half .art-slide { opacity: 0; transition-property: filter, transform; }
.half .art-slide.is-top { opacity: 1; }

/* no-JS default: both halves lit and readable */
.half-screen .art { filter: none; }
.half-stage .art { filter: brightness(0.95); }

/* interactive rest states (JS present) */
html.js .half-screen .art { filter: brightness(0.58) saturate(0.6) contrast(1.04); transform: scale(1.02); }
html.js .half-screen.is-live .art { filter: none; transform: scale(1); }
html.js .half-stage .art { filter: brightness(0.42) saturate(0.6); }
html.js .half-stage.is-live .art { filter: brightness(0.95) saturate(1); }

/* the frame lip — screen half overlaps stage */
.half-screen { z-index: 2; }
.half-screen::after { content: ""; position: absolute; top: 0; right: -2.2vw; width: 2.2vw;
  height: 100%; z-index: 3; background: linear-gradient(90deg, #191612 0%, #0c0a08 70%);
  border-left: 1px solid rgba(176, 41, 64, 0.55); box-shadow: -14px 0 30px rgba(0, 0, 0, 0.55); }
.half-stage { margin-left: -2.2vw; }

/* CRT power-on: fired from JS (WAAPI) only on an intentional wake — the boot
   state (screen half live from load) must never flash. */
.crt { position: absolute; inset: 0; background: var(--playbill); opacity: 0; pointer-events: none; z-index: 2; }

/* stage lights */
.glow { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 55% 75% at 30% 0%, rgba(239, 231, 216, 0.4), transparent 65%),
              radial-gradient(ellipse 55% 75% at 72% 0%, rgba(239, 231, 216, 0.32), transparent 65%); }
.half-stage .glow { opacity: 1; }                          /* no-JS: lit */
html.js .half-stage .glow { opacity: 0; transition: opacity 700ms ease; }  /* JS rest: house dark */
html.js .half-stage.is-live .glow { opacity: 1; }          /* JS live: lights up */

.half-fade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(16, 14, 12, 0.75), rgba(16, 14, 12, 0) 45%); }

.half-name { position: absolute; bottom: clamp(3.4rem, 8vh, 5rem); z-index: 4;
  font-family: var(--font-display);text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(2.4rem, 5.2vw, 5.8rem); line-height: 1; color: var(--playbill);
  transition: transform 550ms var(--ease-stage); }
.half-screen .half-name { left: var(--gutter); }
.half-stage .half-name { right: var(--gutter); }
html.js .half.is-live .half-name { transform: translateY(-0.6vw); }

.half-sub { position: absolute; bottom: clamp(2rem, 5vh, 3.4rem); z-index: 4;
  font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(239, 231, 216, 0.65); white-space: nowrap; transition: opacity 400ms ease 150ms; }
.half-screen .half-sub { left: calc(var(--gutter) + 2px); }
.half-stage .half-sub { right: calc(var(--gutter) + 2px); }
.half-sub b { color: var(--playbill); font-weight: 700; }
html.js .half-sub { opacity: 0; }
html.js .half.is-live .half-sub { opacity: 1; }

/* ---------- the reel monitor ---------- */
.reel-slot { position: absolute; z-index: 4; display: block; overflow: hidden;
  outline: 1px solid rgba(239, 231, 216, 0.35); background: #000; opacity: 0;
  transition: opacity 500ms ease 250ms; pointer-events: none; }
html.js .half-screen.is-live .reel-slot { opacity: 1; pointer-events: auto; }
.reel-screen { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.reel-dot { position: absolute; top: 0.4rem; right: 0.4rem; width: 7px; height: 7px;
  border-radius: 50%; background: var(--velvet-bright); }
html.js .half-screen.is-live .reel-dot { animation: reel-pulse 1.8s ease-in-out infinite; }
@keyframes reel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* expanded player */
.reel-slot.reel-open { position: fixed; inset: 0; z-index: 80; width: min(92vw, 1100px);
  height: auto; aspect-ratio: 16 / 9; margin: auto; outline-color: var(--velvet-bright);
  opacity: 1; pointer-events: auto; transition: none; }
.reel-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(16, 14, 12, 0.85); }
.reel-close-x { position: fixed; top: 1.2rem; right: 1.4rem; z-index: 81; background: none;
  border: 1px solid var(--house-line); color: var(--playbill); font-family: var(--font-data);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.5rem 0.9rem; cursor: pointer; }

/* mobile: halves stack, screen on top */
@media (max-width: 720px) {
  .split { flex-direction: column; height: 100svh; min-height: 100svh; }
  .half { min-height: 50svh; }
  .half-screen::after { display: none; }
  .half-stage { margin-left: 0; }
  html.js .half.is-live { flex-grow: 2.2; }
  .half-name { font-size: clamp(2.4rem, 12vw, 4rem); }
  .half-sub { white-space: normal; }
  .section-head { flex-wrap: wrap; }
}

/* ============================================================
   THE OVERTURE + THE NEW TERRITORY WALL
   ============================================================ */

/* ---------- the overture ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.overture { display: none; }
html.js .overture { display: block; position: fixed; inset: 0; z-index: 100;
  background: #060505; color: #ffffff; overflow: hidden;
  transition: background 600ms ease; }
html.intro-done .overture { opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 300ms ease, visibility 0s 300ms; }
html.js:not(.intro-done) body:has(> .overture) { overflow: hidden; }
html.js .overture.clear { background: transparent; }

/* the film — the 3D overture. Letterboxed on the same near-black as its own
   void (so the bars are invisible), hidden until it is actually playing; while
   it plays, the 2D choreography's layers stay dark underneath. At the end the
   whole overture fades over the real page during the film's still landing. */
.ov-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  background: #060505; opacity: 0; transition: opacity 500ms ease; pointer-events: none; }
.overture.film .ov-video { opacity: 1; }
.overture.film .ov-frag, .overture.film .ov-stage { display: none; }
.overture.film .ov-hint { z-index: 2; }
html.js .overture.film.landing { opacity: 0; transition: opacity 550ms ease; }

/* the dead-TV overture: a black room, art fragments drifting, the logo's border
   alone centre-screen; words power on inside it through to the wordmark; the
   border then travels out equally in all directions to reveal the homepage.
   All ink is the logo's pure white (#fff), never cream. */
.overture { --ovw: min(86vw, 1060px); }

.ov-frag { position: absolute; opacity: 0; pointer-events: none;
  filter: blur(26px) brightness(0.5) saturate(0.6);
  transition: opacity 1.6s ease; }
.overture.on .ov-frag { opacity: 0.34; }
.overture.clear .ov-frag { opacity: 0; transition: opacity 500ms ease; }
.ov-frag.f1 { width: 44vw; left: -8vw; top: -6vh; animation: ov-drift1 26s ease-in-out infinite alternate; }
.ov-frag.f2 { width: 38vw; right: -10vw; bottom: -8vh; animation: ov-drift2 32s ease-in-out infinite alternate; }
.ov-frag.f3 { width: 26vw; right: 6vw; top: -10vh; animation: ov-drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes ov-drift1 { from { transform: translate(0, 0); } to { transform: translate(3.5vw, 2.5vh); } }
@keyframes ov-drift2 { from { transform: translate(0, 0); } to { transform: translate(-3vw, -2vh); } }

.ov-stage { position: absolute; inset: 0; display: grid; place-items: center; }

.ov-box { position: relative; width: var(--ovw); aspect-ratio: 709 / 195;
  border: calc(var(--ovw) * 0.0159) solid #ffffff; background: #060505;
  overflow: hidden; opacity: 0;
  transition: background 350ms ease; }
.ov-box.clear { background: transparent; }

.ov-line { position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Archivo", sans-serif; font-stretch: 125%; font-weight: 800;
  font-size: calc(var(--ovw) * 0.098); letter-spacing: 0.01em;
  text-transform: uppercase; white-space: nowrap; color: #ffffff; opacity: 0; }

.ov-word { position: absolute; inset: 0; opacity: 0; }
.ov-slot { position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.ov-slot img { height: 100%; width: auto; display: block; }

.ov-flash { position: absolute; inset: 0; background: #ffffff; opacity: 0; pointer-events: none; }

/* the miniature homepage inside the frame — a FULL-SIZE replica revealed by a
   clip window that opens with the frame. The sides are revealed, never cropped,
   and the landing is pixel-identical to the real page beneath */
.ov-mini { position: absolute; inset: 0; display: flex; opacity: 0; transition: opacity 500ms ease; }
.ov-mini .m-scr, .ov-mini .m-stg { flex: 1 1 0; position: relative; overflow: hidden; }
.ov-mini .m-stg { margin-left: -2.2vw; }
.ov-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov-mini .m-scr img { filter: brightness(0.58) saturate(0.6) contrast(1.04); transform: scale(1.02); }
.ov-mini .m-stg img { filter: brightness(0.42) saturate(0.6); }
.ov-mini .m-scr::after { content: ""; position: absolute; top: 0; right: -2.2vw; width: 2.2vw;
  height: 100%; z-index: 3; background: linear-gradient(90deg, #191612 0%, #0c0a08 70%);
  border-left: 1px solid rgba(176, 41, 64, 0.55); box-shadow: -14px 0 30px rgba(0, 0, 0, 0.55); }
.ov-mini .m-name { position: absolute; bottom: clamp(3.4rem, 8vh, 5rem); z-index: 4;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(2.4rem, 5.2vw, 5.8rem); line-height: 1; color: var(--playbill); }
.ov-mini .m-scr .m-name { left: var(--gutter); }
.ov-mini .m-stg .m-name { right: var(--gutter); }

/* the traveling frame — four bars that carry the border off-screen at equal pace */
.ov-bar { position: absolute; z-index: 5; background: #ffffff; pointer-events: none; }

.ov-hint { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-data); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
  transition: opacity 400ms ease; }
.overture.clear .ov-hint { opacity: 0; }

/* ---------- legal pages ---------- */
.legal-body { max-width: 68ch; margin-top: clamp(2rem, 5vh, 3.5rem); }
.legal-body p { font-size: 0.94rem; line-height: 1.8; color: var(--fog); margin-bottom: 1.1rem; }
.legal-body h3 { font-family: var(--font-data); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--velvet-bright);
  margin: 2.2rem 0 1rem; }
.foot-links a { color: var(--fog-faint); }
.foot-links a:hover { color: var(--playbill); }

/* ---------- the on-air eyebrow ---------- */
.eyebrow.on-air .dot { color: var(--velvet-bright); }

/* ---------- the video wall ---------- */
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mon { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: block;
  outline: 1px solid rgba(239, 231, 216, 0.14); outline-offset: -1px; background: #0c0a08; }
.mon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* no-JS / reduced-motion default: every set lit */
.mon img { filter: brightness(1) saturate(1); }
/* scanlines + glass sheen */
.mon::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(16, 14, 12, 0.16) 0 1px, transparent 1px 4px),
    linear-gradient(112deg, transparent 42%, rgba(239, 231, 216, 0.05) 46%, transparent 58%); }
html.js .mon.is-on::before, html.js .mon:hover::before { opacity: 0.35; }
/* standby LED */
.mon::after { content: ""; position: absolute; right: 0.5rem; top: 0.5rem; z-index: 3;
  width: 6px; height: 6px; border-radius: 50%; background: var(--velvet-bright);
  opacity: 0.9; transition: opacity 300ms; }
html.js .mon.is-on::after, html.js .mon:hover::after { opacity: 0.15; }
/* keyboard: visible ring + power-on on focus */
.mon:focus-visible { outline: 2px solid var(--velvet-bright); outline-offset: 3px; }
html.js .mon:focus-visible::before { opacity: 0.35; }
html.js .mon:focus-visible::after { opacity: 0.15; }
html:not(.js) .mon::after { opacity: 0.15; }
.mon .plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 2rem 0.9rem 0.7rem; background: linear-gradient(to top, rgba(16, 14, 12, 0.92), transparent);
  display: flex; flex-direction: column; gap: 0.15rem; }
.plate-title { font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.5rem); line-height: 1.1; color: var(--playbill); }
.plate-slate { font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fog); }
/* plaque (no key art) */
.mon.plaque { display: grid; place-content: center; gap: 0.4rem; text-align: center; background: var(--house-deep); }
.mon.plaque .pt { font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.8rem); color: var(--playbill); }
.mon.plaque .ps { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--velvet-bright); }
html.js .mon.plaque.is-on, html.js .mon.plaque:hover { background: #261418; }

/* ---------- title cards + power-bar reveal ---------- */
.mon .titlecard { position: absolute; inset: 0; z-index: 0; display: grid; place-content: center;
  gap: 0.4rem; text-align: center; background: #0c0a08; padding: 0.8rem;
  transition: opacity 350ms ease; }
.tc-title { font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.7rem); line-height: 1.1; color: var(--playbill); }
.tc-slate { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fog); }
html.js .mon.is-on .titlecard, html.js .mon:hover .titlecard, html.js .mon:focus-visible .titlecard { opacity: 0; }

.mon .litstack { position: absolute; inset: 0; display: block; z-index: 1; clip-path: inset(0 0 0 0); }
html.js .mon .litstack { clip-path: inset(50% 0 50% 0); transition: clip-path 480ms var(--ease-stage); }
html.js .mon.is-on .litstack, html.js .mon:hover .litstack, html.js .mon:focus-visible .litstack {
  clip-path: inset(0% 0 0 0);
}
.mon .litstack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mon .litstack .plate { z-index: 2; }
.mon .lit-plaque { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.4rem;
  text-align: center; background: var(--house-deep); }
.mon .lit-plaque .pt { font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.8rem); color: var(--playbill); }
.mon .lit-plaque .ps { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--velvet-bright); }

@media (max-width: 860px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wall { grid-template-columns: 1fr; } }

/* ---------- page headers power on like a tube, once, as the page lands ---------- */
html.js-tvon .tv-on { opacity: 0; }

/* page headers wear the logo-geometry frame — the off-TV border, logo white,
   no fill; the tube ignition reads as the frame waking. h2 subheads keep the
   velvet fill; the homepage stays unframed. (Two-class selectors beat the
   single-class velvet rules wherever they sit.) */
.pg-title.hdr-frame, .section-title.hdr-frame { background: transparent;
  border: 0.05em solid #ffffff; color: #ffffff;
  padding: 0.1em 0.22em 0.16em; }
.velvet-page .section-title.hdr-frame { background: transparent; }

/* ============================================================
   SECTIONS
   ============================================================ */

.section { padding: clamp(4rem, 10vh, 7.5rem) var(--gutter); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-block;
  background: var(--velvet);
  color: var(--playbill);
  padding: 0.02em 0.16em 0.07em;
}

.section-title em {
  font-style: italic;
  color: var(--velvet-bright);
}

.section-cta {
  font-family: var(--font-data);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  white-space: nowrap;
  transition: color 220ms;
}

.section-cta:hover { color: var(--playbill); }

.section-cta {
  position: relative;
  padding-bottom: 0.25rem;
}

.section-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--velvet-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-stage);
}

.section-cta:hover::after { transform: scaleX(1); }

/* ---------- the boards ---------- */
.boards { position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: 1.5vw; padding-bottom: 2.2vw; }
.boards::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2.2vw; height: 1px;
  background: rgba(176, 41, 64, 0.5); }
.board { position: relative; z-index: 1; margin: 0; display: block; text-decoration: none; color: inherit; }
.board::before { content: ""; position: absolute; left: 50%; top: -26%; transform: translateX(-50%);
  width: 130%; height: 72%; pointer-events: none; opacity: 0.18; transition: opacity 500ms;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(239, 231, 216, 0.22), transparent 70%); }
.board:hover::before { opacity: 1; }
.board img { width: 100%; display: block; filter: brightness(0.3) saturate(0.55); transition: filter 500ms; }
.board:hover img { filter: brightness(0.98) saturate(1); }
.board .board-cap { padding-top: 0.55rem; display: flex; flex-direction: column; gap: 0.15rem; }
.board-title { font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem); color: var(--playbill); }
.board-slate { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fog); }
.board.b1 { width: 15%; } .board.b2 { width: 19%; } .board.b3 { width: 14%; }
.board.b4 { width: 14%; } .board.b5 { width: 15%; } .board.b6 { width: 14%; }
.board.plaque { aspect-ratio: 16 / 10; background: var(--house-deep);
  outline: 1px solid rgba(176, 41, 64, 0.35); display: grid; place-content: center;
  gap: 0.4rem; text-align: center; }
.board.plaque .pt { font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.6rem); color: var(--playbill); }
.board.plaque .ps { font-family: var(--font-data); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--velvet-bright); }
.board.plaque:hover { background: #261418; outline-color: rgba(176, 41, 64, 0.65); }
@media (max-width: 860px) {
  .boards { flex-wrap: wrap; gap: 1rem; padding-bottom: 1.2rem; }
  .boards::after { display: none; }
  .board::before { width: 100%; }
  .board.b1, .board.b2, .board.b3, .board.b4, .board.b5, .board.b6 { width: calc(50% - 0.5rem); }
}
@media (max-width: 560px) {
  .board.b1, .board.b2, .board.b3, .board.b4, .board.b5, .board.b6 { width: 100%; }
}

/* ---------- the standard ---------- */
.standard { background: #14110d; padding: clamp(4rem, 10vh, 7.5rem) var(--gutter); position: relative; }
.ledger-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.ledger-head { font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--velvet-bright); margin-bottom: 0.9rem; font-weight: 400; }
.ledger-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.42rem 0;
  border-bottom: 1px solid rgba(239, 231, 216, 0.09); font-family: var(--font-data);
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(239, 231, 216, 0.45); transition: color 250ms; }
.ledger-col .ledger-row:first-of-type { border-top: 1px solid rgba(239, 231, 216, 0.16); }
.ledger-row:hover { color: var(--playbill); }
.ledger-row .y { color: rgba(239, 231, 216, 0.3); }
.ledger-row:hover .y { color: var(--velvet-bright); }
.ledger-thumb { position: absolute; z-index: 5; width: 11vw; min-width: 140px; aspect-ratio: 16 / 9;
  object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 250ms;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); outline: 1px solid rgba(239, 231, 216, 0.2); }
@media (max-width: 720px) { .ledger-cols { grid-template-columns: 1fr; } .ledger-thumb { display: none; } }

/* ---------- honors ---------- */
.honors { margin-top: clamp(2rem, 5vh, 3.4rem); border-top: 1px solid rgba(176, 41, 64, 0.4); padding-top: 1.4rem; }
.honors-label { font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--velvet-bright); margin-bottom: 1rem; }
.honors-row { display: flex; gap: clamp(1.6rem, 3.5vw, 2.8rem); flex-wrap: wrap; }
.honor { display: flex; flex-direction: column; gap: 0.25rem; }
.honor .hn { font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1; color: var(--playbill); }
.honor .hsub { font-size: 0.5em; color: var(--fog-faint); }
.honor .hl { font-family: var(--font-data); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fog); }
.honors-bodies { margin-top: 1.6rem; font-family: var(--font-data); font-size: 0.66rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: rgba(239, 231, 216, 0.5); text-align: center; }

/* ---------- what's next ---------- */
/* the copy sits close under the hero band, like the show pages (the section's 10vh top pad read as a void) */
.next-up { padding-top: clamp(1.4rem, 3vh, 2rem); }
.next-up .next-copy { max-width: var(--measure); margin-top: 0; font-size: 1.15rem;
  line-height: 1.75; color: var(--fog); }
.next-up .next-copy em { color: var(--playbill); }
/* the PGStudio call — a velvet plate that lights up: the dot glows, the arrow travels, the plate inverts */
.next-up .next-cta { margin-top: 2rem; }
.cta-btn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.6rem 0.95rem 1.3rem;
  font-family: var(--font-data); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--playbill); background: var(--velvet-bright); border: 1px solid var(--velvet-bright); text-decoration: none;
  box-shadow: 0 0 0 0 rgba(176, 41, 64, 0); transition: background 260ms ease, color 260ms ease, box-shadow 420ms ease, transform 260ms var(--ease-stage); }
.cta-btn[hidden] { display: none; }   /* a trailer button stays hidden until its film exists */
.cta-btn .cta-dot { font-size: 0.55em; line-height: 1; opacity: 0.55; animation: ctaPulse 2.2s ease-in-out infinite; }
.cta-btn .cta-arrow { display: inline-block; transition: transform 260ms var(--ease-stage); }
.cta-btn:hover, .cta-btn:focus-visible { background: var(--playbill); color: var(--velvet-bright); border-color: var(--playbill);
  box-shadow: 0 0 0 6px rgba(176, 41, 64, 0.22), 0 18px 48px rgba(176, 41, 64, 0.35); transform: translateY(-1px); outline: none; }
.cta-btn:hover .cta-arrow, .cta-btn:focus-visible .cta-arrow { transform: translateX(6px); }
.cta-btn:hover .cta-dot, .cta-btn:focus-visible .cta-dot { opacity: 1; animation: none; }
@keyframes ctaPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cta-btn .cta-dot { animation: none; opacity: 1; } .cta-btn, .cta-btn .cta-arrow { transition: none; } }

/* ---------- PGStudio (.pgs-*) — a strand in development, not yet an offering.
   The approved statement leads; the same sentence is then exploded into a
   hairline-ruled three-part rail (its own nouns as labels); the track-record
   strip borrows the catalogue tiles (.cat-tile) so the proof is the existing
   work; the enquiry block is the mailto plus a slate line saying what to send.
   Hairlines + negative space only — the one solid block stays the CTA plate. */
.next-up .pgs-lead { font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.4; color: var(--playbill);
  max-width: 34ch; }
.pgs-rail { list-style: none; margin: clamp(2.4rem, 6vh, 3.8rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--house-line); }
.pgs-rail li { padding: 1.25rem clamp(1rem, 2.2vw, 2rem) 1.5rem 0; border-bottom: 1px solid var(--house-line); }
.pgs-rail li + li { border-left: 1px solid var(--house-line); padding-left: clamp(1rem, 2.2vw, 2rem); }
.pgs-rail .pgs-n { display: block; font-family: var(--font-data); font-weight: 600; font-size: 0.66rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--velvet-bright); }
.pgs-rail .pgs-k { display: block; margin-top: 0.6rem; font-family: var(--font-display); font-stretch: 125%;
  font-weight: 800; font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--playbill); }
.pgs-rail .pgs-f { display: block; margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.55; color: var(--fog); max-width: 26ch; }
/* the track record — six catalogue tiles in one strip, then a slate pointing at the full catalogues */
.pgs-record { padding-top: 0; }
.pgs-record .col-head { margin: 0 0 1.5rem; }
.pgs-record .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pgs-record .ct-title { font-size: clamp(0.82rem, 1vw, 0.95rem); }
.pgs-note { margin-top: 1.5rem; max-width: var(--measure); line-height: 1.7; }
.pgs-note a { color: var(--playbill); border-bottom: 1px solid var(--velvet-bright); transition: color 220ms; }
.pgs-note a:hover, .pgs-note a:focus-visible { color: var(--velvet-bright); }
/* the enquiry — eyebrow, the statement's own question as the head, the velvet plate, what to send */
.pgs-enquire { padding-top: 0; }
.pgs-enquire .eyebrow { margin-bottom: 1rem; }
.pgs-q { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.02; letter-spacing: 0.03em; text-transform: uppercase; color: var(--playbill); max-width: 16ch; margin: 0 0 1.7rem; }
.pgs-enquire .next-cta { margin-top: 0; }
.pgs-addr { margin-top: 1.2rem; color: var(--fog-faint); overflow-wrap: anywhere; }
.pgs-addr a:hover, .pgs-addr a:focus-visible { color: var(--playbill); }
.pgs-include { margin-top: 1.6rem; max-width: 44ch; line-height: 1.75; padding-top: 1.1rem; border-top: 1px solid var(--house-line); }
.pgs-include b { color: var(--playbill); }
@media (max-width: 1100px) { .pgs-record .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pgs-rail { grid-template-columns: 1fr; }
  .pgs-rail li { padding-right: 0; }
  .pgs-rail li + li { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) { .pgs-record .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- production grids ---------- */

.bill {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.9rem, 2vw, 1.6rem);
}

.production {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--house-deep);
  grid-column: span 4;
  transition: transform 500ms var(--ease-stage);
}

.production.is-wide { grid-column: span 8; }
.production.is-half { grid-column: span 6; }

@media (max-width: 900px) {
  .production, .production.is-wide, .production.is-half { grid-column: span 6; }
}
@media (max-width: 620px) {
  .production, .production.is-wide, .production.is-half { grid-column: span 12; }
}

.production figure {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.production.is-tall figure { aspect-ratio: 3 / 3.6; }

.production img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease-stage), filter 700ms;
  filter: saturate(0.92);
}

.production:hover img { transform: scale(1.045); filter: saturate(1); }

.production:hover { transform: translateY(-5px); }

.production-slate {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem 1.1rem 1rem;
  background: linear-gradient(to top, rgba(16, 14, 12, 0.92), rgba(16, 14, 12, 0));
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.production-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--playbill);
}

.production .slate { font-size: 0.72rem; }

.production-flag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--playbill);
  background: var(--velvet);
  padding: 0.28rem 0.6rem;
}

/* poster & key-art tiles: show the full artwork on the deep panel instead of cropping */
figure.fit-art img {
  object-fit: contain;
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 900ms var(--ease-stage), transform 900ms var(--ease-stage);
}
.reveal.is-on { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .production img { transition: none; }
  .stamp, .stamp.will-settle, .stamp.is-settled { transition: none; opacity: 1; transform: rotate(-2deg); }
  .section-cta::after { transition: none; }
  .production { transition: none; }
  .production:hover { transform: none; }
  .drawer, .drawer-scrim { transition: none; }
  .drawer-links a { transition: none; }
  .drawer-label::after { transition: none; }
  .half, .half .art, .half-name, .half-sub, .glow, .reel-slot,
  html.js .half-stage .glow { transition: none; }
  html.js .half-screen.is-live .reel-dot { animation: none; }
  html.js .mon .litstack { transition: none; }
  .mon img, .mon::after, .mon .titlecard { transition: none; }
  .board img { filter: none; transition: none; }
  .board::before { opacity: 0.5; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   PROGRAMME (ivory inverted section)
   ============================================================ */

.programme {
  background: var(--playbill);
  color: var(--ink-on-paper);
}

.programme .eyebrow { color: var(--velvet); }

/* the programme h2 rule below would shrink it — keep the full knockout size */
.programme .section-title {
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 0.96;
  margin: 0;
}

.programme-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

@media (max-width: 900px) { .programme-grid { grid-template-columns: 1fr; } }

.programme h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12;
  margin: 0.9rem 0 1.4rem;
}

.programme p {
  max-width: var(--measure);
  margin-bottom: 1.1rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-soft-on-paper);
}

.programme p strong { color: var(--ink-on-paper); font-weight: 600; }

.programme-aside {
  border-top: 2px solid var(--ink-on-paper);
  padding-top: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.programme-aside .slate { color: var(--ink-soft-on-paper); }
.programme-aside .slate b { color: var(--ink-on-paper); }

/* ============================================================
   PRESS
   ============================================================ */

.press-list { display: flex; flex-direction: column; }

.press-item {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--house-line);
  transition: background 300ms;
}

.press-item:first-child { border-top: 1px solid var(--house-line); }

.press-item:hover { background: rgba(239, 231, 216, 0.03); }

.press-item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  transition: color 220ms;
}

.press-item:hover h3 { color: var(--playbill); }

.press-item .arrow {
  font-family: var(--font-data);
  color: var(--velvet-bright);
  font-size: 1rem;
}

@media (max-width: 720px) {
  .press-item { grid-template-columns: 1fr; gap: 0.4rem; }
  .press-item .arrow { display: none; }
}

/* ============================================================
   TEAM
   ============================================================ */

/* ---- the roster grid (team-portraits pass) ----
   explicit column counts (not auto-fill) so the closing enquiries cell can span whatever the
   last row leaves empty: 17 staff is prime, every column count leaves a partial row */
.company-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--house-line);
  border-left: 1px solid var(--house-line);
}
@media (max-width: 1199px) { .company-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .company-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the roster section has no section-title of its own (the hero carries "The Team"), so it does not
   need the full section padding above or below — the grid sits close under the hero and the
   footer follows the last row without a blank velvet band */
.team-roster { padding-top: clamp(1.5rem, 3vh, 2.5rem); padding-bottom: clamp(2rem, 4vh, 3rem); }

/* the lead row — all five, one line, never wraps to a second line at desktop */
.leaders { display: flex; border-top: 1px solid var(--house-line); border-left: 1px solid var(--house-line); }
.leaders .member { flex: 1 1 0; min-width: 0; }
.leaders .member.is-lead .member-id h3 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.12; }
.leaders .member-id .slate { font-size: 0.6rem; }
/* below ~1100px the leads go 3 + 2, then two per row all the way down (a 4:5 portrait two-up
   is still a proper headshot on a phone; one-up made the page twelve thousand pixels tall) */
@media (max-width: 1099px) {
  .leaders { flex-wrap: wrap; }
  .leaders .member { flex: 1 1 33%; }   /* a true third: three per row, then two */
}
@media (max-width: 699px) {
  .leaders .member { flex: 1 1 50%; }
  /* five leads two-up leaves the fifth (Colin, last by the owner's order) alone on a full row —
     that card turns sideways: portrait left at half width, name and role beside it */
  .leaders .member:last-child { flex-direction: row; align-items: flex-end; gap: 1rem; }
  .leaders .member:last-child .member-photo { flex: 0 0 calc(50% - 0.5rem); }
  .leaders .member:last-child .member-id { flex: 1 1 auto; padding-bottom: 0.2rem; }
}

.member {
  border-right: 1px solid var(--house-line);
  border-bottom: 1px solid var(--house-line);
  padding: 1.3rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
@media (max-width: 599px) { .member { padding: 0.8rem 0.8rem 1rem; gap: 0.75rem; } }

.member-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  background: var(--house-deep);
  container-type: inline-size;
}

/* the headshot fills the 4:5 frame and sits over the monogram; a missing file (404 → JS adds
   .no-photo to the tile and hides the img) lets the monogram tile show through instead */
.member-photo img {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.9);
}
.member.no-photo .member-photo img { display: none; }
/* initials-only (class on <body>): every tile shows the monogram, the dossier too — headshots parked until a photo motif is chosen */
body.initials-only .member-photo img { display: none; }

/* headshots power on like a wall of monitors as they scroll in. The dark state is only applied
   once JS has marked the figure .will-on (so no-JS, a JS error, or the observer never firing all
   leave the photo plainly visible); JS also force-reveals any straggler after a few seconds */
html.js .member-photo.will-on img { clip-path: inset(49.8% 0 49.8% 0); opacity: 0; filter: brightness(0.4) saturate(0.5); }
html.js .member-photo.will-on img.is-on { clip-path: inset(0 0 0 0); opacity: 1; filter: saturate(0.9);
  transition: clip-path 520ms var(--ease-stage), opacity 240ms ease, filter 700ms ease; }
@media (prefers-reduced-motion: reduce) {
  html.js .member-photo.will-on img { clip-path: none; opacity: 1; transition: none; filter: saturate(0.9); }
}

/* the monogram tile — the typographic portrait for a member without a headshot: initials in the
   display voice at scale, a hairline frame with an inset second frame, a short rule beneath,
   and a faint diagonal grain so the field reads as a chosen surface rather than an empty box */
.member-photo .monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0 0.7rem 6cqi;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 30cqi, 5.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--playbill);
  border: 1px solid var(--house-line);
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(239, 231, 216, 0.07), transparent 100%),
    repeating-linear-gradient(135deg, rgba(239, 231, 216, 0.045) 0 1px, transparent 1px 7px);
}
.member-photo .monogram::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(239, 231, 216, 0.22);
  pointer-events: none;
}
.member-photo .monogram::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 14cqi;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(239, 231, 216, 0.55);
}

.dossier-mono img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.member-id {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
}

.member-id h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
@media (max-width: 599px) { .member-id h3 { font-size: 1.02rem; } .member .slate { font-size: 0.6rem; } }

.member.is-lead { background: var(--house-deep); }
.member.is-lead .member-id h3 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }

.member .slate { font-size: 0.68rem; letter-spacing: 0.08em; }

/* the closing cell — takes the empty cells of the roster's last row: five or four columns leave
   three free; three or two columns leave one */
.member.member-end { grid-column: span 3 / -1; justify-content: flex-end; }
@media (max-width: 899px) { .member.member-end { grid-column: span 1 / -1; } }
.member.member-end .member-id { flex: 0 0 auto; gap: 0.6rem; }
.member.member-end h3 { font-size: clamp(1.05rem, 1.6vw, 1.5rem); }
.member.member-end h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(239, 231, 216, 0.4);
  transition: border-color 220ms; }
.member.member-end h3 a:hover { border-bottom-color: var(--playbill); }
/* the address is one unbreakable 27-character word: in a single-column cell (three columns and
   below) it cannot fit, so the link carries a short label there and the full address everywhere else */
.member.member-end .me-short { display: none; }
@media (max-width: 899px) {
  .member.member-end .me-long { display: none; }
  .member.member-end .me-short { display: inline; }
}

/* ---------- the velvet page (team) ---------- */
.velvet-page { background: var(--velvet); color: var(--playbill); }
.velvet-page .site-foot { background: var(--house-black); }
.velvet-page .section-title, .velvet-page h1, .velvet-page h2, .velvet-page .member h3 { color: var(--playbill); }
.velvet-page .section-title { background: var(--house-black); color: var(--playbill); }
.velvet-page .section-title em { color: var(--velvet-bright); }
.velvet-page .eyebrow { color: rgba(239, 231, 216, 0.75); }
.velvet-page .company-grid, .velvet-page .leaders { border-top-color: rgba(239, 231, 216, 0.3); border-left-color: rgba(239, 231, 216, 0.3); }
.leaders + .company-grid { border-top: 0; }
.velvet-page .member { border-right-color: rgba(239, 231, 216, 0.3); border-bottom-color: rgba(239, 231, 216, 0.3); }
.velvet-page .member .slate { color: rgba(239, 231, 216, 0.78); }
.velvet-page .member-photo { background: rgba(16, 14, 12, 0.35); }
.velvet-page .member-photo .monogram { color: var(--playbill); border-color: rgba(239, 231, 216, 0.35); }
.velvet-page .member-photo .monogram::after { border-color: rgba(239, 231, 216, 0.3); }
.velvet-page .member.is-lead { background: var(--house-deep); }
.velvet-page .member.is-lead .slate { color: var(--fog); }
.velvet-page ::selection { background: var(--playbill); color: var(--velvet); }
.velvet-page :focus-visible { outline-color: var(--playbill); }

/* ---------- the dual-city clock band ---------- */
.clockband { padding: clamp(5rem, 14vh, 8rem) var(--gutter) clamp(2.5rem, 6vh, 4rem); }
.cb-eyebrow { font-family: var(--font-data); font-size: 0.88rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(239, 231, 216, 0.75); margin-bottom: 1.2rem; }
/* the bezel — the time in a logo-geometry frame, so it reads as a digital clock */
.cb-frame { position: relative; display: inline-block;
  font-size: clamp(1.9rem, 6.2vw, 5.6rem);
  text-align: center;                 /* JS pins the width to the widest reading */
  padding: 0.14em 0.2em 0.2em; border: 0.05em solid #ffffff; }
.cb-frame .cb-line, .cb-frame .cb-static { color: #ffffff; }
.cb-flash { position: absolute; inset: 0; background: #ffffff; opacity: 0; pointer-events: none; }
.cb-line { font-family: "Archivo", sans-serif; font-stretch: 125%; font-weight: 800;
  font-size: clamp(1.9rem, 6.2vw, 5.6rem); line-height: 0.96; letter-spacing: 0.005em;
  text-transform: uppercase; margin: 0; min-height: 1em; white-space: nowrap; }
.cb-static { display: none; font-family: "Archivo", sans-serif; font-stretch: 125%; font-weight: 800;
  font-size: clamp(1.4rem, 4vw, 3.4rem); line-height: 1.05; text-transform: uppercase; margin: 0; }
html.js .cb-static { display: block; position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .cb-line { display: none; }
html:not(.js) .cb-static { display: block; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-foot {
  border-top: 1px solid var(--house-line);
  padding: clamp(3rem, 8vh, 5rem) var(--gutter) 2rem;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-brand {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: 0.06em;
  line-height: 1;
}

.foot-brand img { height: clamp(38px, 5vw, 54px); width: auto; }

.foot-note {
  margin-top: 1.2rem;
  max-width: 30ch;
  color: var(--fog);
  font-size: 0.9rem;
}

.foot-office h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--velvet-bright);
  margin-bottom: 0.9rem;
}

.foot-office address {
  font-style: normal;
  font-family: var(--font-data);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--fog);
}

.foot-office a:hover { color: var(--playbill); }

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--house-line);
  padding-top: 1.4rem;
}

.foot-legal, .foot-legal a {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--fog-faint);
}

.foot-legal a:hover { color: var(--playbill); }

.foot-social { display: flex; gap: 1.4rem; }

/* ============================================================
   SUBPAGES — hero load moments + split bodies
   ============================================================ */

/* ---------- subpage hero moments ---------- */
.pg-hero { position: relative; min-height: 52svh; display: flex; align-items: flex-end; overflow: hidden; }
@media (min-width: 721px) { .pg-hero { min-height: max(52svh, 30rem); } }
.pg-hero .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.pg-hero .sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(16, 14, 12, 0.12) 0 1px, transparent 1px 4px); }
.pg-hero .glow { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 55% 75% at 30% 0%, rgba(239, 231, 216, 0.32), transparent 65%),
              radial-gradient(ellipse 55% 75% at 72% 0%, rgba(239, 231, 216, 0.24), transparent 65%); }
.pg-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(16, 14, 12, 0.9), rgba(16, 14, 12, 0.15) 60%); }
.pg-hero-copy { position: relative; z-index: 3; padding: 0 var(--gutter) clamp(2rem, 5vh, 3.4rem); }
.pg-wn .art { object-position: center 30%; }
/* PGStudio's title is short — it takes the standard page-header size */
.pg-title { font-family: var(--font-display);
  font-size: clamp(2.35rem, 6.6vw, 5.8rem); line-height: 0.98; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--playbill); margin: 0.5rem 0 0;
  display: inline-block; background: var(--velvet); padding: 0.02em 0.16em 0.07em; }

/* one-time load moments (JS drives the class add) */
html.js .pg-st .glow { opacity: 0; }
html.js .pg-st.is-on .glow { opacity: 1; transition: opacity 900ms ease; }
html.js .pg-st .art { filter: brightness(0.35); transition: filter 900ms ease; }
html.js .pg-st.is-on .art { filter: brightness(0.95); }

/* ---------- the marquee (news, round 8) ---------- */
/* type-scale polish: panels were viewport-tall (88svh) with a 4.7rem headline — six
   stories ran to six screens. Now each cutting fits its content inside a generous
   but finite frame, and the headline sits one step down the display scale
   (4.2vw / 3.8rem, the show-subtitle band) on a slightly wider measure so it wraps
   to fewer lines rather than the same lines shrunk. */
.marquee { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 7vh, 4.5rem) var(--gutter);
  border-bottom: 1px solid var(--house-line); }
.mq-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1 1 auto; }
.marquee:first-of-type { border-top: 1px solid var(--house-line); }
/* eyebrow sits inside the shared top offset so the h1 lands level with other pages */
.wire-head { padding-top: calc(clamp(7rem, 16vh, 11rem) - 1.4rem); padding-bottom: clamp(2rem, 5vh, 3.5rem); }
.marquee:last-of-type { border-bottom: 0; }
.mq-slate { display: block; font-family: var(--font-data); font-size: 1rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--velvet-bright); margin-bottom: 1.1rem; }
.mq-head { font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.02;
  font-size: clamp(1.8rem, 4.2vw, 3.8rem); color: var(--playbill); max-width: 24ch; margin: 0; }
.mq-words { background: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.06em; margin-left: -0.06em; }
.mq-key { transition: background 260ms var(--ease-stage);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.04em; }
.marquee:hover .mq-key, .marquee:focus-visible .mq-key { background: var(--velvet); }
.mq-arrow { display: inline-block; color: var(--velvet-bright); font-size: 0.62em; margin-left: 0.35em;
  transition: transform 300ms var(--ease-stage); }
.marquee:hover .mq-arrow, .marquee:focus-visible .mq-arrow { transform: translateX(8px); }

/* the press plate — each cutting carries its publication's masthead, typeset in
   house and set at a stamp's tilt on the right of the marquee. Rests as ink on the
   plate, goes velvet when the cutting is hovered; decorative, the slate carries
   the words for readers who cannot see it. */
.mq-plate { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  transform: rotate(-5deg); transform-origin: 50% 50%; margin-right: clamp(0.5rem, 3vw, 3rem);
  color: var(--playbill); opacity: 0.62;
  transition: opacity 320ms var(--ease-stage), transform 420ms var(--ease-stage), color 320ms; }
.mq-plate .pl-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-width: clamp(13rem, 24vw, 22rem); min-height: clamp(8.5rem, 15vw, 14rem); padding: 1.4rem 2rem;
  border: 3px double currentColor; outline: 1px solid rgba(239, 231, 216, 0.14); outline-offset: 4px;
  transition: outline-color 320ms; }
.mq-plate .pl-mark { display: block; font-family: var(--font-display); font-weight: 900; line-height: 0.9;
  text-transform: uppercase; }
.mq-plate .pl-sub { display: block; font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.26em;
  text-transform: uppercase; margin-top: 0.55rem; opacity: 0.8; }
.mq-plate .pl-date { font-family: var(--font-data); font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--velvet-bright); }
.mq-plate-ew .pl-mark { font-size: clamp(4rem, 8vw, 7.2rem); font-variation-settings: "wdth" 125, "wght" 900; letter-spacing: -0.02em; }
.mq-plate-deadline .pl-mark { font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-variation-settings: "wdth" 72, "wght" 900; letter-spacing: 0.04em; }
.mq-plate-variety .pl-mark { font-family: "Playfair Display", Georgia, serif; font-weight: 900; text-transform: none;
  font-size: clamp(3.2rem, 6vw, 5.4rem); letter-spacing: -0.01em; }
.mq-plate-radiotimes .pl-mark { font-size: clamp(2.3rem, 4.2vw, 3.8rem); font-variation-settings: "wdth" 100, "wght" 800; letter-spacing: 0.02em; line-height: 0.92; }
.mq-plate-boltonnews .pl-mark { font-size: clamp(2rem, 3.8vw, 3.4rem); font-variation-settings: "wdth" 90, "wght" 900; letter-spacing: 0.03em; line-height: 0.92; }
.mq-plate-nyt .pl-mark { font-family: "Playfair Display", Georgia, serif; font-weight: 900; text-transform: none;
  font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -0.01em; line-height: 0.95; }
.mq-plate-ankler .pl-mark { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; text-transform: none;
  font-size: clamp(2.6rem, 5vw, 4.4rem); letter-spacing: 0; }
.marquee:hover .mq-plate, .marquee:focus-visible .mq-plate { opacity: 1; color: var(--velvet-bright); transform: rotate(-3deg) scale(1.03); }
.marquee:hover .pl-frame, .marquee:focus-visible .pl-frame { outline-color: rgba(176, 41, 64, 0.45); }
@media (max-width: 860px) {
  .marquee { flex-direction: column; align-items: flex-start; gap: 2.2rem; }
  .mq-plate { align-self: flex-end; margin-right: 1.2rem; transform: rotate(-5deg) scale(0.78); transform-origin: 100% 50%; }
  .marquee:hover .mq-plate, .marquee:focus-visible .mq-plate { transform: rotate(-3deg) scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .mq-plate { transition: none; } }

/* ---------- NOW | NEXT landing pages (round 7) ---------- */
.nn { display: flex; align-items: stretch; gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter); }
.nn-now { flex: 1.6 1 0; min-width: 0; padding-top: clamp(1rem, 2.5vw, 1.8rem); }
.nn-next { flex: 1 1 0; min-width: 0; background: var(--house-deep);
  border-left: 1px solid rgba(140, 29, 47, 0.45); padding: clamp(1rem, 2.5vw, 1.8rem); }
.nn .section-title { font-size: clamp(1.75rem, 3.4vw, 3rem); }
.nn-now .eyebrow, .nn-next .eyebrow { margin-bottom: 0.55rem; }

/* NOW — one rectangular row per title */
.now-rows { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.2vh, 1rem); margin-top: 1.2rem; }
.now-row { position: relative; display: block; overflow: hidden; }
.now-row img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; display: block;
  transition: filter 500ms var(--ease-stage); }
.now-row .row-grad { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 14, 12, 0) 40%, rgba(16, 14, 12, 0.85) 100%); }
.now-row .row-plate { position: absolute; left: clamp(0.8rem, 2vw, 1.6rem); bottom: clamp(0.6rem, 1.6vh, 1.1rem); }
.now-row .row-title { display: block; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--playbill);
  font-size: clamp(1.15rem, 2vw, 1.8rem); line-height: 1; }
.now-row .row-slate { display: block; font-family: var(--font-data); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); margin-top: 0.25rem; }
.now-row:hover img, .now-row:focus-visible img { filter: brightness(1.12); }

/* ---------- the premiere lead — Watch Now's first item when a title is premiering ----------
   Same still treatment and type as the rows beneath, at a bigger scale: a taller
   frame, the status chip on the still, title and meta on the plate, and the two
   actions — the trailer in the house lightbox, the platform link out. One lead at
   a time; with no premiere the stack runs equal. */
.now-lead { display: block; }
.now-lead .lead-still { display: block; position: relative; }
/* the whole still goes to the show page; the chip and trailer control (z 3) sit above it */
.now-lead .lead-still-link { position: absolute; inset: 0; z-index: 2; }
/* the trailer sits on the still as a play control, lower-left; the still itself is not a link */
.now-lead .lead-trailer { position: absolute; left: clamp(0.8rem, 2vw, 1.6rem); bottom: clamp(0.8rem, 2vw, 1.4rem); z-index: 3; }
.now-lead .lead-trailer .lead-play { font-size: 0.8em; }
.now-lead .lead-still img { aspect-ratio: 2 / 1; }
/* nothing sits on the faces: the still carries only the chip, the plate runs beneath it */
.now-lead .row-grad { background: linear-gradient(180deg, rgba(16, 14, 12, 0) 60%, rgba(16, 14, 12, 0.45) 100%); }
.now-lead .lead-chip { position: absolute; top: clamp(0.8rem, 2vw, 1.4rem); left: clamp(0.8rem, 2vw, 1.6rem); z-index: 3;
  font-family: var(--font-data); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--playbill); background: var(--velvet); border: 1px solid var(--playbill); padding: 0.48rem 0.8rem;
  pointer-events: none; }
.now-lead .lead-plate { padding: 1.1rem 0 0.6rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.now-lead .lead-title { font-size: clamp(1.9rem, 3.8vw, 3.4rem); text-decoration: none; }
.now-lead .lead-title:hover, .now-lead .lead-title:focus-visible { text-decoration: underline; text-underline-offset: 0.12em;
  text-decoration-thickness: 2px; }
.now-lead .lead-slate { font-size: 0.8rem; margin-top: 0.45rem; }
/* where to watch: two equal burgundy bars, the UK one live, the US one dated */
.now-lead .lead-watch-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; width: min(100%, 44rem);
  margin-top: clamp(0.9rem, 2vh, 1.3rem); }
.now-lead .lead-watch { flex-direction: column; justify-content: center; gap: 0.35rem; padding: 0.85rem 1rem; text-align: center; }
/* the qualifier sits on its own line under the platform name, so both bars read as a matched pair */
.now-lead .lead-note { display: block; font-weight: 400; font-size: 0.6rem; letter-spacing: 0.14em; opacity: 0.85; }

.lead-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.78rem 1.2rem; line-height: 1;
  font-family: var(--font-data); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background 240ms, color 240ms, border-color 240ms; }
.lead-btn .lead-play { font-size: 0.65em; }
.lead-btn-solid { color: var(--playbill); background: var(--velvet-bright); border: 1px solid var(--velvet-bright); }
.lead-btn-solid:hover, .lead-btn-solid:focus-visible { background: var(--playbill); color: var(--velvet-bright); border-color: var(--playbill); }
.lead-btn-ghost { color: var(--playbill); background: rgba(16, 14, 12, 0.35); border: 1px solid rgba(239, 231, 216, 0.8);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lead-btn-ghost:hover, .lead-btn-ghost:focus-visible { background: var(--playbill); color: var(--house-black); border-color: var(--playbill); }
.lead-btn:focus-visible { outline: 2px solid var(--velvet-bright); outline-offset: 3px; }
.lead-btn[data-trailer=""], .lead-btn[hidden] { display: none; }
@media (max-width: 720px) {
  .now-lead .lead-still img { aspect-ratio: 3 / 2; }
  .now-lead .lead-plate { padding: 0.9rem 0 0.3rem; }
  .now-lead .lead-watch-row { grid-template-columns: 1fr; width: 100%; }
}

/* the trailer box — the house lightbox for any [data-trailer] control */
.trailer-box { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem); }
.trailer-scrim { position: absolute; inset: 0; background: rgba(16, 14, 12, 0.9); }
.trailer-frame { position: relative; z-index: 1; width: min(100%, 1100px); aspect-ratio: 16 / 9; background: #000;
  outline: 1px solid var(--house-line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.trailer-frame iframe, .trailer-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-close { position: absolute; top: 1.2rem; right: 1.4rem; z-index: 2; background: none; border: 1px solid var(--house-line);
  color: var(--playbill); font-family: var(--font-data); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.5rem 0.9rem; cursor: pointer; }
.trailer-close:hover, .trailer-close:focus-visible { border-color: var(--playbill); }

/* NEXT — dark cards that power on */
.next-card { position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.4rem; text-align: center; text-decoration: none;
  aspect-ratio: 16 / 6.4; margin-bottom: clamp(0.6rem, 1.2vh, 1rem);
  background: var(--house-black); outline: 1px solid var(--house-line); overflow: hidden; }
.next-card .nc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.next-card .nc-grad { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 14, 12, 0.25), rgba(16, 14, 12, 0.72)); }
.next-card .nc-title { position: relative; z-index: 2; font-family: var(--font-display);
 text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--playbill); font-size: clamp(1rem, 1.6vw, 1.5rem); padding: 0 0.6rem; }
.next-card .nc-slate { position: relative; z-index: 2; font-family: var(--font-data);
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog-faint); padding: 0 0.6rem; }
html.js .next-card .nc-art, html.js .next-card .nc-grad { clip-path: inset(49.6% 0 49.6% 0);
  transition: clip-path 520ms var(--ease-stage); }
@media (hover: hover) {
  html.js .next-card:hover .nc-art, html.js .next-card:hover .nc-grad,
  html.js .next-card:focus-visible .nc-art, html.js .next-card:focus-visible .nc-grad { clip-path: inset(0 0 0 0); }
}
html.js .next-card.is-on .nc-art, html.js .next-card.is-on .nc-grad { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  html.js .next-card .nc-art, html.js .next-card .nc-grad { transition: none; }
  .now-row img { transition: none; }
}

/* NEXT plaque cards (no art / under wraps) */
.next-plaque .plaque-t { font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--playbill);
  font-size: clamp(1rem, 1.6vw, 1.5rem); padding: 0 0.6rem; }
.next-plaque .plaque-s { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--velvet-bright); }
.next-plaque .wraps { font-size: 0.62rem; }
.next-card.next-plaque:focus-visible { outline: 2px solid var(--velvet-bright); outline-offset: 3px; }
/* the secret one on the stage landing: the band mostly redacts the title */
.nn-stage .next-plaque .wraps { font-size: 1.05rem; padding: 0.85rem 1.5rem 0.85rem 1.85rem; }

/* theatre NEXT cards light up — the boards' move, never the TV power-on */
html.js .nn-stage .next-card .nc-art, html.js .nn-stage .next-card .nc-grad {
  clip-path: none; filter: brightness(0.22) saturate(0.55);
  transition: filter 650ms var(--ease-stage); }
@media (hover: hover) {
  html.js .nn-stage .next-card:hover .nc-art, html.js .nn-stage .next-card:hover .nc-grad,
  html.js .nn-stage .next-card:focus-visible .nc-art, html.js .nn-stage .next-card:focus-visible .nc-grad { filter: brightness(1) saturate(1); }
}
html.js .nn-stage .next-card.is-on .nc-art, html.js .nn-stage .next-card.is-on .nc-grad { filter: brightness(1) saturate(1); }
@media (prefers-reduced-motion: reduce) {
  html.js .nn-stage .next-card .nc-art, html.js .nn-stage .next-card .nc-grad { transition: none; }
}

/* ---------- the transmission schedule (television Up Next) ----------
   A listings column: the date stamped down the left on a spine, the art lit to
   the right, every title showing at once. Under each date the day-count rolls up
   from zero as the rail scrolls in and reads live from then on; the beacon on the
   spine marks the next transmission. Rows spread to fill the rail, so the column
   stays level with Watch Now. */
.nn-sched .nn-now { flex: 1.45 1 0; }
.nn-sched .nn-next { display: flex; flex-direction: column; }
.sched-list { list-style: none; margin: 1.2rem 0 0; padding: 0; position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(0.6rem, 1.2vh, 1rem); }
.sched-list::before { content: ""; position: absolute; left: 0.55rem; top: 0.7rem; bottom: 0.7rem; width: 1px;
  background: var(--house-line); }
.sched-card { position: relative; display: flex; gap: clamp(0.7rem, 1.4vw, 1rem); align-items: stretch; color: inherit; }
.sched-card a { text-decoration: none; color: inherit; }
.sched-card .sd { position: relative; flex: 0 0 6.4rem; padding: 0.15rem 0 0 1.35rem; display: flex; flex-direction: column; }
.sched-card .sd::before { content: ""; position: absolute; left: calc(0.55rem - 3px); top: 0.55rem; width: 7px; height: 7px;
  box-sizing: border-box; border-radius: 50%; background: var(--house-deep); border: 1px solid var(--fog-faint); }
/* the beacon rides the spine: JS parks it on whichever row has crossed the reading
   line as the page scrolls, it travels there, and the row it lands on lights */
.sched-beacon { position: absolute; left: calc(0.55rem - 4.5px); top: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--velvet-bright); z-index: 2; pointer-events: none;
  transform: translateY(var(--y, 0px)); animation: sched-beacon 2.8s ease-out infinite; }
.sched-beacon.is-set { transition: transform 700ms var(--ease-stage); }
@keyframes sched-beacon {
  0% { box-shadow: 0 0 10px 2px rgba(176, 41, 64, 0.55), 0 0 0 0 rgba(176, 41, 64, 0.6); }
  70% { box-shadow: 0 0 10px 2px rgba(176, 41, 64, 0.55), 0 0 0 10px rgba(176, 41, 64, 0); }
  100% { box-shadow: 0 0 10px 2px rgba(176, 41, 64, 0.55), 0 0 0 0 rgba(176, 41, 64, 0); } }
.sched-row.is-lit .sd::before { background: var(--velvet-bright); border-color: var(--velvet-bright); }
/* the calendar button — its own control over the art's top corner, ivory on
   smoked glass so it reads apart from the red data; data-calendar="off" on
   the section hides it */
.sched-card .sa-cal { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; display: inline-flex; align-items: center;
  gap: 0.45rem; font-family: var(--font-data); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--playbill); background: rgba(16, 14, 12, 0.62);
  border: 1px solid rgba(239, 231, 216, 0.75); padding: 0.5rem 0.7rem; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 240ms, color 240ms, border-color 240ms; }
.sched-card .sa-cal svg { width: 0.85rem; height: 0.85rem; flex: none; }
.sched-card .sa-cal:hover, .sched-card .sa-cal:focus-visible { background: var(--playbill); color: var(--house-black);
  border-color: var(--playbill); }
.sched-card .sa-cal:focus-visible { outline: 2px solid var(--velvet-bright); outline-offset: 3px; }
.sched[data-calendar="off"] .sa-cal { display: none; }
.sched-card .sd-m { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.82rem, 1.25vw, 1.02rem);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--playbill); line-height: 1; }
.sched-card .sd-d { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1;
  color: var(--playbill); margin-top: 0.3rem; letter-spacing: -0.01em; }
.sched-card .sd-d.sd-y { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-top: 0.42rem; letter-spacing: 0; }
.sched-card .sd-t { font-family: var(--font-data); font-weight: 600; font-size: clamp(0.7rem, 1vw, 0.8rem);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--velvet-bright); margin-top: 0.4rem; line-height: 1.2; min-height: 1.2em; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.sched-card.is-airing .sd-t { color: var(--playbill); }
.sched-card .sd-t2 { white-space: normal; }
.sched-card .sa { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.sched-card .sa { display: block; }
.sched-card .sa img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  filter: brightness(0.82) saturate(0.94); transition: filter 600ms var(--ease-stage); }
.sched-row.is-lit .sa img { filter: brightness(1.12) saturate(1.04); }
.sched-card .sa-grad { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 14, 12, 0) 45%, rgba(16, 14, 12, 0.86) 100%); }
.sched-card .sa-plate { position: absolute; left: 0.8rem; right: 0.6rem; bottom: 0.65rem; }
.sched-card .sa-title { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--playbill); font-size: clamp(0.95rem, 1.35vw, 1.25rem); line-height: 1.02; }
.sched-card .sa-slate { display: block; font-family: var(--font-data); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fog); margin-top: 0.22rem; }
.sched-card .sa:hover img, .sched-card .sa:focus-visible img { filter: brightness(1.12) saturate(1.04); }
.sched-card a:focus-visible { outline: 2px solid var(--velvet-bright); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sched-beacon { animation: none; box-shadow: 0 0 10px 2px rgba(176, 41, 64, 0.55); }
  .sched-beacon.is-set { transition: none; }
  .sched-card .sa img { transition: none; } }

/* catalogue below */
.nn-cat { position: relative; padding: 0 var(--gutter) clamp(3rem, 8vh, 5.5rem); }
.nn-cat .col-head { margin: 1.4rem 0 1.1rem; }
.nn-cat .ledger-row { font-size: 0.78rem; }

/* the catalogue wall (stage) — past productions as photographs, not a ledger.
   Tiles rest slightly dimmed and light to full on hover, the same move the
   Next cards make; hairline under each plate, no boxes */
.cat-wall .col-head { margin: 1.4rem 0 1.5rem; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.2rem) clamp(0.9rem, 1.6vw, 1.4rem); }
.cat-tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.cat-tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  filter: brightness(0.74) saturate(0.88); transition: filter 650ms var(--ease-stage); }
/* the plate fills the tile and pins the slate to the bottom, so the hairlines and slates of a row
   stay level even if a title wraps; the title cap (1.08rem) keeps the longest one — The Spanish
   Princess I & II — on a single line down to the grid's 17rem column minimum */
.cat-tile .ct-plate { display: flex; flex-direction: column; flex: 1; padding: 0.7rem 0 0.8rem; border-bottom: 1px solid var(--house-line); }
.cat-tile .ct-title { display: block; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--playbill); font-size: clamp(0.95rem, 1.25vw, 1.08rem); line-height: 1.05; }
.cat-tile .ct-slate { display: block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fog-faint); margin-top: auto; padding-top: 0.4rem; transition: color 300ms; }
.cat-tile:hover img, .cat-tile:focus-visible img { filter: brightness(1) saturate(1); }
.cat-tile:hover .ct-slate, .cat-tile:focus-visible .ct-slate { color: var(--velvet-bright); }
.cat-tile:focus-visible { outline: 2px solid var(--velvet-bright); outline-offset: 3px; }
.cat-tile.reveal:nth-child(4n+2) { transition-delay: 90ms; }
.cat-tile.reveal:nth-child(4n+3) { transition-delay: 180ms; }
.cat-tile.reveal:nth-child(4n+4) { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) { .cat-tile img { transition: none; } .cat-tile.reveal { transition-delay: 0s; } }

@media (max-width: 860px) {
  .nn { flex-direction: column; }
  .nn-next { border-left: 0; border-top: 1px solid rgba(140, 29, 47, 0.45); }
}

/* ---------- desktop rhythm on the landings (density pass) ----------
   Wide screens left dark bands the phone never showed: a hole under the single
   Live Now row where the Next panel ran taller, the schedule's four cards
   spread thin down a rail sized by five Watch Now rows, and two paddings
   stacked between the last catalogue hairline and the footer's rule. Below
   860px nothing here applies. */
@media (min-width: 861px) {
  /* the block ends where its content ends; the catalogue eyebrow follows at a section beat */
  .nn { padding-bottom: clamp(1.75rem, 3.5vh, 2.25rem); }
  /* the last catalogue hairline hands straight to the footer's own rule */
  .nn-cat { padding-bottom: clamp(1.75rem, 3.5vh, 2.25rem); }

  /* stage: one row against two Next cards — the row takes the panel's height
     (a taller crop of the still) instead of leaving house-black under it */
  .nn-stage .nn-now { display: flex; flex-direction: column; }
  .nn-stage .now-rows { flex: 1 1 auto; }
  .nn-stage .now-row { flex: 1 1 auto; min-height: 0; }
  .nn-stage .now-row img { height: 100%; object-position: center 40%; }

  /* television: the schedule cards grow into the rail (art up to ~4:3) before
     any spread is left between them */
  .sched-row { display: flex; flex-direction: column; flex: 1 1 auto; max-height: 17rem; }
  .sched-card { flex: 1 1 auto; }
  .sched-card .sa img { height: 100%; }

  /* the television wall runs 14 titles: a 14.75rem column minimum seats them
     5 across at 1440 and 7 across at 1920 (two full rows) instead of ending
     on a two-tile row; the stage wall's 12 keep the shared 17rem minimum */
  .nn-sched + .nn-cat .cat-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.75rem), 1fr)); }
}

/* ---------- company page (round 6) ---------- */
.co-band { border-bottom: 1px solid rgba(176, 41, 64, 0.4); }
.co-body { padding-top: clamp(7rem, 16vh, 11rem); }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.co-copy p { max-width: var(--measure); margin-bottom: 1.1rem; font-size: 1.02rem;
  line-height: 1.75; color: var(--fog); }
.co-copy p strong { color: var(--playbill); font-weight: 600; }
.co-copy p em { color: var(--playbill); }

/* company page — proof beside the copy. Desktop is two columns: the three
   approved paragraphs left, each under a col-head eyebrow and a hairline; a
   2-up wall of now/next stills right (reuses .cat-tile from the catalogue
   walls). Below, a hairlined broadcasters slate row, then the catalogue and
   stage walls full width in fours. Hairlines + negative space, no boxes. */
.co-grid.co-split { grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5.5rem); align-items: stretch; }
/* the three parts spread over the wall's height so the two columns end together */
.co-split .co-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 1.7rem; }
.co-part { border-top: 1px solid var(--house-line); padding-top: 1rem; }
.co-part .col-head { margin: 0 0 0.75rem; }
.co-part p:last-child { margin-bottom: 0; }
.co-wall .col-head { margin: 0 0 1.2rem; }
.co-wall .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-wall-now .cat-grid { gap: clamp(1.2rem, 2vw, 1.8rem) clamp(0.9rem, 1.6vw, 1.4rem); }
.co-wall-full { margin-top: clamp(2.5rem, 6vh, 4rem); }
.co-wall-full .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.co-wall-full .cat-grid + .col-head { margin-top: clamp(2.4rem, 6vh, 3.8rem); }
.co-partners { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 2.6rem;
  margin-top: clamp(2.5rem, 6vh, 4rem); padding: 1.15rem 0;
  border-top: 1px solid var(--house-line); border-bottom: 1px solid var(--house-line); }
.co-partners .col-head { margin: 0; flex: 0 0 auto; }
.co-partners ul { list-style: none; display: flex; flex-wrap: wrap; flex: 1 1 auto;
  justify-content: space-between; gap: 0.5rem 1.6rem; }
.co-partners li { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--fog); white-space: nowrap; }
@media (max-width: 1200px) {
  .co-grid.co-split { grid-template-columns: minmax(0, 1fr); }
  .co-wall-full .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-partners ul { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .co-wall .cat-tile .ct-title { font-size: 0.8rem; }
  .co-wall .cat-tile .ct-slate { font-size: 0.56rem; }
}

/* team dossiers — the pop-out bio card; bios live in the markup as data (wave 4) */
.member > .bio { display: block; border-top: 1px solid var(--house-line); padding-top: 0.9rem;
  font-size: 0.8rem; line-height: 1.6; color: var(--fog); }
.member > .bio .bio-n, .member > .bio .bio-r { display: none; }   /* name/role already on the tile */
html.js .member > .bio { display: none; }                          /* JS: the dossier reads from here */
.member.has-bio { cursor: pointer; }
.bio-cue { display: none; }
/* the cue reads as an affordance on both the black lead cards and the velvet grid: playbill ink
   with a hairline underline (velvet-bright on velvet was a near-invisible red-on-red) */
html.js .bio-cue { display: inline-block; align-self: flex-start; font-family: var(--font-data); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(239, 231, 216, 0.82); margin-top: auto;
  padding-top: 0.55rem; border-bottom: 1px solid rgba(239, 231, 216, 0.4);
  transition: color 220ms, border-color 220ms; }
html.js .member.has-bio:hover .bio-cue, html.js .member.has-bio:focus-visible .bio-cue {
  color: var(--playbill); border-bottom-color: var(--playbill); }

body.dossier-lock { overflow: hidden; }
.dossier { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: var(--gutter); background: rgba(16, 14, 12, 0.72); }
.dossier[hidden] { display: none; }
html.js .dossier { opacity: 0; transition: opacity 300ms var(--ease-stage); }
html.js .dossier.is-open { opacity: 1; }
.dossier-card { position: relative; display: flex; width: min(880px, 100%); max-height: 84svh;
  background: var(--house-black); border: 1px solid rgba(176, 41, 64, 0.45);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55); }
html.js .dossier-card { transform: translateY(14px); transition: transform 380ms var(--ease-stage); }
html.js .dossier.is-open .dossier-card { transform: none; }
.dossier-rail { flex: 0 0 34%; background: var(--house-deep); border-right: 1px solid var(--house-line);
  padding: clamp(1.2rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 1rem; }
/* the photo slot keeps the headshots' own 4:5 — it used to stretch to the bio column's height, so a long bio
   (Colin's) turned it into a tall strip and the cover-crop sliced the face */
.dossier-mono { flex: none; aspect-ratio: 4 / 5; min-height: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.6rem); color: var(--playbill);
  border: 1px solid var(--house-line); background: var(--house-black); }
.dossier-name { font-size: clamp(1.3rem, 2.2vw, 1.9rem); text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1.05; }
.dossier-role { font-family: var(--font-data); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--velvet-bright); }
.dossier-body { flex: 1; padding: clamp(1.4rem, 3vw, 2.4rem); padding-right: clamp(2.6rem, 4vw, 3.4rem);
  overflow-y: auto; font-size: 0.98rem; line-height: 1.75; color: var(--fog);
  scrollbar-width: thin; scrollbar-color: var(--velvet-bright) transparent; }
.dossier-body::-webkit-scrollbar { width: 4px; }
.dossier-body::-webkit-scrollbar-thumb { background: var(--velvet-bright); }
.dossier-close { position: absolute; top: 0.8rem; right: 0.9rem; z-index: 2; background: none;
  border: 1px solid var(--house-line); color: var(--fog); font-family: var(--font-data);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.45rem 0.8rem; cursor: pointer; transition: color 220ms, border-color 220ms; }
.dossier-close:hover { color: var(--playbill); border-color: var(--velvet-bright); }
.dossier-who { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
@media (max-width: 700px) {
  .dossier-card { flex-direction: column; max-height: 88svh; }
  /* on a phone the rail turns sideways: portrait or monogram at a third of the width, name and role
     beside it at its foot (clear of the close button), so the bio starts on the first screen instead
     of under a full-width 4:5 plate */
  .dossier-rail { flex: 0 0 auto; flex-direction: row; align-items: flex-end; gap: 1rem;
    border-right: 0; border-bottom: 1px solid var(--house-line); }
  .dossier-mono { flex: 0 0 34%; min-height: 0; padding: 0; font-size: 2.2rem; }
  .dossier-who { padding-bottom: 0.2rem; }
  .dossier-name { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { html.js .dossier, html.js .dossier-card { transition: none; } }

/* ---------- show pages (round 5: the Poster template) ---------- */
.pg-show .pg-title { font-size: clamp(1.9rem, 5vw, 4.6rem); } /* long titles fit */
/* stage heroes run taller than the TV ones — production stills are full-height bodies,
   and the 52svh band was decapitating them; each page also sets its own object-position */
@media (min-width: 721px) { .pg-show-st { min-height: max(64svh, 34rem); } }
/* a taller show head for a company photograph: the faces sit above the title band at every width */
.pg-show-tall { min-height: 68svh; }
@media (min-width: 721px) { .pg-show-tall { min-height: max(74svh, 37rem); } }

/* TV entrance — power on (wall bars + hero ignition, one-directional, once) */
html.js .pg-show-tv .art { animation: showTvOn 900ms cubic-bezier(0.22, 1, 0.36, 1) 1 both; }
@keyframes showTvOn {
  0%   { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(2.4); }
  30%  { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(2.4); }
  65%  { clip-path: inset(0 0 0 0); filter: brightness(1.45); }
  100% { clip-path: inset(0 0 0 0); filter: brightness(1); }
}

/* key-art heroes (Treasure Island: the MGM+ teaser frame) — the art is a designed 16:9 with its own
   title and date, so the band takes the art's own height and runs it whole: no cover-crop, no bottom
   wash, and the page title sits under the frame instead of over it */
.pg-show-key { display: block; min-height: 0; }
@media (min-width: 721px) { .pg-show-key { min-height: 0; } }
.pg-show-key .art { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center; }
.pg-show-key::after { display: none; }
.pg-show-key .pg-hero-copy { padding-top: clamp(1.2rem, 3vh, 2rem); padding-bottom: clamp(0.8rem, 2vh, 1.2rem); }

/* stage entrance — lights up (site.js adds .is-on to any non-strip .pg-hero) */
html.js .pg-show-st .art { filter: brightness(0.1); transition: filter 1100ms ease; }
html.js .pg-show-st.is-on .art { filter: brightness(0.98); }
html.js .pg-show-st .glow { opacity: 0; transition: opacity 1100ms ease; }
html.js .pg-show-st.is-on .glow { opacity: 1; }

/* plaque shows (The Shining, Top Secret Musical) — the title card as hero */
.pg-show-plaque { align-items: center; justify-content: center; text-align: center; min-height: 44svh; }
.pg-show-plaque::after { display: none; }
.pg-show-plaque .pg-hero-copy { padding-bottom: 0; }
/* the textured plaque — a velvet field with grain and a vignette for a title that has no photography yet */
.pg-show-tex { background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(140, 29, 47, 0.42), transparent 100%),
    repeating-linear-gradient(135deg, rgba(239, 231, 216, 0.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #1a1114 0%, #120c0e 100%); }
.pg-show-tex::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
.pg-show-tex .pg-hero-copy { position: relative; z-index: 1; }
.show-card-title { font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--playbill);
  font-size: clamp(1.9rem, 5vw, 3.9rem); margin: 0.5rem 0 0.6rem; }
.show-card-slate { font-family: var(--font-data); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--velvet-bright); font-size: 0.78rem; }

/* show body — slate, logline, synopsis, call-sheet, back-link */
/* the slate sits close under the hero — the old 6vh top pad read as a black void between them */
.show-body { padding: clamp(1.25rem, 2.6vh, 1.75rem) var(--gutter) clamp(3.5rem, 8vh, 5.5rem); }
.show-slate { font-family: var(--font-data); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.95rem; color: var(--velvet-bright); margin-bottom: 1.4rem; }
.show-log { font-family: var(--font-body); font-stretch: 100%; font-weight: 500; font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.35; color: var(--playbill);
  max-width: var(--measure); margin-bottom: 1.2rem; }
.show-syn { max-width: var(--measure); margin-bottom: 2.2rem; }
.show-syn p { font-size: 1.02rem; line-height: 1.75; color: var(--fog); margin-bottom: 1rem; }

/* the second still — a wide frame from the production between story and credits */
.show-cta { margin: -0.6rem 0 2.6rem; }
.show-cta .cta-btn { text-align: left; }
.show-still { margin: 0 0 2.6rem; }
.show-still img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block;
  outline: 1px solid var(--house-line); outline-offset: -1px; }
/* a portrait image (poster, upright still) is shown whole at a plate width instead of cropped to the strip */
.show-still-portrait img { width: min(100%, 26rem); aspect-ratio: auto; height: auto; }
.show-still-tall img { aspect-ratio: 4 / 3; }
/* callsheet rows: role column fixed, names left-aligned at a consistent point —
   long credit lists wrap cleanly instead of right-aligning raggedly */
.callsheet { max-width: 56rem; margin-bottom: 2.4rem; }
.callsheet .ledger-row:first-of-type { border-top: 1px solid rgba(239, 231, 216, 0.16); }
.callsheet .ledger-row { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 1.5rem; }
.callsheet .ledger-row .who { color: var(--playbill); text-align: left; }
@media (max-width: 640px) { .callsheet .ledger-row { grid-template-columns: 1fr; gap: 0.1rem; padding-bottom: 0.7rem; } }
.show-back a { font-family: var(--font-data); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; color: var(--velvet-bright); text-decoration: none; }
.show-back a:hover { color: var(--playbill); }

/* under-wraps band — the secret show, on tile and page */
.board.plaque .wraps, .pg-show-plaque .wraps, .next-plaque .wraps { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg); background: var(--velvet); color: var(--playbill);
  font-family: var(--font-data); letter-spacing: 0.28em; text-transform: uppercase;
  padding: 0.35rem 0.9rem 0.35rem 1.18rem; z-index: 4; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  pointer-events: none; }
.board.plaque .wraps { font-size: 0.62rem; }
.pg-show-plaque .wraps { font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  html.js .pg-show-tv .art { animation: none; }
  html.js .pg-show-st .art, html.js .pg-show-st .glow { transition: none; }
}

/* ---------- the succession strip (television hero) ---------- */
.pg-strip { padding: 0; min-height: 52svh; border-bottom: 1px solid rgba(239, 231, 216, 0.14); }
/* the strip's faces run cleaner than the other page heads: the scanlines
   are pulled back to a whisper, the shade over the top half is lifted,
   and the portraits get a touch more bite */
.pg-strip .sheen { background: repeating-linear-gradient(0deg, rgba(16, 14, 12, 0.055) 0 1px, transparent 1px 4px); }
.pg-strip::after { background: linear-gradient(to top, rgba(16, 14, 12, 0.88), rgba(16, 14, 12, 0.06) 62%); }
.pg-strip .px-tile .px-new { filter: contrast(1.05) saturate(1.04); }
@media (min-width: 721px) { .pg-strip { min-height: max(52svh, 30rem); } }
.pg-strip .px-row { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.px-tile { position: relative; overflow: hidden; }
.px-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
/* the held frame: the four tubes start as dark sets (house-deep, a hairline
   inset) and with JS each one keeps its face hidden until site.js has seen
   the face decode and powers the tube on, left to right. A slow fetch
   shows the dark set with the title, never a bare black rectangle */
.pg-strip .px-tile { background: var(--house-deep); box-shadow: inset 0 0 0 1px rgba(239, 231, 216, 0.07); }
html.js .pg-strip .px-tile:not(.is-on) img { opacity: 0; }   /* a dead tube until JS wakes it */
@media (max-width: 720px) {
  .pg-strip .px-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- split body ---------- */
.split-body { display: grid; grid-template-columns: 57% 41%; gap: 2%; padding: clamp(3rem, 8vh, 5.5rem) var(--gutter); }
.col-head { font-family: var(--font-data); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--velvet-bright); margin: 0 0 1.1rem; }
@media (min-width: 561px) {
  .wall-flat { grid-template-columns: 1fr 1fr; }
}
.wall-flat .mon img { filter: brightness(1) saturate(1); }
html.js .wall-flat .mon img { filter: brightness(1) saturate(1); }
.wall-flat .mon::after { opacity: 0.15; }
.wall-flat .mon { aspect-ratio: 3 / 2; }
.wall-flat .mon:nth-child(1), .wall-flat .mon:nth-child(2), .wall-flat .mon:nth-child(3) { grid-column: 1 / -1; }
.wall-flat .mon:nth-child(-n+3) { aspect-ratio: 21 / 9; }
.past-inner { position: sticky; top: 5rem; }
.boards-page { padding-bottom: 1.2vw; }
.boards-page::after { bottom: 1.2vw; }
.boards-page .board.b1 { width: 46%; } .boards-page .board.b2 { width: 54%; }
.boards-plaques { margin-top: 1.6rem; justify-content: flex-start; }
.boards-plaques .board { width: 30%; }

@media (max-width: 900px) {
  .split-body { grid-template-columns: 1fr; }
  .past-inner { position: static; }
  .past-col { margin-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .pg-hero .art, html.js .pg-st .art { transition: none; }
  html.js .pg-st.is-on .glow { transition: none; }
  .cb-line { display: none; }
  html.js .cb-static { display: block; position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; clip-path: none; white-space: normal; }
}

/* ---------- contact page ----------
   No form by rule (no unsolicited submissions). Order: the email, the three accounts
   as buckets (avatar, handle, follow), then the two offices with a small bezel clock each. */
.cp-body { padding-top: clamp(7rem, 16vh, 11rem); padding-bottom: clamp(3rem, 7vh, 5rem); }
.cp-body .section-head { margin-bottom: clamp(2rem, 5vh, 3rem); }
.cp-eyebrow { margin-bottom: 0.9rem; }
.cp-mail { margin: 0 0 1rem; }
.cp-mail a {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.1vw, 1.9rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--playbill);
  text-decoration: none;
  border-bottom: 2px solid var(--velvet-bright);
  overflow-wrap: anywhere;
}
.cp-mail a:hover { color: var(--velvet-bright); }
.cp-note { max-width: var(--measure); }
/* the accounts — three hairline buckets */
.cp-social { list-style: none; margin: clamp(2.5rem, 6vh, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.5vw, 1.4rem); }
.cp-acct { display: flex; flex-direction: column; border: 1px solid var(--house-line); background: var(--house-deep);
  padding: clamp(1.1rem, 2vw, 1.6rem); transition: border-color 220ms; }
.cp-acct:hover, .cp-acct:focus-within { border-color: rgba(176, 41, 64, 0.55); }
.cp-acct-link { display: block; flex: 1 1 auto; text-decoration: none; color: var(--playbill); }
.cp-acct-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.cp-acct-net { letter-spacing: 0.22em; color: var(--velvet-bright); font-size: clamp(0.95rem, 1.2vw, 1.15rem); font-weight: 600; }
.cp-acct-glyph { width: 1.25rem; height: 1.25rem; color: var(--fog); transition: color 220ms; }
.cp-acct:hover .cp-acct-glyph { color: var(--playbill); }
.cp-acct-avatar { display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: var(--house-black);
  border: 1px solid var(--house-line); overflow: hidden; }
.cp-acct-avatar img { width: 62%; height: auto; display: block; filter: brightness(1.05); }
.cp-acct-avatar img[src$=".jpg"], .cp-acct-avatar img[src$=".jpeg"], .cp-acct-avatar img[src$=".png"]:not([src*="logotype"]) {
  width: 100%; height: 100%; object-fit: cover; }
/* the handle sits centre-frame on a placard, the team's monogram tile: the account
   name is the picture. Lines size to the tile's width so they never break. */
.cp-acct-placard { container-type: inline-size; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.12em; padding: 0 0.7rem 6cqi; overflow: hidden;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.05;
  color: var(--playbill); transition: color 220ms;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(239, 231, 216, 0.07), transparent 100%),
    repeating-linear-gradient(135deg, rgba(239, 231, 216, 0.045) 0 1px, transparent 1px 7px); }
.cp-acct-placard::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(239, 231, 216, 0.22); pointer-events: none; }
.cp-acct-placard::before { content: ""; position: absolute; left: 50%; bottom: 22%; width: 14cqi; height: 1px;
  transform: translateX(-50%); background: rgba(239, 231, 216, 0.55); }
.cp-acct-placard .ph-line { display: block; white-space: nowrap; font-size: clamp(0.62rem, 8.8cqi, 2.6rem); }
/* the Instagram tile: the feed as a grid of our own stills, the handle on a smoked plate over it */
.cp-acct-ig { container-type: inline-size; position: relative; }
.cp-acct-ig img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78); transition: filter 400ms var(--ease-stage); }
.cp-acct-link:hover .cp-acct-ig img, .cp-acct-link:focus-visible .cp-acct-ig img { filter: brightness(0.92); }
.cp-acct-ig .ig-handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 92%;
  padding: 0.75em 1em; background: rgba(16, 14, 12, 0.72); border: 1px solid rgba(239, 231, 216, 0.55);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.05; text-align: center; color: var(--playbill); }
.cp-acct-ig .ph-line { display: block; white-space: nowrap; font-size: clamp(0.62rem, 7.6cqi, 2.2rem); }
.cp-acct-link:hover .cp-acct-ig .ig-handle, .cp-acct-link:focus-visible .cp-acct-ig .ig-handle { color: var(--velvet-bright); }
/* the LinkedIn tile: a white square carrying the wordmark, our page name legible beneath in ink */
.cp-acct-white { container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7cqi; background: #ffffff; border-color: rgba(239, 231, 216, 0.3); overflow: hidden; }
.cp-acct-white .li-mark { display: inline-flex; align-items: center; gap: 0.12em; font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700; font-size: clamp(1.4rem, 17cqi, 4.6rem); line-height: 1; color: #0a66c2; letter-spacing: -0.02em; }
.cp-acct-white .li-in { display: inline-grid; place-items: center; background: #0a66c2; color: #ffffff; border-radius: 0.12em;
  padding: 0.04em 0.12em 0.1em; font-size: 0.92em; letter-spacing: -0.03em; }
.cp-acct-white .li-handle { display: flex; flex-direction: column; align-items: center; gap: 0.25em; font-family: var(--font-data); font-weight: 600;
  font-size: clamp(0.5rem, 5.4cqi, 1.1rem); letter-spacing: 0.16em; text-transform: uppercase; color: #191919; white-space: nowrap; }
.cp-acct-link:hover .cp-acct-white .li-handle, .cp-acct-link:focus-visible .cp-acct-white .li-handle { color: var(--velvet-bright); }
.cp-acct-link:hover .cp-acct-placard, .cp-acct-link:focus-visible .cp-acct-placard { color: var(--velvet-bright); }
.cp-acct-handle { display: block; margin-top: 0.9rem; font-family: var(--font-display); font-size: clamp(0.85rem, 1.05vw, 1rem);
  line-height: 1.3; color: var(--playbill); overflow-wrap: anywhere; transition: color 220ms; }
.cp-acct-link:hover .cp-acct-handle, .cp-acct-link:focus-visible .cp-acct-handle { color: var(--velvet-bright); }
.cp-follow { margin-top: 1.1rem; align-self: flex-start; padding: 0.7rem 1.1rem 0.7rem 1.1rem; font-size: 0.72rem; gap: 0.55rem; }
/* the ledger — one hairline above, one between the cities, one below */
.cp-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--house-line);
  border-bottom: 1px solid var(--house-line);
}
.cp-office { padding: clamp(1.6rem, 3.5vh, 2.4rem) 0 clamp(1.8rem, 4vh, 2.6rem); }
.cp-office + .cp-office { border-left: 1px solid var(--house-line); padding-left: clamp(1.5rem, 3.5vw, 3.5rem); }
.cp-office:first-child { padding-right: clamp(1.5rem, 3.5vw, 3.5rem); }
.cp-city {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--playbill);
  margin: 0 0 clamp(1rem, 2.2vh, 1.5rem);
}
.cp-clockrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.1rem; margin-bottom: clamp(1.2rem, 2.6vh, 1.7rem); }
/* the bezel — the company clock's frame at slate scale */
.cp-clock {
  display: none;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: clamp(0.9rem, 1.05vw, 1rem); line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase; color: #ffffff; font-variant-numeric: tabular-nums;
  min-width: 6.4em; text-align: center; white-space: nowrap;
  padding: 0.3em 0.45em 0.34em; border: 0.06em solid #ffffff; margin: 0;
}
html.cp-clock-on .cp-clock { display: inline-block; }
.cp-tz { letter-spacing: 0.14em; }
.cp-tz-name { color: var(--playbill); }
.cp-address { font-style: normal; font-size: 0.82rem; line-height: 1.9; letter-spacing: 0.06em; }
.cp-address .cp-tel { display: inline-block; margin-top: 0.5rem; color: var(--playbill); border-bottom: 1px solid var(--house-line); }
.cp-address .cp-tel:hover { border-bottom-color: var(--velvet-bright); }
@media (max-width: 860px) {
  .cp-social { grid-template-columns: 1fr; }
  .cp-acct { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 1.2rem; }
  .cp-acct-link { display: grid; grid-template-columns: 7.5rem 1fr; grid-template-areas: "avatar head" "avatar handle"; column-gap: 1rem; align-items: center; flex: 1 1 14rem; }
  .cp-acct-head { grid-area: head; margin-bottom: 0.3rem; justify-content: flex-start; gap: 0.8rem; }
  .cp-acct-avatar { grid-area: avatar; width: 7.5rem; }
  .cp-acct-placard { padding-bottom: 4cqi; }
  .cp-acct-handle { grid-area: handle; margin-top: 0; }
  .cp-follow { margin-top: 0; }
}
@media (max-width: 560px) {
  .cp-ledger { grid-template-columns: 1fr; }
  .cp-office:first-child { padding-right: 0; }
  .cp-office + .cp-office { border-left: 0; padding-left: 0; border-top: 1px solid var(--house-line); }
  .cp-follow { margin-top: 0.9rem; }
}