:root {
  --bg: #080706;
  --ink: #f4efe7;
  --muted: #b8aa98;
  --gold: #c4a06b;
  --gold-dim: rgba(196, 160, 107, 0.35);
  --playbill: #fff200;
  --line: rgba(196, 160, 107, 0.32);
  --gutter: 20px;
  --section-y: 72px;
  --tap: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  overflow-x: hidden;
}
button, a { font: inherit; }
img { max-width: 100%; display: block; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip-link:focus {
  left: 12px;
  z-index: 80;
  background: var(--gold);
  color: #140f0c;
  padding: 8px 14px;
}

.mast {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: calc(8px + var(--safe-top)) var(--gutter) 12px;
  background: linear-gradient(#080706f2, transparent);
  pointer-events: none;
}
.mast > * { pointer-events: auto; }
.mast-mark {
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  color: #e8ddd0;
  min-width: 0;
}
.mast-mark span { color: var(--gold); }
.mast-tickets {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  border: 1px solid var(--gold);
  min-height: var(--tap);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  background: #050404;
}
.hero > img {
  width: 100%;
  height: 100svh;
  height: 100dvh;
  object-fit: cover;
  object-position: center 18%;
  filter: brightness(calc(0.82 - (var(--hero-progress, 0) * 0.42))) saturate(0.9);
  transform: scale(1.04);
  animation: stageWake 5.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.28), transparent 28%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.88) 88%, #080706),
    radial-gradient(circle at 50% 32%, transparent 0 18%, rgba(0,0,0,0.22) 58%, rgba(0,0,0,0.62) 100%);
}
.spotlight-glow {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 34% at 50% 30%, rgba(255,214,151,0.42) 0%, rgba(216,167,105,0.16) 36%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(16px);
  opacity: 0.04;
  animation: spotlightRise 5.6s 350ms ease-out forwards;
}
.hero-copy {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(28px + var(--safe-bottom));
  max-width: 780px;
  animation: rise 1.1s ease both;
}
.eyebrow, .kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 8px;
}
.hero h1, .bridge h2, .section-intro h2, .joan-head h2, .cta h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: 0.9;
  margin: 0.08em 0 0.24em;
}
.hero h1 { font-size: clamp(40px, 12vw, 64px); }
.hero h1 em { font-style: italic; color: #d8b789; }
.dek {
  max-width: 36em;
  font-size: 18px;
  line-height: 1.4;
  color: #e1d8cd;
  margin: 0 0 18px;
}
.scroll-cue {
  margin: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: #c9bcae;
}

@keyframes stageWake {
  from { filter: brightness(0.42) saturate(0.78); transform: scale(1.06); }
  to { filter: brightness(0.82) saturate(0.92); transform: scale(1.02); }
}
@keyframes spotlightRise {
  from { opacity: 0.02; transform: scale(0.9); }
  to { opacity: 0.58; transform: scale(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.bridge, .playbills, .joan, .onset, .timeline, .frames, .cta {
  padding: var(--section-y) var(--gutter);
}
.gold-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: 28px;
}
.bridge-grid, .playbill-lead, .joan-stage, .wig-spin {
  display: grid;
  gap: 28px;
}
.bridge-grid { grid-template-columns: 1fr; }
.bridge h2, .section-intro h2, .cta h2 { font-size: clamp(36px, 11vw, 56px); }
.bridge-copy p, .section-intro p, .joan-head > p, .cta > p, .playbill-meta p, .joan-note p, .wig-copy p {
  color: #cfc4b8;
  font-size: 18px;
  line-height: 1.55;
}
.credit-line {
  color: var(--gold) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px !important;
}

.section-intro { max-width: 820px; margin-bottom: 36px; }
.section-intro h2 { margin-bottom: 12px; }

.playbill-lead {
  grid-template-columns: 1fr;
  margin-bottom: 48px;
}
.playbill-lead img, .playbill-card img, .film-hero img, .wig-frame img, .film-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.playbill-lead figure {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #111;
}
.playbill-lead img { object-position: center 18%; }
.show-dates {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  margin: 16px 0 8px;
}
.playbill-meta h3, .playbill-card h3, .joan-note h3, .wig-copy h3, .duet figcaption strong, .glimpse figcaption strong, .timeline-list h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  margin: 0 0 10px;
}
.playbill-meta h3 { font-size: clamp(40px, 11vw, 64px); line-height: 0.9; }
.show-line { max-width: 420px; }
.show-credits {
  font-size: 15px !important;
  color: #9e9184 !important;
  line-height: 1.45 !important;
}
.show-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.show-actions a, .show-actions button, .play-button {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  min-height: var(--tap);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  cursor: pointer;
}
.play-button { background: var(--gold); color: #14100c; border-color: var(--gold); }

.playbill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.playbill-card { background: #0d0c0b; }
.playbill-card figure {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #111;
}
.playbill-card h3 { font-size: 34px; line-height: 0.92; }
.playbill-card p, .playbill-card .show-dates, .playbill-card h3 { padding-inline: 0; }
.playbill-card .show-actions { padding-bottom: 0; }

.joan { background: linear-gradient(180deg, #0b0909 0%, #17100e 50%, #0b0909 100%); }
.joan-head { max-width: 780px; margin-bottom: 36px; }
.joan-head h2 { font-size: clamp(52px, 16vw, 88px); }
.joan-stage { grid-template-columns: 1fr; }
.film-hero, .wig-frame, .film-wide {
  position: relative;
  border: 0;
  padding: 0;
  background: #050505;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  text-align: left;
  width: 100%;
}
.film-hero { aspect-ratio: 3 / 4; min-height: 0; }
.film-hero img, .wig-frame img, .film-wide img {
  position: absolute;
  inset: 0;
  object-position: center 20%;
  transition: transform 1s;
}
.film-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.88), transparent 58%);
}
.film-play, .wig-frame b {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: var(--tap);
  height: var(--tap);
  min-width: 64px;
  min-height: 64px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  z-index: 2;
}
.film-label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
}
.film-label small, .film-label strong { display: block; }
.film-label small { color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; }
.film-label strong { font-family: "Cormorant Garamond", serif; font-size: clamp(28px, 8vw, 42px); font-weight: 500; }
.joan-note {
  border: 1px solid var(--line);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.chapter-no {
  font-family: "Cormorant Garamond", serif;
  font-size: 64px;
  color: var(--gold);
  margin: 0 0 20px;
}
.joan-note h3 { font-size: 32px; line-height: 0.95; }

.wig-spin { grid-template-columns: 1fr; margin-top: 48px; }
.wig-copy { border: 1px solid var(--line); padding: 28px 22px; background: #0c0a09; }
.wig-copy h3 { font-size: 36px; line-height: 0.95; }
.wig-frame { aspect-ratio: 3 / 4; min-height: 0; }
.spin-ring {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(196,160,107,0.65);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spin 14s linear infinite;
}
.ring-one { width: 160px; height: 160px; }
.ring-two { width: 240px; height: 240px; animation-direction: reverse; animation-duration: 20s; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.onset { background: #080808; }
.duet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 0 0 56px;
}
.duet figure { margin: 0; }
.glimpse { margin: 0 0 56px; }
.duet img,
.glimpse img {
  width: 100%;
  height: auto;
  display: block;
  background: #050404;
}
.duet figcaption,
.glimpse figcaption { padding: 12px 2px 0; }
.duet figcaption span,
.glimpse figcaption span {
  display: block;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}
.duet figcaption strong,
.glimpse figcaption strong {
  display: block;
  font-size: clamp(24px, 7vw, 34px);
  margin-top: 4px;
  line-height: 1.08;
}
.duet figure[data-image],
.glimpse[data-image] { cursor: zoom-in; }
.onset-film-wrap { display: grid; grid-template-columns: 1fr; gap: 12px; }
.onset-film-wrap:not(:has(.js-video:not([hidden]))) { display: none; }
.joan-stage:not(:has(.js-video:not([hidden]))) { grid-template-columns: 1fr; }
.film-wide { aspect-ratio: 16 / 10; min-height: 0; }

.timeline { background: #0a0908; }
.timeline-track { position: relative; max-width: 920px; margin: 0 auto; padding-left: 28px; }
.timeline-path { display: none; }
.timeline-list { list-style: none; margin: 0; padding: 0; }
.timeline-list li {
  position: relative;
  padding: 0 0 36px 8px;
  opacity: 0.28;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.timeline-list li.visible { opacity: 1; transform: none; }
.timeline-list li:before {
  content: "";
  position: absolute;
  left: -28px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(196,160,107,0.18);
}
.timeline-list time {
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
}
.timeline-list h3 { font-size: 28px; margin: 6px 0 8px; }
.timeline-list p { margin: 0; color: #cfc4b8; max-width: 640px; }

.quote-band {
  padding: 64px var(--gutter);
  text-align: center;
  background: linear-gradient(120deg, #1c1713, #0d0b0a);
  border-block: 1px solid var(--line);
}
.quote-band blockquote {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 8vw, 42px);
  line-height: 1.12;
  margin: 0 auto 14px;
  max-width: 1100px;
}
.quote-band p { color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; }

.frames-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.frames-grid button {
  padding: 0;
  border: 0;
  background: #111;
  overflow: hidden;
  cursor: pointer;
  min-height: var(--tap);
}
.frames-grid img { width: 100%; height: auto; display: block; transition: transform 0.6s; }

.cta {
  text-align: left;
  background: radial-gradient(circle at 50% 0%, #2b2016, #0c0a09 64%);
  padding-bottom: calc(var(--section-y) + var(--safe-bottom));
}
.cta > p { max-width: 680px; margin: 0; }
.ticket-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 28px;
}
.ticket-card {
  padding: 20px;
  border: 1px solid var(--line);
  color: #fff;
  text-decoration: none;
  text-align: left;
  background: rgba(255,255,255,0.02);
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ticket-card.featured {
  background: var(--gold);
  color: #15100d;
  order: -1;
}
.ticket-card span, .ticket-card small { display: block; }
.ticket-card span { letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }
.ticket-card strong { font-family: "Cormorant Garamond", serif; font-size: 40px; font-weight: 500; }

footer {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px var(--gutter) calc(28px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  color: #9e9184;
}
footer b, footer span { display: block; }
footer b { color: #fff; }

dialog {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  background: #0b0a09;
  color: #fff;
  border: 0;
  padding: 0;
}
dialog::backdrop { background: rgba(0,0,0,0.94); }
.modal-close {
  position: absolute;
  z-index: 4;
  right: 8px;
  top: calc(8px + var(--safe-top));
  width: var(--tap);
  height: var(--tap);
  background: #000a;
  color: #fff;
  border: 0;
  font-size: 32px;
  cursor: pointer;
}
.modal-player, .modal-stream {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  background: #000;
  margin-top: 20vh;
}
.modal-image {
  width: 100%;
  height: 100dvh;
  object-fit: contain;
  background: #000;
}

@media (min-width: 700px) {
  :root {
    --gutter: 36px;
    --section-y: 88px;
  }
  body { font-size: 18px; }
  .hero h1 { font-size: clamp(52px, 8vw, 88px); }
  .dek { font-size: 20px; }
  .playbill-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .frames-grid { gap: 12px; }
  .ticket-options { grid-template-columns: 1fr; }
  .ring-one { width: 210px; height: 210px; }
  .ring-two { width: 340px; height: 340px; }
}

@media (min-width: 900px) {
  .ticket-options { grid-template-columns: repeat(3, 1fr); }
  .ticket-card.featured { order: 0; }
  .cta { text-align: center; }
  .cta > p { margin-left: auto; margin-right: auto; }
  .onset-film-wrap { grid-template-columns: 1fr 1fr; }
  .duet {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 12px 22px;
    margin-bottom: 88px;
  }
  .glimpse { margin-bottom: 88px; }
  footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 1080px) {
  :root {
    --gutter: 7vw;
    --section-y: 110px;
  }
  .mast { padding: calc(18px + var(--safe-top)) 4vw 18px; }
  .mast-mark { font-size: 12px; letter-spacing: 0.18em; }
  .hero-copy {
    left: 7vw;
    right: auto;
    bottom: 11vh;
  }
  .hero h1 { font-size: clamp(52px, 8vw, 118px); }
  .dek { font-size: 22px; margin-bottom: 28px; }
  .bridge-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 8vw;
  }
  .bridge h2, .section-intro h2, .cta h2 { font-size: clamp(42px, 5.6vw, 84px); }
  .bridge-copy p, .section-intro p, .joan-head > p, .cta > p, .playbill-meta p, .joan-note p, .wig-copy p {
    font-size: 20px;
  }
  .playbill-lead {
    grid-template-columns: 1.35fr 0.75fr;
    align-items: end;
    margin-bottom: 72px;
  }
  .playbill-lead figure { aspect-ratio: auto; min-height: 760px; }
  .playbill-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .playbill-meta h3 { font-size: clamp(48px, 5vw, 78px); }
  .joan-head h2 { font-size: clamp(64px, 9vw, 132px); }
  .joan-stage { grid-template-columns: 1.55fr 0.75fr; }
  .joan-stage:not(:has(.js-video:not([hidden]))) { grid-template-columns: minmax(0, 42rem); }
  .film-hero { aspect-ratio: auto; min-height: 680px; }
  .wig-spin { grid-template-columns: 0.85fr 1.15fr; margin-top: 72px; }
  .wig-frame { aspect-ratio: auto; min-height: 540px; }
  .wig-copy, .joan-note { padding: 40px 32px; }
  .chapter-no { font-size: 84px; margin: 0 0 auto; }
  .joan-note h3 { font-size: 42px; }
  .wig-copy h3 { font-size: 48px; }
  .timeline-path { display: block; }
  .timeline-track { padding-left: 72px; }
  .timeline-path {
    position: absolute;
    left: 18px;
    top: 0;
    height: 100%;
    width: 40px;
    color: var(--gold);
    opacity: 0.85;
  }
  .timeline-list li { padding-bottom: 56px; }
  .timeline-list li:before { left: -62px; width: 11px; height: 11px; }
  .timeline-list h3 { font-size: 34px; }
  .quote-band { padding: 110px 12vw; }
  .quote-band blockquote { font-size: clamp(34px, 4.6vw, 68px); }
  .ticket-card { padding: 28px; }
  .ticket-card strong { font-size: 48px; }
  dialog {
    width: min(1040px, 94vw);
    height: auto;
    max-height: 90vh;
    max-width: 1040px;
    margin: auto;
    border: 1px solid var(--line);
  }
  .modal-close { top: 6px; right: 10px; }
  .modal-player, .modal-stream { margin-top: 0; }
  .modal-image { height: auto; max-height: 88vh; }
}

@media (hover: hover) and (pointer: fine) {
  .film-hero:hover img, .wig-frame:hover img, .film-wide:hover img,
  .frames-grid button:hover img { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .hero > img, .spotlight-glow, .hero-copy, .spin-ring { animation: none; }
  .spotlight-glow { opacity: 0.4; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   v4 additions — ICS15 campaign blocks
   ============================================================ */

.mast-mark .mark-ics15 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--gold);
}

/* --- campaign (15 × 10 story) --- */
.campaign {
  padding: var(--section-y) var(--gutter);
  background: linear-gradient(180deg, #0b0908, #14100c 55%, #0b0908);
  border-block: 1px solid var(--line);
}
.campaign > .kicker { margin-bottom: 18px; }
.campaign-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.campaign-copy h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: 0.9;
  font-size: clamp(42px, 12vw, 72px);
  margin: 0 0 24px;
}
.campaign-copy p { color: #cfc4b8; font-size: 18px; line-height: 1.55; max-width: 620px; }
.lockup {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  margin: 0 0 26px;
  background: rgba(0,0,0,0.25);
}
.lockup-cell {
  flex: 1;
  padding: 18px 12px 14px;
  text-align: center;
}
.lockup-cell + .lockup-cell { border-left: 1px solid var(--line); }
.lockup-cell strong {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(44px, 9vw, 72px);
  line-height: 1;
  color: var(--gold);
}
.lockup-cell span {
  display: block;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: #b8aa98;
}
.campaign-film .film-wide { aspect-ratio: 16 / 10; }

/* --- makers --- */
.makers-block {
  padding: var(--section-y) var(--gutter);
  background: #090807;
}
.makers-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.maker-card {
  border: 1px solid var(--line);
  background: #0d0b0a;
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.maker-head { display: flex; align-items: center; gap: 16px; }
.maker-photo {
  width: 92px;
  height: 92px;
  object-fit: cover;
  object-position: center 24%;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  flex: 0 0 auto;
}
.maker-mono {
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  color: var(--gold);
  background: #16110d;
}
.maker-id h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(30px, 7vw, 40px);
  line-height: 0.95;
  margin: 0 0 6px;
}
.maker-role {
  margin: 0;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.maker-bio { margin: 0; color: #cfc4b8; font-size: 17px; line-height: 1.55; }
.maker-film { aspect-ratio: 16 / 9; }
.coming-soon {
  margin: 0;
  padding: 16px 14px;
  border: 1px dashed var(--gold-dim);
  color: #b8aa98;
  font-size: 15px;
}
.coming-soon span { color: var(--gold); animation: pulse 2.4s ease-in-out infinite; display: inline-block; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* --- chapters --- */
.chapter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chapter-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: #e6ddd2;
  padding: 8px 12px;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  min-height: 36px;
}
.chapter-chip small { color: var(--gold); font-size: 11px; }
.chapter-chip:hover, .chapter-chip.active { border-color: var(--gold); color: #fff; }
.chapter-bar { padding: 14px 16px calc(18px + var(--safe-bottom)); }
.chapter-bar-label {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--gold);
}
.chapter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-video-wrap { position: relative; }

/* --- timeline vignettes --- */
.vignette-chip {
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  min-height: 38px;
}
.vignette-chip:hover { background: var(--gold); color: #14100c; }
.vignette-soon {
  margin: 10px 0 0 !important;
  color: #8d8073 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- capture --- */
.capture {
  padding: var(--section-y) var(--gutter);
  text-align: left;
  background: linear-gradient(120deg, #171210, #0c0a09);
  border-block: 1px solid var(--line);
}
.capture h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: 0.92;
  font-size: clamp(36px, 10vw, 60px);
  margin: 0.08em 0 0.3em;
}
.capture-dek { color: #cfc4b8; max-width: 520px; font-size: 17px; }
.capture-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; max-width: 520px; }
.capture-form input {
  flex: 1 1 240px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0 14px;
  min-height: var(--tap);
  font: inherit;
}
.capture-form button {
  background: var(--gold);
  color: #14100c;
  border: 1px solid var(--gold);
  padding: 0 18px;
  min-height: var(--tap);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  cursor: pointer;
}

/* --- countdown --- */
.countdown { margin: 26px 0 4px; }
.countdown-label {
  margin: 0 0 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
}
.countdown-row { display: inline-flex; gap: 10px; }
.countdown-row span {
  min-width: 76px;
  padding: 12px 10px 10px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.3);
  text-align: center;
}
.countdown-row strong {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
}
.countdown-row small {
  display: block;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  color: #b8aa98;
}

/* --- colophon --- */
.colophon {
  padding: var(--section-y) var(--gutter);
  background: #0a0908;
  border-top: 1px solid var(--line);
}
.colophon h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: 0.92;
  font-size: clamp(34px, 9vw, 56px);
  margin: 0.08em 0 0.5em;
}
.colophon-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.colophon-col h3 {
  margin: 0 0 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
}
.colophon-col p { margin: 0 0 6px; color: #cfc4b8; font-size: 16px; }

/* --- responsive --- */
@media (min-width: 700px) {
  .makers-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .colophon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .campaign-grid { grid-template-columns: 1.05fr 0.95fr; gap: 6vw; align-items: center; }
  .campaign-copy p { font-size: 20px; }
  .maker-card { padding: 36px 32px 40px; }
  .maker-photo { width: 116px; height: 116px; }
  .capture { text-align: center; }
  .capture-dek, .capture-form { margin-left: auto; margin-right: auto; }
  .cta .countdown-row strong { font-size: 46px; }
}

/* campaign: single column when no film is wired yet */
@media (min-width: 1080px) {
  .campaign-grid:not(:has(.campaign-film)) { grid-template-columns: minmax(0, 46rem); }
}