/* ==========================================================================
   The Boring Infra — shared stylesheet. Dark only, by design. There is no
   light mode here and prefers-color-scheme is deliberately not consulted.

   Source of truth: theboringinfra-design/BRAND.md (section 5).
   Every page links this file; do not hand-copy CSS into page markup.

   Interaction spec (see BRAND.md §5.1):
     - Inline text links invert on hover (the signature): accent background,
       dark text (matches the .stack accent-bar pattern).
     - Buttons (.btn) go accent on hover.
     - Article cards lift on hover: -3px, accent border, rule background,
       title to accent, lede to ink. No shadow, no whole-card inversion.
   ========================================================================== */
:root{
  --canvas:#101214; --ink:#D9DBD7; --accent:#8AB4D8; --muted:#7C8288; --rule:#262A2E;
  --bar-fill:#F4F4F2; --bar-text:#101214;

  --display:"Martian Mono",ui-monospace,"Courier New",monospace;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px;
  --measure:72ch;
}
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font:400 19px/1.75 var(--body); -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
.wrap{max-width:920px;margin:0 auto;padding:0 var(--s4);width:min(920px,94vw)}
.wrap-wide{max-width:1320px;margin:0 auto;padding:0 var(--s4);width:min(1320px,96vw)}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800}
h1{font-size:44px;line-height:1.05;letter-spacing:-.02em}
h2{
  font-size:32px;line-height:1.10;letter-spacing:-.015em;
  margin-top:var(--s6);margin-bottom:var(--s3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--rule);
}
h3{font-size:22px;line-height:1.15;letter-spacing:-.01em;font-weight:700;
   margin-top:var(--s5);margin-bottom:var(--s2)}
p{margin:0 0 var(--s3);max-width:var(--measure)}
.lede{font-size:21px;line-height:1.65}
@media(max-width:620px){
  h1{font-size:30px} h2{font-size:24px} h3{font-size:20px} .lede{font-size:19px}
}
.label{font:500 13px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.micro{font:500 11px/1.2 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
.label--accent{color:var(--accent)}

/* --- the signature ------------------------------------------------------- */
.stack{display:flex;flex-direction:column;align-items:flex-start;gap:.08em}
.stack>span{
  display:inline-block;line-height:1;padding:.16em .28em;
  background:var(--bar-fill);color:var(--bar-text);
}
.stack>span.a{background:var(--accent)}

/* --- links: invert on hover is the interaction signature ---------------- */
a{
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1px;text-underline-offset:3px;
}
a:hover,a:focus-visible{
  background:var(--accent);color:var(--bar-text);text-decoration:none;outline:none;
}

code{font:400 .92em/1 var(--mono);color:var(--accent)}
pre{
  background:#0A0C0E;color:var(--ink);border:1px solid var(--rule);
  padding:var(--s3);overflow-x:auto;font:400 15px/1.55 var(--mono);
  max-width:none;
}
pre code{color:inherit;font-size:inherit}
pre .c{color:var(--muted)}

/* --- structure ----------------------------------------------------------- */
header.top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;padding:var(--s5) 0;
}
/* the wordmark is a link but never looks like one. no underline, no bar on
   hover. bars are for headlines, and decorating the name breaks rule 6. */
.wordmark{font:700 20px/1 var(--display);letter-spacing:-.02em;white-space:nowrap;
          text-decoration:none;color:var(--ink)}
.wordmark i{font-style:normal;color:var(--accent)}
.wordmark:hover,.wordmark:focus-visible{background:none;color:var(--ink);text-decoration:none}
nav{display:flex;gap:var(--s4)}
nav a{text-decoration:none;font:500 13px/1.2 var(--mono);letter-spacing:.08em;
      text-transform:uppercase;color:var(--muted)}
nav a:hover{background:var(--accent);color:var(--bar-text)}

.hero{padding:var(--s6) 0 var(--s7)}
.hero .lede{margin-top:var(--s5)}

/* --- author block -------------------------------------------------------- */
.author{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:var(--s4) 0;margin:0 0 var(--s6);
}
.author p{margin:0;max-width:var(--measure)}
.author .who{font:700 15px/1.4 var(--display);letter-spacing:-.01em;margin-bottom:var(--s2)}

section{padding-bottom:var(--s6)}

.pagehead{padding:var(--s6) 0 var(--s7)}
.pagehead .label{margin-bottom:var(--s4)}

/* --- article pages ------------------------------------------------------- */
.meta{margin-bottom:var(--s4)}
.hed{margin-bottom:var(--s5)}
figure{margin:var(--s5) 0}
figure img{display:block;width:100%;height:auto;border:0}
figcaption{margin-top:var(--s2);font:500 11px/1.5 var(--mono);letter-spacing:.10em;
           text-transform:uppercase;color:var(--muted)}
ul{margin:0 0 var(--s3);padding-left:var(--s4);max-width:var(--measure)}
li{margin-bottom:var(--s2)}

/* --- article cards ------------------------------------------------------- */
.cards{margin-top:var(--s4);display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.card{
  border:1px solid var(--rule);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;color:var(--ink);
  transition:transform .15s ease;
}
.card time{font:500 11px/1.2 var(--mono);letter-spacing:.10em;
           text-transform:uppercase;color:var(--muted)}
.card .t{font-size:20px;line-height:1.35;text-decoration:underline;
         text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.card .d{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
/* card hover: lift, accent border, rule background, content brightens */
.card:hover,.card:focus-visible{border-color:var(--accent);background:var(--rule);transform:translateY(-3px)}
.card:hover .t{color:var(--accent)}
.card:hover .d{color:var(--ink)}
@media(max-width:760px){.cards{grid-template-columns:1fr}}

footer.bot{padding:var(--s5) 0 var(--s7);border-top:1px solid var(--rule)}
footer.bot a{font:500 11px/1.8 var(--mono);letter-spacing:.10em;text-transform:uppercase;
             color:var(--muted);text-decoration:none}
footer.bot a:hover{background:var(--accent);color:var(--bar-text)}
footer.bot a svg{vertical-align:-2px;margin-right:var(--s2)}
footer.bot p{margin:0;max-width:none}
.sep{color:var(--rule);padding:0 var(--s2);font-size:11px}