/* ============================================================
   theme-flat.css — sleek flat black & white home treatment
   + full-page network-globe background.
   Link this AFTER app.css.  Delete the <link> to fully revert.
   ============================================================ */

/* —— globe canvas: fixed, behind everything —— */
#globe-bg{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; background:#000;
  pointer-events:none; display:block;
}
body{ background:#000; }
/* lift the real UI above the globe */
.topbar, .wrap{ position:relative; z-index:1; }

/* —— retire the gold: one flat white accent —— */
:root{
  --gold:#F5F5F7;
  --gold-press:#D6D6D8;
}
.topbar .brand .glyph{ background:#F5F5F7; color:#000; }   /* flat chip, no gradient */
.btn-primary{ background:#F5F5F7; color:#000; }
.btn-primary:hover{ background:#E3E3E5; }
input:focus,select:focus,textarea:focus{
  border-color:#F5F5F7;
  box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
.art summary::before{ color:#F5F5F7; }

/* —— flat hero, sitting over the globe —— */
.intro{ padding:44px 0 22px; }
.intro .eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px;
}
.intro h1{
  font-weight:600; letter-spacing:-.04em;
  font-size:clamp(30px,5.2vw,54px);
}
.intro p{ color:var(--muted); }

/* —— panels: opaque enough to read, translucent enough
      that the globe reads behind them —— */
.panel{
  background:color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.topbar{
  background:rgba(0,0,0,.55);
}

@media (prefers-reduced-motion:reduce){
  .panel{ background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; }
}