/* ODYSSEY DIVISION — shared design system */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0b1622;--navy2:#101e2e;--steel:#1b2c3e;--slate:#33495e;
  --gold:#e8a33d;--amber:#ffb84d;--bone:#e8e2d4;
  --hud:#6ee7b7;--alpine:#4fc3e8;--glacier:#38d9a9;
  --grey:#7d94a6;--line:rgba(232,163,61,.25);--line-blue:rgba(79,195,232,.25);
}
html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg,
    #0b1622 0%,#101e2e 14%,#14304a 28%,#1d5468 42%,
    #2a6b6b 54%,#1f5f7d 68%,#1a4a72 80%,#143a5e 90%,#0a1c30 100%);
  background-attachment:fixed;
  color:var(--bone);
  font-family:'Chivo',sans-serif;font-weight:300;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--navy)}

/* HUD frame */
.hud-corner{position:fixed;width:28px;height:28px;z-index:200;pointer-events:none;border-color:rgba(232,163,61,.5);border-style:solid}
.hud-tl{top:16px;left:16px;border-width:1px 0 0 1px}
.hud-tr{top:16px;right:16px;border-width:1px 1px 0 0}
.hud-bl{bottom:16px;left:16px;border-width:0 0 1px 1px}
.hud-br{bottom:16px;right:16px;border-width:0 1px 1px 0}
.hud-data{position:fixed;bottom:22px;left:60px;z-index:200;pointer-events:none;font-family:'Chivo Mono',monospace;font-size:9px;letter-spacing:.15em;color:rgba(232,163,61,.55);text-transform:uppercase}
.hud-data2{position:fixed;bottom:22px;right:60px;z-index:200;pointer-events:none;font-family:'Chivo Mono',monospace;font-size:9px;letter-spacing:.15em;color:rgba(232,163,61,.55)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:24px 52px;transition:all .5s ease}
nav.s{background:rgba(11,22,34,.88);backdrop-filter:blur(16px);padding:14px 52px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo-patch{width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Saira Stencil One',sans-serif;font-size:13px;color:var(--gold)}
.logo-text{font-family:'Saira Condensed',sans-serif;font-weight:600;font-size:17px;letter-spacing:.32em;text-transform:uppercase;color:var(--bone)}
.logo-text small{display:block;font-family:'Chivo Mono',monospace;font-weight:300;font-size:8px;letter-spacing:.3em;color:var(--gold);margin-top:1px}
.nav-links{display:flex;gap:34px;list-style:none;align-items:center}
.nav-links a{font-family:'Saira Condensed',sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(232,226,212,.6);text-decoration:none;font-weight:500;transition:color .25s;position:relative}
.nav-links a::before{content:'[';position:absolute;left:-10px;opacity:0;color:var(--gold);transition:all .25s}
.nav-links a::after{content:']';position:absolute;right:-10px;opacity:0;color:var(--gold);transition:all .25s}
.nav-links a:hover{color:var(--amber)}
.nav-links a:hover::before{opacity:1;left:-13px}
.nav-links a:hover::after{opacity:1;right:-13px}
.nav-links a.active{color:var(--amber)}
.nav-links a.active::before{opacity:1;left:-13px}
.nav-links a.active::after{opacity:1;right:-13px}

/* PAGE HEADER */
.page-head{padding:170px 52px 70px;max-width:1300px;margin:0 auto;position:relative}
.page-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'Chivo Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);border:1px solid var(--line);padding:8px 16px;margin-bottom:28px}
.page-eyebrow::before{content:'▸';color:var(--gold)}
.page-h1{font-family:'Saira Condensed',sans-serif;font-size:clamp(56px,8vw,110px);font-weight:700;line-height:.9;text-transform:uppercase;color:var(--bone)}
.page-h1 .stencil{font-family:'Saira Stencil One',sans-serif;font-weight:400;color:var(--gold)}
.page-sub{margin-top:24px;font-size:14px;line-height:1.9;color:rgba(232,226,212,.55);max-width:480px}

/* SECTION HEADS */
.sec-head{display:flex;align-items:baseline;gap:20px;max-width:1300px;margin:0 auto 56px;padding:0 52px}
.sec-no{font-family:'Chivo Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:.2em}
.sec-title{font-family:'Saira Condensed',sans-serif;font-size:clamp(34px,4vw,54px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--bone)}
.sec-rule{flex:1;height:1px;background:var(--line);position:relative;top:-8px}
.sec-link{font-family:'Chivo Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);text-decoration:none;white-space:nowrap;transition:letter-spacing .3s}
.sec-link:hover{letter-spacing:.3em}

/* BUTTONS */
.btn-tape{position:relative;font-family:'Saira Condensed',sans-serif;font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--navy);background:var(--gold);text-decoration:none;padding:16px 38px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background .3s,transform .2s;display:inline-block;border:none;cursor:pointer}
.btn-tape:hover{background:var(--amber);transform:translateX(4px)}
.btn-line{font-family:'Chivo Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,226,212,.5);text-decoration:none;transition:color .3s}
.btn-line:hover{color:var(--amber)}

/* FOOTER */
footer{border-top:1px solid rgba(232,163,61,.2);padding:56px 52px 90px;margin-top:80px}
.foot-inner{max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px}
.foot-brand{font-family:'Saira Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--bone)}
.foot-brand small{display:block;font-family:'Chivo Mono',monospace;font-size:9px;letter-spacing:.25em;color:var(--gold);margin-top:6px;font-weight:300}
.foot-links{display:flex;gap:30px;flex-wrap:wrap}
.foot-links a{font-family:'Chivo Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,226,212,.4);text-decoration:none;transition:color .3s}
.foot-links a:hover{color:var(--amber)}
.foot-bottom{max-width:1300px;margin:36px auto 0;display:flex;justify-content:space-between;font-family:'Chivo Mono',monospace;font-size:9px;letter-spacing:.15em;color:rgba(232,226,212,.25);text-transform:uppercase}

/* ANIMATIONS */
@keyframes up{to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}

/* IMG GRADE */
.grade{filter:saturate(.8) contrast(1.08) sepia(.12) brightness(.9)}

@media(max-width:900px){
  nav{padding:18px 24px}
  .page-head{padding:140px 24px 50px}
  .sec-head{padding:0 24px}
  .nav-links{gap:18px}
  .nav-links li:nth-child(n+4){display:none}
}
