/* The site header and the sign-in dialog. The header is the home page's, copied, so every page matches.
   Its colours are set on the nav itself, so a page's own palette cannot change it. */
nav.top {
  --coal: #100d0c; --char: #1b1411; --soot: #2c211c; --ash: #a8978b; --bone: #f4e8de; --ember: #e0702e; --flame: #ffb37a; --rust: #b4501c;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--coal) 80%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--soot); font-family: var(--f-body); line-height: 1.6;
}
nav.top *, nav.top *::before, nav.top *::after { box-sizing: border-box; }
nav.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; max-width: 1200px; margin: 0 auto; padding-inline: 20px; width: 100%; }
nav.top .mark { display: flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; white-space: nowrap; }
nav.top .mark img { display: block; flex: none; }
nav.top .mark .mk { display: flex; flex-direction: column; }
nav.top .mark b { font: 800 1.15rem/1 var(--f-display); letter-spacing: -.01em; color: var(--bone); }
nav.top .mark b span { color: #fd6d14; }
nav.top .mark small { font: 500 .64rem/1 var(--f-mono); color: var(--ash); letter-spacing: .14em; text-transform: uppercase; margin-top: 5px; }
nav.top .navlinks { display: flex; gap: 22px; align-items: center; font-size: .9rem; color: var(--ash); }
nav.top .navlinks > a:not(.gh):not(.soc) { text-decoration: none; color: var(--ash); }
nav.top .navlinks > a:not(.gh):not(.soc):hover { color: var(--bone); }
nav.top .navlinks > a[aria-current] { color: var(--bone); }
nav.top .gh { display: inline-flex; align-items: stretch; text-decoration: none; border: 1px solid var(--soot); border-radius: 10px; overflow: hidden; font: 600 .86rem/1 var(--f-body); color: var(--bone); }
nav.top .gh > span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; }
nav.top .gh .lbl { background: var(--char); }
nav.top .gh .count { font-family: var(--f-mono); font-weight: 500; color: var(--flame); border-left: 1px solid var(--soot); font-variant-numeric: tabular-nums; gap: 6px; }
nav.top .gh svg { width: 16px; height: 16px; fill: currentColor; }
nav.top .gh:hover { border-color: var(--rust); }
nav.top .soc { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--soot); border-radius: 10px; color: var(--ash); }
nav.top .soc:hover { color: var(--bone); border-color: var(--rust); }
nav.top .soc svg { width: 17px; height: 17px; fill: currentColor; }
/* Sign in: the one filled-in action in the header, so it is easy to find. */
nav.top .signin { font: 600 .86rem/1 var(--f-body); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--ember); background: transparent; color: var(--flame); cursor: pointer; white-space: nowrap; }
nav.top .signin:hover { background: var(--ember); color: #1a0d06; }
@media (max-width: 760px) { nav.top .navlinks .hide-sm { display: none; } nav.top .navlinks { gap: 12px; } }

/* Sign-in dialog */
dialog.af-signin {
  --coal: #100d0c; --char: #1b1411; --soot: #2c211c; --ash: #a8978b; --bone: #f4e8de; --ember: #e0702e; --flame: #ffb37a; --rust: #b4501c;
  width: min(440px, calc(100% - 24px)); padding: 28px 26px 24px; border: 1px solid var(--soot); border-radius: 16px; background: var(--char); color: var(--bone);
  font: 400 1rem/1.55 "IBM Plex Sans", system-ui, sans-serif;
}
dialog.af-signin::backdrop { background: rgb(8 6 5 / .78); }
dialog.af-signin *, dialog.af-signin *::before { box-sizing: border-box; }
dialog.af-signin h2 { margin: 0 0 6px; font: 800 1.35rem/1.2 "Unbounded", system-ui, sans-serif; letter-spacing: -.02em; }
dialog.af-signin p { margin: 0 0 16px; color: var(--ash); font-size: .92rem; }
dialog.af-signin .why { color: var(--flame); }
dialog.af-signin .x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--soot); background: transparent; color: var(--bone); cursor: pointer; font-size: 1.05rem; }
dialog.af-signin .big { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 16px; border-radius: 10px; font: 600 .98rem/1 "IBM Plex Sans", system-ui, sans-serif; cursor: pointer; }
dialog.af-signin .big.gh2 { background: var(--bone); color: #1a1412; border: 1px solid var(--bone); }
dialog.af-signin .big.gh2 svg { width: 18px; height: 18px; fill: currentColor; }
dialog.af-signin .or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ash); font: 500 .74rem/1 "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .12em; }
dialog.af-signin .or::before, dialog.af-signin .or::after { content: ""; flex: 1; height: 1px; background: var(--soot); }
dialog.af-signin input[type=email] { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--soot); background: var(--coal); color: var(--bone); font: 400 .98rem "IBM Plex Sans", system-ui, sans-serif; }
dialog.af-signin .go { margin-top: 10px; background: linear-gradient(180deg, var(--ember), var(--rust)); color: #1a0d06; border: 0; }
dialog.af-signin .go:hover { filter: brightness(1.08); }
dialog.af-signin label.tick { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; color: var(--ash); font-size: .86rem; cursor: pointer; }
dialog.af-signin label.tick input { margin-top: 4px; accent-color: var(--ember); }
dialog.af-signin output { display: block; min-height: 1.3em; margin-top: 12px; color: var(--flame); font: 400 .84rem/1.4 "IBM Plex Mono", ui-monospace, monospace; }
dialog.af-signin .fine { margin: 14px 0 0; font-size: .78rem; }
dialog.af-signin .fine a { color: var(--flame); }

dialog.af-signin .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* a trap for bots: people never see it */
dialog.af-signin button.linkish { background: none; border: 0; padding: 0; color: var(--flame); text-decoration: underline; cursor: pointer; font: inherit; }
dialog.af-signin .go:disabled { opacity: .6; cursor: wait; }
dialog.af-signin b { color: var(--bone); font-weight: 600; word-break: break-all; }

/* Account menu (replaces the Sign in button once signed in) */
nav.top .acct { position: relative; }
nav.top .avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ember); background: var(--char); color: var(--flame); font: 700 .95rem/1 var(--f-body); cursor: pointer; }
nav.top .avatar:hover, nav.top .avatar[aria-expanded="true"] { background: var(--ember); color: #1a0d06; }
nav.top .menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; padding: 8px; border: 1px solid var(--soot); border-radius: 12px; background: var(--char); box-shadow: 0 18px 50px -12px rgb(0 0 0 / .7); z-index: 30; }
nav.top .menu .who { padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--soot); color: var(--ash); font: 400 .78rem/1.3 var(--f-mono); word-break: break-all; }
nav.top .menu a, nav.top .menu button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: none; color: var(--bone); font: 500 .9rem/1.2 var(--f-body); text-align: left; text-decoration: none; cursor: pointer; }
nav.top .menu a:hover, nav.top .menu button:hover { background: var(--soot); }

/* A message after a sign-in redirect */
.af-note { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 20px; background: #2a1a10; border-bottom: 1px solid var(--rust, #b4501c); color: #ffb37a; font: 400 .9rem/1.4 "IBM Plex Sans", system-ui, sans-serif; }
.af-note button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; }

dialog.af-signin .ts { display: flex; justify-content: center; margin-top: 8px; }   /* empty unless Cloudflare needs the person to do something */
/* The sign-in dialog's own display rules (flex buttons, the "or" line) would otherwise beat the hidden attribute. */
dialog.af-signin [hidden] { display: none !important; }