/* Haute Shelter - Carmel & Pebble Beach coastal direction.
   Mobile-first. Single committed light palette: these pages exist to show
   property photography accurately, and a dark theme would misrepresent how the
   interiors actually look. Every colour is painted explicitly so the page never
   borrows a host background. */

:root {
  --fog:      #F4F5F3;  /* marine layer - cool, faint green bias */
  --surface:  #FFFFFF;
  --sand:     #EEE9DF;  /* dune, used only for the enquiry card */
  --cypress:  #1C2422;  /* near-black with a green cast */
  --ink-2:    #3E4B47;
  --lichen:   #667470;
  --hair:     #DBE0DC;
  --accent:   #1E5247;  /* deep cypress green - 8.9:1 on white */
  --accent-d: #14382F;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tap: 3rem;          /* 48px minimum touch target */
  --gutter: 1.25rem;
  --measure: 38rem;
}

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

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

body {
  margin: 0;
  background: var(--fog);
  color: var(--cypress);
  /* 18px base: this audience skews older and mobile. */
  font: 400 1.125rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--cypress); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap { width: 100%; max-width: 60rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- header ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--hair); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4rem; padding-block: .75rem;
}
.site-header__brand {
  font-family: var(--display); font-size: 1.4rem; font-weight: 600;
  color: var(--cypress); text-decoration: none; line-height: 1.15;
}
.site-header__phone {
  display: flex; flex-direction: column; align-items: flex-end;
  text-decoration: none; min-height: var(--tap); justify-content: center;
}
.site-header__phone-label {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lichen);
}
.site-header__phone-number {
  font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- hero ---------- */
.listing__hero { background: var(--hair); }
.listing__hero-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 48rem) { .listing__hero-img { aspect-ratio: 21 / 9; } }

.listing__head { padding-block: 2rem 1.25rem; }
.eyebrow {
  margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lichen);
}
.listing__title {
  font-family: var(--display); font-weight: 600; line-height: 1.05;
  font-size: clamp(2.1rem, 8vw, 3.6rem); margin: 0; text-wrap: balance;
}

/* ---------- facts ---------- */
.facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair);
  margin: 0 0 2.5rem; padding: 0;
}
/* Facts vary per listing (3 to 5 of them). An odd count in the 2-up mobile grid
   leaves a dead cell, so let the last one span the full width. */
.facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .facts { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .facts__item:last-child:nth-child(odd) { grid-column: auto; }
}
.facts__item { background: var(--surface); padding: 1rem; }
.facts__label {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lichen); margin: 0 0 .3rem;
}
.facts__value { margin: 0; font-weight: 600; font-size: 1.05rem; }

/* ---------- body ---------- */
.listing__body { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) {
  .listing__body { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; align-items: start; }
}
.prose { max-width: var(--measure); }
.prose > * { margin-block: 0 1.1em; }
.prose h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.65rem;
  line-height: 1.2; margin-block: 0 .6em; color: var(--cypress);
}
.prose p { color: var(--ink-2); }

/* ---------- enquiry ---------- */
.enquire {
  background: var(--sand); border: 1px solid #E0D9CB; padding: 1.5rem;
}
@media (min-width: 60rem) { .enquire { position: sticky; top: 1.5rem; } }
.enquire__title {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  margin: 0 0 .5rem; line-height: 1.15;
}
.enquire__lead { margin: 0 0 1.25rem; font-size: .98rem; color: var(--ink-2); }
.enquire__or {
  text-align: center; margin: .75rem 0; color: var(--lichen);
  font-size: .85rem; text-transform: uppercase; letter-spacing: .1em;
}
.enquire__note { margin: 1rem 0 0; font-size: .85rem; color: var(--lichen); }

/* ---------- buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .8rem 1.25rem;
  font: 600 1rem/1.2 var(--body); text-align: center; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--accent-d); }
.btn--secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--accent); color: #fff; }
.btn--wide { width: 100%; margin-top: 1.25rem; }
.btn--call { flex-direction: column; gap: .1rem; padding-block: .9rem; }
.btn--call__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.btn--call__number { font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---------- sections ---------- */
.section { padding-block: 2.5rem; border-top: 1px solid var(--hair); margin-top: 2.5rem; }
.section__title {
  font-family: var(--display); font-weight: 600; font-size: 1.9rem;
  margin: 0 0 1.25rem; line-height: 1.15;
}

/* ---------- gallery tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }
.tiles__item {
  padding: 0; border: 0; background: var(--hair); cursor: pointer;
  aspect-ratio: 4 / 3; overflow: hidden;
}
.tiles__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
@media (prefers-reduced-motion: reduce) { .tiles__item img { transition: none; } }
.tiles__item:hover img, .tiles__item:focus-visible img { transform: scale(1.04); }

/* ---------- features ---------- */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } }
.features__item { position: relative; padding-left: 1.6rem; color: var(--ink-2); }
.features__item::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; background: var(--accent); border-radius: 50%;
}

/* ---------- closing ---------- */
.closing__lead { color: var(--ink-2); margin: 0 0 1.5rem; }
.closing .btn { max-width: 22rem; }

/* ---------- lightbox ---------- */
.lightbox {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: #0E1513; color: #fff;
}
.lightbox::backdrop { background: rgba(14, 21, 19, .92); }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem var(--gutter); border-bottom: 1px solid #26302D;
}
.lightbox__count { margin: 0; font-size: .9rem; color: #A9B5B1; font-variant-numeric: tabular-nums; }
.lightbox__close {
  min-height: var(--tap); min-width: var(--tap); padding: .5rem 1.1rem;
  background: #fff; color: var(--cypress); border: 0; cursor: pointer;
  font: 600 1rem/1 var(--body);
}
.lightbox__stage {
  position: relative; height: calc(100dvh - 4rem);
  display: flex; align-items: center; justify-content: center;
}
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  min-width: var(--tap); min-height: var(--tap);
  background: rgba(255,255,255,.9); color: var(--cypress);
  border: 0; font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox__nav--prev { left: .5rem; }
.lightbox__nav--next { right: .5rem; }

/* ---------- sticky call bar (mobile only) ---------- */
.callbar {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--accent); box-shadow: 0 -2px 12px rgba(28,36,34,.18);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar__link {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap); color: #fff; text-decoration: none;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (min-width: 60rem) { .callbar { display: none; } }

/* ---------- footer ---------- */
.site-footer {
  background: var(--cypress); color: #C9D2CE; margin-top: 3rem; padding-block: 2.5rem;
}
.site-footer a { color: #fff; }
.site-footer__name { font-family: var(--display); font-size: 1.4rem; color: #fff; margin: 0 0 .5rem; }
.site-footer__contact { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.site-footer__meta { margin: 0; font-size: .9rem; color: #8E9C97; }

.page-title { font-family: var(--display); font-weight: 600; }

/* ========================= archive ========================= */

.archive__head { padding-block: 2.5rem 1.5rem; }
.archive__title {
  font-family: var(--display); font-weight: 600; line-height: 1.05;
  font-size: clamp(2.1rem, 8vw, 3.4rem); margin: 0; text-wrap: balance;
}
.archive__count { margin: .5rem 0 0; color: var(--lichen); font-variant-numeric: tabular-nums; }
.archive__empty { padding-block: 2rem 4rem; max-width: var(--measure); }

/* Areas: wraps rather than scrolls sideways. A horizontal scroller hides
   options off-screen, and this audience should see every choice at once. */
.areas { padding-bottom: 2rem; }
.areas__label {
  margin: 0 0 .6rem; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lichen);
}
.areas__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.areas__link {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: var(--tap); padding: .45rem 1rem;
  background: var(--surface); border: 1px solid var(--hair);
  color: var(--cypress); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.areas__link:hover { border-color: var(--accent); color: var(--accent); }
.areas__link.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.areas__n {
  font-size: .78rem; color: var(--lichen); font-variant-numeric: tabular-nums;
}
.areas__link.is-current .areas__n { color: rgba(255,255,255,.75); }

/* Grid: one big photo per row on a phone. Two-up would halve the photography
   on the smallest screens, which is the opposite of what sells these houses. */
.grid { display: grid; gap: 1.75rem; padding-bottom: 3rem; }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; } }

.card { background: transparent; }
.card__link {
  display: grid; gap: .85rem; text-decoration: none; color: var(--cypress);
}
.card__media { display: block; overflow: hidden; background: var(--hair); aspect-ratio: 4 / 3; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .card__media img { transition: none; } }
.card__link:hover .card__media img,
.card__link:focus-visible .card__media img { transform: scale(1.03); }
.card__media--empty { display: block; width: 100%; height: 100%; }

.card__body { display: grid; gap: .2rem; }
.card__place {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lichen);
  min-height: 1.2em; /* holds the line for listings with no city, keeping titles aligned */
}
.card__title {
  font-family: var(--display); font-size: 1.6rem; font-weight: 600; line-height: 1.15;
}
.card__link:hover .card__title, .card__link:focus-visible .card__title { color: var(--accent); }
.card__meta { color: var(--ink-2); font-size: .95rem; }

/* pagination */
.pager { padding-bottom: 3.5rem; }
.pager .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); padding: .5rem .9rem;
  background: var(--surface); border: 1px solid var(--hair);
  color: var(--cypress); text-decoration: none; font-variant-numeric: tabular-nums;
}
.pager .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pager .page-numbers.current:hover { color: #fff; }
.pager .screen-reader-text { position: absolute; left: -9999px; }

/* ========================= front page ========================= */

/* On phones the panel sits BELOW the photograph on solid colour rather than
   over it. Text on photography is the usual move here, but contrast varies with
   whatever image is set, and this audience should never have to squint. The
   overlay only appears at desktop width, where there is room to place it over a
   reliably dark region and a scrim can guarantee contrast. */
.hero { position: relative; background: var(--cypress); }
.hero__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hero__panel { background: var(--cypress); color: #fff; }
.hero__inner { padding-block: 2rem 2.25rem; }
.hero__eyebrow { color: #9DB0A9; }
.hero__title {
  font-family: var(--display); font-weight: 600; line-height: 1.02;
  font-size: clamp(2.4rem, 10vw, 4.5rem); margin: 0 0 .75rem;
  color: #fff; text-wrap: balance;
}
.hero__lead {
  margin: 0 0 1.75rem; color: #CFD8D4; max-width: 34rem; font-size: 1.05rem;
}
.hero__actions { display: grid; gap: .75rem; }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: #fff; color: var(--cypress); border-color: #fff; }

@media (min-width: 40rem) {
  .hero__actions { grid-auto-flow: column; justify-content: start; gap: 1rem; }
  .hero__actions .btn { padding-inline: 2rem; }
}

/* No overlay at any width, deliberately.
   The first build put the panel over the photograph on desktop with a gradient
   scrim. Against the actual hero - bright windows, pale sofa - the eyebrow was
   almost invisible and the lead text had to be squinted at. Because the hero is
   set from WP admin, the image can change at any time, so NO fixed scrim can be
   guaranteed to hold. A solid panel is legible against every possible image, and
   the photograph gets to be fully visible instead of half-covered. */
@media (min-width: 60rem) {
  /* Image + panel must fit one screen: with a solid panel rather than an overlay
     the hero is two stacked blocks, so the photograph has to give up height or
     the "See our homes" button lands below the fold. */
  .hero__img { aspect-ratio: 21 / 9; max-height: 48vh; }
  .hero__inner { padding-block: 2.25rem 2.5rem; }
  .hero__title { font-size: clamp(2.4rem, 4.4vw, 3.5rem); max-width: 20ch; }
  .hero__lead { font-size: 1.1rem; margin-bottom: 1.5rem; }
}

.intro { border-top: 0; margin-top: 0; padding-top: 2.5rem; }
.intro .prose { max-width: var(--measure); font-size: 1.15rem; }

/* ========================= nav ========================= */

.nav { background: var(--surface); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 1.5rem;
}
.nav__list a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--cypress); text-decoration: none; font-weight: 500; font-size: .98rem;
  border-bottom: 2px solid transparent;
}
.nav__list a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a { color: var(--accent); border-bottom-color: var(--accent); }

/* ========================= page / post ========================= */

.page { padding-block: 2.5rem 1rem; }
.page__head { margin-bottom: 1.5rem; }
.page__title {
  font-family: var(--display); font-weight: 600; line-height: 1.05;
  font-size: clamp(2.1rem, 7vw, 3.2rem); margin: 0; text-wrap: balance;
}
.page__media { margin-bottom: 2rem; }
.page__media img { width: 100%; height: auto; }
.page .prose img { height: auto; margin-block: 1.5rem; }

/* ========================= testimonials ========================= */

.quotes { display: grid; gap: 1.25rem; padding-bottom: 1rem; }
@media (min-width: 52rem) { .quotes { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.quote {
  margin: 0; background: var(--surface); border: 1px solid var(--hair);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem;
}
.quote__body { margin: 0; color: var(--ink-2); }
.quote__body > *:first-child { margin-top: 0; }
.quote__body > *:last-child { margin-bottom: 0; }
.quote__body p { margin-block: 0 .8em; }
.quote__body img { max-width: 100%; height: auto; }
.quote__who {
  font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  color: var(--cypress); margin-top: auto;
}
.quote__who::before { content: "— "; color: var(--lichen); }