/* The sponsor page, /sponsor (src/sponsor.py), on the site's type and colours (site.css) and the board page's page system
   of November 2, 2026: a grid of five columns, heads on their rules, one spacing system on his paragraphs' 27 px line,
   every gap read ink to ink as vn-align-check reads it. Its own file, so every other page stays byte for byte as it was.
   Three ideas, one per branch (body.set-a, .set-b, .set-c): A the three doors, from CSS Day's sponsorships page; B the
   rate card, on the site's own rows; C the order sheet, from the Virginia Democrats' page on ActBlue.
     --g  a line and a half (40.5): under every head; from a paragraph to what follows it; a rule to its first baseline
     --r  two lines (54): between the parts of a section
     --s  four lines (108; three, 81, below 1212 px): between sections
   Each margin takes off the type's own room over its capitals and under its last baseline, measured from the site's own
   font files: */
.sp { --lh: 27px; --g: calc(1.5 * var(--lh)); --r: calc(2 * var(--lh)); --s: calc(4 * var(--lh)); --measure: 594px;
  --p-over: 6.64px; --p-under: 7px;                        /* a paragraph, 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; --h2-cap: 30.8px;  /* a section's head, Fraunces 44 on 1.1 */
  --h3-over: 5.4px; --h3-cap: 19.6px; --h3-under: 5.8px;   /* a door's head, Fraunces 28 on 1.1 */
  --pr-over: 6.6px; --pr-cap: 22.4px; --pr-under: 6.19px;  /* a price, Fraunces 32 on 1.1 */
  --k-over: 3.13px; --k-under: 5px;                        /* what it is, Libre Franklin SemiBold 16 on 1.25 */
  --d-over: 4.13px; --d-under: 6.39px;                     /* what it gets, Libre Franklin 16 on 1.4 */
  --l-over: 4.61px; --l-cap: 10.39px; --l-under: 4.6px;    /* a form's label, Libre Franklin 14 on 1.4 */
  --logo-foot: 8.4px;                                      /* the logo's clear space under its ink, at 270 px */
  --rule-cap: calc(var(--g) - var(--h3-cap));              /* a rule to the capitals under it (20.9): its first baseline a line and a half down */
  --c-step: 12.52px; --c-foot: 17px;
  --src-over: 17.3px; --src-under: 17.8px; }                 /* the Sources line: its 44 px target over its capitals and under its baseline */                     /* inside a row: a baseline to the next line's capitals; the last to the row's foot */
@media (max-width: 1211px) { .sp { --s: calc(3 * var(--lh)); } }
@media (max-width: 760px) { .sp { --h1-over: 7px; --h1-under: 7px; --h2-over: 6.2px; --h2-under: 7.39px; --h2-cap: 23.8px; --logo-foot: 8.09px;
  --pr-over: 5.4px; --pr-cap: 19.6px; --pr-under: 5.8px; } }   /* Fraunces 40 and 34 for the heads, 28 for a price, the logo at 260 */


/* the parts every idea uses: a price at size in the book's blue, what it is in SemiBold, what it gets in Regular, the
   site's chevron after anything that opens the form (the seat cards' and Sources'), and a taken piece's word in the
   book's small capitals */
.sp .pr { font: 700 32px/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); font-variant-numeric: lining-nums; white-space: nowrap; }
.sp .per { margin-left: 8px; font: 600 16px/1.25 "Libre Franklin", sans-serif; color: #000; white-space: nowrap; }
.sp .go { display: inline-block; flex: none; width: 8px; height: 8px; margin-left: 12px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: translateY(-2px) rotate(45deg); }
.sp .tk { display: inline-block; margin-left: 12px; padding: 4px 7px 3px; font: 700 11px/1 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--quiet); vertical-align: 2px; }
.sp a.lva:hover .pr, .sp .spc a:hover .pn, .sp a.rlk:hover .c-wt { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sp a:hover .go { transform: translate(2px, -2px) rotate(45deg); }
.sp a.lva:focus-visible, .sp .spc a:focus-visible, .sp a.rlk:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* the first screen, A and B: the head, one line under it and the button, on the board page's measures (the logo's ink
   to the head two lines, the head to the line a line and a half, the line to the button a line and a half, the button
   to the band's foot two lines) */
.sp-hero .top, .sp-order .top { padding-top: var(--head-top); }
.sp-top { padding-top: calc(var(--r) - var(--logo-foot) - var(--h1-over)); padding-bottom: var(--r); }
.sp h1 { color: var(--blue); font-size: 56px; line-height: 1.05; text-wrap: balance; }
.sp .lede { margin-top: calc(var(--g) - var(--h1-under) - var(--p-over)); max-width: var(--measure); font: 400 18px/27px "Libre Franklin", sans-serif; color: #000; text-wrap: pretty; }
/* the button and the Sources line on one line, Sources on the button's own baseline (the form's button and its line
   stand the same way); the button's foot two lines over the band's foot */
.sp-act { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 28px; margin-top: calc(var(--g) - var(--p-under)); }
.sp-act .src { margin: 0; }
.sp .dsay { font: 400 18px/27px "Libre Franklin", sans-serif; color: #000; text-wrap: pretty; }

/* A2: his photograph of the party's state convention in Columbia (May 31, 2025), the room the conference stands beside,
   where CSS Day sets its own room's photographs, right under the sentence that names the room. On a laptop the head,
   its line and the button keep the doors' first two columns and the photograph stands on the third, out to the page's
   right edge, the band's full height, as the home page's conference block sets the Vista: its left edge on the national
   door's below. Below 1212 px it comes under the button, across the page, 3 to 2, and the band ends on it. Covered, a
   little right of the middle, so South Carolina's flag stays in; never larger than its cut (Sponsor Photo/Tools/cuts.py). */
.sp-shot { margin: 0; }
.sp-shot picture, .sp-shot img { display: block; width: 100%; height: 100%; }
.sp-shot img { object-fit: cover; object-position: 50% 50%; }
/* where the band's height sets the photograph's (1360 to 1668 px wide) the window shows part of its width: up to 1479 px
   it is held at its left edge, so its right edge falls between the fourth flag and South Carolina's, and from 1480 px at
   its right edge, so South Carolina's flag stands whole and its left edge falls before the second flag (no window's edge
   through a flag, measured at every width from 1360 to 1668: the cold reader, November 2: "the desktop crop clips a
   flag"); wider and narrower boxes show the cut's whole width */
@media (min-width: 1360px) and (max-width: 1479px) { .sp-shot img { object-position: 0% 50%; } }
@media (min-width: 1480px) { .sp-shot img { object-position: 100% 50%; } }
@media (min-width: 1212px) {
  .sp-hero.has-shot { position: relative; }
  .sp-shot { position: absolute; top: 0; right: 0; bottom: 0; left: calc(var(--edge) + 2 * ((min(100vw, 1360px) - 2 * var(--gutter) - 112px) / 3 + 56px)); }
}
/* from 1360 px the head, on the first two columns, still holds its one line beside the photograph; narrower, it would
   break on two over a wider paragraph (the floor: a head is never held to two lines by a width cap, nor set smaller in
   one band to avoid it), so there the head keeps its line across the top and the photograph starts on the line under it,
   at the capitals of the paragraph beside it (the logo's 40 and 73, the head's room over its capitals and its 58.8, a
   line and a half to the paragraph's capitals) */
@media (min-width: 1360px) { .has-shot .sp-top h1 { max-width: calc((100% - 112px) * 2 / 3 + 56px); } }
@media (min-width: 1212px) and (max-width: 1359px) {
  .sp-shot { top: calc(var(--head-top) + 73px + var(--r) - var(--logo-foot) - var(--h1-over) + 56px * 1.05 + var(--g) - var(--h1-under)); }
}
/* with the header's pages on the logo's line (November 3, 2026), the photograph leaves the top right to them at every
   width: from 1360 px too it starts at the paragraph's capitals, the head keeping its line across the top */
@media (min-width: 1360px) {
  .sp-shot { top: calc(var(--head-top) + 73px + var(--r) - var(--logo-foot) - var(--h1-over) + 56px * 1.05 + var(--g) - var(--h1-under)); }
}
@media (max-width: 1211px) { .sp-shot { aspect-ratio: 3 / 2; } }
/* never drawn past its own pixels: on a screen of twice the density wider than about 2,400 px the box would ask more of
   the cut (1905 px) than it has, so there it keeps the cut's width, still on the national door's column line */
@media (min-width: 2396px) and (min-resolution: 1.5dppx) { .sp-shot { right: auto; width: 952px; } }

/* ---- A, the three doors, from CSS Day: each door a column under its head on its own rule, its line, then its prices in
   ruled rows (CSS Day's packages side by side, 380 px wide); on a laptop the three on the landing page's three columns
   (its three things, 56 px apart: 379 px each at his window), their heads, lines and first rules each on one line across
   the page; the chevron of a row that opens the form at the row's right edge, on the price's line ---------------------- */
.set-a .sp-doors { padding-top: var(--s); }
.set-a .doors { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--r); }
.set-a .door h2 { border-top: 1px solid var(--line); padding-top: calc(var(--rule-cap) - 1px - var(--h3-over)); font-size: 28px; line-height: 1.1; color: var(--blue); }
.set-a .dsay { margin-top: calc(var(--g) - var(--h3-under) - var(--p-over)); max-width: var(--measure); }
.set-a .lvs { list-style: none; margin-top: calc(var(--g) - var(--p-under)); border-bottom: 1px solid var(--line); }
.set-a .lv { border-top: 1px solid var(--line); }
.set-a .lva { display: block; color: inherit; text-decoration: none; }
/* a row: its rule to the price's capitals and its last baseline to the next rule each 20.9, as a head stands under its
   rule; the price to what it is, and that to what it gets, a card's step, 12.5 */
.set-a .lva, .set-a .lv.many { padding: calc(var(--rule-cap) - 1px - var(--pr-over)) 0 calc(var(--rule-cap) - var(--d-under)); }
.set-a .lvh { display: flex; align-items: baseline; }
/* the chevron after the words it opens, on their line, the board page's own (7 px, 9 px after the word, on the
   baseline): after what a level is, after a piece's name, after the national partnership */
.set-a .go { width: 7px; height: 7px; margin-left: 9px; transform: translateY(-1.5px) rotate(45deg); vertical-align: baseline; }
.set-a a:hover .go { transform: translate(2px, -1.5px) rotate(45deg); }
.set-a .nw { white-space: nowrap; }
.set-a .lvt { display: block; }
.set-a .wt { display: block; margin-top: calc(var(--c-step) - var(--pr-under) - var(--k-over)); font: 600 16px/1.25 "Libre Franklin", sans-serif; }
.set-a .gt { display: block; margin-top: calc(var(--c-step) - var(--k-under) - var(--d-over)); font: 400 16px/1.4 "Libre Franklin", sans-serif; text-wrap: pretty; }
/* the pieces of a level, in place under what they get (CSS Day's exclusive sponsorships, without its numerals, which a
   cold reader took for steps), each a way into the form, a taken one said on its own line; the last piece's line closes
   on the level's own rule */
.set-a .lv.many { padding-bottom: 0; }
.set-a .pcs { list-style: none; margin-top: calc(var(--c-foot) - var(--d-under)); }
/* a level of pieces says its condition in Regular, one paragraph with what it gets ("One sponsor for each"; SemiBold sets
   names, and a condition is not one) */
.set-a .lv.many .wt { font: 400 16px/1.4 "Libre Franklin", sans-serif; margin-top: calc(var(--c-step) - var(--pr-under) - var(--d-over)); }
.set-a .lv.many .gt { margin-top: 0; }
/* the pieces' rules in the page's one rule colour, as the levels' (the cold read: #DCD5C8 beside #8E9CC0) */
.set-a .spc { border-top: 1px solid var(--line); }
.set-a .spc > a, .set-a .spc > span:not(.pn):not(.tk) { display: flex; align-items: baseline; color: inherit; text-decoration: none; }
.set-a .spc > a, .set-a .spc > span:not(.pn):not(.tk), .set-a .spc.taken { padding: calc(var(--c-step) - 1px - var(--k-over)) 0 calc(var(--c-step) - var(--k-under)); }
.set-a .spc.taken { display: flex; align-items: baseline; }
.set-a .pn { font: 600 16px/1.25 "Libre Franklin", sans-serif; }
.set-a .spc.taken .pn { color: var(--quiet); }
/* a sold piece says so in plain type on its own line, where an open piece's chevron stands: "Taken" in the book's small
   capitals, the Sources line's own (Franklin SemiBold 12, 10 percent apart), in the quiet tone, no block behind it, so
   its line keeps the list's height (the cold read: a filled badge, its row 52.8 px tall where the others are 36.9; CSS
   Day says "(reserved)" in plain type) */
.set-a .tk { margin-left: 12px; padding: 0; background: none; color: var(--quiet); font: 600 12px/1 "Libre Franklin", sans-serif; letter-spacing: .1em; vertical-align: baseline; }
/* each door's first price on a list of its own (lv1), the rest after it (lvr): the three first prices share one line
   across the page, so the campaigns' $1,750 and the partners' $1,500 stand level after them (the cold read: the two
   second prices stood 22.4 px apart); after that each door runs on as its own column, as CSS Day's packages do (the cold reader of A refined: every
   level padded to line up across had left voids inside the campaigns' $1,750 and $5,000). The shorter first row keeps
   its words at the top and the white under them. A door's list closes on a rule where the doors stand side by side;
   where they stand one under another, below 1212 px, the next door's own rule closes it (the reader: a door's closing
   rule and the next one's head rule bracketed an empty band on a phone). */
.set-a .lvs.more { border-bottom: 0; }
.set-a .lvr { margin-top: 0; }
@media (max-width: 1211px) { .set-a .lvs { border-bottom: 0; } }
/* The doors stand side by side only where each door's first piece holds one line: the campaigns' "State House, state
   Senate and local races" needs a column of about 332 px, and where it ran to two lines beside the partners' one-line "A
   Partner Member" the two rows under them stood on two levels, 20 px apart (November 7, 2026: from 761 to 791 px, two
   doors across, and from 1101 to 1211 px, three across). So the page keeps its tablet form, two doors across, from 792 to
   1211 px, and its laptop form, three across with the photograph on the third, from 1212 px; below 792 px the doors
   stand one under another, as on a phone. */
@media (min-width: 792px) and (max-width: 1211px) {
  /* on a tablet the campaigns and partners side by side, national partners under them at the width of one */
  .set-a .doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(7, auto); column-gap: 16px; row-gap: 0; }
  .set-a .door { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .set-a .door > * { align-self: start; }
  .set-a .door > .lv1 { align-self: stretch; display: grid; }
  .set-a .d-national { grid-column: 1; grid-row: 5 / span 3; margin-top: var(--r); }
}
@media (min-width: 1212px) {
  .set-a .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 56px; }
  .set-a .door { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .set-a .door > * { align-self: start; }
  .set-a .door > .lv1 { align-self: stretch; display: grid; }
}

/* A's form on A's own three columns: its head over the campaigns' door, the form across the other two doors */
@media (min-width: 1212px) {
  .set-a .sp-count .formside { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; }
  .set-a .sp-count .sf { grid-column: 2 / 4; }
}

/* ---- B, the rate card, on the site's own rows (the board page's grid): each door's head in the first column on its
   rule, its line beside it on the same rule and first baseline, then its prices across the other four columns as the
   lines of one rate card, the price, what it is, what it gets and Open or Taken each in a column of its own, so the
   figures read down one edge; every open line is a way into the form (the board page's seat cards) ------------------- */
.set-b .sp-card { padding-top: var(--s); }
.set-b .rc + .rc { margin-top: var(--r); }
.set-b .rch h2 { border-top: 1px solid var(--line); padding-top: calc(var(--rule-cap) - 1px - var(--h3-over)); font-size: 28px; line-height: 1.1; color: var(--blue); }
.set-b .rch .dsay { margin-top: calc(var(--g) - var(--h3-under) - var(--p-over)); max-width: var(--measure); }
.set-b .rls { list-style: none; margin-top: calc(var(--g) - var(--p-under)); border-bottom: 1px solid var(--line); }
.set-b .rl { border-top: 1px solid var(--line); }
.set-b .rlk { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; column-gap: 16px; align-items: first baseline; color: inherit; text-decoration: none;
  padding: calc(var(--rule-cap) - 1px - var(--pr-over)) 0 calc(var(--rule-cap) - var(--d-under)); }
.set-b .c-pr { grid-column: 1; grid-row: 1 / 3; display: flex; flex-wrap: wrap; align-items: baseline; }
.set-b .c-pr .per { margin-left: 0; flex-basis: 100%; margin-top: calc(var(--c-step) - var(--pr-under) - var(--k-over)); }
.set-b .c-wt { grid-column: 2; font: 600 16px/1.25 "Libre Franklin", sans-serif; }
.set-b .c-gt { grid-column: 2; margin-top: calc(var(--c-step) - var(--k-under) - var(--d-over)); font: 400 16px/1.4 "Libre Franklin", sans-serif; text-wrap: pretty; }
.set-b .c-st { grid-column: 3; grid-row: 1; justify-self: end; }
.set-b .state { display: inline-flex; align-items: baseline; font: 600 16px/1.25 "Libre Franklin", sans-serif; color: #000; white-space: nowrap; }
.set-b a .state::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); }
.set-b a.rlk:hover .state::after { transform: translate(2px, -1.5px) rotate(45deg); }
.set-b .rl.taken .pr, .set-b .rl.taken .c-wt, .set-b .rl.taken .c-gt, .set-b .rl.taken .per { color: var(--quiet); }
@media (min-width: 1212px) {
  .set-b .sp-card .wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; }
  .set-b .rc { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
  .set-b .rch { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
  .set-b .rch h2 { grid-column: 1; }
  /* the line beside the head, its rule split from the head's at the column gap, its first baseline on the head's */
  .set-b .rch .dsay { grid-column: 2 / 6; margin-top: 0; max-width: none; border-top: 1px solid var(--line);
    padding: calc(var(--rule-cap) - 1px - var(--h3-over) + 5.1px) max(0px, calc(100% - var(--measure))) 0 0; }
  .set-b .rls { grid-column: 2 / 6; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
  .set-b .rl { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .set-b .rlk { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 16px; }
  .set-b .c-pr { grid-row: 1; flex-wrap: nowrap; }
  .set-b .c-pr .per { flex-basis: auto; margin: 0 0 0 8px; }
  .set-b .c-wt { grid-column: 2; grid-row: 1; padding-right: 8px; }
  .set-b .c-gt { grid-column: 3; grid-row: 1; margin-top: 0; padding-right: 8px; }
  .set-b .c-st { grid-column: 4; justify-self: start; }
}

/* B on a phone: the price and its state on one line, what it is and what it gets under them across the card */
@media (max-width: 760px) {
  .set-b .rlk { grid-template-columns: minmax(0, 1fr) auto; }
  .set-b .c-pr { grid-column: 1; grid-row: 1; flex-wrap: nowrap; }
  .set-b .c-pr .per { flex-basis: auto; margin: 0 0 0 8px; }
  .set-b .c-st { grid-column: 2; grid-row: 1; }
  .set-b .c-wt { grid-column: 1 / -1; grid-row: 2; margin-top: calc(var(--c-step) - var(--pr-under) - var(--k-over)); }
  .set-b .c-gt { grid-column: 1 / -1; grid-row: 3; }
}

/* ---- the form, A and B: its head in the first column and the form across the other four (the board page's
   application row), two fields to a row where they pair; the button and what happens next on one line --------------- */
/* the page's last section stands a section's space over the foot, as the board page's application does (108; 81 below
   1212 px): from the button's foot, or on a phone, where the line beside the button wraps under it, from that line's
   baseline (the cold read: 54 at every width) */
.sp-count { padding: var(--s) 0 var(--s); }
@media (max-width: 760px) { .sp-count { padding-bottom: calc(var(--s) - var(--p-under)); } }
.sp-count:focus, .sp .of:focus { outline: none; }
.sp-count .wrap { display: block; }
.sp-count .formside { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sp-count .formside::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--line); }
.sp-count h2 { margin-top: calc(var(--rule-cap) - 1px - var(--h2-over)); color: var(--blue); font-size: 44px; line-height: 1.1; }
.sp .sf { column-gap: 16px; row-gap: calc(var(--lh) - var(--l-over)); }
.sp-count .sf { margin-top: calc(var(--g) - var(--h2-under) - var(--l-over)); }
.sp .sf label { margin-bottom: calc(var(--lh) / 2 - var(--l-under)); }
.sp .sf 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; }
.sp .sf .act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: var(--l-over); }
.sp .next { font: 400 18px/27px "Libre Franklin", sans-serif; color: #000; }
/* what needs another look, under the button and its line, across the form (the board page's own) */
.sp .sf .act .status { flex-basis: 100%; margin-top: 0; }
/* the thanks after sending, in the form's place, on the same system: its head stands where the form's head stood, on its
   rule, a line and a half to the pick and what happens next, whose baseline stands a section's space over the foot, as the
   button's foot did (the board page's own thanks) */
.sp-count .done { grid-column: 1 / -1; }
.sp-count .done:focus, .sp .of .done:focus { outline: none; }
.sp .done p { margin-top: calc(var(--g) - var(--h2-under) - var(--p-over)); max-width: var(--measure); font: 400 18px/27px "Libre Franklin", sans-serif; color: #000;
  margin-bottom: calc(-1 * var(--p-under)); }
/* on a phone the section's own foot already takes off a line's room under its baseline (above), so the thanks takes none */
@media (max-width: 760px) { .sp .done p { margin-bottom: 0; } }
@media (min-width: 761px) { .sp-count .sf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1212px) {
  .sp-count .formside { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; }
  .sp-count .formside::before { display: none; }
  .sp-count h2, .sp-count .sf { margin-top: 0; border-top: 1px solid var(--line); }
  .sp-count h2 { grid-column: 1; padding-top: calc(var(--rule-cap) - 1px - var(--h2-over)); }
  .sp-count .sf { grid-column: 2 / 6; padding-top: calc(var(--rule-cap) + var(--h2-cap) - 1px - var(--l-over) - var(--l-cap)); }
}

/* ---- C, the order sheet, from the Virginia Democrats' district conventions page on ActBlue (the price list is the
   form): on a laptop the head and its line on the first two columns, held in view, and the form on the other three, its
   first rule on the head's capitals; each door a group of the form, each choice a white line on the book's paper with
   its price at the right, a taken one left on the paper, said and not chosen -------------------------------------- */
.set-c .sp-order { padding-bottom: var(--s); }
.set-c .osheet { padding-top: calc(var(--r) - var(--logo-foot) - var(--h1-over)); }
.set-c .of { display: block; }
.set-c #sp-form { display: block; margin-top: var(--r); }
.set-c .grp { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 0; min-width: 0; }
.set-c .grp + .grp { margin-top: var(--r); }
.set-c .grp legend { float: left; width: 100%; padding: calc(var(--rule-cap) - 1px - var(--h3-over)) 0 0; font: 700 28px/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.set-c .grp legend + * { clear: both; }
.set-c .grp .dsay { padding-top: calc(var(--g) - var(--h3-under) - var(--p-over)); max-width: var(--measure); }
.set-c .chs { list-style: none; margin-top: calc(var(--g) - var(--p-under)); display: grid; row-gap: 8px; }
.set-c .ch label { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; margin: 0;
  padding: calc(var(--c-foot) - var(--k-over)) 20px calc(var(--c-foot) - var(--d-under)) 18px; background: #fff; cursor: pointer; font: inherit; }
.set-c .ch label:hover, .set-c .ch:has(input:checked) label { box-shadow: inset 0 0 0 2px var(--blue); }
.set-c .ch input { grid-column: 1; grid-row: 1 / 3; width: 22px; height: 22px; margin: 0; accent-color: var(--blue); }
.set-c .ch .c-wt { grid-column: 2; grid-row: 1; font: 600 16px/1.25 "Libre Franklin", sans-serif; }
.set-c .ch .c-gt { grid-column: 2; grid-row: 2; margin-top: calc(var(--c-step) - var(--k-under) - var(--d-over)); font: 400 16px/1.4 "Libre Franklin", sans-serif; text-wrap: pretty; }
.set-c .ch .c-pr { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; }
.set-c .ch .c-pr .per { margin: 2px 0 0; }
.set-c .ch.taken label { background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.set-c .ch.taken .c-wt, .set-c .ch.taken .c-gt, .set-c .ch.taken .pr { color: var(--quiet); }
.set-c .who .fl { padding-top: calc(var(--g) - var(--h3-under) - var(--l-over)); display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; row-gap: calc(var(--lh) - var(--l-over)); }
.set-c .of input:not([type=radio]), .set-c .of textarea { background-color: #fff; }
.set-c .of .act { margin-top: var(--lh); }   /* the last field to the button a line, as the board page's form */
.set-c .of .act::after { content: ""; }
.set-c .of .done h2 { margin-top: 0; padding-top: calc(var(--rule-cap) - 1px - var(--h3-over)); border-top: 1px solid var(--line); font-size: 28px; line-height: 1.1; color: var(--blue); }
.set-c .of .done p { margin-top: calc(var(--g) - var(--h3-under) - var(--p-over)); }
@media (min-width: 761px) { .set-c .who .fl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1211px) { .set-c .of { margin-top: var(--r); } }
@media (min-width: 1212px) {
  .set-c .osheet { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .set-c { --h1-over: 8.4px; --h1-under: 8.4px; }   /* the head at 48 px in its two columns (Fraunces 48 on 1.05) */
  .set-c .say h1 { font-size: 48px; }
  .set-c .say { grid-column: 1 / 3; position: sticky; top: 40px; padding-right: 24px; }
  .set-c .of { grid-column: 3 / 6; margin-top: var(--h1-over); }   /* its first rule on the head's capitals */
}
/* what happens next, under the button (the plan's order: the form, then a call and an invoice) */
.set-c .of .act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* the Sources line, behind one small line: at the page's foot on white in A and B, under the lede on the paper in C */
.set-c .say .src { margin-top: calc(var(--g) - var(--p-under) - var(--src-over)); }
.sp-src { padding-bottom: var(--r); }
.sp-src .src { margin-top: 0; }
.sp .src summary { color: var(--quiet); }
.sp .src summary:hover { color: var(--blue); }
.sp .src summary::after { border-color: var(--blue); }

@media (max-width: 760px) {
  .sp h1 { font-size: 40px; }
  .sp .pr { font-size: 28px; }
  .sp-count h2 { font-size: 34px; }
  .set-c .ch label { padding-left: 14px; padding-right: 14px; column-gap: 12px; align-items: first baseline; }
  .set-c .ch input { align-self: center; grid-row: 1; }
  .set-c .ch .c-pr { grid-row: 1; flex-direction: row; align-items: baseline; }
  .set-c .ch .c-pr .per { margin: 0 0 0 6px; }
  .set-c .ch .c-gt { grid-column: 2 / -1; }
  .set-c .ch .pr { font-size: 24px; }
}