:root {
  /* Design typography tokens: Fredoka, Nunito Sans, Space Mono** from Google Fonts */
  --brick: #3A241B;
  --clay: #C85F3E;
  --marigold: #F2B84B;
  --cream: #F7E5C1;
  --avocado: #6F8F45;
  --teal: #3F8F86;
  --plum: #4A3248;
  --shadow: 10px 10px 0 var(--brick);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--brick);
  font-family: "Nunito Sans", system-ui, sans-serif;
  background: var(--cream);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(58, 36, 27, .14) 1px, transparent 1.6px) 0 0 / 16px 16px,
    linear-gradient(115deg, rgba(200, 95, 62, .08), transparent 32%, rgba(63, 143, 134, .08) 70%, transparent);
  mix-blend-mode: multiply;
}

.paper-snap {
  position: fixed;
  inset: 50% 50%;
  z-index: 20;
  background: var(--cream);
  border: 8px solid var(--brick);
  transform: translate(-50%, -50%) scale(.05) rotate(-8deg);
  animation: posterSnap 1.05s cubic-bezier(.2, 1.35, .28, 1) forwards;
  pointer-events: none;
}

.edge-tabs {
  position: fixed;
  right: 0;
  top: 16vh;
  z-index: 15;
  display: grid;
  gap: 10px;
}

.tab {
  display: block;
  padding: 10px 13px 10px 18px;
  color: var(--brick);
  background: var(--marigold);
  border: 4px solid var(--brick);
  border-right: 0;
  border-radius: 16px 0 0 16px;
  box-shadow: -4px 4px 0 var(--brick);
  font: 700 12px/1 "Space Mono", monospace;
  text-decoration: none;
  text-transform: uppercase;
  transform: rotate(-2deg) translateX(10px);
  transition: transform .25s ease, background .25s ease;
}

.tab:nth-child(even) { background: var(--teal); transform: rotate(2deg) translateX(10px); }
.tab.active, .tab:hover { transform: rotate(0) translateX(0); background: var(--cream); }

.comic-book { position: relative; z-index: 1; }

.spread {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 54px);
  display: grid;
  gap: 20px;
  background:
    linear-gradient(90deg, transparent 49.2%, rgba(58,36,27,.22) 49.4%, rgba(58,36,27,.22) 50.6%, transparent 50.8%),
    var(--cream);
}

.panel {
  position: relative;
  border: 7px solid var(--brick);
  background: var(--cream);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3vw, 38px);
}

.panel::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(58, 36, 27, .3);
  pointer-events: none;
}

h1, h2, h3 { font-family: "Fredoka", system-ui, sans-serif; margin: 0; line-height: .9; }
h1 { font-size: clamp(72px, 15vw, 210px); letter-spacing: -.07em; }
h1 b { color: var(--clay); }
h1 em { color: var(--teal); font-style: normal; display: inline-block; transform: rotate(-4deg); }
h2 { font-size: clamp(48px, 8vw, 118px); letter-spacing: -.045em; }
h3 { font-size: clamp(25px, 3vw, 42px); }
p { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.28; margin: 14px 0 0; font-weight: 800; }

.ticket-stamp, .item b {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.spread-corner {
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: 1fr 1fr;
  background-color: var(--cream);
}

.masthead-panel { grid-row: 1 / 3; align-self: center; transform: rotate(-1.6deg); background: linear-gradient(135deg, var(--cream) 0 66%, rgba(242,184,75,.45) 66%); }
.corner-store { align-self: end; transform: rotate(2deg); background: var(--clay); color: var(--cream); }
.corner-store h2 { color: var(--marigold); font-size: clamp(34px, 5vw, 68px); }
.corner-store::after { border-color: rgba(247,229,193,.35); }

.wander-ticket, .peel-sticker {
  display: inline-block;
  margin-top: 22px;
  padding: 13px 20px;
  border: 4px solid var(--brick);
  color: var(--brick);
  background: var(--marigold);
  box-shadow: 5px 5px 0 var(--brick);
  font: 700 14px/1 "Space Mono", monospace;
  text-decoration: none;
  text-transform: uppercase;
  transform: rotate(-3deg);
  transition: transform .2s ease;
}
.wander-ticket:hover, .peel-sticker:hover { transform: rotate(1deg) translateY(-4px); }

.awning { display: flex; gap: 0; margin: -38px -38px 24px; border-bottom: 6px solid var(--brick); }
.awning span { height: 38px; flex: 1; background: var(--marigold); border-right: 4px solid var(--brick); border-radius: 0 0 18px 18px; }
.awning span:nth-child(even) { background: var(--cream); }
.crosswalk { height: 66px; margin-top: 20px; background: repeating-linear-gradient(105deg, var(--cream) 0 18px, transparent 18px 36px); border-top: 5px solid var(--brick); }

.bubble, .final-bubble {
  position: absolute;
  max-width: 210px;
  padding: 18px 24px;
  border: 5px solid var(--brick);
  border-radius: 55% 45% 50% 48%;
  background: var(--cream);
  box-shadow: 6px 6px 0 var(--brick);
  font: 700 24px/1 "Fredoka", sans-serif;
}
.bubble::after, .final-bubble::after { content: ""; position: absolute; width: 22px; height: 22px; background: inherit; border-right: 5px solid var(--brick); border-bottom: 5px solid var(--brick); transform: rotate(45deg); bottom: -12px; left: 42px; }
.bubble-one { top: 12%; right: 29%; background: var(--marigold); transform: rotate(9deg); }
.bubble-two { bottom: 17%; left: 34%; background: var(--teal); color: var(--cream); transform: rotate(-8deg); }

.city-icon { position: absolute; border: 5px solid var(--brick); box-shadow: 7px 7px 0 var(--plum); background: var(--marigold); }
.city-icon.stoop { right: 7%; bottom: 10%; width: 140px; height: 120px; transform: skewY(-12deg) rotate(4deg); }
.city-icon.stoop span { position: absolute; inset: 28px 18px; border-top: 14px solid var(--brick); border-bottom: 14px solid var(--brick); background: var(--clay); }
.city-icon.payphone { left: 47%; top: 9%; width: 72px; height: 132px; background: var(--teal); transform: rotate(-7deg); border-radius: 14px 14px 4px 4px; }
.city-icon.payphone span { position: absolute; inset: 18px 15px; border: 4px solid var(--brick); background: var(--cream); border-radius: 50% 50% 6px 6px; }
.burst { position: absolute; right: 14%; top: 42%; width: 88px; height: 88px; display: grid; place-items: center; background: var(--marigold); border: 5px solid var(--brick); clip-path: polygon(50% 0,60% 32%,95% 18%,72% 50%,100% 72%,63% 68%,50% 100%,38% 68%,0 72%,28% 50%,5% 18%,40% 32%); font: 700 60px/1 "Fredoka"; }

.spread-route { grid-template-columns: .72fr 1.28fr; align-items: center; background-color: rgba(242,184,75,.22); }
.route-title { transform: rotate(2.2deg); background: var(--avocado); }
.route-copy { justify-self: end; width: min(500px, 80%); background: var(--cream); transform: rotate(-3deg); }
.map-path { position: relative; min-height: 76vh; border: 7px solid var(--brick); background: radial-gradient(circle at 2px 2px, rgba(58,36,27,.22) 2px, transparent 3px) 0 0/20px 20px, var(--cream); box-shadow: var(--shadow); }
.map-path::before { content: ""; position: absolute; inset: 13% 10%; background: linear-gradient(134deg, transparent 0 16%, var(--avocado) 16% 20%, transparent 20% 36%, var(--avocado) 36% 41%, transparent 41% 56%, var(--avocado) 56% 61%, transparent 61% 76%, var(--avocado) 76% 81%, transparent 81%); filter: drop-shadow(5px 5px 0 var(--brick)); }
.route-note { position: absolute; padding: 13px 16px; border: 4px solid var(--brick); background: var(--marigold); box-shadow: 5px 5px 0 var(--brick); font: 700 12px "Space Mono"; text-transform: uppercase; cursor: pointer; color: var(--brick); }
.route-note.active { background: var(--clay); color: var(--cream); transform: rotate(0) scale(1.08); }
.note-a { left: 8%; top: 15%; transform: rotate(-8deg); }
.note-b { right: 18%; top: 30%; transform: rotate(7deg); }
.note-c { left: 26%; bottom: 30%; transform: rotate(5deg); }
.note-d { right: 9%; bottom: 12%; transform: rotate(-6deg); }
.arrow-strip, .torn-note { position: absolute; border: 5px solid var(--brick); box-shadow: 6px 6px 0 var(--brick); padding: 12px 18px; background: var(--clay); color: var(--cream); font: 700 26px "Fredoka"; }
.arrow-strip { right: 12%; top: 10%; transform: rotate(8deg); }
.torn-note { left: 10%; bottom: 8%; background: var(--teal); transform: rotate(-10deg); }

.spread-inventory { grid-template-columns: .9fr 1.1fr; background-color: rgba(63,143,134,.18); }
.inventory-head { align-self: start; background: var(--marigold); transform: rotate(-2deg); }
.inventory-field { position: relative; min-height: 83vh; }
.item { position: absolute; width: 150px; height: 150px; border: 5px solid var(--brick); background: var(--cream); box-shadow: 8px 8px 0 var(--brick); color: var(--brick); cursor: pointer; transition: transform .25s cubic-bezier(.2,1.5,.4,1); }
.item:hover, .item.active { transform: rotate(0) scale(1.12) !important; background: var(--marigold); }
.item span { display: block; width: 70px; height: 60px; margin: 24px auto 14px; border: 5px solid var(--brick); background: var(--teal); box-shadow: 8px 8px 0 var(--clay); }
.token { left: 2%; top: 10%; border-radius: 50%; transform: rotate(-12deg); }
.token span, .cap span { border-radius: 50%; background: var(--marigold); }
.cassette { right: 17%; top: 7%; transform: rotate(9deg); }
.cassette span { border-radius: 8px; background: linear-gradient(90deg, var(--teal) 0 28%, var(--cream) 28% 72%, var(--teal) 72%); }
.map { left: 34%; top: 34%; transform: rotate(-3deg); }
.map span { clip-path: polygon(0 0,33% 12%,66% 0,100% 12%,100% 100%,66% 88%,33% 100%,0 88%); background: var(--avocado); }
.cap { right: 1%; top: 39%; transform: rotate(13deg); }
.match { left: 11%; bottom: 8%; transform: rotate(7deg); }
.match span { background: var(--clay); }
.pigeon { right: 25%; bottom: 9%; transform: rotate(-9deg); }
.pigeon span { border-radius: 50% 50% 48% 12%; background: var(--teal); }
.item-card { position: absolute; left: 6%; bottom: 10%; width: min(430px, 44vw); background: var(--clay); color: var(--cream); transform: rotate(2deg); }
.item-card::after { border-color: rgba(247,229,193,.4); }

.spread-roof { display: block; background: linear-gradient(180deg, var(--marigold) 0%, var(--cream) 44%, var(--plum) 44% 100%); }
.sunset { position: absolute; width: 42vmin; height: 42vmin; border-radius: 50%; background: var(--clay); border: 7px solid var(--brick); right: 9%; top: 8%; box-shadow: 10px 10px 0 var(--brick); }
.roof-caption { width: min(880px, 76vw); margin-top: 8vh; background: var(--cream); transform: rotate(-2deg); z-index: 2; }
.roof-caption h2 { color: var(--clay); }
.roofline { position: absolute; left: 0; right: 0; bottom: 0; height: 38vh; background: var(--plum); border-top: 8px solid var(--brick); }
.roofline::before { content: ""; position: absolute; left: 5%; right: 5%; top: -60px; height: 60px; background: repeating-linear-gradient(90deg, var(--brick) 0 70px, transparent 70px 112px); }
.water-tower { position: absolute; right: 18%; bottom: 26vh; width: 160px; height: 120px; border: 6px solid var(--brick); border-radius: 50% 50% 14px 14px; background: var(--teal); box-shadow: 9px 9px 0 var(--brick); display: grid; place-items: center; color: var(--cream); font: 700 28px "Fredoka"; }
.water-tower::before, .water-tower::after { content: ""; position: absolute; bottom: -92px; width: 7px; height: 92px; background: var(--brick); }
.water-tower::before { left: 32px; transform: rotate(10deg); }
.water-tower::after { right: 32px; transform: rotate(-10deg); }
.final-bubble { right: 6%; bottom: 38vh; background: var(--marigold); transform: rotate(6deg); }
.peel-sticker { position: absolute; left: 10%; bottom: 12vh; z-index: 3; background: var(--avocado); }

.pop-in { opacity: 0; transform: translateY(30px) rotate(var(--r, 0deg)) scale(.86); animation: bounceEnter .72s cubic-bezier(.17, 1.45, .38, 1) forwards; }
.spread.in-view .pop-in { animation-play-state: running; }
.delay-1 { animation-delay: .18s; }
.delay-2 { animation-delay: .32s; }
.delay-3 { animation-delay: .46s; }
.delay-4 { animation-delay: .6s; }
.delay-5 { animation-delay: .74s; }
.delay-6 { animation-delay: .88s; }

@keyframes posterSnap {
  0% { inset: 50% 50%; opacity: 1; transform: translate(-50%, -50%) scale(.05) rotate(-8deg); }
  70% { inset: 0; opacity: 1; transform: translate(0, 0) scale(1.02) rotate(1deg); }
  100% { inset: 0; opacity: 0; transform: translate(0, 0) scale(1) rotate(0); visibility: hidden; }
}

@keyframes bounceEnter {
  0% { opacity: 0; transform: translateY(34px) rotate(-6deg) scale(.78); }
  68% { opacity: 1; transform: translateY(-9px) rotate(2deg) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (max-width: 850px) {
  .spread, .spread-corner, .spread-route, .spread-inventory { display: block; padding: 24px 48px 24px 20px; }
  .panel, .map-path, .inventory-field { margin: 0 0 24px; }
  .map-path, .inventory-field { min-height: 620px; }
  .masthead-panel, .corner-store, .route-title, .route-copy, .inventory-head, .item-card, .roof-caption { width: auto; transform: none; }
  .bubble-two { left: 8%; }
  .city-icon.payphone { left: 8%; top: 44%; }
  .item-card { position: relative; left: auto; bottom: auto; width: auto; }
  .sunset { right: -8%; }
  .roof-caption { width: auto; }
}