/* Nate's Smash Burgers, art-b: Messy On Purpose. Phone first (390 px), then a mouse at 1550.

   The system. Three voices and nothing else:
   - The slab: Anton, set line by line to one measure, ink edge to ink edge, on a box exactly the cap height. Size is never
     chosen, it falls out of how many letters a line has, which is why BUN is tall and PICKLES is thin, like a real burger.
     --w is the line's ink width in em and --l its left side bearing, both measured from the font (see README).
   - The hand: Permanent Marker, always on a scrap of sticker stock, always pointing at something.
   - The print: Barlow Condensed, for the few real sentences.
   Three inks on warm paper (tomato, mustard, patty brown), plus one spot of pickle for one word, and one thing that will not
   stay inside the lines: the sauce, cream, printed flat, always wet at the edge.
   The rule that keeps this ours: red sits on cream and nowhere else. A red wall with yellow words on it is a drive-through,
   so the loud grounds are patty brown and the burger's own golds, and the inks stay a step away from any chain's. */

@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/anton-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('shared/fonts/permanent-marker-latin-400-normal.woff2') format('woff2'); }

:root {
  --paper: #FFF0D6;
  --stock: #FFF8EA;      /* sticker stock, the die-cut edge of everything */
  --ink: #241007;
  --tomato: #DF4316;
  --tomato-deep: #B8330D;
  --mustard: #F6A81C;
  --bun: #E4932B;
  --cheese: #FFBC2E;
  --patty: #33170B;
  --pickle: #6C8A1E;
  --sauce: #FBDDA8;      /* a shade lighter than the real sauce, which is #F6C57B: this one is in print */
  --sauce-deep: #EFAE62; /* its wet edge */
  --sauce-gloss: #FFF7E6;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --print: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --hand: 'Permanent Marker', 'Comic Sans MS', cursive;
  --edge: 8px;           /* how close the slabs run to the screen edge */
  --pad: 5px;            /* air above and below a slab's letters */
  --gutter: 16px;        /* the sentences */
  --measure: calc(100vw - 2 * var(--edge));
  --strip-h: 48px;
  --vh: 1vh;             /* a hundredth of the screen, in px once the head script has measured it. Bars never change it */
  --tall: 100vh;         /* the stage: taller than the screen, so nothing shows under it when a phone's bars slide away */
  --stage-h: calc(var(--vh) * 100);
  --bars: calc(var(--tall) - var(--stage-h)); /* how much of the stage a phone's bars can cover */
  --thud: cubic-bezier(.62, 0, .9, .28);   /* falls, accelerating, and stops dead */
}
@supports (height: 100svh) { :root { --vh: 1svh; --tall: 100lvh; } }

* { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; background: var(--paper); }
html, body { margin: 0; color: var(--ink); }
body { background: var(--paper); font: 500 19px/1.16 var(--print); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; }
b { font-weight: 700; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--ink); color: var(--cheese); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { top: 8px; }

/* ------------------------------------------------------------------ the slab */

.line, .slab, .last-word {
  --fs: calc(var(--measure) / var(--w));
  display: block; height: calc(var(--fs) * .86);
  font: 400 var(--fs)/.86 var(--display); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; font-kerning: normal;
}
.ink { display: block; margin-left: calc(var(--l) * -1em); }

/* ------------------------------------------------------------------ the head: the hamburger menu is a hamburger */

.head { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 10px); pointer-events: none; }
.review .head { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 66px); }
.head > * { pointer-events: auto; }
.mini { display: none; }
.burger-menu { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--stock); box-shadow: 0 0 0 2.5px var(--ink), 2px 3px 0 2.5px var(--ink); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.burger-menu:hover { transform: rotate(-8deg) scale(1.08); }
.burger-menu:active { transform: scale(.9); }
.bars { position: absolute; left: 12px; right: 12px; top: 10px; bottom: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.bars i { display: block; height: 2.4px; border-radius: 1px; background: rgba(36, 16, 7, .2); transform-origin: 50% 100%; position: relative; }
.bars i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--c, var(--ink)); transform: var(--on, translateY(-7px)) scaleX(var(--s, 1)); opacity: var(--o, 0); }
.bars .b8 { --c: var(--bun); height: 5px; border-radius: 12px 12px 1px 1px; margin: 0 1px; }
.bars .b7 { --c: var(--tomato); height: 3px; }
.bars .b6 { --c: var(--pickle); height: 2px; margin: 0 3px; }
.bars .b5, .bars .b3 { --c: var(--cheese); }
.bars .b4, .bars .b2 { --c: var(--patty); height: 3px; }
.bars .b1 { --c: var(--bun); height: 4px; border-radius: 1px 1px 6px 6px; margin: 0 1px; }
.bars i.on { --o: 1; --on: translateY(0); }
.bars i::after { transition: transform .22s cubic-bezier(.5, 0, .9, .4), opacity .05s linear; }

.menu { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(36, 16, 7, .72); }
.menu[hidden] { display: none; }
.menu-card { position: relative; width: min(100%, 420px); padding: 26px 24px 20px; background: var(--stock); box-shadow: 0 0 0 3px var(--ink), 7px 8px 0 3px var(--tomato); transform: rotate(-1.6deg); animation: slap .3s var(--thud) both; }
.menu-title { font: 400 74px/.9 var(--display); text-transform: uppercase; color: var(--tomato); }
.menu-items { margin-top: 12px; counter-reset: i; font: 700 30px/1.1 var(--print); }
.menu-items li::before { content: '1. '; }
.menu-note { margin-top: 4px; font: 400 22px/1.1 var(--hand); color: var(--tomato); transform: rotate(-2deg); transform-origin: 0 50%; }
.menu-links { margin-top: 18px; display: grid; gap: 4px; font: 600 22px/1.2 var(--print); }
.menu-links a { text-decoration: none; background: linear-gradient(var(--cheese), var(--cheese)) 0 100% / 100% 3px no-repeat; width: max-content; }
.menu-links a:hover { background-size: 100% 100%; }
.menu-close { margin-top: 18px; font: 700 15px/1 var(--print); letter-spacing: .06em; text-transform: uppercase; padding: 10px 12px; background: var(--ink); color: var(--stock); }
.menu-close:hover { background: var(--tomato); }

/* ------------------------------------------------------------------ the first screen */

/* The next sheet slides up over this one. The hero stays put (sticky in .sheets) while the strip and the stage rise over it;
   #scrub makes the hero two screens tall and its stage sticks instead, the way the build page's does. */
.sheets { position: relative; }
.hero { position: sticky; top: 0; z-index: 0; height: var(--stage-h); overflow: hidden; background: var(--paper); }
.hero--scrub { position: relative; height: calc(var(--vh) * 200); overflow: visible; }
.hero--scrub .hero-stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; }
.hero-stage { position: relative; height: 100%; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 0; transform-origin: 50% 0; }
.hero-text { position: relative; z-index: 2; padding: 0 var(--edge); }

.lockup { display: block; }
.lockup-wrap { position: relative; display: block; width: min(76vw, calc(var(--vh) * 40)); aspect-ratio: 3284 / 1292.1; margin-left: 4px; }
.lockup-script { position: relative; display: block; width: 100%; height: 100%; color: var(--tomato); }
.lockup-script svg, .lockup-shade svg { display: block; width: 100%; height: auto; overflow: visible; }
.lockup-script[data-logo-now^="S1-"] svg > g > path:nth-of-type(n+7) { fill: var(--ink); }
.lockup-shade { position: absolute; inset: 0; color: var(--mustard); transform: translate(2.1%, 4.8%); }
.lockup-shade svg > g > path:nth-of-type(n+7) { display: none; }
.draw .lockup-script > svg { visibility: hidden; animation: unhide 0s linear 4s forwards; }
@keyframes unhide { to { visibility: visible; } }
.lockup-line { display: block; font: 400 40px/1 var(--display); text-transform: uppercase; }
.lockup-line[hidden] { display: none; }

.shout { position: relative; margin-top: 14px; color: var(--ink); }
.shout .line + .line { margin-top: 6px; }
.shout-scribble { position: absolute; left: 0; right: 0; bottom: -12px; width: 100%; height: 20px; color: var(--mustard); overflow: visible; pointer-events: none; }
.hero-copy { margin-top: 17px; padding: 0 calc(var(--gutter) - var(--edge)); font-size: min(18.5px, calc(var(--vh) * 2.4)); line-height: 1.14; text-wrap: balance; }
.ringed svg { position: absolute; left: -7px; right: -7px; top: -3px; bottom: -4px; width: calc(100% + 14px); height: calc(100% + 7px); color: var(--cheese); overflow: visible; }

.hero-burger { position: relative; flex: 1 1 auto; min-height: 0; z-index: 1; }
.hero-glow { position: absolute; left: 50%; top: 52%; width: 165vw; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 186, 60, .85), rgba(255, 196, 92, .4) 52%, rgba(255, 220, 150, 0) 100%); pointer-events: none; }
.burst { position: absolute; fill: var(--mustard); overflow: visible; pointer-events: none; }
.hero-burger .burst { left: 50%; top: 50%; width: min(118vw, calc(var(--vh) * 58)); height: auto; aspect-ratio: 1; margin: calc(min(118vw, calc(var(--vh) * 58)) / -2) 0 0 calc(min(118vw, calc(var(--vh) * 58)) / -2); will-change: transform; }
.hero-sticker { position: absolute; left: 50%; bottom: calc(var(--strip-h) - 12px); height: calc(100% - var(--strip-h) + 12px); max-width: 118vw; aspect-ratio: 2112 / 1623; transform: translateX(-50%); }
.hero-photo { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }

.halo { position: absolute; pointer-events: none; overflow: visible; }
.halo-fill { fill: var(--cheese); }
.halo-line { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.halo--hero { left: 37%; top: 3.5%; width: 25%; transform: rotate(-7deg); transform-origin: 50% 100%; }

.seal { position: absolute; }
.seal svg { width: 100%; height: auto; overflow: visible; }
.seal-edge { fill: var(--stock); stroke: var(--stock); stroke-width: 12; stroke-linejoin: round; }
.seal-face { fill: var(--tomato); }
.seal-ring { font: 700 19px/1 var(--print); fill: var(--stock); }
.seal-big { font: 400 52px/1 var(--display); fill: var(--stock); letter-spacing: .005em; }
.seal-mid { font: 400 44px/1 var(--display); fill: var(--stock); letter-spacing: .01em; }
.seal--hero { right: 11%; top: 11%; width: 24%; }

.tape { position: absolute; padding: 5px 10px 4px; background: var(--ink); color: var(--cheese); font: 700 14.5px/1 var(--print); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.tape--hero { left: 6px; bottom: calc(var(--strip-h) + 12px); transform: rotate(-4deg); }
.hand { position: absolute; font: 400 16px/1.04 var(--hand); color: var(--ink); }
.hand--go { right: 8px; bottom: calc(var(--strip-h) + 20px); width: 122px; padding: 5px 7px 4px; background: var(--stock); font-size: 13.5px; box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink); transform: rotate(3deg); }
.hand--go .scrawl { display: none; }
.intro .hand--go { --r: 3deg; animation: slap .26s var(--thud) 3.1s both; }
.scrawl { width: 56px; height: auto; color: var(--tomato); overflow: visible; }

/* The first screen lands piece by piece, in CSS, so it never waits for a script. Pencil first (Sketch), then thuds. */
@keyframes slap {
  0% { transform: scale(1.7) rotate(var(--r, -6deg)); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: scale(1) rotate(var(--r, -1.6deg)); opacity: 1; }
}
@keyframes drop {
  0% { transform: translate3d(0, -130vh, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes squat {
  0%, 100% { transform: none; }
  18% { transform: scale(1.05, .9); }
  52% { transform: scale(.98, 1.03); }
  78% { transform: scale(1.01, .99); }
}
@keyframes jolt {
  0%, 100% { transform: translate3d(0, 0, 0); }
  14% { transform: translate3d(-2px, 7px, 0); }
  36% { transform: translate3d(2px, -3px, 0); }
  62% { transform: translate3d(-1px, 2px, 0); }
}
@keyframes bang {
  0% { transform: translateX(-50%) scale(.5); opacity: 0; }
  55% { transform: translateX(-50%) scale(1.06); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
@keyframes spin-in { from { transform: scale(.2) rotate(-70deg); } to { transform: scale(1) rotate(0); } }
@keyframes rise { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes shade-out { 0% { opacity: 0; transform: translate(0, 0); } 1% { opacity: 1; } 100% { opacity: 1; transform: translate(2.1%, 4.8%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.intro .hero-stage { animation: jolt .42s ease-out .98s 1, jolt .3s ease-out 1.52s 1, jolt .3s ease-out 1.84s 1; }
.intro .hero-burger .burst { animation: spin-in .5s cubic-bezier(.2, .9, .3, 1.2) .55s both; }
.intro .hero-glow { animation: fade-in .5s linear .55s both; }
.intro .hero-photo { animation: drop .46s var(--thud) .52s both; }
.intro .hero-burger { animation: squat .5s ease-out .98s 1; transform-origin: 50% 88%; }
.intro .shout .ln-1 { animation: drop .3s var(--thud) 1.26s both; }
.intro .shout .ln-2 { animation: drop .3s var(--thud) 1.58s both; }
.intro .shout-scribble { animation: fade-in .01s linear 2.7s both; } /* a round cap shows a dot before the line has started */
.intro .shout-scribble path { stroke-dasharray: 1 1; animation: write .34s ease-out 2.7s both; }
.intro .shout-scribble path, .intro .scrawl path { vector-effect: none; }
.intro .hero-copy { animation: fade-in .3s linear 1.9s both; }
.intro .lockup-shade { animation: shade-out .22s cubic-bezier(.3, 1.8, .5, 1) 2.62s both; }
.intro .halo--hero { --r: -7deg; animation: slap .26s var(--thud) 2.5s both; }
.intro .seal--hero { --r: 8deg; animation: slap .26s var(--thud) 2.72s both; }
.intro .tape--hero { --r: -4deg; animation: slap .26s var(--thud) 2.92s both; }
.seal--hero { transform: rotate(8deg); transition: transform .2s cubic-bezier(.3, 1.8, .5, 1); cursor: grab; }
.seal--hero:hover { transform: rotate(16deg) scale(1.08); }
.seal--hero:active { transform: rotate(4deg) scale(.92); }
.tape--hero { transition: transform .2s cubic-bezier(.3, 1.8, .5, 1); }
.tape--hero:hover { transform: rotate(-1deg) scale(1.04); }
.lockup-wrap { cursor: pointer; }
.lockup-shade { transition: transform .22s cubic-bezier(.3, 1.8, .5, 1); }
.lockup-wrap:hover .lockup-shade { transform: translate(3.2%, 7.2%); }
.lockup-wrap:active .lockup-shade { transform: translate(.6%, 1.4%); }
.intro .strip--one { animation: rise .5s cubic-bezier(.2, .9, .3, 1) 3s both; }

/* ------------------------------------------------------------------ the strips */

.strip {
  position: relative; z-index: 3; overflow: hidden; height: var(--strip-h); background: var(--ink); color: var(--mustard);
  display: flex; align-items: center; margin-top: calc(var(--strip-h) * -1);
  clip-path: polygon(0% 8px,2.2% 10px,4.3% 3.8px,6.5% 6.3px,8.7% 0px,10.9% 3.2px,13% 7.5px,15.2% 5.7px,17.4% 10px,19.6% 4.5px,21.7% 9.2px,23.9% 10px,26.1% 10px,28.3% .5px,30.4% 2px,32.6% .1px,34.8% 8.7px,37% 3.6px,39.1% 8.3px,41.3% 10px,43.5% 4px,45.7% 0px,47.8% 5.2px,50% .4px,52.2% 0px,54.3% 0px,56.5% 0px,58.7% 9.8px,60.9% 3.5px,63% 0px,65.2% 6.4px,67.4% 2.9px,69.6% 2.3px,71.7% 10px,73.9% 4.8px,76.1% 3.1px,78.3% 0px,80.4% 7.8px,82.6% 10px,84.8% 10px,87% 10px,89.1% 10px,91.3% 10px,93.5% 2.9px,95.7% 6px,97.8% 6.8px,100% 3px,100% 100%,0% 100%);
}
.strip-track { display: flex; width: max-content; padding-top: 7px; will-change: transform; }
.strip-run { display: inline-block; white-space: nowrap; font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: .018em; }
.strip-run i { display: inline-block; width: .42em; height: .42em; margin: 0 .42em; border-radius: 50%; background: var(--tomato); transform: translateY(-.14em); }

/* ------------------------------------------------------------------ the build */

.build { position: relative; z-index: 2; height: calc(var(--vh) * 800); }
.ruler { position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--vh) * 200); visibility: hidden; pointer-events: none; }
/* The stage is as tall as the largest the viewport gets, so nothing shows under it when a phone's bars slide away; the burger
   and the crush are laid out for the smallest, so nothing important sits under the bars when they come back. */
.stage { position: sticky; top: 0; height: var(--tall); overflow: hidden; background: var(--paper); transform-origin: 50% 0; }

.flood { position: absolute; inset: 0; background: var(--patty); transform: scaleY(0); transform-origin: 50% 100%; will-change: transform; }
.burst--stage { left: 50%; bottom: calc(var(--bars) + 20px); width: min(130vw, calc(var(--vh) * 70)); aspect-ratio: 1; margin-left: calc(min(130vw, calc(var(--vh) * 70)) / -2); will-change: transform; }
.glow { position: absolute; left: 50%; bottom: -8%; width: 160vw; aspect-ratio: 1; margin-left: -80vw; pointer-events: none; opacity: .36; background: radial-gradient(closest-side, rgba(255, 196, 80, .9), rgba(255, 196, 92, .35) 56%, rgba(255, 220, 150, 0) 100%); }

.shake { position: absolute; inset: 0; }
.pile { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column-reverse; will-change: transform; }
.pile .slab { box-sizing: content-box; padding: var(--pad) var(--edge); }
.slab--lead { color: var(--tomato); }
.c-bun { background: var(--bun); color: var(--patty); }
.c-patty { background: var(--patty); color: var(--paper); }
.c-cheese { background: var(--cheese); color: var(--patty); }
.c-pickle { background: var(--pickle); color: var(--stock); }
.scribble path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.scribbled { position: relative; display: inline-block; color: var(--tomato); }
.scribble { position: absolute; left: 0; bottom: -.16em; width: 100%; height: .3em; color: var(--ink); overflow: visible; pointer-events: none; }

/* The sauce. One sheet, in front of the burger, sliding down the stage; A LOT sits on it with its head pinned to the top of the
   screen, so its foot follows the sheet's edge down and the word fills whatever shape the screen is. Stretched, not set: it is
   an SVG, so it stays sharp, and the press flattens it the other way. */
.sauce { position: absolute; inset: 0; z-index: 4; pointer-events: none; --lh: calc(var(--measure) * .86 / 8.924 + (var(--measure) - 62px) * .86 / 5.375 + 8px); }
.sauce-floor { position: absolute; left: 0; right: 0; top: var(--stage-h); bottom: 0; background: var(--sauce); visibility: hidden; }
.sauce-press { position: absolute; inset: 0; will-change: transform; }
.sauce-sheet { position: absolute; left: 0; right: 0; top: 0; height: 100%; background-color: var(--sauce); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23B9852E' fill-opacity='.5'%3E%3Ccircle cx='24' cy='40' r='1.6'/%3E%3Ccircle cx='150' cy='22' r='1.1'/%3E%3Ccircle cx='96' cy='96' r='1.4'/%3E%3Ccircle cx='196' cy='120' r='1.7'/%3E%3Ccircle cx='60' cy='168' r='1.2'/%3E%3C/g%3E%3Cg fill='%23788A24' fill-opacity='.55'%3E%3Ccircle cx='128' cy='176' r='1.5'/%3E%3Ccircle cx='178' cy='62' r='1.1'/%3E%3Ccircle cx='40' cy='112' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); will-change: transform; }
.sauce-drips { position: absolute; left: 0; top: 100%; width: 100%; overflow: visible; will-change: transform; }
.drip-rim { fill: var(--sauce-deep); transform: translateY(6px); }
.drip-body { fill: var(--sauce); }
.drip-gloss { fill: none; stroke: var(--sauce-gloss); stroke-width: 5; stroke-linecap: round; }
.rope, .drape { position: absolute; left: 0; top: 0; overflow: visible; visibility: hidden; will-change: transform; }
.sauce-crest { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; will-change: transform; }
.sauce-crest .drip-rim { transform: translateY(-5px); }
.alot { position: absolute; left: var(--edge); right: var(--edge); top: 10px; bottom: calc(var(--bars) + var(--lh) + 22px); color: var(--tomato); transform-origin: 50% 0; visibility: hidden; will-change: transform; }
.alot-word { display: block; width: 100%; height: 100%; overflow: visible; }
.alot-word text { font: 400 100px var(--display); fill: currentColor; }
.sauce-lines { position: absolute; left: var(--edge); right: var(--edge); bottom: calc(var(--bars) + 12px); color: var(--patty); }
.sauce-lines .line + .line { margin-top: 8px; color: var(--tomato); --measure: calc(100vw - 2 * var(--edge) - 62px); } /* the thumb's corner */
.last { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; will-change: transform; }
.last-word { box-sizing: content-box; padding: var(--pad) var(--edge); }
.last-word--smash { color: var(--stock); padding-top: 12px; }
.splats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.splat { position: absolute; left: 0; top: 0; overflow: visible; visibility: hidden; will-change: transform; }
.splat .drip-rim { transform: none; }

.burger-host { position: absolute; left: -5vw; right: -5vw; top: 0; height: var(--stage-h); z-index: 1; touch-action: pan-y; }
.burger-host .fallback { position: absolute; left: 50%; bottom: 6%; width: min(100%, 720px); height: auto; transform: translateX(-50%); }
.tag { position: fixed; left: 0; top: 0; z-index: 55; padding: 5px 10px 4px; background: var(--cheese); color: var(--ink); font: 400 16px/1 var(--hand); box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink); pointer-events: none; opacity: 0; will-change: transform; transition: opacity .12s linear; }
.tag.on { opacity: 1; }
.crumb { position: absolute; left: 0; top: 0; width: 46px; height: auto; margin: -23px 0 0 -23px; visibility: hidden; pointer-events: none; will-change: transform; z-index: 3; }
.crumb-2 { width: 38px; margin: -19px 0 0 -19px; }

.notes { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.note { position: absolute; left: 0; top: 0; width: max-content; max-width: 62vw; visibility: hidden; will-change: transform; }

.note-text { display: inline-block; padding: 6px 10px 5px; background: var(--stock); color: var(--ink); font: 400 16px/1.06 var(--hand); box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink); transform: rotate(-2deg); }
.note:nth-child(even) .note-text { transform: rotate(1.6deg); }
.note[data-beat="bun-2"] .note-text { font-size: 23px; padding: 9px 14px 8px; }
.arrow { position: absolute; top: 100%; left: 50%; width: 58px; height: auto; color: var(--ink); overflow: visible; margin-top: 2px; }
.arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.arrow--flip { left: auto; right: 50%; transform: scaleX(-1); }

.target { position: absolute; left: 0; top: 0; z-index: 1; width: 300px; height: 70px; color: var(--ink); overflow: visible; pointer-events: none; visibility: hidden; }

.pickle-four { position: absolute; left: 0; top: 0; z-index: 9; width: 132px; visibility: hidden; will-change: transform; pointer-events: none; }
.pickle-four img { width: 100%; height: auto; }
.four-says { position: absolute; left: 50%; bottom: 96%; margin-left: -84px; padding: 5px 9px 4px; background: var(--stock); color: var(--ink); font: 400 15px/1 var(--hand); white-space: nowrap; box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink); visibility: hidden; }
.nope { position: absolute; left: 0; top: 0; z-index: 6; padding: 12px 18px 8px; background: var(--tomato); color: var(--stock); font: 400 min(46vw, calc(var(--vh) * 28))/.86 var(--display); text-transform: uppercase; box-shadow: 0 0 0 6px var(--stock), 5px 8px 0 6px var(--ink); visibility: hidden; will-change: transform; pointer-events: none; }

.gauge { position: absolute; left: 0; top: 0; z-index: 3; width: 196px; visibility: hidden; will-change: transform; pointer-events: none; transform-origin: 50% 80%; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge-face { fill: var(--stock); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; paint-order: stroke; filter: none; }
.gauge-arc { fill: none; stroke: var(--tomato); stroke-width: 7; stroke-linecap: round; }
.gauge-marks text { font: 700 12.5px/1 var(--print); letter-spacing: .03em; fill: var(--ink); }
.gauge-needle { fill: var(--tomato); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.gauge-pin { fill: var(--ink); }
.gauge figcaption { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(-1.5deg); padding: 3px 8px; background: var(--ink); color: var(--cheese); font: 700 12.5px/1 var(--print); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.finale { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: var(--stock); visibility: hidden; }
.finale-title { position: absolute; left: var(--edge); right: var(--edge); top: calc(env(safe-area-inset-top, 0px) + 16px); }
.finale-title .line + .line { margin-top: 6px; }
.finale-title .ln-2 { color: var(--mustard); }
.finale-title .line { background: var(--patty); box-shadow: 0 0 0 8px var(--patty); } /* a slab of its own, so the burst always goes behind the word */
.finale-shove { position: absolute; left: 10px; width: min(250px, 66vw); top: calc(env(safe-area-inset-top, 0px) + 16px + var(--title-h, 200px) + 14px); padding: 6px 10px 5px; background: var(--stock); color: var(--ink); font: 400 16px/1.08 var(--hand); box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink); transform: rotate(-2deg); }
.callouts { position: absolute; inset: 0; }
.callout { position: absolute; left: 0; top: 0; visibility: hidden; }
.callout[data-big] { display: none; }
.callout span { display: inline-block; padding: 5px 9px 4px; background: var(--stock); color: var(--ink); font: 400 15px/1.05 var(--hand); box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink); white-space: nowrap; }
.halo--finale { left: 0; top: 0; z-index: 5; width: 132px; visibility: hidden; will-change: transform; }

/* ------------------------------------------------------------------ after the build */

.after { position: relative; z-index: 3; margin-top: calc(var(--vh) * -100); }
.tapes { position: relative; height: 0; z-index: 4; }
.strip--tape { position: absolute; left: -6vw; right: -6vw; top: -30px; margin: 0; height: 56px; transform: rotate(-2.4deg); background: var(--tomato); color: var(--stock); clip-path: none; box-shadow: 0 0 0 4px var(--stock); }
.strip--tape .strip-run i { background: var(--stock); }
.strip--tape .strip-track { padding-top: 0; }
.strip--tape .strip-run { font-size: 28px; }

.secret { position: sticky; top: var(--stick, 0px); z-index: 1; padding: 58px var(--edge) 56px; background: var(--sauce); color: var(--tomato); overflow: hidden; transform-origin: 50% 0; }
.secret-title .line + .line { margin-top: 8px; }
.card {
  position: relative; z-index: 1; width: min(100%, 460px); margin: -6px 0 0 auto; padding: 18px 18px 16px; background: var(--stock); color: var(--ink);
  transform: rotate(1.8deg); box-shadow: 0 0 0 2.5px var(--ink), 5px 6px 0 2.5px var(--ink);
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(223, 67, 22, .22) 33px 34.5px);
  background-position: 0 90px;
}
.card-head { font: 400 25px/1.05 var(--display); text-transform: uppercase; }
.card-sub { margin-top: 2px; font: 400 15px/1.1 var(--hand); color: var(--tomato); }
.card-lines { margin-top: 12px; font: 400 19px/34.5px var(--hand); }
.card-yield b { font: 400 25px/1 var(--display); color: var(--tomato); letter-spacing: .01em; }
.redact { position: relative; display: inline-block; vertical-align: -.16em; width: calc(var(--n, 6) * 1.05ch); max-width: 72%; height: 1.05em; }
.redact::before { content: ''; position: absolute; inset: 0; background: var(--ink); border-radius: 3px 8px 5px 9px / 8px 4px 9px 5px; transform: rotate(-.8deg) skewX(-6deg); transition: transform .16s cubic-bezier(.3, 1.8, .5, 1); }
.redact:nth-child(even)::before { transform: rotate(.9deg) skewX(5deg); }
.redact:hover::before { transform: rotate(-1.6deg) scale(1.04, 1.16); }
.redact:active::before { transform: scale(.96, .84); }
.redact::after { content: attr(data-said); position: absolute; left: 50%; top: 50%; color: var(--cheese); font: 400 15px/1 var(--hand); white-space: nowrap; transform: translate(-50%, -52%) rotate(-1deg); }
.card-hint { margin-top: 8px; font: 400 16px/1.1 var(--hand); color: var(--tomato); min-height: 1.1em; }
.seal--card { right: -14px; top: -30px; width: 84px; transform: rotate(10deg); }
.seal--card .seal-mid { font-size: 42px; }
.secret-copy { position: relative; margin: 20px var(--gutter) 0 8px; max-width: 26ch; color: var(--ink); font-size: 24px; font-weight: 600; line-height: 1.08; }

.lunch { position: sticky; top: var(--stick, 0px); z-index: 2; margin-top: -12px; padding: 52px var(--edge) 64px; background: var(--mustard); color: var(--ink); transform-origin: 50% 0; clip-path: polygon(0% 12px,2.2% 0px,4.3% 1.8px,6.5% 12px,8.7% 2.7px,10.9% 0px,13% 3.6px,15.2% 7.4px,17.4% 7.8px,19.6% 11.5px,21.7% 0px,23.9% 10.9px,26.1% 5.4px,28.3% 6px,30.4% 10.8px,32.6% 11.6px,34.8% 9.7px,37% 12px,39.1% 12px,41.3% 8.6px,43.5% 3.7px,45.7% 12px,47.8% 7.3px,50% 5.3px,52.2% .6px,54.3% 0px,56.5% 0px,58.7% 0px,60.9% 0px,63% 0px,65.2% 0px,67.4% 0px,69.6% 1.9px,71.7% 6px,73.9% 1.8px,76.1% 4.3px,78.3% 2.1px,80.4% 0px,82.6% .2px,84.8% 7.7px,87% .6px,89.1% 0px,91.3% .7px,93.5% 3.3px,95.7% 0px,97.8% 0px,100% 3.3px,100% 100%,0% 100%); }
.lunch-title .line + .line { margin-top: 8px; }
.when { display: block; margin: 12px 0; }
.when .line + .line { margin-top: 8px; }
.when-ink { display: inline-block; height: .86em; padding: 0 .04em; line-height: .86; background: var(--stock); color: var(--tomato-deep); }
.bring { position: relative; width: max-content; max-width: 100%; margin: 26px 0 0 auto; padding: 12px 16px 12px; background: var(--stock); box-shadow: 0 0 0 2.5px var(--ink), 4px 5px 0 2.5px var(--ink); transform: rotate(-1.4deg); font: 400 19px/1.25 var(--hand); }
.bring-title { font: 400 28px/1 var(--display); text-transform: uppercase; color: var(--tomato); margin-bottom: 6px; }
.bring li { position: relative; padding-left: 26px; }
.bring li::before { content: ''; position: absolute; left: 2px; top: .34em; width: 14px; height: 14px; border: 2.5px solid var(--ink); border-radius: 3px 2px 4px 2px; }
.bring li.on::after { content: ''; position: absolute; left: 6px; top: .1em; width: 9px; height: 17px; border: solid var(--tomato); border-width: 0 4px 4px 0; border-radius: 2px; transform: rotate(40deg) skew(4deg); }
.bring li.off { text-decoration: line-through; text-decoration-color: var(--tomato); text-decoration-thickness: 3px; }

.foot { position: relative; z-index: 3; margin-top: -12px; transform-origin: 50% 0; padding: 40px var(--edge) calc(env(safe-area-inset-bottom, 0px) + 24px); background: var(--patty); color: var(--stock); clip-path: polygon(0% 8px,2.2% 10px,4.3% 3.8px,6.5% 6.3px,8.7% 0px,10.9% 3.2px,13% 7.5px,15.2% 5.7px,17.4% 10px,19.6% 4.5px,21.7% 9.2px,23.9% 10px,26.1% 10px,28.3% .5px,30.4% 2px,32.6% .1px,34.8% 8.7px,37% 3.6px,39.1% 8.3px,41.3% 10px,43.5% 4px,45.7% 0px,47.8% 5.2px,50% .4px,52.2% 0px,54.3% 0px,56.5% 0px,58.7% 9.8px,60.9% 3.5px,63% 0px,65.2% 6.4px,67.4% 2.9px,69.6% 2.3px,71.7% 10px,73.9% 4.8px,76.1% 3.1px,78.3% 0px,80.4% 7.8px,82.6% 10px,84.8% 10px,87% 10px,89.1% 10px,91.3% 10px,93.5% 2.9px,95.7% 6px,97.8% 6.8px,100% 3px,100% 100%,0% 100%); }
.foot { display: flex; flex-direction: column; min-height: var(--stage-h); }
.foot-big .line + .line { margin-top: 8px; }
.foot-big .line:first-child { color: var(--mustard); }
.again { flex: none; align-self: flex-start; margin-top: 22px; padding: 12px 14px 11px; background: var(--ink); color: var(--cheese); font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 0 0 3px var(--stock); transform: rotate(-2deg); transition: transform .16s cubic-bezier(.3, 1.8, .5, 1); }
.again:hover { transform: rotate(2deg) scale(1.06); }
.again:active { transform: scale(.94); }
.foot-logo { display: block; width: 100%; color: var(--stock); }
.foot-logo svg { display: block; width: 100%; height: auto; }
.foot-small { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 16px; padding: 0 62px 0 2px; font: 600 16px/1.1 var(--print); } /* the thumb's corner again */
.foot-small b { font-weight: 700; color: var(--mustard); }
.stray { position: relative; display: block; align-self: flex-end; flex: none; width: 176px; margin: auto 10px; cursor: pointer; }
.stray img { width: 100%; height: auto; transform: rotate(-16deg); }
.stray span { position: absolute; right: 82%; top: 12%; width: 128px; padding: 5px 8px 4px; background: var(--stock); color: var(--ink); font: 400 14.5px/1.08 var(--hand); text-align: left; box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink); transform: rotate(-3deg); }

/* The way on: a marker highlight in the sentence, and a sticker that bounces at the foot of the first screen */
.go { padding: 0 2px; font-weight: 700; background: linear-gradient(transparent 56%, var(--cheese) 56% 92%, transparent 92%); }
.more { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--strip-h) + 10px); width: 56px; height: 56px; margin-left: -28px; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.more-in { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--stock); box-shadow: 0 0 0 2.5px var(--ink), 2px 4px 0 2.5px var(--ink); animation: nudge 1.15s ease-in-out infinite; will-change: transform; }
.more svg { width: 25px; height: auto; }
.more:hover .more-in { background: var(--cheese); }
@keyframes nudge { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(5px); } }
.intro .more { --r: 0deg; animation: slap .26s var(--thud) 3.3s both; }
.reduced .more-in { animation: none; }
.short .more { width: 50px; height: 50px; margin-left: -25px; bottom: calc(var(--strip-h) + 8px); }

/* ------------------------------------------------------------------ a screen wider than a phone: words left, burger right */

@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) {
  :root { --edge: 3vw; --gutter: 3vw; --measure: 38vw; --pad: 8px; --strip-h: max(62px, 4vw); }
  .hero { --measure: min(41vw, calc(var(--vh) * 76)); }
  .hero-stage { flex-direction: row; align-items: stretch; padding: calc(var(--vh) * 3.4) 0 0; }
  .hero-text { flex: 0 0 calc(var(--measure) + 2 * var(--edge)); }
  .lockup-wrap { width: min(34vw, calc(var(--vh) * 58)); margin-left: 0; }
  .shout { margin-top: calc(var(--vh) * 2.2); }
  .shout .line + .line { margin-top: 8px; }
  .shout-scribble { bottom: -16px; height: 24px; }
  .hero-copy { margin-top: 22px; padding: 0; max-width: 40ch; font-size: clamp(19px, 1.5vw, 34px); }
  .hero-burger { flex: 1 1 auto; margin-left: -3vw; } /* it leans on the headline, and the headline stays on top */
  .hero-glow { width: 96vw; left: 46%; top: 48%; }
  .hero-burger .burst { width: min(62vw, calc(var(--vh) * 100)); margin: calc(min(62vw, calc(var(--vh) * 100)) / -2) 0 0 calc(min(62vw, calc(var(--vh) * 100)) / -2); left: 48%; top: 47%; }
  .hero-sticker { height: calc(100% - var(--strip-h) + 40px); max-width: none; left: 47%; bottom: calc(var(--strip-h) - 22px); }
  .more { left: calc(var(--edge) + var(--measure) - 66px); width: 64px; height: 64px; margin-left: 0; bottom: calc(var(--strip-h) + 14px); }
  .more svg { width: 29px; }
  .halo--hero { width: 27%; left: 37%; top: 0; }
  .seal--hero { width: 20%; right: 8%; top: 9%; }
  .tape--hero { font-size: 18px; padding: 6px 12px 5px; left: 4vw; bottom: calc(var(--strip-h) + 34px); }
  .hand--go { right: 2.4vw; bottom: calc(var(--strip-h) + 26px); width: 176px; padding: 8px 11px 7px; font-size: 19px; }
  .strip-run { font-size: max(32px, 2.2vw); }

  .pile .slab { padding: var(--pad) var(--edge); }
  .glow { left: 69vw; width: 76vw; margin-left: -38vw; bottom: calc(var(--vh) * -36); }
  .burst--stage { left: 73vw; bottom: calc(var(--vh) * -4); width: min(52vw, calc(var(--vh) * 106)); margin-left: calc(min(52vw, calc(var(--vh) * 106)) / -2); }
  .burger-host { left: 38vw; right: 0; }
  .note { max-width: 300px; }
  .note-text { font-size: 19px; padding: 7px 12px 6px; }
  .arrow { width: 70px; }
  .pickle-four { width: 190px; }
  .four-says { margin-left: -92px; font-size: 18px; }
  .nope { font-size: min(22vw, calc(var(--vh) * 44)); padding: 16px 26px 10px; }
  .gauge { width: 300px; }
  .sauce { --measure: calc(100vw - 2 * var(--edge)); --lh: calc(var(--measure) * .86 / 14.8); }
  .sauce-lines { display: flex; justify-content: space-between; }
  .sauce-lines .line { --fs: calc(var(--measure) / 14.8); width: auto; }
  .sauce-lines .line + .line { margin-top: 0; }
  .last-word--smash { padding-top: calc(var(--vh) * 4); }
  .gauge figcaption { font-size: 16px; }
  .finale-title { left: var(--edge); right: auto; width: var(--measure); top: calc(var(--vh) * 4); }
  .finale-shove { left: var(--edge); width: 320px; top: calc(calc(var(--vh) * 4) + var(--title-h, 300px) + 26px); font-size: 22px; padding: 8px 13px 7px; }
  .callout[data-big] { display: list-item; }
  .callout span { font-size: 19px; padding: 6px 11px 5px; }
  .halo--finale { width: 230px; }

  .head, .review .head { top: 0; bottom: auto; padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px 0; }
  .mini { display: block; width: 120px; padding: 6px 10px 2px; background: var(--stock); box-shadow: 0 0 0 2.5px var(--ink), 2px 3px 0 2.5px var(--ink); color: var(--tomato); transform: rotate(-3deg); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); align-self: center; }
  .mini:hover { transform: rotate(2deg) scale(1.06); }
  .mini svg { width: 100%; height: auto; }
  .burger-menu { width: 56px; height: 56px; }
  .bars { left: 14px; right: 14px; top: 12px; bottom: 12px; }

  .strip--tape { height: 72px; top: -36px; }
  .strip--tape .strip-run { font-size: 36px; }
  .secret { padding: 80px var(--edge) 90px; display: grid; grid-template-columns: var(--measure) 1fr; column-gap: 4vw; align-items: start; }
  .secret { --measure: 56vw; }
  .secret-title { grid-column: 1; grid-row: 1 / span 2; }
  .card { grid-column: 2; grid-row: 1; margin: calc(var(--vh) * 2) 0 0 -8vw; width: auto; max-width: 480px; }
  .secret-copy { grid-column: 2; grid-row: 2; margin: 28px 0 0 -2vw; font-size: 30px; }
  .lunch { --measure: min(66vw, calc(calc(var(--vh) * 158) - 300px)); padding: 76px var(--edge) 72px; }
  .bring { position: absolute; right: 4vw; top: 50%; margin: 0; font-size: 23px; transform: translateY(-50%) rotate(-1.4deg); }
  .bring-title { font-size: 36px; }
  .foot { --measure: calc(100vw - 2 * var(--edge)); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; column-gap: 4vw; padding: 84px var(--edge) 24px; }
  .foot-big { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; }
  .foot-big .line { --fs: calc(var(--measure) / 6.72); }
  .foot-big .line + .line { margin-top: 0; }
  .foot-logo { grid-column: 1; grid-row: 2; align-self: center; width: min(62vw, calc(var(--vh) * 92)); padding: calc(var(--vh) * 2) 0 0; margin: 0; }
  .again { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; font-size: 34px; padding: 16px 22px 15px; margin: 0 8px 12px 0; }
  .stray { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; width: 190px; margin: calc(var(--vh) * 4) 24px 0 0; }
  .stray span { font-size: 18px; width: 150px; }
  .foot-small { grid-column: 1 / -1; grid-row: 3; justify-content: space-between; margin-top: 20px; padding: 0 2px; font-size: 19px; }
}

/* A short desktop window: the words give up height so the paragraph, and Keep scrolling, stay above the ticker */
@media (min-width: 900px) and (max-height: 640px) {
  .hero { --measure: min(41vw, calc(var(--vh) * 62)); }
  .lockup-wrap { width: min(34vw, calc(var(--vh) * 46)); }
  .shout { margin-top: calc(var(--vh) * 1.2); }
  .hero-copy { margin-top: 14px; font-size: 15px; }
  .more { width: 52px; height: 52px; bottom: calc(var(--strip-h) + 10px); }
}
@media (max-height: 480px) { .hero-copy { display: none; } .finale-shove { display: none; } }
.short .halo--finale { width: 96px; }
.short .finale-shove { width: min(210px, 62vw); font-size: 14.5px; }
/* An iPhone in Safari with its bars up, the real first screen: the words give up height so the burger stays the hero */
.short .hero { --measure: min(calc(100vw - 2 * var(--edge)), calc(var(--vh) * 49)); }
.short .lockup-wrap { width: min(76vw, calc(var(--vh) * 31)); }
.short .shout { margin-top: 10px; }
.short .hero-copy { margin-top: 15px; font-size: calc(var(--vh) * 2.3); }
.short .hero-sticker { height: calc(100% - var(--strip-h) + 22px); }
.short .halo--hero { left: 37%; top: 2.5%; width: 25%; }
@media (max-width: 359px) { .tape { font-size: 12px; padding: 4px 8px 3px; } .hand--go { width: 104px; font-size: 12px; } }

/* ------------------------------------------------------------------ reduced motion: a complete, still page */

.reduced .hero { position: relative; }
.reduced .hero-sticker { bottom: 10px; height: calc(100% - 10px); }
#gauge-needle { transform-box: view-box; }
.reduced #gauge-needle { transform: rotate(196deg); transform-origin: 120px 124px; }
.reduced .strip { margin-top: 0; }
.reduced .strip-track { width: auto; display: block; white-space: normal; padding: 7px var(--edge); }
.reduced .strip-run { white-space: normal; font-size: 20px; line-height: 1.15; }
.reduced .strip { height: auto; }
.reduced .strip--tape, .reduced .sauce-floor, html:not(.js) .sauce-floor { display: none; }
.reduced .tapes { display: none; }
.reduced .after { margin-top: 0; }
.reduced .build { height: auto; }
.reduced .ruler, .reduced .tag { display: none; }
.reduced .secret, .reduced .lunch { position: relative; top: 0; }
.reduced .stage { position: relative; display: flex; flex-direction: column; height: auto; overflow: visible; background: var(--paper); }
.reduced .shake { order: 1; }
.reduced .sauce { order: 2; }
.reduced .last { order: 3; }
.reduced .burger-host { order: 4; }
.reduced .notes { order: 5; }
.reduced .finale { order: 6; }
.reduced .flood, .reduced .burst--stage, .reduced .glow, .reduced .pickle-four, .reduced .nope, .reduced .crumb, .reduced .halo--finale { display: none; }
.reduced .shake, .reduced .pile { position: static; }
.reduced .pile { transform: none; flex-direction: column; }
.reduced .scribble path { stroke-dashoffset: 0; }
.reduced .rope, .reduced .drape, .reduced .sauce-crest, .reduced .splats, .reduced .last-word--smash { display: none; }
.reduced .sauce { position: relative; inset: auto; z-index: auto; }
.reduced .sauce-press { position: relative; inset: auto; display: flex; flex-direction: column; padding: 16px 0 calc(var(--pad) + 10px); background: var(--sauce); }
.reduced .sauce-sheet { position: static; height: auto; order: 2; background: none; }
.reduced .sauce-sheet .sauce-drips { display: none; }
.reduced .alot { position: static; visibility: visible; order: 1; margin: 0 var(--edge); }
.reduced .alot-word { height: auto; aspect-ratio: 1975 / 870; }
.reduced .sauce-lines { position: static; margin: 10px var(--edge) 0; }
.reduced .last { position: static; visibility: visible; }
.reduced .burger-host { position: relative; left: 0; right: 0; height: 74vw; max-height: calc(var(--vh) * 72); margin-top: 12px; }
.reduced .notes { position: static; padding: 14px var(--gutter) 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.reduced .note { position: static; visibility: visible; max-width: none; }
.reduced .note--start, .reduced .arrow { display: none; }
.reduced .gauge { position: relative; visibility: visible; order: 3; margin: 16px auto 0; }
.reduced .finale { position: relative; inset: auto; visibility: visible; color: var(--ink); padding: 16px var(--edge) 28px; pointer-events: auto; }
.reduced .finale-title { position: static; color: var(--tomato); }
.reduced .finale-title .ln-2 { color: var(--ink); }
.reduced .finale-title .line, html:not(.js) .finale-title .line { background: none; box-shadow: none; }
.reduced .finale-shove { display: none; }
.reduced .finale-shove { position: static; margin: 12px 0 0; }
.reduced .callouts { display: none; }

/* ------------------------------------------------------------------ no script: the same still page */

html:not(.js) .hero { position: relative; }
html:not(.js) .hero-sticker { bottom: 10px; height: calc(100% - 10px); }
html:not(.js) .strip { margin-top: 0; }
html:not(.js) .build { height: auto; }
html:not(.js) .after { margin-top: 0; }
html:not(.js) .ruler, html:not(.js) .tag { display: none; }
html:not(.js) .secret, html:not(.js) .lunch { position: relative; top: 0; }
html:not(.js) .stage { position: relative; display: flex; flex-direction: column; height: auto; overflow: visible; }
html:not(.js) .shake { order: 1; }
html:not(.js) .sauce { order: 2; }
html:not(.js) .last { order: 3; }
html:not(.js) .notes { order: 5; }
html:not(.js) .finale { order: 6; }
html:not(.js) .flood, html:not(.js) .burst--stage, html:not(.js) .glow, html:not(.js) .pickle-four, html:not(.js) .nope, html:not(.js) .burger-host, html:not(.js) .halo--finale, html:not(.js) .head, html:not(.js) .strip--tape { display: none; }
html:not(.js) .shake, html:not(.js) .pile { position: static; }
html:not(.js) .pile { flex-direction: column; }
html:not(.js) .scribble path { stroke-dashoffset: 0; }
html:not(.js) .rope, html:not(.js) .drape, html:not(.js) .sauce-crest, html:not(.js) .splats, html:not(.js) .last-word--smash, html:not(.js) .sauce-drips { display: none; }
html:not(.js) .sauce { position: relative; inset: auto; z-index: auto; }
html:not(.js) .sauce-press { position: relative; inset: auto; display: flex; flex-direction: column; padding: 16px 0 18px; background: var(--sauce); }
html:not(.js) .sauce-sheet { position: static; height: auto; order: 2; background: none; }
html:not(.js) .alot { position: static; visibility: visible; order: 1; margin: 0 var(--edge); }
html:not(.js) .alot-word { height: auto; aspect-ratio: 1975 / 870; }
html:not(.js) .sauce-lines { position: static; margin: 10px var(--edge) 0; }
html:not(.js) .last { position: static; visibility: visible; }
html:not(.js) .notes { position: static; padding: 14px var(--gutter) 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
html:not(.js) .note { position: static; visibility: visible; max-width: none; }
html:not(.js) .note--start, html:not(.js) .arrow { display: none; }
html:not(.js) .gauge { position: relative; visibility: visible; order: 3; margin: 16px auto 0; }
html:not(.js) .finale { position: relative; inset: auto; visibility: visible; color: var(--ink); padding: 16px var(--edge) 28px; }
html:not(.js) .finale-title { position: static; color: var(--tomato); }
html:not(.js) .finale-shove { position: static; margin: 12px 0 0; }
html:not(.js) .callouts { display: none; }