:root{--paper:#f5f1e8;--ink:#0d141b;--muted:#666b70;--line:rgba(13,20,27,.15);--blue:#9dbfe6;--sans:"Avenir Next","Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1500px;margin:auto;padding:0 3.7vw}
header{height:86px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:280px 1fr 170px;align-items:center;padding:0 3.7vw;background:rgba(245,241,232,.97);position:sticky;top:0;z-index:30;backdrop-filter:blur(10px)}
.brand img{width:170px;max-height:58px;object-fit:contain}
.brand small{display:block;margin-top:5px;font-size:8px;letter-spacing:.19em}
.nav{display:flex;justify-content:center;gap:36px;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.nav a{padding:33px 0 28px}
.langs{display:flex;justify-content:flex-end;gap:14px;font-size:9px;letter-spacing:.16em}
.breadcrumb{padding:22px 0;border-bottom:1px solid var(--line);font:8px/1.3 var(--mono);letter-spacing:.09em;color:var(--muted)}
.breadcrumb a{color:#5686b8}
.hero{border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:46% 54%;min-height:390px}
.hero-copy{padding:64px 4vw 54px 0;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:9px;letter-spacing:.21em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.hero h1{font-size:clamp(43px,5.2vw,82px);font-weight:300;line-height:.94;letter-spacing:-.055em;margin:0 0 24px}
.hero-sub{font-size:13px;line-height:1.72;max-width:590px;color:#30363b}
.hero-visual{border-left:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:36px}
.hero-visual img{width:100%;max-height:350px;object-fit:contain;mix-blend-mode:multiply}
.lexicon-intro{padding:64px 0 28px;border-bottom:1px solid var(--line)}
.lexicon-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:74px}
.lexicon-word{margin:0 0 13px;font-size:clamp(35px,4.7vw,70px);line-height:.96;letter-spacing:-.045em;font-weight:500}
.lexicon-meta{display:flex;gap:11px;font-size:15px}
.lexicon-ipa{font-family:Georgia,serif;font-style:italic;font-size:17px}
.lexicon-grammar{font-variant:small-caps;letter-spacing:.07em;opacity:.64}
.lexicon-etymology{margin:0 0 22px;font-size:14px;line-height:1.65;opacity:.66}
.lexicon-kicker{display:block;margin-bottom:7px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.lexicon-definition{margin:0;font-size:clamp(18px,2vw,24px);line-height:1.44}
.lexicon-highlight{border-bottom:2px solid var(--blue)}
.lexicon-transition{grid-column:1/-1;margin-top:9px;padding-top:22px;border-top:1px solid rgba(24,32,39,.09);font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.55}
.chapter-nav{position:sticky;top:86px;z-index:20;background:rgba(245,241,232,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.chapter-row{display:grid;grid-template-columns:repeat(9,1fr);overflow-x:auto}
.chapter-row a{min-width:118px;padding:18px 12px 16px;border-right:1px solid var(--line);font-size:7px;line-height:1.45;letter-spacing:.1em;text-transform:uppercase}
.chapter-row a span{display:block;font:7px var(--mono);color:var(--muted);margin-bottom:8px}
.section{border-bottom:1px solid var(--line);scroll-margin-top:160px}
.section-grid{display:grid;grid-template-columns:120px minmax(0,1fr) 300px;gap:42px;padding:56px 0}
.num{font:9px var(--mono);color:#6c9bc9}
.content h2{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;margin:0 0 22px}
.content p,.content li{font-size:11px;line-height:1.82}
.content p{max-width:850px}
.aside{border-left:1px solid var(--line);padding-left:26px}
.aside h3{font-size:8px;letter-spacing:.21em;text-transform:uppercase;margin:0 0 16px}
.aside p,.aside li{font-size:10px;line-height:1.72;color:#40464b}
.microline{width:34px;height:1px;background:var(--blue);margin:0 0 20px}
.callout{padding:20px 22px;border-left:2px solid var(--blue);background:rgba(157,191,230,.08);margin:25px 0}
.visual{margin:28px 0 0}
.visual img{display:block;width:100%;max-height:560px;object-fit:contain;mix-blend-mode:multiply}
.visual figcaption{padding:9px 2px;font:8px/1.5 var(--mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-size:11px;letter-spacing:.03em}
.faq details p{margin:12px 0 0;color:#42484d}
.sources a{border-bottom:1px solid var(--blue)}
.cta{padding:42px 0}
.cta-grid{display:grid;grid-template-columns:1fr auto;align-items:center}
.btn{border:1px solid var(--ink);padding:14px 18px;font-size:8px;letter-spacing:.14em}
.footer{border-top:1px solid var(--line);padding:28px 3.7vw;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){header{grid-template-columns:1fr auto;height:76px}
.nav{display:none}
.hero-grid,.lexicon-wrap{grid-template-columns:1fr}
.hero-visual{border-left:0;border-top:1px solid var(--line)}
.section-grid{grid-template-columns:42px 1fr;gap:20px}
.aside{grid-column:2;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
.compare{grid-template-columns:1fr}
.chapter-nav{top:76px}
.footer{gap:14px;flex-wrap:wrap}
}