/* ==== public/css/tokens.css ==== */
/* Design tokens. Shopline: theme.schema.json colour schemes + font settings (playbook §8).
   Palette from the brand's own material: the round logo (ink + paper), the About page's red marker,
   Lukewarm Butter's yellow, and the holographic champion cards (the foil gradient). */
:root {
  --paper: #E9E9E7;          /* light grey (the logo's world) */
  --paper-2: #DADAD7;        /* card on paper */
  --paper-3: #FFFFFF;        /* white, like the logo's ring */
  --ink: #181818;            /* black, like the logo's disc */
  --ink-2: #262626;
  --ink-3: #393939;
  --moon: #8F8F8F;           /* the logo's grey moon */
  --red: #E8452C;            /* crosswalk red (large type, fills) */
  --red-text: #C2321A;       /* red for small text on grey: 4.6:1 */
  --red-btn: #D23A22;        /* button red: white label 4.8:1 */
  --butter: #FFD23F;
  --violet: #7B4BD6;
  --sky: #9EDCFF;
  --holo: linear-gradient(115deg, #ff9de2 0%, #ffd1a1 16%, #fff59a 30%, #b8ffb0 46%, #9ee7ff 62%, #b9a8ff 78%, #ff9de2 100%);

  --font-display: 'Russo One', 'Arial Black', system-ui, sans-serif;
  --font-accent: 'Shrikhand', Georgia, serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-marker: 'Gochi Hand', 'Comic Sans MS', cursive;

  --radius: 18px;
  --radius-sm: 10px;
  --line: 2px;
  --gutter: clamp(16px, 3vw, 40px);
  --page: 1440px;
  --header-h: 72px;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* scheme defaults (paper) */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: color-mix(in srgb, var(--ink) 68%, transparent);
  --accent: var(--red);
  --accent-text: var(--red-text);
  --card: var(--paper-3);
  --border: var(--ink);
  --btn-bg: var(--red-btn);
  --btn-fg: var(--paper-3);
  --btn-edge: var(--ink);
}

/* Colour schemes. Every section takes `color_scheme` (Shopline: scheme classes from theme.config.json). */
.scheme-paper { --bg: var(--paper); --fg: var(--ink); --muted: #555555; --accent: var(--red); --accent-text: var(--red-text); --card: var(--paper-3); --border: var(--ink); --btn-bg: var(--red-btn); --btn-fg: var(--paper-3); --btn-edge: var(--ink); }
.scheme-ink { --bg: var(--ink); --fg: var(--paper); --muted: #bdbdbd; --accent: var(--red); --accent-text: #FF7A5E; --card: var(--paper-3); --border: var(--paper); --btn-bg: var(--red-btn); --btn-fg: var(--paper-3); --btn-edge: var(--paper); }
.scheme-red { --bg: var(--red); --fg: var(--paper-3); --muted: #ffe3db; --accent: var(--butter); --accent-text: var(--butter); --card: var(--paper); --border: var(--ink); --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-edge: var(--ink); }
.scheme-butter { --bg: var(--butter); --fg: var(--ink); --muted: #4b4226; --accent: var(--red); --accent-text: #A8240F; --card: var(--paper-3); --border: var(--ink); --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-edge: var(--ink); }
.scheme-violet { --bg: var(--violet); --fg: var(--paper-3); --muted: #e6dcff; --accent: var(--butter); --accent-text: var(--butter); --card: var(--paper); --border: var(--ink); --btn-bg: var(--butter); --btn-fg: var(--ink); --btn-edge: var(--ink); }
[class*="scheme-"] { background-color: var(--bg); color: var(--fg); }

/* ==== public/css/base.css ==== */
/* Base: reset, type scale, layout primitives, grain. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 var(--font-body); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
body.is-locked { overflow: hidden; }
[hidden] { display: none !important; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
/* zero specificity, so a section's own padding on a list (scroll rows, thumbnails) always wins */
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; border-radius: 4px; }
.scheme-butter :focus-visible, .scheme-paper :focus-visible { outline-color: var(--violet); }
::selection { background: var(--butter); color: var(--ink); }

/* grain: a fixed SVG noise layer over everything (decoration, no image file) */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='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 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* type */
.h-mega, .h-display, .h-title, .h-sub, .h-card {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -.005em;
  line-height: .9; text-wrap: balance;
}
.h-mega { font-size: clamp(64px, 13.2vw, 232px); line-height: .84; }
.h-display { font-size: clamp(44px, 7vw, 120px); overflow-wrap: normal; }
.sw { white-space: nowrap; }
.h-title { font-size: clamp(34px, 4.6vw, 72px); line-height: .94; }
.h-sub { font-size: clamp(22px, 2.3vw, 32px); line-height: 1; }
.h-card { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.02; }
.accent { color: var(--accent); }
.it { font-family: var(--font-accent); font-weight: 400; text-transform: none; letter-spacing: 0; }
.marker { font-family: var(--font-marker); color: var(--accent-text); font-size: 1.35em; line-height: 1.1; letter-spacing: .01em; }
.eyebrow { font: 800 13px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; line-height: 1; margin-top: 1.6em; }
.prose h2 { font-size: clamp(26px, 2.6vw, 36px); }
.prose h3 { font-size: 22px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--accent-text); font-weight: 600; }
.prose strong { font-weight: 800; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* layout */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 920px; }
.wrap--prose { max-width: 820px; }
.section { position: relative; }
.pad { padding-block: clamp(64px, 9vw, 140px); }
.pad-sm { padding-block: clamp(40px, 5vw, 72px); }
.stack > * + * { margin-top: var(--stack, 1.25rem); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, .75rem); align-items: center; }
.grid { display: grid; gap: var(--gap, clamp(16px, 2vw, 28px)); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10000; background: var(--butter); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 800; }
.skip-link:focus { top: 12px; }

/* reveal (released by core.js; reduced motion and no-JS show everything) */
.js-motion [data-reveal] { opacity: 0; transform: translateY(28px) rotate(var(--rev-rot, 0deg)); transition: opacity .7s var(--ease-out) var(--d, 0s), transform .9s var(--ease-pop) var(--d, 0s); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* grid and flex items never grow past their track because of a long word or a no-wrap button */
[class*="__grid"] > *, [class*="__copy"], [class*="__main"] { min-width: 0; }
[class*="__item"] > *, [class*="__body"] { min-width: 0; }

/* headings in a column take their size from the column, so long words fit at every width */
.pw__top > div:first-child, .bx__grid > div:first-child, .nf__grid > div:first-child, .nl__copy, .hs__copy, .vf__copy, .ss__copy, .fs__copy { container-type: inline-size; }
.pw__top .h-display, .bx .h-display, .nf .h-display { font-size: clamp(34px, 12cqi, 112px); }
.vf__copy .h-title, .ss__title { font-size: clamp(30px, 10cqi, 72px); }

/* items inside sideways-scrolling rows on phones: no entrance offset (it made the row scroll vertically) */
@media (max-width: 990px) {
  .js-motion .hero__rail [data-reveal], .js-motion .fcol__grid [data-reveal], .js-motion .fc__grid [data-reveal],
  .js-motion .rail__track [data-reveal], .js-motion .mnav__rail [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==== public/css/moon.css ==== */
/* Moon craters: drawn per section by public/js/moon.js (an SVG sized to the section, every crater fully
   inside it, never cut by a section edge). Light grey and black sections only; the colour bands stay flat.
   Leo, 26 Oct. Shopline: theme JS + CSS, decoration. */
[data-moon] { background-repeat: no-repeat; background-size: 100% 100%; }

/* ==== public/css/components.css ==== */
/* Shared components: buttons, frames, ring badges, marquee, product card, forms, overlays. */

/* buttons: chunky game-token buttons with a hard edge that presses down */
.btn {
  --edge: 5px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 1.4em; border: var(--line) solid var(--btn-edge); border-radius: 14px;
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 var(--edge) 0 var(--btn-edge);
  font: 400 16px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; text-decoration: none;
  transform: translateY(0); transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop), background-color .2s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap; position: relative;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--edge) + 2px) 0 var(--btn-edge); }
.btn:active { transform: translateY(calc(var(--edge) - 1px)); box-shadow: 0 1px 0 var(--btn-edge); }
.btn .icon { width: 20px; height: 20px; flex: none; }
.btn--secondary { --btn-bg: var(--card); --btn-fg: var(--ink); }
.scheme-ink .btn--secondary { --btn-bg: transparent; --btn-fg: var(--paper); }
.btn--butter { --btn-bg: var(--butter); --btn-fg: var(--ink); }
.btn--lg { min-height: 62px; font-size: 19px; padding: 0 1.7em; border-radius: 16px; }
.btn--sm { min-height: 40px; font-size: 13px; padding: 0 1em; border-radius: 10px; --edge: 3px; }
.btn--block { width: 100%; }
.btn--link { min-height: 0; padding: 0; border: 0; box-shadow: none; background: none; color: inherit; font: 700 15px/1.3 var(--font-body); text-transform: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn--link:hover, .btn--link:active { transform: none; box-shadow: none; color: var(--accent-text); }
.btn.is-loading { pointer-events: none; color: transparent; }
.btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 3px solid var(--btn-fg); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-added { --btn-bg: var(--butter); --btn-fg: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: inherit; position: relative; }
.icon-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.icon-btn .icon { width: 24px; height: 24px; }
.icon { width: 22px; height: 22px; flex: none; }
.count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--red); color: var(--paper-3); font: 800 12px/1 var(--font-body); }
.icon-btn .count-pill { position: absolute; top: 2px; right: 0; border: 2px solid var(--ink); }

/* arrow buttons for sideways rows (rows never show a browser scrollbar) */
.row-nav { display: flex; align-items: center; gap: 10px; }
.row-nav[hidden] { display: none; }
.row-btn { width: 52px; height: 52px; display: inline-grid; place-items: center; padding: 0; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--paper-3); color: var(--ink); box-shadow: 0 4px 0 var(--border); transition: transform .25s var(--ease-pop), box-shadow .25s var(--ease-pop), background .2s, opacity .2s; }
.row-btn:hover { background: var(--butter); transform: translateY(-2px); box-shadow: 0 6px 0 var(--border); }
.row-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border); }
.row-btn[disabled] { opacity: .35; pointer-events: none; }
.row-btn .icon { width: 22px; height: 22px; }
.row-btn--prev .icon { transform: rotate(180deg); }
.row-count { min-width: 76px; text-align: center; font: 800 14px/1 var(--font-body); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .row-btn { width: 44px; height: 44px; } }

/* frames (Stiff-style mats) */
.frame { background: var(--card); color: var(--ink); border: var(--line) solid var(--border); border-radius: var(--radius); padding: 12px; }
.frame__media { border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-2); position: relative; }
.frame__media img, .frame__media video { width: 100%; height: 100%; object-fit: cover; }
.tilt-l { --rev-rot: -3deg; }
.tilt-r { --rev-rot: 3deg; }

/* sticker label (a tag on a frame) */
.sticker { display: inline-flex; align-items: center; gap: .4em; padding: .45em .8em .4em; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--butter); color: var(--ink); font: 800 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.sticker--red { background: var(--red); color: var(--paper-3); }
.sticker--paper { background: var(--paper-3); }
.sticker--holo { background: var(--holo); background-size: 200% 100%; animation: holo-slide 6s linear infinite; }
@keyframes holo-slide { to { background-position: 200% 0; } }

/* rotating ring badge: circular text around a centre (SVG textPath) */
.ring { position: relative; width: var(--ring, 150px); aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.ring__text { position: absolute; inset: 0; width: 100%; height: 100%; animation: ring-spin var(--ring-speed, 18s) linear infinite; }
.ring__text text { font-family: var(--font-body); font-weight: 800; letter-spacing: .06em; fill: currentColor; }
.ring__core { width: 46%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; }
.ring__core img, .ring__core svg { width: 100%; height: 100%; object-fit: contain; }
.ring--link { text-decoration: none; transition: transform .3s var(--ease-pop); }
.ring--link:hover { transform: scale(1.06) rotate(-6deg); }
.ring--link .ring__core { background: var(--ink); color: var(--paper); }
.scheme-ink .ring--link .ring__core { background: var(--paper); color: var(--ink); }
.ring--link .ring__core .icon { width: 42%; height: 42%; transform: rotate(-45deg); }
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* marquee */
.marquee { overflow: hidden; display: flex; user-select: none; }
.marquee__track { display: flex; flex: none; align-items: center; gap: var(--marquee-gap, 2.4em); padding-right: var(--marquee-gap, 2.4em); animation: marquee var(--marquee-speed, 28s) linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--rev .marquee__track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
.star { display: inline-block; width: .7em; height: .7em; flex: none; background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* vertical ticker strip (Stiff's WORK WORK WORK) */
.vstrip { position: relative; z-index: 3; border: var(--line) solid var(--ink); border-radius: 10px; overflow: hidden; width: 46px; flex: none; align-self: stretch; background: var(--red); color: var(--paper-3); }
.vstrip__track { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1.4em; padding-block: .7em; animation: vstrip 16s linear infinite; }
.vstrip__track span { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 15px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@keyframes vstrip { to { transform: translateY(-50%); } }

/* product card */
.pcard { position: relative; display: flex; flex-direction: column; background: var(--card); color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 10px; transition: transform .35s var(--ease-pop), box-shadow .35s var(--ease-pop); box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) { .pcard:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: 0 10px 0 var(--ink); } }
.pcard__media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-2); }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease-out); }
.pcard__media img.is-photo { object-fit: cover; }
@media (hover: hover) { .pcard:hover .pcard__media img { transform: scale(1.05) rotate(1deg); } }
.pcard__badge { position: absolute; top: 10px; left: 10px; z-index: 2; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 6px 6px; flex: 1; }
.pcard__title { font: 400 19px/1.05 var(--font-display); text-transform: uppercase; }
.pcard__title a { text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.pcard__text { font-size: 14.5px; line-height: 1.45; color: #555555; }
.pcard__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard__price { font: 800 18px/1 var(--font-body); white-space: nowrap; }
.pcard__foot .btn { position: relative; z-index: 2; }

.price { font-weight: 800; font-variant-numeric: tabular-nums; }
.price--compare { color: var(--muted); font-weight: 500; }

/* forms */
.field { display: grid; gap: 6px; }
.field label, .label { font: 800 13px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.input, .textarea, .select { width: 100%; min-height: 54px; padding: 14px 16px; border: var(--line) solid var(--ink); border-radius: 12px; background: var(--paper-3); color: var(--ink); font-size: 16px; }
.textarea { min-height: 140px; resize: vertical; }
/* a field paired with a big button (newsletter, 10% offer, store password): the button's height */
.input--lg { min-height: 62px; padding-block: 0; }
.input::placeholder, .textarea::placeholder { color: #7c7c7c; }
.input:focus, .textarea:focus { outline: 3px solid var(--butter); outline-offset: 1px; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--red-text); background: #fff4f1; }
.field-error { color: var(--red-text); font-weight: 700; font-size: 14px; }
.scheme-ink .field-error, .scheme-red .field-error { color: var(--butter); }
.form-success { padding: 22px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--butter); color: var(--ink); }
.form-success:focus { outline: none; }

/* overlays: drawer, modal, toasts */
.drawer, .modal { position: fixed; inset: 0; z-index: 8000; }
.drawer[hidden], .modal[hidden] { display: none; }
.drawer__scrim, .modal__scrim { position: absolute; inset: 0; background: rgba(16, 16, 16, .6); opacity: 0; transition: opacity .35s; }
.is-open .drawer__scrim, .is-open .modal__scrim { opacity: 1; }
.drawer__panel { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(460px, calc(100vw - 20px)); background: var(--paper); color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius); display: flex; flex-direction: column; transform: translateX(calc(100% + 20px)) rotate(2deg); transition: transform .5s var(--ease-pop); overflow: hidden; }
.is-open .drawer__panel { transform: none; }
.drawer__panel--left { right: auto; left: 10px; transform: translateX(calc(-100% - 20px)) rotate(-2deg); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 22px; border-bottom: var(--line) solid var(--ink); background: var(--ink); color: var(--paper); }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 22px; }
.modal { display: grid; place-items: start center; padding: 12vh 16px 16px; }
.modal__panel { position: relative; width: min(720px, 100%); background: var(--paper); color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 14px; transform: translateY(-20px) scale(.97); opacity: 0; transition: transform .45s var(--ease-pop), opacity .3s; }
.is-open .modal__panel { transform: none; opacity: 1; }
.modal--video { place-items: center; padding: 16px; }
.modal__panel--video { width: min(1100px, 100%); background: var(--ink); padding: 10px; }
.modal__close { position: absolute; top: -18px; right: -10px; z-index: 2; background: var(--butter); color: var(--ink); border: var(--line) solid var(--ink); border-radius: 50%; }
.modal__close:hover { background: var(--butter); }
.video-frame { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; display: block; }
.toasts { position: fixed; left: 50%; bottom: 20px; z-index: 9500; display: grid; gap: 8px; transform: translateX(-50%); width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--butter); color: var(--ink); font-weight: 600; box-shadow: 0 5px 0 var(--ink); animation: toast-in .45s var(--ease-pop); }
@keyframes toast-in { from { transform: translateY(20px) scale(.9); opacity: 0; } }

/* search */
.search-form { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); }
.search-form input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 0; font-size: 18px; outline: none; }
.search-results { padding: 16px 4px 4px; display: grid; gap: 8px; }
.sresult { display: flex; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; }
.sresult:hover { background: var(--paper-2); }
.sresult img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: var(--paper-2); }
.sresult__page { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: var(--paper); font: 800 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.sresult b { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 16px; }
.sresult small { color: #555555; font-size: 14px; }
.tag { display: inline-flex; padding: 8px 14px; border: var(--line) solid var(--ink); border-radius: 99px; text-decoration: none; font-weight: 700; font-size: 14px; background: var(--paper-3); }
.tag:hover { background: var(--butter); }

/* accordion */
.acc { border-top: var(--line) solid currentColor; }
.acc details { border-bottom: var(--line) solid currentColor; }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; font: 400 clamp(18px, 1.6vw, 22px)/1.15 var(--font-display); text-transform: uppercase; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .icon { transition: transform .35s var(--ease-pop); width: 26px; height: 26px; }
.acc details[open] summary .icon { transform: rotate(45deg); }
.acc__body { padding: 0 2px 22px; max-width: 70ch; }
.acc__body > * + * { margin-top: .8em; }
.acc__body a { color: var(--accent-text); font-weight: 700; }
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; line-height: 1.1; }
  .btn--lg { font-size: 16px; min-height: 56px; padding: .65em 1.2em; }
  .input--lg { min-height: 56px; }
}

/* ==== public/css/commerce.css ==== */
/* Commerce: cart lines, quantity, notes, upgrade, recommendations, totals (drawer + /cart share them). */
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cart-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: var(--line) dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.cart-line__img { display: block; width: 84px; height: 84px; border: var(--line) solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.cart-line__img img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__title { font: 400 16px/1.1 var(--font-display); text-transform: uppercase; text-decoration: none; }
.cart-line__title:hover { color: var(--red-text); }
.cart-line__variant { margin-top: 4px; font-size: 14px; color: #555555; font-weight: 600; }
.cart-line__meta { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.cart-line__price { font-weight: 800; font-variant-numeric: tabular-nums; }
.cart-line__remove { border: 0; background: none; padding: 0; font-size: 14px; font-weight: 600; text-decoration: underline; color: #555555; }
.cart-line__remove:hover { color: var(--red-text); }
.cart-line__warn { grid-column: 2 / -1; padding: 10px 12px; border: var(--line) solid var(--ink); border-radius: 12px; background: var(--butter); font-size: 14px; font-weight: 600; }
.qty { display: inline-flex; align-items: center; border: var(--line) solid var(--ink); border-radius: 12px; background: var(--paper-3); overflow: hidden; }
.qty button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); }
.qty button:hover { background: var(--butter); }
.qty button .icon { width: 16px; height: 16px; }
.qty output, .qty input { min-width: 34px; text-align: center; font-weight: 800; border: 0; background: transparent; padding: 0; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.qty--lg button { width: 50px; height: 54px; }
.qty--lg input { width: 44px; font-size: 18px; }
.cart-note { margin-top: 14px; padding: 12px 14px; border: var(--line) solid var(--ink); border-radius: 14px; font-size: 14.5px; font-weight: 600; }
.cart-note--warn { background: var(--butter); }
.cart-note a { color: var(--ink); font-weight: 800; }
.upgrade { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; margin-top: 16px; padding: 14px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--ink); color: var(--paper); }
.upgrade__img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: var(--paper); }
.upgrade__title { font: 400 18px/1 var(--font-display); text-transform: uppercase; }
.upgrade__delta { color: var(--butter); margin-left: 6px; }
.upgrade__text { margin: 6px 0 10px; font-size: 14px; color: #cccccc; }
.upgrade .btn { --btn-edge: var(--paper); }
.cart-recs { margin-top: 20px; }
.cart-recs__title { font: 400 18px/1 var(--font-display); text-transform: uppercase; margin-bottom: 10px; }
.cart-recs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rec { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); }
.rec__img { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.rec__img img { width: 100%; height: 100%; object-fit: contain; }
.rec__title { font-weight: 700; font-size: 14px; line-height: 1.25; text-decoration: none; display: block; }
.rec__text { font-size: 13.5px; color: #555555; font-weight: 700; margin-top: 2px; }
.cart-foot { position: sticky; bottom: -22px; margin: 22px -22px -22px; padding: 18px 22px 22px; background: var(--paper); border-top: var(--line) solid var(--ink); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font: 400 22px/1 var(--font-display); text-transform: uppercase; }
.cart-foot__note { display: flex; gap: 8px; align-items: center; margin: 10px 0 14px; font-size: 13.5px; color: #555555; }
.cart-foot__note .icon { width: 18px; height: 18px; }
.cart-foot__link { margin-top: 10px; }
/* free US shipping progress (LaunchBoom: the threshold as a goal) */
.ship-bar { margin-bottom: 4px; padding: 12px 14px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); }
.ship-bar__msg { font-size: 14.5px; font-weight: 600; }
.ship-bar__msg b { font-weight: 800; color: var(--red-text); }
.ship-bar__track { height: 12px; margin-top: 10px; border: var(--line) solid var(--ink); border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.ship-bar__track i { display: block; height: 100%; background: var(--red); border-right: var(--line) solid var(--ink); transition: width .6s var(--ease-pop); }
.ship-bar.is-done { background: var(--butter); }
.ship-bar.is-done .ship-bar__track i { border-right: 0; }
.cart-empty { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 30px 6px; }
.cart-empty img { width: 200px; height: auto; transform: rotate(-6deg); }

/* ==== sections/box-contents/box-contents.css ==== */
.bx__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.bx__eyebrow { color: var(--accent-text); margin-bottom: 12px; }
.bx__list { list-style: none; margin: 28px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.bx__list li { break-inside: avoid; display: grid; grid-template-columns: 3.2ch 1fr; gap: 10px; align-items: baseline; padding: 10px 0; border-top: var(--line) dashed color-mix(in srgb, currentColor 30%, transparent); }
.bx__count { font: 400 22px/1 var(--font-display); color: var(--red); text-align: right; }
.bx__name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.bx__name small { display: block; font-weight: 500; font-size: 13.5px; color: var(--muted); }
.bx__foot { margin-top: 18px; }
.bx__media { margin: 0; padding: 12px; transform: rotate(1.5deg); }
.bx__media figcaption { padding: 12px 6px 2px; font-size: 22px; transform: rotate(-2deg); }
@media (max-width: 900px) { .bx__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bx__list { columns: 1; } }

/* ==== sections/bundle-feature/bundle-feature.css ==== */
.bf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
/* the three pieces as loot cards tossed on the table: box at the back, tray and plush in front */
.bf__stack { position: relative; aspect-ratio: 1 / .9; }
.bf__piece { position: absolute; width: 50%; padding: 10px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper-3); box-shadow: 0 8px 0 var(--ink); transition: transform .4s var(--ease-pop); }
.bf__piece img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--paper-2); }
.bf__piece--0 { left: 2%; top: 0; width: 56%; transform: rotate(-5deg); z-index: 1; }
.bf__piece--1 { right: 0; top: 12%; width: 44%; transform: rotate(6deg); z-index: 2; }
.bf__piece--2 { left: 30%; bottom: 0; width: 40%; transform: rotate(-2deg); z-index: 3; }
@media (hover: hover) { .bf__piece:hover { transform: rotate(0) translateY(-6px); z-index: 4; } }
.bf__label { position: absolute; left: 50%; bottom: -14px; max-width: 100%; white-space: normal; text-align: center; line-height: 1.15; transform: translateX(-50%) rotate(-3deg); }
.bf__copy { container-type: inline-size; }
.bf__eyebrow { margin-bottom: 14px; }
.bf__title { font-size: clamp(44px, 16cqi, 120px); }
.bf__text { margin-top: 20px; }
.bf__price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; }
.bf__now { font: 400 clamp(40px, 5vw, 64px)/1 var(--font-display); }
.bf__compare { font: 700 22px/1 var(--font-body); color: var(--muted); }
.bf__btns { margin-top: 24px; }
.bf__quote { margin: 30px 0 0; padding-left: 16px; border-left: 4px solid var(--accent); }
.bf__quote blockquote { margin: 0; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--font-marker); }
.bf__quote figcaption { margin-top: 8px; font: 800 12.5px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 860px) {
  .bf__grid { grid-template-columns: 1fr; }
  .bf__stack { width: min(100%, 460px); justify-self: center; }
}

/* ==== sections/champion-row/champion-row.css ==== */
.champs__head { display: grid; justify-items: center; text-align: center; gap: 14px; margin-bottom: clamp(30px, 4vw, 56px); }
.champs__eyebrow { color: var(--accent-text); }
.champs__text { margin-inline: auto; }
.champs__note { transform: rotate(-2deg); font-size: 26px; }
/* desktop: two rows of five, each card tilted like it was tossed on the table; hover lifts and straightens */
.champs__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); padding-top: 10px; }
.champ { display: flex; transform: rotate(var(--r)); transition: transform .4s var(--ease-pop); }
.champ__card { margin: 0; width: 100%; }
.champ__card img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 0 var(--ink); outline: var(--line) solid var(--ink); outline-offset: -1px; }
@media (hover: hover) { .champ:hover { transform: translateY(-8px) rotate(0deg) scale(1.03); } }
.champ__name { margin-top: 14px; text-align: center; font: 800 12.5px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 990px) { .champs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* phones: a sideways row that only scrolls sideways, so a vertical swipe moves the page */
@media (max-width: 760px) {
  .champs__grid { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 16px var(--gutter) 22px; scroll-padding-inline: var(--gutter); gap: 16px; }
  .champs__grid::-webkit-scrollbar { display: none; }
  .champ { flex: 0 0 min(58vw, 240px); scroll-snap-align: start; }
}

/* ==== sections/checkout-preview/checkout-preview.css ==== */
.preview-flag { position: sticky; top: 0; z-index: 50; padding: 10px 16px; text-align: center; background: var(--butter); color: var(--ink); font-weight: 700; border-bottom: var(--line) solid var(--ink); }
.co__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 400 20px/1 var(--font-display); text-transform: uppercase; }
.co__logo { width: 56px; height: 56px; }
.co__card { margin-top: 24px; padding: clamp(20px, 3vw, 36px); }
.co__form, .co__done { display: grid; gap: 16px; justify-items: start; }
.co__form > .co__summary { justify-self: stretch; }
.co__done:focus { outline: none; }
.co__summary .cart-recs, .co__summary .upgrade { display: none; }
.co__summary .cart-foot { position: static; margin: 0; padding: 18px 0 0; background: none; }
.co-credit { text-align: center; padding: 24px; font-size: 14px; }
/* post-purchase offer (LaunchBoom): one click, same box */
.pp { justify-self: stretch; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--butter); box-shadow: 0 6px 0 var(--ink); transform: rotate(-.6deg); }
.pp__img { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; background: var(--paper-3); border: var(--line) solid var(--ink); }
.pp__title { font: 400 clamp(20px, 2vw, 26px)/1 var(--font-display); text-transform: uppercase; }
.pp__text { margin: 6px 0 8px; font-weight: 600; }
.pp__price { margin-bottom: 12px; font-size: 18px; }
.pp__price s { color: #4b4226; margin-left: 6px; }
@media (max-width: 460px) { .pp { grid-template-columns: 64px minmax(0, 1fr); } .pp__img { width: 64px; height: 64px; } }

/* ==== sections/contact-form/contact-form.css ==== */
.cf__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.cf__formwrap { padding: clamp(18px, 2.4vw, 32px); }
.cf__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.cf__field--wide { grid-column: 1 / -1; }
.cf__mail { margin-top: 10px; font: 400 clamp(20px, 2vw, 28px)/1.1 var(--font-display); word-break: break-word; }
.cf__mail a { text-decoration: none; color: var(--red-text); }
.cf__mail a:hover { text-decoration: underline; }
.cf__aside-text { margin-top: 16px; color: var(--muted); }
.cf__img { width: 220px; margin-top: 24px; transform: rotate(-6deg); }
@media (max-width: 860px) { .cf__grid { grid-template-columns: 1fr; } .cf__fields { grid-template-columns: 1fr; } }

/* ==== sections/cta-poster/cta-poster.css ==== */
.cp { overflow: hidden; border-top: var(--line) solid var(--ink); }
.cp__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cp__copy { container-type: inline-size; }
.cp__title { display: flex; flex-direction: column; font: 400 clamp(36px, 10.2cqi, 132px)/.86 var(--font-display); text-transform: uppercase; }
.cp__line--alt { color: var(--ink); }
.cp__foot { margin-top: 18px; color: var(--paper-3); font-size: clamp(24px, 2.2vw, 32px); transform: rotate(-2deg); transform-origin: left; }
.cp__btns { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.cp__note { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-weight: 700; }
.cp__art { position: relative; justify-self: center; }
.cp__img { width: min(460px, 80vw); transform: rotate(-6deg); filter: drop-shadow(0 18px 0 rgba(24, 24, 24, .25)); }
.cp__ring { position: absolute; left: -18%; bottom: -6%; color: var(--paper-3); }
.cp__ring .ring__core { background: var(--ink); color: var(--paper); }
@media (max-width: 860px) { .cp__grid { grid-template-columns: 1fr; } .cp__ring { left: auto; right: -4%; --ring: 116px !important; } }

/* ==== sections/edition-compare/edition-compare.css ==== */
.ec__head { display: grid; gap: 16px; margin-bottom: clamp(34px, 4vw, 56px); max-width: 900px; }
.ec__grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); align-items: stretch; }
.ec__col { position: relative; padding: 14px 14px 18px; display: flex; flex-direction: column; }
/* the pre-selected edition (Deluxe) stands out: butter, lifted, slightly turned */
.ec__col.is-star { background: var(--butter); transform: rotate(1.2deg) translateY(-8px); box-shadow: 0 10px 0 var(--ink); --rev-rot: 1.2deg; }
.js-motion .ec__col.is-star[data-reveal].is-in { transform: rotate(1.2deg) translateY(-8px); }
.ec__badge { position: absolute; top: -13px; right: 16px; z-index: 2; }
.ec__img { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--paper-2); overflow: hidden; }
.ec__img img { width: 80%; height: 90%; object-fit: contain; transition: transform .5s var(--ease-pop); }
.ec__img:hover img { transform: scale(1.05) rotate(-2deg); }
.ec__name { margin-top: 16px; font: 400 clamp(20px, 1.9vw, 28px)/1.02 var(--font-display); text-transform: uppercase; }
.ec__price { margin-top: 8px; font: 400 24px/1 var(--font-display); color: var(--red-text); }
.ec__compare { font: 600 16px/1 var(--font-body); color: #555555; }
.ec__text { margin: 12px 0 20px; font-size: 15.5px; line-height: 1.45; flex: 1; }
.ec__list { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; align-content: start; gap: 8px; flex: 1; }
.ec__list li { display: flex; gap: 8px; align-items: start; font-size: 15px; }
.ec__list .icon { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.ec__list .is-no { color: #6b6b6b; }
.ec__list .is-no span { text-decoration: line-through; text-decoration-thickness: 1px; }
.ec__more { margin-top: clamp(28px, 3.5vw, 44px); }
@media (max-width: 860px) {
  .ec__grid { grid-template-columns: 1fr; max-width: 520px; gap: 26px; }
  .ec__col.is-star, .js-motion .ec__col.is-star[data-reveal].is-in { transform: rotate(.8deg); }
}

/* ==== sections/email-popup/email-popup.css ==== */
/* The offer takes most of the screen (LaunchBoom): a big two-column card, the butter monster on the left. */
.modal--offer { place-items: center; padding: 16px; z-index: 8100; }
.modal__panel.offer { width: min(980px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; padding: 0; background: var(--paper); border-width: 3px; box-shadow: 0 10px 0 var(--ink); }
.offer .modal__close { top: 12px; right: 12px; }
.offer__art { position: relative; display: grid; place-items: center; padding: clamp(20px, 3vw, 36px); background: var(--butter); border-right: 3px solid var(--ink); }
.offer__img { width: min(100%, 360px); transform: rotate(-6deg); }
.offer__marker { position: absolute; left: 20px; bottom: 16px; color: var(--ink); transform: rotate(-4deg); }
.offer__copy { display: grid; align-content: center; gap: 16px; padding: clamp(24px, 4vw, 56px); container-type: inline-size; }
.offer__eyebrow { color: var(--accent-text); }
.offer__title { font-size: clamp(36px, 14cqi, 80px); line-height: .92; }
.offer__text { font-size: 17px; line-height: 1.5; }
.offer__form { display: grid; gap: 10px; }
.offer__form .btn { justify-self: start; }
.offer__done { display: grid; gap: 10px; }
.offer__done-title { font: 400 26px/1 var(--font-display); text-transform: uppercase; }
.offer__code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.offer__code span { padding: 10px 18px; border: var(--line) dashed var(--ink); border-radius: 12px; background: var(--paper-3); font: 400 28px/1 var(--font-display); letter-spacing: .06em; }
.offer__no { justify-self: start; color: #555555; }
/* the tab that stays after the pop-up is closed: a red sticker on the left edge. It is turned 180deg so the words
   read upwards, which also swaps its sides: "left" here is the side facing the page, "top" the bottom edge */
.offer-tab { position: fixed; left: 0; top: 50%; z-index: 6900; padding: 16px 9px; border: var(--line) solid var(--ink); border-right: 0; border-radius: 12px 0 0 12px; background: var(--red-btn); color: var(--paper-3); font: 400 14px/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); box-shadow: 0 -4px 0 var(--ink); transition: padding .2s var(--ease-pop), translate .4s var(--ease-pop), color .2s; }
.offer-tab:hover { padding-left: 14px; }
.offer-tab[hidden] { display: none; }
/* tucked (email-popup.js): only a slim red notch stays in the page margin; hover or keyboard focus brings it out,
   and a tap on the notch or just beside it (still inside the margin) opens the offer */
.offer-tab.is-tucked { translate: calc(-100% + 9px) 0; color: transparent; }
.offer-tab.is-tucked::after { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; width: 6px; }
.offer-tab.is-away { translate: calc(-100% - 6px) 0; pointer-events: none; }
.offer-tab.is-tucked:hover, .offer-tab.is-tucked:focus-visible { translate: 0 0; color: var(--paper-3); }
@media (max-width: 760px) {
  .modal__panel.offer { grid-template-columns: 1fr; }
  .offer__art { border-right: 0; border-bottom: 3px solid var(--ink); padding: 18px; }
  .offer__img { width: min(46vw, 200px); }
  .offer__marker { font-size: 20px; }
}

/* ==== sections/facts-band/facts-band.css ==== */
.facts { border-block: var(--line) solid var(--ink); }
.facts__list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: clamp(22px, 3vw, 40px) clamp(10px, 2vw, 28px); border-left: var(--line) solid var(--ink); }
.fact:first-child { border-left: 0; }
.fact__icon { grid-row: 1 / 3; width: 40px; height: 40px; stroke-width: 2; }
.fact__value { font: 400 clamp(34px, 4.2vw, 64px)/.9 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.fact__label { font: 800 13px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
/* trust bar: the figure is sized from its own column (about 6.4em wide at most: "16,000,000+") */
.facts--trust .fact { display: flex; flex-direction: column; justify-content: center; align-items: center; container-type: inline-size; text-align: center; }
.facts--trust .fact__value { font-size: min(clamp(30px, 3.6vw, 56px), calc(100cqi / 6.4)); color: var(--red-text); }
.facts--trust .fact__label { letter-spacing: .1em; line-height: 1.35; margin-top: 10px; }
@media (max-width: 860px) {
  .facts__list { grid-template-columns: 1fr 1fr; padding: 0; }
  .fact { border-left: 0; border-top: var(--line) solid var(--ink); }
  .fact:nth-child(-n+2) { border-top: 0; }
  .fact:nth-child(even) { border-left: var(--line) solid var(--ink); }
  .fact__icon { width: 30px; height: 30px; }
}

/* ==== sections/faq-accordion/faq-accordion.css ==== */
.faq__title { margin-bottom: 28px; }
.faq__grid--art { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__side { position: sticky; top: calc(var(--header-h) + 40px); text-align: center; }
.faq__img { width: min(320px, 60vw); margin-inline: auto; transform: rotate(-4deg); }
.faq__note { margin-top: 10px; transform: rotate(-3deg); font-size: 24px; }
@media (max-width: 860px) { .faq__grid--art { grid-template-columns: 1fr; } .faq__side { position: static; order: -1; } .faq__img { width: 200px; } }

/* ==== sections/feature-cards/feature-cards.css ==== */
.fc__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.fc__eyebrow { color: var(--accent-text); margin-bottom: 12px; }
.fc__ring { color: var(--fg); }
.fc__ring-logo { width: 100%; height: 100%; }
.fc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.fcard { padding: 12px 12px 22px; transition: transform .45s var(--ease-pop); }
.fcard.tilt-r { transform: rotate(1.2deg); }
.fcard.tilt-l { transform: rotate(-1.2deg); }
.fcard:hover { transform: rotate(0) translateY(-6px); }
.fcard__media { aspect-ratio: 1; display: grid; place-items: center; }
.fcard__media img { width: 86%; height: 86%; object-fit: contain; transition: transform .6s var(--ease-pop); }
.fcard:hover .fcard__media img { transform: scale(1.08) rotate(-3deg); }
.fcard__title { margin: 18px 6px 0; font: 400 clamp(20px, 1.7vw, 25px)/1 var(--font-display); text-transform: uppercase; color: var(--red); }
.fcard__text { margin: 10px 6px 0; font-size: 15.5px; line-height: 1.5; color: #3f3f3f; }
.fcard__text b { color: var(--ink); }
@media (max-width: 1100px) { .fc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .fc__head { flex-direction: column; align-items: start; }
  .fc__ring { position: absolute; right: var(--gutter); top: 40px; --ring: 104px !important; }
  .fc { position: relative; }
  .fc__grid { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: -10px calc(var(--gutter) * -1) 0; padding: 18px var(--gutter) 22px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .fc__grid::-webkit-scrollbar { display: none; }
  .fcard { flex: 0 0 78vw; scroll-snap-align: center; }
}

/* ==== sections/featured-collection/featured-collection.css ==== */
.fcol__head { display: flex; align-items: end; gap: 18px 28px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 48px); }
.fcol__head .h-display { margin-right: auto; }
.fcol__note { order: -1; flex-basis: 100%; transform: rotate(-2deg); font-size: 26px; }
.fcol__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.fcol__grid > li { display: flex; }
.fcol__grid .pcard { flex: 1; }
@media (max-width: 1100px) { .fcol__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .fcol__grid { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: -10px calc(var(--gutter) * -1) 0; padding: 16px var(--gutter) 22px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .fcol__grid::-webkit-scrollbar { display: none; }
  .fcol__grid > li { flex: 0 0 72vw; scroll-snap-align: start; }
}

/* ==== sections/founders-story/founders-story.css ==== */
.fs__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.fs__eyebrow { color: var(--accent-text); margin-bottom: 20px; }
.manifesto { font: 500 clamp(22px, 2.3vw, 36px)/1.22 var(--font-body); letter-spacing: -.01em; text-wrap: pretty; }
.manifesto b { font: 400 1.04em/1 var(--font-display); text-transform: uppercase; letter-spacing: 0; }
.manifesto i { font: 400 1.08em/1 var(--font-accent); color: var(--red); }
.manifesto small { font: 800 .62em/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.manifesto p + p { margin-top: .7em; }
.fs__cta { margin-top: 34px; }
.fs__collage { position: relative; padding: 10px 0 20px; min-height: 520px; }
.fs__polaroid { position: relative; width: min(78%, 400px); margin: 0; padding: 14px 14px 18px; background: var(--paper-3); border: var(--line) solid var(--ink); border-radius: 6px; transform: rotate(-5deg); box-shadow: 0 14px 0 rgba(24, 24, 24, .12); --rev-rot: -5deg; }
.fs__polaroid img { border-radius: 2px; }
.fs__polaroid figcaption { margin-top: 12px; text-align: center; font-size: 26px; }
.fs__tape { position: absolute; top: -16px; left: 50%; width: 120px; height: 34px; transform: translateX(-50%) rotate(3deg); background: rgba(255, 210, 63, .72); border: 1px solid rgba(24, 24, 24, .15); }
.fs__arrow { position: absolute; left: 44%; top: 34%; width: 150px; color: var(--red); transform: rotate(18deg); }
.fs__arrow path { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); }
.fs__now { position: absolute; right: 0; top: 46%; width: 58%; }
.fs__nowlabel { font-size: 28px; margin: 0 0 12px 20px; transform: rotate(-3deg); }
.fs__people { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fs__person { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.fs__person:nth-child(2) { margin-left: 36px; }
.fs__face { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: var(--line) solid var(--ink); }
.fs__cap { font-size: 22px; line-height: 1.05; }
@media (max-width: 990px) {
  .fs__grid { grid-template-columns: 1fr; }
  .fs__collage { min-height: 0; display: grid; gap: 24px; }
  .fs__polaroid { width: min(84%, 380px); justify-self: center; }
  .fs__arrow { display: none; }
  .fs__now { position: static; width: auto; }
}

/* ==== sections/hero-poster/hero-poster.css ==== */
.hero { padding: 18px var(--gutter) clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 400px); gap: clamp(16px, 2vw, 28px); max-width: calc(var(--page) + 40px); margin-inline: auto; }
.hero__main { position: relative; min-height: clamp(480px, 62vh, 760px); display: flex; flex-direction: column; justify-content: center; container-type: inline-size; }
.hero__title { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .86; position: relative; z-index: 2; }
.hero__line { display: block; white-space: nowrap; }
.hero__line--s { font-size: 6.6cqi; }
.hero__line--m { font-size: 9.6cqi; }
.hero__line--l { font-size: 10.6cqi; }
.hero__line--xl { font-size: 25cqi; line-height: .8; margin-top: .04em; }
/* Russo One caps average about .7em a letter: a "fit" line spans --fit of the column, capped for short words */
.hero__line--fit { --fit: 84cqi; font-size: min(21cqi, calc(var(--fit) / (var(--chars) * .7))); line-height: .86; }
/* align: left keeps the lines clear of the character on the right */
.hero--left .hero__title { align-items: flex-start; text-align: left; }
.hero--left .hero__line--fit { --fit: 80cqi; }
.hero__line.accent { color: var(--red); }
.hero__o { display: inline-block; width: .8em; height: .8em; vertical-align: -.02em; margin-inline: .02em; }
.hero__o-img { width: 100%; height: 100%; }
.hero__char { position: absolute; z-index: 3; right: -4%; bottom: 0; width: 26cqi; max-width: 320px; transform-origin: 50% 100%; pointer-events: none; }
.hero__char img { width: 100%; }
/* card column */
.hero__side { display: flex; gap: 12px; height: clamp(480px, 62vh, 760px); }
.hero__side .vstrip { border-color: var(--paper); }
.hero__rail { flex: 1; overflow: hidden; position: relative; border-radius: var(--radius); mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); }
.hero__track { list-style: none; margin: 0; padding: 0 0 14px; display: grid; gap: 14px; animation: hero-rail 38s linear infinite; }
.hero__rail:hover .hero__track, .hero__rail:focus-within .hero__track { animation-play-state: paused; }
@keyframes hero-rail { to { transform: translateY(-100%); } }
.hcard { padding: 12px 12px 16px; text-align: center; }
.hcard__link { display: block; text-decoration: none; color: inherit; }
.hcard__media { display: block; aspect-ratio: 5 / 4; border: 0; padding: 0; width: 100%; cursor: pointer; }
.hcard__media img { object-fit: contain; padding: 6px; transition: transform .5s var(--ease-pop); }
.hcard:hover .hcard__media img { transform: scale(1.06) rotate(-2deg); }
.hcard__video { object-fit: cover; }
.hcard__play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--butter); color: var(--ink); border: var(--line) solid var(--ink); transition: transform .3s var(--ease-pop); }
.hcard__media:hover .hcard__play { transform: scale(1.12); }
.hcard__kicker { display: block; margin-top: 14px; font: 600 13px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #555555; }
.hcard__title { display: block; margin-top: 8px; font: 400 clamp(22px, 2vw, 30px)/.95 var(--font-display); text-transform: uppercase; color: var(--red); }
/* foot */
.hero__foot { max-width: calc(var(--page) + 40px); margin: clamp(18px, 2.5vw, 28px) auto 0; display: flex; flex-wrap: wrap; gap: 20px clamp(16px, 3vw, 40px); align-items: center; padding-top: clamp(18px, 2.5vw, 28px); border-top: var(--line) solid color-mix(in srgb, var(--paper) 30%, transparent); }
.hero__text { flex: 1 1 420px; font-size: clamp(17px, 1.4vw, 20px); max-width: 60ch; }
.hero__ctas { flex: 0 1 auto; }
.hero__ring { flex: none; margin-left: auto; }
.hero__text b { font-weight: 800; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__ring { color: var(--paper); }
@media (max-width: 990px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__main { min-height: 0; padding: 28px 0 0; }
  .hero__char { position: relative; right: auto; bottom: auto; margin: -4% -3% 0 auto; width: min(50vw, 250px); z-index: 1; }
  .hero__side { height: auto; flex-direction: column; }
  .hero__side .vstrip { display: none; }
  .hero__rail { mask-image: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: -8px calc(var(--gutter) * -1) 0; padding: 12px var(--gutter) 16px; scroll-padding-inline: var(--gutter); }
  .hero__rail::-webkit-scrollbar { display: none; }
  .hero__track { display: flex; animation: none; padding: 0; gap: 12px; }
  .hero__track--clone { display: none; }
  .hero__track > li { flex: 0 0 min(64vw, 280px); scroll-snap-align: start; display: flex; flex-direction: column; }
  .hcard__link { flex: 1; }
  .hero__ring { display: none; }
  .hero__foot { position: relative; }
}
@media (prefers-reduced-motion: reduce) { .hero__track { animation: none; } .hero__track--clone { display: none; } .hero__rail { overflow-y: auto; } }

/* ==== sections/holo-showcase/holo-showcase.css ==== */
.hs { overflow: hidden; }
.hs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.hs .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--butter); }
.hs .eyebrow .icon { width: 18px; height: 18px; }
.hs__copy { container-type: inline-size; }
.hs__title { margin-top: 14px; font-size: clamp(34px, 12cqi, 92px); }
.hs__title .it { background: var(--holo); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo-slide 5s linear infinite; padding-right: .08em; }
.hs__text { margin-top: 18px; color: var(--muted); }
/* the packs: two collectible-card tiles (packshot on holo foil, count sticker, name, price + Add) */
.hs__products { list-style: none; margin: 30px 0 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); max-width: 520px; }
.hp { display: flex; flex-direction: column; padding: 8px 8px 12px; background: var(--paper-3); color: var(--ink); border: var(--line) solid var(--ink); border-radius: 18px;
  transform: rotate(var(--r, 0deg)); box-shadow: 0 8px 0 var(--ink); transition: transform .4s var(--ease-pop), box-shadow .4s var(--ease-pop); }
@media (hover: hover) { .hp:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 14px 0 var(--ink); } .hp:hover .hp__art img { transform: scale(1.06) rotate(-3deg); } }
.hp__art { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: var(--line) solid var(--ink);
  background: var(--holo); background-size: 260% 260%; animation: hp-pan 7s ease-in-out infinite alternate; }
.hp__art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 9%; filter: drop-shadow(0 10px 10px rgba(24, 24, 24, .28)); transition: transform .6s var(--ease-pop); }
.hp__foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .45; pointer-events: none;
  background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .0) 0 14px, rgba(255, 255, 255, .55) 22px, rgba(255, 255, 255, 0) 30px); background-size: 200% 200%; animation: hp-pan 5s linear infinite; }
@keyframes hp-pan { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.hp__count { position: absolute; z-index: 2; top: 8px; left: 8px; padding: .4em .65em .35em; border: var(--line) solid var(--paper-3); border-radius: 99px; background: var(--ink); color: var(--butter); font: 400 14px/1 var(--font-display); }
.hp__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 4px 0; }
.hp__name { font: 400 clamp(16px, 1.4vw, 19px)/1 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.hp__name a { text-decoration: none; }
.hp__name a:hover { color: var(--red-text); }
.hp__text { font-size: 13.5px; line-height: 1.4; color: #4a4a4a; }
.hp__buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.hp__price { font: 400 22px/1 var(--font-display); }
.hp__add .icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .hp__art, .hp__foil { animation: none; } }
/* the fan of holo frames */
.hs__fan { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: center; padding: 30px 0 96px; perspective: 1100px; }
.holo { margin: 0 -8%; position: relative; z-index: 1; transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(calc(var(--i) * 6px - 6px)); transition: z-index 0s .2s; }
.holo:nth-child(2) { z-index: 2; transform: translateY(-18px); }
.holo:hover { z-index: 5; transition: z-index 0s; }
.holo__inner { position: relative; border-radius: 18px; padding: 10px; background: var(--holo); background-size: 220% 220%; background-position: var(--bx, 50%) var(--by, 50%); border: var(--line) solid var(--ink);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1)); transition: transform .5s var(--ease-pop), box-shadow .4s; transform-style: preserve-3d; box-shadow: 0 16px 0 rgba(0, 0, 0, .25); }
.holo.is-active .holo__inner { transition: transform .08s linear, box-shadow .4s; box-shadow: 0 26px 40px rgba(0, 0, 0, .35); }
.holo__media { border-radius: 10px; overflow: hidden; background: #d6d6d6; aspect-ratio: 4 / 5; }
.holo__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.holo__foil { position: absolute; inset: 10px; border-radius: 10px; pointer-events: none; mix-blend-mode: color-dodge; opacity: var(--foil, .18);
  background: repeating-linear-gradient(115deg, rgba(255, 0, 140, .5) 0%, rgba(255, 220, 0, .45) 6%, rgba(0, 255, 160, .45) 12%, rgba(0, 170, 255, .5) 18%, rgba(190, 0, 255, .5) 24%, rgba(255, 0, 140, .5) 30%);
  background-size: 300% 300%; background-position: var(--bx, 50%) var(--by, 50%); transition: opacity .4s; }
.holo__glare { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .55), transparent 45%); mix-blend-mode: soft-light; opacity: var(--glare, 0); transition: opacity .4s; }
.holo.is-active { --foil: .55; --glare: 1; --s: 1.06; }
.holo__cap { margin-top: 14px; text-align: center; font: 400 15px/1 var(--font-display); text-transform: uppercase; }
.hs__marker { position: absolute; right: 4%; bottom: 8px; transform: rotate(-4deg); color: var(--butter); font-size: clamp(22px, 2vw, 30px); max-width: 15em; text-align: right; }
@media (max-width: 990px) {
  .hs__grid { grid-template-columns: 1fr; }
  .hs__fan { order: -1; padding-bottom: 70px; }
  .holo { margin: 0 -4%; }
}
@media (max-width: 520px) { .hs__products { gap: 12px; } .hp { padding: 6px 6px 10px; } .hp__name { font-size: 15px; } .hp__text { font-size: 12.5px; } .hp__price { font-size: 19px; } .hp__add { padding: 0 .8em; } }
@media (hover: none) { .hs__marker { display: none; } .hs__fan { padding-bottom: 30px; } }

/* ==== sections/horizontal-rail/horizontal-rail.css ==== */
/* Desktop: the intro and the cards sit in one row (.rail__move) that the scroll moves sideways while the
   section is pinned. Phones, reduced motion and swipe mode: the intro is a normal heading and the cards are a
   swipe row under it. */
.rail { overflow: hidden; border-block: var(--line) solid var(--ink); }
.rail__pin { display: flex; gap: clamp(14px, 2vw, 24px); align-items: center; padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px) var(--gutter); min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
.rail .vstrip { align-self: stretch; border-color: var(--paper); }
/* a curtain left of the strip, so cards sliding past disappear under the strip instead of showing beside it */
.rail__pin { position: relative; }
.rail__pin::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: calc(var(--gutter) + 23px); background: var(--bg); }
.rail__move { position: relative; z-index: 1; }
.rail__move { display: flex; gap: clamp(14px, 2vw, 24px); align-items: center; will-change: transform; }
.rail__intro { flex: 0 0 auto; width: clamp(320px, 38vw, 600px); padding-right: clamp(8px, 2vw, 32px); container-type: inline-size; }
.rail__track { list-style: none; margin: 0; padding: 0 var(--gutter) 0 0; display: flex; gap: clamp(14px, 2vw, 24px); align-items: center; }
.rpanel { flex: 0 0 auto; width: clamp(300px, 30vw, 460px); display: flex; flex-direction: column; padding: 12px 12px 22px; }
.rpanel:nth-child(odd):not(.rpanel--outro) { transform: rotate(1deg); }
.rpanel:nth-child(even):not(.rpanel--outro) { transform: rotate(-1deg); }
.rail__eyebrow { color: var(--accent-text); }
.rail__title { margin-top: 14px; font-size: clamp(38px, 13.5cqi, 104px); }
.rail__text { margin-top: 18px; color: var(--muted); }
.rail__hint { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; font: 800 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--butter); }
.rail__hint .icon { animation: nudge 1.4s var(--ease-pop) infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }
.rpanel__media { aspect-ratio: 4 / 3.4; }
.rpanel__media--contain img { object-fit: contain; padding: 10px; }
.rpanel__num { position: absolute; left: 12px; top: 12px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--paper-3); border: var(--line) solid var(--ink); font: 400 22px/1 var(--font-display); }
.rpanel__kicker { margin: 16px 6px 0; font: 700 12.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #555555; }
.rpanel__title { margin: 8px 6px 0; font: 400 clamp(26px, 2.4vw, 38px)/.95 var(--font-display); text-transform: uppercase; color: var(--red); }
.rpanel__text { margin: 10px 6px 0; font-size: 15.5px; line-height: 1.5; color: #3f3f3f; }
.rpanel__text b { color: var(--ink); }
.rpanel--outro { width: clamp(320px, 34vw, 520px); justify-content: center; gap: 24px; padding: 0 0 0 clamp(8px, 2vw, 32px); }
.rpanel--outro .h-title { font-size: clamp(30px, 3.2vw, 50px); }

@media (max-width: 990px), (prefers-reduced-motion: reduce) {
  .rail__pin { min-height: 0; flex-direction: column; align-items: stretch; padding-right: 0; }
  .rail .vstrip, .rail__pin::before { display: none; }
  .rail__move { display: block; }
  .rail__intro { width: auto; padding: 0 var(--gutter) 0 0; }
  .rail__track { width: 100%; margin-top: 8px; align-items: flex-start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0 var(--gutter); padding-block: 16px 22px; scrollbar-width: none; }
  .rail__track::-webkit-scrollbar { display: none; }
  .rpanel { scroll-snap-align: start; width: min(80vw, 380px); }
  .rail__hint { display: none; }
}

/* swipe mode (no pin), e.g. on the product page */
.rail--swipe .rail__pin { min-height: 0; padding-right: 0; flex-direction: column; align-items: stretch; }
.rail--swipe .vstrip, .rail--swipe .rail__pin::before { display: none; }
.rail--swipe .rail__move { display: block; }
.rail--swipe .rail__intro { width: auto; max-width: 900px; padding: 0 var(--gutter) 0 0; }
.rail--swipe .rail__track { width: 100%; margin-top: 8px; align-items: stretch; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-block: 16px 22px; scrollbar-width: none; }
.rail--swipe .rail__track::-webkit-scrollbar { display: none; }
.rail--swipe .rpanel { scroll-snap-align: start; }
.rail--swipe .rail__hint { display: none; }
.rail__nav { margin-top: 20px; }
.rail.is-pinned .rail__nav { display: none; }

/* ==== sections/main-404/main-404.css ==== */
.nf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.nf__eyebrow { color: var(--accent-text); margin-bottom: 14px; }
.nf__text { margin-top: 18px; color: var(--muted); }
.nf__btns { margin-top: 28px; }
.nf__art img { mix-blend-mode: multiply; transform: rotate(-3deg); }
@media (max-width: 860px) { .nf__grid { grid-template-columns: 1fr; } .nf__art { order: -1; } }

/* ==== sections/main-account/main-account.css ==== */
.acct__card { max-width: 520px; margin-inline: auto; padding: clamp(22px, 3vw, 40px); display: grid; gap: 14px; text-align: center; }
.acct__logo { width: 84px; height: 84px; margin: 0 auto 4px; }
.acct__form { display: grid; gap: 16px; margin-top: 8px; text-align: left; }
.acct__alt { display: grid; gap: 6px; font-size: 15px; }
.acct__alt a { font-weight: 700; }

/* ==== sections/main-cart/main-cart.css ==== */
.cartpg__title { margin-bottom: 28px; }
.cartpg__body { padding: 8px 24px 22px; }
.cartpg__body .cart-foot { position: static; margin: 22px -24px -22px; border-radius: 0 0 var(--radius) var(--radius); }

/* ==== sections/main-collection/main-collection.css ==== */
.mc__bar { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: var(--line) solid var(--ink); }
.mc__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 10px 16px; border: var(--line) solid var(--ink); border-radius: 99px; background: var(--paper-3); color: var(--ink); font: 800 13.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; transition: transform .25s var(--ease-pop), background .2s; }
.chip:hover { transform: rotate(-2deg); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.mc__sort { display: flex; align-items: center; gap: 10px; }
.mc__sort .select { min-height: 46px; width: auto; padding: 8px 40px 8px 14px; appearance: none; background: var(--paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; font-weight: 700; }
.mc__count { margin: 16px 0; font-size: 14px; font-weight: 700; color: #555555; }
.mc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.mc__grid > li { display: flex; }
.mc__grid > li[hidden] { display: none; }
.mc__grid .pcard { flex: 1; }
.mc__grid > li:first-child:not([hidden]) { grid-column: span 2; }
.mc__grid > li:first-child .pcard { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; align-items: stretch; }
.mc__grid > li:first-child .pcard__media { aspect-ratio: auto; min-height: 100%; }
.mc__grid > li:first-child .pcard__title { font-size: clamp(30px, 3vw, 46px); }
.mc__grid > li:first-child .pcard__text { font-size: 17px; }
.mc__empty { padding: 40px 0; text-align: center; font-family: var(--font-marker); font-size: 26px; color: var(--red-text); }
@media (max-width: 990px) { .mc__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mc__grid > li:first-child .pcard { display: flex; } .mc__grid > li:first-child:not([hidden]) { grid-column: 1 / -1; } .mc__grid { gap: 12px; } .mc__grid .pcard__text { display: none; } .mc__grid .pcard__title { font-size: 15px; } }
@media (max-width: 600px) {
  .mc__grid { grid-template-columns: 1fr; }
  .mc__grid > li:first-child:not([hidden]) { grid-column: auto; }
  .mc__grid .pcard, .mc__grid > li:first-child .pcard { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; }
  .mc__grid .pcard__media, .mc__grid > li:first-child .pcard__media { aspect-ratio: 1; min-height: 0; }
  .mc__grid .pcard__body { padding: 4px 4px 4px 0; }
  .mc__grid .pcard__title, .mc__grid > li:first-child .pcard__title { font-size: 16px; }
  .mc__grid .pcard__text { display: none; }
}
@media (max-width: 600px) { .mc__grid .pcard__badge { top: 6px; left: 6px; padding: .35em .6em .3em; font-size: 9.5px; letter-spacing: .06em; } }

/* ==== sections/main-product/main-product.css ==== */
.pd { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(48px, 6vw, 96px); }
.pd__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
/* gallery */
.pg { position: sticky; top: calc(var(--header-h) + 22px); }
.pg__stage { padding: 12px; position: relative; }
.pg__track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-sm); background: var(--paper-2); }
.pg__track::-webkit-scrollbar { display: none; }
.pg__slide { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; display: grid; place-items: center; }
.pg__slide[hidden] { display: none; }
.pg__slide img { width: 100%; height: 100%; object-fit: contain; }
.pg__slide.is-photo img { object-fit: cover; }
.pg__nav { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.pg__nav .icon-btn { pointer-events: auto; background: var(--paper-3); border: var(--line) solid var(--ink); }
.pg__prev .icon { transform: rotate(180deg); }
.pg__count { padding: 6px 12px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 800 13px/1 var(--font-body); letter-spacing: .08em; }
.pg__thumbs { list-style: none; margin: 6px 0 0; padding: 6px 2px 4px; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.pg__thumbs li[hidden] { display: none; }
.pg__thumb { width: 78px; height: 78px; padding: 0; border: var(--line) solid transparent; border-radius: 12px; overflow: hidden; background: var(--paper-2); opacity: .7; transition: opacity .2s, border-color .2s, transform .3s var(--ease-pop); }
.pg__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .pg__thumb:hover { opacity: 1; transform: translateY(-3px); } }
.pg__thumb[aria-current="true"] { border-color: var(--ink); opacity: 1; }
/* info */
.pi__crumbs { display: flex; gap: 8px; font-size: 13.5px; color: #555555; margin-bottom: 18px; }
.pi__crumbs a { color: inherit; }
.pi__vendor { color: var(--accent-text); }
.pi { container-type: inline-size; }
.pi__title { margin-top: 10px; font: 400 clamp(34px, 12cqi, 92px)/.9 var(--font-display); text-transform: uppercase; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.pi__title--long { font-size: clamp(30px, 8.4cqi, 64px); line-height: .95; }
.pi__price { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.pi__price .price { font: 400 clamp(28px, 2.6vw, 38px)/1 var(--font-display); }
.pi__tax { font-size: 14px; color: #555555; }
.pi__desc { margin-top: 18px; font-size: 17px; }
.pi__facts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pi__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: var(--line) solid var(--ink); border-radius: 99px; background: var(--paper-3); font-weight: 700; font-size: 14.5px; }
.pi__facts .icon { width: 20px; height: 20px; }
.pi__form { margin-top: 26px; display: grid; gap: 18px; }
.pi__form { container-type: inline-size; }
.pi__editions { border: 0; margin: 0; padding: 0; min-width: 0; }
.pi__editions legend { margin-bottom: 10px; }
.ed__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed { position: relative; display: block; cursor: pointer; }
.ed input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ed__card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 100%; padding: 12px 14px 12px 12px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--paper-3); transition: transform .3s var(--ease-pop), box-shadow .3s var(--ease-pop), background .2s; }
/* three or more editions: one row each (LaunchBoom's three-option selector) */
.ed__grid--list { grid-template-columns: 1fr; gap: 16px; }
.ed:hover .ed__card { transform: translateY(-2px); }
.ed input:checked + .ed__card { background: var(--butter); box-shadow: 0 5px 0 var(--ink); transform: translateY(-3px); }
.ed input:focus-visible + .ed__card { outline: 3px solid var(--violet); outline-offset: 3px; }
.ed__img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.ed__img img { width: 100%; height: 100%; object-fit: contain; }
.ed__name { display: block; font: 400 18px/1.05 var(--font-display); text-transform: uppercase; }
.ed__price { display: grid; justify-items: end; gap: 3px; font: 400 21px/1 var(--font-display); white-space: nowrap; }
.ed__compare { font: 600 13.5px/1 var(--font-body); color: #555555; }
.ed__text { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: #3f3f3f; }
.ed__badge { position: absolute; top: -12px; right: 12px; background: var(--red); color: var(--paper-3); }
.pi__compare { font: 600 clamp(17px, 1.6vw, 21px)/1 var(--font-body); }
.pi__compare[hidden] { display: none; }
.pi__upgrades { padding: 14px 16px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--ink); color: var(--paper); }
.pi__upgrades[hidden] { display: none; }
.pi__upgrades .label { color: var(--butter); }
.pi__upgrades ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.pi__upgrades li { display: flex; gap: 8px; align-items: start; font-size: 14.5px; }
.pi__upgrades li .icon { color: var(--butter); width: 18px; height: 18px; margin-top: 2px; }
.pi__upgrades li b { font-weight: 700; }
.pi__value { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--paper); }
.pi__more { margin-top: 10px; padding-top: 8px; border-top: 1.5px dashed color-mix(in srgb, var(--paper) 35%, transparent); }
.pi__more summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--butter); }
.pi__more summary::-webkit-details-marker { display: none; }
.pi__more summary .icon { width: 16px; height: 16px; transition: transform .3s var(--ease-pop); }
.pi__more[open] summary .icon { transform: rotate(180deg); }
.pi__upgrades.is-entering li { animation: up-in .5s var(--ease-pop) both; }
/* checkbox add-ons + the popular upgrade (per edition) */
.pi__addons { display: grid; gap: 14px; }
.pi__addons[hidden] { display: none; }
.ups__list { display: grid; gap: 8px; margin-top: 10px; }
.ups { position: relative; display: grid; grid-template-columns: 26px 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); cursor: pointer; transition: background .2s, transform .3s var(--ease-pop); }
.ups:hover { transform: translateY(-2px); }
.ups:has(input:checked) { background: var(--butter); }
.ups input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ups__box { width: 26px; height: 26px; display: grid; place-items: center; border: var(--line) solid var(--ink); border-radius: 8px; background: var(--paper-3); }
.ups__box .icon { width: 17px; height: 17px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease-pop); }
.ups input:checked ~ .ups__box { background: var(--red); color: var(--paper-3); }
.ups input:checked ~ .ups__box .icon { opacity: 1; transform: none; }
.ups input:focus-visible ~ .ups__box { outline: 3px solid var(--violet); outline-offset: 2px; }
.ups__img { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.ups__img img { width: 100%; height: 100%; object-fit: contain; }
.ups__body { display: grid; gap: 3px; }
.ups__name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.ups__name b { font-weight: 800; white-space: nowrap; }
.ups__text { font-size: 13.5px; line-height: 1.35; color: #3f3f3f; }
.pi__upgrade { padding: 14px 16px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--ink); color: var(--paper); }
.pi__upgrade .label { color: var(--butter); }
.pi__upgrade-title { margin-top: 8px; font: 400 clamp(18px, 1.7vw, 22px)/1.05 var(--font-display); text-transform: uppercase; }
.pi__upgrade-text { margin: 6px 0 12px; font-size: 14px; color: #cccccc; }
.pi__upgrade .btn { --btn-edge: var(--paper); }
.pi__shipline { display: flex; gap: 8px; align-items: center; margin-top: 16px; font-weight: 700; font-size: 15px; }
.pi__shipline .icon { color: var(--red-text); }
.pi__acc { margin-top: 24px; }
.pi__acc .acc__body h3 { font-size: 17px; margin-top: 1.1em; }
.pi__acc .acc__body h3:first-child { margin-top: 0; }
.pi__acc .acc__body ul { columns: 2 200px; column-gap: 24px; }
.pi__acc .acc__body li { break-inside: avoid; }
.pi__specs { font-weight: 800; }
.pi__upgrades.is-entering li:nth-child(n) { animation-delay: calc(var(--n, 0) * 40ms); }
@keyframes up-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.pi__buy { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.pi__add { width: 100%; }
.pi__needs { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin-top: 18px; padding: 12px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--butter); font-size: 15px; }
.pi__needs-img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--paper-3); }
.pi__needs-img img { width: 100%; height: 100%; object-fit: contain; }
.pi__needs a { font-weight: 800; }
.pi__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pi__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: var(--line) solid var(--ink); border-radius: 12px; background: transparent; font: 700 14.5px/1 var(--font-body); text-decoration: none; color: var(--ink); transition: background .2s, transform .3s var(--ease-pop); }
.pi__link .icon { width: 18px; height: 18px; }
.pi__link:hover { background: var(--butter); transform: rotate(-2deg); }
.pi__ships { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: var(--line) dashed color-mix(in srgb, var(--ink) 35%, transparent); display: grid; gap: 10px; }
.pi__ships li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.pi__ships .icon { width: 22px; height: 22px; color: var(--red-text); }
/* sticky add-to-cart (phones): shows once the main button scrolls away, docks above the footer */
.satc { display: none; }
@media (max-width: 990px) {
  .pd__grid { grid-template-columns: 1fr; }
  .pg { position: static; margin-inline: calc(var(--gutter) * -1); }
  .pg__stage { border-radius: 0; border-inline: 0; padding: 0; }
  .pg__track { border-radius: 0; }
  .pg__thumbs { display: none; }
  .pg__slide { aspect-ratio: 4 / 3.1; }
  .satc { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; margin: 16px 12px 16px; padding: 10px 10px 10px 12px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--paper-3); box-shadow: 0 6px 0 var(--ink); transform: translateY(160%); transition: transform .45s var(--ease-pop); }
  .satc.is-on { transform: none; }
  .satc__img { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
  .satc__img img { width: 100%; height: 100%; object-fit: contain; }
  .satc__title { display: grid; gap: 5px; min-width: 0; }
  .satc__name { font: 400 14px/1.05 var(--font-display); text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .satc__title small { font: 600 12.5px/1 var(--font-body); color: #555555; }
  .satc__title small:empty { display: none; }
  .satc__btn { min-height: 46px; }
}
@media (max-width: 460px) { .ed__grid { grid-template-columns: 1fr; } .pi__upgrades ul { grid-template-columns: 1fr; } }
/* edition cards stack when the info column is narrow (after the base .ed__grid rule so it wins) */
@container (max-width: 520px) { .ed__grid { grid-template-columns: 1fr; } }

/* ==== sections/main-search/main-search.css ==== */
.srch__form { margin-top: 24px; }
.srch__count { margin-top: 18px; font-weight: 700; }

/* ==== sections/media-feature/media-feature.css ==== */
.mf__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.mf--media-right .mf__frame { order: 2; }
.mf--tall .mf__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.mf__frame { position: relative; margin: 0; transform: rotate(-1.2deg); --rev-rot: -1.2deg; box-shadow: 0 8px 0 var(--ink); }
.mf--media-right .mf__frame { transform: rotate(1.2deg); --rev-rot: 1.2deg; }
.js-motion .mf__frame[data-reveal].is-in { transform: rotate(var(--rev-rot)); }
.mf__media { aspect-ratio: 5 / 3; }
.mf--tall .mf__media { aspect-ratio: 4 / 5; max-height: 78vh; }
.mf__media--contain { background: var(--paper-3); }
.mf__media--contain img { object-fit: contain; }
.mf__sticker { position: absolute; top: -14px; left: 18px; transform: rotate(-4deg); }
.mf__copy { container-type: inline-size; }
.mf__eyebrow { color: var(--accent-text); margin-bottom: 14px; }
.mf__title { font-size: clamp(32px, 10.5cqi, 76px); }
.mf__text { margin-top: 20px; }
.mf__text b { font-weight: 800; }
.mf__text > * + * { margin-top: .8em; }
.mf__btns { margin-top: 26px; }
.mf__note { margin-top: 18px; transform: rotate(-2deg); font-size: 26px; }
@media (max-width: 860px) {
  .mf__grid, .mf--tall .mf__grid { grid-template-columns: 1fr; }
  .mf--media-right .mf__frame { order: 0; }
  .mf--tall .mf__frame { width: min(100%, 420px); justify-self: center; }
}

/* ==== sections/newsletter-signup/newsletter-signup.css ==== */
.nl { border-top: var(--line) solid var(--ink); }
.nl__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.nl__copy { container-type: inline-size; }
.nl__title { font-size: clamp(32px, 11.5cqi, 100px); }
.nl__title .accent { display: inline-block; }
.nl__text { margin-top: 18px; }
.nl__formwrap { margin-top: 28px; max-width: 680px; container-type: inline-size; }
.nl__form { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
/* side by side only while the field stays clearly wider than the button; stacked, the button keeps its width */
@container (max-width: 600px) { .nl__form { grid-template-columns: 1fr; } .nl__form .btn { justify-self: start; } }
.nl__form .field-error { grid-column: 1 / -1; margin: 0; }
.nl__side { position: relative; justify-self: center; }
.nl__art { width: min(380px, 70vw); transform: rotate(6deg); transition: transform .5s var(--ease-pop); filter: drop-shadow(0 14px 0 rgba(24, 24, 24, .15)); }
.nl__side:hover .nl__art { transform: rotate(-3deg) scale(1.04); }
.nl__note { position: absolute; left: -12%; bottom: 6%; transform: rotate(-8deg); font-size: 26px; }
@media (max-width: 860px) {
  .nl__grid { grid-template-columns: 1fr; }
  .nl__side { order: -1; }
  .nl__art { width: 220px; }
  .nl__note { left: auto; right: -6%; bottom: 6%; font-size: 21px; }
  .nl { overflow-x: clip; }
}

/* ==== sections/page-hero/page-hero.css ==== */
.ph { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding-block: clamp(48px, 7vw, 110px) clamp(32px, 4vw, 56px); }
.ph--has-img { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ph__eyebrow { color: var(--accent-text); margin-bottom: 16px; }
.ph__copy { container-type: inline-size; }
.ph__title { font-size: clamp(34px, 11.4cqi, 156px); }
.ph__text { margin-top: 22px; color: var(--muted); }
.ph__text p + p { margin-top: .7em; }
.ph__note { margin-top: 18px; transform: rotate(-2deg); transform-origin: left; font-size: 26px; }
.ph__art { position: relative; justify-self: center; }
.ph__img { width: min(420px, 70vw); transform: rotate(5deg); filter: drop-shadow(0 14px 0 rgba(24, 24, 24, .14)); }
.ph__ring { position: absolute; left: -16%; bottom: 0; color: var(--fg); }
.ph__ring-logo { width: 100%; height: 100%; }
@media (max-width: 860px) { .ph--has-img { grid-template-columns: 1fr; } .ph__art { order: -1; } .ph__img { width: min(300px, 64vw); } .ph__ring { --ring: 100px !important; left: -10%; } }

/* ==== sections/password-gate/password-gate.css ==== */
.gate { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px var(--gutter); background: var(--ink); color: var(--paper); overflow: hidden; position: relative; }
.gate::before { content: ""; position: absolute; inset: auto -10% -42% -10%; height: 70%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 70px, transparent 70px 140px); transform: perspective(500px) rotateX(58deg); transform-origin: bottom; pointer-events: none; }
.gate__grid { position: relative; width: min(1180px, 100%); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.gate__logo { width: clamp(84px, 9vw, 120px); height: auto; }
.gate__eyebrow { margin-top: 22px; color: var(--butter); }
.gate__title { margin-top: 12px; font-size: clamp(44px, 6.2vw, 104px); }
.gate__text { margin-top: 18px; max-width: 44ch; color: #cccccc; font-size: 18px; }
.gate__form { margin-top: 28px; display: grid; grid-template-columns: 1fr auto; gap: 12px; max-width: 560px; }
.gate__form .btn { --btn-edge: var(--paper); }
.gate__form .input { font-size: 18px; border-color: var(--paper); }
.gate__error { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--red); color: var(--paper-3); font-weight: 700; }
.gate__error[hidden] { display: none; }
.gate__form.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.gate__credit { margin-top: 30px; font-size: 14px; color: #bdbdbd; }
.gate__credit a { color: var(--paper); font-weight: 700; }
.gate__art { justify-self: center; }
.gate__monster { width: min(440px, 70vw); animation: gate-bob 3.2s ease-in-out infinite; }
@keyframes gate-bob { 50% { transform: translateY(-12px) rotate(2deg); } }
/* phones: the password field and button stay in the first screen (house rule); the monster follows the form */
@media (max-width: 860px) { .gate { place-items: start center; } .gate__grid { grid-template-columns: 1fr; } .gate__art { order: 1; } .gate__monster { width: min(200px, 48vw); } .gate__form { grid-template-columns: 1fr; margin-top: 22px; } .gate__form .btn { justify-self: start; } .gate__logo { width: 72px; } .gate__eyebrow { margin-top: 14px; } .gate__title { font-size: clamp(34px, 10.5vw, 56px); } .gate__text { margin-top: 12px; font-size: 16.5px; } }

/* ==== sections/promo-bar/promo-bar.css ==== */
.promo { background: var(--ink); color: color-mix(in srgb, var(--paper) 88%, transparent); font: 700 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; padding: 10px 0 2px; }
.promo a { text-decoration: none; }
.promo a:hover { color: var(--butter); }
.promo .star { color: var(--red); width: .9em; height: .9em; }

/* ==== sections/proof-wall/proof-wall.css ==== */
.pw__top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.pw__eyebrow { color: var(--accent-text); margin-bottom: 14px; }
.pw__src { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; font-size: 15px; }
.pw__src .icon { width: 18px; height: 18px; }
.pw__art { justify-self: center; width: min(360px, 70vw); transform: rotate(4deg); border: var(--line) solid var(--ink); border-radius: 18px; }
.pw__stats { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: var(--line) solid var(--ink); }
.pw__stat { padding: clamp(18px, 2.4vw, 32px) clamp(8px, 1.4vw, 20px); border-left: var(--line) solid var(--ink); display: grid; gap: 8px; }
.pw__stat:first-child { border-left: 0; }
.pw__value { font: 400 clamp(30px, 3.5vw, 58px)/.9 var(--font-display); color: var(--red); white-space: nowrap; }
.pw__label { font: 800 13px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.pw__quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(32px, 4vw, 56px); }
.pw__quote { position: relative; margin: 0; padding: 26px 24px 22px; background: var(--paper-3); border: var(--line) solid var(--ink); border-radius: 22px; transform: rotate(var(--r)); box-shadow: 0 8px 0 var(--ink); --rev-rot: var(--r); }
.pw__quote::after { content: ""; position: absolute; left: 34px; bottom: -18px; width: 28px; height: 28px; background: var(--paper-3); border-right: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); transform: rotate(45deg) skew(10deg, 10deg); }
.pw__quote blockquote { margin: 0; font: 500 clamp(19px, 1.6vw, 23px)/1.35 var(--font-body); letter-spacing: -.01em; }
.pw__quote figcaption { margin-top: 16px; font-size: 14.5px; color: #555555; }
.pw__quote figcaption b { color: var(--ink); }
.pw__sample { position: absolute; top: -12px; right: 14px; }
@media (max-width: 990px) { .pw__top { grid-template-columns: 1fr; } .pw__stats { grid-template-columns: 1fr 1fr; } .pw__stat:nth-child(3) { border-left: 0; } .pw__stat:nth-child(n+3) { border-top: var(--line) solid var(--ink); } .pw__quotes { grid-template-columns: 1fr; gap: 36px; } }

/* ==== sections/resource-cards/resource-cards.css ==== */
.rcs__head { display: grid; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.rcs__banner { display: block; max-width: 680px; transition: transform .35s var(--ease-pop); }
.rcs__banner:hover { transform: rotate(-1.5deg) scale(1.02); }
.rcs__banner img { mix-blend-mode: multiply; }
.rcs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.rc { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; text-decoration: none; transition: transform .35s var(--ease-pop), box-shadow .35s var(--ease-pop); }
.rc:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 8px 0 var(--ink); }
.rc__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--butter); border: var(--line) solid var(--ink); }
.rc__icon .icon { width: 26px; height: 26px; }
.rc__title { margin-top: 8px; font: 400 19px/1.05 var(--font-display); text-transform: uppercase; }
.rc__text { font-size: 15px; color: #3f3f3f; flex: 1; }
.rc__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--red-text); }
.rc__go .icon { width: 16px; height: 16px; }
.rc--files:hover { transform: none; box-shadow: none; }
.rc__files { display: grid; gap: 6px; margin-top: 4px; }
.rc__files a { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; transition: background .2s; }
.rc__files a:hover { background: var(--butter); }
.rc__files .icon { width: 16px; height: 16px; flex: none; color: var(--red-text); }
@media (max-width: 990px) { .rcs__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rcs__grid { grid-template-columns: 1fr; } }

/* ==== sections/reviews-app/reviews-app.css ==== */
.ra__head { margin-bottom: 24px; }
.ra__empty { display: grid; justify-items: center; gap: 10px; padding: clamp(28px, 4vw, 48px) 20px; text-align: center; border-style: dashed; }
.ra__stars { display: flex; gap: 6px; color: var(--ink); }
.ra__star { width: 28px; height: 28px; }
.ra__title { font: 400 clamp(20px, 2vw, 26px)/1.05 var(--font-display); text-transform: uppercase; }

/* ==== sections/rich-text/rich-text.css ==== */
.rt__title { margin-bottom: 24px; }
.rt__body { font-size: 18px; }
.rt__body h2:first-child, .rt__body h3:first-child { margin-top: 0; }

/* ==== sections/rulebook/rulebook.css ==== */
/* Rulebook: contents list + long text, styled like the printed book's boxes (phase tags, tips, examples). */
.rb__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.rb__side { position: sticky; top: calc(var(--header-h) + 34px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-height: calc(100vh - var(--header-h) - 60px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 12px; scrollbar-width: none; }
.rb__side::-webkit-scrollbar { display: none; }
.rb__toc { padding: 14px 16px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper-3); }
.rb__toc summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; font: 800 13px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.rb__toc summary::-webkit-details-marker { display: none; }
.rb__toc summary .icon { width: 18px; height: 18px; transition: transform .3s var(--ease-pop); }
.rb__toc[open] summary .icon { transform: rotate(180deg); }
.rb__toc ol { counter-reset: toc; display: grid; gap: 2px; margin-top: 10px; }
.rb__toc li { counter-increment: toc; }
.rb__toc a { display: grid; grid-template-columns: 26px 1fr; padding: 6px 8px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.rb__toc a::before { content: counter(toc, decimal-leading-zero); font: 800 11.5px/1.6 var(--font-body); color: #6b6b6b; }
.rb__toc a:hover { background: var(--paper-2); }
.rb__toc a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.rb__toc a[aria-current="true"]::before { color: var(--butter); }
.rb__actions { display: grid; gap: 10px; }
.rb__actions .btn { font-size: 14px; white-space: normal; text-align: center; line-height: 1.15; padding: .7em 1em; }
/* the text */
.rb__body { min-width: 0; font-size: 17px; container-type: inline-size; }
.rb__body > * + * { margin-top: 1em; }
.rb__body p, .rb__body > ul, .rb__body > ol { max-width: 72ch; }
.rb__body h2 { margin-top: clamp(56px, 6vw, 88px); padding-top: 22px; border-top: var(--line) solid var(--ink); font: 400 clamp(30px, 3.6vw, 52px)/.95 var(--font-display); text-transform: uppercase; scroll-margin-top: calc(var(--header-h) + 24px); }
.rb__body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.rb__body h3 { margin-top: 1.8em; font: 400 clamp(19px, 1.7vw, 23px)/1.1 var(--font-display); text-transform: uppercase; color: var(--red-text); }
.rb__body ul, .rb__body ol { padding-left: 1.2em; }
.rb__body li + li { margin-top: .4em; }
.rb__body b, .rb__body strong { font-weight: 800; }
.rb__body a { color: var(--red-text); font-weight: 700; }
.rb-lede { font: 400 clamp(20px, 2vw, 26px)/1.25 var(--font-marker); color: var(--red-text); }
.rb-small, .rb-note { font-size: 14.5px; color: #4a4a4a; }
.rb-note { padding-left: 14px; border-left: 3px solid var(--paper-2); }
.rb-aside { font: 400 21px/1.25 var(--font-marker); color: var(--ink); transform: rotate(-1deg); }
.rb-aside span { font-size: 16px; color: #555555; }
.rb-big { font: 400 clamp(20px, 2vw, 26px)/1.15 var(--font-display); text-transform: uppercase; }
/* rounds by player count */
.rb__body .rb-rounds { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.rb-rounds li { margin: 0; display: grid; gap: 2px; padding: 10px 14px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rb-rounds li + li { margin-top: 0; }
.rb-rounds b { font: 400 26px/1 var(--font-display); }
.rb-rounds span { color: var(--red-text); }
/* the three phase boxes */
.rb-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rb-phase { padding: 16px 16px 18px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper-3); }
.rb-phase:nth-child(1) { box-shadow: 0 6px 0 #2e9e8f; }
.rb-phase:nth-child(2) { box-shadow: 0 6px 0 #3f7bd1; }
.rb-phase:nth-child(3) { box-shadow: 0 6px 0 var(--red); }
.rb-phase__tag { font: 800 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #555555; }
.rb-phase__name { margin-top: 6px; font: 400 22px/1 var(--font-display); text-transform: uppercase; }
.rb-phase ul { margin-top: 10px; font-size: 15px; }
.rb-phase p:not([class]) { margin-top: 8px; font-size: 15px; }
/* tips and examples (the book's side boxes) */
.rb-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.rb-tip { padding: 16px 18px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--butter); font-size: 15.5px; }
.rb-tip > * + * { margin-top: .6em; }
.rb-tip__q { font: 400 18px/1.1 var(--font-display); text-transform: uppercase; }
.rb-example { max-width: 72ch; padding: 18px 20px; border-radius: var(--radius); background: var(--ink); color: var(--paper); }
.rb-example > * + * { margin-top: .6em; }
.rb-example__tag { font: 800 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--butter); }
/* components */
.rb__body .rb-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rb-parts > div { padding: 14px 16px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); }
.rb-parts dt { font: 400 17px/1.1 var(--font-display); text-transform: uppercase; }
.rb-parts dd { margin: 6px 0 0; font-size: 15px; color: #3f3f3f; }
.rb-parts small { color: #6b6b6b; }
/* solo: rank board, eligible cards, ranking guide */
.rb__body .rb-board { list-style: none; padding: 0; display: grid; gap: 8px; max-width: 560px; }
.rb-board li { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); font: 400 17px/1.1 var(--font-display); text-transform: uppercase; }
.rb-board li + li { margin-top: 0; }
.rb-board li:first-child { background: var(--butter); }
.rb-board b { font: 800 13px/1.2 var(--font-body); letter-spacing: .08em; color: var(--red-text); }
.rb__body .rb-cards { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rb-cards li { margin: 0; padding: 8px 12px; border: var(--line) solid var(--ink); border-radius: 12px; background: var(--paper-3); font-weight: 700; font-size: 14.5px; }
.rb-cards li + li { margin-top: 0; }
.rb-cards span { display: block; font-weight: 500; font-size: 13px; color: #555555; }
.rb-guide summary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); font: 400 15px/1 var(--font-display); text-transform: uppercase; cursor: pointer; list-style: none; box-shadow: 0 4px 0 var(--ink); }
.rb-guide summary::-webkit-details-marker { display: none; }
.rb-guide[open] summary { background: var(--butter); }
/* the ranking guide: a table when the column is wide, one card per mini-game when it is not (never a
   sideways scroll or a scrollbar) */
.rb-table { margin-top: 14px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); overflow: hidden; }
.rb-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rb-table th, .rb-table td { padding: 9px 10px; border-bottom: 1px solid var(--paper-2); text-align: left; vertical-align: top; }
.rb-table thead th { position: sticky; top: 0; background: var(--ink); color: var(--paper); font: 800 11.5px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.rb-table tbody th { font-weight: 800; white-space: nowrap; }
.rb-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 45%, transparent); }
/* the phase boxes stack when the text column is narrow (beside the contents on small laptops, or on phones) */
@container (max-width: 820px) { .rb-phases { grid-template-columns: 1fr; } }
@container (max-width: 940px) {
  .rb-table { border: 0; border-radius: 0; background: none; overflow: visible; }
  .rb-table table, .rb-table tbody { display: block; }
  .rb-table thead { display: none; }
  .rb-table tbody tr, .rb-table tbody tr:nth-child(even) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding: 12px 14px 14px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--paper-3); }
  .rb-table th, .rb-table td { display: block; padding: 0; border: 0; }
  .rb-table tbody th { grid-column: 1 / -1; font: 400 17px/1.1 var(--font-display); text-transform: uppercase; white-space: normal; }
  .rb-table td:nth-of-type(-n+2) { grid-column: 1 / -1; }
  .rb-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 800 11px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #6b6b6b; }
  .rb-table td:nth-of-type(n+3) { padding: 8px 9px; border-radius: 10px; background: var(--paper-2); font-size: 13.5px; font-weight: 600; }
}
@container (max-width: 520px) { .rb-table tbody tr, .rb-table tbody tr:nth-child(even) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 990px) {
  .rb__grid { grid-template-columns: 1fr; }
  .rb__side { position: static; max-height: none; overflow: visible; padding: 0; }
  .rb__actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .rb-phases, .rb__body .rb-parts { grid-template-columns: 1fr; }
  .rb__actions { grid-template-columns: 1fr; }
  .rb-board li { grid-template-columns: 1fr; gap: 4px; }
}

/* ==== sections/rulebook-pages/rulebook-pages.css ==== */
.rbp__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 28px; margin-bottom: clamp(20px, 3vw, 36px); }
.rbp__copy { display: grid; gap: 12px; }
.rbp__eyebrow { color: var(--butter); }
/* the row: sideways only, so a vertical swipe on it scrolls the page; no scrollbar */
.rbp__track { display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 14px max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter))) 22px; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter))); }
.rbp__track::-webkit-scrollbar { display: none; }
.rbp__page { position: relative; flex: 0 0 min(72vw, 440px); scroll-snap-align: start; }
.rbp__page a { display: block; border: var(--line) solid var(--paper); border-radius: 12px; overflow: hidden; background: var(--paper-3); transition: transform .35s var(--ease-pop); }
.rbp__page img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (hover: hover) { .rbp__page a:hover { transform: translateY(-6px) rotate(-1deg); } }
.rbp__num { position: absolute; left: 10px; top: 24px; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border: var(--line) solid var(--ink); border-radius: 99px; background: var(--butter); color: var(--ink); font: 800 13px/1 var(--font-body); }
/* a slim progress line under the row, in the brand colours */
.rbp__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rbp__bar { flex: 1 1 260px; max-width: 520px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--paper) 18%, transparent); overflow: hidden; }
.rbp__bar i { display: block; height: 100%; width: 20%; border-radius: inherit; background: var(--red); transition: width .25s var(--ease-out); }
.rbp__note { color: var(--butter); transform: rotate(-1deg); }

/* ==== sections/scrub-steps/scrub-steps.css ==== */
.ss { position: relative; }
.ss__pin { padding-block: clamp(64px, 8vw, 120px); }
.ss__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.ss__eyebrow { color: var(--accent-text); }
.ss__title { margin-top: 14px; }
.ss__text { margin-top: 18px; font-size: clamp(17px, 1.3vw, 19px); max-width: 48ch; color: var(--muted); }
.ss__steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; }
.sstep { display: grid; grid-template-columns: 2.2ch 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-top: var(--line) solid color-mix(in srgb, currentColor 18%, transparent); transition: opacity .35s, transform .45s var(--ease-pop); }
.sstep__op { font: 400 clamp(22px, 2.2vw, 34px)/1 var(--font-display); color: var(--red); }
.sstep__title { display: block; font: 400 clamp(22px, 2.2vw, 34px)/1 var(--font-display); text-transform: uppercase; }
.sstep__note { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.sstep--total .sstep__title { font-size: clamp(34px, 3.6vw, 58px); color: var(--red); }
.ss__stage { position: relative; }
.ss__frame { padding: 12px; transform: rotate(1.5deg); }
.ss__media { aspect-ratio: 1; }
.ss__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.ss.is-scrub .ss__canvas { opacity: 1; }
.ss.is-scrub .ss__video { visibility: hidden; }
.ss__caption { display: flex; align-items: center; gap: 12px; padding: 12px 4px 2px; }
.ss__progress { flex: 1; height: 8px; border: var(--line) solid var(--ink); border-radius: 99px; overflow: hidden; }
.ss__progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--red); }
.ss__marker { position: absolute; left: -9%; bottom: -10%; transform: rotate(-7deg); color: var(--butter); font-size: clamp(22px, 2vw, 30px); }
/* scrub mode (desktop + motion): steps light up in turn */
.ss.is-scrub .sstep { opacity: .28; }
.ss.is-scrub .sstep.is-on { opacity: 1; }
.ss.is-scrub .sstep.is-now { transform: translateX(10px); }
@media (max-width: 990px) {
  .ss__grid { grid-template-columns: 1fr; }
  .ss__stage { order: -1; max-width: 520px; width: 100%; justify-self: center; }
  .ss__marker { position: static; display: block; margin: 14px 0 0 auto; width: max-content; max-width: 100%; transform: rotate(-4deg); }
}

/* ==== sections/site-footer/site-footer.css ==== */
.ftr { background: var(--ink); color: var(--paper); border-top: var(--line) solid var(--ink); overflow: hidden; position: relative; }
.ftr__top { display: grid; grid-template-columns: 1.1fr 2fr auto; gap: clamp(24px, 4vw, 64px); padding-block: clamp(56px, 7vw, 96px) 40px; align-items: start; }
.ftr__name { font: 400 clamp(26px, 2.6vw, 36px)/.95 var(--font-display); text-transform: uppercase; }
.ftr__loc { margin-top: 8px; font: 800 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #bdbdbd; }
.ftr__mail { margin-top: 18px; }
.ftr__mail a { font-weight: 700; }
.ftr__mail a:hover { color: var(--butter); }
.ftr__socials { display: flex; gap: 8px; margin-top: 18px; }
.ftr__social { display: grid; place-items: center; width: 44px; height: 44px; border: var(--line) solid var(--paper); border-radius: 12px; transition: background .2s, color .2s, transform .3s var(--ease-pop); }
.ftr__social:hover { background: var(--paper); color: var(--ink); transform: rotate(-8deg); }
.ftr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ftr__h { font: 400 18px/1 var(--font-display); text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ftr__col a { text-decoration: none; font-weight: 500; }
.ftr__col a:hover { color: var(--butter); text-decoration: underline; }
.ftr__ring { color: var(--paper); }
.ftr__word { font: 400 9.6vw/1 var(--font-display); text-transform: uppercase; white-space: nowrap; text-align: center; color: var(--paper); padding: clamp(22px, 3.2vw, 46px) 0 clamp(12px, 1.8vw, 28px); letter-spacing: -.01em; }
/* every letter floats on its own in the moon-gravity hover (site-footer.js) */
.ftr__l { display: inline-block; }
.ftr__lb { display: inline-block; transform-origin: 50% 60%; will-change: transform; }
.ftr__o { position: relative; width: .82em; height: .82em; vertical-align: -.02em; margin-inline: .015em; }
.ftr__o .ftr__logo { position: relative; z-index: 1; will-change: transform; }
/* moon dust under the logo while it floats (moon-gravity hover, site-footer.js) */
.ftr__o-dust { position: absolute; left: 14%; right: 14%; bottom: -.04em; height: .1em; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 233, 231, .55), rgba(233, 233, 231, 0)); opacity: 0; pointer-events: none; }
.ftr__logo { width: 100%; height: 100%; }
.ftr__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; border-block: var(--line) solid color-mix(in srgb, var(--paper) 25%, transparent); font-size: 14px; color: #bdbdbd; }
.ftr__credit a { color: var(--paper); font-weight: 700; }
.ftr__credit a:hover { color: var(--butter); }
@media (max-width: 990px) {
  .ftr__top { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__ring { --ring: 110px !important; justify-self: start; }
}
@media (max-width: 480px) { .ftr__cols { grid-template-columns: 1fr 1fr; } .ftr__cols > :last-child { grid-column: 1 / -1; } }
.ftr__ring .ring__core { background: var(--paper); color: var(--ink); }

/* ==== sections/site-header/site-header.css ==== */
/* Header: a full-width ink band (Stiff's dark frame) holding one outlined bar: brand, centred menu, actions. */
.section--site-header { position: sticky; top: 0; z-index: 7000; }
.hdr { padding: 10px var(--gutter); background: var(--ink); color: var(--paper); }
.hdr__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 66px; padding: 0 8px 0 9px; max-width: calc(var(--page) + 40px); margin-inline: auto;
  border: 1.5px solid color-mix(in srgb, var(--paper) 55%, transparent); border-radius: 14px; transition: border-color .3s; }
.hdr.is-scrolled .hdr__bar { border-color: color-mix(in srgb, var(--paper) 85%, transparent); }
.hdr__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; justify-self: start; }
.hdr__logo { width: 48px; height: 48px; border-radius: 50%; flex: none; transition: transform .7s var(--ease-pop); }
.hdr__brand:hover .hdr__logo { transform: scale(1.08); }
.hdr__word { display: grid; gap: 3px; font: 400 17px/1 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.hdr__word small { font: 800 10.5px/1 var(--font-body); letter-spacing: .42em; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link { position: relative; display: block; padding: 11px 14px; border-radius: 99px; font: 700 13.5px/1 var(--font-body); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s, transform .35s var(--ease-pop); }
.nav__link:hover { background: var(--paper); color: var(--ink); transform: rotate(-3deg); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--red); }
/* dropdowns: hover or keyboard focus opens (CSS); click/tap toggles .is-open (site-header.js) */
.nav__item { position: relative; }
.nav__toggle { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: inherit; }
.nav__chev { width: 16px; height: 16px; transition: transform .3s var(--ease-pop); }
/* closed panels are display:none (they take no room); opening plays a short drop-in */
.nav__sub { position: absolute; top: calc(100% + 16px); left: 50%; z-index: 10; min-width: 220px; display: none; transform: translateX(-50%); }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.has-sub:hover .nav__sub, .has-sub:focus-within:not(.is-shut) .nav__sub, .has-sub.is-open .nav__sub { display: block; animation: nav-drop .35s var(--ease-pop); }
@keyframes nav-drop { from { opacity: 0; transform: translate(-50%, 8px) rotate(-1deg); } }
.has-sub:hover .nav__chev, .has-sub.is-open .nav__chev { transform: rotate(180deg); }
.has-sub:hover > .nav__toggle, .has-sub.is-open > .nav__toggle { background: var(--paper); color: var(--ink); }
.nav__panel { display: flex; gap: 26px; padding: 18px 20px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 8px 0 var(--ink); }
.nav__sub--wide .nav__panel { width: max-content; max-width: min(760px, 90vw); }
.nav__col { display: grid; align-content: start; gap: 4px; min-width: 0; }
.nav__col ul { display: grid; gap: 2px; margin-top: 8px; }
.nav__colhead { font: 800 12px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--red-text); text-decoration: none; }
.nav__sublink { display: block; padding: 6px 0; font: 600 15px/1.25 var(--font-body); text-decoration: none; white-space: nowrap; }
.nav__sublink--big { font: 400 18px/1.1 var(--font-display); text-transform: uppercase; padding: 7px 0; }
.nav__sublink:hover { color: var(--red-text); }
.nav__feature { display: grid; justify-items: start; gap: 6px; width: 180px; padding: 10px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--butter); text-decoration: none; transform: rotate(1.5deg); transition: transform .3s var(--ease-pop); }
.nav__feature:hover { transform: rotate(0) translateY(-3px); }
.nav__feature-img { width: 100%; aspect-ratio: 5 / 4; border-radius: 10px; background: var(--paper-3); overflow: hidden; }
.nav__feature-img img { width: 100%; height: 100%; object-fit: contain; }
.nav__feature b { font: 400 15px/1.05 var(--font-display); text-transform: uppercase; }
.nav__feature span:last-child { font-weight: 800; }
.hdr__actions { display: flex; align-items: center; gap: 2px; justify-self: end; }
.hdr__actions .icon-btn:hover { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.hdr__actions .btn { margin-left: 10px; --btn-edge: var(--paper); min-height: 44px; }
.hdr__cart .count-pill { border-color: var(--ink); }
.hdr__burger { display: none; }
@media (max-width: 1080px) {
  .hdr__bar { grid-template-columns: auto 1fr auto; }
  .nav, .hdr__actions .btn { display: none; }
  .hdr__burger { display: inline-grid; }
}
@media (max-width: 600px) {
  .hdr { padding: 8px 10px; }
  .hdr__bar { height: 58px; gap: 4px; padding: 0 4px; }
  .hdr__account { display: none; }
  .hdr__word { font-size: 14px; }
  .hdr__word small { font-size: 9px; letter-spacing: .36em; }
  .hdr__logo { width: 40px; height: 40px; }
}
/* mobile menu */
.drawer--menu .drawer__panel { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.drawer--menu .drawer__head { border-bottom-color: color-mix(in srgb, var(--paper) 30%, transparent); }
.mnav { display: flex; flex-direction: column; gap: 18px; }
.mnav > * { flex-shrink: 0; }
.mnav__links { list-style: none; padding: 0; margin: 0; }
.mnav__links a { display: block; padding: 8px 0; font: 400 clamp(30px, 9vw, 40px)/1 var(--font-display); text-transform: uppercase; text-decoration: none; }
.mnav__links a:hover { color: var(--red); }
.mnav__sub { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 10px; }
.mnav__sub a { padding: 7px 12px; border: 1.5px solid color-mix(in srgb, var(--paper) 45%, transparent); border-radius: 99px; font: 700 14px/1.1 var(--font-body); text-transform: none; }
.mnav__sub a:hover { background: var(--paper); color: var(--ink); }
.drawer.is-open .mnav__links li { animation: mnav-in .55s var(--ease-pop) both; animation-delay: calc(var(--i) * 50ms + 120ms); }
@keyframes mnav-in { from { opacity: 0; transform: translateX(-24px) rotate(-3deg); } }
.mnav__railhead { display: flex; justify-content: space-between; align-items: baseline; border-top: var(--line) solid color-mix(in srgb, var(--paper) 25%, transparent); padding-top: 18px; }
.mnav__railhead a { font-weight: 700; color: var(--butter); }
.mnav__rail { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; list-style: none; margin: -10px -22px 0; padding: 14px 22px 22px; scroll-padding-inline: 22px; scrollbar-width: none; }
.mnav__rail::-webkit-scrollbar { display: none; }
.mnav__rail > li { flex: 0 0 210px; scroll-snap-align: start; display: flex; }
.mnav__rail .pcard { flex: 1; }
.mnav__rail .pcard__text { display: none; }
.mnav__rail .pcard__title { font-size: 15px; }
.mnav__foot { display: flex; gap: 18px; margin-top: auto; padding-top: 8px; }
.mnav__foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }

/* ==== sections/statement-band/statement-band.css ==== */
.sb { position: relative; text-align: center; }
.sb__quote { margin: 0 auto; max-width: 16ch; font: 400 clamp(40px, 6.4vw, 108px)/.92 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.sb__quote i { font-family: var(--font-accent); font-style: normal; text-transform: none; color: var(--accent); }
.sb__by { margin-top: 22px; font: 800 13px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.sb__art { position: absolute; right: 2%; bottom: -10px; width: clamp(120px, 14vw, 220px); transform: rotate(8deg); }
@media (max-width: 760px) { .sb__art { position: static; margin: 20px auto 0; } }
/* paragraph size */
.sb--text .sb__eyebrow { color: var(--accent-text); margin-bottom: 16px; }
.sb--text .sb__title { max-width: 18ch; margin: 0 auto 26px; font-size: clamp(38px, 5.6vw, 92px); }
.sb--text .sb__quote { max-width: 44ch; font: 500 clamp(21px, 2.3vw, 33px)/1.38 var(--font-body); letter-spacing: -.01em; text-transform: none; }
.sb--text .sb__quote b { font-weight: 800; }
.sb--text .sb__quote .accent { color: var(--accent-text); }

/* ==== sections/step-list/step-list.css ==== */
.stl__head { margin-bottom: clamp(24px, 3vw, 40px); }
.stl__eyebrow { color: var(--accent-text); margin-bottom: 12px; }
.stl__note { margin-top: 12px; transform: rotate(-2deg); transform-origin: left; font-size: 24px; }
.stl__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.stp { position: relative; padding: 22px 20px 22px; }
.stp__n { position: absolute; top: -16px; left: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--paper-3); border: var(--line) solid var(--ink); font: 400 19px/1 var(--font-display); }
.stp__img { margin: 10px 0 12px; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.stp__title { margin-top: 12px; font: 400 21px/1.02 var(--font-display); text-transform: uppercase; }
.stp__text { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: #3f3f3f; }
@media (max-width: 990px) { .stl__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .stl__grid { grid-template-columns: 1fr; gap: 26px; } }

/* ==== sections/story-timeline/story-timeline.css ==== */
.tl__heading { margin-bottom: clamp(32px, 4vw, 56px); }
.tl__list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(28px, 4vw, 56px); }
.tl__list::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 22px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, var(--fg) 0 18px, transparent 18px 32px); opacity: .9; border-radius: 4px; }
.tl__item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; position: relative; }
.tl__item--r .tl__card { order: 2; }
.tl__card { padding: 22px 24px; background: var(--card); color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius); }
.tl__date { display: inline-block; padding: 6px 12px; border-radius: 99px; background: var(--red); color: var(--paper-3); font: 800 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.tl__title { margin-top: 12px; font: 400 clamp(22px, 2vw, 30px)/1 var(--font-display); text-transform: uppercase; }
.tl__text { margin-top: 10px; color: #3f3f3f; }
.tl__img { padding: 10px; transform: rotate(-2deg); }
.tl__item--r .tl__img { transform: rotate(2deg); }
@media (max-width: 800px) {
  .tl__list::before { left: 11px; transform: none; width: 12px; }
  .tl__item { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-left: 40px; }
  .tl__img, .tl__item--r .tl__img { transform: none; }
  .tl__item--r .tl__card { order: 0; }
}

/* ==== sections/ticker-band/ticker-band.css ==== */
.tick { border-block: var(--line) solid var(--ink); padding: clamp(14px, 1.8vw, 22px) 0 clamp(12px, 1.4vw, 18px); overflow: hidden; }
.tick .marquee__track { gap: 0; padding: 0; }
.tick__item { display: inline-flex; flex-direction: column; align-items: center; padding-inline: clamp(24px, 3vw, 48px); text-decoration: none; transform: skewX(var(--skew, 0deg)); }
.tick__item b { font: 400 clamp(48px, 7vw, 112px)/1.12 var(--font-display); text-transform: uppercase; white-space: nowrap; padding-top: .04em; }
.tick__item small { margin-top: .15em; font: 800 clamp(12px, 1.1vw, 16px)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.tick__item:hover b { color: var(--butter); }
.scheme-ink .tick__item:hover b, .scheme-paper .tick__item:hover b { color: var(--red); }

/* ==== sections/video-feature/video-feature.css ==== */
.vf__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.vf__poster { position: relative; display: block; width: 100%; padding: 12px; cursor: pointer; transform: rotate(-1.2deg); transition: transform .4s var(--ease-pop); }
.vf__poster:hover { transform: rotate(0) scale(1.01); }
.vf__media { aspect-ratio: 16 / 9; display: block; }
.vf__play { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; display: inline-flex; align-items: center; gap: 10px; padding: 16px 22px; border: var(--line) solid var(--ink); border-radius: 99px; background: var(--butter); color: var(--ink); font: 400 17px/1 var(--font-display); text-transform: uppercase; box-shadow: 0 5px 0 var(--ink); transition: transform .3s var(--ease-pop); }
.vf__poster:hover .vf__play { transform: scale(1.08) rotate(-3deg); }
.vf__eyebrow { color: var(--accent-text); margin-bottom: 14px; }
.vf__text { margin-top: 18px; color: var(--muted); }
.vf__btns { margin-top: 26px; }
@media (max-width: 860px) { .vf__grid { grid-template-columns: 1fr; } }