/* Pass 2: the manual explains the system with a system, not empty atmosphere. */
.guide-body{background:radial-gradient(circle at 14% 32%,rgb(105 73 48/.15),transparent 24%),radial-gradient(circle at 84% 8%,rgb(82 118 134/.2),transparent 27%),var(--umber)}
.guide-hero{min-height:86vh;padding-top:9.5rem;background:linear-gradient(112deg,transparent 0 59%,rgb(142 177 189/.07) 59% 59.2%,transparent 59.2%),radial-gradient(circle at 82% 19%,rgb(142 177 189/.1),transparent 24%)}
.guide-hero::before{content:"FIELD SYSTEM / 169";position:absolute;left:2.2vw;bottom:7rem;writing-mode:vertical-rl;transform:rotate(180deg);font:500 .48rem var(--mono);letter-spacing:.18em;color:rgb(142 177 189/.48)}
.guide-hero::after{right:-6vw;top:-6vw;border-color:rgb(142 177 189/.22);box-shadow:0 0 0 5vw rgb(142 177 189/.025),0 0 0 10vw rgb(142 177 189/.018),inset 0 0 70px rgb(142 177 189/.04)}
.guide-hero h1{font-size:clamp(4.8rem,8.4vw,8.4rem);max-width:1020px;text-wrap:balance;position:relative;z-index:2}
.guide-metabolism{position:absolute;left:9vw;right:9vw;bottom:3.6rem;margin:0;width:64%;max-width:850px}
.guide-metabolism svg{display:block;width:100%;height:94px;overflow:visible}
.guide-metabolism path{fill:none;stroke:var(--blue);stroke-width:2;filter:drop-shadow(0 0 6px rgb(142 177 189/.22))}
.guide-metabolism line{stroke:rgb(142 177 189/.2);stroke-width:1}
.guide-metabolism figcaption{display:flex;justify-content:space-between;gap:1rem;font:500 .48rem var(--mono);letter-spacing:.11em;color:var(--blue)}
.guide-metabolism figcaption b{font-weight:500;color:rgb(184 203 208/.58);text-align:center}
.guide-vital{bottom:4.3rem}.guide-vital i{animation:pulse calc(.36s * 8) ease-out infinite}
.guide-article{grid-template-columns:220px minmax(0,920px);padding-top:7rem}
.guide-article aside p{margin:2rem 0 0;padding:1rem;border:1px solid rgb(199 166 93/.28);font:500 .48rem/1.8 var(--mono);letter-spacing:.12em;color:var(--gold);transform:rotate(-1.5deg)}
.guide-article aside a{min-height:44px;display:flex;align-items:center;transition:color .2s,background .2s,padding .2s}
.guide-article aside a:hover,.guide-article aside a:focus-visible{color:var(--gold);background:rgb(199 166 93/.06);padding-left:.5rem}
.guide-copy section{padding-left:clamp(0px,2vw,28px)}
.guide-copy h2{font-size:clamp(3.6rem,5vw,5.1rem);letter-spacing:-.035em;text-wrap:balance}
.guide-copy h3{display:flex;align-items:center;gap:.8rem}.guide-copy h3::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgb(199 166 93/.35),transparent)}
.guide-copy p{max-width:760px}.guide-copy p::selection{background:var(--gold);color:var(--umber)}
.swatches{gap:0;background:transparent;border-top:1px solid rgb(238 227 206/.16);border-bottom:1px solid rgb(238 227 206/.16)}
.swatches div{border-right:1px solid rgb(238 227 206/.16);padding:1.2rem}.swatches div:last-child{border-right:0}.swatches i{height:105px}
@media(max-width:760px){.guide-header{height:64px}.guide-hero{min-height:720px;padding:8.5rem 20px 4rem}.guide-hero::before{display:none}.guide-hero h1{font-size:4.25rem;line-height:.8}.guide-metabolism{left:20px;right:20px;bottom:4rem;width:auto}.guide-metabolism svg{height:88px}.guide-metabolism figcaption b{display:none}.guide-vital{right:20px;bottom:11rem}.guide-vital span{font-size:3.2rem}.guide-vital small{max-width:80px;line-height:1.4}.guide-article{padding-top:4rem}.guide-article aside{margin-bottom:4rem}.guide-article aside p{display:none}.guide-copy section{padding-left:0}.guide-copy h2{font-size:3.25rem}.swatches i{height:88px}}
@media(max-width:420px){.guide-hero{min-height:700px}.guide-hero h1{font-size:3.85rem}.guide-metabolism figcaption{font-size:.42rem}.guide-copy h2{font-size:3rem}.swatches div{padding:.8rem}.swatches i{height:72px}}
@media(prefers-reduced-motion:reduce){.guide-vital i{animation:none}}
