/* ===== Doppler/Edward — FAA-ish dark theme ===== */

:root{
  --bg: #0f1115;
  --bg-elev: #12151b;
  --panel: #171a21;
  --panel-2: #1b1f27;
  --ink: #e7ebf1;
  --ink-dim: #aab2c2;
  --muted: #7b8496;
  --line: #242a33;

  --accent: #d77b1e;     /* Doppler orange */
  --accent-2: #f8a24e;
  --good: #71d99c;
  --warn: #ffcd66;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --shadow-soft: 0 4px 14px rgba(0,0,0,.25);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial;
}

*{ box-sizing: border-box }
html,body{ height:100% }
html{ color-scheme: dark; }
body{
  margin:0;
  background: radial-gradient(1000px 700px at 10% -10%, rgba(215,123,30,.08), transparent 40%),
              radial-gradient(1000px 700px at 90% -10%, rgba(215,123,30,.05), transparent 40%),
              var(--bg);
  color:var(--ink);
  font: 16px/1.6 var(--sans);
  letter-spacing:.1px;
}

/* --- top bar --- */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(6px);
  background: rgba(15,17,21,.7);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:1120px; margin:auto; padding:.75rem 1rem;
  display:flex; align-items:center; gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem; font-weight:650;
  text-decoration:none; color:var(--ink);
}
.brand img{ width:22px; height:22px; border-radius:4px }
.spacer{ flex:1 }
.nav a{
  color:var(--ink-dim); text-decoration:none; padding:.4rem .6rem; border-radius:8px;
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--ink); background:var(--panel) }

/* --- dropdown --- */
.has-sub { position: relative; }
.has-sub .parent { position: relative; z-index: 51; }

.submenu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  padding: .35rem;
  z-index: 50;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.has-sub::after {
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:12px; /* hover buffer so cursor can slide down */
}
.submenu a{
  display:block; padding:.45rem .6rem;
  border-radius:8px; color:var(--ink-dim);
  text-decoration:none;
}
.submenu a:hover{ background: var(--panel-2); color: var(--ink); }

/* --- page wrapper --- */
.wrap{ max-width:1120px; margin:auto; padding: 2rem 1rem }

/* --- hero --- */
.hero{
  display:grid; grid-template-columns: 1.2fr .9fr; gap:1.75rem;
  align-items:center; margin: 1.75rem 0 1.25rem;
}
.hero-img{
  position:relative; overflow:hidden; border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  border:1px solid var(--line);
}
.hero-img img{ width:100%; display:block; transform: translateZ(0); }
.crt:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 2px);
  mix-blend-mode: soft-light;
}
.hero h1{
  font-size: clamp(28px, 2.8vw, 42px);
  line-height:1.15; margin:0 0 .75rem;
  letter-spacing:.2px;
}
.hero .lead{ color:var(--ink-dim); margin-bottom:1rem }
.actions{ display:flex; gap:.6rem; flex-wrap:wrap }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:.55rem .8rem; border-radius:10px; text-decoration:none;
  box-shadow: var(--shadow-soft);
}
.btn:hover{ border-color:#2d3541; background:var(--panel-2) }
.btn.accent{ background:var(--accent); border-color: #b46215; color:#101115; font-weight:650 }
.btn.accent:hover{ background: var(--accent-2) }
.badge{ font: 600 13px/1 var(--mono); letter-spacing:.3px; }

/* --- section tiles --- */
.section{ margin: 2.25rem 0 }
.tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.tile{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding:1rem 1.1rem;
  box-shadow: var(--shadow-soft);
}
.tile h3{ margin:.1rem 0 .4rem; font-size: 18px }
.tile p{ color:var(--ink-dim); margin:0 0 .35rem }
.tile ul{ margin:.5rem 0 0 1rem; color:var(--ink-dim) }
.tile li+li{ margin-top:.25rem }

/* --- “Selected projects” grid --- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1rem 1.1rem;
  box-shadow: var(--shadow-soft);
}
.card h4{ margin:.1rem 0 .25rem; font-size:16px }
.card .meta{ color:var(--muted); font: 12px/1.3 var(--mono); letter-spacing:.2px }

/* --- about page --- */
.kv{ margin:1rem 0 1.2rem }
.list-check{ list-style:none; padding:0; margin:0 }
.list-check li{
  position:relative; padding-left:1.25rem; margin:.35rem 0; color:var(--ink-dim)
}
.list-check li:before{
  content:"✓"; position:absolute; left:0; color:var(--good); font-weight:800
}
.leadership{
  display:grid; grid-template-columns: 110px 1fr; gap:1rem; align-items:start;
  padding:1rem; border:1px solid var(--line); border-radius: var(--radius); background: var(--panel-2);
}
.leadership img{ width:92px; height:92px; border-radius:50%; border:1px solid var(--line) }
.kicker{ font: 12px/1.1 var(--mono); color:var(--muted); letter-spacing:.3px; text-transform:uppercase }

/* --- advocacy boxes --- */
.box{
  background: var(--panel);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius: var(--radius);
  padding:1rem; margin:.75rem 0; box-shadow: var(--shadow-soft);
}

/* --- advocacy overlay (image hover) --- */
.swap{ position:relative }
.swap .mission{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  background: radial-gradient(900px 600px at 50% 20%, rgba(215,123,30,.08), transparent 40%), rgba(0,0,0,.72);
  opacity:0; transition:opacity .2s ease-in-out;
  pointer-events:none;
}
.swap:hover .mission,
.swap:focus-within .mission{
  opacity:1;
  cursor:zoom-out;
}
.swap .mission pre{
  margin:0; text-align:center; font:700 clamp(13px,1.8vw,18px)/1.35 var(--mono);
  color:#e7ebf1; letter-spacing:.25px;
}

/* --- team page --- */
.team-hero{
  display:grid; grid-template-columns: minmax(280px, 520px) 1fr;
  gap:2rem; align-items:start; margin-top: 1rem;
}
.portrait-wrap{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft);
}
.portrait-ansi{ display:block; width:min(90vw,520px); height:auto }
.bio h2{ margin:.2rem 0 .6rem }
.bio .title{ font:700 14px/1 var(--mono); color:#9aa3b8; text-transform:uppercase }
.bio p{ color:var(--ink); margin:.65rem 0 }
.bio .aside{ color:var(--ink-dim) }
.bio .actions{ margin-top:.9rem; display:flex; gap:.6rem; flex-wrap:wrap }

/* --- footer --- */
.footer{
  margin: 3rem 0 2rem; text-align:center; color:var(--muted); font: 12px/1.4 var(--mono)
}

/* --- responsive --- */
@media (max-width:1024px){
  .tiles,.cards{ grid-template-columns: 1fr 1fr }
  .hero{ grid-template-columns: 1fr; }
}
@media (max-width:680px){
  .tiles,.cards{ grid-template-columns: 1fr }
}