:root{--canvas:#cdcec9;--surface:#fff;--ink:#1c1c1c;--muted:#6b6b66;--accent:#ff9900;
--rule:#d6d2c8;--band:#141414;--navy:#1f3350}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);
font:16px/1.66 "Helvetica Neue",Helvetica,Arial,sans-serif}
#shell{max-width:1080px;margin:24px auto 40px;background:var(--surface);
border:1px solid #bdbeb9;padding:0 0 0 0;overflow:hidden}
a{color:#8a4b00}
a:hover{color:#1c1c1c}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:block;padding:8px 18px;background:var(--band);color:#fff}
.pm{color:var(--accent);font-weight:700}

.masthead{padding:26px 28px 0}
.wordmark{margin:0;font:normal 44px/1.1 Georgia,"Times New Roman",serif;letter-spacing:-.5px}
.wordmark a{color:var(--ink);text-decoration:none}
.tagline{margin:6px 0 16px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.banner{display:block;width:100%;height:auto;margin:0 -28px;max-width:none;width:calc(100% + 56px)}

.catbar{background:var(--band);margin:0}
.catbar ul{margin:0;padding:0 16px;list-style:none;display:flex;flex-wrap:wrap}
.catbar li a{display:block;padding:12px 14px;color:#fff;text-decoration:none;
font:700 12px/1 Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase}
.catbar li a:hover{background:#2c2c2c;color:var(--accent)}
.catbar li.here a{color:var(--accent)}

/* Two columns as a grid rather than floats so the widget rail starts level with the
   featured post while the six homepage modules stay DOM siblings in the prescribed
   order. Advertisement slots are anchored inside an <article>, never as a child of
   #shell, so no injected node can take one of these cells. */
#shell{display:grid;grid-template-columns:minmax(0,1fr) 31%;align-items:start}
.masthead,.catbar,.sitefoot{grid-column:1/-1}
.lead-wrap{grid-column:1;grid-row:3;padding:26px 28px 0}
.stream{grid-column:1;grid-row:4;padding:22px 28px 0}
.page-main{grid-column:1;grid-row:3/span 2;padding:26px 28px 0;min-width:0}
.rail{grid-column:2;grid-row:3/span 2;padding:26px 28px 0 0}

.entry{border-bottom:1px solid var(--rule);padding-bottom:22px;margin-bottom:22px}
.entry:last-child{border-bottom:0}
.kicker{margin:0 0 6px;font:700 11px/1 Arial,sans-serif;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted)}
.etitle{margin:0 0 6px;font:normal 28px/1.2 Georgia,serif}
.lead .etitle{font-size:38px}
.etitle a{color:var(--ink);text-decoration:none}
.etitle a:hover{color:#8a4b00}
.meta{margin:0 0 12px;font:700 12px/1.5 Arial,sans-serif;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.meta a{color:var(--muted)}
/* One 3:1 plate file per category serves every role. The artwork is vertical stripes,
   so a cropped height loses nothing and nothing is ever stretched. */
.leadplate{display:block;width:100%;height:190px;object-fit:cover;object-position:center;margin:0 0 16px}
.thumb{float:left;width:200px;height:130px;object-fit:cover;object-position:center;margin:4px 18px 8px 0}
.ex{margin:0 0 10px}
.rm{margin:0;clear:both}
.rm a{font:700 12px/1 Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;
text-decoration:none}

.widget{margin:0 0 26px}
.widget h2{margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--rule);
font:700 12px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.widget h2::before{content:"+ ";color:var(--accent)}
.bio{margin:0 0 8px;font-size:14px;line-height:1.6}
.more a,.wlist a{font-size:14px}
.wlist{margin:0;padding:0;list-style:none}
.wlist li{padding:5px 0;border-bottom:1px solid #eceae4;font-size:14px}
.ct{float:right;color:var(--muted);font-size:12px}

.page-main h1,.stream h1{margin:0 0 8px;font:normal 30px/1.22 Georgia,serif}
.arch-count{margin:0 0 20px;font:700 12px/1 Arial,sans-serif;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted)}
.post-body{max-width:64ch}
.post-body p{margin:0 0 16px}
.post-body h2{margin:26px 0 10px;font:normal 22px/1.3 Georgia,serif}
.post-body h3{margin:22px 0 8px;font:700 15px/1.35 Arial,sans-serif}
.post-body ul,.post-body ol{margin:0 0 16px 22px;padding:0}
.post-body li{margin:0 0 6px}
.post-body blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:3px solid var(--rule);color:#3a3a38}
.plusrule{margin:26px 0;color:var(--accent);font:700 18px/1 Arial,sans-serif;letter-spacing:.5em}
.postnav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 34px;
border-top:1px solid var(--rule);padding-top:14px;
font:700 12px/1.5 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.postnav a{text-decoration:none}
.backlinks{margin:14px 0 0;font-size:13px;color:var(--muted)}
.projlist{margin:0;padding:0;list-style:none}
.projlist li{border-bottom:1px solid var(--rule);padding:0 0 16px;margin:0 0 16px;overflow:hidden}
.projlist h2{margin:0 0 4px;font:normal 22px/1.3 Georgia,serif}
.projlist h2::before{content:"+ ";color:var(--accent)}
.projlist img{float:left;width:150px;height:70px;object-fit:cover;margin:4px 18px 0 0}

.sitefoot{background:var(--band);color:#c9c7c1;margin-top:34px;padding:26px 28px 18px}
.fcols{display:flex;flex-wrap:wrap;gap:28px}
.fcol{flex:1 1 200px}
.fcol h2{margin:0 0 10px;font:700 12px/1 Arial,sans-serif;letter-spacing:.1em;
text-transform:uppercase;color:#fff}
.fcol h2::before{content:"+ ";color:var(--accent)}
.fcol ul{margin:0;padding:0;list-style:none}
.fcol li{padding:3px 0;font-size:13px}
.fcol a{color:#c9c7c1;text-decoration:none}
.fcol a:hover{color:var(--accent)}
.colophon{margin:22px 0 0;padding-top:14px;border-top:1px solid #333;
font:700 11px/1.5 Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8e8c86}

@media (max-width:860px){
#shell{margin:0;border:0;display:block}
.masthead{padding:18px 18px 0}
.wordmark{font-size:30px}
.banner{margin:0 -18px;width:calc(100% + 36px);height:168px;object-fit:cover}
.catbar ul{padding:0 6px}
.catbar li a{padding:14px 12px;min-height:44px;display:flex;align-items:center}
.stream,.lead-wrap,.page-main,.rail{float:none;width:100%;padding:22px 18px 0}
.rail{padding-top:6px}
body{font-size:17px}
.post-body{max-width:none}
.thumb,.leadplate,.projlist img{float:none;width:100%;height:104px;object-fit:cover;margin:0 0 12px}
.lead .leadplate{height:132px}
.lead .etitle{font-size:30px}
.etitle{font-size:24px}
.fcols{display:block}
.fcol{margin-bottom:22px}
.sitefoot{padding:22px 18px 16px}
}