/* Self-hosted Fraunces + Inter (SIL Open Font License 1.1), woff2 latin + latin-ext subsets. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/fraunces-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/fraunces-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/fraunces-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/fraunces-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/fraunces-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/fraunces-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/inter-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/inter-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/inter-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/inter-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./assets/fonts/inter-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./assets/fonts/inter-800-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --paper: #fffaf1;
  --porcelain: #f4eee2;
  --limestone: #dfd5c2;
  --ink: #18231f;
  --ink-muted: #53625a;
  --evergreen: #163b34;
  --harbor: #254b57;
  --brick: #854838;
  --brass: #a9854f;
  --mist: #e9edf0;
  --line: rgba(24, 35, 31, 0.16);
  --line-light: rgba(255, 250, 241, 0.28);
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --content: min(1180px, calc(100% - 32px));
  --narrow: min(780px, calc(100% - 32px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Offset in-page anchor targets so the fixed header does not clip section tops. */
  scroll-padding-top: 72px;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.5;
}

body:has(.lightbox[open]) {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 4px;
}

h1,
h2,
p,
figure {
  margin-top: 0;
}

h1,
h2 {
  margin-bottom: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  max-width: min(9ch, 100%);
  color: var(--paper);
  font-size: 4rem;
  line-height: 0.95;
}

h2 {
  max-width: min(14ch, 100%);
  color: var(--evergreen);
  font-size: 2.45rem;
  line-height: 1.04;
}

p {
  color: var(--ink-muted);
  font-size: 1rem;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding: 0 max(16px, calc((100% - 1180px) / 2));
  border-bottom: 1px solid var(--line-light);
  color: var(--paper);
  background: rgba(22, 45, 40, 0.62);
  backdrop-filter: blur(14px);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Scrolled state: once the hero is behind us, swap the over-hero translucent
   treatment for a solid paper bar so nav stays legible over light sections. */
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  color: var(--ink);
  background: rgba(255, 250, 241, 0.96);
}

.site-header[data-scrolled="true"] .identity {
  color: var(--evergreen);
}

.site-header[data-scrolled="true"] .identity__mark {
  filter: none;
}

.site-header[data-scrolled="true"] nav {
  color: var(--ink-muted);
}

.site-header[data-scrolled="true"] a:hover {
  color: var(--evergreen);
}

.identity {
  display: inline-flex;
  align-items: center;
  flex: 0 1 clamp(160px, 20vw, 268px);
  width: clamp(160px, 20vw, 268px);
  min-width: 160px;
  aspect-ratio: 1644 / 208;
  margin-right: auto;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.identity__mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* Persistent phone CTA in the header (desktop). Mobile keeps the sticky bottom
   Call bar instead, so this is hidden below 680px. */
.header-cta {
  display: none;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  background: rgba(255, 250, 241, 0.08);
  color: var(--paper);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header[data-scrolled="true"] .header-cta {
  border-color: var(--evergreen);
  background: var(--evergreen);
  color: var(--paper);
}

/* Keep the mobile "Menu" button legible on the solid paper header (after scroll on
   the home page, and from the top on always-solid content pages). When the menu is
   open the header turns evergreen, so the base paper text is restored there. */
.site-header[data-scrolled="true"]:not([data-nav-open="true"]) .nav-toggle {
  border-color: var(--line);
  color: var(--evergreen);
}

.site-header nav {
  display: none;
  align-items: center;
  gap: 18px;
  color: rgba(255, 250, 241, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
}

.site-header a:hover {
  color: var(--paper);
}

/* Disclosure control for the in-page nav. Hidden on desktop (the inline link row
   shows instead) and absent until app.js removes [hidden], so no-JS is unchanged. */
.nav-toggle {
  display: none;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  background: rgba(255, 250, 241, 0.08);
  color: var(--paper);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: calc(100svh - 30px);
  color: var(--paper);
  background: var(--evergreen);
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}

.hero__stage picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__stage::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 27, 24, 0.86), rgba(16, 27, 24, 0.52) 48%, rgba(16, 27, 24, 0.18)),
    linear-gradient(180deg, rgba(16, 27, 24, 0.1), rgba(16, 27, 24, 0.68));
  content: "";
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  gap: 18px;
  width: var(--content);
  max-width: 760px;
  margin: 0 auto;
  padding: 126px 0 88px;
}

/* Campaign line under the hero headline — the "By Land, Sea, Sky" lockup.
   Baked-only (no data attribute), so JS hydration never touches it. */
.hero__campaign {
  margin: 0;
  color: var(--brass);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.hero__lede {
  max-width: 610px;
  margin-bottom: 0;
  color: rgba(255, 250, 241, 0.84);
  font-size: 1.12rem;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button,
.download-list a,
.contact-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  max-width: 100%;
  padding: 12px 18px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 0.84rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-align: center;
}

.button--primary {
  background: var(--paper);
  color: var(--ink);
}

.button--quiet {
  background: rgba(255, 250, 241, 0.08);
  color: var(--paper);
}

.scroll-link {
  position: absolute;
  right: max(16px, calc((100% - 1180px) / 2));
  bottom: 24px;
  z-index: 3;
  display: none;
  gap: 10px;
  align-items: center;
  color: rgba(255, 250, 241, 0.74);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.scroll-link::after {
  width: 1px;
  height: 36px;
  background: rgba(255, 250, 241, 0.44);
  content: "";
}

.eyebrow {
  margin: 0;
  color: var(--brass);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #e8cf99;
  /* Minimal legibility shadow — not decorative; offsets sky brightness without deepening the scrim */
  text-shadow: 0 1px 6px rgba(10, 20, 16, 0.55);
}

.fact-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Align the fact row to the content column; the warm band stays full-bleed. */
  padding: 0 max(16px, calc((100% - 1180px) / 2));
  border-bottom: 1px solid var(--line);
  background: #fbf5ea;
}

.fact-band article {
  display: grid;
  gap: 4px;
  min-height: 88px;
  padding: 18px;
  border-right: 1px solid var(--line);
}

/* Column dividers only between cells: drop the trailing rule on each row's last
   column and on the final (odd) cell so no divider hangs into empty space. */
.fact-band article:nth-child(2n),
.fact-band article:last-child {
  border-right: 0;
}

.fact-band strong {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1;
}

.fact-band span {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.chapter,
.waterfront,
.gallery,
.diligence,
.inquiry,
.footer {
  padding: 78px max(16px, calc((100% - 1180px) / 2));
}

/* Decorative twilight closer: one cinematic beat that breaks to full viewport
   width (edge to edge), unlike the inset content-column sections around it. */
.closer {
  padding: 78px 0;
  overflow: clip;
  background: var(--porcelain);
}

.closer .media-frame {
  grid-column: 1 / -1;
}

/* Brass as a system: a hairline under every section heading — editorial chapters,
   the section ledes (gallery/waterfront), and the inquiry close. */
.chapter__copy h2::after,
.section-lede h2::after,
.inquiry__copy h2::after {
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 20px;
  background: var(--brass);
  content: "";
}

/* Center the hairline where its heading is centered. */
.section-lede--center h2::after,
.inquiry__copy h2::after {
  margin-inline: auto;
}

.chapter {
  display: grid;
  gap: 34px;
  background: var(--paper);
}

.chapter--residence {
  background: #fbf0e2;
}

.chapter--details {
  background: var(--porcelain);
}

/* Content-page chapter rhythm: a reversible column utility (image side swaps,
   see the >=680 media block) plus a warm background rotation. Reuses the home
   page's .chapter grid, figure framing, and scroll-reveal behavior unchanged. */
.chapter--warm {
  background: #fbf0e2;
}

.chapter--sand {
  background: var(--porcelain);
}

.chapter--wheat {
  background: #f9f1e6;
}

/* Standalone content-page title band: a quiet centered lede beneath the solid
   header, in place of the home page's full-bleed hero. */
.page-intro {
  padding: 96px max(16px, calc((100% - 1180px) / 2)) 44px;
  background: var(--paper);
}

.chapter__copy,
.section-lede,
.inquiry__copy {
  display: grid;
  gap: 15px;
  align-content: center;
  min-width: 0;
}

.chapter__copy p,
.section-lede p,
.inquiry__copy p {
  max-width: 720px;
  margin-bottom: 0;
  line-height: 1.72;
  text-wrap: pretty;
}

.feature-figure,
.media-frame {
  min-width: 0;
  margin: 0;
}

.feature-figure img,
.media-frame img,
.gallery-card img {
  background: var(--limestone);
}

/* Lightbox image letterbox matches the dark viewer, not the warm placeholder. */
.lightbox__media img {
  background: #111b18;
}

/* Real photography fills its frame at a stable aspect ratio. */
.feature-figure img,
.media-frame img {
  height: auto;
  aspect-ratio: 3 / 2;
}

.feature-figure--landscape img {
  aspect-ratio: 3 / 2;
}

/* Portrait beat: a tall frame that alternates against the landscape chapters. */
.feature-figure--portrait img {
  aspect-ratio: 4 / 5;
}

.media-frame--wide img {
  aspect-ratio: 16 / 9;
}

.feature-figure figcaption,
.media-frame figcaption {
  margin-top: 8px;
}

/* Regional map plate (location section): a full-width editorial map below the
   chapter's photo + copy. The credit is a required attribution, kept quiet. */
.map-plate {
  grid-column: 1 / -1;
  margin: 0;
}

/* Bespoke editorial map plate: the neighbourhood image carries a hand-set
   property marker, an orientation compass, and an inset cartographic hairline.
   The marker is fixed over the residence, which the source map frames near the
   top of the plate so the water reads below it; a modest center crop tightens
   the frame toward Willow Point. */
.map-plate__frame {
  position: relative;
  overflow: clip;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--limestone);
}

.map-plate__frame img {
  height: 100%;
  /* Center-origin crop; the marker is offset to track the house (see __pin). */
  transform: scale(1.12);
  transform-origin: center;
}

/* Inset hairline — the framed-plate feel of a hand-set chart. */
.map-plate__frame::after {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(24, 35, 31, 0.16);
  content: "";
  pointer-events: none;
}

/* Orientation compass, top-right, with a small north arrow. */
.map-plate__compass {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 250, 241, 0.86);
  color: var(--evergreen);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.map-plate__compass::before {
  position: absolute;
  top: 4px;
  left: 50%;
  border-right: 3px solid transparent;
  border-bottom: 6px solid var(--brick);
  border-left: 3px solid transparent;
  transform: translateX(-50%);
  content: "";
}

/* Property marker: a brass dot with a soft ring, set over the house. The house
   sits at ~28.6% down the source frame; the 1.12 center crop lands it at ~26%. */
.map-plate__pin {
  position: absolute;
  top: 26%;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--brass);
  box-shadow:
    0 0 0 4px rgba(169, 133, 79, 0.26),
    0 1px 3px rgba(24, 35, 31, 0.45);
}

/* Hand-set label, tethered above the marker. */
.map-plate__label {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 250, 241, 0.94);
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(24, 35, 31, 0.14);
}

.map-plate__label::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 9px;
  background: var(--brass);
  transform: translateX(-50%);
  content: "";
}

.map-plate__credit {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

figcaption {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.waterfront {
  display: grid;
  gap: 34px;
  background: var(--porcelain);
}

.waterfront__grid {
  display: grid;
  gap: 14px;
}

.media-frame--wide {
  grid-column: 1 / -1;
}

.section-lede--center {
  justify-items: center;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.section-lede--center h2 {
  max-width: min(15ch, 100%);
}

.gallery {
  display: grid;
  gap: 24px;
  /* Clip the scrollbar-width overflow of the full-bleed gallery beats below, which
     break to 100vw to reach the viewport edge (same edge-to-edge idea as .closer). */
  overflow-x: clip;
  background: var(--paper);
}

.gallery__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: var(--content);
  margin: 0 auto;
  padding-bottom: 2px;
}

.gallery__tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.gallery__tabs button[aria-selected="true"] {
  border-color: var(--evergreen);
  background: var(--evergreen);
  color: var(--paper);
}

/* Fewer, larger frames: two generous columns as the resting rhythm, punctuated by
   full-bleed cinematic beats. Tuned for the immersive, lingering feel of the
   reference campaign sites rather than a dense thumbnail grid. */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.gallery-card {
  display: grid;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

/* Paired half-width tiles are the default — larger than the old 6-col cells. */
.gallery-card img {
  height: auto;
  aspect-ratio: 4 / 3;
}

/* Full-bleed cinematic beats: the lead frame and every third tile (positions
   1, 4, 7, …) break edge to edge of the viewport. grid-column 1 / -1 takes the
   full row; the 100vw + negative-margin pair escapes the content inset, and the
   .gallery overflow-x: clip absorbs the scrollbar-width spill on the right. */
.gallery-card:nth-child(3n + 1) {
  grid-column: 1 / -1;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  justify-self: start;
}

.gallery-card:nth-child(3n + 1) img {
  aspect-ratio: 21 / 9;
}

/* The opening frame leads tallest of the beats. */
.gallery-card:nth-child(1) img {
  aspect-ratio: 16 / 9;
}

/* A lone trailing tile closes full-width within the content column — a quiet inset
   finish, not another band. Two cases leave a tile alone in its row beside the
   2-col rhythm: an odd-position last tile (e.g. the 11-image Residence set), and a
   3n+2 last tile that falls right after a full-bleed beat (degraded even counts). */
.gallery-card:nth-child(odd):last-child:not(:nth-child(3n + 1)),
.gallery-card:nth-child(3n + 2):last-child {
  grid-column: 1 / -1;
}

.gallery-card:nth-child(odd):last-child:not(:nth-child(3n + 1)) img,
.gallery-card:nth-child(3n + 2):last-child img {
  aspect-ratio: 16 / 9;
}

.gallery__placeholder {
  display: grid;
  min-height: 300px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(22, 59, 52, 0.08), transparent 28% 72%, rgba(133, 72, 56, 0.08)),
    var(--porcelain);
}

.gallery__placeholder span {
  place-self: center;
  max-width: calc(100% - 32px);
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.gallery__noscript {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.diligence {
  display: grid;
  gap: 24px;
  background: #f9f1e6;
}

.download-list,
.contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.download-list a,
.contact-list a {
  color: var(--evergreen);
}

.inquiry {
  display: grid;
  gap: 32px;
  justify-items: center;
  color: var(--paper);
  background: var(--evergreen);
  text-align: center;
}

/* No-form inquiry: keep the lockup centered and constrained so the evergreen
   panel reads as an intentional close rather than a wide empty band. */
.inquiry .inquiry__copy {
  max-width: 640px;
  margin: 0 auto;
  justify-items: center;
}

.inquiry h2,
.inquiry p,
.inquiry label {
  color: var(--paper);
}

.inquiry p {
  color: rgba(255, 250, 241, 0.76);
}

/* The office phone is the inquiry CTA; render it as a solid button so it stays
   legible on the evergreen panel (the base .contact-list color is evergreen). */
.inquiry .contact-list a {
  background: var(--paper);
  color: var(--ink);
}

/* Quiet brokerage trust anchor at the decision point (text only, no claims). */
.inquiry__brand {
  margin: 6px 0 0;
  color: rgba(255, 250, 241, 0.62);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Persistent mobile Call action — hidden on desktop, sticky bottom bar <680px. */
.mobile-call {
  display: none;
}

.placeholder-form {
  display: grid;
  gap: 13px;
  width: 100%;
  max-width: 460px;
  min-width: 0;
}

label {
  display: grid;
  gap: 6px;
  color: rgba(255, 250, 241, 0.84);
  font-size: 0.86rem;
  font-weight: 800;
}

input,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 250, 241, 0.34);
  border-radius: 2px;
  background: rgba(255, 250, 241, 0.08);
  color: var(--paper);
}

textarea {
  min-height: 112px;
  resize: vertical;
}

.placeholder-form button {
  justify-self: start;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 250, 241, 0.32);
  border-radius: 2px;
  background: rgba(255, 250, 241, 0.12);
  color: var(--paper);
  font-weight: 850;
}

input:disabled,
textarea:disabled,
button:disabled {
  opacity: 1;
}

.footer {
  display: grid;
  gap: 32px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.footer__top {
  display: grid;
  gap: 28px;
}

.footer__brand {
  display: grid;
  gap: 6px;
  align-content: start;
}

.footer__identity {
  display: inline-flex;
  width: clamp(220px, 30vw, 300px);
  aspect-ratio: 1644 / 208;
  color: var(--evergreen);
}

.footer__mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.footer__place {
  margin: 0;
  color: var(--brass);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer__brand-line {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer__phone {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--evergreen);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-content: start;
}

.footer__nav a {
  color: var(--ink-muted);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer__nav a:hover {
  color: var(--evergreen);
}

.footer__fine {
  max-width: 820px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.lightbox {
  width: min(1040px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 14px;
  border: 1px solid var(--line-light);
  background: var(--ink);
  color: var(--paper);
}

.lightbox::backdrop {
  background: rgba(10, 16, 14, 0.82);
}

.lightbox__close {
  min-height: 38px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 250, 241, 0.36);
  border-radius: 2px;
  background: transparent;
  color: var(--paper);
  font-weight: 850;
}

.lightbox__media {
  display: grid;
  min-height: 220px;
  background: #111b18;
}

.lightbox__media img {
  max-height: 70vh;
  object-fit: contain;
}

.lightbox__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding-top: 12px;
}

.lightbox__bar button {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 250, 241, 0.32);
  border-radius: 2px;
  background: transparent;
  color: var(--paper);
}

.lightbox__bar p,
.lightbox__bar span {
  margin: 0;
  color: rgba(255, 250, 241, 0.82);
  font-size: 0.88rem;
}

.site-header,
.hero__copy,
.chapter,
.chapter__copy,
.feature-figure,
.waterfront,
.waterfront__grid,
.section-lede,
.media-frame,
.map-plate,
.gallery,
.gallery__tabs,
.gallery__grid,
.gallery__placeholder,
.diligence,
.inquiry,
.placeholder-form,
.lightbox,
.lightbox__bar {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 680px) {
  h1 {
    font-size: 5.8rem;
  }

  h2 {
    font-size: 3.4rem;
  }

  .site-header nav {
    display: flex;
  }

  .header-cta {
    display: inline-flex;
    align-items: center;
  }

  .scroll-link {
    display: flex;
  }

  .fact-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 3-up: restore the middle-column divider, drop only the right column. */
  .fact-band article:nth-child(2n) {
    border-right: 1px solid var(--line);
  }

  .fact-band article:nth-child(3n) {
    border-right: 0;
  }

  .chapter {
    grid-template-columns: minmax(0, 0.8fr) minmax(320px, 0.98fr);
    gap: 60px;
    align-items: center;
    padding-top: 116px;
    padding-bottom: 116px;
  }

  .chapter--residence,
  .chapter--location,
  .chapter--reverse {
    grid-template-columns: minmax(320px, 0.98fr) minmax(0, 0.8fr);
  }

  .page-intro {
    padding-top: 140px;
    padding-bottom: 56px;
  }

  .waterfront,
  .gallery,
  .diligence,
  .closer,
  .inquiry,
  .footer {
    padding-top: 116px;
    padding-bottom: 116px;
  }

  .waterfront__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  /* Waterfront is the emotional heart: more air and a wider, cinematic dominant frame. */
  .waterfront {
    padding-top: 136px;
    padding-bottom: 136px;
    gap: 44px;
  }

  .media-frame--wide img {
    aspect-ratio: 2 / 1;
  }

  .footer__top {
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: start;
  }

  .footer__nav {
    justify-content: flex-end;
    max-width: 360px;
  }

  .inquiry:has(form) {
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.55fr);
    align-items: start;
  }
}

@media (min-width: 1060px) {
  h1 {
    font-size: 7.2rem;
  }

  .hero__copy {
    margin-left: max(16px, calc((100% - 1180px) / 2));
  }
}

@media (max-width: 679px) {
  /* Sticky bottom Call bar so a viewing action is always one tap away. */
  .mobile-call {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 250, 241, 0.18);
    background: var(--evergreen);
    color: var(--paper);
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* Keep the footer clear of the fixed Call bar. */
  .footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* Mobile in-page nav: the inline link row is hidden, so the Menu button opens
     a stacked dropdown beneath the header. */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
  }

  .nav-toggle[aria-expanded="true"] {
    background: rgba(255, 250, 241, 0.16);
  }

  .site-header[data-nav-open="true"] {
    background: var(--evergreen);
  }

  .site-header[data-nav-open="true"] .identity__mark {
    filter: brightness(0) invert(1);
  }

  .site-header[data-nav-open="true"] nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px max(16px, calc((100% - 1180px) / 2)) 12px;
    background: var(--evergreen);
    border-bottom: 1px solid var(--line-light);
  }

  .site-header[data-nav-open="true"] nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    border-top: 1px solid var(--line-light);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
  }

  h1 {
    font-size: 3.65rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  .hero__copy {
    padding-bottom: 76px;
  }

  .hero__actions {
    align-items: stretch;
  }

  .button,
  .download-list a,
  .contact-list a {
    width: 100%;
  }

  /* Mobile: tighten the four short tab labels so they fit at rest at 360px,
     with a subtle right-edge fade to signal the scroller when a label still spills. */
  .gallery__tabs {
    gap: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
  }

  .gallery__tabs button {
    padding: 9px 7px;
    letter-spacing: 0.02em;
  }

  /* Mobile: a single immersive column. Paired tiles stack full content width;
     the full-bleed beats stay edge to edge but ease to 16/9 so they read as
     cinematic bands rather than thin strips on a narrow screen. */
  .gallery__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .gallery-card img {
    aspect-ratio: 4 / 3;
  }

  .gallery-card:nth-child(3n + 1) img,
  .gallery-card:nth-child(odd):last-child:not(:nth-child(3n + 1)) img,
  .gallery-card:nth-child(3n + 2):last-child img {
    aspect-ratio: 16 / 9;
  }

  .lightbox__bar {
    grid-template-columns: 1fr 1fr;
  }

  .lightbox__bar p,
  .lightbox__bar span {
    grid-column: 1 / -1;
  }
}

/* Subtle editorial reveal: chapters ease up as they enter. Progressive enhancement
   only — the start state is applied solely after app.js adds `.has-reveal` (so the
   no-JS render is untouched), reveals are one-shot (app.js unobserves once seen),
   and this shifts position only, never opacity, so content is always visible
   (robust to no-JS, reduced motion, and fast-scroll/full-page captures alike). */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal :is(.chapter__copy, .feature-figure, .section-lede, .media-frame) {
    transform: translateY(22px);
    transition: transform 0.8s ease;
  }

  .has-reveal :is(.chapter__copy, .feature-figure, .section-lede, .media-frame).is-revealed {
    transform: none;
  }

  /* Ambient hero: a very slow drift so the arrival image feels alive on landing
     without reading as motion graphics. The .hero__stage scrim is a sibling
     pseudo-element, so it stays fixed while the image breathes beneath it; the
     stage clips the scaled image. The reduce block below also neutralizes this. */
  .hero__stage picture {
    transform-origin: 58% 44%;
    animation: hero-drift 42s ease-in-out infinite alternate;
    will-change: transform;
  }
}

@keyframes hero-drift {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.075) translate3d(-0.9%, -0.6%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}