/* Hallmark · genre: playful · macrostructure: Split Diptych · theme: Hum
 * tone: playful/loud · anchor hue: multi (pear 95 · sky 235 · coral 18) · paper band: light · display: rounded-sans
 * nav: N7 Brutal slab (rounded variant) · footer: Ft8 Marquee scroll
 * hero: H2 Split Diptych knobs → ratio=5/7, right side=exchange figure, divider=negative space
 * features: F4 Step sequence (numbering=01/02/03, vertical stack, accent per step)
 * facts:    F3 Tabular spec sheet (2-col key/value, rule every row, tabular nums)
 * enrichment: hero background — Tier-B hand-built SVG in market green (a chart climbing
 *   behind the fold,
 *   two runs crossfading so the climb never resets on screen, plus flickering motes).
 *   Requested by the brief; generated video was considered and rejected — it cannot loop
 *   without a seam and would cost megabytes. Cut-out artwork stays the hero image.
 * motion (6 primitives): press/lift · coin pulse-run (the character moment) · counter tick-up
 *   · footer marquee · chart climb · mote flicker. Over Hallmark's 3-primitive cap by two,
 *   deliberately: the background field is the ask. All six freeze under reduced motion.
 * pre-emit critique: P5 H5 E5 S5 R4 V4
 * contrast: pass (40–41) — text measured over the live background at 16.5:1 (h1) and
 *   12.9:1 (lede); the background mask keeps the text side on clean paper
 * slop: pass (42–45) — gate 45: the chart is motivated (the number-go-up joke this coin
 *   is named for), not an unanchored ornament · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 * verified in Chrome at 320 / 375 / 414 / 768 / 1280 / 1440 / 1920 — no horizontal scroll,
 * hero fits 1280×800 without scrolling, keyboard focus rings on every affordance.
 */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-body);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.05;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-ink); text-decoration: none; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-input);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-sticky);
  background: var(--color-accent); color: var(--color-ink);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill);
  font-weight: 600;
  transform: translateY(-250%);
  transition: transform var(--dur-short) var(--ease-out);
}
.skip:focus { transform: translateY(0); }

.mono-label {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2);
}

.tnum { font-variant-numeric: tabular-nums; }

.link {
  color: var(--color-accent-2-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-micro) var(--ease-out);
}
.link:hover { color: var(--color-ink); }

/* the highlighter follows the text across line breaks */
.hl {
  font-style: normal;
  font-weight: 600;
  color: inherit;
  background-image: linear-gradient(var(--hl, var(--color-accent)) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 0.58em;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.14em;
}
.hl--sky { --hl: var(--hl-sky); }

/* ── Shell + bands (one width model everywhere) ───────────────── */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--section-gap) var(--page-gutter);
}
.band { max-width: none; padding-inline: 0; }
.band > * {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--section-gap) var(--page-gutter);
}
.band--pear  { background: var(--tint-pear); }
.band--sky   { background: var(--tint-sky-soft); }

/* ── Button system (Hum: the press is the feedback) ───────────── */
.btn {
  --btn-face: var(--color-accent);
  --btn-ink:  var(--color-ink);
  --btn-edge: var(--color-accent-deep);
  --btn-cast: var(--cast-pear);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  padding: 0.8rem 1.4rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--btn-ink);
  background: var(--btn-face);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  box-shadow: 0 4px 0 0 var(--btn-edge), 0 6px 12px -3px var(--btn-cast);
  transform: translateY(0);
  transition: transform var(--dur-micro) var(--ease-press),
              box-shadow var(--dur-micro) var(--ease-press),
              background-color 160ms var(--ease-out);
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--btn-edge), 0 12px 22px -4px var(--btn-cast); }
.btn:active { transform: translateY(3px);  box-shadow: 0 1px 0 0 var(--btn-edge), 0 2px 6px -2px var(--btn-cast); transition-duration: 70ms; }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
  transform: none; box-shadow: 0 4px 0 0 var(--btn-edge);
}

.btn--lg { padding: 1rem 1.75rem; font-size: var(--text-md); }
.btn--sm { padding: 0.55rem 1rem; font-size: var(--text-sm); min-height: 40px; }

.btn--outline {
  --btn-face: var(--color-paper);
  --btn-ink:  var(--color-ink);
  --btn-edge: var(--color-ink);
  --btn-cast: var(--cast-ink);
  box-shadow: inset 0 0 0 var(--rule-slab) var(--color-ink), 0 3px 0 0 var(--btn-edge), var(--shadow-contact);
}
.btn--outline:hover {
  background: var(--tint-sky);
  box-shadow: inset 0 0 0 var(--rule-slab) var(--color-ink), 0 5px 0 0 var(--btn-edge), var(--shadow-ambient);
}
.btn--outline:active {
  box-shadow: inset 0 0 0 var(--rule-slab) var(--color-ink), 0 1px 0 0 var(--btn-edge);
}
.btn--outline[disabled], .btn--outline[aria-disabled="true"] {
  box-shadow: inset 0 0 0 var(--rule-slab) var(--color-ink), 0 3px 0 0 var(--btn-edge);
}

.btn--soft {
  --btn-face: var(--color-paper);
  --btn-edge: var(--color-rule);
  --btn-cast: var(--cast-ink);
  box-shadow: 0 3px 0 0 var(--btn-edge), var(--shadow-contact);
}
.btn--soft:hover { background: var(--color-paper-2); }

/* ── N7 Brutal slab, rounded ──────────────────────────────────── */
.slab {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-paper);
  border-bottom: var(--rule-slab) solid var(--color-ink);
}
.slab__inner {
  max-width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--page-gutter);
}
.mark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-lg); letter-spacing: 0.01em;
  color: var(--color-ink);
}
.mark__coin {
  width: 0.85em; height: 0.85em; border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-accent-deep);
}
.slab__nav { margin-left: auto; }
.slab__nav ul {
  display: flex; gap: var(--space-lg);
  list-style: none; margin: 0; padding: 0;
}
.slab__nav a {
  font-size: var(--text-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  white-space: nowrap;
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-slab) solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.slab__nav a:hover  { border-bottom-color: var(--color-accent-deep); }
.slab__nav a:active { color: var(--color-accent-ink); border-bottom-color: var(--color-accent-ink); }
.slab__nav a[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.slab__cta { margin-left: auto; }
.slab__nav + .slab__cta { margin-left: var(--space-md); }

@media (max-width: 44rem) {
  .slab__nav { display: none; }
}
@media (max-width: 30rem) {
  .btn--buy { width: 100%; font-size: var(--text-base); padding-inline: var(--space-md); }
}
@media (max-width: 26rem) {
  .mark { font-size: var(--text-base); }
  .ca { padding-left: var(--space-sm); gap: var(--space-xs); }
  .ca__value { font-size: var(--text-xs); }
  .btn--sm { padding: 0.5rem 0.8rem; font-size: var(--text-xs); }
  .btn--buy { padding-inline: var(--space-sm); }
}


/* ── Hero background · a chart climbing behind the fold ───────── */
.hero-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-ink) 52%, transparent 94%);
  mask-image: linear-gradient(to bottom, var(--color-ink) 52%, transparent 94%);
}
.hero-bg__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Stacked hero: the viewport is taller than it is wide, so the chart becomes a
   band across the top instead of a stretched zig-zag down the whole fold. */
@media (max-width: 60rem) {
  .hero-bg { bottom: auto; height: clamp(190px, 52vw, 340px); }
  .hero-bg__svg { height: 100%; }
}
/* mask stops — luminance masking: white shows, black hides */
.hero-bg__stop { stop-color: var(--color-mask-on); }

.hero-bg__grid   { stroke: var(--color-rule); stroke-width: 1.5; opacity: 0.6; vector-effect: non-scaling-stroke; }
.hero-bg__area   { fill: var(--color-market-soft); opacity: 0.13; }
.hero-bg__line   { fill: none; stroke: var(--color-market); stroke-width: 3.5; vector-effect: non-scaling-stroke;
                   stroke-linejoin: round; stroke-linecap: round; opacity: 0.5; }
.hero-bg__candle { fill: var(--color-market); opacity: 0.28; }
.hero-bg__dot    { fill: var(--color-market); opacity: 0.35; }

/* two identical runs, half a cycle apart — the climb never resets on screen */
.hero-bg__run { opacity: 0; animation: chart-climb 26s linear infinite; }
.hero-bg__run--b { animation-delay: -13s; }
@keyframes chart-climb {
  0%   { transform: translate(0, 46px);        opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate(-700px, -46px); opacity: 0; }
}

.hero-bg__mote {
  fill: var(--color-accent-2);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mote-flicker var(--t, 5s) var(--ease-in-out) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes mote-flicker {
  0%, 100% { opacity: 0;    transform: translateY(0) scale(0.55); }
  50%      { opacity: 0.34; transform: translateY(-9px) scale(1); }
}

/* ── Hero · H2 split diptych ──────────────────────────────────── */
.hero {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-xl);
  min-width: 0;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.hero > * { min-width: 0; }
.hero__display {
  font-size: var(--text-display);
  font-weight: 700;
  max-width: 12ch;
}
.lede {
  margin-top: var(--space-lg);
  max-width: 46ch;
  font-size: var(--text-md);
  color: var(--color-ink-body);
}
.hero__actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm);
  min-width: 0;
  margin-top: var(--space-xl);
}

.quiet-link {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
  color: var(--color-ink);
  white-space: nowrap;
  padding-block: var(--space-sm);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-slab);
  text-decoration-color: var(--color-accent-deep);
  text-underline-offset: 4px;
  transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out);
}
.quiet-link:hover  { color: var(--color-accent-ink); text-decoration-color: var(--color-accent-ink); }
.quiet-link:active { color: var(--color-accent-ink); }
.quiet-link[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.quiet-link span { display: inline-block; transition: transform var(--dur-short) var(--ease-out); }
.quiet-link:hover span { transform: translateX(3px); }

/* contract chip — hidden until an address is set on <body data-contract> */
.ca {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  background: var(--color-paper-2);
  border-radius: var(--radius-pill);
  max-width: 100%;
}
.ca__label {
  font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink-2);
}
.ca__value {
  font-family: var(--font-label); font-size: var(--text-sm);
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca__value--full { white-space: normal; overflow-wrap: anywhere; }
.ca__copy {
  position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-ink); background: var(--color-paper);
  border: 0; border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm); min-height: 36px; cursor: pointer;
  box-shadow: var(--shadow-contact);
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-press);
}
.ca__copy:hover  { background: var(--color-accent); }
.ca__copy:active { transform: translateY(1px); }
.ca__copy[disabled] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.ca__done {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-ink);
  border-radius: var(--radius-pill);
  opacity: 0; transition: opacity var(--dur-micro) var(--ease-out);
}
.ca__copy[data-state="done"] .ca__done { opacity: 1; }
.ca__copy[data-state="error"] { background: var(--tint-coral-deep); }

/* ── The exchange figure ──────────────────────────────────────── */
.swap {
  margin: 0;
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  align-items: center;
}
.swap__tile {
  display: grid; justify-items: center; gap: var(--space-sm);
  width: 100%;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--radius-tile);
  transition: transform var(--dur-short) var(--ease-spring), box-shadow var(--dur-short) var(--ease-out);
}
.swap__tile--dog {
  background: var(--tint-pear-soft);
  box-shadow: var(--shadow-contact), var(--shadow-ambient);
}
.swap__tile--cat {
  background: var(--tint-sky);
  box-shadow: var(--shadow-contact), var(--shadow-ambient);
}
.swap__tile--dog img { width: min(100%, 300px); }
.swap__tile--cat img { width: min(100%, 215px); }
.swap__cap { display: grid; justify-items: center; gap: var(--space-3xs); text-align: center; }
.swap__cap b {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
  color: var(--color-ink); letter-spacing: -0.01em;
}

@media (hover: hover) and (pointer: fine) {
  .swap__tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-contact), var(--shadow-lift); }
  .swap__tile--cat:hover { transform: translateY(-4px) rotate(-3deg); }
}

/* the rail — vertical on phones, horizontal from 48rem up */
.rail {
  position: relative;
  display: grid; justify-items: center; gap: var(--space-sm);
  width: 100%;
  padding-block: var(--space-xs);
}
.rail__line {
  width: 0; height: 4.75rem;
  border-left: var(--rule-slab) dashed var(--color-accent-deep);
}
.rail__coin {
  position: absolute;
  left: 50%;
  top: calc(1.15rem + var(--i) * 1.7rem);
  width: 15px; height: 15px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-accent-deep);
  transform: translate(-50%, -50%);
  animation: coin-run 1900ms var(--ease-snap) infinite;
  animation-delay: calc(var(--i) * 260ms);
}
@keyframes coin-run {
  0%, 100% { opacity: 0.22; transform: translate(-50%, -50%) scale(0.65); }
  42%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }
}
.rail__tag {
  font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--color-ink);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  text-align: center;
}

@media (min-width: 48rem) {
  .swap { grid-template-columns: minmax(0, 1.15fr) minmax(7rem, 0.6fr) minmax(0, 1fr); }
  .swap__tile--cat { transform: rotate(-3deg) translateY(var(--space-md)); }
  .rail { padding-block: 0; z-index: var(--z-raised); }
  .rail__line { width: 100%; height: 0; border-left: 0; border-top: var(--rule-slab) dashed var(--color-accent-deep); }
  .rail__coin { top: 1px; left: calc(6% + var(--i) * 32%); }
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-bottom: var(--space-3xl);
  }
}

/* ── Holder rewards ───────────────────────────────────────────── */
.rewards { display: grid; gap: var(--space-xl); }
.rewards__title { font-size: var(--text-3xl); font-weight: 700; }
.rewards__lede { margin-top: var(--space-md); max-width: 54ch; }
.rewards__figure {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0 var(--space-md);
  margin-top: var(--space-lg);
}
.numeral {
  font-family: var(--font-display);
  font-size: var(--text-numeral);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--color-accent-3-deep);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transition: transform var(--dur-short) var(--ease-spring);
}
.numeral[data-state="landed"] { transform: scale(1.06); }
.numeral__unit {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  color: var(--color-accent-3-deep);
  margin-left: calc(var(--space-md) * -1 + 0.15rem);
}
.numeral__caption {
  font-size: var(--text-base);
  color: var(--color-ink-body);
  max-width: 22ch;
  line-height: 1.4;
}

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-md);
  border-top: var(--rule-slab) solid var(--color-accent-deep);
  padding-top: var(--space-lg);
}
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background: color-mix(in oklch, var(--step-tint) 8%, var(--color-paper));
  box-shadow: var(--shadow-contact);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-spring);
}
.step__no {
  font-family: var(--font-label); font-size: var(--text-sm);
  color: var(--step-ink, var(--color-accent-ink)); font-weight: 500;
  grid-row: span 2;
  padding-top: 0.15em;
}
.step__title { font-size: var(--text-lg); font-weight: 700; }
.step p { font-size: var(--text-base); }

.step:nth-child(1) { --step-tint: var(--color-accent);   --step-ink: var(--color-accent-ink); }
.step:nth-child(2) { --step-tint: var(--color-accent-2); --step-ink: var(--color-accent-2-deep); }
.step:nth-child(3) { --step-tint: var(--color-accent-3); --step-ink: var(--color-accent-3-deep); }

@media (hover: hover) and (pointer: fine) {
  .step:hover {
    background: color-mix(in oklch, var(--step-tint) 16%, var(--color-paper));
    transform: translateY(-3px);
    box-shadow: var(--shadow-contact), var(--shadow-ambient);
  }
}

.fineprint {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: 62ch;
}

@media (min-width: 60rem) {
  .rewards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
  .rewards__head { grid-column: 1; }
  .steps { grid-column: 2; grid-row: 1 / span 2; }
  .fineprint { grid-column: 1; align-self: end; }
}

/* ── The facts · tabular spec sheet ───────────────────────────── */
.facts__title { font-size: var(--text-2xl); font-weight: 700; max-width: 16ch; }
.spec { margin: var(--space-xl) 0 0; }
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.spec__row:last-of-type { border-bottom: var(--rule-hair) solid var(--color-rule); }
.spec dt {
  font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--color-ink-2);
}
.spec dd {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
@media (min-width: 40rem) {
  .spec__row { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; }
}

.close {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.close__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.close__line {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

/* ── Ft8 Marquee footer ───────────────────────────────────────── */
.foot { border-top: var(--rule-slab) solid var(--color-ink); background: var(--color-accent); }
.foot__marquee { overflow: hidden; }
.foot__track {
  display: flex; gap: var(--space-2xl);
  white-space: nowrap;
  padding-block: var(--space-md);
  animation: foot-marquee 34s linear infinite;
}
.foot__track span {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: 0.06em;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--color-ink);
}
@keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.foot:hover .foot__track,
.foot:focus-within .foot__track { animation-play-state: paused; }

.foot__meta {
  display: grid; gap: var(--space-2xs);
  background: var(--color-paper);
  border-top: var(--rule-slab) solid var(--color-ink);
  max-width: none;
  padding-block: var(--space-lg);
  font-size: var(--text-sm);
}
.foot__meta > * { max-width: var(--shell); margin-inline: auto; width: 100%; }
.foot__note { color: var(--color-ink-2); }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .rail__coin { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .foot__track { animation: none; }
  .swap__tile:hover, .step:hover { transform: none; }
  .swap__tile--cat:hover { transform: rotate(-3deg) translateY(var(--space-md)); }
  .hero-bg__run { animation: none; opacity: 1; transform: none; }
  .hero-bg__run--b { display: none; }
  .hero-bg__mote { animation: none; opacity: 0.22; transform: none; }
}