/* Self-hosted fonts (OFL), latin + latin-ext. License: /assets/fonts/OFL.txt */
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lilita-one-normal-latin-ext.v1.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lilita-one-normal-latin.v1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/instrument-sans-normal-latin-ext.v1.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/instrument-sans-normal-latin.v1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/jetbrains-mono-normal-latin-ext.v1.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/jetbrains-mono-normal-latin.v1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =============================================================
   $BAG: the whole site is a kraft-paper takeout bag.
   Grease lives on the edges, corners and decorative layers.
   Text, numbers, the CA chip and buttons always sit on clean surfaces.
   ============================================================= */
:root {
  /* shared design tokens (the mini-game uses these too) */
  --kraft:#c49a6c; --kraft-2:#a87c4f; --kraft-light:#e3c9a2; --kraft-dark:#7a5532;
  --grease:rgba(92,58,20,.32); --grease-sheen:#fff3cf;
  --ink:#2a1a0e; --paper:#fffaf0; --adobo:#a8361c;
  --foil:#c9cdd3; --foil-2:#eef0f3; --cilantro:#3f7d33; --lime:#b8d63a;
  --font-display:'Lilita One','Arial Black','Segoe UI Black',Impact,system-ui,sans-serif;
  --font-body:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* site-only */
  --ink-2:#4a3020; --ink-3:#5a3d22; --adobo-2:#8a2a14; --cream:#f3e3c8; --shadow:rgba(42,26,14,.28);
  --gutter:max(clamp(20px, 4vw, 56px), calc(env(safe-area-inset-left, 0px) + 12px), calc(env(safe-area-inset-right, 0px) + 12px));
  --maxw:1200px; --nav-h:68px; --safe-bottom:env(safe-area-inset-bottom, 0px);
  --ease:cubic-bezier(.3,.7,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-pop:cubic-bezier(.2,1.6,.4,1);
  --focus:var(--ink);
  --tex-fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E %3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .07 0 0 0 .55 -.2'/%3E%3C/filter%3E %3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07 .8' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .27 0 0 0 0 .16 0 0 0 0 .06 0 0 0 4.2 -3.05'/%3E%3C/filter%3E %3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8 .07' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .84 0 0 0 3.2 -2.42'/%3E%3C/filter%3E %3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .07 0 0 0 3.4 -2.5'/%3E%3C/filter%3E %3Crect width='320' height='320' filter='url(%23m)'/%3E%3Crect width='320' height='320' filter='url(%23a)'/%3E%3Crect width='320' height='320' filter='url(%23b)'/%3E%3Crect width='320' height='320' filter='url(%23c)'/%3E %3C/svg%3E"); --tex-crinkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E %3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E %3CfeTurbulence type='turbulence' baseFrequency='.0055' numOctaves='3' seed='9' stitchTiles='stitch' result='t'/%3E %3CfeDiffuseLighting in='t' surfaceScale='4' diffuseConstant='1' lighting-color='%23fff' result='l'%3E%3CfeDistantLight azimuth='230' elevation='52'/%3E%3C/feDiffuseLighting%3E %3CfeColorMatrix in='l' values='0 0 0 0 .22 0 0 0 0 .13 0 0 0 0 .05 -1.25 0 0 0 .93' result='s'/%3E %3CfeColorMatrix in='l' values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .86 1.5 0 0 0 -1.2' result='h'/%3E %3CfeMerge%3E%3CfeMergeNode in='s'/%3E%3CfeMergeNode in='h'/%3E%3C/feMerge%3E %3C/filter%3E %3Crect width='720' height='720' filter='url(%23c)'/%3E %3C/svg%3E"); --tex-stamp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E %3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 7.9'/%3E%3C/filter%3E %3Crect width='240' height='240' filter='url(%23s)'/%3E %3C/svg%3E");
  --stain-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.017' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='46' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E %3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%237a4a10' stop-opacity='.26'/%3E%3Cstop offset='.6' stop-color='%236a3c0c' stop-opacity='.32'/%3E%3Cstop offset='.86' stop-color='%234a2806' stop-opacity='.58'/%3E%3Cstop offset='.94' stop-color='%234a2806' stop-opacity='.3'/%3E%3Cstop offset='1' stop-color='%234a2806' stop-opacity='0'/%3E%3C/radialGradient%3E %3Cg filter='url(%23f)'%3E%3Ccircle cx='96' cy='102' r='64' fill='url(%23g)'/%3E%3Ccircle cx='152' cy='56' r='14' fill='url(%23g)'/%3E%3Ccircle cx='162' cy='140' r='8' fill='url(%23g)'/%3E%3Ccircle cx='42' cy='152' r='10' fill='url(%23g)'/%3E%3Ccircle cx='60' cy='40' r='5' fill='url(%23g)'/%3E%3C/g%3E %3C/svg%3E"); --stain-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.021' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='52' xChannelSelector='G' yChannelSelector='R'/%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E %3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%237a4a10' stop-opacity='.24'/%3E%3Cstop offset='.62' stop-color='%236a3c0c' stop-opacity='.32'/%3E%3Cstop offset='.88' stop-color='%234a2806' stop-opacity='.56'/%3E%3Cstop offset='1' stop-color='%234a2806' stop-opacity='0'/%3E%3C/radialGradient%3E %3Cg filter='url(%23f)'%3E%3Cellipse cx='100' cy='100' rx='74' ry='46' transform='rotate(-24 100 100)' fill='url(%23g)'/%3E%3Cellipse cx='54' cy='150' rx='16' ry='11' fill='url(%23g)'/%3E%3Ccircle cx='160' cy='48' r='9' fill='url(%23g)'/%3E%3Ccircle cx='146' cy='158' r='6' fill='url(%23g)'/%3E%3C/g%3E %3C/svg%3E"); --stain-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='2' seed='21'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='26' xChannelSelector='R' yChannelSelector='B'/%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E %3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%236b4416' stop-opacity='.12'/%3E%3Cstop offset='.7' stop-color='%235c3a14' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%234a2c0c' stop-opacity='.28'/%3E%3C/radialGradient%3E %3Cg filter='url(%23f)'%3E%3Ccircle cx='100' cy='100' r='60' fill='url(%23g)'/%3E%3Ccircle cx='100' cy='100' r='62' fill='none' stroke='%234a2c0c' stroke-opacity='.4' stroke-width='7'/%3E%3Cpath d='M150 128c10 8 22 10 30 6' stroke='%234a2c0c' stroke-opacity='.3' stroke-width='9' stroke-linecap='round' fill='none'/%3E%3C/g%3E %3C/svg%3E");
  --sheen-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E %3Cg filter='url(%23b)' fill='%23fff3cf'%3E%3Cpath d='M58 92c8-26 30-40 60-40' stroke='%23fff3cf' stroke-width='7' fill='none' stroke-linecap='round' opacity='.8'/%3E%3Cellipse cx='70' cy='122' rx='7' ry='3.4' opacity='.6' transform='rotate(-30 70 122)'/%3E%3Cellipse cx='147' cy='51' rx='4.5' ry='2.6' opacity='.85'/%3E%3Ccircle cx='122' cy='70' r='2.4' opacity='.9'/%3E%3C/g%3E %3C/svg%3E"); --sheen-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E %3Cg filter='url(%23b)' fill='%23fff3cf'%3E%3Cpath d='M52 104c14-22 44-40 82-42' stroke='%23fff3cf' stroke-width='6' fill='none' stroke-linecap='round' opacity='.75'/%3E%3Cellipse cx='104' cy='118' rx='10' ry='3' opacity='.5' transform='rotate(-24 104 118)'/%3E%3Ccircle cx='158' cy='45' r='3' opacity='.85'/%3E%3C/g%3E %3C/svg%3E"); --sheen-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E %3Cg filter='url(%23b)' fill='none' stroke='%23fff3cf' stroke-linecap='round'%3E%3Cpath d='M54 82c10-20 28-32 50-34' stroke-width='6' opacity='.75'/%3E%3Cpath d='M150 140c-6 8-14 14-24 17' stroke-width='4' opacity='.5'/%3E%3C/g%3E %3C/svg%3E");
  --edge-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 600' preserveAspectRatio='none'%3E %3Cfilter id='f' x='-20%25' y='-5%25' width='140%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .012' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='60' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E %3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%234a2c0c' stop-opacity='.5'/%3E%3Cstop offset='.55' stop-color='%235c3a14' stop-opacity='.3'/%3E%3Cstop offset='.82' stop-color='%234a2c0c' stop-opacity='.36'/%3E%3Cstop offset='1' stop-color='%234a2c0c' stop-opacity='0'/%3E%3C/linearGradient%3E %3Crect x='-40' y='-30' width='112' height='660' fill='url(%23g)' filter='url(%23f)'/%3E %3C/svg%3E"); --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V13L388 16 375 11 362 17 350 12 336 19 324 13 311 16 298 10 286 17 271 12 260 18 246 13 233 15 222 9 208 16 196 12 183 19 170 13 158 16 146 11 132 18 120 13 108 17 95 10 82 16 70 12 57 19 44 13 31 16 19 11 8 17 0 13Z'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; background: var(--kraft); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); overflow-x: clip; scrollbar-color: var(--kraft-dark) var(--kraft-light); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--kraft); color: var(--ink); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
code, .mono { font-family: var(--font-mono); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 999; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; font-weight: 700; transition: top .2s; }
.skip:focus { top: 12px; }
[data-launch="pre"] .only-live, [data-launch="live"] .only-pre { display: none !important; }
.wrap { position: relative; z-index: 2; width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- paper surfaces ---------- */
.kraft {
  --bg: var(--kraft);
  background-color: var(--bg);
  background-image:
    var(--tex-fibre),
    linear-gradient(90deg, transparent calc(33% - 3px), rgba(74,44,12,.10) calc(33% - 1px), rgba(255,243,207,.16) calc(33% + 1px), transparent calc(33% + 3px)),
    linear-gradient(90deg, transparent calc(71% - 3px), rgba(255,243,207,.13) calc(71% - 1px), rgba(74,44,12,.09) calc(71% + 1px), transparent calc(71% + 3px)),
    var(--tex-crinkle);
  background-size: 320px 320px, 100% 100%, 100% 100%, 720px 720px;
}
.kraft--light { --bg: var(--kraft-light); }
.kraft--dark { --bg: var(--kraft-2); }
[data-fx="low"] .kraft { background-image: var(--tex-fibre); background-size: 320px 320px; }
/* "clean" = guaranteed readable surface: solid paper, no grease, ever */
.clean { background-color: var(--paper); color: var(--ink); }

/* ---------- staples ---------- */
.staple { position: absolute; z-index: 3; width: 38px; height: 9px; border-radius: 3px; background: linear-gradient(180deg, var(--foil-2), var(--foil) 55%, #9aa0a8); box-shadow: 0 0 0 1.5px rgba(42,26,14,.55), 0 3px 3px -1px rgba(42,26,14,.45), inset 0 1px 0 #fff; transform: rotate(var(--sr, -4deg)); }
.staple::before, .staple::after { content: ""; position: absolute; top: 2px; width: 4px; height: 5px; border-radius: 1px; background: rgba(42,26,14,.55); }
.staple::before { left: 3px; } .staple::after { right: 3px; }

/* ---------- grease stains (decor only) ---------- */
.stain { position: absolute; z-index: 0; left: var(--x, 0); top: var(--y, 0); width: var(--w, 300px); aspect-ratio: 1; pointer-events: none; transform: rotate(var(--r, 0deg)); }
.stain::before, .stain::after { content: ""; position: absolute; inset: 0; background: var(--stain-a) center/100% 100% no-repeat; }
.stain::after { background-image: var(--sheen-a); opacity: .75; }
.stain--b::before { background-image: var(--stain-b); } .stain--b::after { background-image: var(--sheen-b); }
.stain--c::before { background-image: var(--stain-c); } .stain--c::after { background-image: var(--sheen-c); opacity: .45; }
[data-fx="high"] .stain::before { mix-blend-mode: multiply; }
/* bloom in when the section comes into view (grease.js adds .is-in); visible by default without JS */
.js:not(.static-fx) .stain::before, .js:not(.static-fx) .stain::after { transform: scale(.42); opacity: 0; transition: transform 3.6s cubic-bezier(.2,.7,.2,1) var(--d, 0s), opacity 2.4s ease var(--d, 0s); }
.js:not(.static-fx) .stain.is-in::before { transform: scale(1); opacity: 1; }
.js:not(.static-fx) .stain.is-in::after { transform: scale(1); opacity: .75; }
.js:not(.static-fx) .stain--c.is-in::after { opacity: .45; }
/* slow creep + wet shimmer on capable devices; paused offscreen */
[data-fx="high"]:not(.static-fx) .stain.is-soaked::before { animation: creep 16s ease-in-out infinite alternate; }
[data-fx="high"]:not(.static-fx) .stain.is-soaked::after { animation: shimmer 5.5s ease-in-out infinite alternate; }
.is-off .stain::before, .is-off .stain::after { animation-play-state: paused !important; }
@keyframes creep { from { transform: scale(1); } to { transform: scale(1.06) rotate(2deg); } }
@keyframes shimmer { 0% { opacity: .45; transform: translate(0,0); } 100% { opacity: .9; transform: translate(1.5%, -1%); } }

/* grease drips running down from the folded top */
.drip { position: absolute; z-index: 0; top: 0; left: var(--x); width: 9px; height: var(--h, 90px); border-radius: 0 0 9px 9px; background: linear-gradient(180deg, rgba(74,44,12,.34), rgba(92,58,20,.26) 80%, rgba(92,58,20,.0)); pointer-events: none; transform-origin: top; }
.drip::after { content: ""; position: absolute; left: 1px; bottom: 6px; width: 7px; height: 11px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: radial-gradient(circle at 40% 35%, rgba(255,243,207,.75), rgba(255,243,207,0) 45%), rgba(74,44,12,.32); }
[data-fx="high"]:not(.static-fx) .drip { animation: drip 9s cubic-bezier(.5,0,.5,1) var(--d, 0s) infinite; }
.is-off .drip { animation-play-state: paused !important; }
@keyframes drip { 0%, 12% { transform: scaleY(.3); } 70%, 100% { transform: scaleY(1); } }

/* ---------- torn edges between sections (the previous paper hangs over) ---------- */
.torn::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: -1px; height: 22px; background: var(--prev, var(--kraft)); -webkit-mask: var(--torn) 0 0/420px 100% repeat-x; mask: var(--torn) 0 0/420px 100% repeat-x; filter: drop-shadow(0 3px 2px rgba(42,26,14,.25)); pointer-events: none; }
[data-fx="low"] .torn::before { filter: none; }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--paper); padding: 7px 12px; border-radius: 6px; box-shadow: 0 0 0 2px var(--ink); transform: rotate(-1deg); }
.eyebrow--light { color: var(--ink); }
.h2 { font: 400 clamp(44px, 6.4vw, 92px)/.94 var(--font-display); letter-spacing: -.005em; color: var(--ink); margin-top: 18px; text-wrap: balance; }
.h2--light { color: var(--paper); }
.h2--xl { font-size: clamp(64px, 12vw, 180px); }
.h2 .hl { color: var(--adobo-2); }
.h3 { font: 400 clamp(22px, 2.1vw, 28px)/1.1 var(--font-display); color: var(--ink); letter-spacing: .005em; }
.lede { margin-top: 20px; max-width: 40em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }
.lede.clean { padding: 16px 20px; border-radius: 12px; box-shadow: 0 0 0 2px rgba(42,26,14,.14), 0 10px 22px -14px var(--shadow); }
.lede--light { color: var(--cream); }
.section-head { position: relative; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-head--center .lede { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn { --b: var(--ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 12px; font: 700 16px/1 var(--font-body); letter-spacing: .005em; white-space: nowrap; color: var(--ink); background: var(--paper); border: 2px solid var(--b); box-shadow: 0 4px 0 var(--b); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s; -webkit-tap-highlight-color: transparent; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--b); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--b); }
.btn--red { background: var(--adobo); color: var(--paper); }
.btn--red:hover { background: #b93d20; }
.btn--ink { background: var(--ink); color: var(--paper); --b: #120a04; }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--lg { height: 60px; padding: 0 28px; font-size: 18px; border-radius: 14px; }
.btn--sm { height: 42px; padding: 0 16px; font-size: 14px; border-radius: 10px; box-shadow: 0 3px 0 var(--b); }
.btn--icon { width: 60px; padding: 0; }
.btn--icon svg { width: 22px; height: 22px; }
.btn.is-soon { cursor: help; }
.btn--red.is-soon { background: var(--paper); color: var(--ink); border-style: dashed; box-shadow: none; }

/* ---------- status chip ---------- */
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); font: 700 13px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--cilantro); box-shadow: 0 0 0 0 rgba(63,125,51,.5); flex: none; }
:root:not(.static-fx) .pulse { animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(63,125,51,.55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(63,125,51,0); } }

/* ---------- CA chip ---------- */
.ca { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 6px 6px 6px 16px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink), 0 5px 0 var(--ink); }
.ca__label { font: 700 13px/1 var(--font-mono); letter-spacing: .14em; color: var(--adobo-2); flex: none; }
.ca__value { font: 600 14px/1 var(--font-mono); letter-spacing: .02em; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca[data-state="empty"] .ca__value { font: 600 15px/1.2 var(--font-body); letter-spacing: 0; color: var(--ink-2); }
.ca__copy { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 700 14px/1 var(--font-body); flex: none; transition: background .25s, transform .3s var(--ease-spring); }
.ca__copy:hover { background: var(--adobo-2); }
.ca__copy:active { transform: scale(.94); }
.ca__copy svg { width: 16px; height: 16px; }
.ca__copy .i-check { display: none; }
.ca.is-copied .ca__copy { background: var(--cilantro); }
.ca.is-copied .i-copy { display: none; } .ca.is-copied .i-check { display: block; }
.ca.is-manual .ca__value { white-space: normal; word-break: break-all; user-select: all; -webkit-user-select: all; text-overflow: clip; }
.ca--lg { padding: 8px 8px 8px 22px; gap: 16px; }
.ca--lg .ca__value { font-size: clamp(13px, 1.3vw, 17px); }
.ca--lg .ca__copy { height: 50px; padding: 0 20px; }

/* =============================================================
   NAV: the folded-over top of the bag
   ============================================================= */
.nav { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); color: var(--paper); background-color: var(--kraft-dark); background-image: var(--tex-fibre), linear-gradient(180deg, rgba(255,243,207,.08), rgba(42,26,14,.18)); background-size: 320px 320px, 100% 100%; transition: transform .5s var(--ease); --focus: var(--paper); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: var(--kraft-dark); -webkit-mask: conic-gradient(from 135deg at top, #000 90deg, #0000 0) 50% 0/16px 100%; mask: conic-gradient(from 135deg at top, #000 90deg, #0000 0) 50% 0/16px 100%; filter: drop-shadow(0 3px 2px rgba(42,26,14,.3)); }
.nav.is-hidden { transform: translateY(calc(-100% - 12px)); }
.nav__grease { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, rgba(255,243,207,.0), var(--grease-sheen)); transform-origin: left; transform: scaleX(0); opacity: .8; }
.brand { display: inline-flex; align-items: center; gap: 12px; font: 400 24px/1 var(--font-display); letter-spacing: .02em; color: var(--paper); flex: none; }
.brand__chip { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; background: var(--kraft); box-shadow: 0 0 0 2px var(--paper); display: grid; place-items: center; }
.brand__chip b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 15px/1 var(--font-display); color: var(--ink); }
.brand__chip img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.brand__chip img.is-broken { display: none; }
.nav__links { display: none; gap: 4px; }
.nav__links a { padding: 10px 14px; border-radius: 8px; font: 700 15px/1 var(--font-body); color: var(--paper); transition: background .2s; }
.nav__links a:hover { background: rgba(255,250,240,.14); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav .btn { --b: #1d1108; }
.soundbtn { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--paper); box-shadow: inset 0 0 0 2px rgba(255,250,240,.55); transition: background .2s; }
.soundbtn:hover { background: rgba(255,250,240,.14); }
.soundbtn svg { width: 22px; height: 22px; }
.soundbtn .i-sound__on { display: none; }
.soundbtn[aria-pressed="true"] .i-sound__on { display: inline; } .soundbtn[aria-pressed="true"] .i-sound__off { display: none; }
.nav__menu { position: relative; }
.nav__menu summary { list-style: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-content: center; gap: 6px; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,250,240,.55); }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu summary span { display: block; width: 18px; height: 2px; background: var(--paper); border-radius: 2px; transition: transform .3s; }
.nav__menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__sheet { position: absolute; right: 0; top: calc(100% + 16px); min-width: 220px; padding: 10px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink), 0 18px 40px -12px rgba(42,26,14,.5); display: grid; --focus: var(--ink); }
.nav__sheet a { padding: 12px 14px; border-radius: 8px; font: 700 17px/1.1 var(--font-body); color: var(--ink); }
.nav__sheet a:hover { background: var(--kraft-light); }
@media (min-width: 1100px) { .nav__links { display: flex; } .nav__menu { display: none; } }
@media (max-width: 420px) { .brand__word { display: none; } }

/* =============================================================
   GREASE OVERLAYS (fixed, decorative, never over panels)
   ============================================================= */
.soak { --k: .15; --ew: max(10px, min(110px, calc((100vw - var(--maxw)) / 2 - 6px))); position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.soak__e { position: absolute; top: 0; bottom: 0; width: var(--ew); background: var(--edge-v) 0 0/100% 640px repeat-y; transform-origin: left; transform: scaleX(calc(.35 + var(--k) * .65)); opacity: calc(.25 + var(--k) * .75); }
.soak__e--l { left: 0; }
.soak__e--r { right: 0; transform-origin: right; scale: -1 1; }
.soak__c { position: absolute; bottom: 0; width: clamp(140px, 16vw, 260px); aspect-ratio: 1; background: var(--stain-a) center/100% no-repeat; opacity: var(--k); display: none; }
.soak__c--bl { left: 0; transform: translate(calc(-62% + var(--k) * 22%), calc(62% - var(--k) * 22%)) rotate(30deg); }
.soak__c--br { right: 0; transform: translate(calc(62% - var(--k) * 22%), calc(62% - var(--k) * 22%)) rotate(-140deg); background-image: var(--stain-b); }
@media (min-width: 1360px) { .soak__c { display: block; } }
.static-fx .soak { --k: .45 !important; }
[data-fx="low"] .soak { display: none; }

.smudge { position: fixed; inset: 0; z-index: 39; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.smudge.is-on { visibility: visible; }

.gauge { --k: 0; position: fixed; z-index: 60; left: 12px; bottom: calc(16px + var(--safe-bottom)); width: 52px; display: none; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 12px; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); transform: rotate(-2deg); }
.gauge__t { order: 3; font: 700 9.5px/1.1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.gauge__tube { order: 2; position: relative; width: 16px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--kraft-light); box-shadow: inset 0 0 0 2px var(--ink); }
.gauge__fill { position: absolute; inset: 2px; border-radius: 6px; transform-origin: bottom; transform: scaleY(var(--k)); background: linear-gradient(90deg, #7a4a16, #b07a33 40%, var(--grease-sheen) 55%, #9a6526 70%, #6b3f12); }
.gauge__ticks { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(42,26,14,.5) 13px 14px); }
.gauge__v { order: 1; font: 700 13px/1 var(--font-mono); }
@media (min-width: 1360px) { .gauge { display: flex; } }

/* =============================================================
   HERO: the front of the bag
   ============================================================= */
.hero { position: relative; overflow: hidden; overflow: clip; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + clamp(36px, 6vw, 72px)) 0 clamp(64px, 8vw, 110px); display: flex; align-items: center; }
.hero__gusset { position: absolute; z-index: 1; top: 0; bottom: 0; width: 22px; pointer-events: none; }
.hero__gusset--l { left: 2.4%; background: linear-gradient(90deg, rgba(255,243,207,.0), rgba(255,243,207,.22) 40%, rgba(74,44,12,.2) 60%, rgba(74,44,12,0)); }
.hero__gusset--r { right: 2.4%; background: linear-gradient(90deg, rgba(74,44,12,0), rgba(74,44,12,.2) 40%, rgba(255,243,207,.22) 60%, rgba(255,243,207,0)); }
.hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.hero__title { position: relative; display: flex; flex-direction: column; line-height: .8; color: var(--ink); margin: 6px 0 0; }
.hero__the { font: 400 clamp(40px, 6vw, 84px)/.9 var(--font-display); letter-spacing: .04em; margin-left: .06em; }
.hero__bag { display: flex; font: 400 clamp(136px, 21vw, 300px)/.8 var(--font-display); letter-spacing: -.01em; text-shadow: .035em .035em 0 var(--adobo); }
.hero__the, .hero__bag { -webkit-mask: var(--tex-stamp) 0 0/240px 240px; mask: var(--tex-stamp) 0 0/240px 240px; }
.hero__bag .l { display: inline-block; transform-origin: 50% 90%; }
.ticker-sticker { position: absolute; right: -.6em; top: .2em; font: 400 clamp(22px, 2.6vw, 36px)/1 var(--font-display); color: var(--paper); background: var(--adobo); padding: .32em .5em .26em; border-radius: 10px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink), 0 8px 14px -6px rgba(42,26,14,.5); transform: rotate(9deg); letter-spacing: .02em; }
.slip { position: relative; display: flex; flex-direction: column; gap: 6px; max-width: 30rem; padding: 16px 22px 22px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 20px -12px var(--shadow); transform: rotate(-1.6deg); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
.slip__k { font: 700 12px/1 var(--font-mono); letter-spacing: .2em; color: var(--adobo-2); }
.slip__t { font: 400 clamp(26px, 2.8vw, 36px)/1.05 var(--font-display); }
.slip__t b { font-weight: 400; color: var(--adobo-2); }
.staple--slip { top: 6px; right: 18px; --sr: 6deg; }
.hero__copy { max-width: 34rem; padding: 18px 22px; border-radius: 14px; box-shadow: 0 0 0 2px rgba(42,26,14,.16), 0 12px 24px -16px var(--shadow); font-size: 17px; line-height: 1.55; }
.hero__copy-k { margin-top: 8px; font: 400 21px/1.2 var(--font-display); color: var(--adobo-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.hero .ca { margin-top: 4px; }

/* stage + mascot */
.stage { --lid: 30.5%; position: relative; justify-self: center; width: min(480px, 88vw); display: flex; flex-direction: column; align-items: center; }
.stage__shadow { position: absolute; z-index: 0; left: 50%; bottom: 58px; width: 74%; height: 50px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(42,26,14,.42), rgba(42,26,14,0)); }
.mascot { position: relative; z-index: 1; display: block; width: 100%; border-radius: 24px; -webkit-tap-highlight-color: transparent; cursor: pointer; touch-action: manipulation; }
.mascot:focus-visible { outline-offset: 8px; }
.mascot__tilt, .mascot__squash, .mascot__breathe, .mascot__art { display: block; position: relative; }
.mascot__tilt { transform-style: flat; transition: transform .6s var(--ease); }
.mascot__squash { transform-origin: 50% 96%; }
.mascot__breathe { transform-origin: 50% 96%; }
:root:not(.static-fx) .mascot__breathe { animation: breathe 3.6s ease-in-out infinite; }
.is-off .mascot__breathe { animation-play-state: paused !important; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.03) ; } }
.mascot__art { width: 100%; aspect-ratio: 3 / 4; perspective: 700px; }
.mascot__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 18px 14px rgba(42,26,14,.28)); }
.mascot__body { clip-path: inset(var(--lid) 0 0 0); }
.mascot__lid { clip-path: inset(0 0 calc(100% - var(--lid) - .8%) 0); transform-origin: 50% var(--lid); transition: transform .5s var(--ease-spring); }
.mascot__mouth { position: absolute; left: 15%; right: 15%; top: calc(var(--lid) - 4.5%); height: 9%; border-radius: 50%; background: radial-gradient(closest-side, #120a04, #2a1a0e 60%, rgba(42,26,14,0)); opacity: 0; transition: opacity .25s; }
.mascot.is-open .mascot__mouth { opacity: 1; }
.mascot.is-open .mascot__lid { transform: translateY(-9%) rotateX(58deg) rotate(-7deg); transition: transform .22s var(--ease-pop); }
/* grease blooming through the bag after a long hover (masked to the bag's silhouette) */
.mascot__bloom { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(/assets/mascot.webp) center/contain no-repeat; mask: url(/assets/mascot.webp) center/contain no-repeat; }
[data-fx="high"] .mascot__bloom { mix-blend-mode: multiply; }
.mascot__bloom i { position: absolute; width: 46%; aspect-ratio: 1; background: center/100% no-repeat; transform: scale(0) rotate(var(--br, 0deg)); opacity: 0; transition: transform 4.2s cubic-bezier(.15,.7,.2,1), opacity 1.6s ease; }
.mascot__bloom i::after { content: ""; position: absolute; inset: 0; background: var(--sheen-a) center/100% no-repeat; opacity: .7; }
.mascot__bloom i:nth-child(1) { left: 26%; top: 58%; --br: 20deg; }
.mascot__bloom i:nth-child(2) { left: 58%; top: 40%; width: 34%; --br: -60deg; }
.mascot__bloom i:nth-child(3) { left: 4%; top: 40%; width: 32%; --br: 110deg; }
.mascot__bloom i.is-on { transform: scale(1) rotate(var(--br, 0deg)); opacity: 1; background-image: url(/assets/stain-1.png); }
.mascot__bloom i.is-on:nth-child(2) { background-image: url(/assets/stain-2.png); }
.mascot__bloom i.is-on:nth-child(3) { background-image: url(/assets/stain-3.png); }
.mascot__fallback { display: none; position: absolute; inset: 4% 6%; width: 88%; height: 92%; filter: drop-shadow(0 18px 14px rgba(42,26,14,.28)); }
.mascot__fallback .fb-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .5s var(--ease-spring); }
.mascot.is-open .mascot__fallback .fb-lid { transform: translateY(-14px) rotate(-10deg); transition-duration: .2s; }
.stage.art-missing .mascot__art img, .stage.art-missing .mascot__bloom, .stage.art-missing .mascot__mouth { display: none; }
.stage.art-missing .mascot__fallback { display: block; }
.bubble { position: absolute; z-index: 3; left: -4%; top: 4%; max-width: 15rem; padding: 12px 16px; border-radius: 16px; background: var(--paper); color: var(--ink); font: 400 20px/1.1 var(--font-display); box-shadow: 0 0 0 2px var(--ink), 0 5px 0 var(--ink); transform: scale(0) rotate(-6deg); transform-origin: 80% 100%; opacity: 0; pointer-events: none; transition: transform .35s var(--ease-pop), opacity .2s; }
.bubble::after { content: ""; position: absolute; right: 26px; bottom: -11px; width: 18px; height: 18px; background: var(--paper); box-shadow: 2px 2px 0 0 var(--ink); transform: rotate(45deg); }
.bubble.is-on { transform: scale(1) rotate(-6deg); opacity: 1; }
.pop { position: absolute; z-index: 2; left: 50%; top: 20%; width: 0; height: 0; pointer-events: none; }
.pop i { position: absolute; left: -3px; top: -34px; width: 6px; height: 24px; border-radius: 3px; background: var(--ink); transform-origin: 50% 34px; opacity: 0; }
.pop i:nth-child(1) { rotate: -80deg; } .pop i:nth-child(2) { rotate: -55deg; } .pop i:nth-child(3) { rotate: -30deg; } .pop i:nth-child(4) { rotate: -8deg; }
.pop i:nth-child(5) { rotate: 12deg; } .pop i:nth-child(6) { rotate: 34deg; } .pop i:nth-child(7) { rotate: 58deg; } .pop i:nth-child(8) { rotate: 82deg; }
.pop.is-on i { animation: popline .5s var(--ease) both; }
@keyframes popline { 0% { opacity: 0; transform: translateY(0) scaleY(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scaleY(1); } }
.stage__count { position: relative; z-index: 2; margin-top: 4px; padding: 6px 12px; border-radius: 8px; background: var(--paper); font: 700 13px/1 var(--font-mono); letter-spacing: .06em; box-shadow: 0 0 0 2px var(--ink); }
.stage__hint { position: relative; z-index: 2; margin-top: 10px; padding: 6px 12px; border-radius: 8px; background: var(--paper); font: 600 14px/1.3 var(--font-body); color: var(--ink-2); text-align: center; }
.hint--touch { display: none; }
@media (hover: none) { .hint--fine { display: none; } .hint--touch { display: inline; } }
.flyer { position: fixed; z-index: 70; left: 0; top: 0; width: 34px; height: 34px; pointer-events: none; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .stage { width: min(480px, 100%); }
}
@media (max-width: 899px) {
  .hero__text { align-items: center; text-align: center; }
  .hero__title { align-items: center; }
  .ticker-sticker { right: -.35em; top: .1em; }
  .hero__cta { justify-content: center; }
  .slip { align-self: center; }
  .stage { order: 0; }
  .hero__text { display: contents; }
  .hero__grid { justify-items: center; row-gap: 20px; }
  .hero__status { order: -3; } .hero__title { order: -2; } .stage { order: -1; margin-top: -8px; width: min(380px, 82vw); }
}
@media (max-width: 480px) {
  .hero__bag { font-size: clamp(120px, 38vw, 168px); }
  .hero__cta .btn--lg { flex: 1 1 100%; }
  .hero .ca { width: 100%; }
  .bubble { left: -2%; top: 0; font-size: 17px; max-width: 12rem; }
}

/* =============================================================
   ORDER SCREEN MARQUEE
   ============================================================= */
.screens { position: relative; z-index: 4; padding: 22px 0 30px; background: #1d1209; overflow: hidden; overflow: clip; --focus: var(--paper); }
.screen { display: flex; align-items: stretch; margin: 0 var(--gutter); border-radius: 12px; overflow: hidden; background: #0f0905; box-shadow: 0 0 0 3px #3a2616, inset 0 0 0 1px #000; }
.screen__tag { flex: none; display: grid; place-items: center; padding: 0 16px; background: var(--adobo); color: var(--paper); font: 700 13px/1 var(--font-mono); letter-spacing: .16em; }
.screen__win { position: relative; flex: 1; min-width: 0; overflow: hidden; padding: 14px 0; }
.screen__win::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, transparent 1px 4px); }
.marquee { display: flex; width: max-content; }
.marquee__row { display: flex; align-items: center; flex: none; }
.marquee__row > * { flex: none; }
.screen .marquee__row { font: 700 clamp(18px, 2.2vw, 28px)/1 var(--font-mono); letter-spacing: .08em; color: var(--lime); text-shadow: 0 0 10px rgba(184,214,58,.45); }
.screen .marquee__row > span { padding: 0 18px; }
.screen .marquee__row b { color: #ffd36b; font-weight: 700; }
.screen .marquee__row i { font-style: normal; color: var(--paper); }
.tape { margin: 18px -20px 0; padding: 12px 0; background: var(--adobo); transform: rotate(-1.2deg); box-shadow: 0 6px 0 -2px rgba(0,0,0,.25); background-image: linear-gradient(180deg, rgba(255,250,240,.12), transparent 40%, rgba(0,0,0,.08)); }
.tape .marquee__row { font: 400 clamp(20px, 2.2vw, 28px)/1 var(--font-display); letter-spacing: .03em; color: var(--paper); text-transform: uppercase; }
.tape .marquee__row > span { padding: 0 16px; }
.tape .marquee__row i { font-style: normal; color: #ffd36b; }
.tape b { font-weight: 400; }
:root:not(.static-fx) .marquee { animation: marquee 38s linear infinite; }
:root:not(.static-fx) .marquee--slow { animation-duration: 46s; animation-direction: reverse; }
.is-off .marquee, .screens.is-off .marquee { animation-play-state: paused !important; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =============================================================
   SECTIONS
   ============================================================= */
.sec { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: clamp(96px, 11vw, 160px) 0 clamp(80px, 10vw, 140px); }

/* ---------- lore ---------- */
.lore { --prev: #1d1209; }
.notes { display: grid; gap: clamp(22px, 3vw, 36px); counter-reset: n; }
.note { position: relative; padding: 34px 26px 28px; background: var(--paper); color: var(--ink); border-radius: 4px; box-shadow: 0 1px 0 rgba(42,26,14,.2), 0 18px 30px -18px rgba(42,26,14,.6); transform: rotate(var(--rot, 0deg)); }
.note .staple { top: -3px; left: 50%; margin-left: -19px; }
.note__n { display: inline-block; margin-bottom: 12px; font: 700 13px/1 var(--font-mono); letter-spacing: .14em; color: var(--adobo-2); }
.note p { margin-top: 10px; color: var(--ink-2); font-size: 16.5px; }
.note--hot { box-shadow: inset 0 6px 0 var(--adobo), 0 1px 0 rgba(42,26,14,.2), 0 18px 30px -18px rgba(42,26,14,.6); }
@media (min-width: 900px) { .notes { grid-template-columns: repeat(3, 1fr); } .note:nth-child(2) { margin-top: 34px; } }
.pull { margin: clamp(56px, 8vw, 100px) auto 0; text-align: center; max-width: 18ch; }
.pull__q { font: 400 clamp(44px, 7vw, 104px)/.95 var(--font-display); color: var(--ink); text-wrap: balance; }
.pull__c { display: inline-block; margin-top: 18px; padding: 6px 10px; border-radius: 6px; background: var(--paper); font: 600 13px/1.2 var(--font-mono); color: var(--ink-2); letter-spacing: .06em; }
.fineline { max-width: 44rem; margin: clamp(40px, 6vw, 64px) auto 0; padding: 12px 16px; border-radius: 10px; text-align: center; font-size: 14.5px; color: var(--ink-2); box-shadow: 0 0 0 2px rgba(42,26,14,.12); }
.fineline b { color: var(--ink); }

/* ---------- receipt ---------- */
.receipt { --prev: var(--kraft-light); }
.receipt__grid { display: grid; gap: clamp(40px, 6vw, 80px); align-items: start; }
.receipt .h2 .hl { color: var(--paper); text-shadow: 0 3px 0 var(--ink); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 32rem; }
.facts li { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 12px; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); }
.facts b { font: 400 clamp(28px, 3vw, 40px)/1 var(--font-display); color: var(--ink); }
.facts li > span { font: 600 13px/1.25 var(--font-body); color: var(--ink-2); }
@media (min-width: 900px) { .receipt__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } .receipt__intro { position: sticky; top: calc(var(--nav-h) + 40px); } }
.printer { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 420px; justify-self: center; }
.printer__slot { position: relative; z-index: 3; width: 100%; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #3a2616, #1d1209); color: var(--cream); box-shadow: 0 8px 14px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.printer__slot::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 6px; height: 4px; border-radius: 4px; background: #000; }
.printer__led { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.printer__led.is-busy { background: #ffb347; box-shadow: 0 0 8px #ffb347; }
.printer__name { font: 700 12px/1 var(--font-mono); letter-spacing: .16em; }
.printer__out { position: relative; width: calc(100% - 28px); overflow: hidden; overflow: clip; margin-top: -6px; padding-bottom: 30px; }
.ticket { position: relative; padding: 30px 22px 0; background: var(--paper); color: var(--ink); font: 500 14px/1.45 var(--font-mono); box-shadow: 0 16px 24px -14px rgba(0,0,0,.55); background-image: linear-gradient(180deg, rgba(42,26,14,.08), transparent 30px); }
.staple--ticket { top: 16px; left: 10px; --sr: -38deg; }
.ticket__top { text-align: center; padding-bottom: 12px; border-bottom: 2px dashed rgba(42,26,14,.4); }
.ticket__shop { font: 400 34px/1 var(--font-display); letter-spacing: .04em; }
.ticket__sub { font-size: 12.5px; color: var(--ink-2); }
.ticket__stars { margin: 10px 0 8px; font-weight: 700; letter-spacing: .06em; }
.ticket__meta { display: flex; justify-content: space-between; font-size: 13px; }
.ticket__items { padding: 12px 0; border-bottom: 2px dashed rgba(42,26,14,.4); }
.ticket__items li { display: grid; grid-template-columns: 2.6ch 1fr auto; column-gap: 8px; padding: 5px 0; }
.ti__q { color: var(--ink-2); }
.ti__n { display: flex; align-items: baseline; min-width: 0; font-weight: 700; }
.ti__n::after { content: ""; flex: 1; margin: 0 4px; border-bottom: 2px dotted rgba(42,26,14,.35); transform: translateY(-4px); min-width: 12px; }
.ti__v { font-weight: 700; text-align: right; }
.ti__s { grid-column: 2 / -1; font-size: 12.5px; color: var(--ink-2); }
.ti--joke .ti__n, .ti--joke .ti__v { color: var(--adobo-2); }
.ticket__sum { padding: 10px 0; border-bottom: 2px dashed rgba(42,26,14,.4); }
.ticket__sum p { display: flex; justify-content: space-between; gap: 12px; }
.ticket__total { margin-top: 6px; font: 400 24px/1.1 var(--font-display); letter-spacing: .03em; }
.ticket__ca { margin-top: 12px; display: flex; gap: 8px; font-size: 12.5px; word-break: break-all; }
.ticket__ca span { font-weight: 700; color: var(--adobo-2); }
.barcode { height: 54px; margin: 14px 0 6px; 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 13px); }
.barcode.is-gen { background: none; display: flex; align-items: stretch; justify-content: center; gap: 0; }
.barcode i { display: block; background: var(--ink); }
.ticket__thx { text-align: center; font-weight: 700; letter-spacing: .1em; padding: 4px 0 14px; }
.ticket__perf { position: relative; height: 22px; margin: 0 -22px; }
.ticket__perf::before { content: ""; position: absolute; left: 14px; right: 14px; top: 10px; border-top: 2px dashed rgba(42,26,14,.5); }
.ticket__perf::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0 50%, var(--kraft-2) 10px, transparent 10.5px), radial-gradient(circle at 100% 50%, var(--kraft-2) 10px, transparent 10.5px); }
.ticket__perf svg { position: absolute; left: 22px; top: 1px; width: 20px; height: 20px; color: var(--ink-2); background: var(--paper); }
.ticket__stub { padding: 12px 0 26px; text-align: center; background: var(--paper); transition: transform .9s var(--ease), opacity .9s; transform-origin: 10% 0; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; margin: 0 -22px; padding-left: 22px; padding-right: 22px; }
.stub__t { font: 400 26px/1 var(--font-display); letter-spacing: .1em; color: var(--adobo-2); }
.stub__s { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.ticket.is-torn .ticket__stub { transform: translate(30px, 80px) rotate(14deg); opacity: 0; }
.ticket { -webkit-mask: none; }
.ticket__tear { margin-top: 4px; }

/* ---------- bagholders eat ---------- */
.eat { --prev: var(--kraft-2); }
.eat__grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 960px) { .eat__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }
.line { display: grid; gap: 16px; }
.line__step { display: flex; gap: 18px; align-items: flex-start; padding: 22px 22px; border-radius: 14px; box-shadow: 0 0 0 2px var(--ink), 0 5px 0 var(--ink); }
.line__n { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--adobo); color: var(--paper); font: 400 26px/1 var(--font-display); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.line__step p { margin-top: 6px; color: var(--ink-2); }
.cmg { position: relative; }
.cmg__card { position: relative; padding: 0 22px 22px; border-radius: 16px; box-shadow: 0 0 0 2px var(--ink), 0 6px 0 var(--ink); overflow: hidden; }
.cmg__card .staple--card { top: 6px; right: 20px; --sr: 8deg; }
.cmg__top { display: flex; align-items: center; gap: 14px; margin: 0 -22px 16px; padding: 20px 22px 16px; background: linear-gradient(115deg, var(--foil) 0%, var(--foil-2) 18%, #b4b9c1 32%, var(--foil-2) 48%, var(--foil) 64%, #f7f8fa 80%, var(--foil) 100%); border-bottom: 2px solid var(--ink); }
.cmg__badge { width: 52px; height: 52px; flex: none; }
.cmg__badge svg { width: 100%; height: 100%; }
.cmg__k { font: 700 11.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.cmg__sym { font: 400 32px/1 var(--font-display); color: var(--ink); }
.cmg__name { font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.cmg__rows { display: grid; gap: 10px; }
.cmg__rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px dashed rgba(42,26,14,.25); }
.cmg__rows dt { font: 700 13px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cmg__rows dd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.cmg__rows code { font-size: 14px; }
.js-rt-price { font: 700 22px/1 var(--font-mono); }
.js-rt-price.is-na { font: 600 14px/1.3 var(--font-body); color: var(--ink-2); }
.chg { font: 700 13px/1 var(--font-mono); color: var(--cilantro); }
.chg.is-neg { color: var(--adobo-2); }
.mini { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--ink); }
.mini:hover { background: var(--kraft-light); }
.mini svg { width: 16px; height: 16px; }
.cmg__src { margin-top: 8px; font: 600 12px/1 var(--font-mono); color: var(--ink-2); letter-spacing: .06em; }
.cmg__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cmg__foot { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.fine { margin-top: clamp(36px, 5vw, 56px); padding: 22px 24px; border-radius: 14px; box-shadow: 0 0 0 2px rgba(42,26,14,.2); }
.fine__t { font: 400 22px/1.1 var(--font-display); }
.fine ul { margin-top: 12px; display: grid; gap: 8px; }
.fine li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15.5px; }
.fine li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; border-radius: 2px; background: var(--adobo); transform: rotate(45deg); }

/* order tracker (live board) */
.kds { margin-top: clamp(28px, 4vw, 44px); padding: 22px; border-radius: 16px; background: #1d1209; color: var(--paper); box-shadow: 0 0 0 3px #3a2616, 0 18px 30px -18px rgba(0,0,0,.7); --focus: var(--paper); }
.kds__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kds__t { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.kds__dex { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--font-body); color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.kds__dex svg { width: 16px; height: 16px; }
.kds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .kds__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kt { padding: 14px; border-radius: 10px; background: #2a1a0e; box-shadow: inset 0 0 0 1px rgba(255,250,240,.1); min-width: 0; }
.kt.is-tick { animation: tick 1.2s ease; }
@keyframes tick { 0% { box-shadow: inset 0 0 0 2px var(--lime); } 100% { box-shadow: inset 0 0 0 1px rgba(255,250,240,.1); } }
.kt__l { font: 700 11.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
.kt__v { margin-top: 8px; font: 700 clamp(20px, 2vw, 26px)/1.1 var(--font-mono); color: var(--paper); overflow-wrap: anywhere; }
.kt__v--sm { font-size: 17px; }
.kt__v a { color: var(--lime); text-decoration: underline; }
.kt__m { margin-top: 6px; font: 500 12px/1.35 var(--font-mono); color: var(--cream); }
.kt__bar { margin-top: 10px; height: 8px; border-radius: 6px; background: rgba(255,250,240,.12); overflow: hidden; }
.kt__bar i { display: block; height: 100%; width: 0; background: var(--lime); border-radius: 6px; transition: width 1s var(--ease); }
.kds__off { display: none; margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: var(--paper); color: var(--ink); }
.kds[data-state="pre"] .kds__off { display: block; }
.kds[data-state="pre"] .kds__dex { display: none; }
.kds__off-t { font: 400 22px/1.1 var(--font-display); }
.kds__off-s { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.kds__stale { margin-top: 10px; font: 600 13px/1.3 var(--font-mono); color: #ffd36b; }
.kds__src { margin-top: 12px; font: 500 12.5px/1.45 var(--font-mono); color: var(--cream); }

/* ---------- game slot (inner game styles live in bag-game.css) ---------- */
.bag-game-section { --prev: var(--kraft); position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: clamp(96px, 11vw, 150px) 0 clamp(80px, 10vw, 130px); background-color: var(--kraft-dark); background-image: var(--tex-fibre), var(--tex-crinkle); background-size: 320px 320px, 720px 720px; color: var(--paper); --focus: var(--paper); }
.bag-game-section::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: -1px; height: 22px; background: var(--prev); -webkit-mask: var(--torn) 0 0/420px 100% repeat-x; mask: var(--torn) 0 0/420px 100% repeat-x; pointer-events: none; }
#bag-game { position: relative; min-height: 120px; }

/* ---------- how to buy ---------- */
.order { --prev: var(--kraft-dark); }
.rail { display: none; height: 16px; margin: 0 -8px -8px; position: relative; z-index: 3; border-radius: 8px; background: linear-gradient(180deg, var(--foil-2), var(--foil) 50%, #8f959e); box-shadow: 0 0 0 2px var(--ink), 0 6px 8px -4px rgba(42,26,14,.5); }
.steps { display: grid; gap: 18px; }
.step { position: relative; padding: 30px 22px 24px; border-radius: 4px 4px 12px 12px; box-shadow: 0 1px 0 rgba(42,26,14,.2), 0 16px 26px -16px rgba(42,26,14,.6); transform: rotate(var(--rot, 0deg)); transform-origin: 50% 0; }
.step__n { display: inline-grid; place-items: center; min-width: 54px; height: 34px; padding: 0 10px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 700 16px/1 var(--font-mono); letter-spacing: .08em; margin-bottom: 14px; }
.step p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rail { display: block; } .step { border-radius: 0 0 12px 12px; } }
.order__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.wallets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.wallets p { font-weight: 700; width: 100%; }
.order__note { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; max-width: 44rem; padding: 14px 16px; border-radius: 12px; font-size: 15px; color: var(--ink-2); box-shadow: 0 0 0 2px rgba(42,26,14,.16); }
.order__note svg { width: 22px; height: 22px; flex: none; color: var(--adobo-2); margin-top: 1px; }
@media (max-width: 480px) { .order__cta .btn { flex: 1 1 100%; } }

/* ---------- FAQ ---------- */
.faq { --prev: var(--kraft-light); }
.faq__grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } .faq .section-head { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; } }
.faq__list { display: grid; gap: 12px; }
.qa { border-radius: 14px; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); }
.qa summary { list-style: none; cursor: pointer; position: relative; display: block; padding: 20px 60px 20px 22px; font: 400 clamp(20px, 1.9vw, 25px)/1.15 var(--font-display); color: var(--ink); border-radius: 14px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: linear-gradient(var(--adobo), var(--adobo)) center/100% 4px no-repeat, linear-gradient(var(--adobo), var(--adobo)) center/4px 100% no-repeat; transition: transform .35s var(--ease-spring); }
.qa[open] summary::after { transform: rotate(135deg); }
.qa__a { padding: 0 22px 22px; color: var(--ink-2); font-size: 16px; max-width: 44em; }
.qa__a a { color: var(--adobo-2); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.qa__a code { font-size: 14px; }

/* ---------- last call ---------- */
.last { --prev: var(--kraft); background-color: var(--adobo); background-image: var(--tex-fibre), radial-gradient(60% 80% at 10% 100%, rgba(42,26,14,.32), transparent 70%), radial-gradient(40% 60% at 95% 0%, rgba(42,26,14,.25), transparent 70%); background-size: 320px 320px, 100% 100%, 100% 100%; color: var(--paper); text-align: center; --focus: var(--paper); }
.last .stain { opacity: .5; }
.last__in { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.last .h2 { margin-top: 6px; text-shadow: 0 6px 0 rgba(42,26,14,.4); }
.last__sub { font: 400 clamp(20px, 2vw, 26px)/1.2 var(--font-display); color: var(--paper); }
.last .ca { --focus: var(--ink); }
.share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.share__t { font: 700 13px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.share .btn { --focus: var(--paper); }

/* ---------- footer ---------- */
.footer { position: relative; overflow: hidden; overflow: clip; padding: clamp(64px, 8vw, 110px) 0 calc(48px + var(--safe-bottom)); background: var(--ink); color: var(--kraft-light); --focus: var(--paper); }
.footer::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: -1px; height: 22px; background: var(--adobo); -webkit-mask: var(--torn) 0 0/420px 100% repeat-x; mask: var(--torn) 0 0/420px 100% repeat-x; }
.footer__word { position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%); font: 400 clamp(110px, 22vw, 360px)/1 var(--font-display); color: transparent; -webkit-text-stroke: 2px rgba(227,201,162,.14); white-space: nowrap; pointer-events: none; user-select: none; }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 28px; border-bottom: 2px dashed rgba(227,201,162,.25); }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__links a { font-weight: 700; color: var(--paper); text-decoration: underline; text-decoration-color: rgba(255,250,240,.35); text-underline-offset: 4px; padding: 6px 0; }
.footer__links a:hover { text-decoration-color: var(--paper); }
.parody { margin-top: 28px; max-width: 60rem; font-size: 15px; line-height: 1.6; color: var(--kraft-light); }
.parody b { color: var(--paper); }
.legal { margin-top: 14px; max-width: 60rem; font-size: 13.5px; line-height: 1.6; color: var(--kraft-light); }
.copy { position: relative; margin-top: 28px; font: 600 13px/1.4 var(--font-mono); color: var(--kraft-light); }

/* ---------- dock + toast ---------- */
.dock { position: fixed; z-index: 100; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); display: none; align-items: center; gap: 8px; padding: 6px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink), 0 5px 0 var(--ink), 0 18px 30px -10px rgba(42,26,14,.5); transform: translateY(150%); transition: transform .6s var(--ease); }
[data-launch="live"] .dock { display: flex; }
.dock.is-on { transform: none; }
.dock .ca { flex: 1; min-width: 0; box-shadow: none; padding: 0 0 0 8px; gap: 8px; border-radius: 10px; }
.dock .ca__copy { height: 40px; padding: 0 12px; }
@media (min-width: 900px) { [data-launch="live"] .dock { display: none; } }
.toast { position: fixed; z-index: 180; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translate(-50%, 24px); max-width: min(92vw, 520px); padding: 14px 22px; border-radius: 14px; background: var(--ink); color: var(--paper); font: 700 15px/1.35 var(--font-body); text-align: center; opacity: 0; pointer-events: none; transition: opacity .3s, transform .5s var(--ease); box-shadow: 0 0 0 2px var(--paper), 0 8px 0 -2px rgba(0,0,0,.25); }
.toast.is-top { bottom: auto; top: calc(var(--nav-h) + 16px); transform: translate(-50%, -24px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- reveal states (only while motion runs) ---------- */
.no-motion .js-note, .no-motion .step, .no-motion .line__step { opacity: 1 !important; }

/* ---------- reduced motion / static ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .marquee, .mascot__breathe, .drip, .pulse, .stain::before, .stain::after { animation: none !important; }
  .mascot__lid, .mascot__bloom i, .bubble, .btn, .ticket__stub { transition-duration: .01s !important; }
}
@media (forced-colors: active) { .stain, .drip, .soak, .smudge { display: none; } }