/* The Hunter Ledger — a kept record. Warm paper, dark ink, ruled lines.
   Tokens verbatim from brand-kit/brand-kit.md (OKLCH canonical). */

:root {
  --paper:           oklch(0.97 0.010 90);   /* #F8F5EE */
  --ink:             oklch(0.26 0.015 70);   /* #29231C */
  --accent:          oklch(0.58 0.130 55);   /* #B3621E  non-text: rules, chart fills */
  --accent-deep:     oklch(0.47 0.105 52);   /* #884719  links/text on paper (AA) */
  --accent-reversed: oklch(0.70 0.125 60);   /* #D78A46  accent on dark surfaces */
  --lake:            oklch(0.46 0.060 170);  /* #326353  the wiki layer only */
  --lake-reversed:   oklch(0.68 0.070 170);  /* #6BA792  lake on dark surfaces only */

  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans:  "Public Sans", -apple-system, "Segoe UI", sans-serif;

  --ink-soft: color-mix(in oklab, var(--ink) 74%, var(--paper));
  --hairline: color-mix(in oklab, var(--ink) 30%, var(--paper));
  --hairline-soft: color-mix(in oklab, var(--ink) 16%, var(--paper));
  --wide: 1120px;
  --measure: 680px;
}

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-serif);
  font-optical-sizing: auto;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
::placeholder { color: color-mix(in oklab, var(--ink) 25%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.5rem 1rem; font: 600 0.85rem var(--font-sans); z-index: 10;
}
.skip:focus { left: 0; }

/* the ledger-rule device: thick / gap / thin (5:4:2 in logo units) */
.rule-double, hr.rule-double {
  border: 0; margin: 0;
  height: 6px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.entry-rule { border: 0; margin: 0; height: 0; border-top: 3px solid var(--accent); }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.25rem; }

.kicker {
  font: 700 0.72rem/1.3 var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 0.4rem;
}
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.kicker .tag { color: var(--ink-soft); font-weight: 600; }
.kicker--lake, .kicker--lake a { color: var(--lake); }

.meta {
  font: 400 0.78rem/1.5 var(--font-sans);
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}
.meta a { color: inherit; }

/* ── masthead header ──────────────────────────────────────────────────────── */
.topbar {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0;
  font: 600 0.7rem/1.3 var(--font-sans);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline-soft);
  font-feature-settings: "tnum";
}
.nameplate { text-align: center; padding: 1.6rem 0 1.3rem; }
.nameplate img { height: clamp(42px, 6vw, 62px); width: auto; }
.nameplate a { display: inline-block; }

.mainnav {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.mainnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap;
  column-gap: clamp(1rem, 3.5vw, 2.6rem);
}
.mainnav a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 0.15rem 0.55rem;
  border-bottom: 3px solid transparent;
  font: 700 0.76rem/1 var(--font-sans);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.mainnav a:hover { color: var(--accent-deep); }
.mainnav img { width: 17px; height: 17px; }
body[data-page="news"]   .mainnav a[data-nav="news"],
body[data-page="record"] .mainnav a[data-nav="record"],
body[data-page="how"]    .mainnav a[data-nav="how"],
body[data-page="tips"]   .mainnav a[data-nav="tips"],
body[data-page="about"]  .mainnav a[data-nav="about"] {
  border-bottom-color: var(--accent);
}

/* ── front page ───────────────────────────────────────────────────────────── */
.front { padding: 1.9rem 0 3rem; }

.lead-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 880px) {
  .lead-grid { grid-template-columns: 7fr 3.4fr; gap: 0; }
  .lead-grid > .rail { border-left: 1px solid var(--hairline-soft); padding-left: 2rem; margin-left: 2rem; }
}

.lead .entry-rule { margin-bottom: 1rem; }
.lead h2 {
  font: 600 clamp(1.9rem, 4vw, 3rem)/1.08 var(--font-serif);
  letter-spacing: -0.005em; margin: 0 0 0.7rem;
}
.lead h2 a, .story h3 a, .rail h3 a { color: var(--ink); text-decoration: none; }
.lead h2 a:hover, .story h3 a:hover, .rail h3 a:hover { color: var(--accent-deep); }
.lead .standfirst {
  font: 400 1.22rem/1.5 var(--font-serif);
  margin: 0 0 0.8rem; max-width: 60ch;
}
.keyfacts {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 1.4rem;
  border-top: 1px solid var(--hairline-soft);
}
.keyfacts li { padding: 0.65rem 0; border-bottom: 1px solid var(--hairline-soft); }
.keyfacts .n {
  display: block;
  font: 600 1.5rem/1.1 var(--font-sans);
  font-feature-settings: "tnum";
}
.keyfacts .d { display: block; font: 400 0.76rem/1.4 var(--font-sans); color: var(--ink-soft); }

.rail-title {
  font: 700 0.72rem/1 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 0.9rem; padding-top: 0.55rem;
  border-top: 3px solid var(--accent);
  display: flex; align-items: center; gap: 0.45rem;
}
.rail h3 { font: 600 1.3rem/1.25 var(--font-serif); margin: 0.2rem 0 0.5rem; }
.rail p { font-size: 0.98rem; margin: 0.4rem 0; }
.rail .meta { margin-top: 0.6rem; }

.section-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 2.4rem 0 0;
}
.section-bar h2 {
  font: 700 0.78rem/1 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0; display: flex; align-items: center; gap: 0.5rem;
}
.section-bar .rule { flex: 1; }
.section-bar + .rule-double { margin: 0.55rem 0 0; }

.story-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.6rem;
  padding: 1.6rem 0 0.4rem;
}
@media (min-width: 700px) {
  .story-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .story-grid .story { padding: 0 1.6rem; border-left: 1px solid var(--hairline-soft); }
  .story-grid .story:first-child { padding-left: 0; border-left: 0; }
  .story-grid .story:last-child { padding-right: 0; }
  .story-grid + .story-grid { border-top: 1px solid var(--hairline-soft); margin-top: 1.4rem; }
}
.story h3 { font: 600 1.32rem/1.22 var(--font-serif); margin: 0 0 0.45rem; }
.story p { font-size: 0.97rem; line-height: 1.55; margin: 0 0 0.55rem; }
.story .meta { margin-top: 0.15rem; }

/* the record strip (wiki layer — the only lake in site furniture) */
.record-strip { margin-top: 2.6rem; }
.record-strip .section-bar h2 { color: var(--lake); }
.record-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem; padding-top: 1.3rem;
}
.record-card {
  border-left: 3px solid var(--lake);
  padding: 0.1rem 0 0.2rem 0.9rem;
}
.record-card h3 { font: 600 1.05rem/1.3 var(--font-serif); margin: 0 0 0.25rem; }
.record-card h3 a { color: var(--ink); text-decoration: none; }
.record-card h3 a:hover { color: var(--lake); }
.record-card p { font: 400 0.85rem/1.5 var(--font-sans); color: var(--ink-soft); margin: 0; }

.launch-note {
  margin: 2.8rem 0 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 1.1rem 0 1.2rem;
  display: grid; gap: 0.3rem 2.5rem;
}
@media (min-width: 820px) { .launch-note { grid-template-columns: auto 1fr; align-items: baseline; } }
.launch-note strong { font: 700 0.78rem/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.launch-note p { margin: 0; font: 400 0.95rem/1.6 var(--font-sans); max-width: 75ch; }

/* ── article pages ────────────────────────────────────────────────────────── */
.article { max-width: var(--measure); margin: 0 auto; padding: 2.2rem 1.25rem 3.5rem; }
.article > header h1 {
  font: 600 clamp(1.75rem, 4.2vw, 2.6rem)/1.12 var(--font-serif);
  letter-spacing: -0.004em; margin: 0 0 0.75rem;
}
.article .standfirst {
  font: 400 1.24rem/1.5 var(--font-serif);
  color: var(--ink); margin: 0 0 0.9rem;
}
.article .meta { padding-bottom: 0.9rem; }
.article > header .entry-rule { margin-bottom: 1.6rem; }

.article h2 {
  font: 600 1.42rem/1.25 var(--font-serif);
  margin: 2.2rem 0 0.6rem; padding-top: 1.1rem;
  border-top: 1px solid var(--hairline-soft);
}
.article p { margin: 0 0 1.05rem; }
.article ul, .article ol { margin: 0 0 1.05rem; padding-left: 1.4rem; }
.article li { margin-bottom: 0.4rem; }
.article blockquote {
  margin: 1.4rem 0; padding: 0 0 0 1.1rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
}
.article blockquote p { margin-bottom: 0.4rem; }
.article blockquote cite { font: 400 0.8rem var(--font-sans); font-style: normal; color: var(--ink-soft); }

/* data furniture */
figure.viz { margin: 1.9rem 0; }
figure.viz svg text { font-family: var(--font-sans); font-feature-settings: "tnum"; }
figure.viz > .rule-double { margin-bottom: 0.9rem; }
figure.viz figcaption {
  font: 400 0.8rem/1.55 var(--font-sans); color: var(--ink-soft);
  margin-top: 0.6rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.viz-title { font: 700 0.85rem/1.4 var(--font-sans); margin: 0 0 0.15rem; }
.viz-sub { font: 400 0.8rem/1.5 var(--font-sans); color: var(--ink-soft); margin: 0 0 0.9rem; }

table.data {
  width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.2rem;
  font: 400 0.9rem/1.45 var(--font-sans);
  font-feature-settings: "tnum";
}
table.data caption { text-align: left; font: 700 0.85rem/1.5 var(--font-sans); padding-bottom: 0.5rem; }
table.data th {
  text-align: left; font: 700 0.68rem/1.4 var(--font-sans);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--ink); padding: 0.45rem 0.75rem 0.45rem 0;
}
table.data td { border-bottom: 1px solid var(--hairline-soft); padding: 0.5rem 0.75rem 0.5rem 0; vertical-align: top; }
table.data th.num, table.data td.num { text-align: right; padding-right: 0; padding-left: 0.9rem; }
table.data tr.hl td { font-weight: 700; }
.table-scroll { overflow-x: auto; }
/* Charts keep their labels legible on small screens: below ~34rem the SVG stops
   shrinking and scrolls sideways instead (same idiom as .table-scroll). */
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-scroll > svg { min-width: 34rem; display: block; }
/* Scrolling shadows: when a table or chart is wider than the screen, a soft ink
   edge says "there is more"; it fades out as you reach the end. Pure CSS
   (cover gradients scroll with the content, shadow gradients stay put). */
.table-scroll, .chart-scroll {
  background:
    linear-gradient(to right, #F8F5EE 40%, rgba(248,245,238,0)) left / 44px 100%,
    linear-gradient(to left,  #F8F5EE 40%, rgba(248,245,238,0)) right / 44px 100%,
    radial-gradient(farthest-side at 0 50%, rgba(41,35,28,0.30), transparent) left / 14px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(41,35,28,0.30), transparent) right / 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.methodology {
  margin: 1.9rem 0; padding: 1rem 0 1.1rem;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font: 400 0.88rem/1.6 var(--font-sans);
}
.methodology h2, .methodology h3 {
  font: 700 0.72rem/1 var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 0.55rem; padding: 0; border: 0;
}
.methodology p { margin: 0 0 0.55rem; }
.methodology p:last-child { margin-bottom: 0; }

/* sources panel — worn proudly */
.sources { margin: 2.6rem 0 0; }
.sources > .rule-double { margin-bottom: 0.8rem; }
.sources h2 {
  font: 700 0.78rem/1 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 0.8rem; padding: 0; border: 0;
  display: flex; align-items: center; gap: 0.5rem;
}
.sources ol { list-style: none; margin: 0; padding: 0; counter-reset: src; }
.sources li {
  counter-increment: src;
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--hairline-soft);
  font: 400 0.88rem/1.55 var(--font-sans);
}
.sources li::before {
  content: counter(src, decimal-leading-zero);
  font: 700 0.85rem/1.6 var(--font-sans);
  font-feature-settings: "tnum";
  color: var(--accent-deep);
}
.sources .src-what { color: var(--ink-soft); }

.correction-line {
  margin: 1.6rem 0 0;
  font: 400 0.85rem/1.6 var(--font-sans); color: var(--ink-soft);
}

.also-record {
  margin: 2rem 0 0; padding: 0.9rem 0 0.9rem 1rem;
  border-left: 3px solid var(--lake);
  font: 400 0.9rem/1.6 var(--font-sans);
}
.also-record strong {
  display: block; font: 700 0.7rem/1.6 var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lake);
}
.also-record a { color: var(--ink); }

/* ── record (wiki) pages ─────────────────────────────────────────────────── */
.record-head { border-left: 3px solid var(--lake); padding-left: 1.1rem; }
.record-status {
  font: 400 0.8rem/1.6 var(--font-sans); color: var(--ink-soft);
  font-feature-settings: "tnum";
}
.entries { list-style: none; margin: 0.4rem 0 1.1rem; padding: 0; }
.entries li {
  display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.9rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--hairline-soft);
}
.entries .when {
  font: 700 0.78rem/1.7 var(--font-sans);
  font-feature-settings: "tnum"; color: var(--ink-soft);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.entries .what { font-size: 0.98rem; line-height: 1.55; }
.entries li:first-child { border-top: 3px solid var(--accent); }
@media (max-width: 480px) { .entries li { grid-template-columns: 1fr; gap: 0.1rem; } }

.record-index-list { list-style: none; margin: 1.4rem 0; padding: 0; }
.record-index-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--hairline-soft); }
.record-index-list h3 { margin: 0 0 0.2rem; font: 600 1.2rem/1.3 var(--font-serif); }
.record-index-list h3 a { color: var(--ink); text-decoration: none; }
.record-index-list h3 a:hover { color: var(--lake); }
.record-index-list p { margin: 0; font: 400 0.9rem/1.55 var(--font-sans); color: var(--ink-soft); }

/* ── forms (tips page) ───────────────────────────────────────────────────── */
.form-block { margin: 2.4rem 0 0; }
.form-block > .rule-double { margin-bottom: 1rem; }
.form-block h2 { margin: 0 0 0.3rem; padding: 0; border: 0; font: 600 1.45rem/1.25 var(--font-serif); }
.form-block > p { font: 400 0.95rem/1.6 var(--font-sans); color: var(--ink-soft); margin: 0 0 1.2rem; }
form.tip-form { display: grid; gap: 0.9rem; max-width: 34rem; }
form.tip-form label {
  display: block;
  font: 700 0.7rem/1.6 var(--font-sans);
  letter-spacing: 0.12em; text-transform: uppercase;
}
form.tip-form input[type="text"], form.tip-form input[type="email"],
form.tip-form input[type="tel"], form.tip-form input[type="url"], form.tip-form textarea {
  width: 100%; padding: 0.6rem 0.7rem;
  border: 1px solid var(--hairline); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font: 400 1rem/1.5 var(--font-sans);
}
form.tip-form textarea { min-height: 8.5rem; resize: vertical; }
form.tip-form input:focus, form.tip-form textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
form.tip-form button {
  justify-self: start;
  background: var(--ink); color: var(--paper);
  border: 0; padding: 0.75rem 1.6rem; cursor: pointer;
  font: 700 0.8rem/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
}
form.tip-form button:hover { background: var(--accent-deep); }
form.tip-form button[disabled] { opacity: 0.6; cursor: wait; }
.form-note { font: 400 0.8rem/1.55 var(--font-sans); color: var(--ink-soft); margin: 0; }
[data-tip-success], [data-tip-error] {
  border-left: 3px solid var(--accent);
  padding: 0.6rem 0 0.6rem 0.9rem;
  font: 400 0.95rem/1.55 var(--font-sans);
}
/* honeypot: visually removed, still in the DOM for bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot { margin-top: 3.5rem; background: var(--ink); color: var(--paper); }
.foot .foot-rules { border-top: 3px solid var(--accent); }
.foot-inner { max-width: var(--wide); margin: 0 auto; padding: 2.4rem 1.25rem 2.6rem; }
.foot img.lockup { height: 44px; width: auto; }
.foot-tag { font: 400 0.95rem/1.6 var(--font-serif); font-style: italic; margin: 0.9rem 0 0; color: color-mix(in oklab, var(--paper) 88%, var(--ink)); max-width: 46ch; }
.foot-cols {
  display: grid; gap: 2rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in oklab, var(--paper) 25%, var(--ink));
}
.foot h2 {
  font: 700 0.7rem/1 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 0.8rem; color: var(--accent-reversed);
}
.foot h2.lake { color: var(--lake-reversed); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 0.45rem; }
.foot a { color: var(--paper); text-decoration: none; font: 400 0.9rem/1.5 var(--font-sans); }
.foot a:hover { color: var(--accent-reversed); text-decoration: underline; }
.foot .foot-about { font: 400 0.88rem/1.65 var(--font-sans); color: color-mix(in oklab, var(--paper) 85%, var(--ink)); }
.foot .foot-about p { margin: 0 0 0.7rem; }
.foot .foot-about a { text-decoration: underline; }
.foot-fine {
  margin-top: 2.2rem; padding-top: 1rem;
  border-top: 1px solid color-mix(in oklab, var(--paper) 25%, var(--ink));
  font: 400 0.78rem/1.6 var(--font-sans);
  color: color-mix(in oklab, var(--paper) 70%, var(--ink));
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; justify-content: space-between;
}

/* ── prose pages (about, how, privacy) ───────────────────────────────────── */
.article .lede-rule { margin: 0.4rem 0 1.6rem; }
dl.plain { margin: 0 0 1.05rem; }
dl.plain dt { font: 700 0.95rem/1.5 var(--font-sans); margin-top: 0.9rem; }
dl.plain dd { margin: 0.15rem 0 0; }

@media print {
  .mainnav, .foot, .correction-line, .skip { display: none; }
  body { font-size: 11pt; }
}