:root {
  --terracotta: #A84E2B;
  --gold: #D6A447;
  --wheat: #F1D8A7;
  --olive: #39412A;
  --ink: #1F1813;
  --rose: #C7795A;
  --bone: #FFF2D8;
  --umber: #4A261B;
  --display: "Nunito Sans", "Arial Rounded MT Bold", "Avenir Next Rounded", Inter, system-ui, sans-serif;
  --editorial: Fraunces, Georgia, "Times New Roman", serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--bone);
  background:
    radial-gradient(circle at 18% 8%, rgba(214, 164, 71, 0.28), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(199, 121, 90, 0.28), transparent 30rem),
    linear-gradient(135deg, var(--terracotta), var(--umber) 58%, var(--ink));
  font-family: var(--display);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.26;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 242, 216, 0.55) 1px, transparent 0),
    linear-gradient(94deg, transparent 0 48%, rgba(31, 24, 19, 0.18) 49% 51%, transparent 52% 100%);
  background-size: 19px 19px, 173px 173px;
  mix-blend-mode: soft-light;
}

.procession { position: relative; z-index: 1; }

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

.scene::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(transparent, rgba(214, 164, 71, 0.7), transparent);
  box-shadow: 0 0 0 1px rgba(31, 24, 19, 0.25), 0 0 32px rgba(214, 164, 71, 0.28);
  z-index: -1;
}

.address-gate {
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 242, 216, 0.2), transparent 21rem),
    linear-gradient(180deg, rgba(31, 24, 19, 0.28), transparent 38%),
    linear-gradient(145deg, var(--terracotta), var(--umber));
}

.masonry-grid {
  position: absolute;
  inset: -4rem;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(31, 24, 19, 0.46) 2px, transparent 2px),
    linear-gradient(90deg, rgba(31, 24, 19, 0.42) 2px, transparent 2px);
  background-size: 7rem 4.5rem;
  transform: rotate(-2deg) scale(1.06);
}

.street-axis {
  position: relative;
  width: min(58rem, 100%);
  min-height: 42rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2.8rem;
}

.proxy-plaque {
  position: relative;
  color: var(--ink);
  text-align: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 0.28rem solid var(--gold);
  border-radius: 2.2rem;
  background:
    linear-gradient(135deg, rgba(255, 242, 216, 0.76), transparent 45%),
    linear-gradient(180deg, var(--bone), var(--wheat));
  box-shadow: 0 1.8rem 0 rgba(31, 24, 19, 0.2), 0 2.6rem 5rem rgba(31, 24, 19, 0.42), inset 0 0 0 0.35rem rgba(168, 78, 43, 0.25);
}

.hero-plaque {
  width: min(50rem, 94vw);
  transform: rotate(-1deg);
}

.plaque-pin {
  position: absolute;
  top: 1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--bone), var(--gold) 48%, var(--umber));
  box-shadow: 0 0 0 3px var(--ink);
}

.pin-left { left: 1.2rem; }
.pin-right { right: 1.2rem; }

.ceremony-label,
.scene-caption span,
.final-seal span {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-size: 0.78rem;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

h1 {
  font-size: clamp(3.2rem, 12vw, 9rem);
  color: var(--ink);
  text-shadow: 0.06em 0.055em 0 var(--rose), 0.1em 0.1em 0 rgba(214, 164, 71, 0.75);
}

h2 { font-size: clamp(2.4rem, 7vw, 6.8rem); }

.plaque-poem,
.section-poem,
.detour-copy p,
.final-seal h2 {
  font-family: var(--editorial);
  font-weight: 700;
}

.plaque-poem {
  margin: 1.4rem auto 0;
  max-width: 38rem;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
}

.route-medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: 13rem;
  height: 13rem;
  padding: 1.5rem;
  border-radius: 50%;
  color: var(--ink);
  text-align: center;
  background: radial-gradient(circle, var(--bone) 0 38%, var(--wheat) 39% 55%, var(--gold) 56% 72%, var(--umber) 73% 100%);
  border: 0.22rem solid var(--ink);
  box-shadow: 0 1.5rem 4rem rgba(31, 24, 19, 0.45), 0 0 3rem rgba(214, 164, 71, 0.52);
  animation: medallionPulse 3.6s ease-in-out infinite;
}

.route-medallion strong { display: block; font-size: 1.4rem; line-height: 1; text-transform: uppercase; }
.route-medallion small { display: block; max-width: 8rem; font-family: var(--editorial); }
.medallion-code { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em; }
.medallion-ring { position: absolute; inset: 0.75rem; border: 2px dashed var(--ink); border-radius: 50%; opacity: 0.65; }

.magnetic-alias {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  min-height: 2.8rem;
  padding: 0.45rem 1rem;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(160deg, var(--wheat), var(--bone));
  border: 3px solid var(--ink);
  border-radius: 999px 999px 999px 1.2rem;
  box-shadow: 0 0.8rem 0 rgba(31, 24, 19, 0.22), inset 0 0 0 3px rgba(214, 164, 71, 0.45);
  animation: aliasDrift 5s ease-in-out infinite;
}

.alias-one { left: 2%; top: 42%; transform: rotate(-8deg); }
.alias-two { right: -2%; top: 34%; transform: rotate(7deg); animation-delay: -1.2s; }
.alias-three { left: 13%; bottom: 15%; transform: rotate(5deg); animation-delay: -2.1s; }
.alias-four { right: 12%; bottom: 13%; transform: rotate(-6deg); animation-delay: -3s; }

.handdrawn-line {
  position: absolute;
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(4px 5px 0 rgba(214, 164, 71, 0.55));
}

.handdrawn-line path {
  stroke-dasharray: 32 18;
  animation: routeTighten 4s ease-in-out infinite;
}

.route-line { width: min(30vw, 22rem); height: 31rem; top: 9%; opacity: 0.62; }
.route-left { left: 4%; }
.route-right { right: 4%; }

.poster-layer {
  position: absolute;
  padding: 1rem 1.4rem;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 950;
  letter-spacing: -0.04em;
  background: linear-gradient(160deg, var(--wheat), var(--rose));
  border: 3px solid var(--ink);
  box-shadow: 0.8rem 0.8rem 0 rgba(31, 24, 19, 0.22);
  opacity: 0.82;
}

.poster-one { left: 5vw; top: 15vh; transform: rotate(-9deg); }
.poster-two { right: 6vw; bottom: 16vh; transform: rotate(8deg); background: linear-gradient(160deg, var(--gold), var(--bone)); }

.curb-geometry {
  position: absolute;
  display: flex;
  gap: 0.55rem;
  z-index: 2;
}

.bottom-tiles { left: 50%; bottom: 1.4rem; transform: translateX(-50%); }
.curb-geometry i {
  display: block;
  width: 2rem;
  height: 2rem;
  background: var(--gold);
  border: 3px solid var(--ink);
  transform: rotate(45deg);
  box-shadow: 0.35rem 0.35rem 0 rgba(31, 24, 19, 0.25);
}
.curb-geometry i:nth-child(even) { background: var(--wheat); transform: rotate(0deg); }
.curb-geometry i:nth-child(3n) { background: var(--olive); }

.public-facade {
  background:
    radial-gradient(circle at 15% 25%, rgba(241, 216, 167, 0.22), transparent 24rem),
    linear-gradient(180deg, var(--umber), var(--terracotta));
}

.scene-caption {
  max-width: 62rem;
  text-align: center;
  z-index: 2;
}
.scene-caption span { color: var(--gold); }
.scene-caption h2 { color: var(--bone); text-shadow: 0.06em 0.06em 0 rgba(31, 24, 19, 0.35); }

.number-wall {
  width: min(72rem, 96vw);
  min-height: 24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 2rem);
  margin: 3rem auto 1rem;
}

.street-number {
  display: grid;
  place-items: center;
  width: clamp(8rem, 18vw, 15rem);
  aspect-ratio: 1.05;
  color: var(--ink);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 950;
  letter-spacing: -0.08em;
  background: linear-gradient(145deg, var(--bone), var(--wheat));
  border: 0.25rem solid var(--ink);
  border-radius: 1.4rem;
  box-shadow: inset 0 0 0 0.35rem var(--gold), 0 1.2rem 0 rgba(31, 24, 19, 0.25);
  transform: rotate(var(--tilt, -4deg));
}
.street-number.tall { --tilt: 5deg; aspect-ratio: 0.75; background: linear-gradient(145deg, var(--gold), var(--wheat)); }
.street-number.rose { --tilt: -8deg; background: linear-gradient(145deg, var(--rose), var(--bone)); }
.street-number.olive { --tilt: 3deg; color: var(--bone); background: linear-gradient(145deg, var(--olive), var(--ink)); }
.street-number.wheat { --tilt: 7deg; }

.section-poem {
  width: min(44rem, 90vw);
  margin: 0 auto;
  color: var(--bone);
  text-align: center;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
}

.map-fragment {
  position: absolute;
  width: 13rem;
  height: 16rem;
  opacity: 0.48;
  background:
    linear-gradient(90deg, transparent 48%, var(--ink) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, var(--ink) 49% 51%, transparent 52%),
    var(--wheat);
  background-size: 3.5rem 3.5rem;
  border: 3px solid var(--ink);
  box-shadow: 0.8rem 0.8rem 0 rgba(31, 24, 19, 0.18);
}
.fragment-left { left: 3vw; bottom: 12vh; transform: rotate(11deg); }
.fragment-right { right: 3vw; top: 13vh; transform: rotate(-8deg); }

.velvet-detour {
  grid-template-columns: minmax(18rem, 44rem) minmax(18rem, 34rem);
  gap: clamp(2rem, 5vw, 6rem);
  background: radial-gradient(circle at 50% 50%, rgba(214, 164, 71, 0.2), transparent 28rem), linear-gradient(145deg, var(--olive), var(--ink));
}

.envelope-tunnel {
  position: relative;
  width: min(90vw, 42rem);
  height: min(86vw, 42rem);
  display: grid;
  place-items: center;
}

.envelope {
  position: absolute;
  width: var(--w);
  height: calc(var(--w) * 0.62);
  background: linear-gradient(145deg, var(--bone), var(--wheat));
  border: 4px solid var(--ink);
  border-radius: 1rem;
  box-shadow: 0 1.4rem 0 rgba(31, 24, 19, 0.24), inset 0 0 0 0.4rem rgba(214, 164, 71, 0.35);
}
.envelope::before, .envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, transparent 49%, var(--ink) 50% 51%, transparent 52%);
}
.envelope::after { transform: scaleX(-1); }
.envelope-one { --w: min(36rem, 82vw); transform: rotate(-5deg); opacity: 0.82; }
.envelope-two { --w: min(28rem, 68vw); transform: rotate(4deg); background: linear-gradient(145deg, var(--gold), var(--wheat)); }
.envelope-three { --w: min(20rem, 54vw); transform: rotate(-1deg); background: linear-gradient(145deg, var(--rose), var(--bone)); }
.detour-seal { z-index: 3; }

.detour-copy { max-width: 34rem; text-align: left; transform: rotate(1deg); }
.detour-copy h2 { color: var(--ink); font-size: clamp(2.2rem, 5vw, 4.8rem); }
.detour-copy p:last-child { font-size: 1.25rem; line-height: 1.45; }

.private-door {
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 242, 216, 0.18), transparent 26rem),
    linear-gradient(180deg, var(--ink), var(--umber));
}
.door-stage { position: relative; width: min(58rem, 94vw); height: 37rem; display: grid; place-items: center; }
.privacy-veil {
  position: absolute;
  top: 1rem;
  bottom: 0;
  width: 48%;
  background: repeating-linear-gradient(100deg, rgba(57, 65, 42, 0.9) 0 1.2rem, rgba(31, 24, 19, 0.92) 1.2rem 2.2rem);
  border: 3px solid var(--gold);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.35);
}
.veil-left { left: 0; border-radius: 10rem 1rem 1rem 10rem; transform: rotate(-2deg); }
.veil-right { right: 0; border-radius: 1rem 10rem 10rem 1rem; transform: rotate(2deg); }

.mail-slot {
  position: relative;
  z-index: 2;
  width: min(30rem, 82vw);
  min-height: 14rem;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold), var(--bone) 44%, var(--gold));
  border: 0.35rem solid var(--ink);
  border-radius: 2rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.45), inset 0 0 0 0.55rem rgba(168, 78, 43, 0.3);
}
.mail-slot span { margin-top: 6rem; font-family: var(--mono); letter-spacing: 0.24em; font-weight: 900; }
.keyhole {
  position: absolute;
  top: 2.2rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--ink);
}
.keyhole::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3.2rem;
  width: 2rem;
  height: 4.6rem;
  border-radius: 1rem 1rem 0.4rem 0.4rem;
  transform: translateX(-50%);
  background: var(--ink);
}
.door-badges b {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  color: var(--ink);
  background: var(--wheat);
  border: 3px solid var(--ink);
  border-radius: 50%;
  text-transform: uppercase;
  font-family: var(--mono);
  box-shadow: 0.5rem 0.5rem 0 rgba(214, 164, 71, 0.55);
}
.door-badges b:nth-child(1) { left: 4%; top: 20%; }
.door-badges b:nth-child(2) { right: 5%; top: 18%; background: var(--rose); }
.door-badges b:nth-child(3) { right: 19%; bottom: 8%; background: var(--gold); }
.door-caption { margin-top: -3rem; }

.route-etiquette {
  background: linear-gradient(180deg, var(--terracotta), var(--umber));
  align-content: center;
  gap: 2rem;
}
.pavement-diagram {
  position: relative;
  width: min(70rem, 96vw);
  height: 25rem;
  border: 4px solid var(--ink);
  border-radius: 2rem;
  background:
    linear-gradient(90deg, rgba(31, 24, 19, 0.16) 2px, transparent 2px),
    linear-gradient(0deg, rgba(31, 24, 19, 0.16) 2px, transparent 2px),
    linear-gradient(145deg, var(--wheat), var(--bone));
  background-size: 4rem 4rem;
  box-shadow: 0 1.6rem 0 rgba(31, 24, 19, 0.22);
}
.etiquette-path { inset: 2.2rem; width: calc(100% - 4.4rem); height: calc(100% - 4.4rem); stroke: var(--terracotta); filter: drop-shadow(4px 4px 0 rgba(31, 24, 19, 0.35)); }
.diagram-label {
  position: absolute;
  z-index: 2;
  padding: 0.8rem 1rem;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  text-transform: uppercase;
  font-weight: 900;
}
.label-public { left: 5%; bottom: 24%; transform: rotate(-7deg); }
.label-proxy { left: 43%; top: 12%; transform: rotate(5deg); background: var(--rose); }
.label-private { right: 5%; bottom: 46%; transform: rotate(-4deg); background: var(--olive); color: var(--bone); }
.diagram-tiles { left: 50%; bottom: 1rem; transform: translateX(-50%) scale(0.82); }

.final-seal {
  width: min(48rem, 94vw);
  padding: clamp(1.8rem, 4vw, 3rem);
  color: var(--ink);
  text-align: center;
  background: radial-gradient(circle at 50% 0%, var(--bone), var(--wheat));
  border: 0.32rem solid var(--gold);
  border-radius: 2rem;
  box-shadow: 0 1.4rem 4rem rgba(31, 24, 19, 0.35), inset 0 0 0 0.35rem rgba(31, 24, 19, 0.12);
}
.final-seal h2 { font-size: clamp(1.8rem, 4vw, 3.6rem); line-height: 1; color: var(--ink); }
button {
  margin-top: 1.4rem;
  padding: 1rem 1.35rem;
  border: 3px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(145deg, var(--gold), var(--bone));
  font: 950 1rem var(--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0.55rem 0 var(--ink);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
button.is-rung { transform: translateY(0.4rem); box-shadow: 0 0.15rem 0 var(--ink), 0 0 2.4rem rgba(214, 164, 71, 0.8); }

.magnetic-object { will-change: transform; transition: filter 260ms ease; }
.scene.is-current .magnetic-object { filter: saturate(1.08); }
.scene.is-current .handdrawn-line path { animation-duration: 2.6s; }

@keyframes medallionPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.035) rotate(1deg); }
}

@keyframes aliasDrift {
  0%, 100% { margin: 0; }
  50% { margin: -0.8rem 0 0 0.45rem; }
}

@keyframes routeTighten {
  0%, 100% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -42; }
}

@media (max-width: 850px) {
  .velvet-detour { grid-template-columns: 1fr; }
  .route-line, .poster-layer, .map-fragment { opacity: 0.34; }
  .alias-one { left: -1rem; }
  .alias-two { right: -1rem; }
  .door-stage { height: 32rem; }
  .privacy-veil { width: 54%; opacity: 0.88; }
  .number-wall { margin-top: 2rem; }
}

@media (max-width: 560px) {
  .scene { padding-left: 0.8rem; padding-right: 0.8rem; }
  .street-axis { min-height: 38rem; }
  .magnetic-alias { min-width: 6.1rem; font-size: 0.68rem; }
  .route-medallion { width: 11rem; height: 11rem; }
  .curb-geometry i { width: 1.35rem; height: 1.35rem; }
  .diagram-label { font-size: 0.64rem; padding: 0.55rem 0.65rem; }
}