/* ═══════════════════════════════════════════════════════════════════════════
   GamesIndex — shared marketing stylesheet

   ONE SOURCE OF TRUTH for the blog and the legal pages. They previously each
   carried their own inline copy of the design system, which is how the light
   conversion drifted: the landing page was converted, the legal pages were not
   converted at all, and the blog was converted only partly — its body text was
   left at #c9cbcf (about 1.9:1 on white) and `.callout strong` at #fff, i.e.
   white on white. Those are exactly the bugs a shared sheet prevents.

   Tokens are copied from apps/web/app/globals.css so the marketing site, the
   blog and the application are visibly one product.

   HUE IS RESERVED FOR MEANING, as in the app: price movement and condition
   identity. Chrome is achromatic. Every colour used for text clears 4.5:1 on
   the surfaces it can sit on — measured on --surface-2 #f4f4f4, the darkest:
     --text        #181818  16.1:1
     --text-muted  #545454   6.9:1
     --text-faint  #6e6e6e   4.6:1   <- the floor; nothing lighter carries text
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --n-900:#181818; --n-600:#545454; --n-500:#6e6e6e; --n-400:#a2a2a2;
  --n-300:#d5d5d5; --n-200:#e7e7e7; --n-100:#f4f4f4; --n-50:#fafafa; --n-0:#ffffff;

  --surface:var(--n-0); --surface-1:var(--n-50); --surface-2:var(--n-100); --surface-3:var(--n-200);
  --text:var(--n-900); --text-muted:var(--n-600); --text-faint:var(--n-500);
  --border:var(--n-200); --border-light:var(--n-100); --border-strong:var(--n-300);
  --inverse-bg:var(--n-900); --inverse-text:var(--n-0); --focus:var(--n-900);

  --price-up:#166534; --price-down:#b91c1c;
  --cond-cib:#1d4ed8; --cond-sealed:#b45309; --cond-graded:#6d28d9;

  --header-h:64px; --container:1200px; --measure:760px;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-full:9999px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--font);background:var(--surface);color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;line-height:1.5;
}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
/* Long-form pages cap at a readable measure rather than the full grid width. */
.wrap-prose{max-width:var(--measure);margin:0 auto;padding:0 24px}
@media(max-width:640px){ .wrap,.wrap-prose{padding:0 16px} }

/* ── header (identical to the landing page) ─────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.hdr-in{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:-.02em;font-size:1.0625rem}
/* logo-transparent.png is white artwork on transparency (measured
   rgb(224,224,224)) — drawn for the old dark page, invisible on white.
   invert(1) flips RGB while preserving alpha. Drop once a dark export exists. */
.brand img{height:26px;width:auto;filter:invert(1)}
.nav{display:flex;align-items:center;gap:2px}
.nav a{
  padding:8px 12px;border-radius:var(--r-md);font-size:.875rem;font-weight:500;
  color:var(--text-muted);text-decoration:none;transition:background .15s,color .15s;
}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-md);font-size:.875rem;font-weight:600;font-family:inherit;
  padding:9px 16px;cursor:pointer;border:1px solid transparent;text-decoration:none;
  transition:opacity .15s,background .15s,border-color .15s;
}
.btn-primary{background:var(--inverse-bg);color:var(--inverse-text)}
.btn-primary:hover{opacity:.88}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}
@media(max-width:820px){ .nav{display:none} }

/* ── page head ──────────────────────────────────────────────────────────── */
.page{padding:64px 0 88px}
@media(max-width:820px){ .page{padding:44px 0 64px} }
.page > .kicker{margin-bottom:10px}
h1{font-size:clamp(30px,4vw,44px);line-height:1.06;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.lede{margin-top:16px;font-size:1.0625rem;line-height:1.6;color:var(--text-muted);max-width:62ch}
.kicker{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.updated{margin-top:14px;font-size:.8125rem;color:var(--text-faint)}

/* ── long-form prose ────────────────────────────────────────────────────── */
.prose{margin-top:40px;line-height:1.75}
.prose h2{margin:44px 0 12px;font-size:1.375rem;font-weight:700;letter-spacing:-.02em;scroll-margin-top:calc(var(--header-h) + 16px)}
.prose h3{margin:28px 0 8px;font-size:1.0625rem;font-weight:600}
.prose p{margin:14px 0;color:var(--text-muted);font-size:.9375rem}
.prose ul,.prose ol{margin:14px 0 14px 22px}
.prose li{margin:7px 0;color:var(--text-muted);font-size:.9375rem}
.prose strong{color:var(--text);font-weight:600}
.prose a,.prose a.inline{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.prose a:hover{text-decoration-color:var(--text)}
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.875rem}
.prose th,.prose td{text-align:left;padding:10px 12px;border:1px solid var(--border);vertical-align:top;color:var(--text-muted)}
.prose th{background:var(--surface-2);color:var(--text);font-weight:600}
.prose .callout{
  margin:24px 0;padding:18px 20px;background:var(--surface-1);
  border:1px solid var(--border);border-left:3px solid var(--text);border-radius:var(--r-lg);
}
.prose .callout p,.prose .callout li{color:var(--text-muted)}
.prose .callout strong{color:var(--text)}
.prose .hero{
  width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r-lg);
  border:1px solid var(--border);margin:0 0 32px;background:var(--surface-2);
}

/* ── blog index cards ───────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
@media(max-width:820px){ .grid{grid-template-columns:1fr;gap:16px} }
.card{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:inherit;transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-2);border-bottom:1px solid var(--border)}
.card .pad{padding:18px 20px 20px}
.card .cat{margin-bottom:10px;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.card h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.card p{margin-top:8px;color:var(--text-muted);font-size:.8125rem;line-height:1.6}
.card .meta{margin-top:14px;font-size:.75rem;color:var(--text-faint)}

/* ── closing CTA ────────────────────────────────────────────────────────── */
.cta{
  margin-top:56px;padding:28px 24px;text-align:center;
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
}
.cta h3{font-size:1.125rem;font-weight:700;letter-spacing:-.02em}
.cta p{margin:8px 0 18px;color:var(--text-muted);font-size:.875rem}

.related{margin-top:48px}
.related h4{margin-bottom:12px}
.related a{display:block;padding:10px 0;border-top:1px solid var(--border);color:var(--text-muted);text-decoration:none;font-size:.875rem}
.related a:hover{color:var(--text)}

/* ── footer (identical to the landing page) ─────────────────────────────── */
footer{border-top:1px solid var(--border);padding:32px 0;margin-top:72px}
.ft{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ft .c{font-size:.8125rem;color:var(--text-muted)}
.ft nav{display:flex;gap:18px;flex-wrap:wrap}
/* Vertical padding keeps these clear of the WCAG 2.2 24x24px target minimum. */
.ft nav a{font-size:.8125rem;color:var(--text-muted);text-decoration:none;display:inline-block;padding:5px 0}
.ft nav a:hover{color:var(--text);text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}