/* Palmetto Democratic Professionals, the landing page. The brand book's type and colors: Fraunces, bold and half soft,
   for headlines and big figures; Libre Franklin for everything else; Blue, Dome, white and black. Dome is
   type only on blue; on white it is a shape. Both faces are served from this site (SIL Open Font License);
   Fraunces is cut to the one weight and softness the page sets, with its optical sizes kept. */
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-latin.woff2) format("woff2"); font-weight: 600 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-latin-ext.woff2) format("woff2"); font-weight: 600 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces Card"; src: url(/fonts/fraunces-card.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Libre Franklin"; src: url(/fonts/librefranklin-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Franklin"; src: url(/fonts/librefranklin-latin-ext.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root { --blue: #1D3C8F; --dome: #7FC0AC; --line: #8E9CC0; --rule: #D5DCE6; --quiet: #4A5670; --gutter: 56px;
  --on-blue: #C6CEE3;   /* secondary words on blue, 6.4 to 1 */
  --tint: #EFF1F7;      /* the book's blue at 7 percent on white: a line under the pointer, a white button's hover */
  --edge: calc((100vw - min(100vw, 1360px)) / 2 + var(--gutter)); }   /* from the screen's left edge to the text's */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font: 400 18px/1.55 "Libre Franklin", system-ui, sans-serif; color: #000; background: #fff; }
h1, h2, h3, .cn, .num { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-variation-settings: "SOFT" 50; letter-spacing: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
input, select, button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn { display: inline-block; border: 0; border-radius: 0; cursor: pointer; background: var(--blue); color: #fff; font: 600 18px/1 "Libre Franklin", sans-serif; padding: 20px 30px; text-decoration: none; }
.btn:hover { background: #16306f; }
.btn.line { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.clock :focus-visible, .foot :focus-visible { outline-color: var(--dome); }   /* on the blue */
[hidden] { display: none !important; }

/* the first screen: the mission, and the bench on the map */
.hero { min-height: min(100vh, 920px); display: flex; flex-direction: column; }
.hero header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: var(--head-top); }
.logo { width: 270px; margin-left: calc(270px * -0.03227); }
/* One beat of space sets the first screen's words, measured between ink edges: the logo to the headline two beats,
   the band to the lead one, the lead to its rows half of one, the rows to the button one, and on one column the button
   to the map two; the window's top to the logo is one. A beat is 36 px on a desktop window and narrows on a short one (24 px at a laptop's 768), so the
   button stays in the first screen; on a phone it is 24 px. The pixels taken off in each gap are how far the ink sits
   inside its box: the logo's 8.5 px of clear space at its head and 8.4 px at its foot, the headline's 5.8 px above its tallest letters, and
   the lead's 6.6 px above and 3.8 px below at 21 px (5.7 and 3.3 at a phone's 18). */
:root { --beat: 24px; }
@media (min-width: 761px) { :root { --beat: clamp(24px, 9.09svh - 45.8px, 36px); } }
.stage { flex: 1; display: grid; grid-template-columns: 450px 1fr; column-gap: 64px; row-gap: calc(2 * var(--beat)); align-items: start;
         padding-top: calc(2 * var(--beat) - 14.2px); padding-bottom: calc(2 * var(--beat)); }
/* Beside the words, the map's top stands on the headline's capitals, 8.2 px under the headline's own top at 44 px, and
   its count line stands on the button's foot: the board takes the words' height, the map the height left over its count
   line (1.257 is the map's width over its height), and where the column is too narrow for that, the map and its count
   line sit together on the button's line. The words hold the first row's height while a county's list is open in
   their place, and a longer list runs on into the second row, so the map never moves when a county is picked. The
   map's right edge stays under Sign in. */
@media (min-width: 1101px) {
  .stage { grid-template-rows: auto 1fr; row-gap: 0; align-items: stretch; align-content: start; }
  .copy { display: contents; }
  .intro { grid-area: 1 / 1; }
  .intro[hidden] { display: block !important; visibility: hidden; }
  .county { grid-area: 1 / 1 / 3 / 2; align-self: start; }
  .stage > .board { grid-area: 1 / 2; container-type: size; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; }
  .stage > .board > * { width: min(100cqw, calc((100cqh - 56.2px) * 1.257)); }
  .stage > .board > .under { align-items: last baseline; }   /* a count that wraps keeps its last line on the line */
}
.hero h1 { color: var(--blue); font-size: 44px; line-height: 1.09; }
.hero .intro .btn { margin-top: var(--beat); padding-inline: 38px; }   /* its words on the rows' words' left edge (their 38 px column) */
.county h2 { color: var(--blue); font-size: 44px; line-height: 1.08; margin-top: 18px; }
.county .back { background: none; border: 0; cursor: pointer; font: 600 15px/1.4 "Libre Franklin", sans-serif; color: var(--blue); padding: 6px 0; }
.county .cnum { font: 600 17px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); margin-top: 6px; }
.people { list-style: none; margin-top: 22px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font: 600 15px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); }
.pager .turn { display: flex; gap: 8px; }
.pager button { width: 40px; height: 40px; border: 0; background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); font: 600 18px/1 "Libre Franklin", sans-serif; cursor: pointer; }
.pager button:hover:not(:disabled) { background: var(--blue); color: #fff; }
.pager button:disabled { opacity: .3; cursor: default; }
.people li { display: flex; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule); }
.people li:last-child { border-bottom: 1px solid var(--rule); }
.people b { display: block; font: 600 17px/1.3 "Libre Franklin", sans-serif; }
.people i { display: block; font: 400 15px/1.35 "Libre Franklin", sans-serif; font-style: normal; color: var(--quiet); }
.people i a { color: var(--blue); }
.face { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font: 700 14px "Libre Franklin", sans-serif; overflow: hidden; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.people .links { margin-top: 2px; }
.people .links a { text-decoration: none; border-bottom: 1px solid var(--line); }
.people .links a:hover { border-bottom-color: var(--blue); }
.people li.more { display: block; font: 500 15px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); }
.county .btn { margin-top: 4px; }
.county .todir { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font: 600 16px/1.4 "Libre Franklin", sans-serif; color: var(--blue); text-underline-offset: 4px; }
.county .todir::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: rotate(45deg); }   /* the county's people lead on to the directory (November 7, 2026) */
.county .locked, .county .empty { font: 500 19px/1.45 "Libre Franklin", sans-serif; margin: 22px 0 28px; max-width: 420px; }

.mapbox { position: relative; }
.map { width: 100%; height: auto; display: block; overflow: visible; }
.map path { fill: #fff; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }   /* one true pixel at any size: on white the state is drawn by these lines alone */
.map path.on { fill: var(--dome); stroke: #fff; }
.map path:hover { fill: #B9DDD2; }
.map path.on:hover { fill: #6AB39C; }
.map path.open, .map path.open:hover { fill: var(--blue); stroke: #fff; }
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; border: 0; padding: 0; background: none; cursor: pointer; }
.pin .face { width: 32px; height: 32px; font-size: 11.5px; box-shadow: 0 0 0 2.5px #fff; }
.pin .n { position: absolute; right: -11px; top: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); font: 700 11px/20px "Libre Franklin", sans-serif; text-align: center; }
.pin.count .face { font-size: 13px; }
.pin:hover .face, .pin:focus-visible .face, .pin.open .face { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--blue); }
.pin.open { z-index: 2; }
.under { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 14px; }
.tally { font: 600 16px/1.4 "Libre Franklin", sans-serif; }
.tally b { font: 700 26px/1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); margin-right: 2px; }
.find select { border: 0; border-bottom: 2px solid var(--blue); background-color: transparent; padding: 6px 4px; font: 600 15px "Libre Franklin", sans-serif; color: var(--blue); border-radius: 0; cursor: pointer; }

/* putting your name down, with the card beside it */
.in { padding: 112px 0; scroll-margin-top: 0; }
/* /profile: the home page built once more with its body marked, every section but the entry's hidden (November 7, 2026) */
.pp .hero > :not(.site), .pp .things, .pp #money, .pp #countdown, .pp #conference { display: none; }   /* the header lives in the hero, so the hero stays and its other parts go */
.pp .hero { min-height: 0; }
.pp .in { padding-top: 48px; }
.pp.out .aside, .pp.out .done { display: none; }   /* signed out on /profile: the card waits for the member */
.pp.out .formside > .btn { margin-top: 8px; }
.in .wrap { display: grid; grid-template-columns: 1fr 400px; gap: 80px; align-items: start; }
.in h2 { color: var(--blue); font-size: 44px; line-height: 1.1; margin-bottom: 30px; }
/* Two fields to a row only where each column holds its label and its longest value on one line (12rem); on a tablet,
   where the form beside the card is 240 to 380 px wide, the fields stack. */
.f { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(12rem, calc(50% - 12px))), 1fr)); gap: 20px 24px; }
.f .full { grid-column: 1 / -1; }
.f label, .f .lbl { display: block; font: 600 14px/1.4 "Libre Franklin", sans-serif; margin-bottom: 6px; }
.f input:not([type=checkbox]):not([type=file]), .f select { width: 100%; height: 52px; border: 0; border-bottom: 2px solid var(--blue); background-color: #fff; padding: 0 14px; border-radius: 0; font-size: 17px; }
.f input::placeholder { color: #5d6782; }   /* 5.6 to 1 on white */
.f .bad input, .f .bad select, .f .bad .drop { border-color: #B3261E; }
.err { font-size: 14px; color: #B3261E; margin-top: 6px; min-height: 0; }
.err:empty { display: none; }
.drop { display: flex !important; align-items: center; gap: 16px; min-height: 76px; border: 2px dashed var(--line); padding: 10px 14px; background: #fff; cursor: pointer; margin: 0 !important; }
.drop:hover, .drop.over { border-color: var(--blue); }
.drop .thumb { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fff center / cover no-repeat; }
.drop .thumb:empty:not([style]) { display: none; }
.drop .say { font: 400 16px/1.4 "Libre Franklin", sans-serif; }
.drop .say b { color: var(--blue); font-weight: 600; }
#f-photo:focus-visible + .err, .f .full:focus-within .drop { outline: 3px solid var(--blue); outline-offset: 2px; }
.check { display: flex !important; gap: 12px; align-items: center; font: 400 16px/1.4 "Libre Franklin", sans-serif !important; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--blue); }
.f > .full > .check { margin-top: 4px; }   /* its box the form's gap under the links, as each label stands */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.act { margin-top: 8px; }
/* a member's profile (November 7, 2026): About as a textarea in the fields' own style, its hint under its label */
.f textarea { display: block; width: 100%; min-height: 148px; border: 0; border-bottom: 2px solid var(--blue); border-radius: 0; background: #fff; padding: 12px 14px;
  font: 400 17px/1.5 "Libre Franklin", sans-serif; resize: vertical; field-sizing: content; }   /* it grows with what is typed, from five lines */
.f .hint { margin: -2px 0 8px; font-size: 15px; line-height: 1.45; color: var(--quiet); }
/* a member's skills, all that apply (November 7, 2026): under What you do, the head and the hint as About's stand, the
   boxes in two columns, each box at the top of its words so a name that wraps hangs under itself */
.f fieldset.skills { border: 0; margin: 0; padding: 0; min-width: 0; }
.f fieldset.skills legend { padding: 0; }
.skills .ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 4px; }
.f .skills .check { align-items: flex-start; margin: 0; }
.skills .check input { flex: none; margin: 0; }
.skills .check span { padding-top: 1px; }
.use { margin-top: 8px; padding-left: 34px; font-size: 16px; line-height: 1.5; color: var(--quiet); max-width: 640px; }
.status { margin-top: 12px; font-size: 15px; color: #B3261E; }
.status:empty { display: none; }
.done { scroll-margin-top: 40px; }
.done:focus { outline: none; }
.done h2 { margin-bottom: 18px; }
.done h2 .num { color: var(--blue); }
.done p { font-size: 19px; max-width: 520px; }
.done .again { color: var(--quiet); font-size: 16px; margin-bottom: 8px; }
.done .acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* beside the form, the card and its note travel down together as the form is filled in */
@media (min-width: 761px) { .in .aside { position: sticky; top: 24px; padding-top: 6.5px; } }
.card { width: 400px; height: 500px; background: var(--blue); color: #fff; position: relative; padding: 30px 32px; overflow: hidden; }
.card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--dome); }
.card .cl { width: 196px; margin-left: calc(196px * -0.03227); }
.cp { width: 196px; height: 196px; border-radius: 50%; box-shadow: 0 0 0 5px #fff; overflow: hidden; margin: 43px 0 0 5px; background: #2E4E9F; display: grid; place-items: center; }
.cp img { width: 100%; height: 100%; object-fit: cover; }
.cp .none { font-size: 15px; color: #C9D3EA; }
.cn { font-size: 38px; line-height: 1.05; margin-top: 24px; white-space: nowrap; overflow: hidden; }
.cn.wraps { white-space: normal; overflow-wrap: anywhere; }
.cn.ph, .cd.ph { color: rgba(255, 255, 255, .62); }
.cp .ini { font: 700 64px/1 "Libre Franklin", sans-serif; color: #fff; }
.cd { font: 500 17px/1.4 "Libre Franklin", sans-serif; margin-top: 8px; }
.aside .cd { white-space: nowrap; overflow: hidden; }   /* the sign-up card's line: the page's script sets it smaller to fit (fitDoes) */
.aside .cd.wraps { white-space: normal; }   /* a line that will not fit even smaller wraps, as the name does */
.cf { font: 700 13px/1.4 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dome); margin-top: 18px; }
.aside .note { font-size: 16px; line-height: 1.5; color: #000; margin-top: 16px; max-width: 400px; }
/* the member's graphics, under their card: the card, a square post and a story, made on their own device (November 7, 2026) */
.aside .graphics { margin-top: 28px; max-width: 400px; padding-top: 22px; border-top: 1px solid var(--rule, #D6DCE8); }
.aside .graphics h3 { font-size: 22px; margin: 0 0 6px; }
.aside .graphics .hint { font-size: 15px; line-height: 1.5; color: var(--quiet); margin: 0 0 14px; }
.aside .graphics .acts { display: flex; gap: 10px; flex-wrap: wrap; }
/* a word beside a field's label, on the label's own line, so the form's rhythm holds (Phone: "Not shown publicly.", November 7, 2026) */
label small.quiet { font-weight: 400; font-size: 14px; color: var(--quiet); margin-left: 4px; }
.aside .graphics .row { font: 700 12px/1.4 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); margin: 16px 0 8px; }
.aside .graphics .hint + .row { margin-top: 0; }
.aside .graphics .btn { padding: 10px 14px; font-size: 15px; }
/* the member's own link, under their card (November 11, 2026): Dub's referral link, the link in a field with Copy on its
   row; the field is the form's own, a tint under it so it reads as something to copy rather than to type in */
.aside .bring { margin-top: 28px; max-width: 400px; padding-top: 22px; border-top: 1px solid var(--rule, #D6DCE8); }
.aside .bring h3 { font-size: 22px; margin: 0 0 6px; }
.aside .bring .hint { font-size: 15px; line-height: 1.5; color: var(--quiet); margin: 0 0 14px; }
.aside .bring .lnk { display: flex; }
.aside .bring .lnk input { flex: 1; min-width: 0; height: 52px; border: 0; border-bottom: 2px solid var(--blue); border-radius: 0; background: var(--tint); padding: 0 14px; font: 600 17px/1 "Libre Franklin", sans-serif; color: var(--blue); text-overflow: ellipsis; }
.aside .bring .lnk .btn { flex: none; height: 52px; padding: 0 20px; font-size: 17px; }
.aside .bring .count { font-size: 15px; line-height: 1.5; margin: 12px 0 0; }
.cw { position: absolute; left: 32px; bottom: 26px; font: 600 14px/1 "Libre Franklin", sans-serif; color: #fff; }

/* the foot, C, follow first (Taylor, November 9, 2026: "Let's go with C with some revision."): from the SC Democratic
   Party's footer, the channels straight under the name before any link, each named in words as Pentagram's are. The ask
   and the press's address on one baseline; the six channels run edge to edge under a rule (Threads out and YouTube in, November 10); then the one-line logo, the
   four links and the maker's mark (November 7: "PDP needs a valleynichols vega mark in the footer"). Signal is off
   until the group's link may be public ("we don't share that link until after the sign up"). */
.foot { background: var(--blue); color: #fff; padding: 56px 0 36px; border-top: 1px solid rgba(255,255,255,.25); }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot .fk { display: block; font: 700 12px/1 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dome); }
.foot .ftop { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ask press" "ch ch"; column-gap: 40px; }
.foot .fask { grid-area: ask; align-self: last baseline; }
.foot .fh { font: 700 44px/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--dome); margin-top: 14px; }
.foot .fpress { grid-area: press; align-self: last baseline; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font: 600 20px/1 "Libre Franklin", sans-serif; white-space: nowrap; }
.foot .fch { grid-area: ch; display: flex; justify-content: space-between; margin-top: 32px; border-top: 1px solid rgba(255,255,255,.28); }
.foot .fch a { display: inline-flex; align-items: center; gap: 12px; min-height: 64px; font: 600 16px/1 "Libre Franklin", sans-serif; white-space: nowrap; }
.foot .fch svg { width: 28px; height: 28px; fill: #fff; flex: none; }
.foot .fbase { display: flex; align-items: center; gap: 40px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.28); }
.foot .ln { width: 330px; margin-left: calc(330px * -0.01465); }
.foot .st { display: none; width: 220px; margin-left: calc(220px * -0.03227); }
.foot .fnav { display: flex; gap: 32px; margin-left: auto; font: 600 15px/1 "Libre Franklin", sans-serif; }
.foot .fnav a { display: inline-flex; align-items: center; min-height: 36px; white-space: nowrap; }
.foot .made { display: inline-flex; flex: none; opacity: .92; margin-right: -5px; }   /* the Vega's ink, not its box, on the right edge */
.foot .made img { width: 28px; height: 28px; display: block; }
.foot .made:hover { opacity: 1; }
/* the channels' one line stands evenly between its two rules, 36 px of space over the marks and 36 under (Taylor,
   November 11, 2026: "Fix the alignment of the social icons between the two white bars. They are not even whatsoever."):
   the links' own 18 px a side plus 18 over the row and 18 under it, where the base rule's 36 px margin had stood under the
   row alone (18 over, 54 under). The footer keeps its height. Under 900 px the channels stand on their own ruled lines. */
@media (min-width: 901px) {
  .foot .fch { padding-top: 18px; }
  .foot .fbase { margin-top: 18px; }
}
/* where the logo, the four links and the mark do not fit on one line, the links take a line of their own under the logo */
@media (max-width: 1100px) {
  .foot .fbase { flex-wrap: wrap; row-gap: 14px; }
  .foot .fnav { order: 3; width: 100%; margin-left: 0; }
  .foot .made { margin-left: auto; }
}
/* a tablet: the handle and the press's address no longer fit on one line, so the address comes after the channels, as on
   a phone; six channels do not fit one line with room between them, so they stand three across on two ruled lines */
@media (max-width: 900px) {
  .foot .ftop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ask" "ch" "press"; }
  .foot .fch { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
  .foot .fch a { min-height: 56px; border-bottom: 1px solid rgba(255,255,255,.16); }
  .foot .fpress { align-items: flex-start; justify-content: center; gap: 10px; margin-top: 28px; min-height: 48px; }
}
/* a phone, as drawn: the ask, the six two across, the press's address, the stacked logo, the four links two across */
@media (max-width: 760px) {
  .foot { padding: 40px 0 24px; }
  .foot .fh { font-size: 32px; }
  .foot .fch { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin-top: 24px; }
  .foot .fch a { min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.16); }
  .foot .fch a:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd last channel takes the whole line, so no cell stands empty */
  .foot .fch svg { width: 24px; height: 24px; }
  .foot .fpress { font-size: 18px; margin-top: 24px; }
  .foot .fbase { gap: 0; margin-top: 28px; padding-top: 22px; }
  .foot .ln { display: none; }
  .foot .st { display: block; }
  .foot .fnav { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .foot .fnav a { min-height: 44px; }
  .foot .made { padding: 8px; margin-right: -13px; }   /* a full tap, its ink on the right edge */
}

/* The dropdowns: the map's county finder and the sign-up's two. Closed, all three wear the same drawn arrow in the
   blue, in every browser. Open, where the browser lets a page style the list (Chrome and Edge from 135; Safari from
   27), the list is the book's: white, square, Libre Franklin, the blue's tint under the pointer, the chosen line in blue with a
   blue bar at its edge, the arrow turned up. Phones and tablets keep their own picker, which a thumb already knows. */
.find select, .f select { appearance: none; -webkit-appearance: none; background-size: 6px 6px; background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%); }
.find select { padding-right: 26px; background-position: right 10px center, right 4px center; }
.f select { padding-right: 40px; cursor: pointer; background-position: right 20px top 23px, right 14px top 23px; }
@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    .find select, .find select::picker(select), .f select, .narrow select, .f select::picker(select) , .narrow select::picker(select) { appearance: base-select; }
    .find select, .f select , .narrow select { display: inline-flex; align-items: center; gap: 12px; background-image: none; }
    .find select { width: 13.6em; padding-right: 4px; }
    .f select , .narrow select { padding-right: 14px; }
    .find select::picker-icon, .f select::picker-icon , .narrow select::picker-icon { content: ""; flex: none; width: 12px; height: 6px; margin-left: auto;
      background: var(--blue); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: rotate .16s ease; }
    .find select:open::picker-icon, .f select:open::picker-icon , .narrow select:open::picker-icon { rotate: 180deg; }
    /* it drops down whenever it fits below the box, and opens upward only when it does not */
    .find select::picker(select), .f select::picker(select) , .narrow select::picker(select) { position-try-order: normal; min-width: anchor-size(width); max-height: min(344px, 52vh);
      overflow-y: auto; margin: -2px 0 0; padding: 6px 0; border: 2px solid var(--blue); border-radius: 0; background: #fff; color: #000;
      box-shadow: 0 18px 36px -18px rgba(29, 60, 143, .45); scrollbar-width: thin; scrollbar-color: var(--line) transparent;
      transition: opacity .14s ease, translate .14s ease, display .14s allow-discrete, overlay .14s allow-discrete; }
    /* the finder's words sit 4px in from its rule, so its list starts 10px to the left to put the two on one edge */
    .find select::picker(select) { margin-inline-start: -10px; min-width: calc(anchor-size(width) + 10px); }
    /* the list's top edge lies on the box's own blue rule (the -2px above), so the two read as one line, never two */
    @starting-style { .find select:open::picker(select), .f select:open::picker(select) , .narrow select:open::picker(select) { opacity: 0; translate: 0 -4px; } }
    /* each line's words start on the closed box's words: 12px in from the list's 2px edge is the field's 14px */
    .find option, .f option , .narrow option { display: flex; align-items: center; min-height: 42px; padding: 9px 12px; border: 0;
      font: 400 16px/1.35 "Libre Franklin", sans-serif; color: #000; background: transparent; cursor: pointer; }
    .find option::checkmark, .f option::checkmark , .narrow option::checkmark { display: none; }
    /* one line lit at a time: the one under the pointer, or, with the pointer off the list, the one the keys are on */
    .find option:hover, .f option:hover, .narrow option:hover, .find select:not(:has(option:hover)) option:focus-visible, .f select:not(:has(option:hover)) option:focus-visible , .narrow select:not(:has(option:hover)) option:focus-visible {
      background: var(--tint); }
    .find option:focus-visible, .f option:focus-visible , .narrow option:focus-visible { outline: none; }
    .find option:checked, .f option:checked , .narrow option:checked { font-weight: 600; color: var(--blue); box-shadow: inset 4px 0 0 var(--blue); }
    /* the prompt line ("Find a county", "Pick one") reads as a prompt, never as a choice made */
    .find option[value=""], .f option[value=""] , .narrow option[value=""] { color: var(--quiet); font-weight: 400; box-shadow: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .find select::picker(select), .f select::picker(select), .narrow select::picker(select), .find select::picker-icon, .f select::picker-icon , .narrow select::picker-icon { transition: none; }
  }
}

/* the page a visitor gets when the form was sent without the page's script */
.plain { min-height: 100vh; }
.thanks { padding-top: 96px; padding-bottom: 112px; }
.thanks > * { max-width: 680px; }
.thanks h1 { color: var(--blue); font-size: 44px; line-height: 1.1; }
.thanks p, .thanks ul { margin-top: 18px; font-size: 19px; }
.thanks ul { padding-left: 1.2em; }
.thanks .btn { margin-top: 34px; }

@media (max-width: 1100px) {
  .stage { grid-template-columns: 1fr; }
  .county .locked { max-width: 560px; }
  .in .wrap { grid-template-columns: 1fr 360px; gap: 48px; }
  .card { width: 360px; height: 450px; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  .hero header { padding-top: var(--head-top); gap: 16px; }
  .logo { width: 260px; margin-left: calc(260px * -0.03227); }
  .stage { padding-top: calc(2 * var(--beat) - 12.6px); }
  .hero h1 { font-size: 33px; text-wrap: balance; }
  .county h2 { font-size: 33px; }
  .pin .n { display: none; }
  .pin .face { width: 22px; height: 22px; font-size: 8.5px; box-shadow: 0 0 0 1.5px #fff; }
  .pin.count .face { font-size: 10px; }
  .pin:hover .face, .pin:focus-visible .face, .pin.open .face { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px var(--blue); }
  .under { flex-direction: column; align-items: flex-start; gap: 12px; }
  .find, .find select { width: 100%; }
  .in { padding: 64px 0; }
  .in .wrap { grid-template-columns: 1fr; gap: 40px; }
  .in h2 { font-size: 32px; }
  .f { grid-template-columns: 1fr; }
  .card { width: 100%; max-width: 350px; height: auto; padding-bottom: 64px; }
  .cp { width: 160px; height: 160px; margin-top: 28px; }
  .cn { font-size: 32px; }
}
/* The first screen's turn: the second sentence stands a beat below the first on a field of the book's blue that runs
   in from the left edge of the screen, white on blue. When the page opens with motion allowed (html.fx, set in the
   head), the field grows out from the words' left edge and they turn from blue to white as it passes; without motion,
   or without scripts, the field is simply there. The words are always readable. */
.hero { overflow-x: clip; }
.hero h1 .s2 { display: block; width: fit-content; position: relative; isolation: isolate; margin-top: .36em; color: #fff; }
.hero h1 .s2::before, .hero h1 .s2::after { position: absolute; top: -.15em; bottom: -.09em; left: calc(-1 * var(--edge)); right: -.8em; }
.hero h1 .s2::before { content: ""; z-index: -1; background: var(--blue); }
/* a blue copy of the words over the white ones, cut back from the left as the field passes */
.hero h1 .s2::after { content: attr(data-text); content: attr(data-text) / ""; color: var(--blue); padding: .15em .8em .09em var(--edge); white-space: nowrap; clip-path: inset(0 0 0 100%); pointer-events: none; }
/* the field grows out from the words' own left edge, both ways at once: back to the screen's edge and on past "ours." */
/* one quick swipe: fast off the mark, so no thin sliver lingers at the words' edge, and slowing only in the field's
   tail past "ours.", where there are no letters left to cross */
.fx .hero h1 .s2::before { transform-origin: var(--edge) 50%; animation: band-in .56s cubic-bezier(.2, .85, .3, 1) .45s backwards; }
.fx .hero h1 .s2::after { animation: band-words .56s cubic-bezier(.2, .85, .3, 1) .45s backwards; }
@keyframes band-in { from { transform: scaleX(0); } to { transform: none; } }
@keyframes band-words { from { clip-path: inset(0 0 0 var(--edge)); } to { clip-path: inset(0 0 0 100%); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .map path { transition: none; } }

/* ---- under the first screen: the three things, the money, the countdown, the conference ---------------------------
   The browser's own surfaces in the book's colors. */
::selection { background: var(--blue); color: #fff; }
.clock ::selection { background: #fff; color: var(--blue); }
input, select { caret-color: var(--blue); }
.btn.white { background: #fff; color: var(--blue); }
.btn.white:hover { background: var(--tint); }
.clock, .things { overflow-x: clip; }
.clock .count, .clock .hire, .things h2, .things h3 { text-wrap: balance; }

/* the three things: the industry line beside one flat picture of the things you'd hold (your badge, its strap hung from
   the block's top edge; your line in the directory in front of it; the members' channel on a phone), each showing what
   the visitor types into the sign-up; the three heads and paragraphs in a row under */
.things { padding: 112px 0 104px; }
.things .top { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: center; }
.things .lead { font: 700 44px/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.things .why { font-size: 21px; line-height: 1.5; margin-top: 28px; max-width: 30em; }
.things .why a { color: var(--blue); }
.still { position: relative; height: 256px; }
.things [data-mirror].ph { color: var(--quiet); }
.still .hang { position: absolute; left: 44px; top: 0; }
.still .strap { position: absolute; left: 50%; bottom: 100%; width: 20px; height: 112px; margin-left: -10px; background: var(--blue); }
.still .strap::after { content: ""; position: absolute; left: -6px; bottom: -6px; width: 32px; height: 12px; border-radius: 3px; background: var(--line); }
.badge { display: flex; flex-direction: column; width: 152px; height: 228px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px var(--blue); }
.badge .top { flex: none; height: 64px; background: var(--blue); display: flex; align-items: center; padding: 0 14px; }
.badge .top img { width: 118px; height: auto; margin-left: calc(118px * -0.03227); }
.badge .ev { font: 700 9.5px/1.4 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); padding: 14px 14px 0; }
.badge .bn, .badge .bo { display: block; margin: 0 14px; padding-bottom: 5px; border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.badge .bn { margin-top: 18px; font: 700 18px/1.25 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: #000; }
.badge .bo { margin-top: 10px; font: 500 11px/1.4 "Libre Franklin", sans-serif; color: #000; }
.badge::after { content: ""; margin-top: auto; height: 10px; background: var(--dome); }
.phone { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; width: 128px; height: 256px; padding: 16px 13px; gap: 8px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 6px var(--blue); }
.phone .bar { display: flex; align-items: center; gap: 7px; padding: 0 0 10px; border-bottom: 1px solid var(--rule); }
.phone .pm { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; }
.phone .pm img { display: block; width: 22px; height: 22px; }
.phone .bar b { font: 700 12px/1 "Libre Franklin", sans-serif; }
.phone .joined { align-self: center; margin: 8px 0 4px; font: 600 9px/1.3 "Libre Franklin", sans-serif; color: var(--quiet); white-space: nowrap; }
.phone .msg { height: 18px; border-radius: 9px; background: var(--dome); }
.phone .msg.r { align-self: flex-end; background: var(--blue); }
.phone .w1 { width: 74%; } .phone .w2 { width: 58%; } .phone .w3 { width: 66%; } .phone .w4 { width: 80%; } .phone .w5 { width: 50%; }
.still .lrow { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 14px; width: 272px; height: 80px; padding: 0 18px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1.5px var(--blue); }
.lrow .lf { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; overflow: hidden; font: 600 15px "Libre Franklin", sans-serif; }
.lrow .lf img { width: 100%; height: 100%; object-fit: cover; }
.lrow .lt { min-width: 0; }
.lrow b, .lrow i { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow b { font: 700 20px/1.2 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: #000; }
.lrow i { font: 400 14px/1.4 "Libre Franklin", sans-serif; font-style: normal; color: var(--quiet); margin-top: 2px; }
.things .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; margin-top: 80px; }
.thing h3 { font: 700 40px/1.08 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.thing p { font-size: 18px; line-height: 1.55; margin-top: 10px; max-width: 26em; }
@media (max-width: 1100px) {
  .things .top { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
  .things .row { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
}
@media (max-width: 960px) {
  .things { padding-top: 64px; }
  .things .top { grid-template-columns: 1fr; gap: 56px; }
  .still { order: -1; width: 100%; max-width: 420px; }
  .still .strap { height: 64px; }
}
@media (max-width: 760px) {
  .things { padding: 64px 0 56px; }
  .things .top { gap: 48px; }
  .things .lead { font-size: 32px; }
  .things .why { font-size: 19px; margin-top: 20px; }
  .still { height: 232px; max-width: 360px; }
  .still .hang { left: 24px; }
  .still .strap { height: 64px; }
  .badge { width: 136px; height: 204px; }
  .badge .top { height: 56px; }
  .badge .top img { width: 104px; margin-left: calc(104px * -0.03227); }
  .badge .ev { font-size: 8px; letter-spacing: .12em; padding-top: 12px; }
  .badge .bn { margin-top: 14px; font-size: 16px; }
  .badge .bo { display: none; }
  .phone { width: 108px; height: 232px; }
  .still .lrow { width: 244px; height: 72px; gap: 12px; padding: 0 14px; }
  .lrow i { font-size: 13px; }
  .lrow .lf { width: 40px; height: 40px; }
  .lrow b { font-size: 18px; }
  .things .row { grid-template-columns: 1fr; gap: 40px; margin-top: 56px; }
  .thing h3 { font-size: 32px; }
}

/* the countdown: the days left said as one sentence, counted from the visitor's own day; the hiring line under it; the
   early states in the order they vote, each date beside its state */
.clock { background: var(--blue); color: #fff; }
.clock .count { font: 700 68px/1.04 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; }
.clock .n { font-variant-numeric: lining-nums tabular-nums; }
.clock .hire { font: 700 30px/1.22 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; }
.clock .next { margin-top: 18px; font-size: 20px; line-height: 1.5; color: var(--on-blue); max-width: 30em; }
.clock .btn { margin-top: 30px; }
.cal { list-style: none; display: grid; grid-template-columns: 1fr; margin-top: 64px; }
.cal li { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: baseline; padding: 14px 0 15px; border-top: 1px solid rgba(255, 255, 255, .32); }
.cal li.first { border-top: 3px solid #fff; }
.cal .d { display: block; font: 700 15px/1.4 "Libre Franklin", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--dome); }
.cal .s { display: block; font: 500 18px/1.4 "Libre Franklin", sans-serif; color: var(--on-blue); }
.cal li.first .s { font: 700 32px/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: #fff; }
/* the sources, behind one small line: "Sources" in small capitals with a chevron, opening a white card over the page,
   so nothing above or below it moves. The browser opens it by a tap, a click or a key; site.js opens it under a
   pointer. */
.src { grid-column: 1 / -1; justify-self: start; position: relative; margin-top: 26px; }
.src summary { display: inline-flex; align-items: center; column-gap: 9px; min-height: 44px; cursor: pointer; list-style: none;
  font: 600 12px/1.3 "Libre Franklin", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--on-blue); }
.src summary::-webkit-details-marker { display: none; }
.src summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid var(--dome); border-bottom: 2px solid var(--dome); transform: rotate(45deg); }
.src[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.src summary:hover { color: #fff; }
.src-card { position: absolute; left: 0; top: 100%; z-index: 3; display: grid; row-gap: 6px; width: max-content; max-width: min(100vw - 2 * var(--gutter), 27em);
  padding: 12px 14px; list-style: none; border-radius: 2px; background: #fff; color: #000; font: 400 13px/1.45 "Libre Franklin", sans-serif; outline: 1px solid var(--line); outline-offset: -1px; }
.src-card a { color: var(--blue); text-underline-offset: 3px; text-decoration-color: var(--line); }
.src-card a:hover { text-decoration-color: var(--blue); }

/* the countdown's photograph as tall as the block, out to the page's left edge (the conference block sets the Vista to
   its right edge); the count, the lines and the calendar beside it on one left edge */
.clock.edge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.clock.edge .moment { position: relative; margin: 0; min-height: 100%; background: #16306f; }
.clock.edge .moment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clock.edge .words { padding: 112px max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter))) 104px 64px; }
.clock.edge .hire { margin-top: 36px; }
/* On a desktop the block fits one screen (Taylor, November 10, 2026: "The sections on the conference and the early voting
   are far too tall on desktop."): the photograph takes a third, so the words' column is wide enough for the hiring line on
   two lines and each state on one; the space above and below follows the window's height. No type is made smaller. */
@media (min-width: 1101px) {
  .clock.edge { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .clock.edge .words { padding-top: clamp(56px, 11svh - 40px, 112px); padding-bottom: clamp(48px, 11svh - 48px, 104px); }
  .clock.edge .hire { margin-top: 28px; max-width: 24em; }
  .clock.edge .cal { margin-top: 40px; max-width: 720px; }
  .clock.edge .cal li { padding: 11px 0 12px; }
  .clock.edge .src { margin-top: 10px; }
}
@media (max-width: 1100px) {
  .clock.edge { grid-template-columns: 1fr; }
  .clock.edge .moment { aspect-ratio: 3 / 2; min-height: 0; }
  .clock.edge .words { padding: 64px var(--gutter) 72px; }
}
@media (max-width: 760px) {
  .clock.edge .moment { aspect-ratio: 4 / 3; }
  .clock.edge .words { padding: 48px var(--gutter) 56px; }
  .clock.edge .hire { margin-top: 28px; }
  .cal { margin-top: 44px; }
  .cal li { grid-template-columns: 116px 1fr; gap: 12px; padding: 12px 0 13px; }
  .cal .s, .cal li.first .s { font-size: 17px; }
}

@media (max-width: 1100px) {
  .clock .count { font-size: 60px; }
}
@media (max-width: 760px) {
  .clock .count { font-size: 40px; }
  .clock .hire { font-size: 24px; }
  .clock .next { font-size: 17px; }
}

/* who is behind the association, under the sign-up's head, in the three things' body type */
.in .who { font-size: 18px; line-height: 1.55; max-width: 36em; margin: -12px 0 32px; }
@media (max-width: 760px) {
  .in .who { font-size: 17px; margin: -10px 0 28px; }
}

/* under the mission, "We do three things:" with each thing on a line of its own */
.hero .do { margin-top: calc(var(--beat) - 2.6px); max-width: 440px; }
.hero .do-lead { font: 500 21px/1.45 "Libre Franklin", sans-serif; }
.hero .do-list { list-style: none; }
@media (max-width: 760px) { .hero .do-lead { font-size: 18px; } }
/* numbered rows: a numeral, the thing's word large in the book's blue, a few plain words under it, a rule between each */
.hero .do-list { margin-top: calc(var(--beat) / 2 - 3.8px); counter-reset: do; border-bottom: 1px solid var(--line); }
.hero .do-list li { counter-increment: do; display: grid; grid-template-columns: 38px 1fr; align-items: baseline; padding: 13px 0 15px; border-top: 1px solid var(--line); }
.hero .do-list li::before { content: counter(do); grid-row: 1; font: 700 22px/1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.hero .do-list b { grid-column: 2; font: 700 32px/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.hero .do-list li > span { grid-column: 2; margin-top: 4px; font: 500 17px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); }
@media (max-width: 760px) {
  .hero .do-list { margin-top: calc(var(--beat) / 2 - 3.3px); }
  .hero .do-list li { grid-template-columns: 32px 1fr; padding: 11px 0 13px; }
  .hero .intro .btn { padding-inline: 32px; }
  .hero .do-list b { font-size: 27px; }
  .hero .do-list li > span { font-size: 16px; }
}

/* the 2027 Conference: the days lead, beside the photograph of the Vista at the block's full height, out to the page's edge */
.conf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.conf .side { padding: 112px 72px 96px max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter))); }
.conf h2 { color: var(--blue); font-size: 40px; line-height: 1.1; max-width: 14em; text-wrap: balance; }
.conf .lead { margin-top: 18px; font: 500 21px/1.45 "Libre Franklin", sans-serif; max-width: 26em; text-wrap: pretty; }
.days3 { margin-top: 40px; }
.days3 .day { border-top: 2px solid var(--blue); padding: 16px 0 26px; }
.days3 .day > b { display: block; font: 700 88px/0.95 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.days3 .agenda { list-style: none; margin-top: 16px; }
.days3 .agenda li { font: 400 19px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); padding: 7px 0; border-top: 1px solid var(--rule); }
.days3 .agenda li:first-child { border-top: 0; padding-top: 0; }
.days3 .agenda b { font-weight: 600; color: #000; }
.days3 .day.after > b { font-size: 40px; line-height: 1.05; }
.days3 .agenda a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.days3 .agenda a b { color: var(--blue); }
.days3 .agenda a:hover { text-decoration-thickness: 2px; }
.conf .sub { margin-top: 14px; font: 700 19px/1.45 "Libre Franklin", sans-serif; color: var(--blue); max-width: 26em; text-wrap: pretty; }
.conf .btn { margin-top: 28px; }
.conf .shot { margin: 0; position: relative; min-height: 100%; }
.conf .shot picture, .conf .shot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.conf .shot img { display: block; object-fit: cover; object-position: 72% 50%; }
/* On a desktop the block fits one screen (Taylor, November 10, 2026): the Vista takes a third, as the countdown's
   photograph does; Thursday and Friday stand side by side, Thursday as wide as its longest line, and Saturday's line
   stands under Thursday, its foot on Friday's; the space above and below follows the window's height. No type is made smaller.
   From 1400 px up: under it Friday's column is narrower than "Friday" at 88 px, so the days stay one under another. */
@media (min-width: 1400px) {
  .conf { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* the Vista in its third set from its right edge, so the bank tower stands whole with sky on both sides and the skyline
     reads as the subject (Taylor, November 10, 2026: "recenter the Columbia skyline on the page. Like move the Truist
     building the left."); drawn at its height, never past its size */
  .conf .shot img { object-position: 100% 50%; }
  .conf .side { padding-top: clamp(56px, 11svh - 40px, 112px); padding-bottom: clamp(48px, 11svh - 48px, 96px); padding-right: 64px; }
  .conf .lead { max-width: 40em; }
  .days3 { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 56px; margin-top: 32px; }
  .days3 .day { padding-bottom: 20px; }
  .days3 .day:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
  .days3 .agenda li { padding: 6px 0; }
  .days3 .day.after { grid-column: 1; grid-row: 2; align-self: end; display: flex; align-items: baseline; column-gap: 20px; padding: 14px 0 20px; }
  .days3 .day.after .agenda { margin-top: 0; }
  .conf .sub { margin-top: 18px; max-width: none; }
  .conf .btn { margin-top: 24px; }
}
@media (max-width: 1100px) {
  .conf .side { padding: 88px 48px 80px var(--gutter); }
  .days3 .day > b { font-size: 68px; }
}
/* a tablet's column is narrower than "Thursday" at 68px */
@media (min-width: 761px) and (max-width: 900px) {
  .days3 .day > b { font-size: 60px; }
}
@media (max-width: 760px) {
  .conf { display: flex; flex-direction: column; }
  .conf .shot { order: -1; min-height: 0; aspect-ratio: 4 / 5; }
  .conf .side { padding: 48px var(--gutter) 56px; }
  .conf h2 { font-size: 30px; }
  .conf .lead { font-size: 18px; margin-top: 12px; }
  .days3 { margin-top: 28px; }
  .days3 .day > b { font-size: 60px; }
  .days3 .day.after > b { font-size: 32px; }
  .days3 .agenda li { font-size: 17px; }
  .conf .sub { font-size: 17px; }
  .conf .btn { margin-top: 22px; }
}

/* ---- the money in political work, on white: its Sources line set for a light ground ------------------------------ */
.money { padding: 112px 0 104px; overflow-x: clip; }
/* on a desktop the space above and below follows the window's height, as the countdown's and the conference's do, so the
   block fits one screen at a laptop's 900 (Taylor, November 10, 2026: "Everything fits on one screen.") */
@media (min-width: 1101px) { .money { padding: clamp(56px, 11svh - 40px, 112px) 0 clamp(48px, 11svh - 48px, 104px); } }
.money h2 { color: var(--blue); font-size: 44px; line-height: 1.1; }
.money h2 span { display: block; text-wrap: balance; }
.money .dek { margin-top: 14px; font: 500 21px/1.45 "Libre Franklin", sans-serif; max-width: 38em; text-wrap: pretty; }
.money .src summary { color: var(--quiet); }
.money .src summary:hover { color: var(--blue); }
.money .src summary::after { border-color: var(--blue); }
@media (max-width: 760px) {
  .money { padding: 64px 0 56px; }
  .money h2 { font-size: 32px; }
  .money .dek { font-size: 18px; margin-top: 10px; }
}

/* three dollars: each race's dollar is one bar in two pieces, what was paid here in the book's blue and what
   was paid out of state on paper, each with its cents large; along the paper piece's foot, the states that got the most
   of it, each at its own width. The three stand on one left edge, so the blue steps out from 18 to 81. A place too
   narrow for a state's name wears its short form (AP's); on a phone the states are a line of words under the bar. */
.money-d .wrap { position: relative; }
.money-d .dek { max-width: none; }
.dollars { list-style: none; margin-top: 12px; display: grid; row-gap: 18px; }
/* the key over the bars: a dimension line the width of a bar, so the cents read as parts of one dollar, never as a
   percent or a total */
.scale { display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: 40px; margin-top: 36px; }
.scale .rule { grid-column: 2; position: relative; display: flex; justify-content: center; align-items: center; height: 18px; }
.scale .rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--blue); }
.scale .rule::after { content: ""; position: absolute; inset: 2px 0; border-left: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue); }
.scale .rule span { position: relative; padding: 0 12px; background: #fff; font: 600 15px/1 "Libre Franklin", sans-serif; color: var(--blue); }
.dollar { display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: 40px; }
.dollar .who { display: flex; flex-direction: column; justify-content: center; }
.dollar .who b { font: 700 34px/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.dollar .who span { margin-top: 6px; font: 500 16px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); }
.bill { display: flex; height: 156px; }
.pc { flex: var(--c) 1 0; min-width: 0; container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; cursor: default; }
.pc.here { background: var(--blue); color: #fff; }
.pc.out { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--line); margin-left: 4px; }
.pc > .bx { flex: 1; display: flex; flex-direction: column; padding: 12px 12px 0; }
.pc > .bx i { font: 600 14px/1.25 "Libre Franklin", sans-serif; font-style: normal; }
.pc.out > .bx i { color: #000; }
.pc > .bx b { margin-top: 10px; font: 700 68px/.9 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; font-variant-numeric: lining-nums tabular-nums; }
.pc .ab { display: none; }
.to { flex: none; display: flex; height: 56px; border-top: 1.5px solid var(--line); }
.st { flex: var(--c) 1 0; min-width: 0; container-type: inline-size; display: flex; }
.st + .st { border-left: 1.5px solid var(--line); }
.st .bx { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 12px; font: 600 15px/1.25 "Libre Franklin", sans-serif; color: #000; white-space: nowrap; }
.st .bx b { font: 700 18px/1.15 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); font-variant-numeric: lining-nums tabular-nums; }
.st:last-child .bx { color: var(--quiet); }
.st .sa { display: none; }
@container (max-width: 84px) { .st .bx.bx .sn { display: none; } .st .bx.bx .sa { display: inline; } }
@container (max-width: 136px) { .st .bx.long .sn { display: none; } .st .bx.long .sa { display: inline; } }
@container (max-width: 48px) { .st .bx.bx { padding-left: 5px; font-size: 13px; line-height: 18.75px; letter-spacing: -.01em; } .st .bx.bx b { font-size: 15px; line-height: 20.7px; } }
@container (max-width: 34px) { .st .bx.bx { padding-left: 3px; } }
.to.few { display: block; padding: 8px 12px 0; font: 600 13px/1.35 "Libre Franklin", sans-serif; color: var(--quiet); text-wrap: balance; }
.went { display: none; }
.money-d .tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 8px)); width: max-content; max-width: 19em; padding: 9px 12px; background: #fff; color: #000;
  font: 500 14px/1.4 "Libre Franklin", sans-serif; outline: 1px solid var(--line); outline-offset: -1px; border-radius: 2px; pointer-events: none; }
/* when the block comes into view with motion allowed, the blue draws out from the left edge, row after row, and the
   paper piece follows; without motion, or without scripts, the dollars are simply there */
.fx .money-d.arm .pc.out { opacity: 0; }
/* the blue is a layer of its own that grows from the left edge, and the words on it fade in: a move and a fade cost the
   browser nothing to draw again, where cutting the piece's own box back (a clip) had it redraw each frame and drop a few
   while a hand scrolled through */
.fx .money-d.arm .pc.here { position: relative; background: none; }
.fx .money-d.arm .pc.here::before { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.fx .money-d.arm .pc.here > .bx { position: relative; opacity: 0; }
.fx .money-d.arm.seen .pc.out { opacity: 1; transition: opacity .4s ease calc(.5s + var(--r) * .14s); }
.fx .money-d.arm.seen .pc.here::before { transform: none; transition: transform .7s cubic-bezier(.2, .85, .3, 1) calc(var(--r) * .14s); }
.fx .money-d.arm.seen .pc.here > .bx { opacity: 1; transition: opacity .3s ease calc(.22s + var(--r) * .14s); }
@media (min-width: 761px) {
  /* a narrow blue piece sets its cents smaller and keeps them on the baseline of the paper piece's cents beside it, 94.5 px
     under the bar's top (November 7, 2026: with 16 px over them, Congress's 16 cents stood 12 px higher than its 84, on two
     levels, from 768 to 1024 px and at 1280) */
  @container (max-width: 150px) { .pc > .bx b { font-size: 46px; margin-top: 28px; } }
}
@media (max-width: 1100px) {
  .dollar { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .dollar .who { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 14px; }
  .dollar .who span { margin-top: 0; }
  .dollars { row-gap: 30px; }
  .scale { grid-template-columns: minmax(0, 1fr); }
  .scale .rule { grid-column: 1; }
  .pc .full { display: none; }
  .pc .ab { display: inline; }
  .to.few { display: none; }
  .went { font: 500 14px/1.45 "Libre Franklin", sans-serif; color: var(--quiet); text-wrap: pretty; }
  .went.few { display: block; }
}
@media (max-width: 760px) {
  .scale { margin-top: 28px; }
  .dollars { margin-top: 10px; row-gap: 28px; }
  .scale .rule span { font-size: 14px; }
  .dollar .who b { font-size: 27px; }
  .dollar .who span { font-size: 15px; }
  .bill { height: 96px; }
  .pc.out { margin-left: 3px; }
  .pc > .bx { justify-content: space-between; padding: 9px 7px 10px; }
  .pc > .bx i { font-size: 12px; }
  .pc > .bx b { font-size: 34px; margin-top: 0; }
  @container (max-width: 76px) { .pc > .bx b { font-size: 26px; } }
  @container (max-width: 58px) { .pc > .bx b { font-size: 22px; } }
  .to { display: none; }
  .went { display: block; }
}

/* The member sign-in: Sign in at the top corner, the sheet over the page, the signed-in
   line over the member's own entry, and their row marked on the map. The ways in are white with each company's own
   mark, as LinkedIn and Dribbble set them, so neither competes with the page's blue button. */
.signin.top { font: 600 17px/1 "Libre Franklin", sans-serif; color: var(--blue); text-decoration: none; padding: 12px 0 12px 12px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex: none; }
.signin.top:hover span, .signin.top:hover { text-decoration: underline; text-underline-offset: 4px; }
.signin.top .face { width: 34px; height: 34px; font-size: 12px; }
.in .as { font: 500 17px/1.5 "Libre Franklin", sans-serif; color: var(--quiet); margin: -14px 0 30px; }
.in .as b { color: #000; font-weight: 600; }
.in .look { font: 600 17px/1.5 "Libre Franklin", sans-serif; color: #000; margin: -18px 0 30px; padding-left: 14px; border-left: 3px solid var(--blue); }
/* a signed-in member on the home page: one line and the button to their profile, /profile, in place of the form */
.in .home-in p { font-size: 18px; line-height: 1.55; max-width: 560px; }
.in .home-in .btn { margin-top: 24px; }
.people .later { display: block; color: var(--blue); font-style: normal; font-weight: 600; }
.in .as .out { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* the member's own mark is one thing, a Dome ring drawn inside the face's own width, so a column of faces keeps its edge:
   on their face in the corner, in their county's list and on the map; "Saved." stands beside their name after a save */
.signin.top .face, .people li.me .face { outline: 3px solid var(--dome); outline-offset: -3px; }
.pin.me .face { outline: 2px solid var(--dome); outline-offset: -2px; }
.people .just { margin-left: 10px; color: var(--blue); font-weight: 600; }

/* the sheet is drawn from the brand book's sign: Blue, the welcome in white Fraunces, white controls; the page behind it
   dims to black, never to a tint of its own */
.sheet { margin: auto; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; padding: 44px 40px 40px; background: var(--blue); color: #fff; }
.sheet::backdrop { background: rgba(0, 0, 0, .5); }
.sheet h2 { color: #fff; font-size: 36px; line-height: 1.1; margin-bottom: 28px; padding-right: 48px; }
.sheet .x { position: absolute; top: 42px; right: 40px; width: 44px; height: 44px; padding: 0; border: 0; background: none; text-align: right; font: 400 32px/44px "Libre Franklin", sans-serif; color: #fff; cursor: pointer; }
.sheet .x:hover { color: var(--dome); }
.sheet :focus-visible { outline-color: #fff; }
.sheet .idp { box-shadow: none; }
.sheet .idp:hover { box-shadow: inset 0 0 0 2px var(--dome); }
.sheet .or { color: #DCE3F2; }
.sheet .or::before, .sheet .or::after { background: rgba(255, 255, 255, .35); }
.sheet .mail label { color: #fff; }
.sheet .mail input { background: #fff; border-bottom-color: var(--dome); }
.sheet .mail .btn { background: #fff; color: var(--blue); }
.sheet .mail .btn:hover { background: var(--tint); }
.sheet .mail .err { color: #FFD9D4; }
.idp { display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; margin-bottom: 12px; background: #fff; color: #000; text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--rule); font: 600 17px/1 "Libre Franklin", sans-serif; }
.idp:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.or { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; font: 500 15px/1 "Libre Franklin", sans-serif; color: var(--quiet); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.mail label { display: block; font: 600 14px/1.4 "Libre Franklin", sans-serif; margin-bottom: 6px; }
.mail input { width: 100%; height: 52px; border: 0; border-bottom: 2px solid var(--blue); background: #fff; padding: 0 14px; border-radius: 0; font-size: 17px; }
.mail .btn { width: 100%; margin-top: 14px; text-align: center; }
.sheet .sent p { font-size: 18px; line-height: 1.5; }
.sheet .sent .to { font-weight: 600; word-break: break-all; }
.sheet .sent p + p { margin-top: 8px; color: #DCE3F2; }
.sheet .sent:focus { outline: none; }
@media (max-width: 760px) {
  .signin.top { font-size: 16px; }
  .in .as { margin: -10px 0 26px; font-size: 16px; }
  .in .look { margin: -14px 0 26px; font-size: 16px; }
  .sheet { width: 100vw; max-width: none; max-height: none; margin: auto 0 0; padding: 40px 20px 32px; }
  .sheet h2 { font-size: 30px; margin-bottom: 22px; }
  .sheet .x { top: 34.5px; right: 20px; }
}
@media (max-width: 760px) { .signin.top > span:not(.face) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.f .del { margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--rule); font: 500 16px/1.5 "Libre Franklin", sans-serif; }
.f .del button { background: none; border: 0; padding: 0; cursor: pointer; font: 600 16px/1.5 "Libre Franklin", sans-serif; text-decoration: underline; text-underline-offset: 3px; color: var(--quiet); }
.f .del .sure span { color: #000; margin-right: 10px; }
.f .del .yes { color: #B3261E; margin-right: 14px; }
.f .del .no { color: var(--blue); }
/* Stay in touch (Taylor, November 7, 2026, about 9:43 p.m.: "C", the pick first): the line under the first screen's button,
   the sheet it opens, and the footer's two additions. On a desktop the line hangs under the button outside the words' box,
   so the map's count line still stands on the button's foot (his October 26 ruling); on one column it follows the button,
   one beat under it. The sheet is the sign-in's own (.sheet): its first step six plain white choices, its second the pick
   with Change beside it, one sentence for that pick, the email and a white button; every piece on the sheet's left edge. */
.hero .intro { position: relative; }
.touchline { font: 500 17px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); margin-top: calc(var(--beat) - 4px); }
.touchline a { color: var(--blue); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
@media (min-width: 1101px) { .touchline { position: absolute; left: 0; top: 100%; white-space: nowrap; } }
.sheet.stay h2 { margin-bottom: 26px; }
.sheet.stay .lede { color: #DCE3F2; font: 400 17px/1.45 "Libre Franklin", sans-serif; margin: -14px 0 20px; }
.stay .lbl { display: block; color: #fff; font: 600 15px/1.2 "Libre Franklin", sans-serif; margin-bottom: 10px; }
.stay input.em { display: block; width: 100%; height: 52px; border: 0; border-bottom: 2px solid var(--dome); background: #fff; padding: 0 14px; font: 400 17px "Libre Franklin", sans-serif; color: #000; border-radius: 0; }
.stay .err { color: #FFD9D4; font: 600 15px/1.4 "Libre Franklin", sans-serif; }
.stay .err:not(:empty) { margin-top: 10px; }
.stay .go { display: block; width: 100%; margin-top: 14px; background: #fff; color: var(--blue); text-align: center; }
.stay .go:hover { background: var(--tint); }
.stay .go:disabled { cursor: progress; }
.stay .press { margin-top: 22px; color: #DCE3F2; font: 500 15px/1.4 "Libre Franklin", sans-serif; }
.stay .press a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.stay .tq h2 { margin-bottom: 0; padding-right: 72px; }   /* the close box clear of the thanks */
.stay .tq:focus { outline: none; }
.sheet.pickfirst .big { display: grid; gap: 8px; }
.sheet.pickfirst .big button { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 0 20px; border: 0; background: #fff; color: var(--blue); font: 600 18px/1.2 "Libre Franklin", sans-serif; text-align: left; cursor: pointer; }
.sheet.pickfirst .big button::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: rotate(45deg); }
.sheet.pickfirst .big button:hover { background: var(--tint); }
.sheet.pickfirst .chose { display: flex; align-items: baseline; gap: 14px; margin: -10px 0 12px; color: #fff; font: 600 17px/1.3 "Libre Franklin", sans-serif; }
.sheet.pickfirst .chose button { background: none; border: 0; padding: 0; color: #DCE3F2; font: 500 15px "Libre Franklin", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sheet.pickfirst .chose button:hover { color: #fff; }
.sheet.pickfirst .fits { color: #DCE3F2; font: 400 17px/1.45 "Libre Franklin", sans-serif; margin-bottom: 24px; }
@media (max-width: 760px) { .sheet.stay .lede { margin-top: -10px; } }
/* /signin and /privacy: the logo, then a narrow column of words */
body.plain > header { padding-top: var(--head-top); }
.small { padding-top: 56px; padding-bottom: 96px; }
.small > * { max-width: 640px; }
.small h1 { color: var(--blue); font-size: 44px; line-height: 1.1; margin-bottom: 28px; }
.small .ways { max-width: 420px; }
.small .mail input { background: #fff; }
.small .failed { color: #B3261E; margin: -12px 0 22px; font-weight: 600; }
.small .prose h2 { font: 700 22px/1.3 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); margin: 30px 0 6px; }
.small .prose p { font-size: 18px; line-height: 1.55; }
.small .upd { margin-top: 36px; font-size: 15px; color: var(--quiet); }
@media (max-width: 760px) { .small { padding-top: 36px; padding-bottom: 64px; } .small h1 { font-size: 33px; } }

/* /who: his letter on a white sheet and, beside it, his founding member card with his firm and links (his professional
   card, the card every member gets); on a phone the card follows the letter */
.whop header.top { padding-top: var(--head-top); }
.whop h1 { color: var(--blue); font-size: 44px; line-height: 1.1; }
.wb { padding: 48px 0 112px; }
.wb .wrap { display: grid; grid-template-columns: minmax(0, 820px) 400px; gap: 48px; justify-content: center; align-items: start; }
.wb .note { background: #fff; box-shadow: 0 0 0 1px var(--line); padding: 72px 88px 64px; }   /* the letter's sheet, drawn by its edge on the white page, in the page's rule colour (the second cold reader, November 3: in the light rule "a faint hairline box") */
.letter { margin-top: 30px; }
.letter p { font-size: 19px; line-height: 1.65; }
.letter p + p { margin-top: 18px; }
.letter a, .in .who a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }
.wb .acts { margin-top: 36px; }
.card.full { height: auto; padding-bottom: 46px; }
.card .cp picture, .card .cp picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .co { margin-top: 2px; }
.card .ck { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .3); display: grid; row-gap: 8px; }
.card .ck a { font: 600 16px/1.4 "Libre Franklin", sans-serif; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; overflow-wrap: anywhere; }
.card .ck a:hover, .card .ck a:focus-visible { text-decoration-color: var(--dome); }
@media (min-width: 901px) { .wb .who-card { position: sticky; top: 24px; } }
@media (max-width: 1100px) {
  .wb .wrap { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .wb .note { padding: 56px 56px 48px; }
}
@media (max-width: 900px) {
  .wb .wrap { grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 40px; }
  .wb .note { width: 100%; }
}
@media (max-width: 760px) {
  .whop h1 { font-size: 33px; }
  .wb { padding: 24px 0 72px; }
  .wb .note { width: auto; padding: 36px 24px 32px; margin: 0 calc(var(--gutter) * -1); }
  .wb .acts .btn { width: 100%; text-align: center; }
  .letter p { font-size: 17px; }
  .wb .who-card { justify-self: stretch; margin: 0 calc(24px - var(--gutter)); }   /* on the letter's text edges, as wide as the button */
  .wb .who-card .card { max-width: none; }
}

/* ---- the board page, /board (src/board.py): a recruiting page, not a leadership page; seats, not people. In order: his
   words and the button; the five seats on his photographs of each region, as cards, each a link into the application;
   the regions, small; the three offices; the application, which reuses the sign-up's form (.f). Two ideas, one per
   branch, differ in how the regions and the offices are set: A the band (Knight Foundation), B the grid (AIGA). The
   critic's pass of October 30: his words in black, Regular, one size to a block, on the cards' columns; one rule colour;
   the region tones each a shape on white. */
.bp-hero .top { padding-top: var(--head-top); }
.bp-top { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 80px; align-items: center; padding-top: 56px; padding-bottom: 104px; }
.bp-top h1 { color: var(--blue); font-size: 56px; line-height: 1.05; text-wrap: balance; }
/* every paragraph of his on the page at one size, the book's Regular, in black, on one line-height (the critic: a Medium
   lede over a SemiBold gray ask; the control session, October 30: one body size for all of his paragraphs), and below
   1101 px on one reading measure, about 70 characters */
.bp { --measure: 594px; }
.bp-top .lede, .bp-top .ask, .bp-how .hlead, .regions .rsay, .bp-how .osay { font: 400 18px/1.5 "Libre Franklin", sans-serif; color: #000; text-wrap: pretty; }
/* One vertical system for the whole page (Taylor, November 2, 2026: "the elements in each section see to have slightly
   off-spacing between paragraphs, headlines and other elements"; each kind of gap had been set where its block was built,
   24 to 35 px boxes that read 37 to 63 px apart once the type's own room was counted). Every gap is read ink to ink, as
   vn-align-check reads it: a line's baseline to the capitals of the next, a box by its edge, a rule by its line. The unit,
   --lh, is the page's own line, his paragraphs' 27 px (18 px on 1.5; --line is the rule colour):
     --g  a line and a half (40.5): under every head; from a paragraph to what follows it (a paragraph, the button, the
          key and the map, the cards, the form); a row's rule to its first baseline
     --r  two lines (54): between the parts of a section (the logo to the first screen's head, his paragraphs to the
          seats, the seats to the first screen's foot, a section's opening paragraph to its first row, a row to the next)
     --s  four lines (108; three, 81, below 1101 px): between sections, the band's edge or the section's rule
   Each margin takes off the type's own room over its capitals and under its last baseline, from the fonts' measures
   (Fraunces' capitals are 0.7 of its size, Libre Franklin's 0.742): */
.bp { --lh: 27px; --g: calc(1.5 * var(--lh)); --r: calc(2 * var(--lh)); --s: calc(4 * var(--lh));
  --p-over: 6.64px; --p-under: 7px;        /* his paragraphs, Libre Franklin 18 on 27 */
  --h1-over: 9.8px; --h1-under: 9.8px;     /* the page's head, Fraunces 56 on 1.05 */
  --h2-over: 9.2px; --h2-under: 8.39px;    /* a section's head, Fraunces 44 on 1.1 */
  --h3-over: 5.4px; --h3-cap: 19.6px; --h3-under: 5.8px;   /* a row's head, Fraunces 28 on 1.1 */
  --k-over: 3.13px; --k-under: 5px;        /* a name in the key, "Open", a person's name: Libre Franklin 16 on 1.25 */
  --l-over: 4.61px; --l-cap: 10.39px; --l-under: 4.6px;   /* a form's label, Libre Franklin 14 on 1.4 */
  --h2-cap: 30.8px;                        /* a section's head's capitals at 44 px */
  --logo-foot: 8.4px;                      /* the logo's clear space under its ink, at 270 px wide */
  --rule-cap: calc(var(--g) - var(--h3-cap));   /* a rule to the capitals of the head under it (20.9): a row's first baseline a line and a half under its rule */
  /* inside a card, a seat's or an office's, one rhythm (the critic's seat card): the picture to the title's capitals
     14.2, a line's baseline to the next line's capitals 12.5, the last baseline to the card's foot 17 */
  --c-step: 12.52px; --c-foot: 17px;
  --od-over: 4.13px; --od-under: 6.39px; } /* an office's line, Libre Franklin 16 on 1.4 */
@media (max-width: 1100px) { .bp { --s: calc(3 * var(--lh)); } }
@media (max-width: 760px) { .bp { --h1-over: 7px; --h1-under: 7px; --h2-over: 6.2px; --h2-under: 7.39px; --logo-foot: 8.09px; --c-step: 11.32px; --od-over: 3.87px; --od-under: 6px; } }   /* Fraunces 40 and 34, the logo at 260, the cards' 22 px titles, an office's line at 15 on 1.4 */
.bp-top .lede { margin-top: 22px; }
.bp-top .ask { margin-top: calc(var(--g) - var(--p-under) - var(--p-over)); }   /* a paragraph to the next, where they stack */
.bp-top .btn { margin-top: calc(var(--g) - var(--p-under)); }   /* a paragraph to the button */
.bp-top .copy { display: block; }   /* the landing page's first screen lays its .copy out as contents; this one keeps its own */
.bp-top ul { list-style: none; }
.bp-top picture { display: block; }
.bp-top picture img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* the first screen, the row (his pick, October 29): the head across the measure, his two paragraphs, the button, then
   the five seats in one row */
/* the first screen on the page's measures: the logo's ink to the head's capitals, his paragraphs (or the button) to the
   seats, and the seats to the band's foot, two lines each (--r); the head to his paragraphs a line and a half (--g) */
.idea-c .bp-top { grid-template-columns: minmax(0, 1fr); gap: var(--r); padding-top: calc(var(--r) - var(--logo-foot) - var(--h1-over)); padding-bottom: var(--r); }
.idea-c .say .lede { margin-top: 0; }
/* At a laptop's size and wider, one first screen on one measure of space (Taylor, October 29, 2026: "make it fit all on
   one page. Your desktop spacing is sooo wonky lol"): the logo's ink to the head, his paragraphs to the row and the row
   to the section's foot each two of his lines, ink to ink (November 2: the three had stood 74.2, 63.0 and 56 px apart,
   one 56 px box measure each), the photographs sized by the room that leaves. His two paragraphs are peers on one
   measure, two of the cards' columns each, and the button stands in the fifth with its foot on the text's last baseline,
   so the row reads lede, volunteer paragraph, button, and nothing hangs under one paragraph alone (the critic's second
   read, October 30: the lede had run lines of 81 to 85 characters over three columns, the button under the other
   paragraph, a 742 by 165 px void beside it). Each paragraph's left edge is a card's edge. */
@media (min-width: 1101px) {
  .idea-c .bp-top { gap: calc(var(--r) - var(--p-under)); align-items: start; }
  .idea-c .bp-top .copy { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  .idea-c .bp-top .say { display: contents; }
  .idea-c .bp-top h1 { grid-area: 1 / 1 / 2 / 6; }
  .idea-c .bp-top .lede { grid-area: 2 / 1 / 3 / 3; margin-top: calc(var(--g) - var(--h1-under) - var(--p-over)); padding-right: 24px; }
  .idea-c .bp-top .ask { grid-area: 2 / 3 / 3 / 5; margin-top: calc(var(--g) - var(--h1-under) - var(--p-over)); padding-right: 24px; }
  .idea-c .bp-top .btn { grid-area: 2 / 5 / 3 / 6; justify-self: start; align-self: end; margin-top: 24px; margin-bottom: var(--p-under); }
  /* a picture's height, the seats' and the officers' both: its column's 3:4, or the window's height less what stands
     over and under the photographs (--top: the logo's 113 and the first screen's three measures; the head block,
     --block, measured on his window; each card's words, --words), whichever is less, and never under 240. The step by
     his paragraph's line that once kept the Chair's picture on the lines of the officers' paragraph beside it went
     with that paragraph, which stands over the cards since the critic's second read. */
  .bp { --col: calc((min(100vw, 1360px) - 2 * var(--gutter) - 4 * 16px) / 5); --block: 244.8px; --words: 72.3px;
    --top: calc(113px + 3 * var(--r) - var(--logo-foot) - var(--h1-over) - var(--p-under));
    --ph: max(240px, min(calc(var(--col) * 4 / 3), calc(100svh - var(--top) - var(--words) - var(--block)))); }
  .idea-c .seatrow .ph { aspect-ratio: auto; height: var(--ph); }
}
/* the head block where the window is narrower than the page's measure: the head on two lines below 1214 px, his
   paragraphs a line or two longer below 1335 px (measured at 18 px, every width from 1101 to 1500, the critic's second
   read of October 30) */
@media (min-width: 1101px) and (max-width: 1163.98px) { .bp { --block: 357.6px; } }
@media (min-width: 1164px) and (max-width: 1213.98px) { .bp { --block: 330.6px; } }
@media (min-width: 1214px) and (max-width: 1334.98px) { .bp { --block: 271.8px; } }
@media (min-width: 1101px) and (max-width: 1142.98px) { .idea-c .bp-top .btn { padding-inline: 24px; } }   /* the button's words on one line in a fifth column under 193 px */

/* the five seats, each a card in the Design Council's form (its people page: one photograph, a one-word head and a line on
   a white card): the region's photograph, the seat's name and "Open". The picture's frame is the place a director's face
   takes when the seat is filled, and the "Open" line the place for their name. The whole card is one link into the
   application with the seat chosen; nothing is drawn on the photograph. The seat at large is a mountain of his, a card
   like the others on a laptop and a strip across the row below 1101 px. A filled seat is the same card, not a link, with
   the member's face in the frame and their name on the "Open" line without the chevron. */
.seatrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.seatrow li { display: flex; flex-direction: column; }
.seatrow .seat { flex: 1; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.seatrow a.seat:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.seatrow a.seat:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.seatrow .ph { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.seatrow .ph picture { height: 100%; }
.seatrow .sw { display: block; flex: 1; background: #fff; padding: 10px 16px 12px; }
.seatrow .sw b { display: block; font: 700 24px/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.seatrow .sw .who { display: block; margin-top: 4px; font: 600 16px/1.25 "Libre Franklin", sans-serif; color: #000; }
/* after "Open", the site's own chevron (the one beside Sources) turned to point on, in the book's blue: the card says at
   rest, and on a phone, that it opens the application (the critic's second read, October 30: only a pointer's underline
   had said so); drawn, so it says nothing to a screen reader, which hears the link */
.seatrow a.seat .who::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 9px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: translateY(-1.5px) rotate(45deg); vertical-align: baseline; }
.seatrow a.seat:hover .who::after { transform: translate(2px, -1.5px) rotate(45deg); }

/* under the first screen, under one head: the terms in one paragraph (AIGA's), the regions small, the three offices with
   his line on who they are; then the application, under its own rule, the page's one rule colour. The section's head
   stands a section's space (--s) under the band's edge, its paragraph a line and a half under it, the Regions row two
   lines under that */
/* the section's rule to its head's capitals a rule's space (--rule-cap, 20.9), as the rows' heads and the application's
   head stand under their rules (Taylor, November 10, 2026: "Alignment is off on desktop. That block is the only one with
   space before the headline. Fix it."; it had stood a section's space, 108, under its rule) */
.bp-how { background: #fff; padding-top: calc(var(--rule-cap) - var(--h2-over)); }
.bp-how .wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
.bp-how .hhead { grid-column: 1 / -1; color: var(--blue); font-size: 44px; line-height: 1.1; }
.bp-how .hlead { grid-column: 1 / 4; margin-top: calc(var(--g) - var(--h2-under) - var(--p-over)); max-width: var(--measure); }   /* one gap under every head (November 2: 40.4, 39.0 and 37.0 under the three heads, ink to ink) */
.bp-how .hh { font-size: 28px; line-height: 1.1; color: var(--blue); }
.bp-how ul { list-style: none; }

/* the regions, small (Knight Foundation's list beside a small map; the county under the pointer named as the South
   Carolina Democratic Party's county map names it). Four tones from the book's Blue and Dome, each a shape on white at
   3 to 1 or more and each apart from its neighbours (the critic, October 30: the Lowcountry's pale blue read 1.57 to 1):
   the Lowcountry Dome at half its light (6.9 to 1), the Midlands Blue (10.0), the Upstate Blue lightened (3.7), the Pee
   Dee Dome darkened a fifth (3.3). A region lit keeps its own colour a step darker (--lit), its county pointed at a step
   darker again (--deep); the other three fade to tints of their own. */
.regions .r-lowcountry { --tone: #3F6157; --lit: #2C443D; --deep: #1C2B27; }
.regions .r-midlands { --tone: var(--blue); --lit: #13275D; --deep: #0C1839; }
.regions .r-upstate { --tone: #6F83BA; --lit: #3F59A0; --deep: #263F84; }
.regions .r-pee-dee { --tone: #64998A; --lit: #4C7367; --deep: #334D45; }
.regions[data-lit="lowcountry"] { --hl: #1C2B27; }
.regions[data-lit="midlands"] { --hl: #0C1839; }
.regions[data-lit="upstate"] { --hl: #263F84; }
.regions[data-lit="pee-dee"] { --hl: #334D45; }
/* the key at the size of a card's "Open" line, so the row has one head (the critic's second read, October 30: in
   Fraunces at 24 px the four names had read as four more heads beside a 28 px one) */
.rnames button { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 16px/1.25 "Libre Franklin", sans-serif; color: #000; text-align: left; transition: opacity .15s; }
.rnames li + li { margin-top: 10px; }
.rnames i { flex: none; width: 14px; height: 14px; background: var(--tone); }
/* each region's name on the state itself, in the book's small capitals (Franklin, 14 percent apart), white on the two
   dark tones and black on the two light ones, so the map reads without the key: Upstate and the Pee Dee touch at 1.15 to
   1 and the Lowcountry and the Midlands at 1.46, so in grayscale four regions had read as two. A region lit keeps its
   name, the others fade with the key */
.rlab { position: absolute; z-index: 1; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font: 700 12px/1 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; transition: opacity .15s; }
.rlab { text-shadow: 0 0 2px var(--tone), 0 0 2px var(--tone), 0 0 1px var(--tone); }   /* a halo of its own region's tone, so a county's line never cuts through a letter */
.rlab.r-lowcountry, .rlab.r-midlands { color: #fff; }
.rlab.r-upstate, .rlab.r-pee-dee { color: #000; }
.regions[data-lit] .rlab { opacity: .32; color: #000; text-shadow: none; }
.regions[data-lit="lowcountry"] .rlab.r-lowcountry, .regions[data-lit="midlands"] .rlab.r-midlands,
.regions[data-lit="upstate"] .rlab.r-upstate, .regions[data-lit="pee-dee"] .rlab.r-pee-dee { opacity: 1; color: #fff; text-shadow: 0 0 2px var(--lit), 0 0 2px var(--lit), 0 0 1px var(--lit); }
.mapbox:has(.tip:not([hidden])) .rlab { opacity: 0; }   /* while a county's name is up, the names on the state step back (the key still shows the lit region), so no name peeks out under it */
.regions .rsay { max-width: var(--measure); }
/* the board's map and its county label held to the board's own regions block: unscoped, these two rules had reached
   the home page from October 29 on, its map capped at 400 px and its money block's source label set in capitals (Taylor,
   November 2, 2026, on the live home page: "What happened to the size of the map on the homepage?") */
.regions .mapbox { position: relative; max-width: 400px; }
.rmap { display: block; width: 100%; height: auto; touch-action: manipulation; }
.rmap g path { fill: var(--tone); stroke: #fff; stroke-width: .75px; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: default; transition: fill .15s, fill-opacity .15s; }
.rmap .rl { fill: none; stroke: #fff; stroke-width: 2.5px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.rmap .hl { fill: var(--hl, #0C1839); stroke: #fff; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.regions[data-lit] .rmap g path { fill-opacity: .3; }
.regions[data-lit="upstate"] .rmap .r-upstate path, .regions[data-lit="midlands"] .rmap .r-midlands path,
.regions[data-lit="pee-dee"] .rmap .r-pee-dee path, .regions[data-lit="lowcountry"] .rmap .r-lowcountry path { fill: var(--lit); fill-opacity: 1; }
.regions[data-lit] .rnames button { opacity: .32; }
.regions[data-lit] .rnames button[aria-pressed="true"] { opacity: 1; }
.regions[data-lit] .rnames button[aria-pressed="true"] i { background: var(--lit); }
.regions .tip { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap; background: #fff; padding: 8px 12px 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 4px 14px rgba(0, 0, 0, .14); font: 700 13px/1 "Libre Franklin", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }

/* the offices, in the seat cards' own type (the critic, October 30: no small capitals over the names): the office as the
   card's title, the officer's name or "Open" in the name's line, then the line, in black; a line in quotation marks is
   the officer's own and is set in italics. A held office's picture is the seat cards' frame, the same shape at every
   window; an open office is the same card without the picture, drawn by its edge, its words on a held card's lines
   (the critic's second read, October 30: the open offices had hung at the row's foot under a 490 by 274 px hole). */
.offices .ow { padding: 10px 16px calc(var(--c-foot) - var(--od-under)); }
.offices .ow b { display: block; font: 700 24px/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.offices .ow .who { display: block; margin-top: 4px; font: 600 16px/1.25 "Libre Franklin", sans-serif; color: #000; }
/* the line on the seat cards' rhythm: the name to the line as the title to the name, the line to the card's foot as a
   seat's "Open" to its card's (November 2: 13.1 and 18.4 against the seat card's 12.5 and 17) */
.offices .ow .od { display: block; margin-top: calc(var(--c-step) - var(--k-under) - var(--od-over)); font: 400 16px/1.4 "Libre Franklin", sans-serif; color: #000; text-wrap: pretty; }
.offices .of { overflow: hidden; background: var(--blue); aspect-ratio: 3 / 4; }
.offices .of picture, .offices .of img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }   /* the officers' pictures are the frame's own 3:4 or close to it, so a narrower frame trims both sides evenly (November 4: the Chair's cut against the frame's left edge is gone) */

/* A, the band, from Knight Foundation's communities page (a head over a rule, a list beside a small map): under the
   paragraph, one band of two heads on one rule; the four names with the line under them, the small state beside them,
   and the offices beside that, the line on who they are first, then the offices in ruled rows, the Chair's on its own */
.set-a .band { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; margin-top: 56px; }   /* the room the map leaves goes under the line, never between the names and it */
.set-a .band .hh { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.set-a .band .hr { grid-column: 1 / 4; }
.set-a .band .ho { grid-column: 4 / 6; }
.set-a .regions { display: contents; }
.set-a .rnames { grid-column: 1; grid-row: 2; margin-top: 32px; }
.set-a .rsay { grid-column: 1; grid-row: 3; margin-top: 24px; padding-right: 8px; }
.set-a .mapbox { grid-column: 2 / 4; grid-row: 2 / 4; margin-top: 37.2px; }   /* the state's top on the capitals of the first name beside it */
.set-a .offs { grid-column: 4 / 6; grid-row: 2 / 4; margin-top: 32px; }
.set-a .offices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; margin-top: 8px; }
.set-a .offices li { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.set-a .offices li.held { grid-column: 1 / -1; }

/* B, the grid, from AIGA's board page (its officers marked inside the same grid of cards as its directors): each part's
   head in the first column on its own rule. The regions: his line on who a regional seat is for on a reading measure
   (the critic, October 30: never a 237 px margin note), then the four names and the small state, the state at its
   size. The officers' row set the same way: his line on who the officers are beside their head, on the regions' line's
   measure, then the offices as cards on the seats' grid under the last four seats, an open office a card like a held
   one. */
/* a row two lines (--r) under what stands over it; its rule a line and a half over its first baseline, the head's and
   the paragraph's (November 2: 22.4 and 28.6 px from the rule to their capitals, on a 42 px baseline) */
.set-b .hh { grid-column: 1; margin-top: calc(var(--r) - var(--p-under)); padding-top: calc(var(--rule-cap) - 1px - var(--h3-over)); border-top: 1px solid var(--line); }
.set-b .regions { grid-column: 2 / 6; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; margin-top: calc(var(--r) - var(--p-under)); padding-top: calc(var(--rule-cap) - 1px - var(--h3-over)); border-top: 1px solid var(--line); }
.set-b .rsay { grid-column: 1 / -1; grid-row: 1; margin-top: 5px; }   /* its first baseline on the head's (the critic's second read: 3.6 px apart) */
.set-b .rnames { grid-column: 1; grid-row: 2; margin-top: calc(var(--g) - var(--p-under) - var(--k-over)); }   /* a line and a half under his line (November 2: 42.1) */
.set-b .mapbox { grid-column: 2 / 4; grid-row: 2; margin-top: calc(var(--g) - var(--p-under)); max-width: 420px; }   /* the state's top on the capitals of the first name beside it */
.set-b .ohd { grid-column: 1; margin-top: var(--r); }   /* the map's foot to the Officers rule, two lines (November 2: 56 here, 63 over the Regions rule) */
.set-b .ohd .hh { margin-top: 0; }
.set-b .osay { margin-top: calc(var(--g) - var(--h3-under) - var(--p-over)); padding-right: 8px; }
.set-b .offices { grid-column: 2 / 6; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--line); }
.set-b .offices li:not(.held) { box-shadow: inset 0 0 0 1px var(--rule); }   /* an open office: the card without its picture, drawn by its light edge (the cold reader, November 3: in the page's rule colour its empty top read "like a missing photo") */
@media (min-width: 1101px) {
  /* the officers' row as the regions' row: the head in the first column and his paragraph beside it on one rule, on the
     regions' line's measure, then the cards under it (the critic's second read, October 30: his paragraph had run 11
     lines of 17 to 27 characters down the 237 px head column) */
  .set-b .ohd { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; }
  .set-b .ohd .hh { grid-column: 1; }
  .set-b .ohd .osay { grid-column: 2 / 6; margin-top: 0; padding: calc(var(--rule-cap) - 1px - var(--h3-over) + 5px) max(0px, calc(100% - var(--measure))) 0 0; border-top: 1px solid var(--line); }   /* its rule on the head's, its first baseline on the head's (as the regions' line) */
  .set-b .offices { margin-top: calc(var(--g) - var(--p-under)); padding-top: 0; border-top: 0; }   /* a line and a half under his paragraph (November 2: 39.0) */
  /* each card two rows of the list's grid, its picture's and its words', so every office's words start on one line and
     every title sits on one baseline across the row, a held office's picture over them; an open office's card runs both
     rows, as tall as a held one; a row of open offices only has no picture row at all */
  .bp .offices { row-gap: 16px; }
  .bp .offices li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .bp .offices .of { grid-row: 1; aspect-ratio: auto; height: var(--ph); }
  .bp .offices .ow { grid-row: 2; }
  /* five offices and more: the cards take all five columns, a row of five like the seats' own */
  .set-b .wrap:has(.offices > li:nth-child(5)) .offices { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* the application, set on the page's grid as the rows over it are (Taylor, November 2, 2026: "The application form seems
   to sit to the left of everything"): it had been held to 760 px from the left edge, the home page's form without the
   member card beside it, its right edge on no line of the page and 488 px of its row empty. Its head stands in the
   first column and the form on the other four, as Regions and Officers stand, each under its own rule split at the
   column gap as theirs are (the cold reader, November 2: one unbroken rule had read apart from the two over it); two
   fields to a row, each two of the seats' columns wide, "Why you?" and the button across the four. The head's capitals
   stand as far under the rule as a row's head's, and the first label on the head's first baseline; the head keeps a
   section's size, a section's space over it. Below 1101 px one rule across, the head over the form, a line and a half
   over the first label, two fields to a row on a tablet and one on a phone. Inside the form: a label's baseline to its
   field half a line, a field to the next label or the button a line (November 2: 10.6, 24.6 and 28 px). */
.bp-in { padding: var(--s) 0; }   /* a section's space from the officers' cards to its rule, and from the button to the foot */
.bp-in:focus { outline: none; }   /* a seat card's link moves the focus here; the section itself draws nothing */
.bp-in .wrap { grid-template-columns: minmax(0, 1fr); }
.bp-in .formside { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.bp-in .formside::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--line); }
.bp-in .formside > h2, .bp-in .done { margin: calc(var(--rule-cap) - 1px - var(--h2-over)) 0 0; }
.bp-in .done { grid-column: 1 / -1; }
.bp-in .done h2 { margin-bottom: calc(var(--g) - var(--h2-under) - var(--p-over)); }
.bp-in .done p { font: 400 18px/1.5 "Libre Franklin", sans-serif; margin-bottom: calc(-1 * var(--p-under)); }   /* his line in his paragraphs' one size, its baseline a section's space over the foot, as the button's foot is */
.bp-in .f { margin-top: calc(var(--g) - var(--h2-under) - var(--l-over)); column-gap: 16px; row-gap: calc(var(--lh) - var(--l-over)); }
.bp-in .f label { margin-bottom: calc(var(--lh) / 2 - var(--l-under)); }
.bp-in .f textarea { display: block; width: 100%; border: 0; border-bottom: 2px solid var(--blue); background: #fff; padding: 12px 14px; border-radius: 0; font: 400 17px/1.5 "Libre Franklin", sans-serif; resize: vertical; }
.bp-in .act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: var(--l-over); }
.bp-in .act .status { flex-basis: 100%; margin-top: 0; }
@media (min-width: 761px) { .bp-in .f { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) {
  .bp-in .formside { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; }
  .bp-in .formside::before { display: none; }
  .bp-in .formside > h2, .bp-in .f, .bp-in .done { margin-top: 0; border-top: 1px solid var(--line); }
  .bp-in .formside > h2, .bp-in .done { padding-top: calc(var(--rule-cap) - 1px - var(--h2-over)); }
  .bp-in .formside > h2 { grid-column: 1; }
  .bp-in .f { grid-column: 2 / 6; padding-top: calc(var(--rule-cap) + var(--h2-cap) - 1px - var(--l-over) - var(--l-cap)); }
}

@media (max-width: 1100px) {
  .bp-top { grid-template-columns: 1fr; gap: 48px; padding-bottom: 72px; }
  .idea-c .bp-top .copy { display: grid; grid-template-columns: 1fr; gap: calc(var(--g) - var(--h1-under) - var(--p-over)); }
  /* his two paragraphs on one measure (the critic: a 504 px lede over a 988 px paragraph at 1024) */
  .idea-c .bp-top .say { display: flex; flex-direction: column; align-items: flex-start; }
  .idea-c .bp-top .lede, .idea-c .bp-top .ask { width: 100%; max-width: var(--measure); }
  .seatrow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .seatrow li.any { grid-column: 1 / -1; }
  .seatrow li.any .ph { aspect-ratio: 3 / 1; }   /* the mountain across the row, its strip cut (the picture's narrow source) */
  .bp-how .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bp-how .hlead { grid-column: 1 / -1; }
  .set-a .band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; margin-top: 48px; }
  .set-a .band .hr, .set-a .band .ho { grid-column: 1 / -1; }
  .set-a .band .ho { grid-row: 4; margin-top: 56px; }
  .set-a .rnames { grid-column: 1; grid-row: 2; }
  .set-a .rsay { grid-column: 1; grid-row: 3; }
  .set-a .mapbox { grid-column: 2; grid-row: 2 / 4; }
  .set-a .offs { grid-column: 1 / -1; grid-row: 5; margin-top: 24px; }
  .set-b .hh { grid-column: 1 / -1; }
  /* each row's head over its words, a line and a half over its paragraph's capitals, as every head on the page */
  .set-b .regions { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; margin-top: calc(var(--g) - var(--h3-under) - var(--p-over)); padding-top: 0; border-top: 0; }
  .set-b .rsay { grid-column: 1 / -1; grid-row: 1; margin-top: 0; }   /* his line first, on the page's one measure */
  .set-b .rnames { grid-column: 1; grid-row: 2; }
  .set-b .mapbox { grid-column: 2; grid-row: 2; }
  .set-b .osay { max-width: var(--measure); }   /* the officers' line on the regions' line's measure */
  .set-b .ohd { grid-column: 1 / -1; }
  .set-b .ohd .hh { margin-top: 0; }
  .set-b .offices { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); margin-top: calc(var(--g) - var(--p-under)); padding-top: 0; border-top: 0; }
  /* on a tablet and a phone each card lies on its side, its picture at the left in the seats' 3:4 and its words beside
     it, one to a row; an open office's card runs from the same left edge, its words in the words' column and nothing in
     the picture's place (the critic's second read: the open offices had stood 200 px in, an empty column under his).
     The picture is a phone's 120 px wide on a tablet too, so a card is about as tall as its words (at 200 px his words
     had filled the top of a 267 px card) */
  .offices li { display: grid; grid-template-columns: min(34%, 120px) minmax(0, 1fr); align-items: stretch; }
  .offices:not(:has(.held)) li { grid-template-columns: minmax(0, 1fr); }
  .offices .of { grid-column: 1; }
  .offices .ow { grid-column: -2; }
}
@media (max-width: 760px) {
  .bp-top { padding-top: 32px; padding-bottom: 56px; }
  .bp-top h1 { font-size: 40px; }
  /* on a phone the button comes straight after the lede, so the way in is on the first screen; then the volunteer
     paragraph */
  .idea-c .bp-top { gap: calc(var(--r) - var(--p-under)); }   /* the volunteer paragraph last, two lines over the seats */
  .idea-c .bp-top .lede { order: 1; }
  .idea-c .bp-top .btn { order: 2; margin-top: calc(var(--g) - var(--p-under)); }
  .idea-c .bp-top .ask { order: 3; margin-top: calc(var(--g) - var(--p-over)); }
  .seatrow .sw { padding: 10px 14px 12px; }
  .seatrow .sw b { font-size: 22px; }
  /* under 390 px a card's words stand 10 px in, so a member's whole name keeps one line, as "Open" does (Jessica S.
     Thomas wrapped at 375 at 14 px) */
  @media (max-width: 389.98px) { .seatrow .sw { padding-left: 10px; padding-right: 10px; } }
  .bp-how .wrap { grid-template-columns: minmax(0, 1fr); }
  .bp-how .hhead, .bp-in h2 { font-size: 34px; }   /* the two sections' heads at one size (November 2: 34 and 32) */
  .set-a .band, .set-b .regions, .set-b .offices { grid-template-columns: minmax(0, 1fr); }
  .set-a .band { grid-template-rows: none; }
  .set-a .rnames, .set-a .rsay, .set-a .mapbox, .set-a .offs, .set-b .rnames, .set-b .rsay, .set-b .mapbox { grid-column: 1; }
  .set-a .rnames { grid-row: 2; }   /* on a phone: the names, the state under them, then the line */
  .set-a .mapbox { grid-row: 3; }
  .set-a .rsay { grid-row: 4; }
  .set-a .band .ho { grid-row: 5; margin-top: 48px; }
  .set-a .offs { grid-row: 6; margin-top: 20px; }
  .set-b .rsay { grid-row: 1; }   /* on a phone: his line, the names, then the state */
  .set-b .rnames { grid-row: 2; }
  .set-b .mapbox { grid-row: 3; }
  .rnames { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .rnames li + li { margin-top: 0; }
  .set-a .rnames { margin-top: 24px; }
  .set-a .mapbox { margin-top: 24px; }
  .set-b .mapbox { margin-top: calc(var(--g) - var(--k-under)); }   /* under the names, a line and a half under their last baseline */
  .set-a .rsay { margin-top: 20px; }
  .set-a .offices { grid-template-columns: minmax(0, 1fr); }
  .set-b .offices { gap: 16px; }   /* the seats' gap (November 2: 12 between the offices, 16 between the seats) */
  .offices .ow { padding: 10px 14px calc(var(--c-foot) - var(--od-under)); }
  .offices .ow b { font-size: 22px; }
  .offices .ow .od { font-size: 15px; }
}

/* ---- B, pure white (Taylor, November 2, 2026: "the more I look at this website, the more I am starting to hate the
   sand and want a pure white"). Every ground that was Oyster is white, and where two white sections meet, one rule in
   the page's rule colour runs across the text's width at the seam, the line the sand's edge drew: the Architectural
   League of New York's and the Center for American Progress's white pages hold their sections apart so. The badge's
   strap hangs from the first. Drawn as the section's own background, so nothing on the page moves. The light rules
   take the book's own light rule (#D5DCE6, its message map's rows) in place of the sand's warm one. The sponsor page
   takes none: its doors open on their own rules, and a seam rule over them read as a double rule (the cold reader,
   November 3). */
.hero + .things, .things + .money, .conf + .in, .bp-hero + main > .bp-how {
  background: linear-gradient(var(--line), var(--line)) 50% 0 / calc(min(100%, 1360px) - 2 * var(--gutter)) 1px no-repeat; }
/* beside the conference's Vista, which stands out to the page's edge from the middle of the page above 760 px, the rule
   runs from the text's left edge to the photograph's, so the photograph's foot and the rule are one line across */
@media (min-width: 761px) { .conf + .in { background-position: var(--edge) 0; background-size: calc(50% - var(--edge)) 1px; } }
/* a field on white is drawn by its edge: the book's quiet edge (#B8C4D6, its writing line) on three sides inside it, the
   blue rule its foot as before, so a box to type in still reads as one where the sand's fill had drawn it (in the light
   rule the cold reader of November 3 found "top and side edges nearly invisible") */
.f input:not([type=checkbox]):not([type=file]), .f select, .f textarea, .mail input {
  box-shadow: inset 0 1px 0 #B8C4D6, inset 1px 0 0 #B8C4D6, inset -1px 0 0 #B8C4D6; }
.sheet .mail input { box-shadow: none; }   /* on the sign-in sheet's blue the white field draws itself */
/* the sponsor page's convention photograph, which stands out to the page's edge on the third column from 1212 px,
   stands on a light rule run from the text's left edge to the photograph's, one line across the page with its foot:
   without it the photograph "floats" (the second cold reader, November 3); in the page's rule colour it had read as a
   "double rule" over the doors' own (the first), so it takes the light rule, a step under the doors' heads. Below
   1212 px the band ends on the photograph, across the page. */
@media (min-width: 1212px) { .sp-hero.has-shot + main > .sp-doors {
  background: linear-gradient(var(--rule), var(--rule)) var(--edge) 0 / calc(2 * ((min(100vw, 1360px) - 2 * var(--gutter) - 112px) / 3 + 56px)) 1px no-repeat; } }

/* ------------------------------------------------------------------ the header on every page
   Taylor, November 2, 2026: "There is no navigation on the site and that needs addressed."; "there is still no navigation
   once you get off the home page." The logo home on the left, the site's pages in a row, Sign in; the page it stands on
   underlined in Dome. From 1100 px down the pages sit under Menu, a sheet over the page under the header, the page
   behind it set back. Drawn three ways November 3 and picked cold: A, the row. The header stands at the home page's own
   height on every page (--head-top, the first screen's beat), so it never jumps from page to page. */
header.site { display: flex; align-items: center; gap: 28px; position: relative; }
.site .home, .site > .logo { margin-right: auto; }
.site .home { display: block; line-height: 0; }
.site .home .logo { display: block; max-width: none; }   /* its 270 px whatever the link around it measures */
.site .row { display: flex; align-items: center; gap: 28px; }
.site .row a, .site .menu summary { font: 600 17px/1 "Libre Franklin", sans-serif; color: var(--blue); text-decoration: none; white-space: nowrap; }
.site .row a { padding: 12px 0; }
.site .row a:hover { text-decoration: underline; text-underline-offset: 6px; }
.site .row a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--dome); text-underline-offset: 8px; }
.site .signin.top { padding: 12px 0; }   /* the link is class "top" too, which the sponsor and board pages pad as their headers */
.site .menu { display: none; }
.site .menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; padding: 0 16px; box-shadow: inset 0 0 0 2px var(--blue); }
.site .menu summary::-webkit-details-marker { display: none; }
.site .menu summary:hover, .site .menu[open] summary { background: #EFF1F7; }
.site .menu summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.site .menu .shut, .site .menu[open] .open { display: none; }
.site .menu[open] .shut { display: inline; }
/* the sheet: the pages large, each on a rule, Sign in among them, the button last; the page behind set back by a veil
   that reaches every side but the top, so the header and its Close stay as they are */
.site .sheetnav { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; display: flex; flex-direction: column; align-items: flex-start;
  margin-top: 12px; padding: 4px var(--gutter) 40px; background: #fff;
  box-shadow: 0 1px 0 var(--line), 0 0 0 100vmax rgba(12, 24, 57, .32); clip-path: inset(0 -100vmax -100vmax -100vmax); }
.site .sheetnav a { align-self: stretch; font: 700 24px/1.2 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); text-decoration: none; padding: 14px 0 15px; border-top: 1px solid var(--rule); }
.site .sheetnav a:first-child { border-top: 0; }
.site .sheetnav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--dome); text-underline-offset: 7px; }
.site .sheetnav .btn { align-self: flex-start; margin-top: 12px; border-top: 0; font: 700 17px/1 "Libre Franklin", sans-serif; padding: 18px 30px; color: #fff; }
@media (max-width: 1100px) { .site .row, .site .signin.top { display: none; } .site .menu { display: block; } }
/* on a phone the logo keeps its full 260 px and Menu sits beside it on the smallest, 375 px: a narrower gap and button */
@media (max-width: 760px) { header.site { gap: 12px; } .site .menu summary { font-size: 16px; padding: 0 12px; } }
/* the header's height from the page's top, the home page's own on every page */
:root { --head-top: calc(var(--beat) - 8.5px); }
@media (max-width: 760px) { :root { --head-top: calc(var(--beat) - 8.2px); } }

/* ---- the dictionary block on a phone, as its own page (Taylor, November 10, 2026: "Big text blocks especially on mobile
   (like our dictionary piece) don't make sense"); a desktop keeps the paragraph. His pick, B1 ("B1 is good for the
   swipe."): four cards in a row you swipe. --------------------------------------------------------------------------- */
.why-m { display: none; }
@media (max-width: 760px) {
  .things .why.has-m { display: none; }
  .why-m { display: block; margin-top: 20px; }
  .things .top { align-items: start; }
  .things .say { min-width: 0; }
  .why-m a { color: var(--blue); }
  .why-m .lab { font: 600 13px/1.4 "Libre Franklin", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
  .why-m .lab a { text-underline-offset: 3px; }
  .why-m .def { margin-top: 6px; font: 700 24px/1.25 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: #000; text-wrap: pretty; }
  .why-m .br { font-size: 18px; line-height: 1.5; text-wrap: pretty; }
  .why-m .end { font: 700 24px/1.25 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); text-wrap: pretty; }
  /* wdeck (B refined, phone-b): one card a thought, the four of them and where you are shown before a word is read
     (four numbered steps beside two arrows), the block as tall as its tallest card on every card. Without the script
     the four stand one under another. Its own class: idea B's "wb" was the Who page's letter class too, whose 72 px
     foot was the empty space under the card. */
  .wdeck { display: flex; flex-direction: column; }
  .wdeck .cards { list-style: none; display: grid; gap: 12px; }
  .wdeck .cards li { display: flex; flex-direction: column; justify-content: center; padding: 22px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }
  .wdeck .cards li:last-child { background: var(--blue); }
  .wdeck .cards li:last-child .end { color: #fff; }
  .wdeck .br { font-size: 21px; line-height: 1.45; }
  .wdeck .ctl { display: flex; align-items: center; gap: 8px; }
  .wdeck .ctl[hidden] { display: none; }
  .wdeck .steps { flex: 1; display: flex; gap: 6px; margin-right: 6px; }
  .wdeck .steps button { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 14px/1 "Libre Franklin", sans-serif; color: var(--quiet); text-align: left; }
  .wdeck .steps button::after { content: ""; height: 4px; border-radius: 2px; background: var(--rule); }
  .wdeck .steps button.seen::after, .wdeck .steps button[aria-selected="true"]::after { background: var(--blue); }
  .wdeck .steps button[aria-selected="true"] { color: var(--blue); }
  .wdeck .ctl > button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); cursor: pointer; }
  .wdeck .ctl > button svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .wdeck .ctl > button:disabled { box-shadow: inset 0 0 0 1.5px var(--rule); cursor: default; }
  .wdeck .ctl > button:disabled svg { stroke: var(--line); }
  .wdeck button:focus-visible, .wdeck .cards:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  /* b1: the four in a row you swipe, the next card's edge showing at the screen's edge (Material 3's uncontained
     carousel, Apple's App Store); the steps and arrows under the row. A card's 22 px padding is wider than the edge
     that shows, so no word stands cut at the screen's edge. */
  .wdeck.on .ctl { order: 2; margin-top: 14px; }
  .wdeck.on .cards { display: flex; gap: 10px; margin-right: calc(var(--gutter) * -1); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .wdeck.on .cards::-webkit-scrollbar { display: none; }
  .wdeck.on .cards li { flex: 0 0 calc(100% - 32px); scroll-snap-align: start; scroll-snap-stop: always; }
  .wdeck.on .cards::after { content: ""; flex: 0 0 22px; }
}