/* ============================================================
   Wei Lin — Colorado + Southern California Real Estate
   Quiet luxury / editorial design system
   ============================================================ */

:root {
  /* Palette */
  --ivory: #F6F3EE;
  --soft-white: #FCFBF8;
  --charcoal: #272727;
  --taupe: #B5A898;
  --sage: #7D847C;
  --coastal: #8FA6AD;

  --ink: #272727;
  --ink-soft: #4a4844;
  --line: #e3ddd2;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --maxw: 1320px;
  /* Content width inside a section that uses --maxw plus --pad-x. Full-bleed
     sections (those with a background band) should cap their inner wrapper at
     this instead of --maxw, or their content sits wider than its neighbours. */
  --inner: calc(var(--maxw) - 2 * var(--pad-x));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The header is fixed, so an anchor jump would otherwise land with the section
   heading hidden underneath it. Offset every in-page target by roughly the
   header's height. */
main section[id],
main article[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background: var(--soft-white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Typographic helpers ---------- */
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  margin: 0;
}
.display.light { color: var(--soft-white); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 1.1rem;
}
.eyebrow.dark { color: var(--sage); }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-sub {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--ink-soft);
  margin: 1.1rem 0 0;
}

.link-underline {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.link-underline:hover { opacity: 0.6; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.05rem 2.3rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-solid { background: var(--charcoal); color: var(--soft-white); }
.btn-solid:hover { background: #000; }
.btn-solid-dark { background: var(--charcoal); color: var(--soft-white); }
.btn-solid-dark:hover { background: #000; }
.btn-outline-light { background: transparent; color: var(--soft-white); border-color: rgba(252,251,248,0.6); }
.btn-outline-light:hover { background: var(--soft-white); color: var(--charcoal); }
.btn-outline-dark { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-outline-dark:hover { background: var(--charcoal); color: var(--soft-white); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(252, 251, 248, 0);
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  padding: 1.5rem 0;
}
.site-header.scrolled {
  background: rgba(252, 251, 248, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding: 0.85rem 0;
}
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--soft-white);
  transition: color 0.4s ease;
}
.brand-tag {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Opaque over the hero photo. At 0.62rem, transparency here cost about a
     third of the contrast. The .scrolled / .is-solid rules below recolour it
     once the header has an opaque background. */
  color: var(--soft-white);
  margin-top: 3px;
  transition: color 0.4s ease;
}
.scrolled .brand-name { color: var(--charcoal); }
.scrolled .brand-tag { color: var(--sage); }

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--soft-white);
  transition: color 0.3s ease, opacity 0.3s ease;
}
.nav a:hover { opacity: 0.65; }
.scrolled .nav a { color: var(--ink-soft); }
.nav .nav-cta {
  border: 1px solid rgba(252,251,248,0.5);
  padding: 0.5rem 1.1rem;
}
.scrolled .nav .nav-cta { border-color: var(--line); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--soft-white);
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.scrolled .nav-toggle span { background: var(--charcoal); }

.nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--soft-white);
  border-top: 1px solid var(--line);
}
.nav-mobile a {
  padding: 1rem var(--pad-x);
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad-x) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  background-image: url("https://images.unsplash.com/photo-1523217582562-09d0def993a6?auto=format&fit=crop&w=2100&q=80");
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}
/* The hero photo is bright, and the content stack runs nearly the full height
   of the viewport — on a phone it spans from ~12% to ~96%. A scrim that only
   darkens the bottom sliver leaves the title and eyebrow sitting on near-white
   sky at under 2:1 contrast. These stops keep the whole text column at or above
   the WCAG minimum (4.5:1 for the small text, 3:1 for the display type).
   If the hero image is ever swapped for a brighter one, re-check the contrast
   rather than assuming these values still hold. */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(39,39,39,0.90) 0%, rgba(39,39,39,0.76) 55%, rgba(39,39,39,0.63) 100%);
}
.hero-content { position: relative; max-width: 860px; color: var(--soft-white); }
/* Opaque, not rgba: at 0.72rem with wide letter-spacing, any transparency
   pulls this line back toward the photo and it stops being readable. */
.hero-content .eyebrow { color: var(--ivory); }
.hero-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 1.02;
  margin: 0 0 1.5rem;
  letter-spacing: 0.004em;
}
.hero-title .amp { color: var(--taupe); font-style: italic; }
.hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  margin: 0 0 1.25rem;
  color: var(--ivory);
}
.hero-copy {
  max-width: 620px;
  font-size: 1.02rem;
  color: var(--ivory);
  margin: 0 0 2.2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.hero-cred {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246,243,238,0.75);
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(246,243,238,0.25);
  display: inline-block;
}

/* ============================================================
   SECTION 2 — MARKETS
   ============================================================ */
.markets {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
}
.markets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.market-panel { background: var(--soft-white); }
.market-media {
  height: clamp(340px, 42vw, 560px);
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.market-panel:hover .market-media { transform: scale(1.03); }
.market-co { background-image: url("https://images.unsplash.com/photo-1602343168117-bb8ffe3e2e9f?auto=format&fit=crop&w=1400&q=80"); }
.market-ca { background-image: url("https://images.unsplash.com/photo-1571003123894-1f0594d2b5d9?auto=format&fit=crop&w=1400&q=80"); }
.market-body { padding: 2rem 0.25rem 0; }
.market-kicker {
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--taupe); margin: 0 0 0.6rem;
}
.market-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 0.9rem;
}
.market-places { color: var(--ink-soft); margin: 0 0 1.4rem; font-size: 0.98rem; }

/* ============================================================
   COMMUNITIES SERVED
   ============================================================ */
.communities {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) var(--section-y);
}
/* One full-width row per state: a narrow label column, then the place names
   flowing as a single wrapped line of serif type. Reads as a composition
   rather than a directory listing. */
.community-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) 1fr;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
  border-top: 1px solid var(--line);
}
.community-row:last-of-type { border-bottom: 1px solid var(--line); }
/* Breathing room between the image tiles and the written lists. */
.places-grid + .community-row { margin-top: clamp(2.5rem, 5vw, 4rem); }

.community-label { padding-top: 0.35rem; }
.community-state {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  line-height: 1.15;
  margin: 0 0 0.6rem;
}
.community-regions {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0;
}

/* Names flow inline and wrap naturally, separated by a hairline middot. */
.community-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.community-list li {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.75;
  color: var(--ink);
  white-space: nowrap;
}
.community-list li:not(:last-child)::after {
  content: "·";
  color: var(--taupe);
  margin: 0 0.5em;
}

.communities-note {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--sage);
}

/* ============================================================
   SECTION 3 — STATS
   ============================================================ */
.stats {
  background: var(--ivory);
  padding: var(--section-y) var(--pad-x);
}
.stats-grid {
  max-width: var(--inner);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.stat { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 0.5rem; }
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1;
  color: var(--charcoal);
  font-weight: 500;
}
.stat-label {
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage);
}
.stat-source {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--taupe);
  border-bottom: 1px solid rgba(181,168,152,0.5);
  padding-bottom: 1px;
}
.stat-source:hover { color: var(--charcoal); }
.stats-note {
  max-width: 720px;
  margin: clamp(3rem, 5vw, 4rem) auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  color: var(--ink);
}

/* ============================================================
   SECTION 4 — ADVICE (buyers / sellers)
   ============================================================ */
.advice {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.advice-col { display: flex; flex-direction: column; }
.advice-media { height: clamp(300px, 34vw, 460px); background-size: cover; background-position: center; }
.advice-buy { background-image: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1400&q=80"); }
.advice-sell { background-image: url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1400&q=80"); }
.advice-body { padding: clamp(2.5rem, 4vw, 4rem) var(--pad-x); }
.advice-col:first-child .advice-body { background: var(--soft-white); }
.advice-col:last-child .advice-body { background: var(--ivory); }
.advice-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1;
  margin: 0 0 1.2rem;
}
.advice-copy { color: var(--ink-soft); max-width: 520px; margin: 0 0 1.6rem; }

/* ============================================================
   SECTION 5 — RELOCATION
   ============================================================ */
.relo {
  position: relative;
  background: var(--charcoal);
  color: var(--soft-white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}
.relo-split { position: relative; display: grid; grid-template-rows: 1fr 1fr; }
.relo-img { background-size: cover; background-position: center; }
.relo-co { background-image: url("https://images.unsplash.com/photo-1508739773434-c26b3d09e071?auto=format&fit=crop&w=1400&q=80"); }
.relo-ca { background-image: url("https://images.unsplash.com/photo-1505142468610-359e7d316be0?auto=format&fit=crop&w=1400&q=80"); }
.relo-content {
  padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.relo-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  color: var(--ivory); margin: 1rem 0 2rem;
}
.relo-list { list-style: none; padding: 0; margin: 0 0 2.4rem; }
.relo-list li {
  display: flex; flex-direction: column;
  padding: 1.1rem 0; border-top: 1px solid rgba(246,243,238,0.18);
}
.relo-list li:last-child { border-bottom: 1px solid rgba(246,243,238,0.18); }
.relo-list span { font-family: var(--serif); font-size: 1.35rem; }
.relo-list small { color: rgba(246,243,238,0.7); font-size: 0.9rem; margin-top: 0.25rem; }

/* Section 6 was the homepage "Wei's Market Insights" teaser (.insights, .cards,
   .card*, .insights-more). The section was removed from index.html, so those
   rules went with it. The Insights page uses its own .ins-card* vocabulary and
   is unaffected. */

/* ============================================================
   SECTION 7 — TESTIMONIALS
   ============================================================ */
.testi {
  background: var(--ivory);
  padding: var(--section-y) var(--pad-x);
}
.testi-grid {
  max-width: var(--inner);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.quote { margin: 0; }
.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.4;
  margin: 0 0 1.4rem;
  color: var(--ink);
}
.quote blockquote::before { content: "“"; color: var(--taupe); }
.quote blockquote::after { content: "”"; color: var(--taupe); }
.quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.quote-name { color: var(--charcoal); font-weight: 500; }
.quote-role { color: var(--taupe); }
.quote-city { color: var(--sage); }

/* When a quote has no name line yet, the role becomes the caption's anchor and
   takes the weight the name would otherwise carry. */
.quote figcaption .quote-role:first-child { color: var(--charcoal); font-weight: 500; }

/* Link back to the review on its original third-party platform */
.quote-source {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--sage);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  align-self: flex-start;
  text-transform: uppercase;
}
.quote-source:hover { color: var(--charcoal); }

/* Unfilled review template — deliberately conspicuous so it cannot ship by
   accident. Remove the .is-placeholder class once a real review is pasted in. */
.quote.is-placeholder {
  outline: 1px dashed var(--taupe);
  outline-offset: 14px;
}
.quote.is-placeholder blockquote,
.quote.is-placeholder figcaption span,
.quote.is-placeholder .quote-source { color: var(--taupe); }
.quote.is-placeholder blockquote::before,
.quote.is-placeholder blockquote::after { content: ""; }

/* Rating + read-more row */
.testi-footer {
  max-width: var(--inner);
  margin: clamp(3rem, 5vw, 4.5rem) auto 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
/* Both review-source links sit together at the end of the row, so the rating
   stays on the left. They wrap onto their own line rather than squeezing the
   rating text when the row runs out of width. */
.testi-links { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.rating { display: flex; align-items: baseline; gap: 0.9rem; margin: 0; }
.stars { color: var(--taupe); font-size: 1.05rem; letter-spacing: 0.22em; }
.rating-text {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage);
}

/* ============================================================
   SECTION 8 — ABOUT
   ============================================================ */
.about {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
/* Portrait occupies column 1 across both text blocks and stays in view while
   the longer bio scrolls past. */
.about-portrait {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: 110px;
  height: clamp(420px, 46vw, 600px);
  /* The portrait is 1024x1536, comfortably over 2x the 484px-wide box it renders
     into, so it stays sharp on high-density screens. Two encodings of the same
     image: WebP at 55KB for anything modern, JPEG at 225KB as the fallback.
     The plain url() must come FIRST — browsers that do not understand
     image-set() ignore the second declaration and keep the JPEG. The 1.9MB
     source PNG is not referenced by any rule. */
  background-image: url("imgs/photo-2.jpg");
  background-image: image-set(url("imgs/photo-2.webp") type("image/webp"),
                              url("imgs/photo-2.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center top;
}
.about-intro { grid-column: 2; }
.about-more { grid-column: 2; }

/* Deck line under the headline. */
.about-deck {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 1.2rem 0 1.8rem;
  max-width: 30ch;
}
.about-copy { color: var(--ink-soft); margin: 0 0 1.2rem; max-width: 62ch; }

/* Secondary heading inside the bio. */
.about-subhead {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  margin: clamp(2rem, 4vw, 2.8rem) 0 1.1rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

/* Closing line, set as a pull quote rather than another paragraph. */
.about-pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  color: var(--ink);
  margin: clamp(2rem, 4vw, 2.8rem) 0;
  padding-left: clamp(1.2rem, 2.5vw, 1.8rem);
  border-left: 2px solid var(--taupe);
  max-width: 34ch;
}
.about-meta { list-style: none; padding: 0; margin: 1.8rem 0 2.2rem; }
.about-meta li {
  padding: 0.7rem 0; border-top: 1px solid var(--line);
  font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ink);
}
.about-meta li:last-child { border-bottom: 1px solid var(--line); }
.about-zh { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 2.2rem; }
.zh-brand {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--charcoal);
}
.zh-note {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--sage);
}

/* ============================================================
   SECTION 9 — COMMUNITY IMAGE TILES
   (the .communities section supplies the container; these rules
   style the tile grid that sits above the full community lists)
   ============================================================ */
.places-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(240px, 26vw, 340px);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.place {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1.6rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  color: var(--soft-white);
}
.place::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(39,39,39,0.6), rgba(39,39,39,0.05));
  transition: background 0.4s ease;
}
.place:hover::after { background: linear-gradient(to top, rgba(39,39,39,0.75), rgba(39,39,39,0.2)); }
.place span {
  position: relative; z-index: 1;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 500;
}
.place-hb { background-image: url("https://images.unsplash.com/photo-1520454974749-611b7248ffdb?auto=format&fit=crop&w=1200&q=80"); }
.place-nb { background-image: url("https://images.unsplash.com/photo-1444723121867-7a241cacace9?auto=format&fit=crop&w=1200&q=80"); }
.place-wh { background-image: url("https://images.unsplash.com/photo-1580655653885-65763b2597d0?auto=format&fit=crop&w=1200&q=80"); }
.place-cc { background-image: url("https://images.unsplash.com/photo-1449034446853-66c86144b0ad?auto=format&fit=crop&w=1200&q=80"); }
.place-row { background-image: url("https://images.unsplash.com/photo-1531973576160-7125cd663d86?auto=format&fit=crop&w=1200&q=80"); }
.place-den { background-image: url("https://images.unsplash.com/photo-1546156929-a4c0ac411f47?auto=format&fit=crop&w=1200&q=80"); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--section-y) var(--pad-x);
  background-image: url("https://images.unsplash.com/photo-1502005229762-cf1b2da7c5d6?auto=format&fit=crop&w=2100&q=80");
  background-size: cover;
  background-position: center;
}
.final-overlay { position: absolute; inset: 0; background: rgba(39,39,39,0.55); }
.final-content { position: relative; max-width: 780px; }
.final-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  color: var(--ivory); margin: 1.2rem 0 2.4rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--charcoal);
  color: var(--soft-white);
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x);
}
.footer-inner {
  max-width: var(--inner);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.footer-brand .brand-name { color: var(--soft-white); font-size: 1.6rem; }
.footer-brand .brand-tag { color: rgba(246,243,238,0.65); }
.footer-nav { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav a { font-size: 0.9rem; color: rgba(246,243,238,0.8); }
.footer-nav a:hover { color: var(--soft-white); }

.footer-contact { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-contact > a { font-size: 0.9rem; color: rgba(246,243,238,0.8); }
.footer-contact > a:hover { color: var(--soft-white); }
.footer-social {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-social a {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: rgba(246,243,238,0.65);
}
.footer-social a:hover { color: var(--soft-white); }

.footer-legal {
  max-width: var(--inner);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(246,243,238,0.15);
}
.footer-legal p {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(246,243,238,0.6);
  max-width: 760px;
}
.footer-legal .copyright { margin-top: 1rem; color: rgba(246,243,238,0.45); }

/* ============================================================
   REVIEWS PAGE
   ============================================================ */

/* Header on interior pages is opaque from the top, since there is no
   full-bleed hero image behind it to sit over. */
.site-header.is-solid {
  position: sticky;
  background: rgba(252, 251, 248, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding: 0.85rem 0;
}
.site-header.is-solid .brand-name { color: var(--charcoal); }
.site-header.is-solid .brand-tag { color: var(--sage); }
.site-header.is-solid .nav a { color: var(--ink-soft); }
.site-header.is-solid .nav .nav-cta { border-color: var(--line); }
.site-header.is-solid .nav-toggle span { background: var(--charcoal); }
.nav a[aria-current="page"] { color: var(--charcoal); font-weight: 500; }

.page-intro {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad-x) clamp(2rem, 4vw, 3rem);
}
.breadcrumb {
  display: flex;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 2.2rem;
}
.breadcrumb a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.breadcrumb a:hover { color: var(--charcoal); }
.page-lede {
  max-width: 660px;
  margin: 1.8rem 0 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Third-party verification bar */
.verify-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* The source links stay together as a pair, wrapping as a unit rather than one
   of them peeling off onto its own line. */
.verify-links { display: flex; flex-wrap: wrap; gap: 0.9rem 2.5rem; }
.verify-link {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.verify-link:hover { color: var(--charcoal); }

/* Category jump nav */
.review-filters {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.5rem;
}
.review-filters a {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 0.7rem 1.3rem;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.review-filters a:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--soft-white);
}

/* Review groups */
.review-group { padding: clamp(3rem, 6vw, 5rem) var(--pad-x); }
.review-group.alt { background: var(--ivory); }
.review-group-head {
  max-width: var(--inner);
  margin: 0 auto clamp(2.2rem, 4vw, 3rem);
}
.group-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  margin: 0;
  /* Offset so the sticky header does not cover the heading on jump links */
  scroll-margin-top: 110px;
}
.review-group[id] { scroll-margin-top: 90px; }
.group-note {
  max-width: 620px;
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
  font-size: 0.97rem;
}
.review-list {
  max-width: var(--inner);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* Reviews page CTA */
.reviews-cta {
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) var(--pad-x);
  background: var(--soft-white);
  border-top: 1px solid var(--line);
}
.reviews-cta-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--ink-soft);
  margin: 1.2rem 0 2.4rem;
}

/* ============================================================
   INSIGHTS PAGE
   ============================================================ */

/* Visually hidden but available to screen readers. */
.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;
}

/* --- Split hero: copy left, image right --- */
.ins-hero {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: stretch;
  background: var(--ivory);
}
.ins-hero-copy {
  padding: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ins-hero-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 1.07;
  margin: 0 0 1.5rem;
}
.ins-hero-lede {
  max-width: 48ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}
.ins-hero-media {
  min-height: clamp(280px, 38vw, 480px);
  background-image: url("https://images.unsplash.com/photo-1602343168117-bb8ffe3e2e9f?auto=format&fit=crop&w=1600&q=80");
  background-size: cover;
  background-position: center;
}

/* --- Editorial intro --- */
.ins-intro {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x) clamp(1.5rem, 3vw, 2.5rem);
}
/* Lead spans the full width and acts as the section's title. */
.ins-lead {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  color: var(--charcoal);
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
  padding-bottom: clamp(1.4rem, 2.5vw, 1.9rem);
  /* Rule spans the full width so the title reads as spanning both columns. */
  border-bottom: 1px solid var(--line);
}
/* Multi-column (not grid) so the paragraphs fill column one before column two,
   preserving reading order. break-inside stops a paragraph splitting mid-way. */
.ins-intro-cols {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
.ins-copy { color: var(--ink-soft); margin: 0 0 1.15rem; max-width: 66ch; }
.ins-intro-cols .ins-copy {
  break-inside: avoid;
  max-width: none;
}
.ins-intro-cols .ins-copy:last-child { margin-bottom: 0; }

/* --- Articles + filters --- */
.ins-articles {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) var(--pad-x) var(--section-y);
}
.ins-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.3rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.ins-filter {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.ins-filter:hover { color: var(--charcoal); }
.ins-filter.is-active {
  color: var(--charcoal);
  font-weight: 500;
  border-bottom-color: var(--charcoal);
}

.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3rem);
}
.ins-card { display: flex; flex-direction: column; }
.ins-card[hidden] { display: none; }
.ins-card-media {
  height: clamp(190px, 18vw, 230px);
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.ins-card:hover .ins-card-media { transform: scale(1.04); }
.ins-card-body { padding: 1.3rem 0 0; }
.ins-card-tag {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 0.7rem;
}
.ins-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.2;
  margin: 0 0 0.8rem;
}
.ins-card-dek {
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.ins-card-excerpt {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.ins-card-byline {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 1.1rem;
}
.ins-empty {
  margin: 2rem 0 0;
  color: var(--sage);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
}

/* Card imagery. These reuse photographs from elsewhere on the site and do not
   depict the specific places the articles discuss — replace before launch. */
.ins-img-1 { background-image: url("https://images.unsplash.com/photo-1571003123894-1f0594d2b5d9?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-2 { background-image: url("https://images.unsplash.com/photo-1520454974749-611b7248ffdb?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-3 { background-image: url("https://images.unsplash.com/photo-1444723121867-7a241cacace9?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-4 { background-image: url("https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-5 { background-image: url("https://images.unsplash.com/photo-1508739773434-c26b3d09e071?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-6 { background-image: url("https://images.unsplash.com/photo-1546156929-a4c0ac411f47?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-7 { background-image: url("https://images.unsplash.com/photo-1602343168117-bb8ffe3e2e9f?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-8 { background-image: url("https://images.unsplash.com/photo-1518780664697-55e3ad937233?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-9 { background-image: url("https://images.unsplash.com/photo-1580655653885-65763b2597d0?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-10 { background-image: url("https://images.unsplash.com/photo-1449034446853-66c86144b0ad?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-11 { background-image: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=80"); }
.ins-img-12 { background-image: url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80"); }
/* A card image that links to its article must fill its grid cell. */
a.ins-card-media { display: block; }
/* Card headlines that link to a live article. */
.ins-card-title a { border-bottom: 1px solid transparent; transition: border-color 0.25s ease; }
.ins-card-title a:hover { border-bottom-color: var(--taupe); }

/* --- Areas of focus --- */
.ins-topics {
  background: var(--ivory);
  padding: var(--section-y) var(--pad-x);
}
/* Full-bleed band, so the inner wrapper caps at --inner to line up with the
   sections above and below. */
.ins-topics .section-head,
.topic-list { max-width: var(--inner); margin-left: auto; margin-right: auto; }
.topic {
  display: grid;
  grid-template-columns: minmax(200px, 0.32fr) 1fr;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  padding: clamp(1.8rem, 3.5vw, 2.6rem) 0;
  border-top: 1px solid var(--line);
}
.topic:last-child { border-bottom: 1px solid var(--line); }
.topic-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.2;
  margin: 0;
}
.topic-dek {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.4;
  color: var(--charcoal);
  margin: 0 0 0.8rem;
}
.topic-copy { color: var(--ink-soft); margin: 0; max-width: 62ch; font-size: 0.97rem; }

/* --- Neighborhoods worth watching --- */
.ins-watch {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
}
/* Let the heading use the full content width so it stays on one line instead of
   wrapping inside the default 760px .section-head measure. */
.ins-watch .section-head { max-width: none; }

.ins-watch-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.ins-watch-lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.3;
  color: var(--charcoal);
  margin: 0;
}
.ins-watch-copy {
  color: var(--ink-soft);
  margin: 0;
}

/* --- About block --- */
.ins-about {
  background: var(--ivory);
  padding: var(--section-y) var(--pad-x);
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
}
.ins-about-portrait {
  position: sticky;
  top: 110px;
  height: clamp(380px, 42vw, 540px);
  /* Same portrait as .about-portrait on the homepage. Paths are relative to
     this stylesheet, which sits at the site root, so they resolve the same way
     from insights.html. See .about-portrait for why url() precedes image-set(). */
  background-image: url("imgs/photo-2.jpg");
  background-image: image-set(url("imgs/photo-2.webp") type("image/webp"),
                              url("imgs/photo-2.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center top;
}

/* --- CTA --- */
.ins-cta {
  text-align: center;
  padding: var(--section-y) var(--pad-x);
  max-width: 900px;
  margin: 0 auto;
}
.ins-cta-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  color: var(--ink-soft);
  margin: 1.3rem auto 2.4rem;
  max-width: 52ch;
}
.ins-cta-sign {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}
.ins-cta-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--charcoal);
}

/* --- Newsletter band --- */
.ins-news {
  background: var(--ivory);
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad-x);
}
/* Full-bleed band, so the row caps at --inner to line up with the sections
   above it. Same pattern as .ins-topics. */
.ins-news-inner {
  max-width: var(--inner);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.ins-news-media {
  width: clamp(120px, 14vw, 180px);
  height: clamp(85px, 10vw, 115px);
  background-image: url("https://images.unsplash.com/photo-1505142468610-359e7d316be0?auto=format&fit=crop&w=600&q=80");
  background-size: cover;
  background-position: center;
}
.ins-news-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.ins-news-note { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.ins-news-form { display: flex; gap: 0; }
.ins-news-input {
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.9rem 1.1rem;
  min-width: clamp(190px, 22vw, 260px);
  border: 1px solid var(--line);
  border-right: 0;
  background: var(--soft-white);
  color: var(--ink);
}
.ins-news-input:focus-visible { outline: 2px solid var(--taupe); outline-offset: -2px; }
.ins-news-form .btn { padding-left: 1.6rem; padding-right: 1.6rem; }

/* ============================================================
   ARTICLE PAGE (long-form insight)
   ============================================================ */
.article { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* --- Article header --- */
/* --maxw + the section's own --pad-x resolves to the same content width as
   --inner, so the article header, body and the FAQ band all share one measure. */
.a-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad-x) clamp(1.5rem, 3vw, 2.2rem);
}
.a-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 1.4rem;
}
.a-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 1.6rem;
}
/* Standfirst under the article title. */
.a-deck {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.35;
  color: var(--sage);
  margin: -0.6rem 0 1.8rem;
  max-width: 62ch;
}
.a-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.a-byline-sep { color: var(--taupe); margin: 0 0.7rem; }
.a-date {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--sage);
  margin: 0.6rem 0 0;
}
/* Reporting period for articles built on time-sensitive market statistics. */
.a-datanote {
  display: inline-block;
  margin: 1.1rem 0 0;
  padding: 0.5rem 0.9rem;
  background: var(--ivory);
  border-left: 2px solid var(--taupe);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.a-datanote strong { color: var(--charcoal); font-weight: 500; }

/* --- Body: single narrow measure for sustained reading --- */
.a-body {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  font-size: 1.12rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.a-body > p { margin: 0 0 1.35rem; }

/* Running text fills the full content band, matching the FAQ answers below.
   Deliberately wide: lines run long, so line-height is kept generous (1.8) to
   help the eye track back to the start of the next line. */
.a-lead {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem) !important;
  line-height: 1.4;
  color: var(--charcoal);
  margin-bottom: 1.8rem !important;
}

/* Numbered section headings */
.a-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  line-height: 1.2;
  color: var(--charcoal);
  margin: clamp(2.8rem, 5vw, 3.8rem) 0 1.2rem;
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.a-h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 2.2rem 0 1rem;
}

/* Lists */
.a-list { margin: 0 0 1.6rem; padding-left: 0; list-style: none; }
.a-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
}
.a-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background: var(--taupe);
}

/* Paired "X vs. Y" contrast lines. */
.a-contrast {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  border-left: 2px solid var(--line);
}
.a-contrast li {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--charcoal);
  padding: 0.15rem 0 0.15rem clamp(1.2rem, 2.5vw, 1.7rem);
}
.a-contrast span {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0.35rem;
}

/* Place name / description pairs. */
.a-places { margin: 0 0 1.8rem; }
.a-places dt {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  color: var(--charcoal);
  margin: 0;
  padding: 1.1rem 0 0.35rem;
  border-top: 1px solid var(--line);
}
.a-places dd { margin: 0 0 0.2rem; }
.a-places dt:first-child { padding-top: 0; border-top: 0; }

/* Numbered checklist where each step has a title and a note. */
.a-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 1.8rem;
}
.a-steps > li {
  counter-increment: step;
  position: relative;
  padding: 1.2rem 0 1.2rem 3.2rem;
  border-top: 1px solid var(--line);
}
.a-steps > li:last-child { border-bottom: 1px solid var(--line); }
.a-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--taupe);
}
.a-step-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.25;
  color: var(--charcoal);
  margin: 0 0 0.4rem;
  text-transform: none;
  letter-spacing: 0;
}
.a-steps p { margin: 0; }

/* Closing coda: a few short lines the article ends on. */
.a-coda {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: clamp(1.8rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.a-coda p {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--charcoal);
  margin: 0 0 0.5rem;
}
.a-coda-chain {
  letter-spacing: 0.04em;
  margin-top: 1.1rem !important;
  margin-bottom: 1.1rem !important;
}
.a-coda-chain span { color: var(--taupe); margin: 0 0.4rem; }

/* Data table for market figures. */
.a-table-wrap { margin: clamp(1.6rem, 3vw, 2.2rem) 0; overflow-x: auto; }
.a-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.a-table caption {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  padding-bottom: 0.9rem;
}
.a-table th,
.a-table td {
  text-align: left;
  padding: 0.75rem 1.2rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.a-table thead th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom-color: var(--charcoal);
}
.a-table tbody th {
  font-weight: 500;
  color: var(--charcoal);
}
.a-table td { color: var(--ink-soft); }
.a-table .num { font-variant-numeric: tabular-nums; }
/* Direction of change, so a negative reads as negative at a glance. */
.a-table .up { color: var(--sage); }
.a-table .down { color: var(--taupe); }
.a-table-note {
  margin: 0.9rem 0 0;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--sage);
}

/* Source attribution after a cited statement. */
.a-cite {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--sage);
  margin-left: 0.4rem;
}
.a-cite a { border-bottom: 1px solid var(--line); }
.a-cite a:hover { color: var(--charcoal); }

/* Inline link within running article text. */
.a-inline-link {
  color: var(--charcoal);
  border-bottom: 1px solid var(--taupe);
}
.a-inline-link:hover { border-bottom-color: var(--charcoal); }

/* Short formula-style line, e.g. "coast + convenience + livability". */
.a-formula {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem) !important;
  line-height: 1.4;
  color: var(--charcoal);
  margin: clamp(1.4rem, 3vw, 2rem) 0 !important;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.a-formula span {
  font-family: var(--sans);
  font-size: 0.8em;
  color: var(--taupe);
  margin: 0 0.35rem;
}


/* Pull quote: the author's own emphasised line */
.a-pull {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
  line-height: 1.35;
  color: var(--charcoal);
  margin: clamp(1.8rem, 3.5vw, 2.5rem) 0 !important;
  padding-left: clamp(1.2rem, 2.5vw, 1.7rem);
  border-left: 2px solid var(--taupe);
}
/* Reported speech: something a buyer says */
.a-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem !important;
  color: var(--charcoal);
  margin: 1.4rem 0 1.4rem 1.5rem !important;
}

/* --- Table of contents --- */
.a-toc {
  background: var(--ivory);
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.2rem);
  margin: clamp(2.2rem, 4vw, 3rem) 0;
}
.a-toc-title {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 1.1rem;
}
/* Two columns now that the band is full width — each gets ~560px, enough for
   these full section titles. */
.a-toc-list {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  font-size: 0.93rem;
  line-height: 1.5;
}
.a-toc-list li { break-inside: avoid; margin-bottom: 0.6rem; padding-left: 0.3rem; }
.a-toc-list a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.a-toc-list a:hover { color: var(--charcoal); border-bottom-color: var(--taupe); }

/* Offset anchor jumps for the fixed/sticky header */
.a-h2[id] { scroll-margin-top: 90px; }

/* --- Signature block --- */
.a-sign {
  margin: clamp(2.8rem, 5vw, 4rem) 0 0;
  padding-top: clamp(2rem, 4vw, 2.6rem);
  border-top: 1px solid var(--line);
}
.a-sign-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--charcoal);
  margin: 0 0 0.5rem;
}
.a-sign-line {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--sage);
  margin: 0 0 0.3rem;
}
.a-sign .btn { margin-top: 1.6rem; }

/* --- Disclaimer --- */
.a-disclaimer {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 1.3rem 1.5rem;
  border-left: 2px solid var(--line);
  background: var(--ivory);
}
.a-disclaimer p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--sage);
}

/* --- FAQ --- */
.a-faq {
  background: var(--ivory);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding: var(--section-y) var(--pad-x);
}
.a-faq-inner { max-width: var(--inner); margin: 0 auto; }
.a-faq .display { margin-bottom: clamp(2rem, 4vw, 3rem); }
.faq-list { margin: 0; }
.faq-list dt {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  color: var(--charcoal);
  margin: 0;
  padding: clamp(1.4rem, 2.5vw, 1.8rem) 0 0.7rem;
  border-top: 1px solid var(--line);
}
.faq-list dd {
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.7;
  padding-bottom: clamp(0.6rem, 1.5vw, 1rem);
}

/* --- Author box --- */
.a-author {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--pad-x) 0;
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.a-author-portrait {
  height: clamp(300px, 32vw, 420px);
  /* Same portrait as the homepage and Insights About blocks. The articles load
     this stylesheet as ../styles.css, but relative url() in CSS resolves against
     the STYLESHEET's location, not the page's — so "imgs/..." still resolves to
     /imgs/... from inside the insights/ folder. No ../ needed.
     See .about-portrait for why url() precedes image-set(). */
  background-image: url("imgs/photo-2.jpg");
  background-image: image-set(url("imgs/photo-2.webp") type("image/webp"),
                              url("imgs/photo-2.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center top;
}
.a-author-body { color: var(--ink-soft); }
.a-author-body p { margin: 0 0 1.1rem; max-width: 66ch; }
/* Closing line in an author bio that ends on a question. */
.a-author-close {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: var(--charcoal);
  margin: 0 0 1.4rem !important;
  padding-left: clamp(1rem, 2vw, 1.4rem);
  border-left: 2px solid var(--taupe);
}
.a-author-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.15;
  color: var(--charcoal);
  margin: 0 0 1.2rem;
}

/* --- Back link --- */
.a-back {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-x) 0;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header.open .nav-mobile { display: flex; }
  .site-header.open { background: rgba(252,251,248,0.97); backdrop-filter: blur(10px); }
  .site-header.open .brand-name { color: var(--charcoal); }
  .site-header.open .brand-tag { color: var(--sage); }
  .site-header.open .nav-toggle span { background: var(--charcoal); }

  .markets-grid { grid-template-columns: 1fr; }
  /* Stack the label above the names on narrow screens. */
  .community-row { grid-template-columns: 1fr; gap: 1.2rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .advice { grid-template-columns: 1fr; }
  .relo { grid-template-columns: 1fr; }
  .relo-split { grid-template-rows: none; grid-template-columns: 1fr 1fr; min-height: 320px; }
  .testi-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .review-list { grid-template-columns: 1fr; max-width: 560px; }

  /* Insights page */
  .ins-hero { grid-template-columns: 1fr; }
  .ins-hero-copy { padding: clamp(2.5rem, 6vw, 4rem) var(--pad-x); order: 2; }
  .ins-hero-media { order: 1; min-height: 46vh; }
  .ins-intro-cols { columns: 1; }
  .ins-lead { max-width: none; }
  .ins-watch-intro { grid-template-columns: 1fr; gap: 1.2rem; }

  /* Filter tabs. All seven fit one row on a wide screen, but below 900px they
     cannot, and letting them wrap produced five ragged rows — a 229px wall of
     small uppercase text above the first article, with 37px tap targets.
     Instead the row scrolls horizontally: one line, touch-sized targets, and
     the tab clipped at the right edge is what signals there is more to reach.
     The row bleeds into the page gutter so that clipped tab is visible; without
     the bleed it would stop short of the edge and read as the end of the list. */
  .ins-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    -webkit-overflow-scrolling: touch;
    /* Deliberately no scroll-snap. Snap points align to the scrollport's border
       edge, not the gutter this strip re-creates as padding, so snapping parked
       the first tab flush against the screen edge and fought the scroll position
       set when a tab is revealed. Free scrolling is the predictable behaviour. */
    /* The scrollbar is decoration here — it is invisible on touch anyway, and
       on a 44px-tall strip it would crowd the labels. */
    scrollbar-width: none;
  }
  .ins-filters::-webkit-scrollbar { display: none; }
  .ins-filter {
    flex: 0 0 auto;
    /* 44px is the comfortable minimum touch target; the default padding gave 37. */
    min-height: 44px;
    padding: 0.75rem 0.85rem;
  }

  /* Article page */
  .a-toc-list { columns: 1; }
  .a-author { grid-template-columns: 1fr; }
  .a-author-portrait { height: 50vh; max-height: 400px; }
  .a-quote { margin-left: 0.8rem !important; }
  .ins-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .topic { grid-template-columns: 1fr; gap: 0.9rem; }
  .ins-about { grid-template-columns: 1fr; }
  .ins-about-portrait { position: static; height: 55vh; max-height: 460px; }
  .ins-news-inner { grid-template-columns: 1fr; text-align: left; }
  .ins-news-media { display: none; }
  .ins-news-form { flex-wrap: wrap; }
  .ins-news-input { border-right: 1px solid var(--line); min-width: 0; flex: 1 1 200px; }
  .about { grid-template-columns: 1fr; }
  /* Release the sticky portrait and let the bio flow beneath it. */
  .about-portrait {
    grid-column: 1;
    grid-row: auto;
    position: static;
    height: 60vh;
    max-height: 520px;
  }
  .about-intro,
  .about-more { grid-column: 1; }
  .places-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 540px) {
  .testi-footer { flex-direction: column; align-items: flex-start; }
  /* Stack the two review links full width so they read as a pair rather than
     two buttons of different lengths. */
  .testi-links { width: 100%; }
  .testi-links .btn { flex: 1 1 100%; text-align: center; }
  .stats-grid { grid-template-columns: 1fr; }
  .places-grid { grid-template-columns: 1fr; }
  .relo-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .hero-actions .btn { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}