:root{
  --serif:"Charter","Bitstream Charter","Sitka Text","Iowan Old Style","Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,monospace;
  --paper:#15130f; --paper-raised:#242018; --ink:#eee8db; --ink-soft:#beb5a3; --ink-faint:#928872;
  --masthead:#100e0a; --masthead-fg:#ece5d4; --masthead-faint:#948a75;
  --accent:#d98b64; --accent-deep:#eba57e; --gold:#c79b4b;
  --rule:#4a4333; --rule-soft:#342f27;
  --ok:#9dc38b; --ok-bg:#202a1a; --warn:#dfa763; --warn-bg:#2a2013; --warn-border:#55401f;
  --code-bg:#241f16;
  --card-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --maxw:46rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:17px/1.65 var(--serif);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-deep); text-decoration:underline}

header.masthead{background:var(--masthead); color:var(--masthead-fg); border-bottom:3px solid var(--gold)}
.mastrow{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:.4rem 1.5rem; padding:1.15rem 0 1.05rem}
h1.brand, .brand{margin:0}
.brand a{color:var(--masthead-fg); text-decoration:none}
.brand a:hover{text-decoration:none; color:#fff}
.brand .wordmark{display:block; font-family:var(--serif); font-weight:700; font-size:1.75rem; letter-spacing:-.01em; line-height:1.1}
.brand .byline{display:block; margin-top:.25rem; font-family:var(--sans); font-size:.78rem; font-weight:400; letter-spacing:.025em; color:var(--masthead-faint)}
.brand .byline strong{color:var(--masthead-fg); font-weight:600}
nav.site-nav{display:flex; gap:1.3rem; align-items:baseline; font-family:var(--sans);
  font-size:.82rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding-bottom:.2rem}
nav.site-nav a{color:var(--masthead-faint); text-decoration:none; padding-bottom:3px; border-bottom:2px solid transparent}
nav.site-nav a:hover{color:var(--masthead-fg); text-decoration:none}
nav.site-nav a[aria-current=page]{color:var(--masthead-fg); border-bottom-color:var(--gold)}
main{padding:2.4rem 0 1.2rem}
.home-main{padding:4.4rem 0 4.6rem}
.home-main section{margin-bottom:0}
.home-main .shelf{margin-top:0}
.home-main + footer{margin-top:0}
section{margin:0 0 2.6rem}
h1.page{font-size:1.75rem; letter-spacing:-.01em; line-height:1.25; margin:0 0 .5rem; font-weight:700}
h2{font-size:1.3rem; letter-spacing:-.005em; margin:2.2rem 0 .8rem}
h3{font-size:1.05rem; margin:1.5rem 0 .5rem}
p{margin:0 0 1rem}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}
.crumb{font-family:var(--sans); font-size:.85rem; color:var(--ink-faint); margin:0 0 1.2rem}
.crumb a{color:var(--ink-faint)}
.crumb a:hover{color:var(--accent)}
.shelf{display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.4rem}
.proj{display:block; background:var(--paper-raised); border:1px solid var(--rule); border-top:3px solid var(--gold);
  border-radius:6px; padding:1.25rem 1.35rem; color:var(--ink); box-shadow:var(--card-shadow)}
.proj:hover{text-decoration:none; border-color:var(--accent); border-top-color:var(--accent); color:var(--ink)}
.proj .date{font-family:var(--sans); font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-weight:600}
.proj h2{margin:.35rem 0 .2rem; font-size:1.2rem}
.proj .category{display:block; margin:0 0 .55rem; font-family:var(--sans); font-size:.78rem; letter-spacing:.025em; color:var(--ink-faint)}
.proj p{margin:0; font-size:.95rem; color:var(--ink-soft)}
.framing-note{font-family:var(--sans); font-size:.86rem; color:var(--ink-soft); margin:.8rem 0 1.7rem}

.shelfrow{display:grid; gap:.55rem; margin:.9rem 0 0}
.item{display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .6rem; padding:.7rem .9rem;
  background:var(--paper-raised); border:1px solid var(--rule-soft); border-radius:6px; font-size:.95rem}
.item .kind{font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600; min-width:4.6rem}
.item .note{flex-basis:100%; font-size:.86rem; color:var(--ink-soft)}
.box{background:var(--paper-raised); border:1px solid var(--rule-soft); border-radius:6px; padding:1.1rem 1.25rem; margin:0 0 1.2rem; box-shadow:var(--card-shadow)}
.box h3{margin:0 0 .5rem}
.box p:last-child, .box ul:last-child{margin-bottom:0}

pre{background:var(--code-bg); border:1px solid var(--rule-soft); border-radius:6px;
  padding:1rem 1.1rem; overflow-x:auto; font-size:.85rem; line-height:1.55; margin:0 0 1rem; font-family:var(--mono)}
code{font-family:var(--mono)}
p code, li code, td code{background:var(--code-bg); padding:.1rem .35rem; border-radius:4px; font-size:.88em}
blockquote{border-left:3px solid var(--rule); margin:0 0 1rem; padding:.1rem 0 .1rem 1rem; color:var(--ink-soft)}
ul{margin:0 0 1rem; padding-left:1.2rem}
li{margin:.25rem 0}
.table-scroll{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:.92rem}
th,td{text-align:left; padding:.55rem .65rem; border-bottom:1px solid var(--rule-soft); vertical-align:top}
th{font-family:var(--sans); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600}
tbody tr:last-child td{border-bottom:0}
.article-lede{margin-top:2.2rem}
.crumb, .item, td, footer{overflow-wrap:anywhere}

footer{border-top:1px solid var(--rule); padding:2rem 0 3rem; font-size:.92rem; color:var(--ink-soft); margin-top:2rem; font-family:var(--sans)}
footer .contact{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.3rem; margin-bottom:.9rem}
footer .fine{font-size:.8rem; color:var(--ink-faint)}

@media (max-width:480px){
  .mastrow{align-items:flex-start; flex-direction:column}
  .brand .wordmark{font-size:1.5rem}
  .wrap{padding:0 1rem}
  main{padding-top:1.8rem}
  .home-main{padding:3.2rem 0 3.4rem}
  h1.page{font-size:1.55rem}
  h2{font-size:1.2rem}
  .proj{padding:1.1rem}
  th,td{padding:.5rem .55rem}
}