/* ============================================================
   INNER PAGES — residences.html, stay.html
   ============================================================ */

/* ── THE INNER-PAGE HEADER ────────────────────────────────────
   A band of photography, and then the title beneath it on paper.

   This was a full-bleed photograph with the title set over it
   under a gradient, which is the default hospitality hero and the
   reason it was rebuilt: measured against the property's own
   pictures, the eyebrow came out at 1.4:1 and the heading at
   2.7:1, because the darkest the veil could go without flattening
   a white building was not dark enough to carry small type.

   The same rule now holds everywhere on this site — type is never
   set on a photograph — so contrast is a constant instead of a
   property of whichever frame is behind a given letter. The
   picture keeps all of its light, and the title reads at 16:1.
   ────────────────────────────────────────────────────────────── */
.page-hero {
  padding-top: var(--header-h);
  background: var(--shell);
}

.ph-media {
  height: clamp(15rem, 42svh, 27rem);
  overflow: hidden;
  background: var(--shell-3);
}
.ph-media img { width: 100%; height: 100%; object-fit: cover; }

.page-hero .wrap {
  display: grid;
  gap: var(--s5);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { max-width: 46ch; }

/* ============================================================
   RESIDENCES — one editorial entry each, alternating sides.
   ============================================================ */
.res-list { display: grid; gap: var(--sec-lg); }

.res {
  display: grid;
  gap: var(--gap-head);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
@media (min-width: 900px) {
  .res {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  /* alternate which side the photography falls on, so six entries
     do not read as six copies of one template */
  .res:nth-child(even) .res-media { order: 2; }
  .res:nth-child(even) .res-body { order: 1; }
  .res-body { position: sticky; top: calc(var(--header-h) + 3rem); }
}

.res-media { display: grid; gap: var(--s3); }
/* auto-fit, not a fixed pair: a residence with one supporting frame
   should get the full width rather than half of a two-up row */
.res-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--s3); }

.res-body { display: grid; gap: var(--s5); align-content: start; }
.res-body h2 { margin-top: -.35rem; }

.res-specs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: var(--s6);
  margin: 0;
  padding-block: var(--s4);
  border-block: 1px solid var(--line);
}
.res-specs div { display: grid; gap: .3rem; }
.res-specs dt {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
.res-specs dd { margin: 0; font-family: var(--display); font-size: 1.3rem; letter-spacing: var(--ls-d4); line-height: var(--lh-d4); }

/* The four features were four bordered pills, which put four more
   outlines beside a bordered spec table and a bordered chip — the
   entry read as boxes first and as a room second. They are a list,
   so they are set as one, in the same two columns and with the same
   brass tick the "what's provided" list already uses. One pattern
   for a short list of facts, used twice, instead of two patterns. */
/* Two columns, fixed — not auto-fit. Every residence carries three
   or four of these, and auto-fit resolves to three tracks in the
   640–900px band, which leaves a four-item list as a row of three
   and one orphan. Two columns sets four as a clean block and three
   as two-and-one, at every width the entry is ever read at. */
.res-features {
  display: grid;
  gap: .55rem var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .res-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.res-features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-2);
}
.res-features li::before {
  content: "";
  width: 5px; height: 1px;
  margin-top: .68em;
  background: var(--brass);
}

.res-note { color: var(--ink-3); }

.res-status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  align-self: start;
  padding: .55rem 1rem;
  border: 1px solid color-mix(in srgb, var(--note) 42%, transparent);
  border-radius: var(--pill);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--note);
}

.res-act { align-items: center; gap: var(--s4); }
.res-act .fine { margin: 0; }

/* ============================================================
   PLAN YOUR STAY
   ============================================================ */
.ways-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* A rule above each way, not a box around it. The three cards sat
   in outlined panels on a banded ground — two edges describing the
   same grouping the grid already makes obvious. The hairline is the
   same one the team entries below use, so the page reads as one
   list treatment rather than two. */
.way {
  display: grid;
  gap: var(--s4);
  align-content: start;
  padding-top: var(--s5);
  border-top: 1px solid var(--line-2);
}
.way h3 { font-family: var(--display); font-size: var(--d-4); letter-spacing: var(--ls-d4); line-height: var(--lh-d4); }
.way p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; max-width: 32ch; }
.way ul { display: grid; gap: .4rem; font-size: var(--t-sm); }
.way .link, .way .btn { justify-self: start; margin-top: var(--s2); }

.policy-grid { display: grid; gap: var(--s8) var(--s7); }
@media (min-width: 800px) { .policy-grid { grid-template-columns: repeat(2, 1fr); } }

.policy h3 { padding-bottom: var(--s3); border-bottom: 1px solid var(--line-2); margin-bottom: var(--s4); }
.policy ul { display: grid; gap: var(--s3); }
.policy li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-2);
}
.policy li::before {
  content: "";
  width: 5px; height: 1px;
  margin-top: .8em;
  background: var(--brass);
}

.team-grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.member { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--line-2); }
.member h3 { font-family: var(--display); font-size: 1.35rem; letter-spacing: var(--ls-d4); line-height: var(--lh-d4); }
.member p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; max-width: 34ch; }

.contact-grid { display: grid; gap: var(--gap-head); }
@media (min-width: 800px) { .contact-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.contact-block h3 {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
}
.contact-block ul { display: grid; gap: .6rem; }
.contact-block address { font-style: normal; line-height: 1.7; }

/* the source note. A demo that says where its facts came from is
   worth more to a client than one that does not. */
.source-note {
  margin-top: var(--sec);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.7;
  max-width: 46rem;
}
.source-note a { text-decoration: underline; text-underline-offset: .25em; }