/* ============================================================
     § TOKENS, bento-cinema spec, Karibu palette substituted
     ============================================================ */
  /* DEFAULT (dark) tokens, see [data-theme="light"] below for light overrides */
  :root, [data-theme="dark"] {
    --bg:          #1a1a17;                  /* matches Karibu footer exactly (.bh-foot bg) */
    --card-bg:     #22221e;                  /* one shade up for card affordance */
    --cta-bg:      #0d0d0c;                  /* near pitch black for closing band */
    --fg-body:     oklch(0.92 0.012 78);     /* warm off-white body */
    --fg-white:    oklch(0.98 0.008 78);     /* headlines */
    --fg-muted:    oklch(0.62 0.010 56);     /* meta */
    --accent:      oklch(0.78 0.110 76);     /* Karibu warm gold */
    --accent-deep: oklch(0.66 0.114 70);
    --rule:        oklch(0.98 0.008 78 / 0.08);
    --rule-2:      oklch(0.98 0.008 78 / 0.18);
  }
  /* HERO is always dark-anchored, its gradient fades to dark for text legibility on top of
     a cinematic photo. In light mode, override H1 + dek back to ivory so they stay readable. */
  [data-theme="light"] .hero-h1,
  [data-theme="light"] .hero-h1 em,
  [data-theme="light"] .hero-eyebrow { color: oklch(0.98 0.008 78); }
  [data-theme="light"] .hero-h1 em,
  [data-theme="light"] .hero-eyebrow { color: oklch(0.78 0.110 76); }   /* gold for accent, lighter than the body's gold-deep */

  /* LIGHT theme, bone surface, ink type. Header + footer stay dark (Karibu dark-sandwich pattern). */
  [data-theme="light"] {
    --bg:          oklch(0.96 0.012 78);     /* bone */
    --card-bg:     #ffffff;                  /* pure white card surface for max contrast on cream */
    --cta-bg:      oklch(0.93 0.014 78);     /* slightly deeper cream for closing band */
    --fg-body:     oklch(0.32 0.014 56);     /* warm ink */
    --fg-white:    oklch(0.18 0.014 56);     /* deep ink for headlines */
    --fg-muted:    oklch(0.55 0.012 56);
    --accent:      oklch(0.56 0.108 70);     /* gold-deep, darker for legibility on light */
    --accent-deep: oklch(0.50 0.108 70);
    --rule:        oklch(0.22 0.014 56 / 0.10);
    --rule-2:      oklch(0.22 0.014 56 / 0.18);
  }
  :root {

    --serif:       "Cormorant Garamond", "Hoefler Text", Garamond, serif;
    --sans:        "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, serif;
    --mono:        "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);

    --gap-prose:   12px;
    --gap-block:   20px;
    --gap-section: 40px;
    --pad-edge:    24px;
    --max-wrap:    1280px;
  }
  @media (min-width: 900px) {
    :root { --pad-edge: 32px; }
  }

  *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-font-smoothing: antialiased; }
  html, body { background: var(--bg); color: var(--fg-body); }
  body {
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.75;
    font-weight: 400;
    min-height: 100dvh;
  }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; height: auto; }
  ul { list-style: none; }

  .wrap { max-width: var(--max-wrap); margin: 0 auto; padding: 0 var(--pad-edge); }

  /* Karibu site-header lives in /styles.css, no overrides needed here */

  /* ============================================================
     § HERO, 21:9 cinematic letterbox, title bottom-aligned
     ============================================================ */
  .hero { position: relative; aspect-ratio: 21/9; overflow: hidden; background: var(--bg); }
  .hero img { width: 100%; height: 100%; object-fit: cover; }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(26, 26, 23, 0.96) 100%);
    pointer-events: none;
  }
  .hero-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 0 var(--pad-edge) 40px;
    max-width: var(--max-wrap); margin: 0 auto;
  }
  .hero-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
  .hero-h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.014em;
    color: var(--fg-white);
    max-width: 22ch;
    margin-bottom: 16px;
  }
  .hero-h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
  .hero-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.98 0.008 78 / 0.55); display: inline-flex; gap: 14px; flex-wrap: wrap; }
  .hero-meta .dot { width: 3px; height: 3px; background: oklch(0.98 0.008 78 / 0.4); border-radius: 50%; align-self: center; }
  .hero-meta strong { color: oklch(0.98 0.008 78 / 0.78); font-weight: 500; }

  /* ============================================================
     § BENTO, 60/40 split, feature col + sticky sidebar
     ============================================================ */
  .bento {
    max-width: var(--max-wrap);
    margin: 0 auto;
    padding: 48px var(--pad-edge);
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  @media (min-width: 900px) {
    .bento {
      grid-template-columns: 1.5fr 1fr;
      gap: 40px;
      padding: 64px var(--pad-edge);
    }
  }

  /* ============================================================
     § FEATURE COLUMN, dark card, drop-cap, prose
     ============================================================ */
  .feature-col {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 36px 28px;
    border: 1px solid var(--rule);
  }
  @media (min-width: 900px) { .feature-col { padding: 56px 48px; } }

  .feature-col .dek {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.4;
    color: var(--accent);
    max-width: 48ch;
    margin-bottom: 28px;
  }

  .feature-col p {
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.75;
    color: var(--fg-body);
    margin: 0 0 1.15em;
    max-width: 64ch;
  }
  /* Drop-cap, first body paragraph only */
  .feature-col p.opener::first-letter {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 4em;
    float: left;
    line-height: 0.85;
    padding-right: 12px;
    padding-top: 6px;
    color: var(--accent);
  }

  .feature-col h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(26px, 2.6vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--fg-white);
    margin: 40px 0 16px;
  }

  .feature-col figure { margin: 32px 0; }
  .feature-col figure img {
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 4px;
    width: 100%; height: auto;
    filter: saturate(0.95);
  }
  .feature-col figcaption {
    font-family: var(--sans);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.5;
    color: oklch(0.98 0.008 78 / 0.55);
    margin-top: 10px;
    max-width: 52ch;
  }

  /* Pull quote, within feature card, accent rule + italic serif */
  .feature-col .pull {
    margin: 36px 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--accent);
  }
  .feature-col .pull blockquote {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.32;
    color: var(--accent);
    max-width: 36ch;
  }

  /* Tags + back row */
  .feature-foot {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
  }
  .feature-tags { display: flex; gap: 14px; flex-wrap: wrap; }
  .feature-tags li { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
  .feature-back { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: oklch(0.98 0.008 78 / 0.7); border-bottom: 1px solid var(--accent); padding-bottom: 3px; transition: color 160ms var(--ease-out); }
  .feature-back:hover { color: var(--accent); }

  /* ============================================================
     § SIDEBAR, sticky stack of 4 related-reads cards
     ============================================================ */
  .sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  @media (min-width: 900px) {
    .sidebar-col {
      position: sticky;
      top: 32px;
      align-self: start;
      gap: 20px;
    }
  }

  .sidebar-label {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
  }

  .related-card {
    background: var(--card-bg);
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 250ms var(--ease-out), border-color 250ms var(--ease-out);
    display: block;
  }
  .related-card:hover { transform: translateY(-3px); border-color: oklch(0.78 0.110 76 / 0.35); }
  .related-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: saturate(0.92); }
  .related-card-body { padding: 16px 18px 18px; }
  .related-card .tag {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .related-card h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.18;
    color: var(--fg-white);
    margin-bottom: 6px;
  }
  .related-card h3 em { font-style: italic; color: var(--accent); font-weight: 400; }
  .related-card .meta {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  /* ============================================================
     § CLOSING CTA STRIP, centered, tan-outlined button
     ============================================================ */
  .cta-strip {
    background: var(--cta-bg);
    padding: 56px var(--pad-edge);
    text-align: center;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  @media (min-width: 900px) { .cta-strip { padding: 80px var(--pad-edge); } }
  .cta-strip h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.012em;
    color: var(--fg-white);
    max-width: 22ch;
    margin: 0 auto;
  }
  .cta-strip h3 em { font-style: italic; color: var(--accent); font-weight: 400; }
  .cta-strip p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--fg-muted);
    max-width: 44ch;
    margin: 16px auto 28px;
    line-height: 1.45;
  }
  .cta-btn {
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background 200ms var(--ease-out), color 200ms var(--ease-out), transform 160ms var(--ease-out);
  }
  .cta-btn:hover { background: var(--accent); color: var(--bg); }
  .cta-btn:active { transform: scale(0.97); }

  /* § FOOTER, Karibu .bh-foot styles come from /blog-home-style.css */

  /* ============================================================
     § HEADER UTILITY CLUSTER, sits in the right column of .header-top,
     next to Contact. Elevates the whole header above the hero so the
     language dropdown is never clipped by later stacking contexts.
     ============================================================ */
  #site-header { position: relative; z-index: 50; }

  .header-utility {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: end;
  }
  /* Keep the existing .header-contact pinned to the right end of the cluster */
  .header-utility .header-contact { justify-self: auto; }
  .header-utility .header-contact ul { justify-self: auto; }
  /* Subtle vertical divider between language and Contact */
  .header-utility .header-contact { padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.12); }

  @media (max-width: 800px) {
    .header-utility { gap: 8px; }
    /* On mobile the Karibu CSS hides .header-contact and .header-social anyway;
       shrink the toggle so it fits the cramped row */
    .header-utility .theme-toggle button { padding: 5px 10px; font-size: 10px; }
    .header-utility .lang-trigger { padding: 5px 8px; font-size: 10px; }
    .header-utility .header-contact { display: none; }
  }

  /* Segmented theme toggle (Light / Dark / Auto) */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: transparent;
  }
  .theme-toggle button {
    appearance: none;
    background: transparent;
    border: 0;
    color: oklch(0.97 0.008 78 / 0.72);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 180ms var(--ease-out), color 180ms var(--ease-out), transform 160ms var(--ease-out);
    line-height: 1;
  }
  .theme-toggle button:hover { color: oklch(0.97 0.008 78 / 1); }
  .theme-toggle button:active { transform: scale(0.96); }
  .theme-toggle button[aria-pressed="true"] {
    background: var(--accent);
    color: #1a1a17;
  }
  .theme-toggle button[aria-pressed="true"]:hover { color: #1a1a17; }

  /* Language picker */
  .lang-picker { position: relative; }
  .lang-trigger {
    appearance: none;
    background: transparent;
    border: 0;
    color: oklch(0.97 0.008 78 / 0.75);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 6px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    transition: color 180ms var(--ease-out), background 180ms var(--ease-out);
    line-height: 1;
  }
  .lang-trigger:hover { color: oklch(0.97 0.008 78 / 1); background: rgba(255,255,255,0.05); }
  .lang-trigger svg { width: 10px; height: 10px; transition: transform 180ms var(--ease-out); }
  .lang-picker[data-open="true"] .lang-trigger svg { transform: rotate(180deg); }

  .lang-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #22221e;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 4px;
    min-width: 180px;
    max-height: min(60vh, 440px);    /* enough for 10 languages without overflow on short viewports */
    overflow-y: auto;
    box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6);
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
    z-index: 100;            /* clear of the hero stacking context */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
  }
  .lang-picker[data-open="true"] .lang-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .lang-panel button {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    color: oklch(0.97 0.008 78 / 0.85);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
  }
  .lang-panel button:hover { background: rgba(255,255,255,0.06); color: oklch(0.97 0.008 78 / 1); }
  .lang-panel button[aria-current="true"] { color: var(--accent); }
  .lang-panel button[aria-current="true"]::after { content: "✓"; opacity: 0.7; }

  /* ============================================================
     § PREVIEW CHIP, strip before production
     ============================================================ */
  .preview-chip {
    position: fixed; bottom: 16px; left: 16px; z-index: 50;
    background: var(--card-bg); border: 1px solid var(--rule-2);
    padding: 8px 14px; border-radius: 999px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent);
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4);
  }
  .preview-chip strong { color: var(--fg-white); margin-right: 8px; font-weight: 600; }

  /* ============================================================
     § HERDS-1993 BLOCK (matriarchal essay data viz)
     Three-row stat panel inside the feature card. The CSS only kicks
     in when a post body actually includes [HERDS-1993].
     ============================================================ */
  .herds {
    margin: 40px 0;
    padding: 28px 24px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--rule);
    border-radius: 6px;
  }
  [data-theme="light"] .herds { background: oklch(0.94 0.014 78); border-color: var(--rule-2); }
  .herds-eyebrow {
    font-family: var(--mono);
    font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .herds-h {
    font-family: var(--serif);
    font-weight: 500; font-size: 28px; line-height: 1.1;
    color: var(--fg-white);
    margin-bottom: 22px;
  }
  .herds-list { display: flex; flex-direction: column; gap: 18px; }
  .herds-row {
    display: grid;
    grid-template-columns: 92px 1fr 1.2fr;
    gap: 18px;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
  }
  .herds-row:first-child { border-top: 0; padding-top: 4px; }
  .herds-age { display: flex; flex-direction: column; align-items: flex-start; }
  .age-n {
    font-family: var(--serif);
    font-style: italic; font-weight: 500;
    font-size: 44px; line-height: 1;
    color: var(--fg-white);
  }
  .age-unit {
    font-family: var(--mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--fg-muted);
    margin-top: 4px;
  }
  .herds-decision { display: flex; flex-direction: column; gap: 4px; }
  .dec-label { font-family: var(--sans); font-size: 15px; color: var(--fg-body); line-height: 1.3; }
  .dec-sub   { font-family: var(--sans); font-style: italic; font-size: 13px; color: var(--fg-muted); line-height: 1.3; }
  .herds-mortality { display: flex; flex-direction: column; gap: 6px; }
  .mort-n {
    font-family: var(--mono);
    font-size: 18px; font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.02em;
  }
  .mort-bar {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
  }
  [data-theme="light"] .mort-bar { background: oklch(0.22 0.014 56 / 0.08); }
  .mort-fill { height: 100%; border-radius: 2px; }
  .mort-fill--low { background: var(--accent); }
  .mort-fill--catastrophic { background: oklch(0.58 0.16 28); }
  .mort-label {
    font-family: var(--mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--fg-muted);
  }
  .herds-row--outlier .mort-n { color: oklch(0.62 0.16 28); }
  .herds-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--fg-muted);
  }
  @media (max-width: 700px) {
    .herds-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  }

  /* ============================================================
     § CORRIDOR BLOCK (matriarchal essay node-path SVG)
     ============================================================ */
  .corridor {
    margin: 40px 0;
    padding: 28px 0 16px;
    text-align: center;
  }
  .corridor-svg-wrap { position: relative; padding: 0 8px; }
  .corridor-svg { width: 100%; height: auto; max-height: 70px; display: block; }
  .cor-path { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.55; }
  .cor-node { fill: var(--accent); }
  .corridor-labels {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 0;
    font-family: var(--mono);
    font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--fg-muted);
  }
  .cor-label { white-space: nowrap; }
  .corridor-sub {
    margin-top: 18px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--accent);
    line-height: 1.3;
  }