:root{
  --paper:#F2EEE4;
  --paper-2:#ECE7DA;
  --ink:#15130D;
  --ink-soft:#56524A;
  --ink-faint:#8C8779;
  --line:rgba(21,19,13,.14);
  --line-strong:rgba(21,19,13,.3);
  --accent:#F23A14;
  --accent-d:#CE2E0C;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --maxw:1120px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--disp);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.45;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--paper)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px;position:relative;z-index:2}
.mono{font-family:var(--mono)}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

header{position:relative;z-index:3;border-bottom:1.5px solid var(--ink)}
.nav{height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:21px;letter-spacing:-.04em}
.brand svg{width:26px;height:26px}
.nav-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink-soft);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent);transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}

.blog-hero{padding:92px 0 64px;border-bottom:1.5px solid var(--ink)}
.blog-hero h1,.article-hero h1{margin-top:16px;font-weight:800;font-size:clamp(58px,10vw,132px);line-height:.84;letter-spacing:-.055em;max-width:8.6em}
.blog-hero h1 span,.article-hero h1 span{color:var(--accent)}
.dek{margin-top:28px;max-width:62ch;font-size:clamp(19px,2vw,24px);line-height:1.38;color:var(--ink-soft)}
.hero-rule{margin-top:42px;border-top:1.5px solid var(--ink);padding-top:22px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero-rule p{max-width:42ch;color:var(--ink-soft)}

.post-list{padding:42px 0 110px}
.post-row{display:grid;grid-template-columns:160px minmax(0,1fr) 132px;gap:34px;align-items:start;padding:38px 0;border-bottom:1.5px solid var(--line);transition:padding-left .35s var(--ease),background .35s var(--ease)}
.post-row:first-child{border-top:1.5px solid var(--ink)}
.post-row:hover{padding-left:14px;background:rgba(242,58,20,.045)}
.post-num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.post-body h2{font-weight:800;font-size:clamp(34px,5vw,68px);line-height:.95;letter-spacing:-.045em}
.post-body p{margin-top:16px;max-width:62ch;color:var(--ink-soft);font-size:18px}
.post-topics{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.post-topics span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);padding:6px 9px;color:var(--ink-soft)}
.post-read{justify-self:end;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding-top:8px;white-space:nowrap}
.post-row:hover .post-read{color:var(--accent)}

.principle-band{border-top:1.5px solid var(--ink);padding:46px 0 84px;background:rgba(21,19,13,.025)}
.principle-band h2{font-size:30px;line-height:1;letter-spacing:-.03em}
.principle-band p{margin-top:12px;max-width:62ch;color:var(--ink-soft)}

.article-hero{padding:72px 0 58px;border-bottom:1.5px solid var(--ink)}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.crumb a{color:var(--ink-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-meta{margin-top:28px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.article-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:58px;padding:66px 0 104px;align-items:start}
.article-side{position:sticky;top:28px;border-top:1.5px solid var(--ink);padding-top:18px}
.article-side p{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink-soft)}
.article-side a{display:block;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-body{font-size:20px;line-height:1.68;color:var(--ink)}
.article-body .lead{font-size:clamp(24px,3vw,34px);line-height:1.18;letter-spacing:-.025em;font-weight:650;color:var(--ink)}
.article-body h2{margin-top:54px;font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.04em}
.article-body p{margin-top:22px;color:var(--ink-soft)}
.article-body strong{color:var(--ink)}
.article-body ul{margin-top:22px;padding-left:1.2em;color:var(--ink-soft)}
.article-body li{margin:10px 0}
.article-callout{margin:44px 0;padding:24px 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);font-weight:700;font-size:clamp(24px,3.2vw,38px);line-height:1.08;letter-spacing:-.035em;color:var(--ink)}
.next-post{border-top:1.5px solid var(--ink);padding:34px 0 80px}
.next-post a{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

footer{position:relative;z-index:2;border-top:1.5px solid var(--ink);padding:32px 0 40px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot span,.foot a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-faint)}
.foot a:hover{color:var(--accent)}

@media(max-width:820px){
  .wrap{padding:0 24px}
  .nav{height:auto;min-height:78px;align-items:flex-start;flex-direction:column;padding:22px 0}
  .nav-links{gap:14px;justify-content:flex-start}
  .blog-hero,.article-hero{padding-top:62px}
  .hero-rule{display:block}
  .hero-rule p{margin-top:14px}
  .post-row{grid-template-columns:1fr;gap:14px;padding:30px 0}
  .post-row:hover{padding-left:0}
  .post-read{justify-self:start;padding-top:0}
  .article-layout{grid-template-columns:1fr;gap:30px;padding-top:42px}
  .article-side{position:static}
}