:root{
  --bg:#f7f4ed; --paper:#fffdf8; --ink:#1c1b19; --muted:#67635b; --line:#d9d3c7;
  --accent:#1f6f5f; --accent2:#c85e3f; --blue:#315d93; --yellow:#d8a72f;
  --shadow:0 10px 32px rgba(30,25,18,.07); --radius:20px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62;font-size:17px}
a{color:inherit;text-decoration-color:rgba(31,111,95,.5);text-underline-offset:3px} a:hover{color:var(--accent)}
.shell{width:min(1120px,calc(100% - 40px));margin:0 auto}
.site-head{position:sticky;top:0;z-index:20;background:rgba(247,244,237,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(217,211,199,.8)}
.head-inner{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-weight:800;text-decoration:none;letter-spacing:-.02em}.site-head nav{display:flex;gap:22px;font-size:15px}.site-head nav a{text-decoration:none;color:var(--muted)}.site-head nav a:hover{color:var(--ink)}
.hero{padding:78px 0 44px;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.eyebrow{font:700 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(48px,7vw,88px);line-height:.96;letter-spacing:-.055em;margin:12px 0 24px;max-width:850px}
.lede{font-size:clamp(21px,2.3vw,30px);line-height:1.35;letter-spacing:-.02em;margin:0 0 20px}.sub{color:var(--muted);font-size:17px;max-width:760px}
.links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px}.links a{font-weight:650;font-size:15px}
.hero-photo{position:relative}.hero-photo img{width:100%;display:block;border-radius:26px;box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover}.scribble{position:absolute;right:16px;bottom:14px;background:rgba(255,253,248,.92);border:1px solid var(--line);border-radius:999px;padding:7px 11px;font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;transform:rotate(-2deg)}
section{padding:62px 0;border-top:1px solid var(--line);scroll-margin-top:88px}
section > h2{margin-bottom:20px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}.section-head h2,h2{font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.035em;margin:0}.section-head p{max-width:520px;color:var(--muted);margin:0}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 4px 18px rgba(30,25,18,.035)}.card h3{font-size:25px;line-height:1.1;letter-spacing:-.025em;margin:8px 0 12px}.card p{margin:0;color:#393631}.card.feature{grid-column:span 2;display:grid;grid-template-columns:1fr 1.3fr;gap:26px;align-items:start}.card.feature>p{align-self:center}.kicker{font:700 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.tiny{font-size:14px;color:var(--muted)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.story-grid.reverse .story-copy{order:2}.story-grid.reverse .photo-stack{order:1}.story-copy h3{font-size:31px;letter-spacing:-.03em;margin:0 0 12px}.story-copy p{font-size:18px}.photo-stack{display:grid;grid-template-columns:1.1fr .9fr;gap:10px}.photo-stack img{width:100%;height:100%;min-height:250px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow)}.photo-stack img:nth-child(2){transform:translateY(22px) rotate(1.2deg)}
.lab-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:12px;margin:26px 0}.lab-grid img{width:100%;height:100%;object-fit:cover;border-radius:18px;border:1px solid var(--line)}.lab-grid .side{display:grid;gap:12px}.caption{color:var(--muted);font-size:13px;margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.note{background:#efe9db;border:1px solid #d6cbb7;border-radius:18px;padding:19px 21px;margin-top:22px}.note strong{color:var(--accent2)}
.about{max-width:850px}.about p{font-size:19px}.about p:first-child{font-size:22px;color:#2b2925}
.site-foot{border-top:1px solid var(--line);padding:30px 0 46px;color:var(--muted);font-size:14px}.foot-inner{display:flex;justify-content:space-between;gap:20px}
/* project pages */
.back{display:inline-block;margin-top:34px;font-size:14px;font-weight:700;text-decoration:none;color:var(--muted)}.project-hero{padding:34px 0 28px;max-width:900px}.project-hero h1{font-size:clamp(46px,7vw,78px);margin:10px 0 14px}.project-hero .one-line{font-size:22px;line-height:1.45;max-width:850px;margin-top:28px}.project-status{display:inline-block;margin-top:14px;padding:7px 10px;border-radius:999px;background:#eee8da;border:1px solid var(--line);font-size:13px;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}.callout,.primitive,.role,.stat,.flow-step{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px}.callout h3,.primitive h3{margin:0 0 8px;font-size:20px}.callout p,.primitive p{margin:0;color:#49453e}.prose{max-width:850px}.prose p{font-size:18px}.primitive-grid,.role-grid,.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.primitive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.role-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.role strong,.stat strong{display:block;font-size:22px;margin-bottom:4px}.role span,.stat span{font-size:14px;color:var(--muted)}.stat strong{font-size:28px;letter-spacing:-.03em;color:var(--accent)}
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:stretch}.flow-step{font-size:13px;padding:14px}.flow-step strong{display:block;margin-bottom:4px}.figure{margin:26px 0}.figure img{width:100%;border-radius:16px;border:1px solid var(--line);background:#fff}.figure figcaption{font-size:13px;color:var(--muted);margin-top:8px}.result-line{margin-top:20px;padding:18px 20px;border-left:4px solid var(--accent);background:rgba(31,111,95,.06);border-radius:0 14px 14px 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#efe9db;border-radius:7px;padding:2px 6px}

.example-box{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 4px 18px rgba(30,25,18,.035)}
.example-box h3{margin:0 0 10px;font-size:24px;letter-spacing:-.02em}
.example-box p{margin:10px 0;color:#403c35}
.example-box ol{margin:12px 0 0 20px;padding:0}
.example-box li{margin:10px 0;color:#403c35}
.failure-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.failure-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px}
.failure-card h3{margin:0 0 8px;font-size:18px}
.failure-card p{margin:0;color:#49453e;font-size:15px}
.failure-card .tiny{display:block;margin-top:10px}
.bar-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.bar-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px}
.bar-card h3{margin:0 0 14px;font-size:22px;letter-spacing:-.02em}
.bar-list{display:grid;gap:14px}
.bar-row{display:grid;grid-template-columns:72px 1fr 70px;align-items:center;gap:12px;font-size:15px}
.bar-track{height:14px;border-radius:999px;background:#ede7da;overflow:hidden;border:1px solid #e2dacc}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#3e8f7f)}
.bar-fill.orange{background:linear-gradient(90deg,var(--accent2),#df8b72)}
.bar-row strong{font-size:14px}
.bar-row span:last-child{font-variant-numeric:tabular-nums;text-align:right;color:var(--muted)}
.photo-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow)}
.photo-card img{width:100%;display:block;border-radius:12px}
.photo-card figcaption{font-size:13px;color:var(--muted);margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:820px){body{font-size:16px}.shell{width:min(100% - 28px,1120px)}.hero{grid-template-columns:1fr;padding:54px 0 34px;gap:28px}.hero-photo{max-width:650px}.section-head{display:block}.section-head p{margin-top:10px}.work-grid,.story-grid,.split,.bar-panel,.failure-grid{grid-template-columns:1fr}.card.feature{grid-column:auto;display:block}.card.feature .links{margin-top:18px}.story-grid.reverse .story-copy,.story-grid.reverse .photo-stack{order:initial}.photo-stack img:nth-child(2){transform:none}.lab-grid{grid-template-columns:1fr}.lab-grid .side{grid-template-columns:1fr 1fr}.primitive-grid,.role-grid,.stat-grid{grid-template-columns:repeat(2,1fr)}.flow{grid-template-columns:repeat(2,1fr)}.site-head nav{gap:14px}.site-head nav a:nth-child(2){display:none}}
@media(max-width:520px){.head-inner{min-height:60px}.site-head nav a{font-size:13px}.hero{padding-top:42px}h1{font-size:48px}.lede{font-size:21px}.primitive-grid,.role-grid,.stat-grid,.lab-grid .side{grid-template-columns:1fr}.photo-stack{grid-template-columns:1fr 1fr}.photo-stack img{min-height:180px}.foot-inner{display:block}.foot-inner span{display:block;margin-bottom:5px}}

.statement-list{margin:12px 0 0;padding-left:24px}
.statement-list li{margin:10px 0;color:#403c35;padding-left:4px}
.statement-list code{white-space:nowrap}