/* ============================================================
   HOMETOWN — a Rebel Sites template (docs/rebel-sites/concepts/template-hometown/hometown.css, scoped under .rht)
   The officer's city is the hero. Cartographic language: water in chart blue, land on paper, contours in sienna,
   freeways in amber; the owner's brand is the ink and the one action colour (theme.ts, AA by construction).
   Every rule sits under .rht and every keyframe is rht-* (css-scope.test.ts).
   ============================================================ */
.rht { --paper: #FBFAF6; --land: #E0DFDB; --card: #FFFFFF; --water: #CFE3EA; --water-line: #8DB7C6; --water-ink: #2F6A82; --ink: #16324A; --ink-2: #4A5D6E; --contour: #D8BD9E; --park: #E2E9D3; --road: #E4A94F; --jac: #5B3FA0; --jac-deep: #47307F; --jac-tint: #EFEAF7; --line: rgba(22, 50, 74, .14); --harbor: #16324A; --serif: var(--font-display); --sans: var(--font-body); --wrap: min(1240px, 100% - 32px); /* the header's column — the width the bar's `top-in` and its brand align to, published for other products so their content lines up with the header (CONTENT MEDIA's blog, director ruling (B) 2026-10-24): `min(1360px, 100% - 32px)`, content-box (padding-free), 16px each side */ --rs-wrap: min(1360px, 100% - 2 * var(--rs-gutter)); --rs-gutter: 16px; --ease: cubic-bezier(.2, .7, .2, 1); --lift: 0 1px 0 rgba(22, 50, 74, .06), 0 18px 40px -18px rgba(22, 50, 74, .35); }
.rht, .rht *, .rht *::before, .rht *::after { box-sizing: border-box; }
/* an in-page jump stops 24px below what is stuck at the top (the header, and the calculators' sub menu on its page), as
   measured (--site-stuck, site-jumps.ts); a target with top padding gives it back (scroll-margin-top), so its first words land there */
html:has(.rht) { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--site-stuck, 64px) + 24px); }
@media (prefers-reduced-motion: no-preference) {
  html:has(.rht) { scroll-behavior: smooth; }
}
.rht { margin: 0; background: var(--paper); color: var(--ink-p, var(--ink)); font: 400 19px/1.62 var(--serif); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.rht) h1, :where(.rht) h2, :where(.rht) h3, :where(.rht) p, :where(.rht) ul, :where(.rht) ol, :where(.rht) figure, :where(.rht) blockquote, :where(.rht) dl, :where(.rht) dd { margin: 0; }
/* ---------- the brand's placements (theme.ts hometownInks; Andrew, 2026-10-15: every brand colour reads at AA, as close to
   itself as reading allows). The root carries today's values (theme.ts hometownVars, which the calculators' skin and the
   editions read) and hometownInks' beside them; each ground below sets the page's working names from its own ground: --ink
   (small words, AA) and --ink-lg (large words, the drawing's rules and marks, 3:1) in the primary, --ink-2 the quiet words,
   --jac and --jac-lg the tertiary as words and marks (the buttons, the text links, the map's markers), --water-ink and
   --water-ink-lg the secondary as words and as the details' numerals, icons and rules (Andrew, 2026-10-16). Each falls back to today's value
   where a name is missing (the editor's preview between a colour's live message and its redraw). ---------- */
.rht { --ink-0: var(--ink); --ink-2-0: var(--ink-2); --jac-0: var(--jac); --water-ink-0: var(--water-ink); --go-edge-0: var(--go-edge, transparent); }
/* the paper, and the white cards wherever they sit */
.rht > *, .rht :is(.note, .chip-hood, .lookup, .ht-calcframe, .ms-frame, .nav-sub, .bl-card, .bl-author, .team-reveal, .team-hint, .ht-area, .hub-card) {
  --ink: var(--ink-p, var(--ink-0)); --ink-lg: var(--ink-p-lg, var(--ink-0)); --ink-2: var(--ink-q, var(--ink-2-0));
  --jac: var(--acc-p, var(--jac-0)); --tl: var(--tl-p, var(--jac-0)); --jac-lg: var(--acc-p-lg, var(--jac-0)); --water-ink: var(--sec-p, var(--water-ink-0));
  --water-ink-lg: var(--sec-p-lg, var(--water-ink-0));
}
.rht :is(.note, .chip-hood, .lookup, .ht-calcframe, .ms-frame, .bl-card, .bl-author, .team-reveal, .team-hint, .ht-area, .hub-card) { color: var(--ink); }
/* the washed land: the drawing's land, and every other band of a home page (the alternation below, THE PAGE'S BANDS) */
.rht :is(.sec-land, .band, main > .atlas-hero ~ .sec:not(.harbor):nth-child(even of .sec:not(.harbor))) {
  --ink: var(--ink-l, var(--ink-0)); --ink-lg: var(--ink-l-lg, var(--ink-0));
  --jac: var(--acc-l, var(--jac-0)); --tl: var(--tl-l, var(--jac-0)); --jac-lg: var(--acc-l-lg, var(--jac-0)); --water-ink: var(--sec-l, var(--water-ink-0));
  --water-ink-lg: var(--sec-l-lg, var(--water-ink-0));
  color: var(--ink);
}
/* the water: the locators, a portrait's initials, the hero's words and an inner page's head (on the night, the night's own
   rules below give them back the night's: THE HERO TONE) */
.rht :is(.locator, .initials, .hero-copy, .page-head:not(.is-about)) {
  --ink: var(--ink-w, var(--ink-0)); --ink-lg: var(--ink-w-lg, var(--ink-0));
  --jac: var(--acc-w, var(--jac-0)); --tl: var(--tl-w, var(--jac-0)); --jac-lg: var(--acc-w-lg, var(--jac-0)); --water-ink: var(--sec-w, var(--water-ink-0));
  --water-ink-lg: var(--sec-w-lg, var(--water-ink-0));
}
.rht :is(.locator, .hero-copy, .page-head:not(.is-about)) { color: var(--ink); }
/* an outlined button on the water sits on its own white wash */
.rht :is(.hero-copy, .page-head:not(.is-about)) .btn-line { color: var(--ink-wb, var(--ink)); }
/* the atlas: its place names are drawn over a halo of its land, and so are its pins (Atlas.tsx `.halo`), so its words and marks
   are held to the land (`--at-ink`, `--at-det`: words, AA; `--at-mark`, `--at-det-mark`: marks, 3:1), wherever on the map a pin
   falls (a park, the water). The map's markers (the office's star and name, a pin under the pointer or chosen, the locators'
   spots, the leader) are details: the secondary's readable shade (rule B: never the button colour), held apart from the water,
   itself a pale tint of the secondary, by its contrast. A pin's focus ring reaches past its halo: it is held to the water, the
   darkest of the map's light grounds (`--acc-w-lg`, which reads on the land and the parks too), over its own halo of the land
   (Atlas.tsx `.focus-halo`). On the night the place names and the dots are the night's paper, the markers the secondary's
   shade on the night land (`--n-sec-l`, `--n-sec-l-lg`), the focus ring the action's (`--n-acc-l-lg`), on its halo (the
   night's parks keep the drawing's pale green: no one shade reads on both). The area names, the grid letters and the credit are drawn over a halo of the land too; the water names sit on the
   water, so in daylight the secondary as words is held to the water (`--sec-w`), not the paper's (on the night the water
   lifted, `--n-water-ink`, which reads on the night's water and land). The leader from a chosen pin to its note crosses the land and the water: it is held to both (in daylight
   `--sec-lead`; on the night `--n-sec-ll`) */
.rht .atlas { --at-ink: var(--ink-l, var(--ink)); --at-det: var(--sec-l, var(--water-ink-0)); --at-mark: var(--ink-l-lg, var(--ink-lg)); --at-det-mark: var(--sec-l-lg, var(--water-ink-0)); --at-focus: var(--acc-w-lg, var(--jac-lg)); --water-ink: var(--sec-w, var(--water-ink-0)); }
.rht .leader { --lead: var(--sec-lead, var(--water-ink-0)); }
/* large words take the 3:1 shade (WCAG's large type: 24px, or 18.66px bold); a size that crosses 24px with the window
   takes it from that width */
.rht :where(.h1, .h2, .prose h2, .bl-prose h2, .rich h2, .note-head h2, .gaz .said, .score .num, .ledger .fig, .stats dd, .initials, .bl-card.is-lead .bl-card-h, .bl-author-n, .prose h3, .rich h3, :is(.prose, .bl-prose, .rich) :is(strong, b)) { color: var(--ink-lg); }
@media (min-width: 1264px) { .rht :where(.h3, .bl-card-h, .ht-area-name) { color: var(--ink-lg); } }
@media (min-width: 1200px) { .rht :is(.quotes li:first-child blockquote, .bl-prose:not(.legal-prose) blockquote) { color: var(--ink-lg); } }
@media (min-width: 1334px) { .rht .faq summary { color: var(--ink-lg); } }
:where(.rht) ul, :where(.rht) ol { padding: 0; list-style: none; }
:where(.rht) img, :where(.rht) svg { display: block; max-width: 100%; }
:where(.rht) a { color: inherit; }
:where(.rht) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* the resets above weigh nothing (:where), so a blog drawn on the site keeps its own spacing; the app's own `.prose` (globals.css)
   sets its paragraphs', headings', lists' and quotes' margins and its lists' bullets at one class and one element, so inside the
   long words the resets keep that weight here, as they had it before */
.rht :where(.prose) :is(h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.rht :where(.prose) :is(ul, ol) { padding: 0; list-style: none; }
/* the keyboard ring: the kit's two-tone ring (fit.css), the root's ink over its paper (the day's, which the root keeps on the night
   page too), one pair through every band, the harbor and the night included */
.rht { --focus-line: var(--ink); --focus-halo: var(--paper); }
.rht :focus-visible { outline-offset: 3px; border-radius: 6px; }
/* a jump's target holds the focus without a ring (site-jumps.ts): the reader's eyes are on its words */
.rht [data-jump-focus]:focus { outline: none; }
.rht .wrap { width: var(--wrap); margin-inline: auto; }
.rht .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rht .h1 { font: 500 clamp(40px, 4.4vw, 66px)/1.03 var(--serif); letter-spacing: -.018em; font-variation-settings: 'opsz' 72; text-wrap: balance; }
.rht .h2 { font: 500 clamp(32px, 3.3vw, 48px)/1.08 var(--serif); letter-spacing: -.012em; font-variation-settings: 'opsz' 60; text-wrap: balance; }
.rht .h3 { font: 500 clamp(22px, 1.9vw, 27px)/1.2 var(--serif); letter-spacing: -.004em; }
.rht .lede { font-size: clamp(19px, 1.45vw, 21px); color: var(--ink-2); max-width: 36em; }
.rht .small { font: 500 15px/1.5 var(--sans); color: var(--ink-2); }
/* the button fit's variables (fit.css): the size, padding and height drawn below come from these, and every variant or breakpoint sets only the variable it changes */
.rht .btn { --button-size: 16px; --button-pad: 24px; --button-pad-block: 14px 12px; --button-pad-floor: 12px; --button-icon: 28px; --button-em: .51; --button-min-height: 50px; display: inline-flex; align-items: center; gap: 10px; min-height: var(--button-min-height); padding-block: var(--button-pad-block); padding-inline: var(--button-pad); border-radius: 10px; font: 700 var(--button-size)/1 var(--sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap; transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.rht .btn svg { width: 18px; height: 18px; flex: none; margin-top: -2px; }
.rht .btn-go { background: var(--go, var(--jac)); color: var(--go-ink, #fff); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), inset 0 0 0 1px var(--go-edge, transparent); }
.rht .btn-go:hover { background: var(--go-deep, var(--jac-deep)); }
/* many of one button (templates/button-crowd.ts): more than three in one section are outlined in the button colour, its words the
   accent's shade that reads on the ground under them (--jac) */
.rht .btn-go.btn-many { background: transparent; color: var(--jac); box-shadow: inset 0 0 0 1.5px currentColor; }
.rht .btn-go.btn-many:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.rht .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); background: rgba(255,255,255,.55); }
.rht .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.rht .btn-sm { --button-min-height: 42px; --button-pad-block: 11px 9px; --button-pad: 18px; --button-size: 15px; }
/* a text button is a thumb's 32px tall on a phone (34px with its words' 20px): the padding is the hit area, the negative margin gives the
   room back, so its words and everything around them stay where they were (__tests__/tap-room.test.ts) */
/* a text link's leading is 1.5 (24px: its padding two px less each side, its margin as it was, so a one-line link keeps its 34px box,
   its 20px footprint in the flow and its words their place, measured) so that, wrapped, the underline of a line clears the next
   line's capitals by 4px: at the face's normal leading (20px) it grazed them (link-underline.test;
   Andrew, 2026-10-28). Its icon (the hero's second button as a text link draws the booking calendar) is the button's size and sits
   beside the words as the button's does (inline-flex), not on a line of its own. */
/* a call to the lead form: never smaller than the words it sits among nor under 16px, semi-bold, its colour its own variable, the button colour at 7:1
   on a light ground (theme.ts linkShade; the crowd's buttons and every other link keep theirs) (Andrew, 2026-10-30: "WHY ARE TEXT
   LINKS SO SMALL?"; cta-links.spec.ts) */
.rht .textlink { display: inline-flex; align-items: center; gap: 6px; font: 700 max(1em, 16px)/1.5 var(--sans); color: var(--tl); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; padding-block: 5px; margin-block: -7px; }
.rht .textlink svg { width: 18px; height: 18px; flex: none; }
.rht .textlink:hover { color: var(--jac-deep); }
.rht .atlas-hero { position: relative; background: var(--water); overflow: hidden; }
.rht .atlas-hero .atlas { width: 100%; height: auto; }
.rht .hero-copy { position: relative; z-index: 2; }
.rht .hero-copy .h1 { max-width: 11em; }
.rht .hero-copy .lede { margin-top: 22px; color: color-mix(in srgb, var(--ink) 70%, var(--ink-2)); max-width: 27em; }
.rht .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* two buttons stacked on a phone share one width, the wider one's (Andrew, 2026-10-20, mortgagepops.com: "CTA buttons need to auto
   size to the same width as the larger button when stacked like this"): one column as wide as the widest, each button stretched
   to it; side by side on a wider screen they keep their own widths (templates/__tests__/button-pair-width) */
@media (max-width: 560px) {
  .rht :is(.hero-copy, .offer, .harbor) .hero-ctas { display: grid; grid-template-columns: minmax(0, max-content); }
  .rht :is(.hero-copy, .offer, .harbor) .hero-ctas > .btn { justify-content: center; }
}
.rht .index { margin-top: 44px; max-width: 470px; }
.rht .index h2 { font: 700 15px/1.3 var(--sans); color: var(--ink); margin-bottom: 8px; }
.rht .index ul { -moz-columns: 2; columns: 2; -moz-column-gap: 28px; column-gap: 28px; }
.rht .index li { -moz-column-break-inside: avoid; break-inside: avoid; }
.rht .index button { width: 100%; display: flex; align-items: baseline; gap: 6px; padding: 5px 0; font: 600 15.5px/1.3 var(--sans); color: var(--ink); text-align: left; }
.rht .index button::after { content: ''; order: 1; flex: 1; border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 35%, transparent); transform: translateY(-4px); }
.rht .index button .ref { order: 2; font-weight: 500; color: var(--water-ink); font-variant-numeric: tabular-nums; }
.rht .index button:hover .nm, .rht .index button[aria-pressed="true"] .nm { color: var(--jac); }
.rht .index button[aria-pressed="true"] .nm { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rht .atlas .land { fill: var(--land); }
.rht .atlas .isle { fill: var(--land); stroke: var(--water-line); stroke-width: 1.2; }
.rht .atlas .water { fill: var(--water); }
.rht .atlas .coastline { fill: none; stroke: var(--water-line); stroke-width: 1.5; }
.rht .atlas .bathy path { fill: none; stroke: var(--water-line); stroke-width: 1; }
.rht .atlas .park { fill: var(--park); }
.rht .atlas .base { fill: url(#ht-hatch); }
.rht .atlas .hatch-line { stroke: #D6D1C1; stroke-width: 1.5; }
.rht .atlas .contours path { fill: none; stroke: var(--contour); stroke-width: 1; }
.rht .atlas .river { fill: none; stroke: var(--water-line); stroke-width: 2; }
.rht .atlas .bridge { fill: none; stroke: var(--ink-lg); stroke-width: 2; opacity: .45; }
.rht .atlas .casing { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.rht .atlas .road { fill: none; stroke: var(--road); stroke-width: 3.2; stroke-linecap: round; }
.rht .atlas .shield path, .rht .atlas .shield rect { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.rht .atlas .shield.st rect { fill: #fff; stroke: var(--ink); }
.rht .atlas .shield text { font: 800 12px var(--sans); fill: #fff; text-anchor: middle; }
.rht .atlas .shield.st text { fill: var(--ink); }
.rht .atlas .wl { font: italic 400 20px var(--serif); color: var(--water-ink); fill: currentColor; letter-spacing: .05em; }
.rht .atlas .wl-lg { font-size: 34px; letter-spacing: .32em; }
.rht .atlas .wl-sm { font-size: 16px; }
.rht .atlas .al { font: 600 13px var(--sans); fill: var(--map-area, #696152); letter-spacing: .02em; paint-order: stroke; stroke: var(--land); stroke-width: 4px; stroke-linejoin: round; }
.rht .atlas .al-sm { font-size: 12px; font-weight: 500; }
.rht .atlas .gridref text { font: 600 12px var(--sans); fill: var(--map-grid, #526476); paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round; }
.rht .atlas .gridref line { stroke: var(--ink); stroke-width: 1; opacity: .055; }
.rht .atlas .pin { cursor: pointer; outline: none; }
.rht .atlas .pin .hit { fill: transparent; }
.rht .atlas .pin .focus-halo { fill: none; stroke: var(--land); stroke-width: 8; opacity: 0; }
.rht .atlas .pin .focus { fill: none; stroke: var(--at-focus, var(--jac-lg)); stroke-width: 3; opacity: 0; }
.rht .atlas .pin:focus-visible :is(.focus, .focus-halo) { opacity: 1; }
.rht .atlas .pin .ring { fill: var(--at-det-mark, var(--water-ink)); opacity: 0; transform: scale(.4); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.rht .atlas .pin .halo { fill: var(--land); stroke: var(--land); stroke-width: 7; stroke-linejoin: round; }
.rht .atlas .pin.office .halo { stroke-width: 6; }
.rht .atlas .pin .dot { fill: var(--at-mark, var(--ink-lg)); stroke: #fff; stroke-width: 3; transition: fill .2s var(--ease); }
.rht .atlas .pin .star { fill: var(--at-det-mark, var(--water-ink)); stroke: #fff; stroke-width: 2; }
.rht .atlas .pl { font: 700 15px var(--sans); color: var(--at-ink, var(--ink)); fill: currentColor; paint-order: stroke; stroke: var(--land); stroke-width: 5px; stroke-linejoin: round; transition: color .2s var(--ease); }
.rht .atlas .pl-office { color: var(--at-det, var(--water-ink)); }
.rht .atlas .pin:hover .dot { fill: var(--at-det-mark, var(--water-ink)); }
.rht .atlas .pin:hover .pl { color: var(--at-det, var(--water-ink)); }
.rht .atlas .pin[aria-pressed="true"] .dot { fill: var(--at-det-mark, var(--water-ink)); }
.rht .atlas .pin[aria-pressed="true"] .ring { opacity: .22; transform: scale(1); }
.rht .atlas .pin[aria-pressed="true"] .pl { color: var(--at-det, var(--water-ink)); }
.rht .note { background: var(--card); border-radius: 14px; box-shadow: var(--lift); padding: 22px 24px 24px; position: relative; }
.rht .note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.rht .note-head h2 { font: 500 28px/1.1 var(--serif); letter-spacing: -.01em; }
.rht .note-head .ref { font: 600 14px var(--sans); color: var(--water-ink); white-space: nowrap; }
.rht .note .homes { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.rht .note .ask { margin-top: 16px; padding-left: 14px; border-left: 3px solid var(--water-ink-lg); font: italic 400 18.5px/1.45 var(--serif); }
.rht .note .fits { margin-top: 16px; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.rht .note .fits b { display: block; font: 700 17px/1.3 var(--sans); color: var(--ink); }
.rht .note .note-cta { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.rht .note.is-swapping .note-body { opacity: 0; transform: translateY(4px); }
.rht .note-body { transition: opacity .18s var(--ease), transform .18s var(--ease); }
.rht .leader { position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; overflow: visible; }
.rht .leader path { fill: none; stroke: var(--lead, var(--jac-lg)); stroke-width: 1.75; stroke-dasharray: 2 5; stroke-linecap: round; }
.rht .leader circle { fill: var(--lead, var(--jac-lg)); }
@media (min-width: 1320px) {
  /* the viewport math divides by --z (the large-screen stage below): Chromium multiplies vw by zoom, so the copy's
     drop and its offset from the 1360px column would otherwise sit far right of where the zoomed column stands; the
     width's 36vw arm only inflates under zoom, so its 520px cap can only win harder — that arm stays as it was */
  .rht .atlas-hero .hero-copy { position: absolute; left: max(40px, calc((100vw / var(--z) - 1360px) / 2 + 16px)); top: calc(4.2vw / var(--z)); width: min(36vw, 520px); }
  /* the headline over the map holds its last two words on its line (keep-words.ts joins them; words.tsx pairFit, --last-pair:
     their characters): the copy's 520px column is set no larger than holds them ("the neighborhood." ran 6px out of it); the column is
     never wider than 520px, which also holds it where WebKit counts cqi in the big-screen stage's zoomed pixels */
  .rht .atlas-hero .hero-copy:has(> .h1[style*="--last-pair"]) { container-type: inline-size; }
  .rht .atlas-hero .hero-copy > .h1[style*="--last-pair"] { font-size: min(clamp(40px, 4.4vw, 66px), calc(min(100cqi, 520px) / (var(--last-pair) * .52))); }
  .rht .atlas-hero .note { position: absolute; z-index: 4; right: 28px; bottom: 28px; width: 356px; }
}
@media (max-width: 1319px) {
  /* the hero paints no ground of its own under 1320px: the page's own paper (or night paper) shows through, and the chart
     stands on it. The desktop rule's water is the words panel's here (`.hero-copy`, below); painting the paper again on the
     hero only restated the page's ground in the colour-role map, where a near-neutral is no brand colour at all (the bar,
     2026-10-24: #F6F9FF against a gold secondary, #F6F9FF against midnight's primary at 3 chroma) */
  .rht .atlas-hero { background: transparent; }
  .rht .hero-copy { background: var(--water); padding: 48px max(16px, calc((100vw - 1240px) / 2)) 44px; }
  .rht .hero-copy .h1 { max-width: 13em; }
  .rht .map-frame { position: relative; border-block: 1px solid var(--water-line); }
  .rht .atlas-hero .note { width: var(--wrap); margin: -40px auto 0; z-index: 4; }
  .rht .leader { display: none; }
  .rht .index { max-width: 560px; }
}
@media (min-width: 960px) and (max-width: 1319px) {
  .rht .hero-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); -moz-column-gap: 56px; column-gap: 56px; align-items: end; }
  .rht .hero-copy .h1, .rht .hero-copy .lede, .rht .hero-copy .hero-ctas, .rht .hero-copy .head-fine { grid-column: 1; }
  .rht .hero-copy .index { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; }
  .rht .hero-copy .index ul { -moz-columns: 1; columns: 1; }
}
@media (max-width: 720px) {
  .rht .atlas .pl { font-size: 25px; stroke-width: 8px; }
  .rht .atlas .pin .pg { transform: scale(1.6); }
  .rht .atlas .al, .rht .atlas .gridref, .rht .atlas .bathy, .rht .atlas .shield.st { display: none; }
  .rht .atlas .wl-sm { font-size: 24px; }
  .rht .atlas .wl { font-size: 28px; }
  .rht .atlas .road { stroke-width: 5; }
  .rht .atlas .casing { stroke-width: 10; }
  .rht .atlas .contours path { stroke-width: 1.8; }
  .rht .hero-copy { padding-top: 32px; }
  .rht .index ul { -moz-column-gap: 18px; column-gap: 18px; }
  .rht .index button { font-size: 15px; padding: 7px 0; }
  .rht .atlas-hero .note { margin-top: -24px; padding: 20px 18px 20px; }
  .rht .note-head h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: no-preference) {
  .rht .atlas .coastline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rht-draw 1.8s .15s var(--ease) forwards; }
  .rht .atlas .contours, .rht .atlas .bathy { opacity: 0; animation: rht-fade 1.4s .7s var(--ease) forwards; }
  .rht .atlas .pin { opacity: 0; animation: rht-land .5s var(--ease) forwards; animation-delay: calc(1s + var(--i, 0) * 70ms); }
  @keyframes rht-draw { to { stroke-dashoffset: 0; } }
  @keyframes rht-fade { to { opacity: 1; } }
  @keyframes rht-land { from { opacity: 0; } to { opacity: 1; } }
}
/* ---------- the page's entrance (templates/entrance.tsx) ----------
   While the page's faces load (html.rs-entering, at most a second) the site is held back, so it is never seen in the
   fallback faces re-wrapping into the real ones; then the opening band's words rise into place once (the atlas draws
   itself as before, from that moment), and nothing else moves. rht-gate is the stylesheet's own limit: the site shows by
   1.6 s even if the script's timer never fires. The paper is also the ground under the page
   (<body>), never the app's dark canvas; past the page's top and bottom edges (a phone's rubber band and safe areas, a
   trackpad's overscroll) <html> shows the header's colour and the footer's instead (ground.ts, written by the entrance;
   ground.css steps between them), this ground only their fallback. */
html:has(.rht) body { background-color: #FBFAF6; }
html:has(.rht) { --rs-ground-top: var(--rs-ground-top-l, #FBFAF6); --rs-ground-bottom: var(--rs-ground-bottom-l, #FBFAF6); background-color: var(--rs-ground-top); }
html:has(.rht[data-mode="dark"]) { --rs-ground-top: var(--rs-ground-top-d, #16324A); --rs-ground-bottom: var(--rs-ground-bottom-d, #16324A); }
/* the ground under the page is its paper in its tone (a dark page's is the night's), never the light paper's */
html:has(.rht[data-mode="dark"]) body { background-color: var(--rs-ground-top-d, #16324A); }
html:has(.rht).rs-entering .rht { opacity: 0; visibility: hidden; animation: rht-gate 0s 1.6s forwards; }
html:has(.rht).rs-entering .rht * { animation-play-state: paused !important; }  /* important: an entrance's `animation` shorthand resets the play state, and an :is() holding a compound selector outranks this rule (it ran golden hour's, meridian's, quartz's and villa's entrances behind the gate, 2026-10-17) */
@keyframes rht-gate { to { opacity: 1; visibility: visible; } }
@media (prefers-reduced-motion: no-preference) {
  .rht :is(.atlas-hero .hero-copy, .page-head .wrap, .member-open .wrap) { animation: rht-enter .8s var(--ease) both; }
}
/* from all but invisible, never 0: the browser does not count words that start at opacity 0 as the page's largest paint */
@keyframes rht-enter { from { opacity: .01; transform: translateY(16px); } }
.rht .sec { padding-block: clamp(72px, 9vw, 128px); }
.rht .sec-land { background: var(--land); }
/* ---------- the page's bands (Andrew, 2026-10-23: "no homepage may be one long same background for the entire page with no
   break between the sections"). A home page alternates its sections: the paper, then the land, then the paper. Every band but
   the harbor at night counts, so a neighbour is always one step away whatever is switched off or inserted (the home-value and
   the around-town parts included); the picture opening above them is not counted (it paints the map over the paper). The land
   is the site's own, a clear step under its paper (theme.ts `landOf`, the shared check's MIN_STEP), and the land's own words
   are the washed land's, above. A page's opening bands (a person's `.member-open`, a page's `.page-head`) are never one of
   them: they keep the ground the tone gives them (the night's water, below) and the words that go with it. */
.rht main > .atlas-hero ~ .sec:not(.harbor):not(.member-open):not(.page-head):nth-child(odd of .sec:not(.harbor)) {
  background: var(--paper);
  /* the paper's own words, even on a section the drawing gave the land (the owner's own section keeps its place, not its wash) */
  --ink: var(--ink-p, var(--ink-0)); --ink-lg: var(--ink-p-lg, var(--ink-0));
  --jac: var(--acc-p, var(--jac-0)); --tl: var(--tl-p, var(--jac-0)); --jac-lg: var(--acc-p-lg, var(--jac-0)); --water-ink: var(--sec-p, var(--water-ink-0));
  --water-ink-lg: var(--sec-p-lg, var(--water-ink-0));
  color: var(--ink);
}
.rht main > .atlas-hero ~ .sec:not(.harbor):not(.member-open):not(.page-head):nth-child(even of .sec:not(.harbor)) { background: var(--land); }
/* a strip drawn inside a washed band stands on the card, never the land on the land */
.rht :is(.sec-land, main > .atlas-hero ~ .sec:nth-child(even of .sec:not(.harbor))) .band { background: var(--card); }
.rht .sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 4.4vw, 60px); }
.rht .sec-head .lede { justify-self: start; }
@media (max-width: 900px) {
  .rht .sec-head { grid-template-columns: 1fr; }
}
.rht .gaz { border-top: 1.5px solid var(--ink-lg); }
.rht .gaz li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px 64px; padding: 28px 0 30px; border-bottom: 1px solid var(--line); }
.rht .gaz .said { font: 500 clamp(24px, 2.2vw, 31px)/1.15 var(--serif); letter-spacing: -.008em; }
.rht .gaz .loan { font: 700 18px/1.3 var(--sans); }
.rht .gaz .desc { margin-top: 6px; color: var(--ink-2); font-size: 18px; max-width: 34em; }
.rht .gaz .row-foot { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.rht .gaz .where { font: 500 15px var(--sans); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rht .chip-hood { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 4px; border-radius: 999px; font: 600 14.5px var(--sans); color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.rht .chip-hood svg { width: 14px; height: 14px; color: var(--water-ink-lg); margin-top: -2px; }
.rht .chip-hood:hover { box-shadow: inset 0 0 0 1.5px var(--jac); color: var(--jac); }
@media (max-width: 900px) {
  .rht .gaz li { grid-template-columns: 1fr; padding: 24px 0 26px; }
}
.rht .worth { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rht .worth .h2 { max-width: 12em; }
.rht .worth .lede { margin-top: 18px; }
.rht .lookup { margin-top: 30px; width: 100%; max-width: 520px; display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 20px; border-radius: 14px; background: var(--card); box-shadow: var(--lift), inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 12%, transparent); text-align: left; text-decoration: none; transition: box-shadow .18s var(--ease); }
.rht .lookup:hover { box-shadow: var(--lift), inset 0 0 0 2px var(--jac); }
.rht .lookup > svg { width: 26px; height: 26px; color: var(--water-ink-lg); flex: none; }
.rht .lookup span { flex: 1; }
.rht .lookup b { display: block; font: 700 18px/1.25 var(--sans); }
.rht .lookup small { display: block; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.rht .lookup .go { flex: none; background: var(--go, var(--jac)); color: var(--go-ink, #fff); box-shadow: inset 0 0 0 1px var(--go-edge, transparent); font: 700 15px/1 var(--sans); padding: 13px 16px 11px; border-radius: 9px; }
.rht .plat { width: 100%; height: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
/* the plat is a white drawing standing on the page: on a night page it keeps the drawing's own daylight park and contours (a
   daylight object, like the notes; the root's values captured as `--park-base`/`--contour-base` in THE PAGE'S TONE below) */
.rht[data-mode="dark"] .plat { --park: var(--park-base); --contour: var(--contour-base); }
.rht .plat .ground { fill: #fff; }
.rht .plat .canyon { fill: var(--park); }
.rht .plat .c-line { fill: none; stroke: var(--contour); stroke-width: 1.2; }
.rht .plat .st-center { fill: none; }
.rht .plat .lot { fill: #fff; stroke: #CFC8B6; stroke-width: 1.2; }
.rht .plat .yours { fill: var(--sec-tint, var(--jac-tint)); stroke: var(--sec-wh-lg, var(--water-ink-lg)); stroke-width: 2.5; }
.rht .plat .house { fill: var(--sec-t-lg, var(--water-ink-lg)); }
.rht .plat .tree { fill: #D5DFC2; stroke: #B3C09A; }
.rht .plat .lotno { font: 600 11.5px var(--sans); fill: #7C7462; }
.rht .plat .st-name { font: 600 13px var(--sans); fill: var(--map-street, #696151); letter-spacing: .12em; }
.rht .plat .os { font: 600 13px var(--sans); fill: #5F684D; }
.rht .plat .callout { fill: none; stroke: var(--sec-wh-lg, var(--water-ink-lg)); stroke-width: 1.75; stroke-dasharray: 2 5; stroke-linecap: round; }
.rht .plat .callout-dot { fill: var(--sec-wh-lg, var(--water-ink-lg)); }
.rht .plat .you { font: 700 16px var(--sans); fill: var(--sec-k, var(--water-ink)); paint-order: stroke; stroke: var(--park); stroke-width: 6px; stroke-linejoin: round; }
@media (max-width: 900px) {
  .rht .worth { grid-template-columns: 1fr; }
  .rht .plat-wrap { order: -1; max-width: 520px; }
}
.rht .calcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 64px; column-gap: 64px; border-top: 1.5px solid var(--ink-lg); }
/* one calculator on the home runs the row under the rule (no empty column beside it) */
.rht .calcs:has(> .calc:only-child) { grid-template-columns: minmax(0, 1fr); }
.rht .calc { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); text-align: left; text-decoration: none; width: 100%; }
.rht .calc .ic { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--sec-tint, var(--jac-tint)); color: var(--sec-t-lg, var(--water-ink-lg)); display: grid; place-items: center; }
.rht .calc .ic svg { width: 22px; height: 22px; }
.rht .calc .q { font: 500 22px/1.2 var(--serif); }
.rht .calc .d { grid-column: 2; font: 500 15px/1.45 var(--sans); color: var(--ink-2); }
.rht .calc .open { grid-row: 1 / span 2; grid-column: 3; font: 700 15px var(--sans); color: var(--jac); padding: 10px 0 10px 12px; }
.rht .calc:hover .q { color: var(--jac); }
.rht .calc:hover .open { text-decoration: underline; text-underline-offset: 4px; }
.rht .calcs-foot { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
@media (max-width: 900px) {
  .rht .calcs { grid-template-columns: 1fr; }
  .rht .calc .open { display: none; }
  .rht .calc { grid-template-columns: 44px 1fr; }
}
.rht .town { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px); }
.rht .dispatch { display: flex; flex-direction: column; }
.rht .locator { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--water); box-shadow: inset 0 0 0 1px var(--water-line); }
.rht .locator svg { width: 100%; height: 100%; }
.rht .m-water { fill: var(--mw, #CFE3EA); }
.rht .m-coast { fill: none; stroke: var(--mc, #8DB7C6); stroke-width: 3; }
.rht .m-land { fill: var(--ml, #F6F5EE); }
.rht .m-road { fill: none; stroke: var(--mr, #E4A94F); stroke-width: 5; stroke-linecap: round; }
/* a locator's spots sit on its land (the chart's own, the page's land within a shade): a detail, the secondary's 3:1 shade on
   the land (darker than the water around it, a pale tint of the same hue) */
.rht .locator .spot { fill: var(--sec-l-lg, var(--water-ink)); stroke: #fff; stroke-width: 5; }
.rht .locator .spot-ring { fill: none; stroke: var(--sec-l-lg, var(--water-ink)); stroke-width: 3; opacity: .45; }
.rht .locator .lbl { font: 700 30px var(--sans); color: var(--ink-l, var(--ink)); fill: currentColor; paint-order: stroke; stroke: var(--land); stroke-width: 9px; stroke-linejoin: round; }
.rht .dispatch .h3 { margin-top: 22px; }
.rht .dispatch p { margin-top: 10px; color: var(--ink-2); font-size: 18px; }
.rht .dispatch .btn, .rht .dispatch .textlink { align-self: flex-start; }
.rht .dispatch .btn { margin-top: 18px; }
.rht .dispatch .textlink { margin-top: 11px; }
@media (max-width: 900px) {
  .rht .town { grid-template-columns: 1fr; }
  .rht .locator { aspect-ratio: 16 / 9; }
}
.rht .reviews { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rht .score { position: sticky; top: 110px; }
.rht .score .num { font: 500 clamp(88px, 9vw, 128px)/.9 var(--serif); letter-spacing: -.03em; font-variation-settings: 'opsz' 72; }
.rht .stars { display: flex; gap: 4px; margin-top: 14px; color: var(--review-star); }
.rht .stars svg { width: 22px; height: 22px; }
.rht .score p { margin-top: 12px; font: 600 17px/1.45 var(--sans); }
/* Google's G — the Quote Builder's own mark (/brand/google-g.svg) on a white disc, first in the score's line */
.rht .gmark { display: inline-block; width: 1.45em; height: 1.45em; border-radius: 50%; background: #fff; vertical-align: middle; margin: 0 .45em 0 0; }
.rht .score .small { margin-top: 6px; font-weight: 500; }
.rht .score .btn { margin-top: 26px; }
/* the owner's own reviews show no score: the button then starts the column, level with the first quote, under the heading */
.rht .score > .btn:first-child { margin-top: 0; }
.rht .quotes li { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.rht .quotes li:last-child { border-bottom: 0; margin-bottom: 0; }
.rht .quotes blockquote { font: 400 clamp(19px, 1.5vw, 22px)/1.55 var(--serif); }
.rht .quotes li:first-child blockquote { font-size: clamp(23px, 2vw, 29px); line-height: 1.4; letter-spacing: -.006em; }
.rht .quotes figcaption { margin-top: 14px; font: 600 15px var(--sans); color: var(--ink); }
.rht .quotes figcaption span { font-weight: 500; color: var(--ink-2); }
/* the quotes' column: the quotes, then "Show more" or "See all N reviews" under them, in the grid's second track */
.rht .quotes-col { min-width: 0; }
/* the Reviews page: the featured review is the larger first quote, set over a hairline; every quote under it at the column's
   own size (the first is no longer larger), each with its "Read more" in the template's text link */
.rht .q-lead { padding-bottom: 38px; margin-bottom: 38px; border-bottom: 1px solid var(--line); }
.rht .q-lead blockquote { font: 400 clamp(25px, 2.3vw, 33px)/1.38 var(--serif); letter-spacing: -.008em; color: var(--ink-lg); text-wrap: pretty; }
.rht .q-lead figcaption { margin-top: 16px; font: 600 16px var(--sans); color: var(--ink); }
.rht .q-lead figcaption span { font-weight: 500; color: var(--ink-2); }
.rht .is-page .quotes li:first-child blockquote { font: 400 clamp(19px, 1.5vw, 22px)/1.55 var(--serif); letter-spacing: 0; color: inherit; }
.rht .q-read { display: inline-block; margin-top: 12px; font: 600 15px var(--sans); }
.rht .quotes-all { margin-top: 30px; font: 600 16px var(--sans); }
@media (max-width: 900px) {
  .rht .reviews { grid-template-columns: 1fr; }
  .rht .score { position: static; }
}
.rht .meet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rht .portrait { position: relative; }
.rht .portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 30%; object-position: 50% 30%; border-radius: 14px; background: #1b2530; }
.rht .portrait figcaption { margin-top: 12px; font: 600 15px var(--sans); color: var(--ink-2); }
.rht .meet .bio { margin-top: 22px; max-width: 34em; }
/* each fact as wide as its words; one that cannot fit beside the others (the office's two lines) moves below, whole */
.rht .facts { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px 44px; }
.rht .facts dt { font: 600 14px var(--sans); color: var(--ink-2); }
.rht .facts dd { margin-top: 3px; font: 700 17px/1.35 var(--sans); }
.rht .facts dd a { text-decoration: none; padding-block: 7px; }
.rht .facts dd a:hover { color: var(--jac); text-decoration: underline; }
.rht .meet .hero-ctas { margin-top: 32px; align-items: center; }
@media (max-width: 900px) {
  .rht .meet { grid-template-columns: 1fr; }
  .rht .portrait { max-width: 420px; }
}
@media (max-width: 900px) {
  /* on a phone the person's own button follows their name, before the bio and the facts (above the fold) */
  .rht .meet.is-member > div { display: grid; }
  .rht .meet.is-member > div > .hero-ctas { order: 1; margin-top: 20px; }
  .rht .meet.is-member > div > :is(.bio, .facts, .socials) { order: 2; }
}
@media (max-width: 480px) {
  .rht .facts { flex-direction: column; }
}
.rht .faq { border-top: 1.5px solid var(--ink-lg); max-width: 880px; }
.rht .faq details { border-bottom: 1px solid var(--line); }
.rht .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font: 500 clamp(21px, 1.8vw, 25px)/1.3 var(--serif); }
.rht .faq summary::-webkit-details-marker { display: none; }
.rht .faq summary .pm { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); display: grid; place-items: center; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.rht .faq summary .pm svg { width: 14px; height: 14px; }
.rht .faq details[open] summary .pm { transform: rotate(45deg); background: var(--sec-tint, var(--jac-tint)); box-shadow: inset 0 0 0 1.5px var(--water-ink-lg); color: var(--sec-t-lg, var(--water-ink-lg)); }
.rht .faq summary:hover { color: var(--jac); }
.rht .faq details p { padding: 0 60px 26px 0; color: var(--ink-2); max-width: 40em; }
.rht .faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) {
  .rht .faq-layout { grid-template-columns: 1fr; }
  .rht .faq details p { padding-right: 0; }
}
.rht .harbor { --ink-lg: var(--on-hb, #F3F1EA); background: var(--hb, var(--harbor)); color: var(--on-hb, #F3F1EA); position: relative; overflow: hidden; }
.rht .harbor .topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; pointer-events: none; }
.rht .harbor .topo path { fill: none; stroke: #9CC3D2; stroke-width: 1.2; }
.rht .harbor .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.rht .harbor .lede { color: var(--on-hb-2, #C9D6DF); margin-top: 20px; }
.rht .harbor .btn-line { color: var(--on-hb-1, #fff); background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-hb-1, #fff) 45%, transparent); }
.rht .harbor .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--on-hb-1, #fff); background: var(--hb-deep, color-mix(in srgb, var(--on-hb-1, #fff) 6%, transparent)); }
/* the main button on the band: the owner's button colour EXACTLY (theme.ts --go-hb, brand-engine buttonFillOn, Andrew
   2026-10-24), never white; a 1px edge in its own hue only where its fill nearly vanishes into the band (--go-hb-edge) */
.rht .harbor .btn-go { background: var(--go-hb, var(--go, var(--jac))); color: var(--go-hb-ink, var(--go-ink, #fff)); box-shadow: inset 0 0 0 1px var(--go-hb-edge, transparent); }
.rht .harbor .btn-go:hover { background: var(--go-hb-deep, var(--go-deep, var(--jac-deep))); }
.rht .visit { font: 500 16px/1.55 var(--sans); color: var(--on-hb-2, #C9D6DF); }
.rht .visit b { display: block; color: var(--on-hb-1, #fff); font-size: 17px; font-weight: 700; }
.rht .visit p + p { margin-top: 16px; }
.rht .visit a { color: var(--on-hb-1, #fff); font-weight: 700; text-decoration: none; }
.rht .visit a:hover { text-decoration: underline; }
.rht .harbor .mini { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; margin-bottom: 22px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-hb-1, #fff) 18%, transparent); }
.rht .harbor .mini { --mw: var(--hb-mw, color-mix(in srgb, var(--harbor) 80%, #5E9DC0)); --ml: var(--hb-ml, color-mix(in srgb, var(--harbor) 88%, #5E9DC0)); --mr: color-mix(in srgb, var(--hb, var(--harbor)) 66%, #8FB0CC); --mc: color-mix(in srgb, var(--hb, var(--harbor)) 72%, #8FB0CC); background: var(--mw); }
.rht .harbor .mini .spot { fill: var(--sec-hb-mark, var(--jac-lit)); stroke: var(--hb, var(--harbor)); stroke-width: 6; }
.rht .harbor .mini .lbl { font: 700 30px var(--sans); fill: var(--on-hb-1, #fff); paint-order: stroke; stroke: var(--ml); stroke-width: 9px; stroke-linejoin: round; }
@media (max-width: 900px) {
  .rht .harbor .wrap { grid-template-columns: 1fr; }
}
.rht .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--ink-lg); counter-reset: step; }
.rht .steps li { padding: 30px 32px 8px 0; position: relative; }
.rht .steps li + li { padding-left: 32px; border-left: 1px solid var(--line); }
.rht .steps .n { font: 500 56px/1 var(--serif); color: var(--water-ink-lg); font-variation-settings: 'opsz' 72; }
.rht .steps .h3 { margin-top: 18px; }
.rht .steps p { margin-top: 10px; color: var(--ink-2); font-size: 18px; }
@media (max-width: 900px) {
  .rht .steps { grid-template-columns: 1fr; }
  .rht .steps li, .rht .steps li + li { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
.rht .office { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.rht .office dl { display: grid; gap: 20px; margin-top: 26px; }
.rht .office dt { font: 600 14px var(--sans); color: var(--ink-2); }
.rht .office dd { margin-top: 3px; font: 700 18px/1.4 var(--sans); }
.rht .office dd a { text-decoration: none; padding-block: 7px; }
.rht .office dd a:hover { color: var(--jac); text-decoration: underline; }
@media (max-width: 900px) {
  .rht .office { grid-template-columns: 1fr; }
}
.rht .hood-links { display: flex; flex-wrap: wrap; gap: 10px; }
.rht .hood-links .chip-hood { text-decoration: none; padding: 10px 16px 8px; font-size: 16px; }
@media (min-width: 721px) and (max-width: 1060px) {
  .rht .atlas .pl { font-size: 21px; stroke-width: 7px; }
  .rht .atlas .pin .pg { transform: scale(1.3); }
  .rht .atlas .al-sm { display: none; }
}

/* ============================================================
   THE PRODUCT'S PARTS (the chrome, the platform's blocks, the kinds the drawing has no section for)
   ============================================================ */
.rht { position: relative; min-height: 100%; }
.rht .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--hb, var(--ink)); color: var(--on-hb-1, #fff); padding: 10px 16px; border-radius: 8px; font: 700 15px var(--sans); }
.rht .skip:focus { top: 12px; }
.rht .rich p + p { margin-top: .6em; }
.rht .rich a { color: var(--jac); }

/* ---------- header ---------- */
.rht .top { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.rht .top-in { display: flex; align-items: center; gap: 28px; min-height: 72px; width: min(1360px, 100% - 32px); margin-inline: auto; }
.rht .top-end { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.rht .top-min.is-center .top-in { justify-content: center; }
.rht .top-min.is-center .top-end { margin-left: 0; }
.rht .pinmark, .rht .brandmark { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; color: var(--ink); min-width: 0; }
.rht .pinmark svg { width: 34px; height: 34px; flex: none; }
.rht .mark-words b { display: block; font: 800 18px/1.1 var(--sans); letter-spacing: -.005em; }
.rht .mark-words > span { display: block; font: 500 13.5px/1.2 var(--sans); color: var(--ink-2); }
/* the Powered-by label under this sentence-case line: small capitals, tracked (nav-mega.css, the Powered-by line: the case the line is not) */
.rht .mark-powered > small { font-size: .86em; text-transform: uppercase; letter-spacing: .08em; }
.rht .mark-words, .rht .mark-words * { white-space: nowrap; }
/* a name too long for the bar beside its controls ends in an ellipsis, never runs under the Menu button */
.rht .mark-words { min-width: 0; }
.rht .mark-words > * { overflow: hidden; text-overflow: ellipsis; }
.rht .brandmark .mark { display: none; }
/* the logo at the owner's height (the Logo pane: chrome-kit's siteRootStyle sets --rs-logo-h on the root), 36px without one */
.rht .brandmark .logo, .rht [data-rs-live-logo] .logo { display: block; flex: none; --logo-h: var(--rs-logo-h, 36px); }
.rht .brandmark .logo-v, .rht [data-rs-live-logo] .logo-v { display: none; }
.rht .brandmark .logo-v.on-light, .rht [data-rs-live-logo] .logo-v.on-light { display: block; }
.rht .brandmark .logo-v.has-panel, .rht [data-rs-live-logo] .logo-v.has-panel { background: var(--logo-panel); padding: 4px 8px; border-radius: 6px; }
.rht .brandmark .logo-img, .rht [data-rs-live-logo] .logo-img { height: var(--logo-h, 36px); width: auto; max-width: 260px; -o-object-fit: contain; object-fit: contain; }
.rht .brandmark.logo-only .mark-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rht .brandmark[data-logo-broken] .logo { display: none; }
.rht .brandmark[data-logo-broken] .mark-fallback { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: #fff; font: 800 14px var(--sans); }
/* a logo drawn live in the editor's preview, not saved yet (live-logo.ts): it shows in place of the pin, the initials or the saved logo */
.rht [data-rs-live-logo] > :is(svg, .mark, .mark-fallback, .logo:not(.rs-live-logo)) { display: none; }
.rht [data-rs-live-logo][data-logo-broken] > .rs-live-logo { display: block; }
.rht .nav-links { display: flex; align-items: center; gap: 26px; }
.rht .nav-links > li > a, .rht .nav-links .linkbtn { font: 600 15.5px var(--sans); text-decoration: none; color: var(--ink); padding: 6px 0; white-space: nowrap; }
.rht .nav-links a:where(:not(.btn)):hover, .rht .nav-links .linkbtn:hover { color: var(--jac); }
.rht .nav-drop { position: relative; display: flex; align-items: center; gap: 2px; }
.rht .nav-drop summary { list-style: none; cursor: pointer; font: 600 15.5px var(--sans); padding: 6px 2px; display: inline-flex; align-items: center; gap: 4px; }
.rht .nav-drop summary::-webkit-details-marker { display: none; }
.rht .nav-drop summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.rht .nav-drop.has-page summary { min-width: 18px; min-height: 24px; justify-content: center; }
/* its links' words line up with the group's (the panel's padding and the link's) */
.rht .nav-sub { position: absolute; --drop-gap: 22px; left: -20px; min-width: 220px; border-radius: 12px; box-shadow: var(--lift); padding: 8px; display: grid; transform-origin: 20px 0; transition: opacity .2s ease, transform .26s cubic-bezier(.2,.8,.2,1), translate .26s cubic-bezier(.2,.8,.2,1); }
/* it settles into place and lifts away (the closed <details> keeps its menu drawn for the fade, where the browser can) */
.rht .nav-drop details::details-content { transition: content-visibility .2s allow-discrete; }
.rht .nav-drop details:not([open]) .nav-sub { opacity: 0; transform: scale(.98); translate: 0 -6px; pointer-events: none; }
@starting-style { .rht .nav-drop details[open] .nav-sub { opacity: 0; transform: scale(.98); translate: 0 -6px; } }
.rht .nav-sub .has-rich { display: flex; align-items: flex-start; gap: 12px; }
.rht .nav-sub .nav-ico-box { flex: none; display: grid; place-items: center; width: 20px; height: 1.35em; }
.rht .nav-sub .nav-ico { width: 20px; height: 20px; }
.rht .nav-sub .nav-sub-t { display: grid; gap: 2px; }
.rht .nav-sub .nav-sub-line { font: 400 13px/1.35 var(--sans); }
/* the phone menu's group: the icon 20px with no tile, on the name's first line (1lh: the row's own line height) */
.rht .mm-sub .has-rich { display: flex; align-items: flex-start; gap: 12px; }
.rht .mm-sub .nav-ico-box { flex: none; display: grid; place-items: center; width: 20px; height: 1lh; }
.rht .mm-sub .nav-ico { width: 20px; height: 20px; flex: none; }
.rht .mm-sub .nav-sub-t { display: grid; }
.rht .mm-sub .nav-sub-line { font: 400 13px var(--sans); }
@media (prefers-reduced-motion: reduce) { .rht .nav-sub, .rht .nav-drop details::details-content { transition: none; } .rht .nav-drop details:not([open]) .nav-sub { transform: none; translate: none; } }
.rht .nav-sub a:where(:not(.btn)) { display: block; padding: 10px 12px; border-radius: 8px; font: 600 15px var(--sans); text-decoration: none; }
.rht .top-call { font: 700 15.5px var(--sans); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rht .top-call svg { width: 17px; height: 17px; }
/* the phone menu's button: three lines in the bar's square that turn into an X where they were (phone-menu.tsx) */
.rht .burger { display: none; place-content: center; justify-items: center; gap: 5px; flex: none; width: 44px; height: 44px; border-radius: 10px; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
.rht .burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.rht .burger.is-open i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rht .burger.is-open i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.rht .burger.is-open i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.rht .top.is-snug .top-in { gap: 18px; }
.rht .top.is-snug .nav-links { gap: 18px; }
.rht .top.is-snug .mark-words > .mark-powered, .rht .top.is-snug .top-call, .rht .top.is-snug .top-in > .btn-line { display: none; }
.rht .top.is-crowded .nav-links, .rht .top.is-crowded .top-in > .top-call { display: none; }
.rht .top.is-crowded .burger { display: grid; }
@media (max-width: 1319px) {
  .rht .top-in > .top-call { display: none; }
  .rht .nav-links { gap: 22px; }
}
/* past the phone width the brand never squeezes under the links: a bar too full for both is measured as such, so the
   header is drawn closer, then its links move into the menu (site-runtime.ts navFit; seen at 932px with six links) */
@media (min-width: 901px) { .rht .top-in > :is(.pinmark, .brandmark) { flex: none; } }
/* the phone width: the menu (above it the header measures its own fit: site-runtime.ts navFit) */
@media (max-width: 900px) {
  .rht .nav-links, .rht .top-in > .top-call, .rht .top-in > .btn { display: none; }
  /* the logo's height on a phone: the owner's own (the Logo pane's "On phones"), else the computer's */
  .rht .brandmark .logo, .rht [data-rs-live-logo] .logo { --logo-h: var(--rs-logo-h-phone, var(--rs-logo-h, 36px)); }
  /* a minimal header on a phone: the logo and a round call button; the phone bar carries the main button (Cinematic's rule) */
  .rht .top-min .top-end .btn, .rht .top-min .top-call span { display: none; }
  .rht .top-min .top-call { width: 44px; height: 44px; justify-content: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
  .rht .burger { display: grid; }
  /* the lockup's title and Powered-by lines leave the phone's bar, as in the other eight templates (they showed cut to a third,
     "Powered by Equity Sma…": designer review 2, B3; lockup-look.test.tsx); the footer keeps them whole */
  .rht .top .mark-words > .mark-powered { display: none; }
  /* the officer's name and NMLS are never cut on a phone (REBEL SITES 10-27): too long for the row, they take a second line
     instead of an ellipsis */
  .rht .top .mark-words > * { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
}
/* the narrowest phones: the logo gives up its size and the rule beside it before the name or the NMLS gives up a letter */
@media (max-width: 420px) {
  .rht .top .brandmark { --lockup-gap: 12px; }
  .rht .top .brandmark.has-logo:not([data-logo-broken]) > .logo { border-right: 0; padding-right: 0; }
  .rht .top .brandmark .logo-img { max-width: 112px; max-height: 30px; }
}
/* the phone menu: the whole screen in cream under the paper bar, the links in the serif rising in one after another, the
   jacaranda for the page you are on and for what opens, the header's buttons last at the bottom (phone-menu.tsx: drawn
   with the page, closed and inert; shown on a phone and on a header too full for its links, like the button that opens it) */
.rht .mmenu {
  display: none; position: fixed; inset: 0; z-index: 39; height: calc(100dvh / var(--z)); overflow-y: auto; overscroll-behavior: contain;
  padding: 96px max(16px, calc((100% - 1360px) / 2)) calc(24px + env(safe-area-inset-bottom));
  opacity: 0; translate: 0 12px; visibility: hidden;
  transition: opacity .36s var(--ease), translate .36s var(--ease), visibility 0s .36s;
}
@media (max-width: 900px) { .rht .mmenu { display: block; } }
.rht:has(.top.is-crowded) .mmenu { display: block; }
/* below 1180px the header's links are in the menu, as the concept's header (its .nav and call hidden, the menu button shown at
   1179px): a two-column screen's open Loans dropdown would stand over most of a hero without a map (68% at 1100) */
@media (max-width: 1179px) {
  .rht .nav-links, .rht .top-in > .top-call { display: none; }
  .rht .burger { display: grid; }
  .rht .mmenu { display: block; }
}
.rht .mmenu.is-open { opacity: 1; translate: none; visibility: visible; transition: opacity .36s var(--ease), translate .36s var(--ease), visibility 0s; }
.rht .mmenu-in { display: flex; flex-direction: column; gap: 32px; min-height: 100%; }
.rht .mmenu-links { display: grid; border-top: 2px solid var(--water-ink-lg); }
.rht .mmenu-links > li { border-bottom: 1px solid var(--menu-line); opacity: 0; translate: 0 14px; transition: opacity .32s var(--ease), translate .4s var(--ease); }
.rht .mmenu.is-open .mmenu-links > li { opacity: 1; translate: none; transition-delay: .08s; }
.rht .mmenu.is-open .mmenu-links > li:nth-child(2) { transition-delay: .12s; }
.rht .mmenu.is-open .mmenu-links > li:nth-child(3) { transition-delay: .16s; }
.rht .mmenu.is-open .mmenu-links > li:nth-child(4) { transition-delay: .2s; }
.rht .mmenu.is-open .mmenu-links > li:nth-child(5) { transition-delay: .24s; }
.rht .mmenu.is-open .mmenu-links > li:nth-child(6) { transition-delay: .28s; }
.rht .mmenu.is-open .mmenu-links > li:nth-child(n+7) { transition-delay: .32s; }
.rht .mmenu-links > li > a, .rht .mmenu-links > li > .linkbtn { display: block; width: 100%; padding: 16px 2px 14px; font: 500 clamp(26px, 7.4vw, 32px)/1.15 var(--serif); letter-spacing: -.01em; text-align: left; text-decoration: none; }
.rht .mm-drop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.rht .mm-drop:not(.has-page) > .mm-group { grid-column: 1 / -1; }
.rht .mm-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 16px 2px 14px; font: 500 clamp(26px, 7.4vw, 32px)/1.15 var(--serif); letter-spacing: -.01em; }
.rht .mm-drop.has-page .mm-group summary { justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 10px; background: var(--menu-hover); }
.rht .mm-group summary::-webkit-details-marker { display: none; }
.rht .mm-group summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--water-ink-lg); border-bottom: 2.5px solid var(--water-ink-lg); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.rht .mm-group[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.rht .mm-sub { grid-column: 1 / -1; display: none; gap: 2px; padding: 0 0 14px 14px; border-left: 2px solid var(--menu-hover); margin-left: 2px; }
.rht .mm-group[open] + .mm-sub { display: grid; }
.rht .mm-sub a:where(:not(.btn)) { display: block; padding: 10px 0; font: 600 17px var(--sans); text-decoration: none; }
/* a bare link (no icon, no line under it) a 44px tap target, its words on the middle of it (review 1: a group of bare links at 390, 42px rows) */
.rht .mm-sub a:where(:not(.btn)):not(.has-rich), .rht .mm-sub .linkbtn { display: flex; align-items: center; min-height: 44px; }
.rht .mmenu-cta { display: grid; gap: 10px; margin-top: auto; opacity: 0; translate: 0 14px; transition: opacity .3s var(--ease), translate .36s var(--ease); }
.rht .mmenu.is-open .mmenu-cta { opacity: 1; translate: none; transition-delay: .4s; }
.rht .mmenu-cta > .btn { justify-content: center; }
.rht .mmenu-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rht .mmenu-contact .btn { justify-content: center; padding-inline: 12px; }
/* while it is open the bar keeps only the brand and the X, and the phone bar steps aside */
.rht:has(.mmenu.is-open) .top-in > :is(.btn, .top-call) { visibility: hidden; }
.rht:has(.mmenu.is-open) .mbar { transform: translateY(140%); visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .rht .mmenu, .rht .mmenu-links > li, .rht .mmenu-cta, .rht .burger i { transition: none; }
}

/* ---------- the hero without a map yet: the words and the office's note side by side on the water, at every width ---------- */
.rht .atlas-hero.no-map { background: var(--water); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding: clamp(40px, 6vw, 88px) max(16px, calc((100% - 1240px) / 2)) clamp(44px, 6.5vw, 96px); }
.rht .atlas-hero.no-map .hero-copy { position: static; display: block; width: auto; margin: 0; background: none; padding: 0; }
.rht .atlas-hero.no-map .note { position: static; width: auto; max-width: 560px; margin: 0; }
.rht .atlas-hero.no-map .leader { display: none; }
@media (min-width: 960px) {
  .rht .atlas-hero.no-map { grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); -moz-column-gap: 56px; column-gap: 56px; align-items: center; }
  /* one fixed box for every note, right-aligned: the office’s and a city’s are the same size (a note shrunk to its own words drew
     a city’s — a name and one button — narrower than the office’s, and the swap between them moved the box) */
  .rht .atlas-hero.no-map .note { justify-self: end; width: min(100%, 420px); }
}
/* where the header has a dropdown (a link with links under it: nav-draw.tsx draws `.nav-drop` only then) and it opens (1180px and
   up) the band is as tall as it takes to hold the open panel under half of it (the stress menu's 829 x 519 with the booking strip:
   70% of the content-height band at 1180, 57% at 1440), and no taller: 1360px less half the window, so 770 at 1180 and 640 at 1440,
   under its content's own height from about 1660; never past the first screen. A header with no dropdown keeps its content's
   height (regression review 4: every real Hometown site has none). The words and the note sit centred in it (align-items above).
   The vw divides by --z, as the hero's other viewport math does. */
@media (min-width: 1180px) {
  .rht:has(.nav-drop) .atlas-hero.no-map { min-height: min(calc(1360px - 50vw / var(--z)), calc(100svh / var(--z) - var(--site-head, calc(73px * var(--z))) / var(--z))); }
}
.rht .note-body[hidden] { display: none; }
.rht .atlas .attrib { font: 600 11px var(--sans); color: var(--water-ink); fill: currentColor; paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round; }
.rht .plat .street { fill: var(--land); stroke: #D9D3C3; stroke-width: 1.2; }
.rht .harbor .h1 { max-width: 12em; }

/* ---------- blocks and pages ---------- */
.rht .sec-tight { padding-block: clamp(40px, 5vw, 64px); }
.rht .narrow { max-width: 880px; }
.rht .page-head { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px); background: var(--water); }
.rht .page-head .wrap { display: grid; gap: clamp(32px, 6vw, 96px); align-items: center; }
.rht .page-head .has-image { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rht .page-head .h1 { max-width: 14em; }
/* the page's heading holds its last two words on its line (keep-words.ts joins them; words.tsx pairFit, --last-pair: their
   characters): set no larger than its column holds them, and never narrower than they are ("questions, answered." ran 366px wide in a 328px column at 360 and the page scrolled sideways) */
.rht .page-head .wrap > div:has(> .h1[style*="--last-pair"]) { container-type: inline-size; }
.rht .page-head .h1[style*="--last-pair"] { font-size: min(clamp(40px, 4.4vw, 66px), calc(100cqi / (var(--last-pair) * .49))); min-width: min(100%, calc(var(--last-pair) * .49em)); }
.rht .page-head .lede { margin-top: 20px; color: color-mix(in srgb, var(--ink) 70%, var(--ink-2)); }
.rht .page-head .textlink { display: inline-block; margin-bottom: 11px; }
/* a page's opening built to convert: the offer's small capitals above the h1, the hero's buttons, the line under them */
.rht .page-head .eyebrow { margin-bottom: 22px; font: 700 13px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--water-ink); }
.rht .page-head .head-fine, .rht .hero-copy .head-fine { margin-top: 14px; }
.rht .page-head.is-about { background: var(--paper); padding-bottom: 0; }
.rht .page-head.is-about .h1 { max-width: 12em; }
/* a person's page opens on the paper by day (it is a page's head, never one of the band's own washes); on the night it is a
   band of the night's water, below */
.rht .member-open { background: var(--paper); }
.rht .sec-about { padding-top: clamp(28px, 3vw, 44px); }
.rht .meet.is-about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.rht .meet.is-about .portrait { order: 2; }
@media (max-width: 900px) {
  .rht .meet.is-about { grid-template-columns: 1fr; }
  .rht .meet.is-about .portrait { order: -1; }
}
.rht .photo img { width: 100%; aspect-ratio: 4 / 3; -o-object-fit: cover; object-fit: cover; border-radius: 14px; }
/* the About page's blocks (Andrew, 2026-10-17): the person's opening (their title, company and license under the name, their
   portrait in the photo's place), the highlights about them as entries on the gazetteer's hairlines, the story with its heading
   beside the words, and licensing and contact as the office's ruled facts in three columns */
.rht .page-head.is-person { padding-bottom: clamp(40px, 5vw, 72px); }
.rht .intro-role { margin-top: 14px; font: 600 15px/1.5 var(--sans); color: var(--ink-2); }
.rht .page-head .photo.is-portrait img { height: auto; aspect-ratio: 4 / 5; -o-object-position: center 22%; object-position: center 22%; }
.rht .sec-top { display: grid; gap: 14px; max-width: 46em; margin-bottom: clamp(32px, 4vw, 52px); }
.rht .sec-top .eyebrow, .rht .story-side .eyebrow { font: 700 13px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--water-ink); }
.rht .lic-lede { font-size: clamp(19px, 1.45vw, 21px); color: var(--ink-2); max-width: 36em; }
.rht .ht-notes { --fit-gap: 0px; --rs-hair: var(--line); } /* a count-fitted, ruled grid (fit.css) */
.rht .ht-notes[data-count="1"] { max-width: 46em; }
.rht .ht-note { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 26px 0 28px; }
.rht .ht-note h3 { font: 500 clamp(24px, 2vw, 28px)/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink-lg); }
.rht .ht-note p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.rht .story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 64px; align-items: start; }
.rht .story-side { display: grid; gap: 14px; align-content: start; }
.rht .story > .story-body { margin-top: 0; }
.rht .story > .story-body:only-child { grid-column: 2; }
.rht .story-body > p:first-of-type { font: 500 clamp(24px, 2.2vw, 30px)/1.35 var(--serif); letter-spacing: -.01em; color: var(--ink-lg); }
.rht .lic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--line); }
.rht .lic.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rht .lic.n1 { grid-template-columns: minmax(0, 1fr); max-width: 32em; }
.rht .lic-card { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 24px 0 8px; }
.rht .lic-label { font: 600 14px var(--sans); color: var(--ink-2); }
.rht .lic-card p { font: 700 18px/1.45 var(--sans); }
.rht .lic-card a { text-decoration: none; padding-block: 7px; }
.rht .lic-card a:hover { text-decoration: underline; }
.rht .lic-sub { font-weight: 600; color: var(--ink-2); }
.rht .states { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rht .states li { padding: 6px 11px 4px; border-radius: 999px; font: 600 14.5px var(--sans); letter-spacing: .04em; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.rht .lic-go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 1000px) { .rht .ht-notes.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .rht :is(.ht-notes, .ht-notes.n2, .ht-notes.n4, .lic, .lic.n2), .rht .story { grid-template-columns: minmax(0, 1fr); }
  .rht .ht-note + .ht-note, .rht .lic-card + .lic-card { border-top: 1px solid var(--line); }
  .rht .story > .story-body:only-child { grid-column: auto; }
}

/* long words take their surface's words: the app's own `.prose` rules (globals.css) set it, its headings, bold and quotes in a fixed gray */
.rht .prose { margin-top: 20px; color: inherit; }
.rht .prose :is(h1, h2, h3, h4, strong, blockquote) { color: inherit; }
/* ...and where the long words are the ink, their large headings, bold and quotes take its 3:1 shade (the quiet prose keeps its own) */
.rht .prose:not(.plate-copy .prose, .ht-fi .prose) :is(h2, h3, strong) { color: var(--ink-lg); }
.rht .prose p + p, .rht .prose ul, .rht .prose ol { margin-top: 1em; }
.rht .prose ul { list-style: disc; padding-left: 1.2em; }
.rht .prose ol { list-style: decimal; padding-left: 1.2em; }
.rht .prose a { color: var(--jac); }
.rht .prose h2, .rht .prose h3 { font: 500 26px/1.2 var(--serif); margin-top: 1.4em; }
/* the side is a track's share, never an auto column that grows to its figure's width and starves the words */
.rht .offer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
/* the figure is set to its own column (cqi), not the viewport, so it always fits; a number never wraps */
.rht .offer .amount { font: 500 clamp(28px, 15cqi, 112px)/.9 var(--serif); color: var(--water-ink-lg); font-variation-settings: 'opsz' 72; white-space: nowrap; }
/* a phrase the owner wrote for the amount keeps the serif but not the figure's size */
.rht .offer .amount[data-len="words"] { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; white-space: normal; }
/* the words keep their column from eating the title's: the kind caps a phrase at 40 chars, wider than the wrap in
   this serif — the side bends at its share, the phrase wrapping within it */
.rht .offer:has(.amount[data-len="words"]):not(.has-photo) { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
.rht .offer .lede { margin-top: 14px; }
/* the photo's column keeps its cap while the amount fits beside it */
.rht .offer.has-photo { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
/* an offer with neither its big line nor a picture is its words alone (sections/kinds/offer.ts) */
.rht .offer.solo { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.rht .offer .offer-side { display: grid; gap: clamp(22px, 3vw, 34px); justify-items: start; min-width: 0; container-type: inline-size; }
.rht .offer .offer-eyebrow { font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--water-ink); margin-bottom: 12px; }
.rht .offer .offer-cap { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rht .offer .offer-cap b { font-weight: 700; color: var(--ink); }
.rht .offer .offer-cap i { font-style: italic; }
/* the picture holds the photo card's 4/3: the renderer's width/height attributes would otherwise pin the img at its
   attribute height (a presentational hint beats an auto aspect-ratio height) and stretch it into a full-column crop */
.rht .offer .photo img { height: auto; max-width: 300px; }
.rht .stats-title { margin-bottom: 28px; }
.rht .stats[data-count="4"] { --cols: 2; } /* four figures at this size do not stand four across whole (measured 2026-10-28) */
.rht .stats { --fit-gap: 32px; --figure-em: .58; --figure-pad: 0px; /* a count-fitted grid of figure cells (fit.css) */ border-top: 1.5px solid var(--ink-lg); padding-top: 26px; }
.rht .stats dd { --figure-size: clamp(44px, 5vw, 64px); font-weight: 500; line-height: 1; font-family: var(--serif); color: var(--ink-lg); }
.rht .stats dt { margin-top: 10px; font: 600 15px var(--sans); color: var(--ink-2); }
.rht .callout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rht .callout.solo { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.rht .callout .lede { margin-top: 16px; }
.rht .player { position: relative; margin-top: 24px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--hb, var(--ink)); }
.rht .player.reveal { opacity: 1; }
.rht .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rht .caption { margin-top: 12px; }
.rht .logos-title { margin-bottom: 18px; }
.rht .logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.rht .logos img { height: 44px; width: auto; max-width: 180px; -o-object-fit: contain; object-fit: contain; }
.rht .band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: 16px; background: var(--land); box-shadow: inset 0 0 0 1px var(--line); }
.rht .band .lede { margin-top: 10px; }
.rht .starts { border-top: 1.5px solid var(--ink-lg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 64px; column-gap: 64px; }
.rht .start { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; text-align: left; width: 100%; }
.rht .start .q { font: 500 22px/1.2 var(--serif); }
.rht .start .d { font: 500 15px/1.45 var(--sans); color: var(--ink-2); }
.rht .start:hover .q { color: var(--jac); }
.rht .calc-page .sec { padding-top: clamp(40px, 5vw, 64px); }
/* the calculators page's sub menu: its calculators as text tabs on a hairline rule, in the header's paper and blur, hung from
   the header's measured bottom (--site-head, site-jumps.ts); the one in view in the jacaranda, underlined on the rule, as the
   site marks a current thing. On a narrow screen one line that scrolls sideways edge to edge: it snaps, fades where more is
   hidden (data-more), and draws no bar on a touch screen (a mouse keeps a thin one) */
.rht .calc-tabs { position: sticky; top: calc(var(--site-head, calc(73px * var(--z))) / var(--z)); z-index: 30; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
.rht .calc-tabs ul { --fade-start: 0px; --fade-end: 0px; display: flex; flex-wrap: nowrap; gap: 30px; padding-inline: max(16px, (100% - 1240px) / 2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: max(16px, (100% - 1240px) / 2); scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%); }
.rht .calc-tabs ul[data-more~="start"] { --fade-start: 40px; }
.rht .calc-tabs ul[data-more~="end"] { --fade-end: 40px; }
@media (hover: none) and (pointer: coarse) {
  .rht .calc-tabs ul { scrollbar-width: none; }
}
.rht .calc-tabs li { flex: none; scroll-snap-align: center; }
.rht .calc-tabs a { display: flex; align-items: center; min-height: 44px; padding-block: 6px 4px; font: 600 15.5px var(--sans); white-space: nowrap; text-decoration: none; color: var(--ink); box-shadow: inset 0 -2px 0 transparent; transition: color .18s var(--ease), box-shadow .18s var(--ease); }
.rht .calc-tabs a:hover { color: var(--jac); }
.rht .calc-tabs a[aria-current="true"] { color: var(--water-ink); box-shadow: inset 0 -2px 0 var(--water-ink-lg); }
.rht .calc-list { border-top: 1.5px solid var(--ink-lg); }
.rht .calc-list > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px 28px; padding: 30px 0; border-bottom: 1px solid var(--line); scroll-margin-top: -30px; }
.rht .calc-list .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--sec-tint, var(--jac-tint)); color: var(--sec-t-lg, var(--water-ink-lg)); display: grid; place-items: center; }
.rht .calc-list .ic svg { width: 26px; height: 26px; }
.rht .calc-list .h3 { margin-top: 6px; }
.rht .calc-list ul { margin-top: 12px; display: grid; gap: 6px; font: 500 16px/1.5 var(--sans); color: var(--ink-2); }
.rht .calc-list ul li::before { content: '·'; color: var(--water-ink-lg); font-weight: 800; margin-right: 8px; }
.rht .calc-list .hero-ctas { margin-top: 18px; align-items: center; }
.rht .tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--sec-tint, var(--jac-tint)); color: var(--sec-t, var(--jac-deep)); font: 700 12px/1.4 var(--sans); }
/* the team: one row of exactly as many cards as people (two to four), rows of four with the last row centred (five or more), a person alone
   as a featured card; every card opens the person's page, and says so (Meet {first}) */
.rht .team { --cols: 4; --gap: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 44px var(--gap); }
.rht .team > li { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; max-width: 320px; }
.rht .team[data-count="2"], .rht .team[data-count="3"] { --cols: 3; }
/* the grid's own padding below is nothing: the next block's top is the gap (it was ~190px of nothing) */
.rht .sec-team { padding-bottom: 0; }
.rht .sec-team + .sec { padding-top: clamp(56px, 7vw, 96px); }
.rht .member:hover .h3, .rht .member:focus-visible .h3 { color: var(--jac); }
.rht .member .portrait img, .rht .member .initials { transition: transform .35s var(--ease); }
.rht .member:hover .portrait img { transform: scale(1.025); }
.rht .member .portrait { overflow: hidden; border-radius: 14px; }
.rht .team .h3 { margin-top: 16px; }
.rht .team .small { margin-top: 4px; }
.rht .member-copy { min-width: 0; }
.rht .team-meet.btn { margin-top: 24px; }
.rht .team .h3 a { color: inherit; text-decoration: none; padding-block: 7px; }
.rht .team .h3 a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* a photo that reveals: opened by a key or a tap (a phone), it moves as a hovered one does */
.rht .portrait.has-reveal:is(:focus-within, [data-reveal="open"]) img { transform: scale(1.025); }
/* the reveal (../team-card.css moves it): a paper card rising inside the photo, the page in the site's go color, the contacts in ink */
.rht .team-scrim { background: linear-gradient(to top, color-mix(in srgb, var(--ink) 50%, transparent), transparent 70%); }
.rht .team-reveal { inset: auto 10px 10px; padding: 14px; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ink) 70%, transparent); }
.rht .team-way { border-radius: 10px; font: 600 15px/1.2 var(--sans); color: var(--ink); }
.rht .team-way.is-page { padding: 0 16px; background: var(--go, var(--jac)); color: var(--go-ink, #fff); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.rht .team-way.is-page:hover { background: var(--go-deep, var(--jac-deep)); }
.rht .team-way.is-apply { padding: 0 16px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); }
.rht .team-way.is-apply:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rht .team-contact .team-way { padding: 0 4px; font-weight: 500; color: var(--ink-2); }
.rht .team-contact .team-way svg { color: var(--water-ink-lg); }
.rht .team-contact .team-way:hover { color: var(--ink); }
/* the phone's digits stand in even figures, as the atlas's grid references do; a long email is cut a little later (smaller, never wrapped) */
.rht .team-way.is-phone span { font-variant-numeric: tabular-nums; }
.rht .team-way.is-email span { font-size: .94em; }
.rht .team-hint { background: var(--paper); color: var(--ink); box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 30%, transparent); }
@container (max-width: 220px) { .rht .team-reveal { inset: auto 6px 6px; } .rht .team-contact .team-way { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent); } }
/* the search above a big team */
.rht .team-search-label { font: 600 15px/1.4 var(--sans); text-align: center; color: var(--ink-2); }
.rht .team-search-input { box-sizing: border-box; min-height: 52px; padding: 0 22px 0 52px; border: 0; border-radius: 10px; background: #fff; color: var(--ink); font: 500 16px var(--sans); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 25%, transparent); }
.rht .team-search-count { font: 500 14px/1.5 var(--sans); text-align: center; color: var(--ink-2); }
.rht .team[data-count="1"] > li { flex-basis: 100%; max-width: 920px; }
.rht .team[data-count="1"] .member { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rht .team[data-count="1"] .h3 { margin-top: 0; font-size: clamp(30px, 3.4vw, 44px); }
.rht .team-blurb { margin-top: 14px; max-width: 30em; }
@media (max-width: 1100px) { .rht .team { --cols: 3; } }
@media (max-width: 900px) { .rht .team[data-count="1"] .member { grid-template-columns: 1fr; gap: 24px; } .rht .team[data-count="1"] > li { max-width: 420px; } }
@media (max-width: 560px) {
  .rht .team, .rht .team[data-count] { --cols: 2; --gap: 14px; row-gap: 28px; }
  .rht .team[data-count="1"] { --cols: 1; }
  .rht .team .h3 { margin-top: 12px; font-size: 19px; }
  .rht .team .small { font-size: 14px; }
}
.rht .initials { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 14px; background: var(--water); color: var(--ink-lg); font: 500 64px var(--serif); }
.rht .facts-list > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 64px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rht .facts-list dt { font: 700 18px/1.3 var(--sans); }
.rht .facts-list dd { color: var(--ink-2); font-size: 18px; }
/* a place's local facts, set like a gazetteer: what the number is, then the figure with its source, period and geography */
.rht .ledger { border-top: 1.5px solid var(--ink-lg); }
.rht .ledger > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 64px; align-items: baseline; padding: 24px 0 26px; border-bottom: 1px solid var(--line); }
.rht .ledger dt { font: 700 18px/1.35 var(--sans); }
.rht .ledger dd { display: grid; gap: 6px; }
.rht .ledger .fig { font: 500 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); letter-spacing: -.012em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-lg); }
.rht .ledger .src { font: 500 14px/1.45 var(--sans); color: var(--water-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--water-ink) 35%, transparent); text-underline-offset: 3px; }
.rht .ledger a.src { padding-block: 7px; margin-block: -7px; }
.rht .ledger .src:hover { text-decoration-color: currentColor; }
.rht .ledger span.src { text-decoration: none; color: var(--ink-2); }
@media (max-width: 760px) { .rht .ledger > div { grid-template-columns: 1fr; gap: 6px; padding: 20px 0 22px; } }
.rht .table-scroll { overflow-x: auto; border-top: 1.5px solid var(--ink-lg); }
.rht .compare { width: 100%; border-collapse: collapse; font: 500 16px/1.45 var(--sans); }
.rht .compare th, .rht .compare td { text-align: left; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rht .compare thead th { font: 700 16px var(--sans); }
.rht .compare tbody th { font-weight: 700; }
.rht .compare td { color: var(--ink-2); }
.rht .az ul { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.rht .az a { display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); font: 700 15px var(--sans); text-decoration: none; }
.rht .az a:hover { color: var(--jac); box-shadow: inset 0 0 0 1.5px var(--jac); }
.rht .az-group { scroll-margin-top: 0; margin-top: 28px; }
.rht .az-letter { font: 500 40px/1 var(--serif); color: var(--water-ink-lg); margin-bottom: 8px; }
@media (max-width: 900px) {
  .rht .page-head .has-image, .rht .offer, .rht .callout, .rht .band, .rht .starts, .rht .facts-list > div, .rht .offer.has-photo, .rht .offer.solo, .rht .offer:has(.amount[data-len="words"]):not(.has-photo) { grid-template-columns: minmax(0, 1fr); }
  /* one column gives the figure the whole width, so it keeps its voice there */
  .rht .offer .amount { font-size: clamp(34px, 20cqi, 112px); }
}

/* ---------- footer: the platform's compliance block ---------- */
.rht .foot { padding: 56px 0 40px; border-top: 1px solid var(--line); }
.rht .foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 32px 56px; }
/* each of the menu's groups a column of its own beside the brand and the tools, all in one row, each as wide as its heading and
   longest name while there is room (never a heading broken onto two lines in a 160px track); the brand keeps a 260px floor (Poster's),
   so a wide menu never pushes its words past its column. Narrower, the brand takes its own row and the columns share the row under it,
   each as wide as its words (a long list's two columns kept whole), wrapping whole when they do not fit */
@media (min-width: 1081px) { .rht .foot-grid.has-groups { grid-template-columns: minmax(260px, 1.4fr); grid-auto-flow: column; grid-auto-columns: auto; -moz-column-gap: 48px; column-gap: 48px; } }
/* four or more link columns (the brand and four: a 4/4/4 split draws one stack per column, plus Explore): the one row squeezes them
   beside the brand (260 | 138|184|187|107 at 1100, "Investors and self-employed" on two lines, links wrapped to 1140), so the brand
   takes its own row and the columns share the row under it, as at 601-1080; the same rule as Cinematic's and Poster's (designer
   review, round 6, B1) */
@media (min-width: 1081px) {
  .rht .foot-grid.has-groups:has(> :nth-child(5)) { display: flex; flex-wrap: wrap; gap: 32px 56px; }
  .rht .foot-grid.has-groups:has(> :nth-child(5)) > * { flex: 1 1 auto; }
  .rht .foot-grid.has-groups:has(> :nth-child(5)) > :first-child { flex-basis: 100%; }
}
.rht .foot-stack .foot-col + .foot-col { margin-top: 24px; }
.rht .foot .pinmark, .rht .foot .brandmark { margin: 0 0 14px; }
.rht .foot address { font: 500 15px/1.6 var(--sans); font-style: normal; color: var(--ink-2); }
.rht .foot address a { color: var(--ink); font-weight: 700; text-decoration: none; padding-block: 7px; }
.rht .foot-grid ul { display: grid; gap: 8px; }
.rht .foot-grid ul a, .rht .foot-grid .linkbtn { font: 600 15px var(--sans); text-decoration: none; }
.rht .foot-grid ul a { padding-block: 7px; }
.rht .foot-grid ul a:hover { color: var(--jac); text-decoration: underline; }
/* a column's heading is a label over its links (small capitals, heavier), never a quieter first link (14px/700 over 15px/600 links read as one list) */
.rht .foot-grid h2, .rht .foot-grid h4 { font: 800 12.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
/* a footer group's heading that links: a 32px tap, as its links have (the padding grows the target, not the line) */
.rht .foot-grid h4 > a { padding-block: 8px; }
/* the legal band, full width under the columns (legal-band.css): the footer's second ink, the holders in its first */
.rht .legal { --legal-mark: 44px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); font: 500 13.5px/1.6 var(--sans); color: var(--ink-2); gap: 18px; }
.rht .legal .legal-ids strong { color: var(--ink); }
/* the official Equal Housing artwork for the footer's ground (legal-band.ts draws both; legal-eho-grounds.test): the paper, in both tones: the black */
.rht .foot .legal-eho-on-light { display: block; }
.rht .foot .legal-eho-on-dark { display: none; }
.rht .legal-ids strong { font-weight: 700; }
.rht .legal a { color: var(--ink); font-weight: 700; }
.rht .legal-links { border-top-color: var(--line); }
.rht .legal-links a { text-decoration: none; }
.rht .legal-links a:hover { color: var(--jac); text-decoration: underline; }
.rht .underline, .rht .legal-access a { text-decoration: underline; }
.rht .powered { margin-top: 24px; }
@media (max-width: 900px) {
  .rht .foot-grid { grid-template-columns: 1fr 1fr; }
  .rht .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 601px) and (max-width: 1080px) {
  .rht .foot-grid.has-groups { display: flex; flex-wrap: wrap; gap: 32px 56px; }
  .rht .foot-grid.has-groups > * { flex: 1 1 auto; }
  .rht .foot-grid.has-groups > :first-child { flex-basis: 100%; }
}
/* a phone: each column one under another (folded to its heading: nav-mega.css, FootFold), never a heading broken onto two lines
   in a 151px column, never two folds side by side */
@media (max-width: 600px) { .rht .foot-grid, .rht .foot-grid.has-groups { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the phone bar ---------- */
.rht .mbar { display: none; }
@media (max-width: 900px) {
  .rht .mbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; display: grid; grid-template-columns: 48px 48px 1fr; gap: 8px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--paper) 96%, transparent); box-shadow: var(--lift), inset 0 0 0 1px var(--line); transform: translateY(140%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s; }
  .rht .mbar.is-on { transform: none; visibility: visible; transition: transform .25s var(--ease); }
  .rht .mbar > a:not(.btn) { display: grid; place-items: center; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 25%, transparent); color: var(--ink); }
  .rht .mbar > a:not(.btn) svg { width: 20px; height: 20px; }
  .rht .mbar .btn { justify-content: center; }
  /* two buttons (the header's main, then its second: chrome-kit `phoneButtons`): they share the bar; a label too long for one line wraps */
  .rht .mbar:has(> .btn ~ .btn) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rht .mbar:has(> .btn ~ .btn) .btn { padding-inline: 6px; white-space: normal; text-wrap: balance; text-align: center; line-height: 1.15; }
  /* the bar's Text and Call give way to the two buttons: both live in the phone menu's pair (REBEL SITES, 2026-10-27) */
  .rht .mbar:has(> .btn ~ .btn) > :not(.btn) { display: none; }
  .rht .foot { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .rht .mbar, .rht .note-body, .rht .atlas .pin .ring { transition: none; }
}
/* a person's social links (social-icons.tsx) */
.rht .socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.rht .socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .2s, color .2s; }
.rht .socials a:hover, .rht .socials a:focus-visible { background: var(--go, var(--jac)); color: var(--go-ink, #fff); box-shadow: none; }
.rht .socials .social-mark { width: 17px; height: 17px; }
/* the footer's icons keep their row: the link columns' list rule (.foot-grid ul) is more specific than .socials */
.rht .found-socials .socials { display: flex; }
/* and their hover keeps the icon's own ink: the link columns' hover (.foot-grid ul a:hover, the jacaranda) outranks .socials' and drew
   the glyph in the very color the icon fills with */
.rht .found-socials .socials a:hover { color: var(--go-ink, #fff); text-decoration: none; }

/* The editor's selection in the preview (templates/cinematic/edit-mode.ts), as Cinematic draws it: hovered dashed,
   selected solid, a section's ring inside its edge, the hover's name tag. Preview only. */
.rht[data-preview] .rs-sel-hover { outline: 2px dashed #e0007e; outline-offset: 2px; }
.rht[data-preview] .rs-sel-on { outline: 2px solid #e0007e; outline-offset: 2px; }
.rht[data-preview] [data-sel-section].rs-sel-hover, .rht[data-preview] [data-sel-section].rs-sel-on { outline-offset: -3px; }
/* The words a focus in the editor's panel is editing (site-runtime.ts focusTarget), marked in the editor's pink, as
   Cinematic draws them; an empty field's section is ringed inside its edge. Preview only. */
.rht[data-preview] .rs-editing:not([data-sel]) {
  background: color-mix(in srgb, #e0007e 16%, transparent); box-shadow: 0 0 0 2px #e0007e; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .2s, box-shadow .2s;
}
/* a thing being edited (a button, a picture, when its field has no words of their own) is only ringed outside its edge: its own fill, shape and shadow stay (Andrew, 2026-10-14: the video button went see-through while its words were edited) */
.rht[data-preview] [data-sel].rs-editing { outline: 2px solid #e0007e; outline-offset: 3px; }
.rht[data-preview] [data-sel-section].rs-editing { background: none; box-shadow: inset 0 0 0 2px #e0007e; border-radius: 0; }
.rht[data-preview] .rs-sel-tag {
  position: fixed; z-index: 2147483000; pointer-events: none; padding: 4px 8px; border-radius: 6px;
  background: #e0007e; color: #fff; font: 600 12px/1.2 system-ui, sans-serif; letter-spacing: 0; white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgb(0 0 0 / .35);
}
.rht[data-preview] .rs-sel-tag[hidden] { display: none; }

/* ---------- content blocks (docs/rebel-sites/directives/CONTENT-BLOCKS.md §3): plates of a picture and words, a form on
   a note card, a calculator framed like the legend, a video's own poster. A form and a calculator are the platform's
   frames: their boxes keep the loaders' first heights, so nothing moves when the frame arrives. ---------- */
.rht .plates { border-top: 1.5px solid var(--ink-lg); }
.rht .plate { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px clamp(32px, 6vw, 88px); align-items: center; padding-block: clamp(32px, 4.4vw, 56px); border-bottom: 1px solid var(--line); }
.rht .plate.is-right :is(.plate-pic, .ms) { order: 2; }
.rht .plate.no-pic { grid-template-columns: minmax(0, 1fr); }
.rht .plate.no-pic .plate-copy { max-width: 40em; }
.rht .plate-pic { position: relative; margin: 0; }
.rht .plate-pic img { width: 100%; aspect-ratio: 4 / 3; -o-object-fit: cover; object-fit: cover; border-radius: 14px; box-shadow: var(--lift); }
.rht .plate-copy { display: grid; justify-items: start; gap: 12px; }
.rht .plate-no { font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--water-ink); font-variant-numeric: tabular-nums; }
.rht .plate-copy .prose { margin-top: 0; color: var(--ink-2); font-size: 18px; }
.rht .plate-copy .btn { margin-top: 6px; }
.rht .plate-copy .textlink { margin-top: -1px; }

.rht .ht-fi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rht .ht-fi .prose { color: var(--ink-2); }
.rht .ht-points { display: grid; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.rht .ht-points li { display: flex; align-items: center; gap: 10px; font: 600 16.5px/1.35 var(--sans); }
.rht .ht-points svg { width: 22px; height: 22px; padding: 3px; flex: none; border-radius: 50%; color: var(--sec-t-lg, var(--water-ink-lg)); background: var(--sec-tint, var(--jac-tint)); }
.rht .ht-formcard { padding: clamp(14px, 2.4vw, 28px); }
/* the loaders' first heights (form-embed-loader.js 700px, calc-embed-loader.js 800px) */
.rht :is(.ht-embed, .ms-embed).is-form:not(:has(iframe)) { min-height: 700px; }
.rht :is(.ht-embed, .ms-embed).is-calc:not(:has(iframe)) { min-height: 800px; }
.rht :is(.ht-embed, .ms-embed):empty { border-radius: 10px; background: repeating-linear-gradient(0deg, transparent 0 63px, var(--line) 63px 64px); }
.rht :is(.ht-embed, .ms-embed) iframe { display: block; width: 100%; border: 0; }

.rht .ht-ci-words { margin-top: 0; color: var(--ink-2); }
.rht .ht-calcframe { border-radius: 14px; background: var(--card); box-shadow: var(--lift), inset 0 0 0 1px var(--line); overflow: hidden; }
.rht .ht-calcbar { display: flex; align-items: center; gap: 10px; padding: 14px 22px 12px; border-bottom: 1.5px solid var(--ink-lg); font: 700 15px/1.2 var(--sans); letter-spacing: .02em; }
.rht .ht-calcbar svg { width: 22px; height: 22px; color: var(--sec-p-lg, var(--water-ink-lg)); }
.rht .ht-calcframe .ht-embed { padding: clamp(8px, 1.6vw, 18px); }

/* a video's own poster: the picture, and the action colour's play disc */
.rht .player .poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rht .player .poster img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rht .player .poster-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--go-ink, #fff); background: var(--go, var(--jac)); box-shadow: 0 0 0 6px rgba(255, 255, 255, .7), var(--lift); transition: background-color .18s var(--ease), transform .18s var(--ease); }
.rht .player .poster:hover .poster-play { background: var(--go-deep, var(--jac-deep)); transform: scale(1.05); }
.rht .player .poster-play svg { width: 30px; height: 30px; margin-left: 4px; }

/* the media slot (CONTENT-BLOCKS.md §3.5): a video on the rounded plate; a form on the note card and a calculator in the
   legend's frame, which need 400px across: beside words from 1000px up (two equal columns), stacked below it */
.rht .ms { min-width: 0; }
.rht .ms-video .player { margin-top: 0; }
.rht .ms-card { padding: clamp(14px, 2.4vw, 28px); }
.rht .ms-frame { padding: clamp(8px, 1.6vw, 18px); border-radius: 14px; background: var(--card); box-shadow: var(--lift), inset 0 0 0 1px var(--line); overflow: hidden; }
@media (min-width: 1000px) {
  .rht :is(.plate, .callout, .page-head .wrap).has-embed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .rht :is(.plate, .callout, .page-head .wrap).has-embed { grid-template-columns: minmax(0, 1fr); }
  .rht .plate.is-right.has-embed .ms { order: 0; }
  .rht .has-embed .ms-card, .rht .has-embed .ms-frame { max-width: 760px; }
}
@media (max-width: 900px) {
  .rht .plate, .rht .ht-fi { grid-template-columns: 1fr; }
  .rht .plate.is-right .plate-pic { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rht .player .poster-play { transition: none; }
  .rht .player .poster:hover .poster-play { transform: none; }
}

/* ============================================================
   BLOG — the site's blog as Hometown draws it (docs/rebel-sites/directives/BLOG-NATIVE.md §5.2; blog/BlogPages.tsx).
   The opening is the page head on the chart's water; notes with grid references; dotted leaders; the harbor for every
   call to action.
   ============================================================ */
.rht .bl-band-copy { display: grid; gap: 16px; max-width: 52em; }
.rht .bl-band .lede { margin-top: 0; }
.rht .bl-band.is-post .h1 { max-width: 17em; }
.rht .bl-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font: 600 15px/1.4 var(--sans); color: var(--water-ink); }
.rht .bl-crumbs a { text-decoration: none; padding-block: 6px; margin-block: -6px; }
.rht .bl-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rht .bl-crumbs a + a::before { content: "/"; margin-right: 6px; opacity: .6; }
.rht .bl-draft { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 10px 16px; border-radius: 10px; background: var(--sec-tint, var(--jac-tint)); color: var(--sec-t, var(--jac-deep)); box-shadow: inset 0 0 0 1.5px var(--sec-t-lg, var(--jac)); font: 700 15px/1.3 var(--sans); }
.rht .bl-draft svg { width: 18px; height: 18px; }
.rht .bl-kick { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--water-ink); text-decoration: none; padding-block: 9px; margin-block: -9px; }
.rht .bl-kick svg { width: 15px; height: 15px; }
.rht .bl-topics { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 22px; margin-top: 10px; padding-top: 14px; border-top: 1.5px dotted color-mix(in srgb, var(--ink) 35%, transparent); }
.rht .bl-topics-t { font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rht .bl-topics a { display: inline-flex; align-items: center; gap: 6px; padding-block: 6px; margin-block: -6px; font: 600 16px/1.3 var(--sans); text-decoration: none; white-space: nowrap; }
.rht .bl-topics a svg { width: 15px; height: 15px; color: var(--water-ink); }
.rht .bl-topics a:hover, .rht .bl-topics a[aria-current="page"] { color: var(--jac); }
.rht .bl-topics a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rht .bl-topics a[aria-current="page"] svg { color: var(--jac); }
.rht .bl-byline { display: flex; align-items: center; gap: 12px; font: 500 15.5px/1.4 var(--sans); }
.rht .bl-byline a { font-weight: 700; text-decoration: none; }
.rht .bl-byline a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rht .bl-byline-m { color: var(--ink-2); }
.rht .bl-av { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--ink); color: var(--paper); font: 700 16px/1 var(--sans); }
.rht .bl-av img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

/* the index: notes */
.rht .bl-index .wrap { display: grid; gap: clamp(36px, 4.4vw, 56px); }
.rht .bl-card { display: grid; align-content: start; background: color-mix(in srgb, var(--paper) 30%, white); border-radius: 14px; box-shadow: var(--lift); overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.rht .bl-card:hover { transform: translateY(-2px); }
.rht .bl-card-pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--land); border-bottom: 1.5px solid var(--ink-lg); }
.rht .bl-card-pic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rht .bl-card-copy { display: grid; gap: 10px; padding: 20px 22px 24px; }
.rht .bl-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rht .bl-ref { font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--water-ink); padding: 5px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--water-line); }
.rht .bl-card-h { font: 500 clamp(22px, 1.9vw, 26px)/1.2 var(--serif); letter-spacing: -.004em; text-wrap: balance; }
.rht .bl-card:hover .bl-card-h { color: var(--jac); }
.rht .bl-card-dek { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.rht .bl-meta { font: 500 14.5px/1.4 var(--sans); color: var(--ink-2); }
.rht .bl-card.is-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.rht .bl-card.is-lead .bl-card-pic { aspect-ratio: auto; min-height: 340px; border-bottom: 0; border-right: 1.5px solid var(--ink-lg); }
.rht .bl-card.is-lead:not(:has(.bl-card-pic)) { grid-template-columns: minmax(0, 1fr); }
.rht .bl-card.is-lead .bl-card-copy { align-content: center; padding: clamp(24px, 3.4vw, 48px); }
.rht .bl-card.is-lead .bl-card-h { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }
.rht .bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 32px); }
.rht .bl-pager { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; font: 600 15.5px/1.3 var(--sans); }
.rht .bl-pager-l { display: flex; align-items: center; gap: 14px; color: var(--ink-2); }
.rht .bl-pager-l::before, .rht .bl-pager-l::after { content: ""; flex: 1; border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 35%, transparent); }
.rht .bl-empty { display: grid; justify-items: center; gap: 12px; padding: clamp(44px, 6vw, 80px) 24px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 30%, white); box-shadow: var(--lift); text-align: center; font: 500 clamp(22px, 2vw, 28px)/1.3 var(--serif); }
.rht .bl-empty svg { width: 30px; height: 30px; color: var(--water-ink-lg); }

/* a call to action: the harbor */
.rht .bl-cta { display: grid; gap: 16px; padding: clamp(24px, 2.6vw, 32px); border-radius: 14px; --ink-lg: var(--on-hb, var(--paper)); background: var(--hb, var(--harbor)); color: var(--on-hb, var(--paper)); }
.rht .bl-cta-copy { display: grid; gap: 8px; }
/* the eyebrow on the harbor: its pale tint of the action colour, lightened only where it would not read there (theme.ts hometownInks) */
.rht .bl-eyebrow { font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sec-hb, var(--jac-lit-ink, var(--jac-lit))); }
.rht .bl-cta-h { font: 500 clamp(24px, 2vw, 28px)/1.15 var(--serif); text-wrap: balance; }
.rht .bl-cta-s { font-size: 17px; line-height: 1.5; color: var(--on-hb-2, color-mix(in srgb, var(--paper) 78%, transparent)); }
.rht .bl-cta-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rht .bl-cta-go small { font: 500 14px/1.3 var(--sans); color: var(--on-hb-2, color-mix(in srgb, var(--paper) 70%, transparent)); }
.rht .bl-cta .btn-go { background: var(--go-hb, var(--go, var(--jac))); color: var(--go-hb-ink, var(--go-ink)); box-shadow: inset 0 0 0 1px var(--go-hb-edge, transparent); }
.rht .bl-cta .btn-go:hover { background: var(--go-hb-deep, var(--go-deep, var(--jac-deep))); }
.rht .bl-cta.is-wide { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 48px; padding: clamp(28px, 4vw, 52px); }
.rht .bl-cta.is-wide .bl-cta-h { font-size: clamp(28px, 2.8vw, 40px); }

/* the article */
.rht .bl-read { padding-top: clamp(36px, 4.4vw, 56px); }
.rht .bl-read > .wrap { display: grid; gap: clamp(36px, 4.4vw, 56px); }
.rht .bl-hero { border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--ink-lg); background: var(--land); padding: 8px; }
.rht .bl-hero img { width: 100%; height: auto; aspect-ratio: 16 / 7; -o-object-fit: cover; object-fit: cover; border-radius: 9px; }
.rht .bl-lay { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(40px, 6vw, 96px); align-items: start; }
.rht .bl-lay.is-solo { grid-template-columns: minmax(0, 1fr); }
.rht .bl-col { display: grid; gap: clamp(36px, 4vw, 52px); max-width: 38em; min-width: 0; }
.rht .bl-prose { font-size: 20px; line-height: 1.65; }
.rht .bl-prose > * + * { margin-top: 1em; }
.rht .bl-prose h2 { margin-top: 1.6em; font: 500 clamp(28px, 2.6vw, 36px)/1.12 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.rht .bl-prose h3 { margin-top: 1.4em; font: 700 17px/1.3 var(--sans); letter-spacing: .02em; }
.rht .bl-prose ul { list-style: disc; padding-left: 1.2em; }
.rht .bl-prose ol { list-style: decimal; padding-left: 1.3em; }
.rht .bl-prose li + li { margin-top: .4em; }
.rht .bl-prose li::marker { color: var(--sec-p, var(--water-ink)); font: 700 17px var(--sans); }
.rht .bl-prose a:not(.btn) { color: var(--jac); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rht .bl-prose blockquote { padding: 4px 0 4px 24px; border-left: 3px solid var(--road); font: italic 400 clamp(23px, 2vw, 27px)/1.4 var(--serif); }
.rht .bl-answer { display: grid; gap: 8px; padding: 22px 24px 24px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 30%, white); box-shadow: var(--lift); }
.rht .bl-answer-t { font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--water-ink); }
.rht .bl-table { overflow-x: auto; border-top: 1.5px solid var(--ink-lg); }
.rht .bl-table table { width: 100%; border-collapse: collapse; font: 500 16px/1.4 var(--sans); }
.rht .bl-table :is(th, td) { padding: 12px 14px 12px 0; text-align: left; border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 30%, transparent); }
.rht .bl-table thead th { font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rht .bl-table tbody th { font-weight: 700; }
/* State Licensing's table is that page's content, not an aside: its cells at least 0.85 of the words (legal-center.spec) */
.rht .legal-read .legal-table table { font-size: 17px; }
/* a legal page's quiet lines (legal-doc.css draws them at 72% of the words' ink, but Hometown's --ink is the primary pushed to
   exactly AA on the paper, so 72% of it cannot read: 2.89:1 in an orange brand): the last-updated line and the contact details'
   names in the quiet words, --ink-2, AA on every ground (theme.ts hometownInks --ink-q) */
.rht .legal-read :is(.legal-updated, .legal-contact dt) { color: var(--ink-2); }
/* the Texas notice on the paper itself, framed but unwashed like Hometown's own quotes: a wash of the words' ink under words
   held to exactly AA on the paper takes them under it (4.27:1 in an orange brand) */
.rht .legal-read .legal-col .legal-prose blockquote { background: none; }
.rht .bl-fig img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.rht .bl-fig iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.rht .bl-fig figcaption { margin-top: 10px; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.rht .bl-faq { border-top: 1.5px solid var(--ink-lg); }
.rht .bl-faq details { border-bottom: 1px solid var(--line); }
.rht .bl-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font: 500 clamp(20px, 1.7vw, 23px)/1.3 var(--serif); }
.rht .bl-faq summary::-webkit-details-marker { display: none; }
.rht .bl-faq summary:hover { color: var(--jac); }
.rht .bl-pm { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; transition: transform .2s var(--ease); }
.rht .bl-pm svg { width: 14px; height: 14px; }
.rht .bl-faq details[open] .bl-pm { transform: rotate(45deg); background: var(--jac-tint); color: var(--jac); box-shadow: inset 0 0 0 1.5px var(--jac); }
.rht .bl-faq details p { padding: 0 50px 22px 0; color: var(--ink-2); }
.rht .bl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-top: 22px; border-top: 1.5px dotted color-mix(in srgb, var(--ink) 35%, transparent); font-family: var(--sans); }
.rht .bl-share-t { font: 700 15px/1.3 var(--sans); }
.rht .bl-share-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); }
.rht .bl-share-i:hover { color: var(--jac); box-shadow: inset 0 0 0 1.5px var(--jac); }
.rht .bl-share-i svg { width: 17px; height: 17px; }
.rht .bl-author { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding: clamp(22px, 2.6vw, 30px); border-radius: 14px; background: color-mix(in srgb, var(--paper) 30%, white); box-shadow: var(--lift); }
.rht .bl-author .bl-av { width: 96px; height: 96px; border-radius: 12px; font-size: 26px; }
.rht .bl-author-b { display: grid; gap: 6px; justify-items: start; min-width: 0; }
/* the sign-off's eyebrow is on the light card, not the harbor: the action colour, held at AA on every light ground (theme.ts),
   never the harbor's pale tint (2.0:1, the live blog sweep 2026-10-14) */
.rht .bl-author .bl-eyebrow { color: var(--water-ink); }
.rht .bl-author-n { font: 500 26px/1.15 var(--serif); }
.rht .bl-author-n a { text-decoration: none; padding-block: 4px; }
.rht .bl-author-n a:hover { color: var(--jac); }
.rht .bl-author-r { font: 600 15.5px/1.4 var(--sans); color: var(--ink-2); }
.rht .bl-author-l { font: 500 14px/1.4 var(--sans); color: var(--ink-2); }
.rht .bl-author-l a { color: var(--water-ink); padding-block: 8px; }
.rht .bl-author-b p { font-size: 18px; color: var(--ink-2); }
.rht .bl-author-b .btn { margin-top: 8px; }
.rht .bl-aside { position: sticky; top: 96px; display: grid; gap: 28px; }
.rht .bl-toc { display: grid; gap: 2px; font-family: var(--sans); }
.rht .bl-toc b { margin-bottom: 6px; font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rht .bl-toc a { display: flex; align-items: baseline; gap: 6px; padding: 6px 0; font: 600 15.5px/1.35 var(--sans); text-decoration: none; }
.rht .bl-toc a::after { content: ""; order: 1; flex: 1; min-width: 16px; border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 35%, transparent); transform: translateY(-4px); }
.rht .bl-toc a .bl-ref { order: 2; box-shadow: none; padding: 0; }
.rht .bl-toc a:hover { color: var(--jac); }
.rht .bl-more .h2 { margin-bottom: clamp(28px, 3.4vw, 44px); }

@media (max-width: 1080px) {
  .rht .bl-lay { grid-template-columns: minmax(0, 1fr); }
  .rht .bl-aside { position: static; }
  .rht .bl-toc { display: none; }
}
/* a phone's current legal pill: its ring doubled, never washed (the shared sheet's 8% wash of the words' ink under words held to
   exactly AA on the paper took them to 4.08:1 in an orange brand) */
@media (max-width: 900px) {
  .rht .legal-aside .legal-nav.bl-toc a[aria-current="page"] { background: none; box-shadow: inset 0 0 0 1px currentColor; }
}
@media (max-width: 900px) {
  .rht .bl-card.is-lead { grid-template-columns: 1fr; }
  .rht .bl-card.is-lead .bl-card-pic { min-height: 0; aspect-ratio: 3 / 2; border-right: 0; border-bottom: 1.5px solid var(--ink-lg); }
  .rht .bl-grid { grid-template-columns: 1fr; }
  .rht .bl-cta.is-wide { grid-template-columns: 1fr; }
  .rht .bl-hero img { aspect-ratio: 4 / 3; }
  .rht .bl-prose { font-size: 19px; }
  .rht .bl-author { grid-template-columns: 1fr; }
  .rht .bl-author .bl-av { width: 72px; height: 72px; font-size: 20px; }
}
@media (min-width: 901px) and (max-width: 1080px) { .rht .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   THE PAGE'S TONE (the Design pane's "Page tone", Andrew, 2026-10-23: "all 11 templates should have this light/dark page tone
   option"; config.ts `toneOf`). Its LIGHT page is the template as it always was, the daylight chart, and no rule here touches
   it (the default tone, so no site that never chose one changes). Its DARK page (data-mode="dark") is the whole page at night:
   the page and its hero take theme.ts's night set (`--n-*`: the brand's hue walked dark for the paper, the land a band's step
   under it, the water its secondary's hue a step over it, the map's amber, tan and green re-toned), while the notes and cards
   on it stay daylight (paper on a desk), exactly the colours they had on the light page.
   ============================================================ */
.rht[data-mode="dark"] {
  /* the page-level values, captured once so a daylight card on the night can restore them */
  --ink-base: var(--ink); --ink-2-base: var(--ink-2); --paper-base: var(--paper); --land-base: var(--land); --water-base: var(--water);
  --water-line-base: var(--water-line); --water-ink-base: var(--water-ink); --line-base: var(--line);
  --jac-base: var(--jac); --jac-deep-base: var(--jac-deep); --jac-tint-base: var(--jac-tint);
  --park-base: var(--park); --contour-base: var(--contour);
}
/* THE NIGHT PAGE: the grounds and the page's working names, moved on the root's children — an inline style cannot be outranked
   on the root itself, and the root's own day values are what the daylight cards read (as they always did). The fallbacks are
   the harbor band's own colours, drawn only in the editor's preview between the tone's live message and its redraw. Every
   band takes the night's own words: the paper's, the land's and the water's, as the daylight rules above give each its own. */
.rht[data-mode="dark"] { background: var(--n-paper, var(--harbor)); color: var(--n-ink, #FBFAF6); }
.rht[data-mode="dark"] > *, .rht[data-mode="dark"] main > .atlas-hero ~ .sec:not(.harbor):not(.member-open):not(.page-head):nth-child(odd of .sec:not(.harbor)) {
  --paper: var(--n-paper, var(--harbor)); --land: var(--n-land, var(--harbor)); --water: var(--n-water, var(--harbor));
  --water-line: var(--n-water-line, rgba(255,255,255,.3)); --water-ink: var(--n-water-ink, #C9D6DF); --water-ink-lg: var(--n-water-ink, #C9D6DF);
  --line: var(--n-line, rgba(255,255,255,.16));
  --road: var(--n-road, #E4A94F); --contour: var(--n-contour, #D8BD9E); --park: var(--n-park, #E2E9D3);
  --ink: var(--n-ink, #FBFAF6); --ink-lg: var(--n-ink, #FBFAF6); --ink-2: var(--n-ink-2, #C9D6DF);
  --jac: var(--n-acc, var(--n-jac, #FFFFFF)); --tl: var(--n-acc, var(--n-jac, #FFFFFF)); --jac-lg: var(--n-acc-lg, var(--n-jac, #FFFFFF));
  --jac-deep: var(--n-jac-deep, #F3F1EA); --jac-tint: var(--n-jac-tint, var(--harbor));
  --go-edge: var(--n-go-edge, var(--go-edge-0, transparent));
  color: var(--ink);
}
/* the washed land (and every other home band), the water and the paper, each with the night's own words */
.rht[data-mode="dark"] :is(.sec-land, main > .atlas-hero ~ .sec:not(.harbor):nth-child(even of .sec:not(.harbor))) {
  --ink: var(--n-ink, #FBFAF6); --ink-lg: var(--n-ink, #FBFAF6); --ink-2: var(--n-ink-2, #C9D6DF);
  --jac: var(--n-acc, var(--n-jac, #FFFFFF)); --tl: var(--n-acc, var(--n-jac, #FFFFFF)); --jac-lg: var(--n-acc-lg, var(--n-jac, #FFFFFF));
  --water-ink: var(--n-water-ink, #C9D6DF); --water-ink-lg: var(--n-water-ink, #C9D6DF);
  color: var(--ink);
}
.rht[data-mode="dark"] :is(.locator, .initials) {
  --ink: var(--n-ink, #FBFAF6); --ink-lg: var(--n-ink, #FBFAF6); --ink-2: var(--n-ink-2, #C9D6DF);
  --jac: var(--n-acc, var(--n-jac, #FFFFFF)); --tl: var(--n-acc, var(--n-jac, #FFFFFF)); --jac-lg: var(--n-acc-lg, var(--n-jac, #FFFFFF));
  --water-ink: var(--n-water-ink, #C9D6DF); --water-ink-lg: var(--n-water-ink, #C9D6DF);
  color: var(--ink);
}
/* the locator and a portrait's initials are pictures of the water: on the night they take its ground and its own little map
   (hometown.css `.m-water` and its fallbacks are the drawing's daylight chart), wherever on the page they sit */
.rht[data-mode="dark"] .locator { background: var(--n-water, var(--harbor)); box-shadow: inset 0 0 0 1px var(--n-water-line, rgba(255,255,255,.3)); --mw: var(--n-water, var(--harbor)); --ml: var(--n-land, var(--harbor)); --mr: var(--road); --mc: var(--water-line); }
.rht[data-mode="dark"] .locator .spot { fill: var(--n-water-ink, #C9D6DF); }
.rht[data-mode="dark"] .locator .spot-ring { stroke: var(--n-water-ink, #C9D6DF); }
.rht[data-mode="dark"] .initials { background: var(--n-water, var(--harbor)); }
/* the leader from a chosen pin to its note crosses the night's land and water: the secondary's shade that reads on both */
.rht[data-mode="dark"] .leader { --lead: var(--n-sec-ll, var(--sec-lead)); }
/* an outlined button on the night page is drawn in its words, never on the white wash the daylight page gives it (the brand
   bands keep their own, just below) */
.rht[data-mode="dark"] .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); background: transparent; }
.rht[data-mode="dark"] .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.rht[data-mode="dark"] .harbor .btn-line { color: var(--on-hb-1, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-hb-1, #fff) 45%, transparent); }
.rht[data-mode="dark"] .harbor .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--on-hb-1, #fff); background: var(--hb-deep, color-mix(in srgb, var(--on-hb-1, #fff) 6%, transparent)); }
/* a broken logo's tile is the band's own colour on the night (the paper's ink is the night now: white words on it would vanish) */
.rht[data-mode="dark"] .brandmark[data-logo-broken] .mark-fallback { background: var(--hb, var(--harbor)); color: var(--on-hb-1, #fff); }
/* the daylight notes and cards on the night page: the whole day set handed back to each (`--day-*`), so a card on a dark page
   is the card it was on a light one (this is the hero's card rule below, for the page under it) */
.rht[data-mode="dark"] :is(.note, .chip-hood, .lookup, .states li, .band, .ht-calcframe, .ms-frame, .bl-card, .bl-empty, .bl-answer, .bl-author, .bl-sub, .bl-rail-toc, .bl-hero, .team-reveal, .team-hint, .team-search-input, .ht-area, .hub-card, .plat) {
  --paper: var(--day-paper, var(--paper-base)); --land: var(--day-land, var(--land-base)); --water: var(--day-water, var(--water-base));
  --water-line: var(--day-water-line, var(--water-line-base)); --line: var(--day-line, var(--line-base));
  --ink: var(--ink-p, var(--ink-base)); --ink-lg: var(--ink-p-lg, var(--ink-base)); --ink-2: var(--ink-q, var(--ink-2-base));
  --jac: var(--acc-p, var(--jac-base)); --tl: var(--tl-p, var(--jac-base)); --jac-lg: var(--acc-p-lg, var(--jac-base)); --jac-deep: var(--day-jac-deep, var(--jac-deep-base)); --jac-tint: var(--day-jac-tint, var(--jac-tint-base));
  --water-ink: var(--sec-p, var(--water-ink-base)); --water-ink-lg: var(--sec-p-lg, var(--water-ink-base));
  --go-edge: var(--go-edge-0, transparent);
  color: var(--ink);
}
/* the opening band and an inner page's head, on a dark page (the page's grounds are moved above, on its children) */
.rht[data-mode="dark"] :is(.atlas-hero, .page-head, .member-open) {
  /* the fallbacks are the harbor band's own colours (AA for every brand), drawn only in the editor's preview between the
     tone's live message and the redraw that brings the night set */
  --paper: var(--n-ground, var(--n-paper, var(--harbor))); --land: var(--n-land, var(--harbor)); --water: var(--n-water, var(--harbor));
  --water-line: var(--n-water-line, rgba(255,255,255,.3)); --water-ink: var(--n-water-ink, #C9D6DF);
  --ink: var(--n-ink, #FBFAF6); --ink-2: var(--n-ink-2, #C9D6DF); --line: var(--n-line, rgba(255,255,255,.16));
  --jac: var(--n-acc, var(--n-jac, #FFFFFF)); --tl: var(--n-acc, var(--n-jac, #FFFFFF)); --jac-deep: var(--n-jac-deep, #F3F1EA); --jac-tint: var(--n-jac-tint, var(--harbor));
  --ink-lg: var(--n-ink, #FBFAF6); --jac-lg: var(--n-acc-lg, var(--n-jac, #FFFFFF)); --go-edge: var(--n-go-edge, transparent);
  color: var(--ink);
}
/* below 1320px the atlas sits on the night's paper, not its water: its marks are held to that ground */
@media (max-width: 1319px) { .rht[data-mode="dark"] .atlas-hero { --jac-lg: var(--n-acc-lg-p, var(--n-acc-lg, var(--n-jac, #FFFFFF))); } }
/* the water's words and marks the daylight rules give the hero's words, the locators, the initials and the atlas, handed back
   to the night inside it (each takes its container's night value, as it inherits it) */
.rht[data-mode="dark"] :is(.atlas-hero, .page-head, .member-open) :is(.hero-copy, .locator, .initials) { --ink: inherit; --ink-lg: inherit; --jac: inherit; --tl: inherit; --jac-lg: inherit; --water-ink: inherit; }
.rht[data-mode="dark"] :is(.atlas-hero, .page-head, .member-open) .atlas { --water-ink: inherit; }
.rht[data-mode="dark"] .atlas-hero .atlas { --at-ink: var(--ink); --at-det: var(--n-sec-l, var(--water-ink)); --at-mark: var(--ink-lg); --at-det-mark: var(--n-sec-l-lg, var(--water-ink)); --at-focus: var(--n-acc-l-lg, var(--jac-lg)); }
/* on the night the map's quiet names (areas, grid letters) take the night's quiet words over their halo of the night land, and a
   freeway shield, filled with the night's pale words, carries its number in the night's ground */
.rht[data-mode="dark"] .atlas-hero .atlas :is(.al, .gridref text) { fill: var(--ink-2); }
.rht[data-mode="dark"] .atlas-hero .atlas .shield text { fill: var(--paper); }
.rht[data-mode="dark"] .atlas-hero .leader { --lead: var(--n-sec-ll, var(--water-ink)); }
/* a person's page opens on its profile, which is that page's head: on the night it is a band of the night's water, in daylight it stays on the paper */
.rht[data-mode="dark"] .member-open { background: var(--water); }
/* the about page's head is on the paper in daylight and runs straight into the owner's section; on the night it is a band of its own */
.rht[data-mode="dark"] .page-head.is-about { background: var(--water); padding-bottom: clamp(40px, 5vw, 72px); }
.rht[data-mode="dark"] .page-head.is-about + .sec-about { padding-top: clamp(56px, 7vw, 96px); }
/* on the night: the action's button carries the night's own words; an outlined button is drawn in the night's words */
.rht[data-mode="dark"] :is(.atlas-hero, .page-head, .member-open) :is(.btn-go, .lookup .go) { color: var(--go-ink, var(--paper)); }
.rht[data-mode="dark"] :is(.atlas-hero, .page-head, .member-open) .btn-line { color: var(--ink); background: transparent; }
.rht[data-mode="dark"] .atlas-hero .atlas .casing { stroke: var(--land); }
/* a lede on the night is the night's quiet ink itself: by day the wash toward the ink (`.lede`, 70%) is one hue lightened, but
   on the night `--ink` is the paper (a neutral) and the wash left no hue at all (#F0F7F5, 2.7 chroma against the secondary's
   40.8; the bar, 2026-10-24) */
.rht[data-mode="dark"] :is(.hero-copy .lede, .page-head .lede) { color: var(--ink-2); }
/* the daylight notes and cards on the night */
.rht[data-mode="dark"] :is(.atlas-hero, .page-head) :is(.note, .chip-hood, .lookup, .plat, .ht-calcframe, .ms-frame) {
  --paper: var(--paper-base); --land: var(--land-base); --water: var(--water-base); --water-line: var(--water-line-base); --water-ink: var(--water-ink-base);
  --ink: var(--ink-p, var(--ink-base)); --ink-2: var(--ink-q, var(--ink-2-base)); --line: var(--line-base); --jac: var(--acc-p, var(--jac-base)); --tl: var(--tl-p, var(--jac-base)); --jac-deep: var(--jac-deep-base); --jac-tint: var(--jac-tint-base);
  --ink-lg: var(--ink-p-lg, var(--ink-base)); --jac-lg: var(--acc-p-lg, var(--jac-base)); --water-ink: var(--sec-p, var(--water-ink-base)); --go-edge: var(--go-edge-0, transparent);
  color: var(--ink);
}
.rht[data-mode="dark"] :is(.atlas-hero, .page-head) :is(.note, .lookup) :is(.btn-go, .go) { color: var(--go-ink, #fff); }
/* the plat is a white drawing (its ground and lots are white): its lot's outline, callout and dot are held to the white
   (theme.ts hometownInks `--acc-wh-lg`), in daylight and on the night's cards alike; its house sits on the lot's tint (`.house`) */
.rht .plat, .rht[data-mode="dark"] .plat, .rht[data-mode="dark"] :is(.atlas-hero, .page-head) .plat { --jac-lg: var(--acc-wh-lg, var(--jac-0)); }

/* ============================================================
   THE BUILD STAGE (the sign-up's site, assembling: stage.tsx, lib/rebel-sites/build-stage.ts)
   Only a page drawn with a stage carries [data-stage]; nothing here reaches the public site.

   Hometown's motion is A MAP BEING SURVEYED, THEN INKED. Before anything lands the page is a surveyor's draft on the
   paper: every line of words a ruled pencil line exactly where its words will sit, every button and picture a parcel
   outlined in a dashed pencil line and hatched like the atlas's unsurveyed ground; the draft is still (R22: nothing
   flashes). A part that lands is INKED, once, as it lifts on screen (first-screen/Stage.tsx marks it
   [data-stage-landing="lift"]; a page drawn afresh is drawn still): its words are drawn across by a pen, left to right,
   and settle from a soft bleed into crisp type. The logo is pressed in like a rubber stamp; the portrait comes up like a
   print in a tray, sepia first, then its own colours; the stars are stamped one by one in the map's amber; each quote is
   set in turn; the social icons are stamped one after another; the compliance lines are set like type. At the reveal
   ([data-stage-revealing]) everything still veiled clears in one gentle fade. A change of colours is a repaint.
   A veiled part's words are a disguise of the same width (stage.tsx), and kerning is off inside the parts so the widths
   are exact: nothing moves when a part lands.
   ============================================================ */
/* the pencil: a graphite in the atlas's own ink, 3:1 on the paper even at its thinnest (the build complete), still lighter and
   finer than the ink the words will be set in; on a dark band, the band's own light words' colour */
.rht[data-stage] { --stage-pencil: color-mix(in srgb, var(--ink) calc(68% - 10% * var(--stage-progress)), transparent); }
.rht[data-stage] .harbor, .rht[data-mode="dark"][data-stage] { --stage-pencil: color-mix(in srgb, currentColor calc(62% - 10% * var(--stage-progress)), transparent); }
.rht[data-stage] [data-stage-part] { font-kerning: none; font-variant-ligatures: none; }

/* what is veiled: a part not landed (and what is inside it, unless a part inside it has landed), and before the reveal
   everything that is not a part and not the canvas */
.rht[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
) { -webkit-text-fill-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
/* (the words are hidden by their fill, never their colour: a part landed inside a veiled band keeps its own ink) */
.rht[data-stage] :is([data-stage-state="lifted"], [data-stage-keep]) { -webkit-text-fill-color: currentColor; }
.rht[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(a, button, summary) { pointer-events: none; }
/* each line of words a ruled pencil line, in the words' own ink, on the line they will sit on */
.rht[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(h1, h2, h3, h4, p, dt, dd, blockquote, figcaption, .h1, .h2, .nm, .ref, .q, .d, .open, .small, a:not(.btn, :is(p, h1, h2, h3, dt, dd, blockquote, figcaption) a):not(:has(p, h2, h3, img, svg, .btn, b))) {
  background:
    repeating-linear-gradient(90deg, var(--stage-pencil) 0 14px, transparent 14px 19px) 0 0 / 38px 100%,
    linear-gradient(transparent, transparent);
  -webkit-mask: repeating-linear-gradient(to bottom, transparent 0 calc(.5lh - 1px), #000 calc(.5lh - 1px) calc(.5lh + 1px), transparent calc(.5lh + 1px) 1lh);
  mask: repeating-linear-gradient(to bottom, transparent 0 calc(.5lh - 1px), #000 calc(.5lh - 1px) calc(.5lh + 1px), transparent calc(.5lh + 1px) 1lh);
}
/* (a link padded to a thumb's height rules its line from its words, not its padding: one line, where the words will sit;
   the :not(.btn) is the rule above's own and lifts this one over its shorthand) */
.rht[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(.textlink, .foot address a, .foot-grid ul a):not(.btn) {
  background-clip: content-box; background-origin: content-box;
  -webkit-mask-clip: content-box; mask-clip: content-box; -webkit-mask-origin: content-box; mask-origin: content-box;
}
/* each button, picture and card a parcel: a dashed pencil outline round the atlas's own hatching */
.rht[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(.btn, .portrait, .note, .calc, .start, .chip-hood, .pinmark, .brandmark, .socials a, .burger, .mbar a, .ic, .lookup, .lookup .go) {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 7%, transparent) 0 1.5px, transparent 1.5px 9px) !important;
  box-shadow: none !important; outline: 1.5px dashed var(--stage-pencil); outline-offset: -1.5px;
}
/* what a veiled part draws that is not words (icons, a picture, the stars, the map): not drawn; its parcel holds the place */
.rht[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(svg, img, picture, video, iframe) { visibility: hidden; }
/* (a button whose words are white draws its parcel in the ink of the paper it sits on) */
.rht[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(.btn-go) { color: var(--ink); }
.rht[data-stage] .harbor .btn-go:not([data-stage-state="lifted"] *) { color: #F3F1EA; }

/* the canvas: the name set in the atlas's own serif, the line under it, and the stage's stamp over them */
.rht[data-stage] .stage-canvas { display: grid; gap: 16px; justify-items: start; }
.rht[data-stage] .stage-name { font-size: clamp(52px, 6vw, 92px); line-height: 1; max-width: none; }
.rht[data-stage] .stage-line { font: italic 400 clamp(19px, 1.6vw, 23px)/1.4 var(--serif); color: var(--ink-2); }
.rht[data-stage] .stage-stamp {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 6px; border-radius: 4px; transform: rotate(-2deg);
  font: 800 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--jac);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jac) 70%, transparent); background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.rht[data-stage] .stage-stamp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: rht-stage-pin 1.8s ease-in-out infinite; }
@keyframes rht-stage-pin { 50% { opacity: .25; transform: scale(.7); } }
@media (prefers-reduced-motion: no-preference) {
  .rht[data-stage] .stage-name { animation: rht-stage-ink 1.4s cubic-bezier(.5, .1, .25, 1) both; }
  .rht[data-stage] .stage-line { animation: rht-stage-ink 1.2s .5s cubic-bezier(.5, .1, .25, 1) both; }
  .rht[data-stage] .stage-stamp { animation: rht-stage-stamp .7s .9s cubic-bezier(.3, 1.5, .5, 1) both; }
}

/* a part landing on screen: inked across by a pen, the ink settling from a bleed into crisp type, once */
@media (prefers-reduced-motion: no-preference) {
  .rht[data-stage] [data-stage-landing="lift"] { animation: rht-stage-ink 1.15s cubic-bezier(.5, .1, .25, 1) both; }
  /* at the reveal, everything still veiled clears in one gentle fade (what needed nothing from the person, the canvas giving
     way to the headline, and every part that had not lifted) */
  .rht[data-stage][data-stage-revealing] :is(h1, h2, h3, p, dt, dd, blockquote, .btn, .calc, .start, .note, li):not([data-stage-part], [data-stage-part] *),
  .rht[data-stage] [data-stage-landing="reveal"] { animation: rht-stage-fade .9s ease both; }
  /* the logo is pressed in like a stamp */
  .rht[data-stage] .top :is(.pinmark, .brandmark)[data-stage-landing="lift"] { animation: rht-stage-stamp .8s cubic-bezier(.3, 1.5, .5, 1) both; }
  /* the portrait comes up like a print in a tray */
  .rht[data-stage] .portrait[data-stage-landing="lift"] { animation: none; }
  .rht[data-stage] .portrait[data-stage-landing="lift"] img { animation: rht-stage-print 1.4s cubic-bezier(.3, .5, .2, 1) both; }
  /* the stars are stamped one by one, then the score is inked */
  .rht[data-stage] .score[data-stage-landing="lift"] .stars svg { animation: rht-stage-stamp .55s cubic-bezier(.3, 1.6, .5, 1) both; }
  .rht[data-stage] .score[data-stage-landing="lift"] .stars svg:nth-child(2) { animation-delay: .11s; }
  .rht[data-stage] .score[data-stage-landing="lift"] .stars svg:nth-child(3) { animation-delay: .22s; }
  .rht[data-stage] .score[data-stage-landing="lift"] .stars svg:nth-child(4) { animation-delay: .33s; }
  .rht[data-stage] .score[data-stage-landing="lift"] .stars svg:nth-child(5) { animation-delay: .44s; }
  /* each quote is set in turn, line by line from the top */
  .rht[data-stage] .quotes li[data-stage-landing="lift"] { animation: rht-stage-set 1.2s cubic-bezier(.5, .1, .25, 1) both; }
  .rht[data-stage] .also-rated[data-stage-landing="lift"] li { animation: rht-stage-ink 1s cubic-bezier(.5, .1, .25, 1) both; }
  .rht[data-stage] .also-rated[data-stage-landing="lift"] li:nth-child(2) { animation-delay: .18s; }
  .rht[data-stage] .also-rated[data-stage-landing="lift"] li:nth-child(3) { animation-delay: .36s; }
  .rht[data-stage] .also-rated[data-stage-landing="lift"] li:nth-child(4) { animation-delay: .54s; }
  /* the social icons are stamped one after another */
  .rht[data-stage] .found-socials[data-stage-landing="lift"] { animation: none; }
  .rht[data-stage] .found-socials[data-stage-landing="lift"] li { animation: rht-stage-stamp .6s cubic-bezier(.3, 1.6, .5, 1) both; }
  .rht[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(2) { animation-delay: .15s; }
  .rht[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(3) { animation-delay: .3s; }
  .rht[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(4) { animation-delay: .45s; }
  .rht[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(5) { animation-delay: .6s; }
  .rht[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(6) { animation-delay: .75s; }
  /* the compliance lines are set like type */
  .rht[data-stage] .legal[data-stage-landing="lift"] { animation: none; }
  .rht[data-stage] .legal[data-stage-landing="lift"] > * { animation: rht-stage-set .9s cubic-bezier(.5, .1, .25, 1) both; }
  .rht[data-stage] .legal[data-stage-landing="lift"] > :nth-child(2) { animation-delay: .22s; }
  .rht[data-stage] .legal[data-stage-landing="lift"] > :nth-child(3) { animation-delay: .44s; }
  .rht[data-stage] .legal[data-stage-landing="lift"] > :nth-child(n+4) { animation-delay: .66s; }
}
@keyframes rht-stage-ink { from { clip-path: inset(-10% 100% -10% 0); filter: blur(2.5px); } 70% { clip-path: inset(-10% 0 -10% 0); filter: blur(.6px); } to { clip-path: inset(-10% -10% -10% -10%); filter: none; } }
@keyframes rht-stage-stamp { from { opacity: 0; transform: scale(1.5) rotate(-6deg); } 60% { opacity: 1; transform: scale(.96) rotate(1deg); } }
@keyframes rht-stage-print { from { filter: sepia(1) contrast(.55) brightness(1.35) blur(3px); opacity: .2; } 40% { filter: sepia(.9) contrast(.8) brightness(1.1) blur(1px); opacity: 1; } }
@keyframes rht-stage-set { from { clip-path: inset(0 0 100% 0); transform: translateY(6px); } }

/* a visitor who asked for less motion: every change is instant (Stage.tsx marks nothing as landing for them either) */
@media (prefers-reduced-motion: reduce) {
  .rht[data-stage] *, .rht[data-stage] *::before, .rht[data-stage] *::after { animation-duration: .001ms !important; }
}
@keyframes rht-stage-fade { from { opacity: 0; } }

/* what discovery found (stage-parts.tsx): the other sites' ratings under the reviews, the person's links in the footer */
.rht .also-rated { margin-top: clamp(36px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.rht .also-rated-label { font: 700 14px/1 var(--sans); color: var(--ink-2); }
.rht .also-rated ul { display: flex; flex-wrap: wrap; gap: 14px 44px; }
.rht .also-rated li { display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px 12px; }
.rht .also-rated-site { grid-column: 1 / -1; font: 500 22px/1.15 var(--serif); }
.rht .also-rated .stars5 { width: 92px; height: 15px; color: var(--review-star); }
.rht .also-rated-n { font: 500 15px var(--sans); color: var(--ink-2); }
.rht .also-rated-n b { color: var(--ink); }

/* ============================================================
   LARGE SCREENS: the whole site scales up in proportion, as a browser zoom would
   (Andrew, 2026-09-29 on Cinematic, 2026-10-08 on Golden Hour, and again on Hometown: "FIX HOMETOWN AND POSTER").
   The design is drawn for a ~1440px window — content capped at 1240–1360px, every clamp settled by ~1500px — so on a
   big monitor at 100% it sat small in the middle of the screen. Wider windows now zoom it by width / 1600 in steps:
   the SAME table every stage-carrying template carries, so all of them stand the same height on the same screen;
   ×1.6 at 2560px is about the 150% view. Below 1760px nothing changes. Chromium multiplies vh/vw by zoom, so the
   menu's one-screen height and the atlas hero's uncapped viewport math divide by --z; the sticky sub menu's measured
   offset (--site-head, visual px from site-jumps.ts, which already speaks zoom) converts back to layout px through
   the same division; and the jump padding rides <html>, outside .rht where --z cannot be read, so each step states
   its own grown fallback (the sheet's own 64px stand-in × z, rounded).
   2026-10-09: --z, the zoom and the ladder come from the ONE shared sheet (src/lib/rebel-sites/public-stage/public-stage.css: height as
   well as width, capped at 1.6); this sheet keeps only the lengths that divide by --z.
   ============================================================ */

/* ============================================================
   THE V2 COLOURS (color-engine.ts 'v2': drawn only by the brand-colours prototype until Andrew approves Hometown; a live
   page's root carries no data-color-engine, so nothing here reaches it). theme.ts `hometownVarsV2` puts each brand colour
   on a surface as itself: the SECONDARY is the water (the atlas's sea, the locators' seas, the band an inner page opens
   on), the PRIMARY the title block the hero's words sit on (a cartouche on the chart; the band they sit on below 1320px)
   and the harbor band, the TERTIARY the main button. Words on each are chosen ON it (--on-water, --on-cart); a daylight
   card on a brand band keeps the page's own colours, as it does on the night.
   ============================================================ */
.rht[data-color-engine="v2"] {
  /* the page-level values, captured once so a daylight card on a brand band can restore them */
  --ink-base: var(--ink); --ink-2-base: var(--ink-2); --paper-base: var(--paper); --water-ink-base: var(--water-ink); --line-base: var(--line);
  --jac-base: var(--jac); --jac-deep-base: var(--jac-deep); --jac-tint-base: var(--jac-tint);
  --btn-base: var(--btn); --btn-ink-base: var(--btn-ink); --btn-deep-base: var(--btn-deep); --btn-edge-base: var(--btn-edge);
}
/* the main button: the tertiary (brand-engine.ts buttonFill), a hairline when it is as light as the paper under it */
.rht[data-color-engine="v2"] .btn-go { background: var(--btn); color: var(--btn-ink); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), inset 0 0 0 1px var(--btn-edge); }
.rht[data-color-engine="v2"] .btn-go:hover { background: var(--btn-deep); }
.rht[data-color-engine="v2"] .lookup .go { background: var(--btn); color: var(--btn-ink); box-shadow: inset 0 0 0 1px var(--btn-edge); }

/* the title block: the hero's words on the primary (a band below 1320px, a cartouche on the chart above it) */
.rht[data-color-engine="v2"] .atlas-hero .hero-copy {
  --ink: var(--on-cart); --ink-2: var(--cart-2); --water-ink: var(--cart-2); --line: color-mix(in srgb, var(--on-cart) 16%, transparent);
  --jac: var(--cart-link); --tl: var(--cart-link); --jac-deep: var(--cart-link);
  --btn: var(--cart-go); --btn-ink: var(--cart-go-ink); --btn-deep: var(--cart-go-deep); --btn-edge: var(--cart-go-edge);
  background: var(--cart); color: var(--ink);
}
.rht[data-color-engine="v2"] .atlas-hero.no-map .hero-copy { padding: clamp(24px, 3.2vw, 44px); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--cart-edge); }
@media (min-width: 1320px) {
  /* the cartouche bleeds past the words' column by most of its padding, so the words stand (within 8px) where they always
     stood and the block keeps 16px from the window's edge at 1320px */
  .rht[data-color-engine="v2"] .atlas-hero:not(.no-map) .hero-copy { box-sizing: content-box; padding: 32px 32px 34px; margin: -32px 0 0 -24px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--cart-edge); }
}
/* the water's band an inner page opens on (and, on the night, the about page's head and a person's profile) */
.rht[data-color-engine="v2"] .page-head:not(.is-about),
.rht[data-mode="dark"][data-color-engine="v2"] :is(.page-head, .member-open) {
  --ink: var(--on-water); --ink-2: var(--water-2); --water-ink: var(--water-2); --line: color-mix(in srgb, var(--on-water) 16%, transparent);
  --jac: var(--sea-link); --tl: var(--sea-link); --jac-deep: var(--sea-link);
  --btn: var(--sea-go); --btn-ink: var(--sea-go-ink); --btn-deep: var(--sea-go-deep); --btn-edge: var(--sea-go-edge);
  color: var(--ink);
}
/* an outlined button on a brand band: drawn in the band's words, never on a white wash */
.rht[data-color-engine="v2"] :is(.atlas-hero .hero-copy, .page-head:not(.is-about)) .btn-line { background: transparent; }
.rht[data-color-engine="v2"] :is(.atlas-hero .hero-copy, .page-head:not(.is-about)) .btn-line:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
/* a daylight card on a brand band keeps the page's own colours */
.rht[data-color-engine="v2"] :is(.atlas-hero, .page-head, .member-open) :is(.note, .chip-hood, .lookup, .plat, .ht-calcframe, .ms-frame) {
  --ink: var(--ink-base); --ink-2: var(--ink-2-base); --water-ink: var(--water-ink-base); --line: var(--line-base);
  --jac: var(--jac-base); --tl: var(--jac-base); --jac-deep: var(--jac-deep-base); --jac-tint: var(--jac-tint-base);
  --btn: var(--btn-base); --btn-ink: var(--btn-ink-base); --btn-deep: var(--btn-deep-base); --btn-edge: var(--btn-edge-base);
  color: var(--ink);
}
/* a post's author tile and a draft's mark on the water's band keep the page's own colours too */
.rht[data-color-engine="v2"] .bl-band .bl-av { background: var(--ink-base); color: var(--paper-base); }
.rht[data-color-engine="v2"] .bl-band .bl-draft { background: var(--jac-tint-base); color: var(--jac-deep-base); box-shadow: inset 0 0 0 1.5px var(--jac-base); }

/* the atlas: the sea is the secondary; its names its own quieter words, a river the sea's colour on the land, a bridge
   over it in the sea's words; the grid and the credit may sit on land or sea, so they carry the land's halo */
.rht[data-color-engine="v2"] .atlas .wl { fill: var(--water-2); }
.rht[data-color-engine="v2"] .atlas .river { stroke: var(--river); }
.rht[data-color-engine="v2"] .atlas .bridge { stroke: var(--on-water); }
.rht[data-color-engine="v2"] .atlas :is(.attrib, .gridref text) { fill: var(--ink-2); paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round; }
.rht[data-color-engine="v2"] .locator { --mw: var(--water); --mc: var(--water-line); --ml: var(--land); }
.rht[data-color-engine="v2"] .plat .house { opacity: .85; }
.rht[data-color-engine="v2"] .initials { color: var(--on-water); }

/* the harbor band (and the blog's call to action): the primary, its words chosen on it, the main button the tertiary unless
   it is the band's own colour (then the band's words colour, the white button the harbor always drew) */
.rht[data-color-engine="v2"] :is(.harbor, .bl-cta) {
  --btn: var(--cart-go); --btn-ink: var(--cart-go-ink); --btn-deep: var(--cart-go-deep); --btn-edge: var(--cart-go-edge);
  color: var(--on-cart);
}
.rht[data-color-engine="v2"] :is(.harbor, .bl-cta) .btn-go { background: var(--btn); color: var(--btn-ink); box-shadow: inset 0 0 0 1px var(--btn-edge); }
.rht[data-color-engine="v2"] :is(.harbor, .bl-cta) .btn-go:hover { background: var(--btn-deep); }
.rht[data-color-engine="v2"] .harbor .btn-line { color: var(--on-cart); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-cart) 45%, transparent); }
.rht[data-color-engine="v2"] .harbor .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--on-cart); background: color-mix(in srgb, var(--on-cart) 8%, transparent); }
.rht[data-color-engine="v2"] .harbor .topo path { stroke: var(--on-cart); }
.rht[data-color-engine="v2"] :is(.harbor .lede, .visit, .bl-cta-s, .bl-cta-go small) { color: var(--cart-2); }
.rht[data-color-engine="v2"] :is(.visit b, .visit a) { color: var(--on-cart); }
.rht[data-color-engine="v2"] .bl-eyebrow { color: var(--cart-link); }
.rht[data-color-engine="v2"] .harbor .mini { --mw: color-mix(in srgb, var(--harbor) 84%, var(--on-cart)); --ml: color-mix(in srgb, var(--harbor) 92%, var(--on-cart)); --mr: color-mix(in srgb, var(--harbor) 66%, var(--on-cart)); --mc: color-mix(in srgb, var(--harbor) 72%, var(--on-cart)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-cart) 18%, transparent); }
.rht[data-color-engine="v2"] .harbor .mini .spot { fill: var(--sec-hb-mark, var(--cart-link)); }
.rht[data-color-engine="v2"] .harbor .mini .lbl { fill: var(--on-cart); }

/* the night (a dark hero): only the land changes. The title block keeps its edge on the night ground; every main button
   keeps its own words (the night's rules would set them in the night's paper) */
.rht[data-mode="dark"][data-color-engine="v2"] .atlas-hero { --cart-edge: var(--n-cart-edge); }
.rht[data-mode="dark"][data-color-engine="v2"] :is(.atlas-hero, .page-head, .member-open) :is(.btn-go, .lookup .go),
.rht[data-mode="dark"][data-color-engine="v2"] :is(.note, .lookup) :is(.btn-go, .go) { color: var(--btn-ink); }

/* ============================================================
   LOCAL AREAS — the page links' photo cards (sections/kinds/page-links.ts, look 'photo-cards'; drawn by
   sections/Catalog.tsx `PageLinks`). Each area a postcard of the town: its photo under a hairline of the atlas's ink, a
   pin and the name in the serif, the line in the body face, the arrow at its foot in the action colour. Every colour is
   the page's own (--paper, --ink, --ink-2, --line, --jac), so both tones and every palette read as the rest of the page
   does. Two to four across by count (page-link-cards.ts `areaColumns`), every row the same height; two across under
   1000px, one under 600px. Its own block: nothing above is changed by it.
   ============================================================ */
.rht .ht-areas { --area-cols: 3; display: grid; grid-template-columns: repeat(var(--area-cols), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; }
.rht .ht-areas.cols-2 { --area-cols: 2; }
.rht .ht-areas.cols-3 { --area-cols: 3; }
.rht .ht-areas.cols-4 { --area-cols: 4; }
.rht .ht-areas > li { display: flex; min-width: 0; }
.rht .ht-area { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; text-align: start; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.rht .ht-area:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--jac), var(--lift); }
.rht .ht-area-ph { display: block; flex: none; aspect-ratio: 4 / 3; overflow: hidden; background: var(--land); border-bottom: 1.5px solid var(--ink-lg); }
.rht .ht-areas.cols-2 .ht-area-ph { aspect-ratio: 16 / 9; }
.rht .ht-area-ph img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .6s var(--ease); }
.rht .ht-area:hover .ht-area-ph img { transform: scale(1.04); }
/* a card without a photo beside cards with theirs: the atlas's land, its contour lines, so every card keeps the same shape */
.rht .ht-area-ph.is-empty { background: repeating-radial-gradient(circle at 70% 120%, transparent 0 22px, color-mix(in srgb, var(--ink) 9%, transparent) 22px 23.5px), var(--land); }
.rht .ht-area-copy { display: grid; flex: 1; align-content: start; gap: 6px; padding: 20px 22px 0; }
.rht .ht-area-name { display: flex; align-items: baseline; gap: 8px; font: 500 clamp(22px, 1.9vw, 26px)/1.15 var(--serif); overflow-wrap: anywhere; }
/* the pin beside an area's name is a detail (the secondary's 3:1 mark on the card: --water-ink-lg); the card's trailing arrow (.ht-area-go) is the link's own, in the button colour */
.rht .ht-area-name svg { flex: none; width: 16px; height: 16px; color: var(--water-ink-lg); transform: translateY(1px); }
.rht .ht-area-name > span { min-width: 0; }
.rht .ht-area-sub { font: 500 15px/1.45 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.rht .ht-area-go { display: flex; justify-content: flex-end; padding: 16px 22px 20px; color: var(--jac); }
.rht .ht-area-go svg { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.rht .ht-area:hover .ht-area-go svg { transform: translateX(3px); }
@media (max-width: 1000px) { .rht .ht-areas:is(.cols-3, .cols-4) { --area-cols: 2; } }
@media (max-width: 600px) { .rht .ht-areas:is(.cols-2, .cols-3, .cols-4) { --area-cols: 1; } .rht .ht-areas.cols-2 .ht-area-ph { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .rht .ht-area, .rht .ht-area-ph img, .rht .ht-area-go svg { transition: none; } .rht .ht-area:hover, .rht .ht-area:hover .ht-area-ph img, .rht .ht-area:hover .ht-area-go svg { transform: none; } }

/* a wide dropdown (nav-draw.tsx: a long list in columns, the menu builder's columns and block): the same white card, a
   column's heading a small capital detail, the block on the accent's tint with the header's button */
.rht .nav-drop .nav-mega .nav-col-h { font: 700 11.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.rht .nav-drop .nav-mega .nav-cta { border-radius: 10px; }
.rht .nav-drop .nav-mega .nav-cta-pic { border-radius: 8px; }
.rht .nav-drop .nav-mega .nav-cta-h { font: 500 21px/1.15 var(--serif); }
.rht .nav-drop .nav-mega .nav-cta-line { font: 400 14px/1.45 var(--sans); }
.rht .mm-sub .mm-col-h { font: 700 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.rht .mm-sub .mm-cta { border-radius: 12px; }
.rht .mm-sub .mm-cta .nav-cta-pic { border-radius: 8px; }
.rht .mm-sub .mm-cta .nav-cta-h { font: 500 22px/1.15 var(--serif); }

/* the Loans overview (page-link-cards.tsx HubGroups; shape in page-link-hub.css): each card Hometown's note (white, 14px corners, its lift),
   the name in the serif, the icon in the water ink, the arrow in the jacaranda as the name turns on hover */
.rht .shared-hub .hub-h { --hub-line: var(--line); font: 500 clamp(24px, 2.2vw, 30px)/1.15 var(--serif); }
.rht .hub-card { border-radius: 14px; background: #fff; box-shadow: var(--lift); transition: transform .2s ease; }
.rht .hub-card:hover { transform: translateY(-2px); }
.rht .hub-card:hover .hub-name { color: var(--acc-t, var(--jac)); }
.rht .hub-name { font: 500 23px/1.2 var(--serif); }
.rht .hub-line { font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.rht .hub-ico { color: var(--sec-t-lg, var(--water-ink-lg)); }
.rht .hub-go { color: var(--acc-t, var(--jac)); }
@media (prefers-reduced-motion: reduce) { .rht .hub-card { transition: none; } .rht .hub-card:hover { transform: none; } }

/* The owner's second button color (config.ts secondButtonColor, the Design pane's "Second button"; Andrew, 2026-10-21): every
   element this template draws in its second look (.btn-line) is filled with it: the owner's second buttons, the header's second, the phone menu's buttons (where the outline look is drawn the same), its Call and Text, and More reviews. A team card's Meet is the main look; the blog's links are text links.
   Its words take the color that reads on it (--rs-second-ink: theme.ts readableOn), and hover shades the fill away from the words
   (--rs-second-shade), so they read better still. Only on a root that carries the color (chrome-kit.tsx secondButtonAttrs): on Auto
   neither the mark nor the colors exist, so none of this applies. The :not(#…) lifts it over every ground's and hover's own rule
   for the look; a button's own color (drawn inline) still wins; many of one button keep the crowd's outline. Its inset ring (35% ink, or the harbor's words) is dropped: the fill is the edge. */
.rht[data-second-button] .btn-line:not(.btn-many):not(#rs-second-button) {
  background-color: var(--rs-second); background-image: none; border-color: var(--rs-second); color: var(--rs-second-ink);
}
.rht[data-second-button] .btn-line:not(.btn-many):not(#rs-second-button):hover {
  background-color: color-mix(in srgb, var(--rs-second) 88%, var(--rs-second-shade)); border-color: color-mix(in srgb, var(--rs-second) 88%, var(--rs-second-shade));
}
/* a button filled with the owner's own color (data-own-fill: the hero's second button, parts.tsx ownFill) drops the ring too */
.rht [data-own-fill]:not(#rs-second-button),
.rht[data-second-button] .btn-line:not(.btn-many):not(#rs-second-button) { box-shadow: none; }

/* ── The blog's sidebar modules and its subscribe box (blog-shell/BlogModules.tsx), in Hometown's own type and colors ──
   Beside the text with the call to action, in the owner's order; a column holding more than the call to action scrolls
   with the page (a sticky column taller than the window hides its own end). Lines and quiet words are the ground's own ink,
   so a module reads on the paper and on a colored band alike. */
.rht .bl-aside:has(> .bl-mod) { position: static; }
.rht .bl-mod { display: grid; gap: 12px; align-content: start; min-width: 0; }
.rht .bl-mod-h { font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
/* the quiet lines (a latest article's date, the fine print, a topic's count) are the quiet words (--ink-2, AA on every ground that
   sets it), never a mix of their link's ink: the ink is the primary as words, and 70% of a brand ink fell under AA (the bar, 2026-10-23) */
.rht .bl-mod-sub, .rht .bl-mod-fine { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.rht :is(.bl-mod-name, .bl-mod-more, .bl-mod-topic, .bl-mod-post, .bl-mod-sub a) { color: inherit; }
.rht .bl-mod-who { display: flex; align-items: center; gap: 14px; }
.rht .bl-mod-av { flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--ink); color: var(--paper); font: 700 16px/1 var(--sans); }
.rht .bl-mod-av img, .rht .bl-mod-ph img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rht .bl-mod-who-b, .rht .bl-mod-post-b { display: grid; gap: 2px; min-width: 0; }
.rht .bl-mod-name { font: 500 22px/1.2 var(--serif); text-decoration: none; }
.rht .bl-mod-more { justify-self: start; font-weight: 600; text-underline-offset: .2em; }
.rht .bl-mod-list { display: grid; margin: 0; padding: 0; list-style: none; }
.rht .bl-mod-topic, .rht .bl-mod-rates > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.rht .bl-mod-topic, .rht .bl-mod-post { text-decoration: none; }
.rht .bl-mod-n { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rht .bl-mod-post { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 0; }
.rht .bl-mod-post:not(:has(.bl-mod-ph)) { grid-template-columns: minmax(0, 1fr); }
.rht .bl-mod-ph { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--land); }
.rht .bl-mod-post-t { font-weight: 600; line-height: 1.3; }
.rht .bl-mod-name:hover, .rht .bl-mod-topic:hover > span:first-child, .rht .bl-mod-post:hover .bl-mod-post-t { text-decoration: underline; text-underline-offset: .2em; }
.rht .bl-mod-rates { display: grid; margin: 0; }
.rht .bl-mod-rates dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.rht .bl-mod > .btn { justify-self: start; }
.rht .bl-mod-frame { display: block; width: 100%; border: 0; }
.rht .bl-sub { padding: clamp(22px, 2.6vw, 30px); border-radius: 14px; background: color-mix(in srgb, var(--paper) 30%, white); box-shadow: var(--lift); }
.rht .bl-author + .bl-sub { margin-top: 28px; }
.rht :is(.bl-index, .bl-side) > :is(.wrap, .section-in, .chapter-in) > * + :is(.bl-mod, .bl-sub) { margin-top: 28px; }
.rht :is(.bl-index, .bl-side) .bl-mod { max-width: 640px; }

/* ── An article's rail and phone drawer (blog-shell/BlogRail.tsx; the shared layout is blog-rail.css), in Hometown's own surfaces:
   the bar's and drawer's paper, ink and line, how far under the header the kept group stops (the rail's old sticky top),
   and "In this article" as its own card (the subscribe card's paper and lift), its entries one type step under the cards (15.5px → 14.5px). ── */
.rht :is(.bl-rail, .bl-rbar, .bl-drawer) { --bl-paper: var(--paper); --bl-ink: var(--ink); --bl-line: var(--line); }
.rht .bl-rail { --bl-rail-top: 96px; }
.rht .bl-rail-toc { padding: 18px 20px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 30%, white); box-shadow: var(--lift); }
.rht .bl-rail-toc a { font-size: 14.5px; }
/* the official Equal Housing artwork on the Legal page (legal-doc.tsx draws both; legal-eho-grounds.test) for its band’s ground: the daylight paper in both tones (the night is only the hero’s) */
.rht .legal-read .legal-eho-on-light { display: block; }
.rht .legal-read .legal-eho-on-dark { display: none; }

/* ---- the button fit's gutters (fit.css): a call-to-action row measures its column as the screen less this, so the variable sits on
   the root and a place that insets its row says its own (measured at 360, twice the row's x): never on the button, whose own
   declaration would hide the place's ---- */
.rht { --button-gutter: 32px; }

/* ============================================================
   THE PROPOSED COLOUR ENGINE (color-engine.ts 'proposed': the brand-colours prototype's Proposed switch only; every live page carries no
   data-color-engine and draws exactly as above). ONE ACTION COLOUR (Andrew, 2026-11-01; branch tpl/action-color ported behind the switch): a
   .textlink (under the pointer too), the calculators' "Open" links and a crowd's words and outline are --tl, the action colour: the main button's
   fill wherever it reads on the ground, else its one nearest shade (brand-engine actionColor; theme.ts hometownInks emits --tl-p/-l/-w so on this
   engine only, --tl-hb for the closing band and --n-tl for the night's grounds).
   ============================================================ */
.rht[data-color-engine="proposed"] .btn-go.btn-many { color: var(--tl); }
.rht[data-color-engine="proposed"] .textlink:hover { color: var(--tl); text-decoration-thickness: 2.5px; }
.rht[data-color-engine="proposed"] .calc .open { color: var(--tl); }
.rht[data-color-engine="proposed"] .harbor { --tl: var(--tl-hb, var(--on-hb, #F3F1EA)); }
.rht[data-color-engine="proposed"][data-mode="dark"] > *, .rht[data-color-engine="proposed"][data-mode="dark"] main > .atlas-hero ~ .sec:not(.harbor):not(.member-open):not(.page-head):nth-child(odd of .sec:not(.harbor)),
.rht[data-color-engine="proposed"][data-mode="dark"] :is(.sec-land, main > .atlas-hero ~ .sec:not(.harbor):nth-child(even of .sec:not(.harbor))),
.rht[data-color-engine="proposed"][data-mode="dark"] :is(.locator, .initials),
.rht[data-color-engine="proposed"][data-mode="dark"] :is(.atlas-hero, .page-head, .member-open) { --tl: var(--n-tl, var(--n-acc, var(--n-jac, #FFFFFF))); }
/* EYEBROWS ARE THE SECONDARY (Andrew, 2026-11-01; branch tpl/eyebrows ported behind the switch): an eyebrow is the secondary wherever it stands, a
   section's own too (a text block, the contact card), and on the night its own nearest shade that reads there (theme.ts --n-eyebrow), never the
   water's pale tint; a daylight card keeps the day's */
.rht[data-color-engine="proposed"] .eyebrow { color: var(--water-ink); }
.rht[data-color-engine="proposed"][data-mode="dark"] :is(.eyebrow, .offer-eyebrow):not(:is(.note, .chip-hood, .lookup, .plat, .ht-calcframe, .ms-frame) *) { color: var(--n-eyebrow, var(--water-ink)); }