/* race.css — the generated pages' own glue over the winner's system.css and B2's poster-preview.css: the race page v2 (PLAN row
   8), the races index and the homepage (8b) — what the mock-ups (product-design/site-style/surfaces/race-page.html ·
   race-page-undrawn.html · home.html) set in their own <style>, and the parts the generator draws as buttons and mounts where
   the rig drew links and bare posters. Reads tokens only. */

/* Newsreader, the display face (Type C), self-hosted — README §16.1/§"Not in this session": "fonts other than Inter are self-hosted
   (woff2) before anything ships"; the race page v2 (PLAN row 8, 2026-10-20) is the first live page set in it (the builder and the
   order page never use it, §16.2), so its faces live here, not in tokens.css — the smoke counts every face a page's CSS declares
   into its first view; the homepage (8b) reads them here too, and the static pages (10b) take them into a shared file. Fontsource's variable cut (SIL OFL 1.1 — fonts/OFL-newsreader.txt) instanced at optical size
   32 for the display sizes, weights 400–600 (fontTools varLib.instancer): 40 KB, its latin-ext half only when a page needs it. A
   Georgia face scaled to its metrics stands in while it loads, so the swap moves no text (CLS). */
@font-face { font-family: "Newsreader"; font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("/assets/fonts/newsreader-latin-opsz32-wght.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url("/assets/fonts/newsreader-latin-ext-opsz32-wght.woff2") format("woff2"); }
@font-face { font-family: "Newsreader Fallback"; font-weight: 400; src: local("Georgia"); font-display: swap; size-adjust: 97.07%; ascent-override: 75.72%; descent-override: 27.3%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; font-weight: 700; src: local("Georgia Bold"), local("Georgia-Bold"); font-display: swap; size-adjust: 97.07%; ascent-override: 75.72%; descent-override: 27.3%; line-gap-override: 0%; }   /* the drawer's 600 takes Georgia's own bold while the serif loads, never a faked one */

/* a mounted poster (B2's component inside its mount) centres on its stage as the rig's bare poster does (.stage > .poster) */
.pp-mount > .poster { margin: 0 auto; }
.fin .fin-art .pp-mount .poster { max-width: 100%; }

/* the style controls: the rail from 700 px, the carousel under it (the mock-ups' own rule) */
@media (max-width: 699px) { .art .rail, .art .grouplabel.rl, .fin-art .rail, .fin-art .grouplabel.rl { display: none; } }
@media (min-width: 700px) { .art .carousel, .fin-art .carousel { display: none; } }

/* the rail's tiles are buttons (the rig drew links): the same look — the poster at 56 px, its name under it, the chosen one ringed */
.rail button.rt { display: block; border: 0; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer; color: var(--soft); font-size: 13px; text-align: center; min-width: 60px; max-width: 96px; overflow-wrap: anywhere; }
.rail button.rt .poster { width: 56px; margin: 0 auto 6px; display: block; }
.rail button.rt .sheet, .rail button.rt .pp-sheet, .rail button.rt .rn { display: block; }
.rail button.rt .pp-sheet img { width: 100%; height: 100%; object-fit: cover; }
.rail button.rt[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.rail button.rt[aria-pressed="true"] .poster { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }   /* a ring with a gap (his look 2026-10-21: the 3 px ring on a brown or black frame read as a smudge) */
.rail button.rt:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
/* the carousel's names are buttons too: the chosen one underlined, a tap target each */
.carousel .names button { border: 0; background: none; font: inherit; color: var(--soft); padding: 10px 2px; min-height: var(--target); cursor: pointer; }
.carousel .names button[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.carousel .names button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.carousel .names { gap: 10px; }
.stage[data-pz-swipe] { touch-action: pan-y pinch-zoom; }   /* a sideways swipe is the carousel's; the page still scrolls and zooms */
.pz-zoomed .stage[data-pz-swipe] { touch-action: auto; }    /* pinch-zoomed in: a sideways drag moves round the page (race-page.mjs) */
/* the finished example's caption under its style controls, on the text's edge (the mock-up) */
.fin-art > .cap { text-align: left; margin-top: 10px; }

/* the caption's two lines: the map's, then the product's (his look 2026-10-21) */
.cap .cl { display: block; text-wrap: balance; }   /* no word alone on a line's end (8e2: the started poster's line) */
/* "Gift information" lands on the band's top, not its text's (his look 2026-10-21) */
#gift { scroll-margin-top: var(--band-pad); }
/* What you get's links apart, no separator (his look 2026-10-21) */
.note.links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.note.links a { display: inline-flex; align-items: center; min-height: var(--target); }   /* each a full tap target (the visual seat: 28 px apart on a phone was close) */

/* the gift (8d, his pick 1 A; his review's mock-ups 2026-10-22): its heading, three blocks on system.css's .steps3 — a heading
   each, 8 px above its text — the button alone under all three (full width on a phone; the approval in the third block since his
   look at 8b, 2026-10-23), a gated line after it once switched on; the heading as far above the blocks as "What you get"'s */
.gift h2 { margin-top: 0; }
.gift .steps3 { margin-top: 28px; }
.gift .steps3 h3 { margin: 0 0 8px; }
.gift .steps3 p { margin: 0; color: var(--text-2); text-wrap: balance; }
.gift .go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.gift > .note { margin: 20px 0 0; }
@media (max-width: 700px) {
  .gift .steps3 { gap: 24px; }
  .gift .steps3 p { text-wrap: pretty; }   /* one column: the lines fill its width (his look at 8b, 2026-10-23: balanced, they ran short) */
  .gift .go { flex-direction: column; align-items: stretch; margin-top: 28px; }
}

/* the relay example (On the Edge) and "Why this course" */
.relay figure { margin: 0 0 14px; max-width: 320px; }
.relay figure .poster { max-width: 320px; margin: 0; }
.relay figure .cap { margin-top: 12px; }

/* the purchase box's assurance: two sentences, the line breaking between them (the visual seat: "working" moved the balanced break
   into the first) — each wraps inside itself only where the screen is narrower than it */
.buy .assure .sent { display: inline-block; }

/* the finder (PLAN row 9c; his picks 2026-10-24 — product-design/finder/9c-record.md): the search field (~560 px; the phone's
   width) and the own race's line under it at every width (4 B); the posters framed as they would hang, two across on a phone
   and a tablet, four on a computer (9c5, his pick 2026-10-31: five were "quite small"; three across went with the style order
   no longer serving two, three and four at once) — so no tile beside or under another shares its style (finder-rules.mjs tileStyle) —
   each name alone, centred under its frame as its caption, close to it and clear of the next row (1b 3; his note: names on
   one line and on two "looks untidy" — at 13 px one name of 24 takes two). system.css's states (html[data-results]) show the
   no-result page; the rules below his feedback's (2026-10-26). */
.finder .search { max-width: 560px; margin: 4px 0 0; }
.finder .search input { width: 100%; }
@media (max-width: 699px) { .finder .search { max-width: none; } }
.finder .exitline { margin: 12px 0 0; }
.finder .exitline a { white-space: nowrap; }   /* the link whole on its line at 320 px ("Start with your / own →" — 9c4's visual seat) */
.finder .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; margin-top: 24px; }
@media (min-width: 700px) { .finder .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
@media (min-width: 960px) { .finder .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; } }
.finder .tiles a.tile { display: block; grid-row: auto; }   /* a block, not system.css's subgrid of four lines: one line of words */
.finder .tiles a.tile[hidden] { display: none; }
/* the caption may take a little of the gap beside it (6 px a side on a phone's 16, 12 on a tablet's 40 and a computer's 36 — 9c5), centred, so the
   names stay on one line at 360 px and from 960 (the visual seat's 2) and clear of the next */
.finder .tile b.cap { margin: 10px -6px 0; font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center; }
@media (min-width: 700px) { .finder .tile b.cap { margin-inline: -12px; } }
/* the tiles' picture boxes unclipped (the picture fills its box exactly): clipped, each lost a sub-pixel sliver by where it stood,
   and on a phone a second-row tile — low priority — came out the page's largest picture (his preview's smoke 2026-10-25: LCP 2728
   ms over 2500); unclipped they tie, and the first row's keeps it, as on production */
.finder .tiles .pp .pp-sheet { overflow: visible; }
/* His feedback on the preview (2026-10-26, his picks all the recommendations — finder/9c-record.md "His feedback on the
   preview"; his mock-ups notes/9c_feedback/). 5: the field's own clear button — shown while it holds words (before the script
   too), a finger's size at its right end; the browser's own × hidden (one ×). */
.finder .search { position: relative; }
.finder .search input:not(:placeholder-shown) { padding-right: 48px; }   /* room for the × only with words in the field (the visual seat's 1: at rest the hint "70.3 …" whole) */
/* the magnifier drawn, as his mock-ups and the × (the visual seat's 4: system.css's "⌕" drew a 6 px mark, sitting low) */
.finder .search::before { content: ""; left: 15px; width: 16px; height: 16px; transform: translateY(-50%); background: currentColor;
  -webkit-mask: var(--pz-magnifier) center / 16px no-repeat; mask: var(--pz-magnifier) center / 16px no-repeat;
  --pz-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.9' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M10.5 10.5l3.7 3.7' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.finder .search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.finder .search .clear { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 44px; height: 44px; display: grid;
  place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
.finder .search .clear:hover { color: var(--text); }
.finder .search input:placeholder-shown ~ .clear { display: none; }
html:not([data-results]) .finder .search .clear { display: none; }   /* without the script it could clear nothing (the re-check's NIT-5) */
/* 4 A: the line under the field only while it is the one way out (at rest, more than three races); three or fewer, the words
   after them; none, the no-result page (his mock-ups 1 and 2) */
html[data-results=few] .finder .exitline, html[data-results=none] .finder .exitline { display: none; }
.finder .ownafter { margin: 40px 0 0; padding: 24px 0 4px; border-top: 1px solid var(--rule); }
.finder .ownafter h2, .finder .noresult h3 { margin: 0 0 4px; font: 600 17px/1.35 var(--font-ui); letter-spacing: 0; }
.finder .ownafter p, .finder .noresult h3 + p { margin: 0 0 12px; color: var(--text-2); }
html[data-results=none] .finder .ownafter { display: none; }
.finder .noresult { max-width: none; margin: 28px 0 0; padding: 0; border: 0; background: none; }   /* its rule the width of the others (the visual seat's polish 1) */
.finder .noresult h2, .finder .noresult p { max-width: 560px; }
.finder .noresult h2 { margin: 0 0 10px; font-size: clamp(26px, 7vw, 32px); }
.finder .noresult h2 q { quotes: "“" "”"; }
.finder .noresult .alt { margin: 0; font-size: var(--small); color: var(--text-2); }
.finder .noresult h3 { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.finder .noresult .btn { margin-top: 0; }
/* 1 B: "Your unfinished posters" under the search's line (his mock-ups; his look at 01f72a39: two columns on a computer,
   Continue under its words, the whole card opening it — pick 1 A). Hidden unless draft-early.js found a started poster
   before the first paint (html.pz-drafts; not with a search in the address); its room held from then, so the races never move
   as finder.mjs draws it: the heading's line and the first row (one card a column: one, two from 880 px), the note
   too where the first row is every card; opened by the checkout's link (html.pz-drafts-open), every row and the note — the
   count is draft-early.js's (--pz-drafts), the columns race.css's (--cols). finder.mjs lets the room go once drawn. Every row
   one height; the rules between rows are each card's shadow in the 1 px row gap (the list clips the first row's, and an empty
   cell has none). */
.finder { --cols: 1; --drafts-head: 56px; --draft-row: 176px; --drafts-note: 44px; --draft-thumb: 54px; }   /* a phone: the name and its line on two lines each, the actions 44 px — 172 px at most */
/* two columns where a race's whole name fits beside its poster (the visual seat: at 700 px "Cholmondeley Castle Tria…"); range
   queries leave no gap at a zoomed 879.5 px (the code seat's NIT-3); a name or its line on two lines at most */
@media (width >= 560px) { .finder { --draft-row: 160px; --draft-thumb: 72px; } }   /* wider: the name on one line, its line on two at most */
@media (width >= 560px) { .finder .drafts-list .dtext > .dt { -webkit-line-clamp: 1; } }   /* …held to it: an own race's long name ends "…" (it is on the small poster too — the fable re-check's 1) */
@media (width >= 880px) { .finder { --cols: 2; } }
.finder .drafts { display: none; margin: 24px 0 0; border-block: 1px solid var(--rule); }
html.pz-drafts .finder .drafts { display: block;
  min-height: calc(var(--drafts-head) + var(--draft-row) + var(--drafts-note) * clamp(0, var(--cols) + 1 - var(--pz-drafts, 1), 1) + 2px); }
html.pz-drafts.pz-drafts-open .finder .drafts {
  min-height: calc(var(--drafts-head) + round(up, var(--pz-drafts, 1) / var(--cols), 1) * (var(--draft-row) + 1px) - 1px + var(--drafts-note) + 2px); }
html.pz-drafts.pz-drafts-drawn .finder .drafts { min-height: 0; }
html.pz-drafts .finder .drafts.nomatch { display: none; }   /* a search none of his posters answers (his pick 4 A) */
.finder .drafts-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--drafts-head); }
.finder .drafts-head h2 { margin: 0; font: 600 16px/1.3 var(--font-ui); letter-spacing: 0; }
.finder .drafts-more { min-height: 44px; font-size: 15px; white-space: nowrap; }
.finder .drafts-list { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(var(--draft-row), auto);
  gap: 1px 32px; margin: 0; padding: 0; list-style: none; clip-path: inset(1px -12px -12px -12px); }   /* the first row's rule clipped whole (1 px in: at a fractional top a sliver showed — the visual re-check), nothing else (the code seat's NIT-2) */
/* each card top-aligned (the visual seat: centred, a grown card moved its neighbour's name): the poster's top at the name's */
.finder .drafts-list > li { position: relative; display: grid; grid-template-columns: var(--draft-thumb) minmax(0, 1fr); grid-template-areas: "thumb text" "thumb act";
  grid-template-rows: auto 1fr; align-content: start; align-items: start; gap: 4px 16px; padding-block: 12px; box-shadow: 0 -1px 0 var(--rule); }
.finder .drafts-list > li[hidden] { display: none; }
/* collapsed: the first row; "View all N" where there are more; Remove on every card (his pick 1 A's words); the note once every
   card is shown — while searching,
   every card the search finds (his pick 4 A) */
@media (width < 880px) {
  .finder .drafts.many:not(.open):not(.searching) .drafts-list > li:nth-child(n+2) { display: none; }
  .finder .drafts.many:not(.open):not(.searching) .drafts-note { display: none; }
}
@media (width >= 880px) {
  .finder .drafts.many2:not(.open):not(.searching) .drafts-list > li:nth-child(n+3) { display: none; }
  .finder .drafts.many2:not(.open):not(.searching) .drafts-note { display: none; }
  .finder .drafts:not(.many2) .drafts-more { display: none; }
}
.finder .drafts.searching .drafts-more { display: none; }
.finder .drafts-list .thumb { grid-area: thumb; width: var(--draft-thumb); padding-top: 3px; }   /* the frame's top at the name's cap height */
.finder .drafts-list .thumb .pp-sheet { overflow: hidden; }
.finder .drafts-list .thumb .pt { position: absolute; inset: auto 8% 7% 8%; font: 700 6px/1.1 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase;
  overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }   /* a long title on two lines */
.finder .drafts-list .dtext { grid-area: text; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.finder .drafts-list .dtext > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.finder .drafts-list .dtext > .dt, .finder .drafts-list .dtext > .dm { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.finder .drafts-list .dm > span { white-space: nowrap; }   /* its line breaks only at a "·" (the visual seat: "Long / distance") */
.finder .drafts-list .dt { font-size: 16px; font-weight: 500; line-height: 1.35; }
.finder .drafts-list > li:not(.asking):hover .dt { text-decoration: underline; text-underline-offset: 3px; }   /* asked, the card opens nothing */
.finder .drafts-list .dm, .finder .drafts-list .de { font-size: var(--small); line-height: 1.4; color: var(--text-2); }
.finder .drafts-list .dact { grid-area: act; display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; }
.finder .drafts-list .dact a, .finder .drafts-list .dact button { min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; }
/* the whole card opens it — the poster and the name too (his look): Continue's own area stretched over the card; Remove, and the
   question's two answers, above it */
.finder .drafts-list .dgo::after { content: ""; position: absolute; inset: 0; }
.finder .drafts-list .dact button { position: relative; z-index: 1; }
.finder .drafts-list .dact .drm, .finder .drafts-list .dact .dno { color: var(--text-2); font-size: 15px; }
.finder .drafts-list .dact .dq { font-size: 15px; color: var(--text); }
.finder .drafts-note { display: flex; align-items: center; height: var(--drafts-note); margin: 0; font-size: var(--small); color: var(--text-2); }   /* no rule over it: a note, not a row (his mock-up; the visual seat's polish 2) */
@media (max-width: 559px) { .finder .drafts-list .dt { font-size: 15px; } }
/* 9c4 (his picks 2026-10-26 on the sheet — finder/9c4-record.md). 1 B: while words are typed each race found is a row of text —
   one column, two from 880 px as his unfinished posters — its name, its place, its course (no date, his look at cc5096a7), an
   arrow; the words typed marked (finder.mjs); the posters back when the field is cleared (their pictures stay loaded). His note:
   the count over the rows — the live region the screen reader always heard, never taken out of the page (shown while races are
   found, for a screen reader alone otherwise: nothing found says it in its own heading). Its two tracks named here: system.css's
   tile is a subgrid of the page's rows, which left a row one track and its lines drawn over each other (the visual seat's HIGH);
   the name in ink as his own rows' (the caption's grey, its MEDIUM). */
.finder .tiles .rl { display: none; }
html[data-results=some] .finder .tiles, html[data-results=few] .finder .tiles { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 32px; margin-top: 0; border-top: 1px solid var(--hairline); }
html[data-results=some] .finder .tiles a.tile:not([hidden]), html[data-results=few] .finder .tiles a.tile:not([hidden]) {
  display: grid; grid-template-columns: minmax(0, 1fr) 14px; grid-template-rows: auto auto; grid-template-areas: "name go" "line go"; align-items: center; gap: 1px 16px;
  padding: 12px 0 13px; box-shadow: 0 1px 0 var(--hairline); }
html[data-results=some] .finder .tiles .stage, html[data-results=few] .finder .tiles .stage { display: none; }
html[data-results=some] .finder .tile b.cap, html[data-results=few] .finder .tile b.cap { grid-area: name; margin: 0; font-size: 16px; text-align: left; color: var(--ink); }
html[data-results=some] .finder .tiles .rl, html[data-results=few] .finder .tiles .rl { grid-area: line; display: flex; flex-direction: column; font-size: var(--small); line-height: 1.4; color: var(--text-2); }
html[data-results=some] .finder .tiles a.tile::after, html[data-results=few] .finder .tiles a.tile::after { content: "›"; content: "›" / ""; grid-area: go; justify-self: end; font-size: 20px; line-height: 1; color: var(--soft); }
html[data-results=some] .finder .tiles a.tile:hover b.cap, html[data-results=few] .finder .tiles a.tile:hover b.cap { text-decoration: underline; text-underline-offset: 3px; }
.finder mark.x { padding: 0 1px; white-space: normal; }
.finder .count { margin: 20px 0 8px; font-size: var(--small); color: var(--text-2); }
/* his posters alone found (his look at cc5096a7, 1): nothing to count — the list's heading for a screen reader alone — and his
   list's own rule closes them, "Can't find your race?" right after it: no empty list's hairline, no second rule a gap below (the
   visual seat at his look's round) */
html.pz-mine-only .finder .count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.pz-mine-only .finder .tiles { border-top: 0; }
html.pz-mine-only .finder .ownafter { margin-top: 0; border-top: 0; }
html:not([data-results=some]):not([data-results=few]) .finder .count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 2 C: his posters the search finds as rows too (his 4 A: every one), the poster first, the words marked; the card still opens it
   — Continue's own area stretched over it (its containing block the card, so the row's clip leaves it whole), its words and
   Remove (and Remove's question) back once the field is cleared; the note kept */
.finder .drafts.searching .drafts-list { grid-auto-rows: auto; }
.finder .drafts.searching .drafts-list > li { align-items: center; padding-right: 30px; }
.finder .drafts.searching .drafts-list .dact { height: 0; overflow: hidden; }
.finder .drafts.searching .drafts-list .dact button, .finder .drafts.searching .drafts-list .dact .dq { display: none; }
.finder .drafts.searching .drafts-list > li::after { content: "›"; content: "›" / ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; color: var(--soft); }
/* the keyboard's ring round the row, drawn over it: an outline sat under the small poster and on the arrow, and the list's clip took
   its top edge (the visual seat's MEDIUM-3, its re-check) — clear of both sides, inside the clip */
.finder .drafts.searching .drafts-list > li:has(.dgo:focus-visible)::before { content: ""; position: absolute; inset: 3px -8px; z-index: 4; border: 2px solid var(--focus); pointer-events: none; }
/* words for a screen reader alone (the search field's label, the count as the search narrows) */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the closing band (8a, his picks 1 A · 2 A, 2026-10-21): the page's end on the product grey — the poster as the hero shows
   it, its name, the prices in the bar's words, the button, the promise; on a phone the name and prices beside the poster,
   the button and the promise under them. The last band meets the footer (system.css). */
.final.closing { text-align: left; padding-block: 52px; }
.closing .cl-in { display: flex; gap: 44px; align-items: center; justify-content: center; }
.closing .cl-art { width: 168px; flex: none; }
.closing .cl-art .pp-mount > .poster { width: 100%; margin: 0; }
.closing .cl-tx { max-width: 420px; min-width: 0; }
.closing h2 { font: 400 clamp(26px, 2.3vw, 30px)/1.15 var(--font-display); margin: 0 0 10px; color: var(--text); text-wrap: balance; }
.closing .cl-pr { margin: 0; font-size: 15.5px; color: var(--text-2); }
.closing .cl-pr .pr { white-space: nowrap; }
.closing .cl-pr b { color: var(--text); font-weight: 600; }
.closing .btn { margin-top: 20px; min-width: 260px; }
.closing .cl-as { margin: 12px 0 0; font-size: var(--small); color: var(--text-3); max-width: 44ch; }
@media (max-width: 599px) {
  .final.closing { padding-block: 32px 36px; }
  .closing .cl-in { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "art hp" "btn btn" "as as"; gap: 0 18px; align-items: center; }   /* the flex's gap would be the rows' too */
  .closing .cl-tx { display: contents; }
  .closing .cl-art { grid-area: art; width: 92px; }
  .closing .cl-hp { grid-area: hp; min-width: 0; }
  .closing h2 { font-size: 22px; margin: 0 0 6px; }
  .closing .cl-pr { font-size: 14.5px; }
  .closing .cl-pr .pr { display: block; }
  .closing .cl-pr .sep { display: none; }
  .closing .btn { grid-area: btn; display: flex; width: 100%; min-width: 0; margin-top: 22px; }
  .closing .cl-as { grid-area: as; }
}

/* a started poster (8a, his rule 2026-10-21): no style choice — race-page.mjs marks the page and names the poster's look */
.pz-started .hero .art :is(.grouplabel, .rail, .carousel) { display: none; }
.cap .mine b { font-weight: 600; color: var(--text); }

/* the homepage of record (8b; the mock-up surfaces/home.html's own <style>): the carousel at every width — one large poster
   compares the styles (S2 callout 15), never the race page's rail; on a phone the words first (H1 → lede → button → prices),
   the button full width (How it works off the hero at 10h, his note), the prices and the gift's line centred; the wall's four
   first tiles in two columns */
.home-hero .art .carousel { display: block; }
/* no word alone on a line's end (the visual seat: the H1's "posters") */
.home-hero h1 { text-wrap: balance; }
/* English running text does not break words (the builder's rule of 2026-10-05, builder.css; system.css hyphenates long words
   for German): his strapline's "cele-brates" on a phone, the footer's "affili-ated" (the visual seats, 8b) */
.home :is(p, li, .hint, .note, .cap):lang(en) { hyphens: manual; }
.home-hero .pricelines { margin-top: 16px; }
.home-hero .pricelines p { margin: 0; }
.home-hero .pricelines p + p { margin-top: 4px; }
/* the gift's line under the prices (10h, his pick 5 C — the homepage's gift section made one line): its icon beside its words */
.home-hero .gift-line { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.home-hero .gift-line svg { vertical-align: -3px; margin-right: 6px; }
@media (max-width: 959px) {
  .home-hero .art { order: 2; }
  .home-hero .copy { order: 1; }
}
@media (max-width: 600px) {
  .home-hero .copy .actions .btn { display: flex; width: 100%; }
  .home-hero .copy :is(.pricelines, .gift-line) { text-align: center; }
  #wall .wall.six a:nth-child(n+5) { display: none; }   /* over the tile's own display (the posters alone, below) */
}
/* the wall's tiles are the posters alone (his looks 2026-10-23): the rows of tiles (a phone's, a tablet's) apart by the gap */
#wall .wall { row-gap: 24px; }
#wall .wall a { display: block; }
/* Personalise your poster (his look 2026-10-23: "more space"): the section's heading, then two rows on the race page's photo grid —
   the name, race date and times beside the hero's footer up close, a print on the wall (the sheet's edge and shadow); the photo
   from the day below; each row's heading the display face a step under the section's. Its own class: system.css's .pers is the
   rig's held-state grid (the visual seat: it split the section in two) */
.home-pers > h2 { margin: 0 0 40px; }
.home-pers .photoex + .photoex { margin-top: 64px; }
.home-pers .px-text > h3 { font: var(--h2-weight) 22px/1.2 var(--font-display); letter-spacing: var(--h2-tracking); margin: 0 0 10px; }
.home-pers .px-name .px-show { margin: 0; min-width: 0; }
.home-pers .px-name svg.crop { display: block; width: 632px; max-width: 100%; height: auto; box-shadow: 0 0 0 1px var(--sheet-edge), var(--shadow-sheet); }
.home-pers .px-name figcaption { margin-top: 14px; }
@media (max-width: 959px) {
  .home-pers > h2 { margin-bottom: 36px; }
  .home-pers .photoex + .photoex { margin-top: 48px; }
  .home-pers .px-name { row-gap: 8px; }   /* stacked, the row's heading labels its picture (the visual re-check: it floated midway) */
}

/* the older pages (row 10b) */
.prose h1 .sub-h { color: var(--soft); font-weight: 500; }

/* the static pages (row 10b; tools/static-pages.mjs) — the reading pages in the prose column, Pricing's cards shown, not chosen */
.page.reading .actions { margin-top: 28px; }
.how-steps { margin: 4px 0 36px; }
.how-two { margin: 0 0 12px; }
.price-cards { margin: 18px 0 32px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .price-cards { grid-template-columns: 1fr; } }   /* his look at the preview: side by side on a phone the lists ran two words a line */
.price-card { cursor: default; padding: 16px 18px; }
.price-card .p { font-size: 22px; margin: 4px 0 0; }
.price-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--text-2); font-size: 15px; }
.price-card li + li { margin-top: 4px; }
.page.reading .three h3 { font-size: 17px; margin: 0 0 4px; }
.page.reading .three { margin-bottom: 28px; }   /* the paragraph after it its own (the visual seat: it ran on from the third column) */
.page.reading .three p { margin: 0; color: var(--text-2); }
.not-found .msg .code { font-size: 14.5px; color: var(--soft); margin: 0 0 4px; }   /* the states mock-up's 404 */
/* /contact (the visual seat): the intro nearer its form than its heading is, the privacy line clear of the button */
#ct-intro { margin-bottom: 24px; }
form#contact ~ p.note { margin-top: 24px; }
/* the form's answer is a sentence with a link in it (CF9): the system's error mark kept, the words in one flow, not flex items */
#ct-said.err { display: block; }
#ct-said.err::before { display: inline-block; margin-right: 8px; vertical-align: -3px; }
.gifts #wall .actions { margin: 24px 0 16px; }   /* Examples: the homepage's wall (#wall's spacing), one button after it (his pick A) */