/* Wahzhazhe Facts — shared stylesheet
   One reading system across every page. Colors are semantic, not decorative:
   --gap marks something Osage law does not say, --model marks something written
   down somewhere. As shipped that pair is thin — --model carries quotations and
   focus rings, --gap survives only on blockquote.gap and inside the chart's own
   <style>. The chips and ledger cells that used it were removed on 2026-08-12
   after grepping the built pages: they had never been used. If you reintroduce
   the distinction, reintroduce the tint tokens with it (git has them).
   Nothing here draws on Osage or Potawatomi visual tradition; that is deliberate,
   and belongs to Osage designers, not this site. */

/* Osage script (𐒰-𐓻). Noto Sans Osage, SIL Open Font License 1.1; the licence
   ships beside it as NotoSansOsage-OFL.txt, which the OFL requires.
   Self-hosted rather than pulled from a font CDN: a CDN request would tell a
   third party who is reading this page, and no page here makes one.
   The unicode-range carries three combining marks (U+0301 acute, U+0304 macron,
   U+0358 dot above right) as well as the Osage block. Osage orthography stacks
   those on its letters, and they live in Combining Diacritical Marks, not in the
   Osage block. Omit them and the browser draws the letter from this font and the
   mark from a fallback, which lands it in the wrong place. GPOS is retained in
   the subset for the same reason: it is what positions them. */
@font-face {
  font-family: "Osage";
  src: url("NotoSansOsage-Regular.woff2") format("woff2");
  unicode-range: U+104B0-104FB, U+0301, U+0304, U+0358;
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* Latin faces, self-hosted for the same reason the Osage one is: no font CDN, so no
   third party learns who reads this page. Subset to Latin-1 plus the punctuation the
   pages actually use (section sign, curly quotes, ellipsis, en dash, middle dot), which
   is what keeps five faces to 132 KB in total.

   Self-hosting is also what makes the record look the same to everyone. The system
   stack below still runs as a fallback, but it resolved to a different typeface per
   platform -- Iowan Old Style on Apple, Palatino Linotype on Windows, Georgia
   elsewhere -- so a document meant to be shared, quoted and screenshotted rendered
   differently for almost every reader.

   Source Serif 4 for reading: it is drawn for long-form text and is the nearest
   open-licensed relative of the Palatino/Iowan target the old stack named. Noto Sans
   and Noto Sans Mono for chrome, because they come from the same superfamily as Noto
   Sans Osage, so a line mixing Osage and Latin shares an x-height and a weight instead
   of visibly switching foundries. All SIL OFL 1.1; both licences ship beside them. */
@font-face {
  font-family: "Source Serif 4";
  src: url("SourceSerif4-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("SourceSerif4-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("SourceSerif4-It.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("NotoSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans Mono";
  src: url("NotoSansMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ground:      #FAF9F7;
  /* Not pure white: an untinted surface on a warm ground reads as a flat synthetic
     patch. Lighter than --ground, same warmth, so panels sit in the page's light. */
  --surface:     #FEFDFB;
  --ink:         #16191D;
  --muted:       #55606E;
  --faint:       #646E7D;
  --rule:        #E2E4E8;
  --gap:     #7A2E2E;
  --model:   #1D5A56;
  /* "Osage" is listed first in every stack but only ever renders Osage script:
     its @font-face declares a unicode-range, so the browser consults it for
     those codepoints and ignores it for everything else. Listing it first is
     what makes that work; putting it last would let the serif's .notdef win. */
  --serif: "Osage", "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Osage", "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "Osage", "Noto Sans Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 64ch;
  --pad: clamp(1.1rem, 4vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  height: auto; overflow-y: auto; -webkit-text-size-adjust: 100%;
  /* `only light`, not `light dark`. The earlier `light dark` told the UA both themes
     existed while this stylesheet defined no dark palette, so a dark-mode machine
     painted a dark scrollbar against the cream page. Removing the declaration left
     the UA free to apply its own dark treatment, which inverts the figures: every
     inline SVG here hardcodes dark ink on a transparent ground, so a darkened page
     background renders dark text on dark. `only light` opts out of that entirely. */
  color-scheme: only light;
}
body {
  /* Remove the 300ms tap delay and the grey flash on tap; both read as lag
     on a phone, which is where most of this site will be read. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  min-height: 100%;
  overflow-wrap: break-word;
}
/* One column, one measure. The wrapper IS the measure, so a heading rule, a
   table edge and the text beneath them share a right edge. Capping prose
   separately (p,li max-width) put the text 96px inside the rules above it at
   1440px, which read as the column being adrift in the page. */
.wrap { max-width: 40rem; margin: 0 auto; padding: 0 var(--pad); }

/* ---- navigation ---- */
.site-nav { border-bottom: 1px solid var(--rule); background: var(--surface); }
.site-nav .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem; padding-block: 0.9rem; }
.brand { font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); margin-right: auto; }
/* One flex item, not four, so the whole group wraps together on overflow
   instead of the wrap peeling the single longest link off on its own line. */
.nav-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem; }
.brand span { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 400; }
.site-nav a.nav { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.site-nav a.nav:hover, .site-nav a.nav[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- type ---- */
h1 { font-size: clamp(1.9rem, 5.5vw, 2.85rem); line-height: 1.13; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; margin: 0 0 1rem; }
h2 { font-size: clamp(1.25rem, 3.4vw, 1.5rem); line-height: 1.25; font-weight: 600; text-wrap: balance; margin: 0 0 0.85rem; padding-top: 1.9rem; border-top: 1px solid var(--rule); }
h3 { font-size: 1.08rem; font-weight: 600; margin: 1.75rem 0 0.5rem; text-wrap: balance; }
p, li { text-wrap: pretty; }
p { margin: 0 0 1.05rem; }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: 0.45rem; }
.lede { font-size: clamp(1.08rem, 2.6vw, 1.22rem); line-height: 1.6; color: var(--muted); }
main section { margin-bottom: 2.75rem; }
header.page { padding: clamp(2.5rem, 7vw, 4rem) 0 1.75rem; }

a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--ink); }
a:focus-visible { outline: 2px solid var(--model); outline-offset: 2px; border-radius: 2px; }

/* The hero chart is the argument before the prose is: an outlay that does not move
   against appropriations that do. It sits full-measure because the crossing is the
   point and a narrow column hides it. Symmetric block margin: a zero bottom left the
   figcaption's last line touching the next paragraph's first, measured 0px against
   the 17px every other paragraph gets, so the caption read as body text. */
.hero-chart { margin: 1.6rem 0; }
.hero-chart svg, .svg-fig svg { width: 100%; height: auto; display: block; }
/* Each figure ships twice: a landscape variant and a portrait one. A 1080-wide
   landscape figure scaled into a 390px phone renders its body text at about 4.5
   CSS px, which is not readable at any DPI -- SVG scales, it does not reflow. The
   portrait variant is 720 wide with 17px type, which lands near 9 CSS px there. */
.svg-fig .rf-p { display: none; }
@media (max-width: 879px) {
  .svg-fig .rf-d { display: none; }
  .svg-fig .rf-p { display: block; }
}
.svg-fig { margin: 2.6rem 0; }
.svg-fig figcaption { border-top: 1px solid var(--rule); margin-top: 1.1rem;
                      padding-top: 0.8rem; font-size: 0.82rem; color: var(--muted);
                      line-height: 1.5; }
.hero-chart figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem;
                         max-width: 62ch; }
main img { display: block; max-width: 100%; height: auto; }

/* ---- quotations ---- */
blockquote { margin: 1.4rem 0; padding-left: 1.1rem; border-left: 2px solid var(--model); }
blockquote.gap { border-left-color: var(--gap); }
blockquote p { margin-bottom: 0.5rem; }
blockquote .attrib { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); margin-top: 0.4rem; line-height: 1.5; }

/* ---- the author's own questions ----
   These are not quotations and must not read as any. They mark the turns in the
   argument, so they get a hairline above rather than the quotation's left border:
   on this page a question is where one part ends and the next begins. */
.question { margin: 2.4rem 0 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
            font-size: 1.1rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.question + p { margin-top: 0; }
/* A RUN of questions is a list of open ones, not a series of turns in the argument.
   Only the first takes the rule; the rest close up under it. Without this, the five
   questions in "What is still unknown" rendered as four hairlines with nothing beneath
   them, which reads as content that failed to load rather than as questions nobody has
   answered. The single-question case above is untouched. */
.question + .question { margin-top: 0; padding-top: 0.9rem; border-top: 0; }

/* ---- tables ---- */
.scroll { overflow-x: auto; margin: 1.6rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
th, td { text-align: left; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
tr.total td { font-weight: 600; border-bottom-width: 2px; }

/* ---- note ---- */
.note { background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 1.1rem 1.25rem; margin: 1.8rem 0; }
.note p { max-width: none; font-size: 0.95rem; margin-bottom: 0.6rem; }
.note p:last-child { margin-bottom: 0; }
.note h3 { margin-top: 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 400; }

footer.site { margin-top: 3.5rem; border-top: 1px solid var(--rule); background: var(--surface); }
footer.site .wrap { padding-block: 1.75rem 3rem; }
footer.site p { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); max-width: var(--measure); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- skip link ----
   First tab stop on every page. Visually hidden until focused, so a keyboard or
   screen-reader user can jump the navigation instead of walking it on each page. */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--ink);
  padding: 0.6rem 1rem; border: 1px solid var(--rule); border-radius: 0 0 3px 0;
  font-family: var(--sans); font-size: 0.9rem; z-index: 100;
}
.skip-link:focus { left: 0; }
main { scroll-margin-top: 5rem; }

/* ---- table of contents ----
   Generated from the H2s (record_md.py), so it can never drift from the sections.
   On a phone it is a collapsed disclosure at the top of the page; on a wide screen
   it becomes a fixed index in the left margin, using the empty gutter beside the
   44rem reading column so it never crowds the prose. */
h2[id] { scroll-margin-top: 1.5rem; }
.toc { font-family: var(--sans); margin: 1.4rem 0 0; }
.toc summary { cursor: pointer; font-family: var(--mono); font-size: 0.66rem;
               letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
               padding: 0.5rem 0; }
.toc .toc-list { list-style: none; margin: 0; padding: 0.3rem 0 0; }
.toc .toc-list li { margin: 0; max-width: none; }
.toc .toc-list a { display: block; font-size: 0.9rem; line-height: 1.35;
                   color: var(--muted); text-decoration: none;
                   padding: 0.3rem 0 0.3rem 0.7rem; border-left: 2px solid var(--rule); }
.toc .toc-list a:hover { color: var(--ink); border-left-color: var(--ink); }

/* Intermediate tier: the sidebar appears earlier, narrower. The gutter is what
   limits this. The reading column is 44rem and centred, so the free space each side
   is (100vw - 44rem) / 2; a 13rem sidebar pinned 1rem from the edge needs about
   73rem of viewport before it stops colliding with the text, which is where the
   76rem breakpoint comes from. Narrowing it to 10rem buys roughly 8rem of viewport,
   enough to reach a 1152px laptop that previously got only the collapsed
   disclosure. Verified by measuring the gap in a browser, not by reading this sum. */
@media (min-width: 68rem) and (max-width: 75.999rem) {
  .toc { position: fixed; top: 6.5rem; left: max(0.75rem, calc(50vw - 33rem));
         width: 10rem; max-height: calc(100vh - 9rem); overflow-y: auto; margin: 0; }
  .toc summary { display: none; }
  .toc details > .toc-list { display: block; }
  .toc details::details-content { content-visibility: visible; }
  .toc .toc-list a { font-size: 0.8rem; line-height: 1.3; }
  .toc details.toc-earlier > summary { display: list-item; }
  .toc details.toc-earlier > .toc-list { display: none; }
  .toc details.toc-earlier[open] > .toc-list { display: block; }
  .toc details.toc-earlier::details-content { content-visibility: hidden; }
  .toc details.toc-earlier[open]::details-content { content-visibility: visible; }
}

@media (min-width: 76rem) {
  .toc { position: fixed; top: 6.5rem; left: max(1rem, calc(50vw - 37rem));
         width: 13rem; max-height: calc(100vh - 9rem); overflow-y: auto; margin: 0; }
  .toc summary { display: none; }
  /* Pin the sidebar open with its toggle hidden. Both rules are load-bearing and
     neither substitutes for the other: engines that collapse <details> by hiding
     its children need the first, and engines that collapse it through the
     ::details-content pseudo clip the subtree no matter what the child declares.
     Ship the second alone and older engines lose the sidebar; ship the first alone
     and current Chrome renders it 0px tall with no summary left to click. */
  .toc details > .toc-list { display: block; }
  .toc details::details-content { content-visibility: visible; }
}

/* ---- dated index (the updates page) ----
   The outer <details> behaves exactly like the record's contents index: collapsed on
   narrow screens, pinned open as a sidebar on desktop. The nested "Earlier" group must
   NOT inherit that pinning. Its whole job is to keep the index to the last several
   entries, and both desktop rules above are DESCENDANT selectors (`.toc details ...`),
   so they reach the nested <details> too and would force it open at the one width where
   `.toc summary { display: none }` has also removed the toggle to close it again. The
   overrides below win on specificity and put its summary back. */
.toc .toc-earlier { margin: 0.45rem 0 0; border-top: 1px solid var(--rule); }
.toc .toc-earlier > summary { cursor: pointer; font-family: var(--mono);
      font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--faint); padding: 0.4rem 0 0.2rem; }
.toc .toc-earlier > summary:hover { color: var(--ink); }
/* Dates are a column of numbers; lining figures stop them shimmering as they scroll. */
.toc[data-index="dates"] .toc-list a { font-variant-numeric: tabular-nums; }

@media (min-width: 76rem) {
  .toc details.toc-earlier > summary { display: list-item; }
  .toc details.toc-earlier > .toc-list { display: none; }
  .toc details.toc-earlier[open] > .toc-list { display: block; }
  .toc details.toc-earlier::details-content { content-visibility: hidden; }
  .toc details.toc-earlier[open]::details-content { content-visibility: visible; }
}

/* ---- in-page jump feedback (zero JavaScript) ----
   The NLM UX review found a scroll-spy is not worth introducing the site's first
   JavaScript. The robust, no-JS substitute: smooth anchor scrolling so a jump from
   the table of contents lands softly, and a :target cue so the section you landed on
   is marked (its top rule inks from faint grey to --model). Colour only, no width
   change, so nothing shifts. Motion is dropped for reduced-motion users. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
h2[id]:target { border-top-color: var(--model); }

/* ---- full-text accordions ----
   A [[fulltext: X]] directive (record_md.py) renders the entire cited provision inside
   a <details>, beneath the excerpt the prose quotes. The summary is a quiet control in
   --model, the colour for text that exists in a source; opened, it shows the whole
   section as a subdued blockquote. Additive by design: the excerpt stays visible above,
   so no receipt is ever hidden, only supplemented. Its left border is --rule, not the
   quotation's --model, so the full dump reads as secondary to the curated excerpt. */
.fulltext { margin: 0.2rem 0 1.6rem; }
.fulltext > summary { cursor: pointer; list-style: none; display: inline-flex;
                      align-items: baseline; gap: 0.45rem; font-family: var(--sans);
                      font-size: 0.8rem; color: var(--model); padding: 0.25rem 0; }
.fulltext > summary::-webkit-details-marker { display: none; }
.fulltext > summary::before { content: "+"; font-family: var(--mono); font-size: 0.85rem; }
.fulltext[open] > summary::before { content: "\2212"; }
.fulltext > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.fulltext blockquote { margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--muted);
                       border-left-color: var(--rule); }
.fulltext blockquote p { margin-bottom: 0.6rem; }
.fulltext blockquote p:last-child { margin-bottom: 0; }

/* ---- print ----
   A civic record is printed by legislators and researchers. Drop the navigation, the
   table of contents and the page ground; give the text the paper's full width in high
   contrast; and keep quotations, tables and the chart from splitting across a page
   break. The gap/provision colour coding carries meaning, so it is forced to print
   rather than dropped. */
@media print {
  :root { --ground: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --muted: #222222; }
  body { background: #FFFFFF; color: #000000; font-size: 11.5pt; line-height: 1.5; }
  .site-nav, .toc, .skip-link { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  main { scroll-margin-top: 0; }
  a { color: #000000; text-decoration: underline; }
  h1, h2, h3 { page-break-after: avoid; }
  h2 { border-top: 1px solid #999999; }
  blockquote, .scroll, table, tr, figure, .hero-chart, .note, .question {
    page-break-inside: avoid;
  }
  /* .chart is the SVG's own class; the gap/provision hues carry meaning, so force
     them to print rather than letting the browser drop backgrounds. */
  .chart, blockquote, .note {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  footer.site { border-top: 1px solid #999999; background: #FFFFFF; }
}