.guide-page{
  --guide-paper:#d6c49d;
  --guide-rule:rgba(218,202,164,.22);
  background:#151812;
  color:#e6d8b6;
}

.guide-header{
  position:relative;
  z-index:10;
  height:82px;
  padding:0 4vw;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid #46483e;
  background:rgba(17,20,15,.92);
  font:8px var(--mono);
  letter-spacing:.15em;
  text-transform:uppercase;
}
.guide-header .seal{color:#e4d5b1}
.guide-header>span{text-align:center;color:#aaa28e}
.guide-header>a:last-child{justify-self:end;min-height:44px;display:grid;place-items:center;color:#e14a3d;border-bottom:1px solid transparent}
.guide-header>a:last-child:hover{color:#ffd7a8;border-color:#e14a3d}

.guide-hero{
  position:relative;
  min-height:760px;
  padding:150px 8vw 110px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid #4c4d42;
  background:radial-gradient(circle at 78% 48%,rgba(66,78,58,.48),transparent 33%),linear-gradient(112deg,#151812 0 64%,#11140f 64%);
}
.guide-hero::before{content:"46 / G";position:absolute;right:2.5vw;bottom:4vh;font:700 clamp(90px,18vw,260px)/.7 var(--display);letter-spacing:-.08em;color:rgba(230,216,182,.018)}
.guide-hero::after{content:"X 48° 11′ 02″ · Y 04° 36′ 19″";position:absolute;left:2vw;top:50%;transform:rotate(-90deg) translateX(-50%);transform-origin:left top;font:7px var(--mono);letter-spacing:.18em;color:#757466}
.guide-hero>p{position:relative;z-index:2;font:8px var(--mono);letter-spacing:.23em;text-transform:uppercase;color:#e2473a;margin:0}
.guide-hero h1{position:relative;z-index:2;font:500 clamp(64px,9.5vw,142px)/.88 var(--display);letter-spacing:-.058em;margin:24px 0 52px;max-width:1050px;text-transform:uppercase;text-wrap:balance}
.guide-summary{position:relative;z-index:2;width:390px;margin-left:39%;padding:18px 0 0;border-top:1px solid #85816e;font:italic 21px/1.35 var(--body);color:#c9bda0}
.guide-star{position:absolute;right:-6vw;top:58px;width:min(56vw,780px);opacity:.1;animation:slowTurn 95s linear infinite}
.guide-star::after{content:"";position:absolute;inset:19%;border:1px dashed rgba(216,201,164,.26);border-radius:50%}
.guide-star svg{width:100%;fill:none;stroke:#d8c9a4;stroke-width:.8}

.guide-body{
  position:relative;
  display:grid;
  grid-template-columns:230px minmax(0,870px);
  gap:8vw;
  max-width:1320px;
  margin:auto;
  padding:145px 6vw 190px;
}
.guide-body::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(8.333% - 1px),rgba(224,208,169,.018) calc(8.333% - 1px) 8.333%);pointer-events:none}
.guide-body article{position:relative;min-width:0}
.guide-index{position:sticky;top:50px;align-self:start;border-top:4px solid #b52c23;padding-top:18px;font:8px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.guide-index>span{color:#eadbb6}
.guide-index ol{padding:0;margin:27px 0 0;list-style-position:inside;color:#898674;line-height:2.25}
.guide-index a{display:inline-block;min-height:32px;padding:6px 4px;transition:color .2s,transform .2s}
.guide-index a:hover{color:#f0dfb7;transform:translateX(4px)}

.guide-body article>section{position:relative;padding:0 0 100px 74px;margin:0 0 100px;border-bottom:1px solid var(--guide-rule);scroll-margin-top:50px}
.guide-body article>section:nth-child(even){margin-left:7%}
.guide-body article>section:last-child{margin-bottom:0}
.guide-no{position:absolute;left:0;top:9px;font:9px var(--mono);color:#e44033}
.guide-no::after{content:"";display:block;width:36px;height:1px;background:#e44033;margin-top:13px}
.guide-body h2{font:500 clamp(38px,4.1vw,61px)/.98 var(--display);letter-spacing:-.045em;margin:0 0 30px;text-transform:uppercase;text-wrap:balance}
.guide-body p{font-size:18px;line-height:1.6;color:#d2c5a5;max-width:720px;margin:0 0 1.1em}
.guide-body strong{color:#fff0c7}
.guide-body code{font:11px var(--mono);color:#f05a4b;background:#0a0c09;padding:3px 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;overflow-wrap:anywhere}

.guide-film{position:relative;margin:38px 0 34px;max-width:770px;padding:12px 12px 0;background:#090b08;border:1px solid #5d5b4d;box-shadow:18px 20px 0 rgba(78,89,67,.16);transform:rotate(.3deg);overflow:hidden}.guide-film::before,.guide-film::after{content:"";position:absolute;z-index:2;top:12px;bottom:31px;width:1px;background:rgba(230,216,182,.22)}.guide-film::before{left:24px}.guide-film::after{right:24px}.guide-film img{display:block;width:100%;height:auto;aspect-ratio:1600/904;object-fit:cover;object-position:center 48%;filter:saturate(.58) sepia(.2) contrast(1.12);border-block:13px solid #080a08}.guide-film figcaption{display:flex;justify-content:space-between;gap:18px;padding:9px 2px 10px;font:7px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#aaa28e}.guide-film figcaption span:last-child{color:#e1483b;text-align:right}

.guide-blueprint{position:relative;margin:38px 0 42px;max-width:770px;background:var(--guide-paper);color:#171915;border:1px solid #5f5947;box-shadow:18px 20px 0 rgba(78,89,67,.18);transform:rotate(-.35deg)}
.guide-blueprint::before{content:"WORKING LAYERS";position:absolute;z-index:2;left:18px;top:16px;font:7px var(--mono);letter-spacing:.18em;color:#8f241d}
.guide-blueprint svg{display:block;width:100%;height:auto;padding:18px 12px 0}.guide-blueprint svg *{vector-effect:non-scaling-stroke}
.bp-paper path{fill:none;stroke:#5a594a;stroke-width:.8}.bp-paper path:first-child{fill:rgba(89,101,77,.12);stroke-width:1.2}
.bp-fort path{fill:#4e5b47;fill-opacity:.72;stroke:#1e241d;stroke-width:2}
.bp-saps path{fill:none;stroke:#a72b22;stroke-width:3;stroke-linecap:round}
.bp-shells path{fill:none;stroke:#97251d;stroke-width:1;stroke-dasharray:3 4}
.bp-labels{fill:#282b24;font:8px var(--mono);letter-spacing:.08em}
.guide-blueprint figcaption{padding:14px 18px;border-top:1px solid rgba(23,25,21,.4);font:8px var(--mono);letter-spacing:.1em;text-transform:uppercase}

.swatches{display:grid;grid-template-columns:1.2fr .8fr 1fr .92fr 1.08fr;align-items:end;margin:42px 0 32px;border:1px solid #5e5c4e;max-width:100%;background:#10120e}
.swatches i{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:148px;background:var(--sw);padding:12px;font-style:normal;border-right:1px solid #5e5c4e;color:#f1e4c3;transition:min-height .3s,filter .3s}
.swatches i:nth-child(2){min-height:116px}.swatches i:nth-child(3){min-height:162px}.swatches i:nth-child(4){min-height:132px}.swatches i:nth-child(5){min-height:176px;border:0}.swatches i:first-child{color:#171915}.swatches i:hover{min-height:196px;filter:saturate(1.2)}
.swatches b{font:7px var(--mono);text-transform:uppercase;overflow-wrap:anywhere}.swatches small{font:7px var(--mono);opacity:.78;font-variant-numeric:tabular-nums}

.reproduce{position:relative;background:var(--guide-paper);color:#171915;padding:74px 66px 66px 80px!important;border:0!important;box-shadow:inset 5px 0 #ad2d24,18px 18px 0 rgba(76,88,66,.16)}
.reproduce::before{content:"PROMPT SPECIFICATION / 06";position:absolute;right:22px;top:22px;font:7px var(--mono);letter-spacing:.14em;color:#85251d}
.reproduce .guide-no{left:27px;top:82px}.reproduce h2{color:#171915}.reproduce p{color:#2c2d25;font-size:19px;line-height:1.58}

@keyframes slowTurn{to{transform:rotate(360deg)}}

@media(max-width:900px){
  .guide-body{grid-template-columns:170px minmax(0,1fr);gap:6vw;padding-inline:5vw}.guide-body article>section{padding-left:58px}.guide-body article>section:nth-child(even){margin-left:0}.guide-blueprint,.guide-film{box-shadow:10px 12px 0 rgba(78,89,67,.18)}.swatches b,.swatches small{font-size:6px}
}

@media(max-width:760px){
  .guide-header{grid-template-columns:1fr 1fr;padding:0 18px}.guide-header>span{display:none}.guide-header>a:last-child{font-size:7px}.guide-hero{min-height:650px;padding:120px 22px 82px}.guide-hero::after{display:none}.guide-hero h1{font-size:13vw;line-height:.92;margin-top:20px}.guide-star{width:105vw;right:-46vw;top:140px}.guide-summary{width:78%;margin-left:17%;font-size:18px}.guide-body{display:block;padding:72px 22px 115px}.guide-index{position:relative;top:auto;margin:0 0 78px;padding-top:15px}.guide-index ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin-top:16px}.guide-index a{min-height:44px;display:inline-flex;align-items:center}.guide-body article>section{width:100%;padding:0 0 72px 43px;margin:0 0 72px}.guide-body h2{font-size:32px;overflow-wrap:anywhere}.guide-body p{font-size:17px;line-height:1.58}.guide-blueprint,.guide-film{width:calc(100% + 30px);margin-left:-30px;box-shadow:7px 9px 0 rgba(78,89,67,.18)}.guide-blueprint::before{font-size:6px}.bp-labels{font-size:10px}.guide-film{padding:7px 7px 0}.guide-film img{border-block-width:8px}.guide-film figcaption{font-size:5.5px}.swatches{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.swatches i,.swatches i:nth-child(n){min-height:104px;border-bottom:1px solid #5e5c4e}.swatches i:nth-child(5){grid-column:1/-1;min-height:98px}.swatches i:hover{min-height:104px}.reproduce{padding:62px 22px 48px 48px!important;box-shadow:inset 4px 0 #ad2d24,8px 9px 0 rgba(76,88,66,.16)}.reproduce::before{right:12px;top:14px;font-size:6px}.reproduce .guide-no{left:14px;top:70px}.reproduce p{font-size:17px}
}

@media(prefers-reduced-motion:reduce){.guide-star{animation:none}.swatches i{transition:none}}