:root {
  --night: #251B22;
  --cream: #F3E8D0;
  --blue: #657C8C;
  --azuki: #7E3340;
  --matcha: #8A9463;
  --sesame: #C6A26A;
  --graphite: #4A3D49;
  --display: "Fraunces", Georgia, serif;
  --jp: "Noto Serif JP", serif;
  --label: "Archivo Narrow", Impact, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 18% 24%, rgba(126, 51, 64, .34), transparent 28rem),
    radial-gradient(circle at 76% 18%, rgba(101, 124, 140, .18), transparent 25rem),
    linear-gradient(115deg, var(--night), #1a1218 48%, var(--graphite));
  font-family: var(--jp);
  overflow-x: hidden;
}

.grain, .rain-haze {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(243, 232, 208, .18) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(37, 27, 34, .5) 0 1px, transparent 1px);
  background-size: 9px 11px, 13px 17px;
  mix-blend-mode: overlay;
}

.rain-haze {
  opacity: .18;
  background: repeating-linear-gradient(100deg, transparent 0 36px, rgba(243, 232, 208, .18) 37px, transparent 39px);
}

.storefront {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 170px;
  padding: 20px 28px 0 28px;
  z-index: 10;
  pointer-events: none;
}

.sign-paper {
  position: relative;
  width: min(780px, calc(100vw - 42px));
  min-height: 126px;
  background: var(--cream);
  color: var(--night);
  padding: 15px 32px 22px;
  border: 1px solid rgba(74, 61, 73, .45);
  box-shadow: 12px 14px 0 rgba(74, 61, 73, .55), 0 14px 36px rgba(0, 0, 0, .32);
  transform: rotate(-1.1deg);
}

.ripped {
  clip-path: polygon(0 3%, 5% 0, 13% 2%, 22% 0, 35% 3%, 49% 1%, 63% 3%, 79% 0, 94% 2%, 100% 0, 99% 92%, 94% 100%, 81% 97%, 70% 100%, 58% 96%, 43% 99%, 31% 97%, 17% 100%, 7% 96%, 0 99%);
}

.sign-code, .chapter-label, .receipt-tab, .coordinate-slip, .legend, .chalk-fragment, .vending-sticker {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sign-code {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: .85rem;
}

#wordmark {
  min-height: 70px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.6rem, 9vw, 6.8rem);
  line-height: .86;
  font-weight: 650;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  letter-spacing: -.065em;
}

#wordmark::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: .72em;
  margin-left: .04em;
  background: var(--azuki);
  animation: cursorBlink .7s steps(1) infinite;
}

.azuki-stamp {
  position: absolute;
  left: 46px;
  bottom: -25px;
  padding: 7px 18px;
  color: var(--azuki);
  border: 3px solid var(--azuki);
  background: rgba(243, 232, 208, .88);
  font-family: var(--jp);
  font-weight: 600;
  transform: rotate(-5deg) scale(2.4);
  opacity: 0;
}

.azuki-stamp.land { animation: stampLand .55s cubic-bezier(.25,1.7,.5,1) forwards; }

.header-curve {
  position: absolute;
  top: 54px;
  left: min(540px, 43vw);
  width: 58vw;
  max-width: 900px;
  height: 130px;
  overflow: visible;
}

.draw-path {
  fill: none;
  stroke: var(--azuki);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  filter: drop-shadow(2px 2px 0 rgba(37, 27, 34, .35));
}

.draw-path.animate { animation: drawLine 2.8s ease forwards; }
.draw-path.matcha { stroke: var(--matcha); stroke-width: 3; }
.draw-path.blue { stroke: var(--blue); }
.draw-path.azuki { stroke: var(--azuki); }
.draw-path.sesame { stroke: var(--sesame); }
.draw-path.wide { stroke-width: 9; opacity: .72; }
.draw-path.contour { stroke: var(--azuki); stroke-width: 7; }
.draw-path.contour.small { stroke: var(--matcha); stroke-width: 4; }

.receipt-column {
  position: fixed;
  top: 195px;
  left: 26px;
  width: 178px;
  z-index: 9;
}

.receipt-tab {
  display: block;
  color: var(--night);
  background: var(--cream);
  margin: 0 0 12px;
  padding: 12px 12px 13px;
  text-decoration: none;
  font-size: .88rem;
  box-shadow: 6px 6px 0 rgba(74, 61, 73, .7);
  transform: rotate(var(--tilt, -1deg));
  transition: transform .28s ease, background .28s ease, color .28s ease;
  clip-path: polygon(0 0, 100% 3%, 96% 100%, 6% 96%);
}

.receipt-tab:nth-child(even) { --tilt: 1.3deg; }
.receipt-tab span { color: var(--azuki); margin-right: 9px; }
.receipt-tab.active, .receipt-tab:hover { background: var(--sesame); transform: translateX(9px) rotate(1deg); }

.coordinate-slip {
  margin-top: 22px;
  color: var(--cream);
  border-left: 2px solid var(--matcha);
  padding: 10px 0 10px 13px;
  font-size: .8rem;
}

.mural { position: relative; }

.chapter {
  min-height: 100vh;
  position: relative;
  padding: 210px 6vw 80px 245px;
  display: grid;
  grid-template-columns: minmax(270px, 410px) minmax(360px, 1fr);
  gap: clamp(26px, 5vw, 76px);
  align-items: center;
  overflow: hidden;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 145px 3vw 34px 214px;
  border: 1px dashed rgba(198, 162, 106, .22);
  opacity: .65;
}

.chapter-label {
  position: absolute;
  top: 190px;
  left: 245px;
  color: var(--sesame);
  font-size: .82rem;
}

.paper-panel {
  position: relative;
  z-index: 1;
  color: var(--night);
  background:
    radial-gradient(circle at 18% 12%, rgba(126, 51, 64, .12), transparent 8rem),
    linear-gradient(0deg, rgba(198, 162, 106, .13), rgba(243, 232, 208, .96));
  padding: clamp(28px, 4vw, 52px);
  box-shadow: 14px 16px 0 rgba(74, 61, 73, .55), 0 25px 60px rgba(0, 0, 0, .3);
  transform: translateX(-80px) rotate(-1.2deg);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,.9,.22,1), opacity .8s ease;
}

.chapter.in-view .paper-panel { transform: translateX(0) rotate(-1.2deg); opacity: 1; }
.scene-steam .paper-panel, .scene-queue .paper-panel { transform: translateX(-80px) rotate(1.1deg); }
.scene-steam.in-view .paper-panel, .scene-queue.in-view .paper-panel { transform: translateX(0) rotate(1.1deg); }

.paper-panel h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--azuki);
}

.paper-panel p {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.8;
}

.typed-caption {
  min-height: 3.2em;
  color: var(--blue);
  font-weight: 600;
  border-left: 4px solid var(--matcha);
  padding-left: 16px;
}

.tape {
  position: absolute;
  width: 140px;
  height: 28px;
  background: rgba(198, 162, 106, .62);
  top: -13px;
  left: 34%;
  transform: rotate(4deg);
}

.sticker, .vending-sticker, .chalk-fragment {
  position: absolute;
  background: var(--graphite);
  color: var(--cream);
  padding: 14px 16px;
  box-shadow: 7px 7px 0 rgba(37, 27, 34, .35);
}

.sticker {
  right: -32px;
  bottom: 24px;
  border-radius: 52% 45% 50% 40%;
  transition: transform .3s ease;
}

.sticker:hover, .vending-sticker:hover { transform: rotate(7deg) translateY(-6px); }

.mural-object {
  position: relative;
  z-index: 1;
  min-height: 430px;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(35px);
  transition: opacity .9s ease .2s, transform .9s ease .2s;
}

.chapter.in-view .mural-object { opacity: 1; transform: translateY(0); }

.mural-object svg { width: 100%; height: auto; overflow: visible; }

.corrugation {
  position: absolute;
  inset: 30px 5% 38px;
  background: repeating-linear-gradient(90deg, rgba(101, 124, 140, .32) 0 18px, rgba(74, 61, 73, .38) 18px 34px);
  border: 1px solid rgba(243, 232, 208, .12);
  transform: skewY(-2deg);
}

.pearls circle, .data-dots circle, .queue-dots circle {
  fill: var(--sesame);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.chapter.in-view circle { animation: dotPop .5s ease forwards; }
.chapter.in-view circle:nth-child(2) { animation-delay: .15s; }
.chapter.in-view circle:nth-child(3) { animation-delay: .3s; }
.chapter.in-view circle:nth-child(4) { animation-delay: .45s; }
.chapter.in-view circle:nth-child(5) { animation-delay: .6s; }
.queue-dots circle { fill: var(--cream); stroke: var(--sesame); stroke-width: 3; }

.steam-ledger, .weather-map, .queue-map, .spoon-mark { filter: drop-shadow(18px 24px 0 rgba(74, 61, 73, .28)); }

.chalk-fragment {
  top: 5%;
  left: 6%;
  transform: rotate(-4deg);
  background: #251B22;
  border: 1px solid rgba(243, 232, 208, .28);
}

.chalk-fragment strong { color: var(--sesame); font-size: 2.4rem; }
.legend span { display: inline-block; width: 22px; height: 8px; margin: 0 8px; background: var(--azuki); }
.legend span:last-child { background: var(--matcha); }

.vending-sticker {
  right: 10%;
  top: 12%;
  background: var(--blue);
  transform: rotate(5deg);
  transition: transform .3s ease;
}

.spoon-bowl {
  fill: rgba(126, 51, 64, .28);
  stroke: var(--azuki);
  stroke-width: 5;
}

.closing-stamp {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  color: var(--azuki);
  border: 3px solid var(--azuki);
  transform: rotate(-3deg);
  font-weight: 600;
}

@keyframes cursorBlink { 50% { opacity: 0; } }
@keyframes stampLand { to { opacity: 1; transform: rotate(-5deg) scale(1); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes dotPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 860px) {
  .storefront { padding: 14px; }
  .receipt-column { position: sticky; top: 150px; width: auto; display: flex; gap: 8px; overflow-x: auto; padding: 0 12px; left: 0; }
  .receipt-tab { min-width: 138px; }
  .coordinate-slip { display: none; }
  .chapter { padding: 230px 18px 70px; grid-template-columns: 1fr; }
  .chapter::before, .chapter-label { left: 18px; }
  .chapter::before { inset: 180px 14px 30px; }
  .header-curve { opacity: .45; left: 25vw; }
}