/* ================================================================
   HEAVY MACHINERY ENCYCLOPEDIA — SHARED DESIGN SYSTEM
   Blueprint visual language: drafting paper, ink, blueprint blue.
   ================================================================ */
:root{
  --paper:#f5f5f1; --surface:#ffffff; --surface-2:#eeede8;
  --ink:#151a1f; --mid:#5b6672; --faint:#8a92a0; --line:#dbdfe2; --line-strong:#c3c9ce;
  --blue:#2454c7; --blue-soft:#e8edfb;
  --orange:#c1541d; --orange-soft:#f7e8df;
  --green:#2f7d4f; --green-soft:#e6f1ea;
  --font-display:'IBM Plex Sans Condensed',Arial Narrow,sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,Segoe UI,sans-serif;
  --font-mono:'IBM Plex Mono',SFMono-Regular,Consolas,monospace;
  --maxw:880px; --edge:clamp(20px,5vw,56px);
}
*{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.65;}
a{color:var(--blue); text-decoration-thickness:1px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.1; margin:0 0 .5em;}
code{font-family:var(--font-mono); background:var(--surface-2); padding:.1em .35em; border-radius:3px; font-size:.9em;}
.mono{font-family:var(--font-mono);}
p{margin:0 0 1em; max-width:70ch;}
ul,ol{margin:0 0 1em; padding-left:1.25em; max-width:68ch;}
li{margin-bottom:.45em;}
img,svg{max-width:100%;}

/* ---------- header ---------- */
#site-header{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line); }
.hdr-inner{max-width:var(--maxw); margin:0 auto; padding:14px var(--edge); display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); text-decoration:none; display:flex; align-items:baseline; gap:8px;}
.brand .mark{color:var(--blue);}
.hdr-nav{display:flex; gap:6px; align-items:center; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
.hdr-nav a, .hdr-nav button{color:var(--mid); text-decoration:none; padding:7px 10px; border-radius:3px; border:1px solid transparent; background:none; font-family:inherit; font-size:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer;}
.hdr-nav a:hover, .hdr-nav button:hover{color:var(--ink); background:var(--surface-2);}

/* ---------- overlay index ---------- */
.overlay{position:fixed; inset:0; z-index:80; background:var(--paper); overflow-y:auto;}
.overlay[hidden]{display:none;}
.overlay-top{position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:14px var(--edge);}
.overlay-title{font-family:var(--font-display); font-weight:700; font-size:18px;}
.overlay-close{font-family:var(--font-mono); font-size:12px; text-transform:uppercase; border:1px solid var(--line-strong); background:var(--surface); padding:8px 12px; border-radius:3px; cursor:pointer;}
.overlay-body{max-width:var(--maxw); margin:0 auto; padding:28px var(--edge) 80px; display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.overlay-group h3{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--mid); font-family:var(--font-mono); font-weight:600; margin-bottom:10px;}
.overlay-group ul{list-style:none; margin:0; padding:0;}
.overlay-group li{margin:0; border-top:1px solid var(--line);}
.overlay-group li:last-child{border-bottom:1px solid var(--line);}
.overlay-group a{display:block; padding:9px 2px; text-decoration:none; color:var(--ink); font-size:14.5px;}
.overlay-group a:hover{color:var(--blue);}

/* ---------- main / crumb ---------- */
main{max-width:var(--maxw); margin:0 auto; padding:0 var(--edge) 90px;}
.crumb{font-family:var(--font-mono); font-size:11.5px; color:var(--faint); padding:16px 0 0; text-transform:uppercase; letter-spacing:.03em;}
.crumb a{color:var(--faint); text-decoration:none;}
.crumb a:hover{color:var(--blue);}

/* ---------- hero ---------- */
.hero{padding:22px 0 30px; border-bottom:3px solid var(--ink); margin-bottom:38px;}
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:4px 10px; border-radius:20px; border:1px solid var(--blue); color:var(--blue); background:var(--blue-soft);}
.chip.domain{border-color:var(--orange); color:var(--orange); background:var(--orange-soft);}
.hero h1{font-size:clamp(30px,5vw,46px); margin:14px 0 12px;}
.hero .lede{font-size:17px; color:var(--mid); max-width:66ch;}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:22px; border-radius:4px; overflow:hidden;}
.stat-row .stat{background:var(--surface); padding:12px 15px;}
.stat-row .stat .l{display:block; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin-bottom:5px;}
.stat-row .stat .v{font-family:var(--font-mono); font-size:15px; font-weight:600;}

/* ---------- sections ---------- */
.block{padding-top:36px; border-top:1px solid var(--line);}
.block:first-of-type{border-top:none;}
.block h2{font-size:22px; margin-bottom:14px;}
.block h2 .n{font-family:var(--font-mono); font-size:12px; color:var(--faint); font-weight:500; margin-right:10px;}

.component-list{list-style:none; padding:0; margin:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.component-list li{background:var(--surface); padding:11px 15px; display:flex; gap:14px; margin:0;}
.component-list .cname{font-weight:600; flex:0 0 auto; min-width:150px;}
.component-list .cnote{color:var(--mid); font-size:14.5px;}

.concept-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; margin:0;}
.concept-card{background:var(--surface); padding:16px 18px; text-decoration:none; color:inherit; display:block;}
.concept-card:hover{background:var(--blue-soft);}
.concept-card .cc-domain{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--orange); display:block; margin-bottom:6px;}
.concept-card .cc-title{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--blue); margin-bottom:6px;}
.concept-card .cc-blurb{font-size:13.5px; color:var(--mid); margin:0;}

table.spec-table{border-collapse:collapse; width:100%; font-size:14.5px;}
table.spec-table td{padding:10px 4px; border-bottom:1px solid var(--line);}
table.spec-table tr:last-child td{border-bottom:none;}
table.spec-table td:first-child{color:var(--mid); width:46%;}
table.spec-table td:last-child{font-family:var(--font-mono); font-weight:600; text-align:right;}

.example-list{list-style:none; margin:0; padding:0;}
.example-list li{padding:12px 0; border-bottom:1px solid var(--line); margin:0;}
.example-list li:last-child{border-bottom:none;}
.example-list .ex-name{font-weight:600; display:block; margin-bottom:2px;}
.example-list .ex-note{color:var(--mid); font-size:14.5px;}

.facts-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.facts-list li{padding-left:24px; position:relative;}
.facts-list li::before{content:'▸'; position:absolute; left:0; top:0; color:var(--blue); font-size:13px;}

.related-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.related-card{background:var(--surface); padding:15px 17px; text-decoration:none; color:inherit; display:block;}
.related-card:hover{background:var(--surface-2);}
.related-card .rc-cat{font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); display:block; margin-bottom:5px;}
.related-card .rc-title{font-weight:600; color:var(--ink); font-size:14.5px;}
.related-empty{color:var(--faint); font-size:14px; font-family:var(--font-mono);}

/* ---------- equation / formula boxes (concept pages) ---------- */
.eq-box{border:1px solid var(--ink); background:var(--surface); padding:18px 22px; margin:0 0 16px; text-align:center; border-radius:3px;}
.eq-box:last-child{margin-bottom:0;}
.eq-box .eq-l{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--mid); margin-bottom:10px;}
.eq-box .eq-b{font-family:var(--font-mono); font-size:clamp(15px,2.1vw,18px);}
.eq-box .eq-n{font-family:var(--font-mono); font-size:11.5px; color:var(--mid); margin-top:10px; text-align:left;}

/* ---------- interactive sim shell (used by gear-ratios / pascals-law) ---------- */
.sim-panel{border:1px solid var(--ink); background:var(--surface); padding:clamp(16px,3vw,30px); border-radius:4px;}
.sim-row{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12.5px; margin-bottom:6px;}
.sim-panel input[type=range]{width:100%; appearance:none; height:2px; background:var(--ink); outline:none; margin:14px 0 22px;}
.sim-panel input[type=range]::-webkit-slider-thumb{appearance:none; width:16px; height:16px; background:var(--blue); border-radius:50%; cursor:pointer; border:3px solid var(--surface); box-shadow:0 0 0 1px var(--blue);}
.sim-panel input[type=range]::-moz-range-thumb{width:16px; height:16px; background:var(--blue); border-radius:50%; cursor:pointer; border:3px solid var(--surface); box-shadow:0 0 0 1px var(--blue);}
.sim-readout{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:18px; border-radius:3px; overflow:hidden;}
.sim-readout .cell{background:var(--surface); padding:10px 13px;}
.sim-readout .cell .l{display:block; font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin-bottom:4px;}
.sim-readout .cell .v{font-family:var(--font-mono); font-size:15px; font-weight:600;}
.sim-note{font-family:var(--font-mono); font-size:11.5px; color:var(--mid); margin-top:14px;}
.gear-viewport{width:100%; max-width:420px; margin:0 auto; aspect-ratio:1/1;}
.viewport{width:100%; max-width:420px; margin:0 auto; aspect-ratio:1/1;}
.sim-btn-row{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 6px;}
.sim-btn{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; border:1px solid var(--line-strong); background:var(--surface); padding:8px 14px; border-radius:4px; cursor:pointer; color:var(--ink);}
.sim-btn:hover{border-color:var(--ink);}
.sim-btn.active{background:var(--ink); color:var(--surface); border-color:var(--ink);}

/* ---------- scale comparison (machine hero) ---------- */
.scale-compare{display:flex; align-items:center; gap:24px; margin-top:22px; padding-top:18px; border-top:1px dashed var(--line-strong); flex-wrap:wrap;}
.scale-compare svg{display:block; width:min(100%,520px); height:auto; aspect-ratio:340/220; flex:0 0 auto;}
.sc-caption{font-family:var(--font-mono); font-size:13.5px; line-height:1.55; color:var(--mid); margin:0; max-width:44ch;}

/* ---------- machine photo ---------- */
.machine-photo{margin:28px 0 0; padding:0;}
.machine-photo img{width:100%; display:block; border-radius:5px; border:1px solid var(--line);}
.machine-photo figcaption{font-family:var(--font-mono); font-size:11.5px; color:var(--faint); margin-top:8px; line-height:1.5;}
.machine-photo figcaption a{color:var(--faint);}

/* ---------- footer ---------- */
#site-footer{border-top:1px solid var(--line); margin-top:60px;}
.ftr-inner{max-width:var(--maxw); margin:0 auto; padding:24px var(--edge); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; color:var(--faint);}

/* ---------- index page ---------- */
.idx-hero{padding:56px 0 40px; border-bottom:3px solid var(--ink);}
.idx-hero h1{font-size:clamp(34px,6vw,58px); max-width:16ch;}
.idx-hero .lede{font-size:18px; color:var(--mid); max-width:62ch;}
.idx-section{padding:44px 0; border-bottom:1px solid var(--line);}
.idx-section h2{font-size:22px;}
.idx-section .idx-dek{color:var(--mid); margin-bottom:22px; max-width:64ch;}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.cat-card{background:var(--surface); padding:18px 20px;}
.cat-card h3{font-size:15px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--line);}
.cat-card ul{list-style:none; margin:0; padding:0;}
.cat-card li{margin:0;}
.cat-card a{display:block; padding:5px 0; color:var(--ink); text-decoration:none; font-size:14px;}
.cat-card a:hover{color:var(--blue);}
.domain-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.domain-card{background:var(--surface); padding:16px 18px; text-decoration:none; color:inherit; display:block;}
.domain-card:hover{background:var(--orange-soft);}
.domain-card .dc-domain{font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:6px;}
.domain-card .dc-title{font-weight:600; color:var(--ink);}

/* ---------- quiz promo (index page) ---------- */
.quiz-promo{border:1px solid var(--ink); border-radius:6px; padding:24px 26px; background:var(--surface);}
.quiz-promo h2{margin:12px 0 8px;}
.quiz-promo .idx-dek{margin:0;}
.quiz-promo a{font-weight:600;}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .hdr-nav{gap:2px;}
  .component-list li{flex-direction:column; gap:2px;}
  .component-list .cname{min-width:0;}
}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important; transition:none!important; animation:none!important;} }