:root {
  --paper: #f3f0e7;
  --paper-2: #e8e3d7;
  --ink: #141414;
  --muted: #6b675e;
  --accent: #d64d2f;
  --line: #1f1f1f;
  --max: 1120px;
  --read: 760px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.58; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration-thickness:1.5px; text-underline-offset:.16em; }
a:hover { color:var(--accent); }
img { display:block; max-width:100%; }
.wrap { width:min(calc(100% - 32px),var(--max)); margin:0 auto; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
.muted { color:var(--muted); }
.site-header { padding:22px 0 18px; border-bottom:2px solid var(--line); }
.header-inner { display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:baseline; gap:10px; text-decoration:none; font-weight:900; letter-spacing:-.045em; font-size:clamp(1.45rem,4vw,2rem); }
.brand-mark { color:var(--accent); font-family:ui-monospace,monospace; letter-spacing:0; }
.nav { display:flex; flex-wrap:wrap; gap:18px; font-family:ui-monospace,monospace; font-size:.88rem; }
.nav a { text-decoration:none; border-bottom:1px solid transparent; }
.nav a:hover { border-color:currentColor; }
.hero { padding:clamp(62px,10vw,130px) 0 54px; border-bottom:2px solid var(--line); }
.eyebrow { margin:0 0 24px; font-size:.78rem; text-transform:uppercase; letter-spacing:.11em; }
.hero h1 { max-width:980px; margin:0; font-size:clamp(3.1rem,9vw,7.8rem); line-height:.88; letter-spacing:-.07em; font-weight:900; }
.hero h1 em { color:var(--accent); font-style:normal; }
.hero-bottom { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr); gap:56px; margin-top:42px; align-items:end; }
.hero-copy { max-width:680px; font-size:clamp(1.15rem,2vw,1.55rem); margin:0; }
.hero-note { margin:0; padding-left:16px; border-left:3px solid var(--accent); color:var(--muted); font-family:ui-monospace,monospace; font-size:.82rem; }
.section { padding:54px 0 64px; border-bottom:2px solid var(--line); }
.section-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:26px; }
.section-head h2 { margin:0; font-size:clamp(1.65rem,4vw,2.6rem); letter-spacing:-.045em; }
.section-kicker { font-family:ui-monospace,monospace; color:var(--muted); font-size:.78rem; }
.feature { display:grid; grid-template-columns:1.45fr .85fr; min-height:480px; border:2px solid var(--line); background:#d8d2c6; }
.feature-media { min-height:360px; overflow:hidden; background:#c8c1b4; }
.feature-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.03); }
.feature-copy { padding:clamp(28px,5vw,52px); display:flex; flex-direction:column; justify-content:space-between; background:var(--paper-2); }
.feature-number { font-family:ui-monospace,monospace; color:var(--accent); font-size:.8rem; }
.feature h3 { font-size:clamp(2.15rem,5vw,4.2rem); line-height:.95; letter-spacing:-.055em; margin:18px 0 22px; }
.feature p { font-size:1.04rem; max-width:44ch; }
.feature-link { display:inline-block; margin-top:20px; font-family:ui-monospace,monospace; font-weight:700; }
.post-list { border-top:2px solid var(--line); }
.post-row { display:grid; grid-template-columns:48px minmax(0,1fr) 250px; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.post-row:hover { color:inherit; }
.post-row:hover .post-title { color:var(--accent); transform:translateX(5px); }
.post-no { font-family:ui-monospace,monospace; font-size:.76rem; color:var(--muted); }
.post-title { margin:0; font-size:clamp(1.2rem,2.8vw,1.9rem); font-weight:750; letter-spacing:-.025em; transition:.16s ease; }
.post-meta { font-family:ui-monospace,monospace; font-size:.75rem; color:var(--muted); text-align:right; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; border:2px solid var(--line); }
.person { padding:clamp(26px,4vw,42px); }
.person + .person { border-left:2px solid var(--line); }
.person-top { display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:center; margin-bottom:26px; }
.person img { width:96px; height:96px; object-fit:cover; border:2px solid var(--line); filter:grayscale(1) contrast(1.08); }
.person h3 { margin:0 0 6px; font-size:2rem; letter-spacing:-.04em; }
.person-role { margin:0; font-family:ui-monospace,monospace; font-size:.75rem; color:var(--muted); }
.person p { max-width:50ch; }
.signoff { padding:74px 0 80px; }
.signoff-inner { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; }
.signoff h2 { margin:0; max-width:800px; font-size:clamp(2.25rem,6vw,5.4rem); line-height:.96; letter-spacing:-.06em; }
.big-mail { white-space:nowrap; font-family:ui-monospace,monospace; font-size:.88rem; }
.site-footer { padding:18px 0 26px; border-top:2px solid var(--line); font-family:ui-monospace,monospace; font-size:.72rem; }
.footer-inner { display:flex; justify-content:space-between; gap:18px; color:var(--muted); align-items:center; }
.footer-links { display:flex; gap:14px; }
.article-shell { width:min(calc(100% - 32px),960px); margin:0 auto; }
.article-header { padding:clamp(58px,10vw,112px) 0 42px; }
.article-back { font-family:ui-monospace,monospace; font-size:.78rem; }
.article-header h1 { margin:24px 0 20px; font-size:clamp(3rem,8vw,6.7rem); line-height:.92; letter-spacing:-.065em; overflow-wrap:anywhere; }
.article-deck { max-width:760px; font-size:1.25rem; color:var(--muted); }
.article-meta { margin-top:28px; font-family:ui-monospace,monospace; font-size:.78rem; color:var(--muted); }
.article-hero { width:100%; border:2px solid var(--line); max-height:680px; object-fit:cover; background:#d8d2c6; }
.prose { width:min(100%,var(--read)); margin:56px auto 84px; font-size:1.08rem; }
.prose p { margin:0 0 1.35em; }
.prose h2 { margin:2.4em 0 .65em; font-size:2.05rem; line-height:1.05; letter-spacing:-.04em; }
.prose h3 { margin:2em 0 .55em; font-size:1.35rem; line-height:1.15; }
.prose blockquote { margin:2em 0; padding:18px 0 18px 22px; border-left:4px solid var(--accent); font-size:1.3rem; }
.prose ul,.prose ol { padding-left:1.35em; margin:0 0 1.5em; }
.prose li { margin-bottom:.52em; }
.prose pre { overflow:auto; padding:20px; background:#161616; color:#f2efe6; border:2px solid var(--line); font-size:.88rem; line-height:1.55; }
.prose code { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
.prose :not(pre)>code { background:var(--paper-2); padding:.1em .3em; border:1px solid #c8c1b4; }
.prose table { width:100%; border-collapse:collapse; margin:1.5em 0 2em; font-size:.94rem; }
.prose th,.prose td { border:1px solid var(--line); padding:10px 12px; vertical-align:top; text-align:left; }
.prose th { background:var(--paper-2); }
.prose hr { border:0; border-top:2px solid var(--line); margin:3em 0; }
.prose a { overflow-wrap:anywhere; }
.article-image { width:calc(100% + 120px); max-width:none; margin:2.1em -60px; border:2px solid var(--line); background:#d8d2c6; }
.image-grid { width:calc(100% + 120px); margin:2em -60px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.image-grid img { width:100%; height:100%; min-height:260px; object-fit:cover; border:2px solid var(--line); background:#d8d2c6; }
.caption { color:var(--muted); font-family:ui-monospace,monospace; font-size:.74rem; margin-top:-1.25em !important; }
.aside,.safety-note { margin:2em 0; padding:18px; background:var(--paper-2); border:1px solid var(--line); font-family:ui-monospace,monospace; font-size:.82rem; }
.safety-note { border-left:5px solid var(--accent); }
.video-shell { width:calc(100% + 120px); margin:2.4em -60px; border:2px solid var(--line); background:#171717; color:#f4f0e7; aspect-ratio:16/9; display:grid; place-items:center; position:relative; overflow:hidden; }
.video-poster { text-align:center; padding:30px; max-width:600px; }
.video-kicker { color:#aaa; font-family:ui-monospace,monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; }
.video-poster h3 { margin:.55em 0 .45em; font-size:clamp(1.5rem,4vw,2.6rem); letter-spacing:-.04em; }
.video-poster p { color:#cfcac0; font-size:.9rem; }
.video-button { appearance:none; border:0; background:var(--accent); color:white; padding:13px 18px; font:700 .85rem ui-monospace,monospace; cursor:pointer; }
.video-button:hover { filter:brightness(.9); }
.video-shell iframe { width:100%; height:100%; border:0; position:absolute; inset:0; }
.next-post { border-top:2px solid var(--line); padding:28px 0 40px; }
.next-post a { font-size:clamp(1.6rem,4vw,2.6rem); font-weight:800; letter-spacing:-.04em; }
.legal-shell { width:min(calc(100% - 32px),820px); margin:0 auto; padding:clamp(58px,9vw,100px) 0 90px; }
.legal-shell h1 { font-size:clamp(3.2rem,9vw,6.8rem); line-height:.9; letter-spacing:-.06em; margin:0 0 44px; }
.legal-shell h2 { font-size:1.7rem; margin:2em 0 .55em; letter-spacing:-.035em; }
.legal-shell p,.legal-shell li { max-width:72ch; }
.legal-note { border-left:4px solid var(--accent); padding-left:18px; color:var(--muted); }
@media (max-width:760px) {
  .wrap,.article-shell,.legal-shell { width:min(calc(100% - 24px),var(--max)); }
  .header-inner { align-items:center; }
  .brand { font-size:1.3rem; }
  .nav { gap:12px; font-size:.76rem; }
  .nav .hide-mobile { display:none; }
  .hero { padding-top:52px; }
  .hero h1 { font-size:clamp(3.4rem,17vw,5.6rem); }
  .hero-bottom,.feature,.about-grid,.signoff-inner { grid-template-columns:1fr; }
  .hero-bottom { gap:26px; }
  .feature-media { min-height:290px; }
  .post-row { grid-template-columns:34px minmax(0,1fr); gap:14px; }
  .post-meta { grid-column:2; text-align:left; margin-top:-10px; }
  .person + .person { border-left:0; border-top:2px solid var(--line); }
  .person-top { grid-template-columns:72px 1fr; gap:16px; }
  .person img { width:72px; height:72px; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .article-header h1 { font-size:clamp(3.1rem,15vw,5rem); }
  .article-image,.video-shell,.image-grid { width:100%; margin-left:0; margin-right:0; }
  .image-grid { grid-template-columns:1fr; }
  .image-grid img { min-height:0; }
  .prose table { display:block; overflow-x:auto; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }