/* ============================================
   SCHEMA — Film dossier layer
   Shared by /films/infinite-regress and /films/how-the-west-was-won.
   Only rules that were identical (or trivially equivalent) in both pages'
   inline blocks live here. Anything a single dossier does differently —
   its keyart, its section-nav column count, its own sections — stays
   inline on that page and overrides this file.
   ============================================ */

.film-shell { display: grid; }

/* ---------- Dossier header ---------- */
.dossier {
  display: grid;
  grid-template-columns: 380px 1fr;
  border-bottom: 1.5px solid var(--bone);
}
.dossier-key {
  background: var(--ink);
  color: var(--bone);
  padding: 32px;
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 24px;
  min-height: 560px;
}
/* .dossier-key .keystripe and .glyph are per-film — see each page. */
.dossier-key > * { position: relative; z-index: 1; }
.dossier-key .head {
  display: flex; justify-content: space-between; align-items: start;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.dossier-key .stamps { display: flex; gap: 10px; flex-wrap: wrap; }
.dossier-key .stamp {
  border: 1.5px solid var(--bone);
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.dossier-key .stamp.solid { background: rgba(241, 234, 214, 0.06); color: var(--bone); }

.dossier-content {
  padding: 32px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
}
.dossier-content .topmeta {
  display: grid; grid-template-columns: repeat(5, auto) 1fr; gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--bone);
  align-items: end;
}
.dossier-content .topmeta .k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(241, 234, 214, 0.55); margin-bottom: 4px;
}
.dossier-content .topmeta .v { font-family: var(--font-mono); font-size: 13px; }
.dossier-content .title-block .id {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 12px;
}
/* Only font-size differs per film — each page sets its own. */
.dossier-content .title-block h1 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin: 0;
}
.dossier-content .title-block .logline {
  margin-top: 24px;
  font-size: 19px; line-height: 1.45;
  max-width: 56ch;
  text-wrap: pretty;
}
.dossier-content .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Section nav ----------
   grid-template-columns depends on how many sections a dossier has, so
   each page sets its own. */
.section-nav {
  display: grid;
  align-items: stretch;
  border-bottom: 1.5px solid var(--bone);
  background: var(--ink);
  color: var(--bone);
  overflow-x: auto;
}
.section-nav .label {
  padding: 14px 18px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(241, 234, 214, 0.65);
  border-right: 1px solid rgba(241, 234, 214, 0.18);
  background: rgba(0, 0, 0, 0.35);
}
.section-nav a {
  padding: 14px 18px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(241, 234, 214, 0.65);
  border-right: 1px solid rgba(241, 234, 214, 0.12);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.section-nav a:hover { color: var(--bone); background: rgba(255, 255, 255, 0.05); }
.section-nav .end { border-right: none; }

/* ---------- Sections ---------- */
.film-section { border-bottom: 1.5px solid var(--bone); }
.sec-head {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 32px;
  border-bottom: 1.5px solid var(--bone);
}
.sec-head .index {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--rust);
}
/* .title is an <h2>; margin:0 keeps it where the old <span> sat. */
.sec-head .title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0;
}
.sec-head .meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(241, 234, 214, 0.55);
}

/* ---------- Synopsis ---------- */
.synopsis { display: grid; grid-template-columns: 1fr 1fr; }
.synopsis .col { padding: 32px; }
.synopsis .col + .col { border-left: 1.5px solid var(--bone); }
.synopsis .lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  margin: 0 0 20px;
}
.synopsis .lede em { color: var(--rust); font-style: normal; }
.synopsis .body p { font-size: 15px; line-height: 1.6; margin: 0 0 14px; }

/* ---------- Cast ---------- */
.cast { display: grid; grid-template-columns: repeat(4, 1fr); }
.cast .person {
  padding: 24px;
  border-right: 1.5px solid var(--bone);
  border-top: 1.5px solid var(--bone);
  display: grid;
  gap: 14px;
}
.cast .person:nth-child(-n+4) { border-top: none; }
.cast .person:nth-child(4n) { border-right: none; }
.cast .portrait {
  aspect-ratio: 4 / 5;
  background: rgba(241, 234, 214, 0.04);
  border: 1.5px solid var(--bone);
  background-image:
    radial-gradient(rgba(241, 234, 214, 0.25) 1px, transparent 1.4px),
    linear-gradient(135deg, rgba(241, 234, 214, 0.05) 0%, rgba(241, 234, 214, 0.02) 100%);
  background-size: 8px 8px, 100% 100%;
  position: relative;
}
.cast .portrait .stamp {
  position: absolute; bottom: 8px; left: 8px;
  background: var(--ink); color: var(--bone);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 6px;
}
.cast .role {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rust);
}
.cast .name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 22px;
  letter-spacing: -0.01em; line-height: 1;
}
.cast .character {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(241, 234, 214, 0.55); letter-spacing: 0.04em;
}

/* ---------- Crew ---------- */
.crew { display: grid; grid-template-columns: repeat(2, 1fr); }
.crew .row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(241, 234, 214, 0.15);
  border-right: 1.5px solid var(--bone);
  align-items: center;
}
.crew .row:nth-child(2n) { border-right: none; }
.crew .role {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(241, 234, 214, 0.55);
}
.crew .name { font-family: var(--font-display); font-weight: 500; font-size: 17px; }

/* ---------- Stills ---------- */
.stills { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 240px; }
.stills .still {
  border-right: 1.5px solid var(--bone);
  border-top: 1.5px solid var(--bone);
  position: relative;
  overflow: hidden;
}
.stills .still:first-child { grid-column: 1; grid-row: span 2; }
.stills .still:nth-child(3n) { border-right: none; }
.stills .still .stripe {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(241, 234, 214, 0.10) 0 14px, transparent 14px 28px);
}
.stills .still.dark .stripe {
  background: repeating-linear-gradient(135deg, rgba(241, 234, 214, 0.06) 0 14px, transparent 14px 28px);
}
.stills .still.rust .stripe {
  background: repeating-linear-gradient(135deg, var(--rust-deep) 0 14px, var(--rust) 14px 28px);
}
.stills .still .meta {
  position: absolute; bottom: 14px; left: 14px;
  background: var(--ink); color: var(--bone);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 8px;
  z-index: 1;
}
.stills .still .glyph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  z-index: 1;
}

/* ---------- Field notes / diary ---------- */
.diary { display: grid; grid-template-columns: 1fr 1fr; }
.diary article {
  padding: 32px;
  border-right: 1.5px solid var(--bone);
  border-top: 1.5px solid var(--bone);
  display: grid; gap: 16px;
}
.diary article:nth-child(-n+2) { border-top: none; }
.diary article:nth-child(2n) { border-right: none; }
.diary .day {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rust);
}
.diary h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; line-height: 1.05; letter-spacing: -0.01em;
  margin: 0;
}
.diary p { font-size: 14px; line-height: 1.55; margin: 0; }
.diary .by {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(241, 234, 214, 0.55);
}

/* ---------- Lore ---------- */
.lore { display: grid; grid-template-columns: 280px 1fr; min-height: 480px; }
.lore .nav {
  border-right: 1.5px solid var(--bone);
  background: rgba(241, 234, 214, 0.04);
  padding: 24px;
  display: grid; gap: 4px; align-content: start;
}
.lore .nav .group {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(241, 234, 214, 0.55); margin: 16px 0 6px;
}
.lore .nav .group:first-child { margin-top: 0; }
/* Entries are <button>s — they swap the panel, they do not navigate.
   Every button default is reset so they read as the list they always were. */
.lore .nav .entry {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(241, 234, 214, 0.78);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.lore .nav .entry:hover,
.lore .nav .entry.active {
  background: rgba(241, 234, 214, 0.06);
  border-left-color: var(--rust);
  color: var(--bone);
}
.lore .nav .entry .id { color: rgba(241, 234, 214, 0.55); font-size: 10px; }
.lore .body { padding: 40px; display: grid; gap: 20px; align-content: start; }
.lore .body .id {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rust);
}
.lore .body h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 0.96; letter-spacing: -0.02em;
  margin: 0;
}
.lore .body p { font-size: 15px; line-height: 1.65; max-width: 64ch; margin: 0 0 14px; }
.lore .body .pullquote {
  font-family: var(--font-display);
  font-weight: 500; font-size: 22px; line-height: 1.3;
  border-left: 3px solid var(--rust);
  padding: 8px 0 8px 20px;
  margin: 12px 0;
  text-wrap: pretty;
}

/* ---------- Themes / layers ---------- */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); }
.theme {
  padding: 32px;
  border-right: 1.5px solid var(--bone);
  display: grid; gap: 16px; align-content: start;
  min-height: 280px;
}
.theme:last-child { border-right: none; }
.theme .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 64px; line-height: 0.85;
  letter-spacing: -0.03em; color: var(--rust);
}
.theme h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; line-height: 1.05;
  letter-spacing: -0.01em; margin: 0;
}
.theme p { font-size: 14px; line-height: 1.55; margin: 0; }

/* ---------- Timeline ---------- */
.timeline { padding: 32px 32px 48px; overflow-x: auto; }
.timeline .track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  min-width: 900px;
}
.timeline .track::before {
  content: ""; position: absolute;
  top: 60px; left: 0; right: 0;
  height: 2px; background: var(--ink);
}
.timeline .stop {
  padding: 12px 14px 0;
  border-left: 1px dashed rgba(241, 234, 214, 0.25);
  position: relative;
}
.timeline .stop:first-child { border-left: none; }
.timeline .stop .date {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(241, 234, 214, 0.55); margin-bottom: 6px;
}
.timeline .stop .pip {
  width: 18px; height: 18px;
  background: rgba(241, 234, 214, 0.06);
  border: 1.5px solid var(--bone);
  margin: 14px 0;
  position: relative; z-index: 1;
}
.timeline .stop.done .pip { background: var(--bone); }
.timeline .stop.active .pip {
  background: var(--rust); border-color: var(--rust);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--rust);
}
.timeline .stop .label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 16px;
  margin-top: 12px;
}
.timeline .stop .desc {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(241, 234, 214, 0.55); margin-top: 4px; line-height: 1.4;
}

/* ---------- Ask SCHEMA ---------- */
.ask-section { display: grid; grid-template-columns: 1fr 1.4fr; min-height: 620px; }
.ask-explain {
  padding: 48px;
  border-right: 1.5px solid var(--bone);
  background: rgba(241, 234, 214, 0.04);
  display: grid;
  align-content: space-between;
  gap: 32px;
}
.ask-explain h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 0.94; letter-spacing: -0.025em;
  margin: 0;
}
.ask-explain h3 em { color: var(--rust); font-style: normal; }
.ask-explain p { font-size: 16px; line-height: 1.55; max-width: 48ch; text-wrap: pretty; }
.ask-explain .tagrow { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-terminal-wrap { padding: 24px; background: var(--ink); display: flex; }
.ask-terminal-wrap > div { flex: 1; }