:root{
  --void:#080a14;
  --void-2:#10142a;
  --panel:#12162c;
  --panel-border:#262c4e;
  --blue:#5b7fe8;
  --blue-soft:#33406e;
  --blue-dim:#1c223f;
  --red:#e0473f;
  --red-soft:#5c2a26;
  --text:#e6e9f5;
  --muted:#8790b3;
  --white:#ffffff;
  --font-display:'Big Shoulders Display', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(72px + env(safe-area-inset-top,0px)); height:100%;}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100%;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

a{color:inherit;}
img,svg{max-width:100%;display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
section{position:relative;}

/* ---------- Starfield backdrop ---------- */
.stars{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-color:var(--void);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(230,233,245,0.9), transparent),
    radial-gradient(1.5px 1.5px at 78% 8%, rgba(230,233,245,0.7), transparent),
    radial-gradient(1px 1px at 42% 65%, rgba(230,233,245,0.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 42%, rgba(230,233,245,0.8), transparent),
    radial-gradient(1px 1px at 25% 82%, rgba(230,233,245,0.5), transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, rgba(230,233,245,0.7), transparent),
    radial-gradient(1px 1px at 95% 75%, rgba(230,233,245,0.5), transparent),
    radial-gradient(1.5px 1.5px at 6% 55%, rgba(230,233,245,0.6), transparent),
    radial-gradient(1px 1px at 35% 12%, rgba(230,233,245,0.4), transparent),
    radial-gradient(1.5px 1.5px at 70% 90%, rgba(230,233,245,0.6), transparent);
  background-repeat:repeat;
  background-size:600px 600px;
}
.nebula{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 500px at 15% 0%, rgba(91,127,232,0.20), transparent 60%),
    radial-gradient(600px 460px at 100% 30%, rgba(224,71,63,0.14), transparent 60%),
    radial-gradient(800px 600px at 50% 100%, rgba(91,127,232,0.10), transparent 60%);
}

/* ---------- Nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(8,10,20,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--panel-border);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1120px; margin:0 auto; padding:16px 28px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:0.02em; text-decoration:none;}
.brand-mark{width:26px; height:26px; flex-shrink:0; border-radius:50%; object-fit:cover;}
.navlinks{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0;}
.navlinks a{
  text-decoration:none; color:var(--muted); font-size:14.5px; font-weight:500;
  transition:color .15s ease;
}
.navlinks a:hover, .navlinks a:focus-visible{color:var(--text);}
.join-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:var(--white); text-decoration:none;
  padding:9px 18px; border-radius:3px; font-weight:600; font-size:14px;
  border:1px solid var(--blue);
  transition:background .15s ease, transform .15s ease;
  white-space:nowrap;
}
.join-btn:hover{background:#4a6bd1;}
.join-btn:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.menu-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  padding:96px 0 60px;
  position:relative;
}
.hero-inner{
  max-width:760px;
}
.eyebrow{
  font-family:var(--font-mono); font-size:13px; color:var(--blue);
  letter-spacing:0.03em; margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:#3ecf6b; box-shadow:0 0 8px #3ecf6b; flex-shrink:0;}
h1.title{
  font-family:'Orbitron', var(--font-display), sans-serif; font-weight:800;
  font-size:clamp(48px, 9.5vw, 100px);
  line-height:1; margin:0 0 22px; letter-spacing:0.03em;
  color:var(--white);
}
h1.title span{color:var(--blue);}
.hero p.lead{
  font-size:18px; color:var(--muted); max-width:520px; margin:0 0 34px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:3px; text-decoration:none;
  border:1px solid var(--panel-border); color:var(--text); font-weight:600; font-size:14.5px;
  transition:border-color .15s ease, background .15s ease;
}
.btn-ghost:hover{border-color:var(--blue); background:var(--blue-dim);}
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:3px; text-decoration:none;
  background:var(--blue); color:var(--white); font-weight:700; font-size:14.5px;
  border:1px solid var(--blue);
  transition:background .15s ease;
}
.btn-primary:hover{background:#4a6bd1;}

.hull-diagram{
  margin-top:64px; opacity:0.9;
}

/* ---------- Section headers ---------- */
.section-head{max-width:560px; margin:0 0 44px;}
.section-tag{font-family:var(--font-mono); font-size:12.5px; color:var(--red); margin:0 0 10px;}
.section-head h2{
  font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4.5vw,48px);
  margin:0 0 14px; color:var(--white); line-height:1.02;
}
.section-head p{color:var(--muted); font-size:16px; margin:0; max-width:480px;}
.section-head[style*="text-align:center"] p{margin-left:auto; margin-right:auto;}  /* centered heads: keep the tag line centered too */

section.band{padding:88px 0;}
section.band + section.band{border-top:1px solid var(--panel-border);}

/* ---------- About ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start;}
.about-grid p{color:var(--muted); font-size:16px; margin:0 0 18px; max-width:52ch;}
.about-grid p strong{color:var(--muted); font-weight:400;}
.stat-panel{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:4px; padding:26px;
}
.stat-row{display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--panel-border);}
.stat-row:last-child{border-bottom:none;}
.stat-label{font-family:var(--font-mono); font-size:12.5px; color:var(--muted);}
.stat-value{font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--blue);}

/* ---------- Programs / decks ---------- */
.deck-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.deck-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:4px;
  padding:28px 24px; position:relative; overflow:hidden;
}
.deck-id{font-family:var(--font-mono); font-size:12.5px; color:var(--red); margin:0 0 20px;}
.deck-card h3{font-family:var(--font-display); font-weight:700; font-size:26px; margin:0 0 12px; color:var(--white);}
.deck-card p{color:var(--muted); font-size:14.5px; margin:0; max-width:32ch;}
.deck-card .glow{
  position:absolute; width:180px; height:180px; border-radius:50%; filter:blur(50px);
  top:-70px; right:-70px; opacity:0.35; pointer-events:none;
}
.deck-card:nth-child(1) .glow{background:var(--blue);}
.deck-card:nth-child(2) .glow{background:var(--red);}
.deck-card:nth-child(3) .glow{background:var(--blue);}

/* ---------- Regulations ---------- */
.reg-list{list-style:none; margin:0; padding:0; counter-reset:reg;}
.reg-item{
  counter-increment:reg;
  display:grid; grid-template-columns:56px 1fr; gap:20px;
  padding:26px 0; border-top:1px solid var(--panel-border);
}
.reg-item:last-child{border-bottom:1px solid var(--panel-border);}
.reg-item::before{
  content:counter(reg, decimal-leading-zero);
  font-family:var(--font-mono); font-size:15px; color:var(--red); padding-top:2px;
}
.reg-item h4{margin:0 0 6px; font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--white);}
.reg-item p{margin:0; color:var(--muted); font-size:15px; max-width:60ch;}
.reg-terms{margin:22px auto 0; padding:20px 22px; background:var(--panel); border:1px solid var(--panel-border); border-radius:4px; color:var(--muted); font-size:13px; line-height:1.6; max-width:80ch; text-align:center;}

/* ---------- Crew ---------- */
.crew-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.crew-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:4px; padding:22px;
  display:flex; gap:16px; align-items:center;
}
.crew-avatar{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--white);
  background:linear-gradient(135deg, var(--blue), var(--red));
}
.crew-role{font-family:var(--font-mono); font-size:11.5px; color:var(--blue); margin:0 0 4px;}
.crew-name{margin:0; font-weight:600; font-size:15.5px; color:var(--text);}

.staff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.staff-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:4px; padding:24px;
}
.staff-card .crew-avatar{margin-bottom:14px;}
.staff-card .crew-role{margin:0 0 4px;}
.staff-card .crew-name{margin:0 0 10px;}
.staff-bio{margin:0 0 12px; color:var(--muted); font-size:14px; max-width:34ch;}
.staff-handle{margin:0; font-family:var(--font-mono); font-size:12.5px; color:var(--blue);}

.staff-featured{
  display:grid; grid-template-columns:120px 1fr; gap:32px;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:4px;
  padding:34px; margin-bottom:22px; position:relative; overflow:hidden;
}
.staff-featured::before{
  content:''; position:absolute; width:260px; height:260px; border-radius:50%;
  background:var(--blue); opacity:0.14; filter:blur(70px); top:-100px; left:-60px; pointer-events:none;
}
.featured-avatar{width:88px; height:88px; font-size:30px;}
.featured-avatar-img{
  width:88px; height:88px; border-radius:50%; object-fit:cover; object-position:top center;
  border:2px solid var(--blue-soft); flex-shrink:0;
}
.featured-name{font-family:var(--font-display); font-weight:700; font-size:28px; margin:0 0 6px !important; color:var(--white);}
.featured-sub{font-family:var(--font-body); font-weight:400; font-size:15px; color:var(--muted);}
.featured-body .staff-handle{margin-bottom:16px;}
.featured-bio{margin:0 0 14px; color:var(--muted); font-size:15px; max-width:64ch; position:relative;}
.featured-bio:last-child{margin-bottom:0;}

/* ---------- Comms log ---------- */
.log-list{display:flex; flex-direction:column; gap:1px; background:var(--panel-border); border:1px solid var(--panel-border); border-radius:4px; overflow:hidden;}
.log-entry{background:var(--panel); padding:22px 26px; display:grid; grid-template-columns:150px 1fr; gap:22px;}
.log-meta{font-family:var(--font-mono); font-size:12.5px; color:var(--muted);}
.log-meta .log-tag{color:var(--red); display:block; margin-bottom:4px;}
.log-entry h4{margin:0 0 6px; font-size:16.5px; font-weight:600; color:var(--text);}
.log-entry p{margin:0; color:var(--muted); font-size:14.5px;}
.log-entry p + p{margin-top:10px;}
.log-entry ul{margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:14.5px;}
.log-entry ul li{margin-bottom:4px;}
.log-entry ul li:last-child{margin-bottom:0;}

/* ---------- Footer / final CTA ---------- */
.final-cta{
  padding:100px 0 90px; text-align:center;
  background:
    radial-gradient(500px 300px at 50% 0%, rgba(91,127,232,0.18), transparent 70%);
}
.final-cta h2{
  font-family:var(--font-display); font-weight:800; font-size:clamp(36px,6vw,64px);
  margin:0 0 18px; color:var(--white);
}
.final-cta p{color:var(--muted); font-size:16px; margin:0 0 30px;}
footer{border-top:1px solid var(--panel-border); padding:32px 0; padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-row p{margin:0; color:var(--muted); font-size:13.5px; font-family:var(--font-mono);}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .navlinks{display:none;}
  section.band{padding-left:20px; padding-right:20px;}  /* keep text off the screen edges */
  .about-grid{grid-template-columns:1fr; gap:36px;}
  .deck-grid{grid-template-columns:1fr;}
  .crew-grid{grid-template-columns:1fr 1fr;}
  .staff-grid{grid-template-columns:1fr 1fr;}
  .log-entry{grid-template-columns:1fr; gap:6px;}
  #programs img[alt="The Events"]{transform:none !important;}
  .reg-head{flex-direction:column; align-items:flex-start !important; text-align:left;}
  .reg-head img[alt="Server Rules"]{margin-top:18px; align-self:center;}
  .hull-diagram.wrap{overflow:visible; padding:0 16px 8px !important;}
  .hull-diagram svg{width:100%; height:auto; margin:0 auto;}
}
@media (max-width:520px){
  .crew-grid{grid-template-columns:1fr;}
  .staff-grid{grid-template-columns:1fr;}
  .hero{padding:64px 0 44px;}
  section.band{padding:64px 16px;}
  .reg-item{grid-template-columns:36px 1fr;}
  #log .section-tag,
  #log .section-head p{transform:none !important;}
}

@media (max-width:600px){
  .staff-featured{grid-template-columns:1fr; text-align:left;}
  .featured-avatar{margin-bottom:6px;}
}
@media (max-width:600px){
  .hull-diagram svg text{font-size:16px; letter-spacing:0;}  /* keep deck names readable when the ship shrinks */
}
::selection{background:var(--blue); color:var(--white);}

/* wide content safety */
.scroll-x{overflow-x:auto;}

/* ---------- Multi-page additions ---------- */
.navlinks a[aria-current="page"]{color:var(--text);}
.navlinks a[aria-current="page"]::after{content:''; display:block; height:2px; margin-top:3px; background:var(--blue); border-radius:2px;}
.navlinks{gap:20px; margin:0 20px;}
.brand{white-space:nowrap;}
.navlinks a{font-size:13.5px; white-space:nowrap;}
.menu-toggle{
  display:none; align-items:center; justify-content:center; width:40px; height:40px; margin-left:10px;
  background:transparent; border:1px solid var(--panel-border); border-radius:3px; color:var(--text); cursor:pointer;
}
.menu-toggle svg{width:20px; height:20px;}
.nav-right{display:flex; align-items:center;}
.mobile-menu{display:none; border-top:1px solid var(--panel-border); background:rgba(8,10,20,0.97);}
.mobile-menu ul{list-style:none; margin:0 auto; padding:8px 16px 16px; max-width:1120px;}
.mobile-menu a{display:block; padding:12px 4px; color:var(--muted); text-decoration:none; font-weight:500;
  border-bottom:1px solid var(--panel-border);}
.mobile-menu li:last-child a{border-bottom:none;}
.mobile-menu a[aria-current="page"]{color:var(--white);}
header.open .mobile-menu{display:block;}
@media (max-width:1240px){
  .navlinks{display:none;}
  .menu-toggle{display:inline-flex;}
}
@media (max-width:420px){
  .join-btn{padding:8px 12px; font-size:13px;}
  .brand{font-size:19px;}
}

.page-top{padding-top:32px;}
.tour-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px;}
.tour-card{
  display:block; text-decoration:none; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:4px; padding:20px; transition:border-color .15s ease, transform .15s ease;
}
.tour-card:hover, .tour-card:focus-visible{border-color:var(--blue); transform:translateY(-2px);}
.tour-card .num{font-family:var(--font-mono); font-size:12px; color:var(--red);}
.tour-card h3{font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--white); margin:6px 0 6px;}
.tour-card p{margin:0; color:var(--muted); font-size:14px;}
@media (max-width:980px){ .tour-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .tour-grid{grid-template-columns:1fr;} }

.timeline{list-style:none; margin:0; padding:0; position:relative;}
.timeline::before{content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--panel-border);}
.timeline li{position:relative; padding:0 0 30px 36px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{content:''; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--void); border:2px solid var(--blue);}
.timeline .when{font-family:var(--font-mono); font-size:12.5px; color:var(--red); margin:0 0 4px;}
.timeline h4{margin:0 0 6px; font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--white);}
.timeline p{margin:0; color:var(--muted); font-size:15px; max-width:64ch;}

.role-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.role-card{background:var(--panel); border:1px solid var(--panel-border); border-radius:4px; padding:24px;}
.role-card .deck-id{margin-bottom:12px;}
.role-card h3{font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--white); margin:0 0 10px;}
.role-card p{color:var(--muted); font-size:14.5px; margin:0 0 10px;}
.role-card p:last-child{margin-bottom:0;}
@media (max-width:860px){ .role-grid{grid-template-columns:1fr;} }
.apply-box{margin-top:28px; background:var(--panel); border:1px solid var(--panel-border); border-radius:4px; padding:28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.apply-box p{margin:0; color:var(--muted); max-width:60ch;}
.btn-disabled{opacity:.55; pointer-events:none;}

.soon{max-width:640px; margin:0 auto; text-align:center; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:4px; padding:48px 28px;}
.soon .big{font-size:44px; margin:0 0 6px;}
.soon h3{font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--white); margin:0 0 10px;}
.soon p{color:var(--muted); margin:0 auto 22px; max-width:46ch;}