:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #555555;
  --link: #1a4eaf;
  --link-visited: #6a3aa0;
  --rule: #dcdee3;
  --header-bg: #f4f5f7;
  color-scheme: light dark;

  /* Font families.  A single sans family across the site; --ff-mono is
     reserved for the fold caret in story comments.  --ff-body /
     --ff-display / --ff-sans remain as separate semantic labels (body
     copy, display headings, UI chrome) so swapping in a serif body
     family later is a one-variable change. */
  --ff-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --fs-sm: 0.9rem;
  --fs-md: 0.95rem;
  --fs-lg: 1.05rem;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.4rem;
  --sp-3: 0.6rem;
  --sp-4: 0.8rem;
  --sp-5: 1.2rem;
  --sp-6: 2rem;

  /* Container hierarchy */
  --section-indent: 0.5rem;

  /* Corner radii.  ``sm`` for inline highlight marks, ``md`` for text-input
     + button controls, ``lg`` for bordered chrome blocks like the
     pagination widget, ``pill`` for the section / topic chips. */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --fg: #e6e6e6;
    --muted: #a0a0a0;
    --link: #79b8ff;
    --link-visited: #b78bff;
    --rule: #2d2f34;
    --header-bg: #1c1d20;
  }
}

/* Explicit theme pin via the top-right toggle.  Higher specificity than the
   media-query rule above, so a pinned ``data-theme`` wins on either system
   preference. */
html[data-theme="dark"] {
  --bg: #111111;
  --fg: #e6e6e6;
  --muted: #a0a0a0;
  --link: #79b8ff;
  --link-visited: #b78bff;
  --rule: #2d2f34;
  --header-bg: #1c1d20;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #555555;
  --link: #1a4eaf;
  --link-visited: #6a3aa0;
  --rule: #dcdee3;
  --header-bg: #f4f5f7;
  color-scheme: light;
}

html {
  background: var(--bg);
  color: var(--fg);
}

body {
  max-width: 80ch;
  margin: 1rem auto;
  padding: 0 1rem;
  line-height: 1.6;
  font-family: var(--ff-body);
}

a {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-3) 0;
}

/* Top row of the header: site title on the left, action links (``Edit``,
   …) on the right, sharing the ``<h1>`` baseline.  ``space-between`` keeps
   the actions anchored to the right regardless of the title's width. */
.header-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

header h1 {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 900;
}

/* The site mark on the left of the header is a single link inside the
   ``<h1>`` that wraps both the favicon and the title text so they share a
   hover/click target.  ``align-items: center`` keeps the SVG visually
   centered against the title (the surrounding ``.header-title-row`` uses
   ``baseline`` for the right-side action links). */
.header-brand,
.header-brand:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--link);
  text-decoration: none;
}

/* Sized in ``cap`` units so the SVG's height matches the height of the
   surrounding capital letters exactly — the SVG sits inside the ``<h1>``,
   so ``1cap`` resolves against the h1's font.  ``width: auto`` lets the
   browser derive the width from the SVG's 1:1 ``viewBox``, so future
   height tweaks (incl. devtools inspection) scale both dimensions
   together instead of leaving empty vertical space inside the ``<img>``. */
.header-favicon {
  height: 1.1cap;
  width: auto;
  display: block;
}

.theme-toggle {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 0.2rem 0.3rem;
}

.theme-toggle:hover {
  opacity: 0.75;
}

.theme-icon {
  display: block;
}

.theme-icon[hidden] {
  display: none;
}

header nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Top-level nav anchors (Stories / Sections / Topics / …) — kept
   visually distinct from the brand title and the search input by
   sitting one step down in size with no underline. */
header nav a,
header nav a:visited {
  font-size: 0.88rem;
  color: var(--fg);
  text-decoration: none;
}

header nav a:hover {
  color: var(--link);
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-3);
}

/* Themed text input — applied via element selector so every
   search/text box on the site shares the same affordance: cool-gray
   rounded border with an accent focus ring.  Per-form layout rules
   (flex sizing, etc.) live in the form-specific selectors below. */
input[type="search"],
input[type="text"] {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-family: var(--ff-sans);
  font-size: 0.85rem;
}

input[type="search"]:focus,
input[type="text"]:focus {
  border-color: var(--link);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 78, 175, 0.12);
}

html[data-theme="dark"] input[type="search"]:focus,
html[data-theme="dark"] input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(121, 184, 255, 0.18);
}

/* Themed submit button — pairs visually with the input so a
   form reads as a single composite control.  Header bg as the
   filled surface, hover steps to the rule color for feedback. */
button[type="submit"] {
  background: var(--header-bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 0.3rem 0.85rem;
  font: inherit;
  font-family: var(--ff-sans);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

button[type="submit"]:hover {
  background: var(--rule);
  border-color: var(--muted);
}

button[type="submit"]:active {
  transform: translateY(1px);
}

/* Page-body search/filter form — input grows to fill the row, button hugs
   its content, both stretched to the same height.  Used as the primary
   search box on /search/, as the comment filter on the user-detail page,
   and as the name/keyword filter on each browse-list page. */
.filter-form {
  margin: var(--sp-4) 0;
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}

.filter-form input[type="search"] {
  flex: 1;
  min-width: 0;
}

.search-tabs {
  margin: var(--sp-3) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4);
  font-family: var(--ff-sans);
  font-size: 0.9rem;
}

.search-tab {
  text-decoration: none;
  padding-bottom: 0.15rem;
}

/* Only inactive, enabled tabs get the hover-underline; the active
   tab already advertises itself via the bottom rule and would
   look like it'd been re-styled into a plain link if hovered. */
.search-tab:not(.search-tab--active):not(.search-tab--disabled):hover {
  text-decoration: underline;
}

/* Active tab carries its state through weight + fg color alone;
   inactive tabs sit in link-blue at regular weight, so the contrast
   is enough without a bottom rule. */
.search-tab--active {
  font-weight: 600;
  color: var(--fg);
}

.search-tab--disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* Help text under the search form.  ``code`` tokens reset to upright so the
   inline ``or`` / ``-word`` literals stay legible against the italic prose. */
.search-help {
  font-style: italic;
  color: var(--muted);
}

.search-help code {
  font-style: normal;
}

.search-body {
  margin: 0.3rem 0 0.2rem;
  font-size: var(--fs-md);
}

mark {
  background: #fff3a3;
  color: inherit;
  padding: 0 0.1em;
  border-radius: var(--radius-sm);
}

@media (prefers-color-scheme: dark) {
  mark {
    background: rgba(250, 204, 21, 0.3);
  }
}

html[data-theme="dark"] mark {
  background: rgba(250, 204, 21, 0.3);
}

html[data-theme="light"] mark {
  background: #fff3a3;
}

.search-sort {
  font-size: var(--fs-sm);
}

/* Small muted label rendered as a prefix in front of a row of
   options.  Used by the "Sort:" label that precedes the sort tabs on
   every list page, and by the "Min score:" / "Reason:" / "Sort:" row
   labels in the per-story comment filter. */
.kicker-label {
  color: var(--muted);
  font-family: var(--ff-sans);
  font-size: 0.8rem;
  font-weight: 600;
}

.date-hierarchy {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 17px;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 0.85rem;
  margin: var(--sp-3) 0 var(--sp-4);
}

.date-hierarchy .date-back {
  color: var(--muted);
}

.topic-list,
.domain-list,
.user-list {
  list-style: none;
  padding: 0;
}

/* Topics, sections, and domains share short "name + count" rows, so we
   lay them out in responsive CSS columns sized to a minimum width — the
   browser packs in as many columns as the body allows.  ``break-inside:
   avoid`` keeps each item intact instead of letting its meta line orphan
   into the next column. */
.topic-list {
  columns: 12rem auto;
  column-gap: var(--sp-5);
}

.domain-list {
  columns: 16rem auto;
  column-gap: var(--sp-5);
}

.topic-list-item,
.domain-list-item,
.user-list-item {
  margin-bottom: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
}

.topic-list-item,
.domain-list-item {
  break-inside: avoid;
}

.topic-list-meta,
.domain-list-meta,
.user-list-meta {
  color: var(--muted);
  font-family: var(--ff-sans);
  font-size: 0.8rem;
}

.link-result-list {
  list-style: none;
  padding: 0;
}

.link-result {
  border-left: 2px solid var(--rule);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0;
}

.link-result-title {
  font-size: var(--fs-lg);
  margin: 0 0 0.2rem;
}

.link-result-header {
  margin-bottom: 0.2rem;
}

.link-result-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}

.link-result-body {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
}

footer {
  margin-top: var(--sp-6);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.footer-row p {
  margin: 0;
}

main {
  margin-top: var(--sp-4);
}

article {
  margin-bottom: var(--sp-6);
}

.comment {
  border-left: 2px solid var(--rule);
  padding-left: var(--sp-3);
  margin: var(--sp-3) 0;
}

.comment-header {
  margin-bottom: 0.2rem;
  font-size: var(--fs-sm);
}

.comment-body {
  font-size: var(--fs-md);
}

.comment-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* h2 / h3 are styled as muted section labels with a hairline rule
   beneath, rather than as chipped backgrounds — reads as an
   editorial section marker instead of an admin UI chip.  The two
   heading-content classes below opt out: ``.story-title`` is the
   actual article title on a story detail page, and
   ``.link-result-title`` is the clickable headline inside each
   search / domain link-result row. */
h2,
h3 {
  background: transparent;
  border-radius: 0;
  font-family: var(--ff-sans);
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding: 0 0 0.2rem;
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: 0.95rem;
}

h2 {
  font-size: 1.05rem;
  margin: var(--sp-6) 0 var(--sp-3);
}

/* Total-count suffix inside an h2/h3 ("Stories &middot; 4,348").
   Muted and unbolded so it sits visually below the heading text;
   keeps the parent's uppercase tracking since digits read fine
   either way and the surrounding noun ("stories") stays uniform
   with the kicker. */
.heading-count {
  color: var(--muted);
  font-weight: 400;
}

/* The article title on the story detail page — promotes back to
   a real display heading rather than a muted section label. */
.story-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--fg);
  border-bottom: 0;
  padding: 0;
  margin: var(--sp-3) 0;
}

/* 2019-crawl titles often end in a parenthetical source attribution
   ("(sciencemag.org)").  The ``split_source_suffix`` template filter
   splits them off so we can render the source as a smaller muted
   sans suffix that visually attaches to the title without competing
   with it. */
.story-title-source {
  color: var(--muted);
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  font-weight: 400;
  vertical-align: baseline;
  margin-left: 0.15rem;
}

/* Wrapper rendered immediately below a kicker ``<h2>`` / ``<h3>``
   so the section's content (filter form, sort tabs, result list,
   …) visually nests under the heading. */
.section-body {
  padding-left: var(--section-indent);
  margin: var(--sp-3) 0 var(--sp-4);
}

/* Inline "(clear)" link rendered next to the heading count when a
   filter is active.  Themed small + link-colored so the affordance
   reads as "clickable but secondary to the count." */
.clear-filters,
.clear-filters:visited {
  font-family: var(--ff-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--link);
  margin-left: 0.2rem;
  vertical-align: middle;
}

/* Staff-only ``(edit)`` affordances that appear next to the brand
   (header-edit) or inline within comment metadata (comment-edit).
   Rendered as plain link-colored anchors at the surrounding text
   size with no underline.  The :visited override stops the link
   from flipping to the purple visited color after the staff user
   has clicked through once. */
.header-edit,
.header-edit:visited,
.comment-edit,
.comment-edit:visited {
  font-family: var(--ff-sans);
  font-weight: 400;
  color: var(--link);
  text-decoration: none;
}

.header-edit {
  vertical-align: middle;
}

/* Clickable headline inside each search / domain link-result —
   opts out of the muted-label treatment so the title reads as a
   clickable article reference, not a section label. */
.link-result-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--fg);
  border-bottom: 0;
  padding: 0;
  margin: 0 0 0.2rem;
}

.link-result-title a {
  color: var(--link);
}

/* Comment header inside a link-result (search comments / domain
   comments) — drop the legacy chip background but otherwise
   leave alone (subject + meta inside it have their own styles). */
.link-result-header {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.score--neg {
  color: var(--muted);
}

.score--five {
  font-weight: bold;
}

.comment-filter {
  margin: var(--sp-4) 0;
}

.comment-filter-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-4);
  align-items: baseline;
  margin: var(--sp-1) 0;
}

.comment-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--ff-sans);
  font-size: 0.85rem;
}

.comment-filter-option--active {
  font-weight: 600;
  color: var(--fg);
}

.story-list {
  list-style: none;
  padding: 0;
}

.story-list-item {
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.story-list-item:last-child {
  border-bottom: 0;
}

.story-list-title {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.story-list-meta,
.story-byline {
  color: var(--muted);
  font-family: var(--ff-sans);
  font-size: 0.8rem;
}

.story-byline {
  margin: var(--sp-3) 0 var(--sp-2);
}

/* Section + topic links rendered as pill chips.  Section uses an
   accent-tinted pill (the section is the "where this lives"
   primary affordance); topic uses a neutral pill (the "what it's
   about" secondary tag).  The dot character between them in the
   template is wrapped in ``<span class="sep-tag">`` so the chip
   styling can hide it — two adjacent chips read as a tag list,
   not as a dotted enumeration. */
.story-section,
.story-section:visited,
.story-topic,
.story-topic:visited {
  display: inline-block;
  background: var(--header-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.55rem;
  font-family: var(--ff-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.45;
  vertical-align: baseline;
  margin-right: 0.15rem;
}

.story-section,
.story-section:visited {
  color: var(--link);
  background: rgba(26, 78, 175, 0.07);
  border-color: rgba(26, 78, 175, 0.2);
}

@media (prefers-color-scheme: dark) {
  .story-section {
    background: rgba(121, 184, 255, 0.10);
    border-color: rgba(121, 184, 255, 0.25);
  }
}

html[data-theme="dark"] .story-section {
  background: rgba(121, 184, 255, 0.10);
  border-color: rgba(121, 184, 255, 0.25);
}

/* When .sep-tag appears between two chips, hide it; when it
   appears between a chip and a textual element, hide it too —
   the chips' own margin-right provides the separation. */
.sep-tag {
  display: none;
}

/* Aligned label/value grid used on the user-detail overview.  ``auto 1fr``
   sizes the dt column to its widest label so all values share a single
   left margin without us having to hard-code a px width. */
.user-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  margin: var(--sp-3) 0 var(--sp-5);
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
}

.user-meta dt {
  color: var(--muted);
}

.user-meta dd {
  margin: 0;
}

.story-body {
  margin-top: var(--sp-4);
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-reply-list {
  margin-top: var(--sp-3);
}

.comment-subject {
  font-weight: 600;
  color: var(--muted);
}

.comment-sig {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: var(--sp-1);
}

/* Per-comment fold toggle.  Rendered as a [-] / [+] caret at the top of
   the comment gutter; clicking toggles ``.comment--collapsed`` on the
   parent ``<li class="comment">``, which hides the body, signature, and
   any nested reply list (see selectors below).  Clicks anywhere else in
   the gutter (the vertical rule, the surrounding whitespace) toggle the
   same way — see the inline script in story_detail.html. */
.comment-fold {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  color: var(--muted);
  cursor: pointer;
}

.comment-fold:hover,
.comment-fold:focus-visible {
  color: var(--fg);
}

/* Use descendant (not direct-child) selectors so collapse works for tree
   comments where body/sig/reply-list are nested inside ``.comment-main``
   instead of being direct children of ``.comment``.  Non-tree comments
   never get the ``.comment--collapsed`` class so the broader selector is
   safe there. */
.comment--collapsed .comment-body,
.comment--collapsed .comment-sig,
.comment--collapsed .comment-reply-list,
.comment--collapsed .comment-rule {
  display: none;
}

/* Story-tree comments only (scoped via ``<section class="comments">`` in
   story_detail.html).  Each comment is laid out as a two-column flexbox:
   a left gutter holding the fold caret stacked above a vertical rule,
   and a right main column holding the header, body, signature, and any
   nested reply list.  Putting the rule in the same flex column as the
   fold (rather than positioning it with a margin/em offset) means the
   rule's top edge is anchored to the fold's bottom by the layout itself
   — pixel-aligned regardless of font metrics — and both share the
   gutter's left edge by virtue of ``align-items: flex-start``. */
.comments .comment {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  padding-left: 0;
  border-left: 0;
  margin: var(--sp-4) 0;
}

/* Hairline rule + extra padding between adjacent sibling comments inside a
   ``.comment-list`` — gives each comment an unambiguous top edge as the
   reader scrolls.  Applies to the story-tree (top-level + nested reply
   lists) as well as the flat per-user and search comment lists.  Combined
   with the visible fold caret on story-tree comments, the start of each
   comment is signalled twice (horizontal rule + caret marker). */
.comment-list > .comment + .comment {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-4);
}

.comments .comment-gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.comments .comment-rule {
  flex: 1 1 auto;
  border-left: 2px solid var(--rule);
  width: 0;
  min-height: 0;
}

/* Mirror the fold button's hover darkening across the whole gutter:
   hovering the rule (or the whitespace around it) should give the same
   "this is the click target" feedback as hovering the caret itself. */
.comments .comment-gutter:hover .comment-fold {
  color: var(--fg);
}

.comments .comment-gutter:hover .comment-rule {
  border-left-color: var(--muted);
}

.comments .comment-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Breadcrumb-style "Back to <List>" link rendered above the ``<h2>`` on
   detail pages so the reader has a one-click hop back to the corresponding
   list page. */
.back-link {
  margin: 0 0 var(--sp-3);
  font-family: var(--ff-sans);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
}

.pagination {
  margin: var(--sp-5) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-3);
  font-family: var(--ff-sans);
  font-size: 0.82rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 0.5rem 1rem;
}

/* Disabled prev / next links: rendered as muted text in-place
   instead of as invisible width-spacers, so the user always sees
   the "« prev" / "next »" labels — the muted treatment signals
   that they aren't clickable on the first / last page. */
.pagination-disabled {
  color: var(--muted);
}


/* Home-page jumping-off grid.  Short ``<h3>``-titled cards (curated story
   picks, editors, in-jokes, …) flowed into multi-column layout so cards
   of varying heights pack vertically without the row-gutter whitespace
   ``display: grid`` leaves under shorter cards.  ``column-width: 18rem``
   lets the browser fit as many columns as the body width allows (1 on
   mobile, 2 on desktop) and ``break-inside: avoid`` on each card keeps
   them whole rather than splitting across columns. */
.home-intro {
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: var(--fs-md);
}

.home-grid {
  column-width: 18rem;
  column-gap: var(--sp-5);
  margin: var(--sp-5) 0;
}

.home-card {
  break-inside: avoid;
  /* ``display: inline-block`` is the classic workaround for Chromium's
     historically-buggy ``break-inside: avoid`` in multi-column flow.
     Combined with ``width: 100%`` it preserves block-level sizing within
     the column track. */
  display: inline-block;
  width: 100%;
  margin-bottom: var(--sp-5);
}

/* Card title — same section-label structure as generic h3 but
   uses the primary foreground color (not muted) and a tighter top
   margin so the cards read as discrete "shelves" rather than
   indented subsections. */
.home-card h3 {
  color: var(--fg);
  font-size: 0.95rem;
  margin: 0 0 var(--sp-3);
}

.home-card ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
}

.home-card li {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.home-card-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
}

@media (max-width: 600px) {
  body {
    padding: 0 0.6rem;
  }
}