.guide-page { background: var(--paper); color: var(--ink); }
.guide-header { height: 104px; padding: 0 var(--side); display: flex; justify-content: space-between; align-items: center; color: var(--ivory); background: var(--felt-deep); border-bottom: 1px solid rgba(234,217,184,.2); }
.back-to-game { min-height: 44px; display: flex; align-items: center; gap: 14px; color: var(--brass-light); font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.back-to-game span { font-size: 17px; transition: transform .25s; }
.back-to-game:hover span { transform: translateX(-6px); }
.guide-main { position: relative; }
.guide-hero { position: relative; min-height: 640px; padding: 105px var(--side) 90px; display: grid; grid-template-columns: 130px 1fr .55fr; gap: 40px; align-items: end; overflow: hidden; color: var(--ivory); background: radial-gradient(circle at 68% 10%,#315f4c,#174537 39%,var(--felt-deep) 78%), repeating-linear-gradient(135deg,transparent 0 72px,rgba(234,217,184,.035) 72px 73px); border-bottom: 8px solid var(--walnut); }
.guide-number { align-self: start; margin: 8px 0 0; color: var(--brass-light); font: 500 10px/1 var(--mono); letter-spacing: .16em; }
.guide-hero h1 { margin: 0; font: 500 clamp(70px,8.4vw,126px)/.83 var(--display); letter-spacing: -.06em; }
.guide-hero h1 i { color: var(--brass-light); font-weight: 400; }
.guide-dek { max-width: 300px; margin: 0 0 13px; padding: 22px 0 0 22px; border-top: 1px solid var(--red); border-left: 1px solid var(--red); color: #d6c7aa; font: italic 22px/1.3 var(--display); }
.guide-schematic { position: absolute; z-index: 0; right: 3vw; top: 92px; width: min(36vw,430px); aspect-ratio: 1; opacity: .38; background-image: linear-gradient(rgba(234,217,184,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(234,217,184,.17) 1px,transparent 1px); background-size: 12.5% 12.5%; border: 1px solid rgba(223,189,120,.32); transform: rotate(5deg); }
.guide-node { position: absolute; z-index: 2; width: 25%; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--red); color: var(--paper-bright); background: rgba(170,46,39,.22); font: 600 9px/1 var(--mono); transform: rotate(-5deg); }
.guide-node--queen { left: 61%; top: 12%; }
.guide-node--bishop { left: 48%; top: 50%; }
.guide-vector { position: absolute; left: 67%; top: 35%; width: 2px; height: 27%; background: repeating-linear-gradient(var(--brass-light) 0 6px,transparent 6px 11px); transform: rotate(20deg); transform-origin: top; }
.guide-schematic small { position: absolute; left: 7%; bottom: 6%; color: var(--brass-light); font: 500 7px/1 var(--mono); letter-spacing: .17em; text-transform: uppercase; transform: rotate(-5deg); }
.guide-hero > *:not(.guide-schematic) { position: relative; z-index: 2; }
.guide-layout { padding: 110px var(--side) 150px; display: grid; grid-template-columns: 210px minmax(0,780px); gap: clamp(50px,9vw,140px); justify-content: center; }
.guide-index { position: sticky; top: 40px; align-self: start; padding: 22px 0; border-top: 1px solid var(--red); border-bottom: 1px solid rgba(91,47,31,.25); }
.guide-index > span { color: var(--red); font: 600 8px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.guide-index ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: guide; }
.guide-index li { counter-increment: guide; }
.guide-index a { min-height: 44px; display: flex; align-items: center; gap: 10px; color: #654b3a; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color .25s, gap .25s; }
.guide-index a::before { content: '0' counter(guide); color: var(--brass); }
.guide-index a:hover, .guide-index a:focus-visible { color: var(--red); gap: 15px; }
.guide-article section { padding: 0 0 85px; margin: 0 0 85px; border-bottom: 1px solid rgba(91,47,31,.25); scroll-margin-top: 35px; }
.guide-article section:last-child { margin-bottom: 0; border-bottom: 0; }
#reproduce { position: relative; isolation: isolate; }
#reproduce::after { content: '23.'; position: absolute; z-index: -1; right: -10px; bottom: -78px; color: rgba(170,46,39,.055); font: 600 260px/.7 var(--display); }
.section-mark { margin: 0 0 20px; color: var(--red); font: 600 8px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.guide-article h2 { margin: 0 0 34px; font: 500 clamp(42px,5vw,64px)/.95 var(--display); letter-spacing: -.04em; }
.guide-article p:not(.section-mark) { margin: 0 0 23px; font-size: 20px; line-height: 1.55; }
.guide-article section > p:nth-of-type(2)::first-letter { float: left; margin: 7px 9px 0 0; color: var(--red); font: 600 61px/.65 var(--display); }
code { padding: 2px 5px; color: #79322d; background: #e1d1b3; font: 500 .72em/1.4 var(--mono); }
.engine-diagram { margin: 38px 0 42px; padding: 18px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; color: var(--ink); background: linear-gradient(115deg,#dec9a2,#f4e8cf); border: 1px solid rgba(91,47,31,.28); box-shadow: 8px 8px 0 rgba(91,47,31,.08); }
.engine-diagram span { min-height: 68px; display: flex; flex-direction: column; justify-content: space-between; font: 600 8px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.engine-diagram b { color: var(--red); font: italic 500 25px/1 var(--display); }
.engine-diagram i { color: var(--brass); font: 400 17px/1 var(--mono); }
.swatches { display: grid; grid-template-columns: repeat(5,1fr); margin: 0 0 35px; border: 1px solid rgba(91,47,31,.22); }
.swatches span { position: relative; min-height: 145px; padding: 88px 9px 12px; font: 500 7px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.swatches span::before { content: ''; position: absolute; inset: 0 0 58px; background: var(--swatch); }
.swatches b { display: block; color: #624738; }

@media (max-width: 820px) {
  .guide-header { height: 88px; }
  .guide-hero { min-height: 570px; grid-template-columns: 70px 1fr; }
  .guide-hero .guide-dek { grid-column: 2; }
  .guide-schematic { right: -13vw; top: 130px; width: 48vw; opacity: .22; }
  .guide-layout { grid-template-columns: 150px minmax(0,1fr); gap: 45px; }
  .swatches { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 600px) {
  .guide-header { padding-inline: 20px; }
  .back-to-game { width: 48px; justify-content: center; }
  .back-to-game { font-size: 0; }
  .back-to-game span { font-size: 20px; }
  .guide-hero { min-height: 590px; padding: 75px 20px 70px; display: block; }
  .guide-number { margin-bottom: 65px; }
  .guide-hero h1 { font-size: 61px; line-height: .8; }
  .guide-dek { margin: 55px 0 0 auto; font-size: 19px; }
  .guide-schematic { right: -125px; top: 255px; width: 330px; opacity: .18; }
  .guide-layout { padding: 45px 20px 80px; display: block; }
  .guide-index { position: static; margin-bottom: 70px; }
  .guide-index ol { display: grid; grid-template-columns: 1fr 1fr; }
  .guide-index a { min-height: 44px; }
  .guide-article section { padding-bottom: 60px; margin-bottom: 65px; }
  .guide-article p:not(.section-mark) { font-size: 18px; }
  .engine-diagram { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
  .engine-diagram span { min-height: 82px; padding: 14px; border-bottom: 1px solid rgba(91,47,31,.18); }
  .engine-diagram i { display: none; }
  .swatches { grid-template-columns: 1fr 1fr; }
  #reproduce::after { font-size: 160px; bottom: -35px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}