/* ============================================================================
   AI Academic Hub — site.css
   ----------------------------------------------------------------------------
   Loads AFTER /assets/tokens.css, which is byte-identical to the sibling hub's
   and hash-asserted by tools/check_site.py. Nothing here redefines a token
   except the two font tokens, which is the one documented exception below.

   STRUCTURE follows the sibling wiki closely, because it is the family's
   most complete site and its proportions are proven: a 980px measure, a light
   header with a rule under it, a dark four-column footer with a legal bar, a
   horizontal statbar strip, and tile grids with large numerals.

   IDENTITY is this site's own: the plate cabinet. Each kit is a specimen
   carrying one 1852 Gould toucan, and the palette is the shared forest/cream.
   ========================================================================== */

/* ==========================================================================
   TYPOGRAPHY — the one place this file redefines a token.
   --------------------------------------------------------------------------
   tokens.css is hash-locked and shared, so its eight faces cannot change
   there. This site needs its own voice, so the two font tokens are redefined
   at a lower layer instead.

   BODY IS ATKINSON HYPERLEGIBLE NEXT, AT 400 WEIGHT.

   Three drafts got here. Crimson Pro at weight 300 was a light serif and hard
   to read. IBM Plex Sans fixed the readability but landed in the same neutral-
   grotesque family as the sibling wiki's Inter, which is the look this site is
   supposed to be distinct from.

   Atkinson Hyperlegible was drawn by the Braille Institute specifically so that
   characters cannot be mistaken for one another — the 1, l and I are distinct,
   as are the 0 and O, and the b/d/p/q are not mirror images. It is therefore
   both more legible than a neutral grotesque and visibly not one.

   It also happens to be the right argument for this site. A registry whose
   whole claim is that a tool should state where it fails, in language you can
   check, should not be set in a typeface where a one and an ell look the same.

   Inter and Space Grotesk belong to the sibling hub's set and are deliberately
   not reused.

   DISPLAY IS YOUNG SERIF. Bodoni Moda was here and had to go: a Didone's
   character IS extreme thick/thin contrast, and those thin strokes disappear
   at display size over a photograph and at wordmark size in the header. It was
   the right period reference and the wrong tool for type that sits on an image.

   Young Serif has very low stroke contrast and generous weight, so it holds
   over the jungle without needing the scrim cranked up until the artwork is
   lost. It keeps character — it is nobody's default UI serif — while staying
   legible, which is the trade Bodoni lost.

   PLACEHOLDER, 2026-08-03, pending a final pick. Change only this block.
   ========================================================================== */

@font-face {
  font-family: "Young Serif";
  src: url("/assets/fonts/youngserif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("/assets/fonts/atkinson.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("/assets/fonts/atkinson-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --max: 980px;
  --measure: 68ch;
}

body {
  font: 16px/1.6 var(--font-body);
  background: var(--paper);
  color: var(--ink);
}

/* Display face only where it is large enough to hold its hairlines. */
h1,
.brand,
.f-wordmark,
.stat-value,
.tile .count,
.plate__bird,
.specimen__name,
.tag-card__label {
  font-family: var(--font-display);
}
h2,
h3,
h4 {
  font-family: var(--font-body);
}

h1 { font-size: 2.4rem; line-height: 1.14; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 0.4em; color: var(--forest-900); }
h2 { font-size: 1.28rem; font-weight: 650; line-height: 1.3; margin: 1.9em 0 0.5em; color: var(--forest-900); }
h3 { font-size: 1.04rem; font-weight: 650; margin: 0 0 0.3em; color: var(--forest-900); }

p { margin: 0 0 1em; max-width: var(--measure); }
.lede { font-size: 1.13rem; line-height: 1.58; color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
a { color: var(--coral-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { max-width: var(--measure); }
li { margin-bottom: 0.35em; }

.stat-value,
.tile .count,
.tag-chip__count,
.theme__count,
.count-line,
[data-filter-count],
.state-table td { font-variant-numeric: tabular-nums; }

.caps { font-variant: small-caps; letter-spacing: 0.07em; }

/* ---------------------------------------------------------------- layout */

.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
/* Pages wrap their own content in .shell; main.container already sets the
   measure, so .shell is a pass-through rather than a second constraint. */
.shell { width: 100%; }
.narrow { max-width: 680px; }
main.container { padding-top: 30px; padding-bottom: 52px; min-height: 60vh; }

.section { padding-block: 0 var(--space-5); }
.section--tight { padding-block: 0 var(--space-4); }
.section--band {
  background: var(--paper-warm);
  border-block: 1px solid var(--line);
  padding-block: var(--space-5);
  margin-block: var(--space-5);
}
.section--deep {
  background: var(--forest-950);
  color: var(--paper);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-sm);
  margin-block: var(--space-5);
}
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--cream); }
.section--deep a { color: var(--leaf-300); }
/* Contrast fix, 2026-08-10. The deep panel repainted its headings and links and left
   every other text role on its light-background colour. Measured against
   --forest-950: the lede that names the limits of the number strip came out at
   2.03:1, the eyebrow at 3.30:1, and the stat values — which carry --forest-900
   — at 1.16:1, dark green on dark green. AA asks 4.5:1; these land at 12.9,
   8.9, 15.6 and 10.9. */
.section--deep .lede { color: rgba(255, 253, 246, 0.9); }
.section--deep .eyebrow { color: var(--leaf-300); }
.section--deep .stat-value { color: var(--cream); }
.section--deep .stat-label { color: rgba(255, 253, 246, 0.82); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem;
}
.breadcrumb, .crumbs { font-size: 0.85rem; margin-bottom: 10px; color: var(--muted); }

/* --------------------------------------------------------- status banner */

.status-banner { background: var(--forest-900); color: var(--leaf-100); font-size: 0.84rem; }
.status-banner__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 8px 20px;
  display: flex;
  gap: 6px 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.status-banner strong {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.status-banner span { flex: 1 1 26ch; }
.status-banner a { color: var(--cream); white-space: nowrap; text-decoration: underline; }

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

.site-header { border-bottom: 1px solid var(--line); background: var(--cream); }
.header-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  flex-wrap: wrap;
}
.brand { font-weight: 600; color: var(--forest-900); font-size: 1.18rem; letter-spacing: -0.005em; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--coral); }
.brand-beta { color: var(--muted); font-size: 0.78rem; font-family: var(--font-body); font-weight: 400; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; }
.nav a { color: var(--ink-soft); font-size: 0.93rem; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--forest-900); text-decoration: none; border-bottom-color: var(--line); }
.nav a[aria-current="page"] { color: var(--forest-900); font-weight: 600; border-bottom-color: var(--coral); }
.nav-toggle { display: none; }

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

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(70vh, 620px);
  display: grid;
  align-items: end;
  background: var(--forest-1000);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
/* Two scrims, not one. The vertical gradient sets the overall mood; the
   horizontal one darkens only the left third, where the type actually sits.
   Cranking a single scrim up until the headline reads flattens the whole
   painting — this keeps the right-hand foliage bright and still gives the
   text a clean ground. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(9, 19, 12, 0.72) 0%, rgba(9, 19, 12, 0.42) 42%, rgba(9, 19, 12, 0) 72%),
    linear-gradient(to top, rgba(9, 19, 12, 0.92) 0%, rgba(9, 19, 12, 0.66) 34%, rgba(9, 19, 12, 0.28) 66%, rgba(9, 19, 12, 0.44) 100%);
}
.hero__grid { max-width: var(--max); margin-inline: auto; padding: 0 20px 44px; width: 100%; }
.hero h1 { color: var(--cream); max-width: 15ch; font-size: clamp(2.4rem, 5vw, 3.4rem); }
/* The sibling's v1 signature, adopted 2026-08-10: the hand face carries the
   hero's parallel phrase. Same rule bytes on both hubs; keep the selector at
   .hero h1 em so the credit's em stays serif. */
.hero h1 em { font-family: "Caveat", cursive; font-style: normal; font-weight: 600; color: #cfe3c0; }
.hero .lede { color: rgba(255, 253, 246, 0.9); max-width: 56ch; }
.hero .eyebrow { color: var(--leaf-300); }
.hero__note { color: rgba(255, 253, 246, 0.6); font-size: 0.9rem; max-width: 52ch; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 16px; }
.hero__credit {
  position: absolute;
  right: 20px;
  bottom: 10px;
  z-index: 1;
  margin: 0;
  max-width: 44ch;
  text-align: right;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(255, 253, 246, 0.6);
}
.hero__credit a { color: rgba(255, 253, 246, 0.88); text-decoration: underline; }
/* The cue belongs inside the hero, on the artwork. As its own full-width band
   it read as a stray black stripe between the image and the page. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 246, 0.72);
  padding: 7px 16px;
  border: 1px solid rgba(255, 253, 246, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  white-space: nowrap;
}
.hero__cue:hover {
  color: var(--cream);
  border-color: rgba(255, 253, 246, 0.6);
  text-decoration: none;
}
@media (max-width: 640px) { .hero__cue { display: none; } }

.btn {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 6px;
  border: 1.5px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--cream); color: var(--forest-1000); }
.btn--primary:hover { background: #fff; }
.btn--ghost { border-color: rgba(255, 253, 246, 0.45); color: var(--cream); }
.btn--ghost:hover { background: rgba(255, 253, 246, 0.1); }
main .btn--primary { background: var(--forest-900); color: var(--cream); }
main .btn--ghost { border-color: var(--forest-800); color: var(--forest-900); }
main .btn--ghost:hover { background: var(--leaf-100); }

/* ---------------------------------------------------- statbar and tiles */

.statbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 16px 0 24px;
  list-style: none;
  max-width: none;
}
.statbar li { display: flex; flex-direction: column; margin: 0; }
.stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.05; color: var(--forest-900); }
.stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 3px; }

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 16px 0;
  list-style: none;
  padding: 0;
  max-width: none;
}
.tile {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--cream);
  color: var(--ink);
  height: 100%;
}
.tile:hover { border-color: var(--coral); text-decoration: none; }
.tile .count { font-size: 1.6rem; font-weight: 600; color: var(--coral-deep); line-height: 1.1; }
.tile .tile-label { font-weight: 650; display: block; margin-top: 2px; }
.tile .tile-blurb { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }

.featured {
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  background: var(--cream);
  margin: 18px 0;
}
.featured p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- specimens */

.plate-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
}
.plate {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.plate:hover { border-color: var(--coral); box-shadow: var(--shadow-small); text-decoration: none; }
.plate__figure {
  aspect-ratio: 4 / 3;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.plate__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.plate__pending { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.plate__body { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.plate__body h3 { margin: 0 0 5px; font-size: 1rem; }
.plate__body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plate__bird { margin: 9px 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.plate__bird em { font-style: italic; }
.plate__foot { margin-top: auto; padding-top: 11px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

.specimen { margin: 18px 0 26px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.specimen img { width: 100%; height: auto; display: block; }
.specimen figcaption { padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.specimen__name { font-size: 1.05rem; color: var(--forest-900); margin: 0 0 7px; max-width: none; }
.specimen__prov { font-size: 0.84rem; color: var(--muted); margin: 0; line-height: 1.55; max-width: 74ch; }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  padding: 2px 9px;
  border-radius: 999px;
  line-height: 1.6;
  border: 1px solid transparent;
  background: var(--paper-warm);
  color: var(--ink-soft);
  border-color: var(--line);
}
.badge--placeholder { background: var(--paper-deep); }
.badge--strong { background: var(--leaf-100); color: var(--forest-800); border-color: #b7d5bd; }
.badge--moderate { background: #f2ead6; color: #6b5624; border-color: var(--gold); }
.badge--thin { background: #f6e3da; color: var(--coral-deep); border-color: var(--coral); }
.badge--thinnest { background: var(--coral-deep); color: var(--cream); border-color: var(--coral-deep); }
.badge--blocked { background: var(--forest-900); color: var(--leaf-100); border-color: var(--forest-900); }

/* ------------------------------------------------------------------ tags */
/* Every namespace registered in src/lib/tag-registry.js MUST have a rule
   here; STYLED_NAMESPACES lists them and validation rule 20 fails the build
   when one is missing. */

.tag-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag-chip:hover { text-decoration: none; filter: brightness(0.97); }
.tag-chip__ns { opacity: 0.65; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; }
.tag-chip__count { opacity: 0.7; font-size: 0.76rem; }
.tag-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.tag-chip--artifact { background: var(--paper-warm); color: var(--ink-soft); border-color: var(--line); }
.tag-chip--method   { background: var(--leaf-100);   color: var(--forest-800); border-color: #b7d5bd; }
.tag-chip--risk     { background: #f6e3da;           color: var(--coral-deep); border-color: var(--coral); }
.tag-chip--audience { background: #f2ead6;           color: #6b5624;           border-color: var(--gold); }
.tag-chip--curated  { background: var(--forest-900); color: var(--leaf-100);   border-color: var(--forest-900); }
.tag-chip--batch    { background: var(--paper-deep); color: var(--ink-soft);   border-color: var(--line); }

.tag-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); list-style: none; padding: 0; margin: 16px 0 0; max-width: none; }
.tag-card { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 13px 15px 15px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); color: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.tag-card:hover { border-color: var(--coral); box-shadow: var(--shadow-small); text-decoration: none; }
.tag-card__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tag-card__label { font-size: 1.02rem; color: var(--forest-900); }
.tag-card__count { font-size: 0.78rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag-card__blurb { font-size: 0.87rem; color: var(--ink-soft); line-height: 1.5; }
.tag-card__id { font-size: 0.72rem; color: var(--muted); margin-top: auto; }

.count-line { font-size: 0.98rem; color: var(--ink-soft); }
.count-line strong { color: var(--forest-900); }

.empty-state { padding: 13px 16px; background: var(--paper-warm); border-left: 3px solid var(--muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-soft); max-width: 74ch; }

.filter-bar { background: var(--paper-warm); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px 16px; margin-top: 18px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; max-width: none; }
.plate-grid > li.is-hidden { display: none; }

/* -------------------------------------------------------- theme coverage */

.theme-list { list-style: none; padding: 0; margin: 18px 0 0; max-width: none; }
.theme { border-top: 1px solid var(--line); padding-block: 18px; display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr); }
.theme:last-child { border-bottom: 1px solid var(--line); }
.theme h3 { margin-top: 0; font-size: 1.1rem; }
.theme__count { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 8px; }
.theme__basis { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0; }
.gap-list { margin: 8px 0 0; padding-left: 18px; font-size: 0.89rem; color: var(--ink-soft); }
.gap-list li::marker { color: var(--coral); }
.gap-none { font-size: 0.89rem; color: var(--muted); font-style: italic; margin: 0; }

/* --------------------------------------------------------------- callout */

.callout { border-left: 3px solid var(--leaf-500); background: var(--leaf-100); padding: 13px 17px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-block: 18px; max-width: 74ch; }
.callout p:last-child { margin-bottom: 0; }
.callout--warn { border-left-color: var(--coral); background: #f8e9e1; }
.callout .eyebrow { color: var(--forest-700); }
.callout--warn .eyebrow { color: var(--coral-deep); }

.state-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.91rem; }
.state-table th, .state-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.state-table th { font-weight: 650; color: var(--forest-900); }
.table-scroll { overflow-x: auto; }

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

.site-footer { background: var(--forest-1000); border-top: 1px solid rgba(255, 253, 247, 0.12); padding: 44px 0 26px; font-size: 0.9rem; color: rgba(255, 253, 246, 0.72); }
.site-footer a { color: rgba(255, 253, 246, 0.86); display: block; margin: 0 0 8px; }
.site-footer a:hover { color: var(--cream); }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: 32px; }
.f-col h3 { font-family: var(--font-body); color: var(--cream); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.f-wordmark { font-weight: 600; color: var(--cream); font-size: 1.12rem; margin: 0 0 10px; max-width: none; }
.f-wordmark .brand-mark { color: var(--coral); }
.f-wordmark .brand-beta { color: var(--muted); font-size: 0.76rem; }
.f-tag { margin: 0 0 12px; max-width: 42ch; line-height: 1.55; }
.f-domain { color: var(--gold); font-size: 0.85rem; margin: 0 0 8px; }
.f-sibling { font-size: 0.85rem; margin: 0; }
.f-sibling a { display: inline; }
.f-legal { border-top: 1px solid rgba(255, 253, 247, 0.1); margin-top: 34px; padding-top: 18px; font-size: 0.79rem; color: rgba(255, 253, 246, 0.55); }
.f-legal p { max-width: none; margin: 0 0 8px; line-height: 1.55; }
.f-legal a { display: inline; margin: 0; color: rgba(255, 253, 246, 0.8); text-decoration: underline; }

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

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .theme { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { display: block; width: 17px; height: 2px; background: var(--forest-900); content: ""; }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before { position: absolute; top: -6px; }
  .nav-toggle__bars::after { position: absolute; top: 6px; }
  .nav { display: none; flex-direction: column; gap: 12px; width: 100%; padding: 12px 0 6px; }
  .nav[data-open="true"] { display: flex; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 62vh; }
  h1 { font-size: 2rem; }
}

@media print {
  .site-header, .site-footer, .status-banner, .hero__actions, .hero__cue { display: none; }
  body { background: #fff; }
}

/* Own label vs sourced — the department-store distinction. Mirrors the sibling
   hub's origin pill. Every record reads "Not yet sourced" today, which is the
   honest state: nothing in this registry has been built or surveyed into it. */
.badge--origin {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   AIW-pattern additions (2026-08-04): the facet-hero page header band, the
   sortbar + search controls on the registry, the home department lanes, and
   the breadcrumb. Skeleton shared with the sibling hub; palette and type come
   from the tokens and the font overrides above.
   ========================================================================== */

.breadcrumb { font-size: 0.8rem; letter-spacing: 0.02em; margin: 0 0 var(--space-3); color: var(--muted); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.facet-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
  background: #14261a;
  margin: var(--space-5) 0 var(--space-4);
}
.fh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facet-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 18, 12, 0.9) 0%, rgba(10, 18, 12, 0.62) 52%, rgba(10, 18, 12, 0.24) 100%);
}
.fh-inner { position: relative; z-index: 1; padding: var(--space-6) var(--space-5); max-width: 62ch; }
.fh-inner .breadcrumb { color: rgba(255, 253, 246, 0.72); }
.fh-inner h1 { color: var(--cream); margin: 0 0 var(--space-2); }
.fh-inner .lede { color: rgba(255, 253, 246, 0.88); }
.fh-meta { color: rgba(255, 253, 246, 0.88); margin-top: var(--space-3); }
.fh-credit { font-size: 0.72rem; color: rgba(255, 253, 246, 0.6); margin: var(--space-4) 0 0; }
.fh-credit a { color: inherit; }

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

.entry-search { margin: var(--space-4) 0 var(--space-2); }
.entry-search input {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
}
.entry-search input:focus { outline: 2px solid var(--forest-900); outline-offset: 1px; }

.sortbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  margin: 0 0 var(--space-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sortbar label { font-size: 0.78rem; color: var(--muted); }
.sortbar select { font: inherit; font-size: 0.85rem; color: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); }
.sortbar .small { font-size: 0.78rem; }
.sortbar .muted { color: var(--muted); }
.plate-grid li.is-hidden { display: none; }

.lane-stack { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
a.lane {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: #14261a;
  color: var(--cream);
  text-decoration: none;
}
.lane__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
a.lane:hover .lane__img { transform: scale(1.025); }
a.lane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 18, 12, 0.82) 0%, rgba(10, 18, 12, 0.45) 55%, rgba(10, 18, 12, 0.12) 100%);
}
.lane__panel {
  position: relative;
  z-index: 1;
  margin: var(--space-4);
  padding: var(--space-4);
  max-width: 48ch;
  background: rgba(10, 18, 12, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 10px;
}
.lane__head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.lane__count { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 253, 246, 0.75); }
.lane__name { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 6px; color: var(--cream); }
.lane__desc { margin: 0 0 6px; font-size: 0.92rem; color: rgba(255, 253, 246, 0.85); }
.lane__label { margin: 0 0 10px; font-size: 0.78rem; font-style: italic; color: rgba(255, 253, 246, 0.65); }
.lane__cta { font-size: 0.85rem; font-weight: 600; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .facet-hero { min-height: 240px; }
  .fh-inner { padding: var(--space-5) var(--space-4); }
  a.lane { min-height: 220px; }
  .lane__panel { margin: var(--space-3); padding: var(--space-3); }
}

/* ==========================================================================
   Methodology apparatus (2026-08-05): the page reads as one essay in three
   parts — survey, standard, provenance — each opened by a part-head art band
   (the facet-hero at section scale, credit on the band), with a numbered
   criteria list and a numbered caveat ledger as its working furniture.
   ========================================================================== */

.part-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 264px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--forest-950);
  margin: var(--space-3) 0 var(--space-5);
}
.pt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.part-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 18, 12, 0.88) 0%, rgba(10, 18, 12, 0.56) 52%, rgba(10, 18, 12, 0.2) 100%);
}
.pt-inner { position: relative; z-index: 1; padding: var(--space-5); max-width: 62ch; }
.pt-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.55rem;
}
.pt-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.05rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--cream);
  margin: 0 0 0.35em;
}
.pt-lede { color: rgba(255, 253, 246, 0.88); margin: 0; max-width: 54ch; }
.pt-credit { font-size: 0.7rem; line-height: 1.5; color: rgba(255, 253, 246, 0.6); margin: var(--space-3) 0 0; max-width: 64ch; }
.pt-credit a { color: inherit; }

/* Section headings inside a part sit one step below the band's h2. */
.part-body h3 { font-size: 1.16rem; margin: 2em 0 0.5em; }
.part-body > h3:first-child,
.part-body > .lede:first-child { margin-top: 0; }

/* The criteria: the entry requirement as a numbered list a reader can count. */
.criteria {
  list-style: none;
  counter-reset: criterion;
  display: grid;
  gap: 10px;
  margin: var(--space-4) 0;
  padding: 0;
  max-width: none;
}
.criteria li {
  counter-increment: criterion;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 2px 14px;
  align-items: start;
  margin: 0;
  padding: 13px 17px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.criteria li::before {
  content: counter(criterion, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--coral-deep);
  font-variant-numeric: tabular-nums;
}
.criteria strong { font-size: 1.02rem; color: var(--forest-900); }
.criteria__tail { grid-column: 2; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }

/* The states table: the state name is the subject of its row. */
.state-table--states td:first-child { font-weight: 650; color: var(--forest-900); white-space: nowrap; }

/* The caveat ledger: numbered so a caveat can be pointed at, not paraphrased. */
.caveats { list-style: none; margin: var(--space-4) 0 var(--space-5); padding: 0; max-width: none; }
.caveat {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 16px;
  margin: 0;
  padding: 18px 0 8px;
  border-top: 1px solid var(--line);
}
.caveat:last-child { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.caveat__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--coral-deep);
  font-variant-numeric: tabular-nums;
}
.caveat__body h3 { margin: 0 0 0.35em; }
.caveat__body p { margin: 0 0 0.6em; }

@media (max-width: 700px) {
  .part-head { min-height: 216px; }
  .pt-inner { padding: var(--space-4); }
  .caveat { grid-template-columns: 2.2rem 1fr; gap: 12px; }
}

/* ==========================================================================
   v2 — the survey layer (2026-08-10).
   Categories, tasks as anchored sections, campaign rows, entry cards and
   entry pages. Composition only: this file still redefines no token, and the
   grids, badges, callouts and tables above are reused rather than restated.
   ========================================================================== */

/* ------------------------------------------------------------- v2 badges */

.badge--code { background: var(--forest-900); color: var(--leaf-100); border-color: var(--forest-900); font-variant-numeric: tabular-nums; }
.badge--shared { background: var(--leaf-100); color: var(--forest-800); border-color: #b7d5bd; }
.badge--pending { background: #f2ead6; color: #6b5624; border-color: var(--gold); }
.badge--ingested { background: var(--leaf-100); color: var(--forest-800); border-color: #b7d5bd; }
.badge--run { background: transparent; color: var(--muted); border-color: var(--line); font-weight: 500; letter-spacing: 0; }
.badge--state { text-transform: none; }
.badge--live { background: var(--leaf-100); color: var(--forest-800); border-color: #b7d5bd; }
.badge--archived { background: var(--paper-deep); color: var(--ink-soft); }
.badge--unavailable { background: #f6e3da; color: var(--coral-deep); border-color: var(--coral); }

/* Absence is a statement, not a blank. It gets a rule of its own so it can
   never be mistaken for decoration or for a positive. Same shape as the
   empty-state above, which says the same thing about the tag surface. */
.absence {
  margin: 12px 0;
  padding: 11px 15px;
  background: var(--paper-warm);
  border-left: 3px solid var(--muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 74ch;
}

/* -------------------------------------------------- categories as tiles */

.cat-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.cat-counts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tile h3 { margin: 0 0 5px; }

/* ---------------------------------------------------- tasks as sections */

.task-index { list-style: none; padding: 0; margin: 12px 0 0; max-width: none; }
.task-index li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); margin: 0; }
.task-index li:last-child { border-bottom: 1px solid var(--line); }
.task-section { scroll-margin-top: var(--space-5); }
.task-section__title { margin-top: 0; }

/* A task with nothing ingested is one line, not a full empty section. The row
   keeps its own anchor so every task index link still lands on its task; where
   campaigns are placed on it, the line is a native disclosure so their ledger
   counts and sealed coverage ceilings stay on the page. */
.task-rows { list-style: none; padding: 0; margin: 12px 0 0; max-width: none; }
.task-row { margin: 0; border-top: 1px solid var(--line); scroll-margin-top: var(--space-5); }
.task-row:last-child { border-bottom: 1px solid var(--line); }
.task-row__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; padding: 9px 0; margin: 0; max-width: none; }
summary.task-row__line { cursor: pointer; }
summary.task-row__line::marker { color: var(--muted); }
.task-row__title { font-weight: 600; color: var(--forest-900); }
.task-row__body { padding: 0 0 10px var(--space-2); }
.task-row__body .campaign-list { margin-bottom: 0; }

.campaign-list { list-style: none; padding: 0; margin: 10px 0 var(--space-4); max-width: none; }
.campaign-row { border-top: 1px solid var(--line); padding: 13px 0; margin: 0; }
.campaign-row:last-child { border-bottom: 1px solid var(--line); }
.campaign-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.campaign-row__name { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.9rem; color: var(--forest-900); word-break: break-word; }
.campaign-row__date { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.campaign-row__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.campaign-row__counts { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
.campaign-row__counts > div { display: flex; align-items: baseline; gap: 6px; }
.campaign-row__counts dt { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.campaign-row__counts dd { margin: 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--forest-900); }
.campaign-row__label { margin: 10px 0 4px; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* The sealed campaign's own words. This block is the one region the
   entry-wording ceiling linter strips before scanning — it is quoted, dated
   and never this site's voice, so it is styled as a quotation, not as copy. */
.campaign-claim {
  margin: 0;
  padding: 11px 16px;
  border-left: 3px solid var(--gold);
  background: var(--paper-warm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 74ch;
}

/* ------------------------------------------------------------ entry card */
/* Sits inside .plate-grid, so the registry's hide-on-filter rule and the
   grid geometry are the ones already in this file. */

.entry-card { margin: 0; }
.entry-card__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.entry-card__link:hover { border-color: var(--coral); box-shadow: var(--shadow-small); text-decoration: none; }
.entry-card__eyebrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.entry-card h3 { margin: 0; font-size: 1rem; word-break: break-word; }
.entry-card__task { margin: 0; font-size: 0.82rem; color: var(--muted); }
.entry-card__desc { margin: 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.entry-card__metrics { display: flex; flex-wrap: wrap; gap: 12px; margin: auto 0 0; padding-top: 8px; }
.entry-card__foot { margin: 0; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Metric labels print before their values. "692 stars" reads as a rating and
   the honesty gate rejects it; a labelled figure is a measurement. */
.metric { display: inline-flex; align-items: baseline; gap: 5px; font-size: 0.8rem; }
.metric__k { letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.metric__v { font-variant-numeric: tabular-nums; color: var(--forest-900); font-weight: 600; }

.draft-chip {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px dashed var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.entry__badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 var(--space-3); }
.entry__source { margin: 0 0 var(--space-4); }
.entry__source-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.entry__desc { margin: 0; max-width: 74ch; }
.entry__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--space-6); padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.9rem; }

.fact-dl { margin: 10px 0 var(--space-4); max-width: none; }
.fact-dl > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.fact-dl > div:last-child { border-bottom: 1px solid var(--line); }
.fact-dl dt { margin: 0; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.fact-dl dd { margin: 0; color: var(--forest-900); word-break: break-word; }
.fact-dl--metrics dd { font-variant-numeric: tabular-nums; }

.topic-row { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  font-size: 0.76rem;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .fact-dl > div { grid-template-columns: 1fr; gap: 3px; }
  .campaign-row__counts { gap: 12px; }
}