:root{--ink:#1c2030;--bg:#f2f3f6;--blue:#2741b8;--blue-pale:#e4e8f8;--rule:#ccd0dd;--muted:#666c80}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
.hairline{height:3px;background:var(--blue)}
header.site{max-width:880px;margin:0 auto;padding:30px 22px 0}
.wordmark{font-weight:800;font-size:25px;color:var(--ink);text-decoration:none}
.wordmark::after{content:"·";color:var(--blue);margin-left:6px}
nav.main{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
nav.main a{border:1px solid var(--rule);border-top:3px solid transparent;background:#fff;padding:7px 14px;font-size:14px;color:var(--muted);text-decoration:none}
nav.main a:hover{color:var(--ink)}nav.main a.here{border-top-color:var(--blue);color:var(--blue);font-weight:700}
main{max-width:880px;margin:0 auto;padding:8px 22px 64px}
h1{font-size:34px;line-height:1.16;margin:30px 0 12px}
.deck{font-size:18.5px;color:var(--muted);margin:0 0 26px;max-width:700px}
.numwrap{display:flex;align-items:baseline;gap:16px;margin:42px 0 12px}
.numwrap .num{font-size:42px;font-weight:800;color:var(--blue-pale);-webkit-text-stroke:1.5px var(--blue);letter-spacing:-.02em;line-height:1}
.numwrap h2{font-size:21.5px;margin:0}
p{margin:0 0 16px;max-width:700px}
a{color:var(--blue)}
aside.callout{max-width:640px;margin:26px 0 26px 40px;padding:4px 18px 4px 0;border-right:4px solid var(--blue);font-style:italic;font-size:16px;color:#3a4055}
.dockband{background:#fff;border:1px solid var(--rule);border-left:5px solid var(--blue);padding:14px 18px;margin:34px 0;font-size:14.5px;color:var(--muted)}
figure.lede{margin:30px 0}figure.lede img{width:100%;height:auto;display:block;border-radius:6px}
figure.video{margin:30px 0}
figure.video .frame{position:relative;padding-top:56.25%;border-radius:6px;overflow:hidden;background:#11131c}
figure.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
figcaption{font-size:13.5px;color:var(--muted);margin-top:7px}
.chapterlist{margin:28px 0;padding:0;list-style:none;counter-reset:ch}
.chapterlist li{counter-increment:ch;background:#fff;border:1px solid var(--rule);margin:0 0 12px;padding:16px 18px 16px 64px;position:relative}
.chapterlist li::before{content:counter(ch,decimal-leading-zero);position:absolute;left:16px;top:14px;font-size:26px;font-weight:800;color:var(--blue)}
.chapterlist a{font-weight:700;font-size:17px;text-decoration:none;color:var(--ink)}
.chapterlist a:hover{color:var(--blue)}
.chapterlist p{margin:4px 0 0;font-size:14px;color:var(--muted)}
footer.site{background:#fff;border-top:1px solid var(--rule)}
footer.site .inner{max-width:880px;margin:0 auto;padding:22px;font-size:13px;color:var(--muted)}
@media(max-width:640px){h1{font-size:26px}.numwrap .num{font-size:30px}aside.callout{margin-left:12px}}
