/* ── shared.css ──────────────────────────────────────────────────────────────
   Loaded by every page. Covers fonts, design tokens, topbar, and nav.
   Page-specific overrides (--bg, overflow, etc.) live in each page's own
   <style> block.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Jost — self-hosted, latin subset ───────────────────────────────────── */
@font-face {
  font-family: "Jost";
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/jost-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jost-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jost-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --surface:       rgba(0,0,0,0.84);
  --border:        rgba(255,255,255,0.22);
  --text:          #fff;
  --text-dim:      rgba(255,255,255,0.65);
  --text-muted:    rgba(255,255,255,0.65);
  --radius:        6px;
  --ctrl-size:     40px;
  --topbar-height: 52px;
  --gap:           1rem;    /* consistent spacing across both pages */
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}

/* ── Title slot ──────────────────────────────────────────────────────────── */
#logo-slot {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  pointer-events: none;
}

#site-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Hamburger button ────────────────────────────────────────────────────── */
#btn-menu {
  width: var(--ctrl-size);
  height: var(--ctrl-size);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#btn-menu:hover  { background: rgba(0,0,0,0.94); border-color: rgba(255,255,255,0.36); }
#btn-menu:active { transform: scale(0.93); }

#btn-menu svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── Dropdown nav ────────────────────────────────────────────────────────── */
#nav-menu {
  position: fixed;
  top: var(--topbar-height);
  left: 14px;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 0;
  z-index: 30;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#nav-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-section-label {
  padding: 10px 18px 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
}

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 14px;
}

.nav-link::before {
  content: "•";
  margin-right: 8px;
}

.nav-link {
  display: block;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-link:hover     { background: rgba(255,255,255,0.07); color: #fff; }
.nav-link[aria-current="page"] { color: var(--text); pointer-events: none; }

/* Non-linked name entries — identical weight to .nav-link, not interactive */
.nav-name::before {
  content: "•";
  margin-right: 8px;
}

.nav-name {
  display: block;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --ctrl-size: 44px; }
  #nav-menu { width: calc(100vw - 28px); }
}