:root {
  /* Design typography cue: Roboto Flex** lettering painted on a corrugated shutter; large kinetic statements. Use width and weight variation so words feel squeezed between buildings. */
  --asphalt-plum: #241821;
  --traffic-violet: #7A3E8E;
  --sunset-ember: #F46A2F;
  --apricot-haze: #FFC06B;
  --brick-red: #8F3F2A;
  --bottle-glass: #2E6B45;
  --chalk-cream: #F4E1B6;
  --deep: 0 24px 80px rgba(36, 24, 33, .55);
  --wdth: 92;
  --wght: 720;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--chalk-cream);
  background: var(--asphalt-plum);
  font-family: "Recursive", ui-monospace, monospace;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 192, 107, .12), transparent 24%),
    radial-gradient(circle at 80% 60%, rgba(122, 62, 142, .16), transparent 28%),
    repeating-linear-gradient(115deg, rgba(244, 225, 182, .035) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
}

.skyline {
  position: fixed;
  inset: 0 0 auto 0;
  height: 100vh;
  overflow: hidden;
  z-index: -3;
  background: linear-gradient(180deg, #F46A2F 0%, #FFC06B 22%, #8F3F2A 50%, #241821 92%);
}

.building {
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, rgba(36, 24, 33, .76), var(--asphalt-plum));
  box-shadow: inset 0 0 0 2px rgba(244, 225, 182, .04);
}
.b1 { left: -4vw; width: 29vw; height: 82vh; clip-path: polygon(0 8%, 70% 0, 100% 100%, 0 100%); }
.b2 { right: -3vw; width: 35vw; height: 92vh; clip-path: polygon(15% 0, 100% 7%, 100% 100%, 0 100%); }
.b3 { left: 32vw; width: 34vw; height: 67vh; opacity: .62; clip-path: polygon(8% 15%, 92% 5%, 100% 100%, 0 100%); }
.wire { position: absolute; height: 3px; background: var(--asphalt-plum); transform-origin: left; opacity: .85; }
.w1 { width: 80vw; left: 6vw; top: 18vh; transform: rotate(-7deg); }
.w2 { width: 92vw; left: 0; top: 32vh; transform: rotate(5deg); }

.route-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500vh;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 8px rgba(244, 225, 182, .28));
}
.chalk-path, .false-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.chalk-path { stroke: var(--chalk-cream); stroke-width: 11; stroke-dasharray: 18 17; }
.false-path { stroke: var(--sunset-ember); stroke-width: 7; stroke-dasharray: 12 20; opacity: .75; }

.alley { position: relative; z-index: 1; }
.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem);
  display: grid;
  align-items: center;
  isolation: isolate;
}
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 105%, rgba(36, 24, 33, .82), transparent 35%);
  z-index: -1;
}

.hero { place-items: center; }
.sunset-haze { position: absolute; inset: 5vh 10vw auto; height: 45vh; background: radial-gradient(circle, rgba(255,192,107,.7), transparent 62%); filter: blur(18px); }
.shutter {
  width: min(1040px, 92vw);
  min-height: 48vh;
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
  display: grid;
  place-items: center;
  text-align: center;
  background:
    repeating-linear-gradient(180deg, rgba(244,225,182,.11) 0 8px, rgba(36,24,33,.14) 8px 21px),
    linear-gradient(135deg, #8F3F2A, #7A3E8E 58%, #241821);
  border: 5px solid rgba(244, 225, 182, .22);
  border-radius: 36px 20px 52px 28px;
  box-shadow: var(--deep), inset 0 -22px 40px rgba(36,24,33,.55);
  transform: rotate(-1.2deg);
}
.wordmark {
  margin: 0;
  font-family: "Roboto Flex", system-ui, sans-serif;
  font-size: clamp(5rem, 18vw, 16rem);
  line-height: .78;
  color: var(--chalk-cream);
  text-shadow: 8px 8px 0 rgba(36,24,33,.45), -3px -3px 0 rgba(244,106,47,.35);
  font-variation-settings: "wdth" var(--wdth), "wght" var(--wght), "opsz" 144;
  letter-spacing: -.09em;
  animation: shutterFlex 4.8s ease-in-out infinite alternate;
}
@keyframes shutterFlex { from { font-variation-settings: "wdth" 72, "wght" 640, "opsz" 144; } to { font-variation-settings: "wdth" 128, "wght" 880, "opsz" 144; } }
.tagline { max-width: 760px; margin: 1.5rem auto 0; font-size: clamp(1.05rem, 2.1vw, 1.55rem); color: var(--apricot-haze); }
.sticker { position: absolute; padding: .55rem .8rem; border-radius: 999px; background: var(--bottle-glass); box-shadow: 0 8px 0 rgba(36,24,33,.38); font-weight: 900; }
.sticker-one { top: 12%; left: 10%; transform: rotate(-18deg); }
.sticker-two { right: 12%; bottom: 16%; background: var(--sunset-ember); transform: rotate(14deg); }
.pipe { position: absolute; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, #241821, #7A3E8E, #241821); opacity: .8; }
.left-pipe { left: 9vw; } .right-pipe { right: 10vw; }

h2 {
  margin: .3rem 0 1rem;
  max-width: 850px;
  font-family: "Roboto Flex", system-ui, sans-serif;
  font-size: clamp(3rem, 8vw, 8.5rem);
  line-height: .88;
  letter-spacing: -.055em;
  font-variation-settings: "wdth" var(--wdth), "wght" var(--wght), "opsz" 112;
}
p { max-width: 680px; font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.55; }
.chapter {
  display: inline-block;
  color: var(--apricot-haze);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 850;
  font-size: clamp(1.1rem, 2.3vw, 2rem);
  font-variation-settings: "SOFT" 75, "WONK" 1;
}

.brick-wall { position: absolute; inset: 5% 5% 0 18%; z-index: -1; background: linear-gradient(rgba(143,63,42,.85), rgba(36,24,33,.9)), repeating-linear-gradient(0deg, transparent 0 40px, rgba(244,225,182,.12) 40px 44px), repeating-linear-gradient(90deg, transparent 0 120px, rgba(36,24,33,.18) 120px 126px); transform: rotate(1deg); border-radius: 44px; }
.poster-stack { display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
.poster, .proof-bill, .signal-box, .banner, .warm-window, .utility-box {
  box-shadow: var(--deep);
  position: relative;
  border: 3px solid rgba(244,225,182,.24);
}
.poster { padding: clamp(1.4rem, 4vw, 3.5rem); background: linear-gradient(135deg, rgba(36,24,33,.94), rgba(143,63,42,.95)); border-radius: 22px 70px 28px 40px; transform: rotate(-2.2deg); }
.proof-bill { padding: 2rem; color: var(--asphalt-plum); background: var(--chalk-cream); border-radius: 18px 12px 52px 9px; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.8; transform: rotate(4deg); }
.proof-bill b { color: var(--sunset-ember); }
.weed { position: absolute; width: 180px; height: 160px; border-left: 8px solid var(--bottle-glass); border-top: 8px solid var(--bottle-glass); border-radius: 100% 0 0 0; bottom: 6vh; left: 12vw; transform: rotate(35deg); }
.signboard, .bottle-cap, .crate, .manhole, .traffic-cone, .goblin-token, .conclusion-shard, .final-charm { position: absolute; z-index: 6; }
.signboard { right: 5vw; top: 16vh; padding: 1rem 1.4rem; background: var(--apricot-haze); color: var(--asphalt-plum); transform: rotate(8deg); font-weight: 900; }
.bottle-cap { left: 8vw; bottom: 18vh; width: 95px; height: 95px; display: grid; place-items: center; border-radius: 50%; background: var(--bottle-glass); color: var(--chalk-cream); font-size: 2rem; }
.crate { left: 11vw; bottom: 9vh; padding: 2rem; background: var(--brick-red); transform: rotate(12deg); font-weight: 900; }
.manhole { right: 18vw; bottom: 8vh; width: 160px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle, #241821 0 10px, #7A3E8E 10px 15px); font-size: 2rem; }

.crosswalk { grid-template-columns: 1fr 1fr; gap: 2rem; background: linear-gradient(180deg, transparent, rgba(36,24,33,.72)); }
.crosswalk-stripes { position: absolute; inset: 18vh 0 auto; display: grid; gap: 28px; transform: rotate(-12deg); opacity: .88; }
.crosswalk-stripes span { display: block; height: 34px; width: 118vw; background: rgba(244,225,182,.6); box-shadow: 0 10px 0 rgba(36,24,33,.35); }
.signal-box { justify-self: end; width: min(680px, 92vw); padding: clamp(1.5rem, 4vw, 3.5rem); background: linear-gradient(145deg, rgba(122,62,142,.96), rgba(36,24,33,.94)); border-radius: 60px 20px 30px 18px; transform: rotate(1.5deg); }
.choice-shard { padding: 1.2rem 1.5rem; font-weight: 950; font-size: clamp(1.4rem, 3vw, 2.8rem); clip-path: polygon(8% 0, 100% 18%, 86% 100%, 0 78%); }
.true-route { left: 10vw; top: 25vh; background: var(--bottle-glass); }
.false-route { left: 24vw; bottom: 20vh; background: var(--traffic-violet); }
.traffic-cone { right: 10vw; bottom: 14vh; width: 0; height: 0; border-left: 58px solid transparent; border-right: 58px solid transparent; border-bottom: 180px solid var(--sunset-ember); color: var(--chalk-cream); font-size: 3rem; font-weight: 900; display: grid; place-items: end center; }
.utility-box { left: 8vw; bottom: 7vh; padding: 1.2rem; background: var(--brick-red); border-radius: 14px; transform: rotate(-4deg); }
.windows { display: grid; grid-template-columns: repeat(2, 58px); gap: 8px; margin-top: .7rem; }
.windows i { display: grid; place-items: center; height: 48px; background: var(--apricot-haze); color: var(--asphalt-plum); font-style: normal; font-weight: 900; animation: blink 2.8s infinite steps(2); }
.windows i:nth-child(2n) { animation-delay: .7s; }
@keyframes blink { 50% { background: var(--traffic-violet); color: var(--chalk-cream); } }

.rooftop { align-items: start; padding-top: 14vh; }
.fire-escape { position: absolute; left: 8vw; top: 8vh; width: 240px; display: grid; gap: 28px; transform: rotate(-2deg); }
.fire-escape span { height: 18px; background: var(--asphalt-plum); border: 2px solid var(--chalk-cream); box-shadow: 0 28px 0 var(--asphalt-plum); }
.banner { margin-left: auto; width: min(830px, 90vw); padding: clamp(1.5rem, 4vw, 3.5rem); background: linear-gradient(140deg, rgba(36,24,33,.96), rgba(122,62,142,.9)); border-radius: 20px 20px 90px 28px; transform: rotate(2.4deg); }
.paradox-puddle { left: 14vw; bottom: 14vh; width: 330px; height: 120px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(ellipse, rgba(122,62,142,.95), rgba(36,24,33,.6)); color: var(--apricot-haze); transform: rotate(-8deg) scaleY(.65); font-family: "Fraunces", Georgia, serif; font-size: 2rem; }
.antenna { position: absolute; top: 18vh; width: 4px; height: 230px; background: var(--chalk-cream); }
.antenna::before, .antenna::after { content: ""; position: absolute; top: 45px; width: 120px; height: 4px; background: var(--chalk-cream); transform-origin: left; }
.antenna::before { transform: rotate(-32deg); } .antenna::after { transform: rotate(38deg); }
.left-antenna { right: 22vw; } .right-antenna { right: 10vw; top: 28vh; }
.goblin-token { right: 16vw; bottom: 18vh; width: 86px; height: 86px; display: grid; place-items: center; border-radius: 20px 50% 40% 50%; background: var(--bottle-glass); font-size: 3rem; }

.conclusion { place-items: center; text-align: center; min-height: 115vh; }
.warm-window { width: min(930px, 92vw); padding: clamp(2rem, 5vw, 5rem); background: radial-gradient(circle at 50% 20%, #FFC06B, #F46A2F 48%, #8F3F2A 74%, #241821); border-radius: 32px; box-shadow: 0 0 80px rgba(255,192,107,.38), var(--deep); }
.warm-window p { margin-left: auto; margin-right: auto; }
.glyph { margin: 2rem auto 0; width: 180px; height: 180px; display: grid; place-items: center; border-radius: 50%; background: rgba(244,225,182,.15); border: 5px dashed var(--chalk-cream); color: var(--chalk-cream); font-family: "Fraunces", Georgia, serif; font-size: 7rem; animation: glyphPulse 2.6s ease-in-out infinite; }
@keyframes glyphPulse { 50% { transform: scale(1.08); box-shadow: 0 0 60px rgba(244,225,182,.5); } }
.conclusion-shard { left: 8vw; top: 22vh; padding: 1.2rem; background: var(--bottle-glass); transform: rotate(-10deg); }
.final-charm { right: 8vw; bottom: 16vh; color: var(--asphalt-plum); background: var(--chalk-cream); padding: 1rem; border-radius: 999px; transform: rotate(9deg); }

.hover-note { cursor: pointer; }
.token-wiggle { transition: transform .28s ease, filter .28s ease; }
.token-wiggle:hover { transform: rotate(0deg) translateY(-8px) scale(1.05); filter: drop-shadow(0 10px 18px rgba(255,192,107,.35)); }
.side-note { position: absolute; left: 30vw; bottom: 23vh; color: var(--chalk-cream); transform: rotate(-9deg); }
.note-bubble { position: fixed; z-index: 30; max-width: 280px; padding: .9rem 1rem; background: var(--chalk-cream); color: var(--asphalt-plum); border: 3px solid var(--sunset-ember); border-radius: 18px 18px 18px 4px; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 18px)) rotate(-2deg); transition: opacity .2s ease; font-weight: 700; }
.note-bubble.show { opacity: 1; }

@media (max-width: 820px) {
  .poster-stack, .crosswalk { grid-template-columns: 1fr; }
  .proof-bill, .signal-box, .banner { width: 100%; justify-self: stretch; }
  .route-map { opacity: .65; }
  .left-pipe, .right-pipe, .antenna { display: none; }
  .paradox-puddle { width: 230px; left: 6vw; }
}