/* AwaCourage.com — Design System + Site CSS — v10 */
/* Based on design_audit_v1: Apple/Stripe/Linear-level design tokens */

/* ══════════════════════════════════════════════════
   1. CSS VARIABLES (Design Tokens)
   ══════════════════════════════════════════════════ */
:root {
  /* ── Fonts ── system font stack, no Google Fonts */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "New York", "Charter", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-mono: "SF Mono", Menlo, Monaco, "Courier New", monospace;

  /* ── Type Scale ── */
  --text-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --text-h1: clamp(2rem, 3vw + 1rem, 3rem);
  --text-h2: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  --text-h3: clamp(1.25rem, 1vw + 0.75rem, 1.5rem);
  --text-body-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.75rem;

  /* ── Colors ── */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FAFAF7;
  --color-bg-tertiary: #F5F5F0;
  --color-bg-inverse: #0A0A0A;
  --color-bg-accent: #1A1A1A;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-text-tertiary: #737373;
  --color-text-muted: #A3A3A3;
  --color-text-on-dark: #F5F5F0;
  --color-text-on-dark-secondary: #C4C4BB;
  --color-text-on-dark-muted: #737373;
  --color-brand-primary: #1A1A1A;
  --color-brand-accent: #B8860B;
  --color-border-subtle: rgba(26,26,26,0.08);
  --color-border-default: rgba(26,26,26,0.15);
  --color-border-strong: rgba(26,26,26,0.3);
  --color-link: #1A1A1A;
  --color-link-hover: #B8860B;

  /* ── Spacing (8px base) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* ── Content widths ── */
  --content-width-text: 680px;
  --content-width-default: 1080px;
  --content-width-wide: 1280px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows (minimal) ── */
  --shadow-subtle: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-default: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-elevated: 0 12px 24px rgba(0,0,0,0.08);

  /* ── Transitions ── */
  --transition-fast: 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-default: 250ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Legacy compatibility ── map old vars to new tokens */
  --gold: #B8860B;
  --gold-light: #D4AE4A;
  --gold-dim: rgba(184,134,11,0.08);
  --dark: #1A1A1A;
  --mid: #4A4A4A;
  --sub: #737373;
  --border: rgba(26,26,26,0.15);
  --bg: #FAFAF7;
  --white: #FFFFFF;
  --ff-serif: var(--font-serif);
  --ff-sans: var(--font-sans);
  --radius: 10px;
  --radius-legacy: 14px;
}

/* ══════════════════════════════════════════════════
   2. RESET + BASE STYLES
   ══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; transition: color var(--transition-fast); }
a:hover { color: var(--color-link-hover); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ══════════════════════════════════════════════════
   3. TYPOGRAPHY CLASSES
   ══════════════════════════════════════════════════ */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.display {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
}
.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  line-height: 1;
}
.body-large {
  font-family: var(--font-serif);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}
.text-small {
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.text-caption {
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-tertiary);
}
p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════
   4. NAV (sticky, backdrop-filter blur, 64px height)
   ══════════════════════════════════════════════════ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  height: 64px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo img {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
  max-width: 200px;
}
.nav-links {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}
.nav-links a {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--color-brand-accent); }
.nav-links a.btn-primary {
  color: var(--color-bg-primary);
}
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--color-text-primary);
  padding: 4px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════
   5. HERO SECTION (80vh, centered, display type)
   ══════════════════════════════════════════════════ */
.hero {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-10) var(--space-8) var(--space-9);
  max-width: 880px;
  margin: 0 auto;
}
.hero-title {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-6);
}
.hero-sub {
  font-size: var(--text-body-lg);
  color: var(--color-text-tertiary);
  line-height: 1.6;
  margin-bottom: var(--space-7);
  max-width: 520px;
}
.hero-cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.hero-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.6vw, 1.625rem);
  color: var(--color-text-primary);
  line-height: 1.55;
  font-style: italic;
  border-left: 3px solid var(--color-brand-accent);
  border-radius: 0;
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
}

/* ══════════════════════════════════════════════════
   6. CREDENTIALS STRIP (horizontal pills)
   ══════════════════════════════════════════════════ */
.cred-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-7);
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}
.cred-item {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.cred-item span {
  display: block;
  font-weight: 400;
  color: var(--color-text-tertiary);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 3px;
}
.cred-divider {
  color: var(--color-border-default);
  font-size: 20px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   7. SECTION LAYOUTS
   ══════════════════════════════════════════════════ */
.section {
  padding: var(--space-9) var(--space-8);
  max-width: var(--content-width-default);
  margin: 0 auto;
}
.section-narrow {
  padding: var(--space-9) var(--space-8);
  max-width: var(--content-width-text);
  margin: 0 auto;
}
.section-bg {
  background: var(--color-bg-secondary);
  padding: var(--space-9) var(--space-8);
}
.section-bg .section-inner {
  max-width: var(--content-width-default);
  margin: 0 auto;
}
.section-dark {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-9) var(--space-8);
}
.section-dark .section-inner {
  max-width: var(--content-width-default);
  margin: 0 auto;
}
.section-border-top {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-8);
  margin-top: 0;
}

/* ── Section Typography ── */
.section-label {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: var(--space-4);
  display: block;
}
.section-title {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}
.section-sub {
  font-size: var(--text-body);
  color: var(--color-text-tertiary);
  line-height: 1.6;
  max-width: 580px;
  margin-bottom: var(--space-7);
}
.section-body {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

/* ══════════════════════════════════════════════════
   8. CARD GRIDS (audience, framework, etc.)
   ══════════════════════════════════════════════════ */

/* ── Audience Grid ── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.audience-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  transition: border-color var(--transition-default);
}
.audience-card:hover { border-color: var(--color-brand-accent); }
.audience-card h3 {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}
.audience-card p {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.audience-card a {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  color: var(--color-brand-accent);
  text-decoration: none;
  letter-spacing: 0.04em;
}

/* ── Framework Grid ── */
.framework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.framework-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  display: block;
  transition: border-color var(--transition-default), transform var(--transition-default);
}
.framework-card:hover {
  border-color: var(--color-brand-accent);
  transform: translateY(-2px);
}
.framework-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  display: block;
  margin-bottom: var(--space-2);
}
.framework-card h3 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  color: var(--color-text-primary);
  font-weight: 400;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.framework-card p {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════
   9. BUTTONS
   ══════════════════════════════════════════════════ */
.btn-primary {
  display: inline-block;
  padding: 14px 34px;
  background: var(--color-brand-accent);
  color: var(--color-bg-primary);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  min-height: 44px;
  line-height: 1;
}
.btn-primary:hover {
  background: #9A7209;
  color: var(--color-bg-primary);
  transform: translateY(-1px);
}
.btn-secondary {
  display: inline-block;
  padding: 13px 28px;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  min-height: 44px;
  line-height: 1;
}
.btn-secondary:hover {
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
}

/* ══════════════════════════════════════════════════
   10. FOOTER (light background per user feedback)
   ══════════════════════════════════════════════════ */
.site-footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-9) var(--space-8) var(--space-7);
}
.footer-inner {
  max-width: var(--content-width-default);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.6fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.footer-logo {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  color: var(--color-brand-accent);
  display: block;
  margin-bottom: var(--space-2);
}
.footer-tagline {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-1);
}
.footer-links a {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  letter-spacing: 0.03em;
}
.footer-links a:hover { color: var(--color-brand-accent); }
.footer-notify-title {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--color-brand-accent);
  margin-bottom: var(--space-1);
}
.footer-notify-sub {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
  line-height: 1.55;
}
.footer-notify-form {
  display: flex;
  gap: var(--space-2);
}
.footer-notify-form input[type="email"] {
  padding: 9px 12px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  flex: 1;
  min-width: 0;
  outline: none;
  transition: border-color var(--transition-fast);
}
.footer-notify-form input:focus {
  border-color: var(--color-brand-accent);
}
.footer-notify-form button {
  padding: 9px 14px;
  background: var(--color-brand-accent);
  color: var(--color-bg-primary);
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
  min-height: 44px;
}
.footer-notify-form button:hover { background: #9A7209; }
.footer-copy {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  color: var(--color-text-tertiary);
  line-height: 1.95;
}

/* ══════════════════════════════════════════════════
   11. DARK SECTION STYLES (#0A0A0A bg, #F5F5F0 text)
   ══════════════════════════════════════════════════ */
.section-inverse {
  background: var(--color-bg-inverse);
  color: var(--color-text-on-dark);
  padding: var(--space-9) var(--space-8);
}
.section-inverse .section-inner {
  max-width: var(--content-width-default);
  margin: 0 auto;
}
.section-inverse .section-label { color: var(--color-brand-accent); }
.section-inverse .section-title { color: var(--color-text-on-dark); }
.section-inverse .section-sub { color: var(--color-text-on-dark-secondary); }
.section-inverse .section-body { color: var(--color-text-on-dark); }
.section-inverse a { color: var(--color-text-on-dark); }
.section-inverse a:hover { color: var(--color-brand-accent); }

/* ══════════════════════════════════════════════════
   12. ALL COMPONENT STYLES (backward compatible)
   ══════════════════════════════════════════════════ */

/* ── Concept Pair ── */
.concept-pair {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin: var(--space-7) 0;
  flex-wrap: wrap;
}
.concept-item { flex: 1; min-width: 190px; }
.concept-label {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.concept-desc {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  line-height: 1.6;
}
.concept-divider {
  font-family: var(--font-serif);
  font-size: 2.625rem;
  color: var(--color-brand-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Bridge Text ── */
.bridge-text {
  max-width: 580px;
  margin: 0 auto var(--space-7);
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--text-body-lg);
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* ── Article List ── */
.article-list { margin-bottom: var(--space-5); }
.article-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.article-row:hover .article-title { color: var(--color-brand-accent); }
.article-source {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  flex-shrink: 0;
  min-width: 155px;
}
.article-title {
  font-size: var(--text-small);
  color: var(--color-text-primary);
  line-height: 1.5;
  flex: 1;
  transition: color var(--transition-fast);
}
.article-arrow {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  font-size: var(--text-body);
}
.link-more {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-brand-accent);
  text-decoration: none;
  letter-spacing: 0.04em;
}

/* ── Eagle Section ── */
.eagle-section {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  max-width: var(--content-width-default);
  margin: 0 auto;
}
.eagle-text { flex: 1; }
.eagle-visual { flex-shrink: 0; text-align: center; }

/* ── Credentials Grid (About page) ── */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.cred-block {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.cred-block h3 {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: var(--space-3);
}
.cred-block p {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  line-height: 1.6;
}

/* ── Press Kit ── */
.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-5);
}
.press-block {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.press-block h3 {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: var(--space-4);
}
.bio-label {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.bio-text {
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-text-primary);
}
.speaking-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.speaking-list li {
  border-left: 2px solid var(--color-brand-accent);
  border-radius: 0;
  padding-left: var(--space-4);
}
.topic-title {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.4;
}
.topic-desc {
  display: block;
  font-size: var(--text-eyebrow);
  color: var(--color-text-tertiary);
  line-height: 1.65;
}
.media-cred-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.media-cred-item {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-3);
}
.media-cred-item:last-child { border-bottom: none; padding-bottom: 0; }
.media-name {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.media-detail {
  font-size: var(--text-eyebrow);
  color: var(--color-text-tertiary);
  line-height: 1.55;
}

/* ── Books ── */
.why-now-block {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-5) 0;
  border: 1px solid var(--color-border-default);
}
.why-now-text {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.comp-titles {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  font-style: italic;
}
.book-featured {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-bottom: var(--space-4);
}
.book-status {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: var(--space-3);
  display: block;
}
.book-title {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  color: var(--color-text-primary);
  font-weight: 400;
  margin-bottom: var(--space-2);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.book-sub {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-bottom: var(--space-5);
}
.book-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.book-meta {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  letter-spacing: 0.03em;
  line-height: 1.6;
}
.acquisitions-block {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-3);
}
.acquisitions-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  display: block;
  margin-bottom: var(--space-2);
}
.acquisitions-desc {
  font-size: var(--text-caption);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.acquisitions-actions { margin-bottom: var(--space-4); }
.acquisitions-meta {
  font-size: var(--text-eyebrow);
  color: var(--color-text-tertiary);
  line-height: 1.65;
}
.book-series-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.book-series-item {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color var(--transition-fast);
}
.book-series-item:hover { border-color: var(--color-brand-accent); }
.series-num {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-brand-accent);
  letter-spacing: 0.1em;
}
.series-title {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
}
.series-sub {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  line-height: 1.45;
}

/* ── Page Nav (About sub-navigation) ── */
.page-nav {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-8);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
  position: sticky;
  top: 64px;
  z-index: 90;
}
.page-nav a {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}
.page-nav a:hover { color: var(--color-brand-accent); }

/* ── Connect ── */
.connect-pref {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: var(--space-5) 0 var(--space-4);
  line-height: 1.6;
}
.connect-expect { margin: 0 0 var(--space-7); }
.expect-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
  display: block;
}
.expect-list { list-style: none; }
.expect-list li {
  font-size: var(--text-caption);
  color: var(--color-text-primary);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--color-border-default);
  border-radius: 0;
  margin-bottom: var(--space-2);
  line-height: 1.65;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-7);
}
.cat-btn {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  line-height: 1.4;
  min-height: 44px;
}
.cat-btn:hover {
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
}
.cat-btn.active {
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
  background: var(--gold-dim);
}
.connect-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 600px;
}
.connect-form input[type="text"],
.connect-form input[type="email"] {
  padding: 14px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  outline: none;
  transition: border-color var(--transition-fast);
  min-height: 44px;
}
.connect-form input:focus { border-color: var(--color-brand-accent); }
.connect-form textarea {
  padding: 14px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  resize: vertical;
  outline: none;
  min-height: 150px;
  transition: border-color var(--transition-fast);
}
.connect-form textarea:focus { border-color: var(--color-brand-accent); }
.form-note {
  font-size: var(--text-eyebrow);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

/* ── Story ── */
.story-h2 {
  font-family: var(--font-serif);
  font-size: 1.8125rem;
  color: var(--color-text-primary);
  font-weight: 400;
  margin-bottom: var(--space-5);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.story-quote {
  font-family: var(--font-serif);
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-brand-accent);
  border-radius: 0;
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  font-style: italic;
}
.quote-attr {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  font-style: normal;
  display: block;
  margin-top: var(--space-2);
}

/* ── Ideas ── */
.idea-block {
  max-width: 780px;
  margin: 0 auto;
}
.idea-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: var(--space-3);
}
.idea-block h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.idea-tagline {
  font-size: var(--text-body);
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-bottom: var(--space-6);
  line-height: 1.65;
}
.idea-block p {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.formula-display {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-7) 0;
  flex-wrap: wrap;
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  color: var(--color-text-primary);
}
.formula-op { color: var(--color-brand-accent); }
.formula-eq { color: var(--color-text-tertiary); }
.formula-result { color: var(--color-brand-accent); font-weight: 600; }
.idea-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
}
.idea-list li {
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 2px solid var(--color-border-default);
  border-radius: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  line-height: 1.65;
}
.idea-insight {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  border-left: 3px solid var(--color-brand-accent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.idea-insight p {
  font-size: var(--text-small);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}
.idea-insight p:last-child { margin-bottom: 0; }
.idea-academic {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  line-height: 1.6;
  margin-top: var(--space-4);
}
.idea-academic a { color: var(--color-brand-accent); }
.idea-academic strong { color: var(--color-text-primary); }
.idea-three-conditions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.condition {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.condition-num {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-brand-accent);
  letter-spacing: 0.1em;
}
.condition-name {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.condition-desc {
  font-size: var(--text-eyebrow);
  color: var(--color-text-tertiary);
  line-height: 1.65;
}

/* ── 6-ER Grid ── */
.er-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.er-row {
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.er-survival {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
}
.er-moat {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-brand-accent);
}
.er-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  display: block;
  margin-bottom: var(--space-4);
}
.er-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.er-name {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}
.er-moat .er-name { color: var(--color-text-primary); }
.er-desc {
  font-size: var(--text-eyebrow);
  color: var(--color-text-tertiary);
  line-height: 1.65;
}
.er-moat .er-desc { color: var(--color-text-tertiary); }

/* ── K12 Layers ── */
.k12-layers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.k12-layer {
  padding: var(--space-5);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.k12-emoji {
  font-size: 1.75rem;
  display: block;
  margin-bottom: var(--space-3);
  line-height: 1;
}
.k12-layer-name {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  display: block;
  margin-bottom: var(--space-2);
}
.k12-attitudes {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  line-height: 1.5;
}

/* ── Assessment ── */
.share-block {
  text-align: center;
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}
.share-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
  display: block;
}
.share-btns {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.share-btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  min-height: 44px;
}
.share-btn:hover {
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
}
.next-layer {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-4) 0;
}
.next-layer-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  display: block;
  margin-bottom: var(--space-3);
}
.email-optin {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  margin: var(--space-4) 0 var(--space-6);
}
.optin-title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.optin-sub {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  line-height: 1.6;
  margin-bottom: var(--space-5);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.optin-form {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.optin-form input[type="email"] {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  width: 240px;
  outline: none;
  min-height: 44px;
}
.optin-note {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}

/* ── Articles (flagship placeholder) ── */
.flagship-placeholder {
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
  margin-top: var(--space-4);
}

/* ── 88 Sentences Grid ── */
.sentences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.sentence-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--transition-default), transform var(--transition-default);
}
.sentence-card:hover {
  border-color: var(--color-brand-accent);
  transform: translateY(-2px);
}
.sentence-num {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-brand-accent);
  letter-spacing: 0.12em;
}
.sentence-text {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  line-height: 1.65;
  flex: 1;
}
.sentence-theme {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sentences-filter {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-5) 0;
}
.filter-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.06em;
  min-height: 44px;
}
.filter-btn:hover,
.filter-btn.active {
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
  background: var(--gold-dim);
}

/* ── Explorer / Travel Section ── */
.explorer-section {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-2);
}
.explorer-photo-wrap {
  flex-shrink: 0;
  width: 280px;
}
.explorer-photo-wrap img {
  width: 280px;
  height: 360px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.explorer-photo-placeholder {
  width: 280px;
  height: 360px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-eyebrow);
  font-family: var(--font-sans);
  text-align: center;
  padding: var(--space-5);
}
.explorer-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3vw, 2rem);
  color: var(--color-text-primary);
  font-style: italic;
  line-height: 1.45;
  margin-bottom: var(--space-6);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.travel-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.travel-stat {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4);
}
.travel-stat-num {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-brand-accent);
  font-weight: 400;
  display: block;
  margin-bottom: var(--space-1);
}
.travel-stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.travel-note {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  line-height: 1.6;
  font-style: italic;
  margin-top: var(--space-1);
}

/* ══════════════════════════════════════════════════
   13. RESPONSIVE BREAKPOINTS (640, 768, 1024, 1280)
   ══════════════════════════════════════════════════ */

/* ── xl: 1280px ── */
@media (max-width: 1280px) {
  .site-nav { padding: 0 var(--space-7); }
}

/* ── lg: 1024px ── */
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .book-series-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── md: 768px ── */
@media (max-width: 768px) {
  .site-nav { padding: 0 var(--space-5); height: 56px; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-5) var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
    gap: var(--space-4);
    z-index: 199;
    box-shadow: var(--shadow-elevated);
  }
  .nav-links.open { display: flex; }
  .nav-hamburger { display: flex; }

  .hero {
    min-height: 70vh;
    padding: var(--space-9) var(--space-5) var(--space-7);
  }
  .hero-title { font-size: clamp(2.5rem, 11vw, 4.25rem); }

  .section,
  .section-narrow { padding: var(--space-8) var(--space-5); }
  .section-bg,
  .section-dark { padding: var(--space-8) var(--space-5); }
  .page-nav { padding: var(--space-3) var(--space-5); top: 56px; }

  .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .framework-grid { grid-template-columns: 1fr; }
  .er-items { grid-template-columns: 1fr; gap: var(--space-4); }
  .k12-layers { grid-template-columns: 1fr; }
  .eagle-section { flex-direction: column; gap: var(--space-6); }
  .book-series-grid { grid-template-columns: 1fr 1fr; }
  .press-grid { grid-template-columns: 1fr; }
  .idea-three-conditions { grid-template-columns: 1fr; }

  .cred-strip { gap: var(--space-3) var(--space-5); padding: var(--space-5) var(--space-5); }
  .cred-divider { display: none; }

  .explorer-section { flex-direction: column; gap: var(--space-6); }
  .explorer-photo-wrap { width: 100%; }
  .explorer-photo-wrap img { width: 100%; height: 280px; }
  .explorer-photo-placeholder { width: 100%; height: 220px; }
  .travel-stats { grid-template-columns: 1fr 1fr; }
}

/* ── sm: 640px ── */
@media (max-width: 640px) {
  .section,
  .section-narrow { padding: var(--space-7) var(--space-5); }
  .hero {
    min-height: 60vh;
    padding: var(--space-8) var(--space-5) var(--space-7);
  }
  .concept-pair { flex-direction: column; gap: var(--space-5); }
  .book-series-grid { grid-template-columns: 1fr; }
  .cred-grid { grid-template-columns: 1fr; }
  .formula-display { font-size: var(--text-body-lg); gap: var(--space-3); }
  .footer-notify-form { flex-direction: column; }
  .audience-grid { grid-template-columns: 1fr; }
}

/* ── xs: 480px and below ── */
@media (max-width: 480px) {
  .section,
  .section-narrow { padding: var(--space-6) var(--space-4); }
  .section-bg,
  .section-dark { padding: var(--space-6) var(--space-4); }
  .hero { padding: var(--space-7) var(--space-4) var(--space-6); }
  .site-nav { padding: 0 var(--space-4); }
}

/* ══════════════════════════════════════════════════
   14. FOCUS STATES + ACCESSIBILITY
   ══════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--color-brand-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-inverse);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
  z-index: 999;
  font-size: var(--text-small);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

/* Ensure minimum tap targets on touch */
@media (pointer: coarse) {
  .nav-links a,
  .footer-links a,
  .page-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════
   15. PRINT STYLES
   ══════════════════════════════════════════════════ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #1A1A1A !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body { font-size: 12pt; line-height: 1.5; }
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #737373 !important; }
  .site-nav,
  .nav-hamburger,
  .site-footer,
  .hero-cta,
  .btn-primary,
  .btn-secondary { display: none !important; }
  .hero { min-height: auto; padding: 20pt 0; }
  .section,
  .section-narrow,
  .section-bg,
  .section-dark { padding: 20pt 0; max-width: 100%; }
  img { max-width: 300px; }
  .audience-grid,
  .framework-grid,
  .cred-grid,
  .press-grid,
  .sentences-grid { display: block; }
  .audience-card,
  .framework-card,
  .cred-block,
  .press-block,
  .sentence-card { break-inside: avoid; margin-bottom: 10pt; border: 1px solid #ccc; }
  @page { margin: 1.5cm; }
}