/* Layout and components. Values come from theme.css; no raw colours here.
   Motion rules: only transform and opacity animate (filters where cheap). Anything hidden for an entrance is hidden
   by site.js ("armed") only after it is known to be below the fold, so with no JS everything is simply there.
   Under prefers-reduced-motion every animation and transition is switched off at the bottom of this file. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { color: var(--lamp); }
:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
p { margin: 0 0 var(--s2); max-width: var(--measure); }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: var(--s2); top: -10rem; z-index: 10; background: var(--ink); padding: var(--s1); }
.skip:focus { top: var(--s2); }

.wrap { width: min(100% - 2 * var(--s2), var(--page)); margin-inline: auto; }
/* things waiting to slam in sit scaled up; past the page's edge a phone would let the whole page pan sideways */
main { overflow-x: clip; }

/* words over pictures: big, plain, outlined */
.big {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-shadow: var(--outline);
}
.sec { padding-block: var(--s5) 0; }
.sec > .wrap > h2, .sec-title, .ledger-head h2 { font-size: var(--t-h2); margin-bottom: var(--s3); }
.title-stamped { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.title-stamped .stamp { font-size: var(--t-lead); letter-spacing: 0.06em; text-shadow: none; }

/* header: the sticker logo and big outlined words, no boxes */
.top {
  position: absolute; inset: 0 0 auto; z-index: 3;
  display: flex; align-items: flex-start; gap: var(--s1) var(--s2);
  padding: var(--s1) max(var(--s2), (100% - var(--page)) / 2);
}
.top .logo { flex: none; display: block; padding: 0.2rem; }
.top .logo img {
  width: 4rem; height: 4rem; rotate: -6deg;
  filter: drop-shadow(0 0.35rem 0.4rem rgb(var(--shade) / 0.6));
  transition: transform var(--dur-fast) var(--ease-back);
}
.top .logo:hover img, .top .logo:focus-visible img { transform: rotate(10deg) scale(1.08); }
.top nav { display: flex; flex-wrap: wrap; column-gap: clamp(0.35rem, 0.1rem + 1.2vw, 1.4rem); font-size: var(--t-nav); }
.top nav a {
  display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0.4rem 0.4rem;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1;
  text-decoration: none; text-shadow: var(--outline);
  transition: transform var(--dur-fast) var(--ease-back);
}
.top nav a:hover, .top nav a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; transform: translateY(-0.12rem) rotate(-3deg); }
@media (max-width: 400px) {
  .top .logo img { width: 3.4rem; height: 3.4rem; }
  .top nav { column-gap: 0.15rem; }
  .top nav a { padding-inline: 0.32rem; }
}

/* phones: the words move into a drawer behind a three-bar button that stays on screen as the page scrolls.
   Only with JS; without it they stay in the wrapped row above. .drawer clips the shut drawer: parked off screen on its
   own it would widen the page, and a phone would zoom out to fit it. */
.burger { display: none; }
.drawer { display: contents; }
.scrim { display: none; }
@media (max-width: 800px) {
  /* the button is one of the show's stamps, in paper, and the X is struck in ember. It floats over everything, so it
     sits on an ink plate: unseen on the dark sections, and what keeps it readable on pictures and notebook paper */
  .js .burger {
    position: fixed; z-index: 2; top: max(var(--s1), env(safe-area-inset-top)); right: var(--s1);
    display: block; width: 3.25rem; height: 3.25rem; padding: 0; border: 0; background: var(--ink); cursor: pointer;
    rotate: var(--tilt); box-shadow: 0 0.1rem 0.5rem rgb(var(--shade) / 0.6);
  }
  .burger:active { scale: 0.94; }
  .burger .stamp { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 0.24rem; padding: 0; rotate: none; }
  .burger .stamp::before { -webkit-mask-image: url("../img/stamp_frame_sq.png"); mask-image: url("../img/stamp_frame_sq.png"); }
  .burger i { display: block; width: 1.75rem; height: 0.32rem; background: var(--stamp); }
  .menu-open .burger { rotate: 5deg; }
  .menu-open .burger .stamp { --stamp: var(--ember); }
  .menu-open .burger i:nth-of-type(1) { transform: translateY(0.56rem) rotate(45deg); }
  .menu-open .burger i:nth-of-type(2) { opacity: 0; }
  .menu-open .burger i:nth-of-type(3) { transform: translateY(-0.56rem) rotate(-45deg); }

  .js .drawer {
    display: block; position: fixed; z-index: 1; inset: 0; overflow: hidden;
    visibility: hidden; transition: visibility 0s var(--dur-fast);
  }
  .menu-open .drawer { visibility: visible; transition-delay: 0s; }
  .js .scrim {
    display: block; position: absolute; inset: 0; background: rgb(var(--shade) / 0.65);
    opacity: 0; transition: opacity var(--dur-fast) linear;
  }
  .menu-open .scrim { opacity: 1; }
  .js .top nav {
    position: absolute; inset: 0 0 0 auto; width: min(19rem, 82vw); overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 4.5rem var(--s3) var(--s3);
    font-size: var(--t-name); background: linear-gradient(100deg, var(--velvet), var(--ink) 80%);
    box-shadow: 0 0 2.5rem rgb(var(--shade) / 0.7);
    transform: translateX(110%); transition: transform var(--dur-fast) var(--ease);
  }
  .menu-open .top nav { transform: none; }
  .menu-open body { overflow: hidden; }
}

/* hero: the curtain, the doodle in the dark middle, a spotlight that follows the pointer.
   Its bottom fades into the page: the picture is masked and the velvet under it goes to ink. */
.hero {
  position: relative; min-height: min(56rem, 100svh); display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(var(--velvet) 50%, var(--ink));
}
.hero .layer.back { position: absolute; inset: 0; }
.hero .layer.back img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%;
  -webkit-mask-image: linear-gradient(#000 50%, transparent 97%);
  mask-image: linear-gradient(#000 50%, transparent 97%);
}
.hero::after {
  content: ""; position: absolute; left: 50%; top: -20%; width: 70rem; height: 140%;
  translate: -50% 0; transform-origin: 50% 0;
  background: radial-gradient(ellipse 22% 60% at 50% 0%, rgb(var(--light) / 0.16), transparent 70%);
  animation: sway 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.spot {
  position: absolute; left: 0; top: 0; width: 44rem; height: 44rem; margin: -22rem 0 0 -22rem;
  background: radial-gradient(circle, rgb(var(--light) / 0.2), rgb(var(--light) / 0.07) 35%, transparent 65%);
  transform: translate(var(--sx, 50vw), var(--sy, 45%));
  transition: transform 450ms var(--ease), opacity var(--dur) linear;
  pointer-events: none; opacity: 0;
}
.lit .spot { opacity: 1; }
/* no z-index here: the doodle blends with the curtain only if .hero-in makes no stacking context */
.hero-in { position: relative; text-align: center; padding: 8rem var(--s2) var(--s5); }
.hero-in h1 img { width: min(92vw, 56rem); margin-inline: auto; mix-blend-mode: lighten; }
.hero-in .lead { font-size: var(--t-lead); margin: var(--s3) auto var(--s1); text-shadow: var(--outline); max-width: 34ch; }
.hero-in .lead + .lead { margin-top: 0; }
.cta { display: inline-block; margin-top: var(--s3); font-size: var(--t-h3); transition: transform var(--dur-fast) var(--ease-back); }
.cta:hover, .cta:focus-visible { transform: scale(1.06) rotate(-2deg); }

/* the curtain opening on load: two halves of the closed curtain part and leave. CSS only, so it can't get stuck. */
.opening { display: none; }
.js .opening { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.opening .half, .bench .half { position: absolute; top: 0; bottom: 0; width: 50.5%; overflow: hidden; background: var(--velvet); }
.opening .half img, .bench .half img { position: absolute; top: 0; height: 100%; width: 198%; max-width: none; object-fit: cover; }
.opening .l, .bench .l { left: 0; }
.opening .r, .bench .r { right: 0; }
.opening .l img, .bench .l img { left: 0; }
.opening .r img, .bench .r img { right: 0; }
.js .opening .l { animation: open-l 1000ms var(--ease) 120ms both; }
.js .opening .r { animation: open-r 1000ms var(--ease) 120ms both; }

/* stamps: live Anton words in the show's distressed double frame */
.stamp {
  --stamp: var(--paper);
  position: relative; display: inline-block;
  padding: 0.32em 0.62em 0.26em;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
  color: var(--stamp);
  rotate: var(--tilt);
  -webkit-mask: url("../img/stamp_grain.png") 0 0 / 7rem;
  mask: url("../img/stamp_grain.png") 0 0 / 7rem;
}
.stamp::before {
  content: ""; position: absolute; inset: 0; background: var(--stamp);
  -webkit-mask: url("../img/stamp_frame.png") 0 0 / 100% 100% no-repeat;
  mask: url("../img/stamp_frame.png") 0 0 / 100% 100% no-repeat;
}
.stamp.gold { --stamp: var(--gold); }
.stamp.ember { --stamp: var(--ember); }
.stamp.phosphor { --stamp: var(--phosphor); }
.stamp.thump { transition: transform 380ms var(--ease), opacity 200ms linear; }
.stamp.thump.armed { opacity: 0; transform: scale(1.6); }

/* entrances, set off by site.js as each thing scrolls in */
[data-reveal="slam"] { transition: transform 420ms var(--ease-back), opacity 220ms linear; transform-origin: 0 100%; }
[data-reveal="slam"].armed { opacity: 0; transform: scale(1.3) rotate(-3deg); }
[data-reveal="deal"] {
  transition: transform var(--dur) var(--ease) calc(var(--i, 0) * var(--stagger)),
              opacity 260ms linear calc(var(--i, 0) * var(--stagger));
}
/* small offsets only: the observer sees the moved box, so a far throw would delay the reveal */
[data-reveal="deal"].armed { opacity: 0; transform: translateY(4rem) rotate(-14deg) scale(0.82); }
[data-reveal="row"] {
  transition: transform 500ms var(--ease) calc(var(--i, 0) * var(--stagger)),
              opacity 260ms linear calc(var(--i, 0) * var(--stagger));
}
[data-reveal="row"].armed { opacity: 0; transform: translateX(-2.5rem); }
[data-reveal="hand"] { transition: transform 700ms var(--ease-back), opacity 300ms linear; }
[data-reveal="hand"].armed { opacity: 0; transform: translateY(4rem) rotate(-9deg); }

/* latest episode: the thumbnail in the marquee, its bulbs chasing round the frame */
.ep { display: grid; gap: var(--s3) var(--s4); align-items: center; }
@media (min-width: 768px) { .ep { grid-template-columns: 1.35fr 1fr; } }
.marquee { position: relative; display: block; aspect-ratio: 1672 / 941; }
.marquee .frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.marquee .shot { position: absolute; inset: var(--inset, 13% 9.5%); width: auto; height: auto; overflow: hidden; }
.marquee .shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform var(--dur) var(--ease); }
.marquee .bulbs { position: absolute; inset: 0; pointer-events: none; }
.marquee .bulbs i {
  position: absolute; width: 4.2%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle, rgb(var(--bulb) / 0.95) 0 16%, rgb(var(--light) / 0.4) 38%, transparent 68%);
  opacity: 0.1;
  animation: chase var(--chase) steps(1, end) infinite;
  animation-delay: calc(var(--k) * var(--chase) / 3 - var(--chase));
}
a.marquee:hover, a.marquee:focus-visible, a.marquee:active { --chase: 0.42s; }
a.marquee:hover .shot img, a.marquee:focus-visible .shot img, a.marquee:active .shot img { transform: scale(1.05); }
.ep h3 { font-size: var(--t-h3); }
.ep .meta { color: var(--grey); margin: var(--s1) 0 var(--s2); }
.ep .links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--t-lead); }
.ep .links a { display: inline-block; transition: transform var(--dur-fast) var(--ease-back); }
.ep .links a:hover, .ep .links a:focus-visible { transform: rotate(-3deg) scale(1.05); }

/* cast: cards that tilt toward the pointer and turn over on click, tap or Enter */
.cast { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cast .player { position: relative; perspective: 1400px; }
.cast .flipper {
  position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)));
  transition: transform var(--dur) var(--ease);
}
.cast .player.turned { --flip: 180deg; }
.cast .flipper .face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cast .por { position: relative; overflow: hidden; }
.cast .por img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
.cast .por::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 75% at 50% 40%, transparent 55%, var(--ink) 100%),
              linear-gradient(transparent 60%, var(--ink));
}
.cast .who { position: relative; margin-top: -3.2em; padding-inline: var(--s1); display: flex; align-items: end; gap: var(--s2); }
.cast .name { font-size: var(--t-name); color: var(--who); }
.cast .model { color: var(--grey); text-shadow: var(--outline); }
.cast .mark { width: 2.6rem; height: 2.6rem; flex: none; margin-bottom: 0.3rem; }
.cast .rear {
  position: absolute; inset: 0; transform: rotateY(180deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  padding: var(--s3) var(--s2); text-align: center;
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0.6rem 0 var(--who), 0 1rem 2.5rem rgb(var(--shade) / 0.55);
}
.cast .rear .mark { width: clamp(3.5rem, 2.5rem + 3vw, 6rem); height: auto; aspect-ratio: 1; padding: 0.8rem; background: var(--ink); border-radius: 50%; margin: 0; }
.cast .rear p { margin: 0; }
.cast .rear .name { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-name); line-height: 1; color: var(--ink); }
.cast .rear .model { color: var(--ink); text-shadow: none; }
.rec { display: flex; gap: var(--s3); margin: var(--s1) 0 0; }
.rec div { display: flex; flex-direction: column-reverse; align-items: center; }
.rec dt { font-size: var(--t-small); line-height: 1.2; }
.rec dd { margin: 0; font-family: var(--font-display); font-size: var(--t-stat); line-height: 1; }
.cast .turn, .cast .poke {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.who-opus { --who: var(--c-opus); }
.who-astra { --who: var(--c-astra); }
.who-deepseek { --who: var(--c-deepseek); }

/* the players still to come: shadows that flicker and twitch, harder when poked */
.mystery .face { animation: twitch 4.3s infinite; }
.mystery.m2 .face { animation-duration: 5.9s; animation-delay: -2.1s; }
.mystery.m3 .face { animation-duration: 3.7s; animation-delay: -1.2s; }
.mystery .por img { animation: flicker 6.1s infinite; }
.mystery.m2 .por img { animation-duration: 7.3s; animation-delay: -3s; }
.mystery.m3 .por img { animation-duration: 5.3s; animation-delay: -1.4s; }
.mystery .q {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 1;
  font-size: clamp(3.4rem, 1.5rem + 9vw, 10rem); color: var(--paper);
  transition: transform var(--dur-fast) var(--ease-back);
}
.mystery:hover .face { animation-duration: 0.9s; }
.mystery:hover .q, .mystery:has(.poke:focus-visible) .q { transform: rotate(14deg) scale(1.12); }
.mystery .name { color: var(--paper); }

@media (max-width: 767px) {
  .cast { gap: var(--s3) var(--s1); }
  .cast .player:not(.mystery) { grid-column: 1 / -1; }
  /* shorter portraits on phones, the faces kept */
  .cast .player:not(.mystery) .por img { aspect-ratio: 16 / 11; object-position: 50% 62%; }
  .mystery .name { font-size: var(--t-h3); }
  .mystery .who { margin-top: -1.6em; padding-inline: 0.2rem; }
  .cast .rear { gap: 0.3rem; padding-block: var(--s2); }
  .rec { gap: var(--s2); }
}

/* ledger */
.ledger-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.ledger-head h2 { margin: 0; }
.spin {
  flex: none; width: clamp(3rem, 2.2rem + 2.4vw, 4.6rem); padding: 0.3rem; border: 0; background: none; cursor: pointer;
  color: var(--grey); transition: transform 420ms var(--ease-back);
  transform: rotate(calc(var(--turns, 0) * 60deg));
}
.spin:hover { color: var(--paper); }
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { padding: var(--s1) 0.6rem; text-align: right; vertical-align: middle; }
.ledger thead th { color: var(--grey); font-weight: 400; font-size: var(--t-small); line-height: 1.2; vertical-align: bottom; border-bottom: 2px solid var(--grey); }
.ledger tbody tr { border-bottom: 1px dashed var(--grey); }
.ledger th[scope="row"] { text-align: left; }
.ledger .n { font-family: var(--font-display); font-size: var(--t-stat); }
.ledger .cname { font-family: var(--font-display); font-size: var(--t-name); text-transform: uppercase; color: var(--who); display: block; line-height: 1; }
.ledger .cmodel { color: var(--grey); font-size: var(--t-small); }
.ledger .place { text-align: left; width: 1%; white-space: nowrap; }
.ledger .place .n { color: var(--paper); }
.ledger .lie { color: var(--ember); }
.ledger .right { color: var(--phosphor); }
.ledger .zero { color: var(--grey); }
.ledger .stamp { font-size: 1.1rem; margin-left: var(--s1); }
/* phones get the second table: a column per player, read across. More players than fit scroll sideways under the labels.
   Words here are paper, not grey: Samsung Internet's dark mode dims grey text and a page may not be able to stop it. */
.ledger-phone { display: none; }
@media (max-width: 860px) {
  .ledger.wide { display: none; }
  .ledger-phone { display: block; overflow-x: auto; }
  .ledger.phone { table-layout: fixed; min-width: calc(6rem + var(--players) * 3.8rem); }
  .ledger.phone th, .ledger.phone td { padding: 0.35rem 0.2rem; font-weight: 400; }
  .ledger.phone th:first-child { position: sticky; left: 0; background: var(--ink); font-size: var(--t-small); text-align: left; line-height: 1.15; }
  .ledger.phone thead th { color: var(--paper); font-size: var(--t-small); vertical-align: top; padding-bottom: var(--s1); }
  .ledger.phone thead th:first-child { width: 34%; }
  .ledger.phone .place { display: block; width: auto; text-align: right; }
  .ledger.phone .stamp { margin: 0.35rem 0 0; font-size: 0.85rem; }
  .ledger.phone .cname { font-size: var(--t-name-col); }
  .ledger.phone .cmodel { display: block; margin-top: 0.15rem; color: var(--paper); font-size: var(--t-model-col); line-height: 1.15; }
}

/* Liar's Bench: coming soon, so the curtain stays shut. It twitches when hovered; a click or tap parts it for a
   moment and a shadow crosses the light behind. No numbers, no names. */
.bench { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--ink); }
.bench .stage {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 22% 70% at 50% 100%, rgb(var(--light) / 0.55), transparent 70%), var(--velvet);
}
.bench .walker {
  position: absolute; bottom: -10%; left: 50%; width: 18%; height: 95%; margin-left: -9%;
  background: radial-gradient(ellipse 45% 50% at 50% 55%, var(--ink) 45%, transparent 72%);
  opacity: 0; transform: translateX(-180%);
}
.bench .half { transition: transform 700ms var(--ease); transform-origin: 50% 0; }
.bench .seam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 0.25rem; translate: -50% 0;
  background: linear-gradient(transparent, rgb(var(--light) / 0.9) 70%, rgb(var(--light) / 0.5));
  animation: seam 3.3s infinite; pointer-events: none;
  transition: visibility 0s 700ms; /* comes back once the curtain has shut */
}
.bench.peek .seam { visibility: hidden; transition-delay: 0s; }
.bench .spot { width: 30rem; height: 30rem; margin: -15rem 0 0 -15rem; }
.bench:hover .l { animation: rustle-l 2.4s infinite; }
.bench:hover .r { animation: rustle-r 2.4s infinite 0.15s; }
.bench .peek-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.bench .peek-btn:focus-visible { outline-offset: -6px; }
.bench.still .l, .bench.still .r { animation: none; }
.bench.peek .l { transform: translateX(-16%) skewX(2deg); }
.bench.peek .r { transform: translateX(16%) skewX(-2deg); }
.bench.peek .walker { animation: walk 1.7s var(--ease) 0.2s both; }
@media (max-width: 767px) { .bench { aspect-ratio: 4 / 3; } }

/* notebooks: closed until clicked */
.books { display: grid; gap: var(--s3); }
.book > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding-block: var(--s1);
}
.book > summary::-webkit-details-marker { display: none; }
.book > summary .name { display: inline-block; font-size: var(--t-name); color: var(--who); transition: transform var(--dur-fast) var(--ease-back); }
.book > summary:hover .name, .book > summary:focus-visible .name { transform: rotate(-4deg) translateX(0.3rem); }
.book > summary .open { font-size: var(--t-lead); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.book > summary:hover .open { color: var(--lamp); }
.book[open] > summary .open .o, .book:not([open]) > summary .open .c { display: none; }
.page {
  background: var(--paper); color: var(--ink);
  padding: var(--s3) clamp(var(--s2), 4vw, var(--s4));
  background-image: repeating-linear-gradient(transparent 0 calc(1.7em - 1px), var(--sheet-rule) calc(1.7em - 1px) 1.7em);
  background-position: 0 1.15em;
  line-height: 1.7;
  max-width: 52rem;
  rotate: -0.6deg;
  box-shadow: 0 1rem 2.5rem rgb(var(--shade) / 0.55);
}
.book:nth-child(2) .page { rotate: 0.5deg; }
.page p { max-width: none; }
.page .entry { font-size: var(--t-lead); line-height: 1.5; }
.page b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; }
.js .book[open] .page { animation: unfold 420ms var(--ease); }

/* the bill: the season's games dealt as cards, played face up, the rest face down */
.bill-sec { position: relative; margin-top: var(--s5); padding-block: var(--s5); overflow: hidden; }
.bill-sec > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.bill-sec::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--ink), transparent 25%, transparent 75%, var(--ink)); pointer-events: none; }
.bill-sec .wrap { position: relative; z-index: 1; }
.bill { list-style: none; margin: 0; padding: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s2); }
.bill li { width: 11rem; }
.gcard {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  width: 100%; aspect-ratio: 5 / 7; padding: var(--s1); border: 0; cursor: pointer; text-decoration: none; text-align: center;
  rotate: calc((var(--i, 0) - 2) * 2.5deg);
  box-shadow: 0 0.9rem 1.8rem rgb(var(--shade) / 0.6);
  transition: transform var(--dur-fast) var(--ease-back);
}
.gcard.up { background: var(--paper); color: var(--ink); }
.gcard.up:hover { color: var(--ink); }
.gcard .num { position: absolute; left: 0.75rem; top: 0.6rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.gcard .gname { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.35rem, 1rem + 1.1vw, 2.1rem); line-height: 1; }
.gcard .stamp { --stamp: var(--ink); font-size: 0.95rem; }
.gcard.down {
  background-color: var(--ink); color: var(--paper);
  background-image:
    repeating-linear-gradient(45deg, rgb(var(--light) / 0.1) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(-45deg, rgb(var(--light) / 0.1) 0 2px, transparent 2px 15px);
  box-shadow: inset 0 0 0 2px var(--grey), inset 0 0 0 7px var(--ink), inset 0 0 0 8px var(--grey), 0 0.9rem 1.8rem rgb(var(--shade) / 0.6);
}
.gcard.down .num { color: var(--grey); }
.gcard.down .q { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.4rem); }
.gcard:hover, .gcard:focus-visible { transform: translateY(-0.9rem) rotate(3deg); }
.gcard.down:hover .q { animation: shiver 300ms 2; }
@media (max-width: 767px) {
  .bill { gap: var(--s2) var(--s1); }
  .bill li { width: calc((100% - 2 * var(--s1)) / 3); }
  .gcard .num { font-size: 1.15rem; left: 0.6rem; top: 0.5rem; }
}

/* contact: the email on a blank ticket, handed over as it scrolls in; it straightens when you reach for it */
.contact { padding-block: var(--s5); text-align: center; position: relative; }
.contact .mail { font-size: clamp(1.7rem, 0.9rem + 4.4vw, 4.6rem); word-break: break-word; }
.contact .yt { display: inline-block; margin-top: var(--s3); font-size: var(--t-h3); }
.ticket { position: relative; background: var(--paper); width: min(100% - 2 * var(--s2), 52rem); margin-inline: auto; rotate: -1.5deg; }
.ticket-bg { width: 100%; box-shadow: 0 1.5rem 3rem rgb(var(--shade) / 0.6); }
.ticket-in {
  position: absolute; inset: 14% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink); text-align: center;
}
.ticket:not(.armed) { transition: transform 450ms var(--ease-back); }
.ticket:hover, .ticket:focus-within, .ticket.lift { transform: rotate(1.5deg) translateY(-0.6rem) scale(1.02); }
.ticket-in a:hover { color: var(--ink); text-decoration-thickness: 4px; }
.ticket-in .mail { text-shadow: none; font-size: clamp(1.15rem, 0.5rem + 3.6vw, 3.4rem); text-decoration: none; }
.ticket-in .mail:hover { text-decoration: underline; }
.ticket-in .yt { font-size: clamp(1rem, 0.85rem + 0.9vw, 1.6rem); margin-top: 0.6em; }

/* footer: the floor, and the doodle peeking up (hover, or tap the floor) */
.foot { position: relative; padding: var(--s4) var(--s2) 9rem; text-align: center; color: var(--grey); overflow: hidden; }
.foot .floor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.foot::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(var(--ink) 10%, transparent 70%); }
.foot p { position: relative; z-index: 2; margin-inline: auto; text-shadow: var(--outline); }
.foot .peek { position: absolute; z-index: 2; left: 50%; bottom: -5.5rem; width: 12rem; translate: -50% 0; mix-blend-mode: lighten; transition: transform var(--dur) var(--ease-back); }
.foot:hover .peek, .foot.peeked .peek { transform: translateY(-2.5rem) rotate(-8deg); }

/* episode page: no hero, so the header sits in the flow */
.page-ep .top { position: relative; }
.ep-head { padding-top: var(--s3); }
.ep-head h1 { font-size: var(--t-hero); margin-bottom: var(--s2); }
.ep-head .meta { color: var(--grey); font-size: var(--t-lead); }
.chapters { list-style: none; padding: 0; margin: 0; columns: 18rem 2; column-gap: var(--s4); }
.chapters li { break-inside: avoid; display: flex; gap: var(--s2); padding-block: 0.35rem; border-bottom: 1px dashed var(--grey); }
.chapters time, .chapters .t { color: var(--grey); min-width: 3.4rem; font-variant-numeric: tabular-nums; }

.rounds { list-style: none; margin: 0; padding: 0; }
.rounds li { display: grid; gap: var(--s1) var(--s3); padding-block: var(--s3); border-bottom: 1px dashed var(--grey); align-items: center; }
@media (min-width: 768px) { .rounds li { grid-template-columns: 9rem 1fr auto; } }
.rounds .rn { font-size: var(--t-h3); }
.rounds .rn small { display: block; font-family: var(--font-body); text-transform: none; font-size: var(--t-small); color: var(--grey); text-shadow: none; letter-spacing: 0; }
.rounds .what b { font-weight: 400; color: var(--who); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.15em; }
.rounds .verdict { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.rounds .stamp { font-size: 1.4rem; }
.cards { display: inline-flex; gap: 0.3rem; vertical-align: middle; margin-inline: 0.2rem; perspective: 600px; }
.cards .card {
  display: inline-grid; place-items: center; width: 1.7rem; height: 2.3rem;
  background: var(--paper); color: var(--ink); font-family: var(--font-display); font-size: 1.1rem;
  box-shadow: 0 0 0 2px var(--ink);
  transition: transform 450ms var(--ease-back) calc(250ms + var(--c, 0) * 90ms);
}
.cards .card:nth-child(2) { --c: 1; }
.cards .card:nth-child(3) { --c: 2; }
.rounds li.armed .cards .card { transform: rotateY(90deg); }

a.back { display: inline-block; margin-block: var(--s4) 0; font-size: var(--t-lead); }

@keyframes sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes unfold { from { opacity: 0; transform: translateY(-0.75rem) rotate(-1.5deg); } }
@keyframes open-l { 0% { transform: none; } 15% { transform: translateX(1.5%) skewX(-1deg); } 100% { transform: translateX(-102%) skewX(4deg); visibility: hidden; } }
@keyframes open-r { 0% { transform: none; } 15% { transform: translateX(-1.5%) skewX(1deg); } 100% { transform: translateX(102%) skewX(-4deg); visibility: hidden; } }
@keyframes chase { 0% { opacity: 1; } 33.34% { opacity: 0.1; } }
@keyframes twitch {
  0%, 86%, 100% { transform: none; }
  87% { transform: translate(3px, -2px) rotate(0.8deg); }
  88% { transform: translate(-4px, 1px) skewX(2.5deg); }
  89.5% { transform: none; }
  94% { transform: translateX(2px) rotate(-0.6deg); }
  95% { transform: none; }
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  52% { opacity: 1; } 53% { opacity: 0.45; } 54% { opacity: 1; } 56% { opacity: 0.25; } 58% { opacity: 1; }
  81% { opacity: 1; } 82% { opacity: 0.7; } 83% { opacity: 1; }
}
@keyframes seam { 0%, 100% { opacity: 0.75; } 40% { opacity: 0.45; } 42% { opacity: 1; } 44% { opacity: 0.6; } 70% { opacity: 0.9; } }
@keyframes rustle-l { 0%, 60%, 100% { transform: none; } 66% { transform: skewX(-1.6deg) scaleX(0.985); } 72% { transform: skewX(1deg); } 80% { transform: none; } }
@keyframes rustle-r { 0%, 60%, 100% { transform: none; } 66% { transform: skewX(1.6deg) scaleX(0.985); } 72% { transform: skewX(-1deg); } 80% { transform: none; } }
@keyframes walk { 0% { opacity: 0; transform: translateX(-180%); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(180%); } }
@keyframes shiver { 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } }
@keyframes hang { from { opacity: 0; transform: translateY(-1.2rem) rotate(-8deg); } }
@keyframes slap { from { opacity: 0; transform: scale(1.5) rotate(-25deg); } }
@keyframes par-back { to { transform: translateY(16%) scale(1.08); } }
@keyframes par-front { to { transform: translateY(-14%) scale(0.94); opacity: 0.35; } }
@keyframes cyl { to { transform: rotate(420deg); } }

/* the bar drops in on load (each item is readable within half a second) */
.js .top nav a { animation: hang 480ms var(--ease-back) calc(150ms + var(--i, 0) * 45ms) both; }
@media (max-width: 800px) {
  .js .top nav a { animation: none; }
  .js.menu-open .top nav a { animation: hang 380ms var(--ease-back) calc(70ms + var(--i, 0) * 35ms) both; }
  .js .burger { animation: slap 450ms var(--ease-back) 200ms both; }
}
.js .top .logo img { animation: slap 450ms var(--ease-back) 60ms both; }

/* scroll-driven: the hero's layers drift apart, the ledger's cylinder turns. Elsewhere they simply sit still. */
@supports (animation-timeline: scroll()) {
  .hero .layer.back img { animation: par-back linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  .hero-in h1 img { animation: par-front linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  .cyl { animation: cyl linear both; animation-timeline: view(); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .opening { display: none; }
}