/* ============================================================
   tokens
   ============================================================ */
:root {
  /* paper & ink */
  --paper:        #F2EBDD;
  --paper-warm:   #EBE3D0;            /* voice ground, one step warmer */
  --ink:          #1C1A17;
  --ink-secondary: rgba(28, 26, 23, 0.60);
  --ink-tertiary:  rgba(28, 26, 23, 0.40);
  --hairline:      rgba(28, 26, 23, 0.12);
  --highlight:     rgba(242, 230, 186, 0.55);

  /* type */
  --serif: 'PT Serif', 'Iowan Old Style', 'Charter', Georgia, serif;
  --mono:  'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* reading register */
  --reading-size:    18px;
  --reading-leading: 1.55;
  --reading-paragraph-gap: 1.2em;

  /* dense register */
  --dense-size:    13px;
  --dense-leading: 1.4;
  --dense-row-h:   32px;

  /* heading scale */
  --h1: 36px;
  --h2: 28px;
  --h3: 22px;

  /* margin / column geometry */
  --col-rail:    12ch;
  --col-prose:   62ch;
  --col-margin:  24ch;
  --gap:         3ch;

  /* voice block */
  --voice-bar-w: 3px;
  --voice-pad:   12px;
}

/* ============================================================
   base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  background-image:
    radial-gradient(rgba(28,26,23,0.018) 1px, transparent 1px);
  background-size: 3px 3px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--reading-size);
  line-height: var(--reading-leading);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ink-tertiary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration-color: var(--ink);
}

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

/* ============================================================
   site header
   ============================================================ */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-name {
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.site-nav {
  display: flex;
  gap: 20px;
  align-items: baseline;
}
.site-nav a, .search-trigger {
  text-decoration: none;
  color: var(--ink-secondary);
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.site-nav a:hover, .search-trigger:hover { color: var(--ink); }
.search-trigger kbd {
  font: inherit;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 1px 4px;
  margin-left: 4px;
  color: var(--ink-tertiary);
}

/* ============================================================
   main container
   ============================================================ */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}

/* ============================================================
   typographic markers (mono labels for entity types)
   ============================================================ */
.kind-mark {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-right: 6px;
  vertical-align: 0.10em;
}
.section-glyph {
  color: var(--ink-tertiary);
  margin-right: 0.5em;
  font-weight: 400;
}
.section-meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-left: 0.5em;
}

/* ============================================================
   article — three-zone reading grid
   ============================================================ */
.prose-grid {
  display: grid;
  grid-template-columns: var(--col-rail) var(--col-prose) var(--col-margin);
  column-gap: var(--gap);
  align-items: start;
  position: relative;
}

.article-header {
  grid-column: 1 / -1;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin: 0 0 16px;
}
.article-header h1 {
  font-size: var(--h1);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.article-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  margin: 0;
  display: flex;
  gap: 18px;
  text-transform: uppercase;
}

.rail { /* reserved column; left empty for now */ }

.prose {
  grid-column: 2;
  max-width: var(--col-prose);
}
.prose h2 {
  font-size: var(--h2);
  line-height: 1.2;
  margin: 1.8em 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.prose h3 {
  font-size: var(--h3);
  line-height: 1.25;
  margin: 1.4em 0 0.4em;
  font-weight: 700;
}
.prose p {
  margin: 0 0 var(--reading-paragraph-gap);
}
.prose blockquote {
  margin: 1.2em 0;
  padding: 0 0 0 2ch;
  border-left: 1px solid var(--ink-tertiary);
  color: var(--ink-secondary);
  font-style: italic;
}
.prose ul, .prose ol {
  margin: 0 0 var(--reading-paragraph-gap);
  padding-left: 1.4em;
}
.prose li { margin-bottom: 0.3em; }
.prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2em 0;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(28,26,23,0.05);
  padding: 1px 4px;
  border-radius: 2px;
}

/* ============================================================
   the margin lane — voices live here
   ============================================================ */
.margin {
  grid-column: 3;
  position: relative;
  /* JS positions voice blocks absolutely against this column on wide
     viewports. On narrow viewports the column collapses and voices
     fall into the prose flow (see media query below). */
}

.voice {
  background: var(--paper-warm);
  padding: 10px 14px 12px calc(var(--voice-pad) + var(--voice-bar-w));
  font-size: 14px;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
  position: relative;
  margin-bottom: 12px;
  /* color bar set per voice in voices.css */
}
.voice::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--voice-bar-w);
  background: linear-gradient(
    to bottom,
    var(--voice-color, var(--ink-tertiary)) 0%,
    color-mix(in srgb, var(--voice-color, var(--ink-tertiary)) 85%, transparent) 100%
  );
}
.voice-name {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--voice-color, var(--ink-secondary));
  margin-bottom: 4px;
}
.voice-body { font-style: italic; }
.voice-body p { margin: 0 0 0.5em; }
.voice-body p:last-child { margin-bottom: 0; }

/* On wide viewports, JS sets `position: absolute; top: <y>px;` on each
   voice. The container (.margin) is set to `position: relative` above. */
@media (min-width: 960px) {
  .voice[data-positioned] {
    position: absolute;
    left: 0;
    width: 100%;
  }
}

/* highlight on hover (sentence ↔ voice mutual) */
.voice.is-active,
.prose p.is-anchor-active {
  background: var(--highlight);
}

/* ============================================================
   narrow-viewport fallback: voices inline after their anchor
   ============================================================ */
@media (max-width: 959px) {
  .prose-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail, .margin { display: contents; }
  .voice {
    margin: 4px 0 var(--reading-paragraph-gap);
    font-size: 13px;
  }
}

/* ============================================================
   xrefs (links to other entities)
   ============================================================ */
.xref {
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-tertiary);
  position: relative;
  padding-right: 0.6em;
}
.xref::after {
  content: '°';
  position: absolute;
  right: 0;
  top: -0.15em;
  font-size: 0.75em;
  color: var(--ink-tertiary);
}
.xref:hover { border-bottom-color: var(--ink); }
.xref-missing { color: var(--ink-tertiary); border-bottom-style: dashed; }

/* ============================================================
   xref tooltip — substance leads, attribution sits in a quiet footer
   ============================================================ */
.xref-tip {
  position: absolute;
  z-index: 50;
  width: 380px;
  background: var(--paper);
  padding: 16px 20px 14px;
  font-family: var(--serif);
  color: var(--ink);
  box-shadow: 0 14px 44px rgba(28,26,23,0.14), 0 1px 0 var(--hairline);
  pointer-events: none;
}
.xref-tip[hidden] { display: none; }
.xref-tip .tip-title {
  font-weight: 700;
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.xref-tip .tip-lead {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.xref-tip .tip-attribution {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.xref-tip .tip-attribution .sep { opacity: 0.5; }
.xref-tip .tip-unvetted { color: var(--voice-color, var(--ink-tertiary)); font-weight: 600; }
.xref-tip[data-flipped] {
  box-shadow: 0 -14px 44px rgba(28,26,23,0.14), 0 -1px 0 var(--hairline);
}

/* ============================================================
   topic page
   ============================================================ */
.topic-page header { margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.topic-page h1 { font-size: var(--h1); font-weight: 700; margin: 0 0 12px; line-height: 1.15; letter-spacing: -0.01em; }
.topic-summary { max-width: var(--col-prose); margin: 12px 0 0; }
.topic-section { margin-top: 40px; }
.topic-section h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}
.entity-list { list-style: none; padding: 0; margin: 0; }
.entity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.entity-row a { text-decoration: none; }
.entity-row a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.entity-row.unvetted { opacity: 0.55; }
.row-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
}

/* ============================================================
   source page
   ============================================================ */
.source-citation {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}
.source-citation > div { display: contents; }
.source-citation dt {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  font-weight: 500;
}
.source-citation dd { margin: 0; }
.source-citation dd a { word-break: break-all; }

.excerpt {
  margin: 24px 0 0;
  padding: 0 0 0 2ch;
  border-left: 1px solid var(--ink-tertiary);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.unvetted-note {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  padding: 24px 0;
}

/* ============================================================
   home & inbox tables (dense register)
   ============================================================ */
.home, .inbox { max-width: 980px; }
.home h1, .inbox h1 {
  font-size: var(--h1);
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  text-transform: uppercase;
  margin: 0 0 32px;
}
.dense-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--dense-size);
  line-height: var(--dense-leading);
}
.dense-table th, .dense-table td {
  text-align: left;
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: baseline;
}
.dense-table th {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  font-size: 11px;
}
.dense-table td.num { text-align: right; }
.dense-table td a { text-decoration: none; }
.dense-table td a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.dense-table tr.vetted { opacity: 0.55; }
.dense-table tr:hover { background: rgba(28,26,23,0.025); }

/* dense table title cell uses serif for readability */
.dense-table td:nth-child(3) { font-family: var(--serif); font-size: 14px; }

/* ============================================================
   search modal
   ============================================================ */
.search-modal {
  position: fixed;
  inset: 0;
  background: rgba(28,26,23,0.18);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 100;
}
.search-modal[hidden] { display: none; }
.search-modal-inner {
  width: min(640px, calc(100vw - 32px));
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(28,26,23,0.25);
}
#search-input {
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  caret-color: var(--ink);
}
#search-input:focus { outline: none; }
.search-results {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 60vh;
  overflow-y: auto;
}
.search-results li {
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: baseline;
}
.search-results li.active { background: var(--paper-warm); }
.search-results .result-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-secondary);
}

/* ============================================================
   concept & person page extras
   ============================================================ */
.aka {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  margin: 4px 0 8px;
}
.aka-item { margin-right: 8px; }
.related {
  font-family: var(--mono);
  font-size: 12px;
  margin: 4px 0 8px;
  color: var(--ink-secondary);
}
.related-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  margin-right: 6px;
}

/* ============================================================
   misc
   ============================================================ */
.status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   home hero, map, recent
   ============================================================ */
.home-page main { max-width: 1080px; }
.home-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 40px;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.home-hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  margin: 0 0 20px;
  letter-spacing: -0.015em;
  font-weight: 700;
  max-width: 24ch;
}
.home-hero h1 a { color: inherit; text-decoration: none; }
.home-hero h1 a:hover { text-decoration: underline; text-decoration-color: var(--ink-tertiary); text-underline-offset: 0.15em; }
.hero-summary {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 65ch;
  margin: 0 0 24px;
}
.hero-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
  margin: 0 0 24px;
}
.hero-counts strong { color: var(--ink); font-weight: 600; }
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: baseline;
  margin: 0;
}
.hero-link {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.hero-link:hover { background: var(--ink); color: var(--paper); }
.hero-link-secondary {
  font-size: 14px;
  color: var(--ink-secondary);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-tertiary);
}

.home-map { margin-bottom: 56px; }
.home-map h2,
.home-recent h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.home-map-intro {
  font-size: 14px;
  color: var(--ink-secondary);
  margin: 0 0 20px;
  max-width: 60ch;
}
.cat-chip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.cat-chip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  background: var(--paper);
}
.cat-chip:hover { border-color: var(--ink); }
.cat-glyph {
  font-size: 16px;
  color: var(--ink-secondary);
}
.cat-chip a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.cat-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

.home-recent { margin-bottom: 56px; }

/* ============================================================
   topic page enhancements (hero, guide, category map)
   ============================================================ */
.topic-hero {
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 32px;
}
.topic-hero h1 { max-width: 28ch; }
.topic-guide {
  max-width: var(--col-prose);
  margin-bottom: 48px;
  padding: 24px;
  background: rgba(0,0,0,0.02);
  border-left: 3px solid var(--ink);
}
.topic-guide p { margin: 0 0 12px; }
.topic-guide p:last-child { margin-bottom: 0; }

.topic-map { margin-top: 48px; }
.topic-map > h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
}
.topic-map-intro {
  font-size: 14px;
  color: var(--ink-secondary);
  margin: 0 0 28px;
  max-width: 60ch;
}
.topic-category {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px dashed var(--hairline);
}
.topic-category h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
}
.section-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-left: auto;
}

/* ============================================================
   fonds database page
   ============================================================ */
.fonds-page-shell main { max-width: 1280px; }
.fonds-page { padding: 24px 0; }
.fonds-hero {
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
}
.fonds-hero h1 {
  font-size: clamp(24px, 3vw, 36px);
  margin: 8px 0 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fonds-summary {
  font-size: 15px;
  color: var(--ink-secondary);
  margin: 0;
  max-width: 65ch;
}
.fonds-summary a { color: var(--ink); }

.fonds-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--hairline);
}
#fond-search {
  flex: 1 1 240px;
  min-width: 200px;
  font: inherit;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  outline: none;
}
#fond-search:focus { border-color: var(--ink); }

.fond-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 2 1 400px;
}
.fond-cat-chip {
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.fond-cat-chip:hover { border-color: var(--ink-secondary); }
.fond-cat-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.fond-cat-chip .cat-count {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.7;
}

.fond-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.fond-sort label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
}
.fond-sort-btn {
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--mono);
}
.fond-sort-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.fonds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.fonds-table thead th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  font-weight: 600;
}
.fonds-table tbody tr {
  border-bottom: 1px solid var(--hairline);
}
.fonds-table tbody tr:hover { background: rgba(0,0,0,0.025); }
.fonds-table td {
  padding: 10px 12px;
  vertical-align: top;
}
.fonds-table .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.fond-name {
  text-decoration: none;
  font-weight: 500;
  color: var(--ink);
}
.fond-name:hover { text-decoration: underline; }
.fond-concept-link {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--ink-tertiary);
  text-decoration: none;
  font-family: var(--mono);
}
.fond-concept-link:hover { color: var(--ink); }
.fond-cat-tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.fond-cat-drones { background: #e8efea; }
.fond-cat-medical { background: #fde9e9; }
.fond-cat-reb_optics { background: #ecf0f6; }
.fond-cat-training { background: #f5ecda; }
.fond-cat-transport { background: #f3eee7; }
.fond-cat-brigade { background: #efe7df; }
.fond-cat-frontline { background: #f1ebe1; }
.fond-cat-volunteer { background: #ece7e0; }
.fond-cat-general { background: #ede9e2; }
.jar-link { text-decoration: none; }
.jar-link code {
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--hairline);
}
.jar-link:hover code { background: var(--ink); color: var(--paper); }

.fonds-foot {
  margin-top: 32px;
  font-size: 13px;
  color: var(--ink-secondary);
}
.fonds-foot a { color: var(--ink); }

/* per-fond detail page */
.fond-page-shell main { max-width: 720px; }
.fond-page { padding: 32px 0; }
.fond-header { margin-bottom: 24px; }
.fond-header .breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0 0 12px;
}
.fond-header h1 {
  font-size: clamp(20px, 3vw, 30px);
  margin: 0;
  letter-spacing: -0.005em;
  font-weight: 700;
}
.fond-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0 0 24px;
  font-size: 14px;
  border: 1px solid var(--hairline);
  padding: 16px;
}
.fond-meta > div { display: contents; }
.fond-meta dt {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
}
.fond-meta dd { margin: 0; }
.fond-concept-pointer {
  font-size: 14px;
  margin: 0 0 24px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.025);
  border-left: 3px solid var(--ink);
}
.fond-checklist h2 {
  font-size: 18px;
  margin: 32px 0 12px;
  font-weight: 700;
}
.fond-checklist ol {
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.65;
}
.fond-back {
  margin-top: 40px;
  font-size: 13px;
}
.muted { color: var(--ink-tertiary); }

/* ============================================================
   fond contacts (table + detail page)
   ============================================================ */
.fond-channels {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
}
.ch-icon:hover { background: var(--ink); color: var(--paper); }
.ch-form { background: rgba(232, 239, 234, 0.6); }
.ch-tg { background: rgba(232, 239, 246, 0.6); }
.ch-mail { background: rgba(245, 236, 218, 0.5); }
.ch-phone { background: rgba(243, 238, 231, 0.6); }

.fond-row.has-contacts { background: rgba(0, 80, 30, 0.015); }
.fond-row.has-contacts .fond-name { font-weight: 600; }

.fond-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--hairline);
}
.fond-status-active { background: rgba(82, 134, 100, 0.12); border-color: rgba(82, 134, 100, 0.3); }
.fond-status-unverified, .fond-status-intermitt, .fond-status-not-applic { background: rgba(168, 130, 60, 0.12); border-color: rgba(168, 130, 60, 0.3); }
.fond-status-inactive { background: rgba(122, 46, 42, 0.1); border-color: rgba(122, 46, 42, 0.25); opacity: 0.7; }

.fonds-controls-extra {
  margin-top: -8px;
  padding-top: 0;
  background: none;
  border: none;
}
.contacts-toggle {
  font-size: 13px;
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.fond-contacts {
  margin: 32px 0;
  padding: 20px 24px;
  background: rgba(0, 80, 30, 0.025);
  border-left: 3px solid #4a6e54;
}
.fond-contacts h2 {
  font-size: 18px;
  margin: 0 0 16px;
  font-weight: 700;
}
.fond-contact-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 14px;
  line-height: 1.5;
}
.fond-contact-row:last-child { border-bottom: none; }
.contact-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-tertiary);
  padding-top: 2px;
}
.contact-value { color: var(--ink); }
.contact-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-tertiary);
}
.contact-link:hover { border-bottom-color: var(--ink); }
.fond-contacts-empty {
  background: rgba(168, 130, 60, 0.04);
  border-left-color: rgba(168, 130, 60, 0.3);
}
.fond-contacts-empty .muted { font-style: italic; line-height: 1.55; }
.fond-contact-notes {
  background: rgba(0,0,0,0.03);
  border-radius: 4px;
  padding: 12px;
  border: none;
  margin-top: 8px;
}
.fond-checklist-foot {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-secondary);
}

/* ============================================================
   fond scope badges + banners + stats + mynotes
   ============================================================ */
.fonds-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 20px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.025);
  border: 1px solid var(--hairline);
  font-size: 13px;
  font-family: var(--mono);
}
.stat-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
}
.stat-cell strong {
  color: var(--ink);
  font-size: 18px;
  font-family: 'PT Serif', serif;
  font-weight: 700;
}
.stat-open strong { color: #4a6e54; }
.stat-niche strong { color: #8c6b2f; }
.stat-brigade strong { color: #5b3a6b; }
.stat-not strong { color: #7a2e2a; }
.stat-unverified strong { color: #8c6b2f; }
.stat-unknown strong { color: var(--ink-tertiary); }

.fond-scope {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid;
  vertical-align: middle;
  white-space: nowrap;
}
.fond-scope-open { background: rgba(74, 110, 84, 0.12); color: #3a5a44; border-color: rgba(74, 110, 84, 0.3); }
.fond-scope-niche { background: rgba(140, 107, 47, 0.12); color: #6f5421; border-color: rgba(140, 107, 47, 0.3); }
.fond-scope-brigade-internal { background: rgba(91, 58, 107, 0.12); color: #4a2f56; border-color: rgba(91, 58, 107, 0.3); }
.fond-scope-not-supply { background: rgba(122, 46, 42, 0.12); color: #5a221f; border-color: rgba(122, 46, 42, 0.3); }
.fond-scope-unverified { background: rgba(168, 130, 60, 0.12); color: #6e542a; border-color: rgba(168, 130, 60, 0.3); }
.fond-scope-unknown { background: rgba(0,0,0,0.04); color: var(--ink-tertiary); border-color: var(--hairline); }

.fond-row.scope-not-supply { opacity: 0.55; }
.fond-row.scope-not-supply .fond-name { text-decoration: line-through; text-decoration-color: rgba(122, 46, 42, 0.4); }
.fond-row.scope-brigade-internal { background: rgba(91, 58, 107, 0.025); }
.fond-row.scope-niche { background: rgba(140, 107, 47, 0.02); }
.fond-row.scope-open { background: rgba(74, 110, 84, 0.025); }
.fond-row.scope-open .fond-name { font-weight: 600; }

.fond-intermittent {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  color: #8c6b2f;
  cursor: help;
}

.fond-scope-banner {
  margin: 0 0 24px;
  padding: 16px 20px;
  border-left: 4px solid;
  font-size: 14px;
  line-height: 1.55;
}
.fond-scope-banner .banner-tag {
  display: block;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.fond-scope-banner p { margin: 0; }
.fond-scope-banner-niche { background: rgba(140, 107, 47, 0.06); border-color: #8c6b2f; }
.fond-scope-banner-niche .banner-tag { color: #6f5421; }
.fond-scope-banner-brigade-internal { background: rgba(91, 58, 107, 0.06); border-color: #5b3a6b; }
.fond-scope-banner-brigade-internal .banner-tag { color: #4a2f56; }
.fond-scope-banner-not-supply { background: rgba(122, 46, 42, 0.07); border-color: #7a2e2a; }
.fond-scope-banner-not-supply .banner-tag { color: #5a221f; }
.fond-scope-banner-unverified { background: rgba(168, 130, 60, 0.07); border-color: #a8823c; }
.fond-scope-banner-unverified .banner-tag { color: #6e542a; }

.fond-mynotes {
  margin: 24px 0;
  padding: 18px 22px;
  background: #fffbe6;
  border: 1px solid #e6d99d;
  border-left: 4px solid #c5a93a;
}
.fond-mynotes h2 {
  font-size: 16px;
  margin: 0 0 10px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.mynotes-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  font-weight: 400;
}
.mynotes-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.mynotes-body p:last-child { margin-bottom: 0; }
.mynotes-body ul, .mynotes-body ol { font-size: 14px; line-height: 1.6; padding-left: 22px; }

/* ============================================================
   mobile: collapse fonds-table to card layout
   ============================================================ */
@media (max-width: 760px) {
  .fonds-page-shell main { max-width: 100%; padding: 0 12px; }
  .fonds-controls { flex-direction: column; align-items: stretch; gap: 10px; }
  .fond-cat-filter, .fond-sort { flex-wrap: wrap; }
  .fonds-stats { gap: 8px 14px; padding: 10px 12px; font-size: 12px; }
  .stat-cell strong { font-size: 16px; }

  /* table → cards */
  .fonds-table thead { display: none; }
  .fonds-table, .fonds-table tbody, .fonds-table tr, .fonds-table td { display: block; }
  .fonds-table tr.fond-row {
    border: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .fonds-table tr.fond-row:hover { background: inherit; }
  .fonds-table td { padding: 4px 0; border: none; }
  .fonds-table .fond-cell-name { font-size: 16px; font-weight: 600; }
  .fonds-table .fond-cell-name a { display: block; margin-bottom: 4px; }
  .fonds-table .fond-cell-cat,
  .fonds-table .fond-cell-amount,
  .fonds-table .fond-cell-channels,
  .fonds-table .fond-cell-site,
  .fonds-table .fond-cell-jar {
    font-size: 13px;
    color: var(--ink-secondary);
  }
  .fonds-table .fond-cell-cat::before { content: 'категорія: '; color: var(--ink-tertiary); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
  .fonds-table .fond-cell-amount::before { content: 'зібрано: '; color: var(--ink-tertiary); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
  .fonds-table .fond-cell-amount { text-align: left; }
  .fonds-table .fond-cell-channels::before { content: 'канали: '; color: var(--ink-tertiary); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
  .fonds-table .fond-cell-site::before { content: 'сайт: '; color: var(--ink-tertiary); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
  .fonds-table .fond-cell-jar::before { content: 'банка: '; color: var(--ink-tertiary); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }

  /* fond detail page */
  .fond-page-shell main { padding: 0 12px; }
  .fond-meta { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
  .fond-meta dt { padding-top: 8px; }
  .fond-contact-row { grid-template-columns: 1fr; gap: 2px; }
  .fond-contact-row .contact-label { padding-top: 8px; }

  /* home + topic */
  .home-hero { padding: 32px 0 24px; }
  .home-hero h1 { font-size: clamp(22px, 6vw, 28px); }
  .cat-chip-list { grid-template-columns: 1fr; }

  /* prose grid: collapse margin column inline (already in original styles.css I expect; this reinforces) */
  .prose-grid { grid-template-columns: 1fr; }
  .prose-grid .rail, .prose-grid .margin { display: contents; }
  .voice { margin: 12px 0; padding: 12px; border-left: 3px solid var(--voice-color, var(--ink)); }

  /* nav: stay tight */
  .site-nav { gap: 12px; font-size: 13px; }
  .site-nav a, .search-trigger { font-size: 13px; }
}

/* ============================================================
   accessibility utilities + WCAG 2.1 AA hardening
   ============================================================ */

/* visually hidden but available to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* skip-link — keyboard / screen-reader users skip the nav */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* universal focus-visible — strong indicator for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
.fond-cat-chip:focus-visible,
.fond-sort-btn:focus-visible,
.ch-icon:focus-visible,
.search-trigger:focus-visible,
.fond-name:focus-visible,
.fond-row a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 1px;
}

/* form controls focus — visible border + ring */
#fond-search:focus,
#search-input:focus {
  outline: 3px solid var(--ink);
  outline-offset: 0;
  border-color: var(--ink);
}

/* checkbox toggle accessible focus */
.contacts-toggle input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* touch targets: ensure ≥44×44 on mobile for ch-icons */
@media (max-width: 760px) {
  .ch-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .fond-channels { gap: 6px; }

  /* table on mobile — re-establish semantic role despite display:block */
  .fonds-table { role: table; }
  .fonds-table tr.fond-row { role: row; }
  .fonds-table tr.fond-row td { role: cell; }
  /* pseudo-labels are decorative; hide from AT */
  .fonds-table .fond-cell-cat::before,
  .fonds-table .fond-cell-amount::before,
  .fonds-table .fond-cell-channels::before,
  .fonds-table .fond-cell-site::before,
  .fonds-table .fond-cell-jar::before {
    speak: none;
  }
}

/* intermittent badge — increase contrast for normal-text use */
.fond-intermittent {
  color: #6e542a;  /* was #8c6b2f (4.16:1) — now ~5.31:1 */
}

/* prefer-reduced-motion guard (defensive — currently no animations) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* sort label was a <label> without for=; now a span — reset visual */
.fond-sort .fond-sort-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
}

/* ============================================================
   drone database
   ============================================================ */
.drone-type-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.drone-type-fpv-strike { background: rgba(122, 46, 42, 0.10); }
.drone-type-fpv-interceptor { background: rgba(91, 58, 107, 0.10); }
.drone-type-fpv-fiber-optic { background: rgba(140, 107, 47, 0.10); }
.drone-type-recon-multirotor { background: rgba(74, 110, 84, 0.10); }
.drone-type-recon-fixed-wing { background: rgba(47, 90, 78, 0.10); }
.drone-type-loitering-munition { background: rgba(168, 130, 60, 0.10); }
.drone-type-heavy-strike { background: rgba(60, 37, 30, 0.10); }
.drone-type-naval { background: rgba(30, 58, 95, 0.10); }
.drone-type-ground-robotic { background: rgba(60, 60, 60, 0.10); }
.drone-type-ew-airborne { background: rgba(80, 100, 130, 0.10); }
.drone-type-mothership { background: rgba(110, 84, 42, 0.10); }

.drone-channel-tag {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px 2px 0;
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--hairline);
}

.drone-mfg-link {
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px dotted var(--ink-tertiary);
}
.drone-mfg-link:hover { border-bottom-color: var(--ink); }

.drone-specs {
  margin: 24px 0;
}
.drone-usecases h2,
.drone-channels-section h2,
.drone-notes h2 {
  font-size: 18px;
  margin: 32px 0 12px;
}
.drone-usecases ul {
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
}
.drone-channel-note {
  font-size: 13px;
  color: var(--ink-secondary);
  margin: 12px 0 0;
}
.drone-source {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  margin: 24px 0 0;
}

@media (max-width: 760px) {
  .drones-table thead { display: none; }
  .drones-table, .drones-table tbody, .drones-table tr, .drones-table td { display: block; }
  .drones-table tr.drone-row {
    border: 1px solid var(--hairline);
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .drones-table td { padding: 4px 0; border: none; }
  .drones-table .fond-cell-name { font-size: 16px; font-weight: 600; }
  .drones-table .num { text-align: left; }
  .drone-specs { grid-template-columns: 1fr; gap: 4px; }
}

/* drone origin marker */
.drone-origin-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--ink-secondary);
  border: 1px solid var(--hairline);
  cursor: help;
}
.stat-drone-fpv-strike strong { color: #7a2e2a; }
.stat-drone-fpv-interceptor strong { color: #4a2f56; }
.stat-drone-recon-fixed-wing strong { color: #2f5a4e; }
.stat-drone-recon-multirotor strong { color: #4a6e54; }
.stat-drone-loitering-munition strong { color: #6f5421; }
.stat-drone-heavy-strike strong { color: #3c251e; }