/* ═══════════════════════════════════════════════════════════════════════════
   M102 ASTRO — DESIGN SYSTEM v2.1 (Fully Responsive)
   Brand: Feldgrau #46655B · Onyx #343A3B · Liver #594442 · Redwood #995852 · Lion #B2914F
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --feldgrau: #46655B; --onyx: #343A3B; --liver: #594442;
  --redwood: #995852;  --lion: #B2914F;
  --night: #1a1e1f;  --deep: #242929;  --slate: #2e3435;
  --dust: #6b7374;   --fog: #97a1a1;   --star: #e8e4dc;
  --warm: #c47b74;   --warm-h: #d4908a;
  --warm-bg: #995852; --warm-bg-h: #a0605a;
  --accent2: #B2914F; --accent3: #72968a;
  --glow: rgba(196,123,116,0.12);
  --type-emission: #c47b74; --type-reflection: #72968a;
  --type-galaxy: #a484b4;  --type-cluster: #B2914F; --type-solar: #d4a843;
  --dust-text: #8b9090;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;
  --focus-ring: 0 0 0 2px var(--night), 0 0 0 4px var(--warm);
}

html { scroll-behavior: smooth; }
body { background: var(--night); color: var(--star); font-family: 'DM Sans', sans-serif; font-weight: 300; overflow-x: hidden; min-height: 100vh; }
body.nav-open { overflow: hidden; }

/* ── NAV ── */
.site-nav { position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1rem 2.5rem;background:linear-gradient(to bottom,rgba(26,30,31,.97),rgba(26,30,31,.6),transparent);backdrop-filter:blur(10px); }
.site-nav-logo { display:flex;align-items:center;gap:.8rem;text-decoration:none;z-index:110; }
.site-nav-logo img { height:26px;opacity:.85;filter:brightness(10); }
.site-nav-links { display:flex;gap:2rem;list-style:none; }
.site-nav-links a { font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fog);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s; }
.site-nav-links a:hover { color:var(--star); }
.site-nav-links a.active { color:var(--star);border-bottom-color:var(--warm); }

/* ── HAMBURGER BUTTON ── */
.nav-toggle { display:none;background:none;border:1px solid var(--dust);color:var(--fog);width:44px;height:44px;cursor:pointer;border-radius:var(--r-sm);flex-shrink:0;position:relative;z-index:110;transition:border-color .2s;align-items:center;justify-content:center; }
.nav-toggle:hover { border-color:var(--warm);color:var(--warm); }
.nav-toggle svg { width:20px;height:20px; }
.nav-toggle .icon-close { display:none; }
.nav-toggle.open .icon-menu { display:none; }
.nav-toggle.open .icon-close { display:block; }
.nav-toggle.open { border-color:var(--warm); }

/* ── MOBILE NAV OVERLAY ── */
.mobile-nav-overlay { display:none;position:fixed;inset:0;z-index:99;background:rgba(26,30,31,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;gap:0;opacity:0;transition:opacity .3s ease; }
.mobile-nav-overlay.open { display:flex;opacity:1; }
.mobile-nav-overlay a { font-family:'Instrument Serif',serif;font-size:clamp(1.6rem,5vw,2.2rem);color:var(--fog);text-decoration:none;padding:.8rem 2rem;transition:color .2s;text-align:center;display:block; }
.mobile-nav-overlay a:hover,
.mobile-nav-overlay a.active { color:var(--warm); }
.mobile-nav-overlay .mobile-nav-label { font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.25em;color:var(--dust);text-transform:uppercase;margin-bottom:1.5rem; }

/* ── FOOTER ── */
.site-footer { border-top:1px solid var(--dust);padding:3rem;display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:4rem auto 0; }
.site-footer-logo { font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.18em;color:var(--warm);text-transform:uppercase; }
.site-footer-copy { font-size:.8rem;color:var(--fog);margin-top:.5rem; }
.site-footer-links { display:flex;gap:1.5rem;list-style:none;flex-wrap:wrap; }
.site-footer-links a { font-family:'Space Mono',monospace;font-size:.65rem;letter-spacing:.1em;color:var(--fog);text-transform:uppercase;text-decoration:none;transition:color .3s; }
.site-footer-links a:hover { color:var(--warm); }

/* ── SHARED ── */
.section-inner { max-width:1200px;margin:0 auto;padding:5rem 3rem; }
.section-label { font-family:'Space Mono',monospace;font-size:.65rem;letter-spacing:.2em;color:var(--warm);text-transform:uppercase;margin-bottom:1rem; }
.section-title { font-family:'Instrument Serif',serif;font-size:clamp(2rem,4vw,3rem);line-height:1.15;color:var(--star);margin-bottom:1rem; }
.section-title em { font-style:italic;color:var(--warm); }
.divider { width:40px;height:2px;background:var(--warm);margin:1.5rem 0;border-radius:1px; }

.btn-primary { background:var(--warm-bg);color:#fff;border:none;padding:.9rem 2rem;font-family:'DM Sans',sans-serif;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .3s,transform .2s;display:inline-block;border-radius:var(--r-sm); }
.btn-primary:hover { background:var(--warm-bg-h);transform:translateY(-2px); }
.btn-ghost { color:var(--fog);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--dust);padding-bottom:2px;transition:color .3s,border-color .3s; }
.btn-ghost:hover { color:var(--star);border-color:var(--fog); }
.btn-outline { padding:.5rem 1rem;border:1px solid var(--dust);background:none;color:var(--fog);font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:all .2s;border-radius:var(--r-sm); }
.btn-outline:hover { border-color:var(--warm);color:var(--warm); }
.btn-outline.primary { background:var(--warm-bg);border-color:var(--warm-bg);color:#fff; }
.btn-outline.primary:hover { background:var(--warm-bg-h); }

.type-emission { color:var(--type-emission); } .type-reflection { color:var(--type-reflection); }
.type-galaxy { color:var(--type-galaxy); } .type-cluster { color:var(--type-cluster); }
.type-solar { color:var(--type-solar); } .type-other { color:var(--fog); }

/* ── TARGET CARD THUMBNAILS ── */
.tc-thumb-wrap {
  width: calc(100% + 3rem);
  margin: -1.5rem -1.5rem 0;
  overflow: hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
  aspect-ratio: 16 / 9;
  background: var(--slate);
}
.tc-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.target-card:hover .tc-thumb { transform: scale(1.05); }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── ADA: FOCUS STYLES ── */
*:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}
.skip-link { position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--warm);color:#fff;padding:.8rem 1.5rem;font-family:'DM Sans',sans-serif;font-size:.9rem;z-index:200;border-radius:0 0 var(--r-sm) var(--r-sm);text-decoration:none;transition:top .2s; }
.skip-link:focus { top:0; }
.btn-outline, .btn-ghost, .btn-primary { min-height:44px;display:inline-flex;align-items:center; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 900px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px) {
  .site-nav-links { gap:1.2rem; }
  .site-nav-links a { font-size:.65rem; }
  .section-inner { padding:4rem 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px) {
  .site-nav { padding:.8rem 1.2rem; }
  .site-nav-links { display:none !important; }
  .nav-toggle { display:flex; }

  .section-inner { padding:3rem 1.25rem; }

  .site-footer {
    flex-direction:column;gap:1.5rem;text-align:center;
    padding:2.5rem 1.25rem;margin-top:3rem;
  }
  .site-footer-links { justify-content:center;gap:1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:480px) {
  .site-nav { padding:.7rem 1rem; }
  .site-nav-logo img { height:22px; }
  .section-inner { padding:2.5rem 1rem; }
  .btn-primary { padding:.8rem 1.5rem;font-size:.75rem; }
}
