/* fallback, not swap. swap paints Segoe UI and then replaces it, and that
   replacement reflows the header and the cards. Admin status filters and the
   gallery are separate documents, so the swap flickered on every hop even
   when these files were already cached. fallback holds text briefly, uses
   Rajdhani on the first paint when the file is cached, and only shows the
   fallback if the file is actually late. */
@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/Rajdhani-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/Rajdhani-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/Rajdhani-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/Rajdhani-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

:root {
  color-scheme: dark;
  /* Pages also set this on <html> before this file loads, so a full
     navigation doesn't flash the browser's default white canvas. */
  --bg: #111111;
  --ink: #ffffff;
  --muted: #b8adc9;
  --btn-fill: rgba(18, 28, 72, 0.55);
  --btn-border: rgba(168, 184, 255, 0.45);
  --btn-border-hover: rgba(210, 220, 255, 0.75);
  --card-fill: rgba(18, 28, 72, 0.45);
  --scrim: 0;
  --well: #100821;
  --well-ink: #ffffff;
  --rule: rgba(168, 184, 255, 0.18);
}

* { box-sizing: border-box; }

html {
  margin: 0;
  background: var(--bg);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Rajdhani, "Segoe UI", sans-serif;
}

.btn {
  appearance: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--btn-fill);
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  padding: 0.72rem 1.35rem;
  min-width: 10.5rem;
  text-align: center;
  backdrop-filter: blur(6px);
  transition: border-color 160ms ease, background 160ms ease;
  /* Rajdhani's vertical metrics reserve descender space (for g/y/p/q) that
     uppercase button text never uses, so text-transform: uppercase text
     sits visibly above the box's true center — CSS centers on the font's
     full ascent+descent box, not the actual cap-height ink. --btn-text-nudge
     corrects it via .btn-label below; it's sized to THIS font-size/weight
     (0.82rem / 600) against the real rendered button, not eyeballed.
     If font-size or font-weight on .btn (or an override below) changes,
     re-measure and update the nudge — don't assume it still applies. Measure
     the actual gap from the button's edges to the real glyph ink (not just
     font-metrics math in isolation — that alone under-corrected here by
     about 0.25px, presumably from letter-spacing/hinting at small sizes):
       const el = <the .btn>, lbl = el.querySelector('.btn-label');
       const btnRect = el.getBoundingClientRect(), lblRect = lbl.getBoundingClientRect();
       const cs = getComputedStyle(lbl), text = lbl.textContent.trim().toUpperCase();
       const ctx = document.createElement('canvas').getContext('2d');
       ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
       const m = ctx.measureText(text);
       const baseline = lblRect.bottom - m.fontBoundingBoxDescent;
       const inkTop = baseline - m.actualBoundingBoxAscent, inkBottom = baseline + m.actualBoundingBoxDescent;
       const gapAbove = inkTop - btnRect.top, gapBelow = btnRect.bottom - inkBottom;
       const currentNudge = parseFloat(getComputedStyle(el).getPropertyValue('--btn-text-nudge'));
       // new --btn-text-nudge value: currentNudge + (gapBelow - gapAbove) / 2 */
  --btn-text-nudge: 0.97px;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--btn-border-hover);
  background: rgba(28, 40, 96, 0.7);
  outline: none;
}

.btn-label {
  display: inline-block;
  transform: translateY(var(--btn-text-nudge));
}

.btn[aria-disabled="true"] {
  cursor: default;
  opacity: 0.7;
}

.btn[aria-disabled="true"]:hover {
  border-color: var(--btn-border);
  background: var(--btn-fill);
}

/* Inner pages: visible, sticky. Homepage landing.css overrides position/opacity for
 * the intro, but shares this same background, padding, and layout — no border, so
 * the header doesn't shift height when navigating between the homepage and here. */
#site-chrome {
  position: sticky;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem 0.85rem;
  background: rgba(17, 17, 17, 0.5);
  /* body.inner-page sets 1.55 for prose; without this the header's button
     (and so the square menu button) renders 3px taller than the homepage's. */
  line-height: normal;
}

.chrome-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.chrome-brand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: block;
}

.chrome-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.chrome-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
}

.chrome-nav a:hover,
.chrome-nav a:focus-visible,
.chrome-nav a.is-current {
  color: var(--ink);
  outline: none;
}

.chrome-nav .btn {
  min-width: 0;
  padding: 0.55rem 1.05rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  /* .chrome-nav a (class+element) otherwise outranks plain .btn (one
     class), so its muted nav-link color wins over .btn's white — this is
     what made the header button read as dim/disabled even in the
     original style, not just its subtle background. */
  color: var(--ink);
  /* Also re-measured for THIS size: .chrome-nav a's font-weight: 500
     wins over .btn's 600 (same specificity fight as color above), so this
     renders smaller AND lighter than .btn's base case — the ink-centering
     nudge is smaller here too. See the measurement method on .btn above
     if this font-size or the 500 weight ever changes. */
  --btn-text-nudge: 0.45px;
  white-space: nowrap;
}

/* Narrow-width menu: Gallery/Help move out of the bar into a dropdown. A
   <details> so it opens without JS; chrome-menu.js only adds closing on an
   outside tap or Escape. */
.chrome-menu {
  display: none;
  position: relative;
  align-self: stretch;
}

.chrome-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 1;
  color: var(--ink);
  background: var(--btn-fill);
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.chrome-menu summary::-webkit-details-marker {
  display: none;
}

.chrome-menu summary:hover,
.chrome-menu summary:focus-visible,
.chrome-menu[open] summary {
  border-color: var(--btn-border-hover);
  background: rgba(28, 40, 96, 0.7);
  outline: none;
}

.chrome-menu-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
  background: rgba(17, 17, 17, 0.96);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  text-shadow: none;
}

.chrome-menu-panel a {
  padding: 0.6rem 0.85rem;
  border-radius: 4px;
}

.chrome-menu-panel a:hover,
.chrome-menu-panel a:focus-visible {
  background: rgba(28, 40, 96, 0.7);
}

@media (max-width: 800px) {
  .chrome-nav > a:not(.btn) {
    display: none;
  }

  .chrome-menu {
    display: block;
  }

  .chrome-nav {
    gap: 0.6rem;
  }
}

@media (max-width: 380px) {
  #site-chrome {
    padding-inline: 1rem;
  }
}

#site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 1.5rem 1.5rem 2rem;
  margin-top: auto;
}

#site-footer a {
  color: var(--muted);
  text-decoration: none;
}

#site-footer a:hover,
#site-footer a:focus-visible {
  color: var(--ink);
  outline: none;
}

#site-footer span.dot {
  color: rgba(184, 173, 201, 0.4);
  margin: 0 0.45rem;
}

#site-footer span.credit {
  color: var(--muted);
}

body.inner-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.55;
}