/* DispatchZap blog. Shares the lander's precision layer, tuned for reading:
   longer measure, higher contrast body, no accent flourishes competing with text. */

:root{
  --ground:#0C1219; --ground2:#111A24; --panel:#16212C; --panel2:#1D2A37;
  --line:#26323F; --line2:#1B2530;
  --ink:#E8EDF2; --ink2:#AEBBC7; --ink3:#6C7C8C;
  --amber:#F2A13C; --amber2:#C97A1E; --amberglow:rgba(242,161,60,.13);
  --good:#67C48A; --alert:#E4705E; --signal:#4FD1C5;

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:140ms; --t:220ms;
  --r-sm:2px; --r:3px; --r-lg:5px;
  --e1:0 1px 2px rgba(0,0,0,.34);
  --e2:0 6px 16px rgba(0,0,0,.36), 0 2px 4px rgba(0,0,0,.22);
  --edge:inset 0 1px 0 rgba(255,255,255,.055);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:18px; line-height:1.72; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.num,.mono,td,th,time{font-variant-numeric:tabular-nums}
.mono{font-family:Consolas,"SF Mono",Menlo,"Courier New",monospace}
.plate{
  font-family:"Arial Narrow","Helvetica Neue",Haettenschweiler,Impact,sans-serif;
  font-stretch:condensed; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; line-height:1.08;
}
.wrap{max-width:760px; margin:0 auto; padding:0 22px}
.wrap-wide{max-width:1000px; margin:0 auto; padding:0 22px}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px; border-radius:var(--r-sm)}
a{color:var(--amber)} a:visited{color:var(--amber)}

/* ---- nav ---- */
nav{border-bottom:1px solid var(--line2); background:rgba(12,18,25,.82); position:sticky; top:0; z-index:30;
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.03)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.mark{font-size:20px; text-decoration:none; color:var(--ink); white-space:nowrap}
.mark:visited{color:var(--ink)}
.mark .zap{color:var(--amber)}
.nav-cta{
  display:inline-block; padding:9px 17px; border:1px solid var(--amber2); color:var(--amber);
  text-decoration:none; font-size:13.5px; border-radius:var(--r); white-space:nowrap;
  box-shadow:var(--edge);
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--amberglow); border-color:var(--amber)}
.nav-cta:active{transform:scale(.98); transition-duration:var(--t-fast)}
.tape{height:6px; background:repeating-linear-gradient(115deg,var(--amber) 0 16px,var(--ground) 16px 32px); opacity:.45}

/* ---- index ---- */
header.blog-head{padding:clamp(38px,6vw,68px) 0 26px; text-align:center}
header.blog-head h1{font-size:clamp(32px,5.6vw,54px); margin:0 0 14px; letter-spacing:-.012em}
header.blog-head p{color:var(--ink2); margin:0 auto; max-width:56ch; font-size:17.5px}
.eyebrow{
  display:inline-block; font-size:11.5px; letter-spacing:.19em; color:var(--amber);
  border:1px solid var(--amber2); border-radius:var(--r); padding:5px 11px; margin-bottom:18px;
}
.posts{display:flex; flex-direction:column; gap:14px; padding:12px 0 70px}
.post-card{
  display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 26px; box-shadow:var(--e1), var(--edge);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.post-card:hover,.post-card:focus-visible{border-color:var(--amber2); box-shadow:var(--e2), var(--edge); transform:translateY(-2px)}
.post-card:active{transform:translateY(0); transition-duration:var(--t-fast)}
.post-card .meta{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3);
  font-family:"Arial Narrow",sans-serif; margin-bottom:9px; display:block}
.post-card h2{font-size:clamp(20px,2.8vw,26px); margin:0 0 10px; color:var(--ink); letter-spacing:-.01em}
.post-card p{margin:0; color:var(--ink2); font-size:16px}
.post-card .more{display:inline-block; margin-top:13px; color:var(--amber); font-size:14.5px; font-weight:600}

/* ---- article ---- */
article{padding:clamp(30px,5vw,54px) 0 60px}
.a-head{margin-bottom:34px; padding-bottom:26px; border-bottom:1px solid var(--line)}
.a-head h1{font-size:clamp(30px,5.2vw,50px); margin:0 0 16px; letter-spacing:-.014em; line-height:1.12; text-wrap:balance}
.a-meta{font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink3);
  font-family:"Arial Narrow",sans-serif}
.a-meta b{color:var(--ink2)}
article h2{font-size:clamp(22px,3.2vw,31px); margin:46px 0 14px; letter-spacing:-.012em; text-wrap:balance}
article h3{font-size:19px; margin:32px 0 10px}
article p,article li,.post-card p,header.blog-head p,.sources li{text-wrap:pretty}
article p{margin:0 0 18px; color:var(--ink2)}
article p strong,article li strong{color:var(--ink); font-weight:700}
article ul,article ol{margin:0 0 20px; padding-left:24px; color:var(--ink2)}
article li{margin-bottom:10px}
article .lede{font-size:20px; color:var(--ink)}
article .lede strong{color:var(--amber)}

blockquote{
  margin:24px 0; padding:16px 20px; border-left:4px solid var(--amber);
  background:var(--panel); border-radius:0 var(--r) var(--r) 0;
  font-style:italic; color:var(--ink2); font-size:17.5px;
}
blockquote p:last-child{margin-bottom:0}

.tbl{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  box-shadow:var(--e1), var(--edge); margin:24px 0}
table{border-collapse:collapse; width:100%; min-width:420px; font-size:16px}
th,td{padding:12px 15px; text-align:left; border-bottom:1px solid var(--line2); color:var(--ink2)}
thead th{background:var(--panel2); color:var(--ink); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; font-family:"Arial Narrow",sans-serif; border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
td:last-child,th:last-child{text-align:right; white-space:nowrap; font-family:Consolas,Menlo,monospace}
td strong{color:var(--ink)}

pre{background:var(--ground2); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; overflow-x:auto; font-family:Consolas,Menlo,monospace; font-size:14px;
  line-height:1.7; color:var(--ink2); margin:22px 0; font-variant-numeric:tabular-nums}

hr{border:0; border-top:1px solid var(--line); margin:38px 0}

.a-cta{border:1px solid var(--amber2); background:var(--amberglow); border-radius:var(--r-lg);
  padding:26px 26px 24px; margin:34px 0; text-align:center; box-shadow:var(--edge)}
.a-cta p{color:var(--ink2); margin:0 0 16px; font-size:17px}
.a-cta p strong{color:var(--ink)}
.btn{
  display:inline-block; background:var(--amber); color:#14100A; text-decoration:none;
  font-size:17px; font-weight:700; padding:14px 26px; border-radius:var(--r);
  border:1px solid #E0912C; box-shadow:var(--e1), inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:visited{color:#14100A}
.btn:hover,.btn:focus-visible{background:#FFB255; transform:translateY(-1px); box-shadow:var(--e2), inset 0 1px 0 rgba(255,255,255,.38)}
.btn:active{transform:translateY(0) scale(.985); transition-duration:var(--t-fast)}

.sources{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; margin-top:38px; box-shadow:var(--edge)}
.sources h3{margin:0 0 12px; font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--amber); font-family:"Arial Narrow",sans-serif}
.sources ul{margin:0; padding-left:20px}
.sources li{font-size:14.5px; color:var(--ink3); margin-bottom:9px}
.sources li b{color:var(--ink2)}
.sources .fine{font-size:13px; color:var(--ink3); margin:14px 0 0; font-style:italic}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); padding:28px 0 40px; text-align:center}
footer p{font-size:13px; color:var(--ink3); margin:0 auto 8px}
.ft-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-bottom:14px}
.ft-links a{font-size:13.5px; text-decoration:none; color:var(--ink2)}
.ft-links a:visited{color:var(--ink2)}
.ft-links a:hover,.ft-links a:focus-visible{color:var(--amber); text-decoration:underline}
footer a{color:var(--ink2)} footer a:visited{color:var(--ink2)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}