:root{--b:#1f4e8c;--bg:#e8edf2}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#000;font:17px/1.7 "Public Sans",system-ui,sans-serif}
a{color:var(--b)}a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--b);outline-offset:2px}
header.site{background:var(--b);color:#fff;padding:18px 20px}
.in{max-width:760px;margin:0 auto}
.brand{color:#fff;font-weight:700;font-size:24px;text-decoration:none}
.tag{margin:2px 0 0;font-size:14px;color:#dce6f3}
nav.arts{background:#fff;border-bottom:2px solid var(--b);padding:10px 20px;font-size:14px}
nav.arts .in{display:flex;flex-wrap:wrap}
nav.arts a{text-decoration:none;padding:0 12px;border-left:1px solid #8aa1c0}
nav.arts a:first-child{padding-left:0;border-left:0}
nav.arts a:hover{text-decoration:underline}
main{padding:28px 20px 40px}
h1{font-weight:700;font-size:clamp(26px,4.4vw,36px);line-height:1.2;margin:0 0 8px}
h2{font-weight:700;font-size:22px;margin:34px 0 10px;color:var(--b)}
.byline{font-size:14px;color:#333;margin-bottom:20px}
.toc{border:2px solid var(--b);padding:14px 18px;margin:0 0 26px;background:transparent}
.toc strong{display:block;font-size:13px;letter-spacing:.08em;margin-bottom:6px}
.toc ol{margin:0;padding-left:20px}.toc li{margin:2px 0}
.notice{border:2px solid #000;padding:22px 16px 12px;margin:22px 0;position:relative;background:#fff}
.notice::before{content:"NOTICE";position:absolute;top:-1px;left:-1px;background:#000;color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;padding:2px 8px}
p{margin:0 0 16px}
.more{margin-top:36px;border:2px solid var(--b);padding:14px 18px;background:#fff}
.more h3{margin:0 0 6px;font-size:16px}.more ul{margin:0;padding-left:18px}
.bio{margin-top:26px;font-size:15px;border-top:1px solid #9fb0c6;padding-top:12px}
footer{background:#fff;border-top:2px solid var(--b);padding:16px 20px 30px;font-size:13px}
@media(max-width:480px){body{font-size:16.5px}h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}