/* ============================================================================
   SKI FLEE — marketing site
   Sakura Chroma, extended from the game's title screen into a webpage.
   Tokens, type scale, motifs and the one shadow are copied VERBATIM from the
   game's chrome (apps/skifree/src/ui/sakura.ts + tokens.css.ts + fonts.css.ts).
   Fully self-hosted: no CDN, no external requests, no JavaScript.
   ========================================================================== */

/* ── Self-hosted fonts (mirrors apps/skifree/src/ui/fonts.css.ts) ──────────
   Google's latin + latin-ext woff2 slices per weight; latin-ext is lazy via
   unicode-range. */

/* Big Shoulders Display — the display voice (wordmark, headlines, stamps). */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("public/fonts/big-shoulders-display-700-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("public/fonts/big-shoulders-display-700-latin-ext.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("public/fonts/big-shoulders-display-900-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("public/fonts/big-shoulders-display-900-latin-ext.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Albert Sans — body + tracked-caps micro-labels. */
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("public/fonts/albert-sans-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("public/fonts/albert-sans-400-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("public/fonts/albert-sans-500-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("public/fonts/albert-sans-500-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("public/fonts/albert-sans-600-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("public/fonts/albert-sans-600-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("public/fonts/albert-sans-700-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("public/fonts/albert-sans-700-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — the data voice (score, spec rows, chips, page numbers). */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("public/fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("public/fonts/jetbrains-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("public/fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("public/fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens (verbatim from sakura.ts) ───────────────────────────────────── */
:root {
  --paper: #f1e6cb; /* primary surface (cream) */
  --paper-dk: #e5d6b0; /* recessed fills / second surface */
  --ink: #3a2516; /* text · borders · the hard shadow */
  --red: #e5392a; /* emphasis / attention (the one semantic accent) */
  --pink: #e54489;
  --orange: #f09131;
  --yellow: #f0bc2a;
  --green: #3d9f47;
  --blue: #3f8bc4;

  --muted: rgba(58, 37, 22, 0.62);
  --hairline: rgba(58, 37, 22, 0.22);
  --paper-soft: rgba(241, 230, 203, 0.82);

  /* The ONE shadow: hard offset, zero blur. */
  --shadow: 8px 8px 0 var(--ink);
  --shadow-sm: 5px 5px 0 var(--ink);

  --track-tight: -0.02em; /* display negative tracking */
  --track-caps: 0.16em; /* tracked-caps micro-labels */

  --font-display: "Big Shoulders Display", "Albert Sans", sans-serif;
  --font-body: "Albert Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --wrap: 1140px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  /* Guard against any accidental horizontal overflow at narrow widths. */
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.band--ink :focus-visible,
.foot :focus-visible {
  outline-color: var(--paper);
}

/* ── Paper grain (verbatim from sakura/paperTexture.ts) ─────────────────── */
/* isolation:isolate makes a stacking context so the z-index:-1 overlay sits
   ABOVE the surface background but BELOW its content — grain on paper, never
   speckling the text. */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(58, 37, 22, 0.55) 1px,
    transparent 1.6px
  );
  background-size: 4px 4px;
}

/* ── Layout primitives ──────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.band {
  padding-block: clamp(56px, 9vw, 116px);
}
.band--ink {
  background: var(--ink);
  color: var(--paper);
}
.band--paperdk {
  background: var(--paper-dk);
}
/* Hard ink rule between adjacent paper bands (the editorial divider). */
.band + .band:not(.band--ink):not(.foot) {
  border-top: 2px solid var(--ink);
}

/* ── Type helpers ───────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: clamp(11px, 1.4vw, 13px);
  line-height: 1.2;
  margin: 0;
}
.section-head {
  max-width: 46ch;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 6.2vw, 66px);
  line-height: 0.9;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 14px 0 0;
}
.section-title .accent {
  color: var(--red);
}
.lead {
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.5;
  max-width: 54ch;
  margin: 18px 0 0;
}

/* Label chips — the caption device from the App Store screenshot set: a small
   ink stamp above the big type ("THE CHASE" / "THE SKILL"). Section eyebrows
   wear it; the hero eyebrow stays a whisper. */
.section-head .eyebrow,
.closing .eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.09em;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 10px 4px;
}
.band--ink .section-head .eyebrow,
.closing .eyebrow {
  background: var(--yellow);
  color: var(--ink);
}

/* Caption bars — the stacked store-caption block (paper bar + red payoff bar,
   hard ink shadow), reused as the hero's message. */
.capstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 26px 0 0;
}
.capbar {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  font-size: clamp(26px, 4.4vw, 44px);
  line-height: 1;
  background: var(--paper);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 7px 14px 4px;
}
.capbar + .capbar {
  margin-top: -2.5px;
}
.capbar--red {
  background: var(--red);
  color: var(--paper);
}

/* ── Top strip ──────────────────────────────────────────────────────────── */
.topbar {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 13px;
}
.brandlockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brandlockup svg {
  width: 34px;
  height: 34px;
  flex: none;
}
.brandlockup b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.tag-pill {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: var(--ink);
  padding: 5px 11px;
  white-space: nowrap;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* One centred stack at every width. The band is the positioning context for
   the background video, and clips it — object-fit: cover always overflows one
   axis. The explicit paper background matters: the video is washed back with
   opacity, so it composites against THIS colour, not whatever is behind. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  text-align: center;
}
.hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Above both background layers. .grain already made the stacking context. */
  position: relative;
  z-index: 0;
}
/* The real app icon as a tilted stamp: ink border + the hard offset shadow. */
.hero-appicon {
  width: clamp(108px, 15vw, 148px);
  height: auto;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  transform: rotate(-4deg);
  margin-bottom: 18px;
}
.hero-eyebrow {
  color: var(--muted);
}
.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(76px, 21vw, 210px);
  line-height: 0.78;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 10px 0 0;
}
.hero-wordmark span {
  display: block;
}
.hero-hook {
  font-size: clamp(18px, 2.7vw, 26px);
  font-weight: 500;
  line-height: 1.38;
  max-width: 20ch;
  margin: 24px auto 0;
}
.hero-hook b {
  color: var(--red);
  font-weight: 700;
}
.hero-cta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

/* ── Hero background video ─────────────────────────────────────────────────
   Real gameplay washed back until it reads as animated paper texture rather
   than a video playing behind text.

   soft-light is doing the load-bearing work, and it is why this is not just an
   opacity. The run fades from and to black (the game's iris shutting at the
   end of the crash), and a plain opacity wash — or a luminosity blend — lets
   that black REPLACE the paper: measured against the band above it, the hero
   dropped ~0.28 in relative luminance on the loop seam and went visibly muddy
   grey-brown next to the cream topbar. soft-light instead MODULATES the paper:
   dark pixels darken it a little, light pixels lift it a little, and the
   result structurally cannot stray far from the token. Same measurement with
   the values below: ~0.05 drop at the darkest frame of the whole 76 s run.

     filter   pre-grades the clip so its tonal range straddles soft-light's
              neutral instead of bottoming out. contrast(0.5) halves the range,
              brightness(1.3) recentres it on the light side.
     opacity  wash strength — how much of the graded clip reaches the blend.

   Layer order inside .grain's stacking context: video (−2) → grain (−1) →
   copy. The grain therefore sits ON the footage, which is what keeps the band
   reading as paper rather than as a screen. Decorative: aria-hidden and
   unfocusable in the markup, pointer-events off here. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: contrast(0.5) brightness(1.3);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* App Store badge — Apple's OFFICIAL artwork, self-hosted in public/assets/.
   Deliberately the one un-styled element on the page: Apple's Identity
   Guidelines forbid redrawing it, recolouring it, or adding effects, so it gets
   no ink border, no hard shadow, and no hover lift. Only size and the required
   clear space (>= 1/10 of the badge height on every side) are ours to set. The
   black artwork sits on paper, the white one on the ink band. */
.storebadge {
  display: inline-block;
  line-height: 0;
  padding: 6px;
  text-decoration: none;
}
.storebadge img {
  display: block;
  width: 180px;
  height: auto;
}
.storebadge:focus-visible {
  outline: 2.5px solid var(--red);
  outline-offset: 2px;
}
.badge-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.band--ink .badge-note {
  color: var(--paper-soft);
}

/* Facts ribbon — mono, the game's data voice. */
.facts {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.chip {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: var(--ink);
  padding: 6px 12px;
  white-space: nowrap;
}
.chip[data-c="blue"] {
  background: var(--blue);
}
.chip[data-c="green"] {
  background: var(--green);
}
.chip[data-c="orange"] {
  background: var(--orange);
}
.chip[data-c="pink"] {
  background: var(--pink);
}

/* ── Chase band (the signature: the yeti hunt, in flat Sakura shapes) ────── */
.chase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.chase-head .eyebrow {
  color: var(--yellow);
}
.chase-head .section-title {
  color: var(--paper);
  max-width: 15ch;
}
.chase-lead {
  color: var(--paper-soft);
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0;
}
/* Phones on the ink band wear the scene-panel treatment: paper border + the
   translucent-paper hard shadow (ink-on-ink shadows would vanish). */
.runshots .phone {
  border-color: var(--paper);
  box-shadow: 8px 8px 0 rgba(241, 230, 203, 0.26);
}

/* ── The run deck (screenshots ARE the story section) ───────────────────────
   Four captioned store shots cascade DOWNHILL left→right — drop-in at the top
   of the slope, game over at the bottom — each tilted like a dealt card; the
   real yeti peeks over the top of the run behind shot 01. */
.runshots .runwrap {
  max-width: min(1400px, 94vw);
}
.rundeck {
  position: relative;
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 36px);
  align-items: start;
}
.rundeck .shot {
  position: relative;
  z-index: 1;
}
.rundeck .shot:nth-of-type(1) {
  transform: rotate(-2deg);
}
.rundeck .shot:nth-of-type(2) {
  margin-top: 64px;
  transform: rotate(1.6deg);
}
.rundeck .shot:nth-of-type(3) {
  margin-top: 128px;
  transform: rotate(-1.4deg);
}
.rundeck .shot:nth-of-type(4) {
  margin-top: 192px;
  transform: rotate(2deg);
}
/* The yeti peeks over the top edge of shot 01, BEHIND the phone (z-index 0).
   --duck is how far it drops out of sight at rest; the peek keyframes bring it
   back to roughly this static pose at the top of the rise. It's a custom
   property so each breakpoint can scale the travel with the art (the
   responsive block re-parks top/left but the keyframes still apply). */
.rundeck-yeti {
  position: absolute;
  width: clamp(150px, 15vw, 220px);
  top: -78px;
  left: -30px;
  z-index: 0;
  --duck: 18px;
  transform: rotate(-5deg);
}
.shot {
  display: flex;
  flex-direction: column;
}
/* The phone: strict rectangle at the real iPhone aspect ratio (1170×2532,
   9:19.5). A real screenshot PNG drops straight in — see README + the <img>. */
.phone {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
  background: var(--paper-dk);
  overflow: hidden;
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder face, shown until a real screenshot <img> is dropped in. */
.phone .ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 13px,
      rgba(58, 37, 22, 0.05) 13px 26px
    ),
    var(--paper-dk);
}
.phone .ph .dim {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.phone .ph .ph-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 0.98;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--ink);
}
.phone .ph .badge-ph {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: 10px;
  color: var(--paper);
  background: var(--ink);
  padding: 4px 9px;
}

/* ── Closing CTA ────────────────────────────────────────────────────────── */
.closing {
  text-align: center;
}
.closing .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.closing .section-title {
  max-width: 18ch;
}
.closing .closing-line {
  margin: 18px 0 0;
  color: var(--paper-soft);
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.5;
}
.closing .storebadge {
  margin-top: 28px;
}
.closing .badge-note {
  margin-top: 12px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: var(--paper);
}
.foot .wrap {
  padding-block: clamp(48px, 7vw, 84px);
}
.foot-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.foot-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 12vw, 116px);
  line-height: 0.82;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}
.foot-word small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--paper-soft);
  margin-top: 14px;
}

.foot-links {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(241, 230, 203, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
}
.foot-links a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 230, 203, 0.4);
  padding-bottom: 1px;
}
.foot-links a:hover {
  border-bottom-color: var(--paper);
}
.foot-copy {
  margin-left: auto;
  color: var(--paper-soft);
}

/* ── Prose pages (privacy / support) ────────────────────────────────────── */
.prose {
  max-width: 720px;
}
.prose .eyebrow {
  color: var(--red);
}
.prose h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 8vw, 68px);
  line-height: 0.9;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 12px 0 0;
}
.prose .updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 12px;
}
.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 44px 0 0;
  padding-left: 16px;
  border-left: 8px solid var(--red);
}
.prose p,
.prose li {
  font-size: 16.5px;
  line-height: 1.6;
}
.prose p {
  margin: 14px 0 0;
  max-width: 66ch;
}
.prose ul {
  margin: 14px 0 0;
  padding-left: 20px;
  max-width: 66ch;
}
.prose li {
  margin-top: 6px;
}
.prose .callout {
  margin: 22px 0 0;
  background: var(--paper-dk);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}
.prose .callout p {
  margin: 0;
  font-weight: 500;
}
.prose a {
  text-decoration: none;
  border-bottom: 1.5px solid var(--red);
  padding-bottom: 1px;
}
.prose .todo {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.backhome {
  display: inline-block;
  margin-top: 48px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: 12px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .rundeck {
    grid-template-columns: repeat(2, 1fr);
  }
  .rundeck .shot:nth-of-type(2) {
    margin-top: 44px;
  }
  .rundeck .shot:nth-of-type(3) {
    margin-top: 0;
  }
  .rundeck .shot:nth-of-type(4) {
    margin-top: 44px;
  }
  .rundeck-yeti {
    width: 130px;
    top: -64px;
    left: -8px;
    --duck: 14px;
  }
}
@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  /* Phones: ONE column — each store shot near full width instead of two
     thumbnails (owner call 2026-07-25). Stagger collapses; tilts stay. */
  .rundeck {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .rundeck .shot:nth-of-type(n) {
    margin-top: 0;
  }
  .rundeck .shot {
    max-width: min(80vw, 330px);
    width: 100%;
    margin-inline: auto;
  }
  /* The yeti anchors to the CENTERED column now, not the deck's left edge:
     the shot is ≤330px wide centered, so its left edge sits at
     calc(50% − 165px); park the yeti just outside-left of that. */
  .rundeck-yeti {
    left: calc(50% - 188px);
    top: -60px;
  }
  .chase-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .foot-copy {
    margin-left: 0;
    width: 100%;
  }
  .tag-pill {
    display: none;
  }
}
/* ≤380px: the 560px one-column rules already apply; only the width cap
   tightens (and the yeti tracks the narrower column). */
@media (max-width: 380px) {
  .rundeck .shot {
    max-width: 280px;
  }
  .rundeck-yeti {
    left: calc(50% - 165px);
  }
}

/* ── Motion: deliberate and minimal; fully off under reduced-motion ─────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-appicon,
  .hero-eyebrow,
  .hero-wordmark,
  .capstack,
  .hero-hook,
  .hero-cta,
  .facts {
    animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .hero-eyebrow {
    animation-delay: 0.05s;
  }
  .hero-wordmark {
    animation-delay: 0.08s;
  }
  .capstack {
    animation-delay: 0.14s;
  }
  .hero-hook {
    animation-delay: 0.2s;
  }
  .hero-cta {
    animation-delay: 0.22s;
  }
  .facts {
    animation-delay: 0.3s;
  }

  /* The peek: ~4 s ducked behind shot 01, a snappy rise, a curious head-tilt,
     a beat held out in the open, then a softer duck back down. Transform only
     (translateY + the base −5° rotate), so nothing reflows and the shots keep
     their z-order over it. */
  .rundeck-yeti {
    animation: yeti-peek 7s infinite;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes yeti-peek {
  /* Ducked — the long rest. */
  0%,
  58% {
    transform: translateY(var(--duck)) rotate(-5deg);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Up and out, overshooting the tilt a touch. */
  65% {
    transform: translateY(-6px) rotate(-8deg);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* The curious head-tilt the other way. */
  70% {
    transform: translateY(-6px) rotate(-2deg);
    animation-timing-function: ease-in-out;
  }
  /* Hold the beat. */
  82% {
    transform: translateY(-8px) rotate(-6.5deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.35);
  }
  100% {
    transform: translateY(var(--duck)) rotate(-5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .feature {
    transition: none;
  }
  /* Back to the original static pose — no duck, no peek. */
  .rundeck-yeti {
    animation: none;
    transform: rotate(-5deg);
  }
}