/* The Nonprofit Herald (/herald/). Generated pages come from build/build-herald.mjs.
 *
 * The brief, approved 2026-09-27: a white sheet with black type and black rules, no large black
 * fills, and colour only in the photographs. Every colour on this sheet is one of the tokens
 * below; the photographs are the only thing allowed to be bright. One exception, asked for on
 * 2026-09-29: the invitation to send a story (--act) is set in the green of 501c3.help, the
 * publisher, quiet enough to read as ink at a glance and to stand out on a second look. The heart
 * before "Organizations in this story", asked for the same day, is the same green. Faces come from
 * assets/herald/fonts.css (inlined into each page head): Newsreader for text, Libre Franklin for
 * the newspaper furniture, UnifrakturMaguntia for the nameplate alone.
 */

:root {
  --paper: #FFFFFF;
  --ink: #121212;
  --ink-2: #3A3A3A;
  --ink-3: #6B6B6B;
  --hair: #C9C9C9;
  --act: #155138;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --plate: "UnifrakturMaguntia", "Old English Text MT", serif;
  --gut: 20px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-optical-sizing: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { display: block; width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4, p { margin: 0; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--paper); color: var(--ink); padding: 8px 12px; border: 1px solid var(--ink); font: 600 13px/1 var(--sans); z-index: 10; }
.skip:focus { left: 16px; top: 8px; }

/* ---------- the site strip above the masthead ---------- */
.site-strip { border-bottom: 1px solid var(--hair); font: 500 12px/1.3 var(--sans); color: var(--ink-2); }
.site-strip-in { max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap; }
.site-logo { font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.site-strip-note { flex: 1; }

/* ---------- sheet ---------- */
.sheet { max-width: 1280px; margin: 0 auto; padding: 0 24px 40px; }

/* masthead */
.mast { display: grid; grid-template-columns: 210px minmax(0, 1fr) 210px; align-items: center; gap: 24px; padding: 22px 0 14px; }
.mast .ear { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.mast .ear-r { align-items: flex-end; }
.mast-sm { grid-template-columns: 1fr; padding: 16px 0 10px; }
.ear { border: 1px solid var(--ink); padding: 10px 12px; font: 400 13px/1.35 var(--serif); font-style: italic; color: var(--ink-2); }
.ear strong { display: block; font: 700 10.5px/1.3 var(--sans); font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.ear a { font-style: normal; font-family: var(--sans); font-weight: 700; font-size: 12px; color: var(--ink); display: inline-block; margin-top: 6px; border-bottom: 1px solid var(--ink); }
.ear a:hover { text-decoration: none; border-bottom-width: 2px; }
.ear a.act { color: var(--act); border-bottom-color: var(--act); }
.ear-r { text-align: right; }
.plate { font-family: var(--plate); font-weight: 400; text-align: center; font-size: clamp(28px, 7.2vw, 94px); line-height: 1; letter-spacing: 0; white-space: nowrap; }
.plate-sm { font-size: clamp(28px, 4.6vw, 58px); }
.plate a:hover { text-decoration: none; }
/* Between the ears (every width the 1099px block below leaves alone) the nameplate gets only what
 * they leave. Sized on the window alone, it pushed the right ear past the rule at every width from
 * 1100px up. 100cqi is the masthead's own width, so a scrollbar cannot throw it off: less two 210px
 * ears, two 24px gaps and 16px of air on each side, over 8.6, how many times its size this face sets
 * "The Nonprofit Herald" wide. The first declaration is for browsers without container units: the
 * window, less the sheet's padding and 17px for a scrollbar. */
@media not all and (max-width: 1099px) {
  .mast { container-type: inline-size; }
  .ear + .plate { font-size: calc((min(100vw, 1280px) - 565px) / 8.6); font-size: calc((100cqi - 500px) / 8.6); }
}

.folio { border-top: 4px double var(--ink); border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 7px 0 6px; font: 600 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.folio span:nth-child(2) { text-align: center; }
.folio span:nth-child(3) { text-align: right; }

/* The section row: up to three lists (series, desks, the utility links), each wrapping whole. The
 * rule between two of them sits in the middle of the 41px gap, and the row's script hides it in
 * front of a list that a wrap has moved to the start of a line. */
.desks { border-bottom: 1px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 41px; padding: 9px 0; font: 600 12.5px/1.4 var(--sans); }
.desks ul { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.desks ul + ul::before { content: ""; position: absolute; top: 0; bottom: 0; left: -21px; border-left: 1px solid var(--ink); }
.desks ul.line-start::before { display: none; }
.desks a.act { color: var(--act); }

/* shared type */
.kicker { font: 700 10.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.kicker time { float: right; font: 500 10.5px/1.2 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--ink-3); }
.dek { color: var(--ink-2); font-size: 15px; line-height: 1.42; margin-top: 6px; }
.byline { font: 600 10.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cap { display: flex; justify-content: space-between; gap: 12px; font: 400 11.5px/1.35 var(--sans); color: var(--ink-2); margin-top: 6px; }
.cap > span:first-child { flex: 1 1 auto; min-width: 0; }
/* A credit may be long ("Office of the Governor of California"): it wraps within two fifths of the line
   rather than squeezing the caption into a column, and on a phone it goes under the caption. */
.cap .credit { flex: 0 1 auto; max-width: 40%; text-align: right; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 480px) { .cap { flex-direction: column; gap: 3px; } .cap .credit { max-width: none; text-align: left; } }
/* When a Sector News story is one state's news, the state's outline sits on a white tab in the photo's
   corner, black like the type: drawn over the photo, never into it. */
.frame { position: relative; display: block; }
.state-tab { position: absolute; right: 8px; bottom: 8px; background: #fff; border: 1px solid var(--ink); padding: 5px; line-height: 0; }
/* The tab takes the shape's own proportions: as tall as the type beside it, as wide as the state needs,
   up to a limit that keeps Tennessee from running across the photo. */
.state-mark { display: block; height: 26px; width: auto; max-width: 64px; fill: var(--ink); }
.lead .state-mark { height: 36px; max-width: 90px; }
.story-photo .state-tab { right: 12px; bottom: 12px; padding: 7px 9px; }
.story-photo .state-mark { height: 48px; max-width: 120px; }
@media (max-width: 480px) { .story-photo .state-mark { height: 34px; max-width: 84px; } }
.more { font: 700 11.5px/1.3 var(--sans); display: inline-block; margin-top: 8px; border-bottom: 1px solid var(--ink); }
.more:hover { text-decoration: none; border-bottom-width: 2px; }
.h-xl { font-weight: 650; font-size: 46px; line-height: 1.03; letter-spacing: -.012em; font-variation-settings: "opsz" 72; }
.h-l { font-weight: 650; font-size: 26px; line-height: 1.1; letter-spacing: -.005em; }
.h-m { font-weight: 620; font-size: 20px; line-height: 1.15; }
.h-s { font-weight: 620; font-size: 16.5px; line-height: 1.2; }

/* column rules: equal columns, a 1px rule centred in each gutter */
.front, .founders, .deskgrid, .archive, .river { column-gap: calc(var(--gut) * 2); }
.front > .col, .founder, .desk, .archive > div, .ri { position: relative; }
.front > .col + .col::before, .founder + .founder::before, .desk::before, .archive > div + div::before, .ri::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gut) * -1); border-left: 1px solid var(--ink);
}
.desk:nth-child(4n+1)::before, .ri:nth-child(4n+1)::before { display: none; }

/* ---------- front page ---------- */
.front { display: grid; grid-template-columns: 2fr 1fr; padding-top: 18px; }
.front.has-rail { grid-template-columns: 1fr 2fr 1fr; }

.rail-h { font: 800 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 7px; border-bottom: 1px solid var(--ink); margin-bottom: 12px; grid-column: 1 / -1; }
.brief { padding: 13px 0; border-top: 1px solid var(--hair); }
.rail-h + .brief { border-top: 0; padding-top: 0; }
.brief p { font-size: 14px; line-height: 1.42; color: var(--ink-2); margin-top: 5px; }
.brief figure { margin-bottom: 10px; }

.lead .h-xl { margin-bottom: 12px; }
.lead figure { margin: 4px 0 12px; }
.lead .dek { font-size: 19px; line-height: 1.38; font-style: italic; color: var(--ink); margin: 0 0 10px; }
.lead .byline { padding: 8px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-bottom: 12px; display: flex; justify-content: space-between; gap: 12px; }
.body { columns: 2; column-gap: 28px; column-rule: 1px solid var(--hair); font-size: 15.5px; line-height: 1.5; }
.body p + p { text-indent: 1.2em; }
.body .dl, .story-body .dl { font: 700 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.lead-empty .h-xl { font-size: 52px; margin-top: 4px; }
/* Two stories under the lead, side by side, so the middle column runs as long as the left one. They
   sit inside .lead, so the lead's larger figure, dek and outline are set back to a card's size. */
.lead-more { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink); }
.lead-more figure { margin: 0 0 10px; }
.lead-more .dek { font-size: 14.5px; line-height: 1.42; font-style: normal; color: var(--ink-2); margin: 6px 0 0; }
.lead .lead-more .state-mark { height: 26px; max-width: 64px; }
@media (max-width: 560px) { .lead-more { grid-template-columns: 1fr; } }
.lead-empty .dek { margin-top: 16px; }
.lead-empty .body { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }

.second figure { margin-bottom: 10px; }
.stack { margin-top: 16px; border-top: 1px solid var(--ink); }
.stack .item { padding: 12px 0; border-top: 1px solid var(--hair); }
.stack .item:first-child { border-top: 0; }

/* sector table (real IRS figures) */
.ticker { margin-top: 8px; border-top: 2px solid var(--ink); padding-top: 9px; }
.second > .ticker:first-child { margin-top: 0; }
.ticker h3 { font: 800 11px/1.25 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.ticker .sub { font: italic 400 13px/1.35 var(--serif); color: var(--ink-2); margin: 3px 0 8px; }
.ticker table { width: 100%; border-collapse: collapse; font: 500 12px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.ticker th { font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; text-align: right; padding: 0 0 4px; border-bottom: 1px solid var(--ink); }
.ticker th:first-child, .ticker td:first-child { text-align: left; }
.ticker td { padding: 4px 0; border-bottom: 1px solid var(--hair); text-align: right; }
.ticker td:first-child a { font-weight: 700; border-bottom: 1px solid var(--ink); }
.ticker tr.dim td { color: var(--ink-3); }
.ticker .src { font: 400 10px/1.35 var(--sans); color: var(--ink-3); margin-top: 6px; }

/* ---------- section bands ---------- */
.band { margin-top: 34px; border-top: 3px solid var(--ink); padding-top: 3px; }
.band-first { margin-top: 22px; }
.band-h { border-top: 1px solid var(--ink); padding: 12px 0 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.band-h h1, .band-h h2 { font-weight: 700; font-style: italic; font-size: 34px; line-height: 1; letter-spacing: -.01em; }
.band-h p { font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); max-width: 560px; }
.band-h p a { border-bottom: 1px solid var(--ink); font-style: normal; font-family: var(--sans); font-size: 13px; font-weight: 600; }

.founders { display: grid; grid-template-columns: repeat(4, 1fr); }
.founder .ph { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 10px; }
.founder .ph img { width: 100%; height: 100%; object-fit: cover; }
.founder blockquote { margin: 0 0 10px; font-weight: 560; font-size: 19px; line-height: 1.22; }
.founder .who { font: 700 12px/1.35 var(--sans); }
.founder .who span { display: block; font-weight: 400; color: var(--ink-2); }
.founder .fact { font-size: 14px; line-height: 1.4; color: var(--ink-2); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); }

/* pitch box */
.pitch { margin-top: 34px; border: 4px double var(--ink); padding: 22px 26px; display: grid; grid-template-columns: 1fr 2.5fr; gap: 28px; align-items: start; }
.pitch h2 { font-weight: 700; font-size: 30px; line-height: 1.08; letter-spacing: -.01em; }
.pitch .lede { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); margin-top: 10px; }
.pitch ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.pitch li { counter-increment: s; padding: 0 18px; border-left: 1px solid var(--ink); font-size: 14.5px; line-height: 1.42; color: var(--ink-2); }
.pitch li:first-child { border-left: 0; padding-left: 0; }
.pitch li::before { content: counter(s); display: block; font: 700 34px/1 var(--serif); color: var(--ink); margin-bottom: 8px; }
.pitch li strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.pitch .go { grid-column: 2; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: -6px; }
.pitch-sm h2 { font-size: 26px; }
.btn { display: inline-block; font: 700 13px/1 var(--sans); letter-spacing: .04em; border: 1.5px solid var(--ink); padding: 12px 18px; color: var(--ink); background: var(--paper); cursor: pointer; }
.btn:hover { text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.btn[aria-busy="true"] { opacity: .6; }
.go small { font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); max-width: 620px; }
.go small a { border-bottom: 1px solid var(--ink); color: var(--ink); }

/* desks grid */
.deskgrid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 30px; margin-top: 34px; }
.desk-h { border-top: 3px solid var(--ink); padding: 7px 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.desk-h h2 { font: 800 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.desk-h span { font: 500 10.5px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.desk figure { margin-bottom: 10px; }
.desk figure img { aspect-ratio: 3 / 2; object-fit: cover; }
.desk ul, .more-desk ul { list-style: none; margin: 12px 0 0; padding: 0; }
.desk li, .more-desk li { padding: 9px 0; border-top: 1px solid var(--hair); font-weight: 580; font-size: 15px; line-height: 1.25; }
.desk li em, .more-desk li em { display: block; font: normal 600 10px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }

/* notices */
.notices { columns: 4; column-gap: calc(var(--gut) * 2); column-rule: 1px solid var(--ink); }
.notice { break-inside: avoid; padding: 11px 0 12px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.notice strong { font: 800 10.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-right: 4px; }
.notice b { color: var(--ink); font-weight: 650; }
.notices-foot { border-top: 1px solid var(--ink); margin-top: -1px; padding: 10px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; font: 400 12.5px/1.4 var(--sans); color: var(--ink-2); }
.notices-foot .more { margin-top: 0; }

/* the feed below the front page, and pages 2..N */
.river { display: grid; grid-template-columns: repeat(4, 1fr); }
.ri { padding: 12px 0 14px; border-top: 1px solid var(--hair); }
.ri p { font-size: 14px; line-height: 1.42; color: var(--ink-2); margin-top: 5px; }
.river-foot { border-top: 1px solid var(--ink); padding-top: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font: 400 12.5px/1.4 var(--sans); color: var(--ink-2); }
.river-foot a:not(.btn) { border-bottom: 1px solid var(--ink); color: var(--ink); }
.pager { border-top: 1px solid var(--ink); padding-top: 14px; display: flex; justify-content: space-between; gap: 18px; font: 700 13px/1.3 var(--sans); }
.pager a { border-bottom: 1px solid var(--ink); }
.pager span { font-weight: 400; color: var(--ink-3); }

/* archive block on the front page */
.archive { display: grid; grid-template-columns: 1fr 1.4fr 1fr; }
.archive h3 { font: 800 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.states { display: grid; grid-template-columns: repeat(5, 1fr); font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.states a, .states span { display: flex; justify-content: space-between; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--hair); margin-right: 8px; }
.states a b { border-bottom: 1px solid var(--ink); }
.states span { color: var(--ink-3); }
/* National news after the fifty states, on a line of its own. */
.states .nat { grid-column: 1 / -1; }
.states b { font-weight: 700; }
.states i { font-style: normal; }
.bydesk { list-style: none; margin: 0; padding: 0; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.bydesk li a { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.archive .src { font: 400 11px/1.4 var(--sans); color: var(--ink-3); margin-top: 8px; }

/* the archive page */
.archive-index { border-bottom: 1px solid var(--ink); padding-bottom: 12px; font: 500 13px/1.9 var(--sans); }
.archive-index b { font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-right: 8px; }
.archive-index a { margin-right: 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.archive-cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--gut) * 2); margin-top: 18px; }
.archive-cols > section { position: relative; min-width: 0; }
.archive-cols > section + section::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gut) * -1); border-left: 1px solid var(--ink); }
.acol-h { font: 800 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.archive-cols h3 { font: 700 18px/1.2 var(--serif); margin-top: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); scroll-margin-top: 16px; }
.alist { list-style: none; margin: 0; padding: 0; }
.alist li { padding: 9px 0; border-bottom: 1px solid var(--hair); }
.alist time { display: block; font: 600 10px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.alist a { font-weight: 600; font-size: 15px; line-height: 1.25; }
.alist span { display: block; font: 400 12px/1.35 var(--sans); color: var(--ink-2); margin-top: 3px; }
.empty-note { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 640px; padding: 8px 0 20px; }

/* ---------- a story ---------- */
.story-head { max-width: 860px; margin: 26px auto 0; text-align: center; }
.story-head .kicker { margin-bottom: 12px; }
.story-title { font-weight: 650; font-size: 50px; line-height: 1.04; letter-spacing: -.014em; font-variation-settings: "opsz" 72; }
.story-dek { font-size: 21px; line-height: 1.4; font-style: italic; color: var(--ink-2); margin: 16px auto 0; max-width: 720px; }
.story-byline .share-jump { color: var(--ink); border-bottom: 1px solid var(--ink); }
.story-byline { display: flex; justify-content: center; gap: 8px 22px; flex-wrap: wrap; margin-top: 18px; padding: 9px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.story-photo, .story-grid { max-width: 1036px; margin-left: auto; margin-right: auto; }
.story-photo { margin-top: 22px; }
.story-photo img { max-height: 690px; object-fit: cover; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; margin-top: 26px; }
.story-body { max-width: 680px; font-size: 19px; line-height: 1.58; width: 100%; }
.story-body > p + p { margin-top: 1em; }
.story-body > h2 { font-weight: 700; font-size: 24px; line-height: 1.2; margin: 1.5em 0 .6em; }
.pull { margin: 1.4em 0; padding: 14px 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pull p { font-weight: 560; font-size: 27px; line-height: 1.22; }
.pull footer { font: 600 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }
.story-rail { position: relative; }
.story-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: -28px; border-left: 1px solid var(--ink); }
.factbox { border-top: 3px solid var(--ink); padding-top: 10px; }
.factbox h2, .more-desk h2, .about-story h2 { font: 800 11px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.factbox dl { margin: 10px 0 0; }
.factbox dl div { padding: 8px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.factbox dt { font: 600 10px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.factbox dd { margin: 0; font: 500 13.5px/1.4 var(--sans); overflow-wrap: anywhere; }
.factbox dd a, .fact-guide a { border-bottom: 1px solid var(--ink); }
/* Sector News: the sources and the organizations named, where a story about one organization has its facts. */
.sources ol, .mentions ul { list-style: none; margin: 10px 0 0; padding: 0; }
.sources li, .mentions li { padding: 8px 0; border-top: 1px solid var(--hair); font: 500 13.5px/1.4 var(--sans); overflow-wrap: anywhere; }
.sources li a, .mentions li a { border-bottom: 1px solid var(--ink); }
.sources li span, .mentions li span { display: block; margin-top: 2px; font: 600 10px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mentions li b { display: block; font-weight: 700; }
.mentions h2 .heart { display: inline-block; width: 1.1em; height: .96em; margin-right: .5em; vertical-align: -.1em; fill: var(--act); }
.mentions li a { display: inline-block; margin-top: 3px; }
.mentions { margin-top: 26px; }
.fact-guide { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ink); font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.fact-guide a { color: var(--ink); font-weight: 700; }
.more-desk { margin-top: 26px; border-top: 3px solid var(--ink); padding-top: 10px; }
.about-story { margin-top: 2em; padding-top: 12px; border-top: 1px solid var(--ink); font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.about-story p { margin-top: 8px; }
.about-story a { color: var(--ink); border-bottom: 1px solid var(--ink); }
/* Sharing and citing, after the story. Buttons are dressed as the links beside them. */
.share { margin-top: 2em; padding-top: 12px; border-top: 1px solid var(--ink); font: 400 14px/1.5 var(--sans); }
.share h2 { font: 800 11px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.share ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 700; }
.share ul + h2 { margin-top: 20px; }
.share a, .share button { color: var(--ink); border-bottom: 1px solid var(--ink); }
.share button { font: inherit; font-weight: 700; background: none; border-width: 0 0 1px; border-style: solid; padding: 0; cursor: pointer; }
.share a:hover, .share button:hover { text-decoration: none; border-bottom-width: 2px; }
.share .cite { margin-top: 8px; font: 400 16px/1.5 var(--serif); color: var(--ink-2); overflow-wrap: anywhere; }
.share .cite + p { margin-top: 8px; }
.share-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.badge-kit { margin-top: 18px; border: 1px solid var(--ink); font: 400 13.5px/1.45 var(--sans); }
.badge-kit summary { cursor: pointer; padding: 11px 14px; font-weight: 700; }
.badge-kit-in { padding: 0 14px 14px; }
.badge-kit-in img { width: 240px; margin: 4px 0 12px; }
.badge-kit-in p { color: var(--ink-2); margin-bottom: 10px; }
.badge-kit-in label { display: block; font: 700 10px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin: 10px 0 4px; }
.badge-kit-in textarea { width: 100%; font: 12px/1.45 ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--ink); border: 1px solid var(--hair); padding: 8px; resize: vertical; background: var(--paper); }
.badge-note { margin-top: 10px; }

/* the editorial rules */
.rules .story-head { text-align: left; margin-left: 0; }
.rules .story-dek { margin-left: 0; }
.rules-body { max-width: 680px; font-size: 18px; line-height: 1.55; margin-top: 18px; }
.rules-body h2 { font: 800 12px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin: 28px 0 8px; padding-top: 10px; border-top: 1px solid var(--ink); }
.rules-body ol { margin: 0; padding-left: 1.3em; }
.rules-body li + li { margin-top: 6px; }
.rules-body a { border-bottom: 1px solid var(--ink); }

/* footers */
.foot { margin-top: 40px; border-top: 4px double var(--ink); padding-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.foot .fplate { font-family: var(--plate); font-size: 30px; line-height: 1; white-space: nowrap; }
.foot p { font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); }
.foot p + p { margin-top: 6px; }
.foot p a { border-bottom: 1px solid var(--hair); color: var(--ink); }
.footer { max-width: 1280px; margin: 0 auto; padding: 14px 24px 28px; border-top: 1px solid var(--hair); font: 400 12px/1.6 var(--sans); color: var(--ink-3); }
.footer a { color: var(--ink-2); border-bottom: 1px solid var(--hair); }

/* ---------- the submission form (/herald/submit/) ---------- */
.submit { max-width: 760px; }
.submit .story-head { text-align: left; margin-left: 0; }
.submit .story-dek { margin-left: 0; }
.submit-rules { margin-top: 22px; border: 4px double var(--ink); padding: 16px 20px; font: 400 15.5px/1.5 var(--serif); }
.submit-rules h2 { font: 800 11px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.submit-rules ul { margin: 10px 0 0; padding-left: 1.1em; }
.submit-rules li + li { margin-top: 7px; }
.submit-rules a, .submit-nojs a, .submit-done a { border-bottom: 1px solid var(--ink); }
.submit-nojs { margin-top: 20px; font: 400 17px/1.5 var(--serif); }
.step { margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--ink); }
.step h2 { font: 800 12px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--ink); border-radius: 50%; font: 700 12px/1 var(--sans); letter-spacing: 0; }
.field { margin: 16px 0 0; border: 0; padding: 0; min-width: 0; }
.field > label:not(.btn), .field legend { display: block; font: 600 14px/1.35 var(--sans); margin-bottom: 6px; padding: 0; }
.submit-form input[type="text"], .submit-form input[type="email"], .submit-form textarea { width: 100%; font: 400 17px/1.45 var(--serif); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 9px 11px; }
.submit-form textarea { resize: vertical; min-height: 6.5em; }
.submit-form input:focus-visible, .submit-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.row { display: flex; gap: 10px; align-items: stretch; }
.row input { flex: 1; min-width: 0; }
.hint { font: 400 14px/1.45 var(--sans); color: var(--ink-2); margin-top: 6px; }
.field-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; }
.note { display: block; font: italic 400 14.5px/1.4 var(--serif); color: var(--ink-2); }
.note:empty { display: none; }
.note.bad { color: var(--ink); font-style: normal; font-weight: 600; border-left: 3px solid var(--ink); padding-left: 8px; margin-top: 6px; }
.note.warn { color: var(--ink); border-left: 1px solid var(--ink); padding-left: 8px; margin-top: 6px; }
.count { font: 500 12px/1.5 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.count.over { color: var(--ink); font-weight: 800; }
.choices { display: grid; gap: 9px; }
.choice, .check { display: flex; gap: 10px; align-items: baseline; font: 400 16.5px/1.4 var(--serif); cursor: pointer; }
.check { margin-top: 14px; }
.choice input, .check input { accent-color: var(--ink); }
.org { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--ink); }
.org-name { font: 700 17px/1.3 var(--sans); letter-spacing: .01em; }
.org-meta { font: 400 15px/1.4 var(--serif); margin-top: 4px; }
.file-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.file-field:focus-within .btn { outline: 2px solid var(--ink); outline-offset: 3px; }
.photos { list-style: none; margin: 14px 0 0; padding: 0; }
.photo { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: start; border-top: 1px solid var(--hair); padding: 14px 0; }
.photo img { width: 150px; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-fields label { display: block; font: 600 13px/1.3 var(--sans); }
.photo-fields label + label { margin-top: 8px; }
.photo-fields input { margin-top: 4px; font-size: 15px !important; padding: 7px 9px !important; }
.photo-size { display: block; font: 500 12px/1.5 var(--sans); color: var(--ink-3); margin-top: 6px; }
.photo-remove, .link-btn { font: 600 13px/1.2 var(--sans); background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 0; cursor: pointer; color: var(--ink); }
.signed-in { margin-top: 12px; font: 400 16px/1.5 var(--serif); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.send { border-top: 4px double var(--ink); padding-top: 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn-send { font-size: 15px; padding: 14px 22px; }
.btn:disabled { opacity: .6; cursor: wait; }
.submit-done { margin-top: 30px; border: 4px double var(--ink); padding: 22px 24px; font: 400 17px/1.5 var(--serif); }
.submit-done h2 { font: 700 28px/1.15 var(--serif); margin-bottom: 8px; }
.submit-done p + p { margin-top: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .mast { grid-template-columns: 1fr; gap: 12px; padding-top: 18px; }
  .mast .ear { display: none; }
  .front.has-rail { grid-template-columns: 2fr 1fr; }
  .front.has-rail > .col.rail-l { grid-column: 1 / -1; grid-row: 2; margin-top: 26px; border-top: 3px solid var(--ink); padding-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: calc(var(--gut) * 2); }
  .front.has-rail > .col.rail-l .brief { border-top: 1px solid var(--hair); padding-top: 13px; }
  .front.has-rail > .col.lead::before { display: none; }
  .founders { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .founder:nth-child(3)::before { display: none; }
  .pitch { grid-template-columns: 1fr; }
  .pitch .go { grid-column: 1; margin-top: 0; }
  .pitch ol { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .pitch li:nth-child(3) { border-left: 0; padding-left: 0; }
  .deskgrid { grid-template-columns: repeat(2, 1fr); }
  .desk::before, .desk:nth-child(4n+1)::before { display: block; }
  .desk:nth-child(2n+1)::before { display: none; }
  .notices { columns: 2; }
  .river { grid-template-columns: repeat(2, 1fr); }
  .ri::before, .ri:nth-child(4n+1)::before { display: block; }
  .ri:nth-child(2n+1)::before { display: none; }
  .archive { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .archive > div:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .archive > div:nth-child(2)::before { display: none; }
  .archive-cols { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .archive-cols > section:nth-child(3)::before { display: none; }
  .story-grid { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 40px; }
  .story-rail::before { left: -20px; }
}
@media (max-width: 720px) {
  .site-strip-in { padding: 8px 16px; }
  .site-strip-note { display: none; }
  .sheet { padding: 0 16px 32px; }
  .folio { grid-template-columns: 1fr 1fr; font-size: 10px; }
  .folio span:nth-child(2) { display: none; }
  .desks { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; column-gap: 37px; padding: 10px 0; scrollbar-width: none; }
  .desks ul { flex: none; flex-wrap: nowrap; gap: 18px; }
  .desks li { white-space: nowrap; }
  .desks ul + ul::before { left: -19px; }
  .front, .front.has-rail { grid-template-columns: 1fr; }
  .front > .col { grid-column: 1; }
  .front > .col::before, .founder::before, .desk::before, .desk:nth-child(n)::before, .archive > div::before, .ri::before, .ri:nth-child(n)::before, .archive-cols > section::before { display: none; }
  .front > .col.lead { order: 1; }
  .front > .col.second { order: 2; margin-top: 24px; border-top: 3px solid var(--ink); padding-top: 14px; }
  .front.has-rail > .col.rail-l { order: 3; grid-row: auto; grid-template-columns: 1fr; }
  .h-xl, .lead-empty .h-xl { font-size: 33px; }
  .plate { font-size: 8.2vw; }
  .plate-sm { font-size: 7.4vw; }
  .body { columns: 1; }
  .founders, .deskgrid { grid-template-columns: 1fr; row-gap: 28px; }
  .founder .ph { aspect-ratio: 3 / 2; }
  .pitch { padding: 18px; }
  .pitch ol { grid-template-columns: 1fr; gap: 16px; }
  .pitch li { border-left: 0; padding: 0; }
  .notices { columns: 1; }
  .river { grid-template-columns: 1fr; }
  .archive, .archive-cols { grid-template-columns: 1fr; }
  .states { grid-template-columns: repeat(4, 1fr); }
  .story-title { font-size: 34px; }
  .story-dek { font-size: 18px; }
  .story-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .story-body { font-size: 18px; }
  .story-rail::before { display: none; }
  .pull p { font-size: 23px; }
  .foot { grid-template-columns: 1fr; gap: 10px; }
  .footer { padding: 14px 16px 24px; }
  .photo { grid-template-columns: 96px minmax(0, 1fr); }
  .photo img { width: 96px; }
  .photo-remove { grid-column: 2; justify-self: start; }
  .row { flex-direction: column; }
  .row .btn { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}