/* =========================================================
   The Road · styles
   Wordless Book palette: gold · dark · red · white · green
   ========================================================= */

:root {
  --night: #0d1017;
  --asphalt: #1c1f26;
  --lane: #f2c94c;
  --sign-green: #006b3f;
  --sign-blue: #1a4f9c;
  --cta: #1f7a35;          /* spiritualformation.info green, darkened for AA contrast */
  --cta-hover: #186229;
  --ink: #1b1d22;
  --paper: #fbfaf6;
  --muted: #5b5f68;

  --gold: #e0b23a;
  --gold-deep: #3a2c08;
  --dark: #0a0b0e;
  --red: #b3202a;
  --red-deep: #4a0a10;
  --white: #fbfaf6;
  --green: #2e8b57;
  --green-deep: #0c3322;

  --font-sign: "Overpass", "Arial Narrow", Arial, sans-serif;
  --font-body: Arial, "Helvetica Neue", system-ui, sans-serif;
  --font-verse: Georgia, "Times New Roman", serif;

  --radius: 12px;
  --gutter: 16px;
  --spine-w: 32px;
}

/* ---------- PHOTO SLOTS ----------------------------------
   Optional Envato photos. Put files in assets/img/ and
   uncomment a line. Leave commented to use the drawn scenes.
   Recommended: 1600px wide JPG/WebP, under 300 KB each.
---------------------------------------------------------- */
:root {
  --photo-hero: none;      /* url("../assets/img/hero-highway-night.jpg") -- also set --hero-scene: none */
  --hero-scene: block;     /* none = hide the drawn night road behind a hero photo */
  --photo-1: none;         /* url("../assets/img/creation-stars.jpg") */
  --photo-2: none;         /* url("../assets/img/road-closed.jpg") */
  --photo-3: none;         /* url("../assets/img/cross-sunset.jpg") */
  --photo-4: none;         /* url("../assets/img/bridge-dawn.jpg") */
  --photo-5: none;         /* url("../assets/img/green-country-road.jpg") */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--night);
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lane); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--lane); color: #000; padding: 10px 14px; border-radius: 6px; font-weight: 700;
}
.skip:focus { left: 8px; }

[hidden] { display: none !important; }
html:not(.js) .js-only { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 22px;
  border-radius: 10px; border: 2px solid transparent;
  font: 800 1rem/1.2 var(--font-sign); letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .15s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--go { background: var(--cta); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.btn--go:hover { background: var(--cta-hover); }
.btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.18); }
.btn--ghost-dark { background: transparent; color: var(--ink); border-color: currentColor; }
.btn--ghost-dark:hover { background: rgba(0,0,0,.06); }
.btn--next { width: 100%; margin-top: 8px; font-size: 1.05rem; text-align: center; }

/* ---------- hero / on-ramp ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; isolation: isolate;
  background: var(--photo-hero) center / cover no-repeat, var(--night);
}
.hero-scene { display: var(--hero-scene); position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,7,12,.15) 0%, rgba(5,7,12,.35) 45%, rgba(5,7,12,.92) 100%);
}
.hero-inner {
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: 18vh var(--gutter) 48px;
}
.eyebrow {
  display: inline-block; margin: 0 0 10px; padding: 4px 10px;
  font: 800 .8rem/1 var(--font-sign); letter-spacing: .14em; text-transform: uppercase;
  background: var(--lane); color: #000; border-radius: 4px;
}
.hero h1 {
  margin: 0 0 12px; font: 900 clamp(2.4rem, 9vw, 4.6rem)/1 var(--font-sign);
  letter-spacing: -.01em; text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.lede { font-size: clamp(1.05rem, 3.6vw, 1.3rem); max-width: 36em; margin: 0 0 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.resume { margin-top: 16px; }
.resume a { color: var(--lane); font-weight: 700; }

.lane { animation: drive 1.1s linear infinite; }
@keyframes drive { to { stroke-dashoffset: -48; } }
.stars circle { animation: twinkle 4s ease-in-out infinite alternate; }
.stars circle:nth-child(3n) { animation-delay: 1.3s; }
.stars circle:nth-child(3n+1) { animation-delay: 2.4s; }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lane, .stars circle { animation: none; }
}

/* ---------- scripture (echoes spiritualformation.info quotes) ---------- */
.scripture { margin: 0 0 20px; position: relative; padding-left: 2.2rem; }
.scripture::before {
  content: "\201C"; position: absolute; left: -.2rem; top: -1.1rem;
  font: 4.5rem/1 var(--font-verse); color: var(--accent, var(--gold)); opacity: .9;
}
.scripture blockquote { margin: 0; }
.scripture blockquote p { margin: 0; font: italic 1.3rem/1.45 var(--font-verse); }
.scripture figcaption { margin-top: 6px; font: 800 .95rem/1.3 var(--font-sign); letter-spacing: .04em; }
.scripture--small blockquote p { font-size: 1.1rem; }
.scripture--hero { padding: 16px 16px 16px 2.6rem; background: rgba(0,0,0,.35); border-radius: var(--radius); backdrop-filter: blur(3px); }
.scripture--hero::before { left: .4rem; top: -.4rem; color: var(--lane); }
.scripture--hero blockquote p { font-size: clamp(1rem, 3.4vw, 1.15rem); }

/* ---------- shared-by banner ---------- */
.shared-by {
  background: var(--lane); color: #111; padding: 14px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center;
  text-align: center; font-weight: 600;
}
.shared-by p { margin: 0; }
.shared-by .btn--ghost-dark { min-height: 40px; padding: 8px 14px; }

/* ---------- route map (sticky) ---------- */
.route {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,16,23,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.route ol {
  list-style: none; margin: 0 auto; padding: 0 8px; max-width: 900px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.route ol::before {               /* the road line joining the dots */
  content: ""; position: absolute; left: 10%; right: 10%; top: 21px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 10px, transparent 10px 18px);
  opacity: .5;
}
.route a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 2px 8px; color: #c9ccd3; text-decoration: none;
  font: 800 .72rem/1.1 var(--font-sign); letter-spacing: .04em; text-transform: uppercase; text-align: center;
}
.route a[aria-current="step"] { color: #fff; }
.route a[aria-current="step"] .dot { transform: scale(1.35); box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--lane); }
.route a.visited .dot::after { content: "✓"; font-size: 10px; line-height: 18px; color: #000; }
.dot {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.8); transition: transform .2s ease, box-shadow .2s ease;
}
.dot--gold { background: var(--gold); }
.dot--dark { background: #000; }
.dot--dark.dot::after, .route a.visited .dot--dark::after { color: #fff; }
.dot--red { background: var(--red); }
.dot--red.dot::after { color: #fff; }
.dot--white { background: #fff; }
.dot--green { background: var(--green); }
@media (min-width: 560px) { .route a { font-size: .82rem; } }

/* ---------- highway + spine ---------- */
.highway { position: relative; }
.spine {
  position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) - 4px); width: var(--spine-w); z-index: 2;
  background:
    linear-gradient(90deg, #e8e3d3 0 3px, transparent 3px calc(100% - 3px), #e8e3d3 calc(100% - 3px)),
    var(--asphalt);
  pointer-events: none;
}
.spine::before {                    /* centre dashes */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px;
  background: repeating-linear-gradient(180deg, var(--lane) 0 22px, transparent 22px 44px);
}
.car {
  position: sticky; top: 50vh; width: 22px; height: 36px; margin: 0 auto;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 44'%3E%3Crect x='2' y='2' width='24' height='40' rx='8' fill='%23f7f5ef'/%3E%3Crect x='5' y='9' width='18' height='9' rx='3' fill='%231c1f26'/%3E%3Crect x='5' y='28' width='18' height='7' rx='3' fill='%231c1f26'/%3E%3Ccircle cx='7' cy='4' r='2' fill='%23ffe08a'/%3E%3Ccircle cx='21' cy='4' r='2' fill='%23ffe08a'/%3E%3C/svg%3E");
  filter: drop-shadow(0 -10px 12px rgba(255,224,138,.55));
}

/* ---------- stops (milestones) ---------- */
.stop {
  position: relative;
  padding: 56px var(--gutter) 64px calc(var(--gutter) + var(--spine-w) + 14px);
  background-size: cover; background-position: center;
  scroll-margin-top: 48px;
}
.stop > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.stop::before {                     /* subtle colour wash over optional photo */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.stop > * { position: relative; z-index: 1; }

.stop--gold  { --accent: var(--gold);  background-color: #17130a; background-image: var(--photo-1); }
.stop--gold::before  { background: radial-gradient(circle at 70% 0%, rgba(224,178,58,.35), transparent 60%), linear-gradient(180deg, rgba(23,19,10,.55), rgba(23,19,10,.9)); }
.stop--dark  { --accent: #8a8f99;      background-color: var(--dark); background-image: var(--photo-2); }
.stop--dark::before  { background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.92)); }
.stop--red   { --accent: #ff6b6b;      background-color: var(--red-deep); background-image: var(--photo-3); }
.stop--red::before   { background: radial-gradient(circle at 30% 10%, rgba(179,32,42,.55), transparent 65%), linear-gradient(180deg, rgba(74,10,16,.6), rgba(40,4,8,.92)); }
.stop--white { --accent: var(--gold);  background-color: #eef0f3; background-image: var(--photo-4); }
.stop--white::before { background: radial-gradient(circle at 50% 0%, #fff, rgba(255,255,255,.75) 70%); }
.stop--green { --accent: #7bd8a0;      background-color: var(--green-deep); background-image: var(--photo-5); }
.stop--green::before { background: radial-gradient(circle at 70% 0%, rgba(46,139,87,.5), transparent 60%), linear-gradient(180deg, rgba(12,51,34,.6), rgba(8,32,22,.92)); }
.stop--dest  { --accent: var(--lane);  background: var(--night); }

/* ---------- highway sign ---------- */
.sign {
  position: relative; margin-bottom: 28px; padding: 26px 22px 20px;
  background: var(--sign-green); color: #fff; border-radius: 14px;
  box-shadow: inset 0 0 0 4px var(--sign-green), inset 0 0 0 7px #fff, 0 14px 30px rgba(0,0,0,.35);
  text-align: center;
}
.sign--warn { background: #111; box-shadow: inset 0 0 0 4px #111, inset 0 0 0 7px var(--lane), 0 14px 30px rgba(0,0,0,.45); }
.sign--warn .sign-tab { background: #111; border-color: var(--lane); color: var(--lane); }
.sign--blue { background: var(--sign-blue); box-shadow: inset 0 0 0 4px var(--sign-blue), inset 0 0 0 7px #fff, 0 14px 30px rgba(0,0,0,.35); }
.sign--blue .sign-tab { background: var(--sign-blue); }
.sign-tab {
  position: absolute; top: -18px; right: 18px; padding: 6px 12px;
  background: var(--sign-green); border: 3px solid #fff; border-radius: 8px;
  font: 900 .9rem/1 var(--font-sign); letter-spacing: .08em;
}
.sign-title { margin: 0; font: 900 clamp(2rem, 8vw, 3.2rem)/1.05 var(--font-sign); letter-spacing: .01em; }
.sign-sub { margin: 6px 0 0; font: 700 clamp(1rem, 3.8vw, 1.2rem)/1.3 var(--font-sign); opacity: .95; }
.stop[data-exit] .sign::after {     /* sign posts */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -26px; height: 26px; z-index: -1;
  background: linear-gradient(90deg, #8a8f99 0 6px, transparent 6px calc(100% - 6px), #8a8f99 calc(100% - 6px));
}

/* ---------- card (echoes .displaybox) ---------- */
.card {
  background: rgba(255,255,255,.93); color: var(--ink);
  border-radius: var(--radius); padding: 24px 18px;
  box-shadow: 0 0 15px rgba(0,0,0,.2), 0 18px 40px rgba(0,0,0,.25);
  border-top: 6px solid var(--accent);
}
.stop--dark .card { border-top-color: #000; }
.stop--white .card { background: #fff; box-shadow: 0 10px 40px rgba(20,30,50,.12); border-top-color: #e6e8ec; }
.card > p, .card li { font-size: 1.05rem; }
.card .scripture::before { color: var(--accent); }
.stop--dark .card .scripture::before { color: #000; }
.stop--red .card .scripture::before { color: var(--red); }
.stop--green .card .scripture::before { color: var(--green); }

.more-signs {
  margin: 4px 0 24px; border-radius: 10px; background: #f2f3f5; padding: 0 16px;
}
.more-signs summary {
  cursor: pointer; padding: 14px 0; font: 800 1rem/1.2 var(--font-sign); list-style: none;
}
.more-signs summary::-webkit-details-marker { display: none; }
.more-signs summary::before { content: "＋ "; }
.more-signs[open] summary::before { content: "－ "; }
.more-signs ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
.more-signs li { margin: 0 0 12px; font-family: var(--font-verse); font-style: italic; }
.more-signs cite { display: block; font: normal 800 .9rem/1.3 var(--font-sign); margin-top: 2px; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }

/* detours (objections) */
.detours-title { margin: 8px 0 12px; font: 900 1.25rem/1.2 var(--font-sign); display: flex; align-items: center; gap: 8px; }
.detour-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  background: #f28c28; color: #000; transform: rotate(45deg); border-radius: 4px; font-size: 1rem;
}
.detour-icon { font-weight: 900; }
.detours { display: grid; gap: 10px; margin-bottom: 24px; }
.detours details {
  border: 2px solid #f0d7bd; border-left: 6px solid #f28c28; border-radius: 10px; background: #fffaf3;
}
.detours summary {
  cursor: pointer; padding: 14px 44px 14px 14px; position: relative; list-style: none;
  font-weight: 700; font-size: 1.02rem; min-height: 48px;
}
.detours summary::-webkit-details-marker { display: none; }
.detours summary::after {
  content: "▾"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  transition: transform .2s ease;
}
.detours details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.detours details p { margin: 0; padding: 0 16px 16px; }

/* pull over and talk */
.talk {
  margin: 0 0 22px; padding: 16px 18px; border-radius: 10px;
  background: #1c1f26; color: #fff; position: relative;
}
.talk-label {
  margin: 0 0 4px; font: 900 .78rem/1 var(--font-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--lane);
}
.talk-label::before { content: "P "; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; background: var(--sign-blue); color: #fff; border-radius: 4px; letter-spacing: 0; }
.talk p:last-child { margin: 0; font-size: 1.08rem; }

/* forgiveness: ABC + response */
.abc { padding-left: 0; list-style: none; counter-reset: abc; margin: 0 0 22px; display: grid; gap: 10px; }
.abc li { counter-increment: abc; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.abc li::before {
  content: counter(abc, upper-alpha); display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--sign-green); color: #fff; font: 900 1.2rem/1 var(--font-sign);
}
.respond {
  margin-top: 8px; padding: 22px 18px; border-radius: var(--radius);
  background: linear-gradient(180deg, #fffdf6, #fff6db); border: 2px solid #f1dc9a;
}
.respond h3 { margin: 0 0 6px; font: 900 1.5rem/1.1 var(--font-sign); }
.prayer {
  margin: 14px 0 18px; padding: 16px 18px; background: #fff; border-radius: 10px;
  border-left: 5px solid var(--gold); font: italic 1.12rem/1.6 var(--font-verse);
}
.prayer p { margin: 0; }
.respond-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.response-msg { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid #e8e2cc; }
.response-msg p { margin: 0 0 8px; }
.response-msg:focus { outline: none; }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-buttons:empty { display: none; }

/* growth: next steps */
.next-steps { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.next-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 12px; background: #eef7f1; border-radius: 10px; }
.step-icon { display: grid; place-items: center; width: 44px; height: 44px; background: #fff; border-radius: 50%; font-size: 1.3rem; }

/* ---------- destination ---------- */
.dest-grid { display: grid; gap: 18px; border-top-color: var(--lane); }
.dest-block h3 { margin: 0 0 6px; font: 900 1.3rem/1.15 var(--font-sign); }
.dest-block p { margin: 0 0 10px; }
.dest-block:not([hidden]) + .dest-block { padding-top: 18px; border-top: 1px solid #e3e5ea; }
.link-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.share-status { font-weight: 700; color: var(--cta); }
.sharer-tools summary { cursor: pointer; list-style: none; }
.sharer-tools summary::-webkit-details-marker { display: none; }
.sharer-tools summary h3 { display: inline; }
.sharer-tools summary::after { content: " ▾"; font-weight: 900; }
.sharer-tools[open] summary::after { content: " ▴"; }
.sharer-body { margin-top: 10px; }
#link-form { display: grid; gap: 12px; margin: 10px 0 14px; }
#link-form label, .link-out label { display: grid; gap: 4px; font-weight: 700; font-size: .95rem; }
#link-form input, .link-out input {
  font: inherit; font-weight: 400; padding: 12px; min-height: 48px; border: 2px solid #c9ccd3; border-radius: 8px; width: 100%;
}
#link-form input:focus, .link-out input:focus { border-color: var(--cta); outline: none; box-shadow: 0 0 0 3px rgba(31,122,53,.25); }
#link-form .btn { justify-self: start; }

/* ---------- standalone page (share.html) ---------- */
.solo { min-height: 100svh; padding: 48px var(--gutter) 56px; background: radial-gradient(circle at 50% 0%, #1d2a44, var(--night) 70%); }
.solo > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.solo .card { border-top-color: var(--lane); }
.solo .card > p { margin: 0 0 14px; }
.solo .talk { margin: 22px 0 0; }
.link-out { margin: 0 0 8px; display: grid; gap: 8px; }
.form-error { margin: 0; color: #b3202a; font-weight: 700; }

/* ---------- invitation with QR code (invite.html) ---------- */
.invite {
  max-width: 520px; padding: 28px 22px 26px; text-align: center;
  background: #fff; color: var(--ink); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.invite .sign { margin: 0 0 22px; text-align: center; }
.invite-lead { margin: 0 0 18px; font-size: 1.15rem; line-height: 1.45; }
.invite-qr { margin: 0 auto 14px; }
.qr-box { width: min(78vw, 300px); aspect-ratio: 1; margin: 0 auto; }
.qr-box svg { display: block; width: 100%; height: 100%; }
.invite-qr figcaption { margin-top: 6px; font: 800 1rem/1.3 var(--font-sign); }
.invite-url { margin: 0; color: #4a4f5a; font-size: .95rem; overflow-wrap: anywhere; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.invite-tip { max-width: 520px; text-align: center; color: rgba(255,255,255,.75); font-size: .9rem; }
@media print {
  @page { margin: 14mm; }
  body, .solo.invite-page { background: #fff !important; min-height: 0; padding: 0; }
  .invite { box-shadow: none; border: 2px solid #000; max-width: 150mm; margin-top: 10mm; }
  .invite .sign { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qr-box { width: 70mm; }
  .invite-actions, .invite-tip { display: none !important; }
}

.policy h2 { margin: 26px 0 8px; font: 900 1.25rem/1.2 var(--font-sign); }
.policy ul { padding-left: 1.2em; }
.policy li { margin-bottom: 8px; }
.policy-date { color: var(--muted); font-weight: 700; }

/* ---------- footer ---------- */
.footer { padding: 32px var(--gutter) 40px; color: #b8bcc6; text-align: center; font-size: .92rem; background: #07090d; }
.footer a { color: #fff; }
.copyright { max-width: 640px; margin: 10px auto 0; font-size: .8rem; opacity: .85; }

/* ---------- larger screens ---------- */
@media (min-width: 760px) {
  :root { --gutter: 32px; --spine-w: 64px; }
  .card { padding: 34px 36px; }
  .sign { padding: 34px 28px 26px; }
  #link-form { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
  #link-form .btn { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .spine { left: calc(50% - 470px); }
  .stop { padding-left: var(--gutter); }
}

/* ---------- reveal on scroll (JS adds .reveal) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

@media print {
  .route, .spine, .hero-scene, .hero-actions, .respond-actions, .sharer-tools, #share-btn { display: none !important; }
  .hero, .stop { background: #fff !important; color: #000; min-height: 0; }
  .hero::after, .stop::before { display: none; }
  .detours details { break-inside: avoid; }
}

/* ---------- bridge illustration (top of each exit; drawn by tools/bridge.py) ---------- */
.bridge {
  margin: 0 auto 26px; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
  aspect-ratio: 5 / 2; background: #0f1522;
}
.bridge svg { display: block; width: 100%; height: 100%; }
.b-person { fill: #14161c; }
.bridge--2 .b-person, .bridge--3 .b-person { fill: #f3e7cf; }
@media print { .bridge { box-shadow: none; } }