/* ============================================================
   Dwelloryx — "Modern House Editorial" direction. Sourced from live
   web research (WebSearch/WebFetch, 2026-07-22):
     - themodernhouse.com — white/charcoal, full-bleed architecture
       photography hero, quiet/premium editorial tone, restrained accent
   Palette: cream/white + charcoal ink + a single warm terracotta accent.
   Typography: Lora (serif, headlines) + Inter (body) — a pairing not
   already used elsewhere in this batch. Sharper radii (0.2–0.75rem) than
   the rounder defaults used elsewhere, on purpose — uniform radii/spacing
   across every site is its own tell.
   Real photos self-hosted in assets/img/ (free-tier Unsplash, downloaded
   once, not hotlinked).
   ============================================================ */

/* ============================================================
   Hero — full-bleed real photo with a bottom scrim, copy sitting
   directly on the photo (no card, no split-column) — a third hero
   skeleton, different from a split-screen or a floating-card-over-photo
   pattern. Text anchored bottom-left.
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100svh - var(--topbar-h));
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  background: var(--night);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 24, 21, 0) 32%, rgba(26, 24, 21, 0.58) 76%, rgba(26, 24, 21, 0.78) 100%);
}
.hero .container.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  margin: 0 auto 0 0;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
}
.hero__inner {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
  color: #fff;
}
.hero__eyebrow { color: rgba(255, 255, 255, 0.82); }
.hero__title {
  color: #fff;
  font-family: var(--font-head-display);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.hero__brand-sub { color: rgba(255, 255, 255, 0.68); }
.hero__lead { color: rgba(255, 255, 255, 0.88); }
.hero__trust {
  border-top-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   Guide index — a quiet numbered list (table-of-contents style)
   replacing the icon-card grid every prior white-page used for its
   "topic overview" section. No icons, no equal-weight cards: large
   serif numerals + a divider rule between rows.
   ============================================================ */
.guide-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.guide-index__item {
  border-bottom: 1px solid var(--line);
}
.guide-index__link {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.5rem 0.25rem;
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.guide-index__link:hover {
  padding-left: 0.75rem;
  color: var(--accent-ink);
}
.guide-index__no {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--muted);
  flex-shrink: 0;
  width: 2.4rem;
}
.guide-index__body { flex: 1; }
.guide-index__label {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.guide-index__desc {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 34rem;
}
.guide-index__arrow {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.guide-index__link:hover .guide-index__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   Living mosaic — asymmetric photo grid ("ways people live here"),
   structurally distinct from the pillar grid / table / roadmap
   patterns used in other white-pages. One large tile + two stacked
   smaller tiles, not a uniform card grid.
   ============================================================ */
.mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  height: clamp(20rem, 42vw, 30rem);
}
.mosaic__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.mosaic__tile--main { grid-row: 1 / 3; }
.mosaic__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mosaic__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(26, 24, 21, 0) 0%, rgba(26, 24, 21, 0.68) 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
}
@media (max-width: 720px) {
  .mosaic { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .mosaic__tile { height: 14rem; }
  .mosaic__tile--main { grid-row: auto; height: 18rem; }
}

/* Article photo — style.css has no generic .article__media img rule
   (every prior white-page used an icon-on-gradient block here instead
   of a real photo), so this needs an explicit size/crop. */
.article__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Brand wordmark — no pictorial mark at all (a hand-drawn line icon
   read as generic/placeholder here); a tight-tracked serif wordmark is
   the more credible pattern for an editorial real-estate brand
   (researched: Century 21, Long & Foster, and most luxury/editorial
   real-estate marks run wordmark-only, no icon).
   ============================================================ */
.brand--wordmark .brand__name {
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}