/* =========================================================================
   קובי הרוש — Speaker Brand · v2
   "עוטף עזה" earth palette · Heebo Black system · long-form storytelling.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---- RAW PALETTE ------------------------------------------------------
     Israeli earth — desaturated, dusty, the soil of the Gaza envelope.
     Cool concrete + warm sand + military olive. Confidence without warmth.  */

  /* Paper — page surfaces. Warm chalky, like Jerusalem stone. */
  --paper-50:  #f3eee2;
  --paper-100: #ebe5d4;
  --paper-200: #ddd5be;
  --paper-300: #c9bf9f;

  /* Stone — cool gray-green concrete. Miguniyot, fortifications, asphalt. */
  --stone-100: #d4d2c8;
  --stone-300: #a4a197;
  --stone-500: #6c6a62;
  --stone-700: #3c3b36;
  --stone-900: #1a1a17;     /* text — warm near-black */

  /* Khaki — the canonical accent. Desaturated olive drab, not literal-military. */
  --khaki-100: #d6d2b3;
  --khaki-300: #989166;
  --khaki-500: #6c6740;     /* PRIMARY ACCENT */
  --khaki-700: #44412a;
  --khaki-900: #28271a;

  /* Sand — secondary accent, dusty desert tan. */
  --sand-200: #e3d5b3;
  --sand-400: #c0a878;
  --sand-600: #8a7548;

  /* Iron — deep brick / rust. Used for moments of weight: chapter dividers,
     the one strong CTA, the call number above key statements.            */
  --iron-500: #813d28;
  --iron-700: #5a2a1c;

  /* ---- SEMANTIC --------------------------------------------------------- */
  --fg-1: var(--stone-900);
  --fg-2: var(--stone-700);
  --fg-3: var(--stone-500);
  --fg-on-dark: var(--paper-50);
  --fg-on-accent: var(--paper-50);

  --bg-1: var(--paper-50);          /* page */
  --bg-2: var(--paper-100);         /* alt section */
  --bg-3: var(--paper-200);         /* deeper warm panel */
  --bg-inverse: var(--stone-900);   /* dark chapter */
  --bg-stone: var(--stone-700);     /* cool inverse */

  --accent: var(--khaki-500);
  --accent-hover: var(--khaki-700);
  --accent-deep: var(--iron-500);

  --rule: var(--paper-200);
  --rule-strong: var(--stone-700);

  /* ---- TYPOGRAPHY — Heebo only ----------------------------------------- */
  --font-display: 'Heebo', 'Arial Hebrew', system-ui, sans-serif;
  --font-body:    'Heebo', 'Arial Hebrew', system-ui, sans-serif;
  --font-mono:    'Heebo', 'Arial Hebrew', system-ui, sans-serif;  /* same, used with tracking */

  /* Type scale — long-form magazine feature.
     Big chapter numerals (very big), heavy weights, generous body size.    */
  --t-eyebrow:     0.75rem;   /* 12 */
  --t-meta:        0.8125rem; /* 13 */
  --t-body-sm:     0.9375rem; /* 15 */
  --t-body:        1.125rem;  /* 18 — generous reading */
  --t-body-lg:     1.375rem;  /* 22 — lead / pull-quote inline */
  --t-h4:          1.5rem;    /* 24 */
  --t-h3:          2rem;      /* 32 */
  --t-h2:          3rem;      /* 48 */
  --t-h1:          4.5rem;    /* 72 — chapter title */
  --t-display:     6rem;      /* 96 — opening line */
  --t-chapter-no: 14rem;      /* 224 — the chapter numeral */

  --lh-tight:   1.0;       /* chapter numerals */
  --lh-snug:    1.1;       /* display, h1 */
  --lh-normal:  1.25;      /* h2-h4 */
  --lh-loose:   1.65;      /* body Hebrew */

  --track-tight:   -0.02em;
  --track-display: -0.025em;
  --track-utility:  0.18em;
  --track-eyebrow:  0.22em;

  /* ---- SPACING ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;        /* chapter break */
  --space-12: 16rem;        /* opening clearance */

  /* ---- RADII — sharp, almost none --------------------------------------- */
  --r-0: 0;
  --r-1: 1px;
  --r-2: 2px;
  --r-3: 4px;
  --r-full: 9999px;

  /* ---- SHADOWS — minimal. Editorial photos don't float. ----------------- */
  --shadow-1: 0 1px 2px rgba(26, 26, 23, 0.06);
  --shadow-2: 0 6px 28px rgba(26, 26, 23, 0.12);
  --shadow-inset: inset 0 0 0 1px var(--rule);

  /* ---- MOTION ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 600ms;

  /* ---- LAYOUT ----------------------------------------------------------- */
  --measure: 56ch;
  --container: 1240px;
  --container-narrow: 760px;     /* prose spread */
  --container-text: 620px;       /* tight prose column */
  --gutter: max(24px, 4vw);
}

/* =========================================================================
   BASE
   ========================================================================= */
html { direction: rtl; }
html, body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tabular numerals everywhere */
body { font-feature-settings: "ss01", "tnum"; }

/* =========================================================================
   SEMANTIC TYPE — Heebo, heavy at the top, tight letter-spacing
   ========================================================================= */

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
  color: var(--stone-900);
}

.chapter-no {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-chapter-no);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--paper-300);
  font-feature-settings: "tnum";
  display: block;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--stone-900);
  margin: 0 0 var(--space-5);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-h2);
  line-height: var(--lh-normal);
  letter-spacing: var(--track-tight);
  color: var(--stone-900);
  margin: 0 0 var(--space-4);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h3);
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  color: var(--stone-900);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: var(--lh-normal);
  color: var(--stone-900);
  margin: 0 0 var(--space-3);
}

p, .body {
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-body-lg);
  font-weight: 500;
  line-height: 1.45;
  color: var(--stone-900);
  letter-spacing: -0.005em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  color: var(--accent);
  text-transform: uppercase;
}

.meta {
  font-family: var(--font-body);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--track-utility);
  color: var(--fg-3);
  text-transform: uppercase;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

.utility {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-utility);
  text-transform: uppercase;
  color: var(--fg-3);
}

a {
  color: var(--stone-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent-deep); }

hr, .rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}
.rule-strong { border-top: 1px solid var(--rule-strong); }
.rule-heavy  { border-top: 3px solid var(--stone-900); }