:root { --paper:#f7f5f2; --ink:#0a0a0a; --muted:#6c6e72; --line:#b8b6b1; --line-soft:#e8e6e1; --navy:#1a3a5c; --terracotta:#b8543a; --white:#fff; --gutter:64px; --section:128px; --font-primary:"TPS Futura","Futura",var(--font-latin),Inter,system-ui,sans-serif; --font-body:var(--font-jp),"Yu Gothic",sans-serif; }
@font-face { font-family:"TPS Futura"; src:local("Futura"),local("Futura Medium"),local("Futura-Medium"),local("Futura Book"),local("Futura-Book"); font-weight:400 700; font-style:normal; font-display:swap; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.7; }
a { color:inherit; text-decoration:none; } button,textarea { font:inherit; }
.skip-link { position:fixed; z-index:20; left:16px; top:10px; transform:translateY(-150%); padding:8px 12px; background:var(--ink); color:var(--white); }.skip-link:focus { transform:none; }
.site-header { height:auto; min-height:72px; padding:24px var(--gutter); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:var(--paper); position:relative; z-index:2; }
.brand,nav,.lab-pill,.eyebrow,.hero-note,.section-index,.micro,.step-card>span,.statement-panel>span,.test-card>span,.layers article>span { font-family:var(--font-primary); font-weight:500; letter-spacing:.1em; }
.brand { width:190px; height:22px; }.brand svg { display:block; width:100%; height:100%; overflow:visible; }.brand text { font-family:var(--font-primary); font-size:16px; font-weight:700; letter-spacing:1.6px; }.site-header nav { display:flex; gap:32px; font-size:14px; }.site-header nav a:hover { text-decoration:underline; text-underline-offset:6px; }
.lab-pill { justify-self:end; padding:0; border:0; font-size:12px; }
.hero { min-height:calc(100svh - 72px); padding:48px var(--gutter) 32px; display:flex; flex-direction:column; position:relative; }
.eyebrow { display:flex; justify-content:space-between; font-size:12px; line-height:1.7; }
.hero h1 { margin:auto 0; max-width:1180px; font-family:var(--font-body); font-size:clamp(68px,10.2vw,132px); line-height:.98; letter-spacing:-.055em; font-weight:400; }
.hero-triplet { padding-top:16px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; font-family:var(--font-primary); font-size:12px; font-weight:500; letter-spacing:.1em; }.hero-triplet span:nth-child(2) { text-align:center; }.hero-triplet span:last-child { text-align:right; }
.section-pad { padding:var(--section) var(--gutter); }.section-index { margin-bottom:48px; color:var(--ink); font-size:12px; }
.premise { display:block; border-top:1px solid var(--line-soft); }.premise-copy { max-width:1152px; }.big-copy { max-width:1000px; margin:0 0 64px; font-size:clamp(52px,6vw,80px); line-height:1.05; letter-spacing:-.025em; font-weight:500; }
.copy-columns { display:grid; grid-template-columns:1fr 1fr; gap:64px; max-width:920px; margin-left:auto; }.copy-columns p,.section-heading p { margin:0; font-size:18px; line-height:1.8; }
.model { background:var(--paper); color:var(--ink); border-top:1px solid var(--line-soft); }.light { color:var(--ink); }
.section-heading { max-width:1152px; margin:0 0 80px; display:grid; grid-template-columns:2fr 1fr; gap:64px; align-items:end; }.section-heading h2 { max-width:800px; margin:0; font-size:clamp(52px,6vw,80px); line-height:1.05; letter-spacing:-.025em; font-weight:500; }.section-heading p { max-width:700px; }
.step-grid { display:block; border-top:1px solid var(--line); }.step-card { min-height:0; padding:48px 0; display:grid; grid-template-columns:80px 300px 1fr; gap:32px; align-items:start; border-right:0; border-bottom:1px solid var(--line); }.step-card>span { font-size:14px; }.step-card h3 { margin:0; font-size:20px; line-height:1.5; font-weight:500; }.step-card p { max-width:620px; margin:0; font-size:18px; line-height:1.8; opacity:1; }
.builder { border-top:1px solid var(--line-soft); }.builder-shell { display:grid; grid-template-columns:1.1fr .9fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; }.builder-inputs { padding:0 48px 0 0; }.builder-inputs label { display:grid; grid-template-columns:112px 1fr; gap:24px; padding:40px 0; border-bottom:1px solid var(--line-soft); }.builder-inputs label:last-child { border-bottom:0; }.builder-inputs span { font-family:var(--font-primary); font-size:12px; letter-spacing:.08em; }.builder-inputs b { font-size:18px; font-weight:500; }.builder-inputs textarea { grid-column:2; min-height:76px; padding:12px 0; resize:vertical; border:0; border-bottom:1px solid var(--line); outline:0; background:transparent; line-height:1.8; }.builder-inputs textarea:focus { border-color:var(--ink); }
.statement-panel { min-height:520px; padding:48px 0 48px 48px; display:flex; flex-direction:column; border-left:1px solid var(--line); background:transparent; }.statement-panel p { margin:auto 0; font-size:clamp(34px,3.6vw,52px); line-height:1.35; letter-spacing:-.025em; font-weight:400; }.statement-panel button { align-self:flex-start; padding:0 0 2px; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent; cursor:pointer; font-family:var(--font-primary); font-size:12px; letter-spacing:.08em; }.statement-panel button:hover { color:var(--muted); }
.boundary-note { max-width:720px; margin:32px 0 0 auto; color:var(--muted); font-size:13px; line-height:1.8; }.boundary-note strong { margin-right:16px; font-family:var(--font-primary); letter-spacing:.08em; }
.field-test { background:var(--paper); color:var(--ink); border-top:1px solid var(--line-soft); }.test-shell { display:grid; grid-template-columns:1fr 2fr; border-top:1px solid var(--line); }.test-tabs { display:flex; flex-direction:column; }.test-tabs button { padding:28px 0; display:flex; justify-content:space-between; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; cursor:pointer; opacity:.5; }.test-tabs button[aria-selected="true"] { opacity:1; }.test-tabs span { font-family:var(--font-primary); font-size:12px; }.test-card { min-height:540px; margin-left:64px; padding:48px 0 0 64px; display:flex; flex-direction:column; border-left:1px solid var(--line); background:transparent; color:var(--ink); }.test-card h3 { max-width:760px; margin:auto 0; font-size:clamp(40px,4.6vw,68px); line-height:1.12; letter-spacing:-.025em; font-weight:400; }.checks { padding-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; border-top:1px solid var(--line); }.checks p { margin:0; font-size:14px; line-height:1.8; }.checks b { display:block; margin-bottom:6px; font-family:var(--font-primary); font-size:11px; font-weight:500; letter-spacing:.1em; }.test-verdict { margin:24px 0 0; padding:20px 0 0; border-top:1px solid var(--line-soft); color:var(--muted); font-size:13px; line-height:1.8; }.test-verdict strong { margin-right:16px; color:var(--ink); font-family:var(--font-primary); font-size:11px; letter-spacing:.1em; }
.playbook { border-bottom:1px solid var(--line-soft); }.layers { max-width:1152px; margin-left:auto; }.layers article { padding:48px 0; display:grid; grid-template-columns:160px 320px 1fr; gap:32px; align-items:start; border-top:1px solid var(--line); background:transparent; }.layers article:last-child { border-bottom:1px solid var(--line); }.layers h3 { margin:0; font-family:var(--font-primary); font-size:24px; line-height:1.4; font-weight:500; }.layers p { grid-column:3; margin:0; font-size:18px; line-height:1.8; }.layers b { grid-column:3; justify-self:start; padding-top:8px; color:var(--muted); font-size:13px; font-weight:500; }.layer-link { height:64px; display:grid; place-items:center; font-family:var(--font-primary); font-size:12px; letter-spacing:.08em; }
.related-reading { border-bottom:1px solid var(--line-soft); }.reading-list { border-top:1px solid var(--line); }.reading-list>a { padding:40px 0; display:grid; grid-template-columns:120px 1.3fr 1fr auto; gap:32px; align-items:start; border-bottom:1px solid var(--line); }.reading-list span,.reading-list b { font-family:var(--font-primary); font-size:12px; font-weight:500; letter-spacing:.1em; }.reading-list h3 { margin:0; font-size:24px; line-height:1.45; font-weight:500; }.reading-list p { margin:0; font-size:15px; line-height:1.8; color:var(--muted); }.reading-list b { padding-bottom:2px; border-bottom:1px solid transparent; white-space:nowrap; }.reading-list>a:hover b { border-color:var(--ink); }
.closing { padding:var(--section) var(--gutter); background:var(--paper); text-align:left; }.closing h2 { max-width:1040px; margin:48px 0; font-size:clamp(52px,6vw,80px); line-height:1.12; letter-spacing:-.025em; font-weight:500; }.closing p { max-width:720px; margin:0 0 48px; font-size:18px; line-height:1.8; }.closing a { display:inline-flex; gap:48px; padding-bottom:2px; border-bottom:1px solid var(--ink); font-family:var(--font-primary); font-size:14px; font-weight:500; letter-spacing:.08em; }.closing a:hover { color:var(--muted); }
.labs-return { padding:64px var(--gutter); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); font-family:var(--font-primary); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }.labs-return a { border-bottom:1px solid transparent; }.labs-return a:hover { border-color:var(--ink); }.labs-return span { color:var(--muted); }.site-footer { padding:48px var(--gutter) 24px; border-top:1px solid var(--ink); }.site-footer-inner { display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--muted); font-family:var(--font-primary); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }.site-footer-inner span:last-child { display:flex; gap:8px; }.site-footer-inner i { font-style:normal; }.site-footer a:hover { color:var(--ink); }
button:focus-visible,a:focus-visible,textarea:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
@media (max-width:800px) { :root { --gutter:32px; --section:96px; }.site-header { grid-template-columns:1fr auto; }.site-header nav { display:none; }.brand { width:156px; }.hero { min-height:calc(100svh - 72px); padding-top:40px; }.hero h1 { font-size:clamp(56px,16vw,92px); }.hero-triplet { grid-template-columns:1fr; gap:8px; }.hero-triplet span:nth-child(2),.hero-triplet span:last-child { text-align:left; }.premise,.section-heading { grid-template-columns:1fr; }.copy-columns { grid-template-columns:1fr; gap:32px; }.step-card { grid-template-columns:48px 1fr; gap:20px; }.step-card h3,.step-card p { grid-column:2; }.builder-shell,.test-shell { grid-template-columns:1fr; }.builder-inputs { padding-right:0; }.builder-inputs label { grid-template-columns:1fr; }.builder-inputs textarea { grid-column:1; }.statement-panel { min-height:400px; padding:48px 0; border-left:0; border-top:1px solid var(--line); }.test-card { min-height:420px; margin:48px 0 0; padding:48px 0 0; border-left:0; border-top:1px solid var(--line); }.checks { grid-template-columns:1fr; }.layers article,.reading-list>a { grid-template-columns:1fr; }.layers p,.layers b { grid-column:1; }.reading-list>a { gap:16px; }.reading-list b { justify-self:start; }.labs-return,.site-footer-inner { flex-direction:column; align-items:flex-start; }.labs-return { gap:12px; padding-top:48px; padding-bottom:48px; } }
@media (max-width:800px) {
  .site-header .brand { width:auto; height:auto; font-size:12px; white-space:nowrap; }
  .hero h1 { font-size:clamp(28px,7.2vw,56px); line-height:1.4; }
  .big-copy { font-size:clamp(26px,5.2vw,42px); line-height:1.5; text-wrap:balance; }
  .test-card h3 { font-size:clamp(28px,5.2vw,42px); line-height:1.5; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
