.guide-page{background:#171512}
.guide-page{color-scheme:dark}
.guide-section>div>p{text-wrap:pretty}
.swatches i{box-shadow:inset 0 0 0 1px rgba(32,29,26,.08),inset 0 -18px 36px rgba(0,0,0,.08)}
.guide-section[id]{scroll-margin-top:82px}
.guide-hero{min-height:100svh;position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);align-items:center;padding:145px var(--pad) 95px;overflow:hidden;background:linear-gradient(90deg,transparent calc(var(--pad) - 18px),rgba(217,164,65,.32) calc(var(--pad) - 18px) calc(var(--pad) - 17px),transparent calc(var(--pad) - 17px)),radial-gradient(ellipse at 78% 48%,rgba(168,191,174,.15),transparent 28%),linear-gradient(122deg,#1a1815 0 62%,#211e1a 62%)}
.guide-hero::before{content:"FIELD NOTE 44 / JULY MMXXVI";position:absolute;right:18px;top:50%;font-size:.48rem;letter-spacing:.25em;color:#746d62;writing-mode:vertical-rl}
.guide-hero-copy{position:relative;z-index:3;max-width:810px}
.guide-hero h1{font-family:var(--serif);font-size:clamp(4.4rem,7.4vw,8rem);font-weight:400;line-height:.91;letter-spacing:-.065em;margin:.35em 0 .24em;text-wrap:balance}
.guide-hero h1 em{color:transparent;background:linear-gradient(105deg,#9b681d,#e9b647 36%,#fff0a3 52%,#c78a28 74%,#efc75c);background-clip:text;-webkit-background-clip:text}
.guide-hero-copy>p:last-of-type{max-width:590px;color:#c9c1b5;line-height:1.85}
.guide-ledger{display:flex;gap:0;list-style:none;margin:42px 0 0;padding:0;counter-reset:ledger}
.guide-ledger li{counter-increment:ledger;min-width:118px;padding:11px 20px 9px 0;border-top:1px solid rgba(242,236,223,.19);font-size:.48rem;letter-spacing:.17em;text-transform:uppercase;color:#938b80}
.guide-ledger li::before{content:"0" counter(ledger);display:block;margin-bottom:5px;color:#d9a441;font-family:var(--serif);font-size:.78rem}
.guide-specimen{position:relative;width:min(37vw,500px);justify-self:center;transform:rotate(2deg)}
.guide-specimen::before{content:"";position:absolute;inset:9% -4% 2%;border:1px solid rgba(217,164,65,.19);border-radius:50%;transform:rotate(-13deg)}
.guide-specimen svg{display:block;width:100%;overflow:visible;filter:drop-shadow(0 31px 24px rgba(0,0,0,.52))}
.guide-specimen svg path:first-of-type{fill:url(#guideClay);stroke:#d5e0d7}
.guide-specimen svg ellipse{fill:#425449;stroke:#d8e2d9}
.guide-specimen svg path:last-of-type{fill:none;stroke:url(#guideGold);stroke-width:5.5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(217,164,65,.72))}
.callout{position:absolute;z-index:2;font-size:.45rem;letter-spacing:.18em;text-transform:uppercase;color:#9f978b;white-space:nowrap}
.callout::before{content:"";position:absolute;height:1px;width:48px;background:rgba(242,236,223,.28);top:50%}
.callout-one{left:-24%;top:23%}.callout-one::before{left:105%}
.callout-two{right:-30%;top:49%}.callout-two::before{right:105%}
.callout-three{left:-27%;bottom:18%}.callout-three::before{left:105%}
.guide-scroll{position:absolute;bottom:30px;left:var(--pad);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:#8c8479}

.guide-article{position:relative;background:radial-gradient(circle at 85% 20%,#faf7ef,transparent 24%),var(--bone);color:var(--ink);padding:50px var(--pad) 120px}
.guide-article::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(var(--pad) - 18px),rgba(145,115,63,.23) calc(var(--pad) - 18px) calc(var(--pad) - 17px),transparent calc(var(--pad) - 17px));pointer-events:none}
.guide-section{display:grid;grid-template-columns:minmax(155px,.25fr) minmax(0,1fr);gap:5vw;padding:110px 0;border-bottom:1px solid #c6bcaa}
.guide-section aside{display:flex;align-items:flex-start;gap:22px;color:#746c60}
.guide-section aside span{font-family:var(--serif);font-size:2.2rem;color:#a9751e}
.guide-section aside p{margin-top:8px;font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl}
.guide-section>div{max-width:950px}
.guide-section h2{font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,5.4vw,6rem);line-height:.98;letter-spacing:-.055em;margin:0 0 42px;text-wrap:balance}
.guide-section>div>p{max-width:790px;color:#48433c;line-height:1.9}
.guide-section .lead{font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.62;color:#25211d}
code{font-family:var(--sans);font-size:.79em;color:#65430e;background:#e3d7c2;padding:3px 6px;border-radius:1px}
.mechanism{float:right;position:relative;width:260px;height:210px;margin:0 0 28px 45px;border:1px solid #c7bca9;background:radial-gradient(circle,rgba(168,191,174,.3),transparent 59%)}
.mechanism::before{content:"SCATTER VECTOR";position:absolute;left:13px;top:10px;font-size:.43rem;letter-spacing:.19em;color:#83796b}
.mechanism span{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:70px;height:46px;border:1px solid #8e9f92;background:#a8bfae;color:#263129;font-size:.42rem;letter-spacing:.08em;text-transform:uppercase;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(calc(var(--x)*.12deg))}
.mechanism span:nth-child(2){clip-path:polygon(10% 0,100% 12%,85% 100%,0 82%)}.mechanism span:nth-child(3){clip-path:polygon(0 14%,90% 0,100% 90%,18% 100%)}.mechanism span:nth-child(4){clip-path:polygon(12% 0,100% 18%,82% 100%,0 88%)}
.mechanism i{position:absolute;left:50%;top:50%;width:2px;height:82%;background:#c38a25;transform:translate(-50%,-50%) rotate(28deg);box-shadow:0 0 6px rgba(217,164,65,.5)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:0 0 48px}
.swatches>div{position:relative;border:1px solid #c8bdab;padding:9px;background:rgba(255,255,255,.09)}
.swatches i{display:block;height:130px;background:var(--sw);margin-bottom:13px}
.swatches i.gold-swatch{background:linear-gradient(115deg,#7f5318,#f8dc85 30%,#d9a441 52%,#fff1af 72%,#9a681f)}
.swatches b,.swatches span{display:block;font-size:.5rem;letter-spacing:.13em;text-transform:uppercase}.swatches span{color:#6c6459;margin-top:4px}
.guide-return{display:flex;align-items:center;justify-content:space-between;width:min(100%,320px);min-height:62px;margin-top:40px;padding:10px 12px 10px 22px;border:1px solid var(--ink);border-radius:100px;text-transform:uppercase;font-size:.58rem;letter-spacing:.16em;transition:background .35s,color .35s}
.guide-return span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--gold)}
.guide-return:hover{background:var(--ink);color:var(--bone)}
.guide-return:hover span{background:var(--gold);color:var(--ink)}
.guide-return:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

@media(max-width:900px){
  .guide-hero{grid-template-columns:1fr .65fr;align-content:center;padding-top:140px}
  .guide-hero h1{font-size:clamp(4.4rem,9vw,6rem)}
  .guide-specimen{width:38vw}
  .callout{display:none}
  .guide-ledger li{min-width:95px}
  .guide-section{grid-template-columns:115px minmax(0,1fr)}
}

@media(max-width:600px){
  .guide-hero{min-height:900px;display:flex;align-items:flex-end;padding:120px 22px 80px;background:radial-gradient(circle at 86% 25%,rgba(168,191,174,.18),transparent 28%),#1a1815}
  .guide-hero::before{display:none}
  .guide-hero h1{font-size:3.65rem;line-height:.92;margin-top:.5em}
  .guide-hero-copy>p:last-of-type{font-size:.84rem;max-width:340px}
  .guide-specimen{position:absolute;width:55vw;right:-11vw;top:118px;opacity:.55}
  .guide-ledger{display:grid;grid-template-columns:1fr 1fr;max-width:300px;margin-top:30px}
  .guide-ledger li{min-width:0;padding-top:8px}
  .guide-scroll{bottom:24px}
  .guide-article{padding-bottom:28px}
  .guide-section{grid-template-columns:1fr;padding:70px 0;gap:24px}
  .guide-section aside{align-items:center}
  .guide-section aside p{writing-mode:initial;margin:0}
  .guide-section h2{font-size:3.1rem;margin-bottom:30px}
  .guide-section>div>p{font-size:.87rem}
  .mechanism{float:none;width:100%;height:190px;margin:0 0 32px}
  .swatches{grid-template-columns:1fr 1fr}
  .swatches i{height:86px}
  .reproduce-section{padding-bottom:40px}
}