:root {
  /* Design typography tokens: Work Sans* Sans** for tiny street labels. */
  --indigo: #27354A;
  --teal: #2F7C86;
  --sand: #F1D6A8;
  --coral: #E88972;
  --chalk: #FFF8EA;
  --glass: #9FCFD0;
  --serif: "Baskervville", "Libre Baskerville", Georgia, serif;
  --body-serif: "Libre Baskerville", Georgia, serif;
  --sans: "Work Sans", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--indigo);
  background: var(--chalk);
  font-family: var(--body-serif);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.grain-field,
.grain-field::before,
.grain-field::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

.grain-field {
  opacity: .42;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(39, 53, 74, .11) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 72%, rgba(47, 124, 134, .12) 0 1px, transparent 1.6px);
  background-size: 17px 19px, 23px 29px;
}

.grain-field::before {
  content: "";
  opacity: .5;
  background: repeating-linear-gradient(95deg, rgba(39, 53, 74, .035) 0 1px, transparent 1px 9px);
}

.cursor-glow {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232, 137, 114, .38), rgba(241, 214, 168, .18) 34%, rgba(159, 207, 208, .08) 58%, transparent 72%);
  mix-blend-mode: soft-light;
  filter: blur(2px);
}

.edge-nav {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: grid;
  gap: 14px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.edge-nav a {
  writing-mode: vertical-rl;
  padding: 10px 6px;
  background: rgba(255, 248, 234, .55);
  border: 1px solid rgba(47, 124, 134, .22);
  box-shadow: 5px 8px 18px rgba(39, 53, 74, .08);
}

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(120deg, rgba(255, 248, 234, .93), rgba(241, 214, 168, .48)),
    var(--chalk);
}

.split {
  position: relative;
  min-height: 100vh;
  padding: clamp(44px, 7vw, 96px);
  z-index: 5;
}

.left-wall {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(90deg, rgba(255, 248, 234, .74), rgba(241, 214, 168, .16)),
    repeating-linear-gradient(0deg, transparent 0 88px, rgba(47, 124, 134, .08) 89px 91px, transparent 92px 178px);
}

.right-window {
  display: grid;
  place-content: center;
  gap: 28px;
  background: rgba(159, 207, 208, .18);
}

.mesh {
  position: absolute;
  inset: -20%;
  z-index: 1;
  opacity: .9;
  filter: blur(24px) saturate(108%);
  animation: meshDrift 18s ease-in-out infinite alternate;
}

.mesh-one { background: radial-gradient(circle at 18% 30%, rgba(241, 214, 168, .9), transparent 28%), radial-gradient(circle at 66% 26%, rgba(159, 207, 208, .88), transparent 31%), radial-gradient(circle at 78% 74%, rgba(232, 137, 114, .58), transparent 28%), radial-gradient(circle at 35% 78%, rgba(47, 124, 134, .54), transparent 34%); }
.mesh-two { background: radial-gradient(circle at 20% 70%, rgba(47, 124, 134, .58), transparent 33%), radial-gradient(circle at 58% 20%, rgba(241, 214, 168, .82), transparent 30%), radial-gradient(circle at 83% 52%, rgba(232, 137, 114, .46), transparent 25%); }
.mesh-three { background: radial-gradient(circle at 30% 22%, rgba(159, 207, 208, .92), transparent 32%), radial-gradient(circle at 75% 30%, rgba(47, 124, 134, .64), transparent 35%), radial-gradient(circle at 55% 82%, rgba(241, 214, 168, .76), transparent 32%); }
.mesh-four { background: radial-gradient(circle at 25% 32%, rgba(232, 137, 114, .42), transparent 30%), radial-gradient(circle at 74% 70%, rgba(159, 207, 208, .76), transparent 34%), radial-gradient(circle at 45% 55%, rgba(241, 214, 168, .86), transparent 35%); }

.torn-divider {
  position: absolute;
  top: -8vh;
  bottom: -8vh;
  left: 52%;
  width: 58px;
  z-index: 8;
  transform: translateX(-50%) rotate(1.8deg);
  background: linear-gradient(90deg, transparent, rgba(255, 248, 234, .62) 18%, rgba(241, 214, 168, .8) 50%, rgba(47, 124, 134, .18) 78%, transparent), radial-gradient(circle at 50% 10%, var(--chalk) 0 11px, transparent 12px), radial-gradient(circle at 47% 22%, var(--chalk) 0 15px, transparent 16px), radial-gradient(circle at 53% 39%, var(--chalk) 0 9px, transparent 10px), radial-gradient(circle at 48% 58%, var(--chalk) 0 18px, transparent 19px), radial-gradient(circle at 55% 77%, var(--chalk) 0 12px, transparent 13px);
  filter: drop-shadow(12px 0 18px rgba(39, 53, 74, .14));
  animation: tornFloat 7s ease-in-out infinite alternate;
}

.torn-divider.soft { left: 47%; opacity: .82; }
.torn-divider.wide { left: 58%; width: 84px; }

.street-label,
.tiny-label,
.caption-rail,
.route-stack,
.vertical-note {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: var(--teal);
}

.wordmark {
  margin: 20px 0 28px;
  max-width: 920px;
  font-family: var(--serif);
  font-size: clamp(68px, 13vw, 176px);
  line-height: .82;
  letter-spacing: -.055em;
  font-weight: 400;
  color: var(--indigo);
  text-shadow: 12px 18px 0 rgba(241, 214, 168, .62), -4px -4px 0 rgba(255, 248, 234, .78);
}

.large-fragment,
.poem,
.closing-copy {
  max-width: 560px;
  font-family: var(--serif);
  font-size: clamp(25px, 3.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.scene-title {
  margin: 12px 0;
  font-family: var(--serif);
  font-size: clamp(50px, 9vw, 122px);
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.045em;
}

.scrap {
  position: relative;
  width: min(420px, 76vw);
  padding: 28px;
  color: var(--indigo);
  background: rgba(255, 248, 234, .72);
  border: 1px solid rgba(47, 124, 134, .18);
  box-shadow: 18px 24px 45px rgba(39, 53, 74, .16), -10px -8px 0 rgba(241, 214, 168, .28);
  backdrop-filter: blur(5px);
  transition: transform .35s ease, box-shadow .35s ease;
  animation: paperBreath 5.5s ease-in-out infinite alternate;
}

.scrap h2 {
  margin: 8px 0 12px;
  font: 400 36px/.98 var(--serif);
  letter-spacing: -.03em;
}

.scrap p { line-height: 1.65; }
.paper-sand { background: rgba(241, 214, 168, .76); }
.sea-card { justify-self: end; width: 250px; padding: 18px; transform: rotate(5deg); background: rgba(159, 207, 208, .72); font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.coral-note { background: rgba(232, 137, 114, .28); transform: rotate(-2deg); }
.translucent { background: rgba(255, 248, 234, .54); }
.last-note { transform: rotate(2deg); }

.tape {
  position: absolute;
  display: block;
  width: 86px;
  height: 24px;
  background: rgba(241, 214, 168, .8);
  box-shadow: 0 6px 12px rgba(39, 53, 74, .08);
}
.tape-left { left: -22px; top: 20px; transform: rotate(-12deg); }
.tape-top { left: 42%; top: -15px; transform: rotate(4deg); }
.tape-right { right: -22px; top: 30px; transform: rotate(13deg); }

.quiet-tag {
  font-family: var(--serif);
  color: var(--coral);
  border: 1px solid rgba(232, 137, 114, .45);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.stamp { width: 74px; height: 74px; transform: rotate(-10deg); opacity: .8; }
.watermark { width: 260px; height: 260px; font-size: 120px; opacity: .12; }
.final-stamp { width: 96px; height: 96px; font-size: 42px; justify-self: center; }

.poster-seam { position: absolute; inset-block: 0; width: 1px; background: rgba(47, 124, 134, .12); }
.seam-a { left: 22%; }
.seam-b { left: 66%; }
.caption-rail { position: absolute; right: 34px; top: 12%; writing-mode: vertical-rl; }
.contour-lines { position: absolute; inset: 14% 20% 14% 8%; opacity: .18; background: repeating-radial-gradient(ellipse at center, transparent 0 24px, var(--teal) 25px 26px, transparent 27px 50px); }
.polaroid { z-index: 2; margin-top: 36px; transform: rotate(-4deg); }
.abstract-frame { height: 230px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(47, 124, 134, .7), rgba(159, 207, 208, .7) 45%, rgba(232, 137, 114, .44)); border: 10px solid var(--chalk); }
.text-heavy { justify-content: center; justify-items: start; }
.route-stack { display: grid; gap: 10px; padding-left: 22px; border-left: 2px solid var(--coral); }
.domain-band { position: absolute; left: 8%; right: 3%; top: 36%; z-index: 7; font: 400 clamp(64px, 14vw, 190px)/.8 var(--serif); letter-spacing: -.06em; color: rgba(39, 53, 74, .22); transform: rotate(-3deg); }
.color-silence { align-items: center; }
.vertical-note { position: absolute; left: 24%; bottom: 12%; writing-mode: vertical-rl; }
.stamp-ring { width: 150px; height: 150px; border: 2px dashed rgba(232, 137, 114, .55); border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--coral); justify-self: end; transform: rotate(12deg); }
.mini-stickers { display: flex; gap: 12px; }
.mini-stickers span { width: 54px; height: 22px; border-radius: 50%; background: rgba(159, 207, 208, .6); box-shadow: 0 8px 18px rgba(39, 53, 74, .12); }
.mini-stickers span:nth-child(2) { background: rgba(241, 214, 168, .8); transform: rotate(-8deg); }
.mini-stickers span:nth-child(3) { background: rgba(232, 137, 114, .48); transform: rotate(7deg); }
.handline { font: italic 42px var(--serif); letter-spacing: -.03em; }

.scrap.is-near { box-shadow: 22px 30px 54px rgba(39, 53, 74, .2), 0 0 0 1px rgba(232, 137, 114, .2); }

@keyframes meshDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.06); } }
@keyframes tornFloat { from { transform: translateX(-50%) rotate(1.2deg) translateY(-10px); } to { transform: translateX(-50%) rotate(-1.8deg) translateY(10px); } }
@keyframes paperBreath { from { filter: saturate(.96); } to { filter: saturate(1.08); } }

@media (max-width: 820px) {
  .scene { grid-template-columns: 1fr; }
  .split { min-height: 58vh; padding: 72px 28px; }
  .torn-divider { left: 50%; top: 48%; bottom: auto; width: 120vw; height: 42px; transform: translateX(-50%) rotate(-2deg); }
  .edge-nav { display: none; }
  .caption-rail, .vertical-note { writing-mode: horizontal-tb; position: static; }
  .wordmark { font-size: clamp(58px, 21vw, 110px); }
}