:root {
  --basalt: #101512; --moss: #202B23; --ash: #303832;
  --chalk: #DDD8C5; --fern-dry: #B8B18E; --amber: #E0A33B;
  --teal: #3E8581; --fern: #657A4E; --lava: #A8523F;
  --mist: #718A96; --earth: #3A3028;
  --tl1: #F1F2E8; --tl2: #C6CEC3; --td1: #171D19;
  --tmut: #8D988F; --bdark: #455149; --blight: #9C967A;
  --f-disp: 'Archivo Black', sans-serif;
  --f-body: 'Inter', sans-serif;
  --f-mono: 'Space Mono', monospace;
}
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--f-body); background: var(--basalt); color: var(--tl1); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-wrap { position: relative; overflow: hidden; }

.top-disclaimer { background: var(--basalt); color: var(--tl2); text-align: center; font-family: var(--f-mono); font-size: 0.7rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--bdark); text-transform: uppercase; letter-spacing: 1px; }

.signal-strip { background: var(--amber); color: var(--td1); font-family: var(--f-mono); font-size: 0.75rem; display: flex; justify-content: space-between; padding: 0 2rem; height: 34px; align-items: center; text-transform: uppercase; }
.spine-header { display: flex; width: 100%; max-width: 1480px; margin: 0 auto; height: 90px; font-family: var(--f-mono); text-transform: uppercase; font-size: 0.85rem; }
.spine-header > div { height: 100%; display: flex; flex-direction: column; padding: 1rem; transition: background 0.3s; }
.mod-1 { width: 29%; background: var(--basalt); justify-content: space-between; }
.mod-1 .mod-title { font-family: var(--f-disp); font-size: 1.2rem; }
.mod-1 .mod-sub { color: var(--tmut); font-size: 0.7rem; }
.mod-2 { width: 11%; background: var(--teal); justify-content: flex-start; }
.mod-3 { width: 14%; background: var(--chalk); color: var(--td1); justify-content: center; }
.mod-4 { width: 19%; background: var(--lava); justify-content: flex-end; }
.mod-5 { width: 12%; background: var(--fern); justify-content: flex-start; }
.mod-6 { width: 15%; background: var(--amber); color: var(--td1); justify-content: center; align-items: center; font-weight: bold; }
.mod-6 a { display: block; width: 100%; text-align: center; }
.menu-trigger { display: none; background: transparent; border: none; color: var(--tl1); font-family: var(--f-mono); cursor: pointer; text-transform: uppercase; }

.hero-sec { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(9, auto); min-height: 800px; padding: 2rem 0; }
.zone-a { grid-column: 1 / 8; grid-row: 1 / 6; background: var(--moss); padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.zone-a .lbl { font-family: var(--f-mono); color: var(--amber); margin-bottom: 2rem; }
.zone-a h1 { font-family: var(--f-disp); font-size: clamp(3rem, 5vw, 5rem); line-height: 0.95; text-transform: uppercase; margin-bottom: 2rem; }
.zone-a p { color: var(--tl2); max-width: 85%; font-size: 1.1rem; }
.zone-b { grid-column: 8 / 17; grid-row: 1 / 8; background: var(--ash); }
.zone-c { grid-column: 1 / 6; grid-row: 6 / 10; background: var(--chalk); color: var(--td1); padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.zone-c h2 { font-family: var(--f-disp); font-size: 2.2rem; text-transform: uppercase; line-height: 1; }
.zone-c p { font-size: 1rem; margin-bottom: 2rem; }
.btn-enter { display: inline-block; padding: 1rem 2rem; border: 2px solid var(--bdark); color: var(--td1); font-family: var(--f-mono); text-transform: uppercase; font-weight: bold; transition: background 0.3s; text-align: center; }
.btn-enter:hover { background: var(--td1); color: var(--chalk); }
.zone-d { grid-column: 6 / 8; grid-row: 6 / 10; background: var(--lava); padding: 2rem 1rem; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.zone-d .lg { font-family: var(--f-disp); font-size: 4rem; line-height: 1; }
.zone-d .sm { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 2px; }
.zone-e { grid-column: 8 / 17; grid-row: 8 / 10; background: var(--teal); padding: 0 4rem; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 0.85rem; text-transform: uppercase; }

.geo-sec { max-width: 1480px; margin: 2rem auto; display: flex; flex-direction: column; font-family: var(--f-mono); text-transform: uppercase; font-size: 0.85rem; padding-bottom: 4rem; }
.geo-layer { display: flex; align-items: center; padding: 0 3rem; justify-content: space-between; }
.layer-1 { width: 100%; height: 64px; background: var(--earth); justify-content: flex-start; }
.layer-2 { width: 92%; height: 92px; background: var(--fern); justify-content: flex-end; text-align: right; margin-left: 8%; }
.layer-3 { width: 84%; height: 72px; background: var(--chalk); color: var(--td1); justify-content: flex-start; }
.layer-4 { width: 76%; height: 108px; background: var(--teal); justify-content: flex-end; text-align: right; margin-left: 24%; }
.layer-5 { width: 68%; height: 78px; background: var(--lava); justify-content: flex-start; }
.layer-6 { width: 58%; height: 116px; background: var(--basalt); border: 1px solid var(--bdark); justify-content: center; text-align: center; margin-left: 21%; flex-direction: column; gap: 0.5rem; }
.geo-layer h3 { font-family: var(--f-disp); font-size: 1.3rem; letter-spacing: 1px; }
.geo-layer p { font-family: var(--f-body); text-transform: none; font-size: 0.9rem; opacity: 0.9; max-width: 400px; }

.arena-sec { max-width: 1480px; margin: 4rem auto; display: grid; grid-template-columns: repeat(14, 1fr); gap: 0; }
.rail-left { grid-column: 1 / 3; background: var(--fern); padding: 2rem; font-family: var(--f-mono); text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; gap: 3rem; letter-spacing: 2px; }
.arena-center { grid-column: 3 / 14; background: var(--ash); padding: 16px; display: flex; flex-direction: column; }
.arena-status { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 0.8rem; color: var(--tmut); text-transform: uppercase; padding-bottom: 16px; }
.iframe-wrap { width: 100%; aspect-ratio: 16/9; background: #000; border: 1px solid var(--bdark); }
.iframe-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.arena-controls { grid-column: 3 / 14; background: var(--chalk); color: var(--td1); padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 0.85rem; text-transform: uppercase; }
.arena-controls button, .arena-controls a { background: transparent; border: 1px solid var(--td1); padding: 0.8rem 1.5rem; cursor: pointer; font-family: inherit; color: inherit; text-transform: uppercase; transition: 0.3s; font-weight: bold; }
.arena-controls button:hover, .arena-controls a:hover { background: var(--td1); color: var(--chalk); }
.ctrl-center { display: flex; gap: 1rem; }
.signal-edge { grid-column: 14 / 15; background: var(--amber); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 2rem 0; }
.signal-mark { width: 20px; height: 4px; background: var(--td1); }
.base-strata { grid-column: 1 / 15; display: flex; height: 16px; }
.strata-1 { width: 44%; background: var(--teal); }
.strata-2 { width: 31%; background: var(--lava); }
.strata-3 { width: 25%; background: var(--earth); }

.mig-sec { max-width: 1480px; margin: 4rem auto; background: var(--basalt); display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(8, minmax(80px, auto)); gap: 0; min-height: 640px; }
.win-a { grid-column: 1 / 7; grid-row: 1 / 6; }
.win-b { grid-column: 7 / 9; grid-row: 1 / 4; background: var(--amber); color: var(--td1); padding: 2rem; font-family: var(--f-mono); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-between; }
.win-b .lg { font-size: 3.5rem; font-family: var(--f-disp); line-height: 1; }
.win-c { grid-column: 9 / 17; grid-row: 1 / 4; background: var(--chalk); color: var(--td1); padding: 3rem; display: flex; align-items: center; }
.win-c h2 { font-family: var(--f-disp); font-size: clamp(2rem, 4vw, 3.5rem); text-transform: uppercase; line-height: 1.1; }
.win-d { grid-column: 7 / 11; grid-row: 4 / 6; background: var(--teal); padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.win-d h3 { font-family: var(--f-mono); margin-bottom: 0.5rem; text-transform: uppercase; }
.win-e { grid-column: 12 / 17; grid-row: 4 / 9; }
.win-f { grid-column: 1 / 6; grid-row: 6 / 9; background: var(--fern); padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.win-f h3 { font-family: var(--f-mono); margin-bottom: 0.5rem; text-transform: uppercase; }
.win-g { grid-column: 6 / 12; grid-row: 6 / 9; background: var(--lava); padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.win-g h3 { font-family: var(--f-mono); text-transform: uppercase; }

.protocol-sec { max-width: 1480px; margin: 6rem auto; position: relative; padding: 6rem 3rem; background: var(--chalk); color: var(--td1); overflow: hidden; }
.proto-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 900px; border: 2px solid rgba(62,133,129,0.28); border-radius: 50%; pointer-events: none; }
.proto-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem; position: relative; z-index: 2; }
.p-stat { font-family: var(--f-mono); font-size: 0.85rem; text-transform: uppercase; padding: 1.5rem; border-top: 2px solid var(--blight); }
.p-stat span { display: block; color: var(--lava); font-family: var(--f-disp); font-size: 2rem; margin-bottom: 1rem; }
.p1 { grid-column: 1 / 5; } .p2 { grid-column: 5 / 9; } .p3 { grid-column: 9 / 13; }
.p4 { grid-column: 2 / 6; margin-top: 4rem; } .p5 { grid-column: 6 / 10; margin-top: 4rem; } .p6 { grid-column: 10 / 13; margin-top: 4rem; }

.station-sec { max-width: 1480px; margin: 4rem auto; display: grid; grid-template-columns: repeat(15, 1fr); gap: 0; }
.st-zone-1 { grid-column: 1 / 6; background: var(--lava); padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.st-zone-1 h2 { font-family: var(--f-disp); font-size: 3rem; line-height: 1; text-transform: uppercase; margin-bottom: 1.5rem; }
.st-zone-1 .sm { font-family: var(--f-mono); font-size: 0.9rem; }
.st-zone-2 { grid-column: 6 / 8; background: var(--amber); color: var(--td1); font-family: var(--f-mono); display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: bold; letter-spacing: 2px; }
.st-zone-3 { grid-column: 8 / 16; background: var(--moss); padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.st-zone-3 .lbl { font-family: var(--f-mono); font-size: 0.85rem; color: var(--amber); margin-bottom: 1rem; text-transform: uppercase; }
.st-zone-3 .email { font-size: clamp(1.5rem, 3vw, 2.5rem); font-family: var(--f-disp); margin-bottom: 1.5rem; }
.st-zone-4 { grid-column: 1 / 11; background: var(--chalk); color: var(--td1); padding: 4rem 3rem; }
.st-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.st-form .full { grid-column: 1 / 3; }
.st-form input, .st-form textarea { width: 100%; padding: 1.2rem; background: transparent; border: 1px solid var(--bdark); font-family: var(--f-body); color: var(--td1); font-size: 1rem; }
.st-form textarea { resize: vertical; min-height: 120px; }
.st-form button { grid-column: 1 / 3; justify-self: start; padding: 1.2rem 2.5rem; background: var(--td1); color: var(--chalk); border: none; font-family: var(--f-mono); text-transform: uppercase; font-weight: bold; cursor: pointer; transition: 0.3s; }
.st-form button:hover { background: var(--amber); color: var(--td1); }
.st-zone-5 { grid-column: 11 / 16; background: var(--teal); padding: 4rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
.st-zone-5 a { font-family: var(--f-mono); font-size: 0.95rem; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 0.8rem; display: block; transition: 0.3s; }
.st-zone-5 a:hover { color: var(--amber); border-color: var(--amber); }

.edge-footer { max-width: 1480px; margin: 6rem auto 0; font-family: var(--f-mono); font-size: 0.85rem; text-transform: uppercase; }
.lm { padding: 4rem 3rem; display: flex; flex-wrap: wrap; gap: 2rem; }
.lm h4 { font-family: var(--f-disp); font-size: 1.5rem; margin-bottom: 1.5rem; width: 100%; }
.lm a { display: block; margin-bottom: 0.8rem; transition: color 0.3s; opacity: 0.9; }
.lm a:hover { color: var(--amber); opacity: 1; }
.lm-a { width: 54%; background: var(--moss); }
.lm-b { width: 68%; margin-left: 32%; background: var(--chalk); color: var(--td1); }
.lm-b .link-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.lm-b a { width: calc(50% - 1rem); }
.lm-c { width: 47%; background: var(--teal); }
.lm-d { width: 61%; margin-left: 39%; background: var(--lava); }
.legal-base { width: 100%; background: var(--basalt); padding: 2rem 3rem; display: flex; justify-content: space-between; border-top: 1px solid var(--amber); font-size: 0.75rem; color: var(--tmut); }

.dossier-page { background: var(--ash); display: flex; flex-direction: column; min-height: 100vh; }
.dossier-masthead { background: var(--basalt); padding: 1.5rem 2rem; display: flex; justify-content: space-between; font-family: var(--f-mono); border-bottom: 1px solid var(--bdark); font-size: 0.85rem; text-transform: uppercase; align-items: center; }
.dossier-main { max-width: 1200px; margin: 4rem auto; padding: 0 2rem; flex: 1; width: 100%; }
.dossier-title { font-family: var(--f-disp); font-size: clamp(2.5rem, 4vw, 4rem); text-transform: uppercase; margin-bottom: 3rem; color: var(--chalk); border-bottom: 4px solid var(--amber); padding-bottom: 1rem; }
.dossier-wrapper { display: grid; grid-template-columns: 1fr 320px; gap: 4rem; }
.main-reading { background: var(--chalk); color: var(--td1); padding: 4rem; font-size: 1.1rem; line-height: 1.8; }
.main-reading h2 { font-family: var(--f-disp); font-size: 2rem; margin: 2.5rem 0 1rem; text-transform: uppercase; border-bottom: 1px solid var(--blight); padding-bottom: 0.5rem; }
.main-reading h2:first-child { margin-top: 0; }
.main-reading p, .main-reading ul { margin-bottom: 1.5rem; }
.main-reading ul { padding-left: 2rem; }
.fact-rail { display: flex; flex-direction: column; gap: 2rem; font-family: var(--f-mono); font-size: 0.85rem; text-transform: uppercase; }
.note-block { background: var(--lava); padding: 2rem; color: var(--tl1); }
.field-instruction { background: var(--teal); padding: 2rem; color: var(--tl1); }
.btn-return { display: inline-block; margin-top: 4rem; padding: 1.2rem 2.5rem; background: var(--moss); border: 1px solid var(--amber); color: var(--amber); font-family: var(--f-mono); text-transform: uppercase; text-align: center; transition: 0.3s; font-weight: bold; }
.btn-return:hover { background: var(--amber); color: var(--basalt); }

.cookie-specimen { position: fixed; bottom: 2rem; right: 2rem; width: 100%; max-width: 365px; background: var(--chalk); color: var(--td1); z-index: 9999; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5); font-family: var(--f-body); }
.cookie-serial { background: var(--lava); color: var(--tl1); font-family: var(--f-mono); font-size: 0.75rem; padding: 0.5rem 1rem; text-transform: uppercase; }
.cookie-specimen .inner { padding: 1.5rem; border-bottom: 4px solid var(--teal); position: relative; }
.cookie-punch { position: absolute; top: 1.5rem; right: 1.5rem; width: 14px; height: 14px; background: var(--basalt); border-radius: 50%; }
.cookie-title { font-family: var(--f-disp); font-size: 1.3rem; margin-bottom: 0.5rem; text-transform: uppercase; }
.cookie-specimen p { font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--td1); opacity: 0.8; }
.cookie-actions { display: flex; gap: 0.5rem; }
.cookie-actions button { flex: 1; padding: 0.8rem; font-family: var(--f-mono); text-transform: uppercase; font-size: 0.8rem; font-weight: bold; cursor: pointer; border: 1px solid var(--td1); background: transparent; transition: 0.3s; }
.cookie-actions button:hover { background: var(--td1); color: var(--chalk); }

.msg-status { padding: 1rem; margin-bottom: 1rem; font-family: var(--f-mono); text-transform: uppercase; font-size: 0.85rem; display: none; }
.msg-success { background: var(--teal); color: var(--tl1); }
.msg-error { background: var(--lava); color: var(--tl1); }

@media (max-width: 1024px) {
  .spine-header { height: auto; flex-wrap: wrap; }
  .spine-header > div { width: 33.33%; min-height: 90px; }
  .hero-sec { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: auto; }
  .zone-a, .zone-b, .zone-c, .zone-d, .zone-e { grid-column: span 1; grid-row: auto; }
  .zone-a { grid-column: 1 / 3; } .zone-b { grid-column: 1 / 3; height: 500px; }
  .zone-c { grid-column: 1 / 2; } .zone-d { grid-column: 2 / 3; } .zone-e { grid-column: 1 / 3; }
  .geo-layer { width: 100% !important; margin: 0 !important; margin-bottom: 1rem !important; }
  .mig-sec { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: auto; }
  .win-a, .win-c, .win-e { grid-column: 1 / 3; height: 400px; }
  .win-b, .win-d, .win-f, .win-g { grid-column: 1 / 3; grid-row: auto; }
  .p1, .p2, .p3, .p4, .p5, .p6 { grid-column: span 6; margin-top: 2rem; }
  .station-sec { grid-template-columns: 1fr 1fr; }
  .st-zone-1, .st-zone-3, .st-zone-4, .st-zone-5 { grid-column: 1 / 3; }
  .st-zone-2 { display: none; }
  .dossier-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .spine-header > div { width: 100%; display: none; }
  .spine-header .mod-1 { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
  .menu-trigger { display: block; background: var(--amber); color: var(--td1); padding: 0.5rem 1rem; font-weight: bold; }
  .spine-header.open > div { display: flex; }
  .zone-c, .zone-d { grid-column: 1 / 3; }
  .arena-sec { display: flex; flex-direction: column; }
  .rail-left, .signal-edge { display: none; }
  .ctrl-center { flex-direction: column; width: 100%; }
  .proto-ring { display: none; }
  .p1, .p2, .p3, .p4, .p5, .p6 { grid-column: 1 / 13; text-align: left !important; }
  .st-form { grid-template-columns: 1fr; }
  .st-form .full { grid-column: 1 / 2; }
  .st-form button { grid-column: 1 / 2; }
  .lm { width: 100% !important; margin-left: 0 !important; }
  .legal-base { flex-direction: column; gap: 1rem; text-align: center; }
  .cookie-specimen { bottom: 0; right: 0; left: 0; max-width: 100%; }
  .main-reading { padding: 2rem; }
  .dossier-title { font-size: 2rem; }
}