:root {
  --buttermilk: #FFF4C7;
  --honey: #E8B94F;
  --persimmon: #F06A5B;
  --blue: #245F73;
  --cocoa: #5B3A1E;
  --black: #17120D;
  --cream: #FFFBEA;
  --display: "Bebas Neue", Impact, sans-serif;
  --narrow: "Archivo Narrow", "Arial Narrow", sans-serif;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--black);
  background: var(--buttermilk);
  font-family: var(--narrow);
  overflow-x: hidden;
}

.paper-grain,
.halftone-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.paper-grain {
  opacity: .26;
  background:
    radial-gradient(circle at 14% 22%, rgba(91,58,30,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 63%, rgba(36,95,115,.12) 0 1px, transparent 1.4px),
    linear-gradient(115deg, rgba(255,251,234,.5), rgba(232,185,79,.15));
  background-size: 18px 18px, 24px 24px, 100% 100%;
  mix-blend-mode: multiply;
}

.halftone-field {
  opacity: .19;
  transform: translate3d(0, var(--drift, 0px), 0);
  background-image: radial-gradient(circle, var(--cocoa) 0 2px, transparent 2.8px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 72% 14%, #000 0 18%, transparent 38%), radial-gradient(circle at 12% 80%, #000 0 18%, transparent 42%);
}

.bay {
  min-height: 100vh;
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4vw, 64px);
  isolation: isolate;
}

.opening {
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

.register-title {
  position: relative;
  width: min(1180px, 96vw);
  min-height: clamp(150px, 30vw, 350px);
}

.register-title h1,
.register-title .ink {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(6rem, 21vw, 18rem);
  line-height: .76;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.register-title h1 { color: var(--black); text-shadow: 6px 7px 0 var(--cream); }
.ink-persimmon { color: var(--persimmon); transform: translate(-10px, 7px); opacity: .9; }
.ink-blue { color: var(--blue); transform: translate(9px, -6px); opacity: .86; }
.ink-cocoa { color: var(--cocoa); transform: translate(4px, 11px); opacity: .58; }

.opening-caption {
  max-width: 720px;
  margin: -28px auto 0;
  padding: 12px 20px;
  border: 3px solid var(--black);
  background: var(--cream);
  box-shadow: 8px 8px 0 var(--honey), 11px 11px 0 var(--cocoa);
  font: 700 clamp(1rem, 2vw, 1.35rem)/1.1 var(--narrow);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stamp {
  position: absolute;
  right: 13vw;
  bottom: 18vh;
  width: clamp(110px, 15vw, 190px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 10px solid var(--persimmon);
  border-radius: 50%;
  color: var(--persimmon);
  background: rgba(255,251,234,.55);
  font: 400 clamp(4rem, 10vw, 9rem)/1 var(--display);
  transform: rotate(-12deg) scale(.2);
  opacity: 0;
  animation: stampLand .9s .45s cubic-bezier(.25, 1.45, .45, 1) forwards;
}

.burst {
  position: absolute;
  padding: 15px 20px;
  background: var(--honey);
  border: 3px solid var(--black);
  font: 400 clamp(1.3rem, 3vw, 2.4rem)/.9 var(--display);
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--blue);
  clip-path: polygon(8% 24%, 21% 0, 34% 21%, 55% 4%, 63% 28%, 91% 19%, 78% 48%, 100% 67%, 69% 70%, 68% 100%, 45% 78%, 22% 95%, 24% 67%, 0 56%, 22% 43%);
}
.burst-one { left: 7vw; bottom: 17vh; transform: rotate(8deg); }
.burst-two { right: 5vw; top: 16vh; transform: rotate(-7deg); background: var(--cream); box-shadow: 6px 6px 0 var(--persimmon); }

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, minmax(62px, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  border-top: 5px solid var(--black);
}

.scene-label,
.scene-counter {
  font: 700 .86rem/1 var(--narrow);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.scene-label {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: start;
  padding: 10px 12px;
  background: var(--black);
  color: var(--cream);
  width: max-content;
}

.scene-counter {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 5;
  padding: 12px 14px;
  background: var(--cream);
  border: 3px solid var(--black);
  box-shadow: 5px 5px 0 var(--persimmon);
}

.artifact {
  position: relative;
  border: 4px solid var(--black);
  background: var(--cream);
  box-shadow: 8px 8px 0 var(--cocoa);
  padding: clamp(14px, 2vw, 28px);
  transform: translateY(46px) rotate(var(--tilt, 0deg));
  opacity: 0;
  transition: transform .7s cubic-bezier(.2, 1, .2, 1), opacity .55s ease, box-shadow .22s ease;
}

.bay.is-visible .artifact {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt, 0deg));
  transition-delay: calc(var(--order, 0) * 95ms);
}

.artifact:hover { box-shadow: 12px 12px 0 var(--blue); transform: translateY(-7px) rotate(var(--tilt, 0deg)); }

.artifact h2 {
  margin: 8px 0 16px;
  font: 400 clamp(4rem, 8vw, 8.5rem)/.78 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--persimmon);
  text-shadow: 3px 3px 0 var(--blue), 6px 6px 0 var(--black);
}

.artifact-no { font: 700 .9rem/1 var(--narrow); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.serif-note { font: 600 clamp(1.05rem, 1.6vw, 1.45rem)/1.18 var(--serif); max-width: 420px; }

.giant-plus {
  position: absolute;
  z-index: -1;
  font: 400 clamp(18rem, 38vw, 34rem)/.7 var(--display);
  color: var(--honey);
  text-shadow: 8px 8px 0 var(--persimmon), -8px -8px 0 var(--blue);
  opacity: .62;
}
.plus-left { left: 2vw; top: 18vh; }
.plus-right { right: 4vw; top: 10vh; }
.plus-center { left: 35vw; top: 18vh; }
.low { top: 35vh; }

.poster { grid-column: 2 / 7; grid-row: 2 / 8; background: var(--honey); }
.smile-print { height: 130px; margin-top: 20px; border: 5px solid var(--black); border-radius: 50% 50% 12px 12px; background: radial-gradient(circle at 35% 42%, var(--black) 0 7px, transparent 8px), radial-gradient(circle at 65% 42%, var(--black) 0 7px, transparent 8px), linear-gradient(var(--persimmon), var(--persimmon)); }
.sticker { display: grid; place-items: center; text-align: center; border-radius: 50%; font: 400 clamp(2.1rem, 5vw, 5rem)/.82 var(--display); text-transform: uppercase; }
.sticker small { font-size: .35em; letter-spacing: .1em; }
.sticker.blue { grid-column: 8 / 11; grid-row: 2 / 5; background: var(--blue); color: var(--cream); box-shadow: 8px 8px 0 var(--persimmon); }
.sticker.persimmon { grid-column: 9 / 12; grid-row: 4 / 7; background: var(--persimmon); color: var(--cream); }
.caption-rail { font: 700 clamp(1rem, 1.6vw, 1.35rem)/1 var(--narrow); letter-spacing: .18em; text-transform: uppercase; }
.first-plus .caption-rail { grid-column: 6 / 12; grid-row: 6; }
.matchbook { grid-column: 8 / 11; grid-row: 5 / 8; background: var(--persimmon); color: var(--cream); text-transform: uppercase; font: 400 2.4rem/.9 var(--display); }
.matchbook span { display:block; color: var(--black); font: 700 .85rem/1 var(--narrow); letter-spacing:.22em; }
.matchbook i { display:block; height: 34px; margin-top: 20px; border-top: 4px dashed var(--black); }
.coupon { grid-column: 3 / 6; grid-row: 7 / 9; background: var(--cream); border-style: dashed; font: 400 2.8rem/.9 var(--display); color: var(--blue); text-transform: uppercase; }

.umbrella-card { grid-column: 6 / 12; grid-row: 2 / 8; background: var(--cream); }
.umbrella-icon { height: 180px; margin: 10px 0; border-bottom: 8px solid var(--black); background: radial-gradient(ellipse at 50% 100%, var(--blue) 0 55%, transparent 56%); position: relative; }
.umbrella-icon span { position: absolute; left: 50%; top: 52%; width: 8px; height: 96px; background: var(--black); }
.ticket { grid-column: 2 / 7; grid-row: 3 / 4; background: var(--honey); font: 700 1.25rem/1 var(--narrow); letter-spacing:.2em; text-transform:uppercase; border-style:dashed; }
.envelope { grid-column: 2 / 5; grid-row: 5 / 8; background: linear-gradient(140deg, transparent 49%, rgba(91,58,30,.2) 50%), var(--cream); text-transform:uppercase; }
.envelope b, .envelope span { display:block; font: 700 1.1rem/1.2 var(--narrow); letter-spacing:.16em; }
.blue-rail { grid-column: 3 / 8; grid-row: 7; background: var(--blue); color: var(--cream); }

.receipt-paper { grid-column: 4 / 9; grid-row: 2 / 8; background: repeating-linear-gradient(0deg, var(--cream), var(--cream) 24px, rgba(232,185,79,.35) 25px); }
.receipt-lines { font: 600 clamp(1.3rem, 2.4vw, 2.1rem)/1.35 var(--serif); color: var(--cocoa); }
.receipt-lines em { color: var(--persimmon); }
.cup { grid-column: 9 / 12; grid-row: 3 / 6; border-radius: 8px 8px 45px 45px; background: var(--blue); display:flex; justify-content:center; gap:16px; color:var(--cream); font:400 3rem/1 var(--display); }
.badge { grid-column: 2 / 5; grid-row: 5 / 7; border-radius:50%; background:var(--persimmon); color:var(--cream); display:grid; place-items:center; text-align:center; font:400 3rem/.9 var(--display); text-transform:uppercase; }
.napkin { grid-column: 8 / 12; grid-row: 7 / 9; background: var(--buttermilk); font: 600 1.4rem/1.1 var(--serif); }
.receipt .caption-rail { grid-column: 1 / 5; grid-row: 2; }

.train-ticket { grid-column: 2 / 9; grid-row: 2 / 6; background: var(--honey); overflow:hidden; }
.train-ticket p { font:700 1.2rem/1 var(--narrow); letter-spacing:.18em; }
.perforation { position:absolute; top:0; bottom:0; right:25%; border-left:5px dashed var(--black); }
.heart-punch { position:absolute; right:10%; top:44%; width:56px; height:50px; background: var(--buttermilk); transform: rotate(-45deg); }
.heart-punch:before,.heart-punch:after { content:""; position:absolute; width:56px; height:56px; border-radius:50%; background:var(--buttermilk); }
.heart-punch:before { top:-28px; left:0; } .heart-punch:after { left:28px; top:0; }
.cassette { grid-column: 8 / 12; grid-row: 5 / 8; background:var(--cream); }
.cassette b { display:block; font:400 4rem/.8 var(--display); color:var(--blue); }
.cassette span { font:700 1.1rem/1 var(--narrow); letter-spacing:.2em; text-transform:uppercase; }
.persimmon-rail { grid-column: 3 / 8; grid-row: 7; background: var(--persimmon); color: var(--cream); }
.clock { grid-column: 10 / 12; grid-row: 2 / 4; border-radius:50%; background:var(--cream); display:grid; place-items:center; text-align:center; font:400 3.4rem/.8 var(--display); color:var(--cocoa); }

.final-title { grid-column: 1 / 6; grid-row: 2 / 7; background: var(--honey); }
.plus-wall { grid-column: 6 / 13; grid-row: 2 / 8; display:grid; grid-template-columns: repeat(3, minmax(80px, 1fr)); grid-template-rows: repeat(3, 1fr); gap:14px; }
.tile { border:4px solid var(--black); box-shadow:7px 7px 0 var(--cocoa); display:grid; place-items:center; font:400 clamp(1.8rem,4vw,4rem)/.85 var(--display); text-transform:uppercase; background:var(--cream); transform: rotate(var(--r)); }
.t1,.t3,.t7,.t9 { opacity:.22; } .t2,.t4,.t5,.t6,.t8 { opacity:1; }
.t2 { --r:-4deg; background:var(--persimmon); color:var(--cream); } .t4 { --r:3deg; background:var(--blue); color:var(--cream); } .t5 { --r:-2deg; background:var(--honey); } .t6 { --r:5deg; } .t8 { --r:-5deg; background:var(--persimmon); color:var(--cream); }
.museum-tag { grid-column: 2 / 5; grid-row: 7 / 8; align-self:center; justify-self:start; padding:16px 24px; border:4px dashed var(--black); background:var(--cream); color:var(--black); text-decoration:none; font:700 1.2rem/1 var(--narrow); letter-spacing:.18em; text-transform:uppercase; box-shadow:7px 7px 0 var(--blue); transform:rotate(-4deg); }

@keyframes stampLand {
  0% { opacity:0; transform: rotate(-32deg) scale(.2) translateY(-160px); }
  66% { opacity:1; transform: rotate(-12deg) scale(1.13) translateY(0); }
  100% { opacity:1; transform: rotate(-12deg) scale(1); }
}

@media (max-width: 760px) {
  .bay { padding: 24px 18px; }
  .gallery { display:block; min-height:auto; }
  .artifact, .scene-label, .museum-tag { margin: 22px 0; }
  .artifact h2 { font-size: clamp(4rem, 20vw, 7rem); }
  .giant-plus { opacity:.25; }
  .plus-wall { display:grid; margin:24px 0; }
  .burst { display:none; }
  .stamp { right: 8vw; bottom: 10vh; }
}