/* =============================================================================
   Kaipability — Dispatch shared stylesheet
   -----------------------------------------------------------------------------
   Loaded by every dispatch in /dispatches/<slug>/index.html via:
   <link rel="stylesheet" href="/assets/styles/dispatch.css">

   Edit this file once → every dispatch picks up the change.

   Per-page deltas (h1/sub sizing, unique components like .maptable or
   .lead-line) live in a tiny inline <style> block on the dispatch's own page.
   This file holds the design defaults that most dispatches use unchanged.

   Section guide:
     RESET & BASE
     DESIGN TOKENS                  ← brand colours, fonts, easings
     BODY (background drift, grain)
     READ PROGRESS BAR
     STICKY HEADER + theme switch
     LAYOUT (main, .wrap)
     COVER BLOCK (kicker, h1, .sub, .byline)
     HERO (.hero-fullbleed — full-bleed, BCG tint, scroll-bound shrink)
     ARTICLE TYPOGRAPHY (p, .lead, h2, em, strong)
     PULLQUOTE
     PANEL (key/value box)
     TIMELINE (dated list)
     DIVIDER (·  ·  ·)
     RELATED LINKS BLOCK
     FOOTER
   ============================================================================= */

/* ─── RESET & BASE ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--red);color:#fff}

/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root{
  --font-display:Georgia,"Georgia Pro","Times New Roman",serif;
  --font-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --bg:#FAFAF7;--panel:#F2F0EA;--card:#FFF;
  --ink:#1A1A18;--ink-2:#4A4946;--ink-3:#888780;
  --border:#DDDCD8;--border-strong:#B8B6B0;
  --red:#8B1A1A;--red-bright:#C8102E;--red-soft:rgba(139,26,26,.06);
  --easing:cubic-bezier(0.22,1,0.36,1);
  --easing-quick:cubic-bezier(0.4,0,0.2,1)
}
[data-theme="dark"]{
  --bg:#0E0F0D;--panel:#181915;--card:#1C1D18;
  --ink:#EDECE6;--ink-2:#B5B3AA;--ink-3:#807F77;
  --border:#2A2B26;--border-strong:#3F4039;
  --red:#E63951;--red-bright:#F25067;--red-soft:rgba(230,57,81,.10)
}

/* ─── BODY (background drift, grain, motion guard) ───────────────────────── */
@keyframes bgL{0%{background-color:#FAFAF7}25%{background-color:#F2F0EA}50%{background-color:#FAF2E6}75%{background-color:#EEF0F0}100%{background-color:#FAFAF7}}
@keyframes bgD{0%{background-color:#0E0F0D}25%{background-color:#161320}50%{background-color:#1A140E}75%{background-color:#0E1418}100%{background-color:#0E0F0D}}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;transition:background 400ms var(--easing-quick),color 400ms var(--easing-quick);animation:bgD 60s ease-in-out infinite}
[data-theme="light"] body{animation:bgL 60s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){body{animation:none!important}}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.025;mix-blend-mode:multiply;z-index:1}
[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.04}

/* ─── READ PROGRESS BAR (top edge, scroll-linked, populated by IIFE) ─────── */
.read-progress{position:fixed;top:0;left:0;width:0;height:2px;background:var(--red);z-index:200;transition:width 80ms linear;pointer-events:none}

/* ─── STICKY HEADER + theme switch ───────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border)}
.header-inner{max-width:1200px;margin:0 auto;padding:.85rem clamp(1.25rem,4vw,3rem);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:38px;width:auto;display:block}
.header-right{display:inline-flex;align-items:center;gap:1.25rem}
.back-link{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color 200ms}
.back-link:hover{color:var(--red)}
.back-link::before{content:"← "}
.theme-switch{display:inline-flex;align-items:center;gap:.5rem;background:none;border:none;padding:4px 2px;cursor:pointer;font:inherit;color:inherit}
.switch-icon{width:14px;height:14px;color:var(--ink-3);transition:color 300ms;flex-shrink:0}
[data-theme="light"] .switch-icon-sun{color:var(--red)}
[data-theme="dark"] .switch-icon-moon{color:var(--red)}
.switch-track{position:relative;width:38px;height:20px;background:var(--border);border-radius:100px;transition:background 300ms;flex-shrink:0}
[data-theme="dark"] .switch-track{background:var(--ink-2)}
.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--bg);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform 320ms var(--easing),background 300ms}
[data-theme="dark"] .switch-thumb{transform:translateX(18px);background:var(--red);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.theme-switch:focus-visible .switch-track{outline:2px solid var(--red);outline-offset:3px}
@media (max-width:600px){.brand img{height:28px}.back-link{font-size:.62rem;letter-spacing:.06em}.header-right{gap:.8rem}}
@media (max-width:400px){.brand img{height:24px}.switch-track{width:32px;height:18px}.switch-thumb{width:14px;height:14px}[data-theme="dark"] .switch-thumb{transform:translateX(14px)}}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
main{position:relative;z-index:2}
.wrap{max-width:720px;margin:0 auto;padding:0 clamp(1.25rem,5vw,2rem)}

/* ─── COVER BLOCK (kicker, h1, .sub, .byline) ────────────────────────────── */
.kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:500;display:flex;align-items:center;gap:.8rem}
.kicker::before{content:"";display:inline-block;width:28px;height:2px;background:var(--red)}
.cover{padding:clamp(3rem,9vh,6rem) 0 clamp(2rem,4vh,3rem)}
h1{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(2.4rem,7vw,4.2rem);line-height:1.04;letter-spacing:-.03em;color:var(--ink);margin:1.1rem 0 1.1rem}
h1 .it{color:var(--red);font-style:italic}
.sub{font-family:var(--font-display);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.42;color:var(--ink);max-width:40ch;margin-bottom:1.6rem}
.byline{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--border);padding-top:1.1rem}
.byline a{color:var(--red);text-decoration:none}
.byline a:hover{text-decoration:underline}

/* ─── HERO (.hero-fullbleed) ─────────────────────────────────────────────── */
/* Full-bleed (escapes 720px .wrap), 21:9 desktop / 10:16 mobile, brand-red BCG
   tint + grain overlays, scroll-bound shrink via --hero-h CSS variable.
   Driven by the parallax IIFE at the bottom of each dispatch page. */
.hero-fullbleed{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);height:var(--hero-h,calc(100vw * 9 / 21));margin-top:clamp(2rem,4vh,3rem);margin-bottom:clamp(2.5rem,5vh,3.5rem);overflow:hidden;background:var(--panel);isolation:isolate;transition:height 240ms ease-out}
.hero-fullbleed img{display:block;width:100%;height:100%;object-fit:cover;will-change:transform;transition:transform 90ms linear}
@media (max-width:760px){.hero-fullbleed{height:var(--hero-h,calc(100vw * 10 / 16))}}
.hero-fullbleed::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,transparent 38%,rgba(0,0,0,.45) 100%),linear-gradient(90deg,rgba(230,57,81,.18) 0%,transparent 18%,transparent 82%,rgba(230,57,81,.18) 100%),linear-gradient(to bottom,rgba(0,0,0,.12) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.20) 100%);mix-blend-mode:multiply;z-index:2}
[data-theme="light"] .hero-fullbleed::after{background:radial-gradient(ellipse at 50% 60%,transparent 45%,rgba(0,0,0,.22) 100%),linear-gradient(90deg,rgba(139,26,26,.16) 0%,transparent 18%,transparent 82%,rgba(139,26,26,.16) 100%),linear-gradient(to bottom,rgba(0,0,0,.06) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.10) 100%)}
.hero-fullbleed::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.10;mix-blend-mode:overlay;z-index:3}
@media (prefers-reduced-motion:no-preference){.hero-fullbleed img{opacity:0;transition:opacity 1100ms var(--easing)}.hero-fullbleed img.loaded{opacity:1}}

/* ─── ARTICLE TYPOGRAPHY ─────────────────────────────────────────────────── */
article{padding-top:clamp(1.5rem,4vh,2.5rem)}
article p{margin:0 0 1.25rem;line-height:1.74;color:var(--ink-2);font-size:1.13rem}
article p strong{color:var(--ink);font-weight:600}
em{font-style:italic;color:var(--red)}
.lead{font-size:1.2rem!important;line-height:1.6!important;color:var(--ink)!important}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.55rem,3.2vw,2.15rem);line-height:1.18;letter-spacing:-.015em;color:var(--ink);margin:.5rem 0 1.1rem}

/* ─── PULLQUOTE (italic Georgia + red left rule) ─────────────────────────── */
.pullquote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.35rem,2.8vw,1.85rem);line-height:1.38;color:var(--ink);border-left:3px solid var(--red);padding:.1rem 0 .1rem 1.4rem;margin:2.5rem 0}

/* ─── PANEL (key/value box) ──────────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--border);padding:1.4rem 1.6rem;margin:2rem 0}
.panel .row{margin:.55rem 0;color:var(--ink-2);line-height:1.6;font-size:1rem}
.panel .row:first-child{margin-top:0}
.panel .row:last-child{margin-bottom:0}
.panel .k{color:var(--ink);font-weight:600}

/* ─── TIMELINE (dated list) ──────────────────────────────────────────────── */
.timeline{border-left:2px solid var(--border);padding-left:1.5rem;margin:2rem 0}
.tl-entry{margin-bottom:1.2rem}
.tl-entry:last-child{margin-bottom:0}
.tl-year{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--red);font-weight:500}
.tl-text{font-size:1rem;color:var(--ink-2);line-height:1.6;margin-top:.2rem}
.tl-text .co{color:var(--ink);font-weight:600}

/* ─── DIVIDER (·  ·  ·) ──────────────────────────────────────────────────── */
.divider{height:1.5rem;margin:clamp(1.75rem,5vh,3rem) 0;display:flex;align-items:center;justify-content:center}
.divider::before{content:"·  ·  ·";color:var(--red);letter-spacing:.55em;font-size:1.4rem;opacity:.5;animation:divBreath 4.5s ease-in-out infinite}
@keyframes divBreath{0%,100%{opacity:.38;letter-spacing:.55em}50%{opacity:.78;letter-spacing:.62em}}
@media (prefers-reduced-motion:reduce){.divider::before{animation:none;opacity:.55}}

/* ─── RELATED LINKS BLOCK (end-of-dispatch cross-links) ──────────────────── */
.related{border-top:1px solid var(--border);margin-top:3rem;padding-top:1.75rem}
.related .h{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:1rem}
.related a{display:block;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-size:1.1rem;padding:.6rem 0;border-top:1px solid var(--border);transition:color 200ms,padding-left 200ms}
.related a:first-of-type{border-top:none}
.related a:hover{color:var(--red);padding-left:.4rem}
.endspace{height:clamp(2rem,5vh,3.5rem)}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
footer.site-footer{border-top:1px solid var(--border);padding:2rem 0 2.5rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-3);position:relative;z-index:2}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
footer.site-footer a{color:var(--ink-2);text-decoration:none;transition:color 200ms}
footer.site-footer a:hover{color:var(--red)}
.footer-left{display:inline-flex;align-items:flex-start;gap:.65rem}
.footer-mark{display:inline-flex;align-items:center;flex-shrink:0;width:22px;height:22px;opacity:.85;transition:opacity 200ms;margin-top:1px}
.footer-mark:hover{opacity:1}
.footer-mark img{display:block;height:22px;width:22px}
@media (max-width:760px){.footer-mark{width:auto;height:auto;margin-top:0;padding:6px;margin:-6px 0 -6px -6px}.footer-mark img{height:26px;width:26px}}