/* ==========================================================================
   theriverchaserealtor.com
   Palette, type and lockup carried over from the Riverchase postcard so the
   mailer and the site read as one piece.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-normal-latin.woff2') format('woff2-variations'),
       url('../fonts/fraunces-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2-variations'),
       url('../fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-normal-latin.woff2') format('woff2-variations'),
       url('../fonts/instrument-sans-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-italic-latin.woff2') format('woff2-variations'),
       url('../fonts/instrument-sans-italic-latin.woff2') format('woff2');
}

:root {
  --cream: #f5f1e7;
  --surface: #fbf8f0;
  --offset: #ece6d8;
  --divider: #ddd5c4;
  --border: #cbc2ad;
  --ink: #1b2419;
  --forest: #3e553e;
  --forest-deep: #33472f;
  --sage: #a9c199;
  --brass: #9a6b32;
  --muted: #5c6656;

  --panel-w: 306px;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;   --s9: 6rem;

  --radius: 3px;
  --shadow: 0 1px 2px rgba(27, 36, 25, 0.05), 0 8px 24px -12px rgba(27, 36, 25, 0.14);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--sage); color: var(--ink); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--forest); color: var(--cream);
  padding: var(--s3) var(--s4); font-size: 0.85rem; font-weight: 600;
}
.skip:focus { left: var(--s4); top: var(--s4); }

.tnum { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- brand primitives ---------- */

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
  letter-spacing: -0.012em;
  line-height: 1;
  white-space: nowrap;
}
/* Fraunces draws a swash ampersand that reads as a stray wave in the lockup.
   Set it in the sans face instead — same fix used on the postcard and site. */
.amp {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.82em;
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.3;
  font-size: 0.66rem;
  color: var(--brass);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

/* ==========================================================================
   SHELL — fixed green panel, scrolling cream column
   ========================================================================== */

.shell { min-height: 100vh; }

.panel {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--panel-w);
  background: var(--forest);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  padding: var(--s7) var(--s5) var(--s5);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 20;
}

.panel__lockup { text-align: center; }
.panel__lockup .mark { width: 74px; margin: 0 auto var(--s4); }
.panel__lockup .wordmark { font-size: 1.72rem; color: var(--cream); }
.panel__rule {
  border: 0;
  border-top: 1px solid rgba(245, 241, 231, 0.3);
  width: 58px;
  margin: var(--s4) auto;
}
.panel__locale {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  font-size: 0.62rem;
  line-height: 1.8;
  color: rgba(245, 241, 231, 0.82);
}

.panel__nav { margin-top: var(--s7); flex: 1; }
.panel__nav ol { list-style: none; margin: 0; padding: 0; counter-reset: sec; }
.panel__nav li { counter-increment: sec; }
.panel__nav a {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.35;
  color: rgba(245, 241, 231, 0.72);
  border-bottom: 1px solid rgba(245, 241, 231, 0.12);
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.panel__nav a::before {
  content: counter(sec, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--sage);
  flex: none;
}
.panel__nav a:hover { color: var(--cream); padding-left: var(--s2); }
.panel__nav a[aria-current='true'] { color: var(--cream); font-weight: 600; }
.panel__nav a[aria-current='true']::before { color: var(--cream); }

.panel__foot { margin-top: var(--s6); }
.panel__code {
  width: 108px;
  border-radius: 50%;
  background: var(--cream);
  padding: 5px;
  margin-bottom: var(--s4);
}
.panel__site {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--s3);
  border-bottom: 1px solid rgba(245, 241, 231, 0.35);
}
.panel__site:hover { border-bottom-color: var(--cream); }
.panel__contact {
  font-size: 0.72rem;
  line-height: 1.75;
  color: rgba(245, 241, 231, 0.78);
}
.panel__contact a { text-decoration: none; }
.panel__contact a:hover { text-decoration: underline; }
.panel__contact .sep { color: rgba(245, 241, 231, 0.42); padding: 0 3px; }
.panel__legal {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid rgba(245, 241, 231, 0.14);
  font-size: 0.6rem;
  line-height: 1.6;
  color: rgba(245, 241, 231, 0.6);
}

/* mobile panel becomes a header band */
.panel__toggle { display: none; }

.main {
  margin-left: var(--panel-w);
  min-width: 0;
}

.wrap {
  max-width: 1080px;
  padding: 0 var(--s7);
  margin: 0 auto;
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.masthead { padding: var(--s9) 0 var(--s7); }
.masthead h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  margin: var(--s4) 0 var(--s5);
  max-width: 22ch;
}
.masthead h1 em { font-style: italic; }
.masthead__lede {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}

.stamp {
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--muted);
}
.stamp strong { color: var(--ink); font-weight: 600; }
.stamp__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sage); flex: none;
  box-shadow: 0 0 0 3px rgba(169, 193, 153, 0.28);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section { padding: var(--s8) 0; border-top: 1px solid var(--divider); }
.section__head { margin-bottom: var(--s6); }
.section__num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--brass);
  text-transform: uppercase;
  font-weight: 500;
}
.section__head h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  margin: var(--s2) 0 var(--s3);
}
.section__sub {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 62ch;
  margin: 0;
}

/* ---------- KPI tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s6);
}
/* The sold tiles come in a set of three per side. Lock to three columns so each
   row is one side of the neighbourhood instead of interleaving East and West. */
/* Doubled class for specificity: a later generic `.tiles` breakpoint rule would
   otherwise win and re-interleave the two sides. */
.tiles.tiles--triples { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
  .tiles.tiles--triples { grid-template-columns: 1fr; }
}
.tile {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: var(--s4) var(--s4) var(--s5);
}
.tile--east { border-top: 3px solid var(--forest); }
.tile--west { border-top: 3px solid var(--sage); }
.tile__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--s3);
}
.tile__val {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 72;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.tile__val small { font-size: 0.5em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* These lines carry decimals that decide the meaning of the number: 3.8 months of
   inventory, $155.92/sq ft. At 0.78rem the period fell below the pixel grid and
   vanished, so 3.8 rendered as 38 and $155.92 as $15592. Slightly larger, with
   tabular figures, keeps the decimal separator on-pixel. */
.tile__meta {
  margin-top: var(--s3);
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- filter bar ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--divider);
}
.filters__label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 600;
  margin-right: var(--s2);
}
.chip {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.chip:hover { border-color: var(--forest); color: var(--forest); }
.chip[aria-pressed='true'] {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}
.filters__count { margin-left: auto; font-size: 0.8rem; color: var(--muted); }

.sortsel {
  font: inherit;
  font-size: 0.8rem;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
}

/* ---------- listing cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s4);
}
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: var(--s5) var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 3px;
}
.card--east::before { background: var(--forest); }
.card--west::before { background: var(--sage); }

.card__top { display: flex; justify-content: space-between; gap: var(--s3); align-items: flex-start; }
.card__price {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 72;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.card__addr {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
/* Underline offset keeps the rule clear of the descenders in street names. */
.card__addrlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.card__addrlink:hover,
.card__addrlink:focus-visible {
  color: var(--forest);
  text-decoration-color: var(--forest);
}
.card__extlink {
  font-size: 0.7em;
  color: var(--muted);
  vertical-align: 1px;
}

/* Whole-tile click target.
   A single stretched anchor rather than wrapping the card in an <a>: the card keeps its
   semantic structure, a screen reader still announces exactly one link per listing, and
   no interactive element ends up nested inside another. Only a card that carries a real
   supplied URL becomes clickable - a card with no URL stays plain text, so there is
   never a tile that looks clickable and goes nowhere. The overlay lives on the anchor,
   so the click target works even where :has() does not. */
.card__addrlink::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card:has(.card__addrlink) {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.card:has(.card__addrlink):hover {
  border-color: var(--forest);
  box-shadow: 0 6px 20px rgba(27, 36, 25, 0.10);
}
.card:has(.card__addrlink):hover .card__addrlink {
  color: var(--forest);
  text-decoration-color: var(--forest);
}
/* Keyboard focus should ring the whole tile, not just the street name. */
.card:has(.card__addrlink:focus-visible) {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
.card .card__addrlink:focus-visible { outline: none; }

/* The handoff to a live search. Sits under the active grid because that is the moment
   a reader wants photos and a tour rather than another statistic. */
.searchcta {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--offset);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: var(--s5);
  align-items: center;
}
.searchcta__h {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 72;
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.searchcta__p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 58ch;
}
.searchcta__alt {
  margin: var(--s3) 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}
/* Keep the domain and its arrow together so the arrow never orphans onto its own line. */
.searchcta__alt .outlink { white-space: nowrap; }
.searchcta__row { display: grid; gap: var(--s3); }
.searchcta__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn--sm { padding: 10px 14px; font-size: 0.79rem; }
.searchcta__row .btn { justify-content: center; white-space: nowrap; }

/* The storefront handoff. jeffandchels.com is the front door; this page is one
   neighborhood inside it, so the relationship is stated rather than implied. */
.gateway { background: var(--forest); color: var(--cream); padding: var(--s7) 0; }
.gateway__grid {
  display: grid;
  grid-template-columns: 1.35fr auto;
  gap: var(--s6);
  align-items: center;
}
.gateway__eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 var(--s2);
}
.gateway__h {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
  font-weight: 500;
  font-size: 1.72rem;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0 0 var(--s3);
  color: var(--cream);
}
.gateway__p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(245, 241, 231, 0.82);
  max-width: 54ch;
}
.gateway__acts { display: grid; gap: var(--s3); justify-items: stretch; }
.gateway__acts .btn { justify-content: center; white-space: nowrap; }
.gateway__fine {
  margin: var(--s2) 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(245, 241, 231, 0.62);
  max-width: 30ch;
}

/* Always-visible actions in the fixed green panel (desktop only - on a phone the
   panel collapses to a bar, and the in-flow buttons carry the same two links). */
.panel__links { margin-top: var(--s5); display: grid; gap: 8px; }
.panel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 14px;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid rgba(245, 241, 231, 0.42);
  color: var(--cream);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.panel__btn:hover { border-color: var(--cream); background: rgba(245, 241, 231, 0.08); }
.panel__btn--primary { background: var(--cream); color: var(--forest); border-color: var(--cream); }
.panel__btn--primary:hover { background: #fff; color: var(--forest); }
/* Sits under each listing grid: the handoff to the live MLS feed. */
.section__out {
  margin: var(--s6) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--divider);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.outlink {
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.outlink:hover,
.outlink:focus-visible { text-decoration-color: var(--forest); }
@media (max-width: 620px) {
  /* Let the long label wrap rather than push the page wider on a phone. */
  .outlink { white-space: normal; }
}
.card__side {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 3px;
}
.card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.card__specs span { white-space: nowrap; }
.card__specs b { color: var(--ink); font-weight: 600; }

.card__foot {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--divider);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.badge--active { border-color: var(--forest); color: var(--forest); background: rgba(169, 193, 153, 0.18); }
.badge--contingent, .badge--pending { border-color: var(--brass); color: var(--brass); background: rgba(154, 107, 50, 0.09); }
.badge--soon { border-color: var(--muted); color: var(--muted); background: var(--offset); }
.badge--over { border-color: var(--forest); color: var(--forest); background: rgba(169, 193, 153, 0.22); }
.badge--under { border-color: var(--brass); color: var(--brass); background: rgba(154, 107, 50, 0.09); }
.badge--at { border-color: var(--border); color: var(--muted); background: var(--offset); }

/* ---------- empty state ---------- */

.empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--s7) var(--s5);
  text-align: center;
  color: var(--muted);
  background: var(--surface);
}
.empty h3 { font-size: 1.15rem; margin-bottom: var(--s3); color: var(--ink); }
.empty p { margin: 0 auto; max-width: 46ch; font-size: 0.9rem; }

/* ==========================================================================
   MARKET READ
   ========================================================================== */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-bottom: var(--s7);
}
.side {
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.side__head { padding: var(--s5) var(--s5) var(--s4); color: var(--cream); }
.side--east .side__head { background: var(--forest); }
.side--west .side__head { background: var(--forest-deep); }
.side__name { font-size: 1.3rem; color: var(--cream); }
.side__nick {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--sage);
  margin-bottom: var(--s2);
}
.side__theme {
  margin: var(--s3) 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(245, 241, 231, 0.86);
}
.side__body { padding: var(--s5); }

.metrics { display: grid; gap: 0; }
.metric {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--divider);
}
.metric:last-child { border-bottom: 0; }
.metric__label { font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.metric__val {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  font-size: 1rem;
  text-align: right;
  white-space: nowrap;
}
/* The note sits inside .metric__val, which is nowrap so a figure never breaks
   mid-number. The note is a sentence, though, and must be allowed to wrap or it
   overflows the card and gets clipped by .side's overflow:hidden. */
.metric__note {
  display: block;
  white-space: normal;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted);
}

.delta { display: inline-flex; align-items: baseline; gap: 5px; }
.delta__from { color: var(--muted); font-weight: 400; font-size: 0.86em; }
.delta__arrow { font-size: 0.8em; }
.delta--up .delta__arrow { color: var(--forest); }
.delta--down .delta__arrow { color: var(--brass); }
.delta--flat .delta__arrow { color: var(--muted); }

.meaning {
  margin: var(--s5) 0 0;
  padding: var(--s4);
  background: var(--offset);
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
}
/* Side-specific handoff at the foot of each comparison card. */
.side__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--s4) 0 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 11px 20px;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--forest);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.side__go:hover { border-color: var(--forest); background: var(--offset); }

.meaning strong {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brass);
  margin-bottom: var(--s2);
  font-weight: 600;
}

/* headline read */
.readline {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 72;
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 46ch;
  margin: 0 0 var(--s6);
  padding-left: var(--s5);
  border-left: 3px solid var(--sage);
}

/* trend chart */
.trend {
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s5);
  margin-bottom: var(--s6);
}
.trend__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.trend__bar .filters__label { margin-right: 0; }
.legend { display: flex; gap: var(--s4); margin-left: auto; font-size: 0.76rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; display: block; }
.legend .e { background: var(--forest); }
.legend .w { background: var(--sage); }
.chartbox { position: relative; height: 300px; }
/* Two grouped bars only — a shorter box keeps them from stretching into slabs. */
.chartbox--bars { height: 240px; }
.trend__note {
  margin: var(--s4) 0 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--muted);
  padding-top: var(--s3);
  border-top: 1px solid var(--divider);
}

/* takeaways */
.takeaways { margin-top: var(--s6); }
.takeaways ul { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.takeaways li {
  display: flex;
  gap: var(--s3);
  font-size: 0.92rem;
  line-height: 1.55;
  padding-left: 0;
}
.takeaways li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--sage);
}

/* history accordion */
.history { margin-top: var(--s7); }
.hist {
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--s3);
  overflow: hidden;
}
.hist summary {
  cursor: pointer;
  padding: var(--s4) var(--s5);
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: var(--s3);
  list-style: none;
}
.hist summary::-webkit-details-marker { display: none; }
.hist summary::after {
  content: '+';
  margin-left: auto;
  font-size: 1.1rem;
  color: var(--brass);
  font-weight: 400;
}
.hist[open] summary::after { content: '\2013'; }
.hist summary:hover { background: var(--offset); }
.hist__label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--brass);
  font-weight: 600;
}
.hist__body { padding: 0 var(--s5) var(--s5); }
.hist__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.hist__col h4 { font-size: 1rem; margin-bottom: var(--s1); }
.hist__theme { font-size: 0.78rem; color: var(--muted); margin: 0 0 var(--s3); line-height: 1.45; }
.hist__src {
  margin: var(--s4) 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  padding-top: var(--s3);
  border-top: 1px solid var(--divider);
}
.hist__src a { color: var(--brass); }

/* ==========================================================================
   CTA
   ========================================================================== */

.cta {
  background: var(--forest);
  color: var(--cream);
  margin-top: var(--s8);
}
.cta .wrap { padding-top: var(--s8); padding-bottom: var(--s8); }
.cta .eyebrow { color: var(--sage); }
.cta h2 { color: var(--cream); font-size: clamp(1.7rem, 3vw, 2.4rem); margin: var(--s3) 0 var(--s4); max-width: 26ch; }
.cta__lede { color: rgba(245, 241, 231, 0.85); font-size: 1rem; line-height: 1.62; max-width: 54ch; margin: 0 0 var(--s6); }

.cta__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s7); align-items: start; }

/* No inner padding: the Jotform page brings its own light panel, and wrapping that in
   a second padded cream card produced a visible frame-inside-a-frame. */
.formcard {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Measured against the real form after the "which side of Riverchase" question was
   dropped: 1151px at 475px and wider, 1218px at 430px and below. The narrow value is
   used as the floor for both so a phone never clips the submit button, and Jotform's
   resize message trims the desktop slack when it arrives. */
.formcard iframe { width: 100%; border: 0; display: block; height: 1260px; }
@media (min-width: 901px) {
  .formcard iframe { height: 1190px; }
}

.formnote {
  margin: var(--s4) 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(245, 241, 231, 0.72);
}
.formnote a { color: var(--cream); text-decoration: underline; text-underline-offset: 2px; }
.formnote a:hover { color: var(--sage); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 24px;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn--solid { background: var(--forest); color: var(--cream); }
.btn--solid:hover { background: var(--forest-deep); }
.btn--cream { background: var(--cream); color: var(--forest); }
.btn--cream:hover { background: #fff; }
.btn--ghost { border-color: rgba(245, 241, 231, 0.42); color: var(--cream); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(245, 241, 231, 0.08); }
.btn--outline { border-color: var(--border); color: var(--forest); }
.btn--outline:hover { border-color: var(--forest); background: var(--offset); }

.aside__block { margin-bottom: var(--s6); }
.aside__block h3 {
  color: var(--cream);
  font-size: 1.05rem;
  margin-bottom: var(--s3);
}
.aside__block p { font-size: 0.88rem; line-height: 1.6; color: rgba(245, 241, 231, 0.82); margin: 0 0 var(--s4); }
.aside__rule { border: 0; border-top: 1px solid rgba(245, 241, 231, 0.2); margin: var(--s6) 0; }
.aside__fine {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 241, 231, 0.55);
  margin: var(--s3) 0 0;
}

/* ==========================================================================
   PHOTOGRAPHY
   Every image on this site is one of Jeff's own photographs of Riverchase.
   Treated as evidence rather than decoration: full-bleed or full-column, one
   hairline caption in the same voice as the data, no rounded corners, no
   drop shadows, no overlay gradients competing with the type.
   ========================================================================== */

.hero {
  margin: var(--s7) 0 0;
  position: relative;
}
.hero img {
  display: block;
  width: 100%;
  height: clamp(260px, 38vw, 480px);
  object-fit: cover;
  object-position: center 42%;
  background: var(--offset);
}
.hero__cap {
  max-width: 1080px;
  margin: var(--s3) auto 0;
  padding: 0 var(--s5);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Side-by-side comparison photos. Fixed aspect so East and West stay optically
   equal weight no matter how the two columns reflow. */
.side__fig { margin: 0; }
.side__fig img {
  display: block;
  /* The width/height attributes on the <img> reserve space before load, but the
     `height` attribute lands as a presentational hint that would otherwise beat
     `aspect-ratio`. `height: auto` hands sizing back to the ratio. */
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--forest-deep);
}
.side__fig figcaption {
  padding: var(--s3) var(--s5);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sage);
}
/* The caption shares its background with the green head immediately below it, so
   photo and heading read as one block rather than two stacked bands. */
.side--east .side__fig figcaption { background: var(--forest); }
.side--west .side__fig figcaption { background: var(--forest-deep); }

.clubshot {
  margin: 0 0 var(--s6);
}
.clubshot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--offset);
  border-top: 3px solid var(--brass);
}
.clubshot figcaption {
  margin-top: var(--s3);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Jeff and Chelsea, in the lead-capture column. Sits on the forest CTA band, so
   the caption is cream on green and the rule above it is sage. */
.us { margin: 0 0 var(--s5); }
.us img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 32%;
  background: var(--forest-deep);
}
.us__cap {
  display: block;
  margin-top: var(--s3);
  border-top: 2px solid var(--sage);
  padding-top: var(--s3);
}
.us__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.012em;
}
.us__role {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
}

@media (max-width: 900px) {
  .searchcta__sides { grid-template-columns: 1fr; }
  .side__go { width: 100%; justify-content: center; }

  .panel__links { display: none; }
  .searchcta { grid-template-columns: 1fr; padding: var(--s4); }
  .searchcta__row .btn { width: 100%; }
  .gateway { padding: var(--s6) 0; }
  .gateway__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .gateway__h { font-size: 1.42rem; }
  .gateway__fine { max-width: none; }

  .hero { margin-top: var(--s6); }
  .hero img { height: clamp(200px, 44vw, 300px); }
  .us img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   MOBILE NAVIGATION · sticky jumper, card collapsing, back to top
   All three are phone-only affordances: the desktop layout already has the
   fixed green panel holding the section list in permanent view.
   ========================================================================== */

.jump, .totop, .morewrap { display: none; }

@media (max-width: 900px) {
  .jump {
    display: block;
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--forest);
    border-bottom: 1px solid rgba(245, 241, 231, 0.16);
  }
  .jump[hidden] { display: none; }

  .jump__btn {
    display: flex;
    align-items: center;
    gap: var(--s3);
    width: 100%;
    padding: 13px var(--s5);
    background: transparent;
    border: 0;
    color: var(--cream);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .jump__num {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sage);
    flex: none;
  }
  .jump__label {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
  }
  .jump__chev {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 1.6px solid var(--sage);
    border-bottom: 1.6px solid var(--sage);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
  }
  .jump__btn[aria-expanded="true"] .jump__chev {
    transform: rotate(225deg) translateY(-2px);
  }

  .jump__list {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--s3);
    border-top: 1px solid rgba(245, 241, 231, 0.16);
  }
  .jump__list[hidden] { display: none; }
  .jump__list a {
    display: flex;
    gap: var(--s4);
    padding: 12px var(--s5);
    color: rgba(245, 241, 231, 0.82);
    font-size: 0.88rem;
    text-decoration: none;
  }
  .jump__list a::before {
    content: attr(data-n);
    color: rgba(245, 241, 231, 0.45);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding-top: 3px;
    flex: none;
  }
  .jump__list a[aria-current="true"] { color: var(--cream); font-weight: 600; }
  .jump__list a[aria-current="true"]::before { color: var(--sage); }

  /* Trim the long card lists to a preview. The button that reveals the rest is
     rendered by dashboard.js into .morewrap. */
  .cards[data-collapsed="true"] .card:nth-of-type(n + 6) { display: none; }

  .morewrap { display: block; margin-top: var(--s5); }
  .morewrap:empty { display: none; }
  .morebtn {
    display: block;
    width: 100%;
    padding: 14px var(--s5);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--forest);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
  }
  .morebtn:active { background: var(--offset); }

  .totop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: var(--s5);
    bottom: var(--s5);
    z-index: 60;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(27, 36, 25, 0.28);
  }
  .totop[hidden] { display: none; }

  /* Two columns of label-plus-figure do not fit in 390px once the figure carries
     a note, so stack them: label, then figure, both flush left. */
  .metric {
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
  }
  .metric__val { text-align: left; }

  /* Anchored jumps must clear the sticky bar. */
  .section, .cta, .masthead, .club, .gateway { scroll-margin-top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .jump__chev { transition: none; }
}

/* ==========================================================================
   05 · COUNTRY CLUB
   Light band between the forest CTA and the forest-deep footer, so the club
   reads as a separate offer rather than more of the same lead capture.
   ========================================================================== */

.club { background: var(--surface); border-top: 0; }
.club .section__num { color: var(--brass); }

.club__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s6);
  align-items: stretch;
  margin-top: var(--s6);
}

.club__card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brass);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.club__card h3 { font-size: 1.15rem; margin: 0 0 var(--s3); color: var(--ink); }
.club__card p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--muted);
  margin: 0 0 var(--s5);
  max-width: 46ch;
}
.club__card .btn { margin-top: auto; }
.club__fine {
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s3) 0 0 !important;
  flex: 0 0 auto;
}

.club__card--quiet {
  background: var(--forest);
  border-color: var(--forest-deep);
  border-top-color: var(--sage);
}
.club__card--quiet h3 { color: var(--cream); }
.club__card--quiet p { color: rgba(245, 241, 231, 0.82); }
.club__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: auto;
  width: 100%;
}
.club__btns .btn { margin-top: 0; }

@media (max-width: 860px) {
  .club__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .club__btns { flex-direction: column; align-items: stretch; }
  .club__btns .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot {
  background: var(--forest-deep);
  color: rgba(245, 241, 231, 0.72);
  font-size: 0.78rem;
  line-height: 1.7;
}
.foot .wrap { padding-top: var(--s6); padding-bottom: var(--s6); }
.foot__grid { display: flex; flex-wrap: wrap; gap: var(--s6); justify-content: space-between; }
.foot a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(245, 241, 231, 0.3); }
.foot a:hover { border-bottom-color: var(--cream); }
.foot__legal { font-size: 0.7rem; color: rgba(245, 241, 231, 0.55); max-width: 46ch; }
.foot__src { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(245, 241, 231, 0.14); font-size: 0.7rem; color: rgba(245, 241, 231, 0.55); }
.foot__src a { color: rgba(245, 241, 231, 0.8); border-bottom-color: rgba(245, 241, 231, 0.25); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .compare { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hist__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --panel-w: 0px; }

  .panel {
    position: static;
    width: auto;
    flex-direction: column;
    padding: var(--s5) var(--s5) var(--s4);
    overflow: visible;
  }
  .panel__lockup { display: flex; align-items: center; gap: var(--s4); text-align: left; }
  .panel__lockup .mark { width: 50px; margin: 0; flex: none; }
  .panel__lockup .wordmark { font-size: 1.4rem; }
  .panel__rule { display: none; }
  .panel__locale { font-size: 0.58rem; line-height: 1.5; margin-top: 2px; }
  .panel__lockup .panel__txt { min-width: 0; }

  .panel__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(245, 241, 231, 0.4);
    color: var(--cream);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 14px;
    border-radius: 100px;
    cursor: pointer;
    flex: none;
  }

  .panel__nav { margin-top: var(--s4); }
  .panel__nav[hidden] { display: none; }
  .panel__nav a { font-size: 0.86rem; }

  .panel__foot { display: none; }

  .main { margin-left: 0; }
  .wrap { padding: 0 var(--s5); }
  .masthead { padding: var(--s7) 0 var(--s6); }
  .section { padding: var(--s7) 0; }
  .chartbox { height: 260px; }
  .readline { padding-left: var(--s4); }
}

@media (max-width: 560px) {
  .wrap { padding: 0 var(--s4); }
  .tiles { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .tile { padding: var(--s3); }
  .tile__val { font-size: 1.5rem; }
  .tile__label { font-size: 0.6rem; letter-spacing: 0.1em; }
  .cards { grid-template-columns: 1fr; }
  .filters__count { margin-left: 0; width: 100%; }
  .legend { margin-left: 0; width: 100%; }
  .chartbox { height: 230px; }
  .foot__grid { flex-direction: column; gap: var(--s4); }
  .panel__lockup .wordmark { font-size: 1.2rem; }
  .panel__lockup .mark { width: 42px; }
}

@media print {
  .panel, .cta, .gateway, .filters, .panel__toggle { display: none; }
  .main { margin-left: 0; }
  body { background: #fff; }
}

/* Provenance stamp above the quoted takeaways */
.takeaways__stamp {
  margin: 0 0 .9rem;
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: .005em;
  color: var(--muted);
  max-width: 58ch;
}


/* Escalated state: the embed never reported in, so the direct contact path carries it. */

/* MLS number sits quietly at the end of the card footer — it is reference data,
   not a selling point, but callers quote it so it has to be visible. */
.card__mls {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

/* ============================================================
   PRIVATE FACEBOOK GROUP CARD
   Promoted out of the plain aside stack because the group is the lowest-commitment
   way into a conversation on this page. The Facebook glyph is the monochrome version,
   tinted with the page palette rather than Facebook blue, which would be the only
   saturated blue anywhere in the design.
   ============================================================ */
.fbcard {
  margin: var(--s6) 0;
  padding: var(--s5);
  background: rgba(245, 241, 231, 0.07);
  border: 1px solid rgba(169, 193, 153, 0.42);
  border-radius: var(--radius);
}
.fbcard__top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.fbcard__mark {
  display: inline-flex;
  color: var(--sage);
  flex: 0 0 auto;
}
.fbcard__mark svg { display: block; }
.fbcard__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}
.fbcard__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--cream);
  margin: 0 0 var(--s3);
}
.fbcard p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(245, 241, 231, 0.82);
  margin: 0 0 var(--s4);
}
.fbcard__btn { gap: 9px; }
.fbcard__btn svg { display: block; flex: 0 0 auto; }
.fbcard__fine {
  margin: var(--s3) 0 0 !important;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 241, 231, 0.55) !important;
}

@media (max-width: 900px) {
  .fbcard { padding: var(--s4); }
}

/* ==========================================================================
   MOBILE SECTION ACCORDION
   Each numbered section collapses to a tappable header on a phone. Every rule
   that hides content lives inside the 900px query, so desktop and print are
   untouched even though the JS classes are applied by the same code.
   ========================================================================== */

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section__toggle { display: none; }
.section__peek { display: none; }

@media (max-width: 900px) {
  .section.is-acc .section__head { position: relative; }

  /* The whole header is the hit target -- there are no links inside it. */
  .section.is-acc .section__toggle {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(62, 85, 62, 0.08);
  }
  .section.is-acc .section__toggle:focus-visible {
    outline: 2px solid var(--forest);
    outline-offset: 6px;
    border-radius: var(--radius);
  }

  /* Chevron rides the title line, so it cannot drift away from the text. */
  .section.is-acc .section__head h2 {
    position: relative;
    padding-right: 38px;
  }
  .section.is-acc .section__head h2::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 0.36em;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--forest);
    border-bottom: 2px solid var(--forest);
    transform: rotate(45deg);
    transition: transform 0.22s ease;
  }
  .section.is-acc:not(.is-collapsed) .section__head h2::after {
    transform: rotate(-135deg);
  }

  /* Closed: header only, tightened up, with the summary line in place of the intro. */
  .section.is-acc.is-collapsed { padding: var(--s5) 0; }
  .section.is-acc.is-collapsed .section__head { margin-bottom: 0; }
  .section.is-acc.is-collapsed .section__sub { display: none; }
  .section.is-acc.is-collapsed .wrap > *:not(.section__head) { display: none; }

  .section.is-acc.is-collapsed .section__peek {
    display: block;
    margin: var(--s2) 0 0;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--muted);
  }
  .section.is-acc.is-collapsed .section__head h2 { margin-bottom: 0; }
}