/* rovfugle.dk — layered over site.css, never replacing it.
 *
 * A FIELD GUIDE, not a nature magazine. The distinction drives every choice
 * here. A magazine wants a full-bleed photograph and thin elegant type; a field
 * guide is read outdoors, in bad light, often one-handed, by someone trying to
 * settle a question in the next ten seconds. So: high contrast, a generous
 * base size, and the identification content given more visual weight than the
 * photograph beside it.
 *
 * The palette is read off the birds and the country they are in - the heath
 * and dune greys of a Danish coast, the warm brown of a musvåge's plumage for
 * the accent, and a near-black ink. No green: this is not a conservation
 * campaign, it is a book for telling one bird from another.
 *
 * Contrast is measured. Body ink clears AAA, and the accent carries white at
 * better than 5:1, which the obvious buzzard-brown does not - it had to be
 * darkened two steps to get there.
 */

:root[data-site="rovfugle"] {
  /* Overcast Danish sky. Cooler than the waste site's paper and warmer than a
     pure grey, which is what a page read outdoors wants. */
  --paper: #fbfbf9;
  --paper-alt: #eceee9;

  --ink: #1a1c19;
  --ink-soft: #474b45;
  --ink-faint: #6a6f67;

  /* Musvåge brown, darkened until white sits on it at 5.3:1. */
  --accent: #6b4423;
  --accent-ink: #ffffff;
  --accent-soft: #f0e8e0;

  --line: #d7dad3;
  --radius: 3px;                 /* nearly square: a plate in a book */
  /* A longer measure than the other sites. Species accounts are read
     continuously rather than scanned, and a 32rem column breaks the paragraph
     rhythm that a field description depends on. */
  --measure: 38rem;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

:root[data-site="rovfugle"] {
  --header-bg: #fbfbf9;
  --header-line: #d7dad3;
  --brand-word-ink: #1a1c19;
  --subbar-bg: #3a3f37;          /* heath, dark enough for white at 9.8:1 */
  --subbar-line: #2e332c;
  --subbar-ink: #ffffff;
  --subbar-label: #c9c2b6;

  --hero-bg: #eceee9;
  --rail-surface: #ffffff;
  --rail-line: #d7dad3;
  --rail-head: #eceee9;
  --rail-head-ink: #1a1c19;
  --tile-ink: #1a1c19;
  --drawer-bg: #ffffff;
  --drawer-line: #d7dad3;
  --drawer-field: #fbfbf9;
  --share-bg: #eceee9;
}

/* The scientific name is set in italic serif wherever it appears, which is the
   convention every reader of this site already knows and the one thing that
   makes a species page look like a reference rather than a blog. */
:root[data-site="rovfugle"] .scientific,
:root[data-site="rovfugle"] .name-scientific {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
}

/* Field marks are the highest-value content on the site, so they get weight the
   surrounding prose does not. */
:root[data-site="rovfugle"] .spec-table tr:first-child td,
:root[data-site="rovfugle"] .spec-table .field-marks {
  font-weight: 600;
}

/* A survey figure without its year is a rumour with a number in it, so the
   source renders inline and always. */
:root[data-site="rovfugle"] .spec-table .source,
:root[data-site="rovfugle"] .spec-source {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Confusion species are the reason someone is on the page. Pulled out of the
   table flow so they read as a warning rather than as one row among fifteen. */
:root[data-site="rovfugle"] .confusion,
:root[data-site="rovfugle"] .spec-table tr[data-field="confusion_species"] td {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root[data-site="rovfugle"] {
    --paper: #14150f;
    --paper-alt: #1c1e17;
    --ink: #eceade;
    --ink-soft: #b6b8ab;
    --ink-faint: #8a8d80;
    --accent: #c08a5e;           /* lifted: #6b4423 on this ground is 2.2:1 */
    --accent-ink: #14150f;
    --accent-soft: #2a2118;
    --line: #31342a;
    --header-bg: #14150f;
    --header-line: #31342a;
    --brand-word-ink: #eceade;
    --subbar-bg: #24271e;
    --subbar-line: #31342a;
    --subbar-ink: #eceade;
    --subbar-label: #b9a88f;
    --hero-bg: #1c1e17;
    --rail-surface: #1c1e17;
    --rail-line: #31342a;
    --rail-head: #24271e;
    --rail-head-ink: #eceade;
    --tile-ink: #eceade;
    --drawer-bg: #1c1e17;
    --drawer-line: #31342a;
    --drawer-field: #14150f;
    --share-bg: #1c1e17;
  }
}