/* Wagie · storybook site. Mobile first (390x844), desktop from 900px. */
:root{--paper:#F7E6B5;--paper2:#fbf0d2;--paper3:#f1d99c;--ink:#2a1d14;--red:#DA291C;--red-d:#a81e12;--mustard:#FFC72C;--fry:#F2B33D;--skin:#F6D2B0;--muted:#6a543c;--tag:#8a6d45;--line:rgba(42,29,20,.22);--mono:'DM Mono',ui-monospace,monospace;--sans:'DM Sans',system-ui,sans-serif;--serif:'Fraunces',Georgia,serif;--dock-h:68px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:clip;padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
svg{display:block}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.paper-grain{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}

/* intro loader */
.intro{position:fixed;z-index:60;inset:0;background:var(--paper);display:grid;place-content:center;text-align:center;transition:opacity .6s,visibility .6s}
.intro.done{opacity:0;visibility:hidden}
.intro-face{width:96px;height:96px;margin:auto;border:3px solid var(--ink);border-radius:55% 48% 52% 45%;display:grid;place-items:center;background:var(--paper2);animation:bop .42s infinite alternate}
.intro-face svg{width:70px;height:70px}
.intro p,.intro span{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.intro span{display:block;height:2px;background:var(--ink);width:150px;margin:8px auto;animation:loading 1.2s ease-in-out infinite alternate}
@keyframes loading{to{transform:scaleX(.15);background:var(--red)}}
@keyframes bop{to{transform:rotate(-8deg) translateY(-4px)}}

/* top bar */
.topbar{height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);position:relative;z-index:5;background:var(--paper)}
.wordmark{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;line-height:1.05;letter-spacing:.07em;min-height:44px}
.wordmark small{font:7.5px var(--mono);letter-spacing:.08em;color:var(--tag)}
.brand-doodle{width:36px;height:36px;border:2px solid var(--ink);border-radius:44% 55% 50% 45%;display:grid;place-items:center;transform:rotate(-7deg);background:var(--paper2);flex:none}
.brand-doodle svg{width:28px;height:28px}
nav{display:none}
.top-actions{display:flex;gap:6px;align-items:center}
.sound,.social,.buy{border:1px solid var(--ink);border-radius:30px;min-height:44px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;background:transparent;font:10px var(--mono);letter-spacing:.05em;white-space:nowrap}
.sound{border:0;min-width:44px;padding:0 8px;font-size:14px}
.sound span{display:none}
.sound[aria-pressed=true]{color:var(--red)}
.buy{background:var(--ink);color:var(--paper2);font-weight:500;transition:.2s}
.off{opacity:.5;filter:grayscale(1);pointer-events:none;cursor:default}
.buy.off,.button.off,.ca-buy.off{background:#8d7b66;border-color:#8d7b66;color:var(--paper2)}

/* hero */
.hero{position:relative;overflow:hidden;padding:18px 16px 30px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 60% 55%,#fff0c6 0%,#F7E6B5 52%,#f0d792 100%)}
.hero:before,.hero:after{content:'';position:absolute;border:1px dashed #bd9c5a45;border-radius:50%;pointer-events:none}
.hero:before{width:520px;height:520px;right:-180px;top:160px}
.hero:after{width:330px;height:330px;right:-40px;top:250px}
.hero-head{position:relative;z-index:2}
.eyebrow,.section-tag{font:10px var(--mono);letter-spacing:.11em}
.eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow i,.rec i,.preview-chip i{width:7px;height:7px;background:var(--red);border-radius:50%;box-shadow:0 0 0 4px #da291c24;flex:none}
.hero h1{font:700 clamp(44px,12.4vw,100px)/.92 var(--serif);letter-spacing:-.05em;margin:14px 0 10px}
.hero h1 em,h2 em,.stream-side h1 em{font-weight:500;color:var(--red);font-style:italic}
.lede{font-size:15px;line-height:1.5;max-width:390px;color:#5d4a35;margin:0}
.hero-art{position:relative;height:320px;margin-top:6px;display:grid;place-items:center;z-index:1}
.portrait{width:min(236px,62vw);aspect-ratio:1;padding:0;background:var(--paper2);border:3px solid var(--ink);box-shadow:9px 11px 0 #2a1d141a;transform:rotate(3deg);position:relative;z-index:2;transition:transform .3s;overflow:hidden}
.portrait:active{transform:rotate(-1deg) scale(.98)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;background:repeating-linear-gradient(135deg,#fbf0d2 0 14px,#f6e6bb 14px 15px);color:var(--tag);font:8px var(--mono);letter-spacing:.1em;text-align:center}
.ph svg{width:46%;height:auto;aspect-ratio:1;opacity:.9}
.missing>img{display:none}
.has-img>.ph{display:none}
.tap-label{position:absolute;z-index:3;bottom:12px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;white-space:nowrap;padding:7px 11px;font:9px var(--mono);letter-spacing:.08em}
.portrait.beat{animation:beat .5s ease-out}
@keyframes beat{30%{transform:rotate(-2deg) scale(1.05)}60%{transform:rotate(4deg) scale(.98)}}
.scribble-halo{position:absolute;border:2px solid var(--red);width:280px;height:296px;border-radius:47% 53% 44% 60%;transform:rotate(-13deg)}
.scribble-halo:before,.scribble-halo:after{content:'';position:absolute;inset:12px;border:1px dashed var(--mustard);border-radius:55% 42% 56% 44%;transform:rotate(22deg)}
.scribble-halo:after{inset:-16px 22px;transform:rotate(-28deg);opacity:.4;border-color:var(--red)}
@keyframes halo{to{transform:rotate(347deg)}}
.orbit-note{position:absolute;z-index:3;font:8.5px/1.45 var(--mono);letter-spacing:.08em;transform:rotate(-8deg);background:var(--paper);padding:6px 7px;border:1px solid var(--ink)}
.note-a{top:0;right:2%;transform:rotate(6deg)}
.note-b{display:none}
.hero-caption{display:none}
.sound-wave{position:absolute;border:2px solid var(--mustard);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg);opacity:.7;pointer-events:none}
.wave-one{width:80px;height:80px;right:10%;top:20%}
.wave-two{width:112px;height:112px;right:5%;top:15%;opacity:.35}
/* turntable doodle */
/* fryer doodle */
.mini-fryer{position:absolute;z-index:3;right:0;bottom:2%;width:104px;height:84px;background:var(--red);border:3px solid var(--ink);border-radius:10px;transform:rotate(7deg) scale(.86);transform-origin:bottom right;box-shadow:5px 6px 0 #2a1d1424;padding:6px 7px;color:var(--paper2)}
.fryer-top{display:flex;justify-content:space-between;align-items:center;font:7px var(--mono);letter-spacing:.08em}
.fryer-top i{width:6px;height:6px;border-radius:50%;background:var(--mustard);box-shadow:0 0 6px var(--mustard);animation:blink 1.2s infinite}
.vat{position:absolute;left:8px;bottom:8px;width:62px;height:42px;border-radius:3px 3px 12px 12px;background:linear-gradient(#f7c95a,var(--fry));border:2px solid var(--ink);overflow:hidden}
.vat b{position:absolute;bottom:-8px;width:7px;height:7px;border-radius:50%;border:1.5px solid #8a5a14;background:#fde3a0;animation:bubble 1.6s ease-in infinite}
.vat b:nth-child(1){left:8px}.vat b:nth-child(2){left:22px;animation-delay:-.5s;width:5px;height:5px}.vat b:nth-child(3){left:36px;animation-delay:-1s}.vat b:nth-child(4){left:48px;animation-delay:-1.3s;width:5px;height:5px}
@keyframes bubble{to{transform:translateY(-44px);opacity:.2}}
.basket-handle{position:absolute;left:52px;top:20px;width:5px;height:34px;background:#d9d3c4;border:1.5px solid var(--ink);border-radius:3px;transform:rotate(-38deg);transform-origin:bottom center}
.basket-handle:before{content:'';position:absolute;top:-4px;left:-3px;width:8px;height:12px;border-radius:3px;background:var(--ink)}
.fryer-knobs{position:absolute;right:8px;bottom:8px;display:grid;gap:4px}
.fryer-knobs i{width:9px;height:9px;border-radius:50%;background:var(--mustard);border:1.5px solid var(--ink)}
/* stickers */
.floaty{position:absolute;z-index:3;width:52px;height:52px;padding:0;border:0;background:none;display:grid;place-items:center;filter:drop-shadow(2px 3px 0 #2a1d1420);animation:float 4s ease-in-out infinite}
.floaty svg{width:44px;height:44px}
.floaty small{position:absolute;bottom:-6px;font:7px var(--mono);letter-spacing:.08em}
.sticker-fries{top:2%;left:0;rotate:-10deg}
.sticker-ice{top:44%;left:-1%;animation-delay:-1s}
.sticker-burger{bottom:4%;left:1%;animation-delay:-2s}
.sticker-ketchup{top:34%;right:-1%;animation-delay:-3s}
.floaty:after{content:attr(data-sticker);position:absolute;top:100%;left:50%;translate:-50% 4px;white-space:nowrap;background:var(--ink);color:#fff;padding:5px 7px;font:8px var(--mono);opacity:0;transition:.2s;pointer-events:none}
.floaty.say:after{opacity:1}
@keyframes float{50%{translate:0 -9px;rotate:6deg}}
.sun-doodle{position:absolute;top:44%;left:6%;font-size:40px;color:var(--fry);animation:spin 24s linear infinite;opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}
.cloud{position:absolute;color:#fff6d8;font-size:60px;text-shadow:2px 3px #caa85e66;opacity:.8;pointer-events:none}
.cloud-one{top:38%;right:6%}
.cloud-two{bottom:24%;left:40%;font-size:40px}
.note-doodle{position:absolute;font-size:24px;color:var(--red);opacity:.7;pointer-events:none;animation:float 5s ease-in-out infinite}
.nd-1{top:8px;right:22px;font-weight:700}.nd-2{bottom:36%;right:44%;color:var(--fry);animation-delay:-2s}
.hero-actions{position:relative;z-index:2;margin-top:12px}
.hero-buttons{display:flex;gap:8px;margin:0}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;border:1px solid var(--ink);padding:0 16px;font:10px var(--mono);letter-spacing:.04em;transition:.25s;background:transparent}
.hero .button{flex:1}
.button.dark{background:var(--ink);color:var(--paper2)}
.spin-chip{display:grid;grid-template-columns:10px auto 1fr;align-items:center;gap:6px 10px;border-top:1px solid var(--line);padding-top:12px;margin-top:16px;font:9px var(--mono);letter-spacing:.05em}
.spin-chip b{font-weight:500;color:var(--red);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spin-chip small{grid-column:2/4;color:#786749;letter-spacing:0}
.pulse{width:7px;height:7px;border-radius:50%;background:#6c9b45;box-shadow:0 0 0 4px #6c9b4522;animation:blink 1.5s infinite}
@keyframes blink{50%{opacity:.3}}
.hero-bottom{display:none}

/* CA box (shared by hero panel, phone dock, stream) */
.ca-box{display:flex;align-items:center;gap:8px;font:10px var(--mono)}
.ca-row{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.ca-label{background:var(--red);color:#fff;padding:4px 6px;font-size:9px;letter-spacing:.08em;flex:none}
.ca-text{font:11px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ca-btns{display:flex;gap:6px;flex:none}
.ca-copy,.ca-buy{min-height:44px;min-width:56px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);font:10px var(--mono);letter-spacing:.06em;background:var(--paper2);white-space:nowrap}
.ca-buy{background:var(--ink);color:var(--paper2)}
.ca-copy.copied{background:var(--mustard);color:var(--ink);border-color:var(--ink)}
.preview-chip{display:none;align-items:center;gap:8px;flex:1;min-width:0;font:9px var(--mono);letter-spacing:.08em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-box:not(.live) .preview-chip{display:flex}
.ca-box:not(.live) .ca-row,.ca-box:not(.live) .ca-copy{display:none}
.ca-panel{display:none}
.ca-dock{position:fixed;z-index:30;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));min-height:var(--dock-h);background:var(--paper2);border-top:2px solid var(--ink);box-shadow:0 -6px 18px #2a1d1418}

/* sections */
.section{padding:72px 16px;position:relative}
.section-tag{display:block;color:var(--tag)}
.section h2,.ending h2{font:600 clamp(40px,11vw,74px)/.98 var(--serif);letter-spacing:-.045em;margin:16px 0}
.section-intro>p,.map-heading>p,.deck-head>p,.ending-copy>p{font-size:14px;line-height:1.75;color:var(--muted);max-width:400px}

/* story */
.story{background:#fbf0d2}
.story-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:24px}
.story-tab{background:transparent;border:1px solid var(--line);min-height:52px;padding:6px 2px;font:8px var(--mono);letter-spacing:.04em;color:#786749;display:grid;place-content:center;gap:3px;text-align:center;transition:.2s}
.story-tab b{font-weight:500;font-size:11px}
.story-tab .t-long{display:none}
.story-tab.active{background:#f4e0ac;color:var(--ink);border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--red)}
.story-card{margin-top:22px;background:#f8e7b6;border:1px solid var(--line);box-shadow:7px 9px 0 #2a1d140b;display:grid}
.story-card-top{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font:9px var(--mono);letter-spacing:.06em}
.rec{color:#7f6a48;display:flex;align-items:center;gap:6px}
.story-drawing{position:relative;aspect-ratio:4/3;background:#f3dc9e;overflow:hidden}
.story-drawing img{display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:1;mix-blend-mode:multiply}
.drawing-caption{position:absolute;z-index:2;bottom:10px;left:10px;font:8px/1.5 var(--mono);letter-spacing:.09em;transform:rotate(-4deg);background:var(--paper2);padding:4px 7px;border:1px solid var(--line)}
.story-text{padding:22px 18px 18px}
.story-overline{font:8px var(--mono);letter-spacing:.09em;color:#91744a}
.story-text h3,.map-receipt h3{font:600 27px/1.1 var(--serif);margin:10px 0}
.story-text p,.map-receipt p{font-size:14px;line-height:1.75;color:#68553b}
.next-story{border:0;border-bottom:1px solid var(--ink);min-height:44px;padding:0;background:none;margin-top:4px;font:10px var(--mono);letter-spacing:.08em}
.next-story span{margin-left:22px}
.story-side-note{display:none}

/* practice deck */
.deck-section{background:#ecd391}
.deck-head{margin-bottom:26px}
.deck{background:#f7e8b7;border:2px solid var(--ink);border-radius:10px;padding:16px;box-shadow:8px 10px 0 #2a1d1415;position:relative}
.deck:before{content:'';position:absolute;inset:6px;border:1px dashed #6b4b2452;border-radius:6px;pointer-events:none}
.console-label{display:flex;justify-content:space-between;gap:8px;font:9px var(--mono);letter-spacing:.07em}
.console-label b{font-weight:500}
#deck-status{color:var(--red);text-align:right}
.deck-screen{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;background:#2d2419;border-radius:6px;padding:10px;margin:12px 0}
.deck-wagie{width:58px;height:58px;display:grid;place-items:center;transition:transform .08s}
.deck-wagie svg{width:54px;height:54px}
.deck-wagie.nod{transform:translateY(3px) rotate(-6deg)}
.pattern{display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(5,9px);gap:3px}
.pattern i{border-radius:2px;background:#4a3d2d}
.pattern i.on{background:#7b6648}
.pattern i.on.r0{background:var(--fry)}.pattern i.on.r1{background:#ff6a5c}.pattern i.on.r2{background:#e9e2cf}.pattern i.on.r3{background:var(--mustard)}.pattern i.on.r4{background:#9a8b78}
.pattern i.now{outline:1px solid #fff4;background:#5d4f3c}
.pattern i.on.now{background:#fff;box-shadow:0 0 8px #fff8}
/* order rail (contained so tickets never widen the deck column) */
.deck-slot{min-width:0}
.order-rail{contain:inline-size;position:relative;margin:0 0 12px;padding:12px 0 4px;border-top:4px solid #8f8a80;border-radius:2px;min-height:78px;overflow:hidden}
.rail-label{position:absolute;right:0;top:-4px;z-index:2;font:7px var(--mono);letter-spacing:.1em;background:var(--ink);color:var(--paper2);padding:2px 5px}
.tickets{display:flex;gap:8px;overflow:hidden;padding:0 2px 4px}
.ticket{flex:none;width:126px;min-height:56px;background:#fffbf0;border:1px solid #2a1d1440;border-top:3px solid var(--red);box-shadow:2px 3px 0 #2a1d1414;padding:6px 8px;font:9px/1.35 var(--mono);color:var(--ink);rotate:-1.4deg;transform-origin:top center;overflow:hidden;animation:ticket-in .55s cubic-bezier(.2,.8,.2,1)}
.ticket.tilt{rotate:1.2deg}
.ticket b{display:block;font-weight:500;color:var(--red);letter-spacing:.06em;margin-bottom:2px;white-space:nowrap}
.ticket span{display:block;min-width:108px}
.ticket:first-child{background:#fff3c9}
@keyframes ticket-in{from{width:0;padding-left:0;padding-right:0;margin-right:-8px;opacity:0;translate:0 -18px}60%{opacity:1}to{width:126px;translate:0 0}}
.deck-message{background:#382d1d;color:#ffe7b0;padding:12px;display:grid;grid-template-columns:28px 1fr;align-items:center;font-family:var(--mono);min-height:58px;border-radius:4px}
.deck-message b{font-size:11px;font-weight:400}
.deck-message small{grid-column:2;font-size:9px;color:#d9c193;margin-top:4px}
.static-icon{grid-row:span 2;color:var(--mustard);font-size:18px}
.pads{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.pad{grid-column:span 2;min-height:84px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2);box-shadow:0 5px 0 var(--ink);display:grid;justify-items:center;align-content:center;gap:2px;padding:6px 4px;transition:transform .06s,box-shadow .06s,background .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.pad:nth-child(4),.pad:nth-child(5){grid-column:span 3}
.pad svg{width:30px;height:30px}
.pad b{font:500 10px var(--mono);letter-spacing:.08em}
.pad small{font:8px var(--mono);color:var(--tag)}
.pad-fryer{background:#fbd99a}.pad-beep{background:#ffd3c8}.pad-shake{background:#f1ead2}.pad-ding{background:#ffe7a0}.pad-icecream{background:#e6ded0;background-image:repeating-linear-gradient(135deg,transparent 0 10px,#2a1d140d 10px 14px)}
.pad.hit{transform:translateY(4px);box-shadow:0 1px 0 var(--ink);background:#fff}
.pad.hit.by-him{background:#fff6e4}
.meter{height:6px;background:#d8c594;margin:16px 0 12px;overflow:hidden;border-radius:3px}
.meter i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--mustard),var(--red));transition:width .12s}
.listen{width:100%;min-height:48px;border:0;background:var(--red);padding:0 14px;color:#fff;font:10px var(--mono);letter-spacing:.09em;display:flex;justify-content:space-between;align-items:center;border-radius:4px}
.listen[aria-pressed=true]{background:var(--ink)}
.listen span{font-size:15px}
.carries{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px}
.carries-label{grid-column:1/-1;font:9px var(--mono);letter-spacing:.1em}
.carry{border:1px solid var(--line);background:#f5e3ad;padding:14px 12px;text-align:left;transition:.25s;min-height:118px}
.carry svg{width:38px;height:38px;margin-bottom:8px}
.carry b,.carry small{display:block}
.carry b{font-size:12px}
.carry small{font:8px var(--mono);color:var(--tag);margin-top:5px}
.carry.found{border-color:var(--red);background:#fff0c4}
.toast{position:fixed;z-index:50;bottom:calc(var(--dock-h) + 14px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,24px);background:var(--ink);color:var(--paper2);padding:13px 16px;font:10px/1.5 var(--mono);opacity:0;transition:.3s;pointer-events:none;width:max-content;max-width:min(92vw,520px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* tour map */
.map-section{background:#f8e9bd;overflow:hidden}
.map-heading{text-align:center}
.map-heading>p{margin:0 auto}
.map-board{height:560px;max-width:1100px;margin:30px auto 0;position:relative;background:#f2dfa8;border:1px solid #b79555;border-radius:32px;overflow:hidden;box-shadow:inset 0 0 55px #c9a96733}
.map-board:before,.map-board:after{content:'';position:absolute;border:1px dashed #b9985a55;border-radius:50%;inset:26px 30px;pointer-events:none}
.map-board:after{inset:90px 60px;transform:rotate(-20deg)}
.map-paths{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.map-paths path{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:6 8;vector-effect:non-scaling-stroke}
.map-island{position:absolute;z-index:0;display:grid;place-items:center;gap:2px;opacity:.85}
.map-island svg{width:34px;height:34px;filter:drop-shadow(2px 3px 0 #2a1d1422)}
.map-island small{font:7px/1.5 var(--mono);letter-spacing:.06em;text-align:center;color:var(--ink);text-shadow:none}
.island-one{left:4%;top:5%}.island-two{right:6%;top:47%}.island-three{left:6%;top:48%}.island-four{right:5%;top:5%}
.map-pin{position:absolute;z-index:3;border:0;background:none;display:grid;justify-items:center;gap:5px;transition:.35s;padding:0}
.map-pin span{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--paper2);font:13px var(--mono);box-shadow:3px 4px 0 #2a1d1426}
.map-pin small{font:7px var(--mono);letter-spacing:.06em;background:var(--paper2);padding:4px 6px;border:1px solid var(--line);white-space:nowrap}
.map-pin.active{transform:scale(1.12) rotate(-5deg)}
.map-pin.active span{background:var(--red);color:#fff}
.pin-1{left:5%;top:24%}.pin-2{left:38%;top:8%}.pin-3{left:42%;top:38%}.pin-4{right:4%;top:22%}
.map-receipt{position:absolute;z-index:4;left:50%;bottom:24px;width:min(230px,66vw);padding:15px 15px 12px;background:#fffbf0;border:1px solid #2a1d1455;border-bottom:0;box-shadow:6px 7px 0 #2a1d141c;transform:translateX(-50%) rotate(2deg)}
.map-receipt:after{content:'';position:absolute;left:-1px;right:-1px;top:100%;height:9px;background:linear-gradient(135deg,#fffbf0 50%,transparent 50%) 0 0/12px 9px,linear-gradient(225deg,#fffbf0 50%,transparent 50%) 0 0/12px 9px}
.map-receipt>div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--ink);padding-bottom:7px;font:8px var(--mono);letter-spacing:.07em}
.map-receipt h3{font-size:21px;margin:10px 0 5px}
.map-receipt p{font-size:12px;line-height:1.55;margin:0 0 10px}
.map-receipt>small{font:7px var(--mono);color:#8d754b}
.map-wagie{position:absolute;z-index:2;width:34px;height:34px;left:8%;top:44%;transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s}
.map-wagie svg{width:34px;height:34px}
.map-stamp{display:none;position:absolute;right:3%;bottom:3%;font:7px/1.5 var(--mono);text-align:center;border:2px solid var(--red);color:var(--red);padding:7px;transform:rotate(-14deg);border-radius:50%}
.map-controls{max-width:1060px;margin:12px auto;display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);letter-spacing:.08em}
.map-controls button{border:0;background:none;font:inherit;min-height:44px;padding:0 6px}

/* ending */
.ending{position:relative;padding:72px 20px 0;background:var(--red);color:#fff4d6;overflow:hidden}
.ending:before{content:'';position:absolute;inset:-20%;background:repeating-linear-gradient(118deg,transparent 0 45px,#ffffff0d 46px 48px);transform:rotate(-5deg);pointer-events:none}
.ending-copy{position:relative;z-index:2;max-width:570px}
.ending .section-tag{color:#ffe2a8}
.ending h2 em{color:var(--mustard)}
.ending-copy>p{color:#ffeccc}
.ending .hero-buttons{flex-wrap:wrap;margin:24px 0}
.ending .button{flex:1 1 150px}
.ending .button.dark{background:var(--ink)}
.ending .button.sketch{border-color:#fff4d6}
.ending-art{position:relative;width:min(260px,68vw);aspect-ratio:1;margin:30px auto 90px;transform:rotate(6deg);border:3px solid var(--ink);box-shadow:12px 14px #7a140c66;background:var(--paper2)}
.ending-art img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;mix-blend-mode:multiply}
.ending-label{position:absolute;z-index:2;left:-3px;right:-3px;top:100%;background:var(--paper2);color:var(--ink);text-align:center;padding:10px;font:9px var(--mono);letter-spacing:.08em;border:3px solid var(--ink);border-top:0}
.ending-spark{position:absolute;right:8%;top:40px;font-size:46px;color:var(--mustard);animation:spin 35s linear infinite}
footer{position:relative;border-top:1px solid #ffffff55;padding:18px 0 22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;justify-content:space-between;font:8px var(--mono);letter-spacing:.09em}
footer a{min-height:44px;display:inline-flex;align-items:center}
footer span:nth-child(2){display:none}
.disclaimer{flex:1 1 100%;margin:0;font:8px/1.6 var(--mono);letter-spacing:.06em;opacity:.85}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:none}

/* stream mode (?stream=1) */
.stream-stage{display:none}
body.stream{padding:0;overflow:hidden;height:100vh}
body.stream .topbar,body.stream main,body.stream .ca-dock,body.stream .toast{display:none}
body.stream .stream-stage{display:grid;position:fixed;inset:0;z-index:20;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;padding:4vh 5vw;background:radial-gradient(ellipse at 30% 50%,#fff0c6 0%,#F7E6B5 52%,#efd38c 100%)}
.stream-art{display:grid;justify-items:center;gap:3vh}
.stream-portrait{width:min(74vh,42vw)}
.stream-chip{margin:0;font-size:clamp(10px,1.3vw,16px);border:0}
.stream-side h1{font:700 clamp(40px,5.6vw,96px)/.95 var(--serif);letter-spacing:-.05em;margin:2vh 0 1.4vh}
.stream-side .lede{font-size:clamp(14px,1.5vw,22px);max-width:none}
.stream-side .eyebrow{font-size:clamp(10px,1vw,14px)}
#deck-stream{margin:3vh 0}
#deck-stream .deck{padding:14px}
#deck-stream .listen,#deck-stream .meter{display:none}
#deck-stream .pads{grid-template-columns:repeat(5,1fr)}
#deck-stream .pad,#deck-stream .pad:nth-child(4),#deck-stream .pad:nth-child(5){grid-column:auto;min-height:clamp(70px,11vh,120px)}
#deck-stream .pattern{grid-template-rows:repeat(5,clamp(9px,1.3vh,16px))}
.stream-side,.stream-art{min-width:0}
.ca-stream{flex-wrap:wrap;justify-content:space-between;row-gap:6px;background:var(--ink);color:var(--paper2);padding:14px 18px;border-radius:8px;font-size:clamp(12px,1.4vw,20px)}
.ca-stream .ca-row{flex:1 1 100%}
.ca-stream .ca-text{font-size:clamp(12px,1.3vw,22px);white-space:normal;word-break:break-all;overflow:visible}
.ca-stream .ca-btns{gap:14px}
.ca-stream .ca-label{font-size:clamp(10px,1vw,15px)}
.ca-stream .preview-chip{flex:1 1 100%;color:var(--paper2);font-size:clamp(11px,1.2vw,18px)}
.stream-ticker{color:var(--mustard);letter-spacing:.06em}
.stream-site{opacity:.7}
@media (orientation:portrait){body.stream .stream-stage{grid-template-columns:1fr;align-content:center;gap:1.6vh;padding:2vh 4vw}.stream-portrait{width:min(34vh,64vw)}.stream-art{gap:1.2vh}.stream-side h1{font-size:clamp(30px,7vw,80px);margin:0 0 1vh}.stream-side .eyebrow,.stream-side .lede,#deck-stream .deck-message{display:none}#deck-stream{margin:1.4vh 0}#deck-stream .pad,#deck-stream .pad:nth-child(4),#deck-stream .pad:nth-child(5){min-height:clamp(60px,9vh,120px)}#deck-stream .pad small{display:none}}

/* tablet */
@media (min-width:600px){
  .topbar{padding:0 4vw}
  .sound span{display:inline;margin-left:6px;font:10px var(--mono)}
  .hero{padding:26px 6vw 40px}
  .hero-art{height:430px}
  .portrait{width:min(330px,52vw)}
  .scribble-halo{width:380px;height:400px}
  .note-b{display:block;bottom:12%;right:22%;transform:rotate(7deg)}
  .section{padding:96px 6vw}
  .carries{grid-template-columns:repeat(4,1fr)}
  .story-tab{font-size:9px}
  .map-board{height:520px;border-radius:46% 51% 43% 50%}
  .pin-1{left:11%;top:52%}.pin-2{left:35%;top:22%}.pin-3{left:59%;top:55%}.pin-4{right:9%;top:30%}
  .island-one{left:8%;top:22%}.island-two{left:33%;top:6%}.island-three{left:57%;bottom:8%;top:auto}.island-four{right:7%;top:12%}
  .map-receipt{left:44%;top:38%;bottom:auto;width:250px}
  .map-wagie{left:15%;top:62%}
  .map-stamp{display:block;right:4%;bottom:7%;font-size:9px}
  footer span:nth-child(2){display:inline}
}

/* desktop */
@media (min-width:900px){
  body{padding-bottom:0}
  .ca-dock{display:none}
  .toast{bottom:24px}
  section[id]{scroll-margin-top:82px}
  .topbar{height:82px;padding:0 5.5vw;position:sticky;top:0;background:#F7E6B5e6;backdrop-filter:blur(8px)}
  .wordmark{font-size:12px}
  nav{display:flex;gap:30px;font-size:12px;font-weight:700}
  nav a{opacity:.7;transition:.2s;padding:12px 0}
  nav a:hover{opacity:1;color:var(--red)}
  .top-actions{gap:10px}
  .sound,.social,.buy{padding:0 16px}
  .buy:hover,.button.dark:hover,.ca-buy:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
  .button.sketch:hover,.ca-copy:hover{background:var(--paper2);transform:translateY(-2px)}
  .hero{min-height:680px;height:calc(100vh - 82px);max-height:900px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto 1fr;column-gap:3vw;padding:0 8vw;align-items:center}
  .hero:before{width:760px;height:760px;right:-210px;top:-40px}
  .hero:after{width:490px;height:490px;right:-70px;top:90px}
  .hero-head{grid-column:1;grid-row:1/3;align-self:end;max-width:520px}
  .hero-actions{grid-column:1;grid-row:3;align-self:start;max-width:500px;margin-top:26px}
  .hero-art{grid-column:2;grid-row:1/4;height:min(620px,80vh);margin:0}
  .hero h1{font-size:clamp(58px,5.6vw,96px);margin:26px 0 18px}
  .lede{font-size:17px;line-height:1.65}
  .hero .button{flex:none;gap:22px;padding:0 19px}
  .portrait{width:min(440px,36vw)}
  .portrait:hover{transform:rotate(-1deg) scale(1.025)}
  .portrait img{mix-blend-mode:multiply}
  .scribble-halo{width:min(420px,38vw);height:min(440px,40vw);animation:halo 9s linear infinite}
  .note-a{top:10%;left:6%;right:auto;transform:rotate(-8deg)}
  .note-b{bottom:auto;top:54%;left:-4%;right:auto;transform:rotate(-6deg)}
  .hero-caption{display:block;position:absolute;bottom:2%;left:50%;transform:translateX(-50%);white-space:nowrap;font:8px var(--mono);letter-spacing:.13em}
  .mini-fryer{right:-2%;bottom:14%;transform:rotate(8deg) scale(1.15)}
  .wave-one{width:100px;height:100px;right:5%;top:24%}.wave-two{width:140px;height:140px;right:0;top:19%}
  .floaty{width:64px;height:64px}.floaty svg{width:54px;height:54px}
  .floaty:hover:after{opacity:1}
  .sticker-fries{top:16%;left:2%}.sticker-ice{top:18%;right:6%;left:auto}.sticker-burger{bottom:12%;left:3%}.sticker-ketchup{top:auto;bottom:34%;right:2%}
  .sun-doodle{top:6%;left:46%;font-size:52px}
  .cloud-one{top:8%;right:30%}.cloud-two{bottom:14%;left:34%}
  .nd-1{top:14%;right:auto;left:40%}.nd-2{bottom:22%;right:auto;left:44%}
  .spin-chip{width:max-content;max-width:100%;margin-top:28px;padding-top:14px}
  .ca-panel{display:flex;margin-top:18px;padding:10px 10px 10px 14px;border:2px solid var(--ink);background:var(--paper2);box-shadow:5px 6px 0 #2a1d141a;max-width:500px}
  .hero-bottom{display:flex;position:absolute;bottom:18px;left:5.5vw;right:5.5vw;justify-content:space-between;font:8px var(--mono);letter-spacing:.12em;color:#79664a}
  .section{padding:120px 8vw}
  .section h2{font-size:clamp(46px,5.4vw,74px)}
  .story{display:grid;grid-template-columns:.75fr 1.25fr;gap:6vw;align-items:center}
  .story-tabs{grid-template-columns:1fr;gap:5px;margin-top:30px}
  .story-tab{display:block;text-align:left;border:0;border-left:3px solid transparent;min-height:44px;padding:0 13px;font-size:9px;letter-spacing:.08em}
  .story-tab b{font-size:9px;margin-right:6px}
  .story-tab .t-short{display:none}.story-tab .t-long{display:inline}
  .story-tab:hover,.story-tab.active{background:#f2dfae;color:var(--ink);border-left-color:var(--red);padding-left:18px;box-shadow:none}
  .story-card{margin:0;grid-template-columns:1.1fr .9fr;transform:rotate(.5deg)}
  .story-card-top{grid-column:1/-1}
  .story-drawing{aspect-ratio:auto;min-height:330px}
  .story-text{padding:30px 28px}
  .story-side-note{display:block;position:absolute;right:3%;bottom:6%;font:9px/1.6 var(--mono);transform:rotate(8deg);color:var(--red)}
  .deck-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px 7vw;align-items:center}
  .deck-head{margin:0}
  .deck{padding:24px}
  .pattern{grid-template-rows:repeat(5,11px)}
  .pads{grid-template-columns:repeat(5,1fr)}
  .pad,.pad:nth-child(4),.pad:nth-child(5){grid-column:auto;min-height:96px}
  .pad:hover{background:#fff}
  .carries{grid-column:1/-1}
  .carry:hover{transform:translateY(-5px) rotate(-1deg);background:#fff0bf}
  .map-controls button:hover,.next-story:hover{color:var(--red)}
  .ending{padding:100px 10vw 0;min-height:600px}
  .ending .button{flex:none}
  .ending-art{position:absolute;right:12%;top:70px;width:300px;margin:0}
  .ending-spark{right:33%;top:12%;font-size:60px}
  .ending-copy{padding-bottom:120px}
  footer{position:absolute;left:0;right:0;bottom:0;padding:21px 5.5vw}
}

/* phones and low-power: lighter effects */
@media (max-width:899px){.floaty{animation-duration:6s}.note-doodle,.sun-doodle{animation:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}