/* ============================================================
   BOOK BRAND — "strategy is good. execution is better."
   Design Tokens (v3)

   Warm editorial paper. One typeface. One accent.
   The look of a verdict — calm, deliberate, inevitable.
   ============================================================ */

/* Inter — self-hosted variable fonts (DSGVO clean, no Google Fonts)
   Files: ./assets/fonts/Inter-VariableFont_opsz,wght.woff2
          ./assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2 */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations'),
       url('assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2-variations'),
       url('assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Paper ---------- */
  --paper-warm:   #F8F6F0;          /* Default background — warm off-white */
  --paper:        #FFFFFF;          /* Pure white — reserved for elevated surfaces */

  /* ---------- Ink (committed palette) ---------- */
  --ink:          #1B1E24;          /* Primary text — committed near-black */
  --ink-60:       rgba(27, 30, 36, .60);   /* Secondary text */
  --ink-42:       rgba(27, 30, 36, .42);   /* Tertiary — captions, metadata */
  --ink-12:       rgba(27, 30, 36, .12);   /* Hairline borders */
  --ink-06:       rgba(27, 30, 36, .06);   /* Subtle tint, recessed surfaces */

  /* ---------- Legacy aliases (kept until styles.css migrates) ---------- */
  --ink-2:        var(--ink-60);
  --ink-3:        var(--ink-42);
  --rule:         var(--ink-12);
  --paper-2:      var(--ink-06);

  /* ---------- Accent ---------- */
  --red:          #E6361F;          /* Digital primary (web, social, ebook) */
  --red-print:    #E53925;          /* Print substrates */

  /* Pantone references (nearest) */
  --red-pms485:   #DA291C;          /* PANTONE 485 C — recommended lock target */
  --red-pms2347:  #E03C31;          /* PANTONE 2347 C — minimal visual shift */

  /* ---------- Institutional (committed, not yet activated) ---------- */
  --blue:         #0B1C3A;          /* Reserved for iamyb / institutional accent */

  /* Cover-engine specifics (hook-box on red card) */
  --cover-muted:  #6B6258;          /* Reserved, currently unused */
  --cover-white:  #FFFFFF;          /* Hook-box headline only */
  --cover-tint:   #F7C8C0;          /* Hook-box subline on red */

  /* ---------- Typography ---------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'SF Mono', Menlo, Consolas, monospace;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-monument:  850;

  /* Base */
  --fs-base:      16px;
  --lh-base:      1.65;

  /* Web type scale — modular, body-anchored
     Ratios: body 16 · lead 1.2× · pull 1.5× · h3 1.4× · h2 2× · h1 2.6× · mon 4× */
  --fs-monument:  64px;   /* 800 · -0.035em — "strategy is good." */
  --fs-h1:        42px;   /* 700 · -0.02em  */
  --fs-h2:        32px;   /* 700 · -0.015em */
  --fs-h3:        22px;   /* 500 · -0.01em  */
  --fs-pull:      24px;   /* 700 · -0.015em — verdict-moment quote */
  --fs-subtitle:  20px;   /* 400 · ink-2    */
  --fs-lead:      19px;   /* 300 · 1.55 — editorial intro (1.2× body) */
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-eyebrow:   11px;   /* 500 · 0.18em · RED */
  --fs-byline:    12px;   /* 500 · 0.14em · ink-3 */
  --fs-mono:      13px;

  /* ---------- Cover engine (1600 × 2560 px) — Heavy register ---------- */
  --cover-w:        1600px;
  --cover-h:        2560px;
  --cover-side:     128px;          /* 8% side margin */
  --cover-y-start:  220px;          /* Title group y */
  --cover-title1:   130px;          /* 800 · 0.95 · -5 tracking · charcoal */
  --cover-title2:   250px;          /* 850 · 0.93 · -4 tracking · red */
  --cover-subtitle: 60px;           /* 400 · 1.3 · 0 · charcoal */
  --cover-hook-1:   96px;           /* 800 · 1.0 · -3 · white */
  --cover-hook-2:   48px;           /* 400 · 1.3 · 0 · #F7C8C0 */
  --cover-wordmark: 50px;           /* Mixed weights */
  --cover-hook-radius: 18px;        /* Editorial, not soft app-card */
  --cover-hook-pad-y:  76px;
  --cover-hook-pad-x:  90px;

  /* ---------- Spacing — 8pt rhythm ---------- */
  --space-1:      8px;
  --space-2:      16px;
  --space-3:      24px;
  --space-4:      32px;
  --space-6:      48px;
  --space-8:      64px;
  --space-12:     96px;

  /* ---------- Layout ---------- */
  --max:          1080px;
  --pad-x:        32px;
  --pad-y:        96px;
  --grid-gap:     64px;
}

/* ============================================================
   Reset & defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

.book-brand {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--paper-warm);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.book-brand p { margin: 0; }
.book-brand a { color: inherit; text-decoration: none; }
.book-brand button { font-family: inherit; }
.book-brand img { display: block; max-width: 100%; }

/* ============================================================
   Typography helpers
   ============================================================ */
.book-brand .monument {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-monument);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.book-brand .h1 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.book-brand .h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.book-brand .h3 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.book-brand .subtitle {
  font-weight: var(--fw-regular);
  font-size: var(--fs-subtitle);
  color: var(--ink-2);
  line-height: 1.45;
}
.book-brand .lead {
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.book-brand .body {
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}
.book-brand .small {
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.book-brand .eyebrow {
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.book-brand .byline {
  font-weight: var(--fw-medium);
  font-size: var(--fs-byline);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.book-brand .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

/* Accent word inside headlines — the verdict carrier */
.book-brand .accent { color: var(--red); }

/* ============================================================
   Hairline rules
   ============================================================ */
.book-brand hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.book-brand .rule-top { border-top: 1px solid var(--ink); }

/* ============================================================
   Buttons — two only, square corners
   ============================================================ */
.book-brand .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.book-brand .btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.book-brand .btn-primary:hover {
  background: var(--red);
  border-color: var(--red);
}
.book-brand .btn-ghost {
  background: transparent;
  color: var(--ink);
}
.book-brand .btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ============================================================
   Inline code chip — 2px radius (only rounded element)
   ============================================================ */
.book-brand code, .book-brand .chip {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--ink);
}

/* ============================================================
   Tag
   ============================================================ */
.book-brand .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
}

/* ============================================================
   Verdict pull
   ============================================================ */
.book-brand .verdict {
  font-weight: var(--fw-bold);
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.book-brand .verdict .period { color: var(--red); }

/* ============================================================
   Brand mark / wordmark — "iamyb."
   IAM = Inter Light (300) · YB = Inter Bold (700) · . = Bold (red)
   ============================================================ */
.book-brand .wordmark {
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  font-size: 17px;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.book-brand .wordmark .i  { font-weight: 300; }
.book-brand .wordmark .am { font-weight: 300; }
.book-brand .wordmark .yb { font-weight: 700; }
.book-brand .wordmark .period { font-weight: 700; color: var(--red); }