.guide-page{background:#16211e}.guide-header{position:absolute}.return-link{min-height:44px;display:flex;align-items:center;border-left:1px solid var(--line);padding-left:25px;text-decoration:none;font-size:9px;letter-spacing:.12em;color:var(--orange-hi)}.guide-main{position:relative}.guide-hero{min-height:760px;padding:190px max(5vw,calc((100vw - var(--max))/2)) 80px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background-image:linear-gradient(rgba(242,237,215,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(242,237,215,.025) 1px,transparent 1px);background-size:54px 54px}.guide-hero::after{content:"FIELD / MANUAL";position:absolute;right:-35px;bottom:82px;transform:rotate(-90deg);font-size:9px;letter-spacing:.35em;color:var(--chalk-dim)}.guide-hero h1{font:350 clamp(70px,10vw,145px)/.82 var(--serif);letter-spacing:-.06em;margin:.3em 0;position:relative}.guide-hero h1 em{color:var(--orange-hi);font-weight:300}.guide-deck{font:21px/1.55 var(--serif);color:#d2d0c1;max-width:580px}.guide-meta{display:flex;gap:40px;margin-top:60px;padding-top:20px;border-top:1px solid var(--line);max-width:660px;font-size:8px;letter-spacing:.12em;color:var(--chalk-dim)}.guide-orbit{position:absolute;width:min(47vw,620px);aspect-ratio:1;border:2px solid rgba(242,237,215,.25);border-radius:50%;right:-8vw;top:110px;box-shadow:0 0 0 85px rgba(10,17,15,.24),0 0 0 86px rgba(242,237,215,.06)}.guide-orbit::before,.guide-orbit::after{content:"";position:absolute;background:rgba(242,237,215,.3)}.guide-orbit::before{width:1px;top:-30px;bottom:-30px;left:50%}.guide-orbit::after{height:1px;left:-30px;right:-30px;top:50%}.guide-orbit i{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--orange);box-shadow:0 0 20px var(--orange);top:8%;left:28%}.guide-orbit i+i{width:5px;height:5px;top:65%;left:76%;background:var(--chalk);box-shadow:none}.guide-orbit span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:italic 120px var(--serif);color:rgba(242,237,215,.08)}.guide-article{display:grid;grid-template-columns:250px minmax(0,820px);gap:100px;max-width:1200px;margin:auto;padding:110px 40px 150px}.contents{position:sticky;top:40px;align-self:start;border-top:1px solid var(--chalk);display:flex;flex-direction:column;padding-top:18px}.contents b{font-size:9px;letter-spacing:.15em;color:var(--orange-hi);margin-bottom:18px}.contents a{font-size:8px;text-decoration:none;color:var(--chalk-dim);padding:12px 0;border-bottom:1px solid var(--line);letter-spacing:.07em}.contents a:hover{color:var(--chalk)}.article-copy section{padding:0 0 95px;margin-bottom:95px;border-bottom:1px solid var(--line);scroll-margin-top:30px}.article-copy section:last-child{border-bottom:0;margin-bottom:0}.chapter{font-size:9px;letter-spacing:.16em;color:var(--orange-hi)}.article-copy h2{font:400 clamp(45px,5.5vw,72px)/.96 var(--serif);letter-spacing:-.045em;margin:25px 0 38px}.article-copy h2 em{color:var(--orange-hi);font-weight:300}.article-copy p{font:18px/1.78 var(--serif);color:#d4d2c3;margin:0 0 25px}.article-copy code{font:12px var(--mono);background:#0d1513;color:var(--orange-hi);padding:3px 6px}.guide-diagram{display:grid;grid-template-columns:1fr auto 1fr auto 1.2fr;gap:16px;align-items:center;border:1px solid var(--line);padding:25px;margin-top:40px;font-size:8px;line-height:1.7;letter-spacing:.1em}.guide-diagram i{font:italic 30px var(--serif);color:var(--chalk-dim)}.guide-diagram b{color:var(--chalk)}.guide-diagram .orange{color:var(--orange-hi)}.swatches{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}.swatches div{padding:12px;border-right:1px solid var(--line)}.swatches div:last-child{border:0}.swatches i{display:block;height:105px;background:var(--swatch);margin-bottom:14px;border:1px solid rgba(242,237,215,.18)}.swatches b,.swatches small{display:block;font-size:8px;letter-spacing:.1em}.swatches small{color:var(--chalk-dim);margin-top:5px}.type-spec{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.type-spec>div{border:1px solid var(--line);padding:23px}.type-spec span{font-size:8px;letter-spacing:.1em;color:var(--chalk-dim);display:block;margin-bottom:14px}.type-spec b{font:400 27px var(--serif)}.type-spec>div+div b{font:700 16px var(--mono);color:var(--orange-hi)}.reproduce{background:rgba(240,107,50,.055);padding:55px!important;border:1px solid rgba(240,107,50,.35)!important;transform:rotate(-.4deg)}.reproduce a{display:inline-flex;align-items:center;gap:30px;min-height:52px;background:var(--orange);color:var(--rubber);padding:0 18px;text-decoration:none;font-size:9px;font-weight:700;letter-spacing:.1em;margin-top:20px}
@media(max-width:900px){.guide-orbit{right:-25vw;top:180px}.guide-article{grid-template-columns:180px minmax(0,1fr);gap:50px;padding-left:30px;padding-right:30px}.return-link{display:none}}
@media(max-width:700px){.guide-header nav{display:none}.guide-hero{min-height:720px;padding:130px 18px 70px}.guide-hero h1{font-size:67px;margin-top:55px}.guide-deck{font-size:18px;max-width:85%}.guide-meta{display:block;margin-top:42px}.guide-meta span{display:block;margin-top:12px}.guide-orbit{width:360px;right:-230px;top:300px;opacity:.8}.guide-article{display:block;padding:75px 18px 110px}.contents{position:static;margin-bottom:80px}.article-copy section{padding-bottom:65px;margin-bottom:65px}.article-copy h2{font-size:45px;margin-top:20px}.article-copy p{font-size:17px;line-height:1.7}.guide-diagram{grid-template-columns:1fr;gap:10px}.guide-diagram i{transform:rotate(90deg);text-align:center;font-size:20px}.swatches{grid-template-columns:1fr 1fr}.swatches div:nth-child(2){border-right:0}.swatches div:nth-child(-n+2){border-bottom:1px solid var(--line)}.swatches i{height:75px}.type-spec{grid-template-columns:1fr}.reproduce{padding:30px 22px!important}.guide-page .site-footer{padding-bottom:50px}}

/* Pass 1 refinements: resolve the mobile orphan and give the final prompt a marginal note. */
.guide-article{padding-bottom:90px}
.reproduce{position:relative}
.reproduce::before{content:"CAUSE → RESPONSE";position:absolute;left:-330px;top:47%;font:italic 30px var(--serif);letter-spacing:.04em;color:rgba(242,237,215,.13);transform:rotate(-4deg)}
@media(max-width:900px){.reproduce::before{display:none}}
@media(max-width:700px){
  .guide-hero h1{font-size:57px}
  .guide-deck{max-width:88%}
  .guide-article{padding-bottom:75px}
}

/* Pass 2 — make the manual feel like a marked-up workshop artifact. */
.guide-page{background:linear-gradient(120deg,#14231e,#182821 55%,#101b18)}
.guide-hero{
  min-height:820px;
  padding-top:205px;
  background-image:
    linear-gradient(rgba(244,239,217,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,239,217,.032) 1px,transparent 1px),
    radial-gradient(circle at 15% 35%,rgba(244,239,217,.035),transparent 28%);
  background-size:54px 54px,54px 54px,auto;
}
.guide-hero::before{content:"";position:absolute;left:0;top:160px;width:8px;height:250px;background:var(--orange);box-shadow:0 0 26px rgba(243,107,53,.2)}
.guide-hero h1{max-width:880px;font-weight:310;line-height:.79;z-index:2}
.guide-deck{font-size:22px;line-height:1.52;font-weight:480;color:#dedac8;position:relative;z-index:2}
.guide-meta{border-top-color:rgba(244,239,217,.38);position:relative;z-index:2}
.guide-orbit{border-color:rgba(244,239,217,.33);right:-6vw;box-shadow:0 0 0 92px rgba(5,12,10,.28),0 0 0 93px rgba(244,239,217,.075)}
.guide-orbit i{box-shadow:0 0 28px rgba(243,107,53,.7)}
.guide-stamp{position:absolute;right:31%;bottom:70px;display:flex;align-items:flex-end;gap:12px;transform:rotate(-4deg);color:rgba(244,239,217,.3)}
.guide-stamp b{font:italic 74px/.8 var(--serif);font-weight:300;color:rgba(243,107,53,.28)}
.guide-stamp span{font-size:7px;line-height:1.7;letter-spacing:.12em;border-left:1px solid rgba(244,239,217,.25);padding-left:12px}
.guide-article{grid-template-columns:270px minmax(0,840px);gap:100px;padding-top:130px}
.contents{top:30px;padding-top:22px;border-top-width:2px;transform:rotate(-.25deg)}
.contents::after{content:"μ = VARIABLE";margin-top:35px;font:italic 25px var(--serif);color:rgba(244,239,217,.13);transform:rotate(-5deg)}
.contents a{min-height:44px;display:flex;align-items:center;transition:padding .2s,color .2s}
.contents a:hover{padding-left:9px;color:var(--orange-hi)}
.article-copy{counter-reset:manual-section}
.article-copy section{counter-increment:manual-section;position:relative;padding-bottom:112px;margin-bottom:112px}
.article-copy section::before{content:"0" counter(manual-section);position:absolute;right:-.05em;top:-.35em;font:italic 155px/.8 var(--serif);color:rgba(244,239,217,.025);pointer-events:none}
.article-copy h2{font-weight:360;line-height:.93;position:relative}
.article-copy p{font-size:19px;line-height:1.74;color:#dcd8c6;position:relative}
.guide-diagram{transform:rotate(-.6deg);background:rgba(5,12,10,.28);border-left:4px solid var(--orange);box-shadow:10px 12px 0 rgba(5,12,10,.2)}
.field-note{margin:48px 0 0 8%;padding:22px 25px;border-top:1px solid var(--orange);border-bottom:1px solid var(--line);transform:rotate(1deg);background:rgba(5,12,10,.25)}
.field-note b{display:block;margin-bottom:11px;color:var(--orange-hi);font-size:8px;letter-spacing:.15em}
.field-note span{font:italic 17px/1.55 var(--serif);color:var(--chalk-dim)}
.swatches{transform:rotate(.35deg);box-shadow:12px 14px 0 rgba(5,12,10,.2)}
.swatches i{height:120px}
.type-spec>div{background:rgba(5,12,10,.2)}
.reproduce{padding:65px!important;background:linear-gradient(145deg,rgba(243,107,53,.08),rgba(5,12,10,.22));box-shadow:18px 20px 0 rgba(5,12,10,.24)}
.reproduce::after{content:"ASK FOR CAUSE → RESPONSE";position:absolute;right:20px;top:18px;font-size:6px;letter-spacing:.18em;color:rgba(244,239,217,.3)}
.reproduce a{min-height:56px;box-shadow:7px 8px 0 rgba(5,12,10,.25)}

@media(max-width:900px){
  .guide-article{grid-template-columns:190px minmax(0,1fr);gap:50px}
  .guide-stamp{right:22%;bottom:64px}
}

@media(max-width:700px){
  .guide-header nav{display:flex}
  .guide-hero{min-height:780px;padding:158px 18px 70px}
  .guide-hero::before{top:150px;height:160px;width:5px}
  .guide-hero h1{font-size:58px;line-height:.84;margin-top:50px}
  .guide-deck{font-size:18px;max-width:92%}
  .guide-orbit{width:370px;right:-250px;top:330px}
  .guide-stamp{right:auto;left:18px;bottom:35px}
  .guide-stamp b{font-size:50px}
  .guide-article{padding-top:82px}
  .contents{margin-bottom:90px}
  .contents::after{display:none}
  .article-copy section{padding-bottom:72px;margin-bottom:72px}
  .article-copy section::before{font-size:100px}
  .article-copy h2{font-size:46px}
  .article-copy p{font-size:17px}
  .field-note{margin-left:0;padding:20px}
  .guide-diagram{box-shadow:7px 8px 0 rgba(5,12,10,.2)}
  .reproduce{padding:34px 23px!important;box-shadow:9px 11px 0 rgba(5,12,10,.22)}
  .guide-page .site-footer{padding-bottom:44px}
}

/* Pass 3 — typographic finishing and interaction polish. */
.guide-page::selection{background:var(--orange);color:var(--rubber)}
.guide-page{font-variant-numeric:lining-nums tabular-nums}
.guide-hero h1,.article-copy h2,.type-spec b{font-optical-sizing:auto}
.article-copy p{text-wrap:pretty}
.contents a:focus-visible,.return-link:focus-visible,.reproduce a:focus-visible{color:var(--orange-hi)}
.return-link,.reproduce a{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),background-color .2s,color .2s}
.return-link:hover{background:rgba(243,107,53,.08);padding-right:10px}
.reproduce a:hover,.reproduce a:focus-visible{transform:translate(-3px,-3px);box-shadow:11px 12px 0 rgba(5,12,10,.4);background:var(--chalk)}
.article-copy code{border-bottom:1px solid rgba(243,107,53,.45)}
