/* ==========================================================================
   Suburb pages — extends the "Ink & Air" system in styles.css
   Loaded after styles.css. Zero border-radius, zero shadows.
   ========================================================================== */

.area-page { padding-top: 88px; } /* clearance under the fixed paper header */

/* The header on suburb pages is always solid paper (same rules as listing
   pages, which live in listing.css — repeated here because area pages do not
   load that stylesheet). */
.site-header.always-solid {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}

.site-header.always-solid .nav-cta {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.site-header.always-solid .nav-cta:hover { background: #2A2A2A; border-color: #2A2A2A; }

/* ---- Masthead ---------------------------------------------------------- */

.area-head { padding: clamp(64px, 8vw, 120px) 0 0; }

.area-head h1 {
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}

.area-statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  max-width: 26ch;
  color: var(--grey);
}

/* The second stat row (rent + yield) continues the first one's rule grid. */

/* ---- Living in {suburb} ------------------------------------------------ */

.area-living {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.7;
}
.area-living p + p { margin-top: 24px; }

/* ---- Empty state (no current listings) --------------------------------- */

.area-empty {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 24px;
  max-width: 30ch;
  margin-bottom: 28px;
}

/* ---- Guide band -------------------------------------------------------- */

.area-guide-lede {
  max-width: 54ch;
  color: var(--grey);
  margin-bottom: 36px;
}

/* ---- Other suburbs ----------------------------------------------------- */

.area-others {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 820px) {
  .area-page { padding-top: 76px; }
  .area-statement { max-width: none; }
  .area-others { margin-top: 56px; }
}

/* Six suburb figures sit as an even 3 x 2 grid (4 + 2 left an orphan row). */
.area-head .stat-row { grid-template-columns: repeat(3, 1fr); }
.area-head .stat { padding: 40px 28px 28px; border-left: 1px solid var(--hairline); border-top: 0; margin-top: 0; }
.area-head .stat:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.area-head .stat:nth-child(n + 4) { border-top: 1px solid var(--hairline); }
@media (max-width: 900px) {
  .area-head .stat-row { grid-template-columns: repeat(2, 1fr); }
  .area-head .stat { padding: 28px 20px 24px; }
  .area-head .stat:nth-child(3n + 1) { padding-left: 20px; border-left: 1px solid var(--hairline); }
  .area-head .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .area-head .stat:nth-child(n + 4) { border-top: 0; }
  .area-head .stat:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}