/* ============================================================================
   AFTERSHOCK · FIELD LOG — build-blog theme
   Reskin of the Jekyll build blog to match the Aftershock mission-control EOC
   aesthetic. Dark ground, IBM Plex Mono labels + IBM Plex Sans body, signal
   accents, faint board grid. Tuned for comfortable long-form reading on dark.
   ============================================================================ */

:root {
  --ground:      #090c13;
  --ground-2:    #0c1019;
  --surface:     #11161f;
  --panel:       #141a25;
  --raised:      #1a2230;
  --raised-2:    #212b3b;
  --line:        #232c3c;
  --line-strong: #33405a;
  --line-soft:   #1a2230;

  --t-hi:    #e8edf4;
  --t-body:  #b9c3d4;
  --t-mid:   #97a4ba;
  --t-lo:    #647186;
  --t-faint: #3f4a5c;

  --critical: #ff5d5d;
  --urgent:   #f6a723;
  --caution:  #ffd24a;
  --ok:       #34d399;
  --info:     #46b6f0;
  --violet:   #a78bfa;

  --ok-dim:       #0e2c22;
  --info-dim:     #102536;
  --critical-dim: #2a1316;

  --radius:   3px;
  --radius-lg:6px;
  --grid-line: rgba(120,150,190,0.045);
  --grid-line-strong: rgba(120,150,190,0.085);

  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;

  --measure: 64ch;
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--t-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(120% 70% at 50% -8%, #0e131d 0%, var(--ground) 52%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
  background-attachment: fixed;
  min-height: 100vh;
}

.mono { font-family: var(--font-mono); }
.micro {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t-lo); font-weight: 500;
}

::selection { background: rgba(70,182,240,0.28); color: var(--t-hi); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid var(--ground); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

a { color: var(--info); text-decoration: none; }

/* ============================================================================
   TOP COMMAND BAR
   ============================================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  height: 54px; padding: 0 var(--pad);
  background: rgba(10,13,19,0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--info), var(--ok));
  box-shadow: 0 0 8px -1px var(--info);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { width: 24px; height: 24px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.24em; color: var(--t-hi); }
.brand-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; color: var(--info); margin-top: 4px; }
.nav-spacer { flex: 1; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-mid); padding: 7px 11px; border-radius: var(--radius); white-space: nowrap;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px;
  transition: all .14s;
}
.nav-link:hover { color: var(--t-hi); background: var(--raised); border-color: var(--line); }
.nav-link .ext { opacity: .6; }
.nav-link.primary { color: var(--ok); border-color: rgba(52,211,153,0.3); }
.nav-link.primary:hover { background: var(--ok-dim); border-color: var(--ok); }

/* ============================================================================
   LAYOUT
   ============================================================================ */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }

/* ---- HERO ---- */
.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 64px); position: relative; }
.hero-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero-kicker .rule { height: 1px; width: 34px; background: var(--line-strong); }
.hero-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ok);
}
.hero-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion: reduce) { .hero-status .dot { animation: none; } }

.hero h1 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(34px, 6vw, 60px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--t-hi); margin: 0 0 24px; max-width: 16ch; text-wrap: balance;
}
.hero h1 .accent { color: var(--info); }
.hero-lead { font-size: clamp(16px, 2vw, 19px); line-height: 1.65; color: var(--t-mid); max-width: 60ch; margin: 0 0 30px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tagchip {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-mid); padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 100px;
  display: inline-flex; align-items: center; gap: 7px;
}
.tagchip .sw { width: 7px; height: 7px; border-radius: 2px; }

/* ============================================================================
   LOG (post list)
   ============================================================================ */
.log { padding: 0 0 clamp(64px, 10vw, 120px); }
.log-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.log-head h2 { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-hi); font-weight: 600; margin: 0; }
.log-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--t-lo); letter-spacing: 0.1em; }
.log-head .rule { flex: 1; height: 1px; background: var(--line-soft); }

.entry {
  display: grid; grid-template-columns: 92px 1fr; gap: clamp(16px, 3vw, 40px);
  padding: clamp(26px, 3.5vw, 38px) 16px;
  border-bottom: 1px solid var(--line); position: relative;
  text-decoration: none; transition: background .16s;
}
.entry::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: -1px; width: 2px;
  background: var(--info); transform: scaleY(0); transform-origin: top; transition: transform .2s ease;
}
.entry:hover { background: linear-gradient(90deg, rgba(70,182,240,0.05), transparent 60%); }
.entry:hover::before { transform: scaleY(1); }

.entry-idx { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.entry-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--info); letter-spacing: 0.08em; }
.entry-date { font-family: var(--font-mono); font-size: 11px; color: var(--t-lo); letter-spacing: 0.06em; }
.entry-read { font-family: var(--font-mono); font-size: 10px; color: var(--t-faint); letter-spacing: 0.06em; }

.entry-body { min-width: 0; }
.entry-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.flag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; border: 1px solid var(--line-strong); color: var(--t-mid);
}
.flag.warn { color: var(--urgent); border-color: rgba(246,167,35,0.35); }
.flag.crit { color: var(--critical); border-color: rgba(255,93,93,0.35); }
.flag.ok { color: var(--ok); border-color: rgba(52,211,153,0.35); }

.entry-title {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.2; letter-spacing: -0.01em; color: var(--t-hi); margin: 0 0 12px; text-wrap: pretty;
  transition: color .14s;
}
.entry:hover .entry-title { color: var(--info); }
.entry-excerpt { font-size: 15.5px; line-height: 1.6; color: var(--t-mid); margin: 0 0 16px; max-width: 62ch; }
.entry-more { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--info); display: inline-flex; align-items: center; gap: 7px; }
.entry-more .arr { transition: transform .18s; }
.entry:hover .entry-more .arr { transform: translateX(4px); }

/* ============================================================================
   ARTICLE (reader)
   ============================================================================ */
.reader { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 10vw, 120px); }
.backlink {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-lo);
}
.backlink:hover { color: var(--info); }
.backlink .arr { transition: transform .18s; }
.backlink:hover .arr { transform: translateX(-4px); }

.art-head { margin-bottom: clamp(36px, 5vw, 52px); }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; }
.art-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--info); padding: 4px 9px; border: 1px solid rgba(70,182,240,0.3); border-radius: 2px; }
.art-meta .m { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--t-lo); }
.art-meta .sep { color: var(--t-faint); }

h1.art-title {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--t-hi); margin: 0 0 24px; text-wrap: balance;
}
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- prose ---- */
.prose { max-width: var(--measure); counter-reset: h2c; }
.prose > * + * { margin-top: 1.45em; }
.prose p { color: var(--t-body); }
.prose .lead { font-size: 20px; line-height: 1.6; color: var(--t-mid); }
.prose a { color: var(--info); border-bottom: 1px solid rgba(70,182,240,0.32); transition: border-color .14s; }
.prose a:hover { border-bottom-color: var(--info); }
.prose strong { color: var(--t-hi); font-weight: 600; }
.prose em { color: var(--t-mid); }

.prose h2 {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25; letter-spacing: -0.01em; color: var(--t-hi);
  margin-top: 2.4em; margin-bottom: 0.1em; padding-top: 1.4em; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 14px;
  counter-increment: h2c;
}
.prose h2::before {
  content: counter(h2c, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--info); letter-spacing: 0.08em; flex: none;
}
.prose h3 { font-family: var(--font-sans); font-weight: 600; font-size: 19px; color: var(--t-hi); margin-top: 1.8em; }

.prose code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--raised); color: var(--violet);
  padding: 2px 6px; border-radius: 3px; border: 1px solid var(--line);
}

/* pull quote */
.pull {
  margin: 2em 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--info);
  font-family: var(--font-sans); font-weight: 500; font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.28; letter-spacing: -0.015em; color: var(--t-hi); max-width: 100%;
}
.pull .q-tag { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--info); margin-bottom: 14px; font-weight: 500; }

/* callout */
.callout {
  margin: 2em 0; padding: 18px 22px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(26,34,48,0.5), rgba(15,20,28,0.3)); position: relative;
}
.callout::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--urgent); }
.callout .c-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--urgent); margin-bottom: 8px; }
.callout p { margin: 0; color: var(--t-body); font-size: 16px; }

/* ---- data readout table ---- */
.readout-table {
  margin: 2.2em 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ground-2);
}
.readout-table .rt-cap {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-lo);
  background: var(--surface);
}
.readout-table .rt-cap .sq { width: 7px; height: 7px; border-radius: 2px; background: var(--info); }
table.rt { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13.5px; }
table.rt th, table.rt td { padding: 11px 16px; text-align: right; font-variant-numeric: tabular-nums; }
table.rt th:first-child, table.rt td:first-child { text-align: left; }
table.rt thead th {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-lo);
  font-weight: 500; border-bottom: 1px solid var(--line-strong); background: rgba(10,13,19,0.5);
}
table.rt tbody td { color: var(--t-mid); border-bottom: 1px solid var(--line-soft); }
table.rt tbody td:first-child { color: var(--t-body); }
table.rt tbody tr:last-child td { border-bottom: none; }
table.rt tbody tr.win td { color: var(--t-hi); background: rgba(52,211,153,0.06); }
table.rt tbody tr.win td:first-child { position: relative; color: var(--ok); font-weight: 600; box-shadow: inset 3px 0 0 var(--ok); }
table.rt tbody tr.win td strong { color: var(--ok); }
table.rt tbody tr.lose td { color: var(--t-lo); }
.win-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ok); border: 1px solid rgba(52,211,153,0.4); border-radius: 2px; padding: 1px 5px; margin-left: 8px; text-transform: uppercase; }

/* end-of-article CTA */
.art-cta {
  margin-top: 3em; padding: 26px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--ground-2));
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
.art-cta .cta-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-lo); width: 100%; }
.btn {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 18px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-strong); color: var(--t-hi); transition: all .14s;
}
.btn:hover { border-color: var(--info); background: var(--raised); }
.btn.solid { background: var(--info); color: #06121d; border-color: var(--info); font-weight: 600; }
.btn.solid:hover { background: #6bc4f5; }

.builtwith { margin-top: 2.4em; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--t-lo); font-style: normal; padding-top: 1.4em; border-top: 1px solid var(--line); }
.builtwith code { font-size: 12px; }

/* ============================================================================
   GENERIC MARKDOWN PROSE
   Plain kramdown output (markdown posts) styled to match the components above,
   so a normal markdown post looks native without hand-authored HTML. Raw-HTML
   components (.pull / .callout / .readout-table) remain available for emphasis.
   ============================================================================ */

/* first paragraph reads as a lead-in */
.prose > p:first-of-type { font-size: 20px; line-height: 1.6; color: var(--t-mid); }

/* lists */
.prose ul, .prose ol { padding-left: 1.3em; color: var(--t-body); }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--info); }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin-top: 0.5em; }

/* markdown blockquote -> pull-quote treatment */
.prose blockquote {
  margin: 2em 0; padding: 6px 0 6px 26px; border-left: 2px solid var(--info);
  font-family: var(--font-sans); font-weight: 500; font-size: clamp(20px, 3vw, 27px);
  line-height: 1.3; letter-spacing: -0.015em; color: var(--t-hi);
}
.prose blockquote p { margin: 0; color: inherit; font-size: inherit; }
.prose blockquote strong { color: var(--info); }

/* markdown tables -> data-readout look */
.prose table {
  width: 100%; border-collapse: collapse; margin: 2.2em 0;
  font-family: var(--font-mono); font-size: 13px; border: 1px solid var(--line);
  background: var(--ground-2);
}
.prose thead th {
  padding: 11px 14px; text-align: left;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-lo);
  font-weight: 500; border-bottom: 1px solid var(--line-strong); background: rgba(10,13,19,0.5);
}
.prose tbody td {
  padding: 10px 14px; color: var(--t-mid); border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.prose tbody td:first-child, .prose thead th:first-child { color: var(--t-body); }
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:hover td { background: rgba(70,182,240,0.035); }
.prose table strong { color: var(--t-hi); }

/* fenced code blocks */
.prose pre {
  background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.62;
}
.prose pre code { background: none; border: none; padding: 0; color: var(--t-body); font-size: inherit; }

/* horizontal rule + images */
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.6em 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }

/* ============================================================================
   FOOTER
   ============================================================================ */
.foot { border-top: 1px solid var(--line); background: var(--ground-2); padding: clamp(40px, 6vw, 60px) 0 clamp(36px,5vw,48px); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.foot-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.foot-name { font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.18em; color: var(--t-hi); }
.foot-desc { font-size: 14px; line-height: 1.6; color: var(--t-lo); max-width: 52ch; }
.foot-right { display: flex; flex-direction: column; gap: 12px; }
.foot-row { display: flex; align-items: center; gap: 10px; }
.foot-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-faint); width: 70px; flex: none; }
.foot-val { font-family: var(--font-mono); font-size: 12.5px; color: var(--t-mid); }
.foot-val a { color: var(--info); }
.foot-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.foot-bottom .micro { color: var(--t-faint); }

@media (max-width: 720px) {
  .entry { grid-template-columns: 1fr; gap: 14px; }
  .entry-idx { flex-direction: row; align-items: baseline; gap: 14px; }
  .foot-grid { grid-template-columns: 1fr; }
  .nav-links .label-hide { display: none; }
}