:root {
  /* Typography notes: Roboto Slab** in bold weights; Source Serif 4** for literary civic narration; IBM Plex Mono** sparingly for coordinates. */
  --aged-plaster: #EFE0C2;
  --tea-paper: #CFAE7B;
  --burnt-sepia: #5A341F;
  --oxidized-brick: #9A4F2E;
  --tram-umber: #2D2118;
  --blue-black: #182333;
  --star-gold: #E3A72F;
  --civic-red: #B94B35;
  --display: "Roboto Slab", Georgia, serif;
  --heading: "Bree Serif", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --font-token-a: "Roboto Slab**";
  --font-token-b: "Source Serif 4**";
  --font-token-c: "IBM Plex Mono**";
  --font-token-d: "Roboto Sla* Source Serif 4* IBM Plex Mon*";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--tram-umber);
  background: var(--aged-plaster);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 17%, rgba(227, 167, 47, .26), transparent 21rem),
    radial-gradient(circle at 84% 11%, rgba(185, 75, 53, .14), transparent 19rem),
    linear-gradient(128deg, rgba(239, 224, 194, .96), rgba(207, 174, 123, .54));
  z-index: -3;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 12% 21%, rgba(90,52,31,.08) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(103deg, rgba(90,52,31,.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-17deg, rgba(255,255,255,.13) 0 1px, transparent 1px 11px);
}

.map-bend {
  position: fixed;
  inset: -10vh -10vw;
  z-index: -2;
  background-image:
    radial-gradient(ellipse at var(--mx, 50%) var(--my, 45%), rgba(90, 52, 31, .08), transparent 16rem),
    repeating-linear-gradient(151deg, transparent 0 46px, rgba(90,52,31,.07) 47px, transparent 49px),
    repeating-linear-gradient(29deg, transparent 0 64px, rgba(154,79,46,.055) 65px, transparent 68px);
  transform: rotate(-3deg) scale(1.1);
}

.street-nav {
  position: fixed;
  top: 1.2rem;
  right: 1rem;
  z-index: 20;
  display: grid;
  gap: .45rem;
  transform: rotate(3deg);
}

.plaque, .stamp, .arrow-stamp, .roof-card {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}

.plaque {
  color: var(--aged-plaster);
  text-decoration: none;
  background: var(--blue-black);
  border: 2px solid var(--tea-paper);
  box-shadow: 0 5px 0 rgba(90,52,31,.55);
  padding: .45rem .65rem;
}

.lift {
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

.lift:hover, .lift.is-lifted {
  transform: translateY(-10px) rotate(var(--lift-rot, -1.5deg));
  box-shadow: 0 18px 24px rgba(45,33,24,.25);
}

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.1rem, 5vw, 5rem);
  overflow: hidden;
}

.scene::after {
  content: "";
  position: absolute;
  inset: auto -8vw -5rem -8vw;
  height: 9rem;
  background: var(--tram-umber);
  opacity: .95;
  transform: rotate(-4deg);
  z-index: -1;
  box-shadow: 0 -10px 0 rgba(90,52,31,.13);
}

.opening {
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  background:
    linear-gradient(160deg, rgba(239,224,194,.95), rgba(207,174,123,.7) 62%, rgba(227,167,47,.25)),
    var(--aged-plaster);
}

.sky-stain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 57% 42%, rgba(45,33,24,.13), transparent 19rem),
    radial-gradient(circle at 70% 30%, rgba(227,167,47,.28), transparent 26rem);
}

.street-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-2deg);
}

.draw-line {
  fill: none;
  stroke: var(--burnt-sepia);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  opacity: .72;
  animation: sketch 2.8s ease forwards;
}

.line-two { animation-delay: .35s; stroke: var(--oxidized-brick); }
.line-three { animation-delay: .65s; }
.line-four { animation-delay: .9s; stroke-width: 2; }

@keyframes sketch { to { stroke-dashoffset: 0; } }

.plaza-tile {
  position: absolute;
  width: clamp(17rem, 34vw, 31rem);
  aspect-ratio: 1;
  background:
    linear-gradient(45deg, transparent 48%, rgba(90,52,31,.18) 49%, transparent 51%),
    linear-gradient(135deg, rgba(255,255,255,.22), transparent),
    var(--tea-paper);
  border: 10px double rgba(90,52,31,.55);
  transform: rotate(-14deg) translate(4vw, 7vh);
  box-shadow: inset 0 0 0 9px rgba(239,224,194,.24), 0 30px 45px rgba(45,33,24,.25);
}

.pole-mark, .central-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(5.4rem, 10vw, 8rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 43% 38%, rgba(239,224,194,.13), transparent 17%),
    radial-gradient(circle, var(--blue-black) 0 56%, var(--tram-umber) 57% 100%);
  border: 6px solid rgba(90,52,31,.45);
  transform: translate(-50%, -50%) scale(.15);
  animation: poleAppear 1.35s cubic-bezier(.2,.9,.1,1.2) forwards;
  box-shadow: 0 0 0 0 rgba(227,167,47,.4), inset 0 -10px 8px rgba(0,0,0,.28);
}

@keyframes poleAppear {
  60% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 16px rgba(227,167,47,.15), inset 0 -10px 8px rgba(0,0,0,.28); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 7px rgba(227,167,47,.22), inset 0 -10px 8px rgba(0,0,0,.28); }
}

.crack { position: absolute; background: rgba(90,52,31,.5); transform-origin: left center; height: 2px; }
.crack-a { width: 35%; left: 52%; top: 47%; transform: rotate(28deg); }
.crack-b { width: 22%; left: 36%; top: 56%; transform: rotate(124deg); }
.crack-c { width: 28%; left: 48%; top: 62%; transform: rotate(-39deg); }

.wordmark-sign {
  position: relative;
  z-index: 2;
  width: min(760px, 82vw);
  margin-right: auto;
  padding: clamp(1.4rem, 4vw, 3rem);
  transform: rotate(-5deg) translateY(24px);
  background: rgba(239,224,194,.86);
  border: 3px solid var(--burnt-sepia);
  box-shadow: 10px 10px 0 var(--civic-red), 18px 18px 0 rgba(90,52,31,.2);
  animation: signLift 1.2s ease .65s both;
}

@keyframes signLift { from { opacity: 0; transform: rotate(-9deg) translateY(80px); } }

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: .7rem;
  font-family: var(--display);
  font-size: clamp(3.5rem, 11vw, 10rem);
  line-height: .82;
  letter-spacing: -.075em;
  color: var(--tram-umber);
  text-shadow: 3px 3px 0 rgba(227,167,47,.62);
}

h2 {
  font-family: var(--heading);
  font-size: clamp(2.3rem, 5.4vw, 5.7rem);
  line-height: .92;
  color: var(--burnt-sepia);
}

h3 {
  font-family: var(--heading);
  font-size: 1.45rem;
  color: var(--blue-black);
}

p { font-size: clamp(1.06rem, 1.5vw, 1.35rem); line-height: 1.45; }

.ticket-code {
  margin-bottom: .8rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oxidized-brick);
}

.star-cluster span, .star-pin {
  position: absolute;
  width: .75rem;
  aspect-ratio: 1;
  background: var(--star-gold);
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
  animation: blink 2.7s ease-in-out infinite;
}

@keyframes blink { 50% { opacity: .32; transform: scale(.72) rotate(18deg); } }

.opening-stars span:nth-child(1) { left: 12%; top: 19%; }
.opening-stars span:nth-child(2) { right: 17%; top: 23%; animation-delay: .4s; background: var(--civic-red); }
.opening-stars span:nth-child(3) { right: 29%; top: 59%; animation-delay: .8s; }
.opening-stars span:nth-child(4) { left: 44%; bottom: 20%; animation-delay: 1.2s; background: var(--civic-red); }
.opening-stars span:nth-child(5) { left: 73%; bottom: 13%; animation-delay: 1.7s; }

.arrow-stamp {
  position: absolute;
  right: 10vw;
  bottom: 16vh;
  padding: .9rem 1rem;
  background: var(--star-gold);
  color: var(--tram-umber);
  border: 2px dashed var(--burnt-sepia);
  transform: rotate(10deg);
}

.alleys {
  margin-top: -8vh;
  clip-path: polygon(0 11%, 100% 0, 100% 91%, 0 100%);
  background:
    repeating-linear-gradient(105deg, rgba(90,52,31,.08) 0 2px, transparent 2px 17px),
    linear-gradient(135deg, var(--tea-paper), var(--aged-plaster) 56%, rgba(154,79,46,.24));
  grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
  gap: clamp(1rem, 5vw, 5rem);
}

.diagonal-wall {
  --lift-rot: 1deg;
  padding: clamp(1.3rem, 3.3vw, 3rem);
  background: rgba(239,224,194,.88);
  border-left: 12px solid var(--civic-red);
  border-top: 3px solid var(--burnt-sepia);
  transform: rotate(-7deg);
  box-shadow: -14px 15px 0 rgba(90,52,31,.16);
}

.alley-ink, .roof-panorama, .converging-map {
  width: 100%;
  max-width: 920px;
  filter: drop-shadow(0 12px 0 rgba(90,52,31,.07));
}

.alley-ink { transform: rotate(-9deg); }
.jitter-line path, .roof-lines path, .contours path {
  fill: none;
  stroke: var(--burnt-sepia);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 9;
  animation: inkJitter 3.8s steps(2, end) infinite;
}

@keyframes inkJitter { 50% { transform: translate(.7px, -.9px); opacity: .86; } }

.poster-stack {
  position: absolute;
  right: 7vw;
  bottom: 15vh;
  display: flex;
  gap: 1rem;
  align-items: end;
}

.poster {
  position: relative;
  width: min(18rem, 38vw);
  padding: 1.15rem;
  background: var(--aged-plaster);
  border: 2px solid var(--burnt-sepia);
  transform: rotate(5deg);
  box-shadow: 7px 8px 0 rgba(45,33,24,.22);
}

.poster.red { background: #CFAE7B; transform: rotate(-4deg); }
.poster p { font-size: 1rem; margin-bottom: 0; }
.star-pin { top: -.45rem; right: 1.1rem; }

.roof {
  margin-top: -8vh;
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 86%);
  background:
    radial-gradient(circle at 67% 25%, rgba(24,35,51,.23), transparent 21rem),
    linear-gradient(155deg, var(--blue-black) 0 39%, var(--aged-plaster) 39.2% 100%);
  align-content: center;
}

.roof-label {
  max-width: 680px;
  justify-self: start;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  background: rgba(239,224,194,.92);
  border: 3px solid var(--star-gold);
  transform: rotate(4deg);
  box-shadow: 12px 12px 0 rgba(227,167,47,.28);
}

.roof-panorama {
  margin-top: -2rem;
  transform: rotate(-4deg);
}

.roof-lines path { stroke: var(--tram-umber); stroke-dasharray: none; }
.roof-lines .constellation { stroke: var(--star-gold); stroke-width: 2; stroke-dasharray: 10 13; }
.stars-svg circle { fill: var(--star-gold); animation: blink 3s ease-in-out infinite; }
.stars-svg circle:nth-child(even) { fill: var(--civic-red); animation-delay: .8s; }

.roof-card {
  position: absolute;
  right: 11vw;
  top: 22vh;
  max-width: 260px;
  padding: 1rem;
  background: var(--blue-black);
  color: var(--aged-plaster);
  border: 2px solid var(--star-gold);
  transform: rotate(-8deg);
}

.roof-card strong { display: block; margin-top: .5rem; font-family: var(--heading); font-size: 1.35rem; line-height: 1; }

.civic-map {
  margin-top: -10vh;
  min-height: 108vh;
  background:
    repeating-linear-gradient(-35deg, rgba(185,75,53,.08) 0 2px, transparent 2px 25px),
    var(--aged-plaster);
}

.map-paper {
  position: relative;
  width: min(1120px, 92vw);
  min-height: 76vh;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,167,47,.18), transparent 11rem),
    linear-gradient(120deg, rgba(255,255,255,.3), transparent 45%),
    var(--tea-paper);
  border: 4px solid var(--burnt-sepia);
  clip-path: polygon(3% 5%, 97% 0, 100% 89%, 0 100%);
  transform: rotate(2deg);
  box-shadow: 20px 25px 0 rgba(90,52,31,.16);
  overflow: hidden;
}

.central-seal {
  z-index: 3;
  transform: translate(-50%, -50%) scale(1);
  animation: sealPulse 3s ease-in-out infinite;
}

.central-seal span {
  position: absolute;
  inset: -18px;
  border: 2px dashed var(--star-gold);
  border-radius: 50%;
}

@keyframes sealPulse { 50% { box-shadow: 0 0 0 20px rgba(227,167,47,.13), inset 0 -10px 8px rgba(0,0,0,.28); } }

.converging-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.contours path { stroke: rgba(90,52,31,.74); stroke-width: 3; stroke-dasharray: 12 14; }

.map-copy {
  position: absolute;
  left: 6%;
  top: 13%;
  max-width: 470px;
  padding: 1.4rem;
  background: rgba(239,224,194,.9);
  border: 2px solid var(--burnt-sepia);
  transform: rotate(-5deg);
}

.map-stamps {
  position: absolute;
  right: 6%;
  bottom: 17%;
  display: grid;
  gap: .7rem;
}

.stamp {
  cursor: pointer;
  padding: .8rem 1rem;
  background: var(--civic-red);
  color: var(--aged-plaster);
  border: 2px solid var(--tram-umber);
  transform: rotate(5deg);
}

.stamp:nth-child(2) { background: var(--blue-black); transform: rotate(-2deg); }
.stamp:nth-child(3) { background: var(--star-gold); color: var(--tram-umber); transform: rotate(7deg); }

.note-readout {
  position: absolute;
  left: 10%;
  bottom: 9%;
  max-width: 390px;
  font-family: var(--mono);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--burnt-sepia);
}

.map-paper.is-leaning { animation: mapLean .55s ease; }
@keyframes mapLean { 50% { transform: rotate(-1deg) scale(1.015); } }

@media (max-width: 820px) {
  .street-nav { grid-template-columns: repeat(4, auto); top: auto; bottom: .7rem; left: .5rem; right: .5rem; justify-content: center; transform: rotate(0); }
  .plaque { padding: .42rem .45rem; font-size: .62rem; }
  .opening, .alleys, .roof, .civic-map { clip-path: none; margin-top: 0; }
  .alleys { grid-template-columns: 1fr; }
  .plaza-tile { opacity: .45; }
  .wordmark-sign { width: 90vw; }
  .poster-stack { position: relative; right: auto; bottom: auto; flex-direction: column; }
  .poster { width: min(22rem, 82vw); }
  .roof-card { position: relative; top: auto; right: auto; margin-top: 1rem; }
  .map-paper { min-height: 92vh; }
  .map-copy { left: 5%; right: 5%; max-width: none; }
  .map-stamps { right: 7%; bottom: 18%; }
}