/* CuForest. Hand-written, no framework -- the pages are tables, and a table is
   a solved problem. Light and dark both, because a spec sheet gets read at
   both ends of the day. */

:root {
  --bg: #fbfaf7;
  --card: #ffffff;
  --ink: #17150f;
  --muted: #6b6558;
  --line: #e3ded2;
  --accent: #7a4b1e;      /* copper: Cu is the whole name */
  --good: #2f6b3a;
  --fair: #8a6d1f;
  --thin: #97562c;
  --gap: #a09889;
  --hi: #fdf6e8;
  --hatch: rgba(122, 75, 30, 0.055);

  /* Brand tokens, sampled off the header painting. These do NOT flip with the
     colour scheme: they sit on the artwork, which is dark in both. */
  --brand-ink: #0b0d0f;
  --brand-copper: #c08a5e;
  --brand-copper-hi: #d9b394;
  --brand-copper-deep: #59402e;
  --brand-verdigris: #5c8a80;
  --brand-moss: #6e7a4a;
  --brand-stone: #898e92;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14130f;
    --card: #1c1a15;
    --ink: #eae5d9;
    --muted: #9b9484;
    --line: #322e26;
    --accent: #d08a4e;
    --good: #79b487;
    --fair: #d1b45f;
    --thin: #e0916a;
    --gap: #6d6658;
    --hi: #241f16;
    --hatch: rgba(208, 138, 78, 0.07);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Faded 45-degree hatching, the engineering-drawing kind. Fixed, so it belongs
   to the window rather than the document and never slides under a long table.
   Masked along the same diagonal it is drawn on, so it is present at the top
   left and gone by the lower right -- the light in the header painting falls
   the same way. Kept under 0.07 alpha: a spec sheet has to stay readable. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    var(--hatch) 0, var(--hatch) 1.5px,
    transparent 1.5px, transparent 16px
  );
  -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 80%);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 80%);
}

@media print {
  body::before { display: none; }
}

/* The header is a dark band carrying the painting, in both colour schemes. The
   catalog below it stays light-first -- a spec sheet is read for minutes at a
   time and wants paper, not atmosphere. The band is where the atmosphere goes. */
header.site {
  position: relative;
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  padding: 1.75rem 1.5rem 1.25rem;
  min-height: 8.5rem;
  border-bottom: 1px solid var(--brand-copper-deep);
  /* 20% down, not centred: the moon, the tilted horizon and the broken spars
     all live in the upper third, and a centred crop throws every one of them
     away. Biased right horizontally for the narrow viewports, where the width
     is what gets cut instead. */
  background: var(--brand-ink) url("img/header.jpg") 70% 20% / cover no-repeat;
  overflow: hidden;
}

/* The painting is quiet on the left by construction, but the viewport decides
   how much of it shows. The scrim guarantees the brand is legible regardless. */
header.site::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 13, 15, 0.94) 0%, rgba(11, 13, 15, 0.80) 30%,
    rgba(11, 13, 15, 0.40) 62%, rgba(11, 13, 15, 0.15) 100%
  );
}
header.site > * { position: relative; }

/* The front page gives the painting room to read as a landscape -- the tilted
   horizon and the broken woods need vertical space or they are simply cropped
   away. Interior pages keep the compact band above. */
header.site.hero { min-height: 17rem; }

.brand {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
}
.brand .mark { display: block; width: 34px; height: 34px; }
.brand .wordmark {
  font-weight: 600; font-size: 1.5rem; letter-spacing: 0.005em;
  color: var(--brand-copper-hi);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
.tagline {
  color: var(--brand-stone); font-size: 0.875rem;
  align-self: flex-end; padding-bottom: 0.35rem;
}

/* The narrow viewport gets the smaller render -- same painting, a third of the
   bytes. */
@media (max-width: 60rem) {
  header.site { background-image: url("img/header-1200.jpg"); }
}

@media print {
  header.site { min-height: 0; padding: 1rem 1.5rem; background: none; border-bottom: 1px solid var(--line); }
  header.site::before { display: none; }
  .brand .wordmark { color: var(--ink); }
  .tagline { color: var(--muted); }
}

main { padding: 1.5rem; max-width: 72rem; margin: 0 auto; }

h1 { font-size: 1.5rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.lede { color: var(--muted); margin: 0 0 1.25rem; }
.lede strong { color: var(--ink); }
.missing { color: var(--muted); font-size: 0.875rem; margin: -0.75rem 0 1.25rem; }

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

/* --- search ------------------------------------------------------------- */

form.search { margin: 0 0 1rem; }
form.search input {
  width: 100%; max-width: 26rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink); font-size: 1rem;
}
form.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- tables ------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }

table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
th, td {
  padding: 0.5rem 0.75rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
thead th {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.cov, th.cov { text-align: right; white-space: nowrap; }
td.name { font-weight: 600; }
tr.empty td { color: var(--muted); text-align: center; padding: 1.5rem; }

th.field { font-weight: 500; color: var(--muted); width: 14rem; white-space: nowrap; }
td.val { font-variant-numeric: tabular-nums; }
.unit { color: var(--muted); }

/* The founding feature: a gap is stated, never blank. Muted rather than
   alarming -- an unknown is an honest state, not an error. */
.gap { color: var(--gap); font-style: italic; font-size: 0.875rem; }

/* --- coverage badge ------------------------------------------------------ */

.badge {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px;
  font-size: 0.8125rem; font-variant-numeric: tabular-nums;
  border: 1px solid currentColor;
}
.badge.good { color: var(--good); }
.badge.fair { color: var(--fair); }
.badge.thin { color: var(--thin); }
.badge .pct { opacity: 0.7; }

/* --- provenance ---------------------------------------------------------- */

td.prov { font-size: 0.8125rem; }
ul.sources { margin: 0; padding: 0; list-style: none; }
ul.sources li + li { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed var(--line); }
ul.sources li.other { opacity: 0.75; }
.conf { color: var(--muted); font-variant-numeric: tabular-nums; }
.claim { color: var(--thin); }
blockquote.quote {
  margin: 0.2rem 0 0; padding-left: 0.6rem; border-left: 2px solid var(--line);
  color: var(--muted); font-style: italic;
}

/* --- compare ------------------------------------------------------------- */

form.compare-pick {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  margin: 0 0 1rem;
}
form.compare-pick select {
  padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink); font-size: 0.9375rem;
  max-width: 22rem;
}
.vs { color: var(--muted); font-size: 0.875rem; }
table.compare td { font-variant-numeric: tabular-nums; }
table.compare tr.differs { background: var(--hi); }

footer.site {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.5rem; margin-top: 2rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.875rem;
}

@media (max-width: 40rem) {
  main { padding: 1rem; }
  th.field { width: auto; white-space: normal; }
  .tagline { display: none; }
  header.site { min-height: 6rem; padding: 1rem 1rem 0.9rem; }
  header.site.hero { min-height: 11rem; }
}