/* ============================================================
   UNBLOCK — Colors & Type
   ----------------------------------------------------------------
   The brand has two primary surfaces that share one type system:
     - "Day"   — warm cream + ink, for longform editorial reading
     - "Night" — soft-black + cream, for cinematic / bold moments
   Both modes draw from a shared "splash" palette of saturated
   jewel tones used sparingly (links, accents, highlights).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ─── BASE NEUTRALS — warm, never grey ─────────────────────── */
  --cream:        #ECEAE2;   /* primary day surface */
  --cream-warm:   #F5F0E8;   /* lighter alt */
  --cream-deep:   #E0DDD4;   /* card / inset */
  --paper:        #FDFCF9;   /* highest, like printed paper */

  --ink:          #1C1915;   /* primary text on cream */
  --ink-mid:      #4A443C;   /* secondary text */
  --ink-soft:     #908A81;   /* tertiary / labels */
  --rule:         #D5D1C8;   /* hairlines on cream */

  --soft-black:   #111010;   /* primary night surface */
  --char:         #1E1C17;   /* slightly warmer black */
  --char-2:       #2E2B24;   /* card on night */
  --night-rule:   rgba(255,255,255,0.08);

  /* ─── BRIGHT-WINTER SPLASH PALETTE ─────────────────────────── */
  /* Saturated jewel tones used sparingly against deep neutrals.
     Pick ONE splash per surface as primary; mix only intentionally. */
  --gold:         #C8973A;   /* core warm — links, accents */
  --gold-light:   #E8B96A;   /* hover / secondary */
  --gold-deep:    #A8791F;

  --terracotta:   #C4622D;   /* warmer, earthier accent */
  --terracotta-l: #E8A87C;

  --fuchsia:      #D6336C;   /* "bright winter" splash — bold */
  --fuchsia-l:    #F06292;
  --magenta:      #B5004C;   /* deeper, jewel */

  --electric:     #FF5A36;   /* vibrant coral-orange */
  --plum:         #5B2A4E;   /* deep plum, sparingly */
  --teal:         #1F6F6B;   /* cool jewel counterweight */

  /* ─── SEMANTIC ─────────────────────────────────────────────── */
  --bg:           var(--cream);
  --bg-alt:       var(--cream-deep);
  --fg:           var(--ink);
  --fg-mid:       var(--ink-mid);
  --fg-soft:      var(--ink-soft);
  --accent:       var(--terracotta);
  --accent-warm:  var(--gold);
  --accent-bold:  var(--fuchsia);
  --line:         var(--rule);

  /* ─── TYPE FAMILIES ────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Lora', Georgia, serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── TYPE SCALE ───────────────────────────────────────────── */
  /* Display = serif, light, italic-friendly. Body = serif Lora. UI = Inter. */
  --fs-eyebrow:   0.72rem;     /* 11.5px  — uppercase labels */
  --fs-caption:   0.82rem;     /* 13px    — small UI */
  --fs-body-sm:   0.92rem;     /* 14.7px  */
  --fs-body:      1.05rem;     /* 16.8px  — default reading */
  --fs-body-lg:   1.18rem;     /* 18.8px  — lede */
  --fs-h6:        1.1rem;
  --fs-h5:        1.3rem;
  --fs-h4:        1.6rem;
  --fs-h3:        2.0rem;
  --fs-h2:        2.6rem;
  --fs-h1:        clamp(2.8rem, 6vw, 5.2rem);
  --fs-display:   clamp(3.5rem, 8vw, 7rem);

  /* ─── SPACING (8px-ish, with editorial breathing) ──────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ─── RADII ────────────────────────────────────────────────── */
  /* UNBLOCK runs sharp. 2px is the workhorse; never bigger than 10px. */
  --r-sharp:  2px;
  --r-soft:   6px;
  --r-card:   10px;
  --r-pill:   999px;

  /* ─── ELEVATION — subtle, warm-tinted shadows ──────────────── */
  --shadow-1: 0 1px 2px rgba(28, 25, 21, 0.04);
  --shadow-2: 0 4px 16px rgba(28, 25, 21, 0.06);
  --shadow-3: 0 12px 40px rgba(28, 25, 21, 0.10);
  --shadow-glow: 0 0 32px rgba(214, 51, 108, 0.25);   /* fuchsia splash */

  /* ─── TIMING — slow, considered, never bouncy ──────────────── */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-quick:    150ms;
  --t-base:     220ms;
  --t-slow:     650ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES — drop-in classes
   ============================================================ */

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.h-display em, h1.display em { font-style: italic; font-weight: 300; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg);
}
h1 em, .h1 em { font-style: italic; font-weight: 300; }

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--fg);
}
h2 em, .h2 em { font-style: italic; }

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h5);
  line-height: 1.4;
  color: var(--fg);
}

h6, .h6 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h6);
  line-height: 1.4;
  color: var(--fg);
}

.lede, p.lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--fg-mid);
  font-weight: 400;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--fg-mid);
}

.body-ui {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-mid);
  font-weight: 400;
}

.eyebrow, .label {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--fg-soft);
  letter-spacing: 0.02em;
}

.pull-quote, blockquote.pull {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.45;
  color: var(--fg);
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a { color: var(--accent); text-decoration: none; transition: color var(--t-quick) var(--ease-out); }
a:hover { color: var(--accent-bold); }

em { font-style: italic; }

/* ── Night mode helper — flip semantic vars on a container ── */
.on-night,
.night {
  --bg:      var(--soft-black);
  --bg-alt:  var(--char-2);
  --fg:      var(--cream-warm);
  --fg-mid:  rgba(236, 234, 226, 0.65);
  --fg-soft: rgba(236, 234, 226, 0.35);
  --line:    var(--night-rule);
  background: var(--bg);
  color: var(--fg);
}

/* ── Ornament marks ────────────────────────────────────────── */
.ornament {
  display: inline-block;
  letter-spacing: 0.4em;
  color: var(--accent);
  opacity: 0.55;
  font-size: 0.9rem;
}
.ornament::before { content: '✦  ✦  ✦'; }