/* ============================================================
   THE LANDING PAGE
   01 hero · 02 film · 03 the property · 04 residences
   05 what's provided · 06 location · 07 the ask
   ============================================================ */

/* ============================================================
   01 · HERO — a split, not an overlay.
   ------------------------------------------------------------
   The headline sits on the site's own paper and the photograph
   gets a full half of the screen to itself. Nothing is set over
   an image, so nothing needs a scrim, a haze or a drop shadow to
   survive — and the contrast of the most important sentence on
   the site is fixed at 15:1 instead of depending on which part
   of a photograph happens to be behind it.
   ============================================================ */
/* The masthead on this page is paper from the first frame, so the
   hero begins beneath it rather than behind it. A transparent bar
   would have put three ink navigation links over the right-hand
   photograph — the exact unreadable overlay the split exists to
   avoid, reintroduced in the header. */
.hero {
  display: grid;
  padding-top: var(--header-h);
  min-height: 100vh;
  min-height: 100svh;
}

.hero-type {
  display: grid;
  align-content: center;
  gap: var(--s5);
  padding: var(--s7) var(--gutter);
  order: 2;
}

.hero h1 {
  font-size: var(--d-1);
  letter-spacing: var(--ls-d1);
  line-height: var(--lh-d1);
  max-width: 14ch;
}
.hero .lede { max-width: 40ch; }

.hero-cta { gap: var(--s4); }

/* the standing line under the fold: where this is, and a cue */
.hero-foot {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero-media {
  position: relative;
  order: 1;
  min-height: 46svh;
  background: var(--shell-3);
  overflow: hidden;
}
.hero-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the mark, small, in the corner of the photograph — the one place
   the logo appears at size, and it is on a dark part of the frame */
.hero-media > img.hero-mark {
  position: absolute;
  right: var(--s5);
  bottom: var(--s5);
  width: clamp(74px, 8vw, 116px);
  height: auto;
  object-fit: contain;
  opacity: .92;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .45));
  pointer-events: none;
}

/* On a phone the split becomes a stack, and 100svh stops being a
   useful floor — it only pushes the two actions further below the
   fold. The photograph takes a little over a third of the screen,
   the sentence and the buttons take the rest. */
@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero-type { gap: var(--s4); padding-block: var(--s5) var(--s7); }
  .hero-media { min-height: 30svh; }
  .hero-foot { margin-top: var(--s2); }
}

/* On a phone the whole point of the hero is that the two actions are
   reachable without a scroll, so everything above them is measured
   against that: a shorter photograph, one line of eyebrow, and the
   standing location line dropped (the eyebrow already says it). */
@media (max-width: 560px) {
  .hero-type { gap: var(--s3); }
  .hero-foot { display: none; }
  .hero-cta .btn { padding-inline: 1.15rem; }
  .hero .lede { font-size: 1rem; line-height: 1.5; }
}

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); }
  .hero-type { order: 1; padding-right: clamp(2rem, 4vw, 4rem); }
  .hero-media { order: 2; min-height: 0; }
}
@media (min-width: 1500px) {
  .hero-type { padding-left: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter))); }
}

/* ============================================================
   02 · THE FILM
   ------------------------------------------------------------
   A dark chapter, because a film needs a dark room. The frame is
   held inside the measure rather than bled to the window edge:
   contained, the 1280-wide source stays sharp; bled, it would be
   upscaled on any desktop and look like exactly what it is.
   ============================================================ */
/* scroll-margin comes from the section[id] rule in base.css.
   Focus is moved here by the CTA so the reading position follows the
   viewport, but a section is not a control and must not draw a ring. */
#film:focus { outline: none; }

.film-head {
  display: grid;
  gap: var(--s5);
  margin-bottom: var(--gap-head);
}
@media (min-width: 900px) {
  .film-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: end;
    gap: var(--s7);
  }
}

.film-stage { position: relative; }

.film-frame {
  position: relative;
  background: var(--deep-2);
  /* a hairline rather than a shadow: on a dark ground a shadow is
     invisible and a rule is the thing that makes an edge read */
  outline: 1px solid var(--line-dark);
  outline-offset: 0;
}
.film-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--deep-2);
}

/* the veil exists only while the film is still an invitation.
   It is removed the moment the visitor asks for the film itself. */
.film-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 35, 32, .34) 0%, rgba(10, 35, 32, .12) 42%, rgba(10, 35, 32, .62) 100%);
  transition: opacity var(--t-ui) var(--ease-ui);
  pointer-events: none;
}

.film-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s4);
  color: var(--shell);
  transition: opacity var(--t-ui) var(--ease-ui);
}
.film-play .disc {
  width: clamp(62px, 8vw, 88px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(10, 35, 32, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--t-ui) var(--ease-ui),
              border-color var(--t-ui) var(--ease-ui),
              transform var(--t-ui) var(--ease-ui);
}
.film-play .disc svg { width: 26%; height: auto; fill: currentColor; transform: translateX(8%); }
.film-play:hover .disc { background: var(--shell); color: var(--deep); border-color: var(--shell); transform: scale(1.04); }
.film-play .label {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(10, 35, 32, .6);
}

/* the pause control for the looping background film. Content that
   moves on its own must always be stoppable (WCAG 2.2.2), and the
   control has to be findable without hunting — so it sits on the
   frame, not in a menu. */
.film-ambient {
  position: absolute;
  right: var(--s4);
  bottom: var(--s4);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(10, 35, 32, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--shell);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui);
}
.film-ambient:hover { background: var(--deep); border-color: var(--shell); }
.film-ambient svg { width: 10px; height: 10px; fill: currentColor; }

/* On a phone the frame is about 210px tall, and a labelled pill in the
   corner lands on top of the play invitation in the middle. The label
   becomes the button's accessible name instead of its visible one —
   the control is still there, still reachable, still announced. */
@media (max-width: 700px) {
  .film-ambient { padding: .55rem; gap: 0; }
  .film-ambient span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .film-ambient svg { width: 12px; height: 12px; }
}
.film-ambient .ic-play { display: none; }
.film-ambient[aria-pressed="true"] .ic-play { display: block; }
.film-ambient[aria-pressed="true"] .ic-pause { display: none; }

/* the asked-for state: controls belong to the browser, the veil
   and the invitation get out of the way */
#film.is-playing .film-veil,
#film.is-playing .film-play,
#film.is-playing .film-ambient { opacity: 0; pointer-events: none; visibility: hidden; }

.film-credit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  margin-top: var(--s4);
  font-size: var(--t-xs);
  color: var(--foam-2);
}

/* ============================================================
   03 · THE PROPERTY — the introduction.
   A narrow measure beside a tall photograph, and a strip of the
   property's own frames underneath. No claims, only the official
   site's own words.
   ============================================================ */
.intro-grid {
  display: grid;
  gap: var(--gap-head);
}
@media (min-width: 900px) {
  .intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .intro-aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.intro-quote {
  margin: var(--s7) 0 0;
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.intro-quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: var(--d-4);
  letter-spacing: var(--ls-d4);
  line-height: 1.32;
  color: var(--ink);
  max-width: 32ch;
}
.intro-quote cite {
  display: block;
  margin-top: var(--s4);
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin-top: var(--sec);
}
@media (min-width: 760px) { .strip { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } }

/* ============================================================
   04 · RESIDENCES
   ------------------------------------------------------------
   A scroll rail on a phone (six residences in a column is a very
   long column), a grid from tablet up. The frames alternate
   proportion so the row reads as an edit, not a spreadsheet.
   ============================================================ */
.res-grid { display: grid; gap: var(--s7) var(--s5); align-items: start; }

@media (max-width: 639px) {
  .res-grid {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* bleed the rail to the window edge so a card can sit half
       off-screen and say "there is more" without a scrollbar */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--s4);
    scrollbar-width: thin;
  }
  .res-grid > * { scroll-snap-align: start; }
  /* one proportion in the rail. The alternating 4:3 / 3:4 rhythm is
     what makes the desktop grid read as an edit; in a single scrolling
     row it just makes the bottom edge ragged. */
  .res-grid .frame { aspect-ratio: 4 / 3; }
}
@media (min-width: 640px) { .res-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s8) var(--s5); } }
@media (min-width: 1000px) { .res-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s8) var(--s6); } }

.res-card-link { display: grid; gap: var(--s4); }
/* The scale answers a hover, so it runs at interface speed. On the
   1.15s media curve the frame was still growing long after the
   pointer had moved on, which reads as lag rather than as polish. */
.res-card .frame img { transition: transform .55s var(--ease-ui), opacity var(--t-media) var(--ease); }
.res-card-link:hover .frame img { transform: scale(1.03); }

.res-card-body { display: grid; gap: .45rem; }
.res-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
.res-card-name { font-family: var(--display); font-size: var(--d-4); font-weight: 400; line-height: var(--lh-d4); margin: 0; letter-spacing: var(--ls-d4); }
.res-card-unit {
  flex: none;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.res-card-specs { font-size: var(--t-sm); color: var(--ink-2); }
.res-card-specs i { font-style: normal; margin-inline: .5em; color: var(--ink-3); }
.res-card-status {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--note);
}

.res-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--sec);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

/* ============================================================
   05 · WHAT'S PROVIDED
   A list, set as a list. No icon grid — a row of decorative
   glyphs adds nothing to "beach chairs" and costs a request each.
   ============================================================ */
/* auto-fit rather than a hard 3-up at 760px: three columns inside a
   768-wide tablet leaves each list about 200px, and "Small coolers and
   larger beach coolers" then breaks over four lines. */
.prov-grid {
  display: grid;
  gap: var(--s7) var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.prov 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);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: var(--s4);
}
.prov ul { display: grid; gap: .8rem; }
.prov li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.prov li::before {
  content: "";
  width: 5px; height: 1px;
  margin-top: .72em;
  background: var(--brass);
}

/* ============================================================
   06 · LOCATION
   The map is framed and sized to sit beside the address, not to
   swallow the page. It is loaded only when the section is in
   reach — a third-party embed is the heaviest thing here.
   ============================================================ */
.loc-grid { display: grid; gap: var(--gap-head); align-items: start; }
@media (min-width: 900px) {
  .loc-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
}

.loc-detail { display: grid; gap: var(--s6); }
.loc-detail address { font-style: normal; font-size: var(--t-lede); line-height: 1.6; }
.loc-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(--s3);
}
.loc-block ul { display: grid; gap: .5rem; }

.map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--shell-3);
  border: 1px solid var(--line);
}
@media (min-width: 900px) { .map-frame { aspect-ratio: 4 / 3; } }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* a stated placeholder rather than a blank rectangle, for the
   moment before the embed attaches and for a blocked third party */
.map-frame::after {
  content: "Map loading…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.map-frame[data-loaded]::after { content: none; }

/* ============================================================
   07 · THE ASK — one action, on the deepest ground on the site.
   ============================================================ */
.close-inner { display: grid; gap: var(--s6); justify-items: center; text-align: center; }
.close-inner h2 { max-width: 18ch; }
.close-inner .lede { margin-inline: auto; }
.close-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s4) var(--s6);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-dark);
  width: min(100%, 46rem);
  font-size: var(--t-sm);
}
.close-ways a { text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--line-dark-2); }
.close-ways a:hover { text-decoration-color: currentColor; }