/* The blog, About, Privacy and Terms in the night look (docs/design-system.md; scripts/blog/night/theme.mjs).
   Near-black ground, Mona Sans for reading and display (Expanded for headings), Departure Mono for the small details.
   Light first, never the box: an action is a lit word with a tube under it, the active topic is a light line, and the
   cards are calm rows whose light line draws in on hover. Every colour is from the logo's palette (the same values as
   src/styles/tokens.css, which a static page can't import). Text that isn't a light never glows. Nothing here
   animates anything but transform and opacity, apart from small colour and text-shadow eases on lit words. */

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/fonts/MonaSans-Variable-v2.000.woff2) format("woff2");
}

@font-face {
  font-family: "Departure Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/DepartureMono-Regular-v1.500.woff2) format("woff2");
}

:root {
  --color-bg: #04070B;
  --color-surface: #0B1117;
  --color-line: #222C38;
  --color-line-strong: #606B71;
  --color-text: #F6F6EB;
  --color-text-2: #CCD2D7;
  --color-muted: #949CA5;
  --color-accent: #628EDE;
  --light-newest: #FFEFAC;
  --heat-3: #4867B8;
  --heat-4: #776ECA;
  --light-live: #BC73D2;
  --heat-5: #A670D1;
  --heat-7: #F87CA1;
  --heat-8: #FE9177;
  --heat-6: #D476C3;
  --heat-9: #FFBC6A;
  --font-display: "Mona Sans", system-ui, sans-serif;
  --font-ui: "Mona Sans", system-ui, sans-serif;
  --font-mono: "Departure Mono", ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-light: cubic-bezier(0.16, 1, 0.3, 1);
  /* A light's colours, as the kit's warm neon (src/styles/neon.css): the tube, its white-hot core, its outer halo. */
  --nc: var(--heat-9);
  --nc-core: var(--light-newest);
  --nc-far: var(--heat-8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--color-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text-2);
  font: 400 18px/1.7 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--color-text); }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

.site-header, .site-footer, main, .related {
  width: min(100% - 40px, 760px);
  margin: 0 auto;
}

/* A page arrives: it fades and lifts in (transform and opacity; reduced motion fades only). */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
}
@keyframes fade {
  from { opacity: 0; }
}
main, .related { animation: rise 420ms var(--ease-out) both; }
.related { animation-delay: 80ms; }

/* ── Header: the lit mark and two words ── */
.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 76px;
  padding: 16px 0 8px;
}
.site-header .brand { grid-column: 2; grid-row: 1; padding-right: 0; justify-content: center; }
.site-header nav { display: contents; }
.site-header nav a:not(.cta) { grid-column: 1; grid-row: 1; justify-self: start; }
.site-header nav .cta { grid-column: 3; grid-row: 1; justify-self: end; }

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding-right: 24px;
}

/* The logo in the light theme (src/ui/LitMark): the mark's box is 40 px wide, and its light reaches 36% past it on each
   side (0.36 / (391 / 654.78) = 60.29% of the box's height upward). Screened onto the dark, so only the light lands. */
.mark {
  position: relative;
  display: block;
  flex: none;
  width: 40px;
  aspect-ratio: 654.78 / 391;
}

.mark img {
  position: absolute;
  top: -60.29%;
  left: -36%;
  width: 172%;
  max-width: none;
  height: auto;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.mark-rest { animation: fade 800ms var(--ease-out) both; }

/* The breath: a hotter render comes up to half and back, slowly (6.4 s each way). */
@keyframes breathe {
  from { opacity: 0; }
  to { opacity: 0.5; }
}
.mark-hot { opacity: 0; animation: breathe 6.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }

.site-header nav a:not(.cta) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--nc-core);
  font: 500 17px/1.2 var(--font-ui);
  text-decoration: none;
  text-shadow:
    0 0 0.5px var(--nc),
    0 0 3px color-mix(in oklab, var(--nc) 50%, transparent),
    0 0 10px color-mix(in oklab, var(--nc-far) 22%, transparent);
}
.site-header nav a:not(.cta)::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--nc) 22%, var(--nc-core) 50%, var(--nc) 78%, transparent);
  transform: translateX(-50%);
  animation: draw 520ms var(--ease-light) 240ms both;
}

/* ── A lit word with a tube under it (the kit's Button heat) ── */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-5);
  color: var(--nc-core);
  font: 500 16px/1.2 var(--font-ui);
  letter-spacing: 0.005em;
  text-decoration: none;
  text-shadow: 0 0 1px var(--nc);
  text-shadow:
    0 0 0.5px var(--nc),
    0 0 3px color-mix(in oklab, var(--nc) 50%, transparent),
    0 0 10px color-mix(in oklab, var(--nc-far) 22%, transparent);
  transition:
    transform var(--dur-fast) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    text-shadow var(--dur-base) var(--ease-out);
  --tube-y: 9px;
}
.cta:hover { color: var(--nc-core); }
.cta:active { transform: scale(0.97); }
.cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 14px; }

/* The word's pool of light on the floor under it: faint at rest, brighter on hover and press. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 50% 100%, color-mix(in oklab, var(--nc) 20%, transparent), transparent);
  opacity: 0.45;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.cta:hover::before, .cta:active::before { opacity: 1; }

/* The tube: hot in the middle, its colour falling off along the wire. It draws out when the page arrives. */
@keyframes draw {
  from { opacity: 0; transform: translateX(-50%) scaleX(0.2); }
}
.cta::after {
  content: "";
  position: absolute;
  bottom: var(--tube-y);
  left: 50%;
  width: min(58%, 10em);
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--nc) 22%, var(--nc-core) 50%, var(--nc) 78%, transparent);
  transform: translateX(-50%);
  animation: draw 520ms var(--ease-light) 240ms both;
  pointer-events: none;
}

.site-header .cta {
  min-height: 44px;
  padding: 0 2px;
  font-size: 17px;
  --tube-y: 6px;
}
.site-header .cta::before { content: none; }
.site-header .cta::after { width: 100%; }

/* ── Post ── */
.post { padding: 20px 0 8px; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  color: var(--color-muted);
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-muted);
  text-decoration: none;
}
.crumbs a:hover { color: var(--color-text); }

h1, h2, h3 {
  color: var(--color-text);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.post h1 { margin: 16px 0 10px; font: 600 clamp(25px, 5.6vw, 34px)/1.22 var(--font-ui); letter-spacing: -0.01em; }
.prose > h1 { margin-bottom: 24px; }

.post-meta, .prose .post-meta {
  margin: 0 0 32px;
  color: var(--color-muted);
  font: 400 13px/1.6 var(--font-ui);
}

.byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.face {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
}
.face img { width: 26px; height: auto; mix-blend-mode: screen; }
.who { display: grid; flex: 1; gap: 2px; min-width: 0; }
.name {
  color: var(--color-accent);
  font: 680 15px/1.2 var(--font-display);
  font-stretch: 125%;
  letter-spacing: 0.02em;
  text-shadow: 0 0 1px color-mix(in oklab, var(--color-accent) 70%, transparent), 0 0 8px color-mix(in oklab, var(--color-accent) 45%, transparent);
}
.community {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  color: var(--color-text-2);
  font: 400 13px/1.3 var(--font-ui);
  text-decoration: none;
}
.community:hover { color: var(--color-text); }
.community svg, .card-category svg { flex: none; color: var(--c); filter: drop-shadow(0 0 3px color-mix(in oklab, var(--c) 45%, transparent)); }
.when { flex: none; align-self: flex-start; padding-top: 4px; color: var(--color-muted); font: 400 13px/1 var(--font-ui); white-space: nowrap; }

/* Each topic's light: a step of the logo's ramp. */
[data-cat] { --c: var(--color-accent); }
[data-cat="approaching"] { --c: var(--heat-9); }
[data-cat="conversation"] { --c: var(--heat-5); }
[data-cat="practice"] { --c: var(--heat-8); }
[data-cat="the-game"] { --c: var(--heat-3); }
[data-cat="people"] { --c: var(--heat-7); }

.prose { max-width: 68ch; color: var(--color-text); font-size: 17px; line-height: 1.65; }
.prose h2 { margin: 48px 0 12px; font: 600 22px/1.3 var(--font-ui); letter-spacing: -0.01em; }
.prose h3 { margin: 32px 0 8px; font: 600 18px/1.35 var(--font-ui); letter-spacing: -0.005em; }
.prose p, .prose ul, .prose ol { margin: 0 0 20px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--color-muted); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose a { color: var(--color-accent); }
.prose a:hover { color: var(--color-text); }
.prose blockquote {
  margin: 28px 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--color-line-strong);
  color: var(--color-text);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table {
  display: block;
  width: 100%;
  margin: 0 0 28px;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}
.prose th, .prose td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.prose th {
  color: var(--color-muted);
  font: 400 12px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font: 400 0.88em var(--font-mono);
}
.prose pre {
  margin: 0 0 28px;
  padding: 4px 0 4px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-left: 2px solid var(--color-line-strong);
  font: 400 14px/1.6 var(--font-mono);
  white-space: pre;
}
.prose pre code { padding: 0; border-radius: 0; background: none; font: inherit; }
.prose hr { margin: 44px 0; border: 0; border-top: 1px solid var(--color-line); }

/* After a post: one line and a lit word, over a hairline. */
.post-cta { margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid var(--color-line); }
.post-cta p { max-width: 36ch; margin: 0 0 8px; color: var(--color-text); font-weight: 500; line-height: 1.5; }
.post-cta .cta { margin-left: calc(var(--space-5) * -1); }

/* ── Listing ── */
.listing { padding: 20px 0 8px; }
.listing h1 { margin: 4px 0 12px; font-size: clamp(26px, 6vw, 40px); line-height: 1.1; }
.intro { max-width: 60ch; margin: 0 0 24px; color: var(--color-muted); font-size: 16px; line-height: 1.55; }

/* The topics, as tabs: plain words in a row on a hairline; the current one is lit and a tube draws under it. */
.chips {
  display: flex;
  gap: 0 var(--space-5);
  margin-bottom: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--color-line);
}
.chips::-webkit-scrollbar { display: none; }
.chips a {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  color: var(--color-muted);
  font: 500 15px/1.2 var(--font-ui);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out), text-shadow var(--dur-base) var(--ease-out);
}
.chips a:hover { color: var(--color-text-2); }
.chips a:focus-visible { outline-offset: -2px; }
.chips a[aria-current="page"] {
  color: var(--nc-core);
  text-shadow: 0 0 1px var(--nc);
  text-shadow: 0 0 0.5px var(--nc), 0 0 3px color-mix(in oklab, var(--nc) 45%, transparent);
}
.chips a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--nc) 20%, var(--nc-core) 50%, var(--nc) 80%, transparent);
  animation: grow 520ms var(--ease-light) 160ms both;
}
@keyframes grow {
  from { opacity: 0; transform: scaleX(0.2); }
}

/* Rows as the forum draws them (src/features/forum/TopicRow): no card, a hairline between, 20 px gutters that run to the
   screen's edge on a phone, a faint wash on hover and press. */
.cards { display: grid; margin: 0 -20px; }
.card a {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 20px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  -webkit-tap-highlight-color: transparent;
  animation: rowIn 320ms var(--ease-out) both;
}
.card a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .card a:hover::before { opacity: 0.025; } }
.card a:active::before { opacity: 0.045; }
.card a:focus-visible { outline-offset: -2px; border-radius: 0; }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
}
.card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-category { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-2); font: 400 13px/1.3 var(--font-ui); }
.card-when { color: var(--color-muted); font: 400 13px/1 var(--font-ui); white-space: nowrap; }
.card h2 { margin: 2px 0 0; color: var(--color-text); font: 600 18px/1.3 var(--font-ui); letter-spacing: -0.005em; text-wrap: pretty; }
.card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-2);
  font: 400 15px/1.5 var(--font-ui);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.card-meta { color: var(--color-muted); font: 400 14px/1.3 var(--font-ui); }
.card-meta .num { color: var(--color-text-2); font: 400 13px/1 var(--font-mono); letter-spacing: 0.02em; }

/* ── The directory (/blog/) ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The search: one line on a hairline, its light line drawing in while you type. */
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-muted);
  transition: border-color var(--dur-base) var(--ease-out);
}
.search:focus-within { border-color: var(--color-line-strong); }
.search svg { flex: none; }
.search input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--color-text);
  font: 400 16px/1.2 var(--font-ui);
}
.search input::placeholder { color: var(--color-muted); }
.search input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.4); }

.dir-label {
  margin: 28px 0 0;
  color: var(--color-muted);
  font: 400 13px/1.3 var(--font-ui);
  font-stretch: normal;
  letter-spacing: 0;
}
.latest .cards { margin-top: 4px; }

.directory { display: grid; gap: 8px; margin-top: 28px; }
.dir-topic { padding: 28px 0 8px; border-top: 1px solid var(--color-line); }
.dir-topic h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  font: 400 24px/1.15 var(--font-display);
  font-stretch: 125%;
  letter-spacing: -0.01em;
}
.dir-topic h2 a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  text-decoration: none;
}
.dir-topic h2 a:hover { color: var(--color-text); text-shadow: 0 0 1px color-mix(in oklab, var(--c) 70%, transparent), 0 0 10px color-mix(in oklab, var(--c) 40%, transparent); }

.dir-topic .count { color: var(--color-muted); font: 400 13px/1 var(--font-mono); letter-spacing: 0.02em; }
.dir-blurb { max-width: 60ch; margin: 8px 0 18px; color: var(--color-muted); font-size: 15px; line-height: 1.5; }

.dir-groups { display: grid; gap: 20px 40px; }
@media (min-width: 700px) { .dir-groups { grid-template-columns: 1fr 1fr; } }
.dir-group h3 {
  margin: 0 0 4px;
  color: var(--color-text-2);
  font: 600 14px/1.3 var(--font-ui);
  font-stretch: normal;
  letter-spacing: 0;
}
.dir-group h3::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 9px 1px 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 6px color-mix(in oklab, var(--c) 70%, transparent);
  vertical-align: middle;
}
.dir-group ul { margin: 0; padding: 0; list-style: none; }
.dir-group li a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
  font: 500 15.5px/1.35 var(--font-ui);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.dir-group li:last-child a { border-bottom: 0; }
@media (hover: hover) {
  .dir-group li a:hover { padding-left: 6px; color: var(--color-text); text-shadow: 0 0 8px color-mix(in oklab, var(--c) 35%, transparent); }
}
.dir-group li a:focus-visible { outline-offset: 2px; }
.no-results { margin: 32px 0; color: var(--color-muted); font-size: 16px; }
[hidden] { display: none !important; }

/* A topic's page: jump links to its sections, then each section's rows. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
}
.jump a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text-2);
  font: 500 14px/1 var(--font-ui);
  text-decoration: none;
}
.jump a:hover { border-color: var(--color-line-strong); color: var(--color-text); }
.jump .num { color: var(--color-muted); font: 400 12px/1 var(--font-mono); }
.section-block { scroll-margin-top: 16px; }
.section-title {
  margin: 36px 0 4px;
  color: var(--color-text);
  font: 400 22px/1.2 var(--font-display);
  font-stretch: 125%;
  letter-spacing: -0.01em;
}

.related { padding: 44px 0 8px; }
.related > h2 {
  margin: 0 0 4px;
  color: var(--color-muted);
  font: 400 12px/1.4 var(--font-mono);
  font-stretch: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Footer ── */
.site-footer { margin-top: 64px; padding: 16px 0 48px; border-top: 1px solid var(--color-line); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-muted);
  text-decoration: none;
}
.site-footer a:hover { color: var(--color-text); }
.site-footer .topics a { font: 500 15px/1.2 var(--font-ui); }
.site-footer .site-links a {
  font: 400 12px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  body { font-size: 17px; }
  .prose h2 { font-size: 22px; }
  .prose h3 { font-size: 19px; }
  .site-header .cta { font-size: 15px; }
  .site-header nav a:not(.cta) { font-size: 16px; }
}

/* Reduced motion: no breath, no lift, no draw; everything comes up as a fade. */
@media (prefers-reduced-motion: reduce) {
  main, .related { animation-name: fade; }
  .mark-hot { opacity: 0; animation: none; }
  .cta::after, .chips a[aria-current="page"]::after, .site-header nav a:not(.cta)::after { animation-name: fade; }
  .card a { animation-name: fade; }
}

/* On a topic's own page the topic line would repeat on every row: keep only the date. */
.section-block .card-category { display: none; }
.section-block .card-top { justify-content: flex-end; }

/* Every topic at once: chips that wrap, each with its category's light as a dot and its count. */
.topic-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
}
.topic-cloud a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text-2);
  font: 500 14px/1 var(--font-ui);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.topic-cloud a[data-cat]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 6px color-mix(in oklab, var(--c) 70%, transparent);
}
.topic-cloud a:hover { border-color: var(--color-line-strong); color: var(--color-text); }
.topic-cloud a[aria-current="page"] {
  border-color: color-mix(in oklab, var(--nc) 55%, var(--color-line));
  color: var(--nc-core);
  text-shadow: 0 0 0.5px var(--nc), 0 0 3px color-mix(in oklab, var(--nc) 45%, transparent);
}
.topic-cloud .num { color: var(--color-muted); font: 400 12px/1 var(--font-mono); }

/* The compact row: a title, and its description on one quiet line. */
.rows { margin: 8px 0 0; padding: 0; list-style: none; }
.row a {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
}
.row-title { color: var(--color-text); font: 600 17px/1.3 var(--font-ui); letter-spacing: -0.005em; }
.row-desc {
  overflow: hidden;
  color: var(--color-muted);
  font: 400 14.5px/1.45 var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .row a:hover .row-title { text-shadow: 0 0 8px color-mix(in oklab, var(--c) 40%, transparent); }
}
.section-title a, .dir-group h3 a { color: inherit; text-decoration: none; }
.section-title a:hover, .dir-group h3 a:hover { color: var(--color-text); }
.topic-parent { margin: 0 0 4px; }
.topic-parent a { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-2); font: 400 14px/1.3 var(--font-ui); text-decoration: none; }
.topic-parent svg { color: var(--c); filter: drop-shadow(0 0 3px color-mix(in oklab, var(--c) 45%, transparent)); }
.more-topics { margin-top: 48px; padding-top: 4px; border-top: 1px solid var(--color-line); }
.more-topics .topic-cloud { margin-top: 12px; }
.dir-topic .dir-groups { margin-top: 18px; }
.listing h1 + .rows { margin-top: 12px; }
.rows .row:last-child a { border-bottom: 0; }

/* ── Contour Caps (scripts/blog/contour.mjs), the second style: titles and topic names drawn as rims and cores, the rims
   lit along the word from the mark's blue through violet to orchid, an ivory core, and the tab's glow. Under a topic
   (data-cat) the rims take that topic's light. ── */
.contour-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.contour { display: inline; }
.contour-art { display: inline-block; overflow: visible; vertical-align: -0.12em; margin-right: 0.18em; }
.contour-art:last-child { margin-right: 0; }
.contour-core { fill: var(--color-text); }
.contour .cs0 { stop-color: color-mix(in oklab, var(--heat-3) 55%, var(--heat-4)); }
.contour .cs1 { stop-color: var(--heat-4); }
.contour .cs2 { stop-color: var(--light-live); }
.contour-art {
  filter:
    drop-shadow(0 0 1px color-mix(in oklab, var(--heat-3) 55%, var(--heat-4)))
    drop-shadow(0 0 6px color-mix(in oklab, var(--heat-4) 70%, transparent))
    drop-shadow(0 0 16px color-mix(in oklab, var(--heat-4) 40%, transparent));
}
[data-cat] .contour .cs0, [data-cat] .contour .cs2 { stop-color: var(--c); }
[data-cat] .contour .cs1 { stop-color: color-mix(in oklab, var(--c) 70%, var(--light-newest)); }
[data-cat] .contour-art {
  filter:
    drop-shadow(0 0 1px var(--c))
    drop-shadow(0 0 6px color-mix(in oklab, var(--c) 65%, transparent))
    drop-shadow(0 0 16px color-mix(in oklab, var(--c) 35%, transparent));
}
.contour-title { margin: 4px 0 14px; font-size: clamp(30px, 8.4vw, 54px); line-height: 1.25; }
.dir-topic h2 { font-size: 30px; }
.dir-topic h2 a { gap: 0; }
.dir-topic h2 a:hover { text-shadow: none; }
.dir-topic h2 a:hover .contour-art { filter: drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 9px color-mix(in oklab, var(--c) 80%, transparent)) drop-shadow(0 0 22px color-mix(in oklab, var(--c) 50%, transparent)); }

/* ── Lit, the first style: a word in its light (the app's lit word as a static page can draw it). Under a topic it
   glows in that topic's light; otherwise in the warm light of Blog and Open Run Game. ── */
.lit, .lit a {
  color: color-mix(in oklab, var(--c, var(--nc)) 30%, var(--light-newest));
  text-shadow:
    0 0 0.5px var(--c, var(--nc)),
    0 0 4px color-mix(in oklab, var(--c, var(--nc)) 55%, transparent),
    0 0 12px color-mix(in oklab, var(--c, var(--nc)) 25%, transparent);
}
.dir-group h3.lit { font: 600 15px/1.3 var(--font-ui); }
.dir-group h3.lit::before { display: none; }
.section-title.lit { font: 600 20px/1.25 var(--font-ui); letter-spacing: -0.005em; }
.dir-label.lit { font: 500 15px/1.3 var(--font-ui); }


/* ── The header's words in Lit, the first style: "Blog" and "Open Run Game" drawn by the app's own shader
   (scripts/blog/render-lit.mjs, public/lit/), shown with screen blend over a transparent copy of the word, as
   src/features/night/LitWord does. The hotter render comes up on hover and press. ── */
.site-header nav a.lit-word, .site-header .lit-word {
  position: relative;
  display: inline-block;
  width: calc(var(--lw-a) * 1em);
  height: 1.1em;
  min-height: 0;
  padding: 0;
  font: 680 18px/1.1 "Mona Sans", system-ui, sans-serif;
  font-stretch: 125%;
  letter-spacing: 0.014em;
  color: transparent;
  text-shadow: none;
  white-space: nowrap;
  text-decoration: none;
}
.site-header nav a.lit-word::before, .site-header nav a.lit-word::after, .site-header .lit-word::before, .site-header .lit-word::after { content: none; }
.site-header .lit-word .lw-text { color: transparent; text-shadow: none; }
.site-header .lit-word img {
  position: absolute;
  top: calc(var(--lw-t) * 100%);
  left: calc(var(--lw-l) * 100%);
  width: calc(var(--lw-w) * 100%);
  max-width: none;
  height: auto;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.site-header .lit-word .lw-rest { animation: fade 800ms var(--ease-out) both; }
.site-header .lit-word .lw-hot { opacity: 0; transition: opacity 750ms var(--ease-out); }
.site-header .lit-word:hover .lw-hot, .site-header .lit-word:focus-visible .lw-hot { opacity: 0.85; transition-duration: 140ms; }
.site-header .lit-word:active .lw-hot { opacity: 1; transition-duration: 90ms; }
.site-header .lit-word:active { transform: scale(0.97); }
.site-header .lit-word:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; border-radius: 6px; }
@media (max-width: 520px) { .site-header nav a.lit-word, .site-header .lit-word { font-size: 15px; } }

/* Narrow phones (320 to 400 px): the centred logo and "Open Run Game" don't both fit beside it, so the logo sits next
   to "Blog" and the right-hand word gets the rest of the row. */
@media (max-width: 400px) {
  .site-header { grid-template-columns: auto auto minmax(0, 1fr); }
  .site-header .brand { justify-self: start; }
  .site-header nav a.lit-word, .site-header .lit-word { font-size: 14px; }
}