:root {
  --scope: #070b09;
  --ink: #111713;
  --range: #263129;
  --range-light: #536054;
  --paper: #c8c7b2;
  --mist: #e3e0ca;
  --amber: #e0a329;
  --amber-hot: #ffc44a;
  --flag: #d34836;
  --ghost: rgba(227, 224, 202, .64);
  --display: 'Bebas Neue', sans-serif;
  --mono: 'Chivo Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--ink); color: var(--mist); font-family: var(--mono); overflow-x: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--amber); color: var(--scope); }
:focus-visible { outline: 2px solid var(--amber-hot); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 1000; left: 1rem; top: 1rem; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--amber); color: var(--scope); font-weight: 800; }
.skip-link:focus { width: auto; height: auto; clip-path: none; padding: .8rem 1rem; }

.grain { position: fixed; z-index: 90; inset: 0; opacity: .075; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.site-header { position: absolute; z-index: 30; top: 0; left: 0; width: 100%; min-height: 82px; padding: 0 clamp(1rem, 4vw, 4.5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(227,224,202,.19); color: #f1eed8; }
.wordmark { justify-self: start; display: flex; gap: .75rem; align-items: center; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; }
.wordmark svg, .footer-mark svg { width: 35px; fill: none; stroke: var(--amber); stroke-width: 1.5; }
.wordmark span span { color: var(--flag); }
.site-header nav { display: flex; height: 100%; }
.site-header nav a { min-height: 44px; display: grid; place-items: center; padding: 0 1.1rem; text-decoration: none; text-transform: uppercase; font-size: .64rem; letter-spacing: .12em; color: rgba(241,238,216,.78); transition: color .25s, background .25s; }
.site-header nav a:hover { color: var(--amber-hot); background: rgba(255,255,255,.05); }
.power-switch { justify-self: end; min-height: 44px; display: flex; align-items: center; gap: .65rem; border: 1px solid rgba(227,224,202,.35); background: rgba(7,11,9,.68); color: var(--mist); padding: .55rem .8rem; text-transform: uppercase; letter-spacing: .08em; font-size: .61rem; cursor: pointer; }
.power-switch b { color: var(--amber); }
.power-lamp { width: 9px; height: 9px; border-radius: 50%; background: #4b554e; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.power-switch[aria-pressed="true"] .power-lamp { background: var(--flag); box-shadow: 0 0 12px rgba(211,72,54,.9); }

.hero { position: relative; min-height: min(940px, 100svh); overflow: hidden; display: grid; align-items: end; padding: 11rem clamp(1rem, 5.5vw, 6rem) 7rem; background: #080c0a; isolation: isolate; }
.hero-film { position: absolute; z-index: -3; inset: 0; overflow: hidden; }
.hero-image { position: absolute; inset: -4%; background: linear-gradient(90deg, rgba(5,8,6,.72) 0%, rgba(5,8,6,.18) 55%, rgba(5,8,6,.5) 100%), linear-gradient(0deg, rgba(5,8,6,.82), transparent 56%), url('/assets/gen/overwatch/hero.jpg') center/cover no-repeat; transform: scale(1.06); animation: hero-drift 14s ease-in-out infinite alternate; }
.hero-film::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 72% 47%, transparent 0 17%, rgba(7,11,9,.1) 44%, rgba(7,11,9,.7) 100%), linear-gradient(90deg, rgba(4,7,5,.68), transparent 56%); }
.hero-smoke { position: absolute; width: 46vw; height: 18vw; border-radius: 50%; filter: blur(34px); background: rgba(201,186,142,.14); mix-blend-mode: screen; animation: smoke 12s linear infinite; }
.smoke-one { left: 35%; top: 40%; }.smoke-two { left: 55%; top: 56%; animation-duration: 18s; animation-delay: -7s; opacity: .5; }
.hero-flare { position: absolute; left: 55%; top: 41%; width: 45vw; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,179,56,.75), transparent); filter: blur(1px); box-shadow: 0 0 24px 5px rgba(255,157,47,.18); opacity: .65; }
.letterbox { position: absolute; z-index: 2; left: 0; right: 0; height: clamp(24px, 5vh, 58px); background: #050806; }
.letterbox-top { top: 82px; }.letterbox-bottom { bottom: 0; }
.hero-reticle { position: absolute; z-index: 1; width: min(65vw, 920px); aspect-ratio: 1; border: 1px solid rgba(224,163,41,.18); border-radius: 50%; right: -14vw; top: 12%; opacity: .58; }
.hero-reticle::before,.hero-reticle::after { content: ''; position: absolute; background: rgba(224,163,41,.22); }
.hero-reticle::before { height: 1px; width: 120%; left: -10%; top: 50%; }.hero-reticle::after { width: 1px; height: 120%; top: -10%; left: 50%; }
.hero-reticle i { position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 42px 0 var(--amber), 84px 0 var(--amber), 126px 0 var(--amber), -42px 0 var(--amber), -84px 0 var(--amber), -126px 0 var(--amber); }
.hero-reticle i:first-child { left: calc(50% - 3px); }.hero-reticle i:nth-child(2) { transform: rotate(90deg); left: calc(50% - 3px); }
.hero-reticle span { position: absolute; inset: 43%; border: 1px solid rgba(224,163,41,.35); border-radius: 50%; }
.hero-copy { position: relative; z-index: 4; max-width: 970px; }
.kicker, .eyebrow { margin: 0 0 1.25rem; color: var(--amber-hot); text-transform: uppercase; letter-spacing: .19em; font-size: clamp(.62rem, .85vw, .76rem); }
.hero h1 { margin: 0; font-family: var(--display); font-size: clamp(6.2rem, 15vw, 14rem); line-height: .69; font-weight: 800; letter-spacing: -.055em; text-transform: uppercase; text-shadow: 0 6px 30px rgba(0,0,0,.55); }
.hero h1 em { color: var(--amber); font-style: normal; font-weight: 300; margin-left: .055em; }
.hero-deck { display: grid; grid-template-columns: minmax(220px, 410px) auto; align-items: end; gap: 3rem; margin-top: 2.6rem; margin-left: 27%; }
.hero-deck p { margin: 0; max-width: 40ch; color: rgba(241,238,216,.84); font-size: .8rem; line-height: 1.7; }
.hero-deck a { justify-self: start; text-decoration: none; border-bottom: 1px solid var(--amber); padding: .8rem 0; text-transform: uppercase; font-weight: 700; font-size: .72rem; letter-spacing: .13em; }
.hero-deck a span { color: var(--flag); padding-left: 1rem; }
.hero-coordinates { position: absolute; right: clamp(1rem,4vw,4rem); top: 9rem; z-index: 5; display: grid; gap: .4rem; text-align: right; color: rgba(241,238,216,.64); font-size: .6rem; letter-spacing: .16em; }
.film-caption { position: absolute; right: 1.5rem; bottom: 1rem; z-index: 5; margin: 0; color: rgba(241,238,216,.44); font-size: .55rem; letter-spacing: .18em; }
.reveal { animation: reveal-up .9s cubic-bezier(.22,.8,.25,1) both; }.hero h1.reveal { animation-delay: .12s }.hero-deck.reveal { animation-delay: .27s }.hero-coordinates.reveal { animation-delay: .42s }

.section-index { color: var(--amber); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.range-intro { position: relative; min-height: 760px; padding: clamp(6rem, 11vw, 10rem) clamp(1rem, 6vw, 7rem); display: grid; grid-template-columns: .5fr 1.6fr .9fr; gap: clamp(2rem, 6vw, 7rem); background: var(--range); border-top: 1px solid rgba(224,163,41,.3); overflow: hidden; }
.range-intro h2 { margin: 3.5rem 0 0; font-family: var(--display); font-size: clamp(4.7rem, 9.5vw, 10rem); line-height: .77; letter-spacing: -.04em; font-weight: 800; }
.range-intro h2 span { color: transparent; -webkit-text-stroke: 1px rgba(227,224,202,.68); }
.intro-copy { align-self: end; max-width: 37ch; padding-bottom: 2rem; }
.intro-copy > p:first-child { color: rgba(227,224,202,.78); font-size: .82rem; line-height: 1.85; }
.instructor-note { margin-top: 4rem; padding: 1.5rem 0 0 1.5rem; border-left: 2px solid var(--flag); font-family: var(--display); font-size: 1.45rem; line-height: 1.15; letter-spacing: .01em; }
.instructor-note b { display: inline-block; margin-top: .8rem; color: var(--amber); font: 600 .58rem/1 var(--mono); letter-spacing: .1em; }
.flag-ribbon { position: absolute; bottom: 0; left: 9%; right: 0; height: 84px; border-top: 1px solid rgba(227,224,202,.15); display: flex; justify-content: space-around; }
.flag-ribbon span { position: relative; width: 1px; background: rgba(227,224,202,.25); }
.flag-ribbon span::after { content: ''; position: absolute; top: 7px; left: 0; width: clamp(30px, 5vw, 70px); height: 18px; background: var(--flag); clip-path: polygon(0 0,100% 25%,83% 100%,0 70%); transform-origin: left; animation: flag-wave 1.4s ease-in-out infinite alternate; }
.flag-ribbon span:nth-child(2)::after { animation-delay: -.5s; width: 42px }.flag-ribbon span:nth-child(3)::after { animation-duration: 1.1s }.flag-ribbon span:nth-child(4)::after { animation-delay: -.9s; width: 60px }

.wind-call { background: #0b100d; padding: 6.5rem clamp(.75rem, 3vw, 3rem) 7rem; }
.range-header { max-width: 1500px; margin: auto; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; align-items: end; border-bottom: 1px solid rgba(227,224,202,.2); padding-bottom: 1.8rem; }
.range-header > div { color: var(--flag); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--flag); box-shadow: 0 0 10px var(--flag); margin-right: .5rem; }
.range-header h2 { margin: 0; font-family: var(--display); text-align: center; font-size: clamp(3.5rem, 7vw, 7rem); line-height: .8; letter-spacing: -.03em; }
.range-header p { margin: 0; color: var(--ghost); font-size: .68rem; line-height: 1.6; }
.simulator-shell { max-width: 1500px; margin: 2.5rem auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 1.5rem; }
.scope-stage { position: relative; min-height: 760px; background: #050806; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(227,224,202,.15); }
.scope-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, transparent 0 43%, #040705 43.5% 100%); z-index: 5; pointer-events: none; }
.scope-glass { position: relative; width: min(94%, 800px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: linear-gradient(#8e9b80 0 32%, #4a5746 57%, #232d25 58%); filter: contrast(1.04) saturate(.75); box-shadow: inset 0 0 90px #000, 0 0 0 14px #161b17, 0 0 0 18px #050806, 0 28px 80px #000; }
.scope-glass::after { content:''; position:absolute; inset:0; border-radius:50%; z-index:8; pointer-events:none; background: radial-gradient(circle at 62% 27%, rgba(255,242,180,.1), transparent 24%), radial-gradient(circle, transparent 38%, rgba(0,0,0,.84) 88%); }
.mirage { position: absolute; z-index: 2; inset: 20% 0 37%; opacity: .34; background: repeating-linear-gradient(98deg, transparent 0 15px, rgba(226,223,198,.22) 16px 19px, transparent 20px 34px); filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence baseFrequency='.018 .12' numOctaves='2' seed='2' type='fractalNoise' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='18'/%3E%3C/filter%3E%3C/svg%3E%23w"); animation: mirage-slide 3s linear infinite; }
.terrain { position: absolute; left: -8%; right: -8%; bottom: 0; background: var(--range); }
.terrain-far { height: 49%; clip-path: polygon(0 35%,17% 23%,30% 30%,45% 11%,60% 29%,76% 18%,100% 41%,100% 100%,0 100%); background: #465344; }
.terrain-near { height: 34%; clip-path: polygon(0 30%,12% 10%,29% 33%,48% 6%,68% 31%,85% 16%,100% 32%,100% 100%,0 100%); background: #283329; }
.target-rig { position: absolute; z-index: 3; left: 51.5%; bottom: 29%; width: 86px; height: 166px; transform-origin: 50% 90%; }
.target-stand { position:absolute; left:35px; top:45px; width:4px; height:105px; background:#151a16; box-shadow:-25px 98px 0 -1px #151a16, 25px 98px 0 -1px #151a16; }
.steel-target { position: absolute; left: 9px; top: 0; width: 58px; height: 68px; background: #e5e2c9; border: 5px solid #222920; clip-path: polygon(24% 0,76% 0,100% 25%,100% 100%,0 100%,0 25%); box-shadow: inset 0 0 0 3px rgba(0,0,0,.2), 0 0 12px rgba(236,229,195,.2); transform-origin: 50% 0; }
.target-rig.ringing .steel-target { animation: steel-ring 1.2s cubic-bezier(.2,.8,.2,1); }
.wind-flag { position:absolute; z-index:3; width:4px; background:#20271f; transform-origin:bottom; }
.wind-flag i { position:absolute; top:0; left:3px; height:15px; background:var(--flag); clip-path:polygon(0 0,100% 22%,72% 100%,0 68%); transform-origin:left; animation:flag-wave .55s ease-in-out infinite alternate; }
.wind-flag b { position:absolute; bottom:0; left:-5px; width:14px; height:2px; background:#151a16; }
.flag-a { left:24%; bottom:33%; height:70px }.flag-a i { width:46px }.flag-b { right:21%; bottom:32%; height:92px }.flag-b i { width:58px; animation-delay:-.3s }.flag-c { right:41%; bottom:37%; height:52px }.flag-c i { width:35px; animation-duration:.75s }
.scope-reticle { position:absolute; z-index:6; inset:0; color:rgba(229,176,54,.83); pointer-events:none; }
.reticle-h,.reticle-v { position:absolute; background:currentColor; box-shadow:0 0 4px rgba(0,0,0,.8); }.reticle-h { height:1px; left:4%; right:4%; top:50%; }.reticle-v { width:1px; top:4%; bottom:4%; left:50%; }
.cross-core { position:absolute; width:12%; aspect-ratio:1; border:1px solid currentColor; border-radius:50%; left:44%; top:44%; }
.mil { position:absolute; width:5px; height:5px; border-radius:50%; background:currentColor; top:calc(50% - 2px); box-shadow:0 0 2px #000; }.mil-l1{left:42%}.mil-l2{left:34%}.mil-l3{left:26%}.mil-r1{right:42%}.mil-r2{right:34%}.mil-r3{right:26%}.mil-b1{top:58%;left:calc(50% - 2px)}.mil-b2{top:66%;left:calc(50% - 2px)}.mil-b3{top:74%;left:calc(50% - 2px)}
.glass-data { position:absolute; z-index:7; left:15%; right:15%; bottom:12%; display:flex; justify-content:space-between; color:rgba(224,163,41,.82); font-size:.52rem; letter-spacing:.1em; }
.breath-gate-mini { position:absolute; z-index:7; width:90px; height:4px; left:calc(50% - 45px); bottom:8%; background:rgba(0,0,0,.55); }.breath-gate-mini i { display:block; height:100%; width:20%; background:var(--flag); }
.shot-tracer { position:absolute; z-index:9; left:50%; bottom:6%; width:5px; height:5px; border-radius:50%; background:#ffe4a0; opacity:0; box-shadow:0 0 10px 3px #ffb12e; }
.shot-tracer.flying { animation: shot-flight 1.45s cubic-bezier(.2,.2,.35,1) forwards; }
.impact { position:absolute; z-index:10; width:16px; height:16px; left:52%; top:44%; opacity:0; transform:translate(-50%,-50%); }
.impact::before,.impact::after { content:''; position:absolute; width:18px; height:2px; background:#fff0b0; left:-1px; top:7px; box-shadow:0 0 8px #ffb12e; }.impact::before{transform:rotate(45deg)}.impact::after{transform:rotate(-45deg)}.impact.show { animation:impact-flash .48s ease-out; }
.scope-bezel { position:absolute; z-index:7; width:min(94%, 800px); aspect-ratio:1; border-radius:50%; border:clamp(14px,2vw,25px) solid #080b09; box-shadow:inset 0 0 0 2px #4c5148,0 0 0 1px #000; pointer-events:none; }
.spotter-strip { position:absolute; z-index:12; left:0; right:0; bottom:0; min-height:78px; padding:1.2rem 1.4rem; display:grid; grid-template-columns:140px 1fr 110px; gap:1rem; align-items:center; background:rgba(5,8,6,.92); border-top:1px solid rgba(224,163,41,.35); }
.spotter-label,.shot-count { color:var(--amber); font-size:.57rem; letter-spacing:.13em; }.spotter-strip strong { font-family:var(--display); font-size:1.3rem; letter-spacing:.03em; font-weight:600; }.shot-count{text-align:right}

.control-bench { display:grid; gap:1px; align-content:start; background:rgba(227,224,202,.18); border:1px solid rgba(227,224,202,.18); }
.conditions-panel,.turret-panel,.send-panel { background:#151c17; padding:1.4rem; }
.panel-label { margin:0 0 1.5rem; color:var(--ghost); font-size:.58rem; text-transform:uppercase; letter-spacing:.15em; }
.condition-main { display:flex; align-items:flex-end; gap:1rem; border-bottom:1px solid rgba(227,224,202,.15); padding-bottom:1.2rem; }.condition-main strong { font-family:var(--display); color:var(--amber); font-size:5.2rem; line-height:.65; }.condition-main span { font-size:.6rem; line-height:1.4; text-transform:uppercase; }
.wind-arrow { height:70px; position:relative; display:flex; align-items:center; gap:.8rem; }.wind-arrow i { flex:1; height:1px; background:var(--flag); position:relative; }.wind-arrow i::after { content:''; position:absolute; right:0; top:-4px; width:8px; height:8px; border-right:1px solid var(--flag); border-top:1px solid var(--flag); transform:rotate(45deg); }.wind-arrow span { color:var(--flag); font-size:.58rem; }
.conditions-panel dl { margin:0; }.conditions-panel dl div { display:flex; justify-content:space-between; padding:.55rem 0; font-size:.6rem; border-top:1px solid rgba(227,224,202,.1); }.conditions-panel dt { color:var(--ghost); }.conditions-panel dd { margin:0; }
.turrets { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.turret-control > span { display:block; text-align:center; color:var(--amber); font-size:.53rem; letter-spacing:.13em; }
.turret { position:relative; width:90px; height:90px; margin:1rem auto; border-radius:50%; border:8px solid #2c342e; background:repeating-conic-gradient(#c1bda8 0 1deg,#282e29 1deg 10deg); box-shadow:inset 0 0 0 23px #111613,0 7px 12px #050805; transition:transform .12s; }.turret::before { content:''; position:absolute; inset:23px; border-radius:50%; background:#202721; }.turret i { position:absolute; z-index:2; width:2px; height:20px; background:var(--flag); top:-4px; left:calc(50% - 1px); }
.stepper { display:grid; grid-template-columns:44px 1fr 44px; border:1px solid rgba(227,224,202,.2); }.stepper button { min-height:44px; border:0; background:#252e27; color:var(--mist); cursor:pointer; font-weight:800; }.stepper button:hover{background:var(--amber);color:var(--scope)}.stepper output { display:grid; place-items:center; font-size:.75rem; background:#080c0a; }
.breath-prompt { display:grid; grid-template-columns:68px 1fr; gap:.7rem; align-items:center; font-size:.56rem; letter-spacing:.1em; color:var(--amber); }.breath-prompt i { height:5px; background:#303a32; overflow:hidden; }.breath-prompt b { display:block; width:0; height:100%; background:var(--amber); }
.send-button { position:relative; width:100%; min-height:115px; margin-top:1rem; overflow:hidden; border:1px solid var(--flag); background:var(--flag); color:#fff2dd; cursor:pointer; text-align:left; padding:1.2rem; transition:background .2s, color .2s; }.send-button::before { content:''; position:absolute; inset:0; background:var(--amber); transform:translateX(-101%); transition:transform .35s cubic-bezier(.2,.8,.2,1); }.send-button:hover::before { transform:translateX(0); }.send-button:hover { color:var(--scope); }.send-button span,.send-button small { position:relative; z-index:1; display:block; }.send-button span { font-family:var(--display); font-size:3.2rem; line-height:.8; text-transform:uppercase; }.send-button small { margin-top:.8rem; font-size:.52rem; letter-spacing:.08em; text-transform:uppercase; }.send-button:disabled { cursor:wait; filter:grayscale(.5); }
.send-panel > p { color:var(--ghost); font-size:.56rem; line-height:1.5; margin:1rem 0 0; }

.range-book { position:relative; min-height:1000px; padding:clamp(7rem,11vw,11rem) clamp(1rem,6vw,7rem); background:var(--paper); color:var(--ink); overflow:hidden; display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(3rem,8vw,9rem); align-items:start; }
.book-heading { position:relative; z-index:2; }.book-heading .section-index { color:#7b251c; }.book-heading h2 { margin:3rem 0 2rem; font-family:var(--display); font-size:clamp(5rem,10vw,10rem); line-height:.72; letter-spacing:-.05em; }.book-heading h2 em { color:transparent; font-style:normal; -webkit-text-stroke:1px var(--ink); font-weight:300; }.book-heading p { max-width:45ch; font-size:.75rem; line-height:1.8; color:#354238; }
.dope-card { position:relative; z-index:2; width:100%; max-width:760px; justify-self:end; background:#dedcc2; border:1px solid #78796c; box-shadow:18px 22px 0 rgba(32,39,33,.16),0 30px 70px rgba(25,31,26,.2); padding:1.5rem; transform:rotate(1.5deg); }
.dope-card::before { content:''; position:absolute; inset:8px; border:1px solid rgba(39,48,40,.3); pointer-events:none; }.card-top { display:grid; grid-template-columns:1fr 1fr 1fr; padding:.7rem; border-bottom:2px solid var(--ink); font-size:.58rem; }.card-top strong{text-align:center}.card-top span:last-child{text-align:right}.card-grid { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:2px solid var(--ink); }.card-grid div { padding:.9rem; border-right:1px solid rgba(17,23,19,.4); }.card-grid div:last-child{border:0}.card-grid small,.card-grid b { display:block; }.card-grid small{font-size:.5rem}.card-grid b{font-family:var(--display);font-size:1.8rem}.dope-card table{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.6rem}.dope-card th,.dope-card td{padding:.65rem .5rem;border-bottom:1px solid rgba(17,23,19,.34);text-align:right}.dope-card th:first-child,.dope-card td:first-child{text-align:left}.dope-card th{text-transform:uppercase;font-size:.48rem}.active-row{background:var(--flag);color:#fff}.card-scribble{margin:1.5rem 1rem .5rem auto;width:max-content;color:#76251d;font-family:var(--display);font-size:1.35rem;line-height:1.15;transform:rotate(-4deg)}.card-punches{position:absolute;left:24%;right:24%;bottom:-8px;display:flex;justify-content:space-between}.card-punches i{width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.drop-visual { position:absolute; left:0; right:0; bottom:0; height:290px; background:#1b241e; color:var(--mist); display:grid; grid-template-columns:repeat(4,1fr); padding:2rem 6vw; align-items:start; }.drop-visual span{font-size:.55rem;color:var(--amber);border-left:1px solid rgba(227,224,202,.25);padding-left:.5rem}.drop-visual i{position:absolute;left:var(--drop);top:80px;width:6px;height:6px;border-radius:50%;background:var(--flag)}.drop-visual svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:230px}.drop-visual path{fill:none;stroke:var(--amber);stroke-width:2;stroke-dasharray:3 8;vector-effect:non-scaling-stroke}

.breath-lab { min-height:850px; padding:clamp(7rem,11vw,11rem) clamp(1rem,7vw,8rem); background:#0a0f0c; display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(3rem,10vw,10rem); align-items:center; overflow:hidden; }
.breath-copy h2 { margin:3rem 0 2rem; font-family:var(--display); font-size:clamp(5.5rem,10vw,10rem); line-height:.72; letter-spacing:-.04em; }.breath-copy p{max-width:48ch;color:var(--ghost);font-size:.78rem;line-height:1.9}.cycle-button{position:relative;margin-top:2rem;min-height:52px;border:1px solid var(--amber);background:transparent;color:var(--mist);padding:.7rem 1rem .7rem 1.4rem;display:flex;gap:2rem;align-items:center;text-transform:uppercase;font-size:.65rem;letter-spacing:.11em;cursor:pointer}.cycle-button i{width:34px;height:34px;border-radius:50%;background:var(--amber);position:relative}.cycle-button i::after{content:'';position:absolute;left:13px;top:10px;border-left:10px solid var(--scope);border-top:7px solid transparent;border-bottom:7px solid transparent}.cycle-button:hover{background:var(--amber);color:var(--scope)}
.lung-meter { position:relative; min-height:600px; display:grid; place-items:center; }.cycle-orbit{position:absolute;width:min(50vw,580px);aspect-ratio:1;border:1px solid rgba(227,224,202,.18);border-radius:50%}.cycle-orbit::before,.cycle-orbit::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(224,163,41,.18)}.cycle-orbit::before{inset:12%}.cycle-orbit::after{inset:28%}.cycle-orbit span{position:absolute;inset:5%;border-radius:50%;border-top:2px solid var(--amber);transform:rotate(30deg)}.cycle-orbit i{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--flag);left:50%;top:-7px;box-shadow:0 0 18px var(--flag);transform-origin:0 calc(min(50vw,580px)/2 + 7px)}.cycle-orbit b{position:absolute;inset:35%;border-radius:50%;background:radial-gradient(circle,rgba(224,163,41,.22),transparent 68%);animation:breathe 8s ease-in-out infinite}.cycle-phase{position:relative;text-align:center}.cycle-phase small,.cycle-phase span{display:block;color:var(--ghost);font-size:.52rem;letter-spacing:.13em}.cycle-phase strong{display:block;margin:.7rem 0;font-family:var(--display);font-size:4rem;color:var(--amber)}.lung-meter ol{position:absolute;left:0;right:0;bottom:-20px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(227,224,202,.2)}.lung-meter li{padding:1rem;border-right:1px solid rgba(227,224,202,.2);display:grid;grid-template-columns:30px 1fr;gap:.4rem}.lung-meter li:last-child{border:0}.lung-meter li b{color:var(--amber);font-size:.58rem;grid-row:1/3}.lung-meter li span{font-family:var(--display);font-size:1.2rem;text-transform:uppercase}.lung-meter li small{color:var(--ghost);font-size:.48rem}.lung-meter .pause-step{background:rgba(224,163,41,.08)}

.curriculum { padding:clamp(7rem,11vw,11rem) clamp(1rem,6vw,7rem); background:#344137; }
.curriculum-head { display:grid; grid-template-columns:.55fr 1.6fr .7fr; gap:3rem; align-items:end; margin-bottom:6rem; }.curriculum-head h2{margin:0;font-family:var(--display);font-size:clamp(4.2rem,8vw,8rem);line-height:.77;letter-spacing:-.04em}.curriculum-head p{margin:0;color:var(--ghost);font-size:.7rem;line-height:1.8}.course-lines{border-top:1px solid rgba(227,224,202,.35)}.course-lines article{display:grid;grid-template-columns:.45fr 2fr .35fr;gap:2rem;align-items:center;min-height:140px;border-bottom:1px solid rgba(227,224,202,.25);transition:background .3s,padding .3s}.course-lines article:hover{background:rgba(7,11,9,.25);padding:0 1.5rem}.course-lines time{font-family:var(--display);font-size:2.8rem;color:var(--amber)}.course-lines article div{display:grid;grid-template-columns:40px .8fr 1.4fr;gap:1.5rem;align-items:center}.course-lines article div>span{color:var(--flag)}.course-lines h3{font-family:var(--display);font-size:2.5rem;text-transform:uppercase;margin:0}.course-lines p{color:var(--ghost);font-size:.65rem;line-height:1.7;margin:0}.course-lines article>b{text-align:right;font-size:.56rem;color:var(--amber)}

.closing { position:relative; min-height:830px; padding:8rem 1rem 5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 50% 45%,#544628 0,#242a21 28%,#0b100d 70%);overflow:hidden}.closing::after{content:'';position:absolute;left:-10%;right:-10%;bottom:-14%;height:42%;background:#070b09;clip-path:polygon(0 40%,12% 15%,20% 31%,35% 6%,48% 38%,63% 14%,80% 34%,100% 10%,100% 100%,0 100%)}.closing-sun{position:absolute;width:min(48vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f3b638 0 18%,#9f6f25 38%,rgba(101,74,34,.1) 67%,transparent 70%);filter:blur(1px);opacity:.72}.closing>p,.closing h2,.closing a,.closing-stats{position:relative;z-index:2}.closing>p{font-size:.58rem;letter-spacing:.2em;color:var(--amber)}.closing h2{margin:2rem 0;font-family:var(--display);font-size:clamp(5.2rem,12vw,12rem);line-height:.72;letter-spacing:-.05em}.closing h2 span{color:transparent;-webkit-text-stroke:1px var(--mist)}.closing>a{display:flex;align-items:center;gap:1rem;margin-top:2rem;text-decoration:none;text-transform:uppercase;font-size:.62rem;letter-spacing:.12em}.closing>a i{width:44px;height:44px;border-radius:50%;background:var(--flag);position:relative}.closing>a i::before{content:'↖';position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:1.1rem}.closing-stats{width:min(900px,90%);display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:6rem}.closing-stats span{font-size:.57rem;text-transform:uppercase;color:var(--ghost)}.closing-stats b{display:block;font-family:var(--display);font-size:2.5rem;color:var(--mist)}

footer { min-height:180px; padding:2.5rem clamp(1rem,5vw,5rem); background:#050806; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:2rem; border-top:1px solid rgba(224,163,41,.24); color:rgba(227,224,202,.72); font-size:.62rem; }
.footer-mark{display:flex;align-items:center;gap:.8rem;font-family:var(--display);font-size:1rem;line-height:.85;color:var(--mist)}footer>p{text-align:center}footer nav{justify-self:end;display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:flex-end}footer nav a{text-decoration:none;border-bottom:1px solid rgba(227,224,202,.25);padding:.5rem 0}footer nav a:hover{color:var(--amber)}

/* Pass 1 refinements */
.course-lines p { color: rgba(227,224,202,.76); font-size: .7rem; }
.course-lines article > b { font-size: .6rem; }
.closing h2 { word-spacing: .09em; }

@keyframes hero-drift{to{transform:scale(1.1) translate3d(-1.5%,1%,0)}}
@keyframes smoke{from{transform:translate3d(-20%,20%,0) scale(.8)}to{transform:translate3d(100%,-20%,0) scale(1.2)}}
@keyframes flag-wave{to{transform:skewY(-8deg) scaleX(.82)}}
@keyframes mirage-slide{to{transform:translateX(34px)}}
@keyframes reveal-up{from{opacity:0;transform:translateY(35px);clip-path:inset(0 0 100%)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes breathe{0%,100%{transform:scale(.68);opacity:.25}38%{transform:scale(1.12);opacity:.9}76%{transform:scale(.72);opacity:.35}}
@keyframes shot-flight{0%{opacity:1;transform:translate(0,0) scale(1)}65%{opacity:1;transform:translate(var(--shot-x,0),var(--shot-y,-300px)) scale(.75)}100%{opacity:0;transform:translate(var(--shot-x,0),var(--shot-y,-300px)) scale(.2)}}
@keyframes impact-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}
@keyframes steel-ring{0%{transform:rotate(0)}18%{transform:rotateX(65deg) rotateZ(4deg)}38%{transform:rotateX(-30deg) rotateZ(-2deg)}62%{transform:rotateX(16deg)}100%{transform:rotate(0)}}

@media (max-width: 1050px){
  .site-header{grid-template-columns:1fr auto}.site-header nav{display:none}.hero-deck{margin-left:12%}.range-intro{grid-template-columns:.35fr 1.4fr}.intro-copy{grid-column:2}.simulator-shell{grid-template-columns:1fr}.control-bench{grid-template-columns:1fr 1.2fr 1fr}.scope-stage{min-height:700px}.range-book{grid-template-columns:1fr}.book-heading{display:grid;grid-template-columns:.25fr 1fr .7fr;align-items:end;gap:2rem}.book-heading h2{margin:0}.dope-card{justify-self:center}.breath-lab{grid-template-columns:1fr}.breath-copy{display:grid;grid-template-columns:.35fr 1fr .75fr;gap:2rem;align-items:end}.breath-copy h2{margin:0}.breath-copy .cycle-button{grid-column:3}.lung-meter{min-height:650px}.cycle-orbit{width:560px}.curriculum-head{grid-template-columns:.3fr 1.5fr .7fr}
}

@media (max-width: 700px){
  .site-header{min-height:70px;padding:0 1rem}.wordmark{font-size:.92rem}.wordmark svg{width:31px}.power-switch{font-size:0;width:46px;padding:0;justify-content:center}.power-switch .power-lamp{width:11px;height:11px}.hero{min-height:780px;padding:9rem 1rem 6rem;align-items:center}.letterbox-top{top:70px;height:25px}.letterbox-bottom{height:25px}.hero-image{inset:-2%;background-position:56% center}.hero-reticle{width:130vw;right:-62vw;top:18%}.hero h1{font-size:clamp(5.8rem,30vw,8.8rem);line-height:.72}.hero-deck{grid-template-columns:1fr;margin:2.2rem 0 0;gap:1.2rem;width:85%}.hero-deck p{font-size:.7rem}.hero-coordinates{top:6.3rem;right:1rem}.film-caption{font-size:.45rem;bottom:.55rem}.range-intro{min-height:800px;padding:6rem 1rem 8rem;grid-template-columns:1fr}.range-intro h2{margin:2rem 0 0;font-size:4.7rem}.intro-copy{grid-column:1;padding:0}.instructor-note{margin-top:2.5rem}.flag-ribbon{left:0}.wind-call{padding:5rem .5rem}.range-header{grid-template-columns:1fr;text-align:center;padding:0 .5rem 1.5rem}.range-header h2{grid-row:1;font-size:4.2rem}.range-header p{max-width:40ch;margin:auto}.scope-stage{min-height:470px}.scope-stage::before{background:radial-gradient(circle,transparent 0 45%,#040705 45.5% 100%)}.scope-glass,.scope-bezel{width:94vw}.target-rig{transform:scale(.7);bottom:26%}.spotter-strip{min-height:88px;padding:.8rem;grid-template-columns:1fr auto;gap:.5rem}.spotter-strip strong{grid-column:1/3;grid-row:1;font-size:1.02rem}.spotter-label{grid-row:2}.shot-count{grid-row:2}.glass-data{display:none}.control-bench{grid-template-columns:1fr}.conditions-panel,.turret-panel,.send-panel{padding:1.1rem}.conditions-panel{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.conditions-panel .panel-label{grid-column:1/3}.conditions-panel dl{grid-column:1/3}.condition-main strong{font-size:4rem}.wind-arrow{height:auto}.turret{width:84px;height:84px}.range-book{padding:6rem 1rem 270px;min-height:0}.book-heading{display:block}.book-heading h2{font-size:5.3rem;margin:2.5rem 0 2rem}.dope-card{padding:.75rem;transform:none;box-shadow:8px 12px 0 rgba(32,39,33,.16);overflow:hidden}.card-top{grid-template-columns:1fr 1fr;font-size:.5rem}.card-top span:last-child{display:none}.card-grid b{font-size:1.35rem}.dope-card table{font-size:.48rem}.dope-card th,.dope-card td{padding:.52rem .25rem}.dope-card th:nth-child(4),.dope-card td:nth-child(4){display:none}.card-scribble{font-size:1.1rem}.drop-visual{height:220px;padding:1.5rem 1rem}.drop-visual svg{height:170px}.breath-lab{padding:6rem 1rem;min-height:920px}.breath-copy{display:block}.breath-copy h2{font-size:5.8rem;margin:2.5rem 0 2rem}.lung-meter{min-height:620px}.cycle-orbit{width:90vw}.cycle-orbit i{display:none}.lung-meter ol{grid-template-columns:1fr;bottom:-45px}.lung-meter li{min-height:64px}.curriculum{padding:6rem 1rem}.curriculum-head{grid-template-columns:1fr;gap:2rem;margin-bottom:3rem}.curriculum-head h2{font-size:4.3rem}.course-lines article{grid-template-columns:76px 1fr;gap:1rem;padding:1.2rem 0}.course-lines article:hover{padding:1.2rem .5rem}.course-lines article>b{display:none}.course-lines time{font-size:2rem}.course-lines article div{grid-template-columns:24px 1fr}.course-lines article div p{grid-column:2}.course-lines h3{font-size:2rem}.closing{min-height:720px}.closing h2{font-size:5.5rem}.closing-stats{margin-top:4rem;gap:.3rem}.closing-stats b{font-size:2rem}footer{grid-template-columns:1fr;text-align:center;padding:3rem 1rem}.footer-mark{justify-content:center}footer nav{justify-self:center;justify-content:center}footer>p{order:3}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}.hero-image,.hero-smoke,.wind-flag i,.flag-ribbon span::after,.mirage,.cycle-orbit b{animation:none!important}.reveal{animation:none!important}.shot-tracer.flying{animation-duration:.2s}.target-rig.ringing .steel-target{animation-duration:.3s}
}

@media (max-width: 700px){
  .power-switch { width: 58px; padding: 0; font-size: .57rem; }
  .power-switch span:last-child { font-size: 0; }
  .power-switch span:last-child::before { content: 'SND'; font-size: .57rem; letter-spacing: .1em; }
  .power-switch span:last-child b { display: none; }
  .range-intro h2 { font-size: 4.35rem; line-height: .81; }
  .target-rig { transform: scale(.78); bottom: 25%; }
  .conditions-panel dl div { font-size: .65rem; padding: .65rem 0; }
  .card-top { font-size: .54rem; }
  .dope-card table { font-size: .53rem; }
  .dope-card th, .dope-card td { padding: .62rem .25rem; }
  .course-lines article div p { font-size: .68rem; }
  .closing h2 { font-size: 5.35rem; }
  footer { font-size: .66rem; }
  footer nav { gap: .8rem 1.2rem; }
}

/* guide */
.guide-body{background:#111713}.guide-hero{min-height:520px;padding:9rem clamp(1rem,7vw,8rem) 5rem;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 35%,rgba(224,163,41,.24),transparent 25%),linear-gradient(135deg,#303b31,#090d0b 65%)}.guide-hero::after{content:'';position:absolute;width:550px;aspect-ratio:1;border:1px solid rgba(224,163,41,.3);border-radius:50%;right:-100px;top:40px;box-shadow:inset 0 0 0 70px rgba(7,11,9,.35),inset 0 0 0 71px rgba(224,163,41,.2)}.guide-hero .section-index,.guide-hero h1,.guide-hero p{position:relative;z-index:2}.guide-hero h1{font:800 clamp(5.5rem,14vw,13rem)/.72 var(--display);letter-spacing:-.05em;margin:3rem 0 2rem}.guide-hero h1 span{color:var(--amber)}.guide-hero p{max-width:55ch;color:var(--ghost);font-size:.75rem;line-height:1.8}.guide-content{max-width:1200px;margin:auto;padding:7rem clamp(1rem,6vw,6rem);display:grid;grid-template-columns:250px 1fr;gap:clamp(3rem,8vw,8rem)}.guide-rail{position:sticky;top:2rem;align-self:start}.guide-rail span{display:block;color:var(--amber);font-size:.6rem;letter-spacing:.15em;margin-bottom:1rem}.guide-rail strong{font:700 2.2rem/1 var(--display);text-transform:uppercase}.guide-copy section{padding:0 0 4rem;margin-bottom:4rem;border-bottom:1px solid rgba(227,224,202,.18)}.guide-copy section:last-child{border:0;margin:0}.guide-copy h2{font:700 3.5rem/.9 var(--display);letter-spacing:-.02em;text-transform:uppercase;margin:0 0 1.5rem;color:var(--mist)}.guide-copy h3{font:600 1.4rem/1 var(--display);text-transform:uppercase;color:var(--amber);margin:2rem 0 .5rem}.guide-copy p,.guide-copy li{color:rgba(227,224,202,.76);font-size:.75rem;line-height:1.9}.guide-copy code{color:var(--amber);background:#080c0a;padding:.15rem .35rem}.token-strip{display:grid;grid-template-columns:repeat(5,1fr);margin:2rem 0}.token-strip span{height:90px;display:flex;align-items:end;padding:.6rem;color:#fff;font-size:.48rem}.token-strip span:nth-child(1){background:#111713}.token-strip span:nth-child(2){background:#263129}.token-strip span:nth-child(3){background:#e0a329;color:#111713}.token-strip span:nth-child(4){background:#d34836}.token-strip span:nth-child(5){background:#c8c7b2;color:#111713}.prompt-card{background:#263129;border-left:3px solid var(--flag);padding:1.5rem 2rem;color:var(--mist);font-size:.7rem;line-height:1.8}.guide-back{display:inline-flex;min-height:44px;align-items:center;text-decoration:none;color:var(--amber);font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--amber)}
@media(max-width:700px){.guide-hero{min-height:480px;padding-top:8rem}.guide-hero h1{font-size:6.5rem}.guide-content{grid-template-columns:1fr;padding-top:5rem}.guide-rail{position:static}.guide-copy h2{font-size:3rem}.token-strip{grid-template-columns:1fr}.token-strip span{height:52px}}

.guide-content { position: relative; }
.guide-content::before { content: '113  ·  OBSERVE  /  RECORD  /  CORRECT'; position: absolute; left: 1.5rem; top: 38%; color: rgba(224,163,41,.36); font-size: .5rem; letter-spacing: .24em; writing-mode: vertical-rl; }
.guide-rail { padding-bottom: 12rem; border-left: 1px solid rgba(224,163,41,.24); padding-left: 1.25rem; }
.guide-rail::after { content: ''; position: absolute; left: -5px; bottom: 6rem; width: 9px; height: 9px; border: 1px solid var(--flag); border-radius: 50%; }
.token-strip span { font-size: .54rem; border: 1px solid rgba(227,224,202,.22); }
.token-strip span:nth-child(1) { box-shadow: inset 0 0 0 1px rgba(227,224,202,.18); }

@media(max-width:700px){
  .guide-content::before { display: none; }
  .guide-rail { position: static; padding-bottom: 2rem; }
  .guide-rail::after { bottom: 0; }
}

/* Pass 2 — external critique */
html { color-scheme: dark; }
body { min-width: 0; }
button, a { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
section[id], h2[id] { scroll-margin-top: 7rem; }
.dope-card, .conditions-panel, .turret-panel, .send-panel, .closing-stats { font-variant-numeric: tabular-nums; }

.site-header {
  background: linear-gradient(180deg, rgba(4,7,5,.84), rgba(4,7,5,.48));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.site-header nav a, .power-switch, .guide-back { position: relative; }
.site-header nav a::after, .guide-back::after {
  content: '';
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.site-header nav a:hover::after, .site-header nav a:focus-visible::after, .guide-back:hover::after { transform: scaleX(1); }
.power-switch:hover { border-color: var(--amber); background: rgba(7,11,9,.92); }

.hero::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 64%, rgba(255,186,72,.06) 64.2%, transparent 66%);
  mix-blend-mode: screen;
}
.hero-copy { transform: translateY(-.6rem); }
.hero h1 { max-width: 6ch; }
.hero h1 em { text-shadow: 0 0 38px rgba(224,163,41,.14); }
.hero-tape {
  position: absolute;
  z-index: 5;
  left: clamp(1rem, 5.5vw, 6rem);
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(241,238,216,.52);
  font-size: .5rem;
  letter-spacing: .18em;
}
.hero-tape i { width: 28px; height: 1px; background: rgba(224,163,41,.5); }
.hero-tape span:last-child { color: var(--amber); }

.range-intro {
  background:
    linear-gradient(90deg, transparent 0 49.95%, rgba(227,224,202,.035) 50%, transparent 50.05%),
    radial-gradient(circle at 74% 38%, rgba(224,163,41,.08), transparent 29%),
    #263129;
}
.range-intro h2, .book-heading h2, .breath-copy h2, .curriculum-head h2 { text-wrap: balance; }
.intro-copy > p:first-child, .book-heading p, .breath-copy p, .curriculum-head p { font-size: clamp(.75rem, .82vw, .86rem); }

.wind-call {
  background:
    radial-gradient(circle at 28% 36%, rgba(55,75,62,.24), transparent 31%),
    linear-gradient(180deg, #090e0b, #060a08 72%);
}
.range-header { grid-template-columns: .72fr 1.6fr .8fr; align-items: center; }
.range-header h2 { text-align: left; font-size: clamp(4.4rem, 8.5vw, 8rem); }
.range-header p { font-size: .72rem; }
.scope-stage {
  min-height: 800px;
  background:
    radial-gradient(circle at 50% 45%, rgba(68,85,69,.18), transparent 38%),
    repeating-linear-gradient(0deg, transparent 0 52px, rgba(227,224,202,.018) 53px),
    #030605;
  box-shadow: inset 0 0 90px rgba(0,0,0,.9);
}
.scope-stage.shot-live { border-color: rgba(224,163,41,.48); }
.scope-id {
  position: absolute;
  z-index: 12;
  left: 1.2rem;
  top: 1.1rem;
  display: grid;
  gap: .25rem;
  color: rgba(227,224,202,.48);
  font-size: .5rem;
  letter-spacing: .16em;
}
.scope-id span:first-child { color: var(--amber); }
.shot-ledger {
  position: absolute;
  z-index: 12;
  right: 1.1rem;
  top: 1rem;
  display: flex;
  border: 1px solid rgba(227,224,202,.16);
  background: rgba(5,8,6,.72);
}
.shot-ledger span {
  min-height: 40px;
  min-width: 88px;
  padding: .55rem .7rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem;
  border-left: 1px solid rgba(227,224,202,.12);
  color: rgba(227,224,202,.42);
  font-size: .48rem;
  letter-spacing: .08em;
}
.shot-ledger span:first-child { border: 0; }
.shot-ledger b { color: inherit; }
.shot-ledger .active { background: rgba(224,163,41,.12); color: var(--amber-hot); }
.shot-ledger .complete { color: rgba(227,224,202,.72); }
.shot-ledger .complete b::after { content: '✓'; color: var(--flag); margin-left: .25rem; }
.scope-glass {
  background:
    linear-gradient(104deg, transparent 0 47%, rgba(235,221,172,.07) 49%, transparent 51%),
    linear-gradient(#89947b 0 31%, #4d5c4a 56%, #232d25 57%);
}
.scope-glass::before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, transparent 0 11%, rgba(7,11,9,.04) 11.2%, transparent 11.5% 22%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.wind-flag i { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.ring-echo {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 42%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(255,196,74,.82);
  box-shadow: 0 0 0 16px rgba(255,196,74,.05), inset 0 0 55px rgba(255,196,74,.09);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.ring-echo span { font-family: var(--display); font-size: clamp(4rem, 9vw, 7rem); color: #fff1c0; letter-spacing: .08em; text-shadow: 0 0 28px rgba(255,196,74,.7); }
.ring-echo i { position: absolute; inset: 12%; border: 1px solid rgba(255,196,74,.4); border-radius: 50%; }
.spotter-strip strong { font-size: 1.42rem; }

.control-bench { box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.correction-card {
  position: relative;
  margin-bottom: 1.2rem;
  padding: 1rem;
  border: 1px solid rgba(224,163,41,.36);
  background: linear-gradient(135deg, rgba(224,163,41,.1), rgba(7,11,9,.24));
  overflow: hidden;
}
.correction-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--amber);
}
.correction-card span, .correction-card small { display: block; font-size: .5rem; letter-spacing: .12em; color: var(--ghost); }
.correction-card strong { display: block; margin: .5rem 0; font-family: var(--display); color: var(--amber-hot); font-size: 2rem; line-height: .9; letter-spacing: .04em; }
.correction-card.needs-dial::before { background: var(--flag); box-shadow: 0 0 16px var(--flag); }
.correction-card.needs-dial small { color: #f0a097; }
.turret { transition: transform .1s cubic-bezier(.2,.7,.2,1); }
.stepper button:active { background: var(--flag); color: white; transform: translateY(1px); }
.send-button { transition: color .2s, filter .2s, border-color .2s; }
.send-button.breath-open:not(:disabled) { border-color: var(--amber-hot); box-shadow: 0 0 0 1px rgba(255,196,74,.25), 0 0 34px rgba(224,163,41,.12); }
.send-button.breath-open:not(:disabled)::after {
  content: 'GATE OPEN';
  position: absolute;
  right: .8rem;
  top: .8rem;
  z-index: 2;
  color: #fff3c9;
  font-size: .46rem;
  letter-spacing: .12em;
}
.send-button:disabled { opacity: .52; cursor: not-allowed; filter: saturate(.45); }

.range-book {
  background:
    linear-gradient(90deg, rgba(75,80,66,.05) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(#ceceb9, #bfc2ad);
}
.dope-card { box-shadow: 18px 22px 0 rgba(32,39,33,.2), 0 40px 90px rgba(25,31,26,.24); }
.dope-card tbody tr:not(.active-row):hover { background: rgba(224,163,41,.13); }
.drop-visual { background: radial-gradient(circle at 74% 28%, rgba(224,163,41,.08), transparent 24%), #17201a; }
.breath-lab { background: radial-gradient(circle at 69% 52%, rgba(224,163,41,.055), transparent 29%), #070c09; }
.curriculum { background: linear-gradient(110deg, rgba(0,0,0,.13), transparent 38%), #344137; }
.course-lines article:hover h3 { color: var(--amber-hot); }
.course-lines h3 { transition: color .25s; }

.observe { opacity: 1; transform: none; }
.observe.in-view { animation: section-enter .8s cubic-bezier(.2,.75,.2,1) both; }
.course-lines article.observe:nth-child(2).in-view { animation-delay: .06s; }
.course-lines article.observe:nth-child(3).in-view { animation-delay: .12s; }
.course-lines article.observe:nth-child(4).in-view { animation-delay: .18s; }
@keyframes section-enter { from { opacity: .18; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Guide / pass 2 */
.guide-body { background: radial-gradient(circle at 20% 10%, rgba(58,77,63,.18), transparent 29%), #0a0f0c; }
.guide-hero {
  min-height: 680px;
  padding-top: 10rem;
  background:
    linear-gradient(90deg, rgba(227,224,202,.028) 1px, transparent 1px) 0 0 / 64px 100%,
    radial-gradient(circle at 80% 35%, rgba(224,163,41,.22), transparent 25%),
    linear-gradient(135deg,#303b31,#090d0b 65%);
}
.guide-hero::before {
  content: '12×   /   680 M   /   0.1 MRAD';
  position: absolute;
  right: clamp(1rem, 6vw, 6rem);
  bottom: 6rem;
  z-index: 2;
  color: rgba(224,163,41,.7);
  font-size: .52rem;
  letter-spacing: .18em;
}
.guide-hero::after { width: min(48vw, 680px); right: -3vw; top: 4rem; box-shadow: inset 0 0 0 86px rgba(7,11,9,.36), inset 0 0 0 87px rgba(224,163,41,.24), 0 0 90px rgba(0,0,0,.28); }
.guide-hero h1 { font-size: clamp(7rem, 15vw, 14rem); max-width: 3.2ch; text-shadow: 0 8px 34px rgba(0,0,0,.36); }
.guide-hero p { font-size: .8rem; line-height: 1.9; }
.guide-calibration {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 6vw, 6rem);
  bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(520px, 48vw);
  border-top: 1px solid rgba(227,224,202,.25);
}
.guide-calibration span { padding: .8rem .5rem; color: var(--amber); font-size: .52rem; border-left: 1px solid rgba(227,224,202,.18); }
.guide-calibration b { color: var(--ghost); font-weight: 400; font-size: .48rem; letter-spacing: .1em; }
.guide-content { max-width: 1320px; grid-template-columns: 280px minmax(0, 1fr); }
.guide-rail small { display: block; margin-top: 3rem; color: rgba(227,224,202,.45); font-size: .52rem; line-height: 2; letter-spacing: .12em; }
.guide-copy section { position: relative; }
.guide-copy section::before { content: ''; position: absolute; left: -3rem; top: .4rem; width: 22px; height: 1px; background: var(--flag); }
.guide-copy h2 { font-size: clamp(3.4rem, 5vw, 5.2rem); }
.guide-copy h3 { font-size: 1.75rem; margin-top: 2.5rem; }
.guide-copy p, .guide-copy li { max-width: 78ch; color: rgba(227,224,202,.82); font-size: .8rem; line-height: 2; }
.guide-copy code { border-bottom: 1px solid rgba(224,163,41,.35); }
.token-strip { transform: skewX(-3deg); box-shadow: 12px 14px 0 rgba(0,0,0,.16); }
.token-strip span { height: 112px; transform: skewX(3deg); align-items: end; font-size: .58rem; }
.prompt-card { position: relative; padding: 2rem 2.3rem; font-size: .77rem; background: linear-gradient(135deg,#2d3c31,#1c2720); box-shadow: 14px 16px 0 rgba(0,0,0,.17); }
.prompt-card::before { content: 'AGENT BRIEF / 01'; position: absolute; right: 1rem; top: .7rem; color: rgba(224,163,41,.65); font-size: .46rem; letter-spacing: .13em; }

@media (max-width: 1050px) {
  .site-header { min-height: 120px; grid-template-columns: 1fr auto; grid-template-rows: 70px 50px; }
  .site-header nav { display: flex; grid-column: 1 / -1; grid-row: 2; align-self: stretch; justify-self: stretch; justify-content: center; border-top: 1px solid rgba(227,224,202,.12); }
  .site-header nav a { flex: 1; padding: 0 .7rem; }
  .site-header .wordmark { grid-column: 1; grid-row: 1; }
  .site-header .power-switch, .site-header .guide-back { grid-column: 2; grid-row: 1; }
  .letterbox-top { top: 120px; }
  .hero { padding-top: 14rem; }
  .range-header { grid-template-columns: .7fr 1.4fr .7fr; }
  .scope-stage { min-height: 720px; }
  .guide-hero { padding-top: 12rem; }
}

@media (max-width: 700px) {
  .site-header { min-height: 118px; padding: 0 1rem; grid-template-rows: 68px 50px; }
  .site-header nav { margin: 0 -1rem; overflow: hidden; }
  .site-header nav a { min-height: 50px; font-size: .56rem; letter-spacing: .09em; }
  .site-header nav a::after { left: .5rem; right: .5rem; }
  .letterbox-top { top: 118px; }
  .hero { min-height: 820px; padding-top: 11.5rem; }
  .hero-copy { transform: none; }
  .hero h1 { font-size: clamp(5.45rem, 28.5vw, 8.4rem); }
  .hero-deck { width: 92%; }
  .hero-tape { bottom: .6rem; gap: .45rem; font-size: .42rem; }
  .hero-tape i { width: 12px; }
  .film-caption { display: none; }
  .hero-coordinates { top: 8rem; }
  .range-intro { padding-top: 5.5rem; }
  .range-header { text-align: left; }
  .range-header h2 { text-align: left; font-size: 4.45rem; }
  .range-header p { margin: 0; }
  .scope-stage { min-height: 520px; }
  .scope-id { top: .65rem; left: .65rem; font-size: .42rem; }
  .shot-ledger { top: .55rem; right: .55rem; }
  .shot-ledger span { min-width: 0; min-height: 34px; padding: .45rem .5rem; font-size: .4rem; }
  .shot-ledger span { grid-template-columns: 1fr; gap: .1rem; }
  .spotter-strip strong { font-size: 1.12rem; }
  .correction-card strong { font-size: 2.4rem; }
  .breath-prompt { margin-top: .5rem; }
  .send-button { min-height: 124px; }
  .book-heading p, .breath-copy p, .curriculum-head p, .intro-copy > p:first-child { font-size: .73rem; line-height: 1.85; }
  .dope-card { box-shadow: 8px 12px 0 rgba(32,39,33,.2), 0 24px 50px rgba(25,31,26,.18); }
  .observe { transform: none; }

  .guide-body .site-header .guide-back { font-size: .55rem; }
  .guide-hero { min-height: 610px; padding-top: 11rem; }
  .guide-hero h1 { font-size: 6.25rem; }
  .guide-hero p { font-size: .73rem; max-width: 41ch; }
  .guide-hero::after { width: 500px; right: -270px; top: 92px; box-shadow: inset 0 0 0 62px rgba(7,11,9,.38), inset 0 0 0 63px rgba(224,163,41,.24); }
  .guide-hero::before { bottom: 6.5rem; right: 1rem; font-size: .42rem; }
  .guide-calibration { left: 1rem; right: 1rem; bottom: 1rem; width: auto; }
  .guide-calibration span { font-size: .46rem; padding: .65rem .3rem; }
  .guide-calibration b { font-size: .4rem; }
  .guide-content { grid-template-columns: minmax(0, 1fr); padding-top: 4.5rem; }
  .guide-copy section::before { display: none; }
  .guide-copy h2 { font-size: 3.25rem; }
  .guide-copy h3 { font-size: 1.55rem; }
  .guide-copy p, .guide-copy li { font-size: .74rem; line-height: 1.9; }
  .token-strip { transform: none; }
  .token-strip span { transform: none; height: 58px; }
  .prompt-card { padding: 2rem 1.35rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .observe, .observe.in-view { opacity: 1; transform: none; animation: none; }
  .hero::after { display: none; }
}

/* Pass 3 — art direction */
html {
  scrollbar-color: var(--amber) #080c0a;
  scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #080c0a; }
html::-webkit-scrollbar-thumb { background: var(--amber); border: 3px solid #080c0a; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p { text-wrap: pretty; }
.hero h1, .range-intro h2, .range-header h2, .book-heading h2, .breath-copy h2, .curriculum-head h2, .closing h2, .guide-hero h1, .guide-copy h2 {
  font-kerning: normal;
  font-synthesis: none;
}
.hero-film { animation: cinema-open 1.15s cubic-bezier(.18,.76,.2,1) both; }
.wordmark, .hero-deck a, .cycle-button, footer a { transition: color .25s ease, opacity .25s ease; }
.wordmark:hover, .hero-deck a:hover, .cycle-button:hover, footer a:hover { color: var(--amber-hot); }
.hero-deck a:hover span { display: inline-block; transform: translate(.18rem,.18rem); }
.hero-deck a span { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.scope-stage, .scope-glass, .ring-debrief { transition: border-color .7s ease, box-shadow .8s ease, filter .8s ease; }

.impact-record { position: absolute; z-index: 10; inset: 0; pointer-events: none; }
.impact-record i {
  position: absolute;
  display: none;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(211,72,54,.9);
  border-radius: 50%;
  color: #fff0dc;
  filter: drop-shadow(0 0 7px rgba(211,72,54,.55));
  transform: translate(-50%,-50%);
  font-style: normal;
}
.impact-record i::before, .impact-record i::after { content: ''; position: absolute; left: 50%; top: -5px; width: 1px; height: 40px; background: rgba(211,72,54,.82); }
.impact-record i::before { transform: rotate(45deg); }
.impact-record i::after { transform: rotate(-45deg); }
.impact-record i b { position: absolute; left: 37px; top: -4px; color: #f0aea3; font: 600 .46rem/1 var(--mono); letter-spacing: .08em; }
.impact-record [data-impact="1"] { left: 62%; top: 43%; }
.impact-record [data-impact="2"] { left: 47%; top: 51%; }
.impact-record [data-impact="3"] { left: 56%; top: 54%; border-color: var(--amber-hot); box-shadow: 0 0 0 7px rgba(224,163,41,.12), 0 0 24px rgba(255,196,74,.54); filter: none; }
.impact-record [data-impact="3"]::before, .impact-record [data-impact="3"]::after { display: none; }
.impact-record [data-impact="3"] b { color: var(--amber-hot); }
.impact-record i.recorded { display: block; }

.wind-call.lesson-complete {
  background:
    radial-gradient(circle at 43% 36%, rgba(224,163,41,.13), transparent 28%),
    linear-gradient(180deg, #0d140f, #060a08 72%);
}
.lesson-complete .scope-stage { border-color: rgba(255,196,74,.56); box-shadow: inset 0 0 110px rgba(224,163,41,.08), 0 0 70px rgba(224,163,41,.08); }
.lesson-complete .scope-glass { filter: contrast(1.07) saturate(.9) sepia(.08); }
.ring-debrief {
  position: relative;
  max-width: 1500px;
  min-height: 190px;
  margin: 1.5rem auto 0;
  padding: 1.7rem 2rem;
  display: grid;
  grid-template-columns: .65fr 1.25fr 1.15fr 120px;
  gap: 2rem;
  align-items: center;
  overflow: hidden;
  color: var(--mist);
  border: 1px solid rgba(224,163,41,.5);
  background:
    linear-gradient(90deg, rgba(224,163,41,.04) 1px, transparent 1px) 0 0 / 42px 100%,
    linear-gradient(105deg, #172119, #0a0f0c 68%);
  box-shadow: 0 24px 70px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.04);
}
.ring-debrief[hidden] { display: none; }
.ring-debrief::before { content: 'AFTER ACTION / AFTER ACTION / AFTER ACTION'; position: absolute; right: -1rem; top: 1rem; color: rgba(224,163,41,.08); font: 400 4.6rem/.7 var(--display); letter-spacing: .04em; white-space: nowrap; }
.debrief-code { position: relative; display: grid; gap: .65rem; color: var(--amber); font-size: .55rem; letter-spacing: .13em; }
.debrief-code b { color: var(--ghost); font-weight: 400; }
.debrief-result { position: relative; display: flex; align-items: baseline; gap: clamp(.6rem,1.5vw,1.5rem); font: 400 clamp(2.6rem,4vw,4.7rem)/.8 var(--display); letter-spacing: -.025em; }
.debrief-result span { color: transparent; -webkit-text-stroke: 1px rgba(227,224,202,.5); text-decoration: line-through 2px var(--flag); }
.debrief-result strong { color: var(--amber-hot); font-weight: 400; }
.ring-debrief blockquote { position: relative; margin: 0; color: rgba(227,224,202,.86); font: 400 1.15rem/1.25 var(--display); letter-spacing: .02em; }
.ring-debrief cite { display: block; margin-top: .7rem; color: var(--amber); font: 500 .5rem/1.3 var(--mono); letter-spacing: .12em; }
.debrief-stamp { position: relative; justify-self: end; width: 106px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--flag); border-radius: 50%; color: #e87a69; font-size: .58rem; line-height: 1.5; text-align: center; letter-spacing: .1em; transform: rotate(-8deg); box-shadow: inset 0 0 0 4px #0f1712, inset 0 0 0 5px rgba(211,72,54,.55); }

.breath-lab { position: relative; isolation: isolate; }
.breath-lab::before { content: ''; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 11.95vw, rgba(227,224,202,.018) 12vw), linear-gradient(115deg, transparent 20%, rgba(224,163,41,.025) 51%, transparent 72%); }
.curriculum { position: relative; }
.curriculum::after { content: 'CLASS 17-B  /  OBSERVE · RECORD · CORRECT'; position: absolute; right: 2rem; bottom: 1.2rem; color: rgba(227,224,202,.28); font-size: .47rem; letter-spacing: .18em; }

.asset-workflow {
  margin: 2rem 0 2.8rem;
  min-height: 132px;
  display: grid;
  grid-template-columns: 1fr 46px 1fr 46px 1fr;
  align-items: center;
  padding: 1rem;
  border: 1px solid rgba(224,163,41,.32);
  background:
    linear-gradient(90deg, rgba(4,7,5,.16), rgba(4,7,5,.78)),
    url('/assets/gen/overwatch/hero.jpg') center 56% / cover no-repeat;
  box-shadow: inset 0 0 50px rgba(0,0,0,.72), 12px 14px 0 rgba(0,0,0,.16);
}
.asset-workflow span { min-height: 76px; padding: .8rem; display: grid; align-content: space-between; background: rgba(7,11,9,.78); color: var(--mist); font-size: .58rem; letter-spacing: .1em; }
.asset-workflow b { color: var(--amber); }
.asset-workflow small { color: rgba(227,224,202,.6); font-size: .46rem; }
.asset-workflow i { position: relative; height: 1px; background: var(--amber); }
.asset-workflow i::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--amber); border-right: 1px solid var(--amber); transform: rotate(45deg); }

@keyframes cinema-open { from { clip-path: inset(48% 0 48%); filter: brightness(.25); } to { clip-path: inset(0); filter: brightness(1); } }

@media (max-width: 1050px) {
  .ring-debrief { grid-template-columns: .6fr 1.4fr 1fr; }
  .debrief-stamp { display: none; }
}

@media (max-width: 700px) {
  .impact-record i { width: 24px; height: 24px; }
  .impact-record i::before, .impact-record i::after { top: -4px; height: 30px; }
  .impact-record i b { left: 28px; }
  .ring-debrief { min-height: 0; padding: 1.4rem 1rem; grid-template-columns: 1fr; gap: 1.35rem; }
  .ring-debrief::before { font-size: 3.2rem; top: 2rem; }
  .debrief-code { display: flex; justify-content: space-between; }
  .debrief-result { font-size: clamp(3rem, 15vw, 4.2rem); justify-content: space-between; }
  .ring-debrief blockquote { max-width: 27ch; font-size: 1.25rem; }
  .curriculum::after { display: none; }
  .asset-workflow { min-height: 0; grid-template-columns: 1fr; gap: .5rem; background-position: 28% 50%; }
  .asset-workflow i { width: 1px; height: 18px; margin-left: 1.4rem; }
  .asset-workflow i::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-film { animation: none; }
  .scope-stage, .scope-glass, .ring-debrief { transition: none; }
}