/* ===================================================================
   TrueNorthBoulder — component + page class library (the SSOT).
   Linked by default.hbs after styles.css. Tokens (colors, type,
   radii, shadows, motion) come from styles.css.
   ADR-0010: ALL classes live here — shared AND page-local — never in
   a page's own <style>. Page-local classes are grouped + labeled by
   page (e.g. the "CONTACT PAGE" block below). Each net-new class also
   gets a design-system/docs/* entry naming the class + token(s).
   =================================================================== */

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--tnb-paper); color: var(--tnb-stone-700); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---- Reduced motion (WCAG 2.3.3 / best practice) ----
   Duration-only guard: this theme has no @keyframes, no smooth-scroll, and no
   JS-driven motion — every animation is a decorative CSS transition (hover
   feedback, image scale, card lift, burger→X, FAQ-icon rotate). Zeroing
   durations preserves the END state instantly. NEVER add `transform: none`
   here — the theme uses static transforms for layout (rotate(45deg) diamonds,
   translate(-50%,-50%) centered pills) that a blanket reset would collapse. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Keyboard focus indicator (WCAG 2.4.7) ----
   Global copper-dk ring on light surfaces; gold ring on the deep-pine
   bands where copper would be too low-contrast. In-page anchor targets get
   scroll-margin so the sticky nav/filterbar can't obscure the focus ring. */
:focus-visible { outline: 2px solid var(--tnb-copper-dk); outline-offset: 2px; border-radius: 2px; }
.numbers :focus-visible,
footer :focus-visible,
.faq-block :focus-visible,
.inline-cta :focus-visible,
.hero :focus-visible,
.break :focus-visible,
.news :focus-visible { outline-color: var(--tnb-gold); }
:target,
.prose h2[id], .prose h3[id],
.toc a[href^="#"] { scroll-margin-top: 80px; }

/* ---- Layout ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 40px; }

/* ---- Type utilities ---- */
.kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-copper-dk); }
.kicker-gold { color: var(--tnb-gold); }
.serif { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em; color: var(--tnb-ink); }
.italic { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.data { font-family: var(--font-mono); }

/* ---- Data tags / chips ---- */
.tag { display: inline-block; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--tnb-pine); background: var(--tnb-sand); border-radius: 2px; padding: 5px 10px; }
.tag-outline { background: transparent; color: var(--tnb-copper-dk); box-shadow: inset 0 0 0 1px var(--tnb-copper); }
.tag-dark { background: rgba(16,22,14,0.5); color: var(--tnb-on-dark-cream); }  /* dark backing so hero tags stay legible over any photo (was light-translucent → invisible on bright photos) */

/* ---- Buttons ---- */
.btn { font-family: var(--font-ui); font-weight: 600; font-size: 14px; border-radius: 2px; padding: 10px 18px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard); }
.btn-primary { background: var(--tnb-pine); color: var(--tnb-on-dark); }
.btn-primary:hover { background: var(--tnb-pine-deep); }
.btn-copper { background: var(--tnb-copper-dk); color: #fff; }
.btn-copper:hover { background: #7e4a29; }
.btn-ghost { background: transparent; color: var(--tnb-on-dark); border-color: rgba(244,239,227,0.5); }
.btn-ghost:hover { background: rgba(244,239,227,0.12); }
.btn-outline { background: transparent; color: var(--tnb-pine); border-color: var(--tnb-line); }
.btn-outline:hover { background: var(--tnb-sand); }

/* ---- Chrome: disclosure + nav ---- */
.disclosure { background: var(--tnb-pine-deep); color: var(--tnb-on-dark-cream); text-align: center; padding: 7px 40px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
nav.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; background: var(--tnb-white); border-bottom: 1px solid var(--tnb-line); box-shadow: 0 2px 16px rgba(27,33,24,0.06); }
.brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.brand .wm { line-height: 1; }
.brand .wm b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--tnb-ink); }
.brand .wm s { display: block; text-decoration: none; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.34em; color: var(--tnb-copper-dk); margin-top: 3px; margin-left: -1.5px; }
/* On-dark (footer) lockup: recolor the wordmark for the deep-pine surface so
   "True North" isn't ink-on-pine. White variant only — glyph is already reversed.
   Doubled .brand.brand--on-dark to win on specificity, not source order. */
.brand.brand--on-dark .wm b { color: var(--tnb-on-dark); }
.brand.brand--on-dark .wm s { color: var(--tnb-gold); }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn), .nav-links span { font-size: 14px; font-weight: 500; color: var(--tnb-stone-700); cursor: pointer; }
.nav-links a.active, .nav-links a:not(.btn):hover, .nav-links span:hover { color: var(--tnb-copper-dk); }
.nav-links a.active { border-bottom: 1.5px solid var(--tnb-copper); padding-bottom: 3px; }

/* Dropdown nav (Areas ▾ / Guides ▾) — WAI-ARIA disclosure. The parent .nav-top is a real
   link to the hub; the .nav-caret button toggles .nav-item.is-open (main.js). The panel is
   absolutely positioned so it never widens the bar (QA-014). Mobile flattens it — theme.css. */
.nav-item { position: relative; display: flex; align-items: center; gap: 3px; }
.nav-caret { display: inline-flex; align-items: center; border: 0; background: transparent; cursor: pointer; padding: 4px; color: var(--tnb-stone-700); line-height: 1; }
.nav-caret:hover, .nav-item.is-open .nav-caret { color: var(--tnb-copper-dk); }
.nav-caret .caret { font-size: 10px; transition: transform var(--dur) var(--ease-standard); }
.nav-item.is-open .nav-caret .caret { transform: rotate(180deg); }
.nav-dd { display: none; position: absolute; top: 100%; left: 0; min-width: 190px; flex-direction: column; background: var(--tnb-white); border: 1px solid var(--tnb-line); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(27,33,24,0.10); padding: 8px 0; z-index: 30; }
.nav-item.is-open .nav-dd { display: flex; }
.nav-dd a { padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--tnb-stone-700); white-space: nowrap; }
.nav-dd a:hover { color: var(--tnb-copper-dk); background: var(--tnb-sand); }

/* Site-search control (Ghost Sodo Search trigger, [data-ghost-search]). HIDDEN by default and
   revealed only once main.js confirms JS is present (`.has-search` on nav.bar) — Sodo binds via
   {{ghost_head}} JS, so with JS off the button would be an inert dead control; hide-until-JS keeps
   it from ever rendering as one (Critic Checkpoint-C, 2026-07-20). NOTE: Sodo indexes posts/tags/
   authors, not pages. Icon-only on the desktop bar; the "Search" label shows when the mobile
   burger panel flattens (theme.css). */
.nav-search { display: none; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; padding: 4px; color: var(--tnb-stone-700); line-height: 1; }
nav.bar.has-search .nav-search { display: inline-flex; }
.nav-search:hover { color: var(--tnb-copper-dk); }
.nav-search-ic { display: block; }
.nav-search-label { display: none; }

/* Desktop: open the panel on HOVER + keyboard FOCUS-WITHIN, alongside the click-to-pin
   disclosure (mobile flattens instead — theme.css ≤760). This is the expected nav behavior:
   hovering the item (or tabbing to its link) reveals the menu; clicking the label still
   navigates to the hub. Scoped above the burger breakpoint so it never fights the mobile panel. */
@media (min-width: 981px) {
  .nav-item.has-dd:hover .nav-dd,
  .nav-item.has-dd:focus-within .nav-dd { display: flex; }
  .nav-item.has-dd:hover .nav-caret .caret,
  .nav-item.has-dd:focus-within .nav-caret .caret { transform: rotate(180deg); }
}

/* ---- /areas/ geo-hub (page-areas.hbs) — town cards w/ photo + neighborhood sub-links ---- */
.areas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 4px 0 44px; }
.area-card { border: 1px solid var(--tnb-line); border-radius: var(--radius-sm); background: var(--tnb-white); overflow: hidden; }
.area-card .ac-photo { height: 128px; background-size: cover; background-position: center; }
.area-card .ac-body { padding: 20px 24px 22px; }
.area-card--guides, .area-card--guides .ac-body { background: var(--tnb-sand); }
.area-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.1; margin: 0 0 8px; }
.area-card h3 a { color: var(--tnb-ink); }
.area-card h3 a:hover { color: var(--tnb-copper-dk); }
.area-card .dek { color: var(--tnb-stone-700); margin: 0 0 15px; }
.area-hoods { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.area-hoods a { font-size: 13.5px; font-weight: 500; color: var(--tnb-pine); border-bottom: 1px solid var(--tnb-line); padding-bottom: 1px; }
.area-hoods a:hover { color: var(--tnb-copper-dk); border-color: var(--tnb-copper); }
@media (max-width: 640px) { .areas-grid { grid-template-columns: 1fr; } }

/* ---- Section heading ---- */
.sec { padding: 60px 0 12px; }
.band-tint { background: var(--tnb-sand); }
.sec.band-tint { padding: 52px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.sec-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1.06; color: var(--tnb-ink); margin: 10px 0 0; }
.more { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tnb-pine); border-bottom: 1.5px solid var(--tnb-copper); padding-bottom: 2px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }

/* ---- Freshness stamp (AEO / recency moat) ---- */
.freshness { display: inline-flex; white-space: nowrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--tnb-line); border-radius: 2px; padding: 5px 10px; color: var(--tnb-stone-500); }
.freshness.on-dark { color: var(--tnb-on-dark-cream); border-color: rgba(244,239,227,0.28); background: rgba(16,22,14,0.5); }  /* dark backing → legible over any hero photo */
.freshness .dot { width: 6px; height: 6px; border-radius: 50%; background: #4f8a52; box-shadow: 0 0 0 3px rgba(79,138,82,0.18); }
.freshness.on-dark .dot { background: var(--tnb-pine-live); box-shadow: 0 0 0 3px rgba(127,174,127,0.18); }

/* ===================================================================
   ArticleCard — the canonical content card.
   Used in: home featured guides, listing grid, related posts.
   =================================================================== */
.acard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; overflow: hidden; box-shadow: var(--shadow-card); cursor: pointer; transition: box-shadow var(--dur) var(--ease-standard); }
.acard:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.acard .ph { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.acard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-standard); }
.acard:hover .ph img { transform: scale(1.04); }
.acard .badge-l, .acard .badge-r { position: absolute; top: 13px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; border-radius: 2px; padding: 6px 10px; box-shadow: var(--shadow-raised); }
.acard .badge-l { left: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tnb-ink); background: var(--tnb-paper); }
.acard .badge-r { right: 13px; color: #fff; background: var(--tnb-copper-dk); }
.acard .body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.acard .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-copper-dk); margin-bottom: 10px; }
.acard h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--tnb-ink); margin: 0 0 12px; }
.acard .dek { font-size: 14px; line-height: 1.55; color: var(--tnb-stone-500); margin: 0 0 16px; }
.acard .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.acard .meta { margin-top: auto; display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--tnb-stone-400); }
.acard .meta .sep { color: var(--tnb-line); }

/* Horizontal featured variant */
.acard--row { flex-direction: row; min-height: 340px; }
.acard--row .ph { aspect-ratio: auto; flex: 0 0 50%; min-height: 340px; }
.acard--row .body { padding: 40px 44px; justify-content: center; }
.acard--row .eyebrow { color: var(--tnb-copper-dk); }
.acard--row h3 { font-size: 36px; line-height: 1.1; margin-bottom: 14px; }
.acard--row .dek { font-size: 16px; line-height: 1.6; margin-bottom: 22px; }
/* Tile variant — the Library "Start here" cornerstones: image + badge + title only (no eyebrow/
   excerpt/meta), so it reads as a compact visual shortcut, distinct from the full grid cards. */
.acard--tile .body { padding: 15px 18px 17px; }
.acard--tile h3 { font-size: 19px; line-height: 1.22; margin: 0; }

/* Card grid */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Honest-Take callout (signature device) ---- */
.htake { background: #fff; border-left: 3px solid var(--tnb-copper); border-radius: 0 3px 3px 0; box-shadow: var(--shadow-card); padding: 24px 28px; }
.htake .htake-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-copper-dk); margin-bottom: 12px; }
.htake p { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.45; color: var(--tnb-ink); margin: 0; }

/* ---- Editorial full-bleed photo break ---- */
.break { position: relative; min-height: 460px; display: flex; align-items: center; color: var(--tnb-on-dark); overflow: hidden; }
.break .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.break .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,28,18,0.82) 0%, rgba(20,28,18,0.55) 55%, rgba(20,28,18,0.30) 100%); }
.break .inner { position: relative; max-width: 620px; }
.break .take-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-gold); margin-bottom: 16px; }
.break blockquote { font-family: var(--font-display); font-weight: 600; font-size: 42px; line-height: 1.12; color: #fff; margin: 0; }
.break blockquote em { font-style: italic; font-weight: 500; color: var(--tnb-gold); }

/* ---- Newsletter band ---- */
.news { position: relative; min-height: 360px; display: flex; align-items: center; color: var(--tnb-on-dark); overflow: hidden; }
.news .bg { position: absolute; inset: 0; background-size: cover; background-position: center 40%; }
.news .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,18,0.55), rgba(20,28,18,0.82)); }
.news .inner { position: relative; width: 100%; text-align: center; padding: 56px 0; }
.news h2 { font-family: var(--font-display); font-weight: 600; font-size: 44px; color: #fff; margin: 14px 0 12px; }
.news p { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--tnb-on-dark-cream); margin: 0 auto 26px; max-width: 540px; }
.news form { display: flex; gap: 10px; justify-content: center; max-width: 480px; margin: 0 auto; }
.news input { flex: 1; font-family: var(--font-ui); font-size: 15px; padding: 12px 16px; border-radius: 2px; border: 1px solid rgba(244,239,227,0.4); background: rgba(244,239,227,0.12); color: #fff; }
.news input::placeholder { color: var(--tnb-on-dark-muted); }

/* Inline (slim) newsletter CTA for within articles */
.inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--tnb-pine-deep); color: var(--tnb-on-dark); border-radius: 3px; padding: 28px 32px; margin: 40px 0; }
.inline-cta .t { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; color: #fff; margin: 0 0 7px; }
.inline-cta .s { font-family: var(--font-ui); font-size: 14px; color: var(--tnb-on-dark-cream); margin: 0; }
.inline-cta form { display: flex; gap: 8px; }
.inline-cta input { font-family: var(--font-ui); font-size: 14px; padding: 10px 14px; border-radius: 2px; border: 1px solid rgba(244,239,227,0.4); background: rgba(244,239,227,0.12); color: #fff; min-width: 200px; }
.inline-cta input::placeholder { color: var(--tnb-on-dark-muted); }

/* ---- Footer ---- */
footer { background: var(--tnb-pine-deep); color: var(--tnb-on-dark); padding: 48px 40px 36px; }
.foot-top { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 13px; }
.foot-brand .wm b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.foot-brand .wm s { display: block; text-decoration: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.42em; color: var(--tnb-gold); margin-top: 3px; }
.foot-nav { display: flex; gap: 48px; flex-wrap: wrap; }
.foot-col h5 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-on-dark-muted); margin: 0 0 12px; }
.foot-col a { display: block; font-size: 13px; color: var(--tnb-on-dark-cream); line-height: 2; }
.foot-col a:hover { color: #fff; }
.foot-contact { font-family: var(--font-mono); font-size: 12px; color: var(--tnb-on-dark-muted); line-height: 2; }
.foot-legal { max-width: 1180px; margin: 26px auto 0; border-top: 1px solid rgba(244,239,227,0.16); padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot-legal .disc { font-size: 11px; color: var(--tnb-on-dark-muted); max-width: 560px; line-height: 1.5; }
.eho { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tnb-on-dark-muted); }

/* ===================================================================
   Content listing — filter bar + pagination
   =================================================================== */
/* The Library facet bar (page-library.hbs). Ships [hidden] in the template so a no-JS reader never
   sees dead controls; main.js removes [hidden] once the chips are wired. The :not([hidden]) scope
   is load-bearing — a bare `.filterbar { display:flex }` would override the UA [hidden] and show it.
   STYLE: matches the town-hub "By move" lane strip (.lane-strip/.lane) — a sand band of borderless
   text pills, white on hover; the toggle-active pill is pine-filled (the lanes are links, so they
   have no active state; the Library chips do). */
.filterbar { margin-bottom: 40px; }
/* Unified filter panel: ONE sand card holding two axis rows (area / type), split by a hairline
   divider — each row is a pinned copper axis label + its lane-style pills. Reads as one intentional
   two-dimension control, not two floating blocks. The label sits OUTSIDE .chips so it stays put
   while the pills scroll horizontally on mobile. */
.filterbar:not([hidden]) { display: block; background: var(--tnb-sand); border-radius: var(--radius-sm); padding: 2px 14px; }
.filter-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.filter-row + .filter-row { border-top: 1px solid var(--tnb-line); }
.filter-axis { flex: none; width: 44px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-copper-dk); }
.filter-row .chips { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.fchip { font-family: var(--font-ui); font-weight: 500; font-size: 13.5px; color: var(--tnb-pine); background: transparent; border: 0; border-radius: var(--radius-xs); padding: 7px 15px; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease-standard), color var(--dur); }
.fchip:hover { background: var(--tnb-white); color: var(--tnb-copper-dk); }
.fchip:focus-visible { outline: 2px solid var(--tnb-copper-dk); outline-offset: 2px; }
.fchip.active { background: var(--tnb-pine); color: var(--tnb-on-dark); }
.sort { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tnb-stone-400); white-space: nowrap; cursor: pointer; }
.sort b { color: var(--tnb-stone-700); font-weight: 500; }
.sort:hover { color: var(--tnb-copper-dk); }

/* Collection pagination (pagination.hbs, <a>) AND the client-side pager main.js builds for
   /library/ (<button> — same look). */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 56px 0 0; }
.pagination a, .pagination button { font-family: var(--font-mono); font-size: 13px; color: var(--tnb-stone-700); background: none; border: 1px solid var(--tnb-line-control); border-radius: 2px; min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; cursor: pointer; }
.pagination a:hover, .pagination button:hover { border-color: var(--tnb-copper); color: var(--tnb-copper-dk); }
.pagination a.active, .pagination button.active { background: var(--tnb-pine); color: var(--tnb-on-dark); border-color: var(--tnb-pine); }
.pagination a.disabled, .pagination button.disabled, .pagination button:disabled { color: var(--tnb-stone-300); pointer-events: none; border-color: var(--tnb-line); cursor: default; }
.pagination .pg-gap { font-family: var(--font-mono); font-size: 13px; color: var(--tnb-stone-400); padding: 0 2px; }

/* Library — "Start here" cornerstone row (compact 4-across; distinct from the 3-across main wall)
   + the facet empty state. No `display` on .lib-empty / the [data-starthere] section, so the
   `hidden` attribute (UA display:none) hides them; JS toggles it. */
.lib-cornerstones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.lib-empty { text-align: center; padding: 44px 0 8px; color: var(--tnb-stone-500); font-size: 15px; }
.lib-empty-reset { background: none; border: 0; padding: 0; font: inherit; color: var(--tnb-copper-dk); text-decoration: underline; cursor: pointer; }
.lib-empty-reset:hover { color: var(--tnb-copper); }

/* ===================================================================
   Content detail — breadcrumb, byline, quick answer, prose, etc.
   =================================================================== */
.breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tnb-stone-400); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--tnb-copper-dk); }
.breadcrumb .sep { color: var(--tnb-line); }
.breadcrumb .cur { color: var(--tnb-stone-700); }

/* Byline / article meta row */
.byline { display: flex; align-items: center; gap: 14px; }
.byline .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--tnb-sand); flex: none; }
.byline .who b { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--tnb-ink); }
.byline .who span { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--tnb-stone-400); margin-top: 2px; }
.byline .stamps { margin-left: auto; display: flex; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--tnb-stone-400); }

/* Quick-Answer (AEO answer-first block) */
.quickanswer { background: var(--tnb-sand); border-radius: 3px; padding: 26px 30px; margin: 0 0 36px; }
.quickanswer .qa-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-copper-dk); margin-bottom: 10px; }
.quickanswer p { font-family: var(--font-ui); font-size: 17px; line-height: 1.6; color: var(--tnb-ink); margin: 0; }
.quickanswer p strong { font-weight: 700; }

/* Article prose */
.prose { font-family: var(--font-ui); font-size: 18px; line-height: 1.7; color: var(--tnb-stone-700); }
.prose > p { margin: 0 0 22px; }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.1; color: var(--tnb-ink); margin: 44px 0 8px; }
.prose h2 + .qa-lede { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--tnb-stone-500); margin: 0 0 18px; padding-left: 14px; border-left: 2px solid var(--tnb-sand); }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 23px; color: var(--tnb-ink); margin: 30px 0 8px; }
.prose a { color: var(--tnb-copper-dk); border-bottom: 1px solid rgba(185,122,78,0.4); }
.prose a:hover { border-bottom-color: var(--tnb-copper); }

/* Buttons authored inside article content (kg html cards) must not inherit the
   prose link underline/color. Specificity (0,2,0) beats `.prose a` (0,1,1). */
.prose a.btn, .gh-content a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-bottom: 0; }
.prose a.btn:hover, .gh-content a.btn:hover { border-bottom: 0; }
.prose a.btn-primary, .gh-content a.btn-primary { color: var(--tnb-on-dark); }
.prose a.btn-copper, .gh-content a.btn-copper { color: #fff; }
.prose a.btn-outline, .gh-content a.btn-outline { color: var(--tnb-pine); }
.prose a.btn-ghost, .gh-content a.btn-ghost { color: var(--tnb-on-dark); }

.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--tnb-copper-dk); }
.prose strong { color: var(--tnb-ink); font-weight: 600; }
.prose .inline-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; }
.prose .inline-tags > * { white-space: nowrap; }
.prose figure { margin: 32px 0; }
.prose figure img { width: 100%; border-radius: 3px; }
.prose figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--tnb-stone-400); margin-top: 10px; }

/* Pull-quote */

/* Stat row (data grid inside article) — canonical card markup: .statrow > .cell > (.v, .l, .sub) */
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--tnb-line-soft); border: 1px solid var(--tnb-line-soft); border-radius: 3px; overflow: hidden; margin: 32px 0; }
.statrow .cell { background: #fff; padding: 22px 20px; display: flex; flex-direction: column; }
.statrow .v { font-family: var(--font-mono); font-weight: 500; font-size: 30px; color: var(--tnb-ink); line-height: 1; }
.statrow .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tnb-stone-500); margin-top: 9px; }
.statrow .sub { font-size: 12px; color: var(--tnb-stone-500); margin-top: 5px; }

/* Source / illustrative caption tied to a stat row or table above it */
.prose .src-line, .gh-content .src-line { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--tnb-stone-500); margin: -18px 0 30px; }

/* Comparison table */
/* ✅ QA-015 FIXED 2026-07-16 — the TABLE scrolls, the PAGE never does.
   `display:block` turns the table into its own scroll container, exactly as `.ig-body` already
   did for infographics. That asymmetry was the whole bug: the pillar looked clean at 380px
   while every table-bearing sibling slid the entire page sideways, so nothing pointed at them.
   Was: ALL FIVE live table posts scrolled the page at 380px (tables rendering 367–594px inside
   a 244px column; e.g. `documentElement.scrollWidth` 637 vs clientWidth 380). A wide table on a
   phone is fine — a wide PAGE is not.
   Measured on all 5 at 380 AND 1280 before applying (the desktop half is the one that could
   have regressed, and it did not): page-scroll true→false on every post at 380; at 1280 four
   tables sit unchanged at 702px — they still FILL the column, `width:100%` still applies to the
   block box — and `border-collapse` survives everywhere. The fifth (`what-1m-to-1-5m…`) was
   ALREADY overflowing its 702px container by 9px at desktop and is now contained, so this fixes
   a second defect nobody had noticed.
   CSS-only ⇒ all five posts repaired with NO re-export. Landed BEFORE the content ramp on
   purpose: the fix cost is constant, the deferral cost grows with every piece (~35 queued would
   have inherited it). */
.ctable { display: block; overflow-x: auto; width: 100%; max-width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15px; }
.ctable caption { caption-side: bottom; text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--tnb-stone-400); margin-top: 10px; }
.ctable th, .ctable td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--tnb-line-soft); }
/* stone-700, not stone-500: this header sits on sand, where the muted tier fails AA (the SAND
   RULE, tokens/colors.css). It USED to declare stone-500 here and get silently rescued by a
   `color: var(--tnb-stone-700)` override parked ~690 lines below — so reading this rule told you
   the header was 3.95:1 while the page rendered 8.72:1. Both statements can't be the contract;
   the value now lives where the component is. */
.ctable thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tnb-stone-700); background: var(--tnb-sand); border-bottom: 1px solid var(--tnb-line); }
.ctable td.num, .ctable th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tnb-ink); }
.ctable tbody tr:hover { background: rgba(230,220,198,0.25); }
.ctable td:first-child { font-weight: 600; color: var(--tnb-ink); }

/* ═══════════ STORYTELLING COMPONENTS (2026-07-11 palette build) ═══════════
   Per-type genre signatures — spec + evidence: docs/plans/2026/2026-07/
   2026-07-11-storytelling-components-build.md. Design laws from the review:
   components read EDITORIAL (typography + hairline rules), never promo-tile
   (banner blindness); every rendered figure carries source + as-of anatomy
   (GEO/KDD'24: statistics + citations lift AI-citation ~30-40%); ~one
   component per H2 section; delta direction = glyph + sr-only text, never
   color alone (WCAG 1.4.1). */

/* Screen-reader-only utility (delta direction text) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* .matchup — the side-by-side trade-off (comparison / move-up signature).
   Post-body sibling of the homepage .tradeoff band (theme.css — deliberately
   distinct name). Deep-pine INSET card, no shadow (editorial, not promo).
   Gold-on-pine-deep = 4.7:1 → sanctioned for the LARGE .mu-price only.
   Required anatomy: .mu-verdict (the ad-antidote) + .mu-src (figures cite). */
.matchup { background: var(--tnb-pine-deep); border-radius: 3px; padding: 30px 32px 26px; margin: 40px 0; }
.matchup .mu-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-gold); margin: 0 0 20px; }
.matchup .mu-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: start; }
.matchup .mu-side { min-width: 0; }
.matchup .mu-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: #fff; margin: 0 0 6px; }
.matchup .mu-price { font-family: var(--font-mono); font-weight: 500; font-size: 24px; color: var(--tnb-gold); margin: 0 0 14px; } /* 24px = HARD MINIMUM: gold-on-pine-deep 4.69:1 is sanctioned as LARGE text only (≥24px); also sized so a 17-char range ("~1,800–2,700 sqft") fits one line in a ~262px mu-side (27px wrapped — render review D1) */
.matchup .mu-facts { list-style: none; margin: 0; padding: 0; }
.matchup .mu-facts li { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--tnb-on-dark-cream); padding: 7px 0; border-top: 1px solid rgba(244,239,227,0.14); margin: 0; }
.matchup .mu-vs { align-self: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,239,227,0.65); border: 1px solid rgba(244,239,227,0.28); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } /* 0.65 → 5.2:1 (aria-hidden decorative; hardened anyway) */
.matchup .mu-verdict { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.5; color: var(--tnb-on-dark-cream); border-top: 1px solid rgba(244,239,227,0.18); margin: 24px 0 0; padding-top: 18px; }
.matchup .mu-src { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--tnb-on-dark-cream); opacity: 0.8; margin: 10px 0 0; }
/* Links inside the dark matchup (e.g. a future linked citation in .mu-src) — the
   .prose copper-dk link color would fail on pine-deep; gold + soft cream underline. */
.matchup a { color: var(--tnb-gold); border-bottom: 1px solid rgba(244,239,227,0.4); }

/* .fastfacts — scannable place/entity card (neighborhood / relocation signature).
   Label/value ROWS (5-8) — a different geometry from .statrow's joined
   big-number grid. Required anatomy: .ff-src (the numbers cite their source). */
.fastfacts { background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; padding: 8px 24px 14px; margin: 36px 0; }
.fastfacts .ff-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-copper-dk); margin: 14px 0 6px; }
.fastfacts .ff-row { display: flex; gap: 18px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--tnb-line-soft); }
.fastfacts .ff-row:first-of-type { border-top: 0; }
.fastfacts .ff-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tnb-stone-400); flex: none; }
.fastfacts .ff-v { font-size: 14.5px; line-height: 1.45; color: var(--tnb-ink); text-align: right; }
.fastfacts .ff-src { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--tnb-stone-500); border-top: 1px solid var(--tnb-line-soft); padding-top: 10px; margin: 4px 0 0; }

/* .statcards — market hero-metric cards (market-report / pulse signature).
   DISCRETE cards (real gap + border) vs .statrow's joined 1px-gap grid.
   Delta: shape + text carry direction (▲/▼/— + sr-only), color is brand.
   Required anatomy: .sc-src on every card (source · as-of). */
.statcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 36px 0; }
.statcards .scard { background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; padding: 20px 22px 16px; display: flex; flex-direction: column; }
.statcards .sc-l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tnb-stone-500); }
.statcards .sc-v { font-family: var(--font-mono); font-weight: 500; font-size: 32px; line-height: 1.1; color: var(--tnb-ink); margin: 8px 0 4px; }
.statcards .sc-d { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; margin-bottom: 12px; }
.statcards .sc-d--up { color: var(--tnb-pine); }
.statcards .sc-d--down { color: var(--tnb-copper-dk); }
.statcards .sc-d--flat { color: var(--tnb-stone-500); }
.statcards .sc-src { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--tnb-stone-500); border-top: 1px solid var(--tnb-line-soft); padding-top: 9px; margin-top: auto; }

/* .datanote — "About this data" methodology note (market types).
   The trust move no local competitor makes: source + pull date + exclusions.
   Mono BODY at 13px (11px mono is for labels, not sentences). */
.datanote { border: 1px solid var(--tnb-line); border-radius: 3px; padding: 16px 20px; margin: 30px 0; }
.datanote .dn-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-copper-dk); margin: 0 0 8px; }
.datanote p + p { margin-top: 12px; } /* a datanote long enough to need paragraphing was unauthorable — surfaced at its first non-report use, 2026-07-12 */
.datanote p { font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: var(--tnb-stone-700); margin: 0; }

/* .steps — decision/process/PHASED sequence (guide family + relocation).
   The numeral (copper-dk, 4.76:1) is the information carrier; the gold circle
   is DECORATIVE only (2.1:1 — fails 1.4.11 as a signal, sanctioned as decor).
   .st-when turns it into the relocation phased checklist. Neutralizes the
   .prose list styling (copper ::marker would double the numerals). */
.prose .steps, .gh-content .steps { list-style: none; padding-left: 0; margin: 36px 0; counter-reset: steps; }
.steps li { counter-increment: steps; position: relative; padding-left: 56px; margin: 0 0 26px; }
.steps li::marker { content: ""; }
.steps li::before { content: counter(steps); position: absolute; left: 0; top: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--tnb-copper-dk); background: #fff; border: 1px solid var(--tnb-gold); border-radius: 50%; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: -22px; width: 1px; background: var(--tnb-line); }
.steps .st-when { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tnb-stone-400); margin: 0 0 3px; }
.steps .st-t { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--tnb-ink); margin: 0 0 6px; }
.steps li p:last-child { margin-bottom: 0; }

/* .callout — exactly TWO variants (evidence-capped). Geometry deliberately
   locked APART from .htake: transparent on paper, no card, no shadow, thin
   left rule, BODY register (display-italic stays .htake's signature). */
.callout { border-left: 2px solid var(--tnb-line-control); padding: 2px 0 2px 20px; margin: 30px 0; background: transparent; }
.callout .co-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px; }
.callout p { font-size: 16.5px; line-height: 1.65; color: var(--tnb-stone-700); margin: 0; }
.callout--rule { border-left-color: var(--tnb-pine); }
.callout--rule .co-kicker { color: var(--tnb-pine); }
.callout--watch { border-left-color: var(--tnb-copper); } /* border = non-text, base copper OK */
.callout--watch .co-kicker { color: var(--tnb-copper-dk); }

/* .pfigure — inline figure source note (.prose figure/figcaption already styled).
   .pf-credit renders the REQUIRED stock-image attribution ("Photo by X on Unsplash"),
   emitted by the image tools + gate-checked for Unsplash-sourced images (ADR-0016). */
.pfigure .pf-src { font-family: var(--font-mono); color: var(--tnb-stone-400); }
.pfigure .pf-credit { font-family: var(--font-mono); font-size: 11px; color: var(--tnb-stone-400); }
.pfigure .pf-by { color: var(--tnb-copper-dk); }

/* .infographic — the designed-composite editorial graphic (ADR-0016, 2026-07-16).
   Live HTML + flexbox (deliberately Satori-rasterizable for the PNG-export leg — no
   CSS grid inside). Two REQUIRED slots make it honest + accessible: .ig-src (every
   figure-bearing component carries its source) and .ig-data (a screen-reader / AI
   plain-text fallback — the numbers stay live DOM text, never locked in vector art;
   the same discipline as .compbars' .cb-v). A supporting graphic, NOT a hero data
   viz — it composes several facts into one studied picture. Light post-body register,
   matching .statcards / .datanote. Kit supports a phased/flow timeline + a stat row;
   bespoke vector art goes in an inline <svg> inside .ig-body (fill via currentColor). */
.infographic { border: 1px solid var(--tnb-line); border-radius: 3px; padding: 22px 24px 16px; margin: 36px 0; background: var(--tnb-white); }
.infographic .ig-title { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.15; color: var(--tnb-ink); margin: 0 0 4px; }
.infographic .ig-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tnb-copper-dk); margin: 0 0 18px; }
.infographic .ig-body { display: flex; flex-direction: column; gap: 14px; overflow-x: auto; }
/* SVG infographics SCALE — this is the whole mobile trap, and it shipped twice (2026-07-16).
   An svg with a fixed viewBox rendered into a 244px column runs at scale 0.37, so text
   authored at "12 units" lands at 4.4 CSS px: unreadable, and invisible to every check that
   reads source or screenshots at desktop width. CSS classes above are immune (a px is a px);
   only in-svg text scales. So the FIGURE scrolls instead of the page, and the svg gets a real
   floor. Coupled contract, gated by validate-post as ARITHMETIC, not a rule of thumb:
   font_units × (min-width ÷ viewBox_width) >= 14 CSS px. Three levers, all inline-overridable:
   bigger text · a bigger min-width (scrolls more) · or min-width == max-width == viewBox so
   scale is 1.0 and units ARE px — the opt-OUT, correct for a compact instrument that fits the
   244px column. Cost of this floor, stated plainly: EVERY svg infographic now swipes ~2.5x on a
   380px phone, including one that would have fit — use the opt-out when it applies.

   BUT THE OPT-OUT IS NOT A FIX, IT IS THE OTHER HORN — and this comment used to imply otherwise,
   which is how the desktop defect shipped. 244px mobile vs 652px desktop is 2.67x, and for a
   text-bearing svg the arithmetic is CLOSED: >=14px at 244 needs font_units >= 0.0574*viewBox_width,
   <=20px at 652 needs <= 0.0307*viewBox_width. Nothing satisfies both. So you are always choosing
   WHICH viewport to sacrifice: pin to 244 (desktop frozen at phone width) or author at ~652 (a
   2.7x mobile swipe). Both have now shipped; each hides from the other's screenshot. The real
   escape is to stop putting text in the svg: validate-post exempts a pure-geometry body
   ("nothing to read"), and the .ig-row/.ig-node/.ig-stat kit below is immune by construction —
   a CSS px is a px, so it fills desktop, stacks at 244, and never scrolls.
   HTML-variant infographics (.ig-row/.ig-node) are unaffected — direct svg child only.

   margin-inline:auto is NOT cosmetic — it is the other half of the opt-out. Pinning
   max-width == viewBox freezes the svg at (say) 244px, and a block element then sits hard
   LEFT in the 652px desktop column: a phone-width strip with 408px of dead space beside it,
   under an .ig-src line running wider than the graphic it cites. It shipped that way, and the
   operator caught it by eye. The commute rail escaped only because its author happened to
   write inline `margin:0 auto` — i.e. the contract relied on remembering, which is the same
   failure class as the feature-image hand-copy. Centering belongs to the component, not to
   authors. (Harmless for a full-width/scrolling svg: auto margins resolve to 0 with no room.) */
.infographic .ig-body > svg { min-width: 600px; margin-inline: auto; }
.infographic .ig-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.infographic .ig-node { flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; background: var(--tnb-sand); border-radius: 3px; padding: 14px 16px; }
/* A card holding an .ig-stat may not shrink below the number it holds. The stat is ONE
   unbreakable mono token, and every price in this market is 7 figures. At the generic 150px
   floor the content box is 118px and the number rendered CLIPPED ("$1,275,0"), 45px past the
   card edge, with the figure scrolling — at ~450–620px viewports (phone landscape, split-screen,
   a resized window), the band BETWEEN the 380px and 1280px screenshots the Design Editor takes,
   which is precisely why it hid: 380 stacks (safe), 1280 is 3-up (safe), nothing looks between.

   TWO SEPARATE DECISIONS, because 208 alone is NOT the rule it looks like:
   1. `min-width: 208px` buys the EVEN 3-up row — it is (652 − 2×14)/3, i.e. the desktop column
      divided by three. It is a LAYOUT number, derived from the column, not from the content.
      Below 652 the row wraps to fewer columns instead of clipping.
   2. `.ig-stat: 26px` makes the number actually FIT that card — this is the content half, and
      the first cut of this rule skipped it. Budget to the visible card edge = 208 − 16 = 192px.
      At the old 30px: "$1,275,000" = 180px (12px slack — clears by luck) but "$12,750,000" =
      198px, which SPILLS 6px past the card edge: the original defect, one digit later. At 26px:
      172px for 11 chars, 20px of slack. The constant was tuned to one string; the size is tuned
      to the constraint.
   THE TRADE, named (it is the same shape as the SVG horns, and it went unnoticed as a choice):
   the 652px column CANNOT hold three 30px 7-figure cards. Either shrink the number and keep the
   3-up, or use `min-width: min-content` (~212px) and accept 2-up on desktop. We shrink the
   number: the tier taxonomy reads better 3-up, and 26px is still ~2× the card's body text.
   Scoped with :has() so a text-only row (a 4-step timeline) keeps the 150px floor and its
   single-row layout. If :has() is unsupported the whole rule drops and the 150px clip returns —
   a fail-OPEN, accepted only because :has() is baseline since Dec 2023.
   Two caveats, stated so nobody reads more into the numbers than is there: the 3-up row holds
   only at viewport ≥1136px (the prose track is min(800, vw − 336), so .ig-body < 652 below
   that ⇒ 2-up — correct, just not "always 3-up"); and a FOUR-card stat row does not fit 652 at
   all — the 4th wraps and `flex: 1 1 0` grows it into a full-width orphan. If a 4-up stat row
   is ever needed it wants its own basis, not this floor. */
.infographic .ig-node:has(.ig-stat) { min-width: 208px; }
/* -on-sand tokens: .ig-node's background IS sand, and the muted tier fails there (see the
   SAND RULE in tokens/colors.css). These two labels shipped at 3.95:1 on the kit's first live
   page — and they are the two that carry the meaning ("$800K–$1.5M · your band" tells the
   reader which tier is theirs; "2025 median sale" is the window that makes the number honest). */
.infographic .ig-node-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tnb-stone-500-on-sand); margin: 0 0 5px; }
.infographic .ig-node-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--tnb-ink); margin: 0 0 5px; }
.infographic .ig-node-d { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--tnb-stone-700); margin: 0; }
.infographic .ig-stat { font-family: var(--font-mono); font-weight: 500; font-size: 26px; line-height: 1.05; color: var(--tnb-pine); }
.infographic .ig-stat-l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--tnb-stone-500-on-sand); margin-top: 4px; }
.infographic .ig-src { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--tnb-stone-500); border-top: 1px solid var(--tnb-line-soft); padding-top: 10px; margin: 18px 0 0; }
/* .ig-data — the a11y/AI plain-text fallback, visually hidden (same recipe as .sr-only). */
.infographic .ig-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══════════ STORYTELLING COMPONENTS, WAVE 2 (2026-07-12 — the 2× palette) ═══════════
   15 evidence-selected additions (research: GEO/KDD'24 causal levers = quotes/stats/
   cited sources; NN/g "fancy formatting looks like an ad" → everything below reads
   EDITORIAL — hairline rules + typography, no promo boxes; GOV.UK inset overuse
   warnings → ration per piece). Spec + evidence: docs/plans/2026/2026-07/
   2026-07-12-palette-wave-2.md. Deliberately SKIPPED per evidence: "what-changed"
   update box (extra visible dates degrade date selection; refresh-workflow bans it),
   big-number herostat (duplicates .statrow), more callout variants (ceiling = 2),
   scores/badges/price boxes (fair-housing / fabricated-proof / no static analog). */

/* .takeaways — the whole-article digest (top of piece; 3–5 bullets, numbers where
   possible). Page-level altitude; the per-H2 answer stays the Quick-Answer standard. */
.takeaways { border-top: 2px solid var(--tnb-pine); border-bottom: 1px solid var(--tnb-line); padding: 18px 0 14px; margin: 34px 0; }
.takeaways .tk-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-pine); margin: 0 0 10px; }
.takeaways ul { list-style: none; margin: 0; padding: 0; }
.takeaways li { position: relative; padding: 5px 0 5px 22px; font-size: 16px; line-height: 1.55; color: var(--tnb-stone-700); margin: 0; }
.takeaways li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; background: var(--tnb-gold); transform: rotate(45deg); }

/* .bottomline — the named closing verdict (Investopedia/Rocket "The Bottom Line").
   Double rule = ledger-close; ROMAN display (italic display stays .htake's). */
.bottomline { border-top: 3px double var(--tnb-ink); padding: 16px 0 0; margin: 40px 0 34px; }
.bottomline .bl-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-copper-dk); margin: 0 0 10px; }
.bottomline p { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.55; color: var(--tnb-ink); margin: 0; }

/* .proscons — one subject's up/downsides (decision pieces only; distinct from the
   two-OPTION .matchup). +/− markers carry the polarity with the header, not color alone. */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 32px 0; }
.proscons .pc-col { border-top: 1px solid var(--tnb-line); padding-top: 12px; min-width: 0; }
.proscons .pc-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px; }
.proscons .pc-col--pro .pc-h { color: var(--tnb-pine); }
.proscons .pc-col--con .pc-h { color: var(--tnb-copper-dk); }
.proscons ul { list-style: none; margin: 0; padding: 0; }
.proscons li { position: relative; padding: 5px 0 5px 20px; font-size: 15px; line-height: 1.55; color: var(--tnb-stone-700); margin: 0; }
.proscons .pc-col--pro li::before { content: "+"; position: absolute; left: 0; font-family: var(--font-mono); font-weight: 600; color: var(--tnb-pine); }
.proscons .pc-col--con li::before { content: "\2212"; position: absolute; left: 0; font-family: var(--font-mono); font-weight: 600; color: var(--tnb-copper-dk); }

/* .checklist — non-sequential tasks (never number a non-sequence). Empty square =
   "yours to do"; the box is decorative, the text carries the task. */
.checklist { list-style: none; margin: 30px 0; padding: 0; }
.checklist li { position: relative; padding: 6px 0 6px 32px; font-size: 16px; line-height: 1.55; color: var(--tnb-stone-700); margin: 0; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 15px; height: 15px; border: 1.5px solid var(--tnb-line-control); border-radius: 2px; }

/* .termbox — a defined term (jargon gate: metro district, transaction-broker…).
   Gold rule + term-first anatomy; the definition ALSO lives in prose (the box is
   never the sole carrier). Ration ~1–2 per piece (GOV.UK inset overuse). */
.termbox { border-left: 3px solid var(--tnb-copper); padding: 4px 0 4px 20px; margin: 30px 0; }
.termbox .tb-term { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--tnb-ink); margin: 0 0 6px; }
.termbox .tb-def { font-size: 15.5px; line-height: 1.6; color: var(--tnb-stone-700); margin: 0; }

/* .compbars — zero-baseline proportional bars (HONESTY LAW: width% = value/max×100
   from ZERO — truncation stays misleading even when labeled, Correll CHI'20). Values
   are real DOM text; the bar div is aria-hidden decoration. */
.compbars { margin: 32px 0; }
.compbars .cb-row { display: grid; grid-template-columns: 110px 1fr 92px; gap: 14px; align-items: center; padding: 7px 0; }
.compbars .cb-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tnb-stone-500); }
.compbars .cb-track { height: 12px; background: var(--tnb-sand); border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--tnb-line-control); }
.compbars .cb-fill { height: 100%; background: var(--tnb-pine); }
.compbars .cb-v { font-family: var(--font-mono); font-size: 13px; color: var(--tnb-ink); text-align: right; }
.compbars .cb-delta { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--tnb-ink); margin: 12px 0 0; }
.compbars .cb-src { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--tnb-stone-500); border-top: 1px solid var(--tnb-line-soft); padding-top: 9px; margin: 8px 0 0; }

/* .rangeband — a min—max band with a marker (position-encoded → a non-zero scale is
   legitimate where bars aren't). Always paired with explicit min/mid/max TEXT values.
   NEVER framed as a valuation/AVM output (no-fake-AVM law) — it describes a market
   band, sourced and dated. */
.rangeband { margin: 34px 0; }
.rangeband .rb-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-stone-500); margin: 0 0 14px; }
.rangeband .rb-track { position: relative; height: 4px; background: var(--tnb-sand); border-radius: 2px; margin: 0 6px; }
.rangeband .rb-seg { position: absolute; top: 0; height: 100%; background: var(--tnb-pine); opacity: 0.35; }
.rangeband .rb-mark { position: absolute; top: 50%; width: 13px; height: 13px; background: var(--tnb-copper); border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: var(--shadow-raised); }
.rangeband .rb-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--tnb-ink); margin: 14px 0 0; }
.rangeband .rb-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11.5px; color: var(--tnb-stone-700); margin-top: 10px; }
.rangeband .rb-src { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--tnb-stone-500); margin: 8px 0 0; }

/* .expertquote — an ATTRIBUTED third-party quote (GEO's top causal lever, +~41%).
   Only real, sourced humans (Freddie Mac economist, assessor, NAR statement, Daniel's
   own authored line) — an invented expert is a fabricated-proof ⛔.
   SEMANTIC (fixed 2026-07-12 at its first real use, Design Editor B): authored as
   <figure class="expertquote"><blockquote class="eq-quote"><p>…</p></blockquote>
   <figcaption>…</figcaption></figure>. It was a <div> of <p>s, so the quotation was
   signalled to sighted users ONLY by the ::before/::after glyphs — presentational, and
   inconsistently exposed to assistive tech (WCAG 1.3.1). The reset below is REQUIRED:
   theme.css's `.prose blockquote` (specificity 0,1,1) would otherwise leak an accent
   rule + italic + 22px into the white card. */
.expertquote { border: 1px solid var(--tnb-line-soft); border-radius: 3px; padding: 22px 26px 18px; margin: 32px 0; background: #fff; }
.prose .expertquote blockquote.eq-quote, .gh-content .expertquote blockquote.eq-quote { border-left: 0; padding: 0; margin: 0 0 12px; font-style: normal; }
.expertquote .eq-quote { font-family: var(--font-display); font-size: 18px; line-height: 1.55; color: var(--tnb-ink); margin: 0 0 12px; }
.expertquote .eq-quote p { margin: 0; font: inherit; color: inherit; }
.expertquote figcaption { margin: 0; }
.expertquote .eq-quote::before { content: "\201C"; color: var(--tnb-copper-dk); }
.expertquote .eq-quote::after { content: "\201D"; color: var(--tnb-copper-dk); }
.expertquote .eq-who { font-size: 14px; font-weight: 600; color: var(--tnb-ink); margin: 0; }
.expertquote .eq-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tnb-stone-500); margin: 2px 0 0; }
.expertquote .eq-src { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--tnb-stone-500); margin: 8px 0 0; }

/* .scenario — the labeled ILLUSTRATIVE example (operationalizes author-voice-integrity:
   a representative example must be CLEARLY framed). Dashed border = hypothetical. */
.scenario { border: 1px dashed var(--tnb-line-control); border-radius: 3px; padding: 20px 24px; margin: 32px 0; }
.scenario .sn-tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tnb-copper-dk-on-sand); background: var(--tnb-sand); border-radius: 2px; padding: 4px 9px; margin: 0 0 12px; }
.scenario p { font-size: 15.5px; line-height: 1.65; color: var(--tnb-stone-700); margin: 0 0 10px; }
.scenario p:last-child { margin-bottom: 0; }

/* .ifthen — static decision branches as HEADED blocks (not a visual tree; GOV.UK:
   don't impose structure on read-only content). Cap 2–4 branches; move-up decisions. */
.ifthen { margin: 32px 0; }
.ifthen .it-row { border-top: 1px solid var(--tnb-line); padding: 14px 0; }
.ifthen .it-row:last-child { border-bottom: 1px solid var(--tnb-line); }
.ifthen .it-if { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tnb-pine); margin: 0 0 6px; }
.ifthen .it-then { font-size: 15.5px; line-height: 1.6; color: var(--tnb-stone-700); margin: 0; padding-left: 18px; position: relative; }
.ifthen .it-then::before { content: "\2192"; position: absolute; left: 0; color: var(--tnb-copper-dk); }

/* .costsheet — a ledger with a total row: a MODIFIER on the real .ctable (semantic
   table = the extraction-friendly form). Line items sourced/dated; commission lines
   framed as negotiable (NAR) — never a set rate. */
.costsheet td:last-child, .costsheet th:last-child { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.costsheet tr.cs-total td { border-top: 2px solid var(--tnb-ink); border-bottom: 0; font-weight: 600; color: var(--tnb-ink); }

/* .foldout — native <details> progressive disclosure ("Show the math"). Never hide
   majority-need content (GOV.UK) — optional depth only, ~1 per piece. Zero JS. */
.foldout { border: 1px solid var(--tnb-line); border-radius: 3px; margin: 30px 0; }
.foldout summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; padding: 14px 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tnb-pine); }
.foldout summary::-webkit-details-marker { display: none; }
.foldout summary::before { content: "+"; font-size: 16px; color: var(--tnb-copper-dk); transition: transform var(--dur) var(--ease-standard); }
.foldout[open] summary::before { transform: rotate(45deg); }
.foldout .fo-body { padding: 2px 20px 18px; font-size: 15px; line-height: 1.65; color: var(--tnb-stone-700); }
.foldout .fo-body p { margin: 0 0 12px; }
.foldout .fo-body p:last-child { margin: 0; }

/* .whofor — reader self-qualification. FAIR-HOUSING LAW: frame by SITUATION (equity
   position, budget band, commute need), NEVER demographics ("perfect for families" ⛔). */
/* OPEN (Design Editor sign-off, 2026-07-12): .whofor shares a pine left-rule silhouette with
   .callout--rule (and .htake/.callout are left-ruled too). In the gallery they are distinct —
   different rule colour AND different anatomy (mono kicker + checks vs kicker + body) — but the
   pair was never rendered TOGETHER. Checked at Checkpoint B (lane-review.md, Design Editor): if a
   piece uses .whofor alongside .htake or a .callout, render and confirm they do not read as the
   same block. Pre-committed fix if they do — a bracketed band, a silhouette nothing else uses:
   .whofor { border-left: 0; border-top: 1px solid var(--tnb-line); border-bottom: 1px solid var(--tnb-line); padding: 14px 0; } */
.whofor { border-left: 3px solid var(--tnb-pine); padding: 4px 0 4px 18px; margin: 32px 0; }
.whofor .wf-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-copper-dk); margin: 0 0 10px; }
.whofor ul { list-style: none; margin: 0; padding: 0; }
.whofor li { position: relative; padding: 5px 0 5px 24px; font-size: 15.5px; line-height: 1.55; color: var(--tnb-stone-700); margin: 0; }
.whofor li::before { content: "\2713"; position: absolute; left: 0; font-family: var(--font-mono); font-weight: 600; color: var(--tnb-pine); }

/* .resources — the in-flow related-reading card (serves the hub-and-spoke law +
   cluster fan-out; NEVER a right rail). Descriptive anchors, end of section/piece. */
.resources { background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; padding: 20px 26px 16px; margin: 36px 0; }
.resources .rs-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-copper-dk); margin: 0 0 10px; }
.resources ul { list-style: none; margin: 0; padding: 0; }
.resources li { border-top: 1px solid var(--tnb-line-soft); padding: 10px 0; margin: 0; }
.resources li:first-child { border-top: 0; }
.resources a { font-size: 15.5px; font-weight: 600; color: var(--tnb-pine); border-bottom: 1px solid var(--tnb-copper); }
.resources a:hover { color: var(--tnb-copper-dk); }
.resources .rs-d { display: block; font-size: 13.5px; color: var(--tnb-stone-500); margin-top: 3px; }

/* .srcbox — the per-piece "Sources & data notes" receipt (GEO Cite-Sources is causal
   and disproportionately rewards low-authority domains). Aggregates; the inline
   src-lines stay.
   ⤷ COLLAPSED BY DEFAULT (operator ruling 2026-07-16): the receipt is for the skeptic and
   the machine, not the reader — it was running 11% of a piece's words in the reader's face.
   Authored as `<details class="srcbox">` + `<summary class="sb-k">`; presence, not
   prominence, is what the AEO cite-sources lever and YMYL verifiability need (same logic as
   .ig-data, which is *fully* hidden and is our AI-citation surface). Every source stays in
   the DOM and in the HTML source — a parser reads a closed <details> exactly like an open
   one. The legacy `<div class="srcbox">` form (5 live posts) renders exactly as before: the
   summary rules below are :where()-free and only bind inside details. */
.srcbox { border-top: 1px solid var(--tnb-line); padding: 14px 0 4px; margin: 36px 0 28px; }
details.srcbox { padding-bottom: 0; }
details.srcbox > summary.sb-k { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 7px; margin: 0; padding: 4px 0; }
details.srcbox > summary.sb-k::-webkit-details-marker { display: none; }
details.srcbox > summary.sb-k::after { content: "+"; font-size: 13px; line-height: 1; color: var(--tnb-stone-500); transition: transform 0.15s ease; }
details.srcbox[open] > summary.sb-k::after { content: "–"; }
details.srcbox > summary.sb-k:hover, details.srcbox > summary.sb-k:focus-visible { color: var(--tnb-copper-dk); }
details.srcbox > summary.sb-k:focus-visible { outline: 2px solid var(--tnb-copper-dk); outline-offset: 3px; }
details.srcbox ul { margin-top: 10px; padding-bottom: 4px; }
.srcbox .sb-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-stone-500); margin: 0 0 10px; }
.srcbox ul { list-style: none; margin: 0; padding: 0; }
.srcbox li { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--tnb-stone-500); padding: 2px 0; margin: 0; }
.srcbox li a { color: var(--tnb-copper-dk); }

/* Author box (E-E-A-T) */
.authorbox { display: flex; gap: 22px; align-items: flex-start; background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; box-shadow: var(--shadow-card); padding: 28px 30px; margin: 48px 0; }
.authorbox .avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--tnb-sand); flex: none; }
.authorbox .ab-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-copper-dk); margin-bottom: 8px; }
.authorbox h4 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--tnb-ink); margin: 0 0 4px; }
.authorbox .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--tnb-stone-400); margin-bottom: 12px; }
.authorbox p { font-size: 14px; line-height: 1.6; color: var(--tnb-stone-500); margin: 0; }

/* FAQ — distinct PINE panel (breaks out to the article-sheet edges) */
.faq-block { margin: 44px 0; padding: 38px 40px 30px; background: var(--tnb-pine-deep); border-radius: 5px; }
.faq-block .faq-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-gold); margin-bottom: 10px; }
.faq-block h2 { margin: 0 0 16px; color: #fff; }
.faq-block .faq details { border-bottom: 1px solid rgba(244,239,227,0.16); }
.faq-block .faq summary { color: var(--tnb-on-dark); }
.faq-block .faq summary .ico { color: var(--tnb-gold); }
.faq-block .faq details p { color: var(--tnb-on-dark-cream); }

/* Clean horizontal rule (markdown `---`) — single hairline, not the browser groove */
.prose hr, .gh-content hr { border: 0; border-top: 1px solid var(--tnb-line); margin: 36px 0; height: 0; background: none; }

/* FAQ accordion */
.faq details { border-bottom: 1px solid var(--tnb-line); }
.faq details:last-child, .faq-block .faq details:last-child { border-bottom: 0; }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--tnb-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { flex: none; font-family: var(--font-ui); font-weight: 400; font-size: 22px; color: var(--tnb-copper-dk); transition: transform var(--dur) var(--ease-standard); }
.faq details p { font-size: 16px; line-height: 1.65; color: var(--tnb-stone-700); margin: 0 0 20px; max-width: 680px; }

/* Sticky table-of-contents (detail aside) */
/* Hidden until main.js builds the links (no empty "On this page" box if JS is
   off/slow). Class-based reveal so the mobile `.rail .toc{display:none}` still wins. */
.toc { display: none; position: sticky; top: 100px; font-family: var(--font-mono); font-size: 12px; }
.toc.is-built { display: block; }
.toc h5 { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-stone-400); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--tnb-line); }
.toc a { display: block; color: var(--tnb-stone-500); line-height: 1.35; padding: 9px 12px 9px 14px; border-left: 2px solid var(--tnb-line); transition: color var(--dur) var(--ease-standard), border-color var(--dur), background var(--dur); }
.toc a:hover { color: var(--tnb-copper-dk); border-left-color: var(--tnb-copper); }
.toc a.active { color: var(--tnb-pine); font-weight: 500; border-left-color: var(--tnb-copper); background: var(--tnb-sand); }

/* ===================================================================
   Post metadata — category/topic tags, byline+dates bar, social share
   =================================================================== */
.post-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 20px 0 16px; }
.cat-pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--tnb-copper-dk); border-radius: var(--radius-xs); padding: 6px 11px; white-space: nowrap; }
.topic-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--tnb-pine); background: transparent; border: 1px solid var(--tnb-line); border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer; white-space: nowrap; transition: border-color var(--dur) var(--ease-standard), color var(--dur); }
.topic-tag:hover { border-color: var(--tnb-copper); color: var(--tnb-copper-dk); }

/* ── Per-type "kind" marker (post hero) ──────────────────────────────────────
   The at-a-glance "what kind of piece is this" — a reader-language label + a
   family glyph, keyed on the content-type tag (`pt--*` on <article>, post.hbs).
   Over the hero photo: cream text + shadow (legible); the family accent lives on
   the glyph only (aria-hidden — the <span> label is the accessible text). This is
   label/accent ONLY; it never touches body structure. WCAG: text is cream-on-dark
   with a scrim + shadow; the glyph is decorative. */
.post-kind { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-on-dark-cream); margin: 0 0 16px; text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.post-kind svg { width: 16px; height: 16px; flex: none; color: var(--tnb-gold); }
/* Family accents — the glyph COLOR groups the family; the glyph SHAPE + the label
   carry the meaning. Three brand accents across five families (gold · copper · the
   freshness green), staying inside the ≤3-brand-color discipline. */
.pt--data   .post-kind svg { color: var(--tnb-pine-live); }                 /* freshness green — a market bulletin */
.pt--place  .post-kind svg { color: var(--tnb-gold); }         /* grounded field-guide gold (pin) */
.pt--versus .post-kind svg { color: var(--tnb-copper-light); } /* copper — a matchup (⇄) */
.pt--journey .post-kind svg { color: var(--tnb-copper-light); }/* copper — a route (→) */
.pt--guide  .post-kind svg { color: var(--tnb-gold); }         /* gold compass — the how-to workhorse */

.postmeta { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 26px 0 22px; border-bottom: 1px solid var(--tnb-line); }
.postmeta .byline { gap: 12px; }
.postmeta .byline .who span { white-space: nowrap; }
.postmeta-right { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.postmeta .dates { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--tnb-stone-400); line-height: 1.7; text-align: right; }
.postmeta .dates b { color: var(--tnb-stone-700); font-weight: 500; }
@media (max-width: 640px) { .postmeta-right { align-items: flex-start; } .postmeta .dates { text-align: left; } }

.sharebar { display: flex; align-items: center; gap: 8px; }
.sharebar .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tnb-stone-400); margin-right: 2px; }
.sharebar a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--tnb-line); border-radius: var(--radius-xs); color: var(--tnb-stone-700); cursor: pointer; transition: border-color var(--dur) var(--ease-standard), color var(--dur), background var(--dur); }
.sharebar a:hover { border-color: var(--tnb-copper); color: var(--tnb-copper-dk); background: var(--tnb-sand); }
.sharebar a svg { width: 17px; height: 17px; }

.share-end { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 40px 0 8px; padding-top: 26px; border-top: 1px solid var(--tnb-line); }
.share-end .t { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--tnb-ink); margin: 0; }

/* ===================================================================
   Article / hub HERO — image with overlaid title. Shared by the
   content-detail and listing pages. Each page sets only .ahero-bg's
   background-image; everything else is consistent here.
   =================================================================== */
.ahero { position: relative; min-height: 460px; display: flex; align-items: flex-end; color: var(--tnb-on-dark); overflow: hidden; }
.ahero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 58%; }
.ahero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,26,16,0.34) 0%, rgba(18,26,16,0.48) 40%, rgba(18,26,16,0.74) 66%, rgba(18,26,16,0.93) 100%); }
/* Hero text sits over photos where contrast can't be guaranteed by the scrim alone
   (a bright sky behind small cream text). A text-shadow halo provides the AA floor
   (WCAG text-over-image technique). 2026-07-06 QA-008 lane-review hardening. */
.ahero-inner h1, .ahero-inner .eyebrow, .ahero-inner .standfirst, .ahero-inner .dek,
.ahero-inner .page-breadcrumb, .ahero-inner .ahero-credit { text-shadow: 0 1px 3px rgba(8,12,7,0.82), 0 2px 16px rgba(8,12,7,0.6); }
.ahero-credit { position: absolute; right: 18px; top: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,239,227,0.55); }
.ahero-inner { position: relative; width: 100%; max-width: 840px; margin: 0 auto; padding: 0 40px 52px; }
.ahero .breadcrumb { color: var(--tnb-on-dark-cream); margin-bottom: 18px; }
.ahero .breadcrumb a { color: var(--tnb-on-dark-cream); }
.ahero .breadcrumb .sep { color: rgba(244,239,227,0.4); }
.ahero .breadcrumb .cur { color: #fff; }
.ahero .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #F4EFE3; text-shadow: 0 1px 12px rgba(0,0,0,0.55); margin-bottom: 16px; }
.ahero .eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--tnb-gold); transform: rotate(45deg); flex: none; }
.ahero .post-tags { margin: 0 0 18px; }
.ahero .topic-tag { color: var(--tnb-on-dark-cream); border-color: rgba(244,239,227,0.4); }
.ahero .topic-tag:hover { color: #fff; border-color: var(--tnb-gold); }
.ahero h1 { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1.02; letter-spacing: -0.01em; color: #fff; margin: 0 0 16px; }
.ahero .standfirst, .ahero .dek { font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.45; color: var(--tnb-on-dark-cream); margin: 0; max-width: 640px; }
.ahero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* Explore strip — silo discovery nav: town data-tiles + guide lanes */
.explore { padding: 36px 0 6px; }
.explore-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ex-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-copper-dk); margin-bottom: 9px; }
.ex-kicker::before { content: ""; width: 6px; height: 6px; background: var(--tnb-copper); transform: rotate(45deg); }
.ex-title { font-family: var(--font-display); font-weight: 600; font-size: 31px; line-height: 1.04; letter-spacing: -0.005em; color: var(--tnb-ink); margin: 0; }
.ex-all { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tnb-pine); border-bottom: 1.5px solid var(--tnb-copper); padding-bottom: 2px; white-space: nowrap; cursor: pointer; flex: none; }
.ex-all:hover { color: var(--tnb-copper-dk); }
.town-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.town { display: flex; flex-direction: column; background: var(--tnb-white); border: 1px solid var(--tnb-line-soft); border-radius: var(--radius-sm); padding: 15px 15px 13px; cursor: pointer; min-height: 130px; transition: border-color var(--dur) var(--ease-standard), box-shadow var(--dur), transform var(--dur); }
.town:hover { border-color: var(--tnb-copper); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.town--current { border-color: var(--tnb-copper); box-shadow: inset 0 0 0 1px var(--tnb-copper); }   /* you-are-here (replaces the old inline border style) */
.town--guides { background: var(--tnb-sand); }
.town-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1; color: var(--tnb-pine); }
.town-desc { font-family: var(--font-ui); font-size: 12px; line-height: 1.3; color: var(--tnb-stone-700); margin: 7px 0 0; }
.town-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.town-stat { font-family: var(--font-mono); font-weight: 500; font-size: 18px; line-height: 1; color: var(--tnb-ink); letter-spacing: -0.01em; }
.town-stat span { display: block; font-weight: 400; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tnb-stone-400); margin-top: 6px; }
.town-n { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tnb-stone-400); white-space: nowrap; }
.town-go { font-size: 13px; line-height: 1; color: var(--tnb-copper-dk); opacity: 0; transform: translateX(-3px); transition: opacity var(--dur), transform var(--dur); }
.town:hover .town-go { opacity: 1; transform: translateX(0); }
.lane-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 12px; background: var(--tnb-sand); border-radius: var(--radius-sm); padding: 5px 8px; }
.lane-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-stone-500); padding: 0 14px 0 10px; flex: none; white-space: nowrap; }
.lane { font-family: var(--font-ui); font-weight: 500; font-size: 13.5px; color: var(--tnb-pine); padding: 8px 16px; border-radius: var(--radius-xs); cursor: pointer; white-space: nowrap; transition: background var(--dur), color var(--dur); }
.lane:hover { background: var(--tnb-white); color: var(--tnb-copper-dk); }
.filterbar.sticky { position: sticky; top: 69px; z-index: 9; background: var(--tnb-paper); }
@media (max-width: 1040px) {
  .town-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .explore-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 640px) {
  .town-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .lane-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Facet bar → a single horizontal scroll strip (matches the .lane-strip mobile behavior above);
     labels are already inline separators, so all chips stay on one swipeable sand band. */
  .filterbar .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .filterbar.sticky { top: 59px; }
}
@media (max-width: 760px) {
  .ahero { min-height: 420px; }
  .ahero-inner { padding: 0 24px 38px; }
  .ahero h1 { font-size: 37px; }
  .ahero .standfirst, .ahero .dek { font-size: 19px; }
}

/* ===================================================================
   Responsive — component level (tablet ≤900, mobile ≤640)
   =================================================================== */
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .lib-cornerstones { grid-template-columns: repeat(2, 1fr); }
  .sec-head h2 { font-size: 32px; }
}
/* The nav's OWN breakpoint — deliberately NOT the 640px block below (QA-014, 2026-07-16).
   The desktop nav needs its measured intrinsic width to lay out (MEASURED_NAV_WIDTH in
   theme-contract.test.js — re-measured 2026-07-20 after the Library-hub add: Library + Home value
   + search widened the bar, so the breakpoint was RAISED from 760). The burger must take over at
   or above that width, or the band just under it renders a nav wider than the viewport and EVERY
   page scrolls horizontally. It cannot join the 640 block: that block also carries .wrap padding,
   nav.bar padding, .disclosure, and the storytelling-component mobile stacks — none of which
   should fire at tablet width. So the nav gets its own query.
   ⛔ COUPLED to theme.css's `.gh-burger` @media (max-width: 980px): same decision, two files.
   Move one without the other and you get a nav with no burger, or a burger beside a live nav.
   `theme-contract.test.js` asserts they match. */
@media (max-width: 980px) {
  nav.bar .nav-links { display: none; }
}
@media (max-width: 640px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  nav.bar { padding: 13px 20px; }
  .disclosure { font-size: 9.5px; letter-spacing: 0.08em; padding: 7px 20px; }
  /* storytelling components — mobile stacks */
  .proscons { grid-template-columns: 1fr; gap: 14px; }
  .compbars .cb-row { grid-template-columns: 84px 1fr 78px; gap: 10px; }
  .matchup { padding: 24px 20px 22px; }
  .matchup .mu-grid { grid-template-columns: 1fr; gap: 18px; }
  .matchup .mu-vs { width: auto; height: auto; border: 0; border-top: 1px solid rgba(244,239,227,0.28); border-radius: 0; justify-self: stretch; padding-top: 10px; }
  .fastfacts .ff-row { flex-direction: column; gap: 3px; align-items: flex-start; }
  .fastfacts .ff-v { text-align: left; }
  .steps li { padding-left: 48px; }
  .steps li::before { width: 32px; height: 32px; font-size: 14px; }
  .steps li:not(:last-child)::after { left: 16px; }
  .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr; gap: 18px; }
  .lib-cornerstones { grid-template-columns: 1fr; gap: 18px; }
  .sec { padding: 44px 0 8px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 26px; }
  .sec-head h2 { font-size: 29px; }
  .acard--row { flex-direction: column; min-height: 0; }
  .acard--row .ph { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .acard--row .body { padding: 24px; }
  .acard--row h3 { font-size: 27px; }
  .break { min-height: 340px; }
  .break blockquote { font-size: 27px; }
  .news { min-height: 320px; }
  .news h2 { font-size: 31px; }
  .news p { font-size: 18px; }
  .news form, .inline-cta form { flex-direction: column; width: 100%; }
  .inline-cta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .inline-cta input { min-width: 0; width: 100%; }
  .prose { font-size: 17px; }
  .prose h2 { font-size: 25px; }
  .prose h3 { font-size: 20px; }
  .ctable { font-size: 13px; }
  .ctable th, .ctable td { padding: 11px 12px; }
  footer { padding: 40px 20px 30px; }
  .foot-top { gap: 28px; }
  .foot-nav { gap: 32px; }
}

/* ================= .ahero WIDE variant (shared: Contact + About + Home-Value photo heroes) ================= */
.ahero--wide .ahero-inner { max-width: 1180px; }  /* width only — no page-specific spacing (About/HV reuse this) */
/* Contact-only: extra hero bottom padding clears the -64px .contact-main overlap so the freshness pill isn't hidden */
.ahero--overlap .ahero-inner { padding-bottom: 88px; }

/* disabled submit (pre-engine mailto degradation) reads as disabled, not active */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ================= CONTACT PAGE (page-contact.hbs) — page-local unless noted ================= */
.contact-main { position: relative; z-index: 2; max-width: 1180px; margin: -64px auto 0; padding: 0 40px 72px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.contact-form-col { flex: 1 1 480px; min-width: 0; }
.contact-aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.form-card { background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; box-shadow: var(--shadow-card); padding: 36px 40px 40px; }

/* Intent router (radio-driven; CSS handles the selected state, JS reveals framing) */
.intent-lead { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-stone-400); margin-bottom: 14px; }
.intent-router { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.intent-router label { flex: 1 1 150px; min-width: 0; }
.intent-router input { position: absolute; opacity: 0; width: 0; height: 0; }
.intent-btn { display: block; padding: 15px 16px; text-align: center; cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 600; border-radius: 2px; border: 1px solid var(--tnb-line-control); background: #fff; color: var(--tnb-stone-700); transition: all 200ms var(--ease-standard); }
.intent-btn:hover { border-color: var(--tnb-pine); }
.intent-router input:checked + .intent-btn { border: 1.5px solid var(--tnb-pine); background: var(--tnb-pine); color: var(--tnb-on-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.14); }
.intent-router input:focus-visible + .intent-btn { outline: 2px solid var(--tnb-gold); outline-offset: 2px; }

/* Contextual framing note (htake-like, on cream) */
.frame-note { background: var(--tnb-paper); border-left: 3px solid var(--tnb-copper); border-radius: 0 3px 3px 0; padding: 14px 18px; margin-bottom: 26px; }
.frame-note p { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.4; color: var(--tnb-stone-700); margin: 0; }
.frame-note[hidden] { display: none; }

/* Lead form */
.leadform { display: flex; flex-direction: column; gap: 16px; }
.leadform .row { display: flex; flex-wrap: wrap; gap: 16px; }
.leadform label { flex: 1 1 200px; min-width: 0; display: block; }
.leadform label.wide { flex-basis: 100%; }
.leadform .lk { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tnb-stone-400); margin-bottom: 7px; }
.leadform .lk .opt { color: var(--tnb-stone-300); text-transform: none; letter-spacing: 0; }
.leadform input, .leadform textarea { width: 100%; font-family: var(--font-ui); font-size: 15px; color: var(--tnb-ink); padding: 11px 14px; border: 1px solid var(--tnb-line-control); border-radius: 2px; background: #fff; }
.leadform input:focus, .leadform textarea:focus { outline: none; border-color: var(--tnb-copper); box-shadow: 0 0 0 3px rgba(185,122,78,0.14); }
.leadform textarea { line-height: 1.5; resize: vertical; }
.leadform input::placeholder, .leadform textarea::placeholder { color: var(--tnb-stone-300); }
.leadform-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.leadform-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--tnb-stone-400); }
/* Post-submit confirmation / degrade-to-human state (ADR-0014). Shown by JS after a lead POST. */
.leadform-result { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--tnb-copper); background: var(--tnb-sand); border-radius: 2px; font-size: 15px; line-height: 1.55; color: var(--tnb-ink); }
.leadform-result a { color: var(--tnb-copper-dk); }

/* TCPA consent (page-local; the shared partial is deferred to HV's full tool — §9b) */
.consent { display: flex; align-items: flex-start; gap: 11px; background: var(--tnb-paper); border: 1px solid var(--tnb-line-soft); border-radius: 3px; padding: 14px 16px; cursor: pointer; }
.consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--tnb-pine); flex: none; }
.consent span { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.55; color: var(--tnb-stone-500); }
.consent a { color: var(--tnb-copper-dk); border-bottom: 1px solid rgba(152,90,51,0.4); }
.consent[hidden] { display: none; }

/* Broker E-E-A-T card */
.broker-card { background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; box-shadow: var(--shadow-card); padding: 22px 24px; display: flex; align-items: center; gap: 15px; }
.broker-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 25%; background: var(--tnb-sand); flex: none; }
.broker-card .b-name { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--tnb-ink); line-height: 1.1; }
.broker-card .b-cred { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--tnb-stone-400); margin-top: 5px; }
.broker-card .b-note { font-family: var(--font-ui); font-size: 12.5px; color: var(--tnb-stone-500); margin-top: 8px; line-height: 1.4; }

/* NAP block (page-local per §9b — Contact + About shapes diverge) */
.nap { background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; box-shadow: var(--shadow-card); padding: 24px 26px 8px; }
.nap-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-stone-400); margin-bottom: 18px; }
.nap-rows { display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; }
.nap-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tnb-stone-300); margin-bottom: 4px; }
.nap-v { font-family: var(--font-mono); font-size: 14px; color: var(--tnb-pine); }
.nap-v.area { font-family: var(--font-ui); line-height: 1.5; color: var(--tnb-stone-700); }
.nap-map { position: relative; aspect-ratio: 440 / 210; overflow: hidden; margin: 0 -26px; border-top: 1px solid var(--tnb-line-soft); background-color: var(--tnb-sand); }

/* Service-area map (partials/service-area-map.hbs) — inline SVG locator map built from
   real US-Census county boundaries. Live-only (never satori-rasterised), so brand tokens
   are safe here. County fills = a single-hue pine graduation (Boulder → Weld); town + county
   labels carry a paper knockout halo and stay sand-safe (SAND RULE — tokens/colors.css). */
.samap { display: block; width: 100%; height: 100%; }
/* roomy contexts (homepage service area, town-hub corridor): a 2:1 frame that never crops */
.samap-frame { position: relative; overflow: hidden; border: 1px solid #d6c9ad; border-radius: 3px; background: #f4efe3; aspect-ratio: 440 / 210; }
.area-map { max-width: 600px; margin: 0 auto 24px; }       /* homepage — centred above the town tiles */
.explore-map { width: 100%; max-width: 580px; margin: 0 0 26px; }  /* town hub — above the town grid */
/* Base county border: a crisp thin pine hairline so the shapes read; the neighbour context
   recedes (lighter fill + fainter border), the 3 core counties step darker toward Boulder. */
.samap .co { stroke: var(--tnb-pine); stroke-opacity: 0.5; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.samap .co-nb { fill: #e7e1d1; stroke-opacity: 0.22; }  /* neighbour context — clearly lighter/neutral vs the core */
.samap .co-boulder { fill: var(--tnb-pine); fill-opacity: 0.17; }
.samap .co-larimer { fill: var(--tnb-pine); fill-opacity: 0.12; }
.samap .co-weld { fill: var(--tnb-pine); fill-opacity: 0.085; }
.samap .town-dot { fill: var(--tnb-copper-dk); stroke: #fff; stroke-width: 1.4; }
.samap .town-lbl { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.005em; fill: var(--tnb-ink); paint-order: stroke; stroke: #f4efe3; stroke-width: 2.6px; stroke-linejoin: round; }
.samap .town-lbl.anchor { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: 0; fill: var(--tnb-pine); }
.samap .co-lbl { font-family: var(--font-mono); font-weight: 600; font-size: 8.5px; letter-spacing: 0.13em; fill: var(--tnb-pine); fill-opacity: 0.5; }
.samap .compass path { fill: var(--tnb-copper-dk-on-sand); }
.samap .compass-n { font-family: var(--font-mono); font-weight: 600; font-size: 10px; fill: var(--tnb-copper-dk-on-sand); }
.samap .scalebar line { stroke: var(--tnb-pine); stroke-opacity: 0.5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.samap .scale-t { font-family: var(--font-mono); font-size: 8.5px; fill: var(--tnb-pine); fill-opacity: 0.6; dominant-baseline: middle; }

/* Compact newsletter (shared: newsletter-signup.hbs compact=true — Contact aside) */
.news-compact { background: var(--tnb-pine-deep); border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.14); padding: 26px 26px 28px; color: var(--tnb-on-dark); }
.news-compact .nc-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-gold); margin-bottom: 12px; }
.news-compact h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.12; color: #fff; margin: 0 0 10px; }
.news-compact p { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55; color: var(--tnb-on-dark-cream); margin: 0 0 18px; }
.news-compact form { display: flex; flex-direction: column; gap: 9px; }
.news-compact input { font-family: var(--font-ui); font-size: 14px; padding: 11px 14px; border-radius: 2px; border: 1px solid rgba(244,239,227,0.4); background: rgba(244,239,227,0.12); color: #fff; }
.news-compact input::placeholder { color: var(--tnb-on-dark-muted); }

@media (max-width: 900px) { .contact-main { margin-top: -40px; } }
@media (max-width: 640px) { .form-card { padding: 26px 22px 30px; } .contact-main { padding-left: 20px; padding-right: 20px; } }

/* ============================================================
   ABOUT — the Organization entity anchor (page-about.hbs).
   See design-system/docs/AboutPage.md for the class contract.
   Reuses .ahero(--wide), .quickanswer/.qa-k, .page-sheet, .card-grid/.acard,
   .faq, .nap-rows/.nap-k/.nap-v, newsletter-signup. Below = the net-new bits.
   ============================================================ */
/* shared mono kicker (copper; gold on dark bands) */
.a-kick { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tnb-copper-dk); margin-bottom: 14px; }
.a-kick--gold { color: var(--tnb-gold); }
/* section heads + display h2 */
.about-h2 { font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1.06; color: var(--tnb-ink); margin: 0 0 12px; }
.about-h2.on-dark { color: #fff; }
.about-sub { font-family: var(--font-ui); font-size: 16px; line-height: 1.6; color: var(--tnb-stone-500); margin: 0; }
.about-sect-head { max-width: 760px; margin: 0 0 36px; }
/* 1 · entity block — white card overlapping the hero */
.about-lead { position: relative; z-index: 2; max-width: 840px; margin: -64px auto 0; padding: 0 40px; }
.about-lead .quickanswer { background: #fff; border: 1px solid var(--tnb-line-soft); box-shadow: var(--shadow-card); padding: 34px 40px 36px; margin: 0; }
.about-lead .quickanswer p { font-size: 18px; line-height: 1.65; }
/* 2 · brand story */
.about-story { padding-top: 60px; }
.about-lede { font-family: var(--font-ui); font-size: 19px; line-height: 1.7; color: var(--tnb-stone-700); margin: 0 0 20px; }
.about-pull { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 29px; line-height: 1.34; color: var(--tnb-pine); text-align: center; max-width: 560px; margin: 36px auto 8px; padding: 0; border: 0; }
.about-pull::before { content: ""; display: block; width: 38px; height: 2px; background: var(--tnb-copper); margin: 0 auto 22px; }
/* full-bleed color bands */
.about-band { padding: 72px 0; margin-top: 56px; }
.about-band--pine { background: var(--tnb-pine-deep); color: var(--tnb-on-dark-cream); }
.about-band--sand { background: var(--tnb-sand); margin-top: 0; padding: 64px 0; }
.about-wide { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.about-wide--mid { max-width: 900px; }
.about-proof, .about-team { padding: 72px 0 64px; }
.about-team { padding-top: 8px; }
/* 3 · "what you won't get" list */
.wontlist { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 22px; }
.wontlist li { position: relative; padding-left: 32px; font-family: var(--font-ui); font-size: 17px; line-height: 1.6; color: var(--tnb-on-dark-cream); }
.wontlist li::before { content: "\2014"; position: absolute; left: 0; top: -1px; font-family: var(--font-display); font-size: 22px; color: var(--tnb-copper); }
.wontlist .em { color: #fff; }
.willline { border-top: 1px solid rgba(244,239,227,0.16); margin-top: 34px; padding-top: 26px; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.4; color: #fff; }
.willline em { font-style: normal; color: var(--tnb-gold); }
/* 5 · team grid (tiles non-linked until the bios ship) */
.teamgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.teamtile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; box-shadow: var(--shadow-card); overflow: hidden; }
a.teamtile { text-decoration: none; color: inherit; transition: box-shadow var(--dur) var(--ease-standard); }
a.teamtile:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
a.teamtile:hover .tt-more { color: var(--tnb-pine); }
.tt-more { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tnb-copper-dk); transition: color var(--dur) var(--ease-standard); }
.tt-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tnb-sand); }
.tt-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.tt-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 52px; color: var(--tnb-pine); background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(47,74,48,0.08) 8px, rgba(47,74,48,0.08) 9px); }
.tt-badge { position: absolute; left: 14px; top: 14px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-paper); background: rgba(38,64,42,0.88); border-radius: 2px; padding: 5px 9px; }
.tt-body { padding: 22px 24px 24px; }
.tt-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--tnb-ink); margin: 0 0 5px; }
.tt-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--tnb-stone-400); margin-bottom: 12px; }
.tt-body p { font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: var(--tnb-stone-500); margin: 0; }
/* 6+7 · NAP + disambiguation (sand band) */
.napgrid { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.napgrid .nap-col { flex: 1 1 300px; min-width: 0; }
.nap-brand { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--tnb-ink); margin-bottom: 18px; }
.about-map { position: relative; aspect-ratio: 440 / 210; border-radius: 2px; overflow: hidden; border: 1px solid #d8cbb0; background-color: #efe7d5; }
.disambig { margin-top: 20px; border-left: 2px solid var(--tnb-gold); padding: 2px 0 2px 16px; }
.disambig p { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.55; color: var(--tnb-stone-500); margin: 6px 0 0; }

/* ---- WCAG AA on the sand tint (2026-07-06 QA-008 contrast sweep) ----
   #e6dcc6 sand is dark enough that copper-dk (4.0:1) and the muted greys
   (3.9:1) fall just under 4.5:1. Darken kicker + muted text WITHIN sand
   containers to a sand-safe tone (rather than lighten the core sand token). */
/* THE SAND RESCUE BLOCK — every muted token fails AA on the sand tint (the SAND RULE,
   tokens/colors.css), so anything landing on a sand surface is re-pointed here. Read this list
   as a symptom: it grew one selector at a time, each author rediscovering the rule, and it is
   why `.ctable thead th` used to declare 3.95:1 at its own rule and render 8.72:1 from here —
   ~690 lines apart. PREFER fixing the component's own rule (as .ctable thead th and the
   .ig-node kit now do); this block is for CONTEXTUAL overrides only, where the same element
   sits on paper in one place and sand in another. */
.about-band--sand .a-kick, .about-band--sand .kicker, .about-band--sand .qa-k,
.quickanswer .qa-k, .band-tint .a-kick, .band-tint .kicker { color: var(--tnb-copper-dk-on-sand); }
.about-band--sand .about-sub, .about-band--sand .disambig p,
.about-band--sand .nap-k, .about-band--sand .nap-rows .nap-k,
.lane-strip .lane-lbl { color: var(--tnb-stone-700); }

.about-faq { padding-top: 56px; padding-bottom: 8px; }
/* 8 · ready-now CTA (paper band above the newsletter) */
.about-cta { max-width: 640px; margin: 0 auto; padding: 64px 40px 8px; text-align: center; }
.about-cta .about-h2 { margin-bottom: 12px; }
.about-cta-sub { font-family: var(--font-ui); font-size: 16px; line-height: 1.6; color: var(--tnb-stone-500); margin: 0 auto 24px; max-width: 520px; }
@media (max-width: 640px) {
  .about-lead { padding: 0 20px; } .about-lead .quickanswer { padding: 26px 22px 28px; }
  .about-band { padding: 52px 0; } .about-wide { padding: 0 20px; }
  .about-h2 { font-size: 30px; } .about-pull { font-size: 24px; }
}

/* ============================================================
   AGENT BIO — shared layout (partials/agent-bio.hbs → page-daniel-hsieh /
   page-emily-hsieh). See design-system/docs/AgentBio.md. Reuses .ahero--wide,
   .about-lead (overlap), .prose, .nap-k/.nap-v, .btn*, .about-wide. NO stat grid,
   NO testimonials (fabricated-proof strip). Below = the net-new bits.
   ============================================================ */
.biocard-wrap { max-width: 1000px; }
.biocard { display: flex; flex-wrap: wrap; overflow: hidden; background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; box-shadow: var(--shadow-card); }
.bio-photo { flex: 1 1 300px; min-width: 0; position: relative; min-height: 400px; background: var(--tnb-sand); }
.bio-photo img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; object-position: center 22%; display: block; }
.bio-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(47,74,48,0.06) 10px, rgba(47,74,48,0.06) 11px); }
.bio-mono span { width: 104px; height: 104px; border-radius: 50%; background: rgba(244,239,227,0.7); border: 1px solid #d8cbb0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 38px; color: var(--tnb-pine); }
.bio-portrait-cap { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tnb-stone-500); background: var(--tnb-paper); border: 1px solid var(--tnb-line); border-radius: 2px; padding: 6px 12px; white-space: nowrap; }
.bio-main { flex: 1 1 420px; min-width: 0; padding: 36px 40px 34px; }
.bio-main .prose { font-size: 16px; }
.bio-main .prose > p:first-child { font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.4; color: var(--tnb-ink); margin-bottom: 18px; }
.bio-contact { display: flex; flex-wrap: wrap; gap: 24px; align-items: baseline; border-top: 1px solid var(--tnb-line-soft); padding-top: 22px; margin-top: 22px; }
.bio-social { display: flex; gap: 20px; margin-top: 16px; }
.bio-social a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--tnb-copper-dk); border-bottom: 1px solid rgba(185,122,78,0.4); padding-bottom: 2px; }
.biocta { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; justify-content: space-between; padding-top: 52px; padding-bottom: 64px; }
.biocta-h { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--tnb-ink); }
.biocta-sub { font-family: var(--font-ui); font-size: 14px; color: var(--tnb-stone-500); margin-top: 6px; }
.biocta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .bio-main { padding: 26px 22px 28px; } .biocard-wrap { padding: 0 20px; }
  .bio-photo { flex-basis: 100%; min-height: 320px; }
}

/* ============================================================
   REVIEWS — the honest-empty reputation surface (page-reviews.hbs).
   See design-system/docs/Reviews.md. Reuses .ahero--wide, .about-band/-wide/
   -sect-head/-cta, .a-kick, .about-h2/-sub, .card-grid, .htake, .freshness,
   newsletter-signup. NO Review/aggregateRating schema (seo §4 + FTC). Below = net-new.
   ============================================================ */
.rev-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rev-rule { background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; box-shadow: var(--shadow-card); padding: 26px 28px 28px; }
.rev-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-copper-dk); margin-bottom: 14px; }
.rev-rule p { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--tnb-stone-700); margin: 0; }
.rev-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tnb-line-soft); border-radius: 3px; box-shadow: var(--shadow-card); padding: 28px 28px 30px; }
.rev-card-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tnb-copper-dk); margin-bottom: 16px; }
.rev-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.15; color: var(--tnb-ink); margin: 0 0 10px; }
.rev-card p { font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: var(--tnb-stone-500); margin: 0 0 16px; }
.rev-lic { font-family: var(--font-mono); font-size: 13px; color: var(--tnb-pine); background: var(--tnb-paper); border: 1px solid var(--tnb-line); border-radius: 2px; padding: 8px 12px; margin: 0 0 18px; word-break: break-word; }
.rev-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.rev-chips span { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tnb-pine); background: var(--tnb-paper); border: 1px solid var(--tnb-line); border-radius: 2px; padding: 6px 10px; }
.rev-cta { margin-top: auto; align-self: flex-start; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tnb-pine); border-bottom: 1.5px solid var(--tnb-copper); padding-bottom: 2px; }
.rev-wall-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.rev-sources { display: flex; gap: 10px; flex-wrap: wrap; }
.rev-sources a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tnb-pine); background: #fff; border: 1px solid var(--tnb-line); border-radius: 999px; padding: 7px 15px; transition: border-color var(--dur), color var(--dur); }
.rev-sources a:hover { border-color: var(--tnb-copper); color: var(--tnb-copper-dk); }
.rev-wall { background: #fff; border: 1px solid var(--tnb-line); border-radius: 3px; box-shadow: var(--shadow-card); overflow: hidden; }
.rev-empty { padding: 44px 40px 36px; text-align: center; border-bottom: 1px dashed var(--tnb-line); }
.rev-empty h3 { font-family: var(--font-display); font-weight: 600; font-size: 29px; line-height: 1.12; color: var(--tnb-ink); margin: 0 0 12px; }
.rev-empty p { font-family: var(--font-ui); font-size: 15px; line-height: 1.65; color: var(--tnb-stone-500); margin: 0 auto; max-width: 560px; }
/* Verified review cards (Google/Zillow, full + unedited, no schema) */
/* Section vertical rhythm on /reviews/ (longhand: keeps .about-wide's horizontal 40px + max-width;
   .about-wide alone has no vertical padding, which jammed these eyebrows against the section above). */
.rev-lead { padding-top: 54px; padding-bottom: 56px; }
.rev-beyond { padding-top: 60px; padding-bottom: 64px; }
.rev-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 2px; }
.rev-item { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tnb-line); border-radius: 3px; box-shadow: var(--shadow-card); padding: 26px 30px 22px; margin: 0; }
.rev-item::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 46px; line-height: 0.5; color: var(--tnb-copper); opacity: 0.55; margin: 6px 0 10px; }
.rev-item-quote { font-family: var(--font-ui); font-size: 15px; line-height: 1.62; color: var(--tnb-stone-700); margin: 0 0 20px; }
.rev-item-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: auto; border-top: 1px solid var(--tnb-line-soft); padding-top: 14px; }
.rev-item-who { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--tnb-pine); white-space: nowrap; }
.rev-item-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tnb-stone-400); text-align: right; }
.rev-wall-note { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55; color: var(--tnb-stone-500); margin: 20px 0 0; }
.rev-wall-note a { color: var(--tnb-copper-dk); border-bottom: 1px solid var(--tnb-line); }
.rev-wall-note a:hover { border-color: var(--tnb-copper); }
@media (max-width: 640px) { .rev-items { grid-template-columns: 1fr; } }
.rev-skel { position: relative; padding: 34px 40px 36px; }
/* The "Reserved" pill is the load-bearing visual signal that this skeleton is
   intentionally empty, not loading. Kept legible: 12px + stone-500 (~4.7:1 on
   paper, WCAG AA) so a sighted skimmer reads "reserved," never "reviews loading."
   (aria-hidden: SRs get the .rev-empty message instead.) */
.rev-skel-tag { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tnb-stone-500); background: var(--tnb-paper); border: 1px solid var(--tnb-line); border-radius: 2px; padding: 5px 11px; white-space: nowrap; }
.rev-skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; opacity: 0.4; filter: saturate(0.4); }
.rev-skel-card { border: 1px solid var(--tnb-line-soft); border-radius: 3px; padding: 20px; }
.rev-skel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rev-skel-av { width: 40px; height: 40px; border-radius: 50%; background: var(--tnb-sand); flex: none; }
.rev-skel-lines { flex: 1; }
.rev-skel-lines i { display: block; height: 11px; width: 60%; background: var(--tnb-sand); border-radius: 2px; margin-bottom: 7px; }
.rev-skel-lines i.short { width: 40%; height: 9px; background: var(--tnb-line-soft); margin-bottom: 0; }
.rev-skel-card b { display: block; height: 9px; width: 100%; background: var(--tnb-line-soft); border-radius: 2px; margin-bottom: 8px; }
.rev-skel-card b.short { width: 65%; margin-bottom: 0; }
.rev-disambig { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5; color: var(--tnb-stone-400); margin: 0 0 16px; padding-left: 12px; border-left: 2px solid var(--tnb-gold); }
.rev-invite { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.rev-invite .about-sub { margin-top: 6px; }

/* Example-layout anatomy card — an honest teaching diagram of a real review's shape.
   Labeled, schematic OUTLINE stars, placeholder bars, no fake content/rating/schema. */
.rev-anat { border-top: 1px dashed var(--tnb-line); padding: 30px 40px 34px; }
.rev-anat-tag { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tnb-on-dark-cream); background: var(--tnb-pine-deep); border-radius: 2px; padding: 6px 12px; margin-bottom: 18px; }
.rev-anat-card { border: 1px solid var(--tnb-line); border-radius: 3px; padding: 24px 26px; max-width: 560px; }
.rev-anat-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.rev-anat-av { width: 44px; height: 44px; border-radius: 50%; background: var(--tnb-sand); flex: none; }
.rev-anat-who { flex: 1; min-width: 0; }
.rev-anat-bars i { display: block; height: 11px; background: var(--tnb-sand); border-radius: 2px; margin-bottom: 7px; }
.rev-anat-bars i:first-child { width: 52%; }
.rev-anat-bars i.short { width: 34%; height: 9px; background: var(--tnb-line-soft); margin-bottom: 0; }
.rev-anat-stars { display: flex; align-items: center; gap: 3px; margin: 10px 0 5px; flex-wrap: wrap; }
.rev-anat-star { width: 15px; height: 15px; flex: none; }
.rev-anat-star path { fill: none; stroke: var(--tnb-gold); stroke-width: 1.3; }
.rev-anat-lbl { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; color: var(--tnb-stone-400); margin-top: 4px; }
.rev-anat-stars .rev-anat-lbl { margin: 0 0 0 8px; }
.rev-anat-body { margin: 14px 0 4px; }
.rev-anat-body b { display: block; height: 10px; background: var(--tnb-line-soft); border-radius: 2px; margin-bottom: 8px; }
.rev-anat-body b.short { width: 60%; margin-bottom: 0; }
.rev-anat-reply { margin-top: 18px; padding: 14px 16px; background: var(--tnb-paper); border-left: 2px solid var(--tnb-gold); border-radius: 0 2px 2px 0; }
.rev-anat-reply-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tnb-copper-dk); margin-bottom: 10px; }
.rev-anat-src { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--tnb-copper-dk); margin-top: 18px; }

@media (max-width: 760px) { .rev-rules, .rev-skel-grid { grid-template-columns: 1fr; } .rev-skel-tag { font-size: 11px; letter-spacing: 0.07em; } .rev-anat { padding: 26px 22px 28px; } }

/* ---- Sidebar-page header (custom-page-sidebar.hbs — privacy/terms) ---- */
.doc-head { max-width: 1056px; margin: 0 auto; padding: 48px 40px 4px; }
.doc-head h1 { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1.05; color: var(--tnb-ink); margin: 14px 0 6px; }
@media (max-width: 640px) { .doc-head { padding: 32px 20px 4px; } .doc-head h1 { font-size: 34px; } }