/* jelia.nyc — "Night Plate" theme.
   Derived from the field-guide banner rather than picked by eye: the plate's
   ground hues cluster tightly at 203-215° at very low lightness (rain-dark
   steel), and it carries exactly two accents — a cyan signal at 186° (the
   network glow) and lamp amber at 52° (the sextant, and the lit windows).

   Loaded AFTER the page's inline <style>, so redefining the eight tokens the
   page already uses re-skins everything without touching a line of markup.
   New cool-accent tokens are added because the old brass palette had none. */

:root{
  /* ── the eight the page already speaks ── */
  --lobby:      #0a1017;   /* was lobby green — now the wet city at night   */
  --shadow:     #04050a;   /* deepest ground, straight off the plate        */
  --brass:      #d8bd84;   /* the sextant                                   */
  --brass-hi:   #f2e2b4;
  --brass-lo:   #7d6a41;
  --cream:      #dce7ea;   /* paper, cooled toward the mist in the image    */
  --cream-dim:  #8fa3ab;
  --oxblood:    #a85a45;   /* kept for warnings; warmed off the old maroon  */

  /* ── added: the cold half of the plate ── */
  --signal:     #7fe9f5;   /* the data glow                                 */
  --signal-hi:  #e2fbfe;
  --signal-dim: rgba(127,233,245,.30);
  --steel:      #334959;   /* structural rules                             */
  --stone:      #6a7c86;   /* wet stone                                    */
  --panel:      #121c26;   /* raised surfaces                              */
  --panel-hi:   #1f2b36;
}

/* ── ground: the plate's own sky, lifted behind the masthead ────────── */
body{
  background:
    radial-gradient(1200px 620px at 50% -180px, #1b2a38 0%, var(--lobby) 58%),
    var(--lobby) !important;
  color: var(--cream);
}
/* rain, held to a whisper — the plate has weather, the page only suggests it */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(
    102deg, rgba(220,231,234,.055) 0 1px, transparent 1px 7px);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.65), transparent 62%);
}

/* ── the banner ─────────────────────────────────────────────────────── */
.plate-banner{
  display:block;width:100%;height:auto;margin:0 0 28px;
  border:1px solid var(--steel);
  box-shadow:0 26px 70px -28px #000, 0 0 0 1px rgba(127,233,245,.07);
}

/* ── interactive things carry the signal colour ─────────────────────── */
a{ color: var(--signal); }
a:hover{ color: var(--signal-hi); }
:focus-visible{ outline:2px solid var(--signal-hi); outline-offset:3px; }

.entry:hover, .site:hover{
  border-color: var(--signal-dim) !important;
  background: rgba(127,233,245,.06) !important;
  color: var(--signal-hi) !important;
}
.nav-btn:hover{
  border-color: var(--signal-dim) !important;
  box-shadow:0 0 22px -8px var(--signal);
}
.badge-new{
  background: rgba(127,233,245,.14) !important;
  border-color: var(--signal-dim) !important;
  color: var(--signal-hi) !important;
}

/* ── surfaces read as instrument panels, not warm rooms ─────────────── */
.card, .panel, .plate, .window, .hunt-promo{
  background: linear-gradient(168deg, rgba(220,231,234,.045), rgba(0,0,0,.30)) !important;
  border-color: var(--steel) !important;
}
.sec{ color: var(--stone) !important; }
h1, h2, h3{ color: var(--brass-hi); }
.rule{ background: linear-gradient(90deg, transparent, var(--brass), transparent) !important; }

/* the live figures are data, so they glow like data */
.stat b, .stat-num, .num{ color: var(--signal-hi) !important; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
@media (max-width:640px){
  .plate-banner{ margin-bottom:20px; }
}