:root{--paper:#f0ece4;--ink:#1d1c18;--muted:#706a61;--gold:#9a6e32;--line:rgba(29,28,24,.18);--dark:#171411}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink)}
a{color:inherit}
img{display:block;width:100%}
.wrap{width:min(1160px,calc(100% - 80px));margin:auto}
header{height:76px;background:#151412;color:#fff;display:flex;align-items:center;position:sticky;top:0;z-index:10}
nav{width:min(1380px,calc(100% - 72px));margin:auto;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;letter-spacing:.18em}
.brand img{width:34px;height:34px;filter:brightness(0) saturate(100%) invert(79%) sepia(30%) saturate(738%) hue-rotate(354deg) brightness(89%)}
.back{font:500 .78rem var(--font-sans);letter-spacing:.1em;text-decoration:none}
.mast{padding:105px 0 72px}
.crumb,.eyebrow{font:600 .7rem var(--font-sans);letter-spacing:.18em;color:var(--gold)}
.mast h1{font-size:clamp(2.8rem,6vw,5.8rem);font-weight:400;letter-spacing:.1em;line-height:1.18;margin:25px 0}
.dek{max-width:760px;font-size:1.2rem;color:var(--muted)}
.meta{display:flex;gap:28px;margin-top:30px;font-size:.74rem;color:var(--muted)}
.hero-img{height:min(58vw,650px);background:center/cover no-repeat}
.layout{display:grid;grid-template-columns:220px minmax(0,720px);gap:8vw;padding:90px 0 120px}
.toc{position:sticky;top:110px;align-self:start;display:grid;gap:12px;font-size:.78rem;color:var(--muted)}
.toc span{color:var(--gold);font-weight:600;letter-spacing:.12em;margin-bottom:8px}
.toc a{text-decoration:none}
.article h2{font-weight:400;font-size:2rem;letter-spacing:.07em;margin:78px 0 22px;scroll-margin-top:110px}
.article h2:first-child{margin-top:0}
.article h3{font-weight:400;font-size:1.2rem;margin:35px 0 10px}
.article p{margin:0 0 24px;color:#4f4a43}
.lead{font-size:1.28rem;color:var(--ink)!important}
.pull{border-left:3px solid var(--gold);padding:8px 0 8px 24px;margin:38px 0;font-size:1.35rem;line-height:1.7}
.term,.note,.source-box{padding:25px 27px;border:1px solid var(--line);margin:18px 0}
.term b{font-weight:500;font-size:1.08rem}
.term p,.note p,.source-box p{margin:7px 0 0}
.grain-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}
.grain{padding:24px;background:#e5ded2}
.grain b{display:block;font-weight:500;margin-bottom:8px}
.grain p{font-size:.9rem;margin:0}
.note{background:#e5ded2;border:0}
.source-box{margin-top:70px;font-size:.86rem}
.source-box ul{padding-left:20px;margin-bottom:0}
.source-box li{margin:9px 0;color:var(--muted)}
.source-box a{word-break:break-all}
.next{background:var(--dark);color:#eee8de;padding:70px 0}
.next-grid{display:flex;justify-content:space-between;align-items:end;gap:30px}
.next h2{font-weight:400;margin:12px 0 0}
.next a{text-decoration:none}
footer{background:#11100e;color:#aaa298;padding:42px 0}
.foot{display:flex;justify-content:space-between;font:.7rem var(--font-sans);letter-spacing:.08em}
@media(max-width:760px){
  .wrap{width:calc(100% - 40px)}
  nav{width:calc(100% - 36px)}
  .mast{padding:75px 0 55px}
  .mast h1{font-size:2.65rem}
  .hero-img{height:58vw;min-height:240px}
  .layout{grid-template-columns:1fr;padding:55px 0 80px}
  .toc{position:static;display:flex;overflow-x:auto;white-space:nowrap;padding-bottom:10px}
  .toc span{display:none}
  .grain-grid{grid-template-columns:1fr}
  .next-grid,.foot{align-items:flex-start;flex-direction:column}
}