:root {
  --night: #0d0c0b;
  --night-2: #14120f;
  --night-3: #1c1915;
  --cream: #f3ede0;
  --paper: #f7f2e7;
  --ink: #171512;
  --muted: #a39985;
  --line: rgba(243, 237, 224, .12);
  --line-2: rgba(243, 237, 224, .22);
  --red: #c8102e;
  --gold: #e6c27f;
  --blue: #8fb4e3;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --hand: 'Permanent Marker', cursive;
  --lcd: 'VT323', monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; margin: 0; font-family: var(--sans); color: var(--cream); background: var(--night); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* film grain over everything */
body::after { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, blockquote { margin: 0; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── header ── */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(13, 12, 11, .72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 18px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; }
.brand-carton { width: 16px; height: 22px; background: linear-gradient(var(--red) 0 30%, var(--cream) 30%); clip-path: polygon(20% 0, 80% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); }
.top nav { display: flex; gap: 30px; margin-left: auto; }
.top nav a { font: 500 14px/1 var(--sans); color: var(--muted); text-decoration: none; transition: color .2s; }
.top nav a { position: relative; }
.top nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.top nav a:hover { color: var(--cream); }
.top nav a:hover::after { transform: scaleX(1); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: 0; border-radius: 999px;
  font: 700 14px/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.btn-buy { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 24px -8px rgba(230, 194, 127, .45); }
.btn-buy:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 12px 30px -8px rgba(230, 194, 127, .6); }
.btn[aria-disabled='true'] { background: rgba(243, 237, 224, .08); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); cursor: not-allowed; }
.btn[aria-disabled='true']:hover { transform: none; }
.wide { width: 100%; }

/* ── section shell ── */
section { position: relative; padding: clamp(80px, 11vw, 148px) clamp(16px, 4vw, 48px); }
.eyebrow { text-align: center; font: 500 12px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.eyebrow.dark { text-align: left; color: var(--red); }
.sec-title { margin-top: 18px; font: 400 clamp(44px, 7vw, 92px)/.95 var(--serif); letter-spacing: -.02em; text-align: center; }
.sec-title.light { color: var(--cream); }
.sec-lede { text-align: center; margin: 18px auto 0; max-width: 520px; font: 400 17px/1.6 var(--sans); color: var(--muted); }

/* ── 0 · intro ── */
.intro { height: 240vh; height: 240svh; padding: 0; background: var(--night); }
.intro-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 4vh, 40px); overflow: hidden; }
.intro-glow { position: absolute; top: 50%; left: 50%; margin: -60vmax 0 0 -60vmax; width: 120vmax; height: 120vmax; border-radius: 50%; background: radial-gradient(circle, rgba(230,194,127,.22), rgba(200,16,46,.06) 30%, transparent 60%); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); } }
.intro-coin { position: relative; z-index: 1; width: min(52vmin, 400px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; will-change: transform, filter, opacity;
  box-shadow: 0 0 0 1px rgba(230,194,127,.35), 0 0 0 10px rgba(230,194,127,.06), 0 40px 120px -20px rgba(230,194,127,.35), 0 0 200px rgba(200,16,46,.15);
  animation: coin-in 1.6s var(--ease) both; }
.intro-coin img { width: 100%; height: 100%; object-fit: cover; }
@keyframes coin-in { from { opacity: 0; transform: scale(.86); filter: blur(10px); } }
.intro-text { position: relative; text-align: center; padding: 0 16px; will-change: transform, opacity; animation: rise 1.4s .5s var(--ease) both; }
.intro-name { font: 400 clamp(44px, 7vw, 88px)/1 var(--serif); letter-spacing: .01em; }
.intro-tag { margin-top: 12px; font: 400 clamp(15px, 1.6vw, 18px)/1.5 var(--sans); color: var(--muted); }
.intro-tag em { font: italic 400 1.15em/1 var(--serif); color: var(--gold); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.intro-hint { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 10px; font: 500 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); animation: rise 1s 1.4s var(--ease) both; }
.intro-hint span { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); animation: drip 2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
/* intro on: header waits */
.top { transition: opacity .6s var(--ease), transform .6s var(--ease); }
body.at-intro .top { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.top { margin-bottom: -63px; }

/* ── 1 · hero board ── */
.board { z-index: 2; margin-top: -60vh; margin-top: -60svh; padding-top: 22vh; padding-top: 22svh;
  background: radial-gradient(ellipse 70% 45% at 38% 48%, rgba(230, 194, 127, .12), transparent 70%), linear-gradient(180deg, transparent 0, rgba(13,12,11,.85) 14vh, var(--night) 28vh, var(--night-2) 70%, var(--night)); }
.board-sign { width: fit-content; max-width: 100%; text-align: center; line-height: 1.8; margin: 0 auto clamp(36px, 5vw, 56px); font: 500 12px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.board-sign span { color: var(--red); margin: 0 6px; }
.board-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 64px); max-width: 1160px; margin: 0 auto; align-items: center; }

.tilt-l { transform: rotate(-1.6deg); }
.tilt-r { transform: rotate(1.4deg); }
.tilt-s { transform: rotate(-.6deg); }

.poster { position: relative; color: var(--ink); background: var(--paper); padding: clamp(26px, 3.6vw, 44px) clamp(20px, 3.2vw, 40px) 0; transform: rotate(-.8deg);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 40px 80px -30px rgba(0,0,0,.9), 0 10px 20px -10px rgba(0,0,0,.6); }
.poster::before { content: ''; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px; background: rgba(240, 228, 190, .72); transform: rotate(-2deg); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.poster h1 { font: 900 clamp(60px, 9.6vw, 128px)/.82 var(--sans); color: var(--red); letter-spacing: -.05em; text-align: center; }
.poster-sub { margin-top: 12px; text-align: center; font: 800 clamp(18px, 2.6vw, 30px)/1 var(--sans); letter-spacing: .02em; }
.poster-body { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 24px; margin-top: 26px; align-items: start; }
.poster-photo { width: 100%; height: auto; aspect-ratio: 428 / 450; object-fit: cover; filter: sepia(.1) contrast(1.05); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.poster-facts { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; margin: 0; font: 400 14.5px/1.4 var(--mono); }
.poster-facts dt { font: 600 10.5px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #7a7262; padding-top: 1px; }
.poster-facts dd { margin: 0; }
.poster-reward { margin: 26px 0 0; padding: 14px; text-align: center; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font: 700 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.poster-reward b { color: var(--red); }

.tabs { display: grid; grid-template-columns: repeat(8, 1fr); margin: 18px calc(-1 * clamp(20px, 3.2vw, 40px)) 0; border-top: 1px dashed #a79f8c; }
.tab { height: 128px; padding: 10px 0; border: 0; border-right: 1px dashed #a79f8c; background: var(--paper); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.tab:last-child { border-right: 0; }
.tab:hover { background: #efe6cf; }
.tab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 12px/1.15 var(--mono); letter-spacing: .04em; white-space: nowrap; color: #3a352d; }
.tab.torn { animation: tear .9s ease-in forwards; pointer-events: none; }
@keyframes tear { 0% { transform: none; } 25% { transform: translateY(8px) rotate(6deg); } 100% { transform: translateY(260px) rotate(28deg); opacity: 0; } }

.board-side { display: grid; gap: 22px; justify-items: stretch; }
.panel { padding: 30px 28px 26px; border-radius: 22px; background: linear-gradient(180deg, rgba(243,237,224,.07), rgba(243,237,224,.025)); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.panel-k { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(200,16,46,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(200,16,46,0); } 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); } }
.panel-clock { margin: 14px 0 6px; font: 300 clamp(64px, 7vw, 92px)/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #fff; }
.panel-sub { font: 400 15px/1.5 var(--sans); color: var(--muted); }
.panel:hover { border-color: var(--line-2); }
.panel { transition: border-color .3s; }
.panel-stat { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; margin: 24px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.panel-stat small { font: 500 11px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.panel-stat b { grid-row: span 2; grid-column: 2; grid-row-start: 1; font: 400 38px/1 var(--serif); color: var(--gold); }
.panel-stat #ptSub { letter-spacing: .06em; text-transform: none; font-size: 12px; }
.card-link { display: block; margin-top: 14px; text-align: center; font: 500 13px/1 var(--sans); color: var(--muted); text-decoration: none; transition: color .2s; }
.card-link:hover { color: var(--cream); }
.scrawl { text-align: center; font: 400 22px/1.1 var(--hand); color: var(--gold); opacity: .85; transform: rotate(-3deg); }

.facts-strip { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1160px; margin: clamp(56px, 8vw, 96px) auto 0; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-strip li { padding: 26px 24px; border-right: 1px solid var(--line); }
.facts-strip li:last-child { border-right: 0; }
.facts-strip b { display: block; font: 400 clamp(36px, 4.4vw, 56px)/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.facts-strip span { display: block; margin-top: 10px; font: 500 11px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ── the aisle ── */
.aisle { position: relative; padding: 0; background: #07090c; overflow: hidden; }
.aisle img { width: 100%; height: clamp(300px, 42vw, 620px); object-fit: cover; object-position: 50% 45%; }
.aisle::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, transparent 22%, transparent 55%, rgba(13,12,11,.95) 100%); pointer-events: none; }
.aisle-cap { position: absolute; left: 0; right: 0; bottom: clamp(24px, 4vw, 56px); z-index: 1; text-align: center; color: var(--cream); font: 400 clamp(28px, 4.4vw, 60px)/1.05 var(--serif); letter-spacing: -.01em; padding: 0 16px; }
.aisle-cap em { font-style: italic; color: var(--gold); }

/* ── 2 · the draws ── */
.fridge { background: var(--night); }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: 1160px; margin: clamp(48px, 6vw, 72px) auto 0; }
.note { position: relative; overflow: hidden; padding: 30px 28px 28px; border-radius: 20px; background: var(--night-3); border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(0,0,0,.9); transition: border-color .3s, transform .3s var(--ease); }
.note:hover { border-color: var(--line-2); transform: translateY(-3px); }
.note-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.n-yellow .note-bar { background: var(--gold); } .n-blue .note-bar { background: var(--blue); } .n-pink .note-bar { background: var(--red); }
.note::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--glow), transparent 70%); }
.n-yellow { --glow: rgba(230,194,127,.12); } .n-blue { --glow: rgba(143,180,227,.12); } .n-pink { --glow: rgba(200,16,46,.14); }
.note-k { position: relative; font: 500 11px/1 var(--mono); letter-spacing: .22em; color: var(--muted); }
.note h3 { position: relative; margin-top: 12px; font: 400 32px/1.05 var(--serif); }
.note-clock { position: relative; margin: 20px 0 18px; font: 300 clamp(48px, 5vw, 66px)/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #fff; }
.note-t { position: relative; font: 400 15px/1.6 var(--sans); color: var(--muted); }
.note-pot { position: relative; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.note-pot b { display: block; margin-top: 8px; font: 600 18px/1.2 var(--sans); text-transform: none; letter-spacing: -.005em; color: var(--cream); }

.fridge { padding-bottom: clamp(48px, 6vw, 80px); }
.crayon { width: min(220px, 60%); margin: clamp(48px, 6vw, 72px) auto 0; padding: 12px 12px 10px; background: #fbf8f0; transform: rotate(3deg); box-shadow: 0 30px 50px -24px rgba(0,0,0,.9); }
.crayon figcaption { margin-top: 6px; text-align: center; font: 400 14px/1.2 var(--hand); color: #1e3e8a; }

/* ── 3 · sightings ── */
.log { padding-top: clamp(40px, 5vw, 64px); background: linear-gradient(180deg, var(--night), var(--night-2)); }
.notebook { position: relative; max-width: 880px; margin: 0 auto; color: var(--ink); padding: clamp(36px, 5vw, 60px) clamp(22px, 5vw, 64px) clamp(36px, 5vw, 56px) clamp(56px, 8vw, 100px);
  background: #fbf8f0 linear-gradient(transparent 0 39px, rgba(120, 160, 205, .28) 39px 40px) 0 0 / 100% 40px; border-radius: 4px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.3); }
.notebook::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(40px, 6vw, 74px); width: 1px; background: rgba(200, 16, 46, .45); }
.sec-title.ink { text-align: left; margin-top: 14px; color: var(--ink); }
.log-sub { margin-top: 10px; font: 400 14px/1.5 var(--mono); color: #6f685a; }
.entries { list-style: none; margin: 30px 0 0; padding: 0; }
.entry { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.08); align-items: baseline; }
.e-time { font: 500 13px/1 var(--mono); color: var(--red); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.e-text { font: 400 15px/1.6 var(--sans); color: #2c2822; }
.e-text b { font-weight: 700; color: var(--ink); }
.e-text > a { text-decoration-color: rgba(0,0,0,.3); text-underline-offset: 2px; }
.e-tag { display: inline-block; margin-right: 10px; padding: 4px 8px 3px; border-radius: 999px; font: 600 10px/1 var(--mono); letter-spacing: .12em; color: #fff; background: var(--ink); vertical-align: 2px; }
.e-tag.lotto { background: #3d6597; } .e-tag.jackpot { background: var(--red); }
.e-wallets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.e-wallets a { font: 400 12px/1 var(--mono); text-decoration: none; padding: 5px 8px; border-radius: 6px; background: rgba(0,0,0,.05); color: #4a443a; }
.e-wallets a:hover { background: rgba(0,0,0,.1); }
.e-link { font: 500 12px/1 var(--mono); margin-left: 8px; color: #7a7262; }
.entry.new { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: rgba(230,194,127,.45); } to { background: transparent; } }

.taped { position: absolute; top: 40px; right: -270px; width: 240px; margin: 0; padding: 8px 8px 12px; background: #fbf8f0; transform: rotate(4deg); box-shadow: 0 30px 50px -24px rgba(0,0,0,.95); z-index: 2; }
.taped::before { content: ''; position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; margin-left: -45px; background: rgba(240, 228, 190, .75); transform: rotate(-3deg); }
.taped img { width: 100%; height: auto; }
.taped figcaption { margin-top: 8px; font: 400 13px/1.2 var(--hand); text-align: center; color: var(--ink); }
@media (max-width: 1280px) {
  .taped { position: relative; top: auto; right: auto; width: min(300px, 80%); margin: 28px auto 4px; }
}

/* ── 4 · the story ── */
.wall { background: var(--night-2); padding-bottom: clamp(64px, 8vw, 104px); }
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(24px, 3vw, 44px); max-width: 1200px; margin: clamp(48px, 6vw, 72px) auto 0; align-items: center; }
.polaroid { margin: 0; padding: 12px 12px 0; color: var(--ink); background: #fbf8f0; box-shadow: 0 30px 50px -26px rgba(0,0,0,.95); transition: transform .4s var(--ease); }
.polaroid:hover { transform: rotate(0) translateY(-4px) scale(1.02); }
.polaroid svg { width: 100%; aspect-ratio: 6 / 5; filter: saturate(.8) contrast(1.05) sepia(.08); }
.polaroid figcaption { padding: 14px 4px 18px; text-align: center; font: 400 17px/1.2 var(--hand); }
.photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quote { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 64px); text-align: center; }
.quote-k { font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.quote-t { margin-top: 18px; font: 400 clamp(34px, 4.6vw, 64px)/1.08 var(--serif); }
.quote-t em { color: var(--gold); }

/* ── 5 · receipt ── */
.counter { background: var(--night); padding-bottom: clamp(64px, 8vw, 104px); }
.receipt { position: relative; width: min(420px, 100%); margin: clamp(48px, 6vw, 72px) auto 0; padding: 32px 28px 36px; color: var(--ink); background: #fbfbf6; font: 400 14px/1.55 var(--mono); transform: rotate(-1deg); box-shadow: 0 50px 90px -40px rgba(0,0,0,1); }
.receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: radial-gradient(circle at 8px 0, #fbfbf6 7.5px, transparent 8px) 0 0 / 16px 8px repeat-x; }
.receipt hr { border: 0; border-top: 1px dashed #9a9a8f; margin: 14px 0; }
.r-c { text-align: center; }
.r-big { font: 700 22px/1.3 var(--mono); letter-spacing: .14em; }
.r-row { display: flex; justify-content: space-between; gap: 12px; }
.r-row span:last-child { text-align: right; font-weight: 500; }
.r-note { font-size: 12px; color: #6a6a60; margin: 2px 0 8px; }
.r-total { font: 700 18px/1.5 var(--mono); }
.barcode { height: 52px; margin: 18px 10px 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 14px); }
.r-ca { font-size: 12px; word-break: break-all; cursor: pointer; }

/* ── porch ── */
.porch { position: relative; padding: clamp(100px, 13vw, 160px) 20px 56px; text-align: center; color: var(--cream); background: radial-gradient(ellipse 55% 50% at 50% 0%, rgba(230,194,127,.28), transparent 70%), #0a0b10; overflow: hidden; border-top: 1px solid var(--line); }
.porch-lamp { position: absolute; top: 28px; left: 50%; width: 28px; height: 38px; margin-left: -14px; border-radius: 8px 8px 14px 14px; background: #ffd99a; box-shadow: 0 0 40px 16px rgba(255,214,140,.45), 0 0 160px 70px rgba(255,214,140,.15); animation: hum 5s ease-in-out infinite; }
@keyframes hum { 50% { opacity: .85; } 52% { opacity: 1; } }
.porch h2 { font: 400 clamp(36px, 5.6vw, 72px)/1.05 var(--serif); }
.porch h2::first-line { font-style: italic; }
.porch p { margin-top: 18px; font: 400 15px/1.6 var(--sans); color: var(--muted); }
.porch-links { display: flex; justify-content: center; gap: 32px; margin-top: 28px !important; }
.porch-links a { font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.porch-links a[aria-disabled='true'] { opacity: .4; }
.fine { max-width: 560px; margin: 44px auto 0 !important; font-size: 12px !important; opacity: .7; }

/* ── toast ── */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 220%); visibility: hidden; padding: 14px 22px; border-radius: 999px; background: rgba(28,25,21,.92); color: var(--cream); font: 500 14px/1.3 var(--sans); border: 1px solid var(--line-2); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -16px rgba(0,0,0,.8); transition: transform .3s var(--ease); max-width: calc(100% - 32px); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* ── little transitions ── */
.reveal { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease), translate .9s var(--ease), rotate .9s var(--ease), scale .9s var(--ease); }
.reveal.in { opacity: 1; translate: 0 0; }

/* words rise out of a mask */
.split.reveal { opacity: 1; translate: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.split .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.split.in .w > span { transform: none; }

/* poster drops onto the board, panel slides in from the right */
.poster.reveal { translate: 0 -50px; rotate: 4deg; transition-duration: 1.2s; }
.poster.reveal.in { translate: 0 0; rotate: 0deg; }
.panel.reveal { translate: 40px 0; transition-delay: .25s; }
.panel.reveal.in { translate: 0 0; }
.poster-facts > * { transition: opacity .6s var(--ease), translate .6s var(--ease); transition-delay: calc(.5s + var(--i, 0) * 45ms); }
.poster.reveal:not(.in) .poster-facts > * { opacity: 0; translate: -10px 0; }
.scrawl.reveal { transition-delay: .7s; }

/* groups: children land one after another */
.notes.reveal, .photos.reveal, .facts-strip.reveal { opacity: 1; translate: none; }
.notes > *, .facts-strip > * { transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 130ms); }
.notes.reveal:not(.in) > *, .facts-strip.reveal:not(.in) > * { opacity: 0; translate: 0 40px; }
.photos > * { transition: opacity .9s var(--ease), translate 1s var(--ease), rotate 1s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.photos.reveal:not(.in) > * { opacity: 0; translate: 0 70px; rotate: -9deg; }
.photos.reveal:not(.in) > *:nth-child(even) { rotate: 9deg; }
.photos.reveal:not(.in) > .quote { rotate: 0deg; }
.photos > .quote { transition-delay: .7s; }

/* the kid's drawing draws itself */
.crayon.reveal { rotate: -8deg; scale: .9; }
.crayon.reveal.in { rotate: 0deg; scale: 1; }
.crayon.reveal svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease-in-out, fill-opacity .6s; transition-delay: calc(.4s + var(--i, 0) * 140ms); }
.crayon.reveal:not(.in) svg * { fill-opacity: 0; }
.crayon.reveal.in svg * { stroke-dashoffset: 0; }

/* sightings: entries slide in */
.entries > * { transition: opacity .6s var(--ease), translate .6s var(--ease); }
.entries > *:nth-child(1) { transition-delay: .3s; } .entries > *:nth-child(2) { transition-delay: .37s; } .entries > *:nth-child(3) { transition-delay: .44s; }
.entries > *:nth-child(4) { transition-delay: .51s; } .entries > *:nth-child(5) { transition-delay: .58s; } .entries > *:nth-child(n+6) { transition-delay: .65s; }
.notebook.reveal:not(.in) .entries > * { opacity: 0; translate: -18px 0; }
.taped.reveal { rotate: 14deg; translate: 30px -20px; transition-delay: .5s; }
.taped.reveal.in { rotate: 0deg; translate: 0 0; }

/* receipt prints out */
.receipt.reveal { opacity: 1; translate: 0 -30px; clip-path: inset(0 0 100% 0); transition: clip-path 2.2s steps(28, end), translate 2.2s linear; }
.receipt.reveal.in { clip-path: inset(0 0 -20px 0); translate: 0 0; }

/* porch light flickers on */
.porch.reveal { opacity: 1; translate: none; transition: background-color 1.2s; }
.porch.reveal:not(.in) { background-color: #050609; }
.porch.reveal:not(.in) .porch-lamp { opacity: .08; box-shadow: none; animation: none; }
.porch.reveal.in .porch-lamp { animation: flick-on 1.4s steps(1, end) .3s backwards, hum 5s ease-in-out 2s infinite; }
@keyframes flick-on { 0% { opacity: .08; box-shadow: none; } 15% { opacity: 1; } 22% { opacity: .1; box-shadow: none; } 34% { opacity: 1; } 40% { opacity: .2; box-shadow: none; } 55% { opacity: 1; } }

/* aisle parallax */
.aisle img { transform-origin: 50% 50%; will-change: transform; }

/* intro: coin flips in, glint, letters */
.intro-coin { animation: none; }
.intro-coin img { animation: coin-flip 1.8s var(--ease) both; backface-visibility: hidden; }
@keyframes coin-flip { from { opacity: 0; transform: perspective(900px) rotateY(-200deg) scale(.7); filter: blur(6px); } 60% { opacity: 1; filter: none; } }
.intro-coin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.1) 54%, transparent 62%) 200% 0 / 250% 100% no-repeat;
  mix-blend-mode: soft-light; animation: glint 5s 2s ease-in-out infinite; }
@keyframes glint { 0% { background-position: 200% 0; } 30%, 100% { background-position: -150% 0; } }
.intro-text { animation: none; }
.intro-name span { display: inline-block; animation: letter 1s var(--ease) both; animation-delay: calc(1s + var(--i) * 70ms); }
@keyframes letter { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } }
.intro-tag { animation: rise 1.2s 1.8s var(--ease) both; }
.intro-hint { animation-delay: 2.4s; }

/* ── responsive ── */
@media (max-width: 960px) {
  .top nav { display: none; }
  .top .btn-buy { margin-left: auto; }
  .board-grid { grid-template-columns: 1fr; max-width: 640px; }
  .notes { grid-template-columns: 1fr; max-width: 480px; }
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}
@media (max-width: 600px) {
  .brand { font-size: 16px; }
  .top .btn { padding: 11px 16px; font-size: 13px; }
  .poster-body { grid-template-columns: 1fr; }
  .poster-photo { width: 62%; margin: 0 auto; }
  .tabs { grid-template-columns: repeat(5, 1fr); }
  .tab:nth-child(n+6) { display: none; }
  .tab:nth-child(5) { border-right: 0; }
  .facts-strip { grid-template-columns: repeat(2, 1fr); }
  .facts-strip li { padding: 22px 16px; }
  .facts-strip li:nth-child(2) { border-right: 0; }
  .facts-strip li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .entry { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro { height: 100vh; height: 100svh; }
  .board { margin-top: 0; padding-top: 80px; }
  .crayon svg * { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
  .reveal { opacity: 1; translate: 0 0; }
}