.guide-page{background:var(--paper);color:var(--ink)}
.guide-header{height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 2.4rem;background:var(--deep);color:var(--pipe);font:600 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.18)}
.guide-header .wordmark svg{width:35px;height:35px}.guide-header>a:last-child{justify-self:end;min-height:44px;display:flex;align-items:center;gap:.7rem;text-underline-offset:4px}.guide-header>a:last-child b{font-size:1.1rem;color:#79aeb6}
.guide-main{background:var(--paper)}
.guide-hero{min-height:640px;padding:8rem 8vw 6rem;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;background:linear-gradient(160deg,var(--fog-light),#a8afac);position:relative;overflow:hidden}.guide-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:25%;background:repeating-linear-gradient(176deg,transparent 0 18px,rgba(48,47,43,.09) 20px,transparent 22px)}
.guide-title{position:relative;z-index:2}.guide-title p,.guide-num{font:700 .58rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.guide-title h1{font:300 clamp(5rem,9.2vw,9.5rem)/.76 var(--display);letter-spacing:-.06em;margin:1.3rem 0}.guide-title h1 i{color:#f0eee5;font-weight:300}
.guide-diagram{justify-self:end;position:relative;width:min(30vw,390px);aspect-ratio:1;border:1px solid rgba(48,47,43,.35);border-radius:50%;display:grid;place-items:center}.guide-diagram .ring{position:absolute;border:1px solid rgba(48,47,43,.18);border-radius:50%}.guide-diagram .r1{inset:12%}.guide-diagram .r2{inset:24%}.guide-diagram .r3{inset:36%;background:var(--deep)}.guide-diagram b{z-index:2;color:var(--pipe);font:500 .7rem/1.35 var(--mono);letter-spacing:.1em;text-align:center}.guide-diagram i{position:absolute;left:50%;top:4%;width:1px;height:46%;background:var(--delft);transform-origin:bottom;transform:rotate(43deg)}.guide-diagram i:after{content:"";position:absolute;top:-5px;left:-4px;width:9px;height:9px;border-radius:50%;background:var(--delft)}
.guide-article{max-width:1180px;margin:auto;display:grid;grid-template-columns:170px minmax(0,760px);gap:6rem;padding:9rem 2rem}.guide-margin{font:400 .5rem/1.6 var(--mono);letter-spacing:.09em;color:#69665e;display:flex;flex-direction:column;gap:3rem;border-right:1px solid var(--line)}.guide-copy section{margin-bottom:6rem}.guide-copy h2{font:400 clamp(2.8rem,5vw,4.5rem)/.95 var(--display);letter-spacing:-.035em;margin:.9rem 0 2rem}.guide-copy p:not(.guide-num){font-size:.82rem;line-height:1.9;color:#4e4d47}.guide-copy code{font:400 .76rem var(--mono);color:var(--delft);background:rgba(49,125,140,.08);padding:.12rem .3rem}.guide-copy blockquote{margin:0 0 6rem;padding:3rem;border-top:1px solid var(--silt);border-bottom:1px solid var(--silt);font:italic 2.5rem/1.15 var(--display);color:var(--silt)}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);margin:2rem 0 2.5rem;border:1px solid var(--line)}.swatches span{height:135px;background:var(--sw);padding:.75rem;display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink);font:500 .48rem var(--mono);text-transform:uppercase}.swatches span:first-child,.swatches span:nth-child(4){color:white}.swatches b{display:block;font-size:.55rem;margin-bottom:.2rem}.reproduce{background:var(--deep);color:var(--pipe);padding:3.5rem;margin-left:-3.5rem;margin-right:-3.5rem;margin-bottom:0!important}.guide-copy .reproduce p:not(.guide-num){color:#c9c7bf}.reproduce h2{color:var(--pipe)}
@media(max-width:700px){.guide-header{padding:0 1rem;grid-template-columns:1fr auto}.guide-header>span{display:none}.guide-header>a:last-child{font-size:.48rem}.guide-hero{min-height:650px;padding:6rem 1rem 4rem;display:block}.guide-title h1{font-size:clamp(4.2rem,21vw,6.2rem)}.guide-diagram{width:220px;margin:3.5rem 0 0 auto}.guide-article{display:block;padding:5rem 1rem}.guide-margin{display:none}.guide-copy section{margin-bottom:4.5rem}.guide-copy p:not(.guide-num){font-size:.76rem}.guide-copy blockquote{padding:2rem .5rem;font-size:2rem}.swatches{grid-template-columns:1fr 1fr}.swatches span{height:105px}.swatches span:last-child{grid-column:1/-1}.reproduce{margin:0 -.2rem!important;padding:2rem 1.2rem}.guide-page footer{margin-top:0}}
@media(min-width:701px) and (max-width:1000px){.guide-article{grid-template-columns:140px minmax(0,1fr);gap:3.5rem}.reproduce{margin-left:0;margin-right:0;padding:3rem}.guide-header{font-size:.55rem}}

/* Pass 2 — annotated field-leaf treatment */
.guide-hero{min-height:700px;background:radial-gradient(ellipse at 26% 38%,rgba(246,245,237,.6),transparent 35%),linear-gradient(145deg,#cbd0cc,#9fa9a7);border-bottom:12px solid var(--deep)}
.guide-hero:before{content:"FUNCTION / updateTide()\A OUTPUT / --water-scale";white-space:pre;position:absolute;right:7vw;bottom:4.5rem;font:700 .5rem/1.7 var(--mono);letter-spacing:.11em;color:#4d5b59}
.guide-title h1{max-width:930px;line-height:.72}
.guide-diagram{box-shadow:0 0 0 18px rgba(244,241,231,.09)}
.guide-diagram:after{content:"TRANSFORM ORIGIN / TOP";position:absolute;right:96%;bottom:14%;width:150px;border-bottom:1px solid rgba(48,47,43,.4);padding-bottom:.35rem;font:700 .43rem var(--mono);letter-spacing:.08em;text-align:left}
.guide-diagram small{position:absolute;right:-1rem;top:16%;padding:.4rem;background:var(--deep);color:var(--pipe);font:400 .46rem/1.5 var(--mono);letter-spacing:.06em}
.guide-article{grid-template-columns:180px minmax(0,820px);max-width:1260px;gap:6rem}
.guide-copy p:not(.guide-num){font-size:.9rem;line-height:1.9;color:#45443e}
.guide-copy h2{font-size:clamp(3.2rem,5.2vw,5rem);text-wrap:balance}
.guide-margin{position:sticky;top:2rem;height:max-content;font-size:.55rem}
.mechanic-anatomy{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.5rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mechanic-anatomy span{position:relative;min-height:150px;padding:1.4rem 1rem 1rem;border-right:1px solid var(--line);font:600 .58rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mechanic-anatomy span:last-child{border-right:0}
.mechanic-anatomy b{display:block;color:var(--delft);margin-bottom:2.6rem}
.mechanic-anatomy i{position:absolute;left:1rem;top:3.4rem;width:54px;height:26px;border-bottom:4px solid var(--silt);border-radius:50%}
.mechanic-anatomy span:nth-child(2) i{border:1px dashed var(--silt);border-top:0;transform:rotate(-12deg)}
.mechanic-anatomy span:nth-child(3) i{border:1px solid var(--silt);border-radius:0;transform:rotate(2deg);box-shadow:4px 4px 0 rgba(92,81,66,.15)}
.reproduce{position:relative;box-shadow:18px 18px 0 rgba(49,125,140,.18)}
.reproduce:after{content:"FIELD PROMPT / 05";position:absolute;right:1rem;top:1rem;font:700 .45rem var(--mono);letter-spacing:.1em;color:#81b3ba}

@media(max-width:700px){
  .guide-hero{min-height:720px;padding-top:7.5rem}
  .guide-hero:before{right:1rem;bottom:1.5rem;font-size:.42rem}
  .guide-title h1{font-size:clamp(4rem,20vw,5.3rem);line-height:.76}
  .guide-diagram{width:205px;margin-top:3rem}
  .guide-diagram:after{display:none}
  .guide-copy p:not(.guide-num){font-size:.82rem;line-height:1.85}
  .mechanic-anatomy{grid-template-columns:1fr}
  .mechanic-anatomy span{min-height:110px;border-right:0;border-bottom:1px solid var(--line);padding-left:6rem}
  .mechanic-anatomy span:last-child{border-bottom:0}
  .mechanic-anatomy b{position:absolute;left:1rem;top:1.4rem}
  .mechanic-anatomy i{top:3.3rem}
  .reproduce{box-shadow:8px 8px 0 rgba(49,125,140,.18)}
}

@media(min-width:701px) and (max-width:1000px){
  .guide-hero{min-height:680px}
  .guide-diagram:after{display:none}
  .guide-copy p:not(.guide-num){font-size:.86rem}
}

/* Pass 3 — developed field leaf */
.guide-page{scrollbar-color:var(--delft) var(--deep)}
.guide-title h1{letter-spacing:-.067em;font-optical-sizing:auto}
.guide-title p,.guide-num,.guide-margin{font-variant-numeric:tabular-nums slashed-zero}
.guide-diagram{transition:box-shadow .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.guide-diagram:hover{box-shadow:0 0 0 28px rgba(244,241,231,.13);transform:rotate(3deg)}
.guide-diagram:hover i{transform:rotate(58deg)}
.guide-diagram i{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.guide-copy section{position:relative}
.guide-copy section:not(.reproduce):before{content:"";position:absolute;left:-1.4rem;top:.2rem;width:3px;height:0;background:var(--delft);transition:height .45s cubic-bezier(.16,1,.3,1)}
.guide-copy section:not(.reproduce):hover:before{height:4.6rem}
.swatches span{transition:transform .38s cubic-bezier(.16,1,.3,1),filter .38s ease}
.swatches span:hover{transform:translateY(-8px);filter:saturate(1.16)}
.guide-header>a:last-child:hover,.guide-header>a:last-child:focus-visible{color:#9fd0d5}
.reproduce{overflow:hidden}
.reproduce:before{content:"";position:absolute;right:-7rem;bottom:-8rem;width:18rem;height:18rem;border:1px solid rgba(129,179,186,.22);border-radius:50%;box-shadow:0 0 0 2.5rem rgba(129,179,186,.04),0 0 0 5rem rgba(129,179,186,.025)}
@media(max-width:700px){
  .guide-title h1{letter-spacing:-.058em}
  .guide-copy section:not(.reproduce):before{display:none}
  .guide-diagram:hover{transform:none;box-shadow:0 0 0 18px rgba(244,241,231,.09)}
}
@media(prefers-reduced-motion:reduce){.guide-diagram,.guide-diagram i,.swatches span{transition:none}}