/* Direction A — Forest & Brass. Newsreader (serif) + Inter (UI). */
:root{
  --paper:#F6F3EC; --ink:#1B201D; --muted:#646B65; --rule:#DCD6C9;
  --ground:#1D3A2E; --ground-ink:#EFEADF; --ground-muted:rgba(239,234,223,.72);
  --accent:#8C6A35; --accent-light:#C7A56B;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--accent-light)}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--paper);padding:8px 12px;z-index:9}
.label{font:500 15px/1 var(--sans);font-variant:all-small-caps;letter-spacing:.12em;color:var(--accent);margin:0 0 20px}
.label a{text-decoration:none;color:inherit}
.sep{margin:0 .5em;color:var(--rule)}

/* masthead — the colour block starts here */
.masthead{background:var(--ground);color:var(--ground-ink)}
.bar{display:flex;align-items:baseline;justify-content:space-between;padding-top:30px;padding-bottom:26px;border-bottom:1px solid rgba(239,234,223,.16)}
.brand{font:500 23px/1 var(--serif);letter-spacing:-.005em;text-decoration:none;color:var(--ground-ink)}
.brand:hover{color:var(--ground-ink)}
.masthead nav{display:flex;gap:28px}
.masthead nav a{font:500 15px/1 var(--sans);font-variant:all-small-caps;letter-spacing:.13em;color:var(--ground-muted);text-decoration:none;padding-bottom:6px;border-bottom:1px solid transparent}
.masthead nav a:hover{color:var(--ground-ink)}
.masthead nav a[aria-current]{color:var(--ground-ink);border-bottom-color:var(--accent-light)}
body:not(.home) .bar{border-bottom:0}

/* home */
.intro{background:var(--ground);color:var(--ground-ink)}
.intro-in{max-width:1080px;margin:0 auto;padding:72px 32px 88px}
.intro .label{color:var(--accent-light)}
.intro h1{font:400 clamp(36px,5.2vw,60px)/1.06 var(--serif);letter-spacing:-.02em;margin:0 0 32px;max-width:13em;font-optical-sizing:auto}
.intro h1 a{text-decoration-color:var(--accent-light);text-decoration-thickness:2px;text-underline-offset:.12em}
.intro h1 a:hover{color:var(--accent-light)}
.intro p{font-size:20px;line-height:1.55;color:var(--ground-muted);max-width:36em;margin:0 0 14px}
.intro .contact{margin-top:28px;font:400 15px/1.5 var(--sans);color:var(--ground-muted)}
.intro .contact a{color:var(--ground-ink)}
.indexes{max-width:1080px;margin:0 auto;padding:72px 32px 96px;display:grid;grid-template-columns:1fr 1fr;gap:64px}
.index .label{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:0}
.index .label a{color:var(--muted)}
.index .label a:hover{color:var(--accent)}
.entries{list-style:none;margin:0;padding:0}
.entry a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:15px 0 14px;border-bottom:1px solid var(--rule);text-decoration:none}
.entry-t{font:400 21px/1.3 var(--serif);letter-spacing:-.005em}
.entry a:hover .entry-t{color:var(--accent)}
.entry time,.entry-cat{font:400 13px/1 var(--sans);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.entry-cat{font-size:14px;font-variant:all-small-caps;letter-spacing:.1em;margin-left:auto;color:var(--accent)}

/* page heads (writing, tags, 404) */
.page-head{padding-top:72px;padding-bottom:40px}
.page-head h1{font:400 clamp(34px,4.6vw,52px)/1.08 var(--serif);letter-spacing:-.02em;margin:0;max-width:18ch}
.page-sub{font:400 15px/1.5 var(--sans);color:var(--muted);margin:22px 0 0}
.page-sub a{color:var(--ink)}
.index-page{padding-bottom:96px}
.index-page .entries{border-top:1px solid var(--ink)}

/* post */
.post-head{max-width:780px;padding-top:80px;padding-bottom:0}
.post-head h1{font:400 clamp(38px,5.6vw,62px)/1.04 var(--serif);letter-spacing:-.022em;margin:0 0 22px}
.post-meta{font:400 14px/1 var(--sans);color:var(--muted);margin:0;padding-bottom:36px;border-bottom:1px solid var(--rule)}
.post-meta .sep{color:var(--accent-light)}
.prose{max-width:780px;padding-top:40px;padding-bottom:40px;font-size:21px;line-height:1.62}
.prose > *{max-width:680px}
.prose p{margin:0 0 1.1em}
.prose ol,.prose ul{padding-left:1.25em;margin:0 0 1.2em}.prose li{margin:.4em 0;padding-left:.2em}
.prose li::marker{color:var(--accent);font-family:var(--sans);font-size:.8em}
.prose a{text-decoration-color:var(--accent)}
.prose img{display:block;margin:36px 0;border:1px solid var(--rule);background:#fff}
.prose blockquote{margin:1.8em 0;padding:2px 0 2px 24px;border-left:2px solid var(--accent);font-style:italic;color:#3A403B}
.prose blockquote p{margin:0 0 .5em}
.prose blockquote.tweet{font-style:normal;font-size:19px}
.prose blockquote.tweet a{font:400 14px var(--sans);color:var(--muted)}
.prose em{font-style:italic}
.pager{max-width:780px;display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:28px;padding-bottom:96px;border-top:0}
.pager > div{border-top:1px solid var(--ink);padding-top:18px}
.pager .label{display:block;margin-bottom:10px;color:var(--muted)}
.pager a{font:400 21px/1.3 var(--serif);text-decoration:none}
.pager a:hover{color:var(--accent)}
.pager .older{text-align:right}

/* footer */
.foot{border-top:1px solid var(--rule);padding:36px 0 44px;font:400 14px/1.6 var(--sans);color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.foot p{margin:0}.foot-name{font:500 18px/1.4 var(--serif);color:var(--ink)}
.foot a{color:var(--ink)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}

@media (max-width:860px){
  .indexes{grid-template-columns:1fr;gap:56px;padding-top:56px}
}
@media (max-width:560px){
  .wrap,.intro-in,.indexes{padding-left:22px;padding-right:22px}
  .bar{flex-direction:column;align-items:flex-start;gap:18px;padding-top:24px;padding-bottom:18px}
  nav{gap:22px}
  .intro-in{padding-top:48px;padding-bottom:56px}
  .intro p{font-size:18px}
  .entry a{flex-direction:column;gap:6px}
  .entry-cat{margin-left:0}
  .entry-t{font-size:20px}
  .page-head,.post-head{padding-top:48px}
  .prose{font-size:19px}
  .pager{grid-template-columns:1fr;gap:24px}.pager .older{text-align:left}
}

/* v3: person-first home */
.intro-in{padding-top:80px;padding-bottom:84px}
.intro h1{font:400 clamp(48px,7.4vw,92px)/1 var(--serif);letter-spacing:-.03em;margin:0 0 34px;max-width:none}
.intro .intro-lede{font-size:clamp(21px,2.1vw,25px);line-height:1.45;color:var(--ground-ink);max-width:30em;margin-bottom:12px}
.intro p{font-size:clamp(19px,1.8vw,21px)}
.intro-aside{margin-top:34px !important;font:400 15px/1.5 var(--sans) !important;color:var(--ground-muted)}
.intro-aside a{color:var(--ground-ink)}
.intro-aside a:hover{color:var(--accent-light)}
.intro-aside .sep{color:rgba(239,234,223,.35)}
.home-body{max-width:1080px;margin:0 auto;padding:76px 32px 104px}
.index-primary .entry a{padding:20px 0 19px}
.index-primary .entry-t{font-size:clamp(22px,2.3vw,27px)}
.index-secondary{margin-top:84px;max-width:720px}
.index-secondary .entry a{padding:13px 0 12px}
.index-secondary .entry-t{font-size:19px}
.about{padding-top:0;padding-bottom:96px}
.foot-name{font-size:17px}
.foot-name .sep{color:var(--accent-light)}
@media (max-width:560px){
  .home-body{padding:52px 22px 80px}
  .intro-in{padding-top:52px;padding-bottom:56px}
  .intro h1{margin-bottom:24px}
  .index-secondary{margin-top:60px}
}
.about-head{padding-bottom:8px}
.about-head h1{margin-bottom:8px}

/* v5: single list, minimal home header */
.home .bar{border-bottom:0;padding-bottom:0}
.home .masthead nav a{color:var(--ground-ink)}
@media (max-width:560px){
  .home .bar{flex-direction:row;justify-content:flex-end;padding-top:22px}
  .bar{flex-direction:row;align-items:baseline;justify-content:space-between}
}
.home-body .index-primary{max-width:820px}
.pager > .empty{border-top:0}
.index-page .entries{max-width:820px}