/* AI Porn Database — Direction B / Accession
   Ported onto the canonical generated site. */

:root {
  --bg: #e7e8e3;
  --bg-elevated: #dfe1da;
  --bg-card: #e7e8e3;
  --bg-card-hover: #dfe1da;
  --border: #cfd1c8;
  --border-subtle: #d9dbd3;
  --border-strong: #101312;
  --text: #101312;
  --text-body: #1d2220;
  --text-dim: #3d423c;
  --text-faint: #60645c;
  --accent: #895700;
  --accent-soft: #ddd8c4;
  --accent-on-strong: #e0a03a;
  --accent-2: #895700;
  --accent-2-soft: #ddd8c4;
  --danger: #8a3325;
  --selection: #d6d7ce;
  --strong-surface: #101312;
  --strong-surface-text: #e7e8e3;
  --media-matte: #e7e8e3;
  --media-matte-text: #60645c;
  --chart-1: #895700;
  --chart-2: #b47a18;
  --chart-3: #6f746d;
  --chart-4: #92978e;
  --chart-5: #b8bbb3;
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --max-width: 1180px;
  --reading: 46rem;
}

[data-theme="dark"] {
  --bg: #171916;
  --bg-elevated: #20231f;
  --bg-card: #171916;
  --bg-card-hover: #20231f;
  --border: #3c413a;
  --border-subtle: #30352f;
  --border-strong: #8f968c;
  --text: #e7e9e3;
  --text-body: #d9ddd5;
  --text-dim: #b7bdb3;
  --text-faint: #959c92;
  --accent: #d2a052;
  --accent-soft: #342c1e;
  --accent-on-strong: #dfad5b;
  --accent-2: #d2a052;
  --accent-2-soft: #342c1e;
  --danger: #e18473;
  --selection: #4a402c;
  --strong-surface: #292d28;
  --strong-surface-text: #e7e9e3;
  --chart-1: #d2a052;
  --chart-2: #ad813f;
  --chart-3: #889388;
  --chart-4: #6c756d;
  --chart-5: #505850;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body > main { min-height: 70vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); background: var(--accent-soft); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection { background: var(--selection); }
img { display: block; max-width: 100%; }
code { font-family: var(--font-mono); overflow-wrap: anywhere; }
.container { width: min(100%, var(--max-width)); margin: 0 auto; padding-inline: 24px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

html.theme-ready body,
html.theme-ready .site-header,
html.theme-ready .main-nav,
html.theme-ready .theme-toggle,
html.theme-ready .search-input,
html.theme-ready .filter-pill { transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease; }

/* Desktop accession rail. The rail is the site's only persistent chrome -- there is no footer -- so it
   runs as a flex column: brand, nav and holdings sit at the top, and the utility area is pushed to the
   foot by margin-top: auto rather than by a hard-coded offset, which keeps it stable at any viewport
   height and lets the rail scroll normally when the content is taller than the screen. */
.site-header {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 212px;
  overflow-y: auto;
  background: var(--bg);
  border-right: 1px solid var(--border-strong);
}
.site-header .container { display: flex; flex: 1 0 auto; flex-direction: column; width: 100%; padding: 0; }
/* The wrapper exists for the collapsed menu below 1100px; on the rail its children are direct
   flex items, so it must not introduce a box of its own. */
.nav-panel { display: contents; }
.brand-lockup {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono);
}
.brand {
  display: block;
  min-width: 0;
  color: var(--text);
}
.brand:hover { color: var(--text); background: var(--bg-elevated); }
.brand-lockup .theme-toggle {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0;
}
/* The wordmark shares the toggle's 28px band, so button and name read as one brand row. */
.brand-name {
  display: flex;
  align-items: center;
  min-height: 28px;
  font: 600 13px/1.25 var(--font-mono);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand small {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font: 400 9.5px/1.4 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
}
.main-nav { display: block; }
.main-nav a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.main-nav a:hover { background: var(--bg-elevated); }
.main-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); background: var(--bg-elevated); }
.main-nav a > span:last-child > small {
  display: block;
  margin-top: 3px;
  color: var(--text-faint);
  font: 400 9.5px/1.4 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
}
.nav-toggle { display: none; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 12px 12px 0 auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.theme-icon { display: inline-flex; align-items: center; justify-content: center; }
.theme-icon svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: inline-flex; }
.header-holdings { padding: 16px 12px; font: 400 9.5px/1.55 var(--font-mono); color: var(--text-dim); }
.sidebar-reference > span, .sidebar-block h2 { display: block; margin: 0 0 6px; color: var(--text-faint); font: 400 9.5px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.header-holdings a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding-block: 2px; border-top: 1px solid var(--border-subtle); color: inherit; }
.header-holdings a:hover { color: var(--text); background: transparent; }
.header-holdings a:hover b { color: var(--text); }
.header-holdings a > span { min-width: 0; overflow-wrap: anywhere; }
.header-holdings b { color: var(--accent); font-weight: 500; text-align: right; white-space: nowrap; }
.sidebar-block { min-width: 0; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border-strong); }
.sidebar-block form { margin: 0; }
.sidebar-block input, .sidebar-block button {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 9.5px/1.35 var(--font-mono);
}
.sidebar-block input::placeholder { color: var(--text-faint); opacity: 1; }
.sidebar-newsletter p { margin: 0 0 8px; color: var(--text-dim); overflow-wrap: anywhere; }
.sidebar-newsletter input:disabled { color: var(--text-faint); opacity: .75; cursor: not-allowed; }
.sidebar-newsletter button { margin-top: 5px; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; opacity: .65; cursor: not-allowed; }
body { padding-left: 212px; }

/* Sidebar utility area: the 18+ notice, the disclaimer and the About/Terms links the site used to
   carry in a footer. Deliberately quieter than the navigation above it -- no panel, no card, no
   surface of its own, just muted type at the foot of the rail. */
.sidebar-utility { margin-top: auto; padding: 16px 12px 14px; }
.sidebar-disclaimer {
  margin: 0;
  color: var(--text-faint);
  font: 400 9.5px/1.6 var(--font-mono);
  overflow-wrap: anywhere;
}
/* Badge type and box are stepped down together from the disclaimer's 9.5px so the
   mark stays subordinate to the notice it opens; the border treatment is unchanged. */
.age-badge {
  display: inline-block;
  margin-right: 5px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 8.5px;
  line-height: 1.5;
}
.sidebar-utility-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
/* About/Terms stay muted utility type, but a hairline underline marks them as links
   rather than labels. It is drawn as a text decoration, not a border or padding, so
   the utility area's spacing is untouched; hover and focus lift the text to full
   contrast and bring the rule up to the accent. */
.sidebar-utility-links a {
  color: var(--text-dim);
  font: 400 9.5px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sidebar-utility-links a:hover,
.sidebar-utility-links a:focus-visible {
  color: var(--text);
  background: transparent;
  text-decoration-color: var(--accent);
}

/* Shared page headers */
.breadcrumbs {
  width: min(100%, var(--max-width));
  margin-block: 0;
  padding-top: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
  font: 400 10.5px/1.5 var(--font-mono);
  letter-spacing: .035em;
  text-transform: uppercase;
}
.breadcrumbs a { color: var(--accent); }
.breadcrumbs .sep { margin-inline: 7px; color: var(--text-faint); }
.hero, .guides-hero, .technology-hero, .statistics-hero {
  padding: 24px 0 19px;
  border-bottom: 1px solid var(--border-strong);
  background: transparent;
}
.hero h1, .guides-hero h1, .technology-hero h1, .statistics-hero h1 {
  max-width: 26em;
  margin: 10px 0 0;
  color: var(--text);
  font: 500 clamp(27px, 3.2vw, 40px)/1.1 var(--font-mono);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hero-lede, .guides-hero p, .technology-hero p, .statistics-hero p {
  max-width: 50rem;
  margin: 11px 0 0;
  color: var(--text-dim);
  font: 400 16px/1.6 var(--font-sans);
  text-wrap: pretty;
}
.eyebrow, .guide-category, .technology-type, .stat-category, .scope-label {
  display: block;
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.illustrated-hero { overflow: hidden; padding: 0; }
.illustrated-hero > .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
  align-items: center;
  min-height: 450px;
  padding-block: 36px 32px;
}
.illustrated-hero .hero-copy { position: relative; z-index: 1; min-width: 0; padding-right: 24px; }
.home-hero .hero-copy > h1:first-child { margin-top: 0; }
.home-hero .hero-lede { max-width: 43rem; }
.hero-visual { position: relative; align-self: stretch; min-width: 0; pointer-events: none; }
.hero-visual img {
  position: absolute;
  top: 4px;
  right: -4px;
  width: min(410px, 100%);
  height: auto;
  max-width: none;
}
.database-hero .hero-visual img,
.guides-hero .hero-visual img { top: -36px; }

/* Compact section heroes: copy establishes the height; artwork fits that space. */
:is(.home-hero, .database-hero, .guides-hero).illustrated-hero > .container {
  min-height: 0;
  padding-block: 72px;
}
:is(.home-hero, .database-hero, .guides-hero) .hero-visual img {
  top: auto;
  right: -4px;
  bottom: -72px;
  width: auto;
  height: calc(100% + 120px);
  max-width: 100%;
}

@media (min-width: 641px) {
  .breadcrumbs:has(+ .database-hero),
  .breadcrumbs:has(+ .guides-hero) { border-bottom-color: transparent; }
  :is(.database-hero, .guides-hero) { position: relative; }
  :is(.database-hero, .guides-hero)::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 15px;
    right: 0;
    left: 0;
    border-top: 1px solid var(--border);
    pointer-events: none;
  }
  :is(.database-hero, .guides-hero).illustrated-hero > .container {
    align-items: start;
    padding-block: 28px 32px;
  }
  /* Lead element sets the copy block's top edge, so both pages start together:
     without this the database h1 carries its 10px margin and sits lower than
     the blog eyebrow. */
  :is(.database-hero, .guides-hero) .hero-copy > :first-child { margin-top: 0; }
  /* The artwork is sized from the copy-defined content box, so its overhang
     stays at padding-top + 16px: that lands the crown 16px below the hero top,
     flush under the separator (15px rule + 1px border), while its bottom stays
     on the closing rule as the two hubs' copy heights vary. */
  :is(.database-hero, .guides-hero) .hero-visual img {
    bottom: -32px;
    height: calc(100% + 44px);
  }
}
@media (min-width: 901px) {
  /* Align the Blog's closing rule to the Database's rendered desktop height
     without changing the Blog copy or artwork container. */
  .guides-hero.illustrated-hero { min-height: 241.921875px; }
}
.btn, .profile-visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font: 500 10.5px/1.4 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn:hover, .profile-visit:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-primary:hover { background: var(--accent); color: var(--bg); }
.companies-meta { margin: 10px 0 0; color: var(--text-faint); font: 400 10.5px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }

/* Homepage and section directories */
.section { padding: 0; border-bottom: 1px solid var(--border-strong); }
.section + .section { border-top: 0; }
main > section:last-child { border-bottom: 0; }
.section > .container { padding-block: 16px 28px; }
.section-head {
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  margin: 0 0 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
}
.section-head h2 { margin: 0; font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.section-head h2::before { content: "// "; color: var(--accent); }
.section-desc { max-width: 46rem; margin: 0; color: var(--text-dim); font-size: 13.5px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.card, .cat-card {
  position: relative;
  min-width: 0;
  padding: 14px 16px 18px 74px;
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.cat-card:hover { background: var(--bg-elevated); }
.cat-icon {
  position: absolute;
  top: 16px;
  left: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 500 10px/1.4 var(--font-mono);
  text-transform: uppercase;
}
.cat-card h3 { margin: 0 0 5px; font: 500 14px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .025em; }
.cat-card p { max-width: 36rem; margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.status-pill { display: block; width: fit-content; margin-top: 8px; color: var(--text-faint); font: 400 9px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.status-pill.is-live { color: var(--accent); }
.related-terms, .related-companies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 28px; border-top: 1px solid var(--border); }
.related-terms a, .related-companies a {
  min-width: 0;
  padding: 8px 11px;
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: 400 11.5px/1.45 var(--font-mono);
  overflow-wrap: anywhere;
}
.related-terms a::before, .related-companies a::before { content: "↗ "; color: var(--accent); }
.related-terms a:hover, .related-companies a:hover { color: var(--accent); background: var(--bg-elevated); }

/* Homepage editorial registers */
.homepage-database { border-bottom: 0; }
.homepage-database .section-head { border-bottom: 0; }
.homepage-guides { border-bottom: 0; }
.homepage-guides .section-head { border-bottom: 0; }
.featured-records, .homepage-guide-list { border-top: 1px solid var(--border-strong); }
/* The Database list runs directly under the Featured cards, which already close
   with their own bottom rule, so the list does not add a second one on top. */
.homepage-database .featured-records { border-top: 0; }
.featured-record {
  position: relative;
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) 200px;
  min-width: 0;
  border-bottom: 1px solid var(--border);
}
.featured-record:hover { background: var(--bg-elevated); }
.featured-record-media { grid-column: 1; min-width: 0; padding: 10px 14px 10px 0; }
.featured-record-media img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; border: 1px solid var(--border-strong); object-fit: cover; }
.featured-record-body { grid-column: 2; min-width: 0; padding: 11px 20px 13px 0; }
.featured-record-body header { display: flex; flex-wrap: wrap; gap: 5px 14px; align-items: baseline; }
.featured-record-body h3 { margin: 0; font: 500 14px/1.35 var(--font-mono); }
.featured-record-body h3 a { position: relative; z-index: 2; color: var(--text); }
.featured-record-body h3 a:hover { color: var(--accent); }
.featured-record-body header > span {
  color: var(--accent);
  font: 500 9px/1.4 var(--font-mono);
  letter-spacing: .075em;
  text-transform: uppercase;
}
.featured-record-body > p {
  max-width: 54rem;
  margin: 5px 0 0;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.5;
}
.featured-record-meta { display: flex; flex-wrap: wrap; gap: 5px 24px; margin: 9px 0 0; }
.featured-record-meta > div { display: flex; gap: 6px; min-width: 0; }
.featured-record-meta dt {
  flex: none;
  color: var(--text-faint);
  font: 400 8.5px/1.45 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.featured-record-meta dd {
  max-width: 31rem;
  margin: 0;
  color: var(--text-dim);
  font: 400 9.5px/1.45 var(--font-mono);
  overflow-wrap: anywhere;
}
.featured-record-actions {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-width: 0;
  border-left: 1px solid var(--border);
}
.featured-action {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text);
  font: 500 9.5px/1.4 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.featured-action + .featured-action { border-top: 1px solid var(--border); }
.featured-action span { color: var(--accent); }
.featured-action-external { color: var(--accent); position: relative; z-index: 2; }
/* Featured Database reuses the Blog Featured posts card wholesale: the same
   .guide-feature-grid and .guide-feature rules carry the 2x2 proportions,
   borders, spacing, thumbnail placement, and responsive stacking. Only what a
   Database record adds beyond a Blog post is specified here. */
.database-feature { position: relative; }
.database-feature h3 { margin: 10px 0 6px; font: 500 15px/1.3 var(--font-mono); overflow-wrap: anywhere; }
.database-feature h3 a { color: var(--text); }
.database-feature:has(.database-feature-link:focus-visible) { background: var(--bg-elevated); }
/* Screenshots keep their own 8:5 capture ratio inside the Blog thumbnail slot,
   rather than being re-cropped to the 16:9 the Blog diagrams are drawn at. */
.database-feature .guide-feature-thumb img { aspect-ratio: 8 / 5; object-fit: cover; }
/* The whole card links to the internal profile, matching how a Blog card
   behaves, but a Database record also carries its own outbound Visit link, so
   it cannot simply be wrapped in one anchor. The profile link is stretched over
   the card instead; Visit sits above that overlay and keeps its destination. */
.database-feature-link::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}
.database-feature-visit {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 7px;
  margin-top: 11px;
  color: var(--accent);
  font: 500 9.5px/1.4 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.section-foot { display: flex; justify-content: flex-end; padding-top: 11px; }
.section-foot a {
  color: var(--text);
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.section-foot a span { color: var(--accent); }
.homepage-guides > .container { padding-bottom: 24px; }
.homepage-guide-row {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 104px;
  gap: 0;
  align-items: center;
  min-width: 0;
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.homepage-guide-row:hover { background: var(--bg-elevated); }
.homepage-guide-media { min-width: 0; padding-right: 16px; }
.homepage-guide-media img { display: block; width: 160px; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--border-strong); object-fit: contain; }
.homepage-guide-copy { min-width: 0; padding-right: 20px; }
.homepage-guide-category {
  color: var(--accent);
  font: 500 8.5px/1.35 var(--font-mono);
  letter-spacing: .075em;
  text-transform: uppercase;
}
.homepage-guide-row h3 { margin: 3px 0; font: 500 12.5px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.homepage-guide-row p { max-width: 52rem; margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.homepage-guide-row b {
  color: var(--accent);
  font: 400 9.5px/1.4 var(--font-mono);
  letter-spacing: .04em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Homepage FAQ: the same bordered editorial list the other homepage sections use
   -- question, answer, divider -- with every answer in the static HTML rather
   than behind a disclosure, so the orientation copy is readable at a glance and
   without JavaScript. Answers are capped at the shared reading measure so they
   do not run the full width of a wide desktop container. */
.homepage-faq { border-bottom: 0; }
.homepage-faq .section-head { border-bottom: 0; }
.homepage-faq > .container { padding-bottom: 30px; }
.faq-list { margin: 0; border-top: 1px solid var(--border-strong); }
.faq-item { min-width: 0; padding: 13px 0 15px; border-bottom: 1px solid var(--border); }
.faq-item dt {
  margin: 0 0 7px;
  color: var(--text);
  font: 500 12.5px/1.45 var(--font-mono);
  overflow-wrap: anywhere;
}
.faq-item dd {
  max-width: var(--reading);
  margin: 0;
  color: var(--text-body);
  font-size: 14.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.homepage-popular { border-bottom: 0; }
.homepage-popular .section-head { border-bottom: 0; }
.homepage-popular > .container { padding-bottom: 28px; }
.popular-terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border-strong);
}
.popular-term {
  min-width: 0;
  padding: 9px 12px 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.popular-term:hover { background: var(--bg-elevated); }
/* No leading glyph here: these are internal knowledge-graph links, not the
   outbound destinations the ↗ marker denotes elsewhere on the site. */
.popular-term-name { display: block; font: 500 11.5px/1.45 var(--font-mono); overflow-wrap: anywhere; }
.popular-term:hover .popular-term-name { color: var(--accent); }
.popular-term-category {
  display: block;
  margin-top: 3px;
  color: var(--text-faint);
  font: 400 8.5px/1.35 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Search and filtering */
.glossary-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.search-input {
  flex: 1;
  min-width: 220px;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font: 400 11.5px/1.4 var(--font-mono);
}
.search-input::placeholder { color: var(--text-faint); }
.result-count { color: var(--text-faint); font: 400 10.5px/1.4 var(--font-mono); white-space: nowrap; text-transform: uppercase; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 16px; border: 1px solid var(--border-strong); width: fit-content; max-width: 100%; }
.filter-pill {
  padding: 6px 9px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font: 400 9.5px/1.3 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.filter-pill:last-child { border-right: 0; }
.filter-pill:hover { background: var(--bg-elevated); color: var(--text); }
.filter-pill.is-active { background: var(--text); color: var(--bg); }
.empty-state { display: none; padding: 24px 0; border-top: 1px solid var(--border); color: var(--text-faint); font: 400 11px/1.5 var(--font-mono); }
.empty-state.is-visible { display: block; }

/* Site search utility */
.site-search-shell { padding-block: 30px 52px; }
.site-search-form { margin: 20px 0 22px; }
.site-search-form .search-input { display: block; width: 100%; min-width: 0; padding: 11px 12px; font-size: 13px; }
.site-search-count { min-height: 15px; margin: 0 0 8px; }
.site-search-results { border-top: 1px solid var(--border-strong); }
.site-search-result { display: block; min-width: 0; padding: 13px 4px 15px; border-bottom: 1px solid var(--border); color: var(--text); }
.site-search-result:hover { background: var(--bg-elevated); color: var(--text); }
.site-search-result-section { display: block; color: var(--accent); font: 500 9px/1.35 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.site-search-result h2 { margin: 5px 0 4px; font: 500 14px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.site-search-result p { max-width: 52rem; margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.site-search-result-category { display: block; margin-top: 5px; color: var(--text-faint); font: 400 9.5px/1.4 var(--font-mono); text-transform: uppercase; }
.site-search-state { margin: 0; padding: 24px 0; color: var(--text-faint); font: 400 11px/1.5 var(--font-mono); }

/* Register rows: Glossary and Database */
.glossary-list, .company-list, .guide-list, .technology-list { border-top: 1px solid var(--border-strong); }
.term-row, .company-row {
  display: grid;
  grid-template-columns: minmax(170px, .75fr) minmax(260px, 1.6fr) minmax(130px, .55fr);
  gap: 16px;
  align-items: baseline;
  min-width: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  scroll-margin-top: 20px;
}
.term-row { grid-template-columns: minmax(0, 1fr) 160px 110px; gap: 20px; align-items: center; padding: 10px 4px; }
.term-row:hover, .company-row:hover { background: var(--bg-elevated); }
.term-main { min-width: 0; }
.company-row-main { min-width: 0; display: contents; }
.term-thumb { display: block; min-width: 0; }
.term-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--border-strong); object-fit: contain; }
.term-name, .company-name { margin: 0; color: var(--text); font: 500 12px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.company-name { display: flex; align-items: center; gap: 9px; }
.company-favicon { display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); background: var(--media-matte); }
.company-favicon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.company-favicon-placeholder { color: var(--media-matte-text); font: 500 8px/1 var(--font-mono); letter-spacing: .08em; }
.term-row.is-live .term-name, .company-name { color: var(--accent); }
.term-desc, .company-desc { min-width: 0; max-width: none; margin: 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.term-main .term-tag { display: block; margin: 3px 0 4px; }
.term-row .term-status { text-align: right; }
.term-tag, .term-status, .company-cat-tag, .company-row-arrow, .company-concept-tag {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font: 400 9.5px/1.4 var(--font-mono);
  letter-spacing: .045em;
  text-transform: uppercase;
}
.term-status.is-live { color: var(--accent); }
.company-row-main { grid-column: 1 / 3; }
.company-row-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.company-concepts { display: none; }
.company-row-arrow { color: var(--accent); }

/* Shared article layouts */
.article-head, .guide-head, .technology-head, .stat-head {
  min-width: 0;
  padding: 23px 0 17px;
  border-bottom: 1px solid var(--border-strong);
}
.article-head .cat-icon { position: static; display: block; margin: 0 0 10px; }
.article-head h1, .guide-head h1, .technology-head h1, .stat-head h1 {
  max-width: 28em;
  margin: 0;
  color: var(--text);
  font: 500 clamp(30px, 4.5vw, 48px)/1.05 var(--font-mono);
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.article-title-row { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; }
.article-title-row h1 { min-width: 0; }
.profile-title-favicon { display: block; flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; }
.article-meta { margin: 8px 0 0; color: var(--text-faint); font: 400 10px/1.5 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.definition-box {
  max-width: var(--reading);
  margin: 20px 0 0;
  padding: 2px 0 2px 16px;
  border: 0;
  border-left: 3px solid var(--accent);
  background: transparent;
}
.definition-box p { margin: 0; color: var(--text); font-size: 17px; line-height: 1.55; }
.definition-box .def-label { display: block; margin-bottom: 7px; color: var(--accent); font: 500 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.article-body, .guide-body, .technology-body { min-width: 0; max-width: var(--reading); padding: 10px 0 34px; }
.article-body h2, .guide-body h2, .technology-body h2, .stat-body h2 {
  margin: 29px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
  font: 500 10.5px/1.25 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  scroll-margin-top: 24px;
}
.article-body h2::before, .guide-body h2::before, .technology-body h2::before, .stat-body h2::before { content: "§ "; color: var(--accent); }
.article-body p, .guide-body p, .technology-body p, .stat-body p {
  margin: 0 0 13px;
  color: var(--text-body);
  font-size: 15.5px;
  line-height: 1.68;
  text-wrap: pretty;
}
.article-body ul, .article-body ol, .guide-body ul, .guide-body ol, .technology-body ul, .technology-body ol, .stat-body ul, .stat-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--text-dim);
  font-size: 14.5px;
}
.article-body li, .guide-body li, .technology-body li, .stat-body li { margin-bottom: 7px; }
li::marker { color: var(--accent); }
.article-body strong, .guide-body strong, .technology-body strong, .stat-body strong { color: var(--text); }
.sources-list { padding-left: 0 !important; list-style: none; counter-reset: sources; }
.sources-list li { counter-increment: sources; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.sources-list li::before { content: "[" counter(sources) "]"; color: var(--accent); font: 400 10px/1.65 var(--font-mono); }
.sources-list a[href^="http"]::after { content: " ↗"; opacity: .65; }
.section-toc {
  min-width: 0;
  padding: 16px 18px;
  border-left: 1px solid var(--border);
  align-self: start;
}
.section-toc span { display: block; margin-bottom: 7px; color: var(--text-faint); font: 400 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.section-toc a { display: block; padding: 5px 0; border-top: 1px solid var(--border); color: var(--text); font: 400 11px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.section-toc a::before { content: "↳ "; color: var(--accent); }
.section-toc a:hover { color: var(--accent); background: transparent; }
.article-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: var(--reading); margin: 8px 0 32px; padding-top: 12px; border-top: 1px solid var(--border-strong); }
.article-nav a { min-width: 0; color: var(--text); font: 400 11px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.article-nav .nav-next { text-align: right; }
.nav-dir { display: block; color: var(--accent); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.back-to-glossary { display: inline-block; margin: 0 0 34px; color: var(--text-dim); font: 400 10.5px/1.4 var(--font-mono); text-transform: uppercase; }

/* Glossary article: reading column with field index */
.container:has(> .definition-box) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  align-items: start;
}
.container:has(> .definition-box) > .article-head,
.container:has(> .definition-box) > .definition-box,
.container:has(> .definition-box) > .glossary-feature-media,
.container:has(> .definition-box) > .article-body,
.container:has(> .definition-box) > .article-nav,
.container:has(> .definition-box) > .back-to-glossary { grid-column: 1; }
.glossary-feature-media { min-width: 0; max-width: var(--reading); margin: 24px 0 4px; border: 1px solid var(--border-strong); background: var(--bg-elevated); }
.glossary-feature-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.container:has(> .definition-box) > .section-toc { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 16px; }

/* Database records */
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.profile-summary { grid-column: 1; grid-row: 1; min-width: 0; padding: 20px 30px 20px 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border-strong); }
.profile-media { max-width: 720px; margin: 0 0 18px; border: 1px solid var(--border-strong); background: var(--bg-elevated); }
.profile-media img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.profile-media figcaption { padding: 6px 9px; border-top: 1px solid var(--border); color: var(--text-faint); font: 400 8.5px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.profile-desc { max-width: 47rem; margin: 0; color: var(--text-dim); font-size: 15.5px; line-height: 1.65; }
.profile-visit {
  margin-top: 15px;
  padding: 11px 18px;
  border-color: var(--accent-on-strong);
  background: var(--accent-on-strong);
  color: var(--strong-surface);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
}
.profile-visit:hover {
  border-color: var(--strong-surface);
  background: var(--strong-surface);
  color: var(--strong-surface-text);
}
.profile-aside { grid-column: 2; grid-row: 1 / span 2; min-width: 0; padding: 20px 0 0 18px; }
.profile-aside .section-toc { position: static; margin: 0 0 14px; padding: 0 0 14px; border-left: 0; }
.profile-layout > .article-body { grid-column: 1; grid-row: 2; padding-right: 30px; border-right: 1px solid var(--border); }
.fact-rail { min-width: 0; border: 1px solid var(--border-strong); }
.fact-rail-label { display: block; padding: 8px 11px; border-bottom: 1px solid var(--border-strong); background: var(--strong-surface); color: var(--strong-surface-text); font: 400 9.5px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.fact-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 7px 11px; border-bottom: 1px solid var(--border); }
.fact-item:last-child { border-bottom: 0; }
.fact-label { min-width: 0; color: var(--text-faint); font: 400 9.5px/1.45 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.fact-value, .fact-list-item { min-width: 0; color: var(--text); font: 400 11.5px/1.45 var(--font-mono); overflow-wrap: anywhere; }
.fact-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.fact-chip { color: var(--text); font: 400 10.5px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.fact-chip::before { content: "+"; color: var(--accent); margin-right: 3px; }
.fact-list { min-width: 0; }
.fact-list-item + .fact-list-item { margin-top: 4px; }
.fact-list-item::before { content: "— "; color: var(--accent); }
.fact-rail-action { padding: 11px; border-top: 1px solid var(--border-strong); }
.fact-rail-visit { justify-content: center; width: 100%; margin-top: 0; }

/* Calls, steps and cross-reference registers */
.callout, .unknown-note { margin: 18px 0; padding: 12px 15px; border: 0; border-left: 3px solid var(--accent); background: var(--bg-elevated); color: var(--text-dim); }
.callout.is-warning { border-left-color: var(--danger); }
.callout-label { display: block; margin-bottom: 6px; color: var(--accent); font: 500 9.5px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.callout.is-warning .callout-label { color: var(--danger); }
.callout p:last-child { margin-bottom: 0; }
.step-list { padding-left: 0 !important; list-style: none; counter-reset: step; }
.step-list li { counter-increment: step; position: relative; display: block; padding: 9px 0 9px 40px; border-bottom: 1px solid var(--border); }
.step-list li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 11px; left: 0; color: var(--accent); font: 500 10px/1.6 var(--font-mono); }
.reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.reference-grid a { display: flex; flex-direction: column; min-width: 0; padding: 10px 11px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text); }
.reference-grid a:hover { background: var(--bg-elevated); }
.reference-grid strong { font: 500 11.5px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.reference-grid strong::before { content: "↗ "; color: var(--accent); }
.reference-grid span { margin-top: 4px; color: var(--text-dim); font-size: 11.5px; line-height: 1.45; }
.technology-context { margin: 30px 0; }
.technology-context > p { color: var(--text-dim); }

/* Guides */
.guides-hero + .section { border-bottom: 0; }
.guides-hero + .section .section-head { border-bottom: 0; }
.guides-directory { border-bottom: 0; }
.guide-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border-strong); }
.guide-feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 14px 16px 18px;
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.guide-feature { display: grid; grid-template-columns: minmax(0, 1fr) 144px; gap: 16px; align-items: center; }
.guide-feature-copy { min-width: 0; }
.guide-feature-thumb, .guide-row-thumb, .technology-row-thumb { display: block; min-width: 0; }
.guide-feature-thumb img, .guide-row-thumb img, .technology-row-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--border-strong); object-fit: contain; }
.guide-feature:hover { background: var(--bg-elevated); }
.guide-feature-category, .guide-row > div > span, .technology-row > div > span {
  color: var(--accent);
  font: 500 9.5px/1.4 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.guide-feature h2 { margin: 10px 0 6px; font: 500 15px/1.3 var(--font-mono); overflow-wrap: anywhere; }
.guide-feature p { margin: 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.guide-row, .technology-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; min-width: 0; padding: 10px 4px; border-bottom: 1px solid var(--border); color: var(--text); }
.guide-row { grid-template-columns: minmax(0, 1fr) 160px 104px; align-items: center; }
.technology-row { grid-template-columns: minmax(0, 1fr) 160px 110px; align-items: center; }
.guide-row:hover, .technology-row:hover { background: var(--bg-elevated); }
.guide-row > div, .technology-row > div { min-width: 0; }
.guide-row h2, .technology-row h2 { margin: 4px 0; font: 500 13px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.guide-row p, .technology-row p { max-width: 52rem; margin: 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.guide-row b, .technology-row b { color: var(--accent); font: 400 10px/1.4 var(--font-mono); white-space: nowrap; }
.guide-shell { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.guide-head { grid-column: 1 / -1; max-width: none; }
.guide-head > p, .technology-head p, .stat-head p { max-width: 50rem; margin: 10px 0 0; color: var(--text-dim); font-size: 16px; line-height: 1.6; }
.guide-audience { color: var(--text-faint) !important; font: 400 10.5px/1.5 var(--font-mono) !important; text-transform: uppercase; }
.guide-feature-media { grid-column: 1 / -1; min-width: 0; margin: 20px 0 0; border: 1px solid var(--border-strong); background: var(--bg-elevated); }
.guide-feature-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.guide-scope { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--border-strong); }
.guide-scope ul { margin: 7px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 13px; }
.guide-prereqs { padding-left: 20px; border-left: 1px solid var(--border); }
.guide-prereqs > strong { color: var(--text-faint); font: 500 9.5px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.guide-shell > .section-toc { grid-column: 2; grid-row: 4 / span 3; position: sticky; top: 16px; }
.guide-body { grid-column: 1; }
.guide-shell > .back-to-glossary { grid-column: 1; }

/* Technology dossiers */
.statistics-principles { display: flex; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; margin-top: 18px; border: 1px solid var(--border-strong); }
.statistics-principles span { padding: 5px 8px; border-right: 1px solid var(--border); color: var(--text-dim); font: 400 9px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.statistics-principles span:last-child { border-right: 0; }
/* The main column holds exactly four rows -- head, feature image, body, back link -- named
   explicitly so the right rail can span the whole column with `grid-row: 1 / -1`. That span is
   what keeps the layout honest: while the At a Glance panel sat in row 1 on its own, row 1 grew
   to whichever was taller, the head or the panel, and the panel always won (240-288px against a
   137-213px head). The feature image starts row 2, so it could not begin until the panel had
   cleared, leaving 70-168px of dead space under the title that varied per dossier. Spanning the
   rail means its height is measured against the full column instead of one row, so the image now
   follows the head at its own 20px margin. */
.technology-shell { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto auto auto; align-items: start; }
.technology-head { grid-column: 1; max-width: none; padding-right: 30px; }
.technology-rail { grid-column: 2; grid-row: 1 / -1; align-self: stretch; min-width: 0; }
.technology-facts { margin-top: 23px; border: 1px solid var(--border-strong); }
.technology-facts::before { content: "At a glance"; display: block; grid-column: 1 / -1; padding: 8px 10px; background: var(--strong-surface); color: var(--strong-surface-text); font: 400 9.5px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.technology-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.technology-facts span { color: var(--text-faint); font: 400 9px/1.45 var(--font-mono); text-transform: uppercase; }
.technology-facts strong { font: 400 11px/1.45 var(--font-mono); overflow-wrap: anywhere; }
.technology-feature-media { grid-column: 1; grid-row: 2; min-width: 0; margin: 20px 30px 10px 0; border: 1px solid var(--border-strong); background: var(--bg-elevated); }
.technology-feature-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
/* The rail is stretched to the column's full height, so the dossier nav still sticks for the whole
   scroll exactly as it did when it was a grid item spanning rows 2-4. */
.technology-shell .section-toc { position: sticky; top: 16px; }
.technology-body { grid-column: 1; }
.technology-shell > .back-to-glossary { grid-column: 1; }

/* Statistics as an evidence publication */
.statistics-index-hero { padding-block: 32px 29px; }
.statistics-index-hero h1 { margin-top: 0; font-size: clamp(34px, 4.5vw, 54px); }
.statistics-index-hero p { max-width: 46rem; }
.statistics-publications { border-bottom: 1px solid var(--border-strong); }
.statistics-feature { display: grid; grid-template-columns: minmax(0, .88fr) minmax(400px, 1.12fr); grid-template-rows: 1fr auto; gap: 22px 46px; align-items: center; padding: 42px 0; border-bottom: 1px solid var(--border-strong); }
.statistics-feature:last-child { border-bottom: 0; }
.statistics-feature-copy { align-self: end; min-width: 0; }
.statistics-report-scope { color: var(--accent); font: 500 9.5px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.statistics-feature h2 { max-width: 13em; margin: 12px 0 14px; font: 500 clamp(26px, 3.2vw, 38px)/1.12 var(--font-mono); letter-spacing: -.035em; text-wrap: balance; }
.statistics-feature h2 a { color: var(--text); }
.statistics-feature h2 a:hover { color: var(--accent); background: transparent; }
.statistics-feature-copy > p:not(.statistics-feature-meta) { max-width: 35rem; margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.65; }
.statistics-feature-meta { display: flex; flex-wrap: wrap; gap: 5px 18px; margin: 22px 0 0; color: var(--text-faint); font: 500 9.5px/1.5 var(--font-mono); letter-spacing: .045em; text-transform: uppercase; }
.statistics-feature-meta > * + * { position: relative; }
.statistics-feature-meta > * + *::before { content: ""; position: absolute; top: .45em; left: -10px; width: 3px; height: 3px; background: var(--accent); }
.statistics-feature-visual { grid-column: 2; grid-row: 1 / span 2; display: block; border: 1px solid var(--border-strong); background: var(--media-matte); }
.statistics-feature-visual:hover { background: var(--media-matte); }
.statistics-feature-visual img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.statistics-feature-action { align-self: start; width: fit-content; color: var(--accent); font: 600 10px/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.statistics-feature-action:hover { color: var(--text); }
.methodology-strip { background: var(--bg-elevated); }
.methodology-strip .container { display: grid; grid-template-columns: .75fr 1.25fr; gap: 30px; align-items: start; }
.methodology-strip h2 { margin: 9px 0 0; font: 500 17px/1.35 var(--font-mono); }
.methodology-strip p { margin: 0; color: var(--text-dim); font-size: 13px; }
.statistics-methodology > .container { padding-block: 28px 32px; }
.statistics-reference { border-bottom: 1px solid var(--border-strong); }
.statistics-reference .container { display: flex; align-items: baseline; gap: 30px; padding-block: 18px 22px; }
.statistics-reference h2 { flex: 0 0 auto; margin: 0; color: var(--text-faint); font: 500 9.5px/1.4 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.statistics-reference nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.statistics-reference a { color: var(--text); font: 500 11px/1.5 var(--font-mono); text-transform: uppercase; }
.statistics-reference a::after { content: " →"; color: var(--accent); }
.stat-shell { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.stat-head { grid-column: 1; max-width: none; padding-right: 28px; }
.provenance-box { grid-column: 2; grid-row: 1; margin-top: 23px; border: 1px solid var(--border-strong); }
.provenance-box::before { content: "Provenance"; display: block; padding: 8px 10px; background: var(--strong-surface); color: var(--strong-surface-text); font: 400 9.5px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.provenance-box > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.provenance-box span { color: var(--text-faint); font: 400 9px/1.45 var(--font-mono); text-transform: uppercase; }
.provenance-box strong { font: 400 11px/1.45 var(--font-mono); overflow-wrap: anywhere; }
.provenance-box > p { margin: 0; padding: 9px 10px; color: var(--text-dim); font-size: 11px; line-height: 1.45; }
.stat-shell > .section-toc { grid-column: 2; grid-row: 2 / span 3; position: sticky; top: 16px; }
.stat-body { grid-column: 1; min-width: 0; padding: 10px 28px 34px 0; }
.stat-shell > .back-to-glossary { grid-column: 1; }
.stat-body > section { margin: 29px 0; scroll-margin-top: 24px; }
.stat-bars { display: grid; gap: 11px; max-width: 50rem; margin: 17px 0; }
.stat-bar-label { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 5px; color: var(--text-dim); font: 400 11px/1.4 var(--font-mono); }
.stat-bar-label small { color: var(--text-faint); font-weight: 400; }
.stat-bar-track { height: 7px; background: var(--border); }
.stat-bar-track i { display: block; height: 100%; background: var(--accent); }
.stat-table-wrap { width: 100%; overflow-x: auto; margin-top: 14px; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); -webkit-overflow-scrolling: touch; }
.stat-table { width: 100%; min-width: 760px; border-collapse: collapse; font: 400 11.5px/1.45 var(--font-mono); }
.stat-table th { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-faint); font-size: 9px; font-weight: 400; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.stat-table td { max-width: 420px; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: top; overflow-wrap: anywhere; }
.stat-table td:first-child { min-width: 140px; color: var(--text); }
.stat-table tbody tr:hover { background: var(--bg-elevated); }
.data-yes { color: var(--accent); }
.data-no { color: var(--text-faint); }
.data-unknown { color: var(--text-faint); }
.online-report { display: block; max-width: 980px; }
.online-report .report-hero { max-width: 52rem; padding: 38px 0 32px; border-bottom: 0; }
.online-report .report-hero h1 { max-width: none; margin-top: 8px; font-size: clamp(35px, 5vw, 54px); }
.online-report .report-hero > p { max-width: 47rem; margin-top: 14px; font-size: 17px; line-height: 1.65; }
.online-report .stat-category { color: var(--accent); font: 500 10px/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.online-report .report-scope { color: var(--text-dim); font-size: 13px; }
.online-report .stat-body { max-width: none; padding: 0 0 44px; }
.online-report .stat-body > section { width: 100%; }
.online-report .stat-body h2 { margin: 0 0 17px; padding-bottom: 11px; border-bottom: 1px solid var(--border-strong); font: 500 clamp(19px, 2.4vw, 24px)/1.3 var(--font-mono); letter-spacing: -.025em; text-transform: none; }
.online-report .stat-body h2::before { content: none; }
.online-report .stat-body h3 { margin: 24px 0 10px; font: 500 13px/1.4 var(--font-mono); }
.online-report .stat-body p { max-width: 47rem; }
.online-report .report-section { margin: 0; padding: 42px 0; border-top: 1px solid var(--border); }
.report-metadata { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0 16px; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.report-metadata > div { padding: 9px 18px 9px 0; }
.report-metadata dt { color: var(--text-faint); font: 400 9px/1.35 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.report-metadata dd { margin: 3px 0 0; color: var(--text); font: 500 12px/1.4 var(--font-mono); }
.report-findings ol { margin: 0; padding: 0; list-style: none; counter-reset: finding; border-top: 1px solid var(--border-strong); }
.report-findings li { counter-increment: finding; position: relative; display: block; max-width: 50rem; margin: 0; padding: 13px 0 13px 44px; border-bottom: 1px solid var(--border); color: var(--text-body); font-size: 15px; line-height: 1.55; }
.report-findings li::before { content: counter(finding, decimal-leading-zero); position: absolute; top: 15px; left: 0; color: var(--accent); font: 500 10px/1.8 var(--font-mono); }
.composition-chart { max-width: 48rem; margin: 25px 0 0; }
.composition-plot { display: grid; gap: 18px; }
.composition-label { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 7px; color: var(--text); font: 500 12px/1.45 var(--font-mono); }
.composition-label span { overflow-wrap: anywhere; }
.composition-label strong { flex: 0 0 auto; }
.composition-label small { color: var(--text-faint); font-weight: 400; }
.composition-track { height: 10px; background: var(--border); }
.composition-track i { display: block; height: 100%; background: var(--accent); }
.composition-chart figcaption { margin-top: 13px; color: var(--text-faint); font: 400 10px/1.45 var(--font-mono); }
.report-note { margin-top: 14px !important; color: var(--text-dim) !important; font-size: 13px !important; }
.report-table-wrap { width: 100%; overflow-x: auto; margin-top: 20px; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); -webkit-overflow-scrolling: touch; }
.report-summary-wrap { max-width: 48rem; }
.report-table { width: 100%; min-width: 520px; border-collapse: collapse; font: 400 11.5px/1.5 var(--font-mono); }
.report-evidence-table { min-width: 820px; }
.report-table caption { padding: 8px 0 0; color: var(--text-faint); font: 400 9.5px/1.45 var(--font-mono); text-align: left; caption-side: bottom; }
.report-table thead th { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--border-strong); color: var(--text-faint); font-size: 9px; font-weight: 500; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.report-table tbody th, .report-table tbody td { max-width: 430px; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--border); color: var(--text-dim); font-weight: 400; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.report-table tbody th { min-width: 155px; color: var(--text); }
.report-table tbody tr:last-child > * { border-bottom: 0; }
.report-table .is-numeric { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.observation-list { max-width: 47rem; padding-left: 19px !important; }
.evidence-register > p { margin-bottom: 22px; }
.evidence-disclosure { border-top: 1px solid var(--border-strong); }
.evidence-disclosure:last-child { border-bottom: 1px solid var(--border-strong); }
.evidence-disclosure summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 13px 3px; color: var(--text); cursor: pointer; font: 500 12px/1.45 var(--font-mono); list-style-position: inside; }
.evidence-disclosure summary:hover { background: var(--bg-elevated); }
.evidence-disclosure summary small { color: var(--text-faint); font: 400 10px/1.45 var(--font-mono); text-align: right; }
.evidence-disclosure[open] { padding-bottom: 22px; }
.evidence-disclosure[open] summary { border-bottom: 1px solid var(--border); }
.method-list { max-width: 50rem; margin: 0 0 18px; }
.method-list > div { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 20px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.method-list dt { color: var(--text); font: 500 11px/1.5 var(--font-mono); }
.method-list dd { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; }
.report-link-list { max-width: 50rem; margin: 0 !important; padding: 0 !important; list-style: none; border-top: 1px solid var(--border-strong); }
.report-link-list li { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; margin: 0 !important; padding: 10px 0; border-bottom: 1px solid var(--border); }
.report-link-list a { font: 500 11.5px/1.45 var(--font-mono); }
.report-link-list span { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.online-report .sources-list li { position: relative; display: block; padding-left: 38px; }
.online-report .sources-list li::before { position: absolute; top: 7px; left: 0; }

@media print {
  .online-report { max-width: none; }
  .evidence-disclosure::details-content { display: block !important; content-visibility: visible !important; }
  .evidence-disclosure:not([open]) > *:not(summary) { display: block !important; }
  .evidence-disclosure summary { break-after: avoid; }
  .report-table-wrap { overflow: visible; }
  .report-evidence-table { min-width: 0; font-size: 8px; }
}

/* Compact top navigation and single-column documents. Once the rail becomes a bar there is nowhere
   persistent left for the utility area, and the site has no footer to fall back on, so nav and utility
   collapse together into one toggled panel. */
@media (max-width: 1100px) {
  body { padding-left: 0; }
  .site-header { position: sticky; inset: auto; top: 0; display: block; width: 100%; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border-strong); background: var(--bg); }
  .site-header .container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: min(100%, var(--max-width)); height: 58px; padding-inline: 20px; }
  .brand-lockup { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
  .brand-name { font-size: 11px; line-height: 1.2; }
  .brand small, .header-holdings { display: none; }
  .theme-toggle { flex: 0 0 30px; margin: 0 0 0 8px; }
  .nav-toggle { display: inline-flex; margin-left: auto; padding: 6px 8px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font: 500 9.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
  .nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    border-bottom: 1px solid var(--border-strong);
    background: var(--bg);
  }
  .nav-panel.is-open { display: block; }
  .main-nav { display: block; }
  .main-nav a { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 20px; border: 0; border-top: 1px solid var(--border); }
  .main-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
  .sidebar-utility { margin-top: 0; padding: 15px 20px 18px; border-top: 1px solid var(--border-strong); }
  .sidebar-disclaimer { max-width: 62ch; overflow-wrap: normal; }
}

@media (max-width: 1024px) {
  .popular-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statistics-feature { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 20px 32px; }
}

@media (max-width: 1366px) and (min-width: 1101px) {
  .technology-shell { max-width: 1050px; }
}

@media (max-width: 900px) {
  .illustrated-hero > .container { grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr); min-height: 420px; }
  :is(.home-hero, .database-hero, .guides-hero).illustrated-hero > .container { min-height: 0; }
  :is(.database-hero, .guides-hero).illustrated-hero > .container { grid-template-columns: minmax(0, 1fr) minmax(286px, .85fr); }
  .illustrated-hero .hero-copy { padding-right: 18px; }
  .hero-visual img { right: -18px; width: min(350px, 100%); }
  .container:has(> .definition-box), .guide-shell, .technology-shell, .stat-shell { display: block; }
  .container:has(> .definition-box) > .section-toc,
  .guide-shell > .section-toc,
  .technology-shell .section-toc,
  .stat-shell > .section-toc { position: static; padding: 13px 0 17px; border-left: 0; border-bottom: 1px solid var(--border-strong); }
  .section-toc a { display: inline-block; margin-right: 13px; border-top: 0; }
  .technology-head, .stat-head { padding-right: 0; }
  .technology-facts, .provenance-box { margin: 16px 0 0; }
  .technology-feature-media { margin-right: 0; }
  .stat-body { padding-right: 0; }
}

@media (max-width: 768px) {
  .container { padding-inline: 18px; }
  .site-header .container { padding-inline: 18px; }
  .grid, .related-terms, .related-companies, .guide-feature-grid, .reference-grid { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; gap: 5px; }
  .term-row { grid-template-columns: minmax(0, 1fr) 140px; gap: 20px; align-items: center; }
  .company-row { grid-template-columns: minmax(130px, .65fr) minmax(0, 1.35fr); gap: 12px; }
  .term-row .term-status { grid-column: 2; text-align: left; }
  .company-row-meta { grid-column: 1 / -1; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-summary, .profile-aside, .profile-layout > .article-body { grid-column: auto; grid-row: auto; }
  .profile-summary { padding-right: 0; border-right: 0; }
  .profile-aside { padding-left: 0; }
  .profile-aside .section-toc { position: static; }
  .profile-layout > .article-body { padding-right: 0; border-right: 0; }
  .guide-scope, .methodology-strip .container { grid-template-columns: 1fr; gap: 12px; }
  .guide-prereqs { padding: 15px 0 0; border-top: 1px solid var(--border); border-left: 0; }
  .statistics-feature { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 20px; padding: 32px 0; }
  .statistics-feature-copy { align-self: auto; }
  .statistics-feature-visual { grid-column: 1; grid-row: auto; }
  .statistics-feature-action { grid-column: 1; }
  .online-report > .provenance-box, .report-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metadata > div:nth-child(2) { border-right: 0; }
  .report-metadata > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .featured-record { grid-template-columns: minmax(0, 1fr); }
  .featured-record-media { grid-column: 1; grid-row: 1; width: min(220px, 100%); padding-right: 0; }
  .featured-record-body { grid-column: 1; grid-row: 2; padding-right: 0; }
  .featured-record-actions {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
    justify-content: flex-start;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  .featured-action { justify-content: flex-start; }
  .featured-action + .featured-action { border-top: 0; border-left: 1px solid var(--border); }
  .homepage-guide-row { grid-template-columns: 150px minmax(0, 1fr); }
  .homepage-guide-media { padding-right: 12px; }
  .homepage-guide-copy { padding-right: 0; }
  .homepage-guide-row b { grid-column: 2; margin-top: 6px; text-align: left; }
  .guide-feature { grid-template-columns: minmax(0, 1fr) 150px; }
  .guide-row { grid-template-columns: minmax(0, 1fr) 140px; }
  .guide-row b { grid-column: 2; text-align: left; }
  .technology-row { grid-template-columns: minmax(0, 1fr) 140px; }
  .technology-row b { grid-column: 2; text-align: left; }
}

@media (max-width: 640px) {
  .illustrated-hero > .container { display: block; min-height: 0; padding-top: 28px; padding-bottom: 0; }
  :is(.home-hero, .database-hero, .guides-hero).illustrated-hero > .container {
    padding-top: 28px;
    padding-bottom: 0;
  }
  .illustrated-hero .hero-copy { padding-right: 0; }
  .hero-visual { height: 240px; margin-top: 20px; }
  .hero-visual img { top: 0; right: 50%; width: min(300px, 84vw); transform: translateX(50%); }
  :is(.home-hero, .database-hero, .guides-hero) .hero-visual img {
    top: auto;
    right: 50%;
    bottom: 0;
    width: auto;
    height: 100%;
    max-width: 84vw;
    transform: translateX(50%);
  }
  .filter-pills { max-width: 100%; }
}

@media (max-width: 560px) {
  .popular-terms { grid-template-columns: minmax(0, 1fr); }
  .popular-term { padding-inline: 0; border-right: 0; }
  .site-header .container { height: 52px; }
  .nav-panel { max-height: calc(100vh - 52px); }
  .main-nav a { padding: 10px 18px; }
  .sidebar-utility { padding: 15px 18px 18px; }
  .hero h1, .guides-hero h1, .technology-hero h1, .statistics-hero h1, .article-head h1, .guide-head h1, .technology-head h1, .stat-head h1 { font-size: clamp(25px, 9vw, 34px) !important; }
  .hero-lede, .guides-hero p, .technology-hero p, .statistics-hero p, .guide-head > p, .technology-head p, .stat-head p { font-size: 15px; }
  .term-row { grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; }
  .company-row { display: block; padding: 10px 4px; }
  .term-desc, .company-desc { margin-top: 4px; }
  .term-tag, .term-status, .company-row-meta { margin-top: 7px; }
  .term-row .term-status { grid-column: 1 / -1; }
  .filter-pills { display: grid; width: 100%; }
  .filter-pill { border-right: 0; border-bottom: 1px solid var(--border); text-align: left; }
  .filter-pill:last-child { border-bottom: 0; }
  .fact-item { grid-template-columns: 96px minmax(0, 1fr); }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav .nav-next { text-align: left; }
  .guide-feature { grid-template-columns: minmax(0, 1fr) 118px; gap: 12px; padding-inline: 10px; }
  .guide-feature h2 { margin-top: 6px; }
  .guide-row { grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; }
  .guide-row b { grid-column: 1 / -1; }
  .technology-row { grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; }
  .technology-row b { grid-column: 1 / -1; }
  .stat-bar-label { align-items: flex-start; }
  .online-report .report-hero { padding: 28px 0 24px; }
  .online-report .report-section { padding: 32px 0; }
  .report-findings li { padding-left: 35px; font-size: 14px; }
  .composition-label { align-items: flex-start; font-size: 11px; }
  .evidence-disclosure summary { grid-template-columns: 1fr; gap: 3px; }
  .evidence-disclosure summary small { text-align: left; }
  .method-list > div, .report-link-list li { grid-template-columns: 1fr; gap: 3px; }
  .report-table { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.theme-ready body,
  html.theme-ready .site-header,
  html.theme-ready .main-nav,
  html.theme-ready .theme-toggle,
  html.theme-ready .search-input,
  html.theme-ready .filter-pill { transition: none; }
}

@media (max-width: 390px) {
  .container { padding-inline: 14px; }
  .site-header .container { padding-inline: 14px; }
  .main-nav a { padding-inline: 14px; }
  .sidebar-utility { padding: 14px 14px 16px; }
  .brand-name { font-size: 10px; }
  .section > .container { padding-block: 14px 22px; }
  .hero-visual { height: 220px; margin-top: 18px; }
  :is(.home-hero, .database-hero, .guides-hero) .hero-visual img { max-width: 80vw; }
  .card, .cat-card { padding-left: 60px; }
  .fact-item { grid-template-columns: 1fr; gap: 3px; }
  .statistics-principles { display: block; width: 100%; }
  .statistics-principles span { display: block; border-right: 0; border-bottom: 1px solid var(--border); }
  .statistics-principles span:last-child { border-bottom: 0; }
  .statistics-feature { gap: 17px; padding: 28px 0; }
  .statistics-feature h2 { font-size: clamp(25px, 9vw, 34px); }
  .statistics-feature-meta { display: block; margin-top: 17px; }
  .statistics-feature-meta > * { display: block; }
  .statistics-feature-meta > * + * { margin-top: 3px; }
  .statistics-feature-meta > * + *::before { content: none; }
  .statistics-reference .container { display: block; }
  .statistics-reference nav { margin-top: 10px; }
  .online-report > .provenance-box, .report-metadata { grid-template-columns: 1fr; }
  .report-metadata > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .report-metadata > div:last-child { border-bottom: 0; }
  .technology-facts { grid-template-columns: 1fr; }
  .featured-record { display: block; padding: 11px 0; }
  .featured-record-media { width: min(240px, 100%); padding: 0 0 10px; }
  .featured-record-body { padding: 0; }
  .featured-record-body header { display: block; }
  .featured-record-body header > span { display: block; margin-top: 4px; }
  .featured-record-meta { display: block; }
  .featured-record-meta > div { display: block; }
  .featured-record-meta > div + div { margin-top: 5px; }
  .featured-record-actions { display: flex; grid-column: auto; margin-top: 9px; }
  .featured-action { padding-left: 0; }
  .featured-action + .featured-action { padding-left: 10px; }
  .homepage-guide-row { display: block; padding: 10px 0; }
  .homepage-guide-media { display: block; width: min(240px, 100%); margin-bottom: 8px; padding-right: 0; }
  .homepage-guide-copy { padding-right: 0; }
  .homepage-guide-row b { display: block; margin-top: 7px; }
  .guide-feature { grid-template-columns: minmax(0, 1fr) 96px; }
  .guide-feature p { font-size: 11.5px; }
  .guide-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .technology-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .term-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .article-title-row { gap: 9px; }
  .profile-title-favicon { flex-basis: 40px; width: 40px; height: 40px; }
  .online-report .report-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .online-report .report-metadata > div { padding: 8px 8px 8px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .online-report .report-metadata > div:nth-last-child(-n+2) { border-bottom: 0; }
}