@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}

:root{
  --paper:#f4f1ea;
  --ink:#171512;
  --muted:#5f5a4e;
  --faint:#6e6857;
  --hair:#d9d3c4;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6}
::selection{background:var(--ink);color:var(--paper)}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}

/* Mono micro-type */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:400}

/* Top bar */
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--ink)}
.nav-logo img{height:22px;width:auto;display:block}
.nav-links{display:flex;gap:32px}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}

/* Hero */
.hero{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;padding:84px 0 56px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,9vw,108px);line-height:.98;letter-spacing:-.01em;max-width:860px}
h1 em{font-style:italic}
.hero-meta{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:2.2;padding-bottom:8px}
.sub{font-size:19px;color:var(--muted);max-width:620px;padding:0 0 56px}
@media(max-width:760px){.hero{grid-template-columns:1fr;align-items:start;padding:56px 0 36px}.hero-meta{text-align:left;padding-bottom:0}}

/* Homepage lead hero with pillar cards */
.hero-lead{padding:80px 0 64px;border-bottom:1px solid var(--ink)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--ink);display:inline-block}
.lead-copy h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,7vw,92px);line-height:.98;letter-spacing:-.01em;margin-top:24px}
.lead-copy h1 em{font-style:italic}
.lead-sub{font-size:19px;color:var(--muted);margin-top:28px;max-width:520px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{background:#faf8f1;border:1px solid var(--hair);border-radius:6px;padding:26px 22px 24px;min-height:240px;
  display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 4px 20px rgba(23,21,18,.05);transition:box-shadow .18s ease,transform .18s ease}
.pcard:hover{box-shadow:0 8px 28px rgba(23,21,18,.09);transform:translateY(-3px)}
.pcard-word{font-family:var(--serif);font-size:clamp(36px,4vw,54px);line-height:1;letter-spacing:-.01em}
.pcard-sub{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.7;margin-top:16px}
@media(max-width:900px){.hero-lead{grid-template-columns:1fr;gap:40px;padding:60px 0 52px}.pcard{min-height:180px}}
@media(max-width:560px){.pillars{grid-template-columns:1fr}.pcard{min-height:auto;padding:22px 20px}.pcard-sub{margin-top:10px}}

/* Stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.stat{padding:30px 24px 26px;border-left:1px solid var(--hair)}
.stat:first-child{border-left:none;padding-left:0}
.stat .val{font-family:var(--serif);font-size:46px;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.stat .k{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:12px;line-height:1.4;max-width:200px}
@media(max-width:840px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:none;padding-left:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--hair)}}
@media(max-width:420px){.stat{padding:24px 16px 20px}.stat .val{font-size:36px}}

/* Asymmetric section */
.section{display:grid;grid-template-columns:280px 1fr;gap:48px;padding:88px 0 0}
.section-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.5vw,46px);line-height:1.08;max-width:640px}
.section-sub{font-size:18px;color:var(--muted);margin-top:18px;max-width:620px}
.section-sub a{color:var(--ink)}
@media(max-width:760px){.section{grid-template-columns:1fr;gap:20px;padding:60px 0 0}}

/* Numbered rows */
.rows{list-style:none;margin-top:6px}
.row{display:flex;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair)}
.rows .row:first-child{border-top:1px solid var(--ink)}
.row .num{font-family:var(--mono);font-size:12px;color:var(--faint);min-width:28px}
.row .t{font-size:19px;font-weight:500}
.row .d{font-size:16px;color:var(--muted);margin-top:5px}

/* Product index rows */
.plist{list-style:none;margin-top:6px;border-top:1px solid var(--ink)}
.prow{display:grid;grid-template-columns:44px 1fr 90px;gap:20px;align-items:baseline;
  padding:30px 12px;border-bottom:1px solid var(--hair);color:inherit;text-decoration:none;
  transition:background .15s ease,color .15s ease}
.prow .num{font-family:var(--mono);font-size:12px;color:var(--faint)}
.prow .name{font-family:var(--serif);font-size:clamp(30px,4vw,44px);line-height:1.05}
.prow .tag{font-size:17px;color:var(--muted);margin-top:8px;max-width:580px}
.prow .facts{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:14px}
.prow .go{font-family:var(--mono);font-size:16px;text-align:right;align-self:center}
a.prow:hover,a.prow:focus-visible{background:var(--ink);color:var(--paper)}
a.prow:hover .tag,a.prow:hover .num,a.prow:hover .facts,a.prow:focus-visible .tag,a.prow:focus-visible .num,a.prow:focus-visible .facts{color:var(--paper)}
div.prow{grid-template-columns:44px 1fr}
@media(max-width:600px){.prow{grid-template-columns:32px 1fr}.prow .go{display:none}}

/* Prose (legal) */
.page-head{padding:72px 0 0}
.page-head h1{font-size:clamp(44px,7vw,80px)}
.updated{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:18px}
.prose{max-width:700px;padding:40px 0 24px}
.prose h2{font-size:20px;font-weight:500;margin-top:38px}
.prose p{font-size:17px;color:var(--muted);margin-top:10px}
.prose a{color:var(--ink)}

/* Contact rows */
.crows{list-style:none;margin-top:6px}
.crow{display:grid;grid-template-columns:280px 1fr;gap:48px;padding:26px 0;border-bottom:1px solid var(--hair)}
.crows .crow:first-child{border-top:1px solid var(--ink)}
.crow .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.crow .v{font-size:18px}
.crow .v a{color:var(--ink)}
.crow .v .small{font-size:15px;color:var(--muted)}
@media(max-width:760px){.crow{grid-template-columns:1fr;gap:10px}}

/* CTA + link */
.cta{padding:100px 0 90px}
.cta-h{font-family:var(--serif);font-weight:400;font-size:clamp(36px,6vw,68px);line-height:1.02;max-width:820px}
.cta-h em{font-style:italic}
.ulink{display:inline-block;margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:6px}
.ulink:hover{background:var(--ink);color:var(--paper)}

/* Footer */
footer{border-top:1px solid var(--ink)}
.foot-inner{max-width:1200px;margin:0 auto;padding:40px 28px 40px}
.foot-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.foot-row span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* A11y */
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion: reduce){.prow{transition:none}}