:root {
  --paper: #f4f1eb;
  --paper-soft: #faf8f2;
  --line: #3f3c39;
  --line-soft: #68625c;
  --ink: #1c1a18;
  --muted: #645d56;
  --chip: #ece7df;
  --shadow: rgba(30, 24, 18, 0.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  background:
    repeating-linear-gradient(to bottom, #f2efe8 0, #f2efe8 31px, #ddd7cf 31px, #ddd7cf 32px),
    linear-gradient(180deg, #f9f7f1 0%, #f1ede6 100%);
}
.shell {
  width: min(1380px, calc(100vw - 24px));
  margin: 18px auto 56px;
}
.heroCard,
.sectionShell,
.storyboardRow,
.scriptCard,
.frameCard {
  background: rgba(255,255,255,0.42);
}
.heroCard,
.sectionShell {
  border: 2px solid var(--line);
  box-shadow: 0 8px 24px var(--shadow);
}
.heroCard {
  padding: 18px 20px 22px;
}
.boardTopline,
.rowTopline {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--line-soft);
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(63,60,57,0.45);
}
.heroTitleRow {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  padding: 16px 0 10px;
}
.heroTitleRow h1,
.sectionHead h2,
.rowScript h3 { margin: 0; }
.heroTitleRow h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: 0.03em;
}
#hero-body {
  max-width: 820px;
  margin: 10px 0 0;
  font-size: 1.06rem;
  line-height: 1.5;
}
.heroChips,
.rowChips,
.assetFacts,
.bannerChooser,
.sectionNav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip,
.bannerThumb,
.frameTag {
  border: 1.5px solid rgba(63,60,57,0.5);
  background: var(--chip);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bannerThumb {
  cursor: pointer;
}
.bannerThumb.active {
  background: #ded6ca;
  border-color: var(--line);
}
.heroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.95fr);
  gap: 18px;
  align-items: start;
}
.heroMedia {
  display: grid;
  gap: 12px;
}
.heroBannerFrame {
  border: 2px solid var(--line);
  background: var(--paper-soft);
  padding: 12px;
}
.heroBannerImage {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border: 2px solid rgba(63,60,57,0.65);
  background: #eee8de;
}
.heroBannerCaption {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  line-height: 1.45;
}
.heroSidebar,
.content {
  display: grid;
  gap: 18px;
}
.scriptCard,
.sectionShell,
.storyboardRow,
.frameCard {
  border: 2px solid rgba(63,60,57,0.65);
}
.scriptCard {
  padding: 14px 16px;
  line-height: 1.5;
}
.sectionNav a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(63,60,57,0.4);
  padding-bottom: 2px;
}
.sectionShell {
  padding: 16px;
}
.sectionHead {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 12px;
}
.jumpTop { color: var(--muted); text-decoration: none; }
.noteLine,
.smallLabel,
.eyebrow,
.scriptLabel,
.annotationLabel,
.frameCaption {
  color: var(--muted);
}
.storyboardStack {
  display: grid;
  gap: 18px;
}
.storyboardRow {
  padding: 14px 16px 16px;
}
.rowBody {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
  gap: 16px;
  align-items: start;
  padding-top: 12px;
}
.rowFrames.two_frame_strip,
.rowFrames.three_frame_strip,
.rowFrames.single_frame_board {
  display: grid;
  gap: 10px;
  align-items: center;
}
.rowFrames.single_frame_board { grid-template-columns: minmax(0, 1fr); }
.rowFrames.two_frame_strip { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.rowFrames.three_frame_strip { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.arrowCell {
  display: grid;
  place-items: center;
  min-width: 34px;
  font-size: 2rem;
  line-height: 1;
  color: var(--line);
}
.frameCard {
  padding: 8px;
  background: rgba(255,255,255,0.48);
}
.frameCard img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid rgba(63,60,57,0.65);
  background: #ece6dc;
}
.frameMeta {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}
.frameCaption { font-size: 0.92rem; line-height: 1.4; }
.rowScript {
  display: grid;
  gap: 12px;
  padding: 6px 2px 0;
}
.slugline {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.actionList,
.dialogueList,
.annotationList,
.miniList {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.5;
}
.rowScriptBlock {
  border-top: 1px solid rgba(63,60,57,0.35);
  padding-top: 8px;
}
.densityBadge {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.subtle {
  color: var(--muted);
  font-size: 0.95rem;
}
.metaStack,
.factGrid,
.assetGrid {
  display: grid;
  gap: 12px;
}
.factGrid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.infoTile {
  border: 1.5px solid rgba(63,60,57,0.45);
  padding: 10px 12px;
  background: rgba(255,255,255,0.4);
}
.infoLabel {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.assetGrid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.assetCard {
  border: 1.5px solid rgba(63,60,57,0.45);
  padding: 10px;
  background: rgba(255,255,255,0.38);
}
.assetCard img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(63,60,57,0.65);
}
.assetCard h3 { margin: 10px 0 6px; }
.treeCard ul { margin: 0; padding-left: 18px; line-height: 1.5; }
@media (max-width: 980px) {
  .heroGrid,
  .rowBody {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .shell { width: min(100vw - 10px, 100%); margin: 8px auto 32px; }
  .heroCard, .sectionShell, .storyboardRow { padding-inline: 12px; }
  .rowFrames.two_frame_strip,
  .rowFrames.three_frame_strip {
    grid-template-columns: 1fr;
  }
  .arrowCell { display: none; }
  .boardTopline,
  .rowTopline { grid-template-columns: 1fr; }
}

.smallLabel {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.boardPacketShell {
  display: grid;
  gap: 16px;
}
.boardPageRail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.boardPageTab {
  appearance: none;
  border: 2px solid rgba(63,60,57,0.5);
  background: rgba(255,255,255,0.52);
  color: var(--ink);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  text-align: left;
  min-width: 170px;
  cursor: pointer;
}
.boardPageTab.active {
  background: rgba(236,231,223,0.95);
  border-color: var(--line);
  box-shadow: 0 8px 18px var(--shadow);
}
.boardPageTabLabel {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.boardPageTabMeta {
  color: var(--muted);
  font-size: 0.82rem;
}
.boardPage {
  display: none;
  border: 2px solid rgba(63,60,57,0.5);
  background: rgba(255,255,255,0.26);
  padding: 14px;
}
.boardPage.active {
  display: block;
}
.boardPageHeader {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(63,60,57,0.2);
  margin-bottom: 14px;
}
.boardPageHeader h3 {
  margin: 4px 0 0;
  font-size: 1.4rem;
}
.boardPageFacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
  min-width: 260px;
}
.boardPageRows {
  display: grid;
  gap: 16px;
}
.boardPageControls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pageNavBtn {
  appearance: none;
  border: 2px solid rgba(63,60,57,0.55);
  background: var(--paper-soft);
  color: var(--ink);
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.pageNavBtn[disabled] {
  opacity: 0.45;
  cursor: default;
}
.pageIndicator {
  color: var(--muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
@media (max-width: 980px) {
  .boardPageHeader,
  .boardPageControls {
    grid-template-columns: 1fr;
    display: grid;
  }
  .boardPageFacts {
    min-width: 0;
  }
}


html { scroll-behavior:smooth; }
.heroCard, .sectionShell, .storyboardRow, .scriptCard, .frameCard, .boardPageTab { scroll-margin-top: 92px; }
.sectionNav {
  position: sticky;
  top: 12px;
  z-index: 18;
  padding: 10px 0 2px;
  background: linear-gradient(180deg, rgba(244,241,235,.94), rgba(244,241,235,.72));
}
.boardPageRail {
  position: sticky;
  top: 70px;
  z-index: 16;
  padding: 10px;
  border: 2px solid rgba(63,60,57,0.55);
  background: rgba(250,248,242,.9);
  box-shadow: 0 10px 20px rgba(30,24,18,.08);
}
@media (max-width: 880px) {
  .boardPageRail { top: 56px; }
}