/* ============================================================
   Carry — Colors & Type
   "Editorial-financial. The Browser meets a leather-bound LP letter."
   ============================================================ */

/* --- Fonts (Google Fonts CDN) ---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------
     CORE PALETTE  ·  Four colors. Never more. No blue. No gradients.
     ------------------------------------------------------------ */
  --ink:        #0E0E0C;  /* Near-black, slightly warm. Body text, primary surfaces in dark mode. */
  --oxblood:    #5C1A1B;  /* The single editorial accent. The period after "Carry." */
  --paper:      #F4EFE6;  /* Warm off-white. The default background. */
  --thread:     #B89968;  /* Warm tan. Highlights, small marks, dividers. */

  /* ------------------------------------------------------------
     EXTENDED NEUTRALS  ·  derived from Paper / Ink for hierarchy.
     ------------------------------------------------------------ */
  --paper-2:    #ECE5D7;  /* Slightly deeper paper — cards on paper. */
  --paper-3:    #E2D9C6;  /* Hairlines, borders, low-emphasis. */
  --ink-2:      #2A2A26;  /* Secondary text, headings on paper. */
  --ink-3:      #5A574E;  /* Tertiary / meta text. */
  --ink-4:      #8B8779;  /* Captions, disabled, watermark text. */

  /* ------------------------------------------------------------
     SEMANTIC FOREGROUND / BACKGROUND
     Used by components. Swap these in dark mode.
     ------------------------------------------------------------ */
  --bg:         var(--paper);
  --bg-raised: var(--paper-2);
  --bg-inset:   var(--paper-3);

  --fg-1:       var(--ink);       /* Primary text */
  --fg-2:       var(--ink-2);     /* Headings, strong */
  --fg-3:       var(--ink-3);     /* Secondary / meta */
  --fg-4:       var(--ink-4);     /* Tertiary / captions */

  --rule:       rgba(14, 14, 12, 0.16);   /* Default hairline */
  --rule-soft:  rgba(14, 14, 12, 0.08);

  --accent:     var(--oxblood);
  --accent-ink: var(--paper);     /* Text on oxblood */
  --mark:       var(--thread);

  /* ------------------------------------------------------------
     TYPE FAMILIES
     Three faces. One register.
     ------------------------------------------------------------ */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-logo:    'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ------------------------------------------------------------
     TYPE SCALE  ·  editorial, generous. Sized for desktop.
     ------------------------------------------------------------ */
  --t-display:   clamp(48px, 7.2vw, 112px);   /* Wordmark, hero */
  --t-h1:        clamp(36px, 4.4vw, 64px);    /* Page titles */
  --t-h2:        clamp(28px, 3vw, 44px);      /* Section headings, episode titles */
  --t-h3:        20px;                        /* Sub-headings, eyebrow titles */
  --t-lead:      19px;                        /* Lede paragraphs */
  --t-body:      16px;                        /* Default body */
  --t-small:     14px;                        /* Captions */
  --t-meta:      12px;                        /* Mono labels, tags, timestamps */

  --leading-tight: 1.08;
  --leading-snug:  1.22;
  --leading-body:  1.55;
  --leading-loose: 1.7;

  --track-tight:   -0.02em;   /* Display */
  --track-normal:   0;
  --track-mono:    0.06em;    /* All-caps mono labels */
  --track-eyebrow: 0.18em;    /* Section eyebrows: "→ T H E P A T H" */

  /* ------------------------------------------------------------
     SPACING  ·  8pt base, generous editorial whitespace
     ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ------------------------------------------------------------
     RADII  ·  Almost flat. Editorial restraint.
     ------------------------------------------------------------ */
  --radius-0: 0;        /* Default — most surfaces are square */
  --radius-1: 2px;      /* Inputs, chips */
  --radius-2: 4px;      /* Buttons */
  --radius-3: 999px;    /* Pills (used sparingly: subscribe button) */

  /* ------------------------------------------------------------
     ELEVATION  ·  Almost never used. Hairlines do the work.
     ------------------------------------------------------------ */
  --shadow-1: 0 1px 0 var(--rule);                          /* Hairline underline */
  --shadow-2: 0 1px 2px rgba(14, 14, 12, 0.06);             /* Card resting */
  --shadow-3: 0 8px 24px -8px rgba(14, 14, 12, 0.14);       /* Hover lift */

  /* ------------------------------------------------------------
     MOTION  ·  Slow, calm, never bouncy.
     ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Wordmark — Carry. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display);
  letter-spacing: var(--track-tight);
  line-height: 1;
  color: var(--fg-1);
}
.wordmark::after {
  content: ".";
  color: var(--accent);
}

/* Display / hero */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

/* Italic display for emphasis — never bold */
em.display, .display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--fg-2);
  margin: 0;
}

/* Eyebrow — "→ T H E P A T H" style */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow::before { content: "→  "; color: var(--accent); }

p, .body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0 0 1em 0;
}

.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: var(--leading-loose);
  color: var(--fg-2);
}

.small  { font-size: var(--t-small); color: var(--fg-3); }
.meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  color: var(--fg-2);
}

/* Editorial divider — thin oxblood rule, used at top of sections */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-6) 0;
}
.rule-accent {
  border: 0;
  border-top: 1px solid var(--accent);
  width: 32px;
  margin: 0 0 var(--space-4) 0;
}

/* Links — underline-only. No color change. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-base) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); }