/*
 * smog brand tokens (source of truth).
 * smog = smoke + fog: a sodium streetlight cutting through haze. Dark-first.
 * The site ships an identical copy at backend/app/site/static/tokens.css
 * (a test keeps them in sync). The launcher copies these values.
 */
:root {
  /* Color: base */
  --smog-bg: #0e0f11;
  --smog-bg-2: #15171a;
  --smog-surface: #1c1f23;
  --smog-line: #2a2e34;
  --smog-text: #ebe6dc;
  --smog-muted: #9a958c;

  /* Color: light and fog */
  --smog-amber: #ffb547;        /* primary accent, sodium light */
  --smog-amber-deep: #e08a1e;   /* pressed states, light falloff */
  --smog-amber-ink: #1a1206;    /* text on amber fills */
  --smog-ember: #c4553a;        /* sodium lamp warm-up glow (pinkish red) */
  --smog-haze: #8fa3b0;         /* secondary, cool fog */
  --smog-haze-dim: #4d5a63;

  /* Color: status */
  --smog-ok: #6fd3a8;
  --smog-warn: #ffb547;
  --smog-bad: #ff6b5e;

  /* Translucent light, for glows and the cone */
  --smog-glow: rgba(255, 181, 71, 0.18);
  --smog-glow-strong: rgba(255, 181, 71, 0.42);
  --smog-fog: rgba(143, 163, 176, 0.08);

  /* Type families (self-hosted woff2, no font CDN) */
  --smog-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --smog-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --smog-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale: 16px base, ratio 1.25 (major third), display steps larger */
  --smog-text-xs: 0.8rem;      /* 12.8 */
  --smog-text-sm: 0.875rem;    /* 14 */
  --smog-text-md: 1rem;        /* 16 */
  --smog-text-lg: 1.25rem;     /* 20 */
  --smog-text-xl: 1.563rem;    /* 25 */
  --smog-text-2xl: 1.953rem;   /* 31 */
  --smog-text-3xl: 2.441rem;   /* 39 */
  --smog-text-4xl: 3.815rem;   /* 61 */
  --smog-text-hero: clamp(2.6rem, 6.6vw + 1rem, 6.4rem);
  --smog-leading-tight: 1.02;
  --smog-leading-snug: 1.2;
  --smog-leading-body: 1.6;
  --smog-measure: 68ch;

  /* Spacing: 4px grid */
  --smog-space-1: 0.25rem;
  --smog-space-2: 0.5rem;
  --smog-space-3: 0.75rem;
  --smog-space-4: 1rem;
  --smog-space-5: 1.5rem;
  --smog-space-6: 2rem;
  --smog-space-7: 3rem;
  --smog-space-8: 4rem;
  --smog-space-9: 6rem;
  --smog-space-10: 8rem;

  /* Radius: small things round, big things nearly square */
  --smog-radius-pill: 999px;
  --smog-radius-sm: 4px;
  --smog-radius-md: 8px;
  --smog-radius-lg: 14px;

  /* Layout */
  --smog-page-max: 76rem;
  --smog-gutter: clamp(1rem, 4vw, 2.5rem);

  /* Motion */
  --smog-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --smog-dur-fast: 120ms;
  --smog-dur: 220ms;
  --smog-warmup: 2.6s;          /* the hero lamp's sodium warm-up */
}

/* smog.games site styles. Tokens come first in the bundle (tokens.css). */

/* Fonts: self-hosted, Latin subset, SIL OFL (licenses in /static/fonts/). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.a756882d8a.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.3100e775e8.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-italic.7291b5970d.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.18be452724.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* The hero lamp colour animates from ember to sodium amber on load. */
@property --lamp {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffb547;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--smog-bg);
  color: var(--smog-text);
  font-family: var(--smog-font-body);
  font-size: 100%;
  line-height: var(--smog-leading-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--smog-space-6);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-feature-settings: "cv11", "ss01";
  position: relative;
  isolation: isolate;
}

/* Atmosphere: a faint warm bloom up top, cool fog lower down, film grain. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
body::before {
  background:
    radial-gradient(70rem 36rem at 88% -12%, rgba(255, 181, 71, 0.07), transparent 62%),
    radial-gradient(60rem 48rem at -10% 35%, rgba(143, 163, 176, 0.07), transparent 70%),
    radial-gradient(80rem 30rem at 50% 115%, rgba(143, 163, 176, 0.06), transparent 70%);
}
body::after {
  background-image: url("noise.37cfe963c8.svg");
  background-size: 240px 240px;
  opacity: 0.045;
  mix-blend-mode: overlay;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--smog-amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--smog-amber);
  outline-offset: 3px;
  border-radius: var(--smog-radius-sm);
}

::selection { background: var(--smog-amber); color: var(--smog-amber-ink); }

h1, h2, h3, h4 {
  font-family: var(--smog-font-display);
  font-weight: 700;
  font-stretch: 88%;
  line-height: var(--smog-leading-snug);
  letter-spacing: -0.015em;
  margin: 0 0 var(--smog-space-4);
  text-wrap: balance;
}
h1 { font-size: var(--smog-text-4xl); line-height: var(--smog-leading-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--smog-text-3xl); letter-spacing: -0.025em; }
h3 { font-size: var(--smog-text-xl); }
h4 { font-size: var(--smog-text-lg); }

p { margin: 0 0 var(--smog-space-4); }
p, li { text-wrap: pretty; }

code, kbd, samp, pre {
  font-family: var(--smog-font-mono);
  font-size: 0.9em;
}

.wrap {
  width: 100%;
  max-width: var(--smog-page-max);
  margin-inline: auto;
  padding-inline: var(--smog-gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: var(--smog-space-4);
  top: -4rem;
  z-index: 10;
  padding: var(--smog-space-2) var(--smog-space-4);
  background: var(--smog-amber);
  color: var(--smog-amber-ink);
  font-weight: 600;
  border-radius: var(--smog-radius-sm);
}
.skip:focus { top: var(--smog-space-4); }

main { flex: 1; }

.muted { color: var(--smog-muted); }

/* -------------------------------------------------------------- header */

.site-header {
  position: relative;
  z-index: 2;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--smog-space-4) var(--smog-space-6);
  flex-wrap: wrap;
  padding-block: var(--smog-space-5);
}
.brand { display: inline-flex; border-radius: var(--smog-radius-sm); }
.brand img { height: 2.25rem; width: auto; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--smog-space-1) var(--smog-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: var(--smog-space-2) var(--smog-space-3);
  color: var(--smog-text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--smog-text-sm);
  border-radius: var(--smog-radius-pill);
  transition: background-color var(--smog-dur-fast) var(--smog-ease), color var(--smog-dur-fast) var(--smog-ease);
}
.site-nav a:hover { background: var(--smog-surface); }
.site-nav a[aria-current="page"] {
  color: var(--smog-amber);
  background: rgba(255, 181, 71, 0.1);
}
.site-nav .nav-download {
  border: 1px solid var(--smog-line);
}

/* -------------------------------------------------------------- footer */

.site-footer {
  margin-top: var(--smog-space-9);
  border-top: 1px solid var(--smog-line);
  background: linear-gradient(to bottom, rgba(21, 23, 26, 0.6), var(--smog-bg));
  font-size: var(--smog-text-sm);
  color: var(--smog-muted);
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--smog-space-6);
  padding-block: var(--smog-space-7);
}
.site-footer h2 {
  font-size: var(--smog-text-md);
  font-family: var(--smog-font-body);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--smog-text);
  margin-bottom: var(--smog-space-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--smog-space-2); }
.site-footer a { color: var(--smog-text); text-decoration: none; }
.site-footer a:hover { color: var(--smog-amber); text-decoration: underline; }
.footer-mark { height: 2rem; width: auto; margin-bottom: var(--smog-space-4); }
.footer-fine { grid-column: 1 / -1; border-top: 1px solid var(--smog-line); padding-top: var(--smog-space-5); display: flex; flex-wrap: wrap; gap: var(--smog-space-2) var(--smog-space-6); }
.footer-fine p { margin: 0; }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--smog-space-3);
  padding: 0.85rem 1.35rem;
  border-radius: var(--smog-radius-md);
  border: 1px solid var(--smog-line);
  background: var(--smog-surface);
  color: var(--smog-text);
  font: 600 var(--smog-text-md) / 1.2 var(--smog-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--smog-dur-fast) var(--smog-ease), border-color var(--smog-dur-fast) var(--smog-ease), box-shadow var(--smog-dur) var(--smog-ease);
}
.btn:hover { border-color: var(--smog-haze-dim); text-decoration: none; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-primary {
  background: var(--smog-amber);
  border-color: var(--smog-amber);
  color: var(--smog-amber-ink);
  box-shadow: 0 0 0 0 var(--smog-glow), 0 10px 40px -12px var(--smog-glow-strong);
}
.btn-primary:hover {
  background: #ffc163;
  border-color: #ffc163;
  box-shadow: 0 0 0 6px var(--smog-glow), 0 14px 50px -10px var(--smog-glow-strong);
}
.btn-primary:active { background: var(--smog-amber-deep); border-color: var(--smog-amber-deep); }

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--smog-amber);
  padding-inline: var(--smog-space-2);
}
.btn-quiet:hover { border-color: transparent; text-decoration: underline; }

/* --------------------------------------------------------------- pills */

.pills { display: flex; flex-wrap: wrap; gap: var(--smog-space-2); margin: 0; padding: 0; list-style: none; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--smog-line);
  border-radius: var(--smog-radius-pill);
  font-size: var(--smog-text-xs);
  font-weight: 500;
  line-height: 1.5;
  color: var(--smog-muted);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill-kind::before { display: none; }
.pill-kind { color: var(--smog-text); background: var(--smog-surface); }
.pill-works { color: var(--smog-ok); border-color: rgba(111, 211, 168, 0.35); }
.pill-broken { color: var(--smog-bad); border-color: rgba(255, 107, 94, 0.4); }
.pill-untested { color: var(--smog-haze); border-color: rgba(143, 163, 176, 0.3); }
.pill-untested::before { background: transparent; border: 1.5px solid currentColor; }
.pill-ai_made { color: var(--smog-amber); border-color: rgba(255, 181, 71, 0.45); }
.pill-ai_assisted { color: var(--smog-haze); border-color: rgba(143, 163, 176, 0.4); }
.pill-ai_made::before, .pill-ai_assisted::before {
  border-radius: 1px;
  transform: rotate(45deg);
  width: 0.4rem; height: 0.4rem;
}
.pill-revoked { color: var(--smog-bad); background: rgba(255, 107, 94, 0.1); border-color: rgba(255, 107, 94, 0.5); }

/* ---------------------------------------------------------------- hero */

.hero {
  --lamp: var(--smog-amber);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--smog-space-9));
  padding: calc(var(--smog-space-9) + clamp(3rem, 9vw, 7rem)) 0 clamp(4rem, 8vw, 6rem);
  animation: warmup var(--smog-warmup) cubic-bezier(0.5, 0, 0.3, 1) both;
}
@keyframes warmup {
  0% { --lamp: #3a1c18; }
  30% { --lamp: var(--smog-ember); }
  100% { --lamp: var(--smog-amber); }
}

/* The streetlamp: a cobra-head on an arm from the right, a cone of light, a pool below. */
.lamp {
  --lamp-x: 53%;
  --lamp-y: clamp(6.6rem, 9vw, 8.4rem);
  --fw: clamp(6rem, 9vw, 8rem);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.lamp-fixture {
  position: absolute;
  left: var(--lamp-x);
  top: var(--lamp-y);
  width: var(--fw);
  transform: translate(-50%, -100%);
  color: #2c3036;
  overflow: visible;
}
.lamp-fixture .lens { fill: var(--lamp); }
.lamp-fixture .lens-glow { fill: var(--lamp); opacity: 0.6; filter: blur(5px); }
.lamp-arm {
  position: absolute;
  top: calc(var(--lamp-y) - var(--fw) * 0.165);
  left: calc(var(--lamp-x) + var(--fw) * 0.44);
  right: -1rem;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to bottom, #3a3f46, #23272c);
}
/* Blur lives on the wrapper so the clipped beam gets soft edges. */
.lamp-cone {
  position: absolute;
  top: calc(var(--lamp-y) - 2px);
  left: calc(var(--lamp-x) - 48vw);
  width: 96vw;
  bottom: 0;
  filter: blur(20px);
  mix-blend-mode: screen;
}
.beam {
  position: absolute;
  inset: 0;
  clip-path: polygon(47.5% 0, 52.5% 0, 94% 100%, 12% 100%);
  background:
    url("fog.b23460eeee.svg") center top / 110% 38% repeat-y,
    linear-gradient(to bottom,
      color-mix(in srgb, var(--lamp) 62%, transparent) 0%,
      color-mix(in srgb, var(--lamp) 26%, transparent) 26%,
      color-mix(in srgb, var(--lamp) 9%, transparent) 62%,
      color-mix(in srgb, var(--lamp) 3%, transparent) 100%);
  background-blend-mode: soft-light, normal;
}
.lamp-pool {
  position: absolute;
  bottom: 6%;
  left: calc(var(--lamp-x) - 40vw);
  width: 80vw;
  height: 12rem;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--lamp) 10%, transparent), transparent 70%);
}

.hero-inner { position: relative; }

.hero h1 {
  font-size: var(--smog-text-hero);
  font-weight: 740;
  font-stretch: 84%;
  line-height: 0.98;
  letter-spacing: -0.022em;
  max-width: 12ch;
  margin-bottom: var(--smog-space-6);
  color: var(--smog-text);
}
/* Lit type: the letters nearest the lamp catch its light, the rest sit in fog. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background-image: radial-gradient(70% 110% at 104% -18%,
      #fff3dc 0%,
      var(--lamp) 26%,
      color-mix(in srgb, var(--lamp) 30%, var(--smog-text)) 46%,
      var(--smog-text) 64%,
      #b9c3c8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero-lead {
  font-size: var(--smog-text-lg);
  line-height: 1.55;
  max-width: 40rem;
  color: #d4cfc5;
  margin-bottom: var(--smog-space-7);
}

.get {
  display: grid;
  gap: var(--smog-space-4);
  max-width: 40rem;
}
.get-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smog-space-3) var(--smog-space-5); }
.get-meta { margin: 0; font-size: var(--smog-text-sm); color: var(--smog-muted); }
.get-meta strong { color: var(--smog-text); font-weight: 600; }

.hash {
  display: flex;
  align-items: baseline;
  gap: var(--smog-space-3);
  margin: 0;
  font-size: var(--smog-text-sm);
  color: var(--smog-muted);
  min-width: 0;
}
.hash { flex-wrap: wrap; column-gap: var(--smog-space-3); row-gap: 0; }
.hash > span { white-space: nowrap; }
.hash code {
  color: var(--smog-haze);
  font-size: var(--smog-text-xs);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.get-note { font-size: var(--smog-text-sm); color: var(--smog-muted); margin: 0; max-width: 36rem; }

.soon {
  border-left: 2px solid var(--lamp, var(--smog-amber));
  padding: var(--smog-space-1) 0 var(--smog-space-1) var(--smog-space-5);
}
.soon p:first-child { color: var(--smog-text); font-weight: 600; font-size: var(--smog-text-lg); margin-bottom: var(--smog-space-2); }

/* ------------------------------------------------------------ sections */

.section { padding-block: var(--smog-space-9) 0; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--smog-space-3) var(--smog-space-6);
  margin-bottom: var(--smog-space-6);
}
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--smog-muted); max-width: 40rem; }
.section-intro { color: var(--smog-muted); max-width: 44rem; font-size: var(--smog-text-lg); line-height: 1.55; }

/* -------------------------------------------------------- entry cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--smog-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--smog-space-3);
  padding: var(--smog-space-5);
  background: linear-gradient(160deg, rgba(28, 31, 35, 0.92), rgba(21, 23, 26, 0.92));
  border: 1px solid var(--smog-line);
  border-radius: var(--smog-radius-lg);
  transition: border-color var(--smog-dur) var(--smog-ease), background-color var(--smog-dur) var(--smog-ease);
}
.card:hover, .card:focus-within {
  border-color: rgba(255, 181, 71, 0.45);
  background: linear-gradient(160deg, rgba(36, 33, 28, 0.95), rgba(21, 23, 26, 0.95));
}
.card :is(h2, h3) {
  font-size: var(--smog-text-xl);
  font-stretch: 82%;
  line-height: 1.1;
  margin: 0;
}
.card :is(h2, h3) a { color: var(--smog-text); text-decoration: none; }
.card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card :is(h2, h3) a:focus-visible { outline: none; }
.card:has(a:focus-visible) { outline: 2px solid var(--smog-amber); outline-offset: 3px; }
.card-by { margin: 0; font-size: var(--smog-text-sm); color: var(--smog-muted); }
.card-by span { color: var(--smog-text); }
.card-summary { margin: 0; color: #cfcac0; font-size: var(--smog-text-sm); line-height: 1.55; }
.card-needs { margin: 0; font-size: var(--smog-text-sm); color: var(--smog-muted); }
.card-needs b { font-weight: 500; color: var(--smog-haze); }
.card .pills { margin-top: auto; padding-top: var(--smog-space-2); }
.card.is-revoked { opacity: 0.7; }
.card.is-revoked :is(h2, h3) a { text-decoration: line-through; text-decoration-color: var(--smog-bad); text-decoration-thickness: 2px; }

/* Empty states read like a sign in fog: quiet, direct, with one action. */
.empty {
  padding: var(--smog-space-7) var(--smog-space-6);
  border: 1px dashed var(--smog-line);
  border-radius: var(--smog-radius-lg);
  background: radial-gradient(40rem 14rem at 20% 0%, rgba(143, 163, 176, 0.07), transparent 70%);
  max-width: 48rem;
}
.empty h3 { font-size: var(--smog-text-xl); margin-bottom: var(--smog-space-2); }
.empty p { color: var(--smog-muted); max-width: 40rem; }
.empty p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- screening */

.screening {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--smog-space-7) var(--smog-space-8);
  align-items: start;
}
.screening-intro { position: sticky; top: var(--smog-space-6); }
.screening-intro p { color: #cfcac0; }

/* A sequence: the track starts foggy and ends in sharp sodium light. */
.stages {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stage;
  position: relative;
}
.stages::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 2px;
  background: linear-gradient(to bottom, rgba(143, 163, 176, 0.15), rgba(143, 163, 176, 0.5) 60%, var(--smog-amber));
}
.stage {
  counter-increment: stage;
  position: relative;
  padding: 0 0 var(--smog-space-6) 3.75rem;
}
.stage:last-child { padding-bottom: 0; }
.stage::before {
  content: counter(stage);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--smog-bg-2);
  border: 1px solid rgba(143, 163, 176, 0.35);
  color: var(--smog-haze);
  font: 700 var(--smog-text-md) / 1 var(--smog-font-display);
}
.stage h3 { font-size: var(--smog-text-lg); margin: 0.35rem 0 var(--smog-space-1); }
.stage .tools { margin: 0 0 var(--smog-space-2); font-size: var(--smog-text-sm); color: var(--smog-haze); }
.stage p:last-child { margin: 0; color: #cfcac0; font-size: var(--smog-text-md); }
.stage-human::before {
  background: var(--smog-amber);
  border-color: var(--smog-amber);
  color: var(--smog-amber-ink);
  box-shadow: 0 0 0 6px var(--smog-glow), 0 0 40px 6px var(--smog-glow-strong);
}
.stage-human h3 { color: var(--smog-amber); }

.after {
  margin-top: var(--smog-space-7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--smog-space-5) var(--smog-space-6);
  padding-top: var(--smog-space-6);
  border-top: 1px solid var(--smog-line);
}
.after h3 { font-size: var(--smog-text-lg); margin-bottom: var(--smog-space-2); }
.after p { color: #cfcac0; margin: 0; font-size: var(--smog-text-md); }

/* -------------------------------------------------------------- notes */

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--smog-space-7) var(--smog-space-8);
}
.note h2 { font-size: var(--smog-text-2xl); }
.note p { color: #cfcac0; max-width: 34rem; }
.note-own { position: relative; padding-left: var(--smog-space-5); border-left: 2px solid var(--smog-amber); }

/* ---------------------------------------------------------- page head */

.page-head {
  position: relative;
  padding-block: var(--smog-space-7) var(--smog-space-6);
}
.page-head::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--smog-space-9));
  right: 4%;
  width: min(36rem, 70vw);
  height: 26rem;
  background: radial-gradient(50% 60% at 60% 20%, rgba(255, 181, 71, 0.1), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.page-head h1 { max-width: 20ch; }
.page-head .lead { font-size: var(--smog-text-lg); color: #d4cfc5; max-width: 44rem; line-height: 1.55; margin: 0; }

/* -------------------------------------------------------------- prose */

.prose { max-width: var(--smog-measure); }
.prose h2 { font-size: var(--smog-text-2xl); margin-top: var(--smog-space-7); }
.prose h3 { font-size: var(--smog-text-lg); margin-top: var(--smog-space-6); }
.prose h4, .prose h5, .prose h6 { font-size: var(--smog-text-md); margin-top: var(--smog-space-5); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 var(--smog-space-4); }
.prose li { margin-bottom: var(--smog-space-2); }
.prose li::marker { color: var(--smog-haze); }
.prose code { background: var(--smog-surface); padding: 0.1em 0.35em; border-radius: var(--smog-radius-sm); }
.prose pre {
  background: var(--smog-bg-2);
  border: 1px solid var(--smog-line);
  padding: var(--smog-space-4);
  border-radius: var(--smog-radius-md);
  overflow-x: auto;
  line-height: 1.5;
}
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: 0 0 var(--smog-space-4); padding-left: var(--smog-space-4); border-left: 2px solid var(--smog-haze-dim); color: var(--smog-muted); }
.prose table { border-collapse: collapse; margin-bottom: var(--smog-space-4); font-size: var(--smog-text-sm); }
.prose th, .prose td { border: 1px solid var(--smog-line); padding: var(--smog-space-2) var(--smog-space-3); text-align: left; }
.prose hr { border: 0; border-top: 1px solid var(--smog-line); margin: var(--smog-space-6) 0; }
.prose strong { color: #f5f0e6; }

.cmd {
  position: relative;
  margin: 0 0 var(--smog-space-4);
  padding: var(--smog-space-4) var(--smog-space-5);
  background: var(--smog-bg-2);
  border: 1px solid var(--smog-line);
  border-radius: var(--smog-radius-md);
  overflow-x: auto;
  font-size: var(--smog-text-sm);
  line-height: 1.7;
  color: var(--smog-text);
}
.cmd .p { color: var(--smog-amber); user-select: none; }
.cmd .c { color: var(--smog-muted); }

/* FAQ uses native disclosure: expanding answers is the one interaction. */
.faq { max-width: var(--smog-measure); display: grid; gap: var(--smog-space-3); }
.faq details {
  border: 1px solid var(--smog-line);
  border-radius: var(--smog-radius-md);
  background: rgba(21, 23, 26, 0.7);
}
.faq details[open] { border-color: var(--smog-haze-dim); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--smog-space-4) var(--smog-space-5);
  font: 650 var(--smog-text-lg) / 1.3 var(--smog-font-display);
  font-stretch: 90%;
  display: flex;
  justify-content: space-between;
  gap: var(--smog-space-4);
  border-radius: var(--smog-radius-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--smog-font-body);
  font-weight: 400;
  color: var(--smog-amber);
  transition: transform var(--smog-dur) var(--smog-ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 var(--smog-space-5) var(--smog-space-4); color: #cfcac0; }
.faq .answer > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- catalog */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--smog-space-4) var(--smog-space-5);
  padding: var(--smog-space-4) var(--smog-space-5);
  margin-bottom: var(--smog-space-5);
  background: rgba(21, 23, 26, 0.85);
  border: 1px solid var(--smog-line);
  border-radius: var(--smog-radius-lg);
}
.filters[hidden] { display: none; }
.field { display: grid; gap: var(--smog-space-1); }
.field-grow { flex: 1 1 16rem; }
.field label, .field .label { font-size: var(--smog-text-sm); font-weight: 500; color: var(--smog-muted); }

input[type="search"], input[type="text"], input[type="url"], input[type="email"], select, textarea {
  width: 100%;
  font: 400 var(--smog-text-md) / 1.4 var(--smog-font-body);
  color: var(--smog-text);
  background: var(--smog-bg);
  border: 1px solid var(--smog-line);
  border-radius: var(--smog-radius-md);
  padding: 0.65rem 0.85rem;
  transition: border-color var(--smog-dur-fast) var(--smog-ease), box-shadow var(--smog-dur-fast) var(--smog-ease);
}
select { padding-right: 2rem; }
textarea { min-height: 8rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--smog-amber);
  box-shadow: 0 0 0 3px var(--smog-glow);
}
::placeholder { color: #6d6962; }

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--smog-space-2);
  font-size: var(--smog-text-sm);
  padding-block: 0.65rem;
  cursor: pointer;
}
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--smog-amber); margin: 0; }

.result-count { font-size: var(--smog-text-sm); color: var(--smog-muted); margin: 0 0 var(--smog-space-4); min-height: 1.6em; }
.no-matches[hidden] { display: none; }

.kind-legend {
  margin-top: var(--smog-space-8);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--smog-space-4) var(--smog-space-6);
  font-size: var(--smog-text-sm);
}
.kind-legend dt { font-weight: 600; color: var(--smog-text); }
.kind-legend dd { margin: 0; color: var(--smog-muted); }

/* --------------------------------------------------------------- entry */

.crumbs { font-size: var(--smog-text-sm); margin-bottom: var(--smog-space-5); color: var(--smog-muted); }
.crumbs a { color: var(--smog-muted); }

.banner-revoked {
  display: grid;
  gap: var(--smog-space-1);
  padding: var(--smog-space-4) var(--smog-space-5);
  margin-bottom: var(--smog-space-6);
  border: 1px solid rgba(255, 107, 94, 0.55);
  border-left-width: 4px;
  border-radius: var(--smog-radius-md);
  background: rgba(255, 107, 94, 0.08);
}
.banner-revoked strong { color: var(--smog-bad); font-size: var(--smog-text-lg); font-family: var(--smog-font-display); }
.banner-revoked p { margin: 0; color: #e8d6d3; }

.entry-head { padding-block: var(--smog-space-6) var(--smog-space-7); position: relative; }
.entry-head::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--smog-space-9));
  right: 0;
  width: min(40rem, 80vw);
  height: 28rem;
  background: radial-gradient(50% 55% at 60% 25%, rgba(255, 181, 71, 0.11), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.entry-head.is-revoked::before { background: radial-gradient(50% 55% at 60% 25%, rgba(255, 107, 94, 0.08), transparent 70%); }
.entry-head h1 { font-stretch: 80%; max-width: 18ch; margin-bottom: var(--smog-space-3); }
.entry-credit {
  font-size: var(--smog-text-xl);
  font-family: var(--smog-font-display);
  font-stretch: 90%;
  font-weight: 500;
  margin: 0 0 var(--smog-space-4);
  color: var(--smog-muted);
}
.entry-credit a { color: var(--smog-text); text-decoration-color: var(--smog-amber); }
.entry-summary { font-size: var(--smog-text-lg); max-width: 44rem; color: #d4cfc5; line-height: 1.55; }
.entry-header-img { margin-top: var(--smog-space-6); border-radius: var(--smog-radius-lg); border: 1px solid var(--smog-line); }

.entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: var(--smog-space-7) var(--smog-space-8);
  align-items: start;
}
.entry-main > section + section { margin-top: var(--smog-space-8); }
.entry-main h2 { font-size: var(--smog-text-2xl); }
.entry-aside { display: grid; gap: var(--smog-space-5); }

.panel {
  padding: var(--smog-space-5);
  border: 1px solid var(--smog-line);
  border-radius: var(--smog-radius-md);
  background: rgba(21, 23, 26, 0.85);
}
.panel h2 {
  font-size: var(--smog-text-md);
  font-family: var(--smog-font-body);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--smog-space-3);
  color: var(--smog-text);
}
.panel p, .panel li { font-size: var(--smog-text-sm); }
.panel > :last-child { margin-bottom: 0; }
.panel + p { margin-top: var(--smog-space-4); }
.panel ul { list-style: none; margin: 0 0 var(--smog-space-3); padding: 0; display: grid; gap: var(--smog-space-3); }

.panel-install {
  border-color: rgba(255, 181, 71, 0.45);
  background: linear-gradient(170deg, rgba(255, 181, 71, 0.09), rgba(21, 23, 26, 0.9) 55%);
}
.panel-install .btn { width: 100%; justify-content: center; }
.panel-install .version { font-size: var(--smog-text-sm); color: var(--smog-muted); margin: var(--smog-space-3) 0 var(--smog-space-2); }
.panel-install .version strong { color: var(--smog-text); }

.req-name { font-weight: 600; color: var(--smog-text); display: block; }
.req-meta { color: var(--smog-muted); display: block; }
.req-hashes { margin-top: var(--smog-space-2); display: grid; gap: var(--smog-space-1); }
.req-hashes code { font-size: var(--smog-text-xs); color: var(--smog-haze); overflow-wrap: anywhere; word-break: break-all; }
.own-copy {
  margin: var(--smog-space-3) 0 0;
  padding-top: var(--smog-space-3);
  border-top: 1px solid var(--smog-line);
  color: #d9cdb8;
}

.status-line { display: flex; align-items: center; gap: var(--smog-space-3); flex-wrap: wrap; margin-bottom: var(--smog-space-3); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--smog-space-2) var(--smog-space-4); margin: 0; font-size: var(--smog-text-sm); }
.facts dt { color: var(--smog-muted); }
.facts dd { margin: 0; color: var(--smog-text); min-width: 0; overflow-wrap: anywhere; }

.versions { display: grid; gap: var(--smog-space-3); list-style: none; margin: 0; padding: 0; }
.version-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--smog-space-2) var(--smog-space-5);
  padding: var(--smog-space-4) var(--smog-space-5);
  border: 1px solid var(--smog-line);
  border-radius: var(--smog-radius-md);
  background: rgba(21, 23, 26, 0.6);
}
.version-row.is-latest { border-color: var(--smog-haze-dim); }
.version-row.is-revoked { border-color: rgba(255, 107, 94, 0.45); }
.version-name { font: 700 var(--smog-text-lg) / 1.2 var(--smog-font-display); font-stretch: 88%; }
.version-name small { display: block; font: 400 var(--smog-text-xs) / 1.6 var(--smog-font-body); color: var(--smog-muted); }
.version-body { min-width: 0; font-size: var(--smog-text-sm); }
.version-body p { margin: 0 0 var(--smog-space-2); }
.artifacts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--smog-space-2); }
.artifacts li { min-width: 0; }
.artifacts code { font-size: var(--smog-text-xs); color: var(--smog-haze); overflow-wrap: anywhere; word-break: break-all; }

.scan {
  display: grid;
  gap: var(--smog-space-2);
  padding: var(--smog-space-5);
  border-radius: var(--smog-radius-md);
  border: 1px solid var(--smog-line);
  background: rgba(21, 23, 26, 0.6);
}
.scan-verdict { font-weight: 600; color: var(--smog-ok); margin: 0; }
.scan-verdict.is-review { color: var(--smog-amber); }
.scan p { margin: 0; font-size: var(--smog-text-sm); }

.tags { display: flex; flex-wrap: wrap; gap: var(--smog-space-2); list-style: none; padding: 0; margin: var(--smog-space-4) 0 0; }
.tags li { font-size: var(--smog-text-xs); color: var(--smog-muted); }
.tags li::before { content: "#"; color: var(--smog-haze-dim); }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--smog-space-3); list-style: none; padding: 0; margin: 0; }
.shots img { border-radius: var(--smog-radius-md); border: 1px solid var(--smog-line); }

/* --------------------------------------------------------------- forms */

.form { display: grid; gap: var(--smog-space-5); max-width: 40rem; }
.form .hint { font-size: var(--smog-text-sm); color: var(--smog-muted); margin: 0; }
.form .req { color: var(--smog-amber); }
.form-status { margin: 0; font-size: var(--smog-text-sm); min-height: 1.5em; }
.form-status.is-error { color: var(--smog-bad); }
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--smog-space-7) var(--smog-space-8);
  align-items: start;
}
.aside-list { padding-left: 1.2rem; margin: 0; color: #cfcac0; font-size: var(--smog-text-sm); }
.aside-list li { margin-bottom: var(--smog-space-2); }

/* ---------------------------------------------------------- download */

.builds { list-style: none; margin: 0 0 var(--smog-space-6); padding: 0; display: grid; gap: var(--smog-space-3); }
.build {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--smog-space-3) var(--smog-space-5);
  padding: var(--smog-space-4) var(--smog-space-5);
  border: 1px solid var(--smog-line);
  border-radius: var(--smog-radius-md);
  background: rgba(21, 23, 26, 0.7);
}
.build:first-child { border-color: rgba(255, 181, 71, 0.45); }
.build h3 { margin: 0; font-size: var(--smog-text-lg); }
.build p { margin: 0; font-size: var(--smog-text-sm); color: var(--smog-muted); }
.build .hash { grid-column: 1 / -1; }

/* -------------------------------------------------------------- 404 */

.lost { padding-block: var(--smog-space-9); }
.lost h1 { font-size: var(--smog-text-hero); font-stretch: 78%; color: var(--smog-haze); opacity: 0.85; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 60rem) {
  .screening, .entry-grid, .two-col { grid-template-columns: minmax(0, 1fr); }
  .screening-intro { position: static; }
  .entry-grid { display: flex; flex-direction: column; }
  .entry-aside { order: -1; width: 100%; }
  .entry-main { width: 100%; }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer .wrap > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  h1 { font-size: var(--smog-text-3xl); }
  h2 { font-size: var(--smog-text-2xl); }
  .section { padding-top: var(--smog-space-8); }
  .site-header .wrap { padding-block: var(--smog-space-4); }
  .brand img { height: 1.9rem; }
  .site-nav { width: 100%; }
  .site-nav ul { margin-inline: calc(-1 * var(--smog-space-3)); }
  .hero { padding-top: calc(var(--smog-space-9) + 5.5rem); padding-bottom: var(--smog-space-7); }
  .hero h1 { margin-bottom: var(--smog-space-5); }
  .hero-lead { font-size: var(--smog-text-md); margin-bottom: var(--smog-space-6); }
  .lamp { --lamp-x: 78%; --lamp-y: 9.2rem; --fw: 5rem; }
  .lamp-cone { left: calc(var(--lamp-x) - 70vw); width: 140vw; }
  .stage { padding-left: 3.25rem; }
  .version-row, .build { grid-template-columns: minmax(0, 1fr); }
  .entry-credit { font-size: var(--smog-text-lg); }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body::before, body::after, .lamp, .site-nav, .filters { display: none; }
  html { background: #fff; color: #000; }
}