/* ════════════════════════════════════════════════════════════════════════
   REVLO — the shared site layer (homepage + Blog), 2026-10-22.
   The Showroom (docs/DESIGN.md "The Showroom", tokens `theme.showroom`)
   on the web, plus the App Store v5 screenshots' voice: Archivo Black
   Expanded for the big lines (marketing/app-store/v5 f1–f6: weight 900,
   stretch 125 %, -0.02em), Space Mono for everything the app itself says.
   The docs pages (privacy, terms, …) keep styles.css untouched.
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Archivo, latin subset, the one cut the screenshots use (900 / 125 %).
   Google Fonts' latin file, self-hosted — 13.6 KB vs the 658 KB variable TTF. */
@font-face {
  font-family: "Archivo Expanded";
  src: url("/fonts/Archivo-Black-Expanded-latin.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
  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;
}

:root {
  --ink: #F3F4F6;
  --muted: #9298A0;
  --faint: #565B62;
  --titanium: #C7CBD1;
  --titanium-dim: #7E848C;

  /* rarity ink — theme.rarityInk, the 2026-08-07 final ladder */
  --r-common: #6E7A86;
  --r-uncommon: #79ABC7;
  --r-rare: #37B463;
  --r-elite: #3D82EE;
  --r-exotic: #A873E6;
  --r-legendary: #F0B23E;
  --r-mythic: #FF2D23;

  /* the Showroom, verbatim from styles.css's docs block */
  --ground: linear-gradient(180deg, #1D2025 0%, #17191D 45%, #121316 100%);
  --pinstripe: repeating-linear-gradient(115deg, transparent 0 12px, rgba(255, 255, 255, 0.0086) 12px 14px);
  --plate: linear-gradient(112deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.055) 40%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(165deg, #2B2F36 0%, #1A1D21 52%, #131518 100%);
  --plate-shade: inset 0 1.5px 0 rgba(255, 255, 255, 0.17), inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.55), 0 26px 40px -12px rgba(0, 0, 0, 0.9);
  --stand: 0 2px 0 rgba(0, 0, 0, 0.8), 0 8px 12px -4px rgba(0, 0, 0, 0.7);
  --key: linear-gradient(180deg, #2E3239 0%, #1C1F24 100%);
  --key-light: inset 0 1px 0 rgba(255, 255, 255, 0.17);
  --titanium-key: linear-gradient(180deg, #F1F3F5 0%, #C3C8CE 100%);
  --carved: linear-gradient(180deg, #17191D 0%, #1D2025 100%);
  --carved-shade: inset 0 2px 5px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.08);
  --seam: rgba(0, 0, 0, 0.55);
  --seam-lip: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --emboss: 0 2px 0 rgba(0, 0, 0, 0.85);

  --mono: "Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --display: "Archivo Expanded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --read: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 66px; /* the floating plate: 12 from the top + 8 + the 38px key + 8 */
  --max: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.site {
  position: relative;
  min-height: 100vh;
  background: #121316;
  color: var(--ink);
  font-family: var(--mono);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* The room — fixed to the screen like the app's, so a long page never
   stretches the ramp flat. */
body.site::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--pinstripe), var(--ground);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: #121316; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Type ──────────────────────────────────────────────────────────────── */
.eyebrow {
  font-weight: 700; font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--titanium-dim);
}
.display {
  font-family: var(--display); font-weight: 900; font-stretch: 125%;
  line-height: 0.98; letter-spacing: -0.02em; color: #fff;
  text-shadow: var(--emboss);
}
.display > span { display: block; }
/* The screenshots' second line wears a tier's ink, top-lit like the cards. */
.ink { background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85));
  /* A text-clipped gradient paints only inside the line box. Archivo's
     descenders (g, y, ?) reach 0.21em below the baseline but the 0.98 line box
     ends 0.16–0.17em below it (measured in the browser 10-22), which cut the
     tails off "garage." / "is yours?". Grow the painted box by 0.08em and take
     it back with the margin, so nothing moves. */
  padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ink--exotic { background-image: linear-gradient(180deg, #C9A3F4 0%, var(--r-exotic) 100%); }
.ink--mythic { background-image: linear-gradient(180deg, #FF6B5F 0%, var(--r-mythic) 100%); }
.ink--legendary { background-image: linear-gradient(180deg, #FFD27A 0%, var(--r-legendary) 100%); }
.ink--elite { background-image: linear-gradient(180deg, #7FAEF7 0%, var(--r-elite) 100%); }
.ink--rare { background-image: linear-gradient(180deg, #6FD594 0%, var(--r-rare) 100%); }

.lede { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; color: var(--muted); max-width: 46ch; }
.lede b { color: var(--ink); }
.keep { white-space: nowrap; } /* a phrase that never breaks across lines */

/* ── Keys — one bevel, one light (the app's Button `showroom`) ─────────── */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; border: 0;
  color: var(--ink); background: var(--key); box-shadow: var(--key-light), var(--stand);
  transition: filter 0.18s var(--ease), transform 0.18s var(--ease);
}
.key:hover { filter: brightness(1.08); }
.key:active { transform: translateY(1px); }
.key--ti { color: #0E0F11; background: var(--titanium-key); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--stand); }
.key--sm { min-height: 38px; padding: 0 16px; font-size: 11px; }
.key svg { fill: currentColor; flex: 0 0 auto; }
.key .apl { width: 14px; height: 17px; margin-top: -2px; }
.key .gpl { width: 15px; height: 15px; }
.key .arw { transition: transform 0.25s var(--ease); }
.key:hover .arw { transform: translateX(3px); }

.stores { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Nav — a floating plate exactly as wide as the page's content (Danny
   10-22): the nav box is a .wrap (same max width, same gutter), so the plate
   inside it lines up with every section's edges. Logo left, doors right. One
   bevel, one light: the same plate recipe as every panel on the page. ──── */
.nav {
  position: fixed; z-index: 30; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}
.nav__row {
  display: flex; align-items: center; gap: 28px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  background: rgba(30, 33, 38, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 2px 0 rgba(0, 0, 0, 0.55), 0 18px 30px -12px rgba(0, 0, 0, 0.85);
}
.nav__brand { display: inline-flex; align-items: center; }
.nav__brand img { width: 26px; height: 26px; }
.nav__links { display: flex; gap: 24px; margin-left: auto; }
.nav__links a { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); transition: color 0.18s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.wordmark { font-weight: 700; font-size: 13px; letter-spacing: 0.43em; text-transform: uppercase; text-shadow: var(--emboss); }
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__row { gap: 16px; padding-left: 14px; }
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot { position: relative; overflow: hidden; padding: 56px 0 0; border-top: 1px solid var(--seam); box-shadow: var(--seam-lip); }
/* The wordmark sits on the page's bottom edge, which crops it (see build.mjs). */
.foot__mark { margin-top: 56px; }
.foot__mark svg { display: block; width: 100%; height: auto; overflow: hidden; }
.foot__mark text { font-family: var(--display); font-weight: 900; font-stretch: 125%; }
/* Brand left (mark, stores), three labelled link columns right, a base
   hairline for the small print, then the wordmark. */
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; }
.foot__brand { display: grid; gap: 18px; justify-items: start; align-content: start; }
.foot__logo img { display: block; width: 32px; height: 32px; }
.foot__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* the homepage's last panel already carries both stores, right above */
.home .foot__stores { display: none; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(96px, auto)); gap: 32px clamp(32px, 6vw, 88px); }
.foot__col { display: grid; gap: 12px; align-content: start; }
/* headers: the display face, bright; links: light mono, muted — weight AND tone part them */
.foot__head { font-family: var(--display); font-size: 12px; font-weight: 900; font-stretch: 125%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.foot__col a { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.foot__col a:hover { color: var(--ink); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--seam); box-shadow: var(--seam-lip); }
.foot__base p { font-size: 11px; letter-spacing: 0.08em; color: var(--faint); }
@media (max-width: 560px) {
  /* one centre line on a phone, like every section above it */
  .foot__top { flex-direction: column; align-items: center; text-align: center; }
  .foot__brand { justify-items: center; }
  .foot__stores { justify-content: center; }
  .foot__cols { grid-template-columns: repeat(3, auto); gap: 24px 28px; }
  .foot__base { flex-direction: column; align-items: center; text-align: center; }
}

/* ── Scroll reveal (hidden only when JS runs; see home.js) ─────────────── */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Blog post cards (homepage "From the garage" + /blog) ────────── */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.post-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: 20px; overflow: hidden;
  background: var(--plate); box-shadow: var(--plate-shade);
  transition: transform 0.35s var(--ease-out), filter 0.2s var(--ease);
}
.post-card:hover { transform: translateY(-4px); filter: brightness(1.05); }
.post-card__cover { display: block; margin: -22px -22px 6px; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--seam); }
.post-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card__meta { font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--titanium-dim); }
.post-card__title { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 20px; line-height: 1.12; letter-spacing: -0.01em; color: #fff; text-shadow: var(--emboss); }
.post-card__desc { font-size: 13px; line-height: 1.65; color: var(--muted); }
.post-card__go { margin-top: auto; padding-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.post-card__go .arw { display: inline-block; transition: transform 0.25s var(--ease); }
.post-card:hover .post-card__go .arw { transform: translateX(4px); }

/* ── The document pages under the shared nav (wrapped by build.mjs) ────── */
/* Under the fixed nav: 62 + 20 + the doc's own 28 = 110, the Blog's top. */
.has-nav main { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 20px); }
.has-nav .foot { position: relative; z-index: 1; }

/* ── Phone pass (Danny 10-22: most visitors are on a phone) ──────────────
   Touch targets meet Apple's 44 pt minimum (HIG); no text under 11 px.
   Small keys keep their look; an invisible skirt grows the touch area. */
h1, h2, h3, .lede, .article__dek { text-wrap: balance; }
p, li { text-wrap: pretty; }
.key--sm { position: relative; }
.key--sm::after { content: ""; position: absolute; inset: -3px 0; }
.nav__brand, .foot__logo { padding: 9px; margin: -9px; }
.back { display: inline-block; padding: 13px 0; margin: -13px 0; }
.post-card__meta { font-size: 11px; }
@media (max-width: 560px) {
  /* each footer link is its own 44 pt row */
  .foot__col { gap: 0; }
  .foot__head { margin-bottom: 2px; }
  .foot__col a { padding: 13px 0; }
}