/* ============================================================
 * John Isaacson — Base Styles v7 (refined, centred)
 * Tokens + reset + typography + buttons + utilities
 * Approved preview: design-pass/v7-refined/index.html (2026-09-08)
 * ============================================================ */

/* Google Fonts via functions.php: Hanken Grotesk 400/500/600/700 (single family) */

:root {
  /* Palette: white, one soft grey, ink. Red is an accent, not a system. */
  --bg:        #FFFFFF;
  --surface:   #F6F6F6;
  --surface-2: #EDEDED;
  --ink:       #111111;
  --ink-2:     #444444;
  --muted:     #6B6B6B;
  --line:      #E6E6E6;
  --line-2:    #D6D6D6;
  --red:       #E60000;
  --red-2:     #C40000;
  --dark:      #111111;

  /* Legacy aliases: older templates, page-bio inline styles and the popup follow the new palette */
  --color-primary:        var(--red);
  --color-primary-hover:  var(--red-2);
  --color-accent:         var(--red);
  --color-bg:             var(--bg);
  --color-surface:        var(--surface);
  --color-surface-raised: var(--surface-2);
  --color-text:           var(--ink);
  --color-text-secondary: var(--ink-2);
  --color-text-muted:     var(--muted);
  --color-border:         var(--line);
  --color-border-hover:   var(--line-2);
  --color-border-subtle:  #EDEDED;
  --paper: var(--bg); --paper-2: var(--surface); --ink-3: var(--muted); --rule: var(--line); --rule-2: var(--line-2); --rec: var(--red);

  /* Type: one family */
  --font-display: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    var(--font-display);
  --weight-display: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-body: 400;

  /* Radius + depth */
  --radius-sm: 8px;
  --radius: 999px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow:    0 24px 60px -28px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, 0.18);

  /* Spacing + layout */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 56px; --space-3xl: 88px;
  --max-width: 1120px;
  --narrow: 720px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad-y: clamp(64px, 8vw, 112px);
  --section-pad-y-tight: clamp(40px, 5vw, 72px);
  --section-pad-x: var(--gutter);
  --nav-h: 68px;

  /* Motion + stacking */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-sticky: 20; --z-drawer: 19; --z-modal: 100;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(38px, 5.6vw, 72px); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(30px, 3.8vw, 48px); }
h3 { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.02em; line-height: 1.2; }
h4 { font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
p { color: var(--ink-2); max-width: 62ch; text-wrap: pretty; line-height: 1.6; }
strong { font-weight: 600; }
.center { text-align: center; }
.center p, .center .lede { margin-left: auto; margin-right: auto; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); }
.meta { font-size: 15px; color: var(--muted); font-weight: 500; }
.kicker, .mono, .label-tag, .section-number { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--muted); letter-spacing: 0; text-transform: none; }

/* ── Badge (older templates): a quiet kicker ── */
.badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--muted); padding: 0; border: 0; background: none; }
.badge__dot, .rec { display: none; }

/* ── Layout utilities ── */
.container, .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; }
.section { padding: var(--section-pad-y) 0; }
.rule, .divider { border: 0; border-top: 1px solid var(--line); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: 14px 24px; border-radius: var(--radius-pill); border: 0;
  background: var(--ink); color: #fff; white-space: nowrap;
  transition: background 0.18s, transform 0.18s;
}
.btn:hover { background: #2b2b2b; color: #fff; transform: translateY(-1px); }
.btn--primary, .btn--red { background: var(--red); }
.btn--primary:hover, .btn--red:hover { background: var(--red-2); }
.btn--ghost, .btn--outline { background: var(--surface); color: var(--ink); }
.btn--ghost:hover, .btn--outline:hover { background: var(--surface-2); color: var(--ink); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #f2f2f2; color: var(--ink); }
.btn svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.btn .rec { display: none; }
.arrow, .link { font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--line-2); padding-bottom: 1px; transition: border-color 0.2s; }
.arrow:hover, .link:hover { border-color: var(--ink); }

/* ── Scroll reveal (older templates): visible at rest, motion only ── */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(8px); transition: transform 0.6s var(--ease-out); }
  .reveal.visible { transform: none; }
  .reveal-d1 { transition-delay: 0.05s; } .reveal-d2 { transition-delay: 0.1s; } .reveal-d3 { transition-delay: 0.15s; } .reveal-d4 { transition-delay: 0.2s; }
}

/* ── Text utilities ── */
.t-red { color: var(--red); } .t-muted { color: var(--muted); } .t-secondary { color: var(--ink-2); }