/* ==========================================================================
   MorrowHeat23 — shared styles
   Loaded by index.html, about.html, terms.html, privacy.html.
   Page-specific styling stays in that page's own <style> block.

   Design language: GTA Vice City / VC:DE key art. Flat vector, heavy black
   keylines, hot pink + antique gold on aqua and deep teal. No gradients on
   type. CRT is scoped to the hero scene only (see index.html).
   ========================================================================== */

:root{
  /* the aqua ground from the key art */
  --aqua:#5EC5D6;
  --aqua-lt:#8BDCE8;
  --aqua-dk:#2E9CB4;
  /* the two accents, and only these two */
  --pink:#ED3F97;
  --pink-dk:#B62A70;
  --gold:#C9A24B;
  --gold-lt:#EBD79A;
  --gold-dk:#8E6B27;
  /* body ground */
  --teal:#0E3B49;
  --teal-dk:#08252E;
  --ink:#0A1116;
  --cream:#F4F7F8;
  --dim:rgba(244,247,248,0.66);

  /* nav is 62px of content + a 3px bottom border. index.html's full-viewport
     hero subtracts this so hero + nav is exactly one screen. */
  --nav-h:65px;

  /* legacy aliases — older rules and any stray markup still referencing the
     synthwave token names resolve to the new palette instead of breaking */
  --void:#0E3B49;
  --panel:#08252E;
  --panel-line:#0A1116;
  --magenta:#ED3F97;
  --cyan:#5EC5D6;
  --fog:#F4F7F8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* flex column so the footer's margin-top:auto can pin it to the bottom of
   short pages (About) instead of leaving it floating mid-screen */
body{background:var(--teal); color:var(--cream); font-family:'Sora',sans-serif; overflow-x:hidden; position:relative;
  min-height:100vh; display:flex; flex-direction:column;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
a{color:inherit; text-decoration:none;}
a:focus-visible, button:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px; position:relative; z-index:2;}

/* ---------- PANEL FRAME ----------
   Was the HUD corner brackets; now a flat keyline with a hard offset shadow,
   which is the key art's language. `.hud` and its `.c2` child are emitted by
   the feed loaders in index.html, so the class names stay put and only the
   styling changes — no JS edits needed. `.c2` is now inert. */
.hud{
  position:relative;
  background:var(--teal-dk);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .16s ease, box-shadow .16s ease;
}
a.hud:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--gold);}
.hud .c2{display:none;}


/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:60;
  background:var(--ink);
  border-bottom:3px solid var(--gold);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:calc(var(--nav-h) - 3px); position:relative;}
.brandmark{font-family:'Limelight',cursive; font-size:20px; letter-spacing:0.03em; color:var(--cream);}
.brandmark .pink{color:var(--pink);}
/* `.blue` is the original class name in the markup of all four pages; it now
   paints aqua. Kept as-is so the nav markup never needed touching. */
.brandmark .blue, .brandmark .aq{color:var(--aqua);}
.navlinks{display:flex; gap:28px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(244,247,248,0.72);}
.navlinks a:hover{color:var(--gold);}
.navlinks a.current{color:var(--pink);}

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0;
}
.menu-toggle span{width:100%; height:2px; background:var(--cream); display:block; transition:transform .15s ease, opacity .15s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-right{display:flex; align-items:center; gap:22px;}
.nav-socials{display:flex; align-items:center; gap:15px; padding-left:22px; border-left:1px solid rgba(201,162,75,0.45);}
.nav-socials a{
  color:rgba(244,247,248,0.75); display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; transition:color .15s ease, transform .15s ease;
}
.nav-socials a:hover{color:var(--pink); transform:translateY(-1px);}
.nav-socials svg{width:100%; height:100%; fill:currentColor;}

/* social icons move into the hamburger dropdown on mobile */
.mobile-socials{display:none; position:relative;}
.mobile-socials a{color:rgba(244,247,248,0.75); width:22px; height:22px; display:flex; align-items:center; justify-content:center;}
.mobile-socials a:hover{color:var(--pink);}
.mobile-socials svg{width:100%; height:100%; fill:currentColor;}

/* ---------- CONTENT PAGES (about / terms / privacy) ---------- */
main{padding:64px 0 90px;}
.page-title{font-family:'Limelight',cursive; font-size:44px; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:36px; color:var(--cream);}
.page-title.tight{margin-bottom:8px;}
.page-sub{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--dim); margin-bottom:36px;}

.about{padding:32px;}
.about p{color:var(--dim); line-height:1.75; margin-bottom:14px; max-width:60ch;}
.about p:last-child{margin-bottom:0;}
.about strong{color:var(--cream); font-weight:500;}

.doc{padding:36px;}
.doc h2{font-family:'Limelight',cursive; font-size:20px; text-transform:uppercase; letter-spacing:0.02em; color:var(--pink); margin:28px 0 10px;}
.doc h2:first-child{margin-top:0;}
.doc p{color:var(--dim); line-height:1.75; margin-bottom:14px; max-width:70ch;}
.doc p:last-child{margin-bottom:0;}
.doc ul{color:var(--dim); line-height:1.75; margin:0 0 14px 0; padding-left:20px; max-width:70ch;}
.doc li{margin-bottom:8px;}
.doc li:last-child{margin-bottom:0;}
.doc li::marker{color:var(--gold);}
.doc strong{color:var(--cream); font-weight:500;}
/* outbound links in legal copy need to be obviously clickable */
.doc a{color:var(--aqua); border-bottom:1px solid rgba(94,197,214,0.4);}
.doc a:hover{color:var(--pink); border-bottom-color:var(--pink);}
.doc .updated{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--gold); margin-bottom:24px;}
/* hostnames in the privacy policy — use the site's mono, not the browser default */
.doc code{font-family:'JetBrains Mono',monospace; font-size:0.85em; color:var(--aqua);
  background:rgba(94,197,214,0.08); padding:1px 5px; border-radius:2px;}

/* static panels shouldn't lift on hover — only linked cards do */
main .hud{box-shadow:8px 8px 0 var(--ink);}

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--cream); margin-top:36px;
  background:var(--pink); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  padding:12px 20px; transition:transform .15s ease, box-shadow .15s ease;
}
.back-link:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}

/* ---------- FOOTER ----------
   Mirrors the nav: ink ground, the same 3px gold rule (on top here, where the
   nav has it underneath), the same mono uppercase links. Holds Terms and
   Privacy, which used to sit in the nav. Deliberately NOT a <nav> element —
   the bare `nav` selector above is sticky with a gold bottom border. */
.site-footer{margin-top:auto; background:var(--ink); border-top:3px solid var(--gold); position:relative; z-index:2;}
.site-footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:14px 28px; min-height:calc(var(--nav-h) - 3px); padding-top:16px; padding-bottom:16px;}
.site-footer .brandmark{font-size:16px;}
.footer-links{display:flex; flex-wrap:wrap; gap:28px; font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:0.06em; text-transform:uppercase; color:rgba(244,247,248,0.72);}
.footer-links a:hover{color:var(--gold);}
.footer-links a.current{color:var(--pink);}

/* One breakpoint for everything. The nav used to collapse earlier, at 900px,
   because it held three links and needed ~857px. Since Terms and Privacy moved
   to the footer it needs ~565px (brandmark 183 + About 40 + seven icons 239 +
   gaps and the wrap's padding), so the full bar fits comfortably above 760px.
   Re-measure if nav links or icons are ever added. */
@media (max-width:760px){
  /* nav -> hamburger dropdown */
  .menu-toggle{display:flex;}
  .navlinks{
    display:none; position:absolute; top:calc(var(--nav-h) - 3px); left:0; right:0;
    flex-direction:column; gap:0; background:var(--ink);
    border-bottom:3px solid var(--gold); padding:6px 28px;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 0; border-bottom:1px solid rgba(201,162,75,0.35);}
  .navlinks a:last-child{border-bottom:none;}
  .nav-socials{display:none;}
  .mobile-socials{display:flex; gap:18px; padding:16px 0 4px;}
  .navlinks .mobile-socials a{padding:0; border-bottom:none;}

  /* content pages + footer */
  .page-title{font-size:34px;}
  .about, .doc{padding:24px;}
  .site-footer .wrap{flex-direction:column; justify-content:center; text-align:center; padding-top:22px; padding-bottom:22px;}
  .footer-links{justify-content:center; gap:14px 24px;}
}