/* Static pages.

   These exist to be read and to be indexed, so they stay plain HTML with no
   scripting, but plain should not mean unconsidered. They share the app's
   palette and its grayscale-first restraint: the only saturated colour is the
   one link accent, and every other distinction is made with weight, size and
   space. Tables carry most of the content, so most of the work here is making
   a table of numbers legible at a glance. */

:root {
  --bg: #ffffff;
  --surface: #f7f9fb;
  --surface-2: #eef2f6;
  --text: #0f172a;
  --dim: #475569;
  --faint: #7c8794;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #3366cc;
  --accent-visited: #6b4ba1;
  --accent-soft: #eaf0fb;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  /* Headings are set in a serif, which is the single thing that makes a page
     read as a reference work rather than as an app. Body stays sans, because
     dense tables of figures are easier to scan in one. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --mark-bg: #dbe2ea;
  --mark-hi: #16202e;
  --radius: 10px;
  --shadow: none;
}

/* The app defaults to light and remembers an explicit choice; these pages
   carry no script, so they follow the system instead. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f141b;
    --surface: #161d26;
    --surface-2: #1d2632;
    --text: #e8edf3;
    --dim: #a3b0be;
    --faint: #7d8b9a;
    --border: #263140;
    --border-strong: #354356;
    --accent: #8ab4f8;
    --accent-visited: #c58af9;
    --accent-soft: #1a2537;
    --mark-bg: #0b0e13;
    --mark-hi: #f2f4f7;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* A fixed height rather than vertical padding, so the mark lands in the same
     place whatever the row happens to contain. The home page's nav pills and
     the other pages' longer call to action are different heights, which is why
     the mark used to sit two pixels lower on one than the other and ten
     further in. 52px centres a 19px mark at 16, which is where the map's panel
     puts it. */
  min-height: 52px;
  /* Asymmetric, like the map's panel: the mark sits at 14px on the left while
     the right keeps the 24px the page content uses. */
  padding: 0 24px 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  /* The same setting the map's panel uses, so the name does not change weight
     or typeface when you move between the app and the pages around it. */
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .005em;
  text-decoration: none;
  color: var(--text);
  /* Pulled back over the header's inset so the mark sits at 14px, where the
     map puts it, while the hit box spreads out invisibly around it. */
  margin-left: -10px;
  padding: 6px 10px;
  border-radius: 8px;
}
.brand:hover { background: var(--surface-2); }
/* The map's mark, rebuilt on these tokens so the two never drift: a blended
   field seen through a rounded window, which is what the map itself draws.
   Everything inside it is proportional, so the same rules draw it at 19px in
   the masthead and at wordmark size in the hero. Only the box changes. */
.mark {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  flex: none;
  overflow: hidden;
  position: relative;
  background: var(--mark-bg);
  box-shadow: inset 0 0 0 1px var(--border);
}
.mark::before,
.mark::after { content: ''; position: absolute; border-radius: 50%; }
.mark::before {
  inset: 22% -18% -30% 8%;
  background: var(--dim);
  opacity: .5;
}
.mark::after {
  left: 26%; top: 44%; width: 62%; height: 46%;
  background: var(--mark-hi);
}

/* ── layout ─────────────────────────────────────────────────────────────── */

main { max-width: 980px; margin: 0 auto; padding: 22px 24px 60px; }

/* Wikipedia's article title: large, light, ruled off from the body. The page
   is a reference entry, not a landing page, so the heading states the subject
   and gets out of the way. */
h1 {
  font-family: var(--serif);
  font-size: clamp(27px, 3.6vw, 35px);
  line-height: 1.18;
  letter-spacing: -.008em;
  margin: 2px 0 7px;
  font-weight: 400;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
h2 {
  clear: right;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0;
  margin: 34px 0 8px;
  font-weight: 400;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.crumb { font-size: 13px; color: var(--faint); margin-bottom: 2px; }
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }

.lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--dim);
  margin: 0 0 16px;
  max-width: 70ch;
}
.meta { font-size: 13.5px; color: var(--faint); line-height: 1.55; max-width: 74ch; }
a { color: var(--accent); text-underline-offset: 2px; }
a:visited { color: var(--accent-visited); }

/* The single headline figure on a statistic page. */
.big {
  font-size: 17px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.big strong {
  font-size: 26px;
  font-weight: 660;
  letter-spacing: -.02em;
  display: block;
  margin-top: 2px;
}

.cta {
  display: inline-block;
  font-weight: 560;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, color .15s, background .15s;
}
.cta:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ── tables ─────────────────────────────────────────────────────────────── */

/* Tables start below the infobox rather than beside it. A five-column county
   table squeezed into the remaining 380px lost its last column off the edge
   and wrapped every statistic name onto three lines. Prose still wraps
   alongside the box, which is the point of floating it. */
.tw {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 10px 0 6px;
  clear: right;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 100%; }
th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--faint);
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  padding: 0 12px 7px 0;
  white-space: nowrap;
}
td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 55%, transparent); }
td:first-child, th:first-child { white-space: normal; padding-left: 0; }
tbody tr:hover { background: var(--surface-2); }
td a { text-decoration: none; font-weight: 520; }
td a:hover { text-decoration: underline; }

/* Numbers line up on the decimal and read as data, not prose. */
.n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.dim { color: var(--faint); font-weight: 400; }

/* ── link indexes ───────────────────────────────────────────────────────── */

.index {
  columns: 3;
  column-gap: 30px;
  padding-left: 18px;
  font-size: 15px;
  margin: 10px 0 4px;
}
.index li { break-inside: avoid; margin: 3px 0; }
.index li .dim { font-size: 13px; }

/* Neighbouring cities, at the foot of a city page. */
.near {
  columns: 3;
  column-gap: 30px;
  padding-left: 18px;
  font-size: 15px;
  margin: 10px 0 4px;
}
.near li { break-inside: avoid; margin: 3px 0; }
@media (max-width: 720px) { .near { columns: 2; } }
@media (max-width: 480px) { .near { columns: 1; } }

.jump {
  font-size: 13.5px;
  color: var(--faint);
  line-height: 2;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 8px;
}
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.jump a { text-decoration: none; white-space: nowrap; }
.jump a:hover { text-decoration: underline; }

/* ── footer ─────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--border);
  padding: 22px 24px 48px;
  font-size: 13px;
  color: var(--faint);
  max-width: 1060px;
  margin: 0 auto;
}
footer p { max-width: 76ch; }
.hubs { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0; }
.hubs a { color: var(--dim); text-decoration: none; font-weight: 520; }
.hubs a:hover { color: var(--accent); }
.hubs.sib {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) { .index { columns: 2; } }
@media (max-width: 560px) {
  main { padding: 20px 16px 48px; }
  .site { padding: 11px 16px; }
  footer { padding: 20px 16px 40px; }
  .index { columns: 1; }
  .lede { font-size: 16.5px; }
  table { font-size: 14px; }
  th, td { padding-right: 14px; }
}


/* ── home ─────────────────────────────────────────────────────────────────
   The front page is a search box and an index, in that order. It borrows the
   restraint of a search engine for the top of the page and the density of a
   reference work for the rest: one thing to do on arrival, and everything the
   atlas holds laid out plainly beneath it for anyone who would rather browse
   than type. No section here exists to persuade. */

.home { max-width: 1060px; padding-top: 0; }

/* ── masthead ───────────────────────────────────────────────────────────── */

.site-nav { display: flex; align-items: center; gap: 4px; }
/* The home masthead carries the mark alone on the left, so the row goes back
   to holding its two ends apart. A bare mark is a small target, so it keeps a
   generous hit box and a hover that shows it is a link — but the box is pulled
   back over the header's own padding rather than added to it, so the mark sits
   in the corner at the inset a logo usually takes rather than a third of the
   way into the row. */

.site-nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 520;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a:visited { color: var(--dim); }
.site-nav .cta { margin-left: 6px; color: var(--text); }
.site-nav .cta:hover { color: var(--accent); }
.brand-name { letter-spacing: -.017em; }

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding: clamp(38px, 8vh, 76px) 0 0;
  max-width: 720px;
  margin: 0 auto;
}
/* The wordmark: the site's mark and its name set as one lockup, which is the
   same pairing the masthead and the browser tab already show, drawn from the
   same rules at hero size. Set in the serif every heading uses, with tracking
   left very slightly open — these old-style faces were cut for metal and look
   engraved rather than cramped when they are not tightened. Ligatures and
   kerning are asked for explicitly because this is the one line on the site
   where the letter fitting is actually visible. */
.wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 22px);
  font-family: var(--serif);
  font-size: clamp(28px, 4.6vw, 45px);
  line-height: 1.06;
  letter-spacing: .02em;
  font-weight: 400;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
/* The rules are the same hairline this stylesheet already draws under every
   heading, turned on their side. That is the whole idea: the wordmark is the
   first instance of the page's own furniture rather than a logo set on top of
   it. They shrink with the type and give up their space first when the line
   gets tight, so the name never wraps to make room for decoration. */
.wordmark::before,
.wordmark::after {
  content: '';
  height: 1px;
  width: clamp(20px, 6vw, 66px);
  flex: 0 1 auto;
  min-width: 0;
  background: var(--border-strong);
}
.wordmark > span { flex: none; }
/* The subtitle sits close under the wordmark so the two read as one lockup,
   and is tracked slightly open at small size to match it. */
.hero .lede {
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: .008em;
  color: var(--faint);
  max-width: 58ch;
  margin: 0 auto 30px;
  text-wrap: balance;
}

/* ── search ─────────────────────────────────────────────────────────────── */

.hs { position: relative; text-align: left; }
.hs-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 15px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.hs-field:hover { border-color: var(--faint); }
/* The whole field takes the focus ring, not the bare input inside it: the
   control the eye sees is the box, so that is what should light up. */
.hs:focus-within .hs-field {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hs.is-open .hs-field { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.hs-icon { width: 18px; height: 18px; flex: none; color: var(--faint); }
.hs-icon circle, .hs-icon path { fill: none; stroke: currentColor; stroke-width: 1.7; }
.hs:focus-within .hs-icon { color: var(--accent); }

.hs input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 16.5px;
  color: var(--text);
  padding: 13px 0;
}
.hs input::placeholder { color: var(--faint); }
.hs input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hs-go {
  flex: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  color: var(--dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.hs-go:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* The suggestion panel hangs off the field as one continuous surface. */
.hs-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 34px -18px rgba(15, 23, 42, .3);
  overflow: hidden;
  max-height: min(64vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hs-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 15px;
  text-decoration: none;
  color: var(--text);
  border-top: 1px solid var(--border);
}
.hs-item:first-child { border-top: 0; }
.hs-item:visited { color: var(--text); }
.hs-item.is-cursor, .hs-item:hover { background: var(--accent-soft); }
.hs-kind {
  flex: none;
  width: 74px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--faint);
}
.hs-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hs-name { font-size: 15px; line-height: 1.35; }
.hs-name mark {
  background: none;
  color: inherit;
  font-weight: 680;
  /* A tinted highlight would fight the row's own selected state, so the match
     is marked by weight instead. */
}
.hs-sub { font-size: 12.5px; color: var(--faint); }
.hs-empty { padding: 15px; font-size: 14.5px; color: var(--dim); }
.hs-empty p { margin: 0; }
.hs-empty strong { color: var(--text); font-weight: 620; }
.hs-empty-alt { margin-top: 4px !important; font-size: 13.5px; }
.hs-status {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
}
.cta.primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 600;
}
.cta.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── section furniture ──────────────────────────────────────────────────── */

.band { margin-top: 52px; }
.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.band-head h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  border: 0;
}
.band-head .more { font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.band-head .more:hover { text-decoration: underline; }
.band-note { font-size: 13.5px; color: var(--faint); margin: 6px 0 0; max-width: 78ch; }

/* ── featured ───────────────────────────────────────────────────────────── */

/* An index of maps rather than a wall of cards: rules instead of boxes, so
   eight entries read as one list and the eye can run down the names.
   Two columns, because eight entries divide evenly into them and a third
   column left a ragged half-row with a rule hanging off the end of it. */
.picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 0 44px;
}
.pick {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.pick:visited { color: var(--text); }
.pick-name {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.25;
  display: block;
  margin-bottom: 3px;
  text-underline-offset: 3px;
}
.pick:hover .pick-name { color: var(--accent); text-decoration: underline; }
.pick-blurb { font-size: 14px; color: var(--dim); line-height: 1.45; display: block; }
.pick-src {
  font-size: 12px;
  color: var(--faint);
  display: block;
  margin-top: 5px;
}

/* ── browse ─────────────────────────────────────────────────────────────── */

.browse {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 8px 44px;
  align-items: start;
}
.subjects {
  columns: 2;
  column-gap: 36px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 14.5px;
}
.subjects li { break-inside: avoid; display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.subjects a { text-decoration: none; }
.subjects a:hover { text-decoration: underline; }
/* A leader rule carries the eye from a short subject name to its count, the
   way a table of contents does, without drawing a table. */
.subjects .rule {
  flex: 1;
  border-bottom: 1px dotted var(--border-strong);
  transform: translateY(-3px);
  min-width: 10px;
}
.subjects .n { color: var(--faint); font-size: 12.5px; }

.rail { margin: 10px 0 0; }
.rail h3, .rail-h {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--faint);
  font-weight: 600;
  margin: 0 0 6px;
}
.rail + .rail { margin-top: 26px; }
.rail-h { margin: 10px 0 6px; }
.levels { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.levels li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.levels a { text-decoration: none; }
.levels a:hover { text-decoration: underline; }
.levels .n { color: var(--faint); font-size: 12.5px; white-space: nowrap; }

.placelist { display: flex; flex-wrap: wrap; gap: 5px 7px; margin: 0; padding: 0; list-style: none; }
.placelist a {
  display: inline-block;
  font-size: 13.5px;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--dim);
  transition: border-color .15s, color .15s, background .15s;
}
.placelist a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ── sources ────────────────────────────────────────────────────────────── */

.srcs { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
.srcs td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border); }
.srcs td:last-child { padding-right: 0; }
.srcs .agency { color: var(--faint); font-size: 13px; white-space: normal; }
.srcs .prov {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--faint);
  white-space: nowrap;
}
.srcs tr:hover { background: var(--surface); }

/* ── method ─────────────────────────────────────────────────────────────── */

.method {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 4px 40px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 14.5px;
}
.method li { padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--dim); line-height: 1.5; }
.method strong { color: var(--text); font-weight: 620; display: block; }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .browse { grid-template-columns: 1fr; gap: 0; }
  .rail { margin-top: 26px; }
}
@media (max-width: 620px) {
  /* Every masthead stays one row. The name is dropped rather than the mark:
     193px of "Demographics Atlas" beside a 219px call to action does not fit
     in 343px, and the two wrapping onto separate lines made a 115px header on
     a phone. The mark alone also puts every page's mark in the same place,
     which is the point of the alignment above. */
  .site { flex-wrap: nowrap; padding: 0 14px; gap: 10px; }
  .site .brand-name { display: none; }
  .site-home { gap: 10px; }
  /* A 19px mark is a 25px target with its padding, which is too small to hit
     with a thumb. The box grows on touch without the mark growing with it. */
  .site-home .brand {
    padding: 12px;
    margin: -12px 0 -12px -12px;
    border-radius: 10px;
  }
  /* Only the map remains: at this width the section links cost more room
     than the whole masthead has, and they are all in the footer anyway. */
  .site-nav a:not(.cta) { display: none; }
  .site-nav .cta { padding: 7px 13px; margin-left: 0; white-space: nowrap; }

  .hero { padding-top: 24px; }
  .wordmark { font-size: clamp(27px, 8vw, 36px); gap: .26em; }
  .hero .lede { font-size: 14.5px; margin-bottom: 24px; }
  .subjects { columns: 1; }

  /* 16px stops iOS zooming the page when the field takes focus. */
  .hs input { font-size: 16px; padding: 12px 0; }
  .hs-go { display: none; }
  .hs-field { padding-right: 14px; }
  .hs-kind { width: 56px; font-size: 10px; }

  /* Stacked pills of different widths read as a ragged edge; full-width
     buttons read as two choices. */
  .hero-actions { flex-direction: column; align-items: stretch; margin-top: 22px; }
  .hero-actions .cta { text-align: center; padding: 11px 16px; }

  .picks { gap: 0; }
}

/* Motion is decoration here; anyone who has asked for less gets none. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Keyboard users must always be able to see where they are. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.hs input:focus-visible { outline: 0; }

.skip {
  position: absolute;
  left: 8px; top: -60px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  text-decoration: none;
  z-index: 60;
  transition: top .16s;
}
.skip:focus { top: 8px; }


/* ── directory tiles ──────────────────────────────────────────────────────
   A grid of links to somewhere else: states on the county directory, and any
   other place a page is mostly a way through to other pages. Ruled rather than
   boxed, because fifty rounded rectangles is a lot of furniture for what is
   really a list. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 0 34px;
  margin: 12px 0 4px;
}
.tile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  font-size: 14.5px;
}
.tile:hover .tile-name { text-decoration: underline; }
.tile .n { color: var(--faint); font-size: 12.5px; white-space: nowrap; }

/* ── browsable catalogue ──────────────────────────────────────────────────
   The statistics directory. Every measure is on this page, inside a subject
   that starts closed: 1,105 links laid flat is not a thing anyone can read,
   but hiding them behind a click each is no better, so a filter box narrows
   the whole catalogue at once and opens whatever still matches. */
.browse-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
  margin: 14px 0 0;
}
.browse-filter:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.browse-filter svg { width: 17px; height: 17px; flex: none; color: var(--faint); }
.browse-filter svg circle, .browse-filter svg path {
  fill: none; stroke: currentColor; stroke-width: 1.7;
}
.browse-filter:focus-within svg { color: var(--accent); }
.browse-filter input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 15.5px; color: var(--text); padding: 11px 0;
}
.browse-filter input::placeholder { color: var(--faint); }
.browse-filter input::-webkit-search-cancel-button { -webkit-appearance: none; }

.browse-status { font-size: 13px; color: var(--faint); margin: 8px 0 0; min-height: 1.2em; }
.browse-status a { text-decoration: none; }
.browse-status a:hover { text-decoration: underline; }

.subj { border-bottom: 1px solid var(--border); }
.subj:first-of-type { border-top: 1px solid var(--border-strong); }
.subj > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
}
.subj > summary::-webkit-details-marker { display: none; }
/* The disclosure arrow is drawn rather than inherited, so it can sit at the
   optical size the row wants and turn without the browser's own glyph. */
.subj > summary::before {
  content: '';
  flex: none;
  width: 0; height: 0;
  border-left: 5px solid var(--faint);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-1px);
  transition: transform .14s ease;
}
.subj[open] > summary::before { transform: rotate(90deg) translateX(-1px); }
.subj > summary:hover { background: var(--surface); }
.subj > summary:hover .subj-name { color: var(--accent); }
.subj-name { flex: none; }
.subj-rule { flex: 1; border-bottom: 1px dotted var(--border-strong); transform: translateY(-4px); min-width: 10px; }
.subj-n { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.stat-list {
  columns: 2;
  column-gap: 40px;
  list-style: none;
  margin: 2px 0 14px;
  padding: 0 0 0 15px;
  font-size: 14px;
}
.stat-list li { break-inside: avoid; padding: 2.5px 0; }
.stat-list a { text-decoration: none; }
.stat-list a:hover { text-decoration: underline; }
.stat-list mark { background: none; color: inherit; font-weight: 680; }

/* A thing, then the measures of it. Nursing Assistants took four lines of the
   index before this and County Business Patterns gave every industry three;
   one line each puts the statistics that exist only once back on equal
   footing. Every measure keeps its own link. */
.stat-group { display: block; padding: 4px 0 5px; }
/* An explicit display beats the hidden attribute, and the filter hides rows
   with it. Without this the count said four matches while the whole subject
   stayed on screen. */
.stat-list li[hidden] { display: none; }
.sg-name { font-weight: 520; }
.sg-parts { display: block; font-size: 12.5px; line-height: 1.5; margin-top: 1px; }
.sg-parts a { color: var(--dim); }
.sg-parts a:hover { color: var(--accent); }
.sg-parts a + a::before {
  content: '·';
  color: var(--faint);
  margin: 0 5px 0 3px;
  display: inline-block;
}
.subj-more { margin: 0 0 14px; padding-left: 15px; font-size: 13px; }
.subj-more a { text-decoration: none; color: var(--faint); }
.subj-more a:hover { text-decoration: underline; color: var(--accent); }

@media (max-width: 900px) { .stat-list { columns: 2; } }
@media (max-width: 560px) {
  .stat-list { columns: 1; }
  .tiles { grid-template-columns: 1fr; gap: 0; }
}

/* ── infobox ─────────────────────────────────────────────────────────────
   Wikipedia's summary panel: the facts you would otherwise have to read the
   page to assemble, in a fixed order, floated out of the reading column. */
.infobox {
  float: right;
  width: 300px;
  margin: 4px 0 18px 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  font-size: 13px;
  overflow: hidden;
}
.infobox-head {
  font-family: var(--serif);
  font-size: 15px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.infobox dl { margin: 0; padding: 4px 12px 10px; }
.infobox dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--faint);
  margin-top: 8px;
  font-weight: 600;
}
.infobox dd { margin: 1px 0 0; line-height: 1.45; }
.infobox .big-value {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.1;
}

/* ── contents ────────────────────────────────────────────────────────────
   The other Wikipedia furniture: a boxed list of what is on the page, so a
   long entry can be entered anywhere rather than only at the top. */
.toc {
  display: inline-block;
  min-width: 240px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 10px 18px 12px 14px;
  margin: 14px 0 6px;
  font-size: 14px;
}
.toc-head {
  font-family: var(--serif);
  font-size: 15px;
  margin-bottom: 5px;
}
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin: 2px 0; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .infobox { float: none; width: auto; margin: 12px 0 18px; }
}


/* A table cell holding a sentence rather than a value has to wrap, or it sets
   the column width and squeezes every other column to nothing. */
td.wrap, th.wrap { white-space: normal; }
td.name { min-width: 210px; }

/* Prose inside a home page band. */
.explain { max-width: 74ch; }
.explain p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--dim);
  margin: 0 0 11px;
}