/* Shared styles for build-log article pages (/posts/*.html) */
:root{
  --paper:#FCFBFA; --ink:#141219; --muted:#6C6A78; --rule:#E9E7E3; --spine:#D3CFC6;
  --accent:#3A2ED8; --accent-soft:#ECEBFC; --code:#F4F2EE;
  --display:"Space Grotesk",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#0D0C11; --ink:#F1EFEA; --muted:#9995A6; --rule:#242230; --spine:#332F44;
         --accent:#8B7DFF; --accent-soft:#1A1830; --code:#17151F; }
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:20px; line-height:1.65;
  -webkit-font-smoothing:antialiased; font-optical-sizing:auto}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
::selection{background:var(--accent); color:#fff}
.wrap{max-width:720px; margin:0 auto; padding:0 28px}

header.site{display:flex; align-items:baseline; justify-content:space-between; padding:26px 0 0}
.brand{font-family:var(--mono); font-size:14px; letter-spacing:.02em; font-weight:500; color:var(--ink)}
.brand a{color:inherit} .brand b{color:var(--accent)}
.brand .mark{width:22px; height:22px; border-radius:5px; vertical-align:middle; margin-right:8px}
nav.top{font-family:var(--mono); font-size:13px; color:var(--muted); display:flex; gap:22px}
nav.top a{color:var(--muted)} nav.top a:hover{color:var(--ink); text-decoration:none}

.back{font-family:var(--mono); font-size:13px; display:inline-block; margin:52px 0 0}
.back::before{content:"← "}
.a-meta{font-family:var(--mono); font-size:13px; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:22px 0 16px}
.a-meta .stage{color:var(--accent); font-weight:500}
.a-meta .repo{color:var(--ink)}
.a-meta .sep{opacity:.4}
h1{font-family:var(--display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(32px,5.5vw,46px); line-height:1.05; margin:0}
.dek{font-size:22px; color:var(--muted); margin:20px 0 0; line-height:1.5}
.byline{font-family:var(--mono); font-size:12.5px; color:var(--muted);
  margin:26px 0 0; padding:0 0 34px; border-bottom:1px solid var(--rule)}
.byline a{color:var(--ink)}

article{padding:38px 0 0}
article h2{font-family:var(--display); font-weight:600; letter-spacing:-.015em;
  font-size:27px; line-height:1.2; margin:48px 0 0}
article h2 + p{margin-top:14px}
article p{margin:22px 0 0}
article ul{margin:20px 0 0; padding-left:22px}
article li{margin:8px 0 0}
article strong{font-weight:600}
article code{font-family:var(--mono); font-size:.82em; background:var(--code);
  padding:2px 6px; border-radius:4px}
pre{font-family:var(--mono); font-size:14px; line-height:1.7; background:var(--code);
  border:1px solid var(--rule); border-radius:10px; padding:18px 20px; margin:26px 0 0;
  overflow-x:auto; color:var(--ink)}
pre code{background:none; padding:0; font-size:14px}
.pull{font-family:var(--display); font-weight:500; font-size:26px; line-height:1.3;
  letter-spacing:-.01em; margin:40px 0; padding:6px 0 6px 26px;
  border-left:3px solid var(--accent); color:var(--ink)}

.a-end{font-family:var(--mono); font-size:13px; color:var(--muted);
  margin-top:56px; padding:26px 0 0; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between}
.a-end a{color:var(--accent)}

footer{border-top:1px solid var(--rule); margin-top:44px; padding:30px 0 60px;
  font-family:var(--mono); font-size:13px; color:var(--muted)}
footer a{color:var(--muted)} footer a:hover{color:var(--ink); text-decoration:none}
footer .foot-row{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:baseline}

@media (max-width:640px){ body{font-size:19px} nav.top{display:none} .back{margin-top:34px} }