/* Capital Sticks: "Kitchen-Table Capitol" papercraft world. See DESIGN.md */
:root {
  --kraft: #c49a62;
  --kraft-dark: #8a6236;
  --card: #f6efe0;
  --card-2: #efe5cf;
  --ink: #221b15;
  --ink-soft: #4a3d30;
  --red: #c22f33;
  --red-dark: #8f1f24;
  --navy: #213468;
  --sky: #a6cee8;
  --tape: rgba(246, 232, 170, .74);
  --shadow: rgba(48, 30, 12, .38);
  --display: "Sigmar One", "Arial Rounded MT Bold", sans-serif;
  --body: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --typed: "Special Elite", "Courier New", monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --tex: url("../img/tex/kraft.webp");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink);
  background: var(--kraft) var(--tex) repeat;
  background-size: 512px;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--red-dark); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--red); }
::selection { background: var(--red); color: var(--card); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: var(--kraft-dark) var(--card-2); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 99; background: var(--card); color: var(--ink); padding: .6rem 1rem; font-weight: 700; border-radius: 4px; }
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- carved paper display type ---------- */
.carve {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .005em;
  color: var(--card);
  text-shadow: 1px 1px 0 #e3d5b6, 2px 2px 0 #cdb88c, 3px 3px 0 #b39a6c, 4px 6px 7px rgba(40, 24, 8, .45);
  text-wrap: balance;
  margin: 0;
}
.carve.ink { color: var(--ink); text-shadow: 1px 1px 0 rgba(255,255,255,.35), 2px 3px 3px rgba(40,24,8,.25); }
.carve .w { display: inline-block; white-space: nowrap; }
.carve .l { display: inline-block; rotate: var(--lr, 0deg); translate: 0 var(--ly, 0); }
h1.carve { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5.4rem); }
h2.carve { font-size: clamp(2rem, 1.3rem + 3vw, 3.8rem); }
h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.12; margin: 0 0 .35em; }

/* ---------- paper sheets with torn edges ---------- */
.sheet-shadow { filter: drop-shadow(3px 7px 6px var(--shadow)); }
.sheet {
  background: var(--card) url("../img/tex/cardstock.webp");
  background-size: 512px;
  padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1.1rem, 4vw, 3rem);
  -webkit-mask: url("../img/tex/torn-top.svg") top / 600px 18px repeat-x, url("../img/tex/torn-bottom.svg") bottom / 600px 18px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 34px) no-repeat;
  mask: url("../img/tex/torn-top.svg") top / 600px 18px repeat-x, url("../img/tex/torn-bottom.svg") bottom / 600px 18px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 34px) no-repeat;
}
.paper-red { background: var(--red) url("../img/tex/redpaper.webp"); background-size: 512px; color: var(--card); }
.paper-navy { background: var(--navy) url("../img/tex/navypaper.webp"); background-size: 512px; color: var(--card); }
.paper-sky { background: var(--sky) url("../img/tex/bluepaper.webp"); background-size: 512px; }
.paper-red a, .paper-navy a { color: var(--card); }

.tape { position: relative; }
.tape::before {
  content: ""; position: absolute; z-index: 3; width: 92px; height: 26px; top: -11px; left: calc(50% - 46px);
  background: var(--tape); rotate: -4deg;
  -webkit-mask: url("../img/tex/torn-top.svg") left/24px 100% no-repeat, url("../img/tex/torn-top.svg") right/24px 100% no-repeat, linear-gradient(#000 0 0) center/calc(100% - 10px) 100% no-repeat;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  pointer-events: none;
}

.corrugated { height: 22px; background: url("../img/tex/corrugated.webp") left center / auto 100% repeat-x; box-shadow: 0 6px 8px -4px rgba(40, 24, 8, .5); }

/* ---------- buttons: cut cardstock chips ---------- */
.btn {
  --r: -1.2deg;
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--body); font-weight: 800; font-size: 1.05rem; letter-spacing: .01em;
  padding: .85em 1.3em; min-height: 48px;
  border: 0; border-radius: 3px 6px 4px 7px / 6px 3px 7px 4px;
  color: var(--card); background: var(--red) url("../img/tex/redpaper.webp"); background-size: 512px;
  text-decoration: none; cursor: pointer;
  rotate: var(--r);
  box-shadow: 2px 4px 5px var(--shadow);
  transition: box-shadow .15s, translate .15s;
}
.btn:hover { color: var(--card); animation: jitter .5s steps(1, end) infinite; box-shadow: 3px 7px 9px var(--shadow); }
.btn:active { translate: 1px 2px; box-shadow: 1px 2px 2px var(--shadow); animation: none; }
.btn.navy { background-color: var(--navy); background-image: url("../img/tex/navypaper.webp"); --r: 1deg; }
.btn.cream { background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px; color: var(--ink); --r: .8deg; }
.btn.cream:hover { color: var(--ink); }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }

@keyframes jitter {
  0%   { translate: 0 0;      rotate: var(--r); }
  25%  { translate: 1px -1px; rotate: calc(var(--r) + .9deg); }
  50%  { translate: -1px 0;   rotate: calc(var(--r) - .6deg); }
  75%  { translate: 0 1px;    rotate: calc(var(--r) + .4deg); }
}

/* ---------- header ---------- */
.site-header { position: relative; z-index: 20; padding-block: .9rem .4rem; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; flex-wrap: wrap; }
.brand { display: block; width: clamp(118px, 22vw, 168px); rotate: -2deg; filter: drop-shadow(2px 4px 3px var(--shadow)); }
[data-page="index"] .brand { display: none; }
[data-page="index"] .site-header .wrap { justify-content: flex-end; }
.brand img { width: 100%; }
.brand:hover { animation: jitter .5s steps(1, end) infinite; --r: -2deg; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem .5rem; }
.nav a {
  --r: -1.5deg;
  display: block; font-family: var(--display); font-size: clamp(.95rem, .85rem + .4vw, 1.15rem); letter-spacing: .02em;
  color: var(--ink); text-decoration: none; padding: .5em .9em .45em; min-height: 44px;
  background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px;
  rotate: var(--r); box-shadow: 1px 3px 3px var(--shadow);
  clip-path: polygon(0 4%, 100% 0, 98% 96%, 2% 100%);
}
.nav li:nth-child(2) a { --r: 1.2deg; }
.nav li:nth-child(3) a { --r: -.6deg; }
.nav li:nth-child(4) a { --r: 1.8deg; }
.nav a:hover { animation: jitter .5s steps(1, end) infinite; color: var(--ink); }
.nav a[aria-current="page"] { background: var(--red) url("../img/tex/redpaper.webp"); background-size: 512px; color: var(--card); }

/* ---------- Season 2 ribbon ---------- */
.ribbon {
  display: block; text-decoration: none; text-align: center;
  font-family: var(--display); letter-spacing: .02em; font-size: clamp(.95rem, .8rem + .6vw, 1.25rem);
  color: var(--card); padding: .55rem 1rem;
  background: var(--navy) url("../img/tex/navypaper.webp"); background-size: 512px;
  -webkit-mask: url("../img/tex/torn-bottom.svg") bottom / 600px 10px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat;
  mask: url("../img/tex/torn-bottom.svg") bottom / 600px 10px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat;
}
.ribbon:hover { color: var(--card); }
.ribbon b { color: #ffd76a; font-weight: 400; }

/* ---------- HOME hero: diorama ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; margin-top: .4rem; }
.hero-set { position: absolute; inset: 0; z-index: -2; }
.hero-set img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(166,206,232,.0) 40%, rgba(120,84,40,.18) 100%); }
.hero-inner { display: grid; grid-template-columns: 1fr; align-items: end; gap: 1rem; padding-block: clamp(1.2rem, 4vw, 3rem) 0; min-height: min(86svh, 760px); }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 1.1rem; justify-items: start; align-self: center; }
.hero-logo { width: min(100%, 560px); rotate: -1.5deg; filter: drop-shadow(4px 10px 10px rgba(30,20,8,.45)); }
.slip {
  font-family: var(--display); font-size: clamp(1.25rem, 1rem + 1.4vw, 2.1rem); line-height: 1.12; color: var(--ink);
  background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px;
  padding: .5em .8em .55em; rotate: 1.2deg; box-shadow: 2px 5px 6px var(--shadow); max-width: 22ch;
  clip-path: polygon(0 3%, 99% 0, 100% 95%, 1% 100%);
}
.slip span { display: block; color: var(--red); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; }
.hero-cast { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; height: clamp(260px, 62vw, 540px); margin-top: -1rem; }
.hero-cast picture { display: block; height: 100%; }
.hero-cast img { height: 100%; width: auto; filter: drop-shadow(5px 9px 6px rgba(30,20,8,.4)); }
.hero-cast picture:nth-child(1) { rotate: -3deg; margin-right: -3%; height: 93%; }
.hero-cast picture:nth-child(2) { z-index: 2; position: relative; }
.hero-cast picture:nth-child(3) { rotate: 3deg; margin-left: -3%; height: 93%; }
.hero-floor { height: 28px; }

@media (min-width: 880px) {
  .hero-inner { grid-template-columns: 1.15fr .85fr; }
  .hero-cast { margin-top: 0; }
}

/* theme player */
.theme-player { display: grid; gap: .6rem; justify-items: start; }
.lyrics { list-style: none; margin: 0; padding: .7rem .9rem; font-family: var(--typed); font-size: .98rem; line-height: 1.45;
  background: rgba(246, 239, 224, .92); box-shadow: 1px 3px 4px var(--shadow); rotate: -.6deg; max-width: 34ch; }
.lyrics li { transition: color .2s, background-color .2s; padding-inline: .2em; }
.lyrics li.on { background: #ffd76a; color: var(--ink); }
.lyrics li.chorus { font-weight: 700; color: var(--red-dark); }

/* ---------- sections ---------- */
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section-tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); max-width: 60ch; }
.measure { max-width: 66ch; }

/* season 2 */
.s2 { position: relative; }
.s2-grid { display: grid; gap: 2rem; align-items: center; }
.s2-count { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 1rem; }
.s2-count .num { font-family: var(--display); font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: .9; color: #ffd76a; text-shadow: 3px 4px 0 var(--red-dark), 5px 8px 9px rgba(0,0,0,.3); }
.s2-count .unit { font-family: var(--display); font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); }
.glowup { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.glowup figure { margin: 0; text-align: center; }
.glowup figcaption { font-family: var(--typed); font-size: .95rem; margin-top: .5rem; }
.glowup .before img { border: 6px solid #fff; box-shadow: 2px 5px 6px rgba(0,0,0,.35); rotate: -2.5deg; aspect-ratio: 1; object-fit: cover; object-position: 50% 60%; }
.glowup .after img { height: clamp(200px, 30vw, 340px); width: auto; margin-inline: auto; filter: drop-shadow(5px 9px 6px rgba(0,0,0,.4)); rotate: 2deg; }
@media (min-width: 880px) { .s2-grid { grid-template-columns: 1.05fr .95fr; } }

/* video box */
.tvbox { position: relative; padding: clamp(10px, 2vw, 18px); background: var(--kraft-dark) url("../img/tex/kraft.webp"); background-size: 300px; border-radius: 6px; box-shadow: inset 0 0 0 3px rgba(60,36,12,.35), 4px 10px 14px var(--shadow); rotate: .6deg; }
.tvbox video { width: 100%; aspect-ratio: 16/9; background: #111; border-radius: 3px; }
.split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: .9fr 1.1fr; } }

/* episode cue cards */
.cards { display: grid; gap: 2.2rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cue { --r: -1.2deg; position: relative; background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px; padding: .8rem .8rem 1.2rem; rotate: var(--r); box-shadow: 3px 7px 8px var(--shadow); display: flex; flex-direction: column; gap: .6rem; }
.cue:nth-child(2) { --r: 1.4deg; translate: 0 1rem; }
.cue:nth-child(3) { --r: -.5deg; }
.cue img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.cue h3 { margin: .2rem .2rem 0; }
.cue p { margin: 0 .2rem; color: var(--ink-soft); }
.cue .btn { align-self: flex-start; margin: .3rem .2rem 0; font-size: .95rem; }
.epno { font-family: var(--typed); font-size: .9rem; color: var(--red-dark); margin: 0 .2rem; }

/* ---------- press-a-character stage ---------- */
.stage-wrap { position: relative; }
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(6.5rem, 13vw, 8rem) 0 0;
  border-radius: 4px; box-shadow: 4px 10px 16px var(--shadow);
}
.stage-bg { position: absolute; inset: 0; z-index: -1; }
.stage-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.stage-bg::after { content: ""; position: absolute; inset: 0; background: rgba(33, 52, 104, .18); }
.shelf { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); row-gap: clamp(3.5rem, 8vw, 5rem); }
.fig {
  --r: 0deg;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: var(--fig-h, clamp(170px, 40vw, 300px));
  padding: 0 0 22px; margin: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.fig::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: 0; height: 22px; background: url("../img/tex/corrugated.webp") left center / auto 100% repeat-x; box-shadow: 0 6px 8px -4px rgba(40,24,8,.55); z-index: 1; }
.fig picture { display: block; height: 100%; position: relative; z-index: 2; }
.fig img {
  height: 100%; width: auto; max-width: 112%; object-fit: contain; object-position: bottom;
  rotate: var(--r); transform-origin: 50% 100%;
  filter: drop-shadow(3px 6px 3px rgba(30,20,8,.42));
  transition: translate .38s cubic-bezier(.34, 1.56, .64, 1), rotate .38s cubic-bezier(.34, 1.56, .64, 1), filter .38s ease-out, scale .38s cubic-bezier(.34, 1.56, .64, 1);
  position: relative; z-index: 2;
}
.fig:nth-child(odd) { --r: -1.2deg; }
.fig:nth-child(3n) { --r: 1.5deg; }
.fig:hover img { animation: jitter .5s steps(1, end) infinite; }
.fig:focus-visible { outline: none; }
.fig:focus-visible img { outline: 3px dashed var(--card); outline-offset: 4px; }
.fig.is-up img { animation: none; translate: 0 -26px; rotate: calc(var(--r) - 4deg); scale: 1.06; filter: drop-shadow(14px 34px 14px rgba(20,12,4,.34)); }
.fig .name {
  position: absolute; z-index: 3; bottom: 1px; left: 50%; translate: -50% 0; white-space: nowrap;
  font-family: var(--typed); font-size: clamp(.72rem, .66rem + .3vw, .9rem); line-height: 1.1; color: var(--ink);
  background: var(--card); padding: .2rem .45rem; box-shadow: 1px 2px 2px var(--shadow); rotate: -1deg;
}
@media (max-width: 520px) {
  .fig .name { white-space: normal; width: max-content; max-width: 98%; text-align: center; font-size: .68rem; padding: .15rem .3rem; }
  .nav a { padding: .5em .62em .45em; font-size: .9rem; }
  .nav ul { gap: .4rem .35rem; }
}
.fig.is-up .name { background: #ffd76a; }

.bubble {
  position: absolute; z-index: 10; width: min(300px, calc(100% - 1rem)); left: 0; top: 0;
  background: #fff; color: var(--ink); padding: .8rem 1rem .9rem; border-radius: 18px 22px 16px 24px / 20px 16px 24px 18px;
  font-family: var(--body); font-weight: 600; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); line-height: 1.35;
  box-shadow: 3px 7px 10px rgba(20,12,4,.35);
  transform-origin: var(--tail-x, 50%) 100%;
  opacity: 0; scale: .6; rotate: -3deg; pointer-events: none;
  transition: opacity .15s, scale .32s cubic-bezier(.34, 1.56, .64, 1), rotate .32s;
}
.bubble.show { opacity: 1; scale: 1; rotate: -1deg; pointer-events: auto; }
.bubble::after { content: ""; position: absolute; bottom: -14px; left: var(--tail-x, 50%); width: 26px; height: 18px; translate: -50% 0; background: #fff; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.bubble .who { display: block; font-family: var(--typed); font-weight: 400; font-size: .82rem; color: var(--red-dark); margin-bottom: .2rem; }
.bubble .ep { display: block; font-family: var(--typed); font-weight: 400; font-size: .78rem; color: var(--ink-soft); margin-top: .35rem; }
.bubble .jump { display: inline-block; margin-top: .4rem; font-size: .9rem; font-weight: 700; padding: .2rem 0; }
.stage-hint { font-family: var(--typed); color: var(--card); background: rgba(34,27,21,.72); padding: .35rem .7rem; position: absolute; top: 1rem; left: 1rem; z-index: 4; font-size: .9rem; rotate: -1deg; }

/* cast page layout + playbill */
.cast-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .cast-layout { grid-template-columns: minmax(0, 1fr) 360px; } .playbill-col { position: sticky; top: 1rem; } }
.playbill { --r: .4deg; rotate: var(--r); }
.playbill .sheet { padding-top: 2.2rem; }
.playbill .role { font-family: var(--typed); color: var(--red-dark); margin: 0 0 .9rem; }
.playbill .played { font-size: 1.12rem; margin: 0 0 .8rem; }
.playbill .played strong { font-family: var(--display); font-weight: 400; font-size: 1.35rem; display: block; color: var(--ink); line-height: 1.1; }
.playbill h4 { font-family: var(--typed); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin: 1.1rem 0 .35rem; color: var(--ink-soft); }
.playbill ul { margin: 0; padding-left: 1.1rem; }
.playbill li { margin-bottom: .3rem; }
.playbill .face { float: right; width: 74px; margin: -.6rem -.2rem .4rem .8rem; filter: drop-shadow(2px 4px 3px var(--shadow)); rotate: 4deg; }
.playbill-empty { font-family: var(--typed); }

/* ---------- episodes page ---------- */
.ep-list { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(2.2rem, 5vw, 3.4rem); }
.ep-row { display: grid; gap: 1rem 2rem; align-items: center; }
.ep-row .thumb { position: relative; margin: 0; rotate: -1.4deg; }
.ep-row:nth-child(even) .thumb { rotate: 1.6deg; }
.ep-row .thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 8px solid #fff; box-shadow: 3px 7px 9px var(--shadow); }
.ep-row .num { font-family: var(--display); font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem); line-height: .9; color: var(--red); text-shadow: 2px 3px 0 var(--red-dark), 3px 6px 6px rgba(40,24,8,.3); display: block; margin-bottom: .2rem; }
.ep-row h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.08; margin: 0 0 .3rem; }
.ep-row .yt { font-family: var(--typed); color: var(--ink-soft); margin: 0 0 .6rem; font-size: .95rem; }
.ep-row .hook { margin: 0 0 1rem; max-width: 52ch; }
.ep-row .text { background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px; padding: 1.2rem 1.3rem 1.4rem; box-shadow: 2px 5px 7px var(--shadow); rotate: .4deg; }
@media (min-width: 820px) {
  .ep-row { grid-template-columns: 1.05fr 1fr; }
  .ep-row:nth-child(even) .thumb { order: 2; }
}
.finale-tag { display: inline-block; font-family: var(--typed); background: #ffd76a; padding: .1rem .45rem; margin-left: .4rem; font-size: .85rem; rotate: -2deg; vertical-align: middle; }

.s2-cards { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.mystery { --r: -1deg; position: relative; text-align: center; padding: 1.4rem 1rem 1.6rem; background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px; rotate: var(--r); box-shadow: 3px 7px 8px var(--shadow); }
.mystery:nth-child(2) { --r: 1.3deg; } .mystery:nth-child(3) { --r: -.4deg; }
.mystery img { height: 200px; width: auto; margin: 0 auto .8rem; filter: brightness(0) opacity(.82); }
.mystery .stamp { position: absolute; top: 42%; left: 50%; translate: -50% -50%; rotate: -14deg; font-family: var(--display); color: var(--red); border: 4px solid var(--red); padding: .15em .5em; font-size: 1.25rem; background: rgba(246,239,224,.85); white-space: nowrap; }
.mystery p { margin: 0; font-family: var(--typed); }

/* ---------- about ---------- */
.about-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.2fr .8fr; } }
.gary-stand { display: flex; justify-content: center; }
.gary-stand img { height: clamp(320px, 48vw, 540px); width: auto; filter: drop-shadow(6px 12px 8px var(--shadow)); rotate: 2deg; }
.notice { font-family: var(--typed); font-size: 1rem; line-height: 1.6; }

/* ---------- subscribe band + footer ---------- */
.subscribe { text-align: center; }
.subscribe .wrap { display: grid; justify-items: center; gap: 1.1rem; }
.handle { font-family: var(--typed); font-size: 1.15rem; }

.site-footer { margin-top: clamp(2rem, 6vw, 4rem); }
.site-footer .sheet { padding-block: 2.4rem 2.2rem; }
.foot-grid { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1fr auto; align-items: start; } }
.disclaimer { font-family: var(--typed); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 62ch; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.foot-nav a { display: inline-block; padding: .4rem 0; font-weight: 700; color: var(--ink); }
.small { font-size: .9rem; color: var(--ink-soft); margin: .6rem 0 0; }

/* page heads */
.page-head { padding-block: clamp(2rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem); }
.page-head p { color: var(--ink); }


/* ---- review round 1 fixes ---- */
[data-page="index"] .site-header { padding-block: .5rem .2rem; }
.notice { max-width: 68ch; }
.stage-bg img { object-position: center 20%; filter: blur(1.5px) saturate(.92); scale: 1.03; }
.fig:focus-visible img { outline: 3px solid var(--ink); outline-offset: 6px; }
.fig:focus-visible .name { background: #ffd76a; outline: 3px solid var(--ink); }
.fig.is-up .name { z-index: 12; }
.glowup .after picture { display: block; border-bottom: 18px solid transparent; border-image: url("../img/tex/corrugated.webp") 0 0 100% 0 / 0 0 18px 0 round; }
.cast-notes { margin-top: 2rem; }
.btn.sm { font-size: .95rem; }
.foot-nav ul { gap: .3rem .9rem; }
@media (max-width: 520px) {
  .hero-logo { width: min(100%, 300px); }
  .hero-copy { gap: .8rem; }
  .hero .btn { font-size: .95rem; padding: .7em 1.05em; }
  .theme-player:not(.playing) .lyrics { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
  .hero-cast { height: 300px; margin-top: -.5rem; }
  .bubble { width: min(88%, 280px); }
}


/* ---- a11y round 1 fixes ---- */
.mystery { color: var(--ink); }
.nav a:focus-visible { outline: 3px solid currentColor; outline-offset: -6px; }
.ribbon:focus-visible { outline: none; text-decoration: underline 3px #ffd76a; text-underline-offset: .2em; }
.paper-navy :focus-visible, .paper-red :focus-visible { outline-color: #ffd76a; }
.carve:not(.ink) { text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink), 2px 2px 0 #4a3218, 3px 3px 0 #3a2712, 4px 4px 0 #2e1f0e, 5px 7px 7px rgba(40,24,8,.45); }
.lede a, .page-head a { color: var(--ink); }
.paper-red .lede a, .paper-navy .lede a { color: var(--card); }
.paper-red, .btn:not(.navy):not(.cream), .nav a[aria-current="page"] { background-image: linear-gradient(rgba(80,8,12,.2), rgba(80,8,12,.2)), url("../img/tex/redpaper.webp"); background-size: auto, 512px; }
.playbill h3 { font-family: var(--typed); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin: 1.1rem 0 .35rem; color: var(--ink-soft); }
@media (min-width: 1000px) { .bubble .jump:not(:focus) { display: inline-block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; } }
@media (max-width: 520px) {
  .bubble { position: relative; left: auto !important; top: auto !important; width: auto; margin: .9rem .5rem .6rem; display: none; transform-origin: 50% 0; }
  .bubble.show { display: block; }
  .bubble::after { top: -14px; bottom: auto; left: 50%; clip-path: polygon(30% 0, 100% 100%, 0 100%); }
}

/* ---- phones + tablets: one cardstock card per character (2026-10-07) ---- */
.cast-card { display: contents; }
.cast-card .card-say, .cast-card .card-pb, .fig .press { display: none; }
@media (max-width: 899px) {
  .js .stage[data-cast] { padding: 1rem .8rem 1.3rem !important; overflow: visible; }
  .js .stage[data-cast] .stage-bg, .js .stage[data-cast] .stage-hint { display: none; }
  .js .stage[data-cast] > .bubble { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: 0; opacity: 1; display: block; }
  .js .stage[data-cast] .shelf { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; row-gap: 1.2rem; align-items: start; }
  .js .cast-card {
    --r: -.5deg;
    display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-areas: "fig say" "pb pb";
    align-items: end; column-gap: .8rem; position: relative;
    background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px;
    padding: 1.6rem .9rem 0; box-shadow: 3px 6px 8px var(--shadow); rotate: var(--r);
  }
  .js .cast-card:nth-child(even) { --r: .5deg; }
  .js .cast-card .fig { grid-area: fig; align-self: start; height: 230px; padding: 0 0 22px; }
  .js .cast-card .fig img { max-width: 100%; }
  .js .cast-card .fig::after { left: -.9rem; right: -.9rem; width: auto; }
  .js .cast-card .fig.is-up img { translate: 0 -10px; scale: 1.03; }
  .js .cast-card .fig .name { white-space: normal; width: max-content; max-width: 100%; text-align: center; font-size: .78rem; }
  .js .cast-card .fig .press {
    display: block; position: absolute; z-index: 4; top: -1.1rem; left: -.3rem; rotate: -5deg;
    font-family: var(--typed); font-size: .82rem; color: var(--ink); background: #ffd76a; padding: .2rem .5rem;
    box-shadow: 1px 2px 2px var(--shadow);
  }
  .js .cast-card.is-open .fig .press { background: var(--card); }
  .js .cast-card .card-say { display: block; grid-area: say; align-self: center; padding: 0 0 1.4rem; min-width: 0; }
  .js .cast-card .card-role { font-family: var(--typed); font-size: .88rem; line-height: 1.4; color: var(--ink-soft); margin: 0; }
  .js .cast-card .card-who { font-family: var(--display); font-size: 1.15rem; line-height: 1.1; margin: 0 0 .35rem; color: var(--ink); }
  .js .cast-card .card-bubble {
    position: relative; left: auto; top: auto; width: auto; opacity: 1; scale: 1; rotate: -1deg; pointer-events: auto; display: block;
    font-size: .98rem; padding: .7rem .8rem .8rem; transform-origin: 0 50%;
    animation: cs-pop .28s cubic-bezier(.34, 1.56, .64, 1);
  }
  .js .cast-card .card-bubble::after { top: 50%; bottom: auto; left: -12px; translate: 0 -50%; width: 16px; height: 22px; clip-path: polygon(100% 0, 100% 100%, 0 60%); }
  .js .cast-card .card-pb { display: block; grid-area: pb; }
  .js .cast-card .card-pb:not(:empty) { margin: 0 -.9rem; padding: 1.1rem 1rem 1.3rem; border-top: 2px dashed rgba(34, 27, 21, .35); background: rgba(255, 255, 255, .35); }
  .js .cast-card .card-pb .role { font-family: var(--typed); color: var(--red-dark); margin: 0 0 .8rem; }
  .js .cast-card .card-pb .played { font-size: 1.05rem; margin: 0 0 .7rem; }
  .js .cast-card .card-pb .played strong { font-family: var(--display); font-weight: 400; font-size: 1.3rem; display: block; line-height: 1.1; }
  .js .cast-card .card-pb h3 { font-family: var(--typed); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin: 1rem 0 .3rem; color: var(--ink-soft); }
  .js .cast-card .card-pb ul { margin: 0; padding-left: 1.1rem; }
  .js .cast-card .card-pb .face { display: none; }
  .js .cast-layout .playbill { display: none; }
  .js .cast-layout .cast-notes { margin-top: 0; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .js .stage[data-cast] .shelf { max-width: 640px; margin-inline: auto; }
  .js .cast-card .fig { height: 260px; }
}
@keyframes cs-pop { from { scale: .7; opacity: 0; } to { scale: 1; opacity: 1; } }

/* perf round 1: reserve the hero logo box (CLS) and keep hero figures unsquished */
.hero-copy picture { display: block; width: min(100%, 560px); }
.hero-logo { width: 100%; height: auto; aspect-ratio: 560 / 414; }
.hero-cast { min-width: 0; }
.hero-cast img { max-width: none; }
@media (max-width: 520px) { .hero-copy picture { width: min(100%, 300px); } }

/* reveal: content visible by default; only enhanced when JS + motion allowed */
.js .reveal { opacity: 0; translate: 0 18px; rotate: var(--rr, 0deg); }
.js .reveal.in { opacity: 1; translate: 0 0; transition: opacity .5s ease-out, translate .6s cubic-bezier(.16, 1, .3, 1); }

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

/* The Elon Watch */
.elon-watch .s2-count .unit:first-child { align-self: center; }
.elon-watch .elon-status { font-family: var(--display); font-size: 1.25rem; margin: .4rem 0 1.2rem; }
.elon-watch .elon-status strong { color: #ffd76a; }

/* ===== 2026-10-08: Season 1 player, Roast Ledger, Press, Extras ===== */
/* Season 1 player (home hero): cardboard 1980s console TV */
.hero-inner.has-tv { position: relative; }
.hero-tv { position: relative; z-index: 1; padding: 74px 0 1rem; min-width: 0; }
@media (min-width: 880px) {
  /* TV hangs top right; the cast keeps its original grid cell and stands below it */
  .hero-inner.has-tv .hero-tv { position: absolute; top: clamp(1.2rem, 2.5vw, 2rem); right: 0; width: min(38%, 440px); padding: 70px 0 0; }
  .hero-inner.has-tv .hero-cast { grid-column: 2; grid-row: 1; }
  .hero-inner.has-tv .tv-brand { display: none; }
}
@media (min-width: 880px) and (max-width: 1199px) { .hero-inner.has-tv .s1p-count { display: none; } }
.tv { position: relative; rotate: -4deg; transform-origin: 50% 100%; filter: drop-shadow(7px 13px 10px rgba(30,20,8,.45)); }
.tv-ears { position: absolute; left: 34%; width: 32%; bottom: 100%; height: 76px; }
.tv-ears span { position: absolute; left: 50%; bottom: 10px; width: 6px; height: 92px; margin-left: -3px; transform-origin: 50% 100%;
  background: #efe5cf url("../img/tex/cardstock.webp"); background-size: 256px; border-radius: 3px; box-shadow: 1px 2px 2px rgba(40,24,8,.35); }
.tv-ears span:first-child { rotate: -32deg; }
.tv-ears span:nth-child(2) { rotate: 26deg; height: 84px; }
.tv-ears span::after { content: ""; position: absolute; top: -6px; left: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); box-shadow: 1px 1px 2px rgba(40,24,8,.4); }
.tv-ears i { position: absolute; left: 50%; bottom: -2px; width: 58px; height: 24px; translate: -50% 0; border-radius: 30px 30px 4px 4px;
  background: var(--kraft-dark) url("../img/tex/kraft.webp"); background-size: 256px; box-shadow: inset 0 -3px 0 rgba(40,24,8,.3); }
.tv-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 21%; gap: 3.5%; padding: 4.5% 4.5% 5.5%;
  background: #b98a52 url("../img/tex/kraft.webp"); background-size: 300px; border-radius: 16px 20px 14px 18px / 18px 14px 20px 16px;
  box-shadow: inset 0 0 0 3px rgba(60,36,12,.35), inset 0 -9px 0 rgba(60,36,12,.22), inset 0 4px 0 rgba(255,240,210,.25); }
.tv-body::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: -9px; height: 12px; border-radius: 0 0 6px 6px;
  background: url("../img/tex/corrugated.webp") left center / auto 100% repeat-x; box-shadow: 0 4px 5px -2px rgba(40,24,8,.5); z-index: -1; }
.tv-body::after { content: ""; position: absolute; top: -9px; left: 9%; width: 70px; height: 22px; rotate: -6deg; background: var(--tape); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tv-bezel { position: relative; padding: 4.2%; background: #2b2520 url("../img/tex/cardstock.webp"); background-blend-mode: multiply; background-size: 256px;
  border-radius: 26px 30px 26px 30px / 30px 26px 30px 26px; box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), inset 0 6px 10px rgba(0,0,0,.45), 1px 2px 0 rgba(255,240,210,.3); }
.s1p-facade, .s1p-frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #111; overflow: hidden;
  border-radius: 16px 18px 16px 18px / 20px 18px 20px 18px; }
.s1p-facade { box-shadow: inset 0 0 22px rgba(0,0,0,.55); }
.s1p-facade picture, .s1p-facade img { width: 100%; height: 100%; object-fit: cover; }
.s1p-facade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%), linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(20,12,4,.65) 100%); }
.s1p-play { position: absolute; z-index: 2; left: 50%; top: 45%; translate: -50% -50%; width: clamp(56px, 7vw, 92px); aspect-ratio: 1; display: grid; place-items: center;
  color: var(--card); background: var(--red) url("../img/tex/redpaper.webp"); background-size: 512px; border-radius: 50% 46% 52% 48%; box-shadow: 3px 7px 10px rgba(0,0,0,.45); rotate: -4deg; transition: scale .2s; }
.s1p-play svg { width: 46%; height: 46%; margin-left: 8%; }
.s1p-facade:hover .s1p-play, .s1p-facade:focus-visible .s1p-play { scale: 1.1; }
.s1p-facade:focus-visible { outline: 3px solid #ffd76a; outline-offset: 3px; }
.s1p-label { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 6%; color: var(--card); font-family: var(--display); font-size: clamp(1rem, .7rem + 1vw, 1.45rem); line-height: 1.05; text-shadow: 2px 2px 0 rgba(0,0,0,.6); }
.s1p-count { display: block; font-family: var(--typed); font-size: clamp(.72rem, .66rem + .25vw, .88rem); margin-top: .25rem; }
.tv-side { display: flex; flex-direction: column; align-items: center; gap: 9%; padding: 14% 10% 12%; min-width: 0;
  background: repeating-linear-gradient(88deg, rgba(70,38,12,0) 0 9px, rgba(70,38,12,.22) 9px 11px, rgba(255,220,170,.10) 11px 17px, rgba(70,38,12,.12) 17px 18px), #8a5a2c url("../img/tex/kraft.webp");
  background-size: auto, 220px; background-blend-mode: normal, multiply; border-radius: 6px; clip-path: polygon(3% 1%, 98% 0, 100% 99%, 0 100%); box-shadow: inset 0 0 0 2px rgba(40,20,6,.3); }
.tv-knob { position: relative; width: 74%; aspect-ratio: 1; border-radius: 50%; background: var(--card) url("../img/tex/cardstock.webp"); background-size: 256px;
  box-shadow: 2px 4px 4px rgba(30,16,4,.45), inset 0 -3px 0 rgba(40,24,8,.18); }
.tv-knob::after { content: ""; position: absolute; left: 47%; top: 8%; width: 6%; height: 34%; background: var(--ink); border-radius: 2px; rotate: 35deg; transform-origin: 50% 120%; }
.tv-knob.sm { width: 56%; }
.tv-knob.sm::after { rotate: -50deg; }
.tv-grille { width: 82%; flex: 1; min-height: 24px; border-radius: 4px; background: repeating-linear-gradient(0deg, rgba(30,16,4,.75) 0 2px, transparent 2px 6px); }
.tv-brand { font-family: var(--typed); font-size: clamp(.5rem, .4rem + .3vw, .68rem); color: var(--card); text-align: center; line-height: 1.1; letter-spacing: .02em; }
.tv-floor { display: flex; justify-content: space-between; padding: 0 9%; }
.tv-floor span { width: 13%; height: 14px; background: var(--kraft-dark) url("../img/tex/kraft.webp"); background-size: 200px; border-radius: 0 0 4px 4px; box-shadow: 1px 3px 3px rgba(30,16,4,.4); }
@media (max-width: 879px) {
  .hero-tv { padding: 74px 0 1rem; margin-top: .4rem; }
  .tv { rotate: -2deg; }
}
@media (max-width: 520px) {
  .tv-body { grid-template-columns: minmax(0, 1fr) 17%; padding: 4% 3.5% 5%; gap: 3%; }
  .tv-brand { display: none; }
  .s1p-count { display: none; }
}

/* Roast Ledger */
.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.tally-card { --r: -1deg; display: grid; justify-items: center; align-content: center; text-align: center; gap: .2rem; padding: 1rem .6rem 1.1rem; background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px; box-shadow: 3px 6px 8px var(--shadow); rotate: var(--r); }
.tally-card:nth-child(even) { --r: 1.2deg; }
.tally-num { font-family: var(--display); font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem); line-height: 1; color: var(--ink); }
.tally-who { font-family: var(--typed); font-size: .95rem; line-height: 1.25; }
.tally-card.t-r .tally-num { color: var(--red-dark); }
.tally-card.t-d .tally-num { color: var(--navy); }
.tally-card.t-m { background: #ffd76a; }
.ledger-verdict { font-family: var(--display); font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); line-height: 1.25; max-width: 44ch; margin: 1.8rem 0 0; color: var(--ink);
  background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px; padding: .8em 1em; rotate: -.6deg; box-shadow: 2px 5px 6px var(--shadow); clip-path: polygon(0 2%, 100% 0, 99% 98%, 1% 100%); }
.ledger-sheet { display: grid; gap: 1.1rem; min-width: 0; }
.ledger-rules { max-width: 72ch; margin: 0; }
.ledger-scroll { overflow-x: auto; max-width: 100%; }
.ledger { width: 100%; border-collapse: collapse; font-family: var(--typed); font-size: clamp(.82rem, .76rem + .3vw, 1rem); }
.ledger th, .ledger td { padding: .55em .45em; text-align: center; border-bottom: 1px solid rgba(33,52,104,.28); vertical-align: middle; }
.ledger thead th { font-weight: 400; font-size: .85em; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.ledger abbr { text-decoration: none; }
.ledger .ep-col { text-align: left; font-weight: 400; border-right: 2px solid rgba(194,47,51,.55); padding-right: .7em; min-width: 9.5em; }
.ledger tbody .ep-col { font-family: var(--body); font-weight: 700; line-height: 1.2; }
.ep-n { font-family: var(--display); font-weight: 400; color: var(--red); margin-right: .2em; }
.ep-note { display: block; font-family: var(--typed); font-weight: 400; font-size: .82em; color: var(--ink-soft); margin-top: .2em; }
.ledger td.top { position: relative; font-weight: 700; color: var(--red-dark); }
.ledger td.top::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2.5em; height: 2em; translate: -50% -50%; rotate: -8deg; border: 2px solid var(--red); border-radius: 50% 45% 55% 48%; pointer-events: none; }
.ledger .dash { color: rgba(74,61,48,.5); }
.ledger .sum { font-weight: 700; border-left: 1px dashed rgba(34,27,21,.4); }
.ledger tfoot th, .ledger tfoot td { font-family: var(--display); font-weight: 400; font-size: 1.1em; border-top: 2px solid var(--ink); border-bottom: 0; }
.ledger-key { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0; font-family: var(--typed); font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 600px) {
  .ledger-sheet { padding-inline: .7rem; }
  .ledger { font-size: .74rem; }
  .ledger .ep-col { min-width: 0; width: 7.2em; padding-right: .35em; }
  .ledger tbody .ep-col { font-size: .95em; }
  .ledger .ep-note { display: none; }
  .ledger th, .ledger td { padding: .5em .12em; }
  .ledger thead th { letter-spacing: 0; font-size: .78em; }
  .ledger td.top::before { width: 2.3em; height: 1.8em; }
}
.ledger-notes { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .ledger-notes { grid-template-columns: 1fr 220px; } }
.note-card { background: #fdf8e8; padding: 1.6rem clamp(1rem, 3vw, 2rem) 1.4rem; box-shadow: 3px 7px 9px var(--shadow); rotate: .5deg; }
.note-card h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); margin: 0 0 .6rem; }
.note-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.note-card .sig { font-family: var(--typed); font-size: .92rem; margin: 1rem 0 0; color: var(--ink-soft); }
.ledger-gary { display: flex; justify-content: center; }
.ledger-gary img { height: clamp(240px, 36vw, 360px); width: auto; filter: drop-shadow(5px 10px 7px var(--shadow)); rotate: -2deg; }

/* Press */
.press-logline { max-width: 62ch; }
.press-grid { display: grid; gap: 2.4rem; align-items: start; }
.press-grid > * { min-width: 0; }
@media (min-width: 960px) { .press-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); } }
.press-grid .sheet h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: 0 0 .6rem; }
.press-grid .sheet p + h2 { margin-top: 1.6rem; }
.facts { background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px; padding: 1.8rem clamp(1rem, 3vw, 1.6rem) 1.4rem; box-shadow: 3px 7px 9px var(--shadow); rotate: .8deg; }
.facts h2 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0 0 .8rem; }
.facts dl { margin: 0; display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: .55rem .9rem; }
.facts dt { font-family: var(--typed); color: var(--ink-soft); font-size: .92rem; padding-top: .1em; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.press-dl { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.6rem 1.3rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.dl-card { --r: -.8deg; display: flex; flex-direction: column; gap: .5rem; min-width: 0; background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px; padding: .8rem .8rem 1.1rem; box-shadow: 3px 6px 8px var(--shadow); rotate: var(--r); }
.dl-card:nth-child(3n+2) { --r: .9deg; }
.dl-card.wide { grid-column: span 2; }
@media (max-width: 520px) { .dl-card.wide { grid-column: auto; } }
.dl-img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: #fff; border: 1px solid rgba(34,27,21,.12); overflow: hidden; }
.dl-card.wide .dl-img { aspect-ratio: auto; }
.dl-img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.dl-card.wide .dl-img img { width: 100%; height: auto; }
.dl-card h3 { margin: .2rem 0 0; font-size: 1.15rem; }
.dl-card p { margin: 0; font-family: var(--typed); font-size: .85rem; color: var(--ink-soft); flex: 1; }
.dl-card .btn { align-self: flex-start; }

/* Extras: fake sponsors */
.ad-tag { font-family: var(--typed); font-size: .85rem; margin: 0 0 .4rem; letter-spacing: .02em; }
.fine { font-family: var(--typed); font-size: .8rem; line-height: 1.45; margin: .8rem 0 0; }
.fine .bar { background: currentColor; padding: 0 .3em; border-radius: 1px; }
.cluckys { display: grid; gap: 2rem; align-items: center; padding: clamp(1.4rem, 4vw, 2.6rem); color: #3a1206; rotate: -.5deg; box-shadow: 4px 9px 12px var(--shadow);
  background: #f4c430 url("../img/tex/cardstock.webp"); background-blend-mode: multiply; background-size: 512px; border: 6px solid var(--red); border-radius: 6px; }
.cluckys > * { min-width: 0; }
@media (min-width: 820px) { .cluckys { grid-template-columns: 1.3fr .9fr; } }
.cluck-brand { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 2rem + 5vw, 5.4rem); line-height: .95; margin: 0; color: var(--red); text-shadow: 3px 4px 0 #8f1f24, 5px 8px 8px rgba(0,0,0,.25); rotate: -2deg; }
.cluck-slogan { font-family: var(--display); font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); line-height: 1.15; margin: .7rem 0; }
.tippy { justify-self: center; width: min(100%, 300px); background: #222; color: #fff; border-radius: 22px; padding: 1.1rem 1rem 1rem; box-shadow: 4px 10px 12px rgba(0,0,0,.4); rotate: 3deg; text-align: center; border: 10px solid #3a3a3a; }
.tippy-face { width: 74px; height: 74px; margin: 0 auto .5rem; border-radius: 50%; background: #ffd76a; position: relative; }
.tippy-face span { position: absolute; top: 24px; width: 9px; height: 12px; border-radius: 50%; background: #222; }
.tippy-face span:first-child { left: 21px; }
.tippy-face span:nth-child(2) { right: 21px; }
.tippy-face i { position: absolute; left: 19px; right: 19px; top: 38px; height: 18px; border: 4px solid #222; border-top: 0; border-radius: 0 0 40px 40px; }
.tippy-say { font-family: var(--body); font-weight: 700; margin: 0 0 .7rem; font-size: 1rem; }
.tippy-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.tippy-btns span { background: #2f7d3e; border-radius: 8px; padding: .6rem 0; font-family: var(--display); font-size: 1.05rem; }
.tippy-no { font-size: .6rem; margin: .6rem 0 0; color: #bbb; text-decoration: underline; }
.tippy-cap { font-family: var(--typed); font-size: .8rem; margin: .7rem 0 0; color: #ffd76a; }
.ad-cards { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.8rem 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ad-card { --r: -1.1deg; position: relative; min-width: 0; padding: 1.3rem 1.2rem 1.2rem; rotate: var(--r); box-shadow: 3px 7px 9px var(--shadow); display: flex; flex-direction: column; }
.ad-card:nth-child(3n+2) { --r: 1.3deg; }
.ad-card:nth-child(3n) { --r: -.4deg; }
.ad-card h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem); margin: 0 0 .5rem; }
.ad-slogan { margin: 0; font-weight: 600; }
.ad-card .fine { margin-top: auto; padding-top: .9rem; border-top: 1px dashed currentColor; }
.ad-card .ad-slogan + .fine { margin-top: .9rem; }
.look-card { background: var(--card) url("../img/tex/cardstock.webp"); background-size: 512px; color: var(--ink); }
.look-red { background: var(--red) url("../img/tex/redpaper.webp"); background-image: linear-gradient(rgba(80,8,12,.2), rgba(80,8,12,.2)), url("../img/tex/redpaper.webp"); background-size: auto, 512px; color: var(--card); }
.look-navy { background: var(--navy) url("../img/tex/navypaper.webp"); background-size: 512px; color: var(--card); }
.look-sky { background: var(--sky) url("../img/tex/bluepaper.webp"); background-size: 512px; color: var(--ink); }
.look-gold { background: #ffd76a url("../img/tex/cardstock.webp"); background-blend-mode: multiply; background-size: 512px; color: var(--ink); }
.lucy-sheet { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 760px) { .lucy-sheet { grid-template-columns: 300px 1fr; } }
.lucy-img { display: flex; justify-content: center; }
.lucy-img img { width: min(100%, 300px); height: auto; filter: drop-shadow(4px 8px 6px var(--shadow)); rotate: -2deg; }
.lucy h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-bottom: .6rem; }
.lucy-card { display: inline-block; font-family: var(--typed); background: var(--red); color: var(--card); padding: .3rem .7rem; rotate: -1.5deg; box-shadow: 1px 3px 3px var(--shadow); }