:root{color-scheme:dark;--paper:var(--mineral-ink,#e8e4da);--quiet:var(--mineral-secondary,#c4c0b6);--hairline:#413f39;--back:#111110;background:var(--back);color:var(--paper);font:16px/1.55 Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-underline-offset:5px}
a:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.mast{min-height:80px;border-bottom:1px solid var(--hairline);padding:16px max(24px,calc((100vw - 1280px)/2));display:flex;justify-content:space-between;align-items:center;gap:24px}
.mast nav,.contents{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px}
.mast nav{font-size:14px}
.wordmark{font-size:23px;letter-spacing:.24em;text-decoration:none;white-space:nowrap}
.wordmark small{font-size:10px;letter-spacing:.15em;color:var(--quiet);margin-left:12px}
.solid{display:block;background:var(--paper);color:#141413;padding:10px 15px;text-decoration:none}
.book{max-width:1280px;margin:auto;padding:0 32px}
.cover{display:grid;grid-template-columns:1fr 1.06fr;align-items:center;gap:36px;padding:72px 0 54px}
.eyebrow,.scope,figcaption,.motion-grid small,.index small,.sample small{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--quiet)}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1{font:400 clamp(58px,9vw,136px)/.91 Georgia,serif;letter-spacing:-.065em;margin:25px 0}
h1 span,.scope span{color:#a9a18f}
.lede{color:var(--quiet);font-size:clamp(17px,2vw,21px);max-width:630px;line-height:1.45}
.scope{margin-top:28px;display:flex;flex-wrap:wrap;gap:9px}
.cover-media{min-height:365px;background:radial-gradient(ellipse at 50% 47%,rgb(233 230 218 / .18),transparent 62%),#050505;border:1px solid var(--hairline);display:grid;align-content:center;position:relative;padding:42px 9% 54px}
.cover-media img{display:block;width:100%;max-height:190px;object-fit:contain}
figcaption{display:flex;justify-content:space-between;gap:12px;position:absolute;bottom:18px;left:18px;right:18px}
.contents{border-block:1px solid var(--hairline);padding:16px 0;font-size:14px}
.contents a{text-decoration:none;color:var(--quiet)}
.contents a:hover{text-decoration:underline}
.chapter{padding:56px 0;border-bottom:1px solid var(--hairline);scroll-margin-top:24px}
h2{font:400 clamp(32px,5vw,58px)/1.04 Georgia,serif;letter-spacing:-.04em;margin:12px 0 18px}
h3{font-size:23px;font-weight:400;margin:8px 0}
.materials,.motion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px}
.materials article>p,.motion-grid p,.annotation,.type-spec p{color:var(--quiet);font-size:15px}
.material{width:100%;aspect-ratio:2/1;min-height:94px;border:1px solid var(--hairline);display:flex;align-items:flex-end;justify-content:space-between;padding:16px;gap:8px}
.material strong,.sample strong,.index strong{font-size:22px;font-weight:400}
.material span{font-size:12px;color:var(--quiet)}
.product{background:var(--mineral-product)}
.editorial{background:var(--mineral-editorial)}
.data{background:var(--mineral-data)}
.modal{background:var(--mineral-modal)}
.materials code{font-size:12px;display:block;margin:10px 0 5px;overflow-wrap:anywhere}
.ink-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--hairline);margin:28px 0 12px;border:1px solid var(--hairline)}
.ink-strip div{background:var(--back);padding:14px}
.ink-strip dt{font-size:13px}
.ink-strip dd{font:12px monospace;color:var(--quiet);margin-top:7px}
.ink-strip i{display:block;width:100%;height:20px;margin-bottom:9px;border:1px solid var(--hairline)}
.ink{background:var(--mineral-ink)}.secondary{background:var(--mineral-secondary)}.line{background:var(--mineral-line)}.soft{background:var(--mineral-soft-line)}.black{background:var(--mineral-scene)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:25px}
.type-spec,.component-set{background:#090909;border:1px solid var(--hairline);padding:24px;min-width:0}
.type-spec>div,.rules>div{display:grid;grid-template-columns:minmax(75px,1fr) minmax(0,2.4fr);gap:10px;align-items:baseline;border-bottom:1px solid var(--hairline);padding:13px 0}
.type-spec>div>span{font:12px monospace;color:var(--quiet)}
.type-spec strong{font-weight:400}
.type-spec p{margin-top:18px}
.rules dd{color:var(--quiet);font-size:15px}
.rules dt{font-size:15px;font-weight:600}
.component-set{display:grid;gap:12px}
.sample{border:1px solid var(--hairline);display:grid;gap:4px;padding:15px 18px}
.sample.editorial,.sample.data{border-left:3px solid var(--quiet)}
.sample span{font-size:14px;color:var(--quiet)}
.sample.selected{border-color:var(--quiet);background:radial-gradient(ellipse at 50% 42%,rgb(233 230 218 / .18),transparent 59%),var(--mineral-product)}
.sample img{width:70%;max-width:340px;height:90px;object-fit:contain;justify-self:center;margin:3px 0}
.colour-dot{display:inline-block;width:13px;height:13px;border-radius:50%;background:#88452a;vertical-align:-1px;margin-right:4px}
.control-row{display:flex;flex-wrap:wrap;gap:8px}
.control{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 14px;border:1px solid var(--hairline);font-size:14px}
.control.primary{flex:1;background:var(--paper);color:#171715}
.motion-grid article{border-top:1px solid var(--hairline);padding:15px 0;display:flex;flex-direction:column;gap:6px}
.motion-grid a{font-size:14px;margin-top:auto;padding-top:10px}
.index{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.index a{min-height:106px;position:relative;padding:16px 40px 16px 18px;border:1px solid var(--hairline);background:#171716;display:flex;flex-direction:column;justify-content:center;gap:5px;text-decoration:none}
.index a:hover{border-color:var(--quiet)}
.index a span{position:absolute;right:16px;top:16px}
.endnote{padding:24px 0 36px;display:flex;justify-content:space-between;font-size:13px;color:var(--quiet)}
.note-page{padding-top:72px}.note-page h1{font-size:clamp(54px,8vw,110px)}
@media(max-width:850px){.cover{padding-top:48px}.cover-media{min-height:245px}.materials,.motion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ink-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:630px){.mast{flex-direction:column;align-items:flex-start;gap:12px}.mast nav{gap:10px 16px}.book{padding-inline:20px}.cover,.split,.index{grid-template-columns:1fr}.cover{gap:24px;padding-bottom:32px}.chapter{padding:36px 0}.ink-strip div{padding:9px}.material{padding:10px}.material strong{font-size:18px}.materials code{font-size:10px}.note-page{padding-top:42px}}