:root{color-scheme:light;--paper:#f7f2e8;--ink:#16140f;--muted:#605b50;--blue:#2356d8;--green:#16804b;--pink:#e4567a;--white:#fffdf8;--line:3px solid var(--ink)}
*{box-sizing:border-box}
html{min-height:100%;border:10px solid var(--ink);background:var(--paper)}
body{min-height:100vh;margin:0;background:var(--paper);color:var(--ink);font:18px/1.58 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:4px}
a:focus{outline:3px solid var(--blue);outline-offset:3px}
.skip-link{position:absolute;left:16px;top:16px;z-index:10;transform:translateY(-140%);background:var(--ink);color:var(--paper);padding:8px 11px}
.skip-link:focus{transform:none}
.wrap{width:min(920px,100%);margin-inline:auto;padding-inline:clamp(20px,6vw,64px)}
.site-header{padding-block:clamp(24px,5vw,52px) 20px}
.header-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}
.brand{display:inline-grid;gap:8px;text-decoration:none;width:max-content}
.brand-name{font:700 clamp(42px,7vw,76px)/.88 Georgia,serif}
.brand-role,.eyebrow{color:var(--blue);font-weight:700;text-transform:uppercase}
.brand-role{font-size:16px}
.badge{width:126px;padding:12px 10px 10px;background:var(--white);border:var(--line);box-shadow:6px 6px 0 var(--pink);font-size:13px;line-height:1.1;text-transform:uppercase}
.cluster{display:grid;grid-template-columns:repeat(4,12px);gap:4px;margin-bottom:10px}
.cluster i{width:12px;height:12px;background:var(--green);border:2px solid var(--ink)}
.cluster .off{background:var(--white)}
.badge b,.badge span{display:block}
.badge span{margin-top:5px;color:var(--green)}
.nav,.footer-links,.pagination{display:flex;flex-wrap:wrap;gap:10px}
.nav{grid-column:1/-1;margin-top:8px}
.nav a,.footer-links a,.pagination a,.tags a,.post-row h2 a,.post-row h3 a,.author-box h2 a{display:inline-block;color:var(--ink);text-decoration:none;border:2px solid var(--ink);padding:8px 11px;background:var(--white);box-shadow:4px 4px 0 var(--ink)}
.nav a:hover,.footer-links a:hover,.pagination a:hover,.tags a:hover,.post-row h2 a:hover,.post-row h3 a:hover,.author-box h2 a:hover{background:var(--ink);color:var(--paper)}
.site-main{padding-block:28px clamp(44px,7vw,76px)}
.hero,.page-head{padding-top:clamp(16px,3vw,28px)}
h1,h2,h3,p,ul,ol{margin-top:0}
h1{max-width:11ch;margin-bottom:24px;font:700 clamp(42px,8vw,84px)/.92 Georgia,serif}
h2{margin-bottom:18px;font:700 clamp(29px,4vw,44px)/1 Georgia,serif}
h3{font:700 clamp(23px,3vw,30px)/1.08 Georgia,serif}
.lede{max-width:720px;margin-bottom:0;font-size:clamp(20px,2.4vw,26px);line-height:1.38}
.eyebrow{margin-bottom:14px;font-size:14px}
.post-list{padding-top:clamp(44px,7vw,78px)}
.post-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;padding-block:24px;border-top:var(--line)}
.post-row:last-child{border-bottom:var(--line)}
.post-row h2,.post-row h3{margin-bottom:12px}
.post-row p{max-width:680px;margin-bottom:0;color:var(--muted)}
time{color:var(--muted);font-size:15px;white-space:nowrap}
.pagination{margin-top:26px}
.article{max-width:860px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px;color:var(--muted);font-size:15px}
.breadcrumb a{color:var(--muted)}
.article-header{padding-bottom:28px;border-bottom:var(--line)}
.article-header h1{max-width:12ch}
.meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.tags a{padding:5px 8px;box-shadow:3px 3px 0 var(--green);font-size:14px}
.content{max-width:720px;padding-top:34px}
.content h2{margin-top:44px}
.content h3{margin-top:32px}
.content p,.content li{margin-bottom:18px}
.content p:first-child{font-size:clamp(19px,2.2vw,23px);line-height:1.44}
.content ul,.content ol{padding-left:1.3em}
.content code{background:var(--white);border:1px solid var(--ink);padding:1px 4px}
.content a{font-weight:700}
.author-box,.related{max-width:720px;margin-top:44px;padding-top:24px;border-top:var(--line)}
.author-box h2{margin-bottom:12px}
.author-box p:last-child{margin-bottom:0;color:var(--muted)}
.related ul{padding-left:1.2em}
.site-footer{padding-block:28px 46px;color:var(--muted)}
.footer-grid{display:flex;justify-content:space-between;gap:18px;align-items:center;border-top:var(--line);padding-top:24px}
.footer-grid p{margin:0}
@media (max-width:680px){
  html{border-width:7px}
  body{font-size:16px}
  .site-header{padding-top:28px}
  .header-grid,.post-row,.footer-grid{display:block}
  .badge{margin-top:28px}
  .nav,.footer-links{display:grid;grid-template-columns:1fr 1fr;margin-top:28px}
  .nav a,.footer-links a{text-align:center}
  h1{max-width:10ch}
  .post-row time{display:block;margin-top:14px}
  .footer-links{margin-top:18px}
}