*{box-sizing:border-box}body{margin:0;background:#f6f4f1;color:#292524;font:18px/1.75 Palatino,"Palatino Linotype",Georgia,serif}
a{color:#3f3a32}.frame{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.index{position:sticky;top:0;align-self:start;padding:32px 18px;border-right:1px solid #e7e5e4;background:#f6f4f1}
.mark{display:flex;gap:8px;align-items:center;color:inherit;text-decoration:none;font-weight:700}
.mark img{width:40px;height:40px;object-fit:contain;background:#fff}
.links{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.links a{color:#57534e;text-decoration:none;font:15px/1.35 system-ui,sans-serif}
.links a.on{color:#1c1917;font-weight:700}
article{max-width:680px;padding:48px 7vw 28px}
.kicker{margin:0;font:12px/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a8a29e}
.byline{margin:8px 0;font:14px/1.4 system-ui,sans-serif;color:#78716c}
h1{font-weight:600;font-size:2.2rem;line-height:1.2;margin:8px 0 14px}
h2{font-size:1.15rem;margin:2rem 0 .4rem}
.more{margin-top:28px;padding-top:12px;border-top:1px solid #e7e5e4}
.more h2{font:700 12px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.more a{display:inline-block;margin:6px 14px 0 0;font:14px/1.4 system-ui,sans-serif}
footer{padding:8px 7vw 40px  calc(220px + 7vw);font:13px/1.5 system-ui,sans-serif;color:#78716c}
@media(max-width:800px){.frame{grid-template-columns:1fr}.index{position:static;border-right:0;border-bottom:1px solid #e7e5e4}.links{flex-direction:row;flex-wrap:wrap}article{padding-top:28px}h1{font-size:1.65rem}footer{padding-left:7vw}}