:root {
  --wine: #7b2027;
  --wine-dark: #3f1015;
  --wine-deep: #210c10;
  --ink: #281d19;
  --paper: #ebdcc1;
  --paper-light: #faf2e4;
  --paper-dark: #d8c09b;
  --gold: #e3a829;
  --gold-light: #f3c965;
  --blue: #234e6c;
  --night: #0e2028;
  --green: #183b36;
  --white: #fffaf0;
  --sans: Arial, Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --shadow: 0 24px 70px rgb(39 15 11 / 24%);
  --page: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper-light);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: .11;
  background:
    repeating-linear-gradient(82deg, transparent 0 3px, rgb(74 47 35 / 8%) 3px 4px),
    repeating-linear-gradient(4deg, transparent 0 7px, rgb(255 255 255 / 24%) 7px 8px);
  mix-blend-mode: multiply;
}

img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 18px;
  top: 16px;
  padding: 12px 16px;
  color: white;
  background: var(--wine-dark);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 50%;
  width: var(--page);
  min-height: 86px;
  padding: 22px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid rgb(255 255 255 / 26%);
  transform: translateX(-50%);
}

.brand {
  width: fit-content;
  color: white;
  text-decoration: none;
  line-height: .88;
}
.brand span {
  display: block;
  font: 800 .68rem/1 var(--sans);
  letter-spacing: .34em;
}
.brand strong {
  font-size: 1.3rem;
  letter-spacing: -.04em;
}

.desktop-nav { display: flex; gap: 22px; }
.desktop-nav a {
  position: relative;
  color: white;
  font: 800 .68rem/1 var(--sans);
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 2px;
  background: var(--gold);
  transition: right .2s ease;
}
.desktop-nav a:hover::after { right: 0; }

.episode-label {
  justify-self: end;
  font: 800 .72rem/1 var(--sans);
  letter-spacing: .2em;
  color: var(--gold-light);
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 150px max(20px, calc((100vw - 1180px) / 2)) 100px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(13 9 8 / 86%) 0%, rgb(13 9 8 / 52%) 48%, transparent 76%),
    linear-gradient(0deg, rgb(13 9 8 / 86%) 0%, transparent 58%);
}

.hero-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.hero-copy { max-width: 790px; color: white; }
.hero h1 { color: white; text-shadow: 0 6px 34px rgb(0 0 0 / 48%); }
.hero .eyebrow { color: var(--gold-light); }

.eyebrow,
.chapter-kicker {
  margin: 0 0 18px;
  color: var(--wine);
  font: 900 .7rem/1.35 var(--sans);
  letter-spacing: .21em;
  text-transform: uppercase;
}

h1, h2, h3 {
  margin-top: 0;
  color: var(--wine-dark);
  letter-spacing: -.055em;
}
h1 {
  max-width: 760px;
  margin-bottom: 0;
  font-size: clamp(3.65rem, 7vw, 7.4rem);
  line-height: .87;
  text-wrap: balance;
}
h2 {
  margin-bottom: 0;
  font-size: clamp(2.7rem, 5.1vw, 5.4rem);
  line-height: .94;
  text-wrap: balance;
}

.hero-lede {
  max-width: 630px;
  margin: 30px 0 34px;
  font-size: clamp(1.03rem, 1.5vw, 1.25rem);
  line-height: 1.7;
}
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.story-button,
.random-button,
.celebrate-button {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  min-height: 49px;
  padding: 15px 21px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font: 900 .76rem/1 var(--sans);
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.story-button {
  color: white;
  background: var(--wine);
  box-shadow: 6px 6px 0 var(--gold);
}
.story-button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--gold); }
.runtime { color: rgb(255 255 255 / 72%); font: italic .88rem/1.4 var(--serif); }

.hero-collage { position: relative; min-height: 630px; }
.photo-card {
  position: absolute;
  margin: 0;
  padding: 11px 11px 42px;
  background: var(--white);
  box-shadow: var(--shadow);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), z-index 0s;
}
.photo-card:hover { z-index: 3; }
.photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.94) contrast(.97);
}
.photo-card figcaption {
  position: absolute;
  inset: auto 13px 13px;
  color: #563d34;
  font: italic .78rem/1 var(--serif);
}
.photo-card--old { inset: 44px 28% 108px 0; transform: rotate(-5deg); }
.photo-card--old:hover { transform: rotate(-2deg) scale(1.025); }
.photo-card--new { inset: 142px 0 4px 34%; transform: rotate(4deg); }
.photo-card--new:hover { transform: rotate(1deg) scale(1.025); }
.photo-card--umbrella { z-index: 2; inset: auto 36% -38px 19%; transform: rotate(-1deg); }
.photo-card--umbrella img { aspect-ratio: 16 / 7; }
.photo-card--umbrella:hover { transform: rotate(2deg) scale(1.025); }
.umbrella {
  position: absolute;
  z-index: 4;
  right: 1%;
  top: 2%;
  color: var(--gold);
  font: 6.5rem/1 var(--sans);
  transform: rotate(10deg);
  text-shadow: 4px 6px 0 rgb(69 16 20 / 14%);
}

.opening-credit {
  position: absolute;
  left: auto;
  right: max(20px, calc((100vw - 1180px) / 2));
  bottom: 28px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: rgb(255 255 255 / 54%);
  font: 800 .58rem/1 var(--sans);
  letter-spacing: .2em;
  transform: none;
  white-space: nowrap;
}
.opening-credit strong { color: var(--gold-light); font-size: .74rem; }

.cold-open {
  padding: clamp(90px, 11vw, 170px) max(20px, calc((100vw - 1000px) / 2));
  background: #1d1512;
}
.narrator-card {
  position: relative;
  padding: clamp(38px, 6vw, 82px);
  color: #eee0ca;
  border: 1px solid rgb(235 220 193 / 20%);
  background:
    radial-gradient(circle at 90% 20%, rgb(227 168 41 / 13%), transparent 18rem),
    linear-gradient(135deg, #2a1e19, #15100e);
  box-shadow: 0 34px 90px #000;
}
.narrator-card::before,
.narrator-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  border-color: var(--gold);
  opacity: .7;
}
.narrator-card::before { left: 16px; top: 16px; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.narrator-card::after { right: 16px; bottom: 16px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.narrator-card h2 { color: var(--paper-light); font-size: clamp(2.45rem, 4.7vw, 5rem); }
.narrator-card > p:not(.chapter-kicker) { max-width: 760px; margin: 28px 0 0; font-size: 1.1rem; line-height: 1.8; }
.quote-mark { position: absolute; right: 7%; top: -25px; color: var(--gold); font-size: 11rem; line-height: 1; opacity: .25; }
.narrator-signoff { margin-top: 34px; color: var(--gold-light); font-style: italic; }

.story-section {
  position: relative;
  padding: clamp(96px, 12vw, 180px) max(20px, calc((100vw - 1180px) / 2));
  overflow: hidden;
}
.story-section::before {
  content: attr(data-episode);
  position: absolute;
  right: -2vw;
  top: -8vw;
  color: currentColor;
  font: 900 clamp(13rem, 35vw, 36rem)/1 var(--sans);
  letter-spacing: -.12em;
  opacity: .035;
}
.chapter-copy { position: relative; z-index: 1; max-width: 780px; }
.chapter-number {
  margin-bottom: 14px;
  color: var(--gold);
  font: 900 4.7rem/1 var(--sans);
  letter-spacing: -.08em;
}
.chapter-copy > p:not(.chapter-kicker) { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.78; }
.chapter-copy h2 { margin-bottom: 32px; }
.running-gag {
  max-width: 700px;
  margin-top: 34px;
  padding: 20px 22px;
  color: inherit;
  border-left: 5px solid var(--gold);
  background: rgb(255 250 240 / 8%);
  font-size: .95rem;
  line-height: 1.6;
}
.story-section--dark { color: #f7ead6; background: var(--wine-dark); }
.story-section--dark h2 { color: white; }
.story-section--dark .chapter-kicker { color: var(--gold); }

.scene-board {
  position: relative;
  z-index: 1;
  margin-top: 74px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
.scene {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 7px solid var(--paper-light);
  background: #111;
  box-shadow: 0 18px 42px rgb(0 0 0 / 25%);
}
.scene:nth-child(odd) { transform: rotate(-.7deg); }
.scene:nth-child(even) { transform: rotate(.7deg); }
.scene--wide { grid-column: span 2; }
.scene--portrait { grid-row: span 2; }
.scene img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.scene:hover img { transform: scale(1.04); }
.scene figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 34px 13px 12px;
  color: white;
  background: linear-gradient(transparent, rgb(0 0 0 / 82%));
  font: italic .78rem/1.2 var(--serif);
}

.interlude {
  padding: 92px 20px;
  color: var(--paper-light);
  background:
    linear-gradient(90deg, rgb(10 32 43 / 96%), rgb(22 63 80 / 93%)),
    var(--blue);
  text-align: center;
}
.interlude-small { margin: 0 0 16px; color: rgb(250 242 228 / 62%); font: 800 .69rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.interlude-big { max-width: 800px; margin: auto; font-size: clamp(2.3rem, 5vw, 5rem); line-height: .95; letter-spacing: -.05em; }

.story-section--paper {
  background:
    radial-gradient(circle at 91% 18%, rgb(227 168 41 / 15%), transparent 24rem),
    linear-gradient(180deg, var(--paper-light), var(--paper));
}
.story-section--paper .running-gag { background: rgb(123 32 39 / 7%); }
.scene-board--2024 { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 205px; }
.scene-board--2024 .scene { grid-column: span 2; border-color: white; }
.scene-board--2024 .scene--portrait { grid-column: span 2; grid-row: span 2; }
.scene-board--2024 .scene--wide { grid-column: span 4; }

.comedy-break {
  position: relative;
  padding: clamp(94px, 11vw, 160px) max(20px, calc((100vw - 1180px) / 2));
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: clamp(42px, 7vw, 96px);
  overflow: hidden;
  background:
    linear-gradient(115deg, rgb(250 242 228 / 96%), rgb(229 209 175 / 93%)),
    repeating-linear-gradient(0deg, transparent 0 28px, rgb(63 16 21 / 7%) 28px 29px);
}
.comedy-break::before {
  content: "HA HA HA";
  position: absolute;
  right: -25px;
  top: 24px;
  color: var(--wine);
  font: 900 clamp(4rem, 11vw, 10rem)/.75 var(--sans);
  letter-spacing: -.08em;
  opacity: .045;
  transform: rotate(6deg);
}
.comedy-copy { position: relative; z-index: 1; }
.comedy-copy h2 { font-size: clamp(2.7rem, 4.8vw, 5rem); }
.comedy-copy > p:not(.chapter-kicker) { margin: 28px 0; font-size: 1.08rem; line-height: 1.75; }
.comedy-rating {
  display: inline-block;
  padding: 11px 14px;
  color: var(--paper-light);
  background: var(--blue);
  font: 900 .62rem/1.35 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.comedy-poster {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(9px, 1.4vw, 16px) clamp(9px, 1.4vw, 16px) 50px;
  background: var(--white);
  box-shadow: 0 32px 80px rgb(63 16 21 / 28%);
  transform: rotate(1.2deg);
}
.comedy-poster img { display: block; width: 100%; height: auto; }
.comedy-poster figcaption {
  position: absolute;
  inset: auto 16px 17px;
  color: var(--wine-dark);
  font: italic .78rem/1.2 var(--serif);
  text-align: center;
}
.poster-tape {
  position: absolute;
  z-index: 2;
  top: -20px;
  width: 90px;
  height: 38px;
  background: rgb(227 168 41 / 82%);
  box-shadow: 0 2px 5px rgb(0 0 0 / 15%);
}
.poster-tape--left { left: 12%; transform: rotate(-8deg); }
.poster-tape--right { right: 12%; transform: rotate(7deg); }

.plot-twist { padding: 72px max(20px, calc((100vw - 1180px) / 2)); color: white; background: var(--gold); }
.plot-twist-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; }
.plot-twist .chapter-kicker { color: var(--wine-dark); }
.plot-twist h2 { max-width: 760px; color: var(--wine-dark); font-size: clamp(2.25rem, 4vw, 4.3rem); }
.plot-twist p:not(.chapter-kicker) { margin: 18px 0 0; color: rgb(63 16 21 / 72%); }
.twist-symbol { color: var(--wine); font: 900 5rem/1 var(--sans); }
.random-button { max-width: 230px; color: white; background: var(--wine-dark); box-shadow: 5px 5px 0 white; }
.random-button:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 white; }

.story-section--night {
  color: #e6e0cf;
  background:
    radial-gradient(circle at 76% 35%, rgb(38 107 98 / 30%), transparent 28rem),
    linear-gradient(135deg, #071216, var(--night));
}
.story-section--night h2 { color: white; }
.story-section--night .chapter-kicker { color: var(--gold); }
.umbrella-reel { position: relative; z-index: 1; margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.umbrella-reel figure { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #05090a; }
.umbrella-reel figure:nth-child(2), .umbrella-reel figure:nth-child(4) { transform: translateY(34px); }
.umbrella-reel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.08); transition: transform .5s ease, filter .5s ease; }
.umbrella-reel figure:hover img { transform: scale(1.05); filter: saturate(1.1); }
.umbrella-caption { margin: 70px 0 0; color: var(--gold); font-size: clamp(1.7rem, 3vw, 3rem); font-style: italic; text-align: right; }

.story-section--party {
  color: #f1e9d7;
  background:
    radial-gradient(circle at 14% 65%, rgb(56 168 122 / 20%), transparent 28rem),
    linear-gradient(135deg, #152c28, #0c1617 65%);
}
.story-section--party h2 { color: white; }
.story-section--party .chapter-kicker { color: var(--gold); }
.party-film {
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: none;
  margin: 82px 0 0 50%;
  padding: 20px 36px 42px;
  display: flex;
  gap: 18px;
  color: var(--ink);
  background: #18120f;
  transform: translateX(-50%) rotate(-1deg);
  box-shadow: 0 30px 80px #000;
}
.party-film::before,
.party-film::after {
  content: "● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●";
  position: absolute;
  left: 22px;
  right: 22px;
  overflow: hidden;
  color: var(--paper-light);
  font: 12px/1 var(--sans);
  letter-spacing: 22px;
  white-space: nowrap;
  opacity: .7;
}
.party-film::before { top: 5px; }
.party-film::after { bottom: 7px; }
.party-film figure { width: min(32vw, 350px); margin: 0; padding: 8px 8px 34px; flex: none; background: var(--paper-light); }
.party-film img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.party-film figcaption { padding-top: 10px; font: italic .78rem/1 var(--serif); }

.best-of { padding: clamp(100px, 12vw, 170px) max(20px, calc((100vw - 1180px) / 2)); background: var(--paper-light); }
.best-of-heading { max-width: 680px; margin-bottom: 58px; }
.best-of-heading > p:last-child { font-size: 1.12rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(63 16 21 / 25%); border-bottom: 1px solid rgb(63 16 21 / 25%); }
.stats-grid article { min-height: 255px; padding: 32px 26px; border-right: 1px solid rgb(63 16 21 / 25%); }
.stats-grid article:last-child { border-right: 0; }
.stats-grid strong { display: block; color: var(--wine); font: 900 clamp(3.8rem, 7vw, 7rem)/.9 var(--sans); letter-spacing: -.09em; }
.stats-grid span { display: block; margin-top: 15px; color: var(--blue); font: 900 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.stats-grid p { max-width: 200px; margin: 24px 0 0; line-height: 1.55; }

.archive {
  padding: clamp(100px, 12vw, 180px) max(14px, calc((100vw - 1320px) / 2));
  background:
    linear-gradient(rgb(238 224 198 / 94%), rgb(224 203 167 / 96%)),
    repeating-linear-gradient(90deg, transparent 0 31px, rgb(123 32 39 / 10%) 31px 32px);
}
.archive-heading { max-width: 1180px; margin: 0 auto 48px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 60px; }
.archive-heading > p { margin: 0; font-size: 1.04rem; line-height: 1.7; }
.filter-bar { max-width: 1180px; margin: 0 auto 38px; display: flex; gap: 9px; flex-wrap: wrap; }
.filter-button {
  padding: 11px 15px;
  color: var(--wine-dark);
  border: 1px solid rgb(63 16 21 / 28%);
  border-radius: 999px;
  background: rgb(255 250 240 / 55%);
  cursor: pointer;
  font: 800 .69rem/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.filter-button:hover, .filter-button.is-active { color: white; border-color: var(--wine); background: var(--wine); }
.filter-button span { opacity: .72; }

.gallery { max-width: 1320px; margin: auto; columns: 5 210px; column-gap: 12px; }
.gallery-item {
  position: relative;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  background: #1b1110;
  cursor: zoom-in;
  break-inside: avoid;
  box-shadow: 0 8px 20px rgb(63 16 21 / 13%);
}
.gallery-item img { display: block; width: 100%; height: auto; transition: transform .45s ease, filter .45s ease; }
.gallery-item::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 0 0;
  padding: 34px 10px 10px;
  color: white;
  background: linear-gradient(transparent, rgb(0 0 0 / 78%));
  font: 800 .62rem/1 var(--sans);
  letter-spacing: .1em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.gallery-item:hover img { transform: scale(1.035); filter: saturate(1.08); }
.gallery-item:hover::after { opacity: 1; transform: translateY(0); }
.gallery-item[hidden] { display: none; }
.gallery-status { margin: 34px auto 0; color: rgb(63 16 21 / 65%); text-align: center; font: 800 .69rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

.deleted-scenes { padding: clamp(100px, 12vw, 170px) max(20px, calc((100vw - 1180px) / 2)); color: #eee4d3; background: #171313; }
.deleted-scenes h2 { color: white; }
.deleted-scenes .chapter-kicker { color: var(--gold); }
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.video-card { position: relative; margin: 0; overflow: hidden; background: #080707; border: 1px solid rgb(255 255 255 / 10%); }
.video-card video { display: block; width: 100%; aspect-ratio: 9 / 12; object-fit: cover; background: #090909; }
.video-card figcaption { padding: 15px; color: rgb(255 255 255 / 72%); font: 800 .64rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

.birthday-finale {
  position: relative;
  min-height: 100svh;
  padding: clamp(110px, 14vw, 210px) max(20px, calc((100vw - 1000px) / 2)) 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 50% 38%, rgb(227 168 41 / 22%), transparent 25rem),
    linear-gradient(145deg, #5b151b, #2e0c10);
  text-align: center;
}
.birthday-finale::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  width: min(82vw, 880px);
  aspect-ratio: 1;
  border: 1px solid rgb(243 201 101 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 8vw rgb(243 201 101 / 3%), 0 0 0 16vw rgb(243 201 101 / 2%);
  transform: translateX(-50%);
}
.finale-inner { position: relative; z-index: 2; max-width: 860px; margin: auto; }
.finale-umbrella { margin-bottom: 14px; color: var(--gold); font-size: 7rem; line-height: 1; text-shadow: 6px 8px 0 rgb(0 0 0 / 22%); transform: rotate(-7deg); }
.birthday-finale .chapter-kicker { color: var(--gold-light); }
.birthday-finale h2 { color: white; font-size: clamp(4rem, 9vw, 8.8rem); }
.birthday-message { max-width: 760px; margin: 34px auto 0; font-size: clamp(1.03rem, 1.6vw, 1.26rem); line-height: 1.8; }
.birthday-message--strong { color: var(--gold-light); font-size: clamp(1.15rem, 2vw, 1.55rem); font-style: italic; }
.celebrate-button { margin-top: 38px; color: var(--wine-dark); background: var(--gold); box-shadow: 6px 6px 0 white; }
.celebrate-button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 white; }
.final-line { margin: 28px 0 0; color: rgb(255 255 255 / 62%); font: 800 .68rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.credits { position: relative; z-index: 1; margin-top: 100px; padding-top: 28px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px 22px; border-top: 1px solid rgb(255 255 255 / 20%); text-align: left; font: 800 .62rem/1.4 var(--sans); letter-spacing: .14em; }
.credits span { color: rgb(255 255 255 / 45%); text-align: right; }
.credits strong { color: rgb(255 255 255 / 78%); }

.horn-game {
  padding: clamp(100px, 12vw, 170px) max(14px, calc((100vw - 1180px) / 2));
  color: var(--paper-light);
  background:
    radial-gradient(circle at 15% 20%, rgb(35 78 108 / 48%), transparent 28rem),
    radial-gradient(circle at 88% 75%, rgb(123 32 39 / 40%), transparent 30rem),
    #101a20;
}

.game-heading { max-width: 800px; margin-bottom: 54px; }
.game-heading .chapter-kicker { color: var(--gold); }
.game-heading h2 { color: white; }
.game-heading > p:last-child { max-width: 680px; font-size: 1.08rem; line-height: 1.7; }

.horn-game-shell {
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 12px;
  background: rgb(5 10 12 / 78%);
  box-shadow: 0 36px 90px rgb(0 0 0 / 48%);
}

.horn-hud {
  padding: 3px 2px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.horn-hud div {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 6px;
  background: rgb(255 255 255 / 6%);
}
.horn-hud span { color: rgb(255 255 255 / 54%); font: 900 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.horn-hud strong { color: var(--gold-light); font: 900 1rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.horn-hud div:nth-child(2) strong { color: #ef6770; letter-spacing: .13em; }

.horn-arena {
  position: relative;
  height: clamp(430px, 60vw, 570px);
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 16%);
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 16%, rgb(255 244 198 / 86%) 0 26px, transparent 27px),
    linear-gradient(180deg, #9dc8da 0%, #d8d0be 62%, #c5946b 100%);
  box-shadow: inset 0 -80px 90px rgb(45 20 25 / 26%);
  outline: none;
  touch-action: none;
}
.horn-arena:focus-visible { box-shadow: inset 0 0 0 4px var(--gold), inset 0 -80px 90px rgb(45 20 25 / 26%); }
.horn-arena.is-hit { animation: arena-shake .28s ease; }

.city-layer {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  pointer-events: none;
}
.city-layer--back {
  height: 44%;
  opacity: .38;
  background:
    repeating-linear-gradient(90deg, #355066 0 46px, transparent 46px 58px),
    linear-gradient(0deg, #355066 0 76%, transparent 76%);
  clip-path: polygon(0 35%, 5% 35%, 5% 8%, 12% 8%, 12% 52%, 18% 52%, 18% 21%, 27% 21%, 27% 45%, 34% 45%, 34% 2%, 41% 2%, 41% 55%, 49% 55%, 49% 27%, 58% 27%, 58% 46%, 65% 46%, 65% 12%, 73% 12%, 73% 40%, 82% 40%, 82% 5%, 90% 5%, 90% 53%, 100% 53%, 100% 100%, 0 100%);
}
.city-layer--front {
  z-index: 1;
  height: 25%;
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, rgb(244 188 76 / 42%) 15px 19px, transparent 19px 32px),
    #213542;
  clip-path: polygon(0 30%, 8% 30%, 8% 4%, 18% 4%, 18% 48%, 27% 48%, 27% 15%, 38% 15%, 38% 38%, 49% 38%, 49% 0, 59% 0, 59% 48%, 69% 48%, 69% 20%, 80% 20%, 80% 42%, 90% 42%, 90% 10%, 100% 10%, 100% 100%, 0 100%);
}
.moon { display: none; }

.horn-field { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.blue-horn {
  position: absolute;
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 7px 7px rgb(13 38 67 / 35%));
  will-change: transform;
}
.blue-horn::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  width: 27px;
  height: 27px;
  border: 7px solid #1359bd;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #72bdf4, 0 0 0 2px #0d376f;
}
.blue-horn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  width: 28px;
  height: 39px;
  border-radius: 3px 13px 13px 3px;
  background: linear-gradient(90deg, #184ca7, #2f8ce5 52%, #94d7ff);
  clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 64%);
  box-shadow: inset -4px 0 0 rgb(9 43 99 / 35%);
}
.blue-horn span {
  position: absolute;
  z-index: 2;
  left: 13px;
  top: 23px;
  width: 30px;
  height: 8px;
  border-radius: 99px;
  background: #2a83db;
  transform: rotate(-9deg);
}
.blue-horn span::after {
  content: "";
  position: absolute;
  left: -8px;
  top: -10px;
  width: 5px;
  height: 24px;
  border-radius: 3px;
  background: #103f91;
}

.collector-player {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: -9px;
  width: clamp(105px, 15vw, 154px);
  height: auto;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 12px 12px rgb(0 0 0 / 26%));
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  will-change: left, transform;
}
.collector-player.is-catching { animation: player-catch .25s ease; }

.horn-game-overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgb(9 20 27 / 76%), rgb(9 20 27 / 88%));
  backdrop-filter: blur(4px);
}
.horn-game-overlay[hidden] { display: none; }
.overlay-kicker { color: var(--gold-light); font: 900 .64rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.horn-game-overlay h3 { max-width: 650px; margin: 17px 0 13px; color: white; font-size: clamp(2.35rem, 6vw, 5.3rem); line-height: .92; }
.horn-game-overlay p { max-width: 560px; margin: 0 0 27px; color: rgb(255 255 255 / 75%); line-height: 1.6; }
.horn-start {
  min-height: 49px;
  padding: 15px 22px;
  color: var(--wine-dark);
  border: 0;
  border-radius: 3px;
  background: var(--gold);
  cursor: pointer;
  font: 900 .72rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 white;
  transition: transform .2s ease, box-shadow .2s ease;
}
.horn-start:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 white; }

.horn-controls {
  padding-top: 14px;
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  align-items: center;
  gap: 16px;
}
.horn-controls button {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: white;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 6px;
  background: rgb(255 255 255 / 8%);
  cursor: pointer;
  font: 900 1.2rem/1 var(--sans);
  touch-action: none;
}
.horn-controls button span { font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; }
.horn-controls button:hover,
.horn-controls button.is-pressed { color: var(--wine-dark); background: var(--gold); }
.horn-controls p { margin: 0; color: rgb(255 255 255 / 65%); font: 800 .65rem/1.4 var(--sans); letter-spacing: .1em; text-align: center; text-transform: uppercase; }

.horn-pop {
  position: absolute;
  z-index: 8;
  color: var(--gold);
  font: 900 1.3rem/1 var(--sans);
  pointer-events: none;
  text-shadow: 0 2px 0 white;
  animation: horn-pop .7s ease forwards;
}

@keyframes player-catch {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.1) translateY(-7px); }
}
@keyframes arena-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
@keyframes horn-pop {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.7); }
  30% { opacity: 1; transform: translate(-50%, -18px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(1); }
}

.site-footer { padding: 28px max(20px, calc((100vw - 1180px) / 2)); display: flex; justify-content: space-between; align-items: center; color: var(--paper-light); background: #180a0c; font-size: .8rem; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--gold); font: 800 .65rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 34px 84px;
  border: 0;
  color: white;
  background: rgb(13 9 9 / 95%);
}
.lightbox[open] { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; }
.lightbox::backdrop { background: rgb(0 0 0 / 88%); backdrop-filter: blur(8px); }
.lightbox figure { min-width: 0; height: calc(100vh - 68px); margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox img { max-width: 100%; max-height: calc(100% - 48px); object-fit: contain; box-shadow: 0 24px 80px #000; }
.lightbox figcaption { min-height: 40px; padding-top: 16px; color: rgb(255 255 255 / 72%); font: 800 .68rem/1.2 var(--sans); letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.lightbox button { color: white; border: 0; background: transparent; cursor: pointer; }
.lightbox-close { position: fixed; z-index: 2; right: 24px; top: 20px; width: 46px; height: 46px; font: 300 2.2rem/1 var(--sans); }
.lightbox-nav { width: 54px; height: 80px; font: 300 3rem/1 var(--serif); opacity: .7; }
.lightbox-nav:hover { opacity: 1; }

.confetti {
  position: fixed;
  z-index: 50;
  top: -20px;
  width: 9px;
  height: 18px;
  pointer-events: none;
  animation: confetti-fall var(--duration) linear forwards;
}

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes confetti-fall {
  0% { transform: translate3d(0, -30px, 0) rotate(0deg); }
  100% { transform: translate3d(var(--drift), 105vh, 0) rotate(720deg); }
}

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .episode-label { grid-column: 2; }
  .hero { grid-template-columns: 1fr; padding-top: 145px; }
  .hero-copy { max-width: 830px; }
  .hero-collage { min-height: 680px; width: min(100%, 720px); margin: 0 auto; }
  .plot-twist-inner { grid-template-columns: auto 1fr; }
  .random-button { grid-column: 2; max-width: none; justify-self: start; }
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px) {
  :root { --page: min(100% - 28px, 1180px); }
  .site-header { min-height: 74px; }
  .brand strong { font-size: 1.08rem; }
  .episode-label { font-size: .63rem; }
  .hero { padding-top: 120px; }
  h1 { font-size: clamp(3.3rem, 14vw, 6rem); }
  .hero-collage { min-height: 550px; }
  .opening-credit { display: none; }
  .scene-board, .scene-board--2024 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .scene-board--2024 .scene, .scene-board--2024 .scene--portrait, .scene-board--2024 .scene--wide { grid-column: auto; }
  .scene-board--2024 .scene--portrait { grid-row: span 2; }
  .comedy-break { grid-template-columns: 1fr; }
  .comedy-copy { max-width: 720px; }
  .comedy-poster { width: min(100%, 760px); margin: 0 auto; }
  .umbrella-reel { grid-template-columns: repeat(2, 1fr); }
  .umbrella-reel figure:nth-child(2), .umbrella-reel figure:nth-child(4) { transform: translateY(18px); }
  .party-film { width: calc(100vw + 130px); }
  .party-film figure { width: 300px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid article:nth-child(2) { border-right: 0; }
  .stats-grid article:nth-child(-n+2) { border-bottom: 1px solid rgb(63 16 21 / 25%); }
  .archive-heading { grid-template-columns: 1fr; gap: 24px; }
  .gallery { columns: 3 160px; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .horn-controls { grid-template-columns: 130px 1fr 130px; }
  .lightbox { padding: 54px 10px 24px; }
  .lightbox[open] { grid-template-columns: 40px 1fr 40px; }
  .lightbox figure { height: calc(100vh - 78px); }
  .lightbox-nav { width: 40px; }
}

@media (max-width: 520px) {
  h2 { font-size: clamp(2.6rem, 13vw, 4.4rem); }
  .hero { padding-left: 14px; padding-right: 14px; }
  .hero-lede { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-collage { min-height: 430px; }
  .photo-card { padding: 7px 7px 32px; }
  .photo-card figcaption { font-size: .6rem; }
  .photo-card--old { inset: 24px 20% 84px 0; }
  .photo-card--new { inset: 104px 0 10px 29%; }
  .photo-card--umbrella { inset: auto 30% -18px 16%; }
  .umbrella { top: 0; font-size: 4.5rem; }
  .narrator-card { padding: 38px 25px; }
  .chapter-number { font-size: 3.7rem; }
  .scene-board, .scene-board--2024 { grid-auto-rows: 160px; gap: 8px; }
  .scene { border-width: 4px; }
  .plot-twist-inner { grid-template-columns: 1fr; }
  .twist-symbol { display: none; }
  .random-button { grid-column: 1; justify-self: stretch; max-width: none; }
  .umbrella-reel { gap: 6px; }
  .umbrella-caption { margin-top: 48px; }
  .party-film { margin-top: 58px; width: calc(100vw + 430px); transform: translateX(-50%) rotate(-1deg) scale(.78); transform-origin: center; }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid article { min-height: 200px; border-right: 0; border-bottom: 1px solid rgb(63 16 21 / 25%); }
  .stats-grid article:last-child { border-bottom: 0; }
  .gallery { columns: 2 130px; column-gap: 8px; }
  .gallery-item { margin-bottom: 8px; }
  .video-grid { grid-template-columns: 1fr; }
  .video-card video { aspect-ratio: 16 / 12; }
  .horn-hud div { padding: 10px 7px; flex-direction: column; gap: 7px; text-align: center; }
  .horn-hud strong { font-size: .86rem; }
  .horn-arena { height: 500px; }
  .collector-player { width: 112px; }
  .horn-controls { grid-template-columns: 1fr 1fr; }
  .horn-controls p { grid-column: 1 / -1; grid-row: 1; }
  .horn-controls button { grid-row: 2; }
  .credits { grid-template-columns: 1fr; text-align: center; }
  .credits span { margin-top: 12px; text-align: center; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 18px; }
  .lightbox { padding-left: 2px; padding-right: 2px; }
  .lightbox[open] { grid-template-columns: 35px 1fr 35px; }
  .lightbox-nav { width: 35px; font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}