/* McNew for Shakopee City Council: first assembled draft (2026-10-31).
   Assembled from the parts the creator chose (see site/NOTES.md):
   frame = B3 Broadsheet; top bar + hero = EB13 lead (eb9-neo, block 2, photo 2,
   thin logo bar, equal gap); About = B3 article + B4 proof drawing + A v7;
   Endorsements = D3; Life in Shakopee = C2 Broadsheet; block index = B4 lots.
   One palette (C11), one set of type roles, one motion rule:
   things draw or fade in once when they come into view; reduced motion shows
   the final frame. */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-var-sub.woff") format("woff"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url("../assets/fonts/oldstandard-400-latin.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url("../assets/fonts/oldstandard-700-latin.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url("../assets/fonts/oldstandard-400italic-latin.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("../assets/fonts/b612mono-sub.woff") format("woff"); font-weight: 400; font-display: swap; }

/* ------------------------------------------------------------------ tokens */
:root {
  /* C11: Carter's logo colours */
  --paper: #f2ede4;
  --paper2: #f8f5ef;
  --navy: #0b2454;
  --red: #a31112;
  --gold: #e8a33d;
  --muted: #4a5468;          /* 6.5:1 on paper, 7.0:1 on paper2 */
  --on-navy: #f8f5ef;        /* 13.8:1 on navy */
  --muted-on-navy: #b8c0d2;  /* 8.25:1 on navy */
  --hair: rgba(11, 36, 84, .22);
  --grid: rgba(11, 36, 84, .065);
  --headshot-bg: #d8ccb6;

  /* one set of type roles */
  --display: "Archivo", "Inter", Arial, sans-serif;   /* headlines (EB5 "middle" weight) */
  --serif: "Old Standard", Georgia, serif;            /* his words */
  --ui: "Inter", Arial, sans-serif;                   /* labels, buttons, names */
  --mono: "B612 Mono", Consolas, monospace;           /* figures and drawing labels */
  --d-wt: 640; --d-st: 90%; --d-ls: -.025em;

  /* the sheet (EB13 hero geometry, used by the whole page) */
  --o: 16px;    /* window edge to outer border */
  --z: 26px;    /* strip between the borders */
  --p: max(36px, calc(50vw - 684px));   /* inner border to the grid; keeps the grid at most 1284 px wide */
  --g: 24px;    /* gutter */
  --bar: 84px;  /* top bar height */
  --cols: 12;
  --ease: cubic-bezier(.16, .84, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--paper); color: var(--navy); font-family: var(--ui); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.navy :focus-visible { outline-color: var(--gold); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--navy); color: var(--paper); padding: 8px 14px; font: 600 14px var(--ui); }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------------ the sheet: outer border, inner border, the margin between them (EB13) */
.sheet { position: relative; margin: var(--o); padding: var(--z); counter-reset: zone; }
.inner { position: relative; padding: 0 var(--p); }
.ln { position: absolute; background: var(--navy); pointer-events: none; z-index: 3; }
/* V24: the top and bottom lines too, so no line of the frame comes out 1 screen pixel here and 2 there */
.o-t { top: 0; left: 0; right: 0; height: var(--l1, 1px); transform-origin: left; }
.o-b { bottom: 0; left: 0; right: 0; height: var(--l1, 1px); }
/* each side is one line, top to bottom (V2: two pieces landed on different pixels at 125 % scaling). Their thickness
   is a whole number of the screen's own pixels (--l1, --l2, set by js/site.js), so at 125 % scaling or any zoom
   the left and right lines come out the same, the thinner way (round 9: "I prefer both sides to have the thinner
   variation") */
.o-l, .o-r { width: var(--l1, 1px); top: 0; bottom: 0; }
.o-l { left: 0; } .o-r { right: 0; }
.i-t { top: var(--z); left: var(--z); right: var(--z); height: var(--l2, 2px); transform-origin: left; }
.i-b { bottom: var(--z); left: var(--z); right: var(--z); height: var(--l2, 2px); }
.i-l, .i-r { width: var(--l2, 2px); top: var(--z); bottom: var(--z); }
.i-l { left: var(--z); } .i-r { right: var(--z); }
/* V24: the top lines draw in across (drawX, under "motion"), and a box kept at its end, scaleX(1), is still a
   transformed box, which is painted out to the next whole screen pixel: at 110 % the outer top line ran 1 px past
   the right-hand line, a spur at the top right corner. Held at the start until it runs, let go at the end. The same
   for each section's double rule, which its run-ons continue: kept at scaleX(1), its thin line sat a pixel lower
   than theirs at 110 % */
@media (prefers-reduced-motion: no-preference) {
  .ln.o-t, .ln.i-t, .js [data-reveal] > .grid:first-child > .drule { animation-fill-mode: backwards; } }

/* the margin strips (V16c, the creator's pick, 2026-10-31: option 7a, flipped at the top). Along the bottom a heavy
   navy bar runs in from the outer line under the footer's logo and steps down into three squares (navy at 70, 40,
   15 %); at the right sit the seven colour squares of the site's inks. The top is the same flipped left to right:
   the bar comes in from the right, the colour squares sit at the left, red outermost. The bar covers the frame
   lines it meets (outer line, inner line, outer side line) so it sits flush with them at any display scaling.
   Earlier looks (the V1-V12 ticks, the V16 and V16b trials) are in git history and site/NOTES.md.
   Each strip's <i>s: 1 the bar, 2-4 the stepping squares, 5-11 the colour squares (--j places them from the edge) */
.zones { position: absolute; z-index: 3; left: var(--p); right: var(--p); height: calc(var(--z) - 1px); pointer-events: none;   /* over the top bar's paper (2), level with the frame lines */
  --cw: calc((100% + var(--g)) / var(--cols)); --s: var(--sq, 13px); --gap: var(--sqg, 3px);   /* whole screen pixels (V24, js/site.js) */
  --reach: calc(var(--cw) * 2.5 - var(--g) / 2);        /* the bar's inner end, from the grid's edge */
  --out-l: calc(-1 * (var(--p) + var(--z))); --out-r: var(--out-l); }   /* to the outer side lines' outer edges */
.zones-t { top: calc(1px - var(--z)); }
.zones-b { bottom: calc(1px - var(--z)); }
.zones i { position: absolute; top: calc(50% - var(--s) / 2); width: var(--s); height: var(--s); background: var(--navy); }
.zones i:nth-child(n+12) { display: none; }
.zones i:first-child { width: auto; height: auto; }
.zones-t i:first-child { top: -1px; bottom: calc(-1 * var(--l2, 2px)); left: calc(100% - var(--reach)); right: var(--out-r); }
.zones-b i:first-child { top: calc(-1 * var(--l2, 2px)); bottom: -1px; left: var(--out-l); right: calc(100% - var(--reach)); }
.zones i:nth-child(2) { --k: 0; background: rgba(11, 36, 84, .7); }
.zones i:nth-child(3) { --k: 1; background: rgba(11, 36, 84, .4); }
.zones i:nth-child(4) { --k: 2; background: rgba(11, 36, 84, .15); }
.zones-b i:nth-child(n+2):nth-child(-n+4) { left: calc(var(--reach) + var(--gap) + var(--k) * (var(--s) + var(--gap))); }
.zones-t i:nth-child(n+2):nth-child(-n+4) { right: calc(var(--reach) + var(--gap) + var(--k) * (var(--s) + var(--gap))); }
.zones i:nth-child(5) { --j: 6; }
.zones i:nth-child(6) { --j: 5; background: rgba(11, 36, 84, .7); }
.zones i:nth-child(7) { --j: 4; background: rgba(11, 36, 84, .4); }
.zones i:nth-child(8) { --j: 3; background: rgba(11, 36, 84, .15); }
.zones i:nth-child(9) { --j: 2; background: var(--paper2); box-shadow: inset 0 0 0 var(--l1, 1px) var(--navy); }   /* V24: one whole screen pixel; 1px came out a dark and a grey pixel at 110-175 % */
.zones i:nth-child(10) { --j: 1; background: var(--gold); }
.zones i:nth-child(11) { --j: 0; background: var(--red); }
.zones-b i:nth-child(n+5) { right: calc(var(--j) * (var(--s) + var(--gap))); }
.zones-t i:nth-child(n+5) { left: calc(var(--j) * (var(--s) + var(--gap))); }
/* each section's double rule runs on into the side margins, with its number from the block index */
.sec > .grid:first-child, .foot > .grid:first-child { counter-increment: zone; }
.foot > .grid:first-child { counter-increment: none; }
.sec > .grid:first-child::before, .sec > .grid:first-child::after, .foot > .grid:first-child::before, .foot > .grid:first-child::after {
  content: counter(zone, decimal-leading-zero); position: absolute; top: 0; width: calc(var(--z) + var(--l2, 2px)); height: 7px;
  /* V24: drawn exactly as the double rule is (a 3 px and a 1 px border on a 7 px box, from the same top), so the
     browser rounds both alike and their rows of pixels line up at every zoom; they were gradients, which came out
     soft at 125 %. The line-height keeps the number where it was (14 px down) */
  border-top: 3px solid var(--navy); border-bottom: 1px solid var(--navy);
  font: 400 10px/32px var(--mono); letter-spacing: .02em; text-align: center; color: var(--muted); pointer-events: none; }
.foot > .grid:first-child::before, .foot > .grid:first-child::after { content: ""; }
/* each box's bars run on under the frame lines on either side (drawn over them in the same navy), so at no zoom
   level does a sliver of paper show where a bar meets a line (the creator, round 7: "Yes, fix it."). V24: over the
   inner line's whole width, so the corner stays square where the pillar sheet starts the lines again inside the
   bar (the creator's image 6); the padding keeps the number centred between the lines as before */
.sec > .grid:first-child::before, .foot > .grid:first-child::before { left: calc(-1 * var(--p) - var(--z)); padding-right: calc(var(--l2, 2px) - 1px); }
.sec > .grid:first-child::after, .foot > .grid:first-child::after { left: calc(100% + var(--p) - var(--l2, 2px)); padding-left: calc(var(--l2, 2px) - 1px); }
/* the double rule's column ticks (V4): where each column starts and ends, drawn by js/site.js */
.drule { position: relative; }
/* V24 (the creator's image 7): the ticks start at the top of the thin line and overlap it, rather than 1 px below
   the box. A border is rounded down to whole screen pixels and the box below it is not, so at 125 % a tick placed
   below the line began a quarter pixel lower and, where the rule fell on a half pixel, a pixel of paper showed */
.ticks { position: absolute; left: 0; right: 0; top: 100%; height: 8px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); pointer-events: none; }
.ticks i { border-left: 1px solid var(--navy); border-right: 1px solid var(--navy); }
.navy .ticks i { border-color: var(--on-navy); }
.grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 1.5px solid var(--navy); font: 600 14px/1 var(--ui); letter-spacing: .01em; white-space: nowrap; transition: transform .2s var(--ease), background-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn.solid { background: var(--navy); color: var(--paper2); }

/* ------------------------------------------------------------------ top bar: sticky; no logo until the title block has gone (EB1) */
/* z-index 2 as in EB13's hero.css: under the frame's lines (3), so the inner top line shows; above the content (1) */
.topbar { position: sticky; top: 0; z-index: 2; height: var(--bar); display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--navy); }
.topbar::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--p) + 3px); right: calc(-1 * var(--p) + 3px); background: var(--paper); }
.mainnav { display: flex; gap: 44px; }
.mainnav a { font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; padding: 4px 0;
  background: linear-gradient(var(--navy), var(--navy)) no-repeat 0 100% / 0 1px; transition: background-size .35s var(--ease); }
.mainnav a:hover { background-size: 100% 1px; }
/* the section bar (vetting 4): the section you are in, marked with the gold underline */
.mainnav a[aria-current] { font-weight: 600; background-image: linear-gradient(var(--gold), var(--gold)); background-size: 100% 3px; }
.menu { display: none; }
.menu-panel { display: none; }
.topbar .right { display: flex; align-items: center; }

.bar-logo { display: block; width: 0; margin-left: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: scale(.6); transform-origin: right center; }
html.handed .bar-logo, html:not(.js) .bar-logo { width: 64px; margin-left: 22px; opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .bar-logo { transition: width .3s var(--ease), margin-left .3s var(--ease), opacity .3s ease-out, transform .3s var(--ease), visibility 0s linear .3s; }
  html.handed .bar-logo { transition: width .3s var(--ease), margin-left .3s var(--ease), opacity .3s ease-out, transform .3s var(--ease), visibility 0s; }
}

/* his logo, shown above its own navy band, with the thin bar and equal space
   (EB10 thin + EB12 equal; CSS only, the PNG is not changed; a proposal for Carter) */
.tb .c-logo img, .bar-logo img {
  aspect-ratio: 1680 / 1020; height: auto; max-width: none;
  object-fit: cover; object-position: 50% 0; box-sizing: content-box;
}
/* the top bar keeps the logo whole, with its own thick band (V14) */
.bar-logo img { width: 64px; aspect-ratio: 1680 / 1200; object-fit: fill; }

/* ------------------------------------------------------------------ hero (EB13 lead) */
.hero { padding: 40px 0 64px; row-gap: 0; }
.hero h1 { grid-column: 1 / -1; font-family: var(--display); font-weight: var(--d-wt); font-stretch: var(--d-st); font-size: clamp(40px, 7.18vw, 128px);
  line-height: .88; letter-spacing: var(--d-ls); margin: 0 0 40px -.045em; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .02em .02em; margin: -.04em -.02em -.02em; }
.hero h1 .w > span { display: inline-block; }
.hero h1 .dot { display: inline-block; width: .145em; height: .145em; margin-left: .045em; background: var(--red); color: transparent; overflow: hidden; vertical-align: baseline; text-indent: -9em; }
.hero h1 br.m { display: none; }

.shot { grid-column: 1 / span 4; position: relative; }
.shot .frame { position: relative; aspect-ratio: 1 / 1.04; overflow: hidden; background: var(--headshot-bg); border: 2px solid var(--navy); }
.shot .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.shot .cap { position: absolute; left: 0; right: 0; bottom: -40px; font: 12px/1 var(--mono); color: var(--muted); }

.hero .side { grid-column: 5 / span 8; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.hero .deck { font-family: var(--serif); font-style: italic; font-size: 41px; line-height: 1.3; letter-spacing: .002em; max-width: 690px; margin-top: -6px; }

/* the title block, neoplastic (neo.css + eb8/eb9: 2 px lines, red cell gone) */
.tb { display: grid; border: 2px solid var(--navy); background: var(--navy); gap: 2px;
  grid-template-columns: 150fr 284fr 34fr 134fr 124fr 68fr;
  grid-template-areas:
    "logo seat seat cand cand cand"
    "logo vol  don  don  yard yard"; }
.tb > * { position: relative; background: var(--paper2); }
.tb .c-logo { grid-area: logo; display: flex; align-items: center; justify-content: center; padding: 14px 12px; }
.tb .c-logo img { width: 100%; max-width: 118px; border-bottom: 4px solid var(--navy); padding-bottom: calc(min(100%, 118px) * 57 / 1680); }
.tb .f { padding: 15px 18px 17px; }
.tb .seat { grid-area: seat; background: var(--navy); color: var(--on-navy); }
.tb .cand { grid-area: cand; }
.tb .k { display: block; font: 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.tb .seat .k { color: var(--muted-on-navy); }
.tb .v { display: block; font: 600 16px/1.2 var(--ui); }
.tb .n { position: absolute; top: 12px; right: 12px; font: 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.tb .seat .n { color: var(--muted-on-navy); }
.tb .act.gold .n { color: var(--navy); }
.tb .act { display: flex; align-items: flex-end; justify-content: flex-start; min-height: 84px; padding: 14px 16px 15px; font: 600 16px/1.15 var(--ui); text-align: left; transition: background-color .2s; }
.tb .act .l { text-wrap: balance; }
.tb .act.gold { grid-area: vol; background: var(--gold); color: var(--navy); }
.tb .act.don { grid-area: don; }
.tb .act.yard { grid-area: yard; }
.tb .act:not(.gold):hover { background: #ebe4d6; }
.tb .act.gold:hover { background: #eeb058; }
.tb .act:focus-visible { outline: 3px solid var(--navy); outline-offset: -9px; }

/* V18: the Volunteer hover. A dimension line (a line with a tick at each end, the drawing's way of measuring) draws
   under the word from left to right: gold on the top bar's navy button, navy on the title block's cells, so the
   two read as one gesture. The same on keyboard focus; with reduced motion it is simply there (no transition). */
.topbar .btn.solid:hover, .topbar .btn.solid:focus-visible { transform: none; }
.topbar .btn .l, .tb .act .l { position: relative; }
.topbar .btn .l::after, .tb .act .l::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 5px; pointer-events: none;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .42s var(--ease); }
.topbar .btn .l::after { color: var(--gold); }
.topbar .btn .l { transition: transform .3s var(--ease); }
.topbar .btn:hover .l, .topbar .btn:focus-visible .l { transform: translateY(-2px); }
.topbar .btn:hover .l::after, .topbar .btn:focus-visible .l::after, .tb .act:hover .l::after, .tb .act:focus-visible .l::after { clip-path: inset(0 0 0 0); }
.tb .act .l::after { bottom: -6px; }
.tb .act.gold:hover { background: var(--gold); }

/* V18: the first screen fits the window, down to "Carter McNew · Shakopee, MN", at 100 % zoom on a desktop
   (about 1920 x 950, 1536 x 730, 1440 x 790, 1366 x 650). The hero sizes to the window's height as well as
   its width: --fit is the height from the top bar's foot to the window's foot, and the headline, the gaps,
   the photo, the lede and the title block's cells each take the smaller of their width size and a share of
   --fit. The headline also stops growing where the grid stops (1440 px), so it keeps its two lines on wide
   screens (it broke onto three above about 1500 px). Desktop and mid widths only; the phone is unchanged.
   Selectors are .grid.hero so they hold over the shared mid-width rules further down. */
:root { --bar: clamp(64px, 8.8vh, 84px); }
@media (max-width: 760px) { :root { --bar: 60px; } }
.hero { --vh: 100vh; --fit: calc(var(--vh) - var(--o) - var(--z) - var(--bar)); --h1w: min(7.18vw, 103.4px); --deckw: 41px; --actw: 84px; }
@supports (height: 100svh) { .hero { --vh: 100svh; } }
@media (min-width: 761px) {
  .grid.hero { --h1: max(40px, min(var(--h1w), var(--fit) * .158));
    --pt: clamp(14px, calc(var(--fit) * .052), 40px); --gap: clamp(18px, calc(var(--fit) * .05), 40px);
    --capgap: clamp(28px, calc(var(--fit) * .05), 40px);
    /* what is left for the photo: the headline is two lines at .88, the caption's line sits --capgap under the
       photo, and 14 px of paper is left under the caption */
    --row: calc(var(--fit) - var(--pt) - var(--h1) * 1.76 - var(--gap) - var(--capgap) - 14px);
    padding-top: var(--pt); }
  .grid.hero h1 { font-size: var(--h1); margin-bottom: var(--gap); }
  .grid.hero .shot .frame { max-height: max(240px, var(--row)); }
  .grid.hero .shot .cap { bottom: calc(-1 * var(--capgap)); }
  .grid.hero .side { gap: clamp(16px, calc(var(--fit) * .036), 28px); }
  .grid.hero .deck { font-size: max(22px, min(var(--deckw), var(--fit) * .056)); }
  .grid.hero .tb .f { padding: clamp(10px, calc(var(--fit) * .02), 15px) 18px clamp(11px, calc(var(--fit) * .022), 17px); }
  .grid.hero .tb .k { margin-bottom: clamp(6px, calc(var(--fit) * .011), 9px); }
  .grid.hero .tb .act { min-height: clamp(54px, calc(var(--fit) * .11), var(--actw)); }
}
@media (max-width: 1180px) { .hero { --h1w: calc((100vw - 156px) * .0785); --deckw: 30px; } }
@media (max-width: 960px) { .hero { --deckw: 28px; --actw: 72px; } }

/* V18: other first screens to compare (?hero=b, c, d; the top bar follows, or ?bar= on its own). A is the
   first screen as it was, fitted. His words are the same in each; only the layout and the top bar change.
   --gw is the grid's width; the nav numbers are the sections' own (the margins' and the block index's). */
.mainnav .no, .bar-rule { display: none; }
.hero, .topbar { --gw: min(1284px, 100vw - 156px); }

/* ---- bar B: numbered, on the grid, over the sections' double rule */
html[data-bar="b"] .topbar { border-bottom: 0; }
html[data-bar="b"] .topbar::before { bottom: -9px; }
html[data-bar="b"] .bar-rule { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border-top: 3px solid var(--navy); border-bottom: 1px solid var(--navy); }
html[data-bar="b"] .bar-rule .ticks { top: calc(100% + 1px); height: 6px; }
html[data-bar="b"] .mainnav .no { display: inline-block; margin-right: 9px; font: 400 11px/1 var(--mono); letter-spacing: .02em; color: var(--muted); vertical-align: 1px; }
html[data-bar="b"] .mainnav a[aria-current] .no { color: var(--navy); }
/* V29: bar C's numbers on a computer only; the phone keeps the top bar as it was (A) */
@media (min-width: 761px) {
  html[data-bar="c"] .mainnav .no { display: inline-block; margin-right: 9px; font: 400 11px/1 var(--mono); letter-spacing: .02em; color: var(--muted); vertical-align: 1px; }
  html[data-bar="c"] .mainnav a[aria-current] .no { color: var(--navy); }
}
@media (min-width: 761px) {
  html[data-bar="b"] .mainnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); width: calc((100% + var(--g)) * 8 / 12 - var(--g)); }
  html[data-bar="b"] .mainnav a { justify-self: start; }
}

/* ---- bar C: the links over the type column, so the bar and the hero share one left edge */
@media (min-width: 1181px) {
  html[data-bar="c"] .mainnav { margin-left: calc((100% + var(--g)) * 4 / 12); gap: 40px; }
}

/* ---- bar D: a row of cells, like the title block: number above, name below, lines that run into the frame's */
@media (min-width: 761px) {
  html[data-bar="d"] .topbar { align-items: stretch; border-bottom: 0; }
  /* the bar's foot line runs frame line to frame line, like the sheet's foot line under hero D */
  html[data-bar="d"] .topbar::after { content: ""; position: absolute; left: calc(-1 * var(--p)); right: calc(-1 * var(--p)); bottom: 0; height: 2px; background: var(--navy); }
  html[data-bar="d"] .mainnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: calc((100% + var(--g)) * 8 / 12); }
  html[data-bar="d"] .mainnav a { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px 11px; background: none; transition: background-color .2s; }
  html[data-bar="d"] .mainnav a:first-child { padding-left: 0; }
  html[data-bar="d"] .mainnav a + a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--navy); }
  html[data-bar="d"] .mainnav a:last-child { box-shadow: inset -1px 0 var(--navy); }
  html[data-bar="d"] .mainnav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
  html[data-bar="d"] .mainnav a:first-child::after { left: 0; }
  html[data-bar="d"] .mainnav a:hover::after { transform: none; }
  html[data-bar="d"] .mainnav a[aria-current]::after { transform: none; height: 3px; background: var(--gold); }
  html[data-bar="d"] .mainnav a:hover { background: rgba(11, 36, 84, .04); }
  html[data-bar="d"] .mainnav .no { display: block; font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
  html[data-bar="d"] .mainnav a[aria-current] .no { color: var(--navy); }
  html[data-bar="d"] .topbar .right { align-self: stretch; }
  /* Volunteer: a navy cell over columns 11-12, run into the corner against the frame (the title block takes the
     lower corner under hero D); the logo, when it arrives, sits to its left */
  html[data-bar="d"] .topbar .btn.solid { height: auto; align-self: stretch; justify-content: flex-start; align-items: flex-end; width: calc((var(--gw) - 5 * var(--g)) / 6 + var(--p)); margin-right: calc(-1 * var(--p)); padding: 0 14px 12px; border: 0; }
  html[data-bar="d"] .bar-logo { order: -1; align-self: center; }
  html.handed[data-bar="d"] .bar-logo, html:not(.js)[data-bar="d"] .bar-logo { margin: 0 22px 0 0; }
}

/* ---- hero B: a front page. The headline as a one-line banner over a rule; under it three columns with column
   rules, as in the broadsheet sections: his words as the standfirst, the photo, the title block as the index box */
@media (min-width: 961px) {
  html[data-hero="b"] .grid.hero { --h1: calc(var(--gw) * .0546); --rowb: min(calc(var(--fit) - var(--pt) - var(--h1) * .9 - var(--gap) * 2 - 15px), calc((var(--gw) + var(--g)) / 3 * 1.18));
    grid-template-rows: auto var(--rowb); }
  html[data-hero="b"] .hero h1 { white-space: nowrap; margin-bottom: var(--gap); padding-bottom: calc(var(--gap) * .8); border-bottom: 1px solid var(--navy); }
  html[data-hero="b"] .hero h1 br { display: none; }
  html[data-hero="b"] .hero .side { display: contents; }
  html[data-hero="b"] .hero .deck { grid-column: 1 / span 4; grid-row: 2; margin: -.12em 0 0; font-size: max(22px, min(43px, var(--rowb) * .094, var(--gw) * .0325)); line-height: 1.28; text-wrap: pretty; }
  html[data-hero="b"] .shot { grid-column: 5 / span 4; grid-row: 2; display: flex; flex-direction: column; }
  html[data-hero="b"] .shot::before, html[data-hero="b"] .shot::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair); }
  html[data-hero="b"] .shot::before { left: calc(var(--g) / -2); }
  html[data-hero="b"] .shot::after { right: calc(var(--g) / -2); }
  html[data-hero="b"] .grid.hero .shot .frame { flex: 1 1 0; min-height: 0; aspect-ratio: auto; max-height: none; }
  html[data-hero="b"] .grid.hero .shot .cap { position: static; margin-top: 12px; }
  html[data-hero="b"] .hero .tb { grid-column: 9 / span 4; grid-row: 2; align-self: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.5fr) auto auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "logo logo" "seat seat" "cand cand" "vol vol" "don yard"; }
  html[data-hero="b"] .grid.hero .tb .act { min-height: 0; }
  html[data-hero="b"] .hero .tb .c-logo img { max-width: 132px; }
}

/* ---- hero C: the portrait. His photo stands the height of the first screen at the left; the headline (three
   lines), his words and the title block stack beside it, the photo's top on the headline's caps and its foot on
   the title block's foot */
@media (min-width: 961px) {
  html[data-hero="c"] .grid.hero { --h1: max(40px, min(calc(((var(--gw) + var(--g)) * 2 / 3 - var(--g)) / 7.05), var(--fit) * .132));
    --rowc: min(calc(var(--fit) - var(--pt) - var(--capgap) - 14px), calc((var(--gw) + var(--g)) / 3 * 1.62));
    grid-template-rows: auto minmax(0, 1fr); min-height: calc(var(--rowc) + var(--pt) + 64px); }
  html[data-hero="c"] .hero h1 { grid-column: 5 / -1; grid-row: 1; margin-top: -.07em; }
  html[data-hero="c"] .hero h1 br.m:first-of-type, html[data-hero="c"] .hero h1 br.d { display: inline; }
  html[data-hero="c"] .hero h1 br.m:last-of-type { display: none; }
  html[data-hero="c"] .shot { grid-column: 1 / span 4; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  html[data-hero="c"] .grid.hero .shot .frame { flex: 1 1 0; min-height: 0; aspect-ratio: auto; max-height: none; }
  html[data-hero="c"] .grid.hero .shot .frame img { object-position: 50% 22%; }
  html[data-hero="c"] .hero .side { grid-column: 5 / -1; grid-row: 2; }
  html[data-hero="c"] .grid.hero .deck { margin-top: 0; font-size: max(22px, min(var(--deckw), var(--fit) * .047)); }
}
@media (min-width: 961px) and (max-width: 1180px) {
  html[data-hero="c"] .grid.hero .deck { font-size: max(20px, min(26px, var(--fit) * .04)); }
}

/* ---- hero D: a drawing sheet. Graph paper from frame line to frame line, the title block in the sheet's lower
   right corner against the frame (where a drawing keeps it), standing on the sheet's foot line */
@media (min-width: 761px) {
  html[data-hero="d"] .grid.hero { --u: calc((var(--gw) + var(--g)) / 48); padding-bottom: 0; margin-bottom: 64px;
    --row: calc(var(--fit) - var(--pt) - var(--h1) * 1.76 - var(--gap) - var(--capgap) - 30px); }
  html[data-hero="d"] .hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--p)); right: calc(-1 * var(--p));
    background:
      linear-gradient(90deg, rgba(11, 36, 84, .1) 1px, transparent 1px) var(--p) 0 / calc(var(--u) * 4) 100%,
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) var(--p) 0 / var(--u) 100%,
      linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% var(--u);
    -webkit-mask: linear-gradient(#000, #000); }
  html[data-hero="d"] .hero::after { content: ""; position: absolute; left: calc(-1 * var(--p)); right: calc(-1 * var(--p)); bottom: 0; height: 2px; background: var(--navy); }
  html[data-hero="d"] .grid.hero .shot .cap { position: static; margin-top: calc(var(--capgap) - 12px); padding-bottom: 14px; }
  html[data-hero="d"] .hero .tb { margin-right: calc(-1 * var(--p)); border-right: 0; border-bottom: 0; }
  html[data-hero="d"] .hero .side { gap: 0; }
  html[data-hero="d"] .hero .deck { margin-bottom: var(--gap); }
}

/* ---- the versions on a phone: B sets his words under the banner like a standfirst (C's phone rules removed, V29:
   the phone keeps A),
   D keeps its paper and foot line, the title block running frame line to frame line as the sheet's title strip */
@media (max-width: 760px) {
  .hero, .topbar { --gw: calc(100vw - 68px); }
  html[data-bar="b"] .bar-rule .ticks { display: none; }
  html[data-bar="b"] .topbar::before { bottom: 0; }
  html[data-hero="b"] .hero h1 { padding-bottom: 20px; border-bottom: 1px solid var(--navy); margin-bottom: 18px; }
  html[data-hero="b"] .hero .side { display: contents; }
  html[data-hero="b"] .hero .deck { order: 1; grid-column: 1 / -1; margin-bottom: 24px; }
  html[data-hero="b"] .shot { order: 2; }
  html[data-hero="b"] .hero .tb { order: 3; grid-column: 1 / -1; margin-top: 46px; }
  html[data-hero="d"] .hero { --u: calc((var(--gw) + var(--g)) / 24); padding-bottom: 0; margin-bottom: 40px; }
  html[data-hero="d"] .hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--p)); right: calc(-1 * var(--p));
    background: linear-gradient(90deg, rgba(11, 36, 84, .1) 1px, transparent 1px) var(--p) 0 / calc(var(--u) * 4) 100%,
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) var(--p) 0 / var(--u) 100%, linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% var(--u); }
  html[data-hero="d"] .hero::after { content: ""; position: absolute; left: calc(-1 * var(--p)); right: calc(-1 * var(--p)); bottom: 0; height: 2px; background: var(--navy); }
  html[data-hero="d"] .hero .tb { margin: 0 calc(-1 * var(--p)); border-left: 0; border-right: 0; border-bottom: 0; }
  html[data-bar="d"] .topbar { align-items: stretch; border-bottom: 0; }
  html[data-bar="d"] .topbar::after { content: ""; position: absolute; left: calc(-1 * var(--p)); right: calc(-1 * var(--p)); bottom: 0; height: 2px; background: var(--navy); }
  html[data-bar="d"] .menu { align-self: center; }
  html[data-bar="d"] .topbar .right { align-self: stretch; }
  html[data-bar="d"] .topbar .btn.solid { height: auto; align-self: stretch; margin-right: calc(-1 * var(--p)); padding: 0 18px; border: 0; }
  html[data-bar="d"] .bar-logo { order: -1; align-self: center; }
  html.handed[data-bar="d"] .bar-logo, html:not(.js)[data-bar="d"] .bar-logo { margin: 0 14px 0 0; }
}

/* ------------------------------------------------------------------ sections in the B3 frame */
.sec { position: relative; z-index: 1; padding-bottom: 128px; }
.drule { grid-column: 1 / -1; height: 7px; border-top: 3px solid var(--navy); border-bottom: 1px solid var(--navy); margin-bottom: 64px; transform-origin: left; }
.navy .drule { border-color: var(--on-navy); }

/* side channel (columns 1-2): each section's kicker as a broadsheet side-head */
.kick-side { grid-column: 1 / span 2; align-self: start; font: 600 12.5px/1.5 var(--ui); letter-spacing: .2em; border-top: 3px solid currentColor; padding-top: 12px; }
.h2 { font-family: var(--display); font-weight: var(--d-wt); font-stretch: var(--d-st); font-size: 72px; line-height: .94; letter-spacing: -.02em; text-wrap: balance; }
.sec-head { margin-bottom: 72px; align-items: start; }
.sec-head-main { grid-column: 3 / -1; }
.sec-deck { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 25px; line-height: 1.36; margin-top: 26px; max-width: 34em; }
.slogan { font-family: var(--display); font-weight: var(--d-wt); font-stretch: var(--d-st); letter-spacing: -.02em; line-height: .95; }

/* ------------------------------------------------------------------ About: B3's article */
.about-g { align-items: start; }
.about-g .sidech { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.tags { margin-top: 44px; }
.tags li { border-top: 1px solid var(--hair); padding: 10px 0 12px; font: 500 13.5px/1.4 var(--ui); }
.about-h { grid-column: 3 / -1; grid-row: 1; font-size: 64px; margin-bottom: 48px; }
/* V26: About's one red accent, the hero's red square full stop on its headline ("... FOR GOOD"): the point of the
   section, on paper. ?red=0 shows the plain full stop for comparison */
.about-h .dot { display: inline-block; width: .145em; height: .145em; margin-left: .045em; background: var(--red); color: transparent; overflow: hidden; vertical-align: baseline; text-indent: -9em; }
#about.red-off .about-h .dot { display: inline; width: auto; height: auto; margin: 0; background: none; color: inherit; overflow: visible; text-indent: 0; }
.colset { grid-column: 3 / span 6; grid-row: 2; columns: 2; column-gap: var(--g); column-rule: 1px solid var(--hair); font-family: var(--serif); font-size: 18.5px; line-height: 1.6; }
.colset p { hyphens: auto; }
.colset p + p { text-indent: 1.4em; }
.dropcap::first-letter { float: left; font: 700 92px/.8 var(--serif); margin: 7px 10px 0 0; }
.about-aside { grid-column: 10 / span 3; grid-row: 2; position: relative; }
.about-aside::before { content: ""; position: absolute; left: calc(var(--g) / -2 - var(--g)); top: 0; bottom: 0; width: 1px; background: var(--hair); }
.pull { border-top: 1px solid var(--navy); padding-top: 22px; font: italic 400 30px/1.25 var(--serif); text-indent: -.4em; }
.about-slogan { margin-top: 40px; font-size: 40px; }

/* ------------------------------------------------------------------ About: B4's proof drawing, as the figure */
.proof { grid-column: 3 / -1; grid-row: 3; margin-top: 80px; }
.pf-sheet { position: relative; padding: 40px 0 44px; background-color: var(--paper2);
  background-image:
    linear-gradient(rgba(11, 36, 84, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 36, 84, .09) 1px, transparent 1px),
    linear-gradient(rgba(11, 36, 84, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 36, 84, .045) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  border: 1px solid var(--navy); }
.pf-sheet::before, .pf-sheet::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--navy); border-style: solid; }
.pf-sheet::before { left: -8px; top: -8px; border-width: 1px 0 0 1px; }
.pf-sheet::after { right: -8px; bottom: -8px; border-width: 0 1px 1px 0; }
.pf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 32px; }
.pf-row { padding-top: 30px; padding-bottom: 34px; border-bottom: 1px dashed rgba(11, 36, 84, .28); align-items: start; }
.pf-row + .pf-subhead, .pf-row:has(+ .pf-grid:not(.pf-row)) { border-bottom: 0; }
.pf-legend { grid-column: 1 / span 3; padding-right: 8px; }
.pf-legend .v { font: 600 23px/1.15 var(--ui); letter-spacing: -.015em; }
.pf-legend .d { margin-top: 8px; font: 400 15px/1.4 var(--ui); color: var(--muted); }
.pf-track { grid-column: 4 / span 9; position: relative; }
.pf-ruler { height: 44px; position: relative; }
.pf-ruler i { position: absolute; bottom: 0; width: 1px; height: 8px; background: var(--navy); }
.pf-ruler i.maj { height: 14px; }
.pf-ruler b { position: absolute; bottom: 20px; transform: translateX(-50%); font: 400 11.5px/1 var(--mono); color: var(--navy); }
.pf-ruler::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--navy); }
.pf-ruler .unit { position: absolute; right: 100%; bottom: 0; margin-right: 18px; font: 400 11.5px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; color: var(--muted); }
.pf-dim { position: relative; height: 40px; margin-top: 2px; }
.pf-dim.split { height: 78px; }
.pf-ln { position: absolute; top: 19px; left: 0; height: 1px; background: var(--navy); transform-origin: left; }
.pf-ln::before, .pf-ln::after { content: ""; position: absolute; top: -9px; width: 1px; height: 19px; background: var(--navy); }
.pf-ln::before { left: 0; } .pf-ln::after { right: 0; }
/* V13: plain solid bars, no part-strength edge rows (V9's are gone). A bar is an odd number of pixels so
   it centres exactly on its 1 px line; V9's "thinner" is now the next centred size down (2 px less) */
.pf-bar { position: absolute; top: 15px; left: 0; height: 9px; background: var(--navy); transform-origin: left; }
.pf-cut { position: absolute; top: 8px; width: 1px; height: 23px; background: var(--navy); }
.pf-lab { position: absolute; top: 38px; font: 400 13.5px/1.35 var(--ui); color: var(--muted); padding-left: 10px; padding-right: 8px; border-left: 1px solid var(--hair); }
.pf-subhead { padding-top: 38px; padding-bottom: 2px; }
.pf-subhead .t { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; font: 400 12.5px/1 var(--mono); letter-spacing: .12em; }
/* V20: the heading's line is a different kind of line from the drawing's time lines (thin, with end ticks, ending
   on a year): the page's own heading rule, thick over thin as each section opens, running on to the sheet's edge */
.pf-subhead .t::after { content: ""; flex: 1; height: 6px;
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--navy), var(--navy)) 0 5px / 100% 1px no-repeat; }
.pf-note { grid-column: 4 / span 7; margin-top: 4px; font: 400 16px/1.5 var(--ui); }
/* V3: the drawing on its graph paper. js/site.js sets the paper's squares from the years
   (--u fine, --y = one year) and snaps every block to whole squares; the rules below put each
   darker line on a line of the paper. Without the script the layout above stands. */
.pf-sheet.snap { width: calc(var(--m) * var(--u) + var(--w1)); max-width: none; padding: calc(2 * var(--u)) 0 calc(2 * var(--u) + var(--w1)); border: 0; box-shadow: inset 0 0 0 var(--w1) var(--navy);
  background-image:
    linear-gradient(rgba(11, 36, 84, .09) var(--w1), transparent var(--w1)),
    linear-gradient(90deg, rgba(11, 36, 84, .09) var(--w1), transparent var(--w1)),
    linear-gradient(rgba(11, 36, 84, .045) var(--w1), transparent var(--w1)),
    linear-gradient(90deg, rgba(11, 36, 84, .045) var(--w1), transparent var(--w1));
  background-size: var(--y) var(--y), var(--y) var(--y), var(--u) var(--u), var(--u) var(--u);
  background-position: 0 0, var(--yx) 0, 0 0, 0 0; }
.snap .pf-grid { grid-template-columns: calc(var(--lg) * var(--u)) calc(var(--t) * var(--u)); column-gap: 0; padding: 0 0 0 calc(var(--pl) * var(--u)); }
.snap .pf-legend { grid-column: 1; padding-right: var(--u); }
.snap .pf-track, .snap .pf-note { grid-column: 2; }
.snap .pf-note { margin-top: 0; padding-top: var(--u); }
.snap .pf-ruler { height: calc(3 * var(--u)); }
/* V20 (V24): every line of the drawing is --w1 wide, a whole number of screen pixels (js/site.js), so at 110, 125 and
   150 % the ticks, the cut and the lines are all one width and centred; 1 px at 100 % and on phones, as before */
.snap .pf-ruler::after, .snap .pf-ruler i { bottom: calc(-1 * var(--w1)); }
.snap .pf-ruler::after { height: var(--w1); }
.snap .pf-ruler i { width: var(--w1); height: calc(var(--u) / 2 + var(--w1)); }
.snap .pf-ruler i.maj { height: calc(var(--u) + var(--w1)); }
.snap .pf-ruler b { bottom: calc(var(--u) + 6px); }
.snap .pf-ruler .unit { bottom: 4px; }
.snap .pf-row { position: relative; padding-top: calc(2 * var(--u)); padding-bottom: var(--u); border-bottom: 0; }
.snap .pf-row + .pf-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed rgba(11, 36, 84, .4); }
.snap .pf-dim { height: calc(3 * var(--u)); margin-top: 0; }
.snap .pf-dim.split { height: calc(2 * var(--u) + 48px); }
.snap .pf-ln { top: var(--u); height: var(--w1); box-sizing: content-box; padding-right: var(--w1); }   /* 1 px longer, so its end sits on the line, not beside it */
.snap .pf-ln::before, .snap .pf-ln::after { top: calc(-1 * var(--u)); width: var(--w1); height: calc(2 * var(--u) + var(--w1)); }
.snap .pf-bar { top: calc(var(--u) - var(--bh)); height: calc(2 * var(--bh) + var(--w1)); box-sizing: content-box; padding-right: var(--w1); }   /* centred on its line (V8); one step under a square tall (V13, --bh) */
.snap .pf-cut { top: 0; width: var(--w1); height: calc(2 * var(--u) + var(--w1)); }
.snap .pf-lab { top: calc(2 * var(--u) + 6px); }
.snap .pf-subhead { padding-top: calc(2 * var(--u)); padding-bottom: 0; }
.snap .pf-subhead .t { grid-column: 1 / -1; height: calc(2 * var(--u)); }
/* the thin line on the paper's line (V3), the thick one 2 px above it; it runs on 1 px past the track and the gap
   beyond it, so it ends under the sheet's border line rather than beside it (one shape, so it can't part at any zoom).
   Bar, gap and line in whole screen pixels (--w3, --w2, --w1), so at 110-150 % no edge is drawn soft */
.snap .pf-subhead .t::after { align-self: flex-start; height: calc(var(--w3) + var(--w2) + var(--w1)); margin-top: calc(var(--u) - var(--w3) - var(--w2));
  margin-right: calc((var(--pl) + var(--lg) + var(--t) - var(--m)) * var(--u) - var(--w1));
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 100% var(--w3) no-repeat,
    linear-gradient(var(--navy), var(--navy)) 0 calc(var(--w3) + var(--w2)) / 100% var(--w1) no-repeat; }
/* ?tracker=b: the line divides the sheet edge to edge, border to border, on the paper's line under the label */
.snap.tracker-b .pf-subhead { position: relative; padding-top: var(--u); }
.snap.tracker-b .pf-subhead .t { height: calc(3 * var(--u)); align-items: flex-end; padding-bottom: 11px; }
.snap.tracker-b .pf-subhead .t::after { position: absolute; left: 0; right: 0; top: calc(4 * var(--u) - var(--w3) - var(--w2)); margin: 0; }
/* on a phone the label nearly fills the width, so the line beside it would be a stub: it divides the sheet under it */
@media (max-width: 760px) {
  .snap .pf-subhead { position: relative; padding-top: var(--u); }
  .snap .pf-subhead .t { height: calc(3 * var(--u)); align-items: flex-end; padding-bottom: 9px; }
  .snap .pf-subhead .t::after { position: absolute; left: 0; right: 0; top: calc(4 * var(--u) - var(--w3) - var(--w2)); margin: 0; }
}
/* V20 (V24): the lines and bars let go of their draw-in transform once drawn (fill backwards, not both); a box left
   with a transform is painted out to the next whole screen pixel, so at 125 % its end ticks came out a different width */
@media (prefers-reduced-motion: no-preference) {
  .js .proof[data-reveal] .snap .pf-ln, .js .proof[data-reveal] .snap .pf-bar { animation-fill-mode: backwards; }
}

/* ------------------------------------------------------------------ About: A v7, the 3 boards and $192K (EA9), ported as is */
.a3 { grid-column: 3 / -1; grid-row: 4; position: relative; margin-top: 104px; }
.a3 .kicker { font: 11px/1 var(--mono); letter-spacing: .08em; color: var(--muted); }
.a3 h3 { margin-top: 14px; font-family: var(--display); font-weight: var(--d-wt); font-stretch: var(--d-st); font-size: 56px; line-height: .9; letter-spacing: -.04em; /* below the About h2 (64 px) above it: review 2026-10-31 */ }   /* static, no wipe (V25) */
.a3 .his-line { margin-top: 14px; font: 400 17px/1.4 var(--ui); color: var(--muted); animation: a3fade .47s ease .34s both; }
.a3 .tiles { --pic-h: 228px; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border-top: 1px solid var(--navy); }
.a3 .tile { padding: 26px 32px 0 0; display: grid; grid-template-columns: 1fr; gap: 20px; align-content: start; }
.a3 .tile + .tile { padding-left: 32px; border-left: 1px solid var(--hair); }
.a3 .pic { height: var(--pic-h, 222px); display: flex; align-items: flex-end; }
.a3 .board { font: 600 12px/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.a3 .role { margin-top: 8px; font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
.a3 .ledger { margin-top: 12px; font: 13px/1.4 var(--mono); color: var(--muted); display: grid; justify-items: start; }
.a3 .ledger > span { grid-area: 1 / 1; white-space: nowrap; }
.a3 .ledger .sum { opacity: 0; }
.a3 .ph { display: inline-block; margin-top: 8px; padding: 5px 7px; border: 1px dashed var(--navy); font: 12px/1.4 var(--mono); color: var(--navy); }
.a3 .stack, .a3 .pxin, .a3 .field, .a3 .pword { position: relative; display: block; flex: none; }
.a3 .stack i, .a3 .pxin i, .a3 .field i, .a3 .pword i { position: absolute; display: block; }
.a3 .tile-hoa { --c: 11px; --g: 3px; --bw: 2px; }
.a3 .layer { position: absolute; left: 0; top: 0; }
.a3 .stack i { border: var(--b, 2px) solid var(--navy); }
.a3 .px { --pc: 10px; --ps: 8px; }
.a3 .pxin i { background: var(--navy); }
.a3 .pxin i.lt { opacity: .3; }
.a3 .money { position: relative; margin-top: 60px; padding-top: 44px; }
.a3 .divider { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.a3 .divider .line { position: absolute; left: 0; right: 0; top: 0; height: var(--l1, 1px); background: var(--navy); transform-origin: 0 0; }   /* V20 (V24): one screen pixel at any zoom, like the border above it */
.a3 .fig { margin: 0; }
.a3 .field i, .a3 .pword i { background: var(--navy); transform-origin: 0 0; }
.a3 .sentence { margin-top: 28px; max-width: 30em; font-family: var(--display); font-size: 22px; font-weight: 520; line-height: 1.35; }
.a3 .s-vis { display: flex; flex-wrap: wrap; align-items: center; column-gap: .38em; row-gap: 10px; }
/* V20: the figure counts up in place; js/boards.js keeps its room ("192,000" wide) and puts each digit in a
   slot as wide as the widest digit (--dw), so nothing on the line moves */
/* V20b (the creator's pick, was ?money=b): on a computer the $192K sits in the first of the tiles' three columns,
   level with SHAKOPEE, and his sentence takes the other two, so the squares travel across into the word */
@media (min-width: 761px) {
  .a3 .money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .a3 .fig { grid-column: 1; grid-row: 1; align-self: center; padding-right: 32px; }
  .a3 .sentence, .a3 .said { grid-column: 2 / -1; padding-left: 32px; }
  .a3 .sentence { grid-row: 1; margin-top: 0; }
  .a3 .said { grid-row: 2; }
}
.a3 .amt { white-space: nowrap; }
.a3 .tally { display: inline-block; font-variant-numeric: tabular-nums; }
.a3 .tally i { display: inline-block; width: var(--dw, auto); text-align: center; font-style: normal; }
.a3 .said { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 8px; }
.a3 .said .quote { font: 400 15px/1.45 var(--ui); color: var(--muted); }
@keyframes a3fade { from { opacity: 0; } }

/* ------------------------------------------------------------------ Our Standard: one section, grouped per value (K3) */
.legend-means { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; row-gap: 6px; }
.lm-label { display: flex; align-items: center; gap: 12px; font: 600 12.5px/1.4 var(--ui); letter-spacing: .16em; }
.lm-key, .v-means { background: var(--paper2); border-top: 3px solid var(--gold); }
.lm-key { display: inline-block; width: 30px; height: 18px; border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); flex: none; }
.lm-src { font: italic 15px/1.45 var(--serif); color: var(--muted); max-width: 46em; }

.value { margin-top: 88px; padding-top: 28px; border-top: 1px solid var(--navy); row-gap: 40px; align-items: start; }
.value > .kick-side { grid-row: 1; }
.v-head { grid-column: 3 / -1; grid-row: 1; }
.v-name { font-family: var(--display); font-weight: var(--d-wt); font-stretch: var(--d-st); font-size: 64px; line-height: .94; letter-spacing: -.02em; }
.v-tag { margin-top: 14px; font: italic 28px/1.3 var(--serif); }
.v-std { grid-column: 3 / span 4; grid-row: 2; font: 20px/1.5 var(--serif); }
.proof-stamp { position: relative; display: inline-block; margin-top: 20px; padding: 11px 16px 13px; background: var(--navy); color: var(--on-navy); font: 12.5px/1.3 var(--mono); letter-spacing: .08em; }
.proof-stamp::after { content: ""; position: absolute; right: 0; bottom: 0; height: 5px; width: 34%; background: var(--gold); }
.v-means, .v-pillar { position: relative; }
.v-means { grid-column: 7 / span 3; grid-row: 2; padding: 16px 18px 6px; }
.v-pillar { grid-column: 10 / span 3; grid-row: 2; }
.v-pillar::before { content: ""; position: absolute; left: calc(var(--g) / -2); top: 0; bottom: 0; width: 1px; background: var(--hair); }
.check { display: flex; gap: 10px; font: 600 16px/1.4 var(--ui); padding-bottom: 12px; }
.ck { font: 16px/1.4 var(--mono); flex: none; }
.v-means ul li { border-top: 1px solid var(--hair); padding: 9px 0 10px; font: 16.5px/1.45 var(--serif); }
.v-pillar > p { font: 17.5px/1.6 var(--serif); hyphens: auto; }
.v-list { margin-top: 18px; }
.v-list li { border-top: 1px solid var(--hair); padding: 9px 0 10px; font: 500 14px/1.4 var(--ui); }
.pairs { margin-top: 18px; display: grid; gap: 12px; }
.pairs div { border-top: 1px solid var(--navy); padding-top: 9px; }
.pairs dt { font: 600 15px/1.3 var(--ui); }
.pairs dd { font: italic 16px/1.4 var(--serif); color: var(--muted); }
.flows { margin-top: 18px; }
.flows li { border-top: 1px solid var(--hair); padding: 10px 0 11px; font: 13px/1.5 var(--mono); }
.v-quote { grid-column: 3 / span 7; grid-row: 3; border-top: 1px solid var(--navy); padding-top: 22px; }
.v-quote blockquote { font: italic 30px/1.3 var(--serif); text-indent: -.4em; max-width: 24em; }
.v-quote figcaption { margin-top: 14px; font: 500 13.5px/1.4 var(--ui); color: var(--muted); }
.v-slogan { grid-column: 10 / span 3; grid-row: 3; align-self: end; font-size: clamp(28px, 2.6vw, 38px); }
/* a value with no quote (Pillar 03): the slogan takes the quote's place, so no hole is left */
.v-slogan-wide { grid-column: 3 / span 7; align-self: start; }
/* V26: the one red mark in this section, Carter's logo red on paper: the "≠" of Pillar 03's "Completed ≠ successful."
   (?red=0 shows the section without it) */
#compare .red-mark { color: var(--red); }
#compare[data-red="0"] .red-mark { color: inherit; }
/* V25 (the creator: "should be static without requiring an animation to cause them to appear"): THE MCNEW STANDARD
   and the four pillar names are there from the start; the rest of each block settles in as before */
@media (prefers-reduced-motion: no-preference) {
  .js #compare[data-reveal] > .sec-head { animation: none; }
  .js #compare[data-reveal] > .sec-head > :not(.kick-side) { animation: settle .6s var(--ease) .3s both; }
  .js #compare .rv[data-reveal] { animation: none; }
  .js #compare .rv[data-reveal] > :not(.v-head), .js #compare .rv[data-reveal] .v-tag { animation: settle .7s var(--ease) .1s both; }
}
/* V21: on a phone ACCOUNTABILITY fits its column (at 40 px it ran 6 px past it at 375 px) */
@media (max-width: 760px) {
  #compare .v-name { font-size: min(40px, calc((100vw - 68px) / 7.9)); }
}
@media (max-width: 360px) {
  #compare .v-name { font-size: min(34px, calc((100vw - 68px) / 7.9)); }
}

/* ------------------------------------------------------------------ Endorsements: D3, a row each (ED2) */
.d3 .d3-head, .d3 .d3-row, .d3 .d3-end { position: relative; z-index: 1; }
/* the section opens like the others (double rule, side kicker); D3's own serif headline is kept (review 2026-10-31) */
.honored { font: 400 46px/1.12 var(--serif); letter-spacing: .02em; max-width: 22ch; }
.row-in { position: relative; display: grid; grid-template-columns: 500px 1fr; gap: 88px; align-items: center; padding: 64px 0; }
.row-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--navy); transform-origin: 0 50%; animation: drawX .9s var(--ease-io) .1s both; }
.d3-head + .d3-row .row-in { margin-top: 0; }
.d3-row.mirror .row-in { grid-template-columns: 1fr 500px; }
.d3-row.mirror .portrait { order: 2; }
/* a photo shown whole, at its own shape (659 x 570), nothing over the face;
   only the last 3 px rows (a resize seam in both files) are trimmed */
.portrait { aspect-ratio: 659 / 567; width: 100%; object-fit: cover; object-position: 50% 0; background: #e7e0d3; animation: fade .8s cubic-bezier(.16,1,.3,1) .7s both; }
/* V25: each endorser's name (and the office under it) is there from the start; only the quote settles in */
.d3-row .text > .d3-quote { animation: settle .8s cubic-bezier(.16,1,.3,1) .7s both; }
.d3-quote { font: italic 400 37px/1.36 var(--serif); text-indent: -.4em; max-width: 17em; }
.d3 .name { margin-top: 32px; font: 600 15px/1.3 var(--ui); letter-spacing: .14em; display: flex; align-items: center; gap: 14px; }
.d3 .name::before { content: ""; width: 36px; height: 1px; background: var(--navy); }
.d3 .title { margin-top: 6px; padding-left: 50px; font: 400 15px/1.4 var(--ui); color: var(--muted); }
/* D3's closing rule is left out: the next section opens with the frame's double rule */
.d3-end { display: none; }
/* V26, the red accent: the short rule that signs each endorser's name, both alike (equal honour, ED1);
   two whole screen pixels thick at any zoom (--l2, js/site.js). ?red=b: the opening quotation marks instead */
#support:not(.no-red):not(.red-b) .name::before { height: var(--l2, 2px); background: var(--red); }
#support.red-b .oq { color: var(--red); }
/* V27 alternative (?endorse=b), two columns only: the words hang from the photo's top edge under a large
   opening quotation mark, and the name and office stand on a rule level with the photo's foot, like a caption
   plate. Same words, photos and sizes; only where they sit */
@media (min-width: 961px) {
  #support.alt-b .row-in { align-items: stretch; }
  #support.alt-b .portrait { align-self: start; }
  #support.alt-b .text { display: flex; flex-direction: column; }
  #support.alt-b .d3-quote { position: relative; padding-top: 84px; text-indent: 0; }
  #support.alt-b .d3-quote .oq { position: absolute; left: -.04em; top: -14px; font: 400 168px/1 var(--serif); font-style: normal; }
  #support.alt-b .name { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--navy); }
  #support.alt-b .name::before { display: none; }
  #support.alt-b .title { padding-left: 0; }
  #support.alt-b .text > :last-child { margin-bottom: -6px; }
  /* the red accent moves with the name: a short bar on the start of its rule (top on the rule's top) */
  #support.alt-b .name { position: relative; }
  #support.alt-b:not(.no-red):not(.red-b) .name::after { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; background: var(--red); }
}

/* ------------------------------------------------------------------ Platform: B3's list, one title each, first four open (K5) */
.pri { row-gap: 0; }
.pri > li { grid-column: span 3; position: relative; }
.pri > li:not(:nth-child(4n+1))::before { content: ""; position: absolute; left: calc(var(--g) / -2); top: 0; bottom: 0; width: 1px; background: var(--hair); }
.pri > li:nth-child(-n+4) { padding-bottom: 64px; }
.pri summary { list-style: none; cursor: pointer; position: relative; display: block; padding-right: 30px; }
.pri summary::-webkit-details-marker { display: none; }
/* open = selected (filled square), closed = selectable (outlined, with a plus): B2's idea without the duplication */
.pri summary::after { content: ""; position: absolute; right: 0; top: 0; width: 16px; height: 16px; border: 1.5px solid var(--navy);
  background: linear-gradient(var(--navy), var(--navy)) center / 8px 1.5px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 1.5px 8px no-repeat; }
.pri details[open] > summary::after { background: var(--navy) linear-gradient(var(--paper), var(--paper)) center / 8px 1.5px no-repeat; }
.pri .num { display: block; font: 700 15px/1 var(--display); letter-spacing: .06em; }
.pri .pt { display: block; }
.pri > li:nth-child(-n+4) .num { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--navy); }
.pri > li:nth-child(-n+4) .pt { font: 700 22px/1.22 var(--serif); margin-bottom: 14px; }
.pri > li:nth-child(n+5) summary { border-top: 1px solid var(--hair); padding-top: 13px; padding-bottom: 15px; display: flex; align-items: baseline; gap: 12px; }
.pri > li:nth-child(n+5) summary::after { top: 13px; }
.pri > li:nth-child(n+5) .num { display: inline; font-size: 14.5px; }
.pri > li:nth-child(n+5) .pt { font: 500 14.5px/1.35 var(--ui); }
.pri summary:hover .pt { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pri details > p { font: 17px/1.6 var(--serif); hyphens: auto; }
.pri > li:nth-child(n+5) details > p { padding: 2px 0 22px; }
/* V5: with the script, the four open columns are slots. A closed priority is chosen into the slot
   above it; a slot's title is not a control, so its mark is a plain filled square */
.slots > li:nth-child(-n+4) summary { cursor: default; }
.slots > li:nth-child(-n+4) summary:hover .pt { text-decoration: none; }
.slots > li:nth-child(-n+4) details[open] > summary::after { background: var(--navy); }
@keyframes pri-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pri-fill { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pri-rule { from { background-size: 0 1px; } to { background-size: 100% 1px; } }
@media (prefers-reduced-motion: no-preference) {
  .pri > li.pri-out details > * { animation: pri-out .22s var(--ease-io) both; }
  /* in the slot: the rule under the number draws across, the title wipes in, the paragraph fills downward */
  .pri > li.pri-in:nth-child(-n+4) .num { border-bottom-color: transparent; background: linear-gradient(var(--navy), var(--navy)) 0 100% / 100% 1px no-repeat border-box; animation: pri-rule .5s var(--ease) both; }
  .pri > li.pri-in:nth-child(-n+4) .pt { animation: wipe .5s var(--ease) .12s both; }
  .pri > li.pri-in:nth-child(-n+4) details > p { animation: pri-fill .75s var(--ease) .28s both; }
  /* in the list: the priority that came down settles into its row */
  .pri > li.pri-in:nth-child(n+5) summary { animation: settle .45s var(--ease) .1s both; }
  /* V25: MY POLICY PLATFORM is there from the start; the headline and deck beside it still settle in
     (the shared rule moves the whole head, so it is lifted here, for this section only) */
  .js #priorities[data-reveal] > .sec-head { animation: none; }
  .js #priorities[data-reveal] > .sec-head > .sec-head-main { animation: settle .6s var(--ease) .3s both; }
}

.tenq-g { margin-top: 104px; align-items: start; }
.tenq-h { grid-column: 3 / -1; font: 700 30px/1.2 var(--serif); padding-top: 18px; border-top: 3px solid var(--navy); }
.tenq { grid-column: 3 / -1; margin-top: 18px; columns: 2; column-gap: var(--g); column-rule: 1px solid var(--hair); }
.tenq li { break-inside: avoid; border-top: 1px solid var(--hair); padding: 11px 0 12px; font: 19px/1.4 var(--serif); }

.voice { margin-top: 104px; align-items: start; }
.voice-main { grid-column: 3 / span 7; }
.voice-main p { font: 22px/1.55 var(--serif); }
.voice-main .commit { margin-top: 26px; border-top: 1px solid var(--navy); padding-top: 22px; font: italic 32px/1.3 var(--serif); }
/* V26, the red accent: a short bar on the rule over his commitment, the section's last word. Its top is the
   rule's top (-1px from the padding box), so the two read as one heavier start to the rule, like a kicker's bar.
   ?red=b: the hero's square red full stop ends the headline instead */
/* V27 alternative (?platform=b): his ten questions as a numbered checklist, the numbers set like the
   priorities' (01-10, his own count of ten); the words are unchanged */
#priorities.alt-b .tenq { counter-reset: q; }
#priorities.alt-b .tenq li { counter-increment: q; display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 13px 0 14px; }
#priorities.alt-b .tenq li::before { content: counter(q, decimal-leading-zero); font: 700 15px/1 var(--display); letter-spacing: .06em; }
#priorities.alt-b .tenq-h { font-size: 36px; }
#priorities .commit { position: relative; }
#priorities:not(.no-red):not(.red-b) .commit::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; background: var(--red); }
#priorities.red-b #plat-h .dot { display: inline-block; width: .145em; height: .145em; margin-left: .045em; background: var(--red); color: transparent; overflow: hidden; vertical-align: baseline; text-indent: -9em; }

/* ------------------------------------------------------------------ Life in Shakopee: C's Broadsheet (EC1, EC2) */
/* V23 version A: the photos fit one window. Every photo is a whole square, so a row can only be as tall as the window
   allows by being narrower: the lead photo's side (--L) is the window's height under the top bar, less some
   air and the lead caption, and the spread is as wide as that lead needs (it centres when narrower than the
   grid). The side column takes the lead's height and fits its two photos inside it, so a two-line caption
   shrinks a photo rather than pushing the row past the window. --fit uses svh where it exists. */
.hl-in { position: relative; z-index: 1;   /* the page grid's width (review 2026-10-31) */
  --air: 24px; --capL: 80px; --gutter: 88px; --rule: rgba(11, 36, 84, .62);
  --fit: calc(100vh - var(--bar) - 2 * var(--air));
  --L: max(320px, calc(var(--fit) - var(--capL))); }
@supports (height: 100svh) { .hl-in { --fit: calc(100svh - var(--bar) - 2 * var(--air)); } }
.hl-band { padding: 0; text-align: center; }   /* the section's double rule above now opens it */
.hl-band::after { content: ""; display: block; height: calc(2 * var(--l1, 1px) + 2px); margin-top: 18px; border-top: var(--l1, 1px) solid var(--navy); border-bottom: var(--l1, 1px) solid var(--navy); }   /* V24: whole screen pixels at any zoom */
.hl-tick { display: block; width: 32px; height: var(--l2, 2px); margin: 0 auto 14px; background: var(--red); }
.hl-kicker { font: 600 12px/1 var(--ui); letter-spacing: .36em; text-indent: .36em; }
.hl-h2 { margin: 60px auto 0; max-width: 1040px; font: 700 60px/1.12 var(--serif); letter-spacing: .015em; text-align: center; text-wrap: balance; }
.hl-deck { margin: 26px auto 0; max-width: 60ch; font: italic 22px/1.5 var(--serif); text-align: center; text-wrap: balance; }
.hl-spread, .hl-row2 { display: grid; grid-template-columns: minmax(0,1fr) var(--gutter) minmax(0,1fr) var(--gutter) minmax(0,1fr); }
.hl-spread { margin: 72px auto 0; width: min(100%, calc((3 * var(--L) + var(--gutter)) / 2)); }
.hl-lead { grid-column: 1 / 4; grid-row: 1; align-self: start; }
.hl-vr { justify-self: center; width: var(--l1, 1px); background: linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 100% no-repeat; }
.hl-vr-top { grid-column: 4; grid-row: 1; }
/* the two photos share the room equally whatever their captions' lengths (subgrid: one row each for photo and caption) */
.hl-side { grid-column: 5; grid-row: 1; contain: size; display: grid; grid-template-rows: minmax(0,1fr) auto auto minmax(0,1fr) auto; row-gap: 18px; }
.hl-side .hl-brief { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-height: 0; }
.hl-side img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 0 100%; }
.hl-sep { height: var(--l1, 1px); background: var(--hair); }
.hl-hr { grid-column: 1 / -1; grid-row: 2; height: var(--l1, 1px); margin: 48px 0; background: linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 100% no-repeat; }
.hl-row2 { grid-column: 1 / -1; grid-row: 3; }
.hl-b1 { grid-column: 1; }
.hl-vr-b1 { grid-column: 2; }
.hl-b2 { grid-column: 3; }
.hl-vr-b2 { grid-column: 4; }
.hl-b3 { grid-column: 5; }
.hl figcaption { margin-top: 14px; }
.hl .t { display: inline; font: 600 14px/1.4 var(--ui); letter-spacing: .02em; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.4,0,.2,1); }
.hl .c { display: block; margin-top: 4px; font: italic 17px/1.4 var(--serif); }
.hl figure:hover .t { background-size: 100% 1px; }
.hl-lead figcaption { margin-top: 18px; }
.hl-lead .t { font-size: 16px; }
.hl-lead .c { margin-top: 6px; font-size: 23px; }
@keyframes draw-down { from { background-size: 100% 0; } to { background-size: 100% 100%; } }
@keyframes draw-across { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
.js .hl-vr { animation: draw-down .7s cubic-bezier(.45,0,.2,1) .1s both; }
.js .hl-hr { animation: draw-across .4s cubic-bezier(.45,0,.2,1) .85s both; }
.hl-vr.drawn, .hl-hr.drawn { animation: none; }

/* V23 version B (the creator's pick, V23b): the heading in a column beside the photos, so
   SHAKOPEE IS HOME, the headline, Family first and the two photos beside it are in one view, and the bottom
   three take the full width. Only where the grid is wide enough for a heading column (1240 px windows and
   up); narrower, as A. The lead is the smaller of the height that fits and the width left after the heading
   and side columns (a container query would have been neater, but containment restarts the margin strip's
   section numbers). */
@media (min-width: 1240px) {
  #home-life .hl-in { --gutter: 72px; --side: 260px; --head: 340px;
    display: grid; grid-template-columns: minmax(var(--head), 1fr) var(--gutter) min(var(--L), calc(100% - 2 * var(--gutter) - var(--head) - var(--side))) var(--gutter) var(--side); }
  #home-life .hl-spread { display: contents; }
  #home-life .hl-head { grid-column: 1; grid-row: 1; position: relative; }
  #home-life .hl-head::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--gutter) / -2); width: var(--l1, 1px); background: var(--rule); }
  #home-life .hl-band { text-align: left; }
  #home-life .hl-tick { margin-left: 0; }
  #home-life .hl-kicker { text-indent: 0; }
  #home-life .hl-h2 { margin: 36px 0 0; max-width: none; font-size: 34px; line-height: 1.16; text-align: left; }
  #home-life .hl-deck { margin: 22px 0 0; max-width: none; font-size: 20px; text-align: left; text-wrap: pretty; }
  #home-life .hl-lead { grid-column: 3; grid-row: 1; }
  #home-life .hl-vr-top { grid-column: 4; grid-row: 1; }
  #home-life .hl-side { grid-column: 5; grid-row: 1; }
  #home-life .hl-hr { grid-row: 2; }
  #home-life .hl-row2 { grid-row: 3; }
  #home-life .hl-vr, #home-life .hl-hr { animation: none; }   /* the spread's box is gone, so nothing would start them */
}

@media (max-width: 1180px) {
  .hl-in { --gutter: 56px; }
  .hl-h2 { font-size: 48px; }
  .hl-lead .c { font-size: 20px; }
}
/* phones: EC2's briefs column (a small photo, its title and caption beside it, hairlines between) */
@media (max-width: 760px) {
  .hl-band { padding-top: 16px; }
  .hl-band::after { margin-top: 15px; }
  .hl-tick { margin-bottom: 12px; }
  .hl-kicker { font-size: 11px; letter-spacing: .3em; text-indent: .3em; }
  .hl-h2 { margin-top: 36px; font-size: 31px; line-height: 1.16; }
  .hl-deck { margin-top: 18px; font-size: 18px; line-height: 1.5; }
  .hl-spread { display: block; width: auto; margin-top: 40px; }
  .hl-vr, .hl-hr, .hl-sep { display: none; }
  .hl-lead .t { font-size: 15px; }
  .hl-lead .c { font-size: 19px; }
  .hl-side, .hl-row2 { display: block; contain: none; }
  .hl-side { margin-top: 32px; }
  .hl-brief, .hl-side .hl-brief { display: grid; grid-template-columns: 112px minmax(0,1fr); grid-template-rows: none; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--hair); }
  .hl-side img { height: auto; width: 100%; }
  .hl-b3 { border-bottom: 1px solid var(--hair); }
  .hl-brief figcaption { margin-top: 0; }
  .hl-brief .t { font-size: 14px; }
  .hl-brief .c { font-size: 16px; }
}

/* ------------------------------------------------------------------ Get involved: the one navy field */
.navy { background: var(--navy); color: var(--on-navy); margin: 0 calc(-1 * var(--p)); padding: 64px var(--p) 112px; }
.navy .sec-deck { color: var(--muted-on-navy); }
.ways { align-items: start; }
.way { grid-column: span 4; position: relative; }
.way + .way::before { content: ""; position: absolute; left: calc(var(--g) / -2); top: 0; bottom: 0; width: var(--l1, 1px); background: rgba(242, 237, 228, .3); }
.way .num { font: 700 15px/1 var(--display); letter-spacing: .06em; padding-bottom: 14px; margin-bottom: 18px; border-bottom: var(--l1, 1px) solid var(--on-navy); }
.way-h { font: 700 28px/1.2 var(--serif); }
.way p:not(.num) { margin-top: 12px; font: 18.5px/1.55 var(--serif); }
.way .btn { margin-top: 12px; height: 48px; padding: 0 22px; font-size: 14px; letter-spacing: .06em; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn.line { border-color: var(--on-navy); color: var(--on-navy); }

/* V23: GET INVOLVED redrawn to belong with the band around it (only under #involve; .kick-side is shared).
   c: a kicker over the headline with a short gold stroke, as SHAKOPEE IS HOME has its red one just
   above (gold is the band's accent: no red on navy, V12); the headline then starts where the three ways do.
   The creator's pick (V23b); versions b and a were dropped. */
#involve .sec-head-main { grid-column: 1 / -1; grid-row: 2; }
#involve .kick-side { grid-column: 1 / -1; grid-row: 1; border-top: 0; padding-top: 0; margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
#involve .kick-side::before { content: ""; width: 32px; height: 3px; background: var(--gold); }

/* ------------------------------------------------------------------ block index: B4's lots (above the footer; also the phone menu) */
.index { position: relative; z-index: 1; padding-top: 96px; }
.lots { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 124px 72px; gap: 8px; background: var(--navy); border: 8px solid var(--navy); }
.lot { position: relative; background: var(--paper); padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; transition: background-color .25s ease-out; }
.lot:hover { background: var(--paper2); }
.lot .n { font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.lot .name { font: 600 22px/1.1 var(--ui); letter-spacing: -.01em; text-transform: uppercase; }
.lot.sm .name { font-size: 16px; letter-spacing: .02em; }
.lot.navy { background: var(--navy); color: var(--paper); margin: 0; padding: 18px 20px; }
.lot.navy .n { color: var(--muted-on-navy); }
.lot.navy:hover { background: #12306a; }
.lot.gold { background: var(--gold); color: var(--navy); }
.lot.gold .n { color: var(--navy); }
.lot.gold:hover { background: #eeb055; }
.lot:focus-visible { outline: 3px solid var(--navy); outline-offset: -9px; }
.lot.navy:focus-visible { outline-color: var(--gold); }
.lot[aria-current] { box-shadow: inset 0 -7px 0 var(--gold); }
.lot.gold[aria-current] { box-shadow: inset 0 -7px 0 var(--navy); }
/* lots in page order, read row by row: 01 02 03 04 across the top, 05 06 below
   (review 2026-10-31; B4's purposeless red-square lot is gone, as in EB8) */
.l-about { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.l-standard { grid-column: 3 / span 4; grid-row: 1; }
.l-support { grid-column: 7 / span 3; grid-row: 1; }
.l-platform { grid-column: 10 / span 3; grid-row: 1 / span 2; }
.l-life { grid-column: 3 / span 3; grid-row: 2; }
.l-involve { grid-column: 6 / span 4; grid-row: 2; }

/* ------------------------------------------------------------------ footer */
.foot { position: relative; z-index: 1; padding: 72px 0 40px; }
.foot .drule { margin-bottom: 36px; }
.foot-g { align-items: start; row-gap: 36px; }
.foot-logo { grid-column: 1 / span 2; width: 104px; }
/* three columns of 3, so the email never runs into Legal (review 2026-10-31) */
.foot-col:nth-of-type(1) { grid-column: 4 / span 3; }
.foot-col:nth-of-type(2) { grid-column: 7 / span 3; }
.foot-col:nth-of-type(3) { grid-column: 10 / span 3; }
.foot-col a[href^="mailto"] { overflow-wrap: anywhere; }
.fk { font: 600 12px/1 var(--ui); letter-spacing: .2em; color: var(--muted); margin-bottom: 12px; }
.foot-col li { padding: 4px 0; font: 500 15px/1.4 var(--ui); }
.foot-col a, .linkbtn { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.foot-col a:hover, .linkbtn:hover { background-size: 100% 1px; }
.linkbtn { font: 500 15px/1.4 var(--ui); padding: 0; text-align: left; }
.paid { grid-column: 4 / span 6; font: 17px/1.5 var(--serif); }

/* ------------------------------------------------------------------ dialogs: his forms (send nothing yet, C7) and privacy policy */
.dlg { margin: auto; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 2px solid var(--navy); background: var(--paper2); color: var(--navy); padding: 0; }
.dlg::backdrop { background: rgba(11, 36, 84, .55); }
.dlg-form { padding: 32px 36px 28px; }
.dlg-k { font: 600 12px/1 var(--ui); letter-spacing: .2em; color: var(--muted); }
.dlg-h { margin-top: 12px; font-family: var(--display); font-weight: var(--d-wt); font-stretch: var(--d-st); font-size: 42px; line-height: .95; letter-spacing: -.02em; }
.dlg-h[tabindex="-1"]:focus { outline: none; }   /* the privacy heading takes focus on open, so the dialog opens at its top */
.dlg-intro { margin-top: 12px; font: italic 19px/1.45 var(--serif); }
.fields { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.fl { display: flex; flex-direction: column; gap: 6px; border: 0; min-width: 0; }
.fl.wide { grid-column: 1 / -1; }
.fl > span, .fl legend { font: 600 12px/1.2 var(--ui); letter-spacing: .12em; }
.fl legend { margin-bottom: 8px; padding: 0; }
.fl input, .fl select, .fl textarea { width: 100%; min-height: 44px; border: 1.5px solid var(--navy); border-radius: 0; background: #fff; color: var(--navy); font: 16px/1.4 var(--ui); padding: 9px 12px; }
.fl input::placeholder { color: #6b7385; }
.fl textarea { resize: vertical; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; font: 15px/1.4 var(--ui); min-height: 32px; }
.checks input { width: 18px; height: 18px; accent-color: var(--navy); }
.draft-note { margin-top: 20px; background: var(--navy); color: var(--on-navy); padding: 12px 16px; font: 600 15px/1.4 var(--ui); border-right: 8px solid var(--gold); }
.dlg-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.dlg-actions .btn { height: 46px; padding: 0 22px; font-size: 15px; }
.dlg-fine { margin-top: 16px; font: italic 15px/1.45 var(--serif); color: var(--muted); }
.policy { margin-top: 18px; }
.policy h3 { margin-top: 22px; font: 700 18px/1.3 var(--serif); }
.policy p, .policy li { margin-top: 10px; font: 16px/1.6 var(--serif); }
.policy ul { padding-left: 1.2em; list-style: disc; }
.policy ul li { margin-top: 4px; }
.policy a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ motion: the hero on load (EB13, CSS only) */
@keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes drawDown { from { clip-path: inset(0 0 100% 0); } 99.9% { clip-path: inset(0 0 calc(100% - 100vh) 0); } to { clip-path: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { transform: translateY(104%); } to { transform: none; } }
@keyframes cell { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .o-t, .i-t { animation: drawX .62s var(--ease) .05s both; }
  /* the side lines draw down the first screen, then the rest of the page is simply there (a clip, not a transform: V2) */
  .o-l, .o-r, .i-l, .i-r { animation: drawDown .62s var(--ease) .05s both; }
  .zones-t { animation: fade .4s ease-out .5s both; }
  .topbar { animation: fade .4s ease-out .5s both; }
  .shot .frame { animation: wipe .6s var(--ease) 1.1s both; }
  .shot .cap { animation: fade .3s ease-out 1.7s both; }
  .hero h1 .w > span { animation: rise .46s var(--ease) both; animation-delay: calc(1.6s + var(--i) * .09s); }
  .hero .deck { animation: fade .4s ease-out 1.9s both; }
  .tb { animation: fade .25s ease-out 1.92s both; }
  .tb > * { animation: cell .3s var(--ease) both; animation-delay: calc(1.95s + var(--i) * .05s); }

  /* the rest: once, when it comes into view (js/site.js adds .in) */
  .js [data-reveal] > .grid > .drule { animation: drawX .6s var(--ease) both; }
  .js [data-reveal] > .sec-head, .js #about.sec .about-h, .js #about .sidech { animation: settle .6s var(--ease) .3s both; }
  .js .rv[data-reveal] { animation: settle .7s var(--ease) .1s both; }
  .js .proof[data-reveal] .pf-ln { animation: drawX .8s var(--ease) .2s both; }
  .js .proof[data-reveal] .pf-bar { animation: drawX .7s var(--ease) .8s both; }
  .js .d3-head[data-reveal] { animation: fade .5s ease-out both; }
}
/* animations wait until their block is on screen. !important (V9): the proof drawing's and the section
   rules' `animation` shorthands above are more specific and reset this to running, so they played on page load */
.js [data-reveal]:not(.in), .js [data-reveal]:not(.in) *, .js [data-reveal]:not(.in) *::before, .js [data-reveal]:not(.in) *::after,
.js [data-reveal]:not(.in)::before, .js [data-reveal]:not(.in)::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ mid widths */
@media (max-width: 1240px) {
  .a3 .tiles { --pic-h: 204px; }
  .a3 .tile-hoa { --c: 9px; }
  .a3 .px { --pc: 8px; --ps: 6px; }
  .a3 .ledger { font-size: 12px; }
  .a3 .ph { font-size: 11px; }
  .a3 h3 { font-size: 56px; }
}
@media (max-width: 1180px) {
  /* the headline keeps its two lines and the title block reaches the first screen (1024 x 768): review 2026-10-31.
     100vw - 156px is the grid's width here (2 x 16 + 2 x 26 + 2 x 36) */
  .hero h1 { font-size: calc((100vw - 156px) * .0785); margin-bottom: 32px; }
  .hero .deck { font-size: 30px; line-height: 1.32; }
  .a3 h3 { font-size: 44px; }
  .mainnav { gap: 28px; }
  .h2 { font-size: 56px; }
  .about-h { font-size: 50px; }
  .colset { grid-column: 3 / span 7; }
  .about-aside { grid-column: 10 / span 3; }
  .pull { font-size: 24px; }
  .about-slogan { font-size: 32px; }
  .v-std { grid-column: 3 / span 5; }
  .v-means { grid-column: 8 / span 5; }
  .v-pillar { grid-column: 3 / -1; grid-row: 3; }
  .v-pillar::before { display: none; }
  .v-quote { grid-row: 4; }
  .v-slogan { grid-row: 4; font-size: 32px; }
  .v-slogan-wide { grid-column: 3 / span 7; }
  .pri > li { grid-column: span 6; }
  .pri > li:not(:nth-child(4n+1))::before { display: none; }
  .pri > li:nth-child(even)::before { display: block; content: ""; position: absolute; left: calc(var(--g) / -2); top: 0; bottom: 0; width: 1px; background: var(--hair); }
  .pri > li:nth-child(-n+4) { padding-bottom: 48px; }
  .lots { grid-template-rows: 112px 72px; }
  .lot .name { font-size: 18px; }
  .lot.sm .name { font-size: 14px; }
}
@media (max-width: 960px) {
  .row-in, .d3-row.mirror .row-in { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 44px; }
  .d3-row.mirror .portrait { order: 0; }
  .honored { font-size: 32px; }
  .d3-quote { font-size: 25px; }
  .d3 .name { margin-top: 22px; }
  .tb .act { min-height: 72px; font-size: 15px; }
  .hero .deck { font-size: 28px; }
  /* A v7's three tiles fit their columns down to the phone layout (they ran 16-100 px past the page at 761-960 px) */
  .a3 .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); --pic-h: 168px; }
  .a3 .tile { padding-right: 20px; }
  .a3 .tile + .tile { padding-left: 20px; }
  .a3 .tile { grid-template-columns: minmax(0, 1fr); }
  .a3 .role { font-size: 20px; }
  .a3 .px { --pc: 5px; --ps: 4px; }
  .a3 .tile-hoa { --c: 7px; --g: 2px; }
  /* the slogan goes under the quote ("NEIGHBORHOOD." ran past the page at 761-960 px) */
  .v-quote { grid-column: 3 / -1; }
  .v-slogan { grid-column: 3 / -1; grid-row: 5; }
  .v-slogan-wide { grid-row: 4; }
  /* the block index from here down (and the phone menu): 01 02 / 03 / 04 05 / 06, read row by row */
  .lots { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 88px 60px 88px 60px; }
  .l-about { grid-column: 1 / span 2; grid-row: 1; }
  .l-standard { grid-column: 3 / span 4; grid-row: 1; }
  .l-support { grid-column: 1 / span 6; grid-row: 2; }
  .l-platform { grid-column: 1 / span 3; grid-row: 3; }
  .l-life { grid-column: 4 / span 3; grid-row: 3; }
  .l-involve { grid-column: 1 / span 6; grid-row: 4; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 760px) {
  :root { --o: 6px; --z: 16px; --p: 12px; --g: 12px; --cols: 6; --bar: 60px; }
  /* both side margins the same on a phone, the right mirroring the left (round 9) */
  .ticks i:nth-child(n+7) { display: none; }
  /* smaller strips; their right end (--out-r) keeps the desktop value, the right outer line's outer edge, because the
     right margin is now --z like the left (it was 6 px before round 9) */
  .zones { --s: var(--sq-ph, 9px); --reach: calc(var(--cw) * 1.5 - var(--g) / 2); }
  .sec > .grid:first-child::before, .foot > .grid:first-child::before { font-size: 9px; letter-spacing: 0; }
  .grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }

  /* top bar */
  .mainnav { display: none; }
  /* tap targets at least 44 x 44 (review 2026-10-31) */
  .js .menu-btn, html:not(.js) .menu-link { display: flex; align-items: center; min-width: 44px; min-height: 44px; font-size: 14px; font-weight: 500; padding: 0 6px 0 0; }
  .menu-btn[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 4px; }
  .menu-panel:not([hidden]) { display: block; position: absolute; top: calc(100% + 2px); left: calc(-1 * var(--p) + 3px); right: calc(-1 * var(--p) + 3px); background: var(--paper); padding: 12px var(--p) 14px; border-bottom: 2px solid var(--navy); max-height: calc(100vh - var(--bar) - 8px); overflow: auto; }
  .topbar .btn { height: 44px; min-width: 44px; padding: 0 14px; font-size: 13px; }
  .bar-logo img { width: 50px; }
  html.handed .bar-logo, html:not(.js) .bar-logo { width: 50px; margin-left: 14px; }

  /* hero */
  .hero { padding: 22px 0 40px; }
  .hero h1 { font-size: 45px; margin-bottom: 24px; line-height: .88; }
  .hero h1 br.d { display: none; } .hero h1 br.m { display: inline; }
  .shot .frame { aspect-ratio: 10 / 6.5; }
  .shot .frame img { object-position: 50% 12%; }
  .shot .cap { bottom: -30px; }
  .hero .side { margin-top: 38px; gap: 20px; }
  .hero .deck { font-size: 19px; line-height: 1.4; margin-top: 0; }
  .tb { grid-template-columns: 84fr 26fr 74fr 44fr 59fr;
    grid-template-areas:
      "logo seat seat seat seat"
      "logo cand cand cand cand"
      "vol  vol  don  yard yard"; }
  .tb .c-logo { padding: 10px 8px; }
  .tb .c-logo img { max-width: 74px; border-bottom-width: 3px; padding-bottom: calc(min(100%, 74px) * 57 / 1680); }
  .tb .f { padding: 8px 10px 9px; }
  .tb .k { margin-bottom: 6px; }
  .tb .v { font-size: 13.5px; line-height: 1.15; text-wrap: balance; }
  .tb .n { top: 8px; right: 9px; }
  .tb .act { min-height: 50px; padding: 8px 10px 9px; font-size: 13.5px; }
  .tb .act:focus-visible { outline-width: 2px; outline-offset: -5px; }

  /* frame sections */
  .sec { padding-bottom: 80px; }
  .drule { margin-bottom: 36px; }
  .kick-side { font-size: 11.5px; letter-spacing: .16em; border-top-width: 2px; padding-top: 10px; }
  .h2, .about-h { font-size: 36px; line-height: .98; }
  .sec-head { margin-bottom: 40px; }
  .sec-head-main, .about-h { margin-top: 18px; }
  .sec-deck { font-size: 19px; margin-top: 16px; }
  .tags { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; margin: 18px 0 0; }
  .tags li { font-size: 13px; }
  .about-h { margin-bottom: 26px; }
  .colset { columns: 1; font-size: 17.5px; }
  .dropcap::first-letter { font-size: 74px; margin-top: 6px; }
  .about-aside { margin-top: 32px; }
  .about-aside::before { display: none; }
  .pull { font-size: 25px; }
  .about-slogan { margin-top: 28px; font-size: 34px; }

  .proof { margin-top: 48px; }
  .pf-sheet { padding: 24px 0 28px; }
  .pf-grid { grid-template-columns: 1fr; padding: 0 14px; }
  .pf-legend, .pf-track, .pf-note, .pf-subhead .t { grid-column: 1 / -1; }
  .pf-ruler { height: 40px; margin-top: 18px; }
  .pf-ruler b.minor { display: none; }
  .pf-ruler .unit { right: auto; left: 0; bottom: 34px; margin: 0; }
  .pf-row { padding: 20px 14px 22px; }
  .pf-row .pf-track { margin-top: 12px; }
  .pf-legend .v { font-size: 21px; }
  .pf-lab { font-size: 12px; padding-left: 6px; padding-right: 4px; }
  .pf-dim.split { height: 118px; }
  .pf-subhead .t { font-size: 11.5px; }
  .snap .pf-grid { grid-template-columns: calc(var(--t) * var(--u)); }
  .snap .pf-legend, .snap .pf-track, .snap .pf-note, .snap .pf-subhead .t { grid-column: 1; }
  .snap .pf-legend { padding-right: 0; }
  .snap .pf-row { padding-right: 0; padding-bottom: var(--u); }
  .snap .pf-row .pf-track { margin-top: var(--u); }
  .snap .pf-ruler { height: calc(5 * var(--u)); margin-top: 0; }
  .snap .pf-ruler .unit { left: 0; right: auto; bottom: calc(3 * var(--u) + 3px); margin: 0; }
  .snap .pf-dim.split { height: calc(2 * var(--u) + 88px); }

  .a3 { margin-top: 64px; }
  .a3 h3 { font-size: 32px; }
  .a3 .his-line { font-size: 16px; line-height: 1.45; }
  .a3 .tiles { grid-template-columns: 1fr; margin-top: 28px; }
  .a3 .tile, .a3 .tile + .tile { padding: 22px 0; border-left: 0; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; border-bottom: 1px solid var(--hair); }
  .a3 .board, .a3 .role { overflow-wrap: anywhere; }
  .a3 .pic { height: 72px; }
  .a3 .px { --pc: 5px; --ps: 4px; }
  .a3 .tile-hoa { grid-template-columns: 1fr; --c: 8px; --g: 2px; --bw: 1px; }
  .a3 .tile-hoa .pic { height: auto; }
  .a3 .ledger { font-size: 13px; }
  .a3 .ph { font-size: 12px; }
  .a3 .kicker { font-size: 12px; }
  .a3 .role { font-size: 21px; }
  .a3 .money { margin-top: 28px; padding-top: 30px; }
  .a3 .sentence { font-size: 19px; margin-top: 20px; }
  .a3 .s-vis { flex-direction: column; align-items: flex-start; row-gap: 12px; }

  .legend-means { margin-top: 24px; }
  .value { margin-top: 56px; row-gap: 22px; }
  .v-name { font-size: 40px; margin-top: 4px; }
  .v-tag { font-size: 22px; }
  .v-std { font-size: 18.5px; }
  .v-pillar > p { font-size: 17px; }
  .v-quote blockquote { font-size: 23px; }
  .v-slogan { font-size: 34px; }

  .pri > li { grid-column: 1 / -1 !important; }
  .pri > li::before { display: none !important; }
  .pri > li:nth-child(-n+4) { padding-bottom: 32px; }
  .pri > li:nth-child(4) { padding-bottom: 40px; }
  .tenq-g, .voice { margin-top: 64px; }
  .tenq-h { font-size: 24px; }
  .tenq { columns: 1; }
  .tenq li { font-size: 18px; }
  .voice-main { margin-top: 16px; }
  .voice-main p { font-size: 19px; }
  .voice-main .commit { font-size: 24px; }

  .navy { padding-top: 44px; padding-bottom: 72px; }
  .way + .way { margin-top: 40px; }
  .way + .way::before { display: none; }

  .index { padding-top: 64px; }
  .lots { gap: 5px; border-width: 5px; }
  .lot { padding: 11px 12px; }
  .lot .name { font-size: 16px; }
  .lot.sm .name { font-size: 13.5px; }
  .lot.navy { padding: 11px 12px; }

  .foot { padding-top: 56px; }
  .foot-logo { width: 88px; }
  .foot-g .foot-col { grid-column: 1 / -1 !important; }
  .foot-g { row-gap: 24px; }

  .dlg-form { padding: 22px 18px 20px; }
  .dlg-h { font-size: 32px; }
  .fields { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 38px; }
  .a3 h3 { font-size: 28px; }
  .h2, .about-h { font-size: 31px; }
  .v-name { font-size: 34px; }
  .lot .name { font-size: 14.5px; }
  .lot.sm .name { font-size: 13px; }
  .a3 .role { font-size: 18px; }   /* "Commissioner" fits whole at 320 px */
}

/* ------------------------------------------------------------------ V15 proposal: the four pillars, Bauhaus-structured with one Dada touch
   (DECISIONS V15; the creator's references style/draft/ref-v15-*.png). A proposal, not a choice: the switch is the class
   pillars-bd on #compare in index.html; remove it and the pillars look as they did before.
   One idea: each value stands as a pillar. Its number is a solid navy block hanging from the pillar's line (Schlemmer's
   big block, the hero's neoplastic navy cells), a heavy bar runs down from it the height of the pillar (the cover's edge
   bars, the proof drawing's bars), and his slogan runs up beside the bar, turned on its side (the collage's rotated line:
   the one Dada touch). The value's name is set larger and heavier. Same fonts, same navy and paper, same words in the
   same order; only "PILLAR 01" gained spans so the number can be set large. */
.pillars-bd .value { --shaft: 12px; padding-top: 0; margin-top: 96px; }
.pillars-bd .value > .kick-side { grid-row: 1 / span 3; align-self: stretch; position: relative; isolation: isolate; container-type: inline-size;
  border-top: 0; padding: 0; color: var(--on-navy); }
.pillars-bd .value:not(:has(.v-quote)) > .kick-side { grid-row: 1 / span 2; }
/* the block (a square, columns 1-2) and the bar under it; both decoration drawn by CSS, the words stay text */
.pillars-bd .value > .kick-side::before, .pillars-bd .value > .kick-side::after { content: ""; position: absolute; z-index: -1; left: 0; top: 0; background: var(--navy); }
.pillars-bd .value > .kick-side::before { right: 0; aspect-ratio: 1; }
.pillars-bd .value > .kick-side::after { bottom: 0; width: var(--shaft); }
.pillars-bd .pk { position: absolute; left: 0; top: 0; padding: 9cqi 9cqi 0; font: 600 12.5px/1 var(--ui); letter-spacing: .32em; color: var(--muted-on-navy); }
.pillars-bd .pn { position: absolute; left: 0; top: 0; width: 100cqi; height: 100cqi; display: flex; align-items: flex-end; padding: 0 0 7cqi 7cqi;
  font-family: var(--display); font-weight: 800; font-stretch: 100%; font-size: 64cqi; line-height: .74; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
/* the name: larger and heavier, cap top on the pillar's line, sized to its column so ACCOUNTABILITY fits */
.pillars-bd .v-head { container-type: inline-size; }
.pillars-bd .v-name { font-weight: 800; font-stretch: 100%; font-size: min(112px, 9.4cqi); line-height: .8; letter-spacing: -.03em; margin-top: -.02em; }
.pillars-bd .v-tag { margin-top: 18px; }
/* the slogan, turned to run up beside the bar from the pillar's foot (at the foot it stays clear of the block) */
.pillars-bd .v-slogan { grid-column: 1 / span 2; grid-row: 2 / span 2; align-self: end; justify-self: start; margin: 0 0 0 calc(var(--shaft) + 18px);
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: clamp(26px, 2.6vw, 38px); }
.pillars-bd .v-quote { grid-column: 3 / -1; }
@media (prefers-reduced-motion: no-preference) {
  /* the page's one motion rule: played when the pillar comes into view (held until then by the rule above), final frame at once with reduced motion */
  .js .pillars-bd .rv[data-reveal] > .kick-side::before { animation: wipe .5s var(--ease) .2s both; }
  /* the bar under it is simply there: drawn in, it replayed whenever the window changed size (seen in headless Edge) */
}
@media (max-width: 1180px) {
  .pillars-bd .value > .kick-side { grid-row: 1 / span 4; }
  .pillars-bd .value:not(:has(.v-quote)) > .kick-side { grid-row: 1 / span 3; }
  .pillars-bd .v-slogan { grid-row: 2 / span 3; }
  .pillars-bd .v-quote { grid-column: 3 / -1; grid-row: 4; }
}
@media (max-width: 960px) {
  /* the side channel is too narrow for the turned slogan: it goes back under the quote, upright */
  .pillars-bd .value > .kick-side { grid-row: 1 / span 5; }
  .pillars-bd .value:not(:has(.v-quote)) > .kick-side { grid-row: 1 / span 4; }
  .pillars-bd .v-slogan { grid-column: 3 / -1; grid-row: 5; align-self: end; margin: 0; writing-mode: horizontal-tb; transform: none; white-space: normal; }
  .pillars-bd .v-slogan-wide { grid-row: 4; }
  .pillars-bd .pk { font-size: 10.5px; letter-spacing: .24em; }
}
@media (max-width: 760px) {
  /* phone: the block becomes a bar that opens the pillar, PILLAR at its left, the number large at its right; no side bar */
  .pillars-bd .value { margin-top: 64px; }
  .pillars-bd .value > .kick-side { container-type: normal; display: flex; justify-content: space-between; align-items: flex-end; padding: 12px 12px 10px 14px; }
  .pillars-bd .value > .kick-side::before { right: 0; bottom: 0; aspect-ratio: auto; }
  .pillars-bd .value > .kick-side::after { display: none; }
  .pillars-bd .pk { position: static; padding: 0 0 4px; font-size: 11px; }
  .pillars-bd .pn { position: static; width: auto; height: auto; padding: 0; font-size: 64px; }
  .pillars-bd .v-name { font-stretch: 90%; font-size: min(52px, 12.2cqi); margin-top: 6px; }
}

/* ------------------------------------------------------------------ V17: a blueprint sheet in the left margin
   (DECISIONS V17, the creator's pick "C cut"; drawn by js/pillar.js, which says how). Over the stretch of the four
   values the page's frame lines stop (a short tick closes each strip) and a navy blueprint sheet is held in the left
   margin, cut off along a curve, with a column drawn on it at true proportions, its lit side bare. Decoration only
   (aria-hidden), in the margin, never behind the words. */
.values { position: relative; }
.bp-rail { position: absolute; z-index: 0; pointer-events: none; }
.bp-run { position: absolute; top: 0; left: 0; width: 100%; }
.bp-hold { position: sticky; top: var(--bar); will-change: transform; }   /* slid out to the left by js/pillar.js as the next bar comes up */
.bp-hold.bp-gone { opacity: 0; visibility: hidden; transition: opacity .25s ease-out, visibility 0s .25s; }   /* reduced motion: goes without moving */
.bp-stop { position: absolute; box-sizing: border-box; border: 0 solid var(--navy); border-bottom-width: var(--l1, 1px); pointer-events: none; }   /* one box, sides and foot (V21): its corners always meet */
.bp-stop-l { border-left-width: var(--l1, 1px); border-right-width: var(--l2, 2px); }
.bp-stop-r { border-left-width: var(--l2, 2px); border-right-width: var(--l1, 1px); }
.bp-cap { position: absolute; height: 3px; background: var(--navy); pointer-events: none; }   /* the next bar run on over the inner line (V21, image 6) */
.bp-pillar { display: block; overflow: visible; color: var(--paper2); --gm: rgba(248, 245, 239, .14); --gf: rgba(248, 245, 239, .07); }
.bp-paper { fill: var(--navy); }
.bp-over { position: absolute; top: 0; left: 0; }
.bp-rail.bp-drawn * { animation: none !important; }   /* drawn in: a still picture (js/pillar.js, V21) */   /* the scroll-drawn corner line, over the sheet (V21) */
.bp-grid path { fill: none; stroke-width: var(--w1, 1px); }
.bp-pillar .gm { stroke: var(--gm); }
.bp-pillar .gf { stroke: var(--gf); }
.bp-mark { fill: none; stroke: var(--navy); stroke-width: var(--l1, 1px); }   /* the corner line: one screen pixel, like the frame lines */
.bp-trace { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--bp-t, 0)); }
.bp-art { opacity: .72; }
/* V21: a draftsman's weights, in whole screen pixels (--w1 one, --w2 two or three, set by js/pillar.js): the outline
   heavy; edges, shading, centre line and dimensions light */
.bp-art path { fill: none; stroke: currentColor; stroke-width: var(--w1, 1px); stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.bp-art .p { stroke-width: var(--w2, 2px); stroke-opacity: .95; }
.bp-art .p.x { stroke-width: var(--w1, 1px); stroke-opacity: .8; }
.bp-art .c { stroke-opacity: .6; }
.bp-art .d { stroke-opacity: .62; }
.bp-art .d.t { stroke-width: var(--w2, 2px); stroke-linecap: butt; }
.bp-art .k { stroke-opacity: .2; }
.bp-art .s, .bp-art .c, .bp-art .x, .bp-art .d { transform-box: fill-box; transform-origin: 0 0; }
/* the pencil look (?lines=pencil): white pencil on the sheet, graphite on the page, each stroke painted with its grain */
#compare[data-lines="pencil"] .bp-art path { stroke: url(#bpGw); stroke-linecap: round; stroke-linejoin: round; }
#compare[data-lines="pencil"] .bp-art .p { stroke-width: calc(var(--w2, 2px) * .8); }
#compare[data-lines="pencil"] .bp-art .k { stroke-opacity: .28; }
#compare[data-lines="pencil"] .bp-trace { stroke: url(#bpGg); stroke-width: 1.4px; stroke-linecap: round; }
/* the alternative (?lines=inked): the ink drawing over the pencil layout it was inked from, the pencil left showing
   faintly underneath, as on a real inked sheet (V27) */
#compare[data-lines="inked"] .bp-under { opacity: .42; }
#compare[data-lines="inked"] .bp-under path { stroke: url(#bpGw); stroke-linecap: round; stroke-linejoin: round; }
#compare[data-lines="inked"] .bp-under .s { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* its own motion, once, when the stretch comes into view (held until then by the page's reveal rule): the sheet
     slides in from the window edge, then the column is drawn in a draftsman's order: centre line, outline, shading */
  .js .bp-rail .bp-sheet { animation: bpSlide 1.1s var(--ease-io) both; }
  .js .bp-rail .c { animation: drawY .9s var(--ease) .9s both; }
  .js .bp-rail path.p:not(.x) { stroke-dasharray: 1 1; animation: bpTrace 1.2s var(--ease-io) both; animation-delay: calc(1.2s + var(--i) * 90ms); }
  .js .bp-rail .x { animation: drawX .6s var(--ease) both; animation-delay: calc(1.4s + var(--i) * 80ms); }
  .js .bp-rail .d, .js .bp-rail .k { animation: fade .6s var(--ease) both; animation-delay: calc(2.2s + var(--i) * 60ms); }
  .js .bp-rail .s { animation: drawY 1s var(--ease) both; animation-delay: calc(1.7s + var(--i) * 50ms); }
}
@keyframes bpTrace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bpSlide { from { transform: translateX(calc(-1 * var(--sw))); } to { transform: none; } }

/* ------------------------------------------------------------------ intro (V19): a first-visit scene over the page (js/intro.js)
   Shown only while html.intro-on (set before the page paints by the script at the top of <body>) or while it leaves (.out).
   It covers the page, which loads underneath it; nothing on it is announced (aria-hidden). */
.intro { display: none; }
html.intro-on .intro, .intro.out { display: block; position: fixed; inset: 0; z-index: 50; overflow: hidden; background: var(--paper);
  cursor: default; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html[data-intro="b"] .intro, html[data-intro="c"] .intro { background: var(--navy); }
html[data-intro] .intro.clear, .intro.clear { background: transparent; }
.intro > * { position: absolute; }
/* the page's own opening (the frame drawing, the bar, section.hero as a whole) waits while the intro plays and then
   plays in full (contract with session 1, PARALLEL-SESSIONS.md "Round V18-V27") */
html.intro-on .hero, html.intro-on .hero *, html.intro-on .sheet *, html.intro-on .sheet *::before, html.intro-on .sheet *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }
@media print { .intro { display: none !important; } }

/* a. River line */
.ia-land { left: 0; right: 0; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; }
.ia-land svg { display: block; flex: none; }
.ia-line { left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--navy); transform-origin: 50% 50%; }
.ia-kick { left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; color: var(--red);
  font: 700 clamp(11px, 1.15vw, 17px)/1 var(--display); letter-spacing: .3em; white-space: nowrap; }
@supports (text-align-last: justify) { .ia-kick { display: block; text-align: justify; text-align-last: justify; letter-spacing: .1em; } }

/* b. Then and now */
.ib-win { overflow: hidden; box-shadow: 0 0 0 100vmax var(--navy); transform-origin: 50% 50%; }
.ib-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ib-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; color: var(--on-navy); }
.ib-year { display: flex; font-family: var(--mono); line-height: 1; letter-spacing: .02em; }
.ib-d { display: block; height: 1em; overflow: hidden; }
.ib-wheel { display: block; width: 1ch; word-break: break-all; line-height: 1em; }
.ib-caps { position: relative; flex: 1; min-height: 3em; text-align: right; font: 400 12px/1.4 var(--mono); color: var(--muted-on-navy); letter-spacing: .04em; }
.ib-cap { position: absolute; right: 0; top: .35em; max-width: 100%; }
@media (max-width: 700px) { .ib-foot { flex-direction: column; gap: 8px; } .ib-caps { align-self: stretch; text-align: left; } .ib-cap { left: 0; right: auto; top: 0; } }

/* c. SHAKOPEE */
.ic-photo { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ic-field { inset: 0; display: block; }
.ic-lt { transform-box: fill-box; transform-origin: 50% 50%; }
.ic-dive { transform-box: view-box; }
.ic-cap { margin: 0; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--on-navy); text-transform: uppercase; }

/* d. Survey print */
.id-print { left: 0; top: 0; }
.id-src { display: none; }
.id-cap { left: calc(var(--o) + var(--z) + 12px); bottom: 28px; margin: 0; padding: 6px 10px; background: var(--paper);
  font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--navy); text-transform: uppercase; }