*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Courier New',monospace;
  background:#0a0a0a;
  color:#b8c9a0;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}

/* ── Nav ─────────────────────────────────────────── */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.2rem 2.5rem;
  border-bottom:1px solid #1a1a1a;
}
.nav-logo{font-size:0.75rem;color:#5a6b42;letter-spacing:0.2em}
.nav-links{display:flex;gap:2rem}
.nav-links a{
  font-size:0.68rem;
  color:#3a4a2a;
  letter-spacing:0.15em;
  text-transform:uppercase;
  transition:color 0.15s;
}
.nav-links a:hover{color:#b8c9a0}

/* ── Hero ─────────────────────────────────────────── */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:480px;
  border-bottom:1px solid #1a1a1a;
}

.art-panel{
  border-right:1px solid #1a1a1a;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0;
  gap:0.8rem;
  background:#000;
  overflow:hidden;
  position:relative;
}
.art-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.scan-label{
  position:absolute;
  bottom:1rem;
  left:1rem;
  font-size:0.58rem;
  letter-spacing:0.2em;
  color:#2e3d20;
  text-transform:uppercase;
}

.text-panel{
  padding:3rem 2.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.8rem;
}
.sys-tag{font-size:0.6rem;color:#3a4a2a;letter-spacing:0.2em;text-transform:uppercase}
.wordmark{font-size:2.8rem;color:#c8e05e;letter-spacing:-1px;line-height:1}
.wordmark span{color:#3a4a2a}
.broadcast{
  font-size:0.82rem;
  color:#8aa060;
  letter-spacing:0.18em;
  text-transform:uppercase;
  border-left:2px solid #2a3a1a;
  padding-left:0.8rem;
}
.desc{font-size:0.82rem;color:#6a7a58;line-height:1.9;max-width:360px}

.status-row{display:flex;flex-wrap:wrap;gap:8px}
.status{
  font-size:0.62rem;
  padding:3px 10px;
  border:1px solid #2a3a1a;
  color:#4a5a38;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.status-hi{border-color:#4a6a28;color:#8aa060}

/* ── Subsite cards ────────────────────────────────── */
.section{padding:2.5rem;border-bottom:1px solid #1a1a1a}
.section-tag{
  font-size:0.6rem;
  color:#3a4a2a;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:1.5rem;
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;
  background:#1a1a1a;
}
.card{
  background:#0a0a0a;
  padding:1.5rem;
  display:block;
  transition:background 0.15s;
}
.card:hover{background:#0f0f0f}
.card-port{font-size:0.58rem;color:#3a4a2a;letter-spacing:0.18em;margin-bottom:0.5rem}
.card-name{font-size:0.9rem;color:#c8e05e;margin-bottom:0.4rem}
.card-desc{font-size:0.72rem;color:#4a5a38;line-height:1.7}
.card-state{
  display:inline-block;
  margin-top:0.8rem;
  font-size:0.58rem;
  letter-spacing:0.15em;
  color:#3a4a2a;
  border:1px solid #2a3a1a;
  padding:2px 8px;
  text-transform:uppercase;
}
.card-state.live{color:#8aa060;border-color:#4a6a28}
.card-ghost{opacity:0.3}

/* ── Footer ───────────────────────────────────────── */
footer{
  padding:1.2rem 2.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #1a1a1a;
}
.foot-left{font-size:0.6rem;color:#2a3a1a;letter-spacing:0.15em}
.foot-links{display:flex;gap:1.5rem}
.foot-links a{
  font-size:0.6rem;
  color:#2a3a1a;
  letter-spacing:0.12em;
  text-transform:uppercase;
  transition:color 0.15s;
}
.foot-links a:hover{color:#6a7a58}