/* ========== Global Theme & Resets ========== */
:root{
  --bg:#0c0d10; --panel:#121318; --glass:rgba(18,19,24,.7); --ink:#f5f6f8;
  --muted:#b7bac6; --line:#272933; --hover:#1a1c23; --accent:#ffffff;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  font:400 15px/1.65 system-ui,-apple-system,'Segoe UI',Inter,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 800px at 15% -10%,rgba(255,255,255,.06),transparent), var(--bg);
  overflow-x:hidden;
}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

/* ========== Layout Helpers (shared) ========== */
main{padding:92px 24px 40px; max-width:1200px; margin:0 auto}
section{padding:40px 0; border-bottom:1px solid var(--line)}
h1{font-size:36px; margin:0 0 12px; line-height:1.1}
h2{font-size:18px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:0 0 12px}
.muted{color:var(--muted)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.grid{display:grid; gap:18px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 900px){ .cols-2{grid-template-columns:1fr} }

/* ========== Top Bar (shared across pages) ========== */
.topbar{
  position:fixed; left:0; right:0; top:0; height:56px;
  display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 22px;
  border-bottom:1px solid var(--line); background:var(--glass);
  backdrop-filter:saturate(160%) blur(8px); z-index:30;
}
.topbar a{font-size:14px; opacity:.95; display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px}
.topbar a:hover{background:var(--hover); opacity:1}
.button{border:1px solid var(--line); padding:6px 12px; border-radius:12px}
.social{display:flex; gap:8px; margin-left:8px}
.social a{background:#e9e9ee; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center}
.social img{width:18px; height:18px}
@media (max-width: 900px){ .topbar{left:0; flex-wrap:wrap; justify-content:center} }

/* ========== Dropdown (shared) ========== */
.dropdown{position:relative}
.menu{
  position:absolute; right:0; top:100%; margin-top:8px; width:360px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.35); padding:10px; display:none
}
.menu h4{margin:6px 10px 8px; font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted)}
.menu ul{list-style:none; margin:0; padding:0}
.menu li{border-radius:10px; padding:8px 10px; color:var(--ink)}
.menu li+li{margin-top:6px}
.menu li:hover{background:var(--hover)}
/* Fix: keep hover alive while moving into the menu (remove the gap)
.dropdown{ position:relative; padding-bottom:8px; }            /* extends the hover area */
/* Anchor without shifting layout */
.dropdown{ position:relative; }

/* Invisible hover bridge (doesn't block clicks) */
/* Anchor */
.dropdown{ position:relative; }

/* Hover bridge (keeps :hover alive across the gap) */
.dropdown::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:8px;           /* gap size you want */
  pointer-events:auto;  /* IMPORTANT: must receive hover */
  background:transparent;
  z-index:1001;         /* above page, below menu */
}

/* Menu placed exactly below the bridge */
.menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px); /* sit below the 8px bridge */
  margin-top:0;         /* no extra gap */
  z-index:1002;
  display:none;
}

/* Open states */
.dropdown:hover .menu,
.dropdown:focus-within .menu,
.dropdown.open .menu{ display:block; }




/* ========== Reusable UI Elements ========== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px;
  padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25); backdrop-filter:blur(6px);
}
.btn{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02)}
.btn:hover{text-decoration:none; background:var(--hover)}
.btn.secondary{background:transparent}
.btnrow{display:flex; flex-wrap:wrap; gap:10px}

.tags{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tag{font-size:11px; padding:4px 8px; border:1px solid var(--line); border-radius:999px; opacity:.9}
.spacer{flex:1}
.year{font-size:12px; color:var(--muted)}

/* ========== Status Badges (shared) ========== */
.status{
  display:inline-flex; align-items:center; gap:6px; font-size:11px;
  padding:4px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap
}
.status.wip{background:rgba(245,158,11,.15); color:#ffe2a8; border-color:rgba(245,158,11,.25)}
.status.completed{background:rgba(56,189,248,.15); color:#b9e9ff; border-color:rgba(56,189,248,.25)}
.status.paused{background:rgba(212,212,216,.15); color:#e3e3e7; border-color:rgba(212,212,216,.25)}
.status.open{background:rgba(99,102,241,.15); color:#c8c9ff; border-color:rgba(99,102,241,.25)}

/* ========== Meta lists & Figures (shared) ========== */
.meta{font-size:14px; color:var(--muted)}
.meta dl{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; margin:0}
.meta dt{color:#d5d7de}
.meta dd{margin:0}
figure{margin:0}
figcaption{font-size:12px; color:var(--muted); margin-top:6px}

/* ========== Footer (shared) ========== */
footer{margin-top:28px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}