:root{--ink:#22303C;--muted:#5B6B77;--steel:#3F6587;--steel-deep:#2E4D69;--cyan:#2AA9D2;--band:#F4F7F9;--line:#D9E1E7;
--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--steel);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--steel-deep)}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);color:var(--steel);font-weight:500;margin:0;line-height:1.2}
p{margin:0 0 1em}
.wrap{max-width:900px;margin:0 auto;padding:0 24px}
header{border-bottom:1px solid var(--line);background:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--steel-deep)}
.brand svg{width:26px;height:26px;flex:none}
.brand span{font-family:var(--serif);font-size:20px}
nav{display:flex;gap:22px;font-size:15.5px}
nav a{color:var(--ink);text-decoration:none}
nav a:hover{color:var(--steel)}
main{padding:48px 0 64px}
.title{display:inline-block;font-size:28px;padding-bottom:9px;border-bottom:2px solid var(--cyan);margin-bottom:26px}
section+section{margin-top:56px}
/* home */
.intro{font-size:20px;max-width:62ch;margin-bottom:8px}
.intro-sub{color:var(--muted);max-width:62ch;font-size:16.5px}
.list{list-style:none;margin:0;padding:0}
.list li{padding:20px 0;border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list h3{font-size:21px;margin-bottom:5px}
.list h3 a{text-decoration:none}
.list h3 a:hover{text-decoration:underline}
.list .meta{color:var(--muted);font-size:14.5px;margin-bottom:8px}
.list p{max-width:70ch;font-size:16.5px;margin-bottom:8px}
.list .links{font-size:15px}
.list .links a+a{margin-left:18px}
.about{display:grid;grid-template-columns:1fr 200px;gap:40px;align-items:start}
.about p{max-width:62ch}
.about img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.vcard{font-style:normal;line-height:1.75}
.vcard .lbl{color:var(--muted);display:inline-block;width:80px}
@media (max-width:700px){.about{grid-template-columns:1fr}.about img{max-width:180px}nav{display:none}}
/* article */
.crumb{font-size:15px;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--muted)}
article h1{font-size:34px;margin-bottom:10px;max-width:24ch}
.sub{font-size:19px;color:var(--ink);max-width:62ch;margin-bottom:14px}
.byline{color:var(--muted);font-size:15.5px;padding-bottom:22px;margin-bottom:34px;border-bottom:2px solid var(--cyan);display:inline-block;min-width:60%}
.byline a{white-space:nowrap}
.body{max-width:70ch}
.body h2{font-size:24px;margin:40px 0 12px}
.body h3{font-size:19px;color:var(--steel-deep);margin:22px 0 8px}
.body ul,.body ol{margin:0 0 1em;padding-left:1.3em}
.body li{margin-bottom:.45em}
.body table{border-collapse:collapse;width:100%;margin:12px 0 20px;font-size:15.5px;line-height:1.45}
.body th,.body td{border-top:1px solid var(--line);padding:9px 10px 9px 0;text-align:left;vertical-align:top}
.body thead th{color:var(--steel-deep);font-weight:600;border-top:0;border-bottom:2px solid var(--line)}
.body tbody th{font-weight:600;color:var(--steel-deep)}
.body tbody tr:last-child td,.body tbody tr:last-child th{border-bottom:1px solid var(--line)}
.body figure{margin:18px 0 24px}
.body figure img{max-width:100%;height:auto;display:block;border:1px solid var(--line);padding:10px;background:#fff}
.body figcaption{font-size:14.5px;color:var(--muted);margin-top:8px}
.body .fn{font-size:14.5px;color:var(--muted)}
.body .note{background:var(--band);padding:12px 16px;font-size:15.5px;border-left:3px solid var(--cyan)}
.tail{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);max-width:70ch;font-size:15px;color:var(--muted)}
.tail h2{font-size:18px;color:var(--steel);margin-bottom:8px}
.tail .contact{color:var(--ink);font-size:16px}
.more{margin-top:40px;max-width:70ch}
.more h2{font-size:20px;margin-bottom:10px}
.more ul{list-style:none;padding:0;margin:0}
.more li{padding:8px 0;border-top:1px solid var(--line);font-size:16px}
.more li:last-child{border-bottom:1px solid var(--line)}
.more .d{color:var(--muted);font-size:14px;margin-left:8px}
@media (max-width:700px){article h1{font-size:28px}.body table{display:block;overflow-x:auto}}
footer{border-top:1px solid var(--line);padding:26px 0 40px;font-size:14px;color:var(--muted)}
footer p{max-width:84ch}