/* Shared slide system. The original cover and quotation keep their art direction. */
:root {
  --slide-title-size: clamp(60px, 7.5vw, 116px);
}
main > .deck-slide,
main > .interlude,
main > .outro {
  margin: 14px 14px 0;
}
.deck-slide {
  --line: rgba(241, 236, 223, .4);
  --muted: #d6cdb5;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(700px, 55.3vw, 920px);
  padding: 38px 5.5% 26px;
  color: var(--paper-light);
  background: #29291f;
}
.deck-slide > .slide-photo {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.68) sepia(.18);
  pointer-events: none;
}
.deck-slide::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 18, 12, .78), rgba(20, 22, 14, .48) 54%, rgba(28, 24, 14, .17)),
    linear-gradient(0deg, rgba(12, 16, 10, .85), transparent 62%, rgba(22, 23, 15, .22));
  pointer-events: none;
}
.deck-meta,
.deck-footer,
.slide-subline,
.tracklist-header,
.reference-note {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font: 10px/1.5 var(--mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}
.deck-meta > span:last-child,
.deck-footer > span:last-child {
  text-align: right;
}
.slide-title {
  font-family: var(--display);
  font-size: var(--slide-title-size);
  font-weight: 900;
  line-height: .97;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin: 33px 0 23px;
  color: var(--paper-light);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .15);
}
.slide-rule {
  display: block;
  position: relative;
  width: 112px;
  height: 2px;
  background: var(--paper-light);
}
.slide-rule::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper-light);
}
.slide-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 37px 0 28px;
}
.deck-footer {
  margin-top: 18px;
  font-size: 9px;
}
.deck-slide p {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}
.deck-slide .small-label {
  font-size: 10px;
  color: var(--paper-light);
  margin-bottom: 15px;
}
.deck-slide .slide-lead {
  font: 500 clamp(23px, 2.05vw, 31px)/1.33 var(--body);
  letter-spacing: -.025em;
  max-width: 700px;
}
.deck-slide .body-copy > p + p {
  margin-top: 23px;
}
.deck-slide button:focus-visible,
.deck-slide a:focus-visible,
.deck-slide summary:focus-visible {
  outline-color: var(--paper-light);
}
.deck-slide .snapshot {
  color: var(--ink);
  background: var(--paper-light);
  box-shadow: 0 10px 35px #0005;
}
.deck-slide .snapshot img {
  filter: saturate(.72) sepia(.1);
}
.deck-slide .snapshot figcaption {
  font-size: 9px;
  text-shadow: none;
}

/* Logline */
.logline-slide > .slide-photo { object-position: 56% 50%; }
.logline-slide::before {
  background:
    linear-gradient(90deg, #10170c99, #171b133b 55%, #17170c12),
    linear-gradient(0deg, #15180eed, #12160e40 70%);
}
.logline-slide .slide-content {
  justify-content: flex-end;
  padding-bottom: 46px;
}
.logline-layout {
  display: grid;
  grid-template-columns: 1.65fr .6fr;
  gap: 17%;
  align-items: end;
}
.logline-text p {
  font: 500 clamp(23px, 2.05vw, 31px)/1.4 var(--body);
  letter-spacing: -.025em;
  max-width: 740px;
}
.format-note { padding-top: 22px; border-top: 1px solid var(--line); }
.format-note .small-label { margin: 22px 0 6px; font-size: 9px; }
.format-note .small-label:first-child { margin-top: 0; }
.format-note strong {
  display: block;
  font: 30px/1.05 var(--display);
  letter-spacing: -.01em;
}
.format-note > p { margin-top: 25px; font-size: 13px; line-height: 1.55; }

/* Synopsis */
.synopsis-slide > .slide-photo { object-position: 50% 55%; }
.synopsis-slide::before {
  background: linear-gradient(90deg, #11170ff2, #1b1b14a8 48%, #25221644), linear-gradient(0deg, #0d150cbc, transparent 75%);
}
.synopsis-layout {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 10%;
  align-items: center;
}
.synopsis-layout .synopsis-copy p { font-size: 17px; line-height: 1.6; margin: 0 0 20px; }
.synopsis-layout .synopsis-copy p:last-child { margin-bottom: 0; }
.synopsis-layout .bedroom-collage {
  width: 100%;
  padding: 0 35px 90px 0;
  max-width: 450px;
  justify-self: end;
  margin: 0;
}
.synopsis-layout .large-snapshot { width: 78%; transform: rotate(-5deg); }
.synopsis-layout .large-snapshot img { aspect-ratio: .94; }
.synopsis-layout .small-snapshot { width: 66%; right: 0; bottom: 0; transform: rotate(6deg); }
.synopsis-layout .small-snapshot img { aspect-ratio: 1.5; }
.synopsis-layout .tape-one { left: 18%; }

/* Central conflict */
.conflict-slide > .slide-photo { object-position: 50% 44%; }
.conflict-slide::before {
  background: linear-gradient(0deg, #11170ff5, #171b14bd 38%, #1c21152b), linear-gradient(90deg, #171b14ad, #171b141a);
}
.conflict-slide .slide-content { justify-content: flex-end; }
.conflict-layout > .slide-lead { max-width: 670px; margin-bottom: 55px; }
.deck-slide .stakes-grid { gap: 5%; }
.deck-slide .stakes-grid article { padding-top: 21px; }
.deck-slide .stakes-grid .mono { font-size: 10px; }
.deck-slide .stakes-grid h3 {
  font: 30px/1.05 var(--display);
  letter-spacing: -.01em;
  margin: 18px 0 15px;
}
.deck-slide .stakes-grid p { font-size: 15px; line-height: 1.6; }

/* Setting and visual language */
.setting-slide > .slide-photo { object-position: 50% 58%; }
.setting-slide::before {
  background: linear-gradient(90deg, #131b12d6, #17201570 54%, #15180d45), linear-gradient(0deg, #13190ff2, transparent 85%);
}
.setting-slide .slide-content { padding-top: 32px; justify-content: flex-end; }
.setting-copy {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
  gap: 13%;
  margin-bottom: 35px;
}
.setting-copy > p:last-child { font-size: 15px; line-height: 1.6; max-width: 440px; }
.deck-slide .filmstrip {
  margin: 0;
  padding: 0;
  gap: 17px;
  background: transparent;
}
.deck-slide .filmstrip::before,
.deck-slide .filmstrip::after { display: none; }
.deck-slide .film-frame { border: 1px solid #e8e2cf6b; padding: 6px; }
.deck-slide .film-frame img { aspect-ratio: 1.85; filter: saturate(.75) sepia(.1); }
.deck-slide .film-frame span { padding: 10px 3px 2px; font-size: 9px; }
.reference-note { margin-top: 16px; font-size: 8px; }
.tone-slide > .slide-photo { object-position: center; }
.tone-slide::before {
  background: linear-gradient(90deg, #191b11d6, #151b1291), linear-gradient(0deg, #10170fc9, transparent);
}
.tone-layout { display: grid; grid-template-columns: 1fr .8fr; gap: 18%; align-items: center; }
.tone-layout .body-copy { max-width: 560px; }
.tone-layout .body-copy > p:not(.slide-lead) { font-size: 17px; }
.deck-slide .tone-list > div { grid-template-columns: .7fr 1fr; padding: 24px 0; gap: 24px; }
.deck-slide .tone-list > div:first-child { padding-top: 0; }
.deck-slide .tone-list h4 { font: 33px/1 var(--display); letter-spacing: -.01em; }
.deck-slide .tone-list p { font-size: 14px; }
.deck-slide .tone-list .tone-footnote {
  font: 15px/1.6 var(--body);
  color: var(--paper-light);
  margin-top: 30px;
}

/* Character slides */
.characters-slide > .slide-photo { object-position: 50% 40%; }
.characters-slide::before {
  background: linear-gradient(0deg, #121a10f0, #171c11bd 60%, #171c1191);
}
.characters-slide .slide-content { padding-top: 28px; }
.slide-subline { margin-bottom: 28px; font-size: 9px; }
.slide-subline > span:last-child { font-size: 8px; text-align: right; }
.deck-slide .band-grid { gap: 28px; }
.deck-slide .character:nth-child(even) { padding-top: 0; }
.deck-slide .character-image {
  padding: 8px 8px 29px;
  background: var(--paper);
  box-shadow: 0 8px 24px #0003;
}
.deck-slide .character:nth-child(even) .character-image,
.deck-slide .character:nth-child(3) .character-image { background: var(--paper); }
.deck-slide .character-image img { aspect-ratio: 1.35; }
.deck-slide .character-role { color: var(--ink); font-size: 7px; bottom: 11px; }
.deck-slide .character-name { margin: 24px 0 12px; gap: 12px; }
.deck-slide .character-name h3 { font-size: 42px; }
.deck-slide .character-name .mono { font-size: 9px; }
.deck-slide .character > p { font-size: 14px; line-height: 1.55; }
.deck-slide .character-arc { margin-top: 15px; }
.deck-slide .character-arc summary { font-size: 10px; padding: 11px 0; }
.deck-slide .character-arc p { font-size: 14px; }
.supporting-slide > .slide-photo { object-position: 50% 55%; }
.supporting-slide::before {
  background: linear-gradient(90deg, #191e1477, #11180fe8 65%), linear-gradient(0deg, #11180fc9, #1519104d);
}
.supporting-layout { display: grid; grid-template-columns: .82fr 1fr; gap: 16%; align-items: center; }
.supporting-visual { position: relative; padding: 15px 0; }
.supporting-visual .snapshot { width: 90%; max-width: 370px; transform: rotate(-5deg); }
.supporting-visual .snapshot img { aspect-ratio: 1.05; }
.supporting-visual .tape { left: 28%; top: 0; transform: rotate(-8deg); }
.deck-slide .supporting-list summary { padding: 18px 0; }
.deck-slide .supporting-list summary strong { font-size: 29px; }
.deck-slide .supporting-list summary small { font-size: 9px; }
.deck-slide .supporting-list details > div { padding: 0 20px 24px 0; }
.deck-slide .supporting-list .arc-line { font: 15px/1.5 var(--body); color: #e5ce98; }

/* Episode breakdown, across two slides */
.episodes-slide > .slide-photo { object-position: 50% 50%; }
.episodes-slide::before {
  background: linear-gradient(90deg, #151b1194, #11170ee8 63%), linear-gradient(0deg, #13190eee, #191c1555);
}
.episode-layout { display: grid; grid-template-columns: .75fr 1.2fr; gap: 13%; align-items: start; }
.deck-slide .record-column { position: relative; top: auto; padding: 0; }
.deck-slide .record-package { width: 77%; max-width: 315px; margin: 28px 0 35px; }
.deck-slide .record-sleeve > p { font-size: clamp(55px, 5vw, 77px); left: 20px; bottom: 40px; }
.deck-slide .record-caption { padding: 15px 0 0; max-width: 375px; }
.deck-slide .record-caption p { font-size: 15px; line-height: 1.6; margin-bottom: 17px; }
.deck-slide .tracklist-header { border-bottom: 1px solid var(--paper); padding-bottom: 15px; font-size: 9px; }
.deck-slide .episode summary { grid-template-columns: 35px 1fr 25px; padding: 15px 0; gap: 15px; }
.deck-slide .track-title { font: 25px/1.1 var(--display); letter-spacing: 0; }
.deck-slide .track-title small { color: var(--muted); font-size: 8px; margin-top: 8px; }
.deck-slide .track-no { font-size: 11px; margin-top: 3px; }
.deck-slide .episode summary:hover,
.deck-slide .episode[open] .track-title { color: #f0dcae; }
.deck-slide .episode-body { margin-left: 50px; padding: 0 12px 22px 0; }
.deck-slide .episode-body p { font-size: 14px; line-height: 1.6; }
.season-finale .snapshot { width: 82%; max-width: 320px; transform: rotate(-4deg); margin: 12px 0 20px; }
.season-finale .snapshot img { aspect-ratio: 1.7; }
.deck-slide .bonus-tracks { margin-top: 32px; border-color: var(--line); }
.deck-slide .bonus-tracks > summary { padding: 16px 22px; }
.deck-slide .bonus-tracks summary .mono { font-size: 8px; }
.deck-slide .bonus-tracks summary strong { font: 24px/1.1 var(--display); letter-spacing: 0; margin-top: 5px; }
.deck-slide .bonus-grid { grid-template-columns: repeat(3, 1fr); padding: 12px 22px 25px; }
.deck-slide .bonus-grid h3 { font: 25px/1.1 var(--display); }
.deck-slide .bonus-grid p { font-size: 14px; }
.episodes-second .slide-content { padding-top: 24px; }
.episodes-second .bonus-tracks { margin-top: 16px; }
.episodes-second .bonus-tracks > summary { padding-top: 12px; padding-bottom: 12px; }
.episodes-second .bonus-tracks summary strong { margin-top: 0; }

/* Themes, series overview, and production */
.themes-slide > .slide-photo { object-position: 50% 38%; }
.themes-slide::before {
  background: linear-gradient(90deg, #11180fe8, #141b109c 55%, #1c201580), linear-gradient(0deg, #13190fc9, transparent);
}
.themes-layout { display: grid; grid-template-columns: 1.1fr .8fr; gap: 14%; align-items: center; }
.themes-layout .why-copy p { margin-bottom: 23px; font-size: 17px; }
.themes-layout .why-copy .slide-lead { font-size: 29px; }
.themes-layout .snapshot { transform: rotate(5deg); max-width: 400px; }
.themes-layout .snapshot img { aspect-ratio: 1.15; }
.deck-slide .theme-tags { margin-top: 28px; }
.deck-slide .theme-tags span { border-color: var(--line); font-size: 9px; }
.future-slide > .slide-photo { object-position: 50% 40%; }
.future-slide::before {
  background: linear-gradient(0deg, #12190ff2, #11180fd4 50%, #151b1250), linear-gradient(90deg, #13190d99, transparent);
}
.future-slide .slide-content { justify-content: flex-end; padding-bottom: 45px; }
.deck-slide .season-futures { gap: 5%; }
.deck-slide .future-number { font-size: 62px; color: var(--paper); margin-bottom: 28px; }
.deck-slide .season-futures h3 { font: 34px/1.05 var(--display); letter-spacing: -.01em; margin: 12px 0 20px; }
.deck-slide .season-futures p { font-size: 16px; line-height: 1.65; color: var(--paper-light); }
.production-slide > .slide-photo { object-position: center; }
.production-slide::before {
  background: linear-gradient(90deg, #1c20158c, #11170fe8 70%), linear-gradient(0deg, #14190fbc, transparent);
}
.production-layout { display: grid; grid-template-columns: .9fr 1fr; gap: 14%; align-items: center; }
.production-photo { max-width: 450px; transform: rotate(-4deg); }
.production-photo img { aspect-ratio: 1.25; }
.deck-slide .beyond-list > p { font-size: 17px; line-height: 1.6; margin: 0 0 24px; }
.deck-slide .beyond-list > p:last-child { margin-bottom: 0; }
.deck-slide .beyond-list strong { font: 30px/1.1 var(--display); color: var(--paper); letter-spacing: 0; margin-bottom: 10px; }

@container sleeve (max-width: 1100px) {
  .deck-slide { padding: 32px 5% 24px; min-height: 690px; }
  .deck-meta { font-size: 9px; }
  .slide-content { padding-top: 30px; }
  .logline-layout { gap: 10%; grid-template-columns: 1.7fr .7fr; }
  .logline-text p { font-size: 25px; }
  .format-note strong { font-size: 25px; }
  .synopsis-layout { gap: 7%; grid-template-columns: 1.2fr .8fr; }
  .synopsis-layout .synopsis-copy p { font-size: 15px; }
  .synopsis-layout .bedroom-collage { padding-right: 10px; padding-bottom: 75px; }
  .tone-layout { gap: 10%; grid-template-columns: 1fr 1fr; }
  .tone-layout .body-copy > p:not(.slide-lead) { font-size: 15px; }
  .deck-slide .tone-list > div { gap: 17px; grid-template-columns: .7fr 1fr; }
  .deck-slide .tone-list h4 { font-size: 29px; }
  .deck-slide .band-grid { gap: 22px; }
  .deck-slide .character-name { display: block; margin-top: 20px; }
  .deck-slide .character-name h3 { font-size: 36px; margin-bottom: 8px; }
  .deck-slide .character > p { font-size: 13px; }
  .deck-slide .character-role { font-size: 6px; }
  .supporting-layout { gap: 10%; }
  .episode-layout { gap: 10%; grid-template-columns: .75fr 1.25fr; }
  .deck-slide .record-caption p { font-size: 14px; }
  .deck-slide .episode summary { grid-template-columns: 28px 1fr 22px; gap: 12px; }
  .deck-slide .track-title { font-size: 23px; }
  .deck-slide .episode-body { margin-left: 40px; }
  .themes-layout { gap: 9%; }
  .themes-layout .why-copy p { font-size: 15px; }
  .deck-slide .season-futures p { font-size: 15px; }
  .production-layout { gap: 10%; }
  .deck-slide .beyond-list > p { font-size: 15px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .masthead nav { gap: 13px; }
  .masthead nav a { font-size: 10px; }
  .motion-toggle { padding-left: 12px; margin-left: 0; }
}
@container sleeve (min-width: 761px) and (max-width: 900px) {
  .deck-slide .band-grid { gap: 16px; }
  .deck-slide .character-role { font-size: 5px; left: 7px; }
  .deck-slide .character-arc summary { font-size: 8px; }
  .setting-copy { gap: 8%; grid-template-columns: 1fr 1fr; }
  .deck-slide .film-frame span { font-size: 7px; }
}

@media (max-width: 760px) {
  :root { --slide-title-size: clamp(43px, 12vw, 78px); }
}
@container sleeve (max-width: 760px) {
  main > .deck-slide, main > .interlude, main > .outro { margin: 8px 8px 0; }
  .deck-slide { min-height: 620px; padding: 25px 6% 20px; }
  .deck-meta { font-size: 7px; gap: 16px; align-items: start; }
  .deck-meta > span:last-child { max-width: 45%; }
  .slide-title { margin: 30px 0 22px; line-height: .99; }
  .slide-rule { width: 76px; }
  .slide-content { padding: 32px 0 15px; }
  .deck-footer { font-size: 7px; margin-top: 24px; gap: 15px; }
  .deck-footer > span:last-child { max-width: 56%; }
  .deck-slide .small-label { font-size: 9px; }
  .deck-slide .slide-lead { font-size: 23px; line-height: 1.35; }
  .deck-slide > .slide-photo { object-position: center; }
  .deck-slide::before {
    background: linear-gradient(90deg, #13190dc7, #171b1280), linear-gradient(0deg, #10180ef2, #1c21145c 85%);
  }
  .logline-slide { min-height: 730px; }
  .logline-slide > .slide-photo { object-position: 64% center; }
  .logline-slide::before { background: linear-gradient(0deg, #14190ff5, #141a11b0 70%, #181b1330); }
  .logline-slide .slide-content { padding: 65px 0 15px; }
  .logline-layout { grid-template-columns: 1fr; gap: 30px; }
  .logline-text p { font-size: 23px; line-height: 1.45; }
  .format-note { display: grid; grid-template-columns: .75fr 1fr; gap: 12px; padding-top: 20px; }
  .format-note .small-label { margin: 0; align-self: center; }
  .format-note strong { font-size: 22px; }
  .format-note > p { grid-column: 1 / -1; margin-top: 5px; font-size: 12px; }
  .format-note > p br { display: none; }
  .synopsis-layout { grid-template-columns: 1fr; gap: 38px; }
  .synopsis-layout .synopsis-copy p { font-size: 16px; }
  .synopsis-layout .bedroom-collage { max-width: 390px; width: 95%; padding: 0 10px 85px; justify-self: center; }
  .synopsis-layout .large-snapshot { width: 71%; }
  .synopsis-layout .small-snapshot { width: 62%; right: 0; }
  .conflict-layout > .slide-lead { margin-bottom: 32px; }
  .deck-slide .stakes-grid { grid-template-columns: 1fr; gap: 24px; }
  .deck-slide .stakes-grid article { padding-top: 18px; }
  .deck-slide .stakes-grid h3 { font-size: 28px; margin: 12px 0; }
  .deck-slide .stakes-grid p { font-size: 15px; }
  .setting-copy { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; }
  .setting-copy > p:last-child { font-size: 15px; }
  .deck-slide .filmstrip { grid-template-columns: 1fr; gap: 16px; }
  .deck-slide .film-frame img { aspect-ratio: 1.8; }
  .deck-slide .film-frame span { font-size: 8px; }
  .reference-note { font-size: 7px; }
  .tone-layout { grid-template-columns: 1fr; gap: 38px; }
  .tone-layout .body-copy > p:not(.slide-lead) { font-size: 16px; }
  .deck-slide .tone-list > div { grid-template-columns: .7fr 1fr; gap: 24px; }
  .deck-slide .tone-list h4 { font-size: 30px; }
  .deck-slide .tone-list p { font-size: 14px; }
  .slide-subline { display: block; font-size: 9px; margin-bottom: 25px; }
  .slide-subline > span:last-child { display: block; text-align: left; font-size: 7px; margin-top: 8px; }
  .deck-slide .band-grid { grid-template-columns: repeat(2, 1fr); gap: 35px 20px; }
  .deck-slide .character-image { padding: 6px 6px 27px; }
  .deck-slide .character-image img { aspect-ratio: .9; }
  .deck-slide .character-role { font-size: 5px; left: 6px; letter-spacing: 0; }
  .deck-slide .character-name { margin-top: 20px; }
  .deck-slide .character-name h3 { font-size: 34px; }
  .deck-slide .character-name .mono { font-size: 8px; }
  .deck-slide .character > p { font-size: 14px; line-height: 1.6; }
  .deck-slide .character-arc summary { font-size: 9px; }
  .supporting-layout { grid-template-columns: 1fr; gap: 36px; }
  .supporting-visual { width: 90%; justify-self: center; }
  .supporting-visual .snapshot { max-width: 380px; width: 100%; }
  .supporting-visual .snapshot img { aspect-ratio: 1.35; }
  .deck-slide .supporting-list summary strong { font-size: 28px; }
  .deck-slide .supporting-list summary small { font-size: 8px; }
  .episode-layout { grid-template-columns: 1fr; gap: 35px; }
  .deck-slide .record-package { max-width: 230px; width: 70%; margin: 22px 0 30px 4%; }
  .deck-slide .record-sleeve > p { font-size: 65px; left: 17px; bottom: 39px; }
  .deck-slide .record-caption { max-width: none; }
  .deck-slide .record-caption p { font-size: 15px; }
  .deck-slide .tracklist-header { font-size: 8px; }
  .deck-slide .episode summary { padding: 19px 0; grid-template-columns: 27px 1fr 20px; gap: 10px; }
  .deck-slide .track-title { font-size: 25px; }
  .deck-slide .track-title small { font-size: 7px; }
  .deck-slide .episode-body { margin-left: 37px; padding-right: 0; }
  .deck-slide .episode-body p { font-size: 15px; }
  .season-finale .snapshot { width: 88%; max-width: 350px; margin: 10px auto 30px; }
  .deck-slide .bonus-tracks > summary { padding: 16px; }
  .deck-slide .bonus-tracks summary .mono { font-size: 7px; }
  .deck-slide .bonus-tracks summary strong { font-size: 23px; }
  .deck-slide .bonus-grid { grid-template-columns: 1fr; padding: 12px 17px 25px; }
  .themes-layout { grid-template-columns: 1fr; gap: 32px; }
  .themes-layout .why-copy p { font-size: 16px; }
  .themes-layout .why-copy .slide-lead { font-size: 26px; }
  .themes-layout .snapshot { width: 90%; justify-self: center; margin: 5px 0 15px; }
  .deck-slide .theme-tags span { font-size: 8px; }
  .future-slide .slide-content { padding-bottom: 20px; }
  .deck-slide .season-futures { grid-template-columns: 1fr; gap: 32px; }
  .deck-slide .season-futures article { grid-template-columns: 60px 1fr; gap: 18px; }
  .deck-slide .future-number { font-size: 45px; margin: 0; }
  .deck-slide .season-futures h3 { font-size: 31px; margin-top: 10px; }
  .deck-slide .season-futures p { font-size: 15px; }
  .production-layout { grid-template-columns: 1fr; gap: 40px; }
  .production-photo { width: 90%; justify-self: center; }
  .deck-slide .beyond-list > p { font-size: 16px; margin-bottom: 27px; }
  .deck-slide .beyond-list strong { font-size: 29px; }
}
@container sleeve (max-width: 360px) {
  .deck-slide .band-grid { grid-template-columns: 1fr; gap: 40px; }
  .deck-slide .character-image { width: 88%; margin: 0 auto; }
  .deck-slide .character-image img { aspect-ratio: 1.15; }
  .deck-slide .character-role { font-size: 7px; }
  .deck-slide .character-name { display: flex; align-items: baseline; }
  .deck-slide .character-name h3 { font-size: 38px; margin-bottom: 0; }
}
@media print {
  .deck-slide { min-height: 0; break-before: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .deck-slide::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  main > .deck-slide { margin: 0; }
  .deck-slide .slide-photo { height: 100%; }
  .deck-slide details { break-inside: avoid; }
}

/* Black surrounds; paper belongs to the physical objects within the slides. */
body { background: #000; color: var(--paper-light); }
.masthead, .format-strip, body > footer {
  background: #000;
  color: var(--paper-light);
  border-color: #ffffff26;
}
.masthead-location span { color: #aaa697; }
.masthead .motion-toggle { border-color: #ffffff30; }
.menu-toggle { border-color: #f1ecdf70; }
.skip-link { color: var(--ink); }
.synopsis-slide > .slide-photo { object-position: 64% 45%; }
.synopsis-slide::before {
  background: linear-gradient(90deg, #0b100eee, #151a12a8 49%, #15180e30), linear-gradient(0deg, #0a100ab3, transparent 75%);
}
.deck-slide > .turned-photo {
  container-type: size;
  overflow: hidden;
}
.turned-photo > img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(90deg);
}
.setting-slide::before {
  background: linear-gradient(90deg, #0d160fba, #10190f70), linear-gradient(0deg, #0b100eeb, transparent 90%);
}
.tone-slide > .slide-photo { object-position: 50% 34%; }
.tone-slide::before {
  background: linear-gradient(90deg, #13190fee, #13190f88 57%, #11170f40), linear-gradient(0deg, #11170fdb, transparent);
}
.tone-layout { grid-template-columns: 1fr 1.1fr; gap: 8%; }
.tone-copy .tone-list { margin-top: 24px; }
.tone-copy .body-copy > p:not(.slide-lead) { font-size: 15px; margin-top: 15px; }
.deck-slide .tone-copy .tone-list > div { padding: 10px 0; }
.deck-slide .tone-copy .tone-list h4 { font-size: 26px; }
.deck-slide .tone-copy .tone-list p { font-size: 12px; }
.deck-slide .tone-copy .tone-footnote { margin-top: 15px; font-size: 13px; }

/* A hand-assembled flyer, two photographs, and a ticket form one scene collage. */
.scene-collage { position: relative; min-height: 455px; width: 100%; max-width: 590px; justify-self: center; }
.scene-collage figure { position: absolute; box-shadow: 0 10px 24px #0006; }
.scene-collage figure img { height: 100%; width: 100%; object-fit: cover; }
.scene-collage figcaption { font: 9px/1 var(--mono); color: var(--paper); padding-top: 10px; }
.collage-sheet {
  position: absolute; inset: 11% 5% 15% 22%;
  transform: rotate(7deg); background: #dad6c8; color: #22251e;
  padding: 24px; box-shadow: 0 8px 24px #0005;
  clip-path: polygon(0 1%, 17% 0, 45% 2%, 76% 0, 100% 2%, 99% 97%, 82% 99%, 52% 98%, 20% 100%, 0 98%);
}
.collage-sheet > span { font: 10px/1.4 var(--mono); }
.collage-sheet b { display: block; font: 65px/.93 var(--display); margin-top: 22px; }
.collage-sheet small { display: block; font: 9px/1.4 var(--mono); margin-top: 18px; }
.collage-venue { width: 42%; height: 73%; left: 0; top: 4%; transform: rotate(-8deg); z-index: 2; }
.collage-venue img { clip-path: polygon(5% 0, 100% 1%, 96% 100%, 0 98%, 2% 45%, 0 12%); }
.collage-records { width: 65%; height: 47%; right: -1%; bottom: 6%; transform: rotate(3deg); z-index: 3; border: 7px solid #e7e2d5; }
.collage-records figcaption { color: #ddd7c7; margin-left: 2px; padding-top: 16px; }
.collage-ticket {
  position: absolute; right: -2%; top: 7%; z-index: 4; width: 43%;
  padding: 14px 12px; background: #a84c31; color: #f2e7d3; transform: rotate(-7deg);
  border: 1px dashed #f2e7d38a; outline: 5px solid #a84c31;
  font: 9px/1.4 var(--mono);
}
.collage-ticket b { font: 31px/1.2 var(--display); display: block; }
.collage-ticket small { display: block; font-size: 7px; }
.collage-scribble { position: absolute; bottom: 0; left: 0; font: italic 20px/1.1 var(--serif); transform: rotate(-5deg); }

/* Supporting character archive: stacked sheets, a folder tab, two small photographs. */
.supporting-slide > .slide-photo { object-position: 36% 34%; }
.supporting-slide::before {
  background: linear-gradient(90deg, #10190e99, #0b120fe8 63%), linear-gradient(0deg, #0d140edb, #17201740);
}
.supporting-layout { grid-template-columns: 1fr 1fr; gap: 9%; }
.archive-folder { width: 100%; max-width: 495px; height: 500px; justify-self: center; padding: 0; }
.folder-back {
  position: absolute; inset: 36px 0 0 8px; background: #a99168;
  transform: rotate(3deg); box-shadow: 0 15px 45px #0006;
}
.folder-back > span {
  position: absolute; left: 0; top: -24px; width: 52%; padding: 10px 16px 7px;
  background: #a99168; border-radius: 6px 6px 0 0; color: #322c20; font: 9px var(--mono);
}
.folder-paper { position: absolute; background: #e2ded0; box-shadow: 0 3px 8px #0004; }
.paper-back { inset: 24px 15px 4px 3px; transform: rotate(-4deg); background: #c9c3b0; }
.paper-back::before { content: ""; position: absolute; inset: 4px 10px -3px -4px; background: #ede9dc; transform: rotate(2deg); }
.paper-front {
  inset: 7px 27px 24px 20px; transform: rotate(-1.5deg); color: var(--ink); padding: 25px 22px;
  background: repeating-linear-gradient(0deg, #ddd8c900 0 26px, #79745d18 26px 27px), #e9e5d8;
}
.folder-heading { display: block; padding-bottom: 12px; border-bottom: 1px solid #35372d66; font: 8px/1.4 var(--mono); letter-spacing: .04em; }
.folder-note { display: block; font: italic 24px/1.15 var(--serif); margin: 15px 0 0 52%; transform: rotate(5deg); }
.folder-photo { position: absolute; padding: 7px 7px 0; background: #f3eee0; box-shadow: 0 5px 15px #0004; }
.folder-photo img { width: 100%; height: auto; filter: saturate(.8); }
.folder-photo figcaption { font: 7px/1.25 var(--mono); letter-spacing: .02em; padding: 9px 0 10px; }
.photo-bedroom { width: 68%; left: -8px; top: 77px; transform: rotate(-8deg); z-index: 2; }
.photo-bedroom img { aspect-ratio: 1.4; }
.photo-dinner { width: 51%; right: -13px; bottom: 20px; transform: rotate(8deg); z-index: 3; }
.photo-dinner img { aspect-ratio: .95; }
.folder-annotation { position: absolute; left: 4%; bottom: 110px; font: italic 19px/1.2 var(--serif); transform: rotate(-8deg); }
.folder-stamp { position: absolute; left: 14px; bottom: 20px; border: 2px solid #9b4c3b; padding: 8px 6px; color: #9b4c3b; font: 9px/1.2 var(--mono); transform: rotate(-7deg); }
.binder-clip { position: absolute; top: -4px; left: 25%; width: 35px; height: 28px; background: linear-gradient(90deg, #181b19, #444842, #171a17); z-index: 5; transform: rotate(-4deg); box-shadow: 2px 3px 3px #0006; }
.binder-clip::before { content: ""; position: absolute; width: 18px; height: 31px; left: 6px; top: -22px; border: 2px solid #b7b9ad; border-radius: 9px 9px 4px 4px; }
.folder-sticky { position: absolute; right: -7px; top: 4px; background: #d6caa1; color: #424334; padding: 12px 15px; font: italic 17px/1.1 var(--serif); box-shadow: 0 4px 6px #0003; transform: rotate(7deg); z-index: 6; }
.deck-slide .supporting-list summary { display: grid; grid-template-columns: 52px 1fr 17px; gap: 17px; align-items: center; padding: 13px 0; }
.deck-slide .supporting-list summary strong { font-size: 27px; }
.deck-slide .supporting-list summary small { font-size: 8px; }
.portrait-slot { display: grid; place-items: center; width: 52px; height: 64px; border: 1px solid #f1ecdf60; background: #e0dbc90d; }
.portrait-slot > span { font: 10px/1 var(--mono); color: #c7c4b388; }
.deck-slide .supporting-list details > div { padding-left: 69px; font-size: 14px; }
.episodes-slide:not(.episodes-second) > .slide-photo { object-position: 55% 42%; }
.episodes-second > .slide-photo { object-position: 36% 54%; }
.episodes-second::before { background: linear-gradient(90deg, #171d1260, #0b130de6 62%), linear-gradient(0deg, #10170fde, #11180c35); }
.record-sleeve > img { object-position: 35% center; }
.character:nth-child(-n+2) .character-image img { object-position: 50% 28%; }
.archive-folder .folder-note { margin-left: 72%; font-size: 22px; }

/* Small photographs retain their texture inside a second paper collage. */
.themes-slide { background: #080a08; }
.themes-slide::before { background: radial-gradient(ellipse at 80% 55%, #33382d66, transparent 70%); }
.themes-layout { grid-template-columns: 1fr 1.1fr; gap: 10%; }
.memory-collage { position: relative; height: 460px; width: 100%; max-width: 540px; justify-self: center; }
.memory-paper { position: absolute; inset: 3% 6% 2% 15%; background: #d4cebb; padding: 25px; color: #303328; transform: rotate(5deg); box-shadow: 0 9px 25px #0006; }
.memory-paper > span { font: 8px var(--mono); }
.memory-paper b { display: block; font: 48px/.94 var(--display); margin-top: 20px; }
.memory-paper small { position: absolute; bottom: 24px; font: 7px var(--mono); max-width: 75%; }
.memory-headphones { position: absolute; left: 0; top: 25%; width: 70%; transform: rotate(-7deg); box-shadow: 0 6px 20px #0005; z-index: 2; }
.memory-headphones img { aspect-ratio: 1.35; clip-path: polygon(0 2%, 21% 0, 70% 2%, 100% 0, 98% 100%, 70% 97%, 33% 100%, 0 98%); }
.memory-sunset { position: absolute; bottom: 3%; right: -3%; width: 52%; padding: 7px 7px 0; background: #ebe6d5; transform: rotate(7deg); z-index: 3; box-shadow: 0 5px 20px #0005; }
.memory-sunset img { aspect-ratio: 1.6; }
.memory-sunset figcaption { font: 7px/1.3 var(--mono); color: #303328; padding: 10px 0 13px; }
.memory-label { position: absolute; left: 4%; top: -6%; font: italic 22px/1.2 var(--serif); transform: rotate(-5deg); z-index: 4; color: #f0ead8; }
.future-slide > .slide-photo { object-position: center 38%; }
.production-slide > .slide-photo { object-position: center 45%; }
.production-setlist {
  position: relative; justify-self: center; width: 90%; max-width: 355px; padding: 38px 30px;
  background: #e0dccd; color: #242b22; transform: rotate(-5deg); box-shadow: 0 12px 25px #0005;
  clip-path: polygon(0 1%, 35% 0, 65% 1%, 100% 0, 99% 99%, 71% 98%, 35% 100%, 1% 98%);
}
.setlist-top, .setlist-bottom { display: block; font: 9px/1.4 var(--mono); }
.production-setlist h3 { font: 66px/1 var(--display); margin: 20px 0 25px; }
.production-setlist ol { padding-left: 25px; font: 17px/2 var(--mono); border-block: 1px solid #242b2270; padding-block: 17px; margin-bottom: 25px; }
.deck-slide .production-setlist p { font: italic 22px/1.2 var(--serif); text-shadow: none; }
.setlist-bottom { margin-top: 36px; }

@container sleeve (max-width: 1100px) {
  .tone-layout { gap: 6%; }
  .scene-collage { min-height: 395px; }
  .collage-sheet { padding: 18px; }
  .collage-sheet b { font-size: 51px; }
  .collage-ticket { padding: 10px; }
  .collage-ticket b { font-size: 25px; }
  .collage-ticket small { font-size: 5px; }
  .supporting-layout { gap: 7%; }
  .archive-folder { height: 430px; }
  .paper-front { padding: 22px 14px; inset-inline: 12px 19px; }
  .folder-heading { font-size: 6px; }
  .folder-note { font-size: 21px; margin-left: 48%; }
  .archive-folder .folder-note { margin-left: 66%; font-size: 17px; }
  .folder-annotation { font-size: 16px; bottom: 115px; }
  .folder-stamp { font-size: 7px; }
  .folder-sticky { font-size: 14px; right: -3px; padding: 10px; }
  .deck-slide .supporting-list summary { grid-template-columns: 44px 1fr 15px; gap: 12px; }
  .portrait-slot { width: 44px; height: 55px; }
  .deck-slide .supporting-list summary strong { font-size: 24px; }
  .deck-slide .supporting-list summary small { font-size: 7px; }
  .deck-slide .supporting-list details > div { padding-left: 56px; }
  .memory-collage { height: 395px; }
  .memory-paper { padding: 20px; }
  .memory-paper b { font-size: 40px; }
  .memory-label { font-size: 19px; }
}
@container sleeve (min-width: 761px) and (max-width: 900px) {
  .archive-folder { height: 370px; }
  .folder-note { font-size: 17px; }
  .folder-photo figcaption { font-size: 5px; }
  .folder-annotation { bottom: 95px; font-size: 13px; }
  .collage-scribble { font-size: 17px; }
  .scene-collage { min-height: 355px; }
  .collage-sheet b { font-size: 43px; }
  .memory-paper b { font-size: 34px; }
  .production-setlist { width: 100%; padding: 30px 22px; }
  .production-setlist h3 { font-size: 55px; }
  .production-setlist ol { font-size: 13px; }
}
@media (max-width: 760px) {
  .masthead nav { background: #000; color: var(--paper-light); border-color: #ffffff30; }
  .masthead nav a { border-color: #ffffff25; }
}
@container sleeve (max-width: 760px) {
  .tone-layout, .supporting-layout, .themes-layout { grid-template-columns: 1fr; gap: 45px; }
  .tone-copy .tone-list { margin-top: 25px; }
  .deck-slide .tone-copy .tone-list p { font-size: 13px; }
  .scene-collage { min-height: 400px; max-width: 420px; margin-top: 5px; }
  .scene-collage figcaption { font-size: 7px; }
  .collage-records { right: 0; }
  .collage-sheet b { font-size: 50px; }
  .collage-sheet > span { font-size: 7px; }
  .collage-ticket { right: 1%; }
  .archive-folder { width: 94%; max-width: 420px; height: 440px; margin: 25px 0 10px; }
  .paper-front { padding: 23px 18px; }
  .folder-note { font-size: 23px; }
  .archive-folder .folder-note { margin-left: 67%; font-size: 19px; }
  .folder-heading { font-size: 7px; }
  .photo-bedroom { top: 87px; }
  .photo-dinner { width: 54%; bottom: 23px; }
  .folder-photo figcaption { font-size: 6px; }
  .folder-annotation { bottom: 100px; }
  .folder-stamp { left: 8px; bottom: 15px; font-size: 7px; padding: 7px; }
  .folder-sticky { right: -3px; top: -3px; font-size: 16px; }
  .deck-slide .supporting-list summary { grid-template-columns: 48px 1fr 17px; gap: 14px; padding: 15px 0; }
  .portrait-slot { width: 48px; height: 60px; }
  .deck-slide .supporting-list summary strong { font-size: 27px; }
  .deck-slide .supporting-list summary small { font-size: 7px; }
  .deck-slide .supporting-list details > div { padding-left: 0; }
  .memory-collage { max-width: 420px; height: 415px; margin-bottom: 10px; }
  .memory-paper b { font-size: 43px; }
  .memory-label { font-size: 19px; left: 0; }
  .memory-sunset { right: 0; }
  .production-setlist { width: 87%; padding: 30px 25px; margin-block: 10px; }
  .production-setlist h3 { font-size: 60px; }
  .production-setlist ol { font-size: 15px; }
}
@container sleeve (max-width: 360px) {
  .archive-folder { height: 385px; }
  .folder-note { font-size: 19px; }
  .archive-folder .folder-note { margin-left: 67%; font-size: 16px; }
  .folder-heading { font-size: 5px; }
  .folder-photo figcaption { font-size: 5px; }
  .folder-annotation { bottom: 95px; font-size: 14px; }
  .folder-sticky { font-size: 14px; }
  .scene-collage { min-height: 360px; }
  .collage-sheet b { font-size: 42px; }
  .memory-collage { height: 370px; }
  .memory-paper b { font-size: 36px; }
}

.tone-slide,
.themes-slide { background: #0c0c0b; }
.tone-slide::before,
.themes-slide::before { background: none; }
.tone-layout,
.themes-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 5%; }
.approved-collage {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  mask-image:
    linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(0deg, transparent, #000 3%, #000 99%, transparent);
  mask-composite: intersect;
}
.approved-collage img {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
}
.approved-collage--mood { aspect-ratio: 1536 / 860; }
.approved-collage--mood img { top: -9.767442%; }
.approved-collage--themes { aspect-ratio: 1536 / 800; }
.approved-collage--themes img { top: -17.5%; }
@container sleeve (max-width: 1000px) {
  .tone-layout, .themes-layout { grid-template-columns: 1fr; gap: 32px; }
  .approved-collage { grid-row: 1; max-width: 800px; justify-self: center; }
  .tone-layout .body-copy { max-width: none; }
}