/* Splot Labs — shared styles for article pages */
:root{
  --paper:#FAFAF8;--surface:#FFFFFF;--ink:#17191E;--civic:#1E3A5F;
  --slate:#5C6470;--tint:#EDF1F5;--hairline:#E4E3DE;--sage:#7E9A80;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--paper);color:var(--ink);
  font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
a{color:var(--civic)}
a:hover{text-decoration:underline}

/* header */
header.site{border-bottom:1px solid var(--hairline);background:var(--paper)}
.site .bar{max-width:1000px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.site .bar img{height:26px;display:block}
.site .bar .mail{font-size:15px;font-weight:500;text-decoration:none}

/* article */
article{padding:56px 0 40px}
.crumb{color:var(--slate);font-size:13px;margin-bottom:24px}
.crumb a{color:var(--slate)}
.eyebrow{color:var(--civic);display:block;margin-bottom:16px}
article h1{font-size:clamp(30px,5vw,44px);font-weight:300;letter-spacing:-.025em;line-height:1.12;max-width:20ch}
.meta{margin-top:20px;color:var(--slate);font-size:14.5px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--hairline)}
.lead{font-size:21px;line-height:1.6;color:var(--ink);margin:32px 0 8px;font-weight:300}
article h2{font-size:26px;font-weight:400;letter-spacing:-.01em;margin:44px 0 14px;line-height:1.25}
article h3{font-size:19px;font-weight:600;margin:28px 0 8px}
article p{margin:16px 0;color:#2b2e35}
article ul,article ol{margin:16px 0 16px 22px;color:#2b2e35}
article li{margin:8px 0}
article strong{font-weight:600;color:var(--ink)}
.callout{background:var(--tint);border:1px solid var(--hairline);border-radius:2px;padding:22px 26px;margin:28px 0;font-size:16.5px;color:#2b2e35}
.callout .mono{color:var(--civic);display:block;margin-bottom:8px}
.source-note{font-size:14px;color:var(--slate);border-top:1px solid var(--hairline);margin-top:40px;padding-top:20px}
.source-note a{color:var(--slate)}

/* timeline */
.timeline{position:relative;margin:28px 0 8px;padding-left:30px;border-left:2px solid var(--hairline)}
.tl-item{position:relative;padding-bottom:30px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-37px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--slate)}
.tl-item.done::before{background:var(--slate);border-color:var(--slate)}
.tl-item.now::before{background:var(--civic);border-color:var(--civic);box-shadow:0 0 0 4px rgba(30,58,95,.12)}
.tl-date{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--civic)}
.tl-item h3{margin:4px 0 4px;font-size:18px;font-weight:600}
.tl-item p{margin:0;color:var(--slate);font-size:16px}
.tl-tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--hairline);color:var(--slate);border-radius:2px;padding:1px 7px;margin-left:8px;vertical-align:middle}

/* cross-links */
.more{border-top:1px solid var(--hairline);margin-top:44px;padding-top:28px}
.more .mono{color:var(--slate);display:block;margin-bottom:14px}
.more a{display:block;font-size:18px;margin:8px 0;text-decoration:none;font-weight:500}
.more a:hover{text-decoration:underline}
.back-cta{margin:40px 0 8px}
.btn{display:inline-block;background:var(--civic);color:#fff;padding:11px 22px;border-radius:2px;text-decoration:none;font-size:15px;font-weight:500;border:1px solid var(--civic)}
.btn:hover{background:#16304f;text-decoration:none}

/* footer */
footer.site{padding:44px 0;background:var(--ink);color:var(--paper);margin-top:56px}
footer.site .in{max-width:1000px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer.site img{height:24px}
footer.site .mono{color:rgba(250,250,248,.6)}
footer.site a{color:var(--paper)}