/*
Theme Name: Harv Balu Journal
Theme URI: https://harvinder.dscloud.me/blog/
Author: Harv Balu
Author URI: https://www.harvrealtor.com
Description: The Sunday Real Estate Section. Harv Balu's journal set as the section homeowners trusted: ink and gold on newsprint, rules and paper tone for depth, Playfair Display and Inter, one orchestrated nameplate moment. Hand-built classic theme, no page builder. Design source: Wordpress-Synology/facelift (DESIGN.md).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: harvbalu-journal
*/

/* ============================================================
   THE SUNDAY REAL ESTATE SECTION — system CSS
   World: a working broadsheet section front. Ink on newsprint,
   gold as the single spot color. Depth comes from rules and
   paper tone, never from shadows or cards.
   ============================================================ */

:root {
  --ink: #1c1b18;          /* headline ink */
  --ink-body: #33312c;     /* body ink */
  --ink-soft: #5c5950;     /* datelines, captions (4.5:1 on paper) */
  --paper: #fdfcf9;        /* page ground */
  --paper-tone: #f4f1e8;   /* toned bands */
  --gold: #d4af37;         /* spot color */
  --gold-deep: #a8861f;    /* spot color at text weight (3:1+ large) */
  --gold-ink: #7c6210;     /* gold dark enough for small text on paper */
  --rule: #c9c4b4;         /* hairline rules */
  --rule-ink: #1c1b18;     /* structural rules */
  --serif: "Playfair Display", "Georgia", serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --measure: 68ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
}

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

a { color: inherit; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-ink); }
a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- folio strip ---------- */

.folio {
  border-bottom: 1px solid var(--rule-ink);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.folio .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-top: 0.55rem; padding-bottom: 0.55rem;
}
.folio-place { font-weight: 600; }
.folio-date { font-weight: 400; color: var(--ink-soft); }
.folio-call { font-weight: 600; white-space: nowrap; }
.folio-call a { text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 1px; }

/* ---------- nameplate ---------- */

.nameplate { text-align: center; padding: 2.1rem 0 0; }
.nameplate-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.5rem;
}
.ear { font-size: 0.8rem; line-height: 1.45; }
.ear-left { text-align: left; justify-self: start;
  font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink); }
.ear-left small { display: block; font-family: var(--sans); font-style: normal;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.3rem; }
.ear-right { justify-self: end; text-align: center;
  background: var(--gold); color: var(--ink);
  padding: 0.7rem 1.05rem; border: 1px solid var(--rule-ink); }
.ear-right .ear-kicker { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.ear-right .ear-num { font-family: var(--serif); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.02em; margin-top: 0.15rem; }
.ear-right a { text-decoration: none; }

.masthead-seal {
  width: 3.6rem; height: 3.6rem; margin: 0 auto 0.6rem; display: block;
}
.masthead-title {
  font-family: var(--serif); font-weight: 900; color: var(--ink);
  font-size: clamp(2.9rem, 7.5vw, 5.2rem);
  line-height: 0.95; letter-spacing: 0.005em;
}

/* the gilded nameplate: dust assembles on canvas, then is pressed into the printed h1 */
.masthead-word { position: relative; display: inline-block; }
.masthead-word.armed .masthead-title { opacity: 0; }
.masthead-word.pressed .masthead-title { opacity: 1; transition: opacity 0.9s ease; }
.masthead-canvas {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.masthead-word.pressed .masthead-canvas { opacity: 0; transition: opacity 0.9s ease; }
.masthead-cred {
  margin-top: 0.75rem;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.masthead-cred b { font-weight: 700; }

.double-rule {
  margin-top: 1.15rem;
  border-top: 3px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
  height: 6px;
}

/* ---------- section index / nav ---------- */

.paper-nav { border-bottom: 1px solid var(--rule-ink); }
.paper-nav ul {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0 2rem; padding: 0.6rem 1rem;
}
.paper-nav a {
  font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 600; color: var(--ink); text-decoration: none;
  padding: 0.2rem 0;
}
.paper-nav a:hover, .paper-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- section flags ---------- */

.flag {
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.flag-name {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.flag::before { content: ""; width: 2.2rem; height: 0.55rem; background: var(--gold); }
.flag::after { content: ""; flex: 1; border-top: 1px solid var(--rule-ink); }

/* ---------- lead story ---------- */

.front { padding: 2.2rem 0 0; }
.front-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 0 2.5rem;
}
.rail { border-left: 1px solid var(--rule); padding-left: 2.5rem; }

.lead-headline {
  font-family: var(--serif); font-weight: 900; color: var(--ink);
  font-size: clamp(1.9rem, 4.4vw, 3.15rem);
  line-height: 1.06; letter-spacing: -0.005em;
  text-wrap: balance;
}
.lead-headline a { text-decoration: none; }
.lead-deck {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.5;
  color: var(--ink-soft); margin-top: 0.9rem; max-width: 58ch;
}
.dateline {
  margin-top: 0.95rem;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.dateline b { color: var(--ink); font-weight: 600; }
.dateline .dl-cat { color: var(--gold-ink); font-weight: 700; }

.lead-figure { margin-top: 1.3rem; }
.lead-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
figcaption {
  font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5;
  padding-top: 0.45rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.7rem;
}
figcaption .credit { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; }

.lead-body { margin-top: 1.25rem; max-width: var(--measure); }
.lead-body p + p { margin-top: 1rem; }
.dropcap::first-letter,
.article-body > p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 700;
  font-size: 3.4em; line-height: 0.82;
  float: left; padding: 0.08em 0.12em 0 0; color: var(--ink);
}
.jump {
  display: inline-block; margin-top: 1.1rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}
.jump:hover { color: var(--gold-ink); }

/* ---------- rail boxes ---------- */

.rail-box + .rail-box { margin-top: 2rem; }
.rail-title {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); border-top: 3px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink);
  padding: 0.45rem 0; margin-bottom: 0.4rem;
}
.rail-title::before { content: ""; width: 1.4rem; height: 0.5rem; background: var(--gold); flex-shrink: 0; }
.agate { list-style: none; font-size: 0.86rem; }
.agate li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px dotted var(--rule); gap: 0.7rem;
}
.agate a { text-decoration: none; font-weight: 600; color: var(--ink); }
.agate a:hover { color: var(--gold-ink); }
.agate .n { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 0.78rem; white-space: nowrap; }
.rail-foot { font-size: 0.78rem; margin-top: 0.6rem; }
.agate-note { font-family: var(--serif); font-style: italic; font-size: 0.8rem;
  color: var(--ink-soft); margin-top: 0.5rem; }
.agate-2col { columns: 2; column-gap: 2.4rem; }
.agate-2col li { break-inside: avoid; }
.rail-note { font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft); }
.rail-note b { color: var(--ink); }
.tools-list { list-style: none; font-size: 0.88rem; }
.tools-list li { padding: 0.55rem 0; border-bottom: 1px dotted var(--rule); line-height: 1.45; }
.tools-list a { font-weight: 600; text-decoration: none; color: var(--ink); }
.tools-list a:hover { color: var(--gold-ink); }
.tools-list small { display: block; color: var(--ink-soft); font-size: 0.78rem; margin-top: 0.1rem; }

/* ---------- ruled story columns ---------- */

.band { padding: 2.4rem 0; }
.band + .band { border-top: 1px solid var(--rule-ink); }
.band-tone { background: var(--paper-tone); border-top: 1px solid var(--rule-ink); }

.col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.2rem; }
.col-grid > article { min-width: 0; }
.col-grid > article + article { border-left: 1px solid var(--rule); padding-left: 2.2rem; }
.story-hed {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: 1.32rem; line-height: 1.18; text-wrap: balance;
}
.story-hed a { text-decoration: none; }
.story-hed a:hover { color: var(--gold-ink); }
.story-dek { margin-top: 0.6rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-body); }
.story-dateline { margin-top: 0.55rem; }
.story-thumb { margin-bottom: 0.8rem; }
.story-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- market desk ---------- */

.desk-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 0 2.5rem; }
.desk-statement {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; text-wrap: balance;
}
.desk-statement em { font-style: italic; color: var(--gold-ink); }
.desk-sub { margin-top: 0.9rem; font-size: 0.95rem; color: var(--ink-soft); max-width: 44ch; }
.city-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 0.2rem; }
.city-table caption { text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink); border-top: 3px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink); padding: 0.45rem 0; }
.city-table td { padding: 0.5rem 0.2rem; border-bottom: 1px dotted var(--rule); }
.city-table td:first-child { font-weight: 600; }
.city-table td:first-child a { text-decoration: none; color: var(--ink); }
.city-table td:first-child a:hover { color: var(--gold-ink); }
.city-table .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }

/* ---------- transactions ---------- */

.tx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.2rem; }
.tx-grid > article + article { border-left: 1px solid var(--rule); padding-left: 2.2rem; }
.tx-entry { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.tx-entry img { width: 5.2rem; height: 5.2rem; object-fit: cover; flex-shrink: 0; }
.tx-hed { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; line-height: 1.25;
  color: var(--ink); }
.tx-hed a { text-decoration: none; }
.tx-hed a:hover { color: var(--gold-ink); }
.tx-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.25rem; }

/* ---------- photo feature ---------- */

.feature-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 0 2.5rem; align-items: center; }
.feature-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feature-kicker-rule { width: 2.2rem; height: 0.55rem; background: var(--gold); margin-bottom: 0.9rem; }
.feature-hed { font-family: var(--serif); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.12; color: var(--ink); text-wrap: balance; }
.feature-hed a { text-decoration: none; }
.feature-hed a:hover { color: var(--gold-ink); }
.feature-dek { margin-top: 0.8rem; font-size: 0.95rem; line-height: 1.6; }

/* ---------- desk CTA ---------- */

.deskline {
  background: var(--ink); color: var(--paper);
}
.deskline .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; padding-top: 1.7rem; padding-bottom: 1.7rem;
}
.deskline-copy { font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 700;
  line-height: 1.3; max-width: 34ch; text-wrap: balance; }
.deskline-copy em { color: var(--gold); font-style: italic; }
.deskline-act { text-align: right; }
.deskline-num {
  display: inline-block; font-family: var(--serif); font-weight: 700; font-size: 1.5rem;
  color: var(--ink); background: var(--gold); text-decoration: none;
  padding: 0.55rem 1.3rem; border: 0;
}
.deskline-num:hover { background: #e2c14d; color: var(--ink); }
.deskline-sub { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #b8b4a8; margin-top: 0.5rem; }

/* ---------- colophon ---------- */

.colophon { border-top: 3px solid var(--rule-ink); background: var(--paper); }
.colophon-inner { padding: 2.2rem 0 2.6rem; text-align: center; }
.colophon-name { font-family: var(--serif); font-weight: 900; font-size: 1.6rem; color: var(--ink); }
.colophon-desc { font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  margin-top: 0.35rem; font-size: 0.95rem; }
.colophon-nav { margin: 1.2rem 0 0; list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0.4rem 1.6rem; }
.colophon-nav a { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; text-decoration: none; color: var(--ink); }
.colophon-nav a:hover { color: var(--gold-ink); }
.colophon-social { margin-top: 1.2rem; display: flex; justify-content: center; gap: 1.1rem; }
.colophon-social a { color: var(--ink); }
.colophon-social a:hover { color: var(--gold-ink); }
.colophon-social svg { width: 1.15rem; height: 1.15rem; display: block; }
.colophon-legal { margin-top: 1.3rem; font-size: 0.75rem; color: var(--ink-soft); line-height: 1.7; }
.colophon-compliance { margin-top: 0.65rem; }

/* Historical report notice: a ruled standfirst, not a card. Gold stays a spot
   color on the rule tab only, per the design law. */
.report-age-notice {
  max-width: var(--measure);
  margin: 1.6rem auto 0;
  padding: 0.9rem 1.1rem 1rem;
  border-top: 3px solid var(--rule-ink);
  background: var(--paper-tone);
}
.report-age-notice .ran-label {
  margin: 0 0 0.35rem;
  font-family: var(--sans);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-ink);
}
.report-age-notice .ran-copy {
  margin: 0; font-size: 0.85rem; line-height: 1.65; color: var(--ink-soft);
}

/* ---------- article page ---------- */

.article-head { padding: 2.4rem 0 0; text-align: center; }
.article-head .dateline { margin-top: 0; }
.article-headline {
  font-family: var(--serif); font-weight: 900; color: var(--ink);
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.08;
  max-width: 26ch; margin: 0.9rem auto 0; text-wrap: balance;
}
.article-deck {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.5; color: var(--ink-soft); max-width: 52ch; margin: 1rem auto 0;
}
.article-byline { margin-top: 1.1rem; }
.article-figure { margin: 1.8rem auto 0; max-width: 52rem; }
.article-figure img { width: 100%; }

.article-body {
  max-width: var(--measure); margin: 2.2rem auto 0; padding: 0 1.25rem;
  font-size: 1.125rem; line-height: 1.75;
}
.article-body > p + p { margin-top: 1.15rem; }
.article-body > h2 {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: 1.55rem; line-height: 1.22;
  margin: 2.4rem 0 0.85rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule-ink);
  text-wrap: balance;
}
.article-body > h3 {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: 1.2rem; margin: 1.8rem 0 0.6rem;
}
.article-body a { color: var(--gold-ink); }
.article-body ul, .article-body ol { padding-left: 1.4rem; margin: 1.1rem 0; }
.article-body li + li { margin-top: 0.45rem; }
.article-body blockquote {
  margin: 1.8rem 0; padding: 1.1rem 0;
  border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink);
  font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.55;
  color: var(--ink);
}
.article-body img { margin: 1.6rem auto; }
.article-body figure { margin: 1.6rem 0; }
.article-body .wp-element-caption, .article-body figcaption { border-bottom: 0; }
.article-body strong { color: var(--ink); }
/* the live WP content wraps essays in an inline -apple-system stack; Inter carries the body */
.article-body [style*="-apple-system"] { font-family: var(--sans) !important; }

.end-slug { display: flex; justify-content: center; margin: 2.6rem 0 0; }
.end-slug::before { content: ""; width: 0.55rem; height: 0.55rem; background: var(--ink); }

/* signature block */
.sig {
  max-width: var(--measure); margin: 2.2rem auto 0; padding: 0 1.25rem;
}
.sig-box {
  border-top: 3px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink);
  padding: 1.6rem 0; display: flex; gap: 1.5rem; align-items: flex-start;
}
.sig-box img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.sig-name { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.sig-cred { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.3rem; }
.sig-copy { font-size: 0.95rem; margin-top: 0.7rem; max-width: 46ch; }
.sig-act { margin-top: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sig-call {
  display: inline-block; background: var(--gold); color: var(--ink);
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  padding: 0.5rem 1.1rem; text-decoration: none; border: 1px solid var(--rule-ink);
}
.sig-call:hover { background: #e2c14d; color: var(--ink); }
.sig-alt { font-size: 0.82rem; }

/* share row */
.share-row {
  max-width: var(--measure); margin: 1.6rem auto 0; padding: 0 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.share-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.share-row a { color: var(--ink); display: block; }
.share-row a:hover { color: var(--gold-ink); }
.share-row svg { width: 1.05rem; height: 1.05rem; display: block; }

/* related */
.related { margin-top: 3rem; }

/* ---------- motion: the ink draw ---------- */

@media (prefers-reduced-motion: no-preference) {
  .double-rule { transform-origin: center; animation: inkdraw 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes inkdraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- responsive ---------- */

@media (max-width: 60rem) {
  .front-grid, .desk-grid, .feature-grid { grid-template-columns: 1fr; }
  .rail { border-left: 0; padding-left: 0; margin-top: 2.4rem; border-top: 3px solid var(--rule-ink); padding-top: 1.6rem; }
  .col-grid, .tx-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .col-grid > article + article, .tx-grid > article + article {
    border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.6rem;
  }
  .nameplate-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .ear-left { display: none; }
  .ear-right { justify-self: center; }
  .desk-grid .city-table { margin-top: 1.6rem; }
  .feature-grid figure { margin-bottom: 1.4rem; }
  .deskline-act { text-align: left; }
}

@media (max-width: 40rem) {
  .agate-2col { columns: 1; }
  .folio .wrap { flex-wrap: wrap; gap: 0.2rem 1rem; }
  .folio-date { display: none; }
  .paper-nav ul { gap: 0 1.2rem; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .paper-nav a { white-space: nowrap; }
  .sig-box { flex-direction: column; }
  .article-body { font-size: 1.0625rem; }
}


/* ============================================================
   WordPress integration layer
   ============================================================ */

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 1000;
  clip-path: none; width: auto; height: auto; white-space: normal;
  background: var(--gold); color: var(--ink); padding: 0.6rem 1rem;
  font-family: var(--sans); font-weight: 700; font-size: 0.85rem;
}

/* content images and captions from the editor */
.article-body .wp-caption, .article-body figure { max-width: 100%; }
.article-body .wp-caption-text { font-size: 0.78rem; color: var(--ink-soft); padding-top: 0.45rem; }
.article-body .aligncenter { margin-left: auto; margin-right: auto; }
.article-body img.aligncenter { display: block; }
.article-body .alignleft { float: left; margin: 0.3rem 1.2rem 0.8rem 0; }
.article-body .alignright { float: right; margin: 0.3rem 0 0.8rem 1.2rem; }
.article-body iframe, .article-body embed, .article-body video { max-width: 100%; }
.article-body .wp-block-embed { margin: 1.6rem 0; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 1.4rem 0; }
.article-body th, .article-body td { padding: 0.5rem 0.4rem; border-bottom: 1px dotted var(--rule); text-align: left; }
.article-body th { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; border-bottom: 1px solid var(--rule-ink); }

/* edition list: archives, search results, earlier editions */
.edition-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.2rem; }
.edition-list > article { min-width: 0; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.archive-description { font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  max-width: 60ch; margin: -0.6rem 0 1.4rem; }

/* earlier and later editions */
.posts-nav { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 3px solid var(--rule-ink); margin-top: 2.4rem; padding-top: 1rem; }

/* search */
.search-form { display: flex; gap: 0; max-width: 30rem; }
.search-form input[type="search"] {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 0.92rem;
  padding: 0.55rem 0.8rem; border: 1px solid var(--rule-ink); background: var(--paper);
  color: var(--ink-body); border-right: 0;
}
.search-form input[type="search"]:focus { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.search-form button {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; background: var(--gold); color: var(--ink);
  border: 1px solid var(--rule-ink); padding: 0.55rem 1.1rem; cursor: pointer;
}
.search-form button:hover { background: #e2c14d; }
.colophon .search-form { margin: 1.4rem auto 0; }

/* 404 correction notice */
.correction { max-width: var(--measure); margin: 3.5rem auto; padding: 0 1.25rem; text-align: center; }
.correction-kicker-rule { width: 2.2rem; height: 0.55rem; background: var(--gold); margin: 0 auto 1rem; }
.correction h1 { font-family: var(--serif); font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--ink); line-height: 1.1; }
.correction p { margin-top: 1rem; color: var(--ink-body); }
.correction .search-form { margin: 1.8rem auto 0; }

/* compact page head for static pages */
.page-head { padding: 2.4rem 0 0; }
.page-head .flag { margin-bottom: 0; }

@media (max-width: 60rem) {
  .edition-list { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Dispatch teaser (posts that file the full report on harvrealtor.net)
   Newspaper furniture only: hairline rules, gold as spot color, no cards.
   --------------------------------------------------------------------------- */

/* The dropcap rule targets .article-body > p:first-of-type. On a dispatch the
   first paragraph is furniture (a status stamp or the standfirst), not body
   copy, so the cap has to be taken off it and handed to the paragraph that
   actually opens the piece. */
.article-body > p.hbj-stamp:first-of-type::first-letter,
.article-body > p.hbj-standfirst:first-of-type::first-letter {
  font-family: inherit; font-weight: inherit;
  font-size: inherit; line-height: inherit;
  float: none; padding: 0; color: inherit;
}
.article-body > p.hbj-standfirst + p::first-letter,
.article-body > p.hbj-stamp + p.hbj-standfirst + p::first-letter {
  font-family: var(--serif); font-weight: 700;
  font-size: 3.4em; line-height: 0.82;
  float: left; padding: 0.08em 0.12em 0 0; color: var(--ink);
}

.hbj-standfirst {
  font-family: var(--serif); font-style: italic;
  font-size: 1.22rem; line-height: 1.5; color: var(--ink);
  border-left: 3px solid var(--gold); padding: 0.15rem 0 0.15rem 1.15rem;
  margin: 0 0 1.6rem;
}

/* key-numbers strip */
.hbj-figures {
  border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink);
  padding: 1.05rem 0 1.15rem; margin: 1.9rem 0;
}
.hbj-figures-label {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 0.85rem;
}
.hbj-figures-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.4rem;
}
.hbj-figures-grid > div { min-width: 0; }
.hbj-fig-n {
  font-family: var(--serif); font-weight: 900; font-size: 1.6rem; line-height: 1.05;
  color: var(--gold-ink); font-variant-numeric: tabular-nums;
}
.hbj-fig-l {
  font-family: var(--sans); font-size: 0.76rem; line-height: 1.4;
  color: var(--ink-soft); margin-top: 0.3rem;
}

/* property fact list */
.hbj-facts {
  margin: 1.7rem 0; font-family: var(--sans); font-size: 0.9rem;
  border-top: 1px solid var(--rule-ink);
}
.hbj-facts div {
  display: flex; justify-content: space-between; gap: 1.2rem;
  padding: 0.5rem 0; border-bottom: 1px dotted var(--rule);
}
.hbj-facts dt, .hbj-facts .k {
  color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; flex-shrink: 0;
}
.hbj-facts dd, .hbj-facts .v {
  margin: 0; color: var(--ink); font-weight: 600; text-align: right;
}

/* status stamp for pending / sold / off-market dispatches */
.hbj-stamp {
  display: inline-block; font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--rule-ink); padding: 0.32rem 0.7rem; color: var(--ink);
  background: var(--paper-tone); margin: 0 0 1.1rem;
}
.hbj-stamp.is-sold { background: var(--gold); }

/* the jump: read the full report on harvrealtor.net */
.hbj-jump {
  border-top: 3px solid var(--rule-ink); margin: 2.4rem 0 0; padding: 1.3rem 0 0;
}
.hbj-jump-tab { width: 2.2rem; height: 0.55rem; background: var(--gold); margin-bottom: 0.85rem; }
.hbj-jump-hed {
  font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.25;
  color: var(--ink); margin: 0 0 0.5rem;
}
.hbj-jump-sub {
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.6;
  color: var(--ink-body); margin: 0 0 1.05rem;
}
.hbj-jump-cta {
  display: inline-block; font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  background: var(--gold); color: var(--ink) !important;
  border: 1px solid var(--rule-ink); padding: 0.62rem 1.15rem;
}
.hbj-jump-cta:hover { background: #e2c14d; }
.hbj-jump-note {
  font-family: var(--sans); font-size: 0.78rem; line-height: 1.55;
  color: var(--ink-soft); margin: 0.9rem 0 0;
}

/* agate credit line (listing attribution, data sources) */
.hbj-credit {
  font-family: var(--sans); font-size: 0.78rem; line-height: 1.6; color: var(--ink-soft);
  border-top: 1px solid var(--rule); margin: 1.9rem 0 0; padding: 0.8rem 0 0;
}
.hbj-credit b { color: var(--ink); font-weight: 600; }

@media (max-width: 46rem) {
  .hbj-figures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hbj-facts div { flex-direction: column; gap: 0.2rem; }
  .hbj-facts dd, .hbj-facts .v { text-align: left; }
}