:root {
  /* Interprets “lurch” through staggered movement. */
  --night-asphalt: #0B0B0A;
  --soot-black: #171716;
  --wet-concrete: #30302E;
  --fog-gray: #8D8C86;
  --poster-paper: #D8D3C5;
  --fluorescent-milk: #F2EEE2;
  --ghost-graphite: #B7B2A8;
  --ink-underline: #050505;
  --sidebar: 224px;
  --paper-shadow: 0 28px 60px rgba(5, 5, 5, .56), 0 3px 0 rgba(242, 238, 226, .08) inset;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night-asphalt);
  color: var(--fluorescent-milk);
  font-family: "Source Sans 3", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .28;
  background:
    radial-gradient(circle at 20% 15%, rgba(242, 238, 226, .07), transparent 27%),
    repeating-radial-gradient(circle at 44% 38%, rgba(216, 211, 197, .08) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(242, 238, 226, .05) 1px, transparent 1px),
    linear-gradient(rgba(242, 238, 226, .035) 1px, transparent 1px);
  background-size: auto, 9px 9px, 118px 100%, 100% 132px;
  mix-blend-mode: screen;
}

.startup-veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #050505;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1400ms cubic-bezier(.2, .8, .2, 1);
}

.startup-veil.lifted { opacity: 0; }

.streetlamp {
  position: fixed;
  width: 230px;
  height: 230px;
  margin: -115px 0 0 -115px;
  z-index: 79;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(242, 238, 226, .12), rgba(216, 211, 197, .05) 34%, transparent 68%);
  transform: translate3d(-300px, -300px, 0);
  transition: opacity .5s ease;
  mix-blend-mode: screen;
}

body.pointer-ready .streetlamp { opacity: 1; }

.route-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar);
  z-index: 50;
  padding: 28px 24px 22px 28px;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, .92), rgba(23, 23, 22, .88)),
    repeating-linear-gradient(0deg, rgba(216, 211, 197, .05) 0 1px, transparent 1px 28px);
  border-right: 1px solid rgba(216, 211, 197, .2);
  box-shadow: 18px 0 45px rgba(5, 5, 5, .45);
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
}

.fold-mark {
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(216, 211, 197, .24), transparent);
}

.sidebar-heading { color: var(--poster-paper); margin-bottom: 52px; }
.tiny-kicker, .sign-label {
  display: block;
  color: var(--fog-gray);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  font-size: .75rem;
}
.sidebar-heading strong {
  display: block;
  margin-top: 7px;
  font-family: "Alegreya Sans", Inter, sans-serif;
  font-size: 2rem;
  line-height: .88;
  letter-spacing: .06em;
}

.route-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  position: relative;
  counter-reset: route;
}

.route-list::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 2px;
  height: calc(100% - 18px);
  background: var(--ghost-graphite);
  transform-origin: top;
  transform: scaleY(0);
  filter: drop-shadow(0 0 10px rgba(216, 211, 197, .3));
  transition: transform 1200ms cubic-bezier(.27, .86, .23, 1);
}
.route-list.drawn::before { transform: scaleY(1); }

.route-stop { position: relative; margin: 0 0 38px; transform: translateX(0); transition: transform .5s ease; }
.route-stop:nth-child(2) { margin-left: 8px; }
.route-stop:nth-child(3) { margin-left: -4px; }
.route-stop:nth-child(4) { margin-left: 11px; }
.route-stop::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-underline);
  border: 1px solid var(--poster-paper);
}
.route-stop.active { transform: translateX(7px); }
.route-stop.active::before { background: var(--fluorescent-milk); box-shadow: 0 0 16px rgba(242, 238, 226, .42); }
.route-stop a { color: var(--poster-paper); text-decoration: none; display: grid; gap: 2px; }
.stop-number { color: var(--fog-gray); font-size: .72rem; letter-spacing: .16em; }
.stop-name { width: max-content; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; }
.stop-note { color: var(--fog-gray); font-size: .8rem; }
.sidebar-footer { position: absolute; left: 28px; right: 24px; bottom: 22px; display: grid; gap: 8px; color: var(--fog-gray); font-size: .76rem; letter-spacing: .08em; }

.underline-mark { position: relative; }
.underline-mark::after, .paper-fragment h1::after, .paper-fragment h2::after, .final-stencil h2::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -14px;
  bottom: -.12em;
  height: 4px;
  background: var(--ink-underline);
  transform: scaleX(0) translateY(1px) rotate(-1deg);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(.22, 1, .36, 1) 200ms;
}
.route-stop.active .underline-mark::after, .panel.is-visible .paper-fragment h1::after, .panel.is-visible .paper-fragment h2::after, .panel.is-visible .final-stencil h2::after { transform: scaleX(1.08) translateY(-1px) rotate(-1deg); }

.city-walk { margin-left: var(--sidebar); background: var(--night-asphalt); }
.panel {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 7vw, 92px);
  background: linear-gradient(135deg, var(--night-asphalt), var(--soot-black) 47%, var(--wet-concrete));
  isolation: isolate;
}
.panel::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: radial-gradient(circle at 73% 21%, rgba(242, 238, 226, .11), transparent 22%), radial-gradient(circle at 36% 78%, rgba(216, 211, 197, .06), transparent 28%);
  filter: blur(2px);
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 0 47%, rgba(216, 211, 197, .045) 48%, transparent 49% 100%);
  opacity: .8;
}

.paper-fragment {
  background: linear-gradient(146deg, rgba(242, 238, 226, .94), rgba(216, 211, 197, .86));
  color: var(--soot-black);
  box-shadow: var(--paper-shadow);
  position: relative;
}
.paper-fragment::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background: repeating-radial-gradient(circle at 20% 30%, rgba(5, 5, 5, .35) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

h1, h2 { font-family: "Alegreya Sans", Inter, sans-serif; font-weight: 900; line-height: .86; letter-spacing: .025em; margin: 14px 0 22px; position: relative; width: fit-content; }
h1 { font-size: clamp(4rem, 9vw, 8.7rem); max-width: 780px; }
h2 { font-size: clamp(3.2rem, 7vw, 7rem); max-width: 780px; }
p { font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.45; margin: 0; color: rgba(23, 23, 22, .86); }

.intro-sign { width: min(72vw, 850px); padding: clamp(26px, 4vw, 54px); margin: 6vh 0 0 4vw; transform: rotate(-1deg); opacity: 0; animation: paperUp 1300ms cubic-bezier(.2, .8, .2, 1) .55s forwards; }
.window-grid { position: absolute; right: 8vw; top: 11vh; width: 34vw; height: 52vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; opacity: .28; transform: rotate(.6deg); }
.window-grid span { border: 1px solid rgba(216, 211, 197, .34); background: rgba(242, 238, 226, .055); box-shadow: inset 0 0 30px rgba(216, 211, 197, .04); }
.fog { position: absolute; inset: 5% -20%; background: linear-gradient(90deg, transparent, rgba(242, 238, 226, .09), transparent); filter: blur(18px); animation: fogDrift 18s linear infinite; }
.fog-one { top: 38%; height: 28%; }
.lamppost { position: absolute; right: 15%; bottom: 0; width: 10px; height: 68vh; background: var(--ink-underline); transform: rotate(4deg); box-shadow: -8px 0 0 rgba(216, 211, 197, .06); }
.halo { position: absolute; right: 8%; top: 17%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 238, 226, .18), transparent 64%); }
.street-mark { position: absolute; left: 10vw; bottom: 12vh; color: var(--ghost-graphite); font-family: "IBM Plex Sans Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; border-bottom: 3px solid var(--ghost-graphite); padding-bottom: 5px; transform: rotate(-2deg); }

.panel-underpass { background: linear-gradient(154deg, #050505, var(--night-asphalt) 48%, var(--wet-concrete)); }
.subway-tiles { position: absolute; inset: 0; background-image: linear-gradient(rgba(216, 211, 197, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(216, 211, 197, .08) 1px, transparent 1px); background-size: 92px 52px; opacity: .18; transform: skewY(-2deg); }
.poster-stack { width: min(58vw, 700px); padding: 42px; margin: 12vh 0 0 10vw; transform: rotate(1.1deg); }
.torn-edge { position: absolute; left: 0; top: -10px; right: 0; height: 20px; background: linear-gradient(135deg, transparent 0 9px, rgba(242, 238, 226, .92) 10px 21px, transparent 22px); background-size: 34px 20px; }
.note-strip { position: absolute; padding: 12px 18px; background: rgba(183, 178, 168, .16); border: 1px solid rgba(216, 211, 197, .25); color: var(--poster-paper); font-family: "IBM Plex Sans Condensed", sans-serif; letter-spacing: .08em; }
.note-a { right: 9vw; top: 27vh; transform: rotate(-3deg); }
.note-b { right: 14vw; bottom: 23vh; transform: rotate(2deg); }
.crosswalk { position: absolute; left: 8vw; right: 7vw; bottom: 8vh; height: 86px; display: flex; gap: 34px; transform: rotate(-3deg); opacity: .36; }
.crosswalk span { flex: 1; background: var(--poster-paper); }

.panel-antenna { background: linear-gradient(130deg, var(--soot-black), var(--night-asphalt) 55%, #30302E); }
.roofline { position: absolute; left: 0; right: 0; bottom: 18vh; height: 12px; background: var(--ink-underline); box-shadow: 0 -26px 0 rgba(216, 211, 197, .05); transform: skewY(-2deg); }
.wire { position: absolute; left: 0; right: -10%; height: 2px; background: var(--ghost-graphite); opacity: .45; transform-origin: left; }
.wire-a { top: 22vh; transform: rotate(-4deg); }
.wire-b { top: 30vh; transform: rotate(2deg); }
.antenna-shape { position: absolute; right: 16vw; bottom: 18vh; width: 120px; height: 260px; border-left: 5px solid var(--ghost-graphite); transform: rotate(-5deg); }
.antenna-shape i { position: absolute; left: -42px; width: 90px; height: 3px; background: var(--ghost-graphite); }
.antenna-shape i:nth-child(1) { top: 34px; transform: rotate(22deg); }
.antenna-shape i:nth-child(2) { top: 92px; transform: rotate(-15deg); }
.antenna-shape i:nth-child(3) { top: 151px; transform: rotate(12deg); }
.rooftop-card { width: min(61vw, 760px); padding: 46px; margin: 19vh 0 0 6vw; transform: rotate(-.8deg); }
.apartment-windows { position: absolute; right: 10vw; bottom: 24vh; display: grid; grid-template-columns: repeat(3, 48px); gap: 16px; opacity: .58; }
.apartment-windows span { height: 56px; border: 1px solid rgba(216, 211, 197, .34); background: rgba(216, 211, 197, .06); }
.apartment-windows span:nth-child(2), .apartment-windows span:nth-child(8) { background: rgba(242, 238, 226, .2); }
.code-tape { position: absolute; right: 23vw; top: 20vh; padding: 12px 18px; font-family: "IBM Plex Sans Condensed", sans-serif; transform: rotate(4deg); }

.panel-dawn { background: linear-gradient(180deg, var(--wet-concrete), var(--night-asphalt) 72%); }
.dawn-glow { position: absolute; left: 10%; right: 0; top: 0; height: 42vh; background: radial-gradient(ellipse at center top, rgba(242, 238, 226, .23), transparent 64%); }
.curb-line { position: absolute; left: 8vw; right: 9vw; bottom: 29vh; height: 8px; background: var(--ink-underline); transform: rotate(-1.8deg); }
.utility-cover { position: absolute; left: 12vw; bottom: 12vh; width: 138px; height: 138px; border-radius: 50%; border: 3px solid var(--ghost-graphite); display: grid; place-items: center; color: var(--ghost-graphite); font-family: "IBM Plex Sans Condensed", sans-serif; letter-spacing: .14em; box-shadow: inset 0 0 0 16px rgba(183, 178, 168, .05); }
.final-stencil { position: absolute; left: 18vw; right: 7vw; bottom: 28vh; }
.final-stencil h2 { color: var(--fluorescent-milk); font-size: clamp(6rem, 16vw, 16rem); text-shadow: 0 20px 60px rgba(5, 5, 5, .5); }
.final-stencil h2::after { background: var(--poster-paper); height: 8px; bottom: -.04em; }
.final-stencil p { color: var(--poster-paper); max-width: 640px; margin-left: .8vw; }
.map-folds { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 18%, rgba(242, 238, 226, .07) 18.2%, transparent 18.5% 52%, rgba(242, 238, 226, .05) 52.2%, transparent 52.6%); pointer-events: none; }

.panel:not(.is-visible) .paper-fragment { transform: translateX(-36px) rotate(var(--fragment-tilt, 0deg)); opacity: .55; }
.panel.is-visible .paper-fragment { transition: transform 900ms cubic-bezier(.2, 1.15, .35, 1), opacity 900ms ease; opacity: 1; }

@keyframes paperUp {
  0% { opacity: 0; transform: translateY(20px) translateX(-18px) rotate(-2deg); }
  55% { opacity: 1; transform: translateY(20px) translateX(10px) rotate(-1.2deg); }
  100% { opacity: 1; transform: translateY(0) translateX(0) rotate(-1deg); }
}

@keyframes fogDrift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

@media (max-width: 860px) {
  :root { --sidebar: 0px; }
  .route-sidebar { position: sticky; width: 100%; height: auto; bottom: auto; display: block; padding: 15px 18px; }
  .sidebar-heading, .sidebar-footer { display: none; }
  .route-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-left: 0; }
  .route-list::before, .route-stop::before, .stop-note { display: none; }
  .route-stop, .route-stop:nth-child(n) { margin: 0; }
  .stop-name { font-size: .92rem; }
  .city-walk { margin-left: 0; }
  .panel { padding: 34px 22px; }
  .intro-sign, .poster-stack, .rooftop-card { width: 92%; margin-left: 0; }
  .window-grid, .note-strip, .apartment-windows { opacity: .18; }
  .final-stencil { left: 7vw; bottom: 24vh; }
}