/* ───────── Tokens ───────── */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 1rem + 6vw, 6.5rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px;

  --font-display: 'Clash Display', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
}

/* Light — warm paper with navy ink, amber lot-light accent */
:root, [data-theme='light'] {
  --color-bg: #f5f1ea;
  --color-surface: #faf7f1;
  --color-surface-2: #fdfbf7;
  --color-surface-offset: #ede7dc;
  --color-divider: oklch(0.25 0.03 260 / .10);
  --color-border: oklch(0.25 0.03 260 / .14);
  --color-text: #141b2d;
  --color-text-muted: #5b6070;
  --color-text-faint: #9a9ca6;
  --color-text-inverse: #f5f1ea;
  --color-ink: #141b2d;             /* navy — primary buttons in light mode */
  --color-ink-hover: #1f2a47;
  --color-accent: #b9771f;          /* amber for labels, rules, numerals */
  --color-accent-strong: #8f5a12;
  --color-accent-soft: oklch(0.72 0.14 70 / .16);
  --color-night: #0c1326;           /* dark feature band */
  --color-night-2: #121b33;
  --color-on-night: #efe9dd;
  --color-on-night-muted: #a7acbb;
  --shadow-sm: 0 1px 2px oklch(0.2 0.03 260 / .08);
  --shadow-md: 0 6px 18px oklch(0.2 0.03 260 / .12);
  --shadow-lg: 0 24px 60px oklch(0.2 0.03 260 / .22);
  --cover-shadow: 0 30px 60px -20px oklch(0.15 0.03 260 / .5), 0 8px 16px -8px oklch(0.15 0.03 260 / .3);
}
[data-theme='dark'] {
  --color-bg: #0c1326;
  --color-surface: #111a30;
  --color-surface-2: #16203a;
  --color-surface-offset: #0a1020;
  --color-divider: oklch(0.9 0.02 80 / .08);
  --color-border: oklch(0.9 0.02 80 / .14);
  --color-text: #ece6da;
  --color-text-muted: #a6abb9;
  --color-text-faint: #666c7c;
  --color-text-inverse: #0c1326;
  --color-ink: #e2a84a;             /* amber buttons in dark mode */
  --color-ink-hover: #f0bb66;
  --color-accent: #e2a84a;
  --color-accent-strong: #f0bb66;
  --color-accent-soft: oklch(0.78 0.14 70 / .16);
  --color-night: #070c1a;
  --color-night-2: #0e162b;
  --color-on-night: #ece6da;
  --color-on-night-muted: #a6abb9;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / .3);
  --shadow-md: 0 6px 18px oklch(0 0 0 / .4);
  --shadow-lg: 0 24px 60px oklch(0 0 0 / .55);
  --cover-shadow: 0 30px 60px -20px oklch(0 0 0 / .8), 0 8px 16px -8px oklch(0 0 0 / .5);
}
[data-theme='dark'] .btn-primary { color: var(--color-text-inverse); }

/* ───────── Layout primitives ───────── */
.container { width: min(100% - 2 * var(--space-5), var(--content-wide)); margin-inline: auto; }
.container-default { width: min(100% - 2 * var(--space-5), var(--content-default)); margin-inline: auto; }
.container-narrow { width: min(100% - 2 * var(--space-5), var(--content-narrow)); margin-inline: auto; }
@media (min-width: 768px) {
  .container, .container-default, .container-narrow { width: min(100% - 2 * var(--space-10), var(--_w, var(--content-wide))); }
  .container-default { --_w: var(--content-default); }
  .container-narrow { --_w: var(--content-narrow); }
}

.skip-link { position: absolute; left: var(--space-4); top: -100%; background: var(--color-ink); color: var(--color-text-inverse); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { top: var(--space-4); }

.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); display: inline-flex; align-items: center; gap: var(--space-3); }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.eyebrow.no-rule::before { display: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: var(--text-2xl); line-height: 1.05; }
h3 { font-size: var(--text-xl); }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); font-weight: 400; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn svg { flex: none; }
.btn-primary { background: var(--color-ink); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-ink-hover); transform: translateY(-1px); }
.btn-ghost { color: var(--color-text); border: 1px solid var(--color-border); background: transparent; }
.btn-ghost:hover { border-color: var(--color-text); background: var(--color-surface-2); }
.btn-night { background: var(--color-accent); color: #141b2d; }
.btn-night:hover { background: var(--color-accent-strong); transform: translateY(-1px); }
.btn-night-ghost { color: var(--color-on-night); border: 1px solid oklch(0.9 0.02 80 / .25); }
.btn-night-ghost:hover { border-color: var(--color-on-night); }
.btn .price { font-weight: 400; opacity: .75; }

/* ───────── Header ───────── */
.site-header { position: sticky; top: 0; z-index: 50; background: oklch(from var(--color-bg) l c h / .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.site-header.scrolled { border-bottom-color: var(--color-divider); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.brand svg { width: 32px; height: 32px; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1; letter-spacing: .01em; }
.brand-name small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; }
.nav { display: none; gap: var(--space-6); }
.nav a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); text-decoration: none; }
.nav a:hover { color: var(--color-text); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-md); color: var(--color-text); }
.icon-btn:hover { background: var(--color-surface-offset); }
.header-cta { display: none; }
@media (min-width: 900px) { .nav { display: flex; } .header-cta { display: inline-flex; } .menu-btn { display: none; } }

.mobile-nav { display: none; border-top: 1px solid var(--color-divider); padding-block: var(--space-4); }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: var(--space-3) 0; font-weight: 500; color: var(--color-text); text-decoration: none; }

/* ───────── Hero ───────── */
.hero { position: relative; overflow: clip; padding-block: clamp(var(--space-12), 7vw, var(--space-24)) clamp(var(--space-16), 8vw, var(--space-32)); }
.hero-grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-16); } }
.hero h1 { font-size: var(--text-hero); line-height: .95; letter-spacing: -.02em; margin-top: var(--space-5); }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero .lede { margin-top: var(--space-6); max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: .04em; }
.hero-meta span::before { content: '—'; margin-right: var(--space-2); color: var(--color-accent); }

.hero-cover { position: relative; justify-self: center; width: min(100%, 420px); }
.hero-cover img { border-radius: var(--radius-sm); box-shadow: var(--cover-shadow); transform: rotate(-2deg); }
.hero-cover::after { content: ''; position: absolute; inset: auto 10% -6% 10%; height: 24px; background: oklch(0.2 0.03 260 / .25); filter: blur(18px); border-radius: 50%; z-index: -1; }
.hero-badge { position: absolute; z-index: 2; top: -14px; right: -10px; background: var(--color-accent); color: #141b2d; font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); box-shadow: var(--shadow-md); transform: rotate(4deg); }

/* ───────── Standards band (dark) ───────── */
.band-night { background: var(--color-night); color: var(--color-on-night); position: relative; overflow: clip; }
.band-night .eyebrow { color: var(--color-accent); }
.standards { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.standards-grid { display: grid; gap: var(--space-8); }
@media (min-width: 700px) { .standards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .standards-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-10); } }
.stat { border-top: 1px solid oklch(0.9 0.02 80 / .18); padding-top: var(--space-5); }
.stat-num { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); line-height: 1; color: var(--color-accent); letter-spacing: -.02em; }
.stat-num sub { font-size: .35em; vertical-align: baseline; margin-left: .15em; color: var(--color-on-night-muted); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.stat-label { font-weight: 600; margin-top: var(--space-3); color: var(--color-on-night); }
.stat p { font-size: var(--text-sm); color: var(--color-on-night-muted); margin-top: var(--space-2); max-width: 32ch; }

/* ───────── Inside Click to Keys ───────── */
.inside { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.inside-grid { display: grid; gap: var(--space-12); }
@media (min-width: 900px) { .inside-grid { grid-template-columns: 5fr 7fr; gap: var(--space-20); align-items: start; } .inside-sticky { position: sticky; top: 100px; } }
.inside h2 { margin-top: var(--space-5); }
.inside .lede { margin-top: var(--space-5); }
.inside-cta { margin-top: var(--space-8); }

.system-list { counter-reset: sys; }
.system-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); padding-block: var(--space-6); border-top: 1px solid var(--color-divider); }
.system-list li:last-child { border-bottom: 1px solid var(--color-divider); }
.system-list li::before { counter-increment: sys; content: counter(sys, decimal-leading-zero); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--color-accent); line-height: 1.1; min-width: 2.2ch; }
.system-list h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); }
.system-list p { color: var(--color-text-muted); margin-top: var(--space-2); font-size: var(--text-base); }

/* ───────── Full-bleed image ───────── */
.bleed { position: relative; width: 100%; height: clamp(360px, 44vw, 640px); overflow: clip; }
.bleed img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.bleed figcaption { max-width: none; position: absolute; inset: auto 0 0 0; padding: var(--space-6) 0; background: linear-gradient(to top, oklch(0.08 0.03 260 / .9), transparent); color: var(--color-on-night); }
.bleed blockquote { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; max-width: 30ch; }
.bleed cite { display: block; font-style: normal; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-on-night-muted); margin-top: var(--space-3); }

/* ───────── Shelf ───────── */
.shelf { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); background: var(--color-surface-offset); }
.shelf-head { display: grid; gap: var(--space-6); align-items: end; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
@media (min-width: 900px) { .shelf-head { grid-template-columns: 1fr auto; } }
.shelf-head h2 { margin-top: var(--space-4); }
.shelf-head p { color: var(--color-text-muted); max-width: 50ch; }

.books { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .books { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .books { grid-template-columns: repeat(6, 1fr); } .book { grid-column: span 2; } .book.featured { grid-column: span 3; } .book.wide { grid-column: span 3; } }

.book { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-xl); padding: var(--space-6); display: grid; grid-template-columns: 112px 1fr; gap: var(--space-5); align-content: start; position: relative; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.book:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.book img { width: 100%; border-radius: calc(var(--radius-xl) - var(--space-6) + 4px); box-shadow: 0 10px 24px -10px oklch(0.15 0.03 260 / .45); transition: transform .35s var(--ease-out); }
.book:hover img { transform: translateY(-2px) rotate(-1deg); }
.book-no { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); }
.book h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); line-height: 1.25; margin-top: var(--space-1); }
.book .sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.book .blurb { color: var(--color-text); font-size: var(--text-sm); margin-top: var(--space-3); }
.book .meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-3); }
.book .links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.book .links .btn { min-height: 40px; padding-block: var(--space-2); }
.book.featured { grid-template-columns: 1fr; background: var(--color-night); color: var(--color-on-night); border-color: transparent; }
.book.featured .sub, .book.featured .blurb { color: var(--color-on-night-muted); }
.book.featured .blurb { color: var(--color-on-night); }
.book.featured .meta { color: var(--color-on-night-muted); }
.book.featured .btn-ghost { color: var(--color-on-night); border-color: oklch(0.9 0.02 80 / .25); }
.book.featured .btn-ghost:hover { border-color: var(--color-on-night); background: transparent; }
.book.featured .btn-primary { background: var(--color-accent); color: #141b2d; }
.book.featured .btn-primary:hover { background: var(--color-accent-strong); }
@media (min-width: 560px) { .book.featured { grid-template-columns: 180px 1fr; gap: var(--space-8); } }
@media (max-width: 420px) { .book { grid-template-columns: 1fr; } .book img { width: 140px; } }

/* ───────── Reading paths ───────── */
.paths { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.paths-head h2 { margin-top: var(--space-4); }
.paths-grid { display: grid; gap: var(--space-5); margin-top: clamp(var(--space-10), 5vw, var(--space-16)); }
@media (min-width: 900px) { .paths-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.path { border-top: 2px solid var(--color-text); padding-top: var(--space-5); }
.path.lead { border-top-color: var(--color-accent); }
.path h3 { font-family: var(--font-display); font-size: var(--text-xl); }
.path p { color: var(--color-text-muted); margin-top: var(--space-3); font-size: var(--text-base); }
.path ol { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.path ol li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; font-size: var(--text-sm); }
.path ol li span.n { font-family: var(--font-display); font-weight: 600; color: var(--color-accent); min-width: 1.4ch; }
.path ol li a { color: var(--color-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--color-border); }
.path ol li a:hover { border-bottom-color: var(--color-text); }
.path ol li small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }

/* ───────── About ───────── */
.about { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); background: var(--color-surface-offset); }
.about-grid { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; gap: var(--space-20); } .about-grid > figure { order: -1; } }
.about figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; object-fit: cover; }
.about h2 { margin-top: var(--space-4); }
.about p { margin-top: var(--space-5); color: var(--color-text); }
.about p + p { margin-top: var(--space-4); }
.about .muted { color: var(--color-text-muted); }
.about-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* ───────── Teams / Contact ───────── */
.teams { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.teams-card { background: var(--color-night); color: var(--color-on-night); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-16)); display: grid; gap: var(--space-8); position: relative; overflow: clip; }
@media (min-width: 900px) { .teams-card { grid-template-columns: 1.2fr .8fr; align-items: center; } }
.teams-card h2 { margin-top: var(--space-4); }
.teams-card p { color: var(--color-on-night-muted); margin-top: var(--space-4); }
.teams-list { display: grid; gap: var(--space-3); }
.teams-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-on-night); }
.teams-list li svg { margin-top: 3px; color: var(--color-accent); }
.teams-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* ───────── Footer ───────── */
.site-footer { border-top: 1px solid var(--color-divider); padding-block: var(--space-12) var(--space-10); }
.footer-grid { display: grid; gap: var(--space-8); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer-grid h4 { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; margin-bottom: var(--space-4); }
.footer-grid ul { display: grid; gap: var(--space-2); }
.footer-grid a { color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.footer-grid a:hover { color: var(--color-accent-strong); }
.footer-grid p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-4); max-width: 40ch; }
.footer-bottom { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-faint); }

/* ───────── Reveal ───────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* series card */
.book.series-card { grid-template-columns: 1fr; background: var(--color-accent-soft); border-color: transparent; align-content: center; }
.book.series-card h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.book.series-card .blurb { color: var(--color-text-muted); }
[data-theme='dark'] .book.featured { background: var(--color-surface-2); border-color: var(--color-border); }
[data-theme='dark'] .book.featured .btn-primary { color: #141b2d; }