/* ==================================================
   THE MERIDIAN — Rail Map page
   Design: dusk navy + burnished bronze, Japanese
   megadev precision, editorial restraint
   ================================================== */

:root {
  /* Palette */
  --ink:        #0b1220;
  --ink-2:      #131c30;
  --ink-3:      #1a2440;
  --line:       #263252;
  --line-2:     #33436b;
  --paper:      #f6f3ec;
  --paper-2:    #eeeadf;
  --mute:       #6b7691;
  --mute-2:     #98a2b8;
  --text:       #e6e9f2;
  --text-dim:   #b8c0d4;

  --bronze:     #c8975a;
  --bronze-2:   #b4844a;
  --bronze-3:   #e2b880;
  --amber:      #f0c987;

  --lit:        #6ee1a6;
  --interview:  #f2c66d;

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --step-1: 0.8125rem;   /* 13px */
  --step-2: 0.9375rem;   /* 15px */
  --step-3: 1rem;        /* 16px */
  --step-4: 1.125rem;    /* 18px */
  --step-5: 1.375rem;    /* 22px */
  --step-6: 1.75rem;     /* 28px */
  --step-7: 2.25rem;     /* 36px */
  --step-8: clamp(2.75rem, 6vw, 4.5rem); /* 44-72 */
  --step-9: clamp(3.5rem, 9vw, 7rem);    /* 56-112 */

  /* Space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem;
  --s-10: 4rem; --s-12: 5rem; --s-16: 7rem; --s-20: 9rem;

  --radius: 4px;
  --radius-lg: 10px;
  --shadow-lg: 0 30px 80px rgba(4,8,20,.35);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-3);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--s-6); }

@media (max-width: 640px) {
  .container { padding: 0 var(--s-5); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,18,32,.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header.scrolled {
  background: rgba(11,18,32,.9);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--paper);
}
.brand-mark { width: 34px; height: 20px; color: var(--bronze-3); }
.brand-word {
  font-family: var(--font-mono);
  letter-spacing: .22em;
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--paper);
}
.site-nav {
  display: flex; align-items: center; gap: var(--s-6);
}
.site-nav a {
  font-size: var(--step-1);
  color: var(--text-dim);
  letter-spacing: .04em;
  transition: color .18s ease;
}
.site-nav a:hover { color: var(--paper); }
.site-nav .nav-cta {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--bronze);
  color: var(--bronze-3);
  border-radius: var(--radius);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 600;
}
.site-nav .nav-cta:hover { background: var(--bronze); color: var(--ink); }
@media (max-width: 720px) {
  /* The old taxonomy nav collapsed behind the nav CTA on small screens. The
     quiet utility nav is the only top-of-page navigation on the front door,
     so it must stay reachable on a phone. */
  .site-nav:not(.site-nav-quiet) a:not(.nav-cta) { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--bronze); color: var(--ink); }
.btn-primary:hover { background: var(--bronze-3); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--bronze); color: var(--bronze-3); }
.btn-block { width: 100%; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}
.hero-figure { position: relative; margin: 0; z-index: 0; }
.hero-figure img { width: 100%; height: auto; display: block; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,18,32,.35) 0%, rgba(11,18,32,0) 18%, rgba(11,18,32,0) 82%, rgba(11,18,32,.55) 100%);
}
.hero-spacer { display: none; }

/* ---------- HERO MINI (bottom-right corner card, low opacity) ---------- */
.hero-mini {
  position: absolute;
  right: clamp(16px, 2.5vw, 40px);
  bottom: clamp(72px, 9vw, 120px);
  z-index: 3;
  width: min(440px, 52vw);
  padding: 22px 26px 20px;
  background: rgba(11,18,32,.42);
  border: 1px solid rgba(226,184,128,.28);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: var(--paper);
  text-align: right;
  transition: background .25s ease, border-color .25s ease;
}
.hero-mini:hover { background: rgba(11,18,32,.6); border-color: rgba(226,184,128,.5); }
.hero-mini-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bronze-3);
}
.hero-mini-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--paper);
  font-variation-settings: "opsz" 144;
}
.hero-mini-tag {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--bronze-3);
}
.hero-mini-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bronze-3);
  border-bottom: 1px solid rgba(226,184,128,.55);
  padding-bottom: 3px;
}
.hero-mini-cta:hover { color: var(--paper); border-bottom-color: var(--paper); }
@media (max-width: 640px) {
  .hero-mini { width: 72vw; bottom: 64px; padding: 16px 18px 14px; }
  .hero-mini-title { font-size: 26px; }
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- HERO MESSAGE BAND (below image, light) ---------- */
.hero-band {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid rgba(11,18,32,.08);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem);
}
.hero-band-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}
.hero-band-copy { max-width: 62ch; }
.hero-band-ctas {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-2);
}
@media (max-width: 820px) {
  .hero-band-inner { grid-template-columns: 1fr; }
  .hero-band-ctas { padding-bottom: 0; }
}
.hero-band .hero-eyebrow { color: var(--bronze-2); }
.hero-band .hero-title { color: var(--ink); }
.hero-band .hero-tagline { color: var(--bronze-2); }
.hero-band .hero-sub { color: #3b4460; }
.hero-band .btn-ghost { border-color: rgba(11,18,32,.35); color: var(--ink); }
.hero-band .btn-ghost:hover { border-color: var(--bronze-2); color: var(--bronze-2); }
.hero-eyebrow {
  font-family: var(--font-mono);
  letter-spacing: .3em;
  font-size: var(--step-1);
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0;
  font-variation-settings: "opsz" 144;
}
.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  margin: var(--s-4) 0 var(--s-3);
}
.hero-sub {
  font-size: var(--step-4);
  max-width: 52ch;
  margin: 0;
}
.hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.hero-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(11,18,32,0), rgba(11,18,32,.75));
  padding: var(--s-5) 0 var(--s-4);
  color: var(--paper-2);
}
.hero-strip-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-strip .dot { color: var(--bronze); }

/* ---------- Section chrome ---------- */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--bronze-3);
  letter-spacing: .28em;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-8);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 0 var(--s-8);
  color: var(--paper);
  max-width: 22ch;
  font-variation-settings: "opsz" 100;
}

/* ---------- The Three ---------- */
.three {
  padding: var(--s-16) 0;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}
.three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 900px) { .three-grid { grid-template-columns: 1fr; } }

.three-card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-7);
  position: relative;
  transition: transform .2s ease, border-color .2s ease;
}
.three-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.three-card-featured {
  background: linear-gradient(180deg, #1a2645 0%, #131c30 100%);
  border-color: var(--bronze);
  box-shadow: 0 20px 60px rgba(200,151,90,.08);
}
.three-num {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .2em;
  color: var(--bronze-3);
  margin-bottom: var(--s-4);
}
.three-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-7);
  margin: 0 0 var(--s-2);
  color: var(--paper);
  letter-spacing: -.01em;
}
.three-price {
  font-family: var(--font-mono);
  font-size: var(--step-5);
  color: var(--bronze-3);
  margin: 0 0 var(--s-4);
  font-weight: 600;
}
.three-price .unit {
  font-size: var(--step-3);
  color: var(--mute-2);
  letter-spacing: .04em;
}
.three-body {
  color: var(--text-dim);
  margin: 0 0 var(--s-5);
  font-size: var(--step-3);
}
.three-meta {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--mute);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
  margin: 0;
}

/* ---------- Continuity ---------- */
.continuity {
  padding: var(--s-16) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.continuity-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-8);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  counter-reset: c;
}
@media (max-width: 780px) { .continuity-list { grid-template-columns: 1fr; } }
.continuity-list li {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.c-num {
  font-family: var(--font-mono);
  color: var(--bronze-3);
  font-size: var(--step-1);
  letter-spacing: .12em;
  min-width: 2ch;
}
.c-label { color: var(--text-dim); font-size: var(--step-3); }
.continuity-rule {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-5);
  color: var(--paper);
  border-left: 3px solid var(--bronze);
  padding-left: var(--s-5);
  max-width: 68ch;
  margin: var(--s-8) 0 0;
  line-height: 1.4;
}

/* ---------- Manifest ---------- */
.manifest { padding: var(--s-16) 0; }
.manifest-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin: 0 0 var(--s-10);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--text-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legend-item { display: inline-flex; align-items: center; gap: var(--s-2); }
.dot-lit, .dot-interview {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
}
.dot-lit { background: var(--lit); box-shadow: 0 0 0 3px rgba(110,225,166,.15); }
.dot-interview { background: var(--interview); box-shadow: 0 0 0 3px rgba(242,198,109,.15); }

.reach-natl, .reach-tx, .reach-city, .reach-tbd {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  padding: 3px 8px;
  border-radius: var(--radius);
  letter-spacing: .08em;
}
.reach-natl { color: var(--paper); background: rgba(200,151,90,.12); border: 1px solid rgba(200,151,90,.35); }
.reach-tx   { color: var(--paper); background: rgba(110,225,166,.10); border: 1px solid rgba(110,225,166,.35); }
.reach-city { color: var(--paper); background: rgba(242,198,109,.10); border: 1px solid rgba(242,198,109,.4); }
.reach-tbd  { color: var(--mute-2); border: 1px dashed var(--line-2); }

.manifest-group-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-6);
  color: var(--paper);
  margin: var(--s-10) 0 var(--s-6);
  letter-spacing: -.01em;
}
.manifest-group-title:first-of-type { margin-top: 0; }

.car-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}

.car-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.car-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.car-lit       { border-left-color: var(--lit); }
.car-interview { border-left-color: var(--interview); background: var(--ink-2); }
.car-flagship {
  background: linear-gradient(160deg, #1a2645 0%, #121a2e 100%);
  box-shadow: 0 24px 60px rgba(200,151,90,.10);
  border-color: rgba(200,151,90,.35);
  border-left-color: var(--bronze);
}
.car-flex { border-left-style: dashed; }

.car-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.car-num { color: var(--bronze-3); }
.car-status { color: var(--text-dim); }
.car-lit .car-status { color: var(--lit); }
.car-interview .car-status { color: var(--interview); }

.car-lane {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-5);
  margin: 0 0 4px;
  color: var(--paper);
  letter-spacing: -.005em;
  line-height: 1.15;
}
.car-op {
  color: var(--text-dim);
  font-size: var(--step-2);
  margin: 0 0 var(--s-4);
}
.car-op .agent { color: var(--mute); font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .06em; }

.car-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-4);
}
.car-meta .fare {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--mute-2);
  letter-spacing: .08em;
}

.car-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--bronze);
  color: var(--bronze-3);
  transition: background .18s ease, color .18s ease;
}
.car-cta:hover { background: var(--bronze); color: var(--ink); }
.cta-alt { border-color: var(--interview); color: var(--interview); }
.cta-alt:hover { background: var(--interview); color: var(--ink); }

/* ---------- Timetable ---------- */
.timetable { padding: var(--s-16) 0; background: var(--ink-2); border-top: 1px solid var(--line); }
.timetable-track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-3);
}
@media (max-width: 900px) { .timetable-track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .timetable-track { grid-template-columns: 1fr; } }
.stop {
  padding: var(--s-5) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--line);
  position: relative;
}
.stop:last-child { border-right: none; }
@media (max-width: 900px) { .stop { border-right: none; border-bottom: 1px solid var(--line); } }
.stop::before {
  content: "";
  position: absolute; top: var(--s-5); right: -5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bronze);
}
.stop:last-child::before { display: none; }
@media (max-width: 900px) { .stop::before { display: none; } }
.stop-time {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--bronze-3);
  font-size: var(--step-1);
  letter-spacing: .1em;
}
.stop-city {
  font-family: var(--font-display);
  color: var(--paper);
  font-size: var(--step-5);
  font-weight: 500;
}
.timetable-note {
  margin-top: var(--s-6);
  color: var(--mute-2);
  font-style: italic;
  max-width: 60ch;
  font-family: var(--font-display);
  font-size: var(--step-4);
}

/* ---------- Library / Board ---------- */
.library { padding: var(--s-16) 0; background: var(--ink); }
.library-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s-10);
  align-items: start;
}
@media (max-width: 900px) { .library-grid { grid-template-columns: 1fr; gap: var(--s-8); } }
.library-lead {
  font-size: var(--step-4);
  color: var(--text-dim);
  max-width: 52ch;
}
.library-bullets {
  padding: 0; margin: var(--s-6) 0 0;
  list-style: none;
}
.library-bullets li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: var(--step-3);
}
.library-bullets li:last-child { border-bottom: 1px solid var(--line); }

.library-form {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-7);
  box-shadow: var(--shadow-lg);
}
.form-eyebrow {
  font-family: var(--font-mono);
  color: var(--bronze-3);
  font-size: var(--step-1);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}
.form-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-6);
  margin: 0 0 var(--s-5);
  color: var(--paper);
}
.form-fields { display: grid; gap: var(--s-4); }
.form-fields label {
  display: grid; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--text-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.form-fields input,
.form-fields select {
  /* Without these the inputs take their intrinsic width, blow past the card,
     and force horizontal scroll on the whole page — worst on a phone. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--step-3);
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .18s ease, background .18s ease;
}
.form-fields input:focus,
.form-fields select:focus {
  outline: none;
  border-color: var(--bronze);
  background: var(--ink-2);
}
/* Virtual-rail clarity, placed where the fare decision happens. */
.form-notice {
  background: rgba(200, 151, 90, .09);   /* bronze wash */
  border-left: 3px solid var(--bronze);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: var(--step-2);
  line-height: 1.55;
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
}
.form-notice strong {
  color: var(--bronze-3);
}
.form-fine {
  color: var(--mute-2);
  font-size: var(--step-1);
  margin: var(--s-2) 0 0;
  text-align: center;
}
.form-thanks {
  padding: var(--s-4) 0;
}
.thanks-title {
  font-family: var(--font-display);
  font-size: var(--step-6);
  color: var(--bronze-3);
  margin: 0 0 var(--s-2);
}

/* ---------- Interview ---------- */
.interview {
  padding: var(--s-16) 0;
  background: linear-gradient(180deg, var(--ink) 0%, #060a15 100%);
  border-top: 1px solid var(--line);
  text-align: center;
}
.interview-inner { max-width: 720px; margin: 0 auto; }
.interview .section-title { margin-left: auto; margin-right: auto; }
.interview-lead {
  color: var(--text-dim);
  font-size: var(--step-4);
  max-width: 56ch;
  margin: 0 auto var(--s-6);
}
.interview-cta { margin: var(--s-6) 0 var(--s-5); }
.interview-fine {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--mute);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: var(--s-10) 0 var(--s-8);
  background: #060a15;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 780px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--s-6); text-align: left; }
}
.footer-brand p { color: var(--mute-2); font-family: var(--font-display); font-style: italic; margin: var(--s-2) 0 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-nav a { font-family: var(--font-mono); font-size: var(--step-1); color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; }
.footer-nav a:hover { color: var(--bronze-3); }
.footer-fine { font-size: var(--step-1); color: var(--mute); line-height: 1.6; }

/* ---------- Motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==================================================
   SANDBOX PASS — HANDOFF #1
   Manifest truth pass, Destinations, Corridor Voice
   Additive only. No existing rules modified.
   ================================================== */

:root { --open: #98a2b8; }

/* ---------- Manifest: split CTAs ---------- */
.car-ctas {
  margin-top: auto;
  display: grid;
  gap: var(--s-2);
}
.car-ctas .car-cta { margin-top: 0; }
.cta-ghost { border-color: var(--line-2); color: var(--text-dim); }
.cta-ghost:hover { background: transparent; border-color: var(--bronze); color: var(--bronze-3); }
.cta-open { border-color: var(--open); color: var(--open); }
.cta-open:hover { background: var(--open); color: var(--ink); }

/* ---------- Manifest: application-open state ---------- */
.dot-open {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--open); box-shadow: 0 0 0 3px rgba(152,162,184,.15);
}
.car-open { border-left-color: var(--open); border-left-style: dashed; }
.car-open .car-status { color: var(--open); }

.manifest-note {
  margin: var(--s-8) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-4);
  color: var(--mute-2);
  max-width: 66ch;
  border-left: 3px solid var(--line-2);
  padding-left: var(--s-5);
}

/* ---------- Destinations ---------- */
.destinations {
  padding: var(--s-16) 0;
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border-top: 1px solid var(--line);
}
.destinations .section-title { max-width: 30ch; }
.dest-lead {
  font-size: var(--step-4);
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0 0 var(--s-10);
}
.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}
.dest-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bronze-2);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, border-color .18s ease;
}
.dest-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.dest-card-featured {
  background: linear-gradient(160deg, #1a2645 0%, #121a2e 100%);
  border-color: rgba(200,151,90,.35);
  border-left-color: var(--bronze);
  box-shadow: 0 24px 60px rgba(200,151,90,.10);
}
.dest-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-3);
}
.dest-label {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze-3);
}
.dest-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-5);
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--paper);
  margin: 0 0 var(--s-3);
}
.dest-body {
  color: var(--text-dim);
  font-size: var(--step-2);
  margin: 0 0 var(--s-4);
}
.dest-note {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  margin: auto 0 0;
}
.dest-ctas { margin-top: auto; display: grid; gap: var(--s-2); }
.dest-ctas .car-cta { margin-top: 0; }
.dest-disclosure {
  margin: var(--s-8) 0 0;
  font-size: var(--step-2);
  color: var(--mute);
  max-width: 78ch;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* ---------- The Voice of the Corridor ---------- */
.voice {
  padding: var(--s-16) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.voice .section-title { max-width: 28ch; }
.voice-lead {
  font-size: var(--step-4);
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0 0 var(--s-8);
}
.voice-cta-block {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bronze);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  max-width: 62ch;
  margin: 0 0 var(--s-10);
}
.voice-formats {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-3);
  margin: var(--s-4) 0 var(--s-3);
}
.voice-consent {
  color: var(--mute-2);
  font-size: var(--step-2);
  margin: 0;
  max-width: 54ch;
}
.voice-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
}
@media (max-width: 780px) { .voice-feed { grid-template-columns: 1fr; gap: var(--s-6); } }
.voice-col-title {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze-3);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.voice-list { list-style: none; padding: 0; margin: 0; }
.voice-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: var(--step-3);
}
.voice-rule {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-5);
  color: var(--paper);
  border-left: 3px solid var(--bronze);
  padding-left: var(--s-5);
  max-width: 68ch;
  margin: var(--s-10) 0 0;
  line-height: 1.4;
}

/* ==================================================
   SANDBOX PASS — HANDOFF #2
   Ticket system, Porter continuity & departure whistle
   Additive only. No existing rules modified.
   ================================================== */

.checkout { padding: var(--s-16) 0; background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%); border-top: 1px solid var(--line); }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: var(--s-10); align-items: start; }
.checkout .section-title { max-width: 15ch; }
.checkout-lead { margin: 0; max-width: 55ch; color: var(--text-dim); font-size: var(--step-4); }
.fare-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: var(--s-7) 0 var(--s-4); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; max-width: 600px; }
.fare-ledger div { padding: var(--s-4); background: var(--ink-3); }
.fare-ledger dt, .ticket-details dt { color: var(--mute-2); font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .08em; text-transform: uppercase; }
.fare-ledger dd { margin: var(--s-2) 0 0; font-family: var(--font-display); font-size: var(--step-5); color: var(--bronze-3); }
.checkout-fare { color: var(--mute-2); font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .08em; text-transform: uppercase; }
.checkout-form { background: var(--ink-3); border: 1px solid rgba(200,151,90,.4); border-radius: var(--radius-lg); padding: var(--s-7); box-shadow: var(--shadow-lg); }
.checkout-form .field-helper { color: var(--mute); font-size: .9em; letter-spacing: 0; text-transform: none; }
.checkout-form input[readonly] { color: var(--mute-2); cursor: not-allowed; }
.ticket-station { padding: var(--s-16) 0; background: var(--ink); border-top: 1px solid var(--line); }
.ticket-empty { max-width: 54ch; border-left: 3px solid var(--line-2); padding: var(--s-4) var(--s-5); color: var(--mute-2); font-family: var(--font-display); font-style: italic; }
.ticket-empty p { margin: 0; }
.ticket-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--s-6); padding: var(--s-7); background: linear-gradient(135deg, #1a2645 0%, var(--ink-2) 62%, #111b30 100%); border: 1px solid rgba(200,151,90,.52); border-left: 4px solid var(--bronze); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.ticket-shell::after { content:""; position:absolute; width: 45px; height: 45px; top: 50%; right: 192px; transform: translateY(-50%); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px rgba(200,151,90,.35); }
.ticket-main { min-width: 0; }
.ticket-kicker, .ticket-status, .ticket-verify p { font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .14em; text-transform: uppercase; }
.ticket-kicker { color: var(--bronze-3); }
.ticket-status { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); color: var(--lit); }
.ticket-status span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(110,225,166,.14); }
.ticket-main h3 { margin: var(--s-4) 0 var(--s-2); color: var(--paper); font-family: var(--font-display); font-size: var(--step-7); font-weight: 500; line-height: 1.05; }
.ticket-service { margin: 0 0 var(--s-5); color: var(--text-dim); }
.ticket-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); margin: 0; }
.ticket-details dd { margin: var(--s-1) 0 0; color: var(--paper); font-size: var(--step-2); overflow-wrap: anywhere; }
.ticket-countdown { margin: var(--s-6) 0 0; color: var(--amber); font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .06em; }
.ticket-verify { align-self: center; position: relative; z-index: 1; padding-left: var(--s-3); text-align: center; }
.ticket-qr { width: 164px; height: 164px; margin: 0 auto; padding: 8px; background: var(--paper); border-radius: var(--radius); }
.ticket-verify p { margin: var(--s-3) 0 0; color: var(--mute-2); line-height: 1.5; letter-spacing: .08em; }
.ticket-verify code { color: var(--bronze-3); font-size: .85em; overflow-wrap: anywhere; }
.ticket-actions, .whistle-controls { grid-column: 1 / -1; position: relative; z-index: 2; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px dashed var(--line-2); }
.ticket-actions .btn, .whistle-controls .btn { padding: 10px 12px; }
.library-offer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); position: relative; z-index: 2; padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--text-dim); font-size: var(--step-2); }
.library-offer button, .whistle-fine button { appearance: none; padding: 0; color: var(--bronze-3); background: transparent; border: 0; font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; }
.library-offer .dismiss-offer { margin-left: auto; color: var(--mute-2); }
.whistle-controls { padding-top: var(--s-5); border-top: 1px dashed var(--line-2); }
.whistle-controls > div { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.quiet-override { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); color: var(--text-dim); font-size: var(--step-2); }
.quiet-override input { accent-color: var(--bronze); }
.whistle-fine { margin: var(--s-4) 0 0; color: var(--mute-2); font-size: var(--step-1); }
.boarding-call { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); padding: var(--s-5); background: rgba(110,225,166,.08); border: 1px solid rgba(110,225,166,.35); border-radius: var(--radius); position: relative; z-index: 2; }
.boarding-call strong { color: var(--lit); font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .18em; text-transform: uppercase; }
.boarding-call p { margin: 0; color: var(--text-dim); flex: 1 1 270px; }
.ticket-boarding { animation: boarding-pulse 1.8s ease-in-out infinite; }
.ticket-void { border-color: #9a6470; border-left-color: #d48392; background: linear-gradient(135deg, #281c2a, var(--ink-2)); }
.ticket-void .ticket-status { color: #f0a9b2; }
.ticket-void .ticket-status span { box-shadow: 0 0 0 3px rgba(240,169,178,.14); }
.porter-continuity { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: center; margin-top: var(--s-8); padding: var(--s-6); background: var(--ink-3); border: 1px solid var(--line); border-left: 3px solid var(--bronze); border-radius: var(--radius-lg); }
.porter-continuity h3 { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--step-6); font-weight: 500; color: var(--paper); }
.porter-continuity p { margin: 0; color: var(--text-dim); }
.porter-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.porter-actions a { padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--text-dim); font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .05em; text-align: center; }
.porter-actions a:hover { border-color: var(--bronze); color: var(--bronze-3); }
.next-move { max-width: 66ch; margin-top: var(--s-5); padding: var(--s-5); border-left: 3px solid var(--line-2); background: rgba(26,36,64,.4); }
.next-move p:last-child { margin: 0; color: var(--text-dim); }
.porter-page { min-height: 100vh; display: grid; place-items: center; padding: var(--s-6); background: radial-gradient(circle at 10% 10%, #1a2645, var(--ink) 58%); }
.porter-panel { width: min(100%, 600px); padding: var(--s-7); background: var(--ink-3); border: 1px solid var(--line); border-left: 3px solid var(--bronze); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.porter-panel .section-title { font-size: var(--step-7); margin-bottom: var(--s-4); }
.porter-note { margin: 0 0 var(--s-6); color: var(--text-dim); font-size: var(--step-2); }
.porter-form { display: grid; gap: var(--s-4); }
.porter-form label { display: grid; gap: var(--s-2); color: var(--text-dim); font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .1em; text-transform: uppercase; }
.porter-form input { width: 100%; padding: 12px 14px; color: var(--paper); background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); font-family: var(--font-mono); letter-spacing: .06em; }
.porter-result { margin-top: var(--s-6); padding: var(--s-5); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); }
.porter-result-label { margin: 0 0 var(--s-4); color: var(--lit); font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .16em; text-transform: uppercase; }
.porter-result dl { display: grid; gap: var(--s-3); margin: 0; }
.porter-result dl div { display:flex; justify-content:space-between; gap:var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.porter-result dl div:last-child { padding-bottom:0; border-bottom:0; }
.porter-result dt { color:var(--mute-2); font-family:var(--font-mono); font-size:var(--step-1); letter-spacing:.08em; text-transform:uppercase; }
.porter-result dd { margin:0; color:var(--paper); text-align:right; }
@keyframes boarding-pulse { 50% { box-shadow: 0 0 0 4px rgba(110,225,166,.1), var(--shadow-lg); border-color: var(--lit); } }
@media (max-width: 760px) {
  .checkout-grid, .porter-continuity { grid-template-columns: 1fr; gap: var(--s-7); }
  .fare-ledger { grid-template-columns: 1fr; }
  .ticket-shell { grid-template-columns: 1fr; padding: var(--s-6); }
  .ticket-shell::after { display:none; }
  .ticket-verify { order: 1; padding: 0; }
  .ticket-main { order: 0; }
  .ticket-actions, .library-offer, .whistle-controls, .boarding-call { order: 2; }
  .ticket-details { grid-template-columns: 1fr; gap: var(--s-3); }
  .ticket-qr { width: 144px; height:144px; }
  .porter-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ticket-boarding { animation: none; } }

/* Ticket buttons use an explicit transparent surface so browser defaults cannot reduce contrast. */
.ticket-shell button.btn { background: transparent; }
.ticket-shell button.btn.btn-primary { background: var(--bronze); }
.ticket-shell button.btn.btn-primary:hover { background: var(--bronze-3); }

/* Keep the boarding pass edge clean at all view sizes. */
.ticket-shell::after { display: none; }

/* ==================================================
   SANDBOX PASS — HANDOFF #2b
   Buy Ticket rename + Rail Pass default fare selector
   Additive only.
   ================================================== */

.fare-choice {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-5);
  display: grid;
  gap: var(--s-3);
}
.fare-choice legend {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-3);
  padding: 0;
  margin-bottom: var(--s-3);
}
.fare-option {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.fare-option:hover { border-color: var(--line-2); }
.fare-option input[type="radio"] { margin-top: 3px; accent-color: var(--bronze); flex: 0 0 auto; }
.fare-option-active {
  border-color: rgba(200,151,90,.55);
  background: linear-gradient(160deg, #1a2645 0%, #121a2e 100%);
}
.fare-option-body { display: block; }
.fare-option-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: 2px;
}
.fare-option-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  color: var(--paper);
}
.fare-option-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bronze);
  border-radius: 3px;
  padding: 2px 6px;
}
.fare-option-price {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-2);
  color: var(--amber);
  margin-bottom: 4px;
}
.fare-option-note {
  display: block;
  font-size: var(--step-2);
  color: var(--text-dim);
  line-height: 1.45;
}

/* ==================================================
   SANDBOX PASS — HANDOFF #2c
   Express buy layer. Additive only.
   ================================================== */

body.express-open { overflow: hidden; }

.express-layer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s-4); }
.express-layer[hidden] { display: none; }
.express-scrim { position: absolute; inset: 0; background: rgba(6,10,20,.78); backdrop-filter: blur(3px); }
.express-panel {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: linear-gradient(165deg, #16203a 0%, #0e1526 100%);
  border: 1px solid rgba(200,151,90,.4);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.express-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; color: var(--mute-2);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.express-close:hover { color: var(--paper); }
.express-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bronze-3); margin: 0 0 6px;
}
.express-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-5); color: var(--paper); margin: 0 0 4px; line-height: 1.15;
}
.express-when {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--text-dim); margin: 0 0 var(--s-5);
}
.express-body { display: grid; gap: var(--s-3); }
.express-pass-note {
  font-size: var(--step-2); color: var(--text); margin: 0 0 var(--s-2);
  padding: var(--s-3); border-radius: var(--radius-sm);
  background: rgba(110,225,166,.09); border: 1px solid rgba(110,225,166,.3);
}
.express-pass-note strong { color: var(--lit); }
.express-form { display: grid; gap: var(--s-2); }
.express-form label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-2);
}
.express-form input {
  width: 100%; padding: 12px 14px;
  background: var(--ink); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px;
}
.express-form input:focus { outline: none; border-color: var(--bronze); }
.express-form .btn-block { margin-top: var(--s-2); }
.express-error { color: #f2a1a1; font-size: var(--step-1); margin: 0; }
.express-alt {
  background: none; border: 0; padding: 4px 0;
  color: var(--mute-2); font-family: var(--font-body); font-size: var(--step-2);
  text-decoration: underline; text-decoration-color: var(--line-2);
  text-underline-offset: 3px; cursor: pointer; justify-self: center;
}
.express-alt:hover { color: var(--amber); }
.express-why, .express-fine {
  font-size: var(--step-1); color: var(--mute); line-height: 1.5; margin: var(--s-3) 0 0;
}
.express-fine strong { color: var(--mute-2); }

.express-banner {
  margin: 0 0 var(--s-4);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(110,225,166,.1);
  border: 1px solid rgba(110,225,166,.32);
  color: var(--lit);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
}
.express-banner[hidden] { display: none; }

/* ==================================================
   SANDBOX PASS — HANDOFF #2d
   Comped fare marks + free-card activation panel.
   Additive only.
   ================================================== */

.fare-struck { color: var(--mute); text-decoration-thickness: 1px; text-decoration-color: var(--bronze-2); }
.ticket-details s { color: var(--mute); }
.three-price .unit { color: var(--lit); }
.checkout-lead strong { color: var(--amber); }
.form-lead { font-size: var(--step-2); color: var(--text-dim); line-height: 1.5; margin: 0 0 var(--s-4); }

.express-deal {
  margin: 0 0 var(--s-2);
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  background: rgba(200,151,90,.1);
  border: 1px solid rgba(200,151,90,.32);
  font-size: var(--step-2);
  color: var(--text);
  line-height: 1.45;
}
.express-deal strong { color: var(--amber); }

.library-earned {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  background: rgba(110,225,166,.09);
  border: 1px solid rgba(110,225,166,.3);
}
.library-earned span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lit);
}
.library-earned code { color: var(--paper); font-family: var(--font-mono); font-size: 13px; }

.earn-panel {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: linear-gradient(165deg, #17213c 0%, #101728 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.earn-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-5); color: var(--paper);
  margin: 4px 0 var(--s-2); line-height: 1.2;
}
.earn-body { font-size: var(--step-2); color: var(--text-dim); line-height: 1.55; margin: 0 0 var(--s-4); }
.earn-body code { color: var(--amber); font-family: var(--font-mono); }

.earn-progress { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.earn-dots { display: flex; gap: 6px; }
.earn-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent;
}
.earn-dot-on { background: var(--lit); border-color: var(--lit); }
.earn-count {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute-2);
}

.earn-form { display: grid; gap: 6px; }
.earn-form label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-2); margin-top: var(--s-2);
}
.earn-form textarea {
  width: 100%; padding: 10px 12px; resize: vertical;
  background: var(--ink); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px; line-height: 1.45;
}
.earn-form textarea:focus { outline: none; border-color: var(--bronze); }
.earn-form textarea::placeholder { color: var(--mute); }
.earn-again { border: 0; padding: 0; margin: var(--s-3) 0 var(--s-2); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.earn-again legend {
  float: left; width: 100%; padding: 0; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-2);
}
.earn-again label {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-family: var(--font-body); font-size: 15px; text-transform: none;
  letter-spacing: 0; color: var(--text);
}
.earn-again input { accent-color: var(--bronze); }
.earn-done {
  padding: var(--s-3); border-radius: var(--radius-sm);
  background: rgba(110,225,166,.09); border: 1px solid rgba(110,225,166,.3);
  color: var(--lit); font-size: var(--step-2); margin: 0;
}


/* ==========================================================
   SANDBOX PASS — HANDOFF #2e
   Library two-tier: open doors vs. active card.
   ========================================================== */
.lib-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-5); }
.lib-tier { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.lib-tier-card { border-top-color: var(--bronze); }
.lib-tier-head { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-2); margin: 0 0 var(--s-3); }
.lib-tier-card .lib-tier-head { color: var(--bronze-3); }
.lib-tier .library-bullets { margin: 0; }
@media (max-width: 720px) { .lib-tiers { grid-template-columns: 1fr; gap: var(--s-4); } }


/* ==========================================================
   SANDBOX PASS — HANDOFF #2f
   Continuity path: label + consequence note per stop.
   ========================================================== */
.continuity-lead {
  color: var(--text-dim); font-size: var(--step-2); line-height: 1.6;
  max-width: 64ch; margin: 0 0 var(--s-6);
}
.c-body { display: flex; flex-direction: column; gap: 4px; }
.c-note { color: var(--mute-2); font-size: var(--step-1); line-height: 1.5; }
.continuity-list li { padding-right: var(--s-6); }
.continuity-rule-2 { color: var(--mute); margin-top: var(--s-3); }
@media (max-width: 860px) { .continuity-list li { padding-right: 0; } }

/* ==========================================================
   SANDBOX PASS — HANDOFF #2h : OPERATOR INTAKE
   Ten-question DIM-style application replacing the mailto:.
   Existing tokens only. No prior rule modified.
   ========================================================== */

.interview-sub {
  max-width: 54ch;
  margin: var(--s-3) auto 0;
  color: var(--text-dim);
  font-size: var(--step-1);
  line-height: 1.6;
}
.interview-mail { color: var(--bronze-3); font-family: 'JetBrains Mono', monospace; font-size: .95em; }
.interview-serves {
  max-width: 62ch;
  margin: var(--s-4) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  color: var(--mute-2);
  font-size: var(--step-1);
  line-height: 1.7;
}
.interview-serves-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  color: var(--mute);
  margin-bottom: 6px;
}

/* ---- modal shell ---- */
.intake-layer { position: fixed; inset: 0; z-index: 95; display: grid; place-items: start center; padding: var(--s-4) var(--s-3); overflow-y: auto; }
.intake-layer[hidden] { display: none; }
.intake-scrim { position: fixed; inset: 0; background: rgba(6,10,20,.82); backdrop-filter: blur(3px); }
.intake-panel {
  position: relative;
  width: min(680px, 100%);
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  margin: auto 0;
}
.intake-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; color: var(--mute);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.intake-close:hover { color: var(--paper); }
.intake-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; color: var(--bronze); margin: 0 0 8px;
}
.intake-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--step-4); line-height: 1.15;
  color: var(--paper); margin: 0 0 var(--s-3);
}
.intake-standfirst {
  color: var(--text-dim); font-size: var(--step-1); line-height: 1.65;
  margin: 0 0 var(--s-5); padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

/* ---- questions ---- */
.intake-form { display: grid; gap: var(--s-5); }
.intake-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.intake-q legend {
  color: var(--paper); font-size: 1.02rem; line-height: 1.45;
  font-weight: 600; padding: 0; margin-bottom: 6px;
}
.intake-n {
  display: inline-block; min-width: 1.5em;
  color: var(--bronze); font-family: 'JetBrains Mono', monospace;
  font-size: .82rem; font-weight: 400;
}
.intake-help {
  color: var(--mute-2); font-size: .875rem; line-height: 1.6;
  margin: 0 0 10px; padding-left: 1.5em;
}
.intake-q > select,
.intake-q > input[type="text"],
.intake-q > input[type="email"],
.intake-q > textarea,
.intake-q input[type="text"]:not(.intake-grid input),
.intake-grid input,
.intake-q textarea {
  width: 100%; box-sizing: border-box;
  background: var(--ink); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 12px; font: inherit; font-size: .95rem;
}
.intake-q textarea { resize: vertical; line-height: 1.6; }
.intake-q select { appearance: none; cursor: pointer; }
.intake-q select:focus,
.intake-q input:focus,
.intake-q textarea:focus { outline: none; border-color: var(--bronze); }
.intake-q input::placeholder,
.intake-q textarea::placeholder { color: var(--mute); }

/* radios and checks */
.intake-radios { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 1.5em; }
.intake-radios-stack { flex-direction: column; }
.intake-radio {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 9px 13px;
  color: var(--text-dim); font-size: .92rem; cursor: pointer;
}
.intake-radio:hover { border-color: var(--line-2); color: var(--text); }
.intake-radio input { accent-color: var(--bronze); margin: 0; flex: none; }
.intake-radio:has(input:checked) { border-color: var(--bronze); color: var(--paper); }
.intake-radios + input[type="text"] { margin-top: 8px; margin-left: 0; }

.intake-checks { display: grid; gap: 8px; margin-left: 1.5em; }
.intake-check {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
  background: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer;
}
.intake-check input { accent-color: var(--bronze); margin: 3px 0 0; flex: none; }
.intake-check:has(input:checked) { border-color: var(--bronze); }
.intake-check strong { display: block; color: var(--paper); font-size: .95rem; font-weight: 600; }
.intake-check em {
  display: block; margin-top: 2px; font-style: normal;
  color: var(--mute-2); font-size: .82rem; line-height: 1.5;
}

/* q10 grid */
.intake-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-left: 1.5em; }
.intake-grid label {
  display: grid; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .68rem; color: var(--mute);
}
.intake-grid label:first-child { grid-column: 1 / -1; }

/* consent + footer */
.intake-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
  padding: var(--s-3); background: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: .875rem; line-height: 1.6; cursor: pointer;
}
.intake-consent input { accent-color: var(--bronze); margin: 3px 0 0; }
.intake-error {
  margin: 0; padding: 11px 13px;
  background: rgba(242,161,161,.08); border: 1px solid rgba(242,161,161,.32);
  border-radius: var(--radius-sm); color: #f2a1a1; font-size: .9rem; line-height: 1.55;
}
.intake-error[hidden] { display: none; }
.intake-fine { margin: 0; color: var(--mute); font-size: .8rem; line-height: 1.6; }
.intake-fine a { color: var(--bronze); }

/* ---- received state ---- */
.intake-done { display: grid; gap: var(--s-4); }
.intake-summary { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.intake-summary > div {
  display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-3);
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.intake-summary dt {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .68rem; color: var(--mute); align-self: center;
}
.intake-summary dd { margin: 0; color: var(--text); font-size: .92rem; line-height: 1.5; }
.intake-summary code { color: var(--amber); font-family: 'JetBrains Mono', monospace; }
.intake-next { margin: 0; color: var(--text-dim); font-size: var(--step-1); line-height: 1.7; }

@media (max-width: 640px) {
  .intake-panel { padding: var(--s-5) var(--s-3) var(--s-4); }
  .intake-help,
  .intake-radios,
  .intake-checks,
  .intake-grid { margin-left: 0; }
  .intake-grid { grid-template-columns: 1fr; }
  .intake-summary > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ==========================================================
   SANDBOX PASS — HANDOFF #2h-fix : QA DEFECTS
   Three real bugs found by the intake audit.
   Additive only. No prior rule modified.
   ========================================================== */

/* BUG 1 — .intake-form declares display:grid, which outranks the
   browser default [hidden]{display:none}. The submitted form stayed
   visible and interactive above the confirmation. Same trap for
   .intake-done and .intake-checks. */
.intake-form[hidden],
.intake-done[hidden],
.intake-checks[hidden],
.intake-radios[hidden],
.intake-grid[hidden] { display: none !important; }

/* BUG 2 — .intake-close and .intake-fine were var(--mute) on --ink-2:
   3.74:1, under WCAG AA. Lift both to --mute-2. */
.intake-close { color: var(--mute-2); }
.intake-fine { color: var(--mute-2); }
.intake-fine strong { color: var(--text-dim); }

/* BUG 3 — .btn-ghost inside the confirmation rendered near-white text
   on a near-white background (1.07:1, effectively invisible).
   Dedicated class, explicit on both properties. */
.intake-done-close {
  background: var(--ink);
  border: 1px solid var(--line-2);
  color: var(--text);
}
.intake-done-close:hover { border-color: var(--bronze); color: var(--bronze-3); background: var(--ink); }

/* Defensive — keep the checkout column from forcing a document-level
   horizontal scroll on the narrowest phones. */
@media (max-width: 420px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .checkout-form { padding: var(--s-5) var(--s-4); }
}

/* ============================================================ fare close
 * The note IS the fare. This panel replaces the card step that never
 * existed, so it has to carry the same weight as the checkout card.
 */
.note-form {
  display: grid;
  gap: var(--s-5);
  max-width: 62ch;
  margin-top: var(--s-7);
  padding: var(--s-7);
  background: var(--ink-3);
  border: 1px solid rgba(200,151,90,.4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.note-form > * { margin: 0; }
.note-form__title { font-family: var(--font-display); font-size: var(--step-6); color: var(--paper); line-height: 1.1; }
.note-form__lede { color: var(--text-dim); font-size: var(--step-3); }
.note-form__kicker { font-family: var(--font-display); font-style: italic; color: var(--bronze-3); font-size: var(--step-3); }
.note-hint { font-family: var(--font-mono); font-size: var(--step-1); color: var(--mute); letter-spacing: .04em; }

.note-group { display: grid; gap: var(--s-3); border: 0; padding: 0; margin: 0; min-width: 0; }
.note-group legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--text-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.note-req, .note-opt { text-transform: none; letter-spacing: .04em; }
.note-req { color: var(--amber); }
.note-opt { color: var(--mute); }

.note-choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* The control stays focusable and screen-reader visible; only paint moves. */
.note-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.note-chip span {
  display: inline-block;
  padding: 9px 14px;
  background: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--step-2);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.note-chip span:hover { border-color: var(--bronze); color: var(--text); }
.note-chip input:checked + span {
  background: rgba(200,151,90,.16);
  border-color: var(--bronze);
  color: var(--bronze-3);
}
.note-chip input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }

.note-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-family: var(--font-mono);
  font-size: var(--step-2);
  color: var(--text-dim);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
.note-check input { width: 16px; height: 16px; min-width: 0; margin: 2px 0 0; accent-color: var(--bronze); }

/* Invalid only after a submit attempt — never scold on first paint. */
.note-form.note-tried .note-group[data-invalid] legend { color: var(--amber); }
.note-form.note-tried .note-group[data-invalid] .note-chip span { border-color: rgba(240,201,135,.55); }

.note-done {
  max-width: 62ch;
  margin-top: var(--s-7);
  padding: var(--s-6) var(--s-7);
  background: rgba(110,225,166,.08);
  border: 1px solid rgba(110,225,166,.3);
  border-left: 3px solid var(--lit);
  border-radius: var(--radius);
}
.note-done h3 { margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: var(--step-6); color: var(--paper); line-height: 1.1; }
.note-done p { margin: 0 0 var(--s-2); color: var(--text-dim); font-size: var(--step-3); }
.note-done p:last-child { margin-bottom: 0; }
.note-done .note-done__library { font-family: var(--font-mono); font-size: var(--step-1); color: var(--lit); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 640px) {
  .note-form { padding: var(--s-5); }
  .note-done { padding: var(--s-5); }
}

/* ------------------------------------------------------- the Conductor
   He appears once the fare is closed, inside the confirmation, to say the
   seat out loud. Quiet by design - he is not the lesson. */
.mr-conductor {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.mr-conductor__greeting {
  color: var(--text-dim);
  font-size: var(--step-1);
  margin: 0 0 var(--s-2);
}
.mr-conductor__seat {
  color: var(--bronze-3);
  font-size: var(--step-3);
  letter-spacing: 0.02em;
  margin: 0 0 var(--s-2);
}
.mr-conductor__line {
  color: var(--text-dim);
  font-size: var(--step-1);
  margin: 0 0 var(--s-2);
}
.mr-conductor__friday {
  color: var(--amber);
  font-size: var(--step-1);
  margin: var(--s-3) 0 0;
}

/* ==================================================
   BOARDING SURFACE (front door)
   One dominant entry, one primary action, one receipt-
   gated secondary. Built from the existing tokens so
   the door and the concourse remain one brand.
   ================================================== */
.board { position: relative; isolation: isolate; }
.board-figure { position: absolute; inset: 0; margin: 0; overflow: hidden; z-index: 0; }
.board-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.board-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,18,32,.94) 0%, rgba(11,18,32,.80) 46%, rgba(11,18,32,.42) 100%),
    linear-gradient(180deg, rgba(11,18,32,.72) 0%, rgba(11,18,32,.30) 40%, rgba(11,18,32,.92) 100%);
}
.board-inner {
  position: relative; z-index: 1;
  min-height: clamp(560px, 88vh, 880px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--s-10); padding-bottom: var(--s-10);
}
.board-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze-3);
  margin: 0 0 var(--s-4);
}
.board-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0 0 var(--s-4);
  max-width: 18ch;
  overflow-wrap: break-word;
}
.board-lucy {
  margin: 0 0 var(--s-7);
  max-width: 46ch;
  color: var(--text);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
}
.board-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.board-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px;
  padding: 0 var(--s-8);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bronze) 0%, var(--bronze-2) 100%);
  color: #121a2c;
  font-family: var(--font-mono);
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 18px 44px rgba(200,151,90,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.board-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 54px rgba(200,151,90,.32); }
.board-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px;
  padding: 0 var(--s-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  background: rgba(11,18,32,.55);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--step-3);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.board-secondary:hover { border-color: var(--bronze); color: var(--amber); }
.board-secondary[hidden] { display: none; }
.board-fine {
  margin: var(--s-5) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .08em;
  color: var(--mute-2);
}

/* Utility nav is deliberately quiet: it must never compete with Board now. */
.site-nav-quiet a { color: var(--mute-2); font-size: var(--step-2); }
.site-nav-quiet a:hover { color: var(--amber); }

@media (max-width: 700px) {
  .board-inner { min-height: 78vh; }
  .board-figure img { object-position: 62% 45%; }
  .board-actions { flex-direction: column; align-items: stretch; }
  .board-primary, .board-secondary { width: 100%; }
  .board-title { max-width: none; }
}

/* Quiet utility nav stays legible and tappable on a phone */
@media (max-width: 700px) {
  .site-nav-quiet { gap: var(--s-3); flex-wrap: nowrap; }
  .site-nav-quiet a { font-size: var(--step-1); padding: 6px 0; white-space: nowrap; }
}