/* Age of Robots: the channel's home page. Loaded after marketing.css and
   paper.css, and reuses their paper language, diorama, theater, and night
   closing. Only what is new to this page lives here. */

/* ---------- Header ---------- */
.aor-page .brand img {
  width: 44px;
  height: auto;
}
@media (max-width: 420px) {
  .aor-page .brand img {
    width: 28px;
  }
}
.aor-subscribe-mini {
  background: #e8452c;
  color: #fff8ea;
}
.aor-subscribe-mini:hover {
  color: #fff8ea;
  translate: 0 -2px;
}

/* ---------- Hero: a paper film set in the family workshop ----------
   The kids (in robot heads) build a cardboard robot while the camera rolls.
   Every take runs on one --take loop so the clapper, the hoist, the sparks,
   and the cheer stay in sync; aor.js bumps the take number on each clap.
   Pieces are sized in cqi of .set so the whole set scales as one sheet. */
.aor-hero {
  --take: 9s;
  --wood: #d49a52;
  --wood-dark: #a8672f;
  --wood-deep: #7d4a22;
  --kraft: #c99a5e;
  --kraft-dark: #a97b44;
  --kraft-light: #dcb57c;
  --pegboard: #d6ad74;
  --steel: #8b8f84;
  --floor: #2a2e27;
}
.aor-hero[data-time="night"] {
  --wood: #8a5a30;
  --wood-dark: #5e3a1c;
  --wood-deep: #3d2410;
  --kraft: #8c6a40;
  --kraft-dark: #6b4f2d;
  --kraft-light: #a4804f;
  --pegboard: #4a3e38;
  --steel: #5d6059;
  --floor: #0f110e;
}

/* Film running along the top edge instead of bunting. */
.film-garland {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  overflow: visible;
  filter: drop-shadow(0 5px 4px rgb(60 30 10 / 30%));
}
.film-garland path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.fg-strip {
  stroke: var(--ink);
  stroke-width: 28;
}
.fg-frames {
  stroke: #e9c77a;
  stroke-width: 12;
  stroke-dasharray: 30 7;
  animation: film-run 5s linear infinite;
  transition: stroke 0.9s ease;
}
.fg-holes {
  stroke: var(--sky-bottom);
  stroke-width: 4;
  stroke-dasharray: 4 7;
  animation: film-run-holes 5s linear infinite;
}
@keyframes film-run {
  to {
    stroke-dashoffset: -370;
  }
}
@keyframes film-run-holes {
  to {
    stroke-dashoffset: -110;
  }
}
[data-time="night"] .fg-frames {
  stroke: #ffe27a;
  filter: drop-shadow(0 0 6px rgb(255 220 110 / 80%));
}
[data-time="night"] .fg-holes {
  stroke: #262b46;
}

/* A dark stage floor under everything. */
.set-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(54px, 7vw, 92px);
  background:
    repeating-linear-gradient(90deg, transparent 0 139px, rgb(255 255 255 / 7%) 139px 141px),
    var(--floor) var(--grain);
  clip-path: polygon(0 14%, 12% 6%, 30% 12%, 52% 4%, 74% 10%, 90% 3%, 100% 9%, 100% 100%, 0 100%);
  box-shadow: inset 0 10px 18px rgb(0 0 0 / 35%);
  transition: background-color 0.9s ease;
}

.set {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  container-type: inline-size;
  pointer-events: none;
}
.set img {
  max-width: none;
  height: auto;
}
.set > * {
  position: absolute;
}
.set svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.set svg * {
  transition: fill 0.9s ease;
}

/* Pegboard with the tools hanging on it. */
.set-wall {
  left: 10cqi;
  bottom: 22cqi;
  width: 72cqi;
  height: 60cqi;
  background:
    radial-gradient(circle, rgb(70 40 15 / 55%) 0 2.5px, transparent 3px) 0 0 / 22px 22px,
    var(--pegboard) var(--grain);
  clip-path: polygon(0 3%, 18% 0, 40% 4%, 63% 1%, 84% 4%, 100% 0, 99% 100%, 1% 100%);
  rotate: -0.8deg;
  filter: drop-shadow(0 10px 14px rgb(60 30 10 / 30%));
  transition: background-color 0.9s ease;
}
.tool {
  position: absolute;
  top: 7%;
  transform-origin: 50% 0;
  animation: sway 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 4px rgb(40 20 5 / 35%));
}
.tool-saw {
  left: 8%;
  width: 7cqi;
  animation-duration: 6s;
}
.tool-wrench {
  left: 22%;
  width: 4.5cqi;
  animation-delay: -2s;
}
.tool-hammer {
  left: 72%;
  width: 10cqi;
  animation-delay: -1s;
}
.tool-scissors {
  left: 60%;
  width: 7cqi;
  animation-delay: -3s;
}
.tool-tape {
  left: 86%;
  width: 7cqi;
  animation-duration: 7s;
}
.t-wood {
  fill: var(--wood-dark);
}
.t-steel {
  fill: var(--steel);
}
.t-teeth {
  fill: none;
  stroke: var(--steel);
  stroke-width: 3;
}
.t-ink {
  fill: var(--ink);
}
.t-rust {
  fill: var(--rust);
}
.t-ochre {
  fill: var(--ochre);
}
.t-hole {
  fill: var(--pegboard);
}

/* The work lamp. At night it becomes the key light. */
.set-lamp {
  left: 14cqi;
  width: 17cqi;
}
.set-lamp .hang-sway {
  --len: 10cqi;
  --sway: 6s;
}
.lamp-shade {
  fill: var(--rust);
}
.lamp-rim {
  fill: #5b2a1c;
}
.lamp-bulb {
  fill: var(--yellow);
}
.lamp-beam {
  position: absolute;
  top: calc(100% - 2cqi);
  left: 50%;
  width: 70cqi;
  height: 70cqi;
  translate: -50% 0;
  background: radial-gradient(ellipse at 50% 0, rgb(255 236 150 / 34%), transparent 70%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  opacity: 0.35;
  transition: opacity 0.9s ease;
}
[data-time="night"] .lamp-beam {
  opacity: 1;
}
[data-time="night"] .set-lamp svg {
  filter: drop-shadow(0 0 20px rgb(255 226 106 / 90%));
}

/* The ROLLING sign lights up while a take is running. */
.set-sign {
  left: 60cqi;
}
.set-sign .hang-sway {
  --len: 9cqi;
  --sway: 8s;
}
.set-sign .hang-sway::before {
  left: 18%;
  box-shadow: calc(var(--sign-w) * 0.64) 0 0 var(--string);
}
.set-sign {
  --sign-w: 21cqi;
}
.sign-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9cqi;
  width: var(--sign-w);
  padding: 1.4cqi 0 1.1cqi;
  border: 0.6cqi solid var(--ink);
  border-radius: 1cqi;
  background: #3b1712;
  color: #7a3a2c;
  font: 700 3cqi/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 10px 14px -6px rgb(30 15 5 / 50%);
  animation: rolling var(--take) steps(1) infinite;
}
.sign-word {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.sign-time {
  font-size: 0.5em;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.sign-dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: currentColor;
}
@keyframes rolling {
  0% {
    background: #3b1712;
    color: #7a3a2c;
    text-shadow: none;
  }
  3.5%,
  90% {
    background: #c9331e;
    color: #fff3dc;
    text-shadow: 0 0 8px rgb(255 220 180 / 90%);
  }
}
[data-time="night"] .sign-box {
  filter: drop-shadow(0 0 16px rgb(232 69 44 / 55%));
}

/* The workbench. */
.set-bench {
  left: 12cqi;
  bottom: 4cqi;
  width: 64cqi;
  filter: drop-shadow(0 14px 12px rgb(30 15 5 / 38%));
}
.b-top {
  fill: var(--wood);
}
.b-grain {
  fill: none;
  stroke: var(--wood-dark);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
}
.b-front,
.b-shelf,
.b-leg {
  fill: var(--wood-dark);
}
.b-leg-back {
  fill: var(--wood-deep);
}
.b-can-rust {
  fill: var(--rust);
}
.b-can-yellow {
  fill: var(--yellow);
}
.b-can-lid {
  fill: var(--ink);
}
.b-box {
  fill: var(--kraft);
}
.b-box-top {
  fill: var(--kraft-light);
}
.b-box-tape {
  fill: rgb(236 215 142 / 70%);
}

/* The clapperboard. aor.js writes the take number. */
.clapper {
  left: 15cqi;
  bottom: 30.5cqi;
  width: 15cqi;
  rotate: -7deg;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 6px rgb(30 15 5 / 40%));
}
.clap-ink {
  fill: var(--ink);
}
.clap-stripe {
  fill: #f6f1e5;
}
.clap-hinge {
  fill: var(--steel);
}
.clap-line {
  fill: none;
  stroke: rgb(246 241 229 / 55%);
  stroke-width: 2;
}
.clapper text {
  fill: #f6f1e5;
  font-family: var(--mono);
  font-weight: 600;
}
.clap-title {
  font-size: 19px;
  letter-spacing: 0.08em;
}
.clap-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  fill: rgb(246 241 229 / 65%);
}
.clapper .clap-value {
  font-family: var(--display);
  font-style: italic;
  font-size: 36px;
}
.clap-arm {
  transform-origin: 10px 39px;
  animation: clap var(--take) ease-in-out infinite;
}
@keyframes clap {
  0% {
    rotate: -26deg;
  }
  3.5% {
    rotate: 0deg;
  }
  12% {
    rotate: 0deg;
  }
  18%,
  100% {
    rotate: -26deg;
  }
}

/* The cardboard robot. Its head comes down on a hoist every take. */
.bot {
  left: 34cqi;
  bottom: 31.6cqi;
  width: 21cqi;
  height: 17cqi;
}
.bot-body {
  position: absolute;
  inset: auto 0 0;
  filter: drop-shadow(0 8px 7px rgb(30 15 5 / 38%));
  animation: bot-wiggle var(--take) ease-in-out infinite;
  transform-origin: 50% 100%;
}
.bot-front {
  fill: var(--kraft);
}
.bot-side {
  fill: var(--kraft-dark);
}
.bot-top {
  fill: var(--kraft-light);
}
.bot-tape {
  fill: rgb(236 215 142 / 75%);
}
.bot-screen {
  fill: var(--ink);
}
.bot-btn-y {
  fill: var(--yellow);
}
.bot-btn-r,
.bot-claw {
  fill: var(--rust);
}
.bot-slot {
  fill: var(--kraft-dark);
}
.bot-hose {
  fill: none;
  stroke: var(--steel);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: 3 3;
}
.bot-heart {
  fill: #5b2a1c;
  animation: bot-heart var(--take) ease-in-out infinite;
}
@keyframes bot-heart {
  0%,
  33% {
    fill: #5b2a1c;
    filter: none;
  }
  36%,
  74% {
    fill: #e8452c;
    filter: drop-shadow(0 0 6px rgb(255 120 90 / 90%));
  }
  80%,
  100% {
    fill: #5b2a1c;
    filter: none;
  }
}
.bot-arm {
  transform-box: view-box;
  animation: bot-arm-l var(--take) ease-in-out infinite;
}
.bot-arm-l {
  transform-origin: 26px 44px;
}
.bot-arm-r {
  transform-origin: 186px 44px;
  animation-name: bot-arm-r;
}
@keyframes bot-arm-l {
  0%,
  35%,
  74%,
  100% {
    rotate: 0deg;
  }
  40%,
  68% {
    rotate: 118deg;
  }
  54% {
    rotate: 100deg;
  }
}
@keyframes bot-arm-r {
  0%,
  35%,
  74%,
  100% {
    rotate: 0deg;
  }
  40%,
  68% {
    rotate: -118deg;
  }
  54% {
    rotate: -100deg;
  }
}
@keyframes bot-wiggle {
  0%,
  34%,
  60%,
  100% {
    rotate: 0deg;
  }
  38% {
    rotate: -3deg;
  }
  44% {
    rotate: 3deg;
  }
  50% {
    rotate: -2deg;
  }
  55% {
    rotate: 1deg;
  }
}
.bot-hoist {
  position: absolute;
  left: -1.5cqi;
  bottom: 14.6cqi;
  width: 24cqi;
  animation: hoist var(--take) cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
/* The hoist line runs up out of frame. */
.bot-hoist::before {
  content: "";
  position: absolute;
  bottom: 88%;
  left: calc(50% - 0.75px);
  width: 1.5px;
  height: 200cqi;
  background: var(--string);
}
.bot-hoist img {
  position: relative;
  display: block;
  width: 100%;
  filter: drop-shadow(0 10px 8px rgb(30 15 5 / 35%));
}
@keyframes hoist {
  0%,
  8% {
    translate: 0 -34cqi;
    rotate: -3deg;
  }
  29% {
    translate: 0 -1.2cqi;
    rotate: 1deg;
  }
  31.5% {
    translate: 0 0;
    rotate: 0deg;
  }
  33.5% {
    translate: 0 -1.4cqi;
  }
  35.5%,
  74% {
    translate: 0 0;
    rotate: 0deg;
  }
  92%,
  100% {
    translate: 0 -34cqi;
    rotate: 3deg;
  }
}
/* It's alive: sparks fly the moment the head clicks on. */
.bot-sparks {
  position: absolute;
  left: 50%;
  bottom: 96%;
  z-index: 1;
}
.bot-sparks i {
  position: absolute;
  left: -1.5cqi;
  top: -1.5cqi;
  width: 3cqi;
  height: 3cqi;
  background: var(--yellow);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  rotate: var(--a);
  animation: spark var(--take) ease-out infinite;
}
.bot-sparks i:nth-child(even) {
  background: #e8452c;
}
@keyframes spark {
  0%,
  31% {
    opacity: 0;
    transform: translateY(0) scale(0.4);
  }
  33% {
    opacity: 1;
    transform: translateY(-10cqi) scale(1);
  }
  44%,
  100% {
    opacity: 0;
    transform: translateY(-19cqi) scale(0.6);
  }
}

/* Behind the camera, cheering every time it works. */
.set-jason {
  right: -3cqi;
  bottom: 1cqi;
  width: 36cqi;
  animation: cheer var(--take) ease-in-out infinite;
  filter: drop-shadow(0 12px 10px rgb(30 15 5 / 35%));
  transition: filter 0.9s ease;
}
@keyframes cheer {
  0%,
  35%,
  56%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-2.4cqi);
  }
  45% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.6cqi);
  }
}

/* Mom, off to the side with her coffee, unbothered by the chaos. */
.set-amanda {
  left: -4cqi;
  bottom: 1cqi;
  width: 18.5cqi;
  transform-origin: 50% 100%;
  animation: sip 7s ease-in-out infinite;
  filter: drop-shadow(0 12px 10px rgb(30 15 5 / 35%));
  transition: filter 0.9s ease;
}
@keyframes sip {
  0%,
  55%,
  100% {
    rotate: 0deg;
  }
  64%,
  80% {
    rotate: -2.5deg;
  }
}

/* The camera, reels turning, pointed at the bench. */
.set-camera {
  right: 19cqi;
  bottom: 3cqi;
  width: 25cqi;
  filter: drop-shadow(0 12px 10px rgb(30 15 5 / 40%));
}
.cam-leg {
  fill: none;
  stroke: var(--string);
  stroke-width: 9;
  stroke-linecap: round;
}
.cam-film {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
}
.reel-disc {
  fill: var(--ink);
}
.reel-hole {
  fill: var(--sky-bottom);
}
.reel-hub {
  fill: var(--ochre);
}
.cam-reel {
  transform-box: fill-box;
  transform-origin: center;
  animation: gear-turn 2.4s linear infinite;
}
.cam-reel-back {
  animation-duration: 1.9s;
}
@keyframes gear-turn {
  to {
    rotate: 360deg;
  }
}
.cam-body {
  fill: var(--rust);
}
.cam-stripe {
  fill: var(--yellow);
}
.cam-ink {
  fill: var(--ink);
}
.cam-hood {
  fill: #3a3e36;
}
.cam-glass {
  fill: #7fb0cf;
}
.cam-rec {
  fill: #e8452c;
  animation: rec-blink 1.2s steps(1) infinite;
}
[data-time="night"] .cam-rec {
  filter: drop-shadow(0 0 5px #ff4a2a);
}
[data-time="night"] .reel-hole {
  fill: #262b46;
}

/* The director (a kid in a robot head), pointing at the shot. */
.set-director {
  left: 12.5cqi;
  bottom: 0;
  width: 16.5cqi;
  scale: -1 1;
  transform-origin: 40% 100%;
  animation: direct 1.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 12px 10px rgb(30 15 5 / 35%));
}
@keyframes direct {
  from {
    rotate: -2deg;
  }
  to {
    rotate: 2.5deg;
  }
}

/* The lighting crew waddles back and forth with the bulbs. */
.set-grip {
  left: 24cqi;
  bottom: 0;
  width: 22cqi;
  animation: grip-rounds 20s ease-in-out infinite;
}
.set-grip-turn {
  animation: robot-turn 20s steps(1) infinite;
}
.set-grip img {
  display: block;
  width: 100%;
  transform-origin: 50% 100%;
  animation: robot-waddle 0.55s ease-in-out infinite alternate;
  filter: drop-shadow(0 10px 8px rgb(30 15 5 / 40%));
}
@keyframes grip-rounds {
  0%,
  8% {
    translate: 0 0;
  }
  42%,
  54% {
    translate: 26cqi 0;
  }
  88%,
  100% {
    translate: 0 0;
  }
}
/* The youngest, thumbs up in front of the bench. */
.set-little {
  left: 47cqi;
  bottom: 0;
  width: 8.2cqi;
  transform-origin: 50% 100%;
  animation: cheer var(--take) ease-in-out infinite;
  animation-delay: -0.15s;
  filter: drop-shadow(0 10px 8px rgb(30 15 5 / 35%));
  transition: filter 0.9s ease;
}

[data-time="night"] .set-jason,
[data-time="night"] .set-amanda,
[data-time="night"] .set-little,
[data-time="night"] .set-grip img,
[data-time="night"] .set-director,
[data-time="night"] .bot-hoist img {
  filter: drop-shadow(0 12px 10px rgb(0 0 0 / 50%)) brightness(0.72) saturate(0.85);
}

.aor-tag h1 {
  font-size: clamp(36px, 3.8vw, 58px);
}
.aor-tag h1 em {
  margin-top: 8px;
  white-space: nowrap;
}
.aor-tag .actions {
  gap: 16px 22px;
}
.aor-hero .diorama-content {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.aor-hero .diorama-controls {
  left: clamp(34px, 5vw, 76px);
}
/* The set waits while it is off screen. */
.aor-hero.is-offscreen .diorama-scene *,
.aor-hero.is-offscreen .diorama-scene *::before {
  animation-play-state: paused;
}
@media (max-width: 1000px) {
  .aor-hero .diorama-content {
    grid-template-columns: 1fr;
    padding-bottom: calc(66vw + 20px);
  }
  .aor-hero .enrollment-tag {
    padding-top: 110px;
  }
  .set {
    width: 100%;
  }
  .set-lamp,
  .set-sign,
  .set-director {
    display: none;
  }
  .set-amanda {
    left: 3cqi;
  }
  .aor-hero .diorama-controls {
    left: 50%;
    translate: -50% 0;
  }
}
@media (max-width: 700px) {
  .film-garland {
    height: 70px;
  }
  .fg-strip {
    stroke-width: 20;
  }
  .fg-frames {
    stroke-width: 8;
  }
  .aor-hero .diorama-content {
    padding-bottom: calc(80vw + 30px);
  }
  /* Zoom in on the action: the bench, the robot, and the camera. */
  .set {
    right: -10%;
    width: 122%;
  }
  .set-amanda {
    left: 9cqi;
    width: 16cqi;
  }
  /* The switch moves to the scene's top corner so it doesn't cover the kids. */
  .aor-hero .diorama-controls {
    left: auto;
    right: 18px;
    bottom: calc(80vw - 24px);
    translate: none;
  }
  .aor-hero .lights-label {
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aor-hero .diorama-scene *,
  .aor-hero .diorama-scene *::before {
    animation: none !important;
  }
  .bot-heart {
    fill: #e8452c;
  }
}

/* ---------- On the channel: episode kinds + the latest episodes ----------
   The cards come from server/lib/youtubeEpisodes.ts. Until the first
   episode is up they are clapperboard slates marked "Coming soon". */
.aor-episodes > .eyebrow,
.aor-episodes h2 em {
  color: var(--rust-deep);
}
.aor-episodes {
  padding-block: 50px 110px;
}
.episode-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.episode-kinds li {
  padding: 8px 14px;
  background: #fffaf0 var(--grain);
  box-shadow: var(--paper-lift);
  font: 500 15px/1.3 var(--sans);
  color: #3e4038;
}
.episode-kinds li:nth-child(2) {
  background-color: var(--peach);
}
.episode-kinds li:nth-child(3) {
  background-color: #f8e8a4;
}
.episode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.episode {
  padding: 12px 12px 18px;
  background: #fffaf0 var(--grain);
  box-shadow: var(--paper-lift);
}
.episode:nth-child(1) { rotate: -0.8deg; }
.episode:nth-child(3) { rotate: 0.7deg; }
.episode a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.episode-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1c1e1a;
}
.episode-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.episode-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 58px;
  height: 40px;
  translate: -50% -50%;
  border-radius: 12px;
  background: #e8452c;
  transition: scale 0.2s ease;
}
.episode-play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 54%;
  translate: -50% -50%;
  border-block: 9px solid transparent;
  border-left: 15px solid #fff8ea;
}
.episode a:hover .episode-play,
.episode a:focus-visible .episode-play {
  scale: 1.1;
}
/* Coming soon: a chalk slate in place of the thumbnail. */
.episode-slate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    repeating-linear-gradient(-45deg, #f6f1e5 0 14px, #1c1e1a 14px 28px) top / 100% 18px no-repeat,
    #24271f;
  color: #f6f1e5;
}
.slate-num {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
.slate-soon {
  font: 400 clamp(22px, 2.4vw, 30px)/1 "Permanent Marker", var(--display);
  color: var(--yellow);
}
.episode-title {
  display: block;
  margin-top: 14px;
  font: 600 18px/1.3 var(--display);
  color: var(--ink);
}
.episode-soon .episode-title {
  font: italic 400 16px/1.4 var(--display);
  color: #62665a;
}
.episode-date {
  display: block;
  margin-top: 6px;
  font: 500 12px/1 var(--mono);
  color: #7a7d70;
}
.episode-actions {
  margin-top: 30px;
}
@media (max-width: 900px) {
  .episode-row {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  /* One slate says it on a phone; three stacked is a long scroll of nothing. */
  .episode-soon + .episode-soon {
    display: none;
  }
}

/* ---------- The motto, split into ordinary and extraordinary ---------- */
.aor-motto {
  position: relative;
  padding-block: 100px 110px;
  background: #0b0b0a var(--grain);
  color: #f6f1e5;
}
.aor-motto::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 30px;
  background: #0b0b0a;
  -webkit-mask: var(--torn) repeat-x 60px 100% / 700px 100%;
  mask: var(--torn) repeat-x 60px 100% / 700px 100%;
}
.aor-motto .eyebrow {
  color: var(--yellow);
  text-align: center;
}
.aor-motto h2 {
  max-width: 980px;
  margin: 14px auto 64px;
  text-align: center;
  font-size: clamp(36px, 5vw, 70px);
  line-height: 1.05;
}
.aor-motto h2 span {
  display: block;
  margin: 6px 0;
  font: 600 13px/1.5 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #c7c9bc;
}
.aor-motto h2 em {
  color: var(--yellow);
}
.motto-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.motto-side {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.motto-extraordinary {
  justify-content: flex-end;
}
.motto-side > img {
  flex-shrink: 0;
  width: 120px;
  height: auto;
  filter: drop-shadow(0 12px 10px rgb(0 0 0 / 60%));
}
.motto-couple {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
}
.motto-couple img {
  position: relative;
  height: auto;
  filter: drop-shadow(0 12px 10px rgb(0 0 0 / 60%));
}
.motto-couple img:first-child {
  z-index: 1;
  width: 86px;
  margin-right: -30px;
}
.motto-couple img:last-child {
  width: 170px;
}
.motto-list {
  flex: 1;
  max-width: 330px;
  padding: 22px 24px 18px;
  background: #fffaf0 var(--grain);
  color: var(--ink);
  box-shadow: 0 20px 30px -14px rgb(0 0 0 / 80%);
  rotate: -2deg;
}
.motto-extraordinary .motto-list {
  background-color: var(--yellow);
  rotate: 2deg;
}
.motto-label {
  margin: 0;
  font: italic 600 28px/1.1 var(--display);
}
.motto-caption {
  margin: 4px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px dashed rgb(36 40 33 / 35%);
  font: 600 11px/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.motto-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.motto-list li {
  position: relative;
  padding: 4px 0 4px 26px;
  font-size: 16px;
}
.motto-ordinary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background:
    linear-gradient(45deg, transparent 44%, var(--rust) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--rust) 44% 56%, transparent 56%);
}
.motto-extraordinary li::before {
  content: "♥";
  position: absolute;
  left: 2px;
  top: 3px;
  color: var(--rust);
}
.motto-arrow svg {
  width: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 900px) {
  .motto-split {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .motto-arrow {
    width: 90px;
    rotate: 90deg;
  }
  .motto-side,
  .motto-extraordinary {
    justify-content: center;
    width: 100%;
    max-width: 480px;
  }
}
@media (max-width: 560px) {
  .motto-side > img {
    width: 84px;
  }
  .motto-couple img:first-child {
    width: 64px;
    margin-right: -22px;
  }
  .motto-couple img:last-child {
    width: 124px;
  }
}

/* The theater follows the black motto section on this page. */
.aor-motto + .channel {
  margin-top: 0;
}

/* ---------- The real life part: a big paper diorama of the daycare ----------
   The scene is the star: a wide cut-paper shadow box with the hero's sky
   (bulb sun, hanging clouds, a crib mobile, a drifting balloon, a kite,
   bunting), the schoolhouse, idea babies waddling in the door, and the
   kids in their robot heads. Copy sits small above; the report card and
   enrollment slip sit small below. Pieces are sized in cqi of .dc-scene.
   Stars and the A+ land on .is-live (aor.js). */
.aor-daycare {
  --marker: "Permanent Marker", var(--display);
  padding-block: 110px 120px;
}
.dc-head {
  text-align: center;
}
.dc-eyebrow {
  background: linear-gradient(#b8532f, #93401f);
  rotate: -2deg;
}
.dc-head h2 {
  margin: 18px auto 10px;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
}
.dc-head h2 em {
  color: var(--rust-deep);
}
.dc-head > p:not(.dymo) {
  max-width: 640px;
  margin: 0 auto;
  font-size: 17px;
  color: #4f5248;
}

/* The shadow box itself lives in assets/daycare-scene.css (shared with
   /membership and /welcome). */
.dc-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  max-width: 900px;
  margin-top: 46px;
  align-items: start;
}
.report-card {
  position: relative;
  padding: 18px 22px 16px;
  background:
    linear-gradient(90deg, transparent 34px, rgb(184 83 47 / 35%) 34px 35.5px, transparent 35.5px),
    #fffdf6 var(--grain);
  box-shadow:
    0 2px 2px rgb(60 40 20 / 16%),
    0 24px 30px -18px rgb(60 40 20 / 50%);
  rotate: 1deg;
}
.report-card::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 40%;
  width: 96px;
  height: 24px;
  background: rgb(236 215 142 / 80%);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 18%);
  rotate: -3deg;
}
.rc-head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px 22px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.aor-daycare .principle-tags {
  display: block;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}
.aor-daycare .principle-tags li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0;
  border-bottom: 1px solid rgb(39 115 170 / 18%);
  background: none;
  box-shadow: none;
  rotate: 0deg;
  font: italic 500 18px/1 var(--display);
}
.principle-tags i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe98a, #e2ad45 70%);
  color: #fff8d8;
  font-style: normal;
  font-size: 16px;
  box-shadow: 0 2px 3px rgb(90 55 10 / 40%), inset 0 -2px 0 rgb(150 90 10 / 40%);
  rotate: calc(var(--i) * 13deg - 20deg);
}
.rc-grade {
  position: absolute;
  z-index: 2;
  right: -38px;
  bottom: -28px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 56px;
  font: 400 28px/1 var(--marker);
  color: #d02a17;
  rotate: -12deg;
}
.rc-grade::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #d02a17;
  border-radius: 50% 46% 52% 44%;
  rotate: 8deg;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .principle-tags i {
    scale: 0;
    opacity: 0;
  }
  .aor-daycare.is-live .principle-tags i {
    scale: 1;
    opacity: 1;
    transition:
      scale 0.45s cubic-bezier(0.34, 1.9, 0.5, 1) calc(0.3s + var(--i) * 0.28s),
      opacity 0.2s ease calc(0.3s + var(--i) * 0.28s);
  }
  .rc-grade {
    opacity: 0;
    scale: 1.8;
  }
  .aor-daycare.is-live .rc-grade {
    opacity: 1;
    scale: 1;
    transition:
      opacity 0.2s ease 1.6s,
      scale 0.35s cubic-bezier(0.5, 0, 0.75, 0) 1.6s;
  }
}
.slip {
  position: relative;
  padding: 24px 24px 24px 26px;
  border: 2px dashed #9a7a58;
  background: #f8e8a4 var(--grain);
  rotate: -0.8deg;
  box-shadow: 0 16px 24px -16px rgb(60 40 20 / 55%);
}
.slip-cut {
  position: absolute;
  top: -15px;
  left: 24px;
  padding: 0 6px;
  background: var(--paper);
  color: #6f5c49;
  font-size: 22px;
  line-height: 1;
}
.slip-title {
  margin: 0 0 8px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.slip .aor-daycare-invite {
  margin: 0;
  font-size: 16px;
}
.slip .actions {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .aor-daycare {
    padding-block: 80px 90px;
  }
  .dc-notes {
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 34px;
  }
}
/* On phones the box gets taller so the kids and sky keep their size. */
@media (max-width: 700px) {
  .dc-notes {
    gap: 46px;
  }
  .rc-grade {
    right: -8px;
  }
}
/* ---------- Closing ---------- */
.aor-closing .channel-subscribe {
  color: #fff8ea;
}

/* ---------- The channel: a real, grainy cinema with a punk zine taped on ----------
   The kids' video plays on the cinema screen in the photo. The screen box is
   measured from cinema-room.webp (a crop of the original photo): keep these
   percentages in step if the photo is ever recropped. */
.cinema {
  --room-w: min(1240px, 100vw);
  --stencil: "Allerta Stencil", var(--mono);
  --zine: "Special Elite", var(--mono);
  --pop-yellow: #f5d833;
  --punk-red: #e8452c;
  position: relative;
  overflow: hidden;
  padding: 90px 0 120px;
  background: #0a0709;
  color: #f6f1e5;
}
/* Torn edge where the paper page gives way to the dark room. */
.cinema::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -1px;
  left: 0;
  right: 0;
  height: 28px;
  background: var(--paper) var(--grain);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 94% 70%, 88% 35%, 81% 80%, 73% 45%, 66% 90%, 58% 40%, 50% 75%, 43% 30%, 35% 85%, 27% 45%, 19% 78%, 12% 35%, 6% 70%, 0 40%);
}

/* Label-maker tape. */
.dymo {
  display: inline-block;
  margin: 0;
  padding: 7px 14px 6px;
  border-radius: 3px;
  background: linear-gradient(#1c1c1c, #0d0d0d);
  color: #f2f2f2;
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgb(0 0 0 / 80%), 0 -1px 0 rgb(255 255 255 / 25%);
  box-shadow: 0 3px 6px rgb(0 0 0 / 50%);
  rotate: -1.5deg;
}

/* A spray-painted stencil across the ceiling. */
.cinema-marquee {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: calc(var(--room-w) * -0.06);
}
.stencil {
  margin: 10px 0 0;
  font: 400 clamp(46px, 9vw, 132px)/0.95 var(--stencil);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #efe6d2;
  rotate: -2deg;
  filter: url(#spray);
  text-shadow:
    0 0 4px rgb(239 230 210 / 60%),
    0 0 22px rgb(239 230 210 / 22%);
  opacity: 0.92;
}

.cinema-room {
  position: relative;
  width: var(--room-w);
  margin: 0 auto;
  aspect-ratio: 1800 / 1810;
  container-type: inline-size;
}
.cinema-photo {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
/* Film grain that never sits still, and edges that sink into the dark. */
.cinema-room::before,
.cinema-room::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cinema-room::before {
  z-index: 1;
  background:
    linear-gradient(90deg, #0a0709, transparent 9%, transparent 91%, #0a0709),
    linear-gradient(#0a0709, transparent 7%, transparent 62%, rgb(10 7 9 / 70%) 80%, #0a0709);
}
.cinema-room::after {
  z-index: 4;
  background-image: var(--grain);
  opacity: 0.55;
  mix-blend-mode: overlay;
  animation: grain-jitter 0.9s steps(4) infinite;
}
@keyframes grain-jitter {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -18px 9px;
  }
  50% {
    background-position: 11px -14px;
  }
  75% {
    background-position: -7px -20px;
  }
}

/* The screen: the video is projected at 16:9 on the lit 2.35:1 screen. */
.cinema-screen {
  position: absolute;
  z-index: 2;
  left: 23.79%;
  top: 26.53%;
  width: 51.14%;
  height: 21.6%;
  margin: 0;
  display: flex;
  justify-content: center;
  animation: projector 5s steps(1) infinite;
}
.cinema-screen video {
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  filter: contrast(1.08) saturate(0.85) sepia(0.12);
  box-shadow: 0 0 40px 6px rgb(255 246 220 / 30%);
}
@keyframes projector {
  0%,
  100% {
    filter: brightness(1);
  }
  47% {
    filter: brightness(1.06);
  }
  48% {
    filter: brightness(0.94);
  }
  49% {
    filter: brightness(1);
  }
}
.cinema-caption {
  position: absolute;
  top: calc(100% + 2.2cqi);
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  font-size: clamp(9px, 1.05cqi, 13px);
  rotate: 1deg;
}

/* Dust drifting in the projector light. */
.cinema-dust i {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff8e4;
  box-shadow: 0 0 6px 1px rgb(255 248 228 / 70%);
  opacity: 0;
  animation: dust 11s linear var(--d) infinite;
}
@keyframes dust {
  0% {
    opacity: 0;
    translate: 0 0;
  }
  15%,
  70% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    translate: 6cqi 8cqi;
  }
}

/* Stickers slapped on the room. */
.sticker {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow:
    0 0 0 0.4cqi #fff,
    0 1cqi 1.6cqi rgb(0 0 0 / 55%);
}
.sticker-budget {
  left: 71.5%;
  top: 22.6%;
  width: 8.5cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pop-yellow);
  color: var(--ink);
  font: 400 1.5cqi/1 var(--stencil);
  rotate: 14deg;
}
.sticker-rec {
  left: 21.3%;
  top: 24.3%;
  padding: 0.6cqi 1.3cqi;
  background: #fff;
  color: var(--punk-red);
  font: 700 1.4cqi/1 var(--mono);
  letter-spacing: 0.2em;
  rotate: -10deg;
}
.sticker-rec::before {
  content: "● ";
  animation: rec-blink 1.2s steps(1) infinite;
}

/* Robot kids (and one idea baby) in the audience, turned to see who came. */
.cinema-crowd > * {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: 61%;
  width: var(--w);
  height: auto;
  max-width: none;
  transform-origin: 50% 100%;
  filter: brightness(0.62) saturate(0.7) drop-shadow(0 0 1.2cqi rgb(160 180 255 / 35%));
  animation: crowd-peek 9s ease-in-out var(--delay) infinite;
}
.crowd-small {
  top: 63%;
}
.crowd-baby {
  top: 62.5%;
}
@keyframes crowd-peek {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  20% {
    translate: 0 -12%;
    rotate: -6deg;
  }
  30% {
    translate: 0 -12%;
    rotate: 5deg;
  }
  40%,
  70% {
    translate: 0 0;
    rotate: 0deg;
  }
}

/* The copy sits in the dark seats below the screen. */
.cinema-copy {
  position: relative;
  z-index: 5;
  width: min(980px, calc(100% - 40px));
  margin: calc(var(--room-w) * -0.47) auto 0;
  text-align: center;
}

/* A ransom-note headline, cut from whatever was lying around. */
.ransom {
  margin: 26px 0 0;
  font-size: clamp(32px, 5.4vw, 70px);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink);
}
.rn,
.rn-word {
  display: inline-block;
}
.rn {
  padding: 0.02em 0.16em 0.06em;
  box-shadow: 0 0.08em 0.14em rgb(0 0 0 / 55%);
  clip-path: polygon(2% 6%, 30% 0, 71% 5%, 98% 1%, 100% 45%, 97% 96%, 62% 100%, 28% 95%, 1% 100%, 0 52%);
}
.rn-word {
  margin-left: 0.12em;
}
.rn-word .rn {
  padding-inline: 0.08em;
  margin-inline: 0.01em;
}
.rn-the {
  background: #f1ebdc var(--grain);
  font-family: var(--display);
  font-weight: 700;
  rotate: -4deg;
}
.rn-kids {
  background: var(--punk-red);
  color: #fff;
  font-family: var(--stencil);
  text-transform: uppercase;
  rotate: 2.5deg;
}
.rn-got {
  background: #111;
  color: var(--pop-yellow);
  font: 700 0.8em var(--mono);
  text-transform: uppercase;
  rotate: -2deg;
}
.rn-a {
  background: var(--pop-yellow);
  font-family: var(--zine);
  rotate: 5deg;
}
.rn-c {
  background: #fff;
  font-family: var(--display);
  font-style: italic;
  rotate: -6deg;
}
.rn-a2 {
  background: #2773aa;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  rotate: 4deg;
}
.rn-m {
  background: #f1ebdc radial-gradient(circle, rgb(0 0 0 / 22%) 1px, transparent 1.5px) 0 0 / 5px 5px;
  font-family: var(--stencil);
  text-transform: uppercase;
  rotate: -3deg;
}
.rn-e {
  background: var(--pop-yellow);
  font-family: var(--zine);
  rotate: 7deg;
}
.rn-r {
  background: #111;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  rotate: -5deg;
}
.rn-a3 {
  background: #f0a8b8;
  font-family: var(--display);
  font-style: italic;
  rotate: 3deg;
}
.rn-dot {
  background: var(--punk-red);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  rotate: -8deg;
}

/* Spray paint, with drips that run once it comes into view. */
.spray {
  position: relative;
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  font: italic 500 clamp(36px, 5.8vw, 78px)/1 var(--display);
  color: var(--pop-yellow);
  rotate: -2deg;
  filter: url(#spray);
  text-shadow:
    0 0 3px rgb(245 216 51 / 70%),
    0 0 20px rgb(245 216 51 / 30%);
}
.drip {
  position: absolute;
  top: 88%;
  left: var(--x);
  width: 4px;
  height: var(--h);
  border-radius: 0 0 3px 3px;
  background: linear-gradient(var(--pop-yellow) 80%, transparent);
  transform-origin: top;
  scale: 1 0;
}
.drip::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pop-yellow);
}
.cinema.is-live .drip {
  scale: 1 1;
  transition: scale 2.6s cubic-bezier(0.3, 0, 0.2, 1) var(--d);
}

.cinema-bill {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin-top: 64px;
  text-align: left;
}

/* A photocopied zine page, duct-taped to the seat back. */
.zine {
  position: relative;
  padding: 38px 36px 32px;
  background: #e9e7e1 var(--grain);
  color: #151515;
  font: 17px/1.6 var(--zine);
  rotate: -1.4deg;
  clip-path: polygon(0 2%, 8% 0, 21% 1.5%, 37% 0, 55% 2%, 72% 0.5%, 88% 2%, 100% 0, 99% 30%, 100% 62%, 98.5% 100%, 80% 98%, 60% 100%, 41% 98.5%, 20% 100%, 1% 98%, 0 70%, 1.5% 35%);
  filter: contrast(1.08) drop-shadow(0 18px 20px rgb(0 0 0 / 55%));
}
.zine p {
  margin: 0 0 14px;
}
.zine .channel-free {
  font-weight: 700;
  text-decoration: underline wavy var(--punk-red) 1.5px;
  text-underline-offset: 4px;
}
.zine .actions {
  gap: 14px 22px;
  margin-top: 22px;
}
.zine .text-link {
  color: #151515;
  font-family: var(--sans);
}
.duct {
  position: absolute;
  top: -6px;
  width: 104px;
  height: 30px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 10%) 0 2px, transparent 2px 5px),
    linear-gradient(#b9bcbd, #8f9496);
  clip-path: polygon(0 12%, 6% 0, 12% 14%, 18% 2%, 82% 0, 88% 16%, 94% 3%, 100% 14%, 97% 50%, 100% 88%, 93% 100%, 87% 86%, 80% 100%, 20% 98%, 13% 86%, 7% 100%, 0 90%, 3% 50%);
  opacity: 0.92;
}
.duct-left {
  left: -10px;
  rotate: -28deg;
}
.duct-right {
  right: -10px;
  rotate: 24deg;
}

/* The call sheet, run through a tired photocopier and stapled on. */
.xerox-sheet {
  position: relative;
  margin-top: 30px;
  padding: 30px 28px 24px;
  background: #f4f2ea var(--grain);
  color: #1a1a1a;
  rotate: 2.4deg;
  box-shadow: 0 18px 24px -8px rgb(0 0 0 / 60%);
  filter: grayscale(1) contrast(1.15);
}
.xerox-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 10%), transparent 6%, transparent 94%, rgb(0 0 0 / 14%)),
    repeating-linear-gradient(0deg, transparent 0 46px, rgb(0 0 0 / 5%) 46px 47px);
  pointer-events: none;
}
.staple {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 34px;
  height: 5px;
  translate: -50% 0;
  border: 2px solid #6d6f70;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  rotate: -4deg;
}
.xerox-title {
  margin: 0 0 16px;
  font: 400 26px/1 var(--stencil);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.xerox-sheet dl {
  margin: 0;
}
.xerox-sheet dl div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1.5px dashed #444;
}
.xerox-sheet dt {
  font: 600 11px/1.9 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.xerox-sheet dd {
  margin: 0;
  font: italic 500 20px/1.25 var(--display);
}

.cinema:not(.is-live) .cinema-room *,
.cinema:not(.is-live) .cinema-room::after {
  animation-play-state: paused;
}
@media (max-width: 900px) {
  .cinema-bill {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 560px;
    margin-inline: auto;
  }
  .xerox-sheet {
    width: min(360px, 90%);
    margin: 10px auto 0;
  }
}
@media (max-width: 700px) {
  .cinema {
    --room-w: 170vw;
    padding: 70px 0 90px;
  }
  .cinema-room {
    margin-left: -35vw;
  }
  .cinema-marquee {
    margin-bottom: -6vw;
  }
  .cinema-copy {
    margin-top: calc(var(--room-w) * -0.46);
  }
  .cinema-caption {
    font-size: 9px;
  }
  .sticker-budget {
    left: 68%;
    top: 20%;
  }
  .sticker-rec {
    left: 25%;
    top: 23.4%;
  }
  .spray {
    font-size: 8.2vw;
    white-space: nowrap;
  }
  .crowd-bot,
  .crowd-baby {
    display: none;
  }
  .zine {
    padding: 34px 22px 26px;
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-room *,
  .cinema-room::after {
    animation: none !important;
  }
  .cinema-dust {
    display: none;
  }
  .drip {
    scale: 1 1;
  }
}