/* ======================================================================================
   Last Lantern's look, from R2's Home board (signed off 10/7/2026). The one source: `node scripts/mock.mjs look`
   splices this file into docs/mocks/site.html and docs/mocks/style-sheet.html, so the board and the style sheet read
   the same values. Edit it here, never in either page.
   Scope: .d-home-ground, the name the painter's own rules hang on. On the site board it is the .site element, the
   container its phone rules ask (max-width 640px).
   Margins, paddings and gaps keep to one spacing scale (spacing scale: even px to 28, then multiples of 4). `node scripts/align.mjs`
   reads that line and reports a value off it; the ones kept on purpose are in docs/mocks/notes/site-15.md (PX1).
   ====================================================================================== */
.d-home-ground {
  /* primary: Reilly's deep greens, blues and purples (10/7: they carry the brand and the large areas) */
  --fir: #13291D; --port: #1A3A42; --ink: #2A1F33; --shadow: #4F6084;
  --dusk: #2a1e2b; --plum: #43303d; --heather: #6b4a5a;
  /* corner radii, three steps by element size: tags and chips, controls, panels and cards (50% stays for dots and avatars) */
  --r-s: 4px; --r-m: 6px; --r-l: 8px;
  /* paper and the light on dark grounds */
  --paper: #fbf1e1; --rose: #d9c2c8; --cream: #fbf1e1; --field: #fffaf2; --on-berry: #fff6ea;
  /* secondary, sparing: the lamp's light, and berry for the one main button in view */
  --lamp: #f2b35e; --berry: #a3253a; --berry-d: #861b2e;
  --rule-d: rgba(42,30,43,.28); --rule-l: rgba(251,241,225,.2);
  --serif: 'Alegreya', Georgia, serif; --text: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif; --sc: 'Alegreya Sans SC', 'Alegreya Sans', system-ui, sans-serif;
  /* motion: one curve, three lengths for a change you made; the painting's own times are in Motion */
  --ease: cubic-bezier(.2,.7,.2,1); --d1: 120ms; --d2: 200ms; --d3: 320ms;
  position: relative; box-sizing: border-box; font-family: var(--text); color: var(--dusk); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.d-home-ground *, .d-home-ground *::before, .d-home-ground *::after { box-sizing: border-box; }
.d-home-ground a { color: inherit; }
.d-home-ground [hidden] { display: none !important; }
.d-home-ground .d-home-ground-art { position: relative; display: block; }
.d-home-ground .d-home-ground-art svg { display: block; }

/* ---------- the painting's lettering (inside the SVG) ---------- */
.d-home-ground .d-home-ground-pk { font-family: var(--sc); font-weight: 500; letter-spacing: .06em; fill: #3b2633; }
.d-home-ground .d-home-ground-pks { font-family: var(--text); font-weight: 400; fill: #6a4c5c; font-variant-numeric: lining-nums tabular-nums; }
.d-home-ground .d-home-ground-town { font-family: var(--serif); font-style: italic; font-weight: 400; fill: #ead2c0; }
.d-home-ground .d-home-ground-loct { font-family: var(--text); font-weight: 500; fill: #43303d; }
.d-home-ground .d-home-ground-locm { font-family: var(--serif); font-style: italic; font-weight: 500; fill: #2a1e2b; }

/* ---------- motion: the lamp comes on (the one orchestrated moment, on Home); off under reduced motion, and under the
   board's Reduced motion switch (.is-still) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .d-home-ground:not(.is-still) .d-home-ground-glass { animation: d-home-ground-on .45s ease-out .15s both; }
  .d-home-ground:not(.is-still) .d-home-ground-halo { animation: d-home-ground-on .7s ease-out .45s both; }
  .d-home-ground:not(.is-still) .d-home-ground-glow { animation: d-home-ground-on 1.1s ease-out .55s both; }
  .d-home-ground:not(.is-still) .d-home-ground-lp { animation: d-home-ground-on .45s ease-out var(--home-ground-d,.8s) both, d-home-ground-shim 6s ease-in-out calc(var(--home-ground-d,.8s) + .5s) infinite alternate; }
  .d-home-ground:not(.is-still) .d-home-ground-win { animation: d-home-ground-on .9s ease-out var(--home-ground-d,1s) both; }
}
@keyframes d-home-ground-on { from { opacity: 0; } }
@keyframes d-home-ground-shim { to { opacity: .6; } }

/* ---------- buttons: berry is the one main button in view; the rest are quiet or ink ---------- */
.d-home-ground .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-m); font: 700 17px/1 var(--text); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: background-color var(--d2) var(--ease); }
.d-home-ground .btn-primary { background: var(--berry); color: var(--on-berry); }
.d-home-ground .btn-primary:hover { background: var(--berry-d); }
.d-home-ground .btn-ink { background: var(--dusk); color: var(--cream); }
.d-home-ground .btn-ink:hover { background: var(--plum); }
.d-home-ground .btn-quiet { background: rgba(251,241,225,.72); color: var(--dusk); box-shadow: inset 0 0 0 1.5px rgba(42,30,43,.72); }
.d-home-ground .btn-quiet:hover { background: var(--paper); }
.d-home-ground .btn-line { background: transparent; color: var(--dusk); box-shadow: inset 0 0 0 1.5px rgba(42,30,43,.72); }
.d-home-ground .btn-line:hover { background: rgba(42,30,43,.05); }
.d-home-ground a:focus-visible, .d-home-ground button:focus-visible, .d-home-ground summary:focus-visible { outline: 3px solid var(--dusk); outline-offset: 3px; }

/* ---------- the header: sticky on every page; on Home it sits on the painting's sky until you scroll ---------- */
.d-home-ground .head { position: sticky; top: 0; z-index: 5; background: var(--paper); transition: box-shadow var(--d2) var(--ease); }
.d-home-ground .head.is-stuck { box-shadow: 0 1px 0 var(--rule-d), 0 8px 20px -14px rgba(42,30,43,.45); }
.d-home-ground .head-in { display: flex; align-items: center; gap: 24px; height: 84px; padding: 0 48px; }
.d-home-ground .page[data-path="/"] .head:not(.is-stuck) { background: transparent; }
.d-home-ground .page[data-path="/"] .head { margin-bottom: -84px; }
.d-home-ground .wm { display: flex; align-items: center; gap: 13px; text-decoration: none; min-height: 44px; }
.d-home-ground .mk { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; }
.d-home-ground .mk svg { display: block; width: 100%; height: 100%; }
.d-home-ground .wm-t { font: 600 29px/1 var(--serif); letter-spacing: -.005em; color: var(--dusk); white-space: nowrap; }
.d-home-ground .firm { display: flex; flex-direction: column; font: 15px/1.3 var(--text); color: var(--plum); padding-left: 20px; border-left: 1px solid var(--rule-d); }
.d-home-ground .firm b { font-weight: 700; color: var(--dusk); }
.d-home-ground .nav { margin-left: auto; display: flex; gap: 6px; }
.d-home-ground .nav a { font: 500 18px var(--text); text-decoration: none; padding: 12px 11px; border-radius: var(--r-m); color: var(--dusk); min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; transition: background-color var(--d1) var(--ease); }
.d-home-ground .nav a:hover { background: rgba(42,30,43,.06); }
/* the page you're on: a berry underline under the word, and full weight */
.d-home-ground .nav a[aria-current] { font-weight: 700; text-decoration: underline 2px var(--berry); text-underline-offset: 8px; }
/* Contact is the phone's link to the form, where Request a time is hidden; at full width it gives way to About (N1) */
.d-home-ground .nav .nav-phone { display: none; }
.d-home-ground .call { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; font: 15px/1.25 var(--text); color: var(--plum); margin-left: 8px; text-decoration: none; min-height: 44px; }
.d-home-ground .call b { font: 700 18px/1.3 var(--text); color: var(--dusk); font-variant-numeric: lining-nums tabular-nums; }
.d-home-ground .call-s { display: none; }
/* Home: Request a time waits while the hero's own is in view, keeping its place so nothing moves, then fades in */
.d-home-ground .head-cta { transition: background-color var(--d2) var(--ease), opacity var(--d2) var(--ease); }
.d-home-ground .head.cta-wait .head-cta { opacity: 0; visibility: hidden; transition: opacity var(--d2) var(--ease), visibility 0s linear var(--d2); }
/* while it waits, her number slides over into its place, and slides back as it comes in (Josh, 10/8); --cta-shift is
   the button's width and the gap, measured by the page */
.d-home-ground .call { transition: transform var(--d3) var(--ease); }
.d-home-ground .head.cta-wait .call { transform: translateX(var(--cta-shift, 0px)); }
@media (prefers-reduced-motion: reduce) { .d-home-ground .head-cta, .d-home-ground .call { transition: none; } }
.d-home-ground .skip { position: absolute; left: 16px; top: 12px; opacity: 0; pointer-events: none; z-index: 10; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-m); background: var(--dusk); color: var(--cream); font: 700 16px/1 var(--text); text-decoration: none; }
.d-home-ground .skip:focus { opacity: 1; pointer-events: auto; }
/* anchors and focus land below the sticky header (WCAG 2.4.11) */
.d-home-ground [id], .d-home-ground a, .d-home-ground button, .d-home-ground input, .d-home-ground select, .d-home-ground textarea, .d-home-ground summary, .d-home-ground [tabindex] { scroll-margin-top: 96px; }
/* the brand and the firm under the header, on a phone only */
.d-home-ground .id-row { display: none; }

/* ---------- Home's hero: the painting, the words on its sky, the water's drift and Pause ---------- */
.d-home-ground .hero { --stage: 744px; --ov: 72px; position: relative; }
.d-home-ground .hr-stage { position: relative; height: var(--stage); overflow: hidden; background: #ead2c6; }
.d-home-ground .hr-pic { position: absolute; inset: 0; }
/* the painting is painted to the shore's full depth (844) and the stage crops it */
.d-home-ground .hr-pic > .d-home-ground-art, .d-home-ground .hr-pic > .hr-drift { position: absolute; left: 0; right: 0; top: 0; height: 844px; }
.d-home-ground .hr-copy { position: absolute; left: 56px; top: 102px; width: 600px; z-index: 2; }
.d-home-ground .hr-h1 { margin: 0; max-width: 580px; font: 500 66px/1.02 var(--serif); letter-spacing: -.014em; color: var(--dusk); text-wrap: balance; }
.d-home-ground .hr-lede { margin: 18px 0 0; max-width: 480px; font: 400 19px/1.45 var(--text); color: var(--plum); text-wrap: pretty; }
.d-home-ground .hr-acts { display: flex; gap: 12px; margin-top: 20px; }
.d-home-ground .hr-cap { position: absolute; margin: 0; right: 164px; bottom: calc(var(--ov) + 28px); font: italic 400 18px/1.3 var(--serif); color: #f6e4d2; letter-spacing: .01em; text-shadow: 0 1px 8px rgba(28,33,49,.6); z-index: 2; }
/* the water's slow drift, an overlay on the painting; at rest each glint sits at its quiet opacity, never full strength */
.d-home-ground .hr-drift { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.d-home-ground .hr-drift svg { display: block; width: 100%; height: 100%; }
.d-home-ground .hr-rp { opacity: var(--o0,.2); }
@media (prefers-reduced-motion: no-preference) {
  .d-home-ground:not(.is-still) .hr-rp { animation: hr-drift var(--t,14s) ease-in-out var(--d,0s) infinite alternate; }
}
@keyframes hr-drift { from { transform: translateX(calc(var(--a,10px) * -1)); opacity: var(--o0,.35); } to { transform: translateX(var(--a,10px)); opacity: var(--o1,.75); } }
/* Pause stops it, and it rests while the painting is off screen */
.d-home-ground .hero.is-paused *, .d-home-ground .hero.is-away * { animation-play-state: paused !important; }
/* Pause: one size with the buttons, on the dark water right of the light path */
.d-home-ground .pause { position: absolute; right: 48px; bottom: calc(var(--ov) + 20px); z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-m); border: 0; cursor: pointer; background: rgba(42,31,51,.72); color: var(--cream); font: 500 16px/1 var(--text); box-shadow: inset 0 0 0 1px var(--rule-l); }
.d-home-ground .pause:hover { background: rgba(42,31,51,.9); }
.d-home-ground .pause:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
/* nothing moves under reduced motion, so there's nothing to pause */
.d-home-ground.is-still .pause { display: none; }
@media (prefers-reduced-motion: reduce) { .d-home-ground .pause { display: none; } }

/* ---------- the doors: paper cards over the painting's edge, each with a drawn window; home sales is unlit; no labels above the titles (Josh, 10/8) ---------- */
.d-home-ground .doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; z-index: 2; margin: calc(var(--ov) * -1) 56px 0; padding-bottom: 56px; }
.d-home-ground .door { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; text-decoration: none; min-width: 0; min-height: 44px; color: var(--dusk); background: var(--paper); border-radius: var(--r-l); padding: 16px 20px; box-shadow: 0 1px 0 rgba(42,30,43,.08), 0 22px 40px -16px rgba(28,22,38,.55); }
.d-home-ground .door-win { display: block; width: 50px; height: 61px; }
.d-home-ground .door-win svg { display: block; width: 100%; height: 100%; overflow: visible; }
.d-home-ground .door-win .w-pane { opacity: .82; transition: opacity .25s ease-out; }
.d-home-ground .door:hover .w-pane, .d-home-ground .door:focus-visible .w-pane { opacity: 1; }
.d-home-ground .door-t { display: grid; gap: 4px; min-width: 0; }
.d-home-ground .door-tt { font: 500 25px/1.1 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.d-home-ground .door-sb { font: 400 16px/1.3 var(--text); color: var(--plum); font-variant-numeric: lining-nums tabular-nums; }
.d-home-ground .door-go { font: 400 .9em/1 var(--text); margin-left: .3em; color: var(--berry); }
.d-home-ground .door.is-plain .door-win svg { filter: drop-shadow(0 0 9px rgba(160,190,230,.55)); }
.d-home-ground .door.is-plain .door-go { color: var(--heather); }
.d-home-ground .others .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 0; padding-bottom: 0; }
.d-home-ground .others .doors:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* On paper the cards take a light shadow; Home's deep one is drawn for the painting behind them (VS-13). */
.d-home-ground .others .door { box-shadow: 0 1px 0 rgba(42,30,43,.08), 0 6px 16px -8px rgba(28,22,38,.28); }
.d-home-ground .others .legal { margin-top: 24px; color: var(--dusk); border-color: var(--rule-d); }
.d-home-ground .nw { white-space: nowrap; }
.d-home-ground .door:focus-visible { outline: 3px solid var(--lamp); outline-offset: 4px; border-radius: var(--r-l); }

/* ---------- an interior page's top: the title on paper, then a strip of the painting (the peaks, no lamp) ---------- */
.d-home-ground .top { background: var(--paper); }
.d-home-ground .ph { display: grid; gap: 14px; align-content: start; max-width: 760px; padding-block: 40px 36px; }
/* Every interior top is one height on a wide screen (VS-5, VS-12): a service page's, with its face and lede, is the
   tallest, so the others take its height. On a phone each takes its own, since the action button below the lede varies. */
.d-home-ground .top .ph { min-height: 240px; }
.d-home-ground .ph-who { margin: 0 0 -4px; font: 500 15px/1.2 var(--sc); letter-spacing: .06em; color: var(--heather); }
.d-home-ground .pg { margin: 0; font: 500 56px/1.04 var(--serif); letter-spacing: -.012em; color: var(--dusk); text-wrap: balance; }
.d-home-ground .ph-lede { display: flex; gap: 16px; align-items: center; }
.d-home-ground .lede { margin: 0; max-width: 34em; font: 400 19px/1.5 var(--text); color: var(--plum); text-wrap: pretty; }
.d-home-ground .ph-btn { display: none; }
.d-home-ground .top-band { display: block; height: 150px; overflow: hidden; background: #ead2c6; }
/* the painting's peaks, cropped to the band (the painter slices to fill it) */
.d-home-ground .top-band svg { display: block; width: 100%; height: 100%; }

/* ---------- sections, headings, links, facts ---------- */
.d-home-ground .wrap { padding-inline: 56px; }
.d-home-ground .sec { padding-block: 88px; }
.d-home-ground .sh { margin: 0; font: 500 44px/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.d-home-ground .head2 { display: grid; gap: 10px; margin-bottom: 40px; max-width: 640px; }
.d-home-ground .head2 p { margin: 0; font: 400 19px/1.5 var(--text); }
.d-home-ground .go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 17px/1.2 var(--text); text-decoration: none; }
.d-home-ground .go .arrow { transition: transform var(--d2) ease-out; }
.d-home-ground .go:hover .arrow { transform: translateX(4px); }
.d-home-ground .inl { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* run-in facts: a small-caps label, then the fact, as a line of text (the label-and-value table leaves) */
.d-home-ground .facts { margin: 0; display: grid; gap: 10px; }
.d-home-ground .facts > div { margin: 0; text-wrap: pretty; }
.d-home-ground .facts dt { display: inline; font: 500 15px/1.5 var(--sc); letter-spacing: .06em; color: var(--heather); }
.d-home-ground .facts dt::after { content: "\00a0\00a0"; }
.d-home-ground .facts dd { display: inline; margin: 0; font: 400 17px/1.5 var(--text); font-variant-numeric: lining-nums; }
/* Reilly's blanks: a sample in place (dotted underline, a Sample tag on hover) or her chip, never both */
.d-home-ground .chip { display: inline-block; font: 600 13px/1.3 var(--text); padding: 3px 8px; border-radius: var(--r-s); border: 1px dashed currentColor; margin-left: 6px; vertical-align: 1px; color: var(--heather); }
.d-home-ground .sm { position: relative; }
.d-home-ground span.sm, .d-home-ground .sm blockquote { text-decoration: underline dotted 1.5px; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); text-underline-offset: 4px; }
.d-home-ground .sm:hover::after { content: "Sample"; position: absolute; left: 0; top: calc(100% + 4px); z-index: 4; padding: 2px 7px; border-radius: var(--r-s); background: var(--dusk); color: var(--cream); font: 600 12px/1.4 var(--text); white-space: nowrap; pointer-events: none; }
.d-home-ground.is-chips .sm { display: none !important; }
.d-home-ground:not(.is-chips) .chip { display: none; }

/* ---------- About me, on paper, straight on from the cards ---------- */
/* the paper sections set their own ground: on a phone the painter colors the page behind the hero */
.d-home-ground #person, .d-home-ground #reviews, .d-home-ground #questions { background: var(--paper); }
.d-home-ground #person { padding-top: 32px; }
.d-home-ground .person { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: center; }
.d-home-ground .portrait { position: relative; aspect-ratio: 4/5; border-radius: var(--r-l); overflow: hidden; background: var(--plum); }
/* the photo's stand-ins (10/7, second pass): a detail of the painting, Mount Pilchuck at dusk, never a figure or the lamp */
.d-home-ground .hr-pt { display: block; width: 100%; height: 100%; text-decoration: none; }
.d-home-ground .hr-pt svg { display: block; width: 100%; height: 100%; }
.d-home-ground .portrait .chip { position: absolute; left: 14px; top: 14px; margin: 0; color: var(--cream); background: rgba(42,30,43,.6); }
.d-home-ground .portrait .sm { display: block; height: 100%; }
.d-home-ground .person-copy { display: grid; gap: 20px; justify-items: start; max-width: 620px; }
.d-home-ground .person-copy > p { margin: 0; font: 400 19px/1.55 var(--text); color: var(--plum); }
.d-home-ground .count { margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; width: 100%; }
.d-home-ground .count > div { border-top: 1px solid var(--rule-d); padding-top: 14px; }
.d-home-ground .count dt { font: 500 22px/1.2 var(--serif); color: var(--dusk); }
.d-home-ground .count dd { margin: 6px 0 0; font: 400 17px/1.5 var(--text); color: var(--plum); }
.d-home-ground .person-copy .creds { font-size: 16px; line-height: 1.55; }
.d-home-ground .creds b { color: var(--dusk); }
.d-home-ground #person .go .arrow, .d-home-ground #questions .go .arrow { color: var(--berry); }

/* ---------- What I do, and what it costs: the one Douglas fir ground ---------- */
.d-home-ground #services { background: var(--fir); color: var(--cream); }
.d-home-ground .rows { display: grid; grid-template-columns: 1fr 1fr; }
.d-home-ground .srow { display: grid; gap: 18px; align-content: start; padding: 0 48px; min-width: 0; }
.d-home-ground .srow:first-child { padding-left: 0; }
.d-home-ground .srow:last-child { padding-right: 0; }
.d-home-ground .srow + .srow { border-left: 1px solid var(--rule-l); }
.d-home-ground .who { margin: 0; font: 500 15px/1.2 var(--sc); letter-spacing: .06em; color: var(--rose); }
.d-home-ground .srow h3 { margin: 6px 0 0; font: 500 32px/1.1 var(--serif); letter-spacing: -.005em; }
.d-home-ground .srow .body { display: grid; gap: 6px; justify-items: start; }
.d-home-ground .srow .body p { margin: 0; font: 400 18px/1.55 var(--text); color: rgba(251,241,225,.9); text-wrap: pretty; }
.d-home-ground #services .go .arrow, .d-home-ground .on-fir .go .arrow { color: var(--lamp); }
.d-home-ground #services .facts, .d-home-ground section.on-fir .srow .facts { border-top: 1px solid var(--rule-l); padding-top: 18px; }
.d-home-ground #services .facts dt, .d-home-ground .on-fir .facts dt { color: var(--rose); }
.d-home-ground #services .chip, .d-home-ground .on-fir .chip, .d-home-ground #book .chip, .d-home-ground .foot .chip { color: var(--lamp); }
.d-home-ground .legal { margin: 6px 0 0; padding: 16px 18px; border: 1px solid var(--rule-l); border-radius: var(--r-m); font: 400 16px/1.5 var(--text); color: var(--cream); }
.d-home-ground .legal b { font-weight: 700; }
/* the plain line to the sales pages (Services; Home's is the third card) */
.d-home-ground .sales-door { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--rule-l); display: flex; flex-wrap: wrap; gap: 0 14px; align-items: center; font: 400 18px/1.4 var(--text); }
.d-home-ground .sales-door b { font: italic 500 21px/1.3 var(--serif); }

/* ---------- Reviews and Questions: paper, one reading stretch, a hairline between ---------- */
.d-home-ground #reviews { padding-bottom: 64px; }
.d-home-ground #reviews .head2 p { color: var(--plum); }
.d-home-ground .revs { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.d-home-ground .rev { display: grid; gap: 16px; align-content: start; }
.d-home-ground .rev blockquote { margin: 0; font: italic 400 24px/1.45 var(--serif); color: var(--dusk); text-wrap: pretty; }
.d-home-ground .rev small { font: 400 16px/1.4 var(--text); color: var(--plum); }
.d-home-ground .rev small b { color: var(--dusk); }
.d-home-ground #questions { padding-top: 64px; }
.d-home-ground .faq-wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 72px; border-top: 1px solid var(--rule-d); padding-top: 56px; }
.d-home-ground .faq details { border-bottom: 1px solid var(--rule-d); }
.d-home-ground .faq details:first-child { border-top: 1px solid var(--rule-d); }
.d-home-ground .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; padding: 16px 0; font: 500 22px/1.3 var(--serif); }
.d-home-ground .faq summary::-webkit-details-marker { display: none; }
.d-home-ground .faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--heather),var(--heather)) center/14px 2px no-repeat, linear-gradient(var(--heather),var(--heather)) center/2px 14px no-repeat; }
.d-home-ground .faq details[open] summary::after { background: linear-gradient(var(--heather),var(--heather)) center/14px 2px no-repeat; }
.d-home-ground .ans p { margin: 0 0 20px; max-width: 62ch; font: 400 18px/1.55 var(--text); color: var(--plum); }

/* ---------- Where I work (Notary): the county drawn on paper, her towns as choices ---------- */
.d-home-ground #area { background: var(--paper); }
.d-home-ground #area .head2 p { color: var(--plum); }
.d-home-ground .area { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.d-home-ground .area-map { margin: 0; display: grid; gap: 12px; }
.d-home-ground .area-chart { display: block; width: 100%; height: auto; border-radius: var(--r-l); background: #c9c0d7; box-shadow: inset 0 0 0 1px var(--rule-d); }
.d-home-ground .area-chart .sea { fill: #c9c0d7; }
.d-home-ground .area-chart .land { fill: url(#ar-hatch); }
.d-home-ground .area-chart .hatch-bg { fill: #f1e3cb; }
.d-home-ground .area-chart .hatch { stroke: var(--dusk); stroke-opacity: .07; stroke-width: 1.2; }
.d-home-ground .area-chart .coast { fill: none; stroke: #9389ad; stroke-width: 2; stroke-linejoin: round; }
.d-home-ground .area-chart .contour { fill: none; stroke: var(--heather); stroke-opacity: .14; stroke-width: 1.2; }
.d-home-ground .area-chart .river { fill: none; stroke: #9389ad; stroke-opacity: .8; stroke-width: 1.8; }
.d-home-ground .area-chart .road { fill: none; stroke: var(--heather); stroke-opacity: .32; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.d-home-ground .area-chart .road.is-main { stroke-opacity: .5; stroke-width: 3.2; }
.d-home-ground .area-chart .route { font: 700 22px/1 var(--text); letter-spacing: .06em; fill: var(--heather); paint-order: stroke; stroke: #f1e3cb; stroke-width: 6px; stroke-linejoin: round; }
.d-home-ground .area-chart .sounding { font: italic 400 18px/1 var(--serif); fill: #5f5679; fill-opacity: .7; text-anchor: middle; }
.d-home-ground .area-chart .water { font: italic 400 28px/1 var(--serif); fill: #4c4468; letter-spacing: .02em; text-anchor: middle; }
.d-home-ground .area-chart .scale path { stroke: var(--plum); stroke-width: 2; fill: none; }
.d-home-ground .area-chart .scale text { font: 500 24px/1 var(--text); fill: var(--plum); text-anchor: middle; paint-order: stroke; stroke: #f1e3cb; stroke-width: 8px; stroke-linejoin: round; }
.d-home-ground .area-chart .area-her { fill: var(--berry); fill-opacity: .07; stroke: var(--berry); stroke-opacity: .6; stroke-width: 2.5; stroke-dasharray: 12 10; }
.d-home-ground .area-chart .town { cursor: pointer; outline: none; }
.d-home-ground .area-chart .town .hit { fill: transparent; }
.d-home-ground .area-chart .town .dot { fill: var(--plum); }
.d-home-ground .area-chart .town:not(.is-named) .dot { fill: #f1e3cb; stroke: var(--plum); stroke-width: 3; }
/* the town names draw at 14.4 px on screen, over the 14 px floor (Josh, 10/8: enlarge) */
.d-home-ground .area-chart .town text { font: 500 35px/1 var(--text); fill: var(--dusk); paint-order: stroke; stroke: #f1e3cb; stroke-width: 10px; stroke-linejoin: round; transition: fill var(--d1); }
.d-home-ground .area-chart .town:hover text, .d-home-ground .area-chart .town[aria-pressed="true"] text { fill: var(--berry); }
.d-home-ground .area-chart .town[aria-pressed="true"] .dot { fill: var(--berry); stroke: var(--berry); }
.d-home-ground .area-chart .town.is-home .dot { fill: var(--lamp); stroke: var(--dusk); stroke-width: 3; }
.d-home-ground .area-chart .town:focus-visible .hit { stroke: var(--dusk); stroke-width: 3; }
.d-home-ground .area-chart .reach-line { stroke: var(--berry); stroke-width: 3; stroke-dasharray: 1 9; stroke-linecap: round; }
.d-home-ground .area-key { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 400 15px/1.4 var(--text); color: var(--plum); }
.d-home-ground .area-key span { display: inline-flex; align-items: center; gap: 8px; text-wrap: pretty; }
.d-home-ground .area-key i { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--plum); }
.d-home-ground .area-key i.open { background: none; border: 2px solid var(--plum); }
.d-home-ground .area-key i.zone { width: 22px; height: 14px; border-radius: var(--r-s); background: color-mix(in srgb, var(--berry) 7%, #f1e3cb); border: 1.5px dashed color-mix(in srgb, var(--berry) 60%, transparent); }
.d-home-ground .towns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.d-home-ground .town-b { display: flex; align-items: center; gap: 10px; font: 600 16px/1.25 var(--text); text-align: left; padding: 0 14px; min-height: 48px; border-radius: var(--r-l); border: 1.5px solid rgba(42,30,43,.32); background: var(--field); color: var(--dusk); cursor: pointer; transition: background-color var(--d2); }
.d-home-ground .town-b::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.d-home-ground .town-b.is-open::before { background: none; border: 1.5px solid currentColor; }
.d-home-ground .town-b:hover { background: #fff; }
.d-home-ground .town-b[aria-pressed="true"] { background: var(--dusk); border-color: var(--dusk); color: var(--cream); }
.d-home-ground .town-b:focus-visible { outline: 3px solid var(--dusk); outline-offset: 2px; }
.d-home-ground .town-card { display: grid; gap: 12px; margin-top: 28px; }
.d-home-ground .town-card h3 { margin: 0; font: 500 28px/1.15 var(--serif); }

/* ---------- a service page's body: one row per question, the heading on the left as in Questions; what it costs on
   Douglas fir, the band Home's rows sit on ---------- */
.d-home-ground .blks { display: grid; }
.d-home-ground .blk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 48px; border-top: 1px solid var(--rule-d); }
.d-home-ground .blk:first-child { border-top: 0; padding-top: 0; }
.d-home-ground .blk:last-child { padding-bottom: 0; }
.d-home-ground .sec:has(> .blks) { padding-bottom: 40px; }
.d-home-ground #questions + .others { padding-top: 24px; }
.d-home-ground .blk-h h2 { margin: 0; font: 500 32px/1.1 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.d-home-ground .blk-h p { margin: 12px 0 0; font: 400 17px/1.5 var(--text); color: var(--plum); }
.d-home-ground .blk-b { display: grid; gap: 24px; align-content: start; min-width: 0; }
.d-home-ground .blk-b > p, .d-home-ground .fee-main > p { margin: 0; max-width: 62ch; font: 400 18px/1.55 var(--text); color: var(--plum); text-wrap: pretty; }
/* The notary statement runs the block's full width, as the one under the cards does (VS-7, VS-11). */
.d-home-ground .blk-b > .legal { max-width: none; }
.d-home-ground .blk.on-fir { margin-inline: -56px; padding: 64px 56px; background: var(--fir); color: var(--cream); border-top: 0; }
.d-home-ground .blk.on-fir + .blk { border-top: 0; }
/* a page whose body opens on fir starts it right under the painted strip */
.d-home-ground .blk.on-fir:first-child { margin-top: -88px; }
.d-home-ground .blk.on-fir .blk-h p, .d-home-ground .blk.on-fir .blk-b > p, .d-home-ground .blk.on-fir .fee-main > p { color: rgba(251,241,225,.9); }
.d-home-ground .row-btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* what's included: the item in the serif, its line under it, a hairline between */
.d-home-ground .check { margin: 0; padding: 0; list-style: none; }
.d-home-ground .check li { display: grid; grid-template-columns: 26px minmax(0, 1fr); padding-block: 14px; border-top: 1px solid var(--rule-d); }
.d-home-ground .check li:last-child { border-bottom: 1px solid var(--rule-d); }
.d-home-ground .check li::before { content: ""; width: 12px; height: 7px; margin-top: 9px; border: solid var(--heather); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.d-home-ground .check li > span { font: 500 21px/1.3 var(--serif); color: var(--dusk); }
.d-home-ground .check small { display: block; margin-top: 4px; font: 400 17px/1.5 var(--text); color: var(--plum); }
.d-home-ground .sides { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.d-home-ground .sides h3 { margin: 0 0 12px; font: 500 15px/1.2 var(--sc); letter-spacing: .06em; color: var(--heather); }
/* a table of real rows (the sample file, the notary fees): small-caps heads, tabular figures */
.d-home-ground .sample-h { margin: 0; font: italic 500 21px/1.35 var(--serif); color: var(--dusk); }
.d-home-ground .tbl { width: 100%; border-collapse: collapse; font: 400 17px/1.45 var(--text); font-variant-numeric: lining-nums tabular-nums; color: var(--plum); }
.d-home-ground .tbl th { padding: 0 20px 10px 0; text-align: left; font: 500 15px/1.2 var(--sc); letter-spacing: .06em; color: var(--heather); border-bottom: 1px solid var(--dusk); }
.d-home-ground .tbl td { padding: 12px 20px 12px 0; vertical-align: top; border-bottom: 1px solid var(--rule-d); }
.d-home-ground .tbl td:first-child { font-weight: 700; color: var(--dusk); }
.d-home-ground .file-tbl td:first-child, .d-home-ground .file-tbl td:last-child { white-space: nowrap; }
.d-home-ground .tbl th:last-child, .d-home-ground .tbl td:last-child { padding-right: 0; }
.d-home-ground .tbl .num { text-align: right; white-space: nowrap; }
.d-home-ground .tbl .ct { display: none; }
.d-home-ground .blk-b > .hint { margin: 0; max-width: 62ch; font: 400 16px/1.5 var(--text); color: var(--plum); }
/* Coordination's timeline: mutual acceptance to closing across the page, stops evenly spaced on one line; the closing stop in berry.
   Below 860 it stacks as a vertical list on the same line (the container rules below). */
.d-home-ground .tl { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, .55fr); position: relative; }
.d-home-ground .tl.tl-7 { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, .85fr); }
.d-home-ground .tl::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--rule-d); }
.d-home-ground .tl li { position: relative; display: grid; gap: 4px; align-content: start; padding: 28px 16px 0 0; min-width: 0; }
.d-home-ground .tl li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--heather); }
.d-home-ground .tl li:last-child { padding-right: 0; text-align: right; }
.d-home-ground .tl li:last-child::before { left: auto; right: 0; background: var(--berry); box-shadow: none; }
.d-home-ground .tl-d { font: 500 15px/1.2 var(--sc); letter-spacing: .06em; color: var(--heather); }
.d-home-ground .tl b { font: 700 17px/1.3 var(--text); color: var(--dusk); font-variant-numeric: lining-nums tabular-nums; }
.d-home-ground .tl-w { font: 400 17px/1.45 var(--text); color: var(--plum); text-wrap: pretty; }
.d-home-ground .blk .legal { margin: 0; color: var(--dusk); border-color: var(--rule-d); }

/* Heading on top (Josh, 10/8): a block's heading and its line sit above it, and the body takes the full width, so no
   left column stands empty. The check list and the fact rows run in two columns on a wide screen. */
.d-home-ground .blk-h { max-width: 640px; }
.d-home-ground .blk-b > .check { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-bottom: 1px solid var(--rule-d); }
.d-home-ground .blk-b > .check li:last-child { border-bottom: 0; }
.d-home-ground .blk-b > .facts { display: block; columns: 2; column-gap: 48px; }
.d-home-ground .blk-b > .facts > div { break-inside: avoid; margin-bottom: 12px; }

/* a fold: a section kept one click away (Coordination's sample file) */
.d-home-ground .fold summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; padding: 4px 0; }
.d-home-ground .fold summary::-webkit-details-marker { display: none; }
.d-home-ground .fold summary > span { display: grid; gap: 4px; font: 500 24px/1.2 var(--serif); color: var(--dusk); }
.d-home-ground .fold summary small { font: 400 17px/1.5 var(--text); color: var(--plum); }
.d-home-ground .fold summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--heather),var(--heather)) center/14px 2px no-repeat, linear-gradient(var(--heather),var(--heather)) center/2px 14px no-repeat; }
.d-home-ground .fold[open] summary::after { background: linear-gradient(var(--heather),var(--heather)) center/14px 2px no-repeat; }
.d-home-ground .fold-b { margin-top: 24px; }

/* Coordination's three services: a card each, who it's for in small caps, what it covers, and admin's limits */
.d-home-ground .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.d-home-ground .tier { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 20px 22px 22px; border: 0; border-radius: var(--r-l); background: var(--field); box-shadow: inset 0 0 0 1.5px rgba(42,30,43,.32); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color var(--d2) var(--ease); }
.d-home-ground .tier:hover { background: #fff; }
.d-home-ground .tier-t { font: 500 24px/1.15 var(--serif); color: var(--dusk); }
/* who it's for, as a tag so it reads at a glance (Josh, 10/8) */
.d-home-ground .tier-who { margin: 0 0 4px; padding: 4px 10px; border-radius: var(--r-s); background: rgba(107,74,90,.12); font: 500 15px/1.3 var(--sc); letter-spacing: .06em; color: var(--dusk); }
/* the price, where an agent looks first (Josh, 10/8) */
.d-home-ground .tier-fee { font: 700 18px/1.3 var(--text); color: var(--dusk); font-variant-numeric: lining-nums tabular-nums; }
.d-home-ground .tier-d { font: 400 17px/1.5 var(--text); color: var(--plum); text-wrap: pretty; }
.d-home-ground .tier-not { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rule-d); font: 400 15px/1.5 var(--text); color: var(--plum); text-wrap: pretty; }
/* the picked service: filled, as the form's picked choice is */
.d-home-ground .tier[aria-pressed="true"] { background: var(--dusk); box-shadow: none; }
.d-home-ground .tier[aria-pressed="true"] .tier-t, .d-home-ground .tier[aria-pressed="true"] .tier-fee { color: var(--cream); }
.d-home-ground .tier[aria-pressed="true"] .tier-d, .d-home-ground .tier[aria-pressed="true"] .tier-not { color: var(--rose); }
.d-home-ground .tier[aria-pressed="true"] .tier-not { border-top-color: var(--rule-l); }
.d-home-ground .tier[aria-pressed="true"] .tier-who { background: rgba(251,241,225,.14); color: var(--cream); }
.d-home-ground .tier[aria-pressed="true"] .chip { color: var(--lamp); }

/* the estimator and the fee table share What it costs on fir: the table in the fir's own light, the estimator a paper
   card you use */
.d-home-ground .fee-pair { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.d-home-ground .fee-main { display: grid; gap: 24px; align-content: start; min-width: 0; }
.d-home-ground .on-fir .tbl { color: rgba(251,241,225,.9); }
.d-home-ground .on-fir .tbl th { color: var(--rose); border-bottom-color: var(--rule-l); }
.d-home-ground .on-fir .tbl td { border-bottom-color: var(--rule-l); }
.d-home-ground .on-fir .tbl td:first-child { font-weight: 400; color: var(--cream); }
.d-home-ground .on-fir .tbl .num { font-weight: 700; color: var(--cream); }
.d-home-ground .est { display: grid; gap: 10px; padding: 18px 20px 16px; border-radius: var(--r-l); background: var(--field); color: var(--dusk); box-shadow: 0 22px 40px -18px rgba(0,0,0,.55); }
.d-home-ground .est-h { margin: 0 0 2px; font: 500 22px/1.2 var(--serif); }
.d-home-ground .est-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 16px/1.3 var(--text); }
.d-home-ground .stepper { display: inline-grid; grid-template-columns: 44px 36px 44px; align-items: center; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--rule-d); background: var(--paper); }
.d-home-ground .stepper button { height: 44px; padding: 0 0 2px; border: 0; border-radius: var(--r-m); background: none; font: 500 20px/1 var(--text); color: var(--dusk); cursor: pointer; transition: background var(--d1) ease-out; }
.d-home-ground .stepper button:hover { background: rgba(42,30,43,.06); }
.d-home-ground .stepper button:disabled { opacity: .4; cursor: default; background: none; }
.d-home-ground .stepper output { text-align: center; font: 700 17px/1 var(--text); font-variant-numeric: tabular-nums; }
.d-home-ground .est-out { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-d); font: 400 16px/1.5 var(--text); color: var(--plum); text-wrap: pretty; }
.d-home-ground .est-out b { color: var(--dusk); }
.d-home-ground .est .go .arrow { color: var(--berry); }

/* ---------- About: her story, the name, her licenses on fir, then the three services ---------- */
.d-home-ground #story { background: var(--paper); }
.d-home-ground .story { display: grid; gap: 18px; }
.d-home-ground .story p { margin: 0; max-width: 34em; font: 400 19px/1.6 var(--text); color: var(--plum); }
.d-home-ground .story.sm p { text-decoration: underline dotted 1.5px; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); text-underline-offset: 4px; }
.d-home-ground .bio { display: grid; gap: 18px; max-width: 34em; padding: 22px 22px 26px; border: 1px dashed var(--heather); border-radius: var(--r-m); }
.d-home-ground .bio .chip { width: fit-content; margin: 0 0 4px; }
.d-home-ground .bio i { display: block; height: 10px; border-radius: var(--r-s); background: rgba(107,74,90,.18); }
.d-home-ground .bio b { display: block; height: 8px; }
.d-home-ground:not(.is-chips) .bio { display: none; }
.d-home-ground #name { background: var(--paper); padding-top: 0; }
.d-home-ground .name { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: center; border-top: 1px solid var(--rule-d); padding-top: 72px; }
.d-home-ground .mk-name { justify-self: center; width: 200px; height: 200px; }
.d-home-ground .name-copy { display: grid; gap: 20px; }
.d-home-ground .name-copy p { margin: 0; max-width: 32em; font: italic 400 24px/1.45 var(--serif); color: var(--dusk); }
.d-home-ground section.on-fir { background: var(--fir); color: var(--cream); }
.d-home-ground section.on-fir .head2 p { color: rgba(251,241,225,.9); }

/* ---------- Pay: the facts, and the email as a mail app shows it ---------- */
.d-home-ground #paying { background: var(--paper); }
.d-home-ground .pay { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: start; }
.d-home-ground .pay-facts { gap: 16px; }
.d-home-ground .recno { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-size: 1em; white-space: nowrap; }
.d-home-ground .mail-fig { margin: 0; display: grid; gap: 12px; }
.d-home-ground .mail-fig figcaption { font: 400 15px/1.45 var(--text); color: var(--plum); }
.d-home-ground .mail { overflow: hidden; border-radius: var(--r-l); background: var(--field); font: 400 16px/1.55 var(--text); color: var(--dusk); box-shadow: 0 1px 0 rgba(42,30,43,.08), 0 22px 40px -18px rgba(28,22,38,.45); }
.d-home-ground .mail-h { display: grid; gap: 4px; padding: 16px 20px 14px; border-bottom: 1px solid var(--rule-d); }
.d-home-ground .mail-h b { font: 700 17px/1.35 var(--text); }
.d-home-ground .mail-from { font-size: 15px; color: var(--plum); }
.d-home-ground .mail-b { display: grid; gap: 12px; padding: 18px 20px 20px; }
.d-home-ground .mail-b p { margin: 0; }
.d-home-ground .mail-line { padding-left: 14px; border-left: 2px solid var(--rule-d); }
.d-home-ground .mail-link { color: var(--shadow); text-decoration: underline; text-underline-offset: 2px; }
.d-home-ground .mail-att { display: flex; align-items: center; gap: 10px; width: fit-content; padding: 10px 12px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--rule-d); font-size: 16px; color: var(--plum); }

/* ---------- Privacy: one row per question, as the service pages' blocks ---------- */
.d-home-ground #policy { background: var(--paper); }
/* two questions side by side on a wide screen, so the page uses its width (Josh, 10/8) */
.d-home-ground .doc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; }
.d-home-ground .doc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 32px; border-top: 1px solid var(--rule-d); }
.d-home-ground .doc-row:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.d-home-ground .doc-row h2 { margin: 0; font: 500 26px/1.15 var(--serif); }
.d-home-ground .doc-row > div { display: grid; gap: 12px; }
.d-home-ground .doc-row p { margin: 0; max-width: 62ch; font: 400 18px/1.55 var(--text); color: var(--plum); }
.d-home-ground .updated { margin: 8px 0 0; padding-top: 24px; border-top: 1px solid var(--rule-d); font: 400 15px/1.4 var(--text); color: var(--plum); }

/* ---------- Not found: the pages as a list of big links ---------- */
.d-home-ground #lost { background: var(--paper); }
.d-home-ground .lost { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.d-home-ground .lost-links { display: grid; }
.d-home-ground .lost-links a { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--rule-d); font: 500 26px/1.15 var(--serif); text-decoration: none; }
.d-home-ground .lost-links a:first-child { border-top: 1px solid var(--rule-d); }
.d-home-ground .lost-links .arrow { font: 400 20px/1 var(--text); color: var(--berry); transition: transform var(--d2) ease-out; }
.d-home-ground .lost-links a:hover .arrow { transform: translateX(4px); }

/* ---------- a client's status link (later, W8): the sale's steps on fir, the step you're on lit ---------- */
.d-home-ground .st-steps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.d-home-ground .st-steps li { display: grid; place-content: center; gap: 4px; min-height: 76px; padding: 8px 6px; border-radius: var(--r-m); text-align: center; font: 500 15px/1.25 var(--text); color: var(--rose); box-shadow: inset 0 0 0 1px var(--rule-l); }
.d-home-ground .st-steps li small { font-size: 15px; font-weight: 400; color: var(--rose); }
.d-home-ground .st-steps li.is-done { color: var(--cream); background: rgba(251,241,225,.06); }
.d-home-ground .st-steps li.is-now { background: var(--lamp); box-shadow: none; color: var(--dusk); font-weight: 700; }
.d-home-ground .st-steps li.is-now small { color: var(--dusk); }
.d-home-ground .st-facts { margin-top: 36px; max-width: 720px; }

/* ---------- Request a time: Port Gardner, the contact panel beside the form on paper ---------- */
.d-home-ground #book { background: var(--port); color: var(--cream); }
.d-home-ground #book .head2 p { color: var(--rose); }
.d-home-ground .book { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 56px; align-items: start; }
/* on a wide screen the referral line sits right under the panel, beside the form, however tall the form grows */
.d-home-ground .book > .card { grid-column: 2; grid-row: 1 / span 2; }
.d-home-ground .reach { display: grid; gap: 20px; padding-top: 8px; }
.d-home-ground .reach-h { display: flex; align-items: center; gap: 14px; }
.d-home-ground .reach-h h3 { margin: 0; font: 500 26px/1.15 var(--serif); }
.d-home-ground .face { display: block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1.5px var(--rule-l); background: var(--plum); }
.d-home-ground .top .face { width: 64px; height: 64px; box-shadow: 0 0 0 1.5px var(--rule-d); }
.d-home-ground .face .sm, .d-home-ground .face svg { display: block; width: 100%; height: 100%; }
/* In the chips state the face says what fills it, as About's portrait does (VS-15). */
.d-home-ground.is-chips .face .chip { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 4px; border: 0; border-radius: 50%; font: 600 10px/1.15 var(--text); text-align: center; color: var(--cream); }
.d-home-ground #book .facts dt { color: var(--rose); }
.d-home-ground #book .facts dd { color: var(--cream); }
.d-home-ground .soon { margin: 0; padding-top: 16px; border-top: 1px solid var(--rule-l); font: 400 17px/1.5 var(--text); }
.d-home-ground .refer { grid-column: 1; margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--rule-l); font: 400 17px/1.5 var(--text); color: var(--rose); }
.d-home-ground .refer b { color: var(--cream); }
/* allow box: a form you fill. */
.d-home-ground .card { background: var(--paper); color: var(--dusk); border-radius: var(--r-l); padding: 32px 36px; box-shadow: 0 24px 48px -28px rgba(10,20,24,.7); }
.d-home-ground .card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.d-home-ground .card legend.h { padding: 0; margin: 0 0 16px; font: 500 28px/1.15 var(--serif); }
.d-home-ground .kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.d-home-ground .kind, .d-home-ground .kind-go { position: relative; display: grid; gap: 2px; align-content: center; text-align: left; min-height: 64px; padding: 12px 44px 12px 16px; border-radius: var(--r-l); font: 700 18px/1.2 var(--text); color: var(--dusk); text-decoration: none; cursor: pointer; transition: background-color var(--d2); }
.d-home-ground .kind { background: var(--field); border: 1.5px solid rgba(42,30,43,.32); }
.d-home-ground .kind:hover { background: #fff; }
.d-home-ground .kind small, .d-home-ground .kind-go small { font: 400 15px/1.3 var(--text); color: var(--plum); text-wrap: pretty; }
.d-home-ground .kind[aria-pressed="true"] { background: var(--dusk); border-color: var(--dusk); color: var(--cream); }
.d-home-ground .kind[aria-pressed="true"] small { color: var(--rose); }
.d-home-ground .kind[aria-pressed="true"]::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 13px; margin-top: -9px; border-right: 2.5px solid var(--lamp); border-bottom: 2.5px solid var(--lamp); transform: rotate(45deg); }
/* the one link among the choices: it leaves for the sales pages, so it isn't filled like a choice */
.d-home-ground .kind-go { background: transparent; border: 1.5px solid rgba(42,30,43,.18); font: italic 500 19px/1.2 var(--serif); }
.d-home-ground .kind-go small { font-style: normal; }
.d-home-ground .kind-go::after { content: "→"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 400 20px/1 var(--text); color: var(--heather); font-style: normal; }
.d-home-ground .kind-go:hover { background: rgba(42,30,43,.05); }
.d-home-ground .details { margin-top: 26px; }
.d-home-ground .istep { margin: 0 0 14px; font: 500 15px/1.2 var(--sc); letter-spacing: .06em; color: var(--heather); }
.d-home-ground .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: start; }
.d-home-ground .fields label { display: grid; gap: 6px; font: 600 16px/1.3 var(--text); color: var(--dusk); min-width: 0; }
.d-home-ground .fields .wide, .d-home-ground .fields > .hint { grid-column: 1/-1; }
/* a reply choice and what it reveals share one cell, so the reveal sits right under it (the 10/6 review) */
.d-home-ground .pref-cell { display: grid; gap: 14px; align-content: start; min-width: 0; }
.d-home-ground .fields input, .d-home-ground .fields select, .d-home-ground .fields textarea { min-height: 48px; padding: 10px 12px; border-radius: var(--r-m); border: 1.5px solid rgba(42,30,43,.42); background: var(--field); font: 400 17px/1.3 var(--text); color: var(--dusk); width: 100%; }
/* a dropdown drawn like the text fields, with a chevron in the field's ink; forced colors keeps the system's own */
.d-home-ground .fields select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--dusk) 50%), linear-gradient(135deg, var(--dusk) 50%, transparent 50%); background-position: right 20px center, right 14px center; background-size: 6px 6px; background-repeat: no-repeat; }
@media (forced-colors: active) { .d-home-ground .fields select { appearance: auto; background-image: none; } }
.d-home-ground .fields select:invalid, .d-home-ground .fields select:has(option[value=""]:checked) { color: var(--heather); }
.d-home-ground .fields textarea { min-height: 112px; resize: vertical; }
.d-home-ground .fields input:focus-visible, .d-home-ground .fields select:focus-visible, .d-home-ground .fields textarea:focus-visible { outline: 3px solid var(--dusk); outline-offset: 1px; }
.d-home-ground .card [aria-invalid="true"] { border-color: var(--berry); box-shadow: inset 0 0 0 1px var(--berry); }
.d-home-ground .err { font: 700 15px/1.35 var(--text); color: var(--berry); }
.d-home-ground .opt { font: 400 14px/1 var(--text); color: var(--heather); margin-left: 6px; }
.d-home-ground .hint { margin: 0; font: 400 15px/1.5 var(--text); color: var(--plum); text-wrap: pretty; }
.d-home-ground .send-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.d-home-ground .send-note { margin: 14px 0 0; font: 400 16px/1.5 var(--text); color: var(--dusk); }
.d-home-ground .send-note b { color: var(--berry); }
.d-home-ground .req-fine { margin: 12px 0 0; font: 400 15px/1.5 var(--text); color: var(--plum); }
.d-home-ground .req-fine + .req-fine { margin-top: 4px; }
.d-home-ground .req-fine .inl { color: var(--dusk); }
.d-home-ground .preview-note { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-m); background: #efe2f0; color: var(--dusk); font: 600 15px/1.4 var(--text); }
.d-home-ground .done { display: grid; gap: 14px; justify-items: start; }
.d-home-ground .done:focus { outline: none; }
.d-home-ground .done h3 { margin: 0; font: 500 30px/1.15 var(--serif); }
.d-home-ground #book .done .facts dt { color: var(--heather); }
.d-home-ground #book .done .facts dd { color: var(--dusk); }
.d-home-ground .done > p { margin: 0; font: 400 18px/1.5 var(--text); color: var(--plum); }
.d-home-ground .done .go { color: var(--dusk); background: none; border: 0; padding: 0; cursor: pointer; }
.d-home-ground .done .go .arrow { color: var(--berry); }

/* ---------- the shore at dusk (no lamp, so it's lit once a page), then the footer on Ink ---------- */
.d-home-ground .hr-band { display: block; height: 150px; overflow: hidden; background: var(--ink); }
.d-home-ground .hr-band svg { display: block; width: 100%; height: auto; }
.d-home-ground .foot { background: var(--ink); color: var(--cream); }
.d-home-ground .foot > .wrap { padding-top: 44px; }
/* One band (draft 10): the brand and how to reach her on top, the pages as one row between hairlines, then the fine
   print on the same ink. */
.d-home-ground .foot-main { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand reach" "links links"; gap: 32px 48px; align-items: center; }
.d-home-ground .foot-brand { grid-area: brand; display: flex; gap: 18px; align-items: center; }
.d-home-ground .foot-brand > div > b { display: block; font: 600 29px/1 var(--serif); letter-spacing: -.005em; }
.d-home-ground .mk-foot { width: 64px; height: 64px; }
.d-home-ground .foot-firm { margin: 10px 0 0; font: 400 15px/1.4 var(--text); color: var(--rose); }
.d-home-ground .foot-firm b { display: block; color: var(--cream); font-weight: 700; }
/* the firm's own logo and HUD's Equal Housing Opportunity logo, as supplied: never recolored, redrawn or restyled */
.d-home-ground .foot-npp { display: block; width: 112px; }
/* the fine print's left column: the statements, then the firm's logo, Equal Housing and the copyright on one row */
.d-home-ground .fine > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; align-content: start; }
.d-home-ground .fine > div:first-child > p { flex: 1 0 100%; }
.d-home-ground .fine > div:first-child > .foot-npp, .d-home-ground .fine > div:first-child > .eho, .d-home-ground .fine > div:first-child > p:last-child { order: 2; flex: none; margin: 10px 0 0; }
.d-home-ground .foot-npp img { display: block; width: 100%; height: auto; }
.d-home-ground .eho img { display: block; width: 44px; height: auto; }
.d-home-ground .foot a:focus-visible { outline-color: var(--lamp); }
.d-home-ground .foot-reach { grid-area: reach; justify-self: end; display: grid; gap: 4px; text-align: right; font: 400 16px/1.5 var(--text); color: var(--cream); }
.d-home-ground .foot-reach p { margin: 0; }
.d-home-ground .foot-reach .fl { white-space: nowrap; }
.d-home-ground .foot-reach .fl + .fl::before { content: "·"; margin: 0 .6em; color: var(--rose); }
.d-home-ground .foot-reach a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.d-home-ground .foot-links { grid-area: links; display: flex; flex-wrap: wrap; gap: 0 28px; padding-block: 6px; border-block: 1px solid var(--rule-l); }
.d-home-ground .foot-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font: 500 16px/1.2 var(--text); color: var(--cream); text-decoration: none; }
.d-home-ground .foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.d-home-ground .fine { margin: 28px 0 0; padding: 0 0 32px; background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font: 400 15px/1.5 var(--text); color: var(--cream); }
.d-home-ground .fine p { margin: 0 0 6px; }
.d-home-ground .fine a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================================================
   Between a phone and 1200 (NV-7): the one-row header needs about 1195 px, so here it takes two rows. The brand, the
   firm's lines beside it and her number on the first; the links and Request a time on the second. Each row needs
   about 575 px, so nothing leaves the page from 641 up, and the firm stays beside the brand on every page.
   The header is 112 px tall here, not 84: Home's overlap, the hero's words and the scroll margin follow it.
   ====================================================================================== */
@container (min-width: 641px) and (max-width: 1199px) {
  .d-home-ground .head-in { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: 56px 48px; grid-template-areas: "wm firm . call" "nav nav nav btn"; align-items: center; gap: 0 24px; height: auto; padding: 4px 32px; }
  .d-home-ground .head.is-stuck .head-in { height: auto; }
  .d-home-ground .wm { grid-area: wm; }
  .d-home-ground .firm { grid-area: firm; white-space: nowrap; }
  .d-home-ground .nav { grid-area: nav; margin-left: -11px; }
  .d-home-ground .call, .d-home-ground .head.cta-wait .call { grid-area: call; margin-left: 0; transform: none; }
  .d-home-ground .head-cta { grid-area: btn; justify-self: end; }
  .d-home-ground .page[data-path="/"] .head { margin-bottom: -112px; }
  .d-home-ground .hr-copy { top: 130px; }
  .d-home-ground [id], .d-home-ground a, .d-home-ground button, .d-home-ground input, .d-home-ground select, .d-home-ground textarea, .d-home-ground summary, .d-home-ground [tabindex] { scroll-margin-top: 124px; }
  .d-home-ground .tiers { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* the fee table and its estimator stack, as on a phone */
  .d-home-ground .fee-pair { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .d-home-ground .fee-pair .est { max-width: 400px; }
  /* the request form takes the full width under its contact lines: beside them its card is 292 px wide at 800 and its choices spill out */
  .d-home-ground .book { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 32px; }
  .d-home-ground .book > .card { grid-column: auto; grid-row: auto; }
  .d-home-ground .file-tbl td:last-child { white-space: normal; }
  /* the map takes the full width, so its town names stay readable (14 px floor) */
  .d-home-ground .area { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .d-home-ground .area-map { max-width: 640px; }
  /* three doors side by side leave a title about 110 px, so the window sits above the words */
  .d-home-ground .doors:has(> :nth-child(3)) .door { grid-template-columns: minmax(0, 1fr); row-gap: 12px; align-content: start; align-items: start; }
}

/* ======================================================================================
   A phone (the page 640 px wide or less): the same parts, one column.
   ====================================================================================== */
@container (max-width: 640px) {
  .d-home-ground .head-in { height: auto; flex-wrap: wrap; gap: 0 10px; padding: 10px 16px 2px; }
  .d-home-ground .head.is-stuck .head-in { height: auto; }
  .d-home-ground [id], .d-home-ground a, .d-home-ground button, .d-home-ground input, .d-home-ground select, .d-home-ground textarea, .d-home-ground summary, .d-home-ground [tabindex] { scroll-margin-top: 120px; }
  .d-home-ground .page[data-path="/"] .head { margin-bottom: 0; }
  .d-home-ground .wm-t { font-size: 24px; }
  .d-home-ground .firm, .d-home-ground .head-cta, .d-home-ground .call-l, .d-home-ground .call b, .d-home-ground .call .chip { display: none; }
  .d-home-ground .call { margin-left: auto; min-height: 44px; padding: 0 18px; border-radius: var(--r-m); background: var(--dusk); color: var(--cream); display: inline-flex; flex-direction: row; align-items: center; font: 700 17px/1 var(--text); }
  .d-home-ground .call-s { display: inline; }
  .d-home-ground .nav { order: 9; margin-left: -9px; width: calc(100% + 9px); gap: 0; }
  .d-home-ground .nav a { padding-inline: 9px; }
  .d-home-ground .nav .nav-wide { display: none; }
  .d-home-ground .nav .nav-phone { display: inline-flex; }
  .d-home-ground .nav a[aria-current] { text-underline-offset: 6px; }
  .d-home-ground .id-row { display: block; margin: 0; padding: 4px 0 0; font: 15px/1.4 var(--text); color: var(--plum); }
  .d-home-ground .id-row b { color: var(--dusk); font-weight: 700; margin-right: .4em; }
  .d-home-ground .id-row { padding-inline: 16px; }
  .d-home-ground .top .id-row { padding-inline: 0; }

  /* No positioned box between the painting and the page, so the painter measures the painting's top from the page's
     and colors the page behind the words with its sky down to it; the drift, caption and Pause stack on the painting
     in one grid cell. */
  .d-home-ground .hero { --ov: 40px; position: static; }
  .d-home-ground .hr-stage { position: static; height: auto; overflow: visible; background: none; }
  .d-home-ground .hr-copy { position: static; width: auto; padding: 22px 16px 26px; }
  .d-home-ground .hr-h1 { font-size: 40px; line-height: 1.04; }
  .d-home-ground .hr-lede { font-size: 18px; margin-top: 14px; }
  .d-home-ground .hr-acts { margin-top: 20px; }
  .d-home-ground .hr-acts .btn { flex: 1; padding: 0 12px; }
  .d-home-ground .hr-pic { position: static; display: grid; }
  .d-home-ground .hr-pic > * { grid-area: 1 / 1; }
  .d-home-ground .hr-pic > .d-home-ground-art { position: static; height: auto; }
  .d-home-ground .hr-pic > .hr-drift { position: relative; inset: auto; height: auto; }
  .d-home-ground .hr-cap { position: relative; align-self: end; inset: auto; margin: 0 72px 56px 16px; font-size: 16px; text-shadow: 0 1px 8px rgba(28,33,49,.7); }
  .d-home-ground .pause { position: relative; align-self: end; justify-self: end; inset: auto; margin: 0 12px 56px 0; padding: 0 12px; min-width: 44px; justify-content: center; }
  .d-home-ground .pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .d-home-ground .doors { grid-template-columns: minmax(0, 1fr); margin: -40px 0 0; gap: 12px; padding: 0 16px 28px; background: linear-gradient(transparent 40px, var(--paper) 40px); }
  .d-home-ground .door { column-gap: 14px; padding: 16px; }
  .d-home-ground .others .doors, .d-home-ground .others .doors:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); margin: 20px 0 0; padding: 0; background: none; }
  .d-home-ground .door-win { width: 44px; height: 54px; }
  .d-home-ground .door-tt { font-size: 22px; }

  .d-home-ground .ph { padding-block: 20px 24px; gap: 12px; }
  .d-home-ground .top .ph { min-height: 0; }
  .d-home-ground .pg { font-size: 38px; }
  .d-home-ground .lede { font-size: 18px; }
  .d-home-ground .ph-btn { display: inline-flex; width: 100%; margin-top: 4px; }
  .d-home-ground .top .face { width: 48px; height: 48px; }
  .d-home-ground .top-band { height: 72px; }

  .d-home-ground .wrap { padding-inline: 16px; }
  .d-home-ground .sec { padding-block: 56px; }
  .d-home-ground .sh { font-size: 34px; }
  .d-home-ground .head2 { margin-bottom: 28px; }
  .d-home-ground .head2 p { font-size: 18px; }
  .d-home-ground #person { padding-top: 8px; }
  .d-home-ground .person { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .d-home-ground .portrait { width: 200px; }
  .d-home-ground .person-copy > p { font-size: 18px; }
  .d-home-ground .count { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .d-home-ground .rows { grid-template-columns: minmax(0, 1fr); }
  .d-home-ground .srow { padding: 0; }
  .d-home-ground .srow + .srow { border-left: 0; border-top: 1px solid var(--rule-l); margin-top: 36px; padding-top: 36px; }
  .d-home-ground .srow h3 { font-size: 28px; }
  .d-home-ground .sales-door { display: grid; gap: 0; }
  .d-home-ground .revs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .d-home-ground .blk { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 36px; }
  .d-home-ground .blk-h h2 { font-size: 28px; }
  .d-home-ground .tiers { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .d-home-ground .tier { padding: 16px 18px 18px; }
  .d-home-ground .blk-b > .check { grid-template-columns: minmax(0, 1fr); }
  .d-home-ground .blk-b > .facts { columns: 1; }
  .d-home-ground .blk.on-fir { margin-inline: -16px; padding: 44px 16px; }
  .d-home-ground .blk.on-fir:first-child { margin-top: -56px; }
  .d-home-ground .sides { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .d-home-ground .check li > span { font-size: 20px; }
  .d-home-ground .tbl th:nth-child(3), .d-home-ground .tbl td:nth-child(3) { display: none; }
  .d-home-ground .tbl .ct { display: block; margin-top: 2px; font-size: 15px; }
  .d-home-ground .tbl td { padding-right: 12px; }
  .d-home-ground .sec:has(> .blks) { padding-bottom: 24px; }
  .d-home-ground .row-btns .btn { width: 100%; }
  .d-home-ground .fee-pair { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .d-home-ground .name { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 48px; }
  .d-home-ground .mk-name { justify-self: start; width: 120px; height: 120px; }
  .d-home-ground .name-copy p { font-size: 21px; }
  .d-home-ground .story p { font-size: 18px; }
  .d-home-ground .pay { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .d-home-ground .doc { grid-template-columns: minmax(0, 1fr); }
  .d-home-ground .doc-row:nth-child(2) { border-top: 1px solid var(--rule-d); padding-top: 24px; }
  .d-home-ground .doc-row { gap: 10px; padding-block: 24px; }
  .d-home-ground .doc-row h2 { font-size: 23px; }
  .d-home-ground .lost { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .d-home-ground .lost-links a { font-size: 22px; min-height: 56px; }
  .d-home-ground .st-steps { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .d-home-ground .st-steps li { min-height: 48px; grid-template-columns: minmax(0, 1fr) auto; place-content: center stretch; align-items: center; text-align: left; padding: 8px 14px; }
  .d-home-ground .rev blockquote { font-size: 21px; }
  .d-home-ground #questions { padding-top: 40px; }
  .d-home-ground .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 40px; }
  .d-home-ground .faq summary { font-size: 20px; }
  .d-home-ground .area { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .d-home-ground .area-chart .town text { font-size: 58px; stroke-width: 14px; }
  .d-home-ground .area-chart .water { font-size: 44px; }
  .d-home-ground .area-chart .sounding { font-size: 40px; }
  .d-home-ground .area-chart .scale text { font-size: 44px; stroke-width: 14px; }
  .d-home-ground .area-chart .town .dot { r: 12; }
  .d-home-ground .area-chart .road { stroke-width: 4; }
  .d-home-ground .area-chart .road.is-main { stroke-width: 5.5; }
  .d-home-ground .area-chart .route { font-size: 38px; stroke-width: 10px; }
  .d-home-ground .book { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 32px; }
  .d-home-ground .book > .card { grid-column: auto; grid-row: auto; }
  .d-home-ground .refer { grid-column: auto; margin: 0; padding-top: 0; border-top: 0; }
  .d-home-ground .card { padding: 22px 16px; margin-inline: -4px; }
  .d-home-ground .kinds, .d-home-ground .fields { grid-template-columns: minmax(0, 1fr); }
  .d-home-ground .hr-band { height: 96px; }
  .d-home-ground .foot > .wrap { padding-top: 40px; }
  .d-home-ground .foot-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "reach" "links"; gap: 24px; align-items: start; }
  .d-home-ground .foot-reach { justify-self: start; text-align: left; }
  .d-home-ground .foot-links { gap: 0 20px; }
  .d-home-ground .fine { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 24px; }
}

@container (max-width: 860px) {
  .d-home-ground .tl, .d-home-ground .tl.tl-7 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .d-home-ground .tl::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .d-home-ground .tl li, .d-home-ground .tl li:last-child { padding: 0 0 0 32px; text-align: left; }
  .d-home-ground .tl li:last-child::before { left: 0; right: auto; }
}

/* ---------- the coming soon page (CS1): the one page the domain serves until W7, with no header or footer. The
   painting blurred behind a dusk panel (--cs-wide and --cs-tall: site/art/, drawn by scripts/backdrop.mjs; the board
   splices fall's). The dusk wash over the sky keeps the lamp the brightest thing in the picture (house rule 1). ---------- */
.d-home-ground .cs { display: grid; place-items: start center; padding: 48px 56px; color: var(--cream); background-color: var(--dusk);
  background-image: linear-gradient(to bottom, rgba(42,30,43,.72), rgba(42,30,43,.5) 50%, rgba(42,30,43,0) 80%), var(--cs-wide, none);
  background-size: auto, cover; background-position: 0 0, 12% bottom; background-repeat: no-repeat; }
.d-home-ground .cs-in { width: 100%; max-width: 656px; display: grid; gap: 28px; padding: 48px; background: rgba(42,30,43,.9); border-radius: var(--r-l); box-shadow: 0 22px 40px -16px rgba(28,22,38,.55); }
.d-home-ground .cs-lockup { display: block; width: 260px; height: auto; margin-bottom: 12px; }
.d-home-ground .cs-lockup svg { display: block; width: 100%; height: auto; }
.d-home-ground .cs-h { margin: 0; font: 500 44px/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.d-home-ground .cs-lede { margin: 0; font: 400 19px/1.5 var(--text); color: var(--rose); text-wrap: pretty; }
.d-home-ground .cs-svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-l); }
.d-home-ground .cs-svc li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--rule-l); }
.d-home-ground .cs-svc b { font: 500 25px/1.1 var(--serif); }
.d-home-ground .cs-svc span { font: 400 17px/1.4 var(--text); color: var(--rose); }
.d-home-ground .cs-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; font: 400 17px/1.4 var(--text); }
.d-home-ground .cs a:focus-visible { outline-color: var(--lamp); }
.d-home-ground .cs .legal { margin: 0; }
/* the footer's fine print, alone: one column, no footer band around it */
.d-home-ground .cs .fine { grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; }
@container (max-width: 640px) {
  .d-home-ground .cs { padding: 40px 12px 12px; background-image: linear-gradient(to bottom, rgba(42,30,43,.72), rgba(42,30,43,.5) 50%, rgba(42,30,43,0) 80%), var(--cs-tall, none); }
  .d-home-ground .cs-in { gap: 24px; padding: 28px 16px; }
  .d-home-ground .cs-lockup { width: 220px; margin-bottom: 0; }
  .d-home-ground .cs-h { font-size: 36px; }
}