/* Doorbusters: Everyday Low Violence. Site styles.
   The whole site is printed like the game: flat inks, halftone screens,
   plates slightly out of register, a keyline and a die-cut edge. */

@font-face {
  font-family: "Anybody";
  src: url("../assets/fonts/anybody-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Shrikhand";
  src: url("../assets/fonts/shrikhand-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alfa Slab One";
  src: url("../assets/fonts/alfa-slab-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Caveat Brush";
  src: url("../assets/fonts/caveat-brush-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../assets/fonts/martian-mono-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  /* The Sale Flyer palette, from the game. */
  --blue: #2346c8;
  --blue-deep: #1b37a6;
  --yellow: #ffd21f;
  --red: #e8291c;
  --paper: #fffaf0;
  --ink: #1b1a3a;
  --pink: #ff5fa2;
  --orange: #ff7a1a;
  --green: #19b36b;
  --teal: #12b5c9;
  --purple: #8a4fd6;

  --display: "Anybody", "Arial Black", "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;   /* the sentences: calm, large, one italic phrase a line */
  --text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --price: "Figtree", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;   /* prices and the store name: a big-box store sign */
  /* Every font in the shop. Used in the run section only. */
  --shout: "Anton", "Arial Narrow", Impact, sans-serif;
  --script: "Shrikhand", Georgia, serif;
  --slab: "Alfa Slab One", Rockwell, serif;
  --hand: "Caveat Brush", "Marker Felt", cursive;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(18px, 4vw, 64px);
  --max: 1480px;
  --key: 3px;                 /* keyline */
  --die: 7px;                 /* die-cut edge */

  /* Plate slip. JS moves these with scroll speed. */
  --sx: 0;
  --sy: 0;

  --step: steps(5, end);      /* held poses */
  --ease-out: cubic-bezier(.2, .9, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--blue);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(17px, 1.22vw, 21px);
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--paper); }
::selection { background: var(--pink); color: var(--ink); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Screens ---------- */
.screen-dots {
  background-image:
    radial-gradient(circle at 50% 50%, var(--dot, var(--ink)) 0 31%, transparent 33%),
    radial-gradient(circle at 50% 50%, var(--dot, var(--ink)) 0 31%, transparent 33%);
  background-size: var(--cell, 8px) var(--cell, 8px);
  background-position: 0 0, calc(var(--cell, 8px) / 2) calc(var(--cell, 8px) / 2);
}
.screen-lines {
  background-image: repeating-linear-gradient(-38deg, var(--dot, var(--ink)) 0 1.6px, transparent 1.6px 6px);
}

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-stretch: 87%;
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 500;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before {
  content: "";
  width: .7em; height: .7em;
  background: currentColor;
  transform: rotate(45deg);
}

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9.6vw, 172px);
  line-height: .86;
  letter-spacing: -.032em;
  /* second plate: in register at rest, slips while the page moves */
  text-shadow: calc(var(--sx) * 1.6px) calc(var(--sy) * 1.6px) 0 var(--plate, var(--pink));
}
.h2 .narrow { display: block; font-style: italic; padding-left: .5em; }
.h2 .wide, .h2 em { font-style: italic; }
.h2 .w, .lines .w { display: inline-block; }

/* Every font in the shop: one job each. The sentence, the thing for sale, the shout, the manager's pen. */
.h2--shop { font-family: var(--shout); letter-spacing: .004em; line-height: 1.06; font-size: clamp(24px, 8.4vw, 140px); }
.h2--shop .narrow { font-style: normal; padding-left: 0; white-space: nowrap; margin-top: .06em; }
.shop-scr { font-family: var(--script); font-style: normal; display: inline-block; rotate: -3deg; letter-spacing: -.01em; white-space: nowrap; text-shadow: .035em .035em 0 var(--ink); }
.shop-slab { font-family: var(--slab); font-style: normal; display: inline-block; font-size: .78em; padding: .04em .2em .08em; background: var(--paper); color: var(--red); border: max(2px, .04em) solid var(--ink); box-shadow: .08em .08em 0 var(--ink); rotate: 1.6deg; vertical-align: .06em; white-space: nowrap; text-shadow: none; }
.shop-hand { font-family: var(--hand); font-style: normal; display: inline-block; rotate: -4deg; font-size: .72em; vertical-align: .14em; color: var(--paper); }
@media (max-width: 700px) { .h2 .narrow { padding-left: .22em; } }

.lede {
  font-size: clamp(20px, 1.75vw, 30px);
  line-height: 1.28;
  font-weight: 600;
  max-width: 30ch;
  letter-spacing: -.005em;
}
.body { max-width: 46ch; }
.body + .body { margin-top: 1em; }
.small { font-family: var(--mono); font-stretch: 87%; font-size: clamp(11px, .8vw, 13px); line-height: 1.6; letter-spacing: .01em; }

/* A price, set like a price. */
.price {
  font-family: var(--price);
  font-style: normal;
  font-weight: 900;
  display: inline-flex;
  align-items: flex-start;
  line-height: .8;
  letter-spacing: -.045em;
}
.price .cur { font-size: .5em; margin-right: .04em; margin-top: .06em; }
.price .cents {
  font-size: .46em;
  margin-left: .06em;
  margin-top: .04em;
  padding-bottom: .12em;
  border-bottom: .13em solid currentColor;
  letter-spacing: 0;
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--yellow);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .82em 1.25em .8em;
  font-family: var(--text);
  font-weight: 800;
  letter-spacing: .005em;
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  border: var(--key) solid var(--ink);
  border-radius: 0;
  box-shadow: 0 0 0 4px var(--paper), 6px 7px 0 4px var(--ink);
  transform: translate(0, 0);
  transition: transform .12s var(--step), box-shadow .12s var(--step);
  white-space: nowrap;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 0 0 0 4px var(--paper), 3px 4px 0 4px var(--ink); }
.btn:active { transform: translate(6px, 7px); box-shadow: 0 0 0 4px var(--paper), 0 0 0 4px var(--ink); }
.btn--red { --bg: var(--red); color: var(--paper); }
.btn--paper { --bg: var(--paper); }
.btn--small { font-size: 13px; padding: .7em 1em .68em; box-shadow: 0 0 0 3px var(--paper), 4px 5px 0 3px var(--ink); }
.btn--small:hover { box-shadow: 0 0 0 3px var(--paper), 2px 2px 0 3px var(--ink); transform: translate(2px, 3px); }
.btn .steam { width: 1.15em; height: 1.15em; flex: none; }
.btn[aria-disabled="true"] { cursor: default; }

.link {
  font-family: var(--text);
  font-weight: 700;
  font-size: clamp(14px, 1vw, 17px);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 3px;
  transition: background-size .2s var(--step);
}
.link:hover { background-size: 0 2px; background-position: 100% 100%; }

/* ---------- Die-cut frame ---------- */
.cut {
  position: relative;
  isolation: isolate;
}
.cut::before {           /* drop plate: a halftone shadow, off register */
  content: "";
  position: absolute;
  inset: calc(-1 * var(--die));
  transform: translate(calc(14px + var(--sx) * 1.5px), calc(16px + var(--sy) * 1.5px));
  background-image:
    radial-gradient(circle at 50% 50%, var(--shadow, var(--ink)) 0 33%, transparent 35%),
    radial-gradient(circle at 50% 50%, var(--shadow, var(--ink)) 0 33%, transparent 35%);
  background-size: 7px 7px;
  background-position: 0 0, 3.5px 3.5px;
  z-index: -1;
}
.cut__in {
  position: relative;
  border: var(--key) solid var(--ink);
  box-shadow: 0 0 0 var(--die) var(--paper), 0 0 0 calc(var(--die) + 2px) var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.cut video, .cut img { width: 100%; height: 100%; object-fit: cover; }
.chip {
  font-family: var(--mono);
  font-stretch: 87%;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: .55em .7em;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  display: inline-block;
  white-space: nowrap;
}
.cut .chip { position: absolute; left: 10px; bottom: 10px; z-index: 2; }

/* ---------- Bursts ---------- */
.burst { position: relative; display: grid; place-items: center; width: var(--size, 220px); aspect-ratio: 1; }
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: tick 2.4s steps(6) infinite; }
.burst .b-ink { fill: var(--ink); stroke: var(--ink); stroke-width: 20; stroke-linejoin: miter; }
.burst .b-paper { fill: var(--paper); stroke: var(--paper); stroke-width: 14; stroke-linejoin: miter; }
.burst .b-fill { fill: var(--fill, var(--red)); stroke: var(--ink); stroke-width: 3; stroke-linejoin: miter; }
.burst__txt {
  position: relative;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 100%;
  font-size: calc(var(--size, 220px) * .155);
  line-height: .92;
  text-align: center;
  color: var(--txt, var(--yellow));
  transform: rotate(-9deg);
  text-shadow: .05em .06em 0 var(--ink);
}
.burst__txt small { display: block; font-size: .5em; font-stretch: 125%; font-weight: 800; margin-bottom: .25em; color: var(--paper); text-shadow: none; }
@keyframes tick { to { transform: rotate(30deg); } }

/* ---------- Tags ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  background: var(--paper);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  padding: .32em .7em .42em;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 25px);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 4px 5px 0 var(--ink);
}
.tag .price { color: var(--red); font-size: 1.7em; }
.scene__tag { font-size: clamp(21px, 2vw, 34px); padding: .34em .7em .44em; }

/* ============ PA ticker ============ */
.pa {
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--mono);
  font-stretch: 87%;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .03em;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 60;
}
.pa__track { display: inline-flex; animation: pa 46s linear infinite; animation-play-state: paused; padding-block: 9px; }
.is-live .pa__track { animation-play-state: running; }
.pa__track span { padding-inline: 1.6em; display: inline-flex; align-items: center; gap: 3.2em; }
.pa__track span::after { content: ""; width: 7px; height: 7px; background: var(--red); transform: rotate(45deg); }
@keyframes pa { to { transform: translateX(-50%); } }

/* ============ Nav ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform .3s var(--ease-out);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}
.nav__mark { display: block; line-height: 0; text-decoration: none; rotate: -2deg; }
.nav__mark img { height: clamp(42px, 3.7vw, 56px); width: auto; filter: drop-shadow(3px 4px 0 var(--ink)); }
/* On the home page the mark waits until the big logo has scrolled away. */
.js .nav--hero .nav__mark { visibility: hidden; translate: 0 -12px; }
.js .nav--hero.is-past .nav__mark { visibility: visible; translate: 0 0; transition: translate .2s steps(4); }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); background: var(--ink); padding: 7px 9px 9px 24px; border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--paper); }
.nav__links .link { color: var(--paper); }
.nav__links .link[aria-current] { color: var(--yellow); }
@media (max-width: 860px) { .nav__links .link { display: none; } .nav__links { background: none; padding: 0 6px 0 0; border: 0; box-shadow: none; } }
@media (max-width: 480px) { .nav__mark img { height: 40px; } .nav .btn--small { font-size: 11.5px; padding: .7em .8em .66em; } .nav__in { gap: 10px; } }

/* ============ Hero ============ */
.hero {
  position: relative;
  background: var(--blue);
  color: var(--paper);
  padding-top: clamp(8px, 1.5vw, 24px);
  padding-bottom: clamp(60px, 9vw, 150px);
  margin-top: -74px;         /* sits under the sticky nav */
  padding-top: 96px;
  overflow: hidden;
}
.hero::before {              /* the lot: a screen of deeper blue, heavier toward the foot */
  content: "";
  position: absolute;
  inset: 0;
  --dot: var(--blue-deep);
  --cell: 9px;
  background-image:
    radial-gradient(circle at 50% 50%, var(--dot) 0 36%, transparent 38%),
    radial-gradient(circle at 50% 50%, var(--dot) 0 36%, transparent 38%);
  background-size: var(--cell) var(--cell);
  background-position: 0 0, calc(var(--cell) / 2) calc(var(--cell) / 2);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 85%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 85%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero .eyebrow { color: var(--yellow); margin-bottom: clamp(10px, 1.4vw, 22px); }

/* The logo: a pile of sale stickers. The script slaps them on one at a time. */
.logo {
  position: relative;
  z-index: 3;
  width: 118%;
  aspect-ratio: 1625.796 / 592.493;
  margin: 0 0 clamp(18px, 2.4vw, 40px) -1.5%;
  user-select: none;
  -webkit-user-select: none;
}
.logo img, .logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.js .logo img { visibility: hidden; }          /* the script swaps in the layered drawing */
.js .logo.is-plain img { visibility: visible; }
.logo .stk { transform-box: fill-box; transform-origin: 50% 50%; }
.logo.is-on .stk { animation: slap-on .5s both; animation-delay: var(--d, 0s); }
.logo.is-landed .stk { transition: transform .22s cubic-bezier(.3, 1.8, .5, 1); }
.logo.is-landed:hover .stk--barcode { transform: rotate(-2deg) translate(-1%, 3%); }
.logo.is-landed:hover .stk--door { transform: rotate(-1.5deg); }
.logo.is-landed:hover .stk--busters { transform: rotate(1.5deg) translate(1%, 1%); }
.logo.is-landed:hover .stk--subtitle { transform: rotate(4deg) translate(2%, -4%); }
@keyframes slap-on {       /* falls in fast, hits, squashes, springs back */
  0%   { transform: scale(2.4) rotate(var(--tw, -9deg)); opacity: 0; animation-timing-function: cubic-bezier(.6, 0, .95, .45); }
  14%  { opacity: 1; }
  38%  { transform: scale(.88, .84) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.2, 1.9, .45, 1); }
  100% { transform: none; opacity: 1; }
}

@media (max-width: 860px) { .logo { width: 104%; margin-left: -2%; } }

.hero__row {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: clamp(24px, 3.4vw, 60px);
  align-items: start;
  margin-top: clamp(4px, .8vw, 14px);
}
.hero__copy { padding-top: clamp(0px, 1vw, 16px); }
.hero__copy .lede { color: var(--paper); max-width: 11.5em; font-size: clamp(36px, 3.9vw, 66px); line-height: .98; font-family: var(--serif); font-weight: 400; letter-spacing: -.022em; }
.hero__copy .lede em { font-style: italic; color: var(--yellow); }
.hero__copy .lede { text-wrap: balance; }
.hero__what { margin-top: 1.1em; max-width: 34ch; color: var(--paper); opacity: .96; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; margin-top: clamp(26px, 2.6vw, 44px); }
.hero__cta .link { color: var(--paper); }
.hero__media { position: relative; rotate: 1.6deg; align-self: center; }   /* centred on the whole left column */
.hero__media .cut__in { aspect-ratio: 16 / 9; }
.hero__media .burst { position: absolute; right: -4%; top: -19%; --size: clamp(120px, 15vw, 250px); z-index: 4; }
@media (max-width: 860px) {
  .hero__row { grid-template-columns: 1fr; }
  .hero__media { margin-top: 30px; }
  .hero__media .burst { top: -13%; right: -2%; }
}

/* ============ Scene ============ */
.scene {
  background: var(--blue);
  color: var(--paper);
  padding-block: clamp(40px, 7vw, 120px) clamp(90px, 13vw, 220px);
  position: relative;
}
.lines {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 110px);
  line-height: .96;
  letter-spacing: -.024em;
  max-width: 9.4em;
}
.lines p { margin: 0; text-wrap: balance; }
.lines p + p { margin-top: .42em; }
.lines em { font-style: italic; color: var(--yellow); }
.lines p.you { color: var(--yellow); font-style: italic; margin-top: .6em; }
.lines .w { opacity: .16; transition: opacity .01s; }
.lines .w.on { opacity: 1; }
.scene__leg { position: absolute; right: calc(var(--gutter) + 2vw); bottom: 4%; width: clamp(200px, 30vw, 540px); height: auto; rotate: calc(var(--rot, 0) * 1deg); pointer-events: none; filter: drop-shadow(12px 14px 0 var(--blue-deep)); }
@media (max-width: 860px) { .scene__leg { display: none; } }
.scene__tag { position: absolute; right: var(--gutter); top: 30%; rotate: 5deg; z-index: 2; }
.scene__tag s { text-decoration-thickness: 2px; opacity: .55; font-family: var(--mono); font-style: normal; font-stretch: 87%; font-weight: 500; font-size: .56em; }
@media (max-width: 860px) { .scene__tag { position: relative; right: auto; top: auto; margin-top: 34px; display: inline-flex; } }

/* ============ Section shell ============ */
.sec { position: relative; padding-block: clamp(80px, 11vw, 190px); }
.sec__head { display: grid; gap: clamp(14px, 1.6vw, 26px); margin-bottom: clamp(36px, 5vw, 84px); }
.sec--yellow { background: var(--yellow); --plate: var(--pink); }
.sec--paper { background: var(--paper); --plate: var(--yellow); }
.sec--red { background: var(--red); color: var(--paper); --plate: var(--ink); }
.sec--blue { background: var(--blue); color: var(--paper); --plate: var(--ink); }
.sec--red .h2, .sec--blue .h2 { color: var(--yellow); }
.sec--red .h2 .narrow, .sec--red .h2 em, .sec--blue .h2 .narrow, .sec--blue .h2 em { color: var(--paper); }
.sec--red .eyebrow, .sec--blue .eyebrow { color: var(--paper); }

/* torn edge between grounds */
.edge { position: absolute; left: 0; right: 0; top: -1px; height: 18px; transform: translateY(-100%); background: inherit;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 26px 100%;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 26px 100%; }

/* ============ The Van ============ */
.van__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
}
.van__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(26px, 5vw, 90px); align-items: start; margin-bottom: clamp(44px, 6vw, 100px); }
.van__head .lede { max-width: 28ch; margin-top: clamp(0px, 2.4vw, 40px); }
.van__head .h2 { font-size: clamp(60px, 9.6vw, 172px); }
@media (max-width: 960px) { .van__head { grid-template-columns: 1fr; } }
.van__build { position: sticky; top: 104px; }
@media (max-height: 860px), (max-width: 960px) { .van__build { position: static; } }

/* The weapon, drawn as you build it. */
.rig { position: relative; aspect-ratio: 1; width: min(100%, 470px); }
.rig__burst { position: absolute; inset: 2%; --size: auto; width: auto; --fill: var(--paper); }
.rig__burst svg { animation-duration: 4s; }
.rig__burst .b-ink { stroke-width: 11; }
.rig__burst .b-paper { stroke-width: 6; }
.rig__handle { position: absolute; inset: 0; width: 100%; height: 100%; }
.rig__handle.is-new { animation: stamp .36s steps(5) both; }
.rig__parts { position: absolute; inset: 0; }
.rig__part { position: absolute; width: 31%; aspect-ratio: 1; translate: -50% -50%; rotate: var(--r, 0deg); }
.rig__part img { position: absolute; inset: 0; width: 100%; height: 100%; scale: var(--s, 1); }
.rig__part img:nth-child(2) { translate: 22% -20%; scale: calc(var(--s, 1) * .84); rotate: 14deg; }
.rig__part img:nth-child(3) { translate: -20% -26%; scale: calc(var(--s, 1) * .74); rotate: -18deg; }
.rig__tape {
  position: absolute; left: 12%; right: 12%; top: 44%; height: var(--tape, 11%);
  background: var(--orange);
  border: 2px solid var(--ink);
  rotate: 40deg;
}
.rig__part.is-new { animation: stamp .36s steps(5) both; z-index: 2; }
@keyframes stamp { 0% { scale: 2.1; opacity: 0; } 25% { opacity: 1; } 100% { scale: 1; opacity: 1; } }
.rig__name { position: absolute; left: 0; top: 1%; rotate: -4deg; z-index: 3; max-width: 100%; white-space: normal; line-height: 1.05; }
.steps { list-style: none; margin: clamp(22px, 2.4vw, 40px) 0 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.4em 1fr; gap: .8em; align-items: baseline; font-weight: 600; }
.steps li::before {
  content: counter(s);
  font-family: var(--price); font-weight: 900;
  font-size: 1.7em; line-height: .9; color: var(--red);
  text-shadow: .05em .06em 0 var(--ink);
}
.steps b { font-weight: 800; }

.bench { display: grid; gap: 26px; }
.bench__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.mode { display: inline-flex; border: var(--key) solid var(--ink); background: var(--paper); box-shadow: 4px 5px 0 var(--ink); }
.mode button {
  border: 0; background: transparent; padding: .7em 1em .66em;
  font-family: var(--text); font-weight: 800; font-size: 14px; line-height: 1;
}
.mode button[aria-pressed="true"] { background: var(--ink); color: var(--yellow); }
.bench__hint { font-family: var(--mono); font-stretch: 87%; font-size: 11.5px; }

.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.good {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: left;
  padding: 0;
  background: var(--paper);
  border: var(--key) solid var(--ink);
  box-shadow: 5px 6px 0 var(--ink);
  transition: transform .12s var(--step), box-shadow .12s var(--step);
}
.good:hover { transform: translate(-2px, -3px) rotate(-1deg); box-shadow: 8px 10px 0 var(--ink); }
.good:active { transform: translate(4px, 5px); box-shadow: 1px 1px 0 var(--ink); }
.good__pic { aspect-ratio: 1; background: var(--sheet, #cfd3e1); border-bottom: var(--key) solid var(--ink); overflow: hidden; position: relative; }
.good__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--step); }
.good:hover .good__pic img { transform: scale(1.12) rotate(4deg); }
.good__pic .none { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-stretch: 60%; font-size: 64px; color: var(--ink); opacity: .25; }
.good__meta { padding: 10px 11px 11px; display: grid; gap: 8px; align-content: space-between; }
.good__name { font-family: var(--text); font-weight: 800; font-size: clamp(13px, .95vw, 15.5px); line-height: 1.12; }
.good__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.good__move { font-family: var(--mono); font-stretch: 87%; font-size: 12px; font-weight: 500; border: 1.5px solid var(--ink); padding: .35em .5em; line-height: 1; }
.good__hit { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(20px, 1.65vw, 27px); line-height: .8; color: var(--red); text-align: right; }
.good__n {
  position: absolute; left: -9px; top: -11px; z-index: 2;
  min-width: 30px; height: 30px; padding-inline: 6px; display: none; place-items: center;
  font-family: var(--price); font-weight: 900; font-size: 16px; line-height: 1;
  background: var(--red); color: var(--paper); border: 2.5px solid var(--ink); transform: rotate(-8deg);
}
.good.is-on .good__n { display: grid; }
.good.is-on::after {       /* a strip of tape */
  content: ""; position: absolute; left: 16%; right: 16%; top: 30%; height: 16px;
  background: var(--orange);
  border: 2px solid var(--ink);
  transform: rotate(-11deg);
  pointer-events: none;
}

/* Receipts */
.receipt {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-stretch: 84%;
  font-size: clamp(11.5px, .86vw, 13.5px);
  line-height: 1.5;
  padding: 22px 20px 34px;
  width: min(100%, 380px);
  filter: drop-shadow(7px 9px 0 var(--ink));
  -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%;
}
.receipt-wrap { filter: drop-shadow(7px 9px 0 var(--ink)); width: min(100%, 380px); }
.receipt-wrap .receipt { filter: none; width: 100%; }
.receipt__store { font-family: var(--price); font-weight: 900; letter-spacing: -.035em; font-size: 2.5em; line-height: 1; text-align: center; color: var(--red); }
.receipt__sub { text-align: center; margin-top: 4px; }
.receipt hr { border: 0; border-top: 1.5px dashed var(--ink); margin: 12px 0; opacity: .6; }
.receipt__rows { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.receipt__rows li { display: grid; grid-template-columns: 1.6em 1fr auto; gap: .5em; align-items: baseline; }
.receipt__rows li .mv { font-weight: 700; }
.receipt__rows li.is-new { animation: print .34s steps(4) both; }
.receipt__rows li.is-fused .nm { background: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.receipt__order { font-weight: 700; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; font-weight: 700; }
.receipt__total .price { font-size: 2.4em; color: var(--red); }
.receipt__note { margin-top: 10px; min-height: 3em; }
.receipt__bar { height: 34px; margin-top: 14px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 14px); }
@keyframes print { from { opacity: 0; transform: translateY(-8px); background: var(--yellow); } to { opacity: 1; transform: none; background: transparent; } }
.van__lower { display: grid; grid-template-columns: minmax(0, 1fr) min(330px, 62%); gap: 18px; align-items: end; margin-top: -19%; }
.van__receipt { rotate: 2.5deg; position: relative; z-index: 4; }
@media (max-width: 960px) { .van__lower { display: contents; } .van__receipt { rotate: 0deg; } }
.van__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 26px; order: -1; position: relative; z-index: 5; }
@media (max-width: 960px) { .van__actions { flex-direction: row; flex-wrap: wrap; padding-bottom: 0; } }

@media (max-width: 960px) {
  .van__grid { display: flex; flex-direction: column; gap: 22px; }
  .van__build { display: contents; }
  .rig { order: 1; align-self: center; }
  .bench { order: 2; min-width: 0; }
  .van__receipt { order: 3; }
  .van__actions { order: 4; margin-top: 0; }
  .shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 12px 10px 16px 10px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .shelf::-webkit-scrollbar { display: none; }
  .good { flex: 0 0 42%; scroll-snap-align: start; }
}
@media (max-width: 700px) {
  .btn--small, .mode button { min-height: 44px; }
  .foot__thanks { font-stretch: 125%; }
}

/* ============ Then Stand Back ============ */
.stand { position: relative; height: 210vh; background: var(--ink); color: var(--paper); }
.stand__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.stand__vid { position: absolute; inset: 0; clip-path: inset(calc(var(--c, 1) * 22%) calc(var(--c, 1) * 26%)); will-change: clip-path; }
.stand__vid video { width: 100%; height: 100%; object-fit: cover; }
.stand__vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(27, 26, 58, .92) 0, rgba(27, 26, 58, 0) 64%); opacity: var(--shade, 0); }
.stand__head {
  position: relative;
  z-index: 2;
  text-align: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(60px, 13vw, 250px);
  line-height: .82;
  letter-spacing: -.035em;
  color: var(--ink);
  background: var(--paper);
  padding: .1em .26em .2em .2em;
  border: var(--key) solid var(--ink);
  box-shadow: 0 0 0 var(--die) var(--paper), 0 0 0 calc(var(--die) + 2px) var(--ink), 16px 20px 0 calc(var(--die) + 2px) var(--ink);
  rotate: -2.5deg;
  pointer-events: none;   /* a die-cut card, so the letters hold over any frame */
}
.stand__head span { display: block; }
.stand__head span:nth-child(2) { font-style: italic; padding-left: .42em; }
.stand__copy {
  position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(26px, 5vw, 70px);
  max-width: 34ch; opacity: var(--copy, 0); transform: translateY(calc((1 - var(--copy, 0)) * 24px));
}
.stand__copy .lede { color: var(--paper); max-width: 22ch; }
.stand__copy .body { margin-top: .8em; color: var(--paper); }
.stand__copy .btn { margin-top: 1.4em; }
.stand .chip { position: absolute; right: var(--gutter); bottom: clamp(26px, 5vw, 70px); z-index: 3; opacity: var(--copy, 0); }
@media (max-width: 700px) { .stand .chip { top: 84px; bottom: auto; } }

/* ============ Shoppers ============ */
.shop__top { display: grid; gap: clamp(20px, 2.6vw, 44px); }
.shop__top .lede { max-width: 32ch; }
.lineup { margin-top: clamp(40px, 5vw, 80px); --shadow: var(--red); }
.lineup .cut__in { aspect-ratio: 21 / 9; }
.lineup img { transform: scale(1.14) translateX(calc(var(--par, 0) * 1%)); will-change: transform; }
@media (max-width: 700px) { .lineup .cut__in { aspect-ratio: 4 / 3; } }

.roll {
  margin-top: clamp(50px, 7vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: end;
  border-top: var(--key) solid var(--ink);
  padding-top: clamp(22px, 2.6vw, 40px);
}
.roll__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 10.6vw, 190px);
  line-height: .86;
  letter-spacing: -.032em;
  min-height: 1.72em;
  text-shadow: calc(var(--sx) * 1.6px) calc(var(--sy) * 1.6px) 0 var(--yellow);
}
.roll__name .first { display: block; }
.roll__name .tagline { display: block; font-style: italic; color: var(--red); padding-left: .42em; padding-bottom: .12em; }
.roll__side { display: grid; gap: 18px; justify-items: end; text-align: right; padding-bottom: .6em; }
.roll__side .price { font-size: clamp(44px, 6vw, 104px); color: var(--ink); }
.roll__side .was { font-family: var(--mono); font-stretch: 87%; font-size: 12px; }
.roll__side .was s { text-decoration-thickness: 2px; text-decoration-color: var(--red); }
@media (max-width: 700px) { .roll { grid-template-columns: 1fr; } .roll__side { justify-items: start; text-align: left; } }

.types { list-style: none; margin: clamp(50px, 7vw, 120px) 0 0; padding: 0; border-top: var(--key) solid var(--ink); }
.types li {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 5fr) minmax(0, 4fr) auto;
  gap: 20px;
  align-items: baseline;
  padding-block: clamp(14px, 1.5vw, 24px);
  border-bottom: var(--key) solid var(--ink);
  position: relative;
  transition: padding .15s var(--step), background .01s;
}
.types li:hover { background: var(--ink); color: var(--paper); padding-inline: 18px; }
.types li:hover .types__name { color: var(--yellow); font-style: italic; }
.types .aisle { font-family: var(--mono); font-stretch: 87%; font-size: 12px; }
.types .part { display: none; font-family: var(--mono); font-stretch: 87%; font-size: 11px; border: 1.5px solid currentColor; padding: .4em .6em; line-height: 1; white-space: nowrap; align-self: center; }
@media (max-width: 700px) { .types .part { justify-self: start; } }
.types__name { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 88px); line-height: .92; letter-spacing: -.025em; }
.types__line { font-size: clamp(16px, 1.3vw, 22px); font-weight: 600; max-width: 30ch; }
@media (max-width: 700px) { .types li { grid-template-columns: 1fr; gap: 6px; } }
.shop__close { margin-top: clamp(40px, 5vw, 80px); font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(32px, 4.2vw, 72px); line-height: 1; letter-spacing: -.02em; }

/* ============ The Run ============ */
.run__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
@media (max-width: 960px) { .run__grid { grid-template-columns: 1fr; } }
.run__lede { color: var(--paper); max-width: 30ch; margin-bottom: clamp(24px, 3vw, 50px); }
.ladder { list-style: none; margin: 0 0 clamp(40px, 6vw, 100px); padding: 0; display: grid; gap: clamp(6px, 1vw, 16px); font-family: var(--shout); font-weight: 400; line-height: 1.02; letter-spacing: .004em; }
.ladder .f-scr { font-family: var(--script); letter-spacing: -.01em; rotate: -2deg; transform-origin: 0 60%; }
.ladder .f-slab { font-family: var(--slab); letter-spacing: -.01em; }
.ladder .f-hand { font-family: var(--hand); letter-spacing: 0; rotate: -1.5deg; transform-origin: 0 60%; }
.ladder li {
  font-size: clamp(22px, 5vw, 80px);
  white-space: nowrap;
  color: var(--paper);
  opacity: .26;
  transition: opacity .01s;
  text-shadow: calc(var(--sx) * 1.6px) calc(var(--sy) * 1.6px) 0 var(--ink);
}
.ladder li.on { opacity: 1; color: var(--yellow); }
.ladder li.on:last-child { color: var(--paper); }
.run__copy { display: grid; gap: 1em; }
.run__copy .lede { color: var(--paper); max-width: 28ch; }
.run__copy .body { color: var(--paper); font-weight: 700; font-size: max(1em, 19px); }
.run__steve { font-family: var(--hand); font-style: normal; justify-self: start; margin-top: clamp(14px, 2vw, 30px); rotate: -3deg; font-size: clamp(24px, 2.5vw, 42px); padding: .3em .7em .42em; white-space: normal; }
.run__side { display: grid; gap: clamp(30px, 4vw, 60px); justify-items: start; }
.run__vid { width: 100%; rotate: -1.4deg; --shadow: var(--ink); }
.run__vid .cut__in { aspect-ratio: 16 / 9; }
.run__receipt { transform: rotate(2deg); }
.run__receipt .receipt { clip-path: inset(0 0 calc((1 - var(--print, 0)) * 100%) 0); }

/* ============ Printed Like A Flyer ============ */
.print__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
@media (max-width: 960px) { .print__grid { grid-template-columns: 1fr; } }
.plates { position: relative; aspect-ratio: 1280 / 752; background: #fff; border: var(--key) solid var(--ink); isolation: isolate; }
.plates img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; will-change: transform; }
.plates img:nth-child(1) { transform: translate(calc(var(--off, 1) * -7%), calc(var(--off, 1) * 5%)) rotate(calc(var(--off, 1) * -3deg)); }
.plates img:nth-child(2) { transform: translate(calc(var(--off, 1) * 6%), calc(var(--off, 1) * -6%)) rotate(calc(var(--off, 1) * 2.4deg)); }
.plates img:nth-child(3) { transform: translate(calc(var(--off, 1) * 3%), calc(var(--off, 1) * 9%)) rotate(calc(var(--off, 1) * -1.2deg)); }
.plates img:nth-child(4) { transform: translate(calc(var(--off, 1) * -4%), calc(var(--off, 1) * -8%)) rotate(calc(var(--off, 1) * 1.6deg)); }
.plates__marks { position: absolute; inset: -22px; pointer-events: none; }
.plates__marks i { position: absolute; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 50%; }
.plates__marks i::before, .plates__marks i::after { content: ""; position: absolute; background: var(--ink); }
.plates__marks i::before { left: 50%; top: -6px; bottom: -6px; width: 1.5px; transform: translateX(-50%); }
.plates__marks i::after { top: 50%; left: -6px; right: -6px; height: 1.5px; transform: translateY(-50%); }
.plates__marks i:nth-child(1) { left: 0; top: 0; } .plates__marks i:nth-child(2) { right: 0; top: 0; }
.plates__marks i:nth-child(3) { left: 0; bottom: 0; } .plates__marks i:nth-child(4) { right: 0; bottom: 0; }
.inks { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px; margin-top: 34px; }
.inks span { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-stretch: 87%; font-size: 11px; border: 2px solid var(--ink); padding: .45em .65em; background: var(--paper); }
.inks span::before { content: ""; width: 1.1em; height: 1.1em; background: var(--c); border: 1.5px solid var(--ink); }
.print__status { font-family: var(--mono); font-stretch: 87%; font-size: 12px; margin-top: 14px; display: flex; justify-content: space-between; }

/* ============ Coupon ============ */
.coupon-sec { overflow: hidden; }
.coupon {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(26px, 4.4vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(26px, 5vw, 80px);
  align-items: center;
  rotate: -1.2deg;
  box-shadow: 14px 18px 0 var(--ink);
}
.coupon__cut { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); pointer-events: none; overflow: visible; }
.coupon__cut rect { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 11 8; vector-effect: non-scaling-stroke; }
.coupon__scissors { position: absolute; left: 12px; top: 12px; width: 34px; height: 34px; margin: -17px 0 0 -17px; z-index: 3; }
.coupon .h2 { font-size: clamp(52px, 7.6vw, 136px); --plate: var(--yellow); color: var(--ink); }
.coupon .h2 em { color: var(--red); }
.coupon .eyebrow { color: var(--ink); margin-bottom: 14px; }
.coupon .lede { margin-top: .7em; max-width: 30ch; }
.coupon__for { margin-top: 1em; font-weight: 700; }
.coupon__offer { display: grid; gap: 22px; justify-items: start; }
.coupon__offer .price { font-size: clamp(84px, 11vw, 190px); color: var(--red); text-shadow: .03em .035em 0 var(--yellow); }
.coupon__fine { list-style: none; margin: clamp(22px, 2.4vw, 38px) 0 0; padding: 0; columns: 2; column-gap: 34px; font-size: 13px; }
.coupon__fine li { break-inside: avoid; margin-bottom: .7em; padding-left: 1.3em; position: relative; }
.coupon__fine li::before { content: ""; position: absolute; left: 0; top: .52em; width: .5em; height: .5em; background: var(--red); transform: rotate(45deg); }
@media (max-width: 860px) { .coupon { grid-template-columns: 1fr; } .coupon__fine { columns: 1; } }

/* ============ Footer ============ */
.foot { background: var(--ink); color: var(--paper); padding-block: clamp(70px, 9vw, 150px) 34px; position: relative; }
.foot__thanks {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px, 7vw, 124px); line-height: .9; letter-spacing: -.03em; color: var(--yellow);
  text-shadow: calc(var(--sx) * 1.6px) calc(var(--sy) * 1.6px) 0 var(--red);
}
.foot__thanks span { display: block; font-style: italic; color: var(--paper); padding-left: .5em; text-shadow: none; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; margin-top: clamp(50px, 7vw, 110px); padding-top: 22px; border-top: 1.5px solid rgba(255, 250, 240, .3); }
.foot__row nav { display: flex; gap: 26px; }
.foot .small a { text-underline-offset: 3px; }

/* ============ Hit stickers (click anywhere) ============ */
.hit {
  position: fixed; z-index: 90; pointer-events: none;
  font-family: var(--display); font-weight: 900; font-stretch: 110%; font-size: 26px; line-height: 1;
  color: var(--ink); background: var(--yellow); border: 3px solid var(--ink);
  padding: .32em .5em .28em;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink);
  transform: translate(-50%, -50%) rotate(var(--rot, -6deg));
  animation: slap .9s steps(9) both;
}
@keyframes slap {
  0% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(2.2); opacity: 0; }
  12% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(.92); opacity: 1; }
  24%, 70% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% + 46px)) rotate(calc(var(--rot) * 2.4)) scale(1); opacity: 0; }
}

/* ============ Reveal helpers ============ */
.js .rise { opacity: 0; translate: 0 26px; }
.js .rise.in { opacity: 1; translate: 0 0; transition: opacity .01s, translate .45s steps(6); }
.js .hero .rise.in { transition: opacity .18s ease-out, translate .5s cubic-bezier(.16, 1, .3, 1); }   /* the hero moves smooth and fast */
.js .h2 .w { transform: translateY(.38em); opacity: 0; }
.js .h2.in .w { transform: none; opacity: 1; transition: transform .8s var(--ease-out), opacity .5s linear; transition-delay: calc(var(--i) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  .pa__track, .burst svg { animation: none; }
  .js .rise { opacity: 1; translate: 0 0; }
  .js .h2 .w { opacity: 1; transform: none; }
  .lines .w { opacity: 1; }
  .ladder li { opacity: 1; }
  .hit { display: none; }
  .stand { height: auto; }
  .stand__pin { position: relative; height: 100svh; }
  .stand__vid { clip-path: none; }
  .stand__copy, .stand .chip { opacity: 1; transform: none; }
  .run__receipt .receipt { clip-path: none; }
  .plates img { transform: none !important; }
}

@media (max-width: 700px) { .foot__thanks { font-stretch: 125%; } }