.guide-body{background:radial-gradient(circle at 80% 10%,rgb(82 118 134/.18),transparent 28%),var(--umber)}.guide-header{grid-template-columns:1fr auto}.back-link{font:500 .61rem var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mist);padding:14px 0}.guide-main{position:relative;z-index:2}.guide-hero{min-height:72vh;padding:11rem 9vw 6rem;position:relative;overflow:hidden;border-bottom:1px solid rgb(142 177 189/.2);background:linear-gradient(140deg,transparent 60%,rgb(142 177 189/.09))}.guide-hero::after{content:"";position:absolute;width:40vw;aspect-ratio:1;border:1px solid rgb(142 177 189/.17);border-radius:50%;right:-8vw;top:4rem;box-shadow:0 0 0 4vw rgb(142 177 189/.025),0 0 0 8vw rgb(142 177 189/.02)}.guide-hero>p{font:500 .62rem var(--mono);letter-spacing:.18em;color:var(--blue)}.guide-hero h1{font-size:clamp(4.8rem,9vw,9rem);font-weight:300;line-height:.77;letter-spacing:-.055em;margin:1.5rem 0}.guide-hero h1 em{font-weight:300;color:var(--gold);margin-left:.35em}.guide-vital{position:absolute;right:9vw;bottom:6rem;display:flex;align-items:end;gap:.7rem;color:var(--gold);font-family:var(--mono);z-index:2}.guide-vital i{width:8px;height:8px;background:var(--gold);border-radius:50%;margin-bottom:1rem;box-shadow:0 0 14px var(--gold)}.guide-vital span{font-size:4.5rem;font-weight:200;line-height:1}.guide-vital small{font-size:.55rem;letter-spacing:.11em;margin-bottom:.6rem}.guide-article{display:grid;grid-template-columns:220px minmax(0,860px);gap:8vw;padding:8rem 9vw 10rem}.guide-article aside{position:sticky;top:110px;height:max-content;border-top:1px solid var(--gold);padding-top:1rem;display:flex;flex-direction:column}.guide-article aside span{font:500 .55rem var(--mono);letter-spacing:.13em;color:var(--gold);margin-bottom:1rem}.guide-article aside a{font:500 .57rem var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--mist);padding:.7rem 0;border-bottom:1px solid rgb(238 227 206/.1)}.guide-copy section{position:relative;padding:0 0 6rem;margin:0 0 6rem;border-bottom:1px solid rgb(238 227 206/.14);scroll-margin-top:110px}.guide-copy section:last-child{margin-bottom:0}.guide-number{position:absolute;right:0;top:0;font:300 3.8rem var(--mono);color:rgb(142 177 189/.18)}.guide-copy h2{font-size:4rem;font-weight:300;line-height:1;margin:0 0 2rem;color:var(--bone)}.guide-copy h3{font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin:2.5rem 0 .7rem}.guide-copy p{font-size:1.22rem;line-height:1.65;color:#d0c7b9;margin:0 0 1.2rem}.guide-copy code{font-family:var(--mono);font-size:.72em;color:var(--blue);background:rgb(142 177 189/.08);padding:.15em .35em}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgb(238 227 206/.16);margin:2rem 0 2.5rem}.swatches div{background:var(--umber);padding:1rem;min-width:0}.swatches i{display:block;height:75px;background:var(--sw);margin-bottom:1rem;border:1px solid rgb(238 227 206/.12)}.swatches b,.swatches code{display:block;background:none;padding:0}.swatches b{font-size:1rem;font-weight:500}.swatches code{font-size:.62rem;margin-top:.4rem}.guide-body footer{background:#10120f}@media(max-width:760px){.guide-hero{min-height:670px;padding:9rem 20px 5rem}.guide-hero h1{font-size:4.7rem}.guide-hero h1 em{margin-left:.1em}.guide-vital{right:20px;bottom:4rem}.guide-article{display:block;padding:5rem 20px}.guide-article aside{position:static;margin-bottom:5rem}.guide-copy h2{font-size:3.2rem}.guide-copy p{font-size:1.12rem}.swatches{grid-template-columns:1fr 1fr}.guide-copy section{padding-bottom:4rem;margin-bottom:4rem}}@media(max-width:420px){.back-link{font-size:.52rem}.guide-hero h1{font-size:4.15rem}.guide-vital span{font-size:3.7rem}.guide-number{font-size:3rem}.guide-copy h2{font-size:2.9rem}}
