/* nav — sticky bar, the Quizzes dropdown, and the "on this page" contents band */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--rule)}
.navin{max-width:var(--max);margin:0 auto;padding:6px var(--pad);
  display:flex;align-items:center;gap:26px}
/* logo lockup matches humanmeetsai.com's header: transparent mark + wordmark, never underlined */
.brand{display:flex;align-items:center;gap:4px;font-weight:600;letter-spacing:-.025em;font-size:20px;color:var(--ink);text-decoration:none}
.brand img{width:56px;height:56px}
@media(min-width:768px){.brand{font-size:24px}.brand img{width:64px;height:64px}}
.navlinks{display:flex;gap:6px;margin-left:auto}
/* dropdown entries that are not links yet (quiz not live) are <span>s: same rest styling, no hover.
   When a quiz goes live, swap the span for an <a href> — nothing else changes. */
.navlinks a,.ddcol span{font-size:14px;color:var(--ink2);text-decoration:none;padding:7px 9px;border-radius:8px;white-space:nowrap;
  transition:background .15s,color .15s}
.navlinks a:hover{color:#fff;background:#14a89a}
@media(max-width:900px){.navlinks{display:none}}

/* quizzes dropdown: opens on hover / focus-within via CSS; .open is set by page.js for tap devices */
.dd{position:relative}
.dd>a{display:inline-flex;align-items:center;gap:6px}
.dd>a svg{width:9px;height:9px;transition:transform .18s ease}
.dd:hover>a svg,.dd:focus-within>a svg,.dd.open>a svg{transform:rotate(180deg)}
.ddmenu{position:absolute;top:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(-6px);z-index:60;
  display:grid;grid-template-columns:auto auto;gap:0 30px;
  background:#fff;border:1px solid var(--rule);border-radius:12px;padding:15px 18px 16px;
  box-shadow:0 24px 52px -20px rgba(11,18,32,.38);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.ddmenu::before{content:"";position:absolute;top:-11px;left:0;right:0;height:11px}
.dd:hover .ddmenu,.dd:focus-within .ddmenu,.dd.open .ddmenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.ddcol{display:flex;flex-direction:column;gap:1px}
.ddlab{margin:0 0 7px;font:600 10.5px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal)}
@media(prefers-reduced-motion:reduce){.ddmenu,.dd>a svg{transition:none}}

/* contents band */
.toc{background:var(--ink-band);color:#dbe2ee}
.toc .wrap{display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:nowrap;overflow-x:auto;align-items:baseline;padding-top:38px;padding-bottom:8px;white-space:nowrap}
.toc a+a::before{content:"·";color:#5eead4;margin-right:18px;font-weight:800}
.toc b{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright);font-weight:600;margin-right:8px}
.toc a{font-size:16.5px;font-weight:600;color:#e8edf6;text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.toc a:hover{border-color:var(--teal-bright);color:#fff}
@media(max-width:700px){.toc .wrap{flex-wrap:wrap;white-space:normal;justify-content:flex-start;gap:6px 14px;padding-top:26px}.toc b{flex-basis:100%}.toc a+a::before{margin-right:12px}}