/* The Marketplace at Canyon Springs. One stylesheet, no inline styles. The look (2026-10-13, csm-design; DESIGN.md has the
   full system and the reasons): basalt and spring water. The building stands a short way from the Snake River Canyon rim,
   whose walls are dark basalt, on Blue Lakes Blvd N, named for the spring-fed lakes below the rim. So: a warm sand ground,
   charcoal ink, a deep green-grey basalt for the dark grounds (utility bar, footer, the primary button) and ONE accent,
   spring water, in three shades: --spring-ink (text on light grounds), --spring (lines only: rules, the mark, the map,
   never text or a control) and --spring-light (text on basalt). The four businesses no longer get a color each: their
   kind is written out. Headings are Bricolage Grotesque at weight 300 to 400 (emphasis from size, never bold); text is
   Figtree. Both are self-hosted woff2 under /assets/fonts/ (CSP font-src 'self'), Latin subsets, preloaded.
   The :root tokens are the palette for every script too: scripts/brand.mjs reads them for the mark, the icons, the
   link-preview cards and the map, and npm run check measures every pair in CONTRAST_PAIRS against WCAG 2.2 AA. Text only
   ever sits on a flat, opaque ground, so every pair is measurable without compositing. Colors appear only here, in
   :root: components use the tokens (the one exception is the shadow's alpha). */
:root {
  /* grounds */
  --ground: #f4f1ea;
  --paper: #fbfaf7;
  --sand: #e8e2d5;
  --line: #dcd5c6;
  --line-strong: #8a8273;
  /* ink */
  --ink: #24221f;
  --muted: #4d4943;
  --heading: #1d2423;
  /* basalt: the dark grounds */
  --basalt: #232a29;
  --basalt-raised: #323a39;
  --basalt-deep: #191e1d;
  --basalt-line: #4a5553;
  --on-basalt: #f4f1ea;
  --on-basalt-muted: #c0c6c3;
  /* the one accent: spring water */
  --spring-ink: #0e5f58;
  --spring: #2f8c82;
  --spring-light: #86d1c5;
  /* focus rings */
  --focus: var(--spring-ink);
  --focus-on-basalt: var(--spring-light);
  /* the one functional color: a form field that needs fixing (text, the field's edge, the error list's frame) */
  --error: #9d2a1d;
  /* the street map (scripts/make-map-svg.mjs) */
  --map-land: #efebe2;
  --map-block: #e2dccf;
  --map-building: #d6cfc0;
  --map-street: #fbfaf7;
  --map-main: #f6efdc;
  --map-label: #4d4943;
  /* shape, shadow, type */
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(25, 30, 29, 0.06), 0 12px 28px rgba(25, 30, 29, 0.07);
  --display: "Bricolage Grotesque", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  /* the spacing scale: 2xs to xl; --space-xl is the large section token (8.4rem at 1366 px, 4.5rem on phones) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --space-l: clamp(2.75rem, 1.8rem + 3vw, 5rem);
  --space-xl: clamp(4.5rem, 1.6rem + 7.7vw, 10rem);
  /* motion: three curves, three durations */
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --dur-press: 0.14s;
  --dur-ui: 0.2s;
  --dur: 0.3s;
  --wrap: 76rem;
  /* the visitor's choices and the contact controls (polish-csm, 2026-10-13): the primary action's fill and text (basalt
     on light grounds; dark mode turns it sand on the dark ground), the logo and QR tile (always light: the logos and the
     code need it), the edge of a floating button against the page, and the side gutter the wide layout keeps free for
     the floating buttons */
  --btn-bg: var(--basalt);
  --btn-bg-raised: var(--basalt-raised);
  --btn-fg: var(--on-basalt);
  --tile: #fbfaf7;
  --fab-edge: var(--basalt);
  --fab-room: 4.75rem;
}

/* The visitor's display choices (polish-csm; src/prefs.js sets the attributes before the page is drawn, src/widgets.js
   when they change): the same tokens, redefined on <html>. Dark mode is the basalt night: dark grounds, sand text, the
   spring accent in its light shade; the basalt footer and utility bar stay. High contrast is black on white (white on
   black with dark mode). Every set is measured: npm run check runs CONTRAST_PAIRS against each one (scripts/brand.mjs
   THEMES). --tile stays light in every set. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ground: #141918;
  --paper: #1b2120;
  --sand: #202726;
  --line: #3a4442;
  --line-strong: #87938f;
  --ink: #ece8df;
  --muted: #bdc4c1;
  --heading: #f4f1ea;
  --spring-ink: #86d1c5;
  --focus: #86d1c5;
  --error: #f3a596;
  --btn-bg: #f4f1ea;
  --btn-bg-raised: #c0c6c3;
  --btn-fg: #191e1d;
  --fab-edge: #bdc4c1;
}
html[data-contrast="high"] {
  --ground: #ffffff;
  --paper: #ffffff;
  --sand: #f2f2f2;
  --line: #000000;
  --line-strong: #000000;
  --ink: #000000;
  --muted: #1a1a1a;
  --heading: #000000;
  --basalt: #000000;
  --basalt-raised: #262626;
  --basalt-deep: #000000;
  --basalt-line: #ffffff;
  --on-basalt: #ffffff;
  --on-basalt-muted: #ffffff;
  --spring-ink: #004a43;
  --spring: #000000;
  --spring-light: #a6f0e4;
  --focus: #000000;
  --focus-on-basalt: #a6f0e4;
  --error: #8f1d1d;
  --btn-bg: #000000;
  --btn-bg-raised: #262626;
  --btn-fg: #ffffff;
  --fab-edge: #000000;
}
html[data-theme="dark"][data-contrast="high"] {
  --ground: #000000;
  --paper: #000000;
  --sand: #111111;
  --line: #ffffff;
  --line-strong: #ffffff;
  --ink: #ffffff;
  --muted: #f0f0f0;
  --heading: #ffffff;
  --spring-ink: #a6f0e4;
  --spring: #ffffff;
  --focus: #a6f0e4;
  --error: #ffa8a8;
  --btn-bg: #ffffff;
  --btn-bg-raised: #d9d9d9;
  --btn-fg: #000000;
  --fab-edge: #ffffff;
}
html[data-text="sm"] { font-size: 87.5%; }
html[data-text="lg"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }

/* Bricolage Grotesque (the Bricolage Grotesque Project Authors) and Figtree (the Figtree Project Authors), both SIL Open
   Font License 1.1, from @fontsource-variable, subset to Latin and instanced to the weights the site uses with subset-font
   (harfbuzz): headings 300 to 400, text 400 to 600. Self-hosted: the build fingerprints each file under /assets/fonts/,
   rewrites these urls and preloads both. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-300-400.a816b991ee.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2032-2033, U+2212;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-400-600.426d81e983.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2032-2033, U+2212;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block: 1rem; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--spring-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--dur-ui) var(--ease-out), text-decoration-color var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.5em; color: var(--heading); }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem); font-weight: 400; line-height: 1.17; letter-spacing: -0.005em; }
h1, h2 { text-wrap: balance; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }
.wrap { width: min(100% - 2 * max(1.25rem, calc(env(safe-area-inset-left, 0px) + 1rem), calc(env(safe-area-inset-right, 0px) + 1rem)), var(--wrap)); margin-inline: auto; }
/* Wide screens (900 px and up): the side gutter holds the floating buttons (accessibility on the left, Contact on the
   right), so they never cover text or a control (polish-csm). */
@media (min-width: 56.25rem) { .wrap { width: min(100% - 2 * max(1.25rem, calc(env(safe-area-inset-left, 0px) + var(--fab-room)), calc(env(safe-area-inset-right, 0px) + var(--fab-room))), var(--wrap)); } }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* Small caps: Figtree in capitals, tracked out (labels, the menu, table heads, kinds). */
.kind, .suite, .badge, .overline, p.eyebrow, .site-nav a, thead th, .qf dt, .contact-label, .site-footer h2, .utility, .spec li, .stat-label { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.4; }

/* Skip link: visible on focus, never covered */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--paper); color: var(--spring-ink); padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-weight: 600; box-shadow: var(--shadow); }
.skip:focus { top: 1rem; outline-offset: -5px; }
#main:focus { outline: none; }

/* Preview notice (inside the banner landmark; preview mode only) */
.notice { background: var(--sand); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.notice p { margin: 0; padding: 0.6rem 0; }

/* Utility bar: basalt-deep, one line: leasing inquiries and the Marketplace phone; the address on wide screens. */
.utility { background: var(--basalt-deep); color: var(--on-basalt-muted); }
.utility .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 1.5rem; }
.utility p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
.utility a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--on-basalt); text-decoration: none; }
.utility .utility-phone { font-variant-numeric: tabular-nums; color: var(--spring-light); }
@media (hover: hover) and (pointer: fine) { .utility a:hover { text-decoration: underline; } }
.utility :focus-visible { outline-color: var(--focus-on-basalt); outline-offset: 1px; }
@media (max-width: 34rem) { .utility .utility-place { display: none; } .utility { letter-spacing: 0.05em; } .utility p { gap: 0 0.6rem; } }

/* Header: sand, the lockup (the mark, "The Marketplace at" over "Canyon Springs" in the display face) and a small-caps
   menu whose current page carries a 2 px spring-ink rule. */
.site-header { background: var(--ground); border-bottom: 1px solid var(--line); }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 0.85rem; }
.brand { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--heading); text-decoration: none; min-height: 44px; }
.brand .mark { width: 46px; height: 46px; flex: none; }
.brand-text { display: grid; line-height: 1.05; }
.brand-kicker { font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--spring-ink); }
.brand-name { font-family: var(--display); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em; color: var(--heading); }
@media (hover: hover) and (pointer: fine) { .brand:hover .brand-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; color: var(--heading); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--spring-ink); box-shadow: inset 0 -2px 0 var(--line-strong); } }
.site-nav a[aria-current] { color: var(--spring-ink); box-shadow: inset 0 -2px 0 var(--spring-ink); }
.site-nav a:focus-visible { outline-offset: -2px; }
/* Phones: the menu under the name as a grid of equal cells (three a row), the focus ring drawn inside each cell. */
@media (max-width: 40rem) {
  .masthead { padding-bottom: 0; row-gap: 0.4rem; }
  .site-nav { flex: 1 1 100%; border-top: 1px solid var(--line); }
  .site-nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .site-nav a { width: 100%; justify-content: center; padding: 0 0.25rem; letter-spacing: 0.05em; font-size: min(0.78rem, 3.6vw); }
}

/* Hero (home): sand, the overline, the light display name, the line and two buttons; then the building drawn as its
   four bays in a row (the storefronts, each with its own logo on paper, its suite number and kind) under a basalt roof
   line; then the specification line. */
.hero { padding-block: var(--space-l) 0; }
.hero-copy { max-width: 52rem; }
.overline { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; color: var(--spring-ink); }
.overline::before, p.eyebrow::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--spring); }
.hero h1 { font-size: clamp(2.6rem, 1.1rem + 5.6vw, 6rem); line-height: 1.03; letter-spacing: -0.03em; margin-bottom: 0.3em; }
.hero-lead { font-family: var(--display); font-weight: 300; font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.7rem); line-height: 1.32; max-width: 40rem; margin: 0; color: var(--ink); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero-shops { margin-top: var(--space-l); }
/* The four bays: one building, so one roof line across them and hairlines between the bays. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 6px solid var(--basalt); background: var(--paper); border-inline: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles > li { display: grid; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tiles > li:nth-child(2n) { border-right: 0; }
.tiles > li:nth-last-child(-n + 2) { border-bottom: 0; }
@media (min-width: 48rem) { .tiles > li { border-bottom: 0; } .tiles > li:nth-child(2n) { border-right: 1px solid var(--line); } .tiles > li:last-child { border-right: 0; } }
.tile { display: flex; flex-direction: column; min-width: 0; color: var(--ink); text-decoration: none; transition: background-color var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tile:hover { background-color: var(--ground); } .tile:hover .tile-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } }
.tile-logo { height: 7.5rem; display: grid; place-items: center; padding: 1rem 1.25rem 0.5rem; }
.tile-logo img { max-height: 5.25rem; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.tile-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--sand); color: var(--spring-ink); }
.tile-text { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0.3rem; padding: 0.5rem 1.1rem 1.25rem; line-height: 1.3; }
.tile-text .kind { color: var(--spring-ink); }
.tile-name { max-width: 100%; font-family: var(--display); font-size: 1.2rem; font-weight: 400; letter-spacing: -0.01em; color: var(--heading); overflow-wrap: anywhere; hyphens: auto; }
.tile-suite { color: var(--muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
@media (max-width: 22.5rem) { .tile-text { padding-inline: 0.6rem; } .tile-name { font-size: 1.02rem; } .tile-logo { padding-inline: 0.6rem; } }
.tile-suite .badge { margin-left: 0.4rem; }
/* The specification line: what the four icons said, as one quiet row of facts. */
.spec { list-style: none; margin: 0; padding: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0; }
.spec li { color: var(--muted); display: inline-flex; align-items: center; }
.spec li + li::before { content: ""; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--line-strong); margin-inline: 0.9rem; }
@media (max-width: 40rem) { .spec { display: grid; gap: 0.35rem; } .spec li::before, .spec li + li::before { content: ""; flex: none; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--line-strong); margin: 0 0.7rem 0 0; } }

/* Kind tags, suite labels and the "Now open" badge: quiet small caps, no pills, no fills. */
.kind { color: var(--muted); }
.suite { color: var(--heading); font-variant-numeric: tabular-nums; }
.badge { display: inline-block; color: var(--spring-ink); border: 1px solid var(--spring-ink); border-radius: var(--radius-sm); padding: 0 0.4rem; font-size: 0.7rem; }

/* Figures: the verified numbers in the light display face, tabular, under hairlines. */
.figures { padding-block: var(--space-l) 0; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats li { display: grid; align-content: start; gap: 0.35rem; border-top: 1px solid var(--heading); padding: 1rem 0 1.25rem; }
.stat-value { font-family: var(--display); font-size: clamp(2.5rem, 1.9rem + 2vw, 3.6rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums lining-nums; }
.stat-label { color: var(--muted); text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem; font-weight: 400; }

/* Inner pages: a sand title band closed by a spring hairline. */
.page-head { background: var(--sand); padding-block: var(--space-l) var(--space-m); border-bottom: 2px solid var(--spring); }
.page-head h1 { margin: 0; }
.page-head p { margin: 0.75rem 0 0; color: var(--ink); max-width: 46rem; font-size: 1.1rem; }
.crumbs { font-size: 0.92rem; margin-bottom: 0.9rem; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; }

/* Content pages (a business, its guides, the area guide): the title band with the business's suite and kind and its
   logo on a paper tile; then the quick facts beside the text (above it on phones). */
.content-head .card-meta { margin: 0.2rem 0 0.75rem; }
.content-head-grid { display: grid; gap: 1.25rem 2.5rem; align-items: center; }
@media (min-width: 48rem) { .content-head-grid { grid-template-columns: minmax(0, 1fr) auto; } }
.content-head-text > p { max-width: 46rem; }
.content-logo { justify-self: start; display: grid; place-items: center; width: 13rem; max-width: 100%; height: 9.5rem; padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--basalt); border-radius: var(--radius-sm); }
.content-logo img { max-height: 6.75rem; width: auto; object-fit: contain; }
.content-wrap { padding-block: var(--space-l); }
.content-grid { display: grid; gap: 2rem 3.5rem; align-items: start; }
@media (min-width: 62rem) {
  .content-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
  .content-grid > .quick { grid-column: 2; grid-row: 1; }
  .content-grid > .content-main { grid-column: 1; grid-row: 1; }
}
.content-main { min-width: 0; }
.content-main > * + * { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--line); }
.content-main h2 { font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.15rem); }
.content-main p, .content-main .facts, .content-main .faq { max-width: 44rem; }
.content-main .facts { margin-bottom: 1rem; }
.quick { background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--basalt); border-radius: var(--radius-sm); padding: 1.4rem 1.4rem 1.2rem; }
.quick h2 { font-size: 1.5rem; }
.qf { margin: 0 0 1.25rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 1rem; }
.qf dt { color: var(--muted); padding-top: 0.2rem; }
.qf dd { margin: 0; overflow-wrap: anywhere; }
.qf-title { font-size: 1.15rem; margin: 1rem 0 0.25rem; }
.qf-links { border-top: 0; padding-top: 0; }
.qf-note { color: var(--muted); }
.quick .nearby { font-size: 0.95rem; }
.quick .pending { color: var(--muted); font-size: 0.95rem; margin: 0.5rem 0 0; }
.more-box { max-width: 46rem; }
.more-box h2 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); margin-bottom: 0.75rem; }
.more-box ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.more-box li { border-bottom: 1px solid var(--line); padding: 0.6rem 0 0.9rem; }
.more-box li a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.more-box li p { margin: 0; color: var(--ink); }
.related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.related-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 1rem; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-weight: 500; text-decoration: none; transition: border-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .related-list a:hover { border-color: var(--spring-ink); text-decoration: underline; } }
.related-list a:active { transform: scale(0.97); }
.card-more { margin: 0.25rem 0 0.35rem; }
.card-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Buttons: basalt fill for the main action, a basalt hairline for the rest; softly rounded, never pills. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.35rem; border-radius: var(--radius-sm); font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; text-decoration: none; border: 1px solid transparent; line-height: 1.2; transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 4px; }
.btn-primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn-outline { background: transparent; color: var(--heading); border-color: var(--heading); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--btn-bg-raised); border-color: var(--btn-bg-raised); }
  .btn-outline:hover { background: var(--paper); color: var(--spring-ink); border-color: var(--spring-ink); }
}

/* Sections: the large token between the home sections, the middle one on inner pages. A section head is editorial: on
   wide screens the small-caps label sits in its own column beside the heading. */
.section { padding-block: var(--space-l); }
.home .section { padding-block: var(--space-xl) 0; }
.home .section:last-child { padding-bottom: var(--space-xl); }
.section-alt { background: var(--sand); }
.home .section-alt { padding-bottom: var(--space-xl); margin-top: var(--space-xl); }
.home .section-alt + .section { padding-top: var(--space-xl); }
.section-head { max-width: 50rem; margin-bottom: var(--space-m); }
.section-head p { color: var(--muted); font-size: 1.1rem; }
p.eyebrow, .section-head p.eyebrow, .prose p.eyebrow { display: flex; align-items: center; gap: 0.6rem; color: var(--spring-ink); margin: 0 0 0.75rem; max-width: none; }
.section-more { margin: var(--space-m) 0 0; }

/* Who is here (home): the four businesses as an editorial row under a heading rule. */
.shops { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 66rem) { .shops { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--heading); padding: 1.1rem 0 0.75rem; }
.shop-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; align-items: center; order: -1; }
.shop h3 { margin: 0.1rem 0 0; }
.shop p { margin: 0; }
.shop .card-links { margin-top: auto; }

/* Directory: each business an editorial entry, its own logo on a neutral paper tile beside the text on wide screens. */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--heading); }
.card { display: grid; gap: 1rem 2.5rem; padding: var(--space-m) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; }
@media (min-width: 48rem) { .card { grid-template-columns: 15rem minmax(0, 1fr); } .card > .card-body { grid-column: 2; } .card > .card-logo { grid-column: 1; grid-row: 1; } }
.card-logo { height: 10rem; display: grid; place-items: center; padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.card-logo img { max-height: 7rem; width: auto; object-fit: contain; }
.card-body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.card-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; align-items: center; order: -1; }
.card h3 { margin: 0.2rem 0 0; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); font-weight: 300; }
.category { color: var(--muted); margin: 0; }
.description { margin: 0.35rem 0 0.25rem; max-width: 44rem; }
.pills { list-style: none; margin: 0.25rem 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
.pills li { color: var(--ink); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.pills li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--spring); flex: none; }
.recognition { margin: 0 0 0.5rem; padding: 0.2rem 0 0.2rem 1rem; border-left: 2px solid var(--spring); color: var(--ink); font-size: 0.95rem; }
.recognition p { margin: 0; }
.card-body .pending { color: var(--muted); font-size: 0.95rem; margin: 0 0 0.25rem; }
.card-links { list-style: none; margin: auto 0 0; padding: 0.35rem 0 0; display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.card-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Tables: hairlines, small-caps column heads, no fills. */
.table-wrap { position: relative; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; padding: 0 0 0.75rem; font-family: var(--display); font-weight: 400; font-size: 1.3rem; color: var(--heading); }
th, td { text-align: left; padding: 0.85rem 1.25rem 0.85rem 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
thead th { color: var(--muted); border-bottom: 1px solid var(--heading); }
td a, th a { display: inline-flex; align-items: center; min-height: 24px; }
tbody th { color: var(--heading); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { th, td { padding: 0.7rem 0.6rem 0.7rem 0; font-size: 0.95rem; } thead th { font-size: 0.7rem; letter-spacing: 0.06em; } }
/* The narrowest phones (320 px): tighter cells and hyphenation, so the four-column directory table fits without scrolling. */
@media (max-width: 22.5rem) { th, td { padding: 0.6rem 0.35rem 0.6rem 0; font-size: 0.88rem; hyphens: auto; } }
.table-wrap + p { margin-top: 1rem; }

/* Info blocks: two-column editorial sections. A panel is a column under a basalt rule, not a box. */
.grid-2 { display: grid; gap: var(--space-m) 3.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.panel { border-top: 1px solid var(--heading); padding-top: 1.25rem; }
.panel.quick { border-top: 6px solid var(--basalt); }
.panel h2, .panel h3 { margin-top: 0; }
.panel h2 { font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.15rem); }
address { font-style: normal; font-size: 1.15rem; line-height: 1.5; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.facts li { padding-left: 1.4rem; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0.15rem; top: 0.6em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--spring); }
.stack > * + * { margin-top: 1rem; }
/* Contact details: a small-caps label, then a large link that is easy to tap */
.contact-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.25rem; }
.contact-list li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.9rem; }
.contact-label { min-width: 3.75rem; color: var(--muted); }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.15rem; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.site-footer .footer-contact { margin: 0 0 0.75rem; }
.prose { max-width: 46rem; }
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: 46rem; }
.nearby-title { margin: var(--space-m) 0 0.5rem; }
.prose h2 { margin-top: 2.25rem; }
.prose > h2:first-child, .prose > .faq-group:first-child > h2 { margin-top: 0; }
.lead { font-family: var(--display); font-weight: 300; font-size: clamp(1.25rem, 1.08rem + 0.6vw, 1.6rem); line-height: 1.38; color: var(--ink); }
.section-head p.lead { color: var(--ink); }

/* Map: the street map drawn in the site's palette. */
.map-figure { margin: 0; }
.map-figure > a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line-strong); }
.map-figure img { width: 100%; height: auto; }
.map-figure figcaption { font-size: 0.92rem; color: var(--muted); margin-top: 0.6rem; }
.wayfinding { display: flex; gap: 0.7rem; align-items: flex-start; border-left: 2px solid var(--spring); padding: 0.2rem 0 0.2rem 1rem; color: var(--heading); font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.38; margin: 1.25rem 0; }
.wayfinding .icon { display: none; }

/* Nearby */
.nearby { margin: 0; display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--line); }
.nearby dt, .nearby dd { margin: 0; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.nearby dd { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; padding-left: 1rem; }
.note { font-size: 0.92rem; color: var(--muted); margin-top: 0.75rem; }

/* FAQ: questions in the display face, hairlines between them */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.1rem 0 1.2rem; }
.faq-item h3 { margin-bottom: 0.35rem; }
.faq-item p { margin: 0; }
.faq-group + .faq-group { margin-top: var(--space-l); }

/* Leasing (home): the closing band, a large light heading beside the action */
.lease-card { display: grid; gap: 1.25rem 3rem; align-items: end; border-top: 6px solid var(--basalt); padding-top: var(--space-m); }
@media (min-width: 52rem) { .lease-card { grid-template-columns: minmax(0, 1fr) auto; } }
.lease-card h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); margin-bottom: 0.4em; }
.lease-card p:last-child { margin-bottom: 0; max-width: 44rem; }

/* Footer: basalt, the reversed mark above the name, small-caps column heads in spring-light */
.site-footer { background: var(--basalt); color: var(--on-basalt); font-size: 0.98rem; }
.site-footer > .wrap { padding-block: var(--space-l) 2.5rem; }
.site-footer a { color: var(--on-basalt); }
.site-footer :focus-visible { outline-color: var(--focus-on-basalt); }
.site-footer .mark { width: 52px; height: 52px; margin-bottom: 1rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
@media (min-width: 62rem) { .footer-grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } }
.site-footer h2 { color: var(--spring-light); margin-bottom: 0.6rem; }
.site-footer .footer-name { font-family: var(--display); font-size: 1.6rem; font-weight: 300; letter-spacing: -0.015em; text-transform: none; color: var(--on-basalt); line-height: 1.1; }
.site-footer address { font-size: inherit; margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer p { color: var(--on-basalt-muted); }
.fine { border-top: 1px solid var(--basalt-line); margin-top: var(--space-m); padding-top: 1.25rem; }
.fine p { margin: 0.25rem 0; color: var(--on-basalt-muted); }

@media (max-width: 40rem) {
  .btn { width: 100%; }
}
/* Touch: a hover never latches. Reduced motion: gentler, not off; the color fades stay, the movement goes. */
/* The device's setting applies unless the visitor turned "Reduce motion" off in the accessibility options (data-motion
   "full"); turning it on (data-motion "reduce") applies the same rules on any device (polish-csm). */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) { scroll-behavior: auto; }
  html:not([data-motion="full"]) :is(.btn, .related-list a, .tile, .fab-btn, .qb-item, .sw) { transition-property: background-color, color, border-color; }
  html:not([data-motion="full"]) :is(.btn, .related-list a, .fab-btn, .qb-item):active { transform: none; }
  html:not([data-motion="full"]) .sw::after { transition-property: background-color; }
}
html[data-motion="reduce"] { scroll-behavior: auto; }
html[data-motion="reduce"] :is(.btn, .related-list a, .tile, .fab-btn, .qb-item, .sw) { transition-property: background-color, color, border-color; }
html[data-motion="reduce"] :is(.btn, .related-list a, .fab-btn, .qb-item):active { transform: none; }
html[data-motion="reduce"] .sw::after { transition-property: background-color; }
@media print {
  .notice, .site-nav, .skip, .utility, .hero-actions, .quickbar, .site-tools, .reading-guide { display: none; }
  body { padding-bottom: 0; }
  body, .page-head, .section-alt, .site-footer { background: none; }
  .site-footer, .site-footer a, .site-footer h2, .site-footer p, .site-footer .footer-name, .fine p { color: var(--ink); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--muted); overflow-wrap: anywhere; }
}

/* Leasing contact (2026-10-13): the leasing agent's block, with the brokerage's name beside the agent's (Idaho Code
   54-2053), the Marketplace's backup line, the license and office in small print. Text only. */
.agent-name { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.17; color: var(--heading); margin: 0; }
.agent-name strong { font-weight: 400; }
.agent-firm { font-weight: 600; margin: 0.15rem 0 0.75rem; color: var(--ink); }
.agent-backup { margin: 0.25rem 0 0.75rem; }
.agent-backup a, .agent-fine a, .lease-who a { font-variant-numeric: tabular-nums; white-space: nowrap; }
.agent-fine { font-size: 0.92rem; color: var(--muted); }
.head-agent { font-weight: 600; }
.page-head .hero-actions { margin-top: 1.25rem; }
.utility-agent { color: var(--on-basalt-muted); }
.utility-or { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-lease { margin: 0.5rem 0 0; }

/* The lease band's actions: the form, a call, then the Leasing page. */
.lease-actions { display: grid; gap: 0.75rem; justify-items: stretch; }
.lease-more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; }
.lease-who { max-width: 44rem; }

/* The traffic figure: a full-width figure under the building's four. */
.stats li.stat-wide { grid-column: 1 / -1; }

/* The leasing inquiry form: labels above fields, hints in muted text, 48 px fields on paper with a 3:1 edge, and an
   error text per field, shown by the browser's own invalid state (:user-invalid, without JavaScript) or the form
   script (.is-invalid). The honeypot field is never shown. */
.lease-form { display: grid; gap: 1.1rem; }
.lease-form h3 { margin: 0; }
.form-intro { margin: 0; color: var(--muted); }
.field { display: grid; gap: 0.3rem; }
.field label { font-weight: 600; color: var(--ink); }
.optional { font-weight: 400; color: var(--muted); }
.hint { margin: 0; font-size: 0.95rem; color: var(--muted); }
.lease-form input:not([type="checkbox"]):not([type="radio"]), .lease-form textarea, .lease-form select { width: 100%; min-height: 48px; padding: 0.6rem 0.75rem; font: inherit; font-size: 1.0625rem; color: var(--ink); background: var(--paper); border: 1px solid var(--muted); border-radius: var(--radius-sm); }
.lease-form textarea { min-height: 8rem; resize: vertical; }
.lease-form input:focus-visible, .lease-form textarea:focus-visible, .lease-form select:focus-visible { outline-offset: 2px; border-color: var(--heading); }
.field-check { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.75rem; }
.field-check input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--btn-bg); }
.field-check label { font-weight: 600; min-height: 24px; display: inline-flex; align-items: center; }
.field-check .field-error { grid-column: 1 / -1; }
.field-error { display: none; margin: 0; font-weight: 600; color: var(--error); }
.field-error::before { content: "! "; }
.field:has(:user-invalid) .field-error, .field.is-invalid .field-error { display: block; }
.field:has(:user-invalid) input:not([type="checkbox"]):not([type="radio"]), .field:has(:user-invalid) textarea, .field.is-invalid input:not([type="checkbox"]):not([type="radio"]), .field.is-invalid textarea { border-color: var(--error); border-width: 2px; }
.form-errors { border: 2px solid var(--error); border-radius: var(--radius-sm); background: var(--paper); padding: 1rem 1.25rem; }
.form-errors[hidden] { display: none; }
.form-errors h3, .form-errors h4 { margin: 0 0 0.5rem; font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--heading); }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.form-errors a { display: inline-flex; align-items: center; min-height: 24px; color: var(--error); font-weight: 600; }
.hp { display: none; }
.lease-form .btn { justify-self: start; cursor: pointer; }
@media (max-width: 40rem) { .lease-form .btn { justify-self: stretch; } }

/* The maintenance request page (2026-10-13): the safety box beside (or, on a phone, above) the form; the form in
   groups with a legend each; the fixed building line; the access choices as large radio targets; five photo inputs, each
   with its preview and remove button (drawn by the form script); then the QR code and its printable card. */
.maint-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .maint-layout { grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); } }
.safety { background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--basalt); border-radius: var(--radius-sm); padding: 1.25rem 1.4rem; }
.safety h2 { margin-top: 0; font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.9rem); }
.safety-lead { font-weight: 600; }
.safety-list { padding-left: 1.1rem; display: grid; gap: 0.6rem; }
.safety-list li::marker { color: var(--spring); }
.safety-fine { font-size: 0.92rem; color: var(--muted); }
.safety a, .form-contact a, .qr-card a { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.maint-form h2 { margin: 0; font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.15rem); }
.form-group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.1rem; }
.form-group > legend { padding: 0; margin-bottom: 0.4rem; font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.17; color: var(--heading); }
.form-group + .form-group { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.field-static p { margin: 0; }
.static-label { font-weight: 600; color: var(--ink); }
.static-value { padding: 0.6rem 0; }
.choices { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.35rem; }
.choices legend { padding: 0; font-weight: 600; color: var(--ink); }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.75rem; min-height: 44px; }
.choice input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--btn-bg); }
.choice label { min-height: 24px; display: inline-flex; align-items: center; }
.lease-form input[type="file"] { padding: 0.45rem 0.6rem; cursor: pointer; }
.lease-form input[type="file"]::file-selector-button { font: inherit; font-weight: 600; min-height: 2.25rem; margin-right: 0.75rem; padding: 0.3rem 0.9rem; color: var(--on-basalt); background: var(--basalt); border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.photo-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.photo-preview[hidden] { display: none; }
.photo-thumb { display: block; max-width: 96px; max-height: 96px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); }
.photo-note { margin: 0; flex: 1 1 12rem; font-size: 0.95rem; color: var(--muted); overflow-wrap: anywhere; }
.lease-form .photo-remove { justify-self: auto; min-height: 44px; padding: 0.4rem 1rem; }
@media (max-width: 40rem) { .lease-form .photo-remove { width: auto; } }
.photos.is-invalid .photos-error { display: block; }
.photo-status:empty { display: none; }
.form-contact { margin: 1.25rem 0 0; font-weight: 600; }
.qr-block { display: grid; gap: var(--space-m) 3.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: center; }
.qr-art { justify-self: start; }
.qr { display: block; width: 240px; max-width: 100%; height: auto; background: var(--tile); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.qr-url { font-weight: 600; font-size: 1.15rem; overflow-wrap: anywhere; }
.card-screen { padding-top: var(--space-m); }
.card-how { color: var(--muted); }
.qr-card { max-width: 7.5in; margin: var(--space-m) auto var(--space-l); padding: 2.5rem 1.5rem; display: grid; justify-items: center; gap: 1rem; text-align: center; background: var(--paper); border: 2px solid var(--heading); border-radius: 8px; page: card; }
.qr-card-brand { display: flex; align-items: center; gap: 0.75rem; text-align: left; }
.qr-card-brand .mark { width: 56px; height: 56px; flex: none; }
.qr-card-brand p { margin: 0; display: grid; }
.qr-card h1 { margin: 0; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); max-width: 16ch; }
.qr-card .qr { width: min(100%, 4in); border: 0; }
.qr-card-url { margin: 0; font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); overflow-wrap: anywhere; }
.qr-card-note { margin: 0; max-width: 36ch; }
.qr-card-safety { margin: 0; font-weight: 600; max-width: 34ch; }
.qr-card-place { margin: 0; font-size: 0.92rem; color: var(--muted); }
@page card { size: letter portrait; margin: 0.5in; }
@media print {
  body:has(.card-main) .site-header, body:has(.card-main) .site-footer, .card-screen { display: none; }
  .qr-card { margin: 0 auto; max-width: none; min-height: 9.6in; align-content: center; break-inside: avoid; border-width: 2px; }
  .qr-card .qr { width: 4.25in; }
  .maint-form, .safety { break-inside: auto; }
}

/* ---- The visitor's choices, the contact controls and the accessibility options (polish-csm, 2026-10-13) ----
   Logos and the QR code keep a light tile in every set. High contrast: every link underlined. Highlight links: a thick
   underline and a dashed outline (the focus ring still wins). */
html[data-theme="dark"] :is(.tile-logo, .card-logo, .content-logo) { background: var(--tile); }
html[data-contrast="high"] a { text-decoration-line: underline; text-decoration-thickness: 2px; }
html[data-links="on"] a { text-decoration-line: underline; text-decoration-thickness: 3px; }
html[data-links="on"] a:not(:focus-visible) { outline: 2px dashed currentColor; outline-offset: 2px; }
.wicon { width: 1.25rem; height: 1.25rem; flex: none; }
.wicon-s { width: 1rem; height: 1rem; }

/* The FAQ page's table of contents: the groups, each with its count, under a heading rule. */
.faq-toc { border-top: 2px solid var(--heading); padding-top: 1rem; margin-bottom: var(--space-m); }
.faq-toc h2 { font-size: 1.35rem; margin: 0 0 0.35rem; }
.faq-toc ul { list-style: none; margin: 0; padding: 0; display: grid; }
.faq-toc li { border-bottom: 1px solid var(--line); }
.faq-toc a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.faq-count { color: var(--muted); font-size: 0.95rem; }
.faq-item, .faq-group { scroll-margin-top: 1rem; }

/* Reading guide: two rules across the screen at the pointer, or at the item with keyboard focus. Decorative. */
.reading-guide { display: none; position: fixed; left: 0; right: 0; top: 0; height: 2.75rem; margin-top: -1.375rem; border-block: 2px solid var(--heading); pointer-events: none; z-index: 40; }
html[data-guide="on"] .reading-guide.is-placed { display: block; }

/* The quick-contact bar (narrow screens, under 900 px): Call, Leasing (the primary item, sand on basalt), Maintenance,
   Contact, and the accessibility options as a compact fifth item (its icon only, 44 px wide, its name in hidden text):
   on a phone the side gutter is too narrow for a floating button that covers nothing. Icon above label, every item at
   least 52 px tall, above the home indicator (safe-area inset); the page gets bottom padding equal to the bar (its
   measured height, --qb-h, or the fallback), so the bar never hides the end of the page. */
.quickbar { display: none; }
@media (max-width: 56.24rem) {
  body { padding-bottom: var(--qb-h, calc(3.875rem + env(safe-area-inset-bottom, 0px))); }
  /* Focus and in-page links stop above the bar, so the bar never hides the item in focus (WCAG 2.4.11). */
  html { scroll-padding-block: 1rem calc(var(--qb-h, calc(3.875rem + env(safe-area-inset-bottom, 0px))) + 1rem); }
  .quickbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--basalt-deep); border-top: 2px solid var(--spring); padding: 0.25rem max(0.25rem, env(safe-area-inset-right, 0px)) calc(0.25rem + env(safe-area-inset-bottom, 0px)) max(0.25rem, env(safe-area-inset-left, 0px)); }
  .quickbar > ul { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 0.125rem; max-width: 40rem; }
  /* Each item as wide as its label needs, the spare width shared out: at 320 px "Maintenance" fits on one line. */
  .quickbar > ul > li { flex: 1 1 auto; min-width: 2.75rem; display: flex; position: relative; }
  .quickbar > ul > li.qb-a11y { flex: 0 0 2.75rem; }
  html[data-a11y-button="hidden"] .quickbar .qb-a11y { display: none; }
  .qb-sheet { position: fixed; left: 0.5rem; right: 0.5rem; bottom: calc(var(--qb-h, 3.875rem) + 0.5rem); width: auto; max-height: calc(100vh - var(--qb-h, 3.875rem) - 1rem); }
}
.qb-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-width: 0; min-height: 3.25rem; margin: 0; padding: 0.3rem 0.1rem; background: transparent; color: var(--on-basalt); border: 0; border-radius: var(--radius-sm); font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.qb-item .wicon { width: 1.375rem; height: 1.375rem; }
.qb-label { display: block; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.qb-a11y .qb-item .wicon { width: 1.5rem; height: 1.5rem; }
.qb-item:focus-visible { outline: 2px solid var(--focus-on-basalt); outline-offset: -2px; }
.qb-item:active { transform: scale(0.97); }
.qb-item.is-primary { background: var(--on-basalt); color: var(--basalt-deep); }
.qb-item.is-primary:focus-visible { outline-color: var(--basalt-deep); outline-offset: -4px; }
html[data-links="on"] .qb-item, html[data-contrast="high"] .qb-item { outline: none; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .qb-item:hover { background: var(--basalt-raised); } .qb-item.is-primary:hover { background: var(--on-basalt-muted); } }

/* The floating buttons (wide screens, 900 px and up): accessibility bottom left, Contact bottom right, the same size
   (56 px) and the same distance from the bottom edge, both inside the side gutter the wide layout keeps free
   (--fab-room), so they never cover text or a control. Round, basalt, with a 3:1 edge against the page. */
.fab { display: none; }
@media (min-width: 56.25rem) {
  .fab { display: block; position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem); z-index: 30; }
  .fab-a11y { left: calc(env(safe-area-inset-left, 0px) + 0.625rem); }
  .fab-contact { right: calc(env(safe-area-inset-right, 0px) + 0.625rem); }
  html[data-a11y-button="hidden"] .fab-a11y { display: none; }
}
.fab-btn { width: 3.5rem; height: 3.5rem; margin: 0; padding: 0; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 0.1rem; background: var(--basalt); color: var(--on-basalt); border: 2px solid var(--fab-edge); box-shadow: var(--shadow); cursor: pointer; font-family: var(--sans); font-size: 0.625rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em; transition: background-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.fab-btn .wicon { width: 1.5rem; height: 1.5rem; }
.fab-contact .fab-btn .wicon { width: 1.3rem; height: 1.3rem; }
.fab-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.fab-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .fab-btn:hover { background: var(--basalt-raised); } }
.fab-hide { position: absolute; left: 50%; bottom: calc(100% + 0.375rem); margin: 0 0 0 -0.875rem; padding: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--heading); border: 1px solid var(--line-strong); cursor: pointer; }
.fab-hide:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fab-q { position: absolute; left: 0; bottom: calc(100% + 2.75rem); width: min(20rem, calc(100vw - 1.25rem)); }

/* Panels: the Contact panel, the bar's leasing options, the hide question. Paper with a basalt top edge, like the quick
   facts; non-modal. */
.cpanel, .fab-q { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-top: 4px solid var(--heading); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 1rem 1.25rem 1.1rem; text-align: left; }
.cpanel { position: absolute; right: 0; bottom: calc(100% + 0.75rem); width: min(23rem, calc(100vw - 1.25rem)); max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
.cpanel[hidden], .hide-q[hidden] { display: none; }
.cpanel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.35rem; }
.cpanel h2 { font-size: 1.5rem; margin: 0; }
.cpanel h3 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.cpanel p, .fab-q p { margin: 0 0 0.5rem; }
.cpanel h2:focus, .a11y-dialog h2:focus, .fab-q p:focus { outline: none; }
.cp-sec { padding-top: 0.85rem; margin-top: 0.6rem; border-top: 1px solid var(--line); }
.cp-actions { list-style: none; margin: 0.5rem 0 0.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cpanel .btn, .fab-q .btn, .a11y-dialog .btn { width: auto; min-height: 44px; padding: 0.5rem 0.95rem; font-size: 0.95rem; }
.cp-note { font-size: 0.95rem; color: var(--muted); }
.cp-note strong { color: var(--ink); }
.cp-note a { font-variant-numeric: tabular-nums; }
.cp-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.hide-q-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hide-q-note { font-size: 0.92rem; color: var(--muted); }
.a11y-close { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; margin: 0; padding: 0 0.8rem; background: transparent; color: var(--heading); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--sans); font-size: 0.92rem; font-weight: 600; cursor: pointer; }

/* The accessibility options: a native modal dialog (the rest of the page is inert while it is open). */
.a11y-dialog { width: min(30rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); margin: auto; padding: 0; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-top: 4px solid var(--heading); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow-y: auto; overscroll-behavior: contain; }
.a11y-dialog::backdrop { background: var(--basalt-deep); opacity: 0.6; }
.a11y-inner { padding: 1.1rem 1.4rem 1.4rem; }
.a11y-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.4rem; }
.a11y-head h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.65rem); margin: 0; }
.a11y-intro { color: var(--muted); font-size: 0.95rem; margin: 0 0 1rem; }
.a11y-label { font-weight: 600; margin: 0 0 0.4rem; }
.a11y-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.a11y-sizes button { min-height: 44px; margin: 0; padding: 0 0.25rem; background: var(--paper); color: var(--heading); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--sans); font-size: 1rem; font-weight: 600; cursor: pointer; }
.a11y-sizes button[aria-pressed="true"] { background: var(--heading); color: var(--paper); border-color: var(--heading); }
.a11y-switches { list-style: none; margin: 1rem 0; padding: 0; border-top: 1px solid var(--line); }
.a11y-switches li { border-bottom: 1px solid var(--line); }
.a11y-switches button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; margin: 0; padding: 0.4rem 0.2rem; background: transparent; color: var(--ink); border: 0; font-family: var(--sans); font-size: 1.0625rem; text-align: left; cursor: pointer; }
.a11y-switches button:focus-visible, .a11y-sizes button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw { flex: none; position: relative; width: 2.75rem; height: 1.5rem; border: 2px solid var(--line-strong); border-radius: 0.75rem; background: var(--paper); transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
.sw::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--line-strong); transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
[aria-checked="true"] > .sw { background: var(--heading); border-color: var(--heading); }
[aria-checked="true"] > .sw::after { transform: translateX(1.25rem); background: var(--paper); }
.a11y-reset { margin: 0 0 0.75rem; }
.a11y-visibility { border-top: 1px solid var(--line); padding-top: 0.85rem; }
.a11y-visibility p { margin: 0 0 0.6rem; }
.hide-q { border-left: 2px solid var(--heading); padding-left: 0.85rem; margin: 0.25rem 0 0.75rem; }
.a11y-more { margin: 0.5rem 0 0; }
.a11y-more a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- the Spanish version (es-csm and esfull-csm, 2026-10-13) ----------
   The language switch: a quiet text link "Español" / "English" to the same page in the other language, in the utility
   bar on wide screens, as the last row of the menu on phones (where the utility bar has no room), and in the footer.
   No flag, no box, no pop-up. A choice made with it is remembered only to mark it (prefs.js sets data-lang-choice);
   nothing ever redirects. The "(en inglés)" note beside a link to an outside page in English; the privacy note. */
.utility .utility-lang { margin-left: auto; }
.utility .lang-link { color: var(--on-basalt); text-decoration: underline; text-decoration-color: var(--on-basalt-muted); text-underline-offset: 0.2em; }
.site-nav .nav-lang { display: none; }
.footer-lang { margin-top: 0.75rem; }
html[data-lang-choice] .lang-link { font-weight: 600; }
@media (max-width: 40rem) {
  .utility .utility-lang { display: none; }
  .site-nav .nav-lang { display: block; grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .site-nav .nav-lang a { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 400; }
}
.en-note { font-weight: 400; text-transform: none; letter-spacing: 0; }
.privacy-note { margin-top: var(--space-m); padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.privacy-note h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.privacy-note p { margin: 0 0 0.6rem; }
/* The Spanish menu's longer words fit a phone's cell with less letter spacing. */
@media (max-width: 40rem) { html[lang="es-MX"] .site-nav a { letter-spacing: 0.02em; } }