/* Guides only. Tokens come from site.css. Reads like a good workshop manual: one column of text, drawings wider than the text. */
.g-head{padding-block:clamp(26px,4vw,56px) clamp(22px,3vw,40px);display:grid;gap:16px}
.g-h1{font:750 clamp(36px,5vw,70px)/1 var(--disp);letter-spacing:-.03em;max-width:20ch;font-variation-settings:"opsz" 96}
.g-lead{max-width:60ch}
.g-meta{font:400 13px/1.4 var(--mono);color:var(--mut)}
.g-grid{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,860px);gap:clamp(28px,5vw,76px);align-items:start;padding-bottom:clamp(50px,8vw,100px);justify-content:start}
.g-rail{position:sticky;top:calc(var(--hh) + 18px);display:grid;gap:14px;max-height:calc(100vh - var(--hh) - 36px);overflow:auto}
.g-rail__h{font:600 12px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.g-toc{display:grid;gap:2px;border-left:1px solid var(--line)}
.g-toc a{display:block;padding:5px 0 5px 12px;font-size:14.5px;line-height:1.3;text-decoration:none;color:var(--ink2)}
.g-toc a:hover{color:var(--sigd)}
.g-unit{display:grid;gap:2px;text-decoration:none;background:var(--paper2);border-radius:var(--r);padding:12px;font-size:15px}
.g-unit img{margin-bottom:4px}
.g-unit .card__p{font-size:15px;margin:0;min-height:1.3em}
.g-art{min-width:0}
.g-short{background:var(--night);color:var(--on);border-radius:var(--r);padding:clamp(20px,3vw,34px);margin-bottom:clamp(30px,4vw,48px)}
.g-short h2{font:600 12.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--sig);margin-bottom:14px}
.g-short ul{display:grid;gap:12px}
.g-short li{font-size:clamp(17px,1.4vw,19px);line-height:1.4;padding-left:20px;position:relative}
.g-short li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--sig)}
.g-sec{padding-block:clamp(16px,2vw,26px);scroll-margin-top:90px}
.g-sec>h2{font:750 clamp(26px,2.8vw,38px)/1.06 var(--disp);letter-spacing:-.022em;margin-bottom:16px;font-variation-settings:"opsz" 96}
.g-sec p{max-width:68ch;margin-bottom:14px}
.g-sec a{text-decoration-color:var(--sigd);text-decoration-thickness:1.5px}
.g-sec a:hover{color:var(--sigd)}
.g-sec--wrong{background:var(--paper2);border-left:4px solid var(--sig);border-radius:0 var(--r) var(--r) 0;padding:clamp(20px,3vw,32px);margin-block:clamp(18px,3vw,32px)}
.g-sec--wrong>h2{font-size:clamp(23px,2.3vw,30px)}
.g-ul,.g-ol{display:grid;gap:10px;margin-bottom:16px;max-width:68ch}
.g-ul li{padding-left:20px;position:relative}
.g-ul li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2px;background:var(--sigd)}
.g-ol{counter-reset:s}
.g-ol li{counter-increment:s;padding-left:34px;position:relative}
.g-ol li::before{content:counter(s);position:absolute;left:0;top:.08em;font:600 14px/1.6 var(--mono);color:var(--sigd)}
.g-flow{counter-reset:f;display:grid;gap:0;margin:6px 0 18px;max-width:68ch;border-left:2px solid var(--sig)}
.g-flow li{padding:9px 0 9px 18px;position:relative;display:grid;gap:1px}
.g-flow li::before{content:"";position:absolute;left:-6px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--sig)}
.g-flow span{font-size:15.5px;color:var(--ink2)}
.g-twrap{overflow-x:auto;margin:16px 0 8px;-webkit-overflow-scrolling:touch}
.g-twrap:focus-visible{outline-offset:4px}
.g-t{width:100%;border-collapse:collapse;font-size:15px;line-height:1.35}
.g-t th,.g-t td{padding:10px 12px 10px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.g-t thead th{font:600 11.5px/1.3 var(--mono);letter-spacing:.03em;color:var(--mut);text-transform:uppercase;border-bottom:1.5px solid var(--ink);vertical-align:bottom}
.g-t tbody th{font-weight:650;white-space:nowrap}
.g-t tbody th:only-child,.g-t td{font-variant-numeric:tabular-nums}
.g-t tbody tr:hover{background:rgba(20,18,16,.03)}
.g-t--num td,.g-t--num tbody th{white-space:nowrap!important}
.g-tnote{font-size:14px;color:var(--mut);margin:0 0 18px}
.g-fig{margin:20px 0}
.g-fig figcaption{font:400 12.5px/1.45 var(--mono);color:var(--mut);margin-top:8px;max-width:75ch}
.g-fig--img img{border-radius:var(--r);width:100%;max-width:640px}
.g-code{background:var(--night);color:var(--on);border-radius:10px;padding:16px 18px;overflow-x:auto;font:400 13.5px/1.55 var(--mono);margin:14px 0 18px}
.g-sec p code{font:400 14px var(--mono);background:var(--paper2);padding:1px 5px;border-radius:4px}
.g-dl{display:grid;gap:0;margin-bottom:10px}
.g-dl>div{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.g-dl>div:target{background:var(--paper2)}
.g-dl dt{font-weight:700}
.g-ltr{font:750 26px/1 var(--disp);color:var(--sigd);margin:22px 0 4px}
.g-law{font-size:14px;color:var(--mut);margin-top:22px;max-width:68ch}
.g-next{border-top:1.5px solid var(--ink);margin-top:26px;padding-top:20px}
.g-next h2{font:600 12.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.g-next ul{display:grid;gap:6px;margin-bottom:20px}
.g-next li a{font:700 clamp(20px,2vw,25px)/1.2 var(--disp);letter-spacing:-.015em;text-decoration:none}
.g-next li a::after{content:" →";color:var(--sigd)}
.g-next li a:hover{color:var(--sigd)}
.g-cta{display:flex;flex-wrap:wrap;gap:10px}
/* diagrams */
.g-svg{width:100%;max-width:640px;height:auto;background:var(--paper2);border-radius:var(--r);padding:clamp(6px,1.2vw,14px);overflow:visible}
.g-svg text{font-family:var(--mono);font-size:12.5px;fill:var(--ink)}
.g-svg .s-b{font-weight:600}
.g-svg .s-sm{font-size:11px;fill:var(--ink2)}
.g-svg .s-on{fill:var(--on)}
.g-svg .s-sig{fill:var(--sigd);font-weight:600}
.g-svg .s-letter{font-family:var(--disp);font-weight:750;fill:var(--ink)}
.g-svg .s-big{font-family:var(--disp);font-weight:800;font-size:40px;fill:var(--on)}
.s-box{fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
.s-soft{fill:rgba(20,18,16,.05)}
.s-solid{fill:var(--night);stroke:var(--night)}
.s-line{stroke:var(--ink);stroke-width:1.2}
.s-seam{stroke:var(--paper2);stroke-width:2}
.s-line-r{fill:none;stroke:var(--ink);stroke-width:1.1}
.s-thick{stroke:var(--ink);stroke-width:2.2}
.s-hot{stroke:var(--sig);stroke-width:2.2}
.s-sigl{stroke:var(--sigd);stroke-width:1.5;stroke-dasharray:5 4}
.s-dim{stroke:var(--mut);stroke-width:1}
.s-arrow{stroke:var(--ink);stroke-width:1.2}
.s-arrow-sig{stroke:var(--sigd);stroke-width:1.5}
.s-dash{fill:none;stroke:var(--mut);stroke-width:1;stroke-dasharray:4 4}
.s-hatch{fill:rgba(20,18,16,.2);stroke:none}
.s-band{fill:rgba(255,79,24,.14);stroke:none}
.s-art{fill:#d6c5a2;stroke:none}
.s-safe{fill:none;stroke:var(--sig);stroke-width:1;stroke-dasharray:4 3}
.s-bar{fill:var(--on)}
.s-fan{fill:rgba(255,79,24,.18);stroke:var(--sigd);stroke-width:1}
.s-ok{fill:#1e6a43}.s-stop{fill:#b3280a}.s-wait{fill:#8a6a14}
/* hub */
.g-hub{padding-bottom:clamp(50px,8vw,100px);display:grid;gap:clamp(30px,5vw,60px)}
.g-hub__g{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(16px,4vw,60px);border-top:1.5px solid var(--ink);padding-top:18px}
.g-hub__h p{color:var(--ink2);margin-top:8px;font-size:15.5px;max-width:30ch}
.g-hub__l a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 18px;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none}
.g-hub__l li:first-child a{padding-top:0}
.g-hub__l b{font:700 clamp(21px,2.1vw,28px)/1.12 var(--disp);letter-spacing:-.018em}
.g-hub__l span{grid-column:1;color:var(--ink2);font-size:15.5px;max-width:70ch}
.g-hub__l i{grid-column:2;grid-row:1;font:400 12.5px/1.6 var(--mono);color:var(--mut);font-style:normal}
.g-hub__l a:hover b{color:var(--sigd)}
@media (max-width:960px){.g-grid{grid-template-columns:minmax(0,1fr)}.g-rail{position:static;max-height:none;overflow:visible}.g-unit{display:none}.g-toc{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-left:0}.g-toc a{padding:6px 0;border-bottom:1px solid var(--line)}.g-hub__g{grid-template-columns:1fr}}
@media (max-width:560px){.g-t--wide{min-width:640px}.g-dl>div{grid-template-columns:1fr;gap:2px}.g-t{font-size:14px}.g-t th,.g-t td{padding-right:10px}.g-t tbody th{white-space:normal}.g-svg{padding:4px}}