.guide-page { background: #0a0f14; }
.guide-header { position: absolute; z-index: 5; top: 0; right: 0; left: 0; display: flex; min-height: 88px; align-items: center; justify-content: space-between; padding: 18px max(4vw, 24px); }
.back-link { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; color: #c9ceca; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.back-link span { color: var(--teal); font-size: 18px; transition: transform .2s; }
.back-link:hover span { transform: translateX(-4px); }
.guide-hero { position: relative; display: flex; min-height: 720px; flex-direction: column; justify-content: center; overflow: hidden; padding: 120px max(10vw, 30px) 90px; background: radial-gradient(circle at 77% 46%, rgba(255,90,90,.15), transparent 23%), radial-gradient(circle at 70% 55%, rgba(79,216,196,.11), transparent 30%), linear-gradient(108deg, #091016, #12191e 65%, #080c10); }
.guide-hero::before { content: ''; position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(90deg, transparent 0 14vw, rgba(255,255,255,.08) calc(14vw + 1px), transparent calc(14vw + 2px)); }
.guide-hero::after { content: ''; position: absolute; right: -8%; bottom: -39%; width: 60vw; height: 60vw; border: 1px solid rgba(79,216,196,.23); border-radius: 50%; box-shadow: 0 0 0 35px rgba(79,216,196,.025), 0 0 80px rgba(79,216,196,.12); }
.guide-overline { position: relative; z-index: 1; margin: 0 0 24px; color: var(--cherry); font-size: 9px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; }
.guide-hero h1 { position: relative; z-index: 1; max-width: 890px; margin: 0; font-family: var(--slab); font-size: clamp(68px, 10vw, 150px); font-weight: 300; letter-spacing: -.055em; line-height: .78; }
.guide-hero h1 em { color: var(--tungsten); font-weight: 400; }
.guide-deck { position: relative; z-index: 1; max-width: 600px; margin: 47px 0 0 12%; color: #9facad; font-family: var(--slab); font-size: 18px; line-height: 1.65; }
.guide-stamp { position: absolute; z-index: 2; right: 8%; bottom: 18%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid rgba(255,90,90,.55); color: var(--cherry); transform: rotate(-6deg); }
.guide-stamp span { font-family: var(--slab); font-size: 32px; line-height: 1; }
.guide-stamp small { font-size: 7px; font-weight: 800; letter-spacing: .15em; line-height: 1.5; }
.guide-rain i { position: absolute; z-index: 1; top: -10%; width: 1px; height: 180px; background: linear-gradient(transparent, rgba(195,232,228,.38), transparent); transform: rotate(14deg); }
.guide-rain i:nth-child(1) { left: 15%; }.guide-rain i:nth-child(2) { left: 36%; top: 30%; height: 260px; }.guide-rain i:nth-child(3) { left: 57%; top: 8%; }.guide-rain i:nth-child(4) { left: 78%; top: 19%; height: 220px; }.guide-rain i:nth-child(5) { left: 90%; top: 45%; }

.guide-article { position: relative; display: grid; width: min(1180px, calc(100% - 64px)); grid-template-columns: 260px minmax(0, 720px); gap: clamp(60px, 10vw, 150px); margin: 0 auto; padding: 140px 0 110px; }
.guide-article::before { content: ''; position: absolute; top: 0; left: 330px; width: 1px; height: 100%; background: linear-gradient(transparent, #29373c 7%, #29373c 92%, transparent); }
.guide-rail { position: sticky; top: 110px; align-self: start; }
.guide-rail > p:first-child { margin: 0 0 28px; color: var(--teal); font-size: 8px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.swatches { margin: 0; }
.swatches div { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid #263238; }
.swatches dt { display: flex; align-items: center; gap: 11px; color: #bbc3c2; font-family: var(--slab); font-size: 13px; }
.swatches dt i { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 10px color-mix(in srgb, var(--swatch), transparent 50%); }
.swatches dd { margin: 0; color: #6f7e82; font-size: 8px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.type-ticket { margin: 50px 0 0; padding: 27px; color: var(--cream); border: 1px solid #39474b; background: #11191e; font-family: var(--slab); font-size: 18px; line-height: 1.7; transform: rotate(-1deg); }
.type-ticket span { display: block; margin-top: 12px; color: var(--cherry); font-family: var(--body); font-size: 7px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.type-ticket span:first-child { margin-top: 0; }
.rail-note { margin: 54px 0 0 18px; padding: 18px 0 18px 18px; color: #647579; border-left: 1px solid var(--cherry-dark); font-size: 7px; font-weight: 700; letter-spacing: .17em; line-height: 2; }
.rail-note b { color: var(--cherry); font-weight: 800; }
.guide-copy { max-width: 680px; }
.guide-copy section { margin-bottom: 100px; }
.guide-copy section:last-child { margin-bottom: 0; }
.guide-num { margin: 0 0 15px; color: var(--teal); font-size: 8px; font-weight: 800; letter-spacing: .19em; }
.guide-copy h2 { margin: 0 0 28px; color: var(--tungsten); font-family: var(--slab); font-size: clamp(35px, 4vw, 53px); font-weight: 400; letter-spacing: -.025em; line-height: 1; }
.guide-copy section > p:last-child { margin: 0; color: #abb6b6; font-size: 14px; line-height: 1.95; }
.guide-copy code { padding: 2px 5px; color: #b7fff5; background: #172227; font-family: 'Manrope', sans-serif; font-size: .82em; }
.reproduce { position: relative; padding: 45px; border: 1px solid #3b4a4f; background: linear-gradient(135deg, #111a20, #0d1418); box-shadow: 16px 20px 0 #151e23; }
.reproduce::before { content: 'N'; position: absolute; top: -30px; right: 30px; color: var(--cherry); font-family: var(--neon); font-size: 55px; text-shadow: 0 0 15px var(--cherry); }
.guide-footer { position: relative; }

/* Pass 2: turn the guide into a working night-shift production document. */
.guide-page { background: radial-gradient(circle at 82% 7%, #18252b 0, #0a1015 24%, #070c10 66%); }
.guide-hero { min-height: 760px; background: radial-gradient(circle at 77% 46%, rgba(255,90,90,.16), transparent 18%), radial-gradient(circle at 70% 55%, rgba(79,216,196,.13), transparent 31%), linear-gradient(108deg, #071016, #131b20 65%, #070b0e); }
.guide-hero::before { opacity: .2; background: repeating-linear-gradient(90deg, transparent 0 10vw, rgba(255,255,255,.055) calc(10vw + 1px), transparent calc(10vw + 2px)), repeating-linear-gradient(0deg, transparent 0 110px, rgba(79,216,196,.025) 111px, transparent 112px); }
.guide-hero h1 { text-shadow: 0 13px 50px rgba(0,0,0,.38); }
.guide-deck { color: #b2bdbc; font-size: 19px; }
.guide-schematic { position: absolute; z-index: 2; top: 24%; right: 9%; display: grid; width: 230px; grid-template-columns: 76px 1fr; align-items: center; gap: 9px 18px; color: #617476; transform: rotate(2deg); }
.schematic-drop { position: relative; grid-row: span 2; width: 72px; height: 92px; border: 1px solid rgba(79,216,196,.42); border-radius: 52% 48% 58% 42% / 62% 52% 48% 38%; box-shadow: inset 8px 10px 18px rgba(79,216,196,.06), 0 0 0 12px rgba(79,216,196,.02); }
.schematic-drop::before, .schematic-drop::after { content: ''; position: absolute; background: var(--teal); }
.schematic-drop::before { top: -22px; left: 34px; width: 1px; height: 138px; opacity: .27; }
.schematic-drop::after { top: 45px; left: -24px; width: 120px; height: 1px; opacity: .27; }
.schematic-drop i { position: absolute; top: 17px; left: 18px; width: 16px; height: 27px; border-top: 2px solid rgba(255,255,255,.55); border-radius: 50%; transform: rotate(25deg); }
.guide-schematic b { align-self: end; color: var(--teal); font-size: 7px; letter-spacing: .16em; }
.guide-schematic small { align-self: start; font-size: 7px; letter-spacing: .12em; line-height: 1.8; }
.guide-stamp { right: 10%; bottom: 12%; }

.guide-article { width: min(1190px, calc(100% - 64px)); grid-template-columns: 290px minmax(0, 760px); gap: clamp(70px, 8vw, 120px); padding-block: 150px 125px; }
.guide-article::before { left: 350px; background: linear-gradient(transparent, #304046 4%, #304046 96%, transparent); }
.guide-article::after { content: 'GLASS  /  LIGHT  /  TYPE  /  MEMORY'; position: absolute; top: 760px; bottom: 210px; left: 76px; display: flex; align-items: center; border-left: 1px solid rgba(79,216,196,.16); color: rgba(79,216,196,.09); font-family: var(--slab); font-size: 49px; letter-spacing: .14em; line-height: 1; writing-mode: vertical-rl; pointer-events: none; }
.guide-rail { z-index: 1; padding: 25px 24px; border: 1px solid #29383d; background: linear-gradient(140deg, rgba(18,28,34,.96), rgba(8,14,18,.88)); box-shadow: 13px 17px 0 rgba(22,32,37,.62), 0 24px 55px rgba(0,0,0,.28); }
.guide-rail > p:first-child { color: #71ead8; }
.swatches div { padding-block: 15px; }
.swatches dt { font-size: 14px; }
.swatches dd { font-size: 9px; }
.type-ticket { margin-top: 38px; background: linear-gradient(135deg, #19242a, #10171b); }
.build-ticket { margin: 38px 0 0; padding: 0; list-style: none; counter-reset: build; }
.build-ticket li { display: grid; grid-template-columns: 36px 1fr; align-items: center; min-height: 42px; color: #839295; border-top: 1px dashed #334348; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.build-ticket b { color: var(--cherry); font-family: var(--slab); font-size: 14px; font-weight: 400; }
.rail-note { margin-top: 38px; }
.guide-copy { max-width: 720px; }
.guide-copy section { position: relative; margin-bottom: 112px; }
.guide-copy section:not(.reproduce)::before { content: ''; position: absolute; top: 2px; left: -31px; width: 9px; height: 9px; border: 1px solid var(--teal); border-radius: 50%; background: #0a1014; box-shadow: 0 0 12px rgba(79,216,196,.5); }
.guide-copy h2 { max-width: 680px; font-size: clamp(40px, 4vw, 58px); }
.guide-copy section > p:last-child { color: #bdc7c6; font-size: 15px; line-height: 1.9; }
.guide-num { font-size: 9px; }
.guide-copy code { border-bottom: 1px solid rgba(79,216,196,.28); }
.reproduce { padding: 52px; background: radial-gradient(circle at 88% 5%, rgba(255,90,90,.08), transparent 27%), linear-gradient(135deg, #121d23, #0c1317); box-shadow: 16px 20px 0 #162127, 0 28px 70px rgba(0,0,0,.2); }
.reproduce::after { content: 'PROMPT CHECK · 06'; position: absolute; right: 48px; bottom: 20px; color: #516164; font-size: 7px; font-weight: 800; letter-spacing: .18em; }

@media (max-width: 1050px) {
  .guide-schematic { top: 18%; right: 7%; transform: scale(.8); transform-origin: right center; }
  .guide-article { grid-template-columns: 220px minmax(0,1fr); gap: 62px; }
  .guide-article::before { left: 251px; }
  .guide-article::after { display: none; }
  .guide-rail { padding-inline: 19px; }
}

@media (max-width: 850px) {
  .guide-hero { min-height: 660px; }
  .guide-hero h1 { font-size: 92px; }
  .guide-deck { max-width: 530px; margin-left: 6%; }
  .guide-stamp { right: 6%; bottom: 8%; }
  .guide-article { grid-template-columns: 205px minmax(0, 1fr); gap: 52px; }
  .guide-article::before { left: 230px; }
  .type-ticket { padding: 20px; }
  .guide-schematic { top: 14%; right: 4%; }
}

@media (max-width: 680px) {
  .guide-header { padding-inline: 18px; }
  .guide-header .brand small { display: none; }
  .back-link { max-width: 110px; justify-content: flex-end; text-align: right; line-height: 1.4; }
  .guide-hero { min-height: 690px; padding: 120px 24px 100px; }
  .guide-hero h1 { font-size: clamp(66px, 21vw, 82px); line-height: .82; }
  .guide-deck { margin: 39px 0 0 24px; font-size: 16px; }
  .guide-stamp { right: 22px; bottom: 24px; transform: rotate(-4deg) scale(.82); transform-origin: right bottom; }
  .guide-schematic { top: auto; right: 24px; bottom: 113px; width: 170px; transform: scale(.7); transform-origin: right bottom; opacity: .62; }
  .guide-article { display: block; width: calc(100% - 36px); padding-block: 95px 125px; }
  .guide-article::before { display: none; }
  .guide-rail { position: static; display: grid; grid-template-columns: 1fr; gap: 26px; margin-bottom: 90px; padding: 24px; box-shadow: 8px 11px 0 rgba(22,32,37,.62); }
  .guide-rail > p:first-child { grid-column: 1 / -1; margin-bottom: 0; }
  .type-ticket { margin: 0; padding: 25px; font-size: 17px; }
  .swatches dt { font-size: 11px; }
  .swatches dd { display: none; }
  .rail-note { display: none; }
  .build-ticket { margin-top: 0; }
  .guide-copy section { margin-bottom: 78px; }
  .guide-copy h2 { font-size: 39px; }
  .guide-copy section > p:last-child { font-size: 14px; line-height: 1.9; }
  .guide-copy section:not(.reproduce)::before { display: none; }
  .reproduce { padding: 38px 25px; box-shadow: 8px 12px 0 #151e23; }
  .reproduce::after { right: 24px; }
}