/* ===== Shared navigation — The Token Economy =====
   Relies only on tokens defined on every page: --ink --muted --line --accent.
   Fonts (Fraunces, IBM Plex Mono) are @imported by each page. */

.topnav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
}
.topnav .brand{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
}
.topnav .brand .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none;}
.topnav .brand:hover{color:var(--accent);}
.topnav .links{display:flex; gap:18px;}
.topnav .links a{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:var(--muted); text-decoration:none;
}
.topnav .links a:hover, .topnav .links a.active{color:var(--accent);}

/* prev / next pager */
.pager{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch;
  margin-top:32px; padding-top:18px; border-top:1px solid var(--line);
}
.pager a{
  font-family:'IBM Plex Mono', monospace; text-decoration:none;
  border:1px solid var(--line); border-radius:10px; background:transparent;
  padding:11px 14px; transition:border-color .14s ease, transform .14s ease;
}
.pager a:hover{border-color:var(--accent); transform:translateY(-1px);}
.pager .dir{display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600;}
.pager .ttl{display:block; font-family:'Fraunces', serif; font-size:14px; color:var(--ink); margin-top:3px; line-height:1.2;}
.pager .next{text-align:right;}
.pager .home{
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; white-space:nowrap;
}
.pager .home:hover{color:var(--accent);}
.pager .edge{border:none;}            /* invisible placeholder where there's no prev/next */

@media (max-width:560px){
  .topnav{flex-wrap:wrap; gap:8px 16px;}
  .pager{grid-template-columns:1fr 1fr;}
  .pager .prev{order:1;} .pager .next{order:2;}
  .pager .home{grid-column:1 / -1; order:3; padding:11px;}
  .pager .edge{display:none;}
}

/* ===== ELI5 tooltips ===== */
.tip{
  border-bottom:1px dotted var(--accent);
  cursor:help; text-decoration:none;
}
.tip:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;}
#tipbubble{
  position:fixed; z-index:9999; max-width:min(300px, 86vw);
  background:#1c1c22; color:#eceae4;
  font-family:'IBM Plex Sans', sans-serif; font-size:13px; line-height:1.45;
  font-weight:400; letter-spacing:0; text-transform:none; text-align:left;
  padding:11px 13px; border-radius:9px;
  box-shadow:0 10px 34px -10px rgba(0,0,0,.55);
  pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
}
#tipbubble.show{opacity:1; transform:translateY(0);}
#tipbubble .tipterm{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#e0a48c; font-weight:600; margin-bottom:5px;
}
#tipbubble b{color:#fff;}