:root{--walnut:#3b2a1d;--deep:#160d08;--brass:#c49a52;--light:#efd99f;--cream:#f0e6c9;--paper:#e6d8b5;--ink:#17110c;--wax:#8a2e21;--display:'Cormorant Garamond',serif;--body:'EB Garamond',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--deep);color:var(--cream);font:18px/1.6 var(--body);overflow-x:hidden}a{color:inherit}:focus-visible{outline:2px solid var(--light);outline-offset:4px}.skip{position:fixed;z-index:99;top:8px;left:8px;background:var(--cream);color:var(--ink);padding:10px 15px;transform:translateY(-150%)}.skip:focus{transform:none}.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");mix-blend-mode:soft-light}header{height:88px;position:absolute;z-index:10;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(20px,5vw,76px);border-bottom:1px solid rgba(239,217,159,.25);color:var(--light);text-transform:uppercase;letter-spacing:.13em;font-size:11px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand>span{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--brass);border-radius:50%;font:italic 17px var(--display)}.brand b,.brand small{display:block}.brand small{font:400 8px var(--body);opacity:.6}nav{display:flex;gap:32px}nav a,.return{text-decoration:none;border-bottom:1px solid transparent;padding:12px 0}nav a:hover,.return:hover{border-color:var(--brass)}.return{justify-self:end}.guide-hero{height:780px;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px max(8vw,30px);position:relative;overflow:hidden;background:radial-gradient(circle at 75% 45%,#65191a 0,#35100f 24%,transparent 49%),linear-gradient(110deg,#160d08,#3b2518 58%,#160c09)}.guide-hero:before{content:"";position:absolute;inset:25px;border:1px solid rgba(196,154,82,.3);border-radius:220px 220px 0 0}.guide-hero>*{position:relative}.folio{position:absolute;right:6vw;top:135px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:#a78d63}.folio b{font:italic 40px var(--display);color:var(--light);margin:0 8px}.kicker{text-transform:uppercase;letter-spacing:.27em;color:var(--light);font-size:11px;font-weight:600}.guide-hero h1{font:300 clamp(86px,12vw,174px)/.66 var(--display);letter-spacing:-.055em;margin:46px 0 55px}.guide-hero h1 i{font-size:.66em;color:var(--light)}.dek{font-size:22px;max-width:600px;color:#d4c3a3}.diagram{position:absolute;right:5vw;bottom:9vh;width:400px;height:220px;opacity:.7}.gear{position:absolute;display:block;border:13px dotted var(--brass);border-radius:50%}.g1{width:160px;height:160px;left:0;top:20px}.g2{width:95px;height:95px;left:142px;top:0}.rod{position:absolute;width:210px;height:7px;left:200px;top:89px;background:var(--brass);transform:rotate(-18deg);transform-origin:left}.nib{position:absolute;right:-10px;top:25px;font:80px var(--display);color:var(--cream);transform:rotate(-18deg)}.folio-body{background:var(--paper);color:var(--ink);padding:100px max(6vw,28px) 140px}.folio-body>section{max-width:1160px;margin:auto;display:grid;grid-template-columns:230px 1fr;gap:70px;padding:85px 0;border-top:1px solid #9d8967}.folio-body>section:last-child{border-bottom:1px solid #9d8967}.folio-body aside{display:flex;gap:20px;align-items:flex-start;color:#78542e;text-transform:uppercase;letter-spacing:.16em;font-size:11px}.folio-body aside span{font:italic 32px/1 var(--display);color:#a6793e}.folio-body aside b{padding-top:6px}.folio-body h2{font:500 clamp(38px,5vw,66px)/.95 var(--display);letter-spacing:-.03em;margin:0 0 28px}.folio-body p{max-width:760px;font-size:19px;color:#3f3328}.folio-body code{font:600 13px var(--body);background:#d1c19d;padding:2px 6px}.swatches{display:grid;grid-template-columns:repeat(5,1fr);margin-top:35px;border:1px solid #a59170}.swatches span{padding:13px;border-right:1px solid #a59170;text-transform:uppercase;letter-spacing:.1em;font-size:10px}.swatches span:last-child{border:0}.swatches i{display:block;background:var(--c);height:70px;margin:-1px -1px 12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.17)}.swatches small{display:block;opacity:.62;letter-spacing:.04em}footer{min-height:210px;display:flex;align-items:center;justify-content:space-between;padding:50px max(5vw,25px);color:#a99778;border-top:1px solid #674824;font-size:13px}.footer-mark{display:flex;align-items:center;gap:15px}.footer-mark>span{display:grid;place-items:center;width:50px;height:50px;border:1px solid #9b733a;border-radius:50%;color:#dfba72}.footer-mark p{font:500 19px var(--display);color:#ddcaa4;margin:0}.footer-mark small{display:block;font:400 9px var(--body);text-transform:uppercase;letter-spacing:.14em;color:#8e7c60}footer i{color:#76532b;margin:0 7px}footer a{text-underline-offset:4px;text-decoration-color:#76532b}footer a:hover{color:var(--light)}
@media(max-width:850px){header{grid-template-columns:1fr auto}header nav{display:none}.diagram{opacity:.25}.folio-body>section{grid-template-columns:150px 1fr;gap:30px}.swatches{grid-template-columns:repeat(3,1fr)}.swatches span:nth-child(3){border-right:0}.swatches span:nth-child(-n+3){border-bottom:1px solid #a59170}footer{display:block;text-align:center}.footer-mark{justify-content:center;margin-bottom:30px}}
@media(max-width:600px){html{scroll-padding-top:68px}header{height:68px;padding:0 18px}.brand small{display:none}.return{font-size:9px}.guide-hero{min-height:700px;height:100svh;padding:100px 24px 60px}.guide-hero:before{inset:12px;border-radius:130px 130px 0 0}.folio{right:25px;top:90px}.folio b{font-size:25px}.guide-hero h1{font-size:25vw;margin:46px 0 38px}.dek{font-size:18px;max-width:320px}.diagram{right:-150px;bottom:25px}.folio-body{padding:60px 24px 90px}.folio-body>section{display:block;padding:60px 0}.folio-body aside{margin-bottom:28px}.folio-body p{font-size:17px}.swatches{grid-template-columns:repeat(2,1fr)}.swatches span{border-bottom:1px solid #a59170}.swatches span:nth-child(3){border-right:1px solid #a59170}.swatches span:nth-child(even){border-right:0}.swatches span:last-child{border-bottom:0;border-right:1px solid #a59170}.swatches i{height:55px}footer{padding:55px 24px;line-height:2}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Pass-one refinements. */
.skip{top:-100px;transform:none;transition:top .2s}.skip:focus{top:8px;transform:none}
.skip{top:0;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{top:8px;width:auto;height:auto;padding:10px 15px;overflow:visible;clip-path:none}
.return,header nav a{min-height:44px;display:flex;align-items:center}
@media(max-width:600px){
  .diagram{width:270px;height:160px;right:-42px;bottom:34px;opacity:.38;transform:scale(.72);transform-origin:right bottom}
  .g1{width:130px;height:130px}.g2{width:74px;height:74px;left:116px}.rod{left:165px;width:145px}.nib{right:-3px;font-size:58px}
  .guide-hero h1{line-height:.7;max-width:330px}
  .return{padding-inline:6px}
}

/* Pass 2 — annotated mechanism folio. */
html{color-scheme:dark}
body{background:#110907}
button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(239,211,145,.16)}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
.guide-menu{display:none;position:relative;justify-self:end}
.guide-menu summary{min-height:44px;display:flex;align-items:center;list-style:none;cursor:pointer;color:var(--light);font-size:9px;letter-spacing:.16em}
.guide-menu summary::-webkit-details-marker{display:none}
.guide-menu summary:after{content:'+';font:20px/1 var(--display);margin-left:8px;color:var(--brass)}
.guide-menu[open] summary:after{content:'−'}
.guide-menu>div{position:absolute;z-index:20;right:0;top:46px;width:230px;padding:9px;background:rgba(19,10,7,.98);border:1px solid #896536;box-shadow:0 20px 50px #080403;display:grid}
.guide-menu a{min-height:44px;display:flex;align-items:center;padding:8px 12px;text-decoration:none;border-bottom:1px solid rgba(196,154,82,.22);font:500 15px var(--display);letter-spacing:0;text-transform:none}
.guide-menu a:last-child{border:0}

header{background:linear-gradient(180deg,rgba(14,7,5,.62),transparent);backdrop-filter:blur(2px)}
header a{min-height:44px;display:flex;align-items:center}
.guide-hero{height:860px;background:
radial-gradient(ellipse at 74% 44%,rgba(128,28,29,.82),rgba(60,15,14,.42) 32%,transparent 59%),
linear-gradient(112deg,#130a07 0%,#332017 54%,#130806 100%)}
.guide-hero:before{border-color:rgba(211,168,87,.4);box-shadow:inset 0 0 85px rgba(5,2,1,.35)}
.guide-hero h1{max-width:900px;font-size:clamp(105px,12.4vw,180px);line-height:.62;letter-spacing:-.06em;margin-top:58px}
.guide-hero h1 i{display:block;padding-left:.52em;font-size:.61em;color:#f0d287}
.dek{padding-left:20px;border-left:1px solid #a77a3a;max-width:650px}
.folio{font-variant-numeric:tabular-nums}
.diagram{right:4vw;bottom:6vh;width:490px;height:270px;opacity:.95;filter:drop-shadow(0 22px 32px rgba(0,0,0,.42))}
.diagram-cam{position:absolute;left:8px;bottom:24px;width:142px;height:142px;display:grid;place-items:center;border:5px solid #c4934a;border-radius:44% 56% 48% 52%;box-shadow:inset 0 0 0 12px #24140d,0 0 0 1px #efd18a;animation:guide-cam 2s .35s cubic-bezier(.2,.75,.2,1) both;transform-box:fill-box;transform-origin:center}
.diagram-cam:before,.diagram-cam:after{content:'';position:absolute;inset:20px;border:3px solid #89612d;border-radius:50%}
.diagram-cam:after{inset:49px;background:#160c08;border-color:#f0cd7e}
.diagram-cam i{width:16px;height:16px;border-radius:50%;background:#d1a255}
.diagram-rod{position:absolute;left:141px;bottom:91px;width:205px;height:7px;background:linear-gradient(90deg,#805424,#edce80,#67421d);transform:rotate(-18deg);transform-origin:left;animation:guide-rod 1.2s .7s cubic-bezier(.2,.75,.2,1) both}
.diagram-joint{position:absolute;left:328px;bottom:145px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1d38c,#9b692c 57%,#35200f 60%);box-shadow:0 0 0 4px #1b0e09,0 0 0 5px #ba8a43}
.diagram-quill{position:absolute;left:358px;bottom:135px;width:8px;height:135px;background:#dfcda9;transform:rotate(38deg);transform-origin:bottom;border-radius:80% 0;box-shadow:20px -28px 0 -1px #a58d68}
.diagram-script{position:absolute;right:0;bottom:78px;width:132px;height:42px;border-bottom:2px solid #e5c77b;border-radius:0 0 55% 42%;transform:rotate(-5deg)}
.diagram-script:after{content:'';position:absolute;right:5px;bottom:-4px;width:76px;height:20px;border-top:2px solid #e5c77b;border-radius:50%}
.diagram small,.diagram b{position:absolute;text-transform:uppercase;letter-spacing:.16em;font-size:8px;color:#9f7b49}
.diagram small{left:8px;bottom:0}.diagram b{right:2px;bottom:0;color:#d6b66f}
@keyframes guide-cam{from{transform:rotate(-190deg) scale(.84);opacity:0}to{transform:none;opacity:1}}
@keyframes guide-rod{from{transform:rotate(-18deg) scaleX(0)}to{transform:rotate(-18deg) scaleX(1)}}

.folio-body{background:
linear-gradient(rgba(85,58,31,.035) 1px,transparent 1px) 0 0/100% 32px,
linear-gradient(90deg,rgba(85,58,31,.025) 1px,transparent 1px) 0 0/32px 100%,
#e6d8b5;padding-top:70px}
.folio-body>section{grid-template-columns:210px minmax(0,850px);justify-content:center;gap:80px;padding-block:100px;position:relative}
.folio-body>section:before{content:'';position:absolute;left:210px;top:-6px;width:11px;height:11px;border:1px solid #957047;border-radius:50%;background:#e6d8b5}
.folio-body>section:nth-child(even)>div{transform:translateX(40px)}
.folio-body aside{position:sticky;top:110px;align-self:start}
.folio-body aside span{font-variant-numeric:tabular-nums}
.folio-body h2{font-size:clamp(50px,5vw,74px);line-height:.89}
.folio-body p{font-size:19px;line-height:1.66}
.folio-body code{border:1px solid rgba(90,62,32,.16);background:#d2c29e;color:#2e2015}
.process-plate{display:grid;grid-template-columns:repeat(4,1fr);margin:38px 0 42px;border:1px solid #9d8158;background:rgba(239,226,191,.4)}
.process-plate span{position:relative;min-height:128px;padding:18px 13px;border-right:1px solid #9d8158;display:flex;flex-direction:column;justify-content:flex-end}
.process-plate span:last-child{border:0}
.process-plate span:not(:last-child):after{content:'›';position:absolute;right:-8px;top:48%;z-index:2;width:15px;height:20px;background:#e6d8b5;color:#8e642f;font:28px/16px var(--display);text-align:center}
.process-plate i{position:absolute;top:13px;left:13px;font:italic 28px var(--display);color:#a47638}
.process-plate b{font:600 18px var(--display)}
.process-plate small{font-size:10px;color:#6d5942;text-transform:uppercase;letter-spacing:.08em;line-height:1.25}
.swatches{background:rgba(239,226,191,.38);box-shadow:8px 8px 0 rgba(103,72,39,.08)}
.swatches i{height:84px}
.swatches span{position:relative}
.swatches span:before{content:'';position:absolute;inset:8px 8px auto;height:1px;background:rgba(255,255,255,.28)}
#reproduce blockquote{margin:35px 0 0;padding:28px 0 5px;border-top:3px double #9b7649;font:italic clamp(28px,3vw,42px)/1.05 var(--display);color:#714a26}
footer{background:radial-gradient(circle at 23% 10%,#2b160e,#100806 66%)}
footer a{min-height:44px;display:inline-flex;align-items:center}

@media(max-width:900px){
  header{grid-template-columns:1fr auto auto;gap:15px}
  header nav{display:none}
  .guide-menu{display:block}
  .guide-hero h1{font-size:clamp(86px,14.5vw,120px)}
  .folio-body>section{grid-template-columns:150px minmax(0,1fr);gap:30px}
  .folio-body>section:nth-child(even)>div{transform:none}
  .diagram{transform:scale(.82);transform-origin:right bottom}
}

@media(max-width:600px){
  header{grid-template-columns:1fr auto;padding-inline:16px}
  .brand{min-width:0}.brand b{font-size:10px}
  .return{display:none}
  .guide-menu>div{right:-2px;width:min(250px,calc(100vw - 25px))}
  .guide-hero{min-height:780px;height:100svh;padding:120px 24px 80px;justify-content:flex-start}
  .guide-hero h1{font-size:25vw;line-height:.64;margin:73px 0 48px;max-width:330px}
  .guide-hero h1 i{padding-left:.16em;font-size:.56em}
  .folio{top:89px}
  .dek{font-size:17px;line-height:1.55;padding-left:14px;max-width:310px}
  .diagram{width:490px;height:270px;right:-2px;bottom:12px;opacity:.52;transform:scale(.55)}
  .folio-body{padding-inline:24px}
  .folio-body>section{display:block;padding-block:72px}
  .folio-body>section:before{left:0}
  .folio-body aside{position:relative;top:auto;margin-bottom:34px}
  .folio-body h2{font-size:43px;line-height:.92}
  .folio-body p{font-size:17px;line-height:1.62}
  .process-plate{grid-template-columns:repeat(2,1fr)}
  .process-plate span{min-height:112px}
  .process-plate span:nth-child(2){border-right:0}
  .process-plate span:nth-child(-n+2){border-bottom:1px solid #9d8158}
  .process-plate span:nth-child(2):after{display:none}
  .swatches i{height:62px}
  #reproduce blockquote{font-size:29px}
  footer a{min-height:38px}
}

@media(prefers-reduced-motion:reduce){
  .diagram-cam,.diagram-rod{animation:none}
}

/* Pass 3 — typographic and tactile finish. */
::selection{background:#8a2e21;color:#fff1ce;text-shadow:none}
html{scrollbar-color:#9b713a #180c08;scrollbar-width:thin}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#180c08}
::-webkit-scrollbar-thumb{background:linear-gradient(#d0a75e,#74502a);border:3px solid #180c08;border-radius:10px}
body{font-optical-sizing:auto;font-kerning:normal;text-rendering:optimizeLegibility}
.folio,.folio-body aside span{font-variant-numeric:lining-nums tabular-nums}
.brand>span,.diagram-joint{transition:transform .55s cubic-bezier(.18,.78,.2,1),background-color .3s}
.brand:hover>span,.brand:focus-visible>span{transform:rotate(18deg);background:rgba(196,154,82,.12)}
header nav a,.return{transition:color .25s,border-color .25s}
header nav a:hover,header nav a:focus-visible,.return:hover,.return:focus-visible{color:#fff0c5;border-color:#d7ae65}
.guide-menu a:hover,.guide-menu a:focus-visible{background:#35150f;color:#f3d891}
.swatches span{transition:background-color .25s,transform .3s cubic-bezier(.18,.78,.2,1)}
.swatches span:hover{background:rgba(255,249,226,.28);transform:translateY(-3px)}
.folio-body h2{letter-spacing:-.036em}
.folio-body p{hyphens:auto}
.folio-body>section>div:after{content:'';display:block;width:42px;height:1px;margin-top:35px;background:#a47a46}
footer a{transition:color .25s,text-decoration-color .25s}
@media(prefers-reduced-motion:reduce){.brand>span,.swatches span{transition:none}}