/* Engineering Explainer — bold editorial design system.
   Retune the whole look from the tokens in :root. */
:root{
  --paper:#F6F3EA; --panel:#FFFFFF; --ink:#16161A; --muted:#6B675C;
  --line:rgba(22,22,26,0.16); --line-strong:#16161A; --accent:#1A3BFF;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:920px; --read:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);letter-spacing:0.02em}

/* header / footer */
.topbar{max-width:var(--wrap);margin:0 auto;padding:18px 24px 12px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;border-bottom:3px solid var(--ink);flex-wrap:wrap}
.topbar .brand{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase}
.topbar nav{display:flex;gap:18px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a.hot{color:var(--accent)}
main{max-width:var(--wrap);margin:0 auto;padding:0 24px}
footer{max-width:var(--wrap);margin:48px auto 0;padding:14px 24px 40px;border-top:3px solid var(--ink);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
footer a:hover{color:var(--accent)}

/* hero */
.hero{padding:34px 0 18px;border-bottom:1px solid var(--line)}
.wordmark{font-family:var(--serif);font-weight:600;font-size:clamp(40px,9vw,72px);line-height:0.95;letter-spacing:-0.02em}
.tagline{color:var(--muted);font-size:13px;margin:14px 0 0}

/* featured */
.featured{padding:26px 0 30px;border-bottom:1px solid var(--line)}
.featured h1{font-family:var(--serif);font-weight:600;font-size:clamp(28px,5vw,44px);line-height:1.02;
  letter-spacing:-0.015em;margin:16px 0 14px;max-width:16ch}
.featured h1 a:hover{color:var(--accent)}
.featured .dek{font-size:clamp(17px,2.4vw,20px);line-height:1.5;color:#2C2A24;max-width:58ch;margin:0}
.featured .src{font-size:11px;text-transform:uppercase;color:var(--muted);margin:14px 0 0}

/* buttons */
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 0}
.btn{display:inline-block;font-weight:600;font-size:14px;background:var(--ink);color:var(--paper);
  padding:11px 18px;border:1.5px solid var(--ink)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* tags */
.tag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.04em;
  padding:4px 10px;border:1.5px solid var(--cat,var(--ink));color:var(--cat,var(--ink));white-space:nowrap}
.tag.sm{font-size:10px;padding:3px 8px}
.tag.solid{background:var(--cat,var(--ink));color:#fff;border-color:var(--cat,var(--ink));text-transform:uppercase}
.tag:hover{filter:brightness(0.85)}

/* category nav */
.catnav{display:flex;flex-wrap:wrap;gap:7px;padding:22px 0 18px}

/* section rule */
.rule{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);border-top:3px solid var(--ink);padding-top:12px;margin:6px 0 0}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0;
  border-top:1px solid var(--line);margin-top:0}
.card{padding:20px 22px 22px 0;border-bottom:1px solid var(--line)}
.grid .card:not(:last-child){border-right:0}
.card h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.12;margin:9px 0 8px}
.card h3 a:hover{color:var(--accent)}
.card .dek{font-size:14.5px;line-height:1.45;color:#3A382F;margin:0}
.card .src{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--muted);margin:10px 0 0}
@media(min-width:620px){
  .grid{grid-template-columns:1fr 1fr;column-gap:34px}
  .card{padding-left:0}
  .card:nth-child(odd){padding-right:34px;border-right:1px solid var(--line)}
  .card:nth-child(even){padding-left:34px}
}

/* article */
.post{max-width:var(--read);margin:0 auto;padding:30px 0 10px}
.post.narrow{max-width:var(--read)}
.post-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.post h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5.4vw,46px);line-height:1.02;
  letter-spacing:-0.018em;margin:0 0 14px}
.lede{font-size:clamp(18px,2.5vw,21px);line-height:1.45;color:#2C2A24;margin:0 0 26px;font-weight:400}
.paper,.papers{background:var(--panel);border:1.5px solid var(--ink);padding:16px 18px;margin:0 0 30px}
.paper .label,.papers .label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.papers .label{margin-bottom:10px}
.ptitle{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.2;margin:6px 0 6px}
.pauth{font-size:14px;color:#2C2A24}
.paff{font-size:11px;color:var(--muted);margin-top:2px}
.psrc{display:inline-block;margin-top:10px;font-weight:600;font-size:13px;color:var(--accent)}
.psrc:hover{text-decoration:underline}
.psrc.nolink{color:var(--muted);font-weight:500}
.psrc.nolink:hover{text-decoration:none}
/* multi-paper swipe carousel */
.paper-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:26px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.paper-track::-webkit-scrollbar{display:none}
.paper-slide{flex:0 0 100%;min-width:100%;scroll-snap-align:start}
.paper-nav{display:flex;align-items:center;gap:14px;margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.paper-nav button{font-family:var(--serif);font-size:19px;line-height:1;width:32px;height:32px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;border-radius:50%}
.paper-nav button:hover{background:var(--ink);color:var(--paper)}
.paper-count{font-size:11px;color:var(--muted)}

/* prose */
.prose{font-size:18px;line-height:1.72}
.prose p{margin:0 0 1.15em}
.prose h2{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.12;letter-spacing:-0.01em;
  margin:1.9em 0 0.5em}
.prose h3{font-family:var(--serif);font-weight:500;font-size:21px;margin:1.6em 0 0.4em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:600}
.prose code{font-family:var(--mono);font-size:0.86em;background:rgba(22,22,26,0.07);padding:1px 5px;border-radius:3px}
.prose ul{padding-left:1.1em;margin:0 0 1.15em}
.prose li{margin:0.3em 0}
.prose blockquote{margin:1.4em 0;padding:6px 0 6px 20px;border-left:3px solid var(--accent);
  font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* related */
.related{max-width:var(--read);margin:36px auto 0;border-top:3px solid var(--ink);padding-top:14px}
.related h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.related ul{list-style:none;padding:0;margin:0}
.related li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.related li a{font-family:var(--serif);font-size:18px}
.related li a:hover{color:var(--accent)}
.related li .mono{font-size:10px;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* categories index */
.catlist{margin-top:0}
.catrow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px 0;
  border-bottom:1px solid var(--line)}
.catrow .dot{width:14px;height:14px;background:var(--cat);border-radius:50%}
.catrow .cl{font-family:var(--serif);font-weight:500;font-size:22px}
.catrow .cb{grid-column:2;font-size:14px;color:var(--muted)}
.catrow .cn{font-size:13px;color:var(--muted)}
.catrow:hover .cl{color:var(--cat)}
@media(max-width:520px){.catrow{grid-template-columns:auto 1fr auto}.catrow .cb{grid-column:1 / -1}}

.cathead{padding:30px 0 18px;border-bottom:3px solid var(--ink)}
.cathead .dot{display:inline-block;width:16px;height:16px;background:var(--cat);border-radius:50%;vertical-align:middle;margin-bottom:6px}
.cathead h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,6vw,52px);margin:6px 0 8px;letter-spacing:-0.02em}
.cathead .dek{color:var(--muted);font-size:16px;margin:0;max-width:52ch}