/* ============================================================
   SITE CHROME — header, menu, footer.
   One navigation definition, generated by scripts/app.js from
   SITE.nav, so a link can never exist on one page and not another.
   ============================================================ */

/* ── HEADER ───────────────────────────────────────────────────
   Fixed, ink type on the page's own paper, on every page. No glass
   capsule, no floating pill, no transparent-over-the-hero variant —
   an editorial masthead is some type and some space, and a bar that
   is always the same is a bar whose contrast is never a question of
   which photograph happens to be behind it. The only thing that
   changes is the scroll edge below. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--ink);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-ui) var(--ease-ui),
              border-color var(--t-ui) var(--ease-ui),
              color var(--t-ui) var(--ease-ui);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

/* A SCROLL EDGE, NOT A PERMANENT DIVIDER.
   The bar used to carry its fill and its hairline from the first
   frame, which meant the page opened with a rule drawn across it
   separating the masthead from nothing. The material now appears
   only once content is actually travelling underneath — the edge
   is a consequence of the overlap rather than a decoration, and at
   the top of the page the header simply sits on the paper. */
.site-header.is-solid {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header.is-solid.is-over-content {
  background: color-mix(in srgb, var(--shell) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
}
/* backdrop-filter silently no-ops without a GPU, and blur is the
   refinement rather than the mechanism — the fill alone has to carry
   the contrast, and at 92% opaque over photography it does. */
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-solid.is-over-content { background: var(--shell); }
}

/* the wordmark */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
.brand small {
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--t-ui) var(--ease-ui);
}
@media (max-width: 420px) { .brand small { display: none; } }

/* desktop links */
.nav-links {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.4rem);
}
/* DIRECT CHILDREN ONLY. The Residences item now contains a panel
   full of its own links, and an unscoped `.nav-links a` gave every
   preview card the bar's font size, weight and sliding underline. */
.nav-links > a,
.nav-item > a {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  padding-block: .35rem;
}
.nav-links > a::after,
.nav-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-ui) var(--ease-ui);
}
.nav-links > a:hover::after,
.nav-links > a:focus-visible::after,
.nav-item > a:hover::after,
.nav-item > a:focus-visible::after { transform: scaleX(1); }
/* the page you are on is stated, not offered */
.nav-links > [aria-current="page"],
.nav-item > [aria-current="page"] { color: var(--ink-3); }
.nav-links > [aria-current="page"]::after,
.nav-item > [aria-current="page"]::after { transform: scaleX(1); background: var(--brass); }

/* ── THE RESIDENCES PREVIEW ───────────────────────────────────
   A panel under one navigation item. Opens on hover and on focus,
   closes when either leaves, and is unreachable by Tab while shut
   because visibility:hidden takes its links out of the tab order.
   Restrained by design: a hairline, one soft shadow, and a short
   fade — a navigation preview that announces itself is a navigation
   preview competing with the page it is previewing. */
.nav-item { position: relative; display: inline-flex; }

.nav-preview {
  position: absolute;
  top: calc(100% + .9rem);
  left: 50%;
  z-index: 10;
  width: min(42rem, calc(100vw - 3rem));
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity var(--t-ui) var(--ease-ui),
              transform var(--t-ui) var(--ease-ui),
              visibility 0s linear var(--t-ui);
}
.nav-item.is-open .nav-preview {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.nav-preview-inner {
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--shell);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 24, 27, .04),
              0 22px 48px -24px rgba(10, 35, 32, .35);
}

.nav-preview-head {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}
.nav-preview-card { display: grid; gap: .5rem; align-content: start; }
.nav-preview-card .frame img {
  transition: transform .55s var(--ease-ui);
}
.nav-preview-card:hover .frame img { transform: scale(1.04); }
.nav-preview-name {
  font-family: var(--display);
  font-size: 1.0625rem;
  letter-spacing: var(--ls-d4);
  line-height: 1.25;
  color: var(--ink);
}
.nav-preview-spec { font-size: var(--t-xs); color: var(--ink-3); }

/* the rule spans the panel; the link sizes to its own text, so the
   underline it draws on hover is the width of the words and not of
   the whole footer row */
.nav-preview-foot {
  display: block;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* the item's own link keeps its underline while the panel is open,
   so the bar still says which thing the panel belongs to */
.nav-item.is-open > a::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--s3); }
/* the masthead's action is deliberately one step down from a page
   CTA: same shape and same states, less presence */
.nav-actions .btn { min-height: 2.5rem; padding: 0 1.2rem; }

/* ── MENU BUTTON + PANEL (small screens) ──────────────────── */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: .5rem .25rem;
}
.menu-btn span { display: none; }
@media (min-width: 480px) { .menu-btn span { display: inline; } }
/* TWO bars, not three. The three-bar icon animated by fading its
   middle rule out, which is a thing disappearing rather than a thing
   becoming another thing. Two bars simply rotate and converge — the
   whole state change is one transform, nothing vanishes, and it
   reads as the same object in two positions. */
.menu-btn i {
  display: grid;
  gap: 5px;
  width: 20px;
}
.menu-btn i b {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-ui) var(--ease-ui);
}
.menu-btn[aria-expanded="true"] i b:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i b:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--deep);
  color: var(--shell);
  padding: calc(var(--header-h) + var(--s7)) var(--gutter) var(--s7);
  display: grid;
  align-content: space-between;
  gap: var(--s7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity var(--t-ui) var(--ease-ui),
              transform var(--t-ui) var(--ease-ui),
              visibility 0s linear var(--t-ui);
  overflow-y: auto;
}
.menu-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.menu-panel ol { display: grid; gap: var(--s2); }
.menu-panel li { border-top: 1px solid var(--line-dark); }
.menu-panel li a {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s4) 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 3rem);
  letter-spacing: var(--ls-d2);
  line-height: var(--lh-d2);
}
.menu-panel li a b {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  color: var(--brass-soft);
}
.menu-panel [aria-current="page"] { color: var(--foam-2); }
.menu-foot { display: grid; gap: var(--s3); font-size: var(--t-sm); color: var(--foam); }
.menu-foot address { font-style: normal; line-height: 1.7; }
.menu-foot a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--line-dark-2); }
.menu-foot a:hover { text-decoration-color: currentColor; }

body.menu-open { overflow: hidden; }

/* The header sits ABOVE the panel (it has to — the close control lives
   in it), so while the sheet is open it has to stop being paper.
   Otherwise the bar stays ivory over a deep-green panel and the close
   icon, which is drawn in ivory, disappears into it. */
body.menu-open .site-header,
body.menu-open .site-header.is-solid,
body.menu-open .site-header.is-solid.is-over-content {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--shell);
}
body.menu-open .brand small { color: var(--foam-2); }
body.menu-open .nav-actions .btn {
  background: var(--shell);
  color: var(--deep);
  border-color: var(--shell);
}
body.menu-open .menu-btn { color: var(--shell); }

/* From here up, the navigation is inline and the sheet does not
   exist. Declared last so it beats the component rules above it
   without either side reaching for !important. */
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .menu-btn { display: none; }
  .menu-panel { display: none; }
}

/* ── THE OTHER TWO PREFERENCES ────────────────────────────────
   Reduced motion was already honoured; these two were not.
   Translucency and near-invisible hairlines are exactly what a
   visitor turns off when a blurred bar over photography is hard
   to read, so the header answers both: a solid fill with no blur,
   and at high contrast a defined edge rather than a suggestion. */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-solid.is-over-content {
    background: var(--shell);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .film-play .disc,
  .film-ambient {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--deep-2);
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(20, 24, 27, .32);
    --line-2: rgba(20, 24, 27, .52);
    --line-dark: rgba(255, 255, 255, .38);
    --line-dark-2: rgba(255, 255, 255, .58);
    --ink-2: #363D42;
    --ink-3: #4A5257;
  }
  .site-header.is-solid.is-over-content {
    background: var(--shell);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .btn-ghost { border-color: var(--ink); }
}

/* ============================================================
   FOOTER
   ------------------------------------------------------------
   Three columns, a divider, a bottom row, and a scenic band that
   closes the page. The band is the property's own shoreline; the
   oversized wordmark on it is decorative (the brand is stated as
   real text in the first column) and marked aria-hidden, which is
   what lets it sit on a photograph at all — the site's rule is
   that INFORMATIONAL type is never set on an image.
   ============================================================ */
.site-footer {
  background: var(--deep-2);
  color: var(--foam);
  padding-top: var(--sec);
  font-size: var(--t-sm);
}
.site-footer a:hover { color: var(--shell); }
/* .link defaults to ink, which is invisible down here. The footer is
   a dark ground and has to restate it, the same way .on-deep does. */
.site-footer .link { color: var(--foam); }
.site-footer .link:hover { color: var(--shell); }

/* ── the upper content ────────────────────────────────────── */
.foot-top {
  display: grid;
  gap: var(--s8);
  padding-bottom: var(--s8);
}
@media (min-width: 820px) {
  .foot-top {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 5vw, 6rem);
  }
}

/* ── THE LOCKUP ───────────────────────────────────────────────
   The name and the place, in one component, built from the two
   strings the masthead also reads. Declared once here so the two
   can never end up saying different things. */
.lockup { display: grid; gap: .7rem; }
.lockup-name {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
  letter-spacing: var(--ls-d3);
  line-height: 1;
  color: var(--shell);
}
.lockup-place {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--foam-2);
}

.foot-brand { display: grid; gap: var(--s5); align-content: start; }
.foot-summary { color: var(--foam-2); max-width: 30rem; line-height: 1.7; }

.foot-col h2 {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--foam-2);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line-dark);
}
.foot-col address { font-style: normal; color: var(--foam); line-height: 1.75; }
.foot-directions { margin-top: var(--s4); }

.foot-list { display: grid; gap: .55rem; }
/* the booking links are a second group, separated by air and a rule
   rather than by a heading the column does not need */
.foot-list-sep {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-dark);
}
/* a comfortable target without the links looking spaced out */
.foot-list a,
.foot-nav a,
.foot-directions { display: inline-block; padding-block: .2rem; }

/* ── the bottom row ───────────────────────────────────────── */
.foot-bot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s6);
  border-top: 1px solid var(--line-dark);
  color: var(--foam-2);
  font-size: var(--t-xs);
}
.foot-copy { margin: 0; }
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-left: auto;
}

/* ── back to top ──────────────────────────────────────────────
   In the row, at the end of the page, rather than floating over
   the content. A floating chip in the corner sat on top of
   whatever was under it — here, a footer link. */
.to-top {
  flex: none;
  width: var(--ctl-h);
  height: var(--ctl-h);
  display: grid;
  place-items: center;
  border-radius: var(--pill);
  border: 1px solid var(--line-dark-2);
  color: var(--foam);
  transition: background var(--t-ui) var(--ease-ui),
              border-color var(--t-ui) var(--ease-ui),
              color var(--t-ui) var(--ease-ui);
}
.to-top:hover { background: rgba(255, 255, 255, .08); border-color: var(--shell); color: var(--shell); }
.to-top:active { transform: scale(.94); transition: transform var(--t-press) ease-out; }
.to-top svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-ui) var(--ease-ui);
}
.to-top:hover svg { transform: translateY(-2px); }

/* ── the scenic band ──────────────────────────────────────────
   Full width, outside the measure. The veil is dense where the
   wordmark sits and thins across the water, so the photograph
   emerges out of the footer's own ground rather than being pasted
   underneath it. */
.foot-scene {
  position: relative;
  height: clamp(11rem, 22vw, 23rem);
  overflow: hidden;
  background: var(--deep-2);
  isolation: isolate;
}
.foot-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.foot-scene-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--deep-2) 0%,
    rgba(10, 35, 32, .74) 22%,
    rgba(10, 35, 32, .30) 58%,
    rgba(10, 35, 32, .46) 100%);
}
.foot-scene-mark {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(2.6rem, 13.5vw, 13rem);
  letter-spacing: var(--ls-d1);
  line-height: 1;
  white-space: nowrap;
  color: rgba(247, 246, 243, .9);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 819px) {
  .foot-nav { margin-left: 0; }
  .foot-scene { height: clamp(9rem, 30vw, 14rem); }
  .foot-scene-mark { top: 34%; }
}