/* Institute layer over the shared ventriloquism.org tokens.
   Institutional, not browse-y: more air, longer measure, fewer entry points.

   ⭐ ONE DEFINITION PER SELECTOR. This file grew in passes — original layout, density pass,
   mobile audit, V2 architecture, brass hairline — and each pass re-declared the selectors it
   wanted to change instead of editing them in place. That left 25 selectors defined two,
   three, even four times at global scope, where the last one silently wins and every earlier
   one is dead text that still reads as though it were live. Three bugs had already been
   chased back to it: book captions stuck at 10.72px, two different h2 designs on one page,
   and two different body colours. Consolidated 8 Sep 2026 to the values that were actually
   rendering. When you change something here, EDIT THE RULE. Do not append a new one further
   down: the next reader cannot tell which of your two rules is the live one. */

.brand-text{font-family:var(--serif);font-size:1.32rem;font-weight:600;letter-spacing:.005em;
  color:var(--ink);text-decoration:none}
.brand-text:hover{color:var(--brass)}
.nav a.here{color:var(--brass);font-weight:600}
.nav a{padding-block:2px}

.lede{max-width:66ch;font-size:1.05rem;line-height:1.6;color:var(--ink-soft)}
/* Block padding plus an explicit inline gutter. A `padding` shorthand alone zeroed the .wrap
   gutter and left headings sitting 20px left of every other line on the page.
   No border-bottom: the brass hairline at the foot of this file carries the section rhythm
   now, and a rule a few pixels above the first mark read as a doubled divider. */
.pagehead{padding:2rem 0 1.05rem;padding-inline:var(--gutter);margin-bottom:1.5rem}
.pagehead h1{font-family:var(--serif);font-size:clamp(1.85rem,3.7vw,2.5rem);line-height:1.12;
  margin:0 0 .55rem}
.pagehead .kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;
  font-size:.75rem;color:var(--brass);margin:0 0 .8rem;font-weight:600}

/* max-width:none deliberately releases the old centred 68ch stripe from site.css. Pages use
   `class="wrap prose"`, so this also cancels .wrap's cap — .wrap.prose near the foot of this
   file puts the page grid back. Do not "fix" this to a measure; fix it there. */
.prose{max-width:none}
.prose h2{font-family:var(--serif);font-size:1.34rem;margin:1.8rem 0 .55rem;line-height:1.25}
.prose h3{font-family:var(--sans);font-size:1.02rem;letter-spacing:.01em;margin:1.25rem 0 .3rem}
.prose p,.prose li{line-height:1.62;color:var(--ink-soft)}
.prose strong{color:var(--ink)}

.creed{font-family:var(--serif);font-size:clamp(1.35rem,2.9vw,1.85rem);line-height:1.4;
  color:var(--ink);border-left:3px solid var(--brass);padding:.2rem 0 .2rem 1.5rem;
  margin:1.3rem 0;max-width:34ch}
blockquote.pull{font-family:var(--serif);font-size:1.16rem;line-height:1.6;color:var(--ink);
  border-left:3px solid var(--rule);padding-left:1.3rem;margin:1.3rem 0;max-width:var(--measure)}
blockquote.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:.85rem;
  color:var(--ink-faint);margin-top:.6rem}

.three{display:grid;gap:1.6rem;grid-template-columns:repeat(3,1fr);margin:2.4rem 0}
@media(max-width:820px){.three{grid-template-columns:1fr}}
.three .t{border-top:2px solid var(--brass);padding-top:.9rem}
.three .t h3{font-family:var(--serif);font-size:1.2rem;margin:0 0 .4rem}
.three .t p{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin:0}

/* ⚠ ORDER-SENSITIVE. This rule must stay ABOVE `.three,.progs,.give,.people{margin:1.5rem 0}`
   further down, which is what actually sets the grid's margin. The 2.4rem here is the
   fallback for anything that stops matching that list. */
.progs{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);margin:2.4rem 0}
@media(max-width:820px){.progs{grid-template-columns:1fr}}
.prog{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.4rem 1.5rem}
.prog h3{font-family:var(--serif);font-size:1.18rem;margin:0 0 .45rem}
.prog h3 a{color:var(--ink);text-decoration:none}.prog h3 a:hover{color:var(--brass)}
.prog p{margin:0;font-size:.95rem;line-height:1.62;color:var(--ink-soft)}

.stat{display:flex;gap:2.4rem;flex-wrap:wrap;margin:1.3rem 0;padding:1.05rem 0;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.stat div{min-width:9rem}
.stat b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--ink)}
.stat span{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)}

.people{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);margin:1.8rem 0}
@media(max-width:820px){.people{grid-template-columns:1fr}}
.person{border-top:1px solid var(--rule);padding-top:.9rem}
.person h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 .2rem}
.person .role{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brass);
  margin:0 0 .5rem;font-weight:600}
.person p{font-size:.92rem;line-height:1.6;margin:0;color:var(--ink-soft)}

.give{display:grid;gap:1.2rem;grid-template-columns:repeat(3,1fr);margin:2rem 0}
@media(max-width:820px){.give{grid-template-columns:1fr}}
.give .g{border:1px solid var(--rule);border-radius:var(--r);padding:1.3rem;background:var(--card)}
.give .g h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 .4rem}
.give.give-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.give.give-2{grid-template-columns:1fr}}

.note{background:var(--field);border:1px solid var(--field-edge);border-radius:var(--r);
  padding:1rem 1.2rem;font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:1.3rem 0;
  max-width:var(--measure)}
.foot{--foot-bg:#bf1e2e;border-top:none;margin-top:2.6rem;padding:1.9rem 0 2.2rem;
  background:var(--foot-bg);color:#fff}
.foot .foot-org,.foot .foot-links{color:rgba(255,255,255,.92)}
.foot .foot-fine{color:rgba(255,255,255,.78)}
.foot strong{color:#fff;font-weight:600}
.foot-links a{display:inline-block;padding-block:3px;color:#fff;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.45)}
.foot-links a:hover{text-decoration-color:#fff}
.foot-in{display:grid;gap:.9rem}
.foot-org{margin:0;font-size:.93rem;line-height:1.6}
.foot-links{margin:0;font-size:.9rem}
.foot-fine{margin:0;font-size:.82rem;color:var(--ink-faint);max-width:60ch}

/* Wordmark. The supplied lockup is ~2000x600 with generous white space baked in, so it is
   sized on height and given a little optical lift rather than being boxed. */
.brandmark{height:30px;width:auto;display:block}
@media(max-width:700px){.brandmark{height:23px}}
/* The mark is black type + brand red. In dark mode invert only the black by lifting
   luminance, keeping the red: a straight invert would turn #bf1e2e cyan. */
@media(prefers-color-scheme:dark){.brandmark{filter:invert(1) hue-rotate(180deg) saturate(1.15)}}

/* Figures with a job. Freddy speaks for the Institute; Dusty keeps its history.
   Both are given a caption naming the role, because an unlabelled puppet photo is
   decoration and a named one is a member of staff. */
.withfig{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.4rem;align-items:center}
/* In a hero the heading already carries the top margin, so the block does not need its own. */
.vi-hero .withfig .vi-copy>:first-child{margin-top:0}
.vi-hero .withfig .creed{margin-bottom:0}
/* The three role words in the home-page creed carry the positioning, so they get the accent rather than an italic slant. */
.creed i{font-style:normal;color:var(--brass)}

@media(max-width:900px){.withfig{grid-template-columns:1fr}}
figure.fig{margin:0;max-width:230px}
figure.fig.plain{max-width:240px}
figure.fig img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:var(--shadow)}
figure.fig.plain img{border-radius:0;box-shadow:none}
figure.fig figcaption{font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--ink-faint);
  margin-top:.7rem}
figure.fig figcaption b{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--ink);
  margin-bottom:.15rem}
figure.fig figcaption .role{display:block;color:var(--brass);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;font-size:.7rem;margin-bottom:.3rem}

figure.fig.wide{max-width:560px;margin:1.5rem 0}
figure.fig.wide img{border-radius:var(--r)}
figure.fig.wide figcaption{max-width:56ch}

/* Timeline — a story, not a defence. The year sits in its own rail so each entry is one
   line deep, not two. */
ol.timeline{list-style:none;margin:1.5rem 0;padding:0;border-left:2px solid var(--rule)}
ol.timeline li{position:relative;display:grid;grid-template-columns:6.2rem minmax(0,1fr);
  gap:.9rem;padding:0 0 .85rem 1.3rem}
@media(max-width:620px){ol.timeline li{grid-template-columns:1fr;gap:.1rem}}
ol.timeline li::before{content:"";position:absolute;left:-6px;top:.55rem;width:10px;height:10px;
  border-radius:50%;background:var(--brass)}
ol.timeline b{font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);display:block;margin:0;padding-top:.2rem}
ol.timeline p{margin:0;line-height:1.68;color:var(--ink-soft);max-width:72ch}

/* The shelf. A shelf, not a wall: eight covers in a row you can take in at a glance, aligned
   on HEIGHT rather than width, so a portrait trim sits beside a square one without either
   being distorted or the captions going ragged. Flex, not grid — the earlier grid version
   and its 820px column rule are gone, they had been inert since this became a flex row. */
.shelf{display:flex;flex-wrap:wrap;gap:.8rem;margin:1rem 0 1.5rem;align-items:flex-end}
.shelf .bk{margin:0;width:122px;display:flex;flex-direction:column;justify-content:flex-end}
.shelf .bk img{width:auto;height:118px;max-width:100%;margin:0 auto;display:block;
  border-radius:4px;box-shadow:var(--shadow)}
.shelf .bk figcaption{font-size:.78rem;line-height:1.4;color:var(--ink-faint);margin-top:.45rem}
.shelf .bk.soon img{opacity:.97;outline:1px dashed var(--rule);outline-offset:3px}
.shelf .bk .yr{display:block;color:var(--brass);font-weight:600;letter-spacing:.06em}
.shelf-note{font-size:.86rem;color:var(--ink-faint);margin:-.6rem 0 1.6rem}

ul.want{max-width:var(--measure);padding-left:1.1rem}
ul.want li{margin-bottom:.6rem;line-height:1.66}
ul.want b{color:var(--ink)}

/* ═══ DENSITY PASS ═══
   The pages were a 68ch stripe centred in an 1120px shell: a narrow column of text floating
   in dead space, with book covers the size of dinner plates. Content now uses the width of
   the page — a main column plus a rail that is always occupied — and the vertical rhythm is
   roughly 40% tighter. The pass's type and spacing values are folded into the base rules
   above; only this grid-margin rule, which spans four selectors at once, remains separate. */
.three,.progs,.give,.people{margin:1.5rem 0}

/* Main column + rail. The rail carries the pictures and the quick facts, so the right
   half of the page is doing work instead of sitting empty. */
.dual{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:2.6rem;align-items:start}
@media(max-width:900px){.dual{grid-template-columns:1fr;gap:1.5rem}}
.dual .main>:first-child{margin-top:0}
/* ⭐ ONE TYPE SYSTEM, NOT TWO. Measured 8 Sep 2026: h2 inside .dual rendered SANS at 25.5px
   while h2 inside .prose rendered SERIF at 21.4px, and body copy inside .dual was full
   near-black (#14171f, the same colour as its own headings) while .prose body was softened to
   --ink-soft. Two heading designs and two body colours were running on the same page, which is
   what made the site read as a wall of black: nothing was ever lighter than anything else.
   The palette did not need a third colour, it needed the tone it already had applied evenly. */
.dual .main p,.dual .main li{max-width:74ch;color:var(--ink-soft)}
.dual .main h2{font-family:var(--serif);font-size:1.34rem;line-height:1.25;font-weight:600;
  margin:1.8rem 0 .55rem;color:var(--ink)}
.dual .main h3{font-family:var(--sans);font-size:1.02rem;letter-spacing:.01em;
  margin:2rem 0 .5rem;color:var(--ink)}
.dual .main>h2:first-child,.dual .main>h3:first-child{margin-top:0}
.rail{display:grid;gap:1.15rem;align-content:start}
@media(max-width:900px){.rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rail{grid-template-columns:1fr}}
.rail figure{margin:0}
.rail figure img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:var(--shadow)}
.rail figcaption{font-size:.76rem;line-height:1.45;color:var(--ink-faint);margin-top:.45rem}
/* Rail captions carry a name and a role, same as the figure captions do. */
.rail figcaption b{display:block;font-family:var(--serif);font-size:1rem;color:var(--ink);
  margin-bottom:.1rem}
.rail figcaption .role{display:block;color:var(--brass);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;font-size:.75rem}
.rail .card{border-top:2px solid var(--brass);padding-top:.65rem}
.rail .card h3{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .45rem;font-weight:600}
.rail .card p{font-size:.86rem;line-height:1.5;margin:0 0 .45rem;color:var(--ink-soft)}
.rail .card p:last-child{margin-bottom:0}
.rail .card ul{margin:0;padding-left:1.05rem;font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.rail .card ul li{margin-bottom:.3rem}

/* Directors read as people, not as three narrow columns of text. Photo beside the bio. */
ul.board{list-style:none;margin:1.4rem 0 2rem;padding:0;display:grid;gap:1.5rem}
ul.board li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.6rem;align-items:start;
  border-top:1px solid var(--rule);padding-top:1.2rem}
@media(max-width:620px){ul.board li{grid-template-columns:96px minmax(0,1fr);gap:1.1rem}}
ul.board img,ul.board .noface{width:100%;aspect-ratio:1;border-radius:var(--r);display:block;
  object-fit:cover;box-shadow:var(--shadow)}
ul.board .noface{background:var(--field);border:1px solid var(--field-edge);box-shadow:none;
  display:grid;place-items:center;font-family:var(--serif);font-size:1.9rem;color:var(--ink-faint)}
ul.board h3{font-family:var(--serif);font-size:1.28rem;margin:0 0 .15rem}
ul.board .role{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--brass);
  font-weight:600;margin:0 0 .6rem}
ul.board p{margin:0;line-height:1.62;color:var(--ink-soft);max-width:70ch}
ul.board p + p{margin-top:.72rem}
ul.board .role + p{margin-top:0}
ul.board .credit{display:block;margin-top:.5rem;font-size:.72rem;color:var(--ink-faint)}

/* Two photographs side by side inside the main column. */
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0 1.4rem}
@media(max-width:620px){.twoup{grid-template-columns:1fr}}
.twoup figure{margin:0}
.twoup img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:var(--shadow)}
.twoup figcaption{font-size:.8rem;line-height:1.45;color:var(--ink-faint);margin-top:.45rem}

/* A face beside the words that belong to it. */
.voice{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.1rem;align-items:start;margin:1.3rem 0}
@media(max-width:560px){.voice{grid-template-columns:64px minmax(0,1fr);gap:.85rem}}
.voice img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:var(--shadow);display:block}
.voice blockquote.pull{margin:0}

/* ── Mobile masthead ──
   The shared header is a single flex row with the nav pushed right by margin-left:auto.
   On a phone that wraps into a ragged column beside the logo and ate roughly 620px, so
   the whole first screen was navigation before a word of the page. Stack it instead:
   wordmark on its own line, nav as a tight wrapped row underneath. */
@media (max-width:760px){
  .masthead-in{flex-direction:column;align-items:flex-start;gap:.45rem;padding-block:6px}
  .nav{margin-left:0;width:100%;gap:.55rem .95rem;row-gap:2px}
  .nav a{font-size:13.5px;padding-block:7px}
  .brand{padding-block:5px}
  .brandmark{height:26px}
  /* Kicker was 11.52px, under the 12px floor, and it is uppercase with wide tracking,
     which reads smaller still. */
  .pagehead .kicker{font-size:.78rem}
  .foot-links a{display:inline-block;padding-block:4px}
}
@media (max-width:400px){
  .nav a{font-size:12.5px}
  .brandmark{height:22px}
}
/* Below ~460px a 96px portrait beside a bio leaves about 30 characters per line, which
   is too narrow to read a paragraph in. Put the portrait above the name instead. */
@media (max-width:460px){
  ul.board li{grid-template-columns:1fr;gap:.7rem}
  ul.board img,ul.board .noface{width:88px}
}
/* An open appeal inside a timeline entry: this is the archive doing its job in public. */
ol.timeline p.ask{background:var(--field);border:1px solid var(--field-edge);border-radius:var(--r);
  padding:.85rem 1rem;margin-top:.7rem;font-size:.92rem;line-height:1.6}

/* ═══ V2 ARCHITECTURE (handoff deck) ═══ */

/* Call-to-action rows. The deck marks primary and secondary CTAs on nearly every section. */
.ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 .2rem}
.btn{display:inline-block;background:var(--brass);color:#fff;text-decoration:none;font-weight:600;
  font-size:.93rem;padding:.62rem 1.15rem;border-radius:var(--r);border:1px solid var(--brass);
  line-height:1.3}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--brass)}
.btn.ghost:hover{background:var(--field)}

/* The one-million goal. Stated as a block, not a paragraph. */
.goal{font-family:var(--serif);font-size:clamp(1.3rem,2.7vw,1.75rem);line-height:1.4;color:var(--ink);
  border-left:3px solid var(--brass);padding:.35rem 0 .35rem 1.4rem;margin:1.4rem 0;max-width:30ch}

/* The four-part promise of the Adventure. */
.promise{display:grid;gap:1rem;margin:1.2rem 0 1.6rem}
.promise .pr{border-top:2px solid var(--brass);padding-top:.75rem}
.promise .pr b{font-family:var(--serif);font-size:1.12rem;display:block;margin-bottom:.3rem}
.promise .pr p{margin:0;line-height:1.62;color:var(--ink-soft)}

/* The Leslie Roberts appeal, and any other open call for help. */
.ask-box{background:var(--field);border:1px solid var(--field-edge);border-radius:var(--r);
  padding:1.2rem 1.35rem;margin:1.6rem 0}
.ask-box h3{font-family:var(--serif);font-size:1.2rem;margin:0 0 .55rem}
.ask-box p{font-size:.95rem;line-height:1.62;color:var(--ink-soft)}
.ask-box .ctas{margin-top:1rem}

/* Archive numbers must be dated, per the deck's editorial note, since they cannot be served live. */
.asof{font-size:.82rem;color:var(--ink-faint);margin:-.6rem 0 1.4rem;font-style:italic}

/* Each program carries a short declarative line under its number. */
.prog-line{font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin:.2rem 0 .8rem}
.prog .more{margin:.55rem 0 0;font-size:.9rem}
.prog .more a{color:var(--brass);font-weight:600;text-decoration:none}
.prog .more a:hover{text-decoration:underline}
a.mailto{font-family:var(--serif);font-size:1.15rem;color:var(--brass);font-weight:600}

/* Five program cards in a two-column grid orphans the fifth with a hole beside it.
   Let the last card span the row so the shape reads as deliberate, and tighten the
   boxes, which were standing much taller than their content needed. */
.progs .prog{padding:1.15rem 1.25rem}
/* ⚠ margin-top here is INHERITED BEHAVIOUR, not a design choice. The cards sit inside a
   `wrap prose` section, so these headings were picking up `.prose h3`'s 1.25rem top margin,
   which won only because it was declared further down the file than `.prog h3`. Pinned here
   so consolidation changed nothing visible. It puts a 20px gap above the heading inside an
   already-padded card, which is almost certainly not wanted — deleting this one declaration
   closes the gap, but that is a design decision, not a refactor, so it is left for Jimmy. */
.progs .prog h3{font-size:1.12rem;margin-top:1.25rem;margin-bottom:.35rem}
.progs .prog p{font-size:.93rem;line-height:1.55}
.progs .prog:last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:820px){.progs .prog:last-child:nth-child(odd){grid-column:auto}}

/* Program cards were 612px wide at two-across, which is far wider than a card of three
   lines needs. Three across brings them to about 400px and gives 3 + 2, which reads
   better than 2 + 2 + a full-width straggler. The span rule from the two-column layout
   is cancelled. */
@media(min-width:960px){
  .progs{grid-template-columns:repeat(3,1fr)}
  .progs .prog:last-child:nth-child(odd){grid-column:auto}
}

/* ⛔ BUG FIX. The density pass set `.prose{max-width:none}` to kill an old centred 68ch
   stripe. But pages use `class="wrap prose"`, and `.prose` is declared AFTER `.wrap`, so
   max-width:none was cancelling the WRAP's 1120px cap and its margin-inline:auto too.
   Every `.wrap prose` section broke out of the page grid: starting at 20px instead of
   180px and running 1400px wide against 742px for the `.dual` sections beside them. On
   /programs/ that put sections 1 and the closing block visibly out of line with sections
   2 to 5.
   Restore the wrap, and give text the same measure as the .dual main column so every
   section lines up. Grids (.progs, .give, .shelf, .promise) keep the full wrap width. */
.wrap.prose{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.prose > p,
.wrap.prose > h1, .wrap.prose > h2, .wrap.prose > h3,
.wrap.prose > ul, .wrap.prose > ol,
.wrap.prose > blockquote, .wrap.prose > .note, .wrap.prose > .goal{max-width:742px}

/* Sections were butting straight together, so a CTA button sat directly against the next
   section's heading. */
main > section + section{margin-top:2.4rem}

/* ── Brass hairline above every h2, site-wide (8 Sep 2026) ────────────────
   Jimmy asked whether the site needed another colour. It did not: it needed the red it already
   has to do more work. A SHORT 34x2px mark rather than a full-width border, because at a 742px
   measure a full-width red rule above every heading is far too much red. This reads as a mark,
   not a divider. Same vocabulary as `.three .t{border-top:2px solid var(--brass)}`.

   Selector is `main h2` rather than a container list on purpose: /programs/ alone splits its
   six h2s across `.dual .main` and `.wrap.prose`, and scoping to one container marked only two
   thirds of the page.

   The .pagehead bottom rule was dropped with it — it sat a few pixels above the first brass
   mark and the two read as a doubled divider. That drop now lives in the single .pagehead
   rule at the top of this file, where it belongs; it was written down here originally only
   because .pagehead was defined three separate times and a later declaration was the one
   reliable way to win. .pagehead keeps its margin, so nothing collapses. */
main h2::before{
  content:"";display:block;width:34px;height:2px;border-radius:1px;
  background:var(--brass);margin-bottom:.75rem}
main h2{margin-top:2.4rem}
main .dual .main>h2:first-child,
main .wrap.prose>h2:first-child{margin-top:0}