/* CSRC Journal — shared blog styles (mirrors site tokens) */
:root{
  --bl:8px;--lh:24px;--gutter:24px;--margin:48px;--maxw:1280px;
  --paper:#ffffff;--ink:#111315;--ink-soft:#5b6066;--accent:#e4002b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:var(--lh);
  -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:48px var(--margin) 96px}
.kicker{font-family:"Space Mono",monospace;font-size:12px;line-height:24px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0}
.kicker a{text-decoration:none}
.rule{border:none;border-top:2px solid var(--accent);margin:24px 0 48px}
.rule.hair{border-top:1px solid #d8dadd;margin:48px 0}
.mono{font-family:"Space Mono",monospace;font-size:13px;line-height:24px;color:var(--ink-soft)}
.mono-xs{font-family:"Space Mono",monospace;font-size:11px;line-height:16px;
  letter-spacing:.06em;color:var(--ink-soft)}

/* article */
article{max-width:720px}
article h1{font-size:56px;line-height:64px;font-weight:800;letter-spacing:-.03em;margin:0 0 24px}
article h2{font-size:28px;line-height:32px;font-weight:700;letter-spacing:-.02em;margin:48px 0 24px}
article p{font-size:18px;line-height:32px;margin:0 0 24px}
article ul,article ol{font-size:18px;line-height:32px;margin:0 0 24px;padding-left:24px}
article li{margin-bottom:8px}
article strong{font-weight:700}
article .lede{font-size:21px;line-height:32px;font-weight:600}
article blockquote{margin:0 0 24px;padding:0 0 0 24px;border-left:3px solid var(--accent);
  color:var(--ink-soft)}
.answer{background:#f4f5f6;padding:24px;margin:0 0 48px;border-top:2px solid var(--accent)}
.answer p{margin:0;font-size:18px;line-height:32px}

/* index cards */
.post{border-top:1px solid #d8dadd;padding:48px 0;display:grid;
  grid-template-columns:200px 1fr;gap:var(--gutter)}
.post h2{font-size:28px;line-height:32px;font-weight:700;letter-spacing:-.02em;margin:0 0 16px}
.post h2 a{text-decoration:none}
.post h2 a:hover{color:var(--accent)}
.post p{margin:0;color:var(--ink-soft)}
.more{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--accent)}

.foot{margin-top:96px;border-top:1px solid var(--ink);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
@media(max-width:800px){
  :root{--margin:32px}
  article h1{font-size:36px;line-height:40px}
  .post{grid-template-columns:1fr}
}