/* Kippler flight log. Same two skies as the splash page; the choice is shared via localStorage "kippler.theme". Radius 0, hard shadows, steps() motion. */
:root, html[data-theme="interstellar"] {
  --bg:#05090c; --dim:#1b354c; --mid:#2f678d; --lit:#6f9dc4; --hover:#f3976e; --crest:#fbd7bb; --text:#deac8b; --muted:#668599;
  --period:#FF7E2E; --panel:#08111a; --live:#3ddc84;
}
html[data-theme="nebula"] {
  --bg:#050312; --dim:#2a2570; --mid:#5240c9; --lit:#9a63f5; --hover:#e35ce8; --crest:#f7d9ff; --text:#cdb8ff; --muted:#7d6ec4;
  --period:#e35ce8; --panel:#0b0722; --live:#3ddc84;
}

/* theme switch (matches the splash page's text toggle) */
.themes { display:inline-flex; align-items:center; font-size:12px }
.themes button { padding:0; font:inherit; color:var(--muted); background:none; border:0; cursor:pointer }
.themes button + button::before { content:"/"; margin:0 .5em; color:var(--dim) }
.themes button:hover { color:var(--text) }
.themes button[aria-pressed="true"] { color:var(--crest) }
footer .left { display:inline-flex; gap:18px; align-items:center; flex-wrap:wrap }
@font-face { font-family:"EB Garamond"; src:url("/src/fonts/eb-garamond-latin-wght-normal.woff2") format("woff2"); font-weight:400 800; font-display:swap }

* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--text); font-family:"JetBrains Mono", ui-monospace, Menlo, monospace; font-size:15px; line-height:1.75 }
a { color:var(--crest); text-decoration-color:var(--mid); text-underline-offset:3px }
a:hover { color:var(--hover); text-decoration-color:var(--hover) }
::selection { background:var(--hover); color:var(--bg) }

.wrap { max-width:760px; margin:0 auto; padding:0 16px }

/* top bar */
.top { border-bottom:1px solid var(--dim) }
.top .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1040px }
.mark { font-family:"Archivo", system-ui, sans-serif; font-weight:900; font-size:26px; letter-spacing:-.03em; color:var(--crest); text-decoration:none }
.mark span { color:var(--period) }
.top nav { display:flex; gap:20px; font-size:13px }
.top nav a { color:var(--muted); text-decoration:none }
.top nav a:hover, .top nav a[aria-current] { color:var(--crest) }
.status { display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted) }
.status i { width:7px; height:7px; background:var(--live); animation:blink 1.6s steps(2) infinite }
@keyframes blink { 50% { opacity:.25 } }
@media (prefers-reduced-motion:reduce) { .status i { animation:none } }

/* type */
h1, h2, h3 { font-family:"EB Garamond", Georgia, serif; font-weight:500; color:var(--crest); line-height:1.2; letter-spacing:.005em }
h1 { font-size:clamp(34px, 5.6vw, 52px); margin:0 0 18px }
h2 { font-size:clamp(26px, 3.6vw, 32px); margin:56px 0 14px }
h3 { font-size:22px; margin:32px 0 10px }
p { margin:0 0 18px }
ul, ol { padding-left:22px; margin:0 0 20px }
li { margin:0 0 8px }
strong { color:var(--crest); font-weight:600 }
code { font-family:inherit; color:var(--hover) }

.eyebrow { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:56px 0 14px }
.eyebrow b { color:var(--hover); font-weight:400 }
.meta { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted); margin:0 0 36px; padding-bottom:22px; border-bottom:1px solid var(--dim) }
.meta strong { color:var(--text); font-weight:400 }

/* window panel */
.panel { position:relative; background:var(--panel); border:1px solid var(--mid); box-shadow:8px 8px 0 var(--dim); margin:28px 0 36px }
.panel .bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-bottom:1px solid var(--mid); font-size:12px; color:var(--muted) }
.panel .bar i { width:9px; height:9px; background:var(--dim); border:1px solid var(--mid) }
.panel .bar span { margin-left:8px }
.panel .in { padding:18px 20px }
.panel .in p:last-child { margin:0 }
.answer .in { font-size:16px; color:var(--crest) }
.prompt { color:var(--hover) }

/* tables */
.table { overflow-x:auto; margin:24px 0 32px; border:1px solid var(--dim) }
table { width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.6 }
th, td { text-align:left; vertical-align:top; padding:10px 14px; border-bottom:1px solid var(--dim) }
th { color:var(--crest); font-weight:500; background:var(--panel) }
tr:last-child td { border-bottom:0 }
td:first-child { color:var(--crest) }

/* confidence tags (external: LOCKED and EARLY SIGNAL only, per brand book) */
.tag { display:inline-block; font-size:10.5px; letter-spacing:.14em; padding:1px 6px; border:1px solid currentColor; vertical-align:2px; margin-left:4px; white-space:nowrap }
.tag.locked { color:var(--live) }
.tag.early, .tag.trending { color:var(--hover) }

/* the organism speaks in serif */
.lede { font-family:"EB Garamond", Georgia, serif; font-size:clamp(21px, 2.6vw, 25px); line-height:1.45; color:var(--crest); margin:0 0 28px }
.sec { display:block; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:64px 0 -40px }
.sec b { color:var(--hover); font-weight:400 }

/* kipp> asides */
.kipp { margin:28px 0 32px; padding:16px 20px; border-left:3px solid var(--hover); background:var(--panel) }
.kipp .who { display:block; font-size:12.5px; color:var(--hover); margin-bottom:6px }
.kipp p { margin:0; font-family:"EB Garamond", Georgia, serif; font-size:20px; line-height:1.45; color:var(--crest) }

/* faq */
.faq details { border-top:1px solid var(--dim); padding:14px 0 }
.faq details:last-child { border-bottom:1px solid var(--dim) }
.faq summary { cursor:pointer; color:var(--crest); list-style:none }
.faq summary::before { content:"> "; color:var(--hover) }
.faq details[open] summary::before { content:"v "; }
.faq summary::-webkit-details-marker { display:none }
.faq details p { margin:10px 0 0 }

/* sources */
.sources { font-size:13px; color:var(--muted) }
.sources ol { padding-left:20px }

/* author */
.author { display:flex; gap:16px; align-items:flex-start; margin:56px 0 0; padding:20px; border:1px solid var(--dim) }
.author .av { flex:none; width:44px; height:44px; display:grid; place-items:center; background:var(--dim); color:var(--crest); font-family:"Archivo", sans-serif; font-weight:900 }
.author p { margin:0; font-size:13.5px }
.author b { color:var(--crest); font-weight:500 }

/* waitlist */
.waitlist .in { padding:26px 22px }
.waitlist h3 { margin:0 0 8px }
.waitlist p { color:var(--muted); margin:0 0 18px }
.waitlist form { display:flex; gap:10px; flex-wrap:wrap }
.waitlist input[type=email] { flex:1 1 240px; min-width:0; padding:10px 12px; font:inherit; font-size:14px; color:var(--crest); background:var(--bg); border:1px solid var(--mid); border-radius:0 }
.waitlist input[type=email]:focus { outline:2px solid var(--hover); outline-offset:0 }
.btn { padding:10px 18px; font:inherit; font-size:14px; background:var(--lit); color:var(--bg); border:0; border-radius:0; cursor:pointer }
.btn:hover { background:var(--hover) }
.waitlist .note { margin:12px 0 0; font-size:12px }

/* index */
.posts { list-style:none; padding:0; margin:32px 0 0 }
.posts li { margin:0 0 22px }
.post-card { display:block; text-decoration:none; background:var(--panel); border:1px solid var(--mid); box-shadow:8px 8px 0 var(--dim); padding:22px; transition:transform .12s steps(2), box-shadow .12s steps(2) }
.post-card:hover { transform:translate(-2px, -2px); box-shadow:10px 10px 0 var(--dim) }
.post-card .k { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.post-card h2 { margin:8px 0 8px; font-size:28px }
.post-card p { margin:0; color:var(--text) }

footer { margin-top:80px; border-top:1px solid var(--dim) }
footer .wrap { display:flex; justify-content:space-between; gap:12px; padding:22px 16px; font-size:12px; color:var(--muted); max-width:1040px }
footer a { color:var(--muted) }

@media (max-width:560px) {
  body { font-size:14.5px }
  .top nav { gap:14px }
  .top .status { display:none }
  .panel { box-shadow:5px 5px 0 var(--dim) }
}

/* blog index: grouped sections */
.jump { display:flex; flex-wrap:wrap; gap:8px 10px; margin:28px 0 8px; padding:0; list-style:none; font-size:12.5px }
.jump a { display:inline-block; padding:4px 10px; border:1px solid var(--dim); color:var(--text); text-decoration:none }
.jump a:hover { border-color:var(--hover); color:var(--crest) }
.group { scroll-margin-top:24px }
.group h2 { margin:8px 0 6px }
.group > p { color:var(--muted); margin:0 0 18px; max-width:60ch }
.posts.compact { margin:0 }
.posts.compact li { margin:0 0 14px }
.posts.compact .post-card { padding:16px 18px; box-shadow:6px 6px 0 var(--dim) }
.posts.compact .post-card h3 { margin:6px 0 6px; font-size:22px }
.posts.compact .post-card p { font-size:13.5px; color:var(--muted) }
.post-card .tag { margin-left:0 }
.group .sec { margin:64px 0 8px }

/* charts (validated palettes: dataviz validator, dark mode, all pairs pass) */
:root, html[data-theme="interstellar"] { --c1:#4a8fe0; --c2:#e2702f; --c3:#20a37f; --gridc:#14263a }
html[data-theme="nebula"] { --c1:#3d8cf0; --c2:#d84fd0; --c3:#20a37f; --gridc:#1d1850 }
.chart { margin:32px 0 36px; padding:18px 18px 12px; background:var(--panel); border:1px solid var(--dim) }
.chart figcaption { margin:0 0 10px }
.chart-title { display:block; font-family:"EB Garamond", Georgia, serif; font-size:21px; color:var(--crest); line-height:1.3 }
.chart-sub { display:block; font-size:12.5px; color:var(--muted); margin-top:2px }
.chart-legend { display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; padding:0; margin:0 0 8px; font-size:12.5px; color:var(--text) }
.chart-legend li { margin:0; display:flex; align-items:center; gap:7px }
.chart-legend i { width:12px; height:3px; display:inline-block }
.chart .plot { overflow-x:auto }
.chart svg { display:block; width:100%; min-width:540px; height:auto; font-family:"JetBrains Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums }
.chart .grid { stroke:var(--gridc); stroke-width:1 }
.chart .axis { stroke:var(--dim); stroke-width:1 }
.chart .tick, .chart .rowlab { fill:var(--muted); font-size:11px }
.chart .rowlab { fill:var(--text); font-size:12px }
.chart .ylab { fill:var(--muted); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase }
.chart .line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.chart .area { opacity:.1; stroke:none }
.chart .dot { stroke:var(--panel); stroke-width:2 }
.chart .hit { fill:transparent; cursor:crosshair }
.chart .bar { cursor:crosshair }
.chart .bar:hover, .chart .bar.on { opacity:.82 }
.chart .endval, .chart .capval, .chart .tipval { fill:var(--crest); font-size:11.5px }
.chart .mark-line { stroke:var(--muted); stroke-width:1 }
.chart .mark-label { fill:var(--muted); font-size:10.5px }
.chart-note { font-size:11.5px; color:var(--muted); margin:8px 0 4px }
.chart-data summary { cursor:pointer; font-size:12px; color:var(--muted) }
.chart-data summary:hover { color:var(--crest) }
.chart-data .table { margin:8px 0 4px }
.chart-tip { position:fixed; z-index:20; pointer-events:none; padding:6px 9px; font-size:12px; color:var(--crest); background:var(--bg); border:1px solid var(--lit); box-shadow:4px 4px 0 var(--dim); display:none; white-space:nowrap }
.chart .ref-line { stroke:var(--text); stroke-width:1.5; opacity:.7 }
.chart-legend i.ref-key { background:var(--text); opacity:.7; height:2px }