/* ============================================================
   THE TORN VEIL — Colors & Type
   White Editorial System.
   Crisp, minimal, professional, high-contrast, writer-led.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- PALETTE ----------
     White Editorial System.
     Default surface: pure white. Default text: ink black.
     One signature accent: Cobalt. Charcoal is reserved for YouTube only,
     never the default brand surface.
  */

  /* Core neutrals */
  --white:         #FFFFFF;
  --ink:           #050505;
  --neutral-gray:  #5F6368;
  --rule-gray:     #E5E7EB;

  /* Signature accent */
  --cobalt:        #0047AB;
  --cobalt-deep:   #003480;
  --cobalt-tint:   #E6EDF7;

  /* Drama surface — YouTube only */
  --charcoal:      #0B0C0E;

  /* ---------- ALPHA / SUPPORT ---------- */
  --ink-muted:     #5F6368;
  --ink-quiet:     #8A8F95;
  --ink-faint:     #E5E7EB;
  --rule-soft:     #E5E7EB;

  /* On-charcoal alphas — applied inside .lane-drama (YouTube only) */
  --white-muted:   rgba(255,255,255,0.74);
  --white-quiet:   rgba(255,255,255,0.52);
  --white-faint:   rgba(255,255,255,0.22);
  --rule-on-charcoal: rgba(255,255,255,0.22);

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --bg:            var(--white);
  --bg-raised:     #FFFFFF;
  --bg-sunken:     #F6F7F8;
  --bg-drama:      var(--charcoal);

  --fg:            var(--ink);
  --fg-muted:      var(--ink-muted);
  --fg-quiet:      var(--ink-quiet);

  --accent:        var(--cobalt);
  --rule:          var(--rule-soft);
  --rule-strong:   var(--ink);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:     "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-meta:     "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ---------- TYPE SCALE ---------- */
  --fs-meta-xs:    11px;
  --fs-meta-sm:    12px;
  --fs-meta:       13px;
  --fs-body-sm:    15px;
  --fs-body:       17px;
  --fs-body-lg:    19px;
  --fs-h6:         20px;
  --fs-h5:         24px;
  --fs-h4:         30px;
  --fs-h3:         38px;
  --fs-h2:         50px;
  --fs-h1:         68px;
  --fs-display:    96px;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:      0.92;
  --lh-snug:       1.08;
  --lh-default:    1.35;
  --lh-prose:      1.55;

  /* ---------- TRACKING ---------- */
  --tr-display:    0;
  --tr-wordmark:   0.08em;
  --tr-meta:       0.16em;
  --tr-meta-tight: 0.10em;

  /* ---------- SPACING (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- RADII ---------- */
  --r-0:  0px;
  --r-1:  2px;
  --r-2:  4px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-page:  none;
  --shadow-drama: 0 24px 60px -30px rgba(0,0,0,0.7);

  /* ---------- MOTION ---------- */
  --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:     140ms;
  --dur-base:     220ms;
  --dur-slow:     420ms;
}

/* ============================================================
   BASE
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   .lane-drama — opt-in CHARCOAL surface for YouTube only.
   ============================================================ */
.lane-drama {
  background: var(--bg-drama);
  color: var(--white);
  --fg: var(--white);
  --fg-muted: var(--white-muted);
  --fg-quiet: var(--white-quiet);
  --rule: var(--rule-on-charcoal);
  --ink-muted: var(--white-muted);
  --ink-quiet: var(--white-quiet);
}

/* --- DISPLAY (Fraunces) --- */
.display, .h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 144;
  color: var(--fg);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 96;
  margin: 0 0 var(--s-6);
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 72;
  margin: 0 0 var(--s-5);
  color: var(--fg);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-variation-settings: "opsz" 48;
  margin: 0 0 var(--s-4);
  color: var(--fg);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.15;
  font-variation-settings: "opsz" 36;
  margin: 0 0 var(--s-3);
  color: var(--fg);
}
h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-default);
  margin: 0 0 var(--s-3);
  color: var(--fg);
}
h6, .h6 {
  font-family: var(--font-meta);
  font-weight: 700;
  font-size: var(--fs-meta);
  line-height: var(--lh-default);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s-2);
}

/* --- BODY (Source Serif 4) --- */
p, .p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  margin: 0 0 var(--s-4);
  color: var(--fg);
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-body-lg); line-height: 1.5; }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.5; }

.lede {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink-muted);
  font-style: italic;
}
blockquote, .quote {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  font-style: italic;
  color: var(--fg);
  margin: 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 1px solid var(--cobalt);
}
.scripture {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--fg);
  font-feature-settings: "onum", "smcp";
}

/* --- META / UTILITY (Inter) --- */
.meta, .eyebrow, .label {
  font-family: var(--font-meta);
  font-weight: 700;
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.meta-sm {
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: var(--fs-meta-sm);
  letter-spacing: var(--tr-meta-tight);
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.meta-xs {
  font-family: var(--font-meta);
  font-weight: 700;
  font-size: var(--fs-meta-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.metadata-line {
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: var(--fs-meta-sm);
  letter-spacing: var(--tr-meta-tight);
  text-transform: uppercase;
  color: var(--cobalt);
}

/* --- WORDMARK --- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tr-wordmark);
  text-transform: uppercase;
  color: var(--fg);
  font-variation-settings: "opsz" 144;
}

/* --- ACCENT / EMPHASIS --- */
.accent  { color: var(--cobalt); }
.muted   { color: var(--ink-muted); }
.quiet   { color: var(--ink-quiet); }

/* --- HAIRLINE RULES --- */
.rule         { height: 1px; background: var(--rule-soft); border: 0; }
.rule-cobalt  { height: 1px; background: var(--cobalt); border: 0; }
.rule-thick   { height: 2px; background: var(--ink); border: 0; }

/* ============================================================
   SELECTION + LINKS
   ============================================================ */
::selection { background: var(--cobalt); color: var(--white); }

a {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-default);
}
a:hover { color: var(--cobalt-deep); }

.lane-drama a { color: var(--white); text-decoration-color: var(--cobalt); }
.lane-drama a:hover { color: var(--cobalt); }