@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --black: #07090b;
  --panel: #111419;
  --steel: #252a2f;
  --ink: #f1ece2;
  --muted: #a49d91;
  --orange: #e7892e;
  --orange-bright: #ffac45;
  --line: rgba(255, 255, 255, 0.16);
  font-family: 'Barlow Condensed', Impact, sans-serif;
  color: var(--ink);
  background: var(--black);
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html { scroll-snap-type: y proximity; background: var(--black); }
body { margin: 0; background: var(--black); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

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

.topbar {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 78px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 4.5vw;
  background: linear-gradient(180deg, rgba(5,7,9,.92), rgba(5,7,9,.25), transparent);
  letter-spacing: .08em;
}
.brand { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; }
.brand strong { color: var(--orange-bright); font-weight: 800; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; color: var(--black); font-weight: 800;
  background: var(--orange); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
nav { display: flex; gap: 34px; font: 600 13px 'IBM Plex Mono', monospace; }
nav a { color: #c6c1b8; transition: color .2s; }
nav a:hover, nav a:focus-visible { color: var(--orange-bright); }
.sound-toggle { display: flex; align-items: end; justify-content: center; gap: 3px; width: 38px; height: 38px; padding: 11px; border: 1px solid var(--line); background: rgba(0,0,0,.2); color: var(--ink); cursor: pointer; }
.sound-toggle span { display: block; width: 3px; height: 9px; background: currentColor; }
.sound-toggle span:nth-child(2) { height: 15px; }.sound-toggle span:nth-child(3) { height: 6px; }

.scene { position: relative; min-height: 100svh; scroll-snap-align: start; overflow: hidden; isolation: isolate; }
.scene-index { position: absolute; top: 96px; right: 4.5vw; z-index: 3; font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .16em; color: rgba(255,255,255,.5); }
.hero { display: flex; align-items: center; background: url('assets/hero-bg.png') center center / cover no-repeat; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,5,7,.94) 0%, rgba(3,5,7,.72) 30%, rgba(3,5,7,.08) 65%), linear-gradient(0deg, rgba(3,5,7,.8), transparent 35%); }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 65% 42%, transparent 0 26%, rgba(0,0,0,.18) 70%); }
.hero-content { width: min(700px, 86vw); margin-left: 8vw; padding-top: 46px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: #d4cdc0; font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .12em; }
.eyebrow span { color: var(--orange-bright); }.eyebrow i { width: 34px; height: 1px; background: #777169; }
h1,h2 { margin: 0; font-weight: 800; line-height: .82; letter-spacing: -.035em; text-transform: uppercase; }
h1 { font-size: clamp(72px, 10vw, 154px); text-shadow: 0 10px 28px rgba(0,0,0,.25); }
h1 em,h2 em { color: var(--orange); font-style: italic; }
.intro { max-width: 480px; margin: 32px 0; color: #d1cbc1; font-size: clamp(18px,2vw,24px); line-height: 1.35; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-button {
  position: relative; min-width: 190px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 17px 19px; font: 700 14px 'IBM Plex Mono', monospace; letter-spacing: .05em;
  border: 1px solid rgba(255,255,255,.18); clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition: transform .2s, filter .2s, background .2s;
}
.cs-button::before { content:''; position:absolute; top:0; left:20px; width:36px; height:2px; background:rgba(255,255,255,.55); }
.cs-button:hover,.cs-button:focus-visible { transform: translateY(-3px); filter: brightness(1.12); }
.cs-button-primary { color: #17120d; background: linear-gradient(145deg,#f3a34d,#cf6b19); box-shadow: 0 12px 38px rgba(205,106,25,.25); }
.cs-button-dark { background: linear-gradient(145deg,#272b30,#111418); }
.scroll-cue { position:absolute; z-index:3; bottom:30px; left:8vw; display:flex; align-items:center; gap:18px; color:#aaa49a; font:500 11px 'IBM Plex Mono',monospace; letter-spacing:.12em; }
.scroll-cue b { display:grid; place-items:center; width:32px;height:32px;border:1px solid var(--line); color:var(--orange); }
.status-card { position:absolute; right:4.5vw; bottom:30px; z-index:3; display:grid; grid-template-columns:auto repeat(3,auto); align-items:center; gap:22px; padding:14px 18px; border:1px solid var(--line); background:rgba(9,11,13,.68); backdrop-filter:blur(10px); }
.status-card div { padding-right:18px; border-right:1px solid var(--line); }.status-card div:last-child{border:0;padding:0}
.status-card small,.status-card strong{display:block}.status-card small{color:#8f8a82;font:500 9px 'IBM Plex Mono',monospace;letter-spacing:.1em}.status-card strong{font-size:15px;letter-spacing:.05em}
.status-pip { width:8px;height:8px;background:var(--orange);box-shadow:0 0 12px var(--orange);border-radius:50%; }
.crosshair { position:absolute; z-index:2; width:38px;height:38px; opacity:.5; }
.crosshair::before,.crosshair::after{content:'';position:absolute;background:#fff}.crosshair::before{width:100%;height:1px;top:50%}.crosshair::after{height:100%;width:1px;left:50%}.crosshair-a{top:31%;left:58%}

.lore { background: url('assets/lore-bg.png') center center / cover no-repeat; display:flex; align-items:center; justify-content:flex-end; }
.lore::after { content:''; position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,6,8,.08) 0%,rgba(4,6,8,.35) 42%,rgba(4,6,8,.95) 78%),linear-gradient(0deg,rgba(4,6,8,.75),transparent 45%); }
.lore-panel { width:min(540px,47vw); margin-right:6vw; padding:80px 0 48px; }
.lore h2 { font-size:clamp(58px,7vw,108px); }
.briefing h2 { font-size:clamp(64px,8vw,122px); }
.lore .lead { margin:32px 0 18px;color:var(--ink);font-size:clamp(21px,2.2vw,28px);line-height:1.28; }
.lore-panel>p:not(.eyebrow):not(.lead) { color:#b9b3a8;font-size:18px;line-height:1.55;max-width:520px; }
.quote { margin-top:30px;padding:18px 20px;border-left:3px solid var(--orange);background:rgba(8,10,12,.6);color:#ddd5c9;font:600 15px/1.5 'IBM Plex Mono',monospace;overflow-wrap:anywhere; }
.quote span{color:var(--orange);font-size:28px;margin-right:6px}
.map-stamp {position:absolute;left:5vw;bottom:6vh;display:flex;flex-direction:column;border-left:2px solid var(--orange);padding-left:14px;text-shadow:0 2px 14px #000}.map-stamp span,.map-stamp small{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#aaa}.map-stamp strong{font-size:38px;letter-spacing:.06em}

.briefing { display:flex;align-items:center;background:radial-gradient(circle at 75% 40%,#24201a 0,transparent 30%),linear-gradient(130deg,#171a1d,#080a0c 72%); }
.briefing::before { content:'';position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent,#000); }
.briefing-grid { width:min(1380px,86vw);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;align-items:center; }
.briefing-copy>p:last-child { max-width:400px;color:#aaa49a;font-size:20px;line-height:1.45; }
.terminal { background:rgba(10,12,14,.82);border:1px solid #363b40;box-shadow:0 24px 80px rgba(0,0,0,.48);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.terminal-head,.terminal-foot { display:flex;justify-content:space-between;gap:15px;padding:15px 18px;background:#20242a;color:#c9c4ba;font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.11em; }
.terminal-head b{color:var(--orange);font-weight:600}
.terminal-row { width:100%;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:16px;padding:22px 20px;border:0;border-bottom:1px solid #292d32;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background .18s,padding-left .18s; }
.terminal-row:hover,.terminal-row:focus-visible { background:linear-gradient(90deg,rgba(231,137,46,.16),transparent);padding-left:25px;outline:none; }
.key{display:grid;place-items:center;width:42px;height:42px;border:1px solid #484d53;color:var(--orange);font:600 13px 'IBM Plex Mono',monospace}.terminal-row small,.terminal-row strong{display:block}.terminal-row small{color:#777d83;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.1em;margin-bottom:4px}.terminal-row strong{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:21px;letter-spacing:.04em}.terminal-row>b{color:#aaa;font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.1em}.terminal-foot{background:#0d0f12;color:#656a70}.terminal-foot i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#d88232;margin-right:7px;box-shadow:0 0 8px #d88232}
footer {position:absolute;left:4.5vw;right:4.5vw;bottom:24px;display:flex;justify-content:space-between;color:#666b70;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.1em}
.rail{position:fixed;z-index:40;right:20px;top:50%;transform:translateY(-50%);display:grid;gap:12px}.rail a{position:relative;width:32px;height:24px;color:#74777b;font:500 9px 'IBM Plex Mono',monospace}.rail a::after{content:'';position:absolute;right:0;top:50%;width:8px;height:1px;background:#74777b;transition:width .2s,background .2s}.rail a.active{color:var(--orange)}.rail a.active::after{width:18px;background:var(--orange)}
.toast {position:fixed;z-index:80;left:50%;bottom:28px;transform:translate(-50%,20px);padding:12px 18px;background:var(--orange);color:#130f0a;font:700 12px 'IBM Plex Mono',monospace;letter-spacing:.12em;opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width: 820px){
  html{scroll-snap-type:none}.topbar{height:64px;padding:0 20px}.brand{font-size:16px}.brand-mark{width:30px;height:30px}nav{display:none}.scene-index{top:78px;right:22px}.hero{background-position:64% center;align-items:flex-end}.hero::after{background:linear-gradient(0deg,rgba(3,5,7,.98) 8%,rgba(3,5,7,.6) 55%,rgba(3,5,7,.08)),linear-gradient(90deg,rgba(3,5,7,.45),transparent)}.hero-content{margin:0 22px 150px;padding:0;width:auto}.eyebrow{font-size:10px;margin-bottom:16px}.intro{margin:20px 0;font-size:18px}.actions{gap:8px}.cs-button{min-width:0;flex:1;padding:14px 13px;font-size:11px;gap:10px}.status-card{display:none}.scroll-cue{left:22px;bottom:28px}.crosshair{display:none}.lore{align-items:flex-end;background-position:38% center}.lore::after{background:linear-gradient(0deg,rgba(4,6,8,.98) 7%,rgba(4,6,8,.72) 62%,rgba(4,6,8,.05))}.lore-panel{width:auto;margin:0 22px;padding:100px 0 60px}.lore h2{font-size:clamp(54px,17vw,76px)}.lore .lead{margin:22px 0 14px;font-size:20px}.lore-panel>p:not(.eyebrow):not(.lead){font-size:16px}.quote{font-size:13px;margin-top:20px}.map-stamp{display:none}.briefing{align-items:flex-start;padding:96px 0 86px;min-height:auto}.briefing-grid{grid-template-columns:1fr;gap:34px;width:auto;margin:0 22px}.briefing h2{font-size:72px}.briefing-copy>p:last-child{font-size:17px}.terminal-row{grid-template-columns:42px 1fr auto;gap:10px;padding:17px 12px}.key{width:36px;height:36px}.terminal-row strong{font-size:17px;max-width:42vw}.terminal-head,.terminal-foot{padding:12px;font-size:8px}footer{bottom:20px;left:22px;right:22px}footer span:last-child{display:none}.rail{display:none}
}

@media (prefers-reduced-motion: reduce){:root{scroll-behavior:auto}.cs-button,.terminal-row,.toast{transition:none}}