/* ============================================================================
   Homes by Paarth
   styles.css  v1.1  August 2026

   Built against brand/brand-book.html (2026-08-19 00:09) and
   brand/logo-system.html (2026-08-19 00:46). Where this file and the earlier
   markdown summaries disagreed, the brand book won.

   Full replacement for Bela's stylesheet. Nothing carries over. Removed and
   not to be reintroduced: the herringbone texture, the Cormorant import, and
   every burgundy, bordeaux, stone, and alabaster token.

   Direction: Still Water.
   Position:  the numbers, and what they do not say.

   ---------------------------------------------------------------------------
   COLOUR ROLES, from section 10. These are roles, not suggestions.

     --deep    headings, dark bands, the wordmark          about 15% of a screen
     --mid     links, eyebrows, secondary accents
     --signal  CTA and one key figure only                 5% or less, never
               a red field larger than a button
     --paper
     --panel   together about 80% of any screen

   THE ONE HARD RULE
   Red never touches turquoise. --signal on --deep is 2.40:1, fails, and at
   similar values the two read as Christmas. On dark teal use --on-dark-warm.
   This is a ban, not a preference.

   Signal on --panel is 4.25:1, so on panel it is 24px, or 19px bold, or it
   does not appear. Signal on --paper is 4.74:1 and is fine at text sizes.

   TYPE ROLES, from section 11. Newsreader sets headings and the lead only.
   Inter sets body, UI, and EVERY NUMBER. IBM Plex Mono is for code, data
   attributes, and hex values, and nothing else. Stat values are Inter 600,
   not mono: the brand book is explicit and this file follows it.

   font-variant-numeric: tabular-nums on every element containing a number.
   Non-negotiable. This is a data brand and wobbling digits undercut it.

   Fonts, paste into every page head above this file, alongside the favicon
   snippet from brand/logo/favicon/head-snippet.html:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap">
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. TOKENS
   The :root block below is the one from the brand book handoff section,
   extended only where noted.
   ------------------------------------------------------------------------ */

:root {
  /* Homes by Paarth, Still Water */
  --ink:          #0B1416;  /* body text */
  --deep:         #0A3A3D;  /* primary: headings, dark bands, wordmark */
  --mid:          #136A6E;  /* links, eyebrows, secondary accents */
  --signal:       #C63A2E;  /* CTA + one key figure only, <= 5% of surface */
  --paper:        #F3F5F4;  /* page background */
  --panel:        #E3EAE8;  /* cards, quiet blocks */
  --muted:        #5A6B6B;  /* captions, source lines, metadata */
  --on-dark:      #7FD6D2;  /* accent on --deep */
  --on-dark-warm: #F4A79C;  /* replaces --signal on --deep */

  /* logo only, never as page fills */
  --mark-water-far:  #83CBC7;
  --mark-water-near: #4FA3A2;
  --mark-fog:        #F7F3EC;

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 860px;                /* reading measure, 68ch */
  --maxw-wide: 1180px;          /* market pages and dashboards */
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --rule: 1px solid rgba(11,20,22,0.10);

  /* chart categorical: fixed order, never cycled */
  --cat-1:#0E9488; --cat-2:#DC4A2E; --cat-3:#3D6BD6;
  --cat-4:#B0791A; --cat-5:#A0459E; --cat-6:#5F9E33;

  /* --- ADDED HERE, not in the brand book. -----------------------------
     The book specifies no dark mode. --muted is 3.33:1 on --ink and
     2.22:1 on --deep, and --mid is 2.94:1 on --ink, so a dark theme
     cannot be built from the locked set alone. These two are derived
     from the palette and measured. Flagged for the brand cowork to
     accept or replace. Nothing else was added.                        */
  --muted-on-dark:#93A7A7;   /* 7.40:1 on ink, 4.94:1 on deep */
  --panel-on-dark:#132426;   /* paper on it 14.66:1 */
  --rule-on-dark: 1px solid rgba(127,214,210,0.18);

  --radius:9.2px;            /* the badge radius, the only radius on the site */
  --radius-sm:5px;

  /* Spacing, 4px base */
  --s-1:0.25rem; --s-2:0.5rem;  --s-3:0.75rem; --s-4:1rem;
  --s-5:1.5rem;  --s-6:2rem;    --s-7:3rem;    --s-8:4rem;
  --s-9:6rem;

  /* Semantic layer. The dark theme flips only what is below this line. */
  --bg:var(--paper);
  --bg-raised:var(--panel);
  --fg:var(--ink);
  --fg-quiet:var(--muted);
  --fg-heading:var(--deep);
  --link:var(--mid);
  --eyebrow-color:var(--signal);
  --cta:var(--signal);
  --cta-fg:var(--paper);
  --line:var(--rule);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:var(--ink);
    --bg-raised:var(--panel-on-dark);
    --fg:var(--paper);
    --fg-quiet:var(--muted-on-dark);
    --fg-heading:var(--paper);
    --link:var(--on-dark);
    --eyebrow-color:var(--on-dark-warm);  /* the ban, applied */
    --cta:var(--on-dark-warm);
    --cta-fg:var(--ink);
    --line:var(--rule-on-dark);
  }
}

[data-theme="dark"] {
  --bg:var(--ink);
  --bg-raised:var(--panel-on-dark);
  --fg:var(--paper);
  --fg-quiet:var(--muted-on-dark);
  --fg-heading:var(--paper);
  --link:var(--on-dark);
  --eyebrow-color:var(--on-dark-warm);
  --cta:var(--on-dark-warm);
  --cta-fg:var(--ink);
  --line:var(--rule-on-dark);
}


/* ---------------------------------------------------------------------------
   2. RESET AND BASE
   ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6rem; }

body {
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:400;
  line-height:1.7;
  font-variant-numeric:tabular-nums;   /* section 11, non-negotiable */
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

img, svg, video { display:block; max-width:100%; height:auto; }

a { color:inherit; text-underline-offset:0.18em; text-decoration-thickness:from-font; }
:where(a:not([class])) {
  color:var(--link);
  text-decoration-color:color-mix(in srgb, var(--link) 40%, transparent);
}
:where(a:not([class])):hover { text-decoration-color:currentColor; }

:focus-visible { outline:2px solid var(--link); outline-offset:3px; border-radius:2px; }

::selection { background:color-mix(in srgb, var(--mark-water-far) 55%, transparent); color:var(--ink); }

button, input, select, textarea { font:inherit; color:inherit; }
hr { border:0; }


/* ---------------------------------------------------------------------------
   3. TYPE, to the section 11 table
   ------------------------------------------------------------------------ */

h1, .h1 {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem, 6.5vw, 4.2rem);
  letter-spacing:-0.025em; line-height:1.16;
  color:var(--fg-heading); text-wrap:balance;
}

h2, .h2 {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing:-0.018em; line-height:1.2;
  color:var(--fg-heading); text-wrap:balance;
}

h3, .h3 {
  font-family:var(--serif); font-weight:600;
  font-size:1.32rem; letter-spacing:-0.008em; line-height:1.3;
  color:var(--fg-heading); text-wrap:balance;
}

/* Inline heads are Inter, and ink rather than deep. Section 11 is explicit. */
h4, .h4 {
  font-family:var(--sans); font-weight:700;
  font-size:1.02rem; line-height:1.4;
  color:var(--fg);
}

/* Lead paragraph. The only other place Newsreader appears. */
.lede {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem, 2.2vw, 1.42rem);
  line-height:1.5;
  color:var(--fg-heading);
  max-width:60ch;
  text-wrap:pretty;
}

/* Eyebrow. Signal red on paper, and it carries information: hub name or
   section label, never decoration. On --panel it would be 4.25:1, so the
   guard below moves it to --deep there. On --deep the ban applies and the
   semantic layer has already swapped it to --on-dark-warm. */
.eyebrow {
  font-family:var(--sans); font-weight:700;
  font-size:0.66rem; letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--eyebrow-color);
}
.card .eyebrow, .panel .eyebrow, .calc .eyebrow { color:var(--fg-heading); }

/* Captions and source lines. Inter, not mono. */
.caption, .source-line, figcaption {
  font-family:var(--sans); font-weight:400;
  font-size:0.82rem; line-height:1.5;
  color:var(--fg-quiet);
}

/* IBM Plex Mono appears here and nowhere else: code, data attributes, hex. */
code, kbd, samp, .mono, .hex {
  font-family:var(--mono); font-weight:400;
  font-size:0.82rem;
}

.small { font-size:0.82rem; color:var(--fg-quiet); }


/* ---------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------ */

.wrap { width:100%; max-width:var(--maxw-wide); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--prose { max-width:calc(var(--maxw) + var(--gutter) * 2); }

.section { padding-block:var(--s-8); }
.section + .section { padding-block-start:0; }
.section--generous { padding-block:var(--s-9); }

/* Dark band. One or two per page, never more: deep is 15 percent of a screen. */
.band {
  background:var(--deep);
  color:var(--paper);
  padding-block:var(--s-9);
}
.band h1, .band h2, .band h3, .band .h1, .band .h2 { color:var(--paper); }
.band h4 { color:var(--paper); }
.band .lede { color:var(--paper); }
.band .eyebrow { color:var(--on-dark-warm); }   /* the ban */
.band .caption, .band .source-line { color:var(--muted-on-dark); }
.band a:not([class]) { color:var(--on-dark); }

.stack > * + * { margin-block-start:var(--s-4); }
.stack-lg > * + * { margin-block-start:var(--s-6); }

/* A bare .grid fills responsively. The engine emits <div class="grid"> with no
   column modifier for post-card lists, so without a default it collapsed to a
   single column. The .grid--N and .grid-N modifiers below still override. */
.grid {
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
@media (min-width:48rem) {
  .grid--2 { grid-template-columns:repeat(2, 1fr); }
  .grid--3 { grid-template-columns:repeat(3, 1fr); }
  .grid--4 { grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:64rem) { .grid--4 { grid-template-columns:repeat(4, 1fr); } }

.divider { border-top:var(--line); margin-block:var(--s-7); }


/* ---------------------------------------------------------------------------
   5. HEADER
   A deep band, per the migration checklist: hbp-horizontal-dark.svg is the
   reversed lockup and belongs on dark. Header and footer are the two dark
   bands that make up deep's 15 percent.
   ------------------------------------------------------------------------ */

.site-header {
  position:sticky; top:0; z-index:50;
  background:var(--deep);
  color:var(--paper);
}

.site-header__inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-5); min-height:4.5rem;
}

/* Horizontal lockup minimum is 150px. Clear space is a quarter of the badge
   height on all four sides; the 4.5rem bar and the gap below satisfy it. */
.site-logo { display:block; flex:none; text-decoration:none; }
.site-logo img, .site-logo svg { height:3rem; width:auto; min-width:150px; }

.nav { display:flex; align-items:center; gap:var(--s-5); }
.nav a {
  font-size:0.86rem; font-weight:500;
  text-decoration:none;
  color:color-mix(in srgb, var(--paper) 78%, transparent);
  padding-block:var(--s-2);
  border-bottom:2px solid transparent;
  transition:color 120ms linear, border-color 120ms linear;
}
.nav a:hover { color:var(--paper); }
.nav a[aria-current="page"] { color:var(--paper); border-bottom-color:var(--on-dark-warm); }

@media (max-width:56rem) {
  .nav { display:none; }
  .nav[data-open="true"] {
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; inset-inline:0; top:100%;
    background:var(--deep); padding:var(--s-5) var(--gutter);
  }
}


/* ---------------------------------------------------------------------------
   6. HERO
   Section 14: deep band, wordmark, an H1 that is a claim rather than a
   greeting, the tagline, then a signal-red primary and a ghost secondary.
   No stock photography of a house. No search bar above the fold.
   ------------------------------------------------------------------------ */

.hero { padding-block:var(--s-9); }
.hero__title { max-width:18ch; }
.hero__lede { margin-block-start:var(--s-5); }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-block-start:var(--s-6); }


/* ---------------------------------------------------------------------------
   7. STAT TILE AND FIGURE
   Section 14, market page: a four-tile row at the top, tabular figures, deep
   values, and the source and date line directly under the row rather than in
   a footer.

   .figure is the long form of the same idea and is the signature component.
   It is built so a bare number looks broken: with no .figure__source it
   renders a stub in place of the attribution, to be caught in review.
   ------------------------------------------------------------------------ */

.tiles { display:grid; gap:var(--s-5); }
@media (min-width:40rem) { .tiles { grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem) { .tiles { grid-template-columns:repeat(4,1fr); } }

.tile { border-top:2px solid var(--deep); padding-block-start:var(--s-3); }

/* Stat values are Inter 600, not mono. Section 11. */
.tile__value, .figure__value, .calc__result-value {
  font-family:var(--sans); font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
  color:var(--fg-heading);
  line-height:1.05;
}
.tile__value { font-size:2.1rem; }
.tile__label { font-size:0.9rem; color:var(--fg); margin-block-start:var(--s-2); max-width:26ch; }
.tile__delta { font-size:0.82rem; font-weight:600; margin-block-start:var(--s-1); }

/* At most one highlighted figure per view. Red is 5 percent or less. */
.tile--key .tile__value { color:var(--signal); }
.tile--key { border-top-color:var(--signal); }
.band .tile--key .tile__value,
.band .tile--key { color:var(--on-dark-warm); border-top-color:var(--on-dark-warm); }

.figure { border-top:2px solid var(--deep); padding-block-start:var(--s-4); max-width:34rem; }
.figure__value { font-size:clamp(2.2rem, 5vw, 3rem); }
.figure__label {
  margin-block-start:var(--s-2);
  font-size:1rem; font-weight:600; color:var(--fg);
  max-width:34ch; text-wrap:pretty;
}

/* Source and date. Format: publisher, comma, title, colon, URL. */
.figure__source {
  margin-block-start:var(--s-3);
  font-family:var(--sans); font-size:0.82rem;
  color:var(--fg-quiet);
}
.figure__source time::before { content:" · "; }

.figure:not(:has(.figure__source))::after {
  content:"NO SOURCE ATTACHED";
  display:block; margin-block-start:var(--s-3);
  font-family:var(--sans); font-size:0.7rem;
  font-weight:700; letter-spacing:0.14em;
  color:var(--cta);
  border:1px dashed var(--cta);
  padding:var(--s-1) var(--s-2);
}

/* What it does not say. The other half of the tagline, given a real slot. */
.figure__limit, .limit {
  margin-block-start:var(--s-4);
  padding-inline-start:var(--s-4);
  border-inline-start:3px solid var(--mid);
  font-size:0.95rem; line-height:1.6;
  color:var(--fg-quiet);
  max-width:56ch; text-wrap:pretty;
}
.limit { margin-block:var(--s-6); }
.limit::before {
  content:"What this does not tell you";
  display:block;
  font-size:0.66rem; font-weight:700; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--fg-quiet);
  margin-block-end:var(--s-2);
}
.band .figure__limit, .band .limit { border-inline-start-color:var(--on-dark); color:var(--muted-on-dark); }

/* The refusal. Step one of the signature move, when a piece opens by
   declining the premise. Newsreader, because it is a claim, not body copy. */
.refusal {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.3rem, 2.6vw, 1.6rem);
  line-height:1.4; color:var(--fg-heading);
  border-top:var(--line); border-bottom:var(--line);
  padding-block:var(--s-5); margin-block:var(--s-7);
  max-width:60ch; text-wrap:pretty;
}
.refusal q { quotes:"\201C" "\201D"; font-style:italic; }


/* ---------------------------------------------------------------------------
   8. PROSE
   Section 14, blog post: paper background, 68ch measure, hub tag in signal
   red above the headline, byline under it, sources in a panel at the foot,
   one dark pull-quote band maximum per post.
   ------------------------------------------------------------------------ */

.prose { font-size:16.5px; line-height:1.7; max-width:68ch; color:var(--fg); }
.prose > * + * { margin-block-start:var(--s-5); }
.prose h2 { margin-block-start:var(--s-8); }
.prose h3 { margin-block-start:var(--s-7); }
.prose h4 { margin-block-start:var(--s-6); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-block-start:var(--s-3); }
.prose p { text-wrap:pretty; }
.prose strong { font-weight:600; }
.prose a { color:var(--link); text-decoration:underline; text-decoration-thickness:1.5px; }
.prose a:hover { color:var(--fg); }
.prose ul, .prose ol { padding-inline-start:1.35em; }
.prose li + li { margin-block-start:var(--s-2); }
.prose li::marker { color:var(--link); }
.prose figure { margin-block:var(--s-7); }
.prose figcaption { margin-block-start:var(--s-3); }
.prose code { background:var(--bg-raised); padding:0.1em 0.35em; border-radius:var(--radius-sm); }

/* Byline: "Paarth Shah, REALTOR® · Month Year · Hub name." Consistent across
   all 82 drafts already. The separators are interpuncts. */
.byline {
  font-size:0.86rem; color:var(--fg-quiet);
  display:flex; flex-wrap:wrap; align-items:center; gap:0.45em;
  margin-block-start:var(--s-3);
}
.byline strong { color:var(--fg); font-weight:600; }
.byline > * + *::before { content:"· "; color:var(--fg-quiet); }

/* Sources block at the foot of every post. */
.sources {
  background:var(--bg-raised);
  border-radius:var(--radius);
  padding:var(--s-5);
  margin-block-start:var(--s-8);
  font-size:0.82rem; line-height:1.6;
  color:var(--fg-quiet);
  max-width:68ch;
}
.sources h2, .sources h3 {
  font-family:var(--sans); font-size:0.66rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--fg-heading); margin:0 0 var(--s-3);
}
.sources ol { padding-inline-start:1.3em; }
.sources li + li { margin-block-start:var(--s-2); }

/* One dark pull-quote band per post, maximum. */
.pullquote {
  background:var(--deep); color:var(--paper);
  border-radius:var(--radius);
  padding:var(--s-6);
  margin-block:var(--s-7);
  font-family:var(--serif); font-size:1.3rem; line-height:1.45;
  max-width:68ch; text-wrap:pretty;
}


/* ---------------------------------------------------------------------------
   9. CARDS AND TAGS
   Section 13: text wears text tokens, never the series colour. The coloured
   mark beside the label carries identity. --cat-6 is 2.98:1 on paper, so
   this is a legibility requirement, not a stylistic preference.
   ------------------------------------------------------------------------ */

.card {
  position:relative;
  background:var(--bg-raised);
  border-radius:var(--radius);
  padding:var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-3);
  transition:transform 120ms ease-out;
}
.card__title { font-family:var(--serif); font-size:1.15rem; font-weight:600; line-height:1.3; color:var(--fg-heading); }
.card__title a { text-decoration:none; }
.card__title a::after { content:""; position:absolute; inset:0; }
.card__meta { font-size:0.82rem; color:var(--fg-quiet); margin-block-start:auto; }

/* Hub tag, signal red, above the headline. Section 14. */
.hub-tag {
  font-family:var(--sans); font-weight:700;
  font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--signal);
}
.card .hub-tag, .band .hub-tag { color:var(--fg-heading); }
.band .hub-tag { color:var(--on-dark-warm); }

/* Category tag: colour is the mark, text is a text token. */
.tag {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:0.82rem; color:var(--fg-quiet);
}
.tag::before {
  content:""; inline-size:8px; block-size:8px; border-radius:50%;
  background:var(--tag-color, var(--mid)); flex:none;
}
.tag[data-cat="1"] { --tag-color:var(--cat-1); }
.tag[data-cat="2"] { --tag-color:var(--cat-2); }
.tag[data-cat="3"] { --tag-color:var(--cat-3); }
.tag[data-cat="4"] { --tag-color:var(--cat-4); }
.tag[data-cat="5"] { --tag-color:var(--cat-5); }
.tag[data-cat="6"] { --tag-color:var(--cat-6); }


/* ---------------------------------------------------------------------------
   10. REGIONS
   NOTE, unresolved: section 12 specifies single-colour --deep line drawings
   of each hub's actual geographic outline, 1.5px stroke, no fill, no baked
   in label, with a signal-red dot at the centroid. Paarth is shooting
   photographs for all eight hubs instead. Those are different systems and
   the brand cowork needs to settle it. The markup below carries either.

   Filenames follow REGION_SLUG in engine/build_blog.py, which is the
   authority: san-francisco, peninsula, silicon-valley, east-bay,
   contra-costa, marin, north-bay, sacramento.
   ------------------------------------------------------------------------ */

.region { position:relative; display:flex; flex-direction:column; gap:var(--s-3); }
.region__media {
  aspect-ratio:4 / 3;
  background:var(--bg-raised);
  border-radius:var(--radius);
  overflow:hidden;
}
.region__media img, .region__media svg {
  inline-size:100%; block-size:100%;
  object-fit:cover;
  transition:transform 200ms ease-out;
}
.region:hover .region__media img { transform:scale(1.02); }
.region__media[data-placeholder] { outline:1px dashed var(--mid); outline-offset:-1px; }
.region__name { font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--fg-heading); }
.region__name a { text-decoration:none; }
.region__name a::after { content:""; position:absolute; inset:0; }
.region__count { font-size:0.82rem; color:var(--fg-quiet); font-variant-numeric:tabular-nums; }

/* Contra Costa and North Bay were at zero as of the 2026-08-17 rotation. */
.region[data-count="0"] .region__count::after { content:" · writing in progress"; }


/* ---------------------------------------------------------------------------
   11. DATA TABLES
   Numerals with the symbol in tables. Tabular figures everywhere.
   Every chart and table carries source and date in muted, no exceptions.
   ------------------------------------------------------------------------ */

.data-table-scroll { overflow-x:auto; margin-block:var(--s-6); }

.data-table { inline-size:100%; border-collapse:collapse; font-size:0.9rem; }
.data-table caption {
  text-align:start; font-size:0.9rem; font-weight:600;
  color:var(--fg); padding-block-end:var(--s-3);
}
.data-table th {
  text-align:start;
  font-size:0.66rem; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--fg-quiet);
  padding:var(--s-2) var(--s-4) var(--s-3) 0;
  border-bottom:1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  white-space:nowrap;
}
.data-table td {
  padding:var(--s-3) var(--s-4);
  padding-inline-start:0;
  border-bottom:var(--line);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.data-table td:first-child { white-space:normal; }
.data-table th.right, .data-table td.right { text-align:end; padding-inline-end:0; }
.data-table tbody tr:hover { background:var(--bg-raised); }

.delta-up { color:var(--cat-6); }
.delta-down { color:var(--cat-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .delta-up { color:#8FCB63; }
}
[data-theme="dark"] .delta-up { color:#8FCB63; }


/* ---------------------------------------------------------------------------
   12. BUTTONS AND FORMS
   Primary is signal red. It is the one place a red field is permitted, and
   never larger than a button.
   ------------------------------------------------------------------------ */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--sans); font-size:0.9rem; font-weight:600;
  padding:0.75rem 1.4rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background-color 120ms linear, border-color 120ms linear, color 120ms linear;
}

.btn--primary { background:var(--cta); color:var(--cta-fg); }
.btn--primary:hover { background:color-mix(in srgb, var(--cta) 88%, #000); }

.btn--secondary { background:transparent; color:var(--fg); border-color:color-mix(in srgb, var(--fg) 30%, transparent); }
.btn--secondary:hover { border-color:var(--fg); }

.btn--quiet { background:transparent; color:var(--link); padding-inline:0; }
.btn--quiet:hover { text-decoration:underline; }

/* On a deep band the ban applies: the primary becomes the warm accent. */
.band .btn--primary { background:var(--on-dark-warm); color:var(--ink); }
.band .btn--primary:hover { background:color-mix(in srgb, var(--on-dark-warm) 88%, #fff); }
.band .btn--secondary { color:var(--paper); border-color:color-mix(in srgb, var(--on-dark) 45%, transparent); }
.band .btn--secondary:hover { border-color:var(--on-dark); }
.band .btn--quiet { color:var(--on-dark); }

.field { display:flex; flex-direction:column; gap:var(--s-2); }
.field > label { font-size:0.86rem; font-weight:600; color:var(--fg); }
.field__help { font-size:0.82rem; color:var(--fg-quiet); }

.input, input[type="text"], input[type="email"], input[type="number"], select, textarea {
  inline-size:100%;
  background:var(--bg);
  border:1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  border-radius:var(--radius-sm);
  padding:0.7rem 0.85rem;
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  font-size:1rem;
  color:var(--fg);
  transition:border-color 120ms linear;
}
.input:hover, input:hover, select:hover, textarea:hover { border-color:var(--fg-quiet); }
.input:focus, input:focus, select:focus, textarea:focus { border-color:var(--link); outline-offset:1px; }
::placeholder { color:var(--fg-quiet); opacity:1; }


/* ---------------------------------------------------------------------------
   13. CALCULATOR
   Four modes: investment, rent vs buy, cost of waiting, refinance. The math
   is generic and uses no MLS data, so the assumptions are part of the
   component rather than a footnote.
   ------------------------------------------------------------------------ */

.calc { background:var(--bg-raised); border-radius:var(--radius); padding:var(--s-6); }

.calc__modes {
  display:flex; flex-wrap:wrap; gap:var(--s-1);
  border-bottom:1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  margin-block-end:var(--s-6);
}
.calc__mode {
  appearance:none; background:none; border:0;
  padding:var(--s-3) var(--s-4);
  font-size:0.86rem; font-weight:600;
  color:var(--fg-quiet);
  border-bottom:2px solid transparent; margin-block-end:-1px;
  cursor:pointer;
  transition:color 120ms linear, border-color 120ms linear;
}
.calc__mode:hover { color:var(--fg); }
.calc__mode[aria-selected="true"] { color:var(--fg-heading); border-bottom-color:var(--deep); }

.calc__body { display:grid; gap:var(--s-6); }
@media (min-width:56rem) { .calc__body { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-7); } }

.calc__inputs { display:grid; gap:var(--s-4); }
.calc__results { display:flex; flex-direction:column; gap:var(--s-5); }
.calc__result-value { font-size:clamp(2rem, 4.5vw, 2.6rem); }
.calc__result-label { font-size:0.86rem; color:var(--fg-quiet); margin-block-start:var(--s-2); }

.calc__assumptions {
  border-top:var(--line); padding-block-start:var(--s-4);
  font-size:0.82rem; color:var(--fg-quiet);
}
.calc__assumptions summary { cursor:pointer; font-weight:600; color:var(--fg); }
.calc__assumptions ul { margin-block-start:var(--s-3); padding-inline-start:1.2em; }
.calc__assumptions li + li { margin-block-start:var(--s-1); }


/* ---------------------------------------------------------------------------
   14. CTA
   Section 08. One canonical close, one permitted variant, and never a close
   containing a deadline, "before rates change", "act now", or "do not miss".
   ------------------------------------------------------------------------ */

.cta {
  border:var(--line); border-radius:var(--radius);
  padding:var(--s-6);
  display:flex; flex-direction:column; gap:var(--s-4);
  max-width:68ch;
}
.cta__title { font-family:var(--serif); font-size:1.32rem; font-weight:600; color:var(--fg-heading); }
.cta__body { color:var(--fg-quiet); max-width:60ch; text-wrap:pretty; }
.cta__actions { display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; }


/* ---------------------------------------------------------------------------
   15. FOOTER
   MLS attribution and responsible-broker identification are required and are
   not to be removed or reduced. Neither changes with the rebrand.
   ------------------------------------------------------------------------ */

.site-footer {
  background:var(--deep); color:var(--paper);
  margin-block-start:var(--s-9);
  padding-block:var(--s-8) var(--s-6);
}
.site-footer a { color:var(--on-dark); }
.site-footer .eyebrow { color:var(--on-dark-warm); }

.site-footer__grid { display:grid; gap:var(--s-6); }
@media (min-width:48rem) { .site-footer__grid { grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-7); } }
.site-footer__links { display:flex; flex-direction:column; gap:var(--s-2); font-size:0.86rem; }

.legal {
  margin-block-start:var(--s-7);
  padding-block-start:var(--s-5);
  border-top:1px solid color-mix(in srgb, var(--on-dark) 25%, transparent);
  font-size:0.78rem; line-height:1.6;
  color:var(--muted-on-dark);
  display:grid; gap:var(--s-3);
}
.legal strong, .legal__broker { color:var(--paper); font-weight:600; }
/* The mark is a legal notice, not decoration, so it reads at the same weight
   as the text beside it rather than at the muted opacity of the block. */
.legal__housing { display:flex; align-items:flex-start; gap:var(--s-3); }
.legal__housing svg {
  inline-size:1.9rem; block-size:auto; flex:none;
  color:var(--paper);
  margin-block-start:0.1rem;
}


/* ---------------------------------------------------------------------------
   16. UTILITIES
   ------------------------------------------------------------------------ */

.visually-hidden {
  position:absolute; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.skip-link {
  position:absolute; inset-inline-start:var(--s-4); top:-4rem; z-index:100;
  background:var(--paper); color:var(--deep);
  padding:var(--s-3) var(--s-4); border-radius:var(--radius-sm);
  transition:top 120ms ease-out;
}
.skip-link:focus { top:var(--s-4); }

.measure { max-width:68ch; }
.measure-lede { max-width:60ch; }
.text-quiet { color:var(--fg-quiet); }
.panel { background:var(--bg-raised); border-radius:var(--radius); padding:var(--s-5); }


/* ---------------------------------------------------------------------------
   17. MOTION
   The identity has exactly one animation, the sun landing as the
   punctuation, and it lives in hbp-animated-*.svg on the home page only.
   Nothing here adds a second. Everything below is a state change under 200ms.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ---------------------------------------------------------------------------
   18. PRINT
   ------------------------------------------------------------------------ */

@media print {
  :root { --bg:#fff; --fg:#000; --fg-quiet:#333; --fg-heading:#000; --line:1px solid #ccc; }
  .site-header, .nav, .cta, .calc__modes, .skip-link { display:none; }
  body { font-size:11pt; }
  .prose { max-width:none; }
  .prose a::after { content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .figure, .tile, .data-table { break-inside:avoid; }
  .site-footer, .band, .pullquote { background:none; color:#000; }
  .site-footer { border-top:1px solid #999; }
  .legal { color:#333; }
}


/* ---------------------------------------------------------------------------
   19. ENGINE COMPATIBILITY
   build_blog.py, build_markets.py, and build_neighborhoods.py emit a fixed
   class vocabulary inherited from Bela's templates. Rather than rewrite the
   generators' HTML, those class names are mapped onto the components above.
   Everything here is an alias. Nothing new is introduced.

   If the generators are ever rewritten to emit the native classes directly,
   this whole section can be deleted.
   ------------------------------------------------------------------------ */

/* .pagehead is the post header band. It gets the hub eyebrow and the H1. */
.pagehead { padding-block:var(--s-8) var(--s-5); }
.pagehead .wrap { max-width:calc(var(--maxw) + var(--gutter) * 2); }
.pagehead h1 { margin-block-start:var(--s-3); }
.pagehead .eyebrow { display:block; }
.pagehead .eyebrow a { color:var(--fg-quiet); text-decoration:none; }
.pagehead .eyebrow a:hover { color:var(--fg-heading); text-decoration:underline; }

/* .article is the post body. Same rules as .prose. */
.article {
  width:100%;
  max-width:calc(var(--maxw) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
  font-size:16.5px;
  line-height:1.7;
}
.article > * + * { margin-block-start:var(--s-5); }
.article h2 { margin-block-start:var(--s-8); }
.article h3 { margin-block-start:var(--s-7); }
.article h2 + *, .article h3 + * { margin-block-start:var(--s-3); }
.article p { text-wrap:pretty; max-width:68ch; }
.article ul, .article ol { padding-inline-start:1.35em; max-width:68ch; }
.article li + li { margin-block-start:var(--s-2); }
.article li::marker { color:var(--link); }
.article a { color:var(--link); text-decoration:underline; text-decoration-thickness:1.5px; }
.article a:hover { color:var(--fg); }
.article strong { font-weight:600; }
.article table { inline-size:100%; border-collapse:collapse; font-size:0.9rem; margin-block:var(--s-6); }
.article th {
  text-align:start; font-size:0.66rem; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--fg-quiet);
  padding:var(--s-2) var(--s-4) var(--s-3) 0;
  border-bottom:1px solid color-mix(in srgb, var(--fg) 22%, transparent);
}
.article td {
  padding:var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom:var(--line);
  font-variant-numeric:tabular-nums;
}

/* .note is the caption and source register. */
.note { font-size:0.82rem; line-height:1.5; color:var(--fg-quiet); max-width:68ch; }

/* .rule is the engine's <hr>. */
hr.rule, .rule { border:0; border-top:var(--line); }

/* .readmore is the quiet inline link. */
.readmore {
  font-size:0.9rem; font-weight:600; color:var(--link);
  text-decoration:none; white-space:nowrap;
}
.readmore:hover { text-decoration:underline; }

.center { text-align:center; }
.center .eyebrow { display:block; }

/* The engine writes .btn with no modifier, so bare .btn is the primary. */
.btn:not([class*="btn--"]) { background:var(--cta); color:var(--cta-fg); }
.btn:not([class*="btn--"]):hover { background:color-mix(in srgb, var(--cta) 88%, #000); }

/* The FAQ block the engine appends to every post. */
.article .faq { margin-block-start:var(--s-5); }
.article details {
  border-top:var(--line);
  padding-block:var(--s-4);
  max-width:68ch;
}
.article details summary {
  cursor:pointer; font-weight:600; color:var(--fg-heading);
  font-size:1rem; list-style:none;
}
.article details summary::-webkit-details-marker { display:none; }
.article details summary::before { content:"+ "; color:var(--link); font-weight:700; }
.article details[open] summary::before { content:"\2212 "; }
.article details > *:not(summary) { margin-block-start:var(--s-3); }
.pagehead + .section { padding-block-start:0; }

/* --- Market pages. Same aliasing job as section 19. ------------------- */

.wrap.narrow { max-width:calc(var(--maxw) + var(--gutter) * 2); }

/* The region banner is art, not a hero. It is constrained, not full bleed. */
.region-banner {
  max-width:var(--maxw-wide);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.region-banner img, .region-banner svg {
  inline-size:100%;
  max-block-size:22rem;
  object-fit:cover;
  border-radius:var(--radius);
}

/* .post-card wraps the whole card in an <a>, so underlines have to be
   killed on the container and put back only on the title. */
.post-card {
  display:block;
  background:var(--bg-raised);
  border-radius:var(--radius);
  padding:var(--s-5);
  text-decoration:none;
  color:var(--fg);
  transition:transform 120ms ease-out;
}
.post-card:hover { transform:translateY(-1px); }
.post-card, .post-card * { text-decoration:none; }
.post-card__meta { font-size:0.82rem; color:var(--fg-quiet); }
.post-card h3 {
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  line-height:1.3; color:var(--fg-heading);
  margin-block-start:var(--s-2);
}
.post-card:hover h3 { text-decoration:underline; text-decoration-thickness:1.5px; }
.post-card p { font-size:0.9rem; color:var(--fg-quiet); margin-block-start:var(--s-2); max-width:60ch; }
.post-card .readmore { display:inline-block; margin-block-start:var(--s-3); }

.section--stone { background:var(--bg-raised); }

/* The lead band inherits Bela's inverted treatment. */
.leadband { background:var(--deep); color:var(--paper); padding-block:var(--s-8); }
.leadband h2, .leadband h3 { color:var(--paper); }
.leadband p { color:var(--muted-on-dark); }
.leadband .eyebrow { color:var(--on-dark-warm); }

/* The engine emits btn--light and btn--ghost. Map, do not invent. */
.btn--light { background:var(--paper); color:var(--deep); }
.btn--light:hover { background:var(--mark-fog); }
.btn--ghost { background:transparent; color:var(--fg); border-color:color-mix(in srgb, var(--fg) 30%, transparent); }
.btn--ghost:hover { border-color:var(--fg); }
.leadband .btn--ghost, .band .btn--ghost { color:var(--paper); border-color:color-mix(in srgb, var(--on-dark) 45%, transparent); }
.leadband .btn--ghost:hover, .band .btn--ghost:hover { border-color:var(--on-dark); }


/* ---------------------------------------------------------------------------
   20. CALCULATOR
   calculator.html ships with no <style> block of its own: every rule it needs
   lived in Bela's stylesheet, which this file replaced. Without them the
   tooltips rendered inline as body text, the inputs collapsed, and the whole
   thing stacked into one column. This section is that missing stylesheet,
   rebuilt on the Still Water tokens.

   Layout: inputs left, analysis right. The input column scrolls
   independently and sticks, so the charts stay in view while you change
   numbers, which is the entire point of the tool.
   ------------------------------------------------------------------------ */

.mode-toggle {
  display:flex; flex-wrap:wrap; gap:var(--s-1);
  border-bottom:1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  margin-block:var(--s-6) var(--s-6);
}
.mode-btn {
  appearance:none; background:none; border:0;
  padding:var(--s-3) var(--s-4);
  font-family:var(--sans); font-size:0.9rem; font-weight:600;
  color:var(--fg-quiet);
  border-bottom:2px solid transparent; margin-block-end:-1px;
  cursor:pointer; white-space:nowrap;
  transition:color 120ms linear, border-color 120ms linear;
}
.mode-btn:hover { color:var(--fg); }
.mode-btn.active { color:var(--fg-heading); border-bottom-color:var(--deep); }

/* The two panels. */
.calc-grid { display:grid; gap:var(--s-6); align-items:start; }
@media (min-width:64rem) {
  .calc-grid { grid-template-columns:minmax(340px, 30rem) minmax(0, 1fr); gap:var(--s-7); }
  .calc-inputs {
    position:sticky; top:5.5rem;
    max-height:calc(100vh - 7rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-inline-end:var(--s-4);
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--fg) 25%, transparent) transparent;
  }
  .calc-inputs::-webkit-scrollbar { width:8px; }
  .calc-inputs::-webkit-scrollbar-thumb {
    background:color-mix(in srgb, var(--fg) 22%, transparent); border-radius:4px;
  }
}

.calc-inputs {
  background:var(--bg-raised);
  border-radius:var(--radius);
  padding:var(--s-5);
}
.calc-inputs h3 {
  font-family:var(--sans); font-size:0.66rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--fg-quiet);
  margin-block:var(--s-5) var(--s-3);
  padding-block-end:var(--s-2);
  border-bottom:var(--line);
}
.calc-inputs h3:first-child { margin-block-start:0; }

/* Two inputs side by side where the source pairs them. */
.calc-2 { display:grid; gap:var(--s-4); }
@media (min-width:30rem) { .calc-2 { grid-template-columns:1fr 1fr; } }

.field { display:flex; flex-direction:column; gap:var(--s-2); margin-block-end:var(--s-4); }
.field label {
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3);
  font-size:0.86rem; font-weight:500; color:var(--fg);
}
.field label > b {
  font-family:var(--sans); font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--fg-heading); white-space:nowrap;
}
.field input[type="number"] {
  inline-size:100%;
  background:var(--bg);
  border:1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  border-radius:var(--radius-sm);
  padding:0.55rem 0.7rem;
  font-family:var(--sans); font-size:0.95rem;
  font-variant-numeric:tabular-nums;
  color:var(--fg);
}
.field input[type="number"]:focus { border-color:var(--link); }

/* The tooltip. Without this the ? and its whole explanation printed inline,
   which is why every label read like a paragraph. */
.info {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:1.05em; block-size:1.05em;
  margin-inline-start:0.3em;
  border:1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  border-radius:50%;
  font-size:0.72rem; font-weight:600; line-height:1;
  color:var(--fg-quiet);
  cursor:help; user-select:none;
  vertical-align:middle;
}
.info:hover, .info:focus-visible { color:var(--fg); border-color:var(--fg); }

.tip {
  position:absolute;
  bottom:calc(100% + 8px); inset-inline-start:50%;
  transform:translateX(-50%);
  z-index:40;
  inline-size:min(20rem, 62vw);
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius-sm);
  padding:var(--s-3) var(--s-4);
  font-size:0.8rem; font-weight:400; line-height:1.5;
  text-align:start;
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
  opacity:0; visibility:hidden;
  transition:opacity 120ms linear, visibility 120ms linear;
  pointer-events:none;
}
.tip b { color:var(--on-dark); font-weight:600; }
.info:hover .tip, .info:focus .tip, .info:focus-visible .tip { opacity:1; visibility:visible; }

/* Analysis column. */
.calc-legend {
  background:var(--bg-raised);
  border-inline-start:3px solid var(--mid);
  border-radius:var(--radius-sm);
  padding:var(--s-4) var(--s-5);
  font-size:0.86rem; line-height:1.6;
  color:var(--fg-quiet);
  margin-block-end:var(--s-5);
}
.calc-legend b { color:var(--fg); font-weight:600; }

.verdict {
  font-family:var(--serif); font-size:1.32rem; line-height:1.35;
  font-weight:600; color:var(--fg-heading);
  border-top:2px solid var(--deep);
  padding-block-start:var(--s-4);
  margin-block-end:var(--s-5);
  text-wrap:pretty;
}
.verdict:empty { display:none; }

.result-cards { display:grid; gap:var(--s-4); margin-block-end:var(--s-6); }
@media (min-width:38rem) { .result-cards { grid-template-columns:repeat(3, 1fr); } }

.result-card {
  background:var(--bg-raised);
  border-top:2px solid var(--deep);
  border-radius:0 0 var(--radius) var(--radius);
  padding:var(--s-4);
}
.rc-label { font-size:0.82rem; color:var(--fg-quiet); }
.rc-value {
  font-family:var(--sans); font-weight:600;
  font-size:1.75rem; line-height:1.1;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  color:var(--fg-heading);
  margin-block-start:var(--s-2);
}
.rc-note { font-size:0.78rem; line-height:1.45; color:var(--fg-quiet); margin-block-start:var(--s-2); }

.calc-sub {
  font-family:var(--sans); font-size:0.66rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--fg-quiet);
  padding-block-end:var(--s-3);
  border-bottom:var(--line);
  margin-block-end:var(--s-5);
}

.chart-card {
  background:var(--bg-raised);
  border-radius:var(--radius);
  padding:var(--s-5);
  margin-block-end:var(--s-5);
}
.chart-card h3 {
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  color:var(--fg-heading); margin-block-end:var(--s-2);
}
.chart-sub { font-size:0.82rem; line-height:1.55; color:var(--fg-quiet); margin-block-end:var(--s-4); }
.chart-wrap { position:relative; block-size:clamp(200px, 34vw, 320px); }
.chart-wrap canvas { inline-size:100% !important; block-size:100% !important; }

.fallback-table { inline-size:100%; border-collapse:collapse; font-size:0.82rem; margin-block-start:var(--s-3); }
.fallback-table th, .fallback-table td {
  text-align:end; padding:var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom:var(--line); font-variant-numeric:tabular-nums;
}
.fallback-table th:first-child, .fallback-table td:first-child { text-align:start; }
.fallback-table th { font-weight:600; color:var(--fg-quiet); }

/* Print: the sticky column must not clip. */
@media print {
  .calc-inputs { position:static; max-height:none; overflow:visible; }
  .calc-grid { display:block; }
}

/* --- Market page blocks the engine emits that had no rule ------------- */

/* Two-up ZIP comparison, the "price cliff" pair. */
.grid.grid-2 { display:grid; gap:var(--s-5); }
@media (min-width:48rem) { .grid.grid-2 { grid-template-columns:repeat(2, 1fr); } }

/* .value is a ZIP card: heading, hairline, then the figures. */
.value {
  background:var(--bg-raised);
  border-radius:var(--radius);
  padding:var(--s-5);
}
.value h3 {
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  color:var(--fg-heading);
}
.value hr.rule { margin-block:var(--s-3); }
.value p { font-size:0.95rem; line-height:1.7; }
.value b { font-family:var(--sans); font-weight:600; font-variant-numeric:tabular-nums; color:var(--fg-heading); }
.value .note { font-size:0.82rem; color:var(--fg-quiet); }

/* .tldr is the callout under the ZIP pair. The engine sets its own tint
   inline, so this only handles structure and type. */
.tldr {
  border-inline-start:3px solid var(--mid);
  border-radius:var(--radius-sm);
  padding:var(--s-4) var(--s-5);
  max-width:68ch;
}
.tldr h4 {
  font-family:var(--sans); font-size:0.66rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--fg-quiet);
  margin-block-end:var(--s-2);
}
.tldr p { font-size:0.95rem; line-height:1.6; color:var(--fg); }
.tldr b { font-weight:600; font-variant-numeric:tabular-nums; }

/* --- Remaining engine classes ---------------------------------------- */

.grid.grid-3 { display:grid; gap:var(--s-5); }
@media (min-width:48rem) { .grid.grid-3 { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:64rem) { .grid.grid-3 { grid-template-columns:repeat(3, 1fr); } }

/* .post-card wraps its contents in a body div. Nothing to do but let it
   fill, since .post-card already carries the padding and background. */
.post-card__body { display:flex; flex-direction:column; gap:var(--s-1); }

/* Insights, grouped by month. Current month open, older months collapsed. */
.ins-month {
  font-family:var(--sans); font-size:0.66rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--fg-quiet);
  padding-block-end:var(--s-3);
  border-bottom:var(--line);
  margin-block:var(--s-7) var(--s-5);
}

.ins-arch { border-bottom:var(--line); padding-block:var(--s-4); }
.ins-arch summary {
  cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  color:var(--fg-heading);
  display:flex; align-items:baseline; gap:var(--s-3);
}
.ins-arch summary::-webkit-details-marker { display:none; }
.ins-arch summary::before { content:"+"; color:var(--link); font-family:var(--sans); font-weight:700; }
.ins-arch[open] summary::before { content:"\2212"; }
.ins-arch__n {
  font-family:var(--sans); font-size:0.82rem; font-weight:400;
  color:var(--fg-quiet); margin-inline-start:auto;
}

.rule--center { margin-inline:auto; max-width:6rem; }