/* Coastal Minimal — modelled on the Palm Beach (38 Coasters Retreat) and Moffat House campaigns:
   light uppercase Raleway, slate-teal headings, aqua photo bands and a panoramic photograph with a
   caption band. Square corners throughout. */
.theme-coastal {
  --font-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;
  --font-ui: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --color-bg: #ffffff;
  --color-bg-alt: #f3f9f9;
  --color-surface: #ffffff;
  --color-text: #404040;
  --color-muted: #5f6d6f;
  --color-rule: #dce6e7;
  --color-heading: #4f6a63;
  --color-accent: #4f6a63;
  --color-accent-hover: #3c544e;
  --color-accent-contrast: #ffffff;
  --color-dark: #1e2225;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-btn: 0;
  --photo-radius: 0;
  --heading-weight: 300;
  --heading-case: uppercase;
  --heading-tracking: 0.08em;
  --title-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  --btn-case: uppercase;
  --btn-tracking: 0.16em;
  --btn-weight: 600;
  --label-tracking: 0.26em;
  --nav-font: "Raleway", sans-serif;
  --nav-font-size: 0.76rem;
  --nav-tracking: 0.12em;
  --nav-bg: #f8f8f8;
  --nav-color: #111111;
  --nav-height: 74px;
  --gallery-gap: 6px;
  --gallery-radius: 0;
  --footer-bg: #9baeb2;
  --footer-text: #1e2225;
  --footer-rule: rgba(30, 34, 37, 0.2);
  --back-to-top-bg: #1d7f6d;
  --back-to-top-color: #ffffff;
  --back-to-top-radius: 0;
}
.theme-coastal h1, .theme-coastal h2, .theme-coastal h3 { color: var(--color-heading); }
.theme-coastal .section--alt { background: var(--color-bg-alt); }
.theme-coastal .section-head { margin-inline: auto; text-align: center; }
.theme-coastal .section-head--split { text-align: left; }
.theme-coastal .section-head__lede { margin-inline: auto; }
.theme-coastal .contact .section-head { margin-inline: 0; text-align: left; }
.theme-coastal .site-nav__brand-street { color: #4d6180; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; font-size: 1rem; }
.theme-coastal .site-nav__links a[aria-current] { border-bottom-width: 2px; }

/* hero: panoramic photograph with a dark caption band, then the address and calls to action */
.hero--coastal { margin-top: var(--nav-height); position: relative; }
.hero--coastal .hero__media { position: relative; height: clamp(380px, 70vh, 760px); overflow: hidden; background: var(--color-bg-alt); }
.hero--coastal .hero__media > :is(img, video, .hero__placeholder), .hero--coastal .hero__media picture > img { width: 100%; height: 100%; object-fit: cover; }
.hero--coastal .hero__band { position: absolute; left: 0; bottom: clamp(1rem, 4vh, 2.5rem); max-width: min(760px, 94vw); padding: clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.5rem, 4vw, 3rem); background: linear-gradient(to right, rgba(20, 24, 26, 0.72), rgba(20, 24, 26, 0.52)); color: #fff; }
.hero--coastal .hero__title { margin: 0; color: #fff; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.3rem); font-weight: 200; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.08; }
.hero--coastal .hero__suburb { margin: 0.6rem 0 0; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.78rem; color: rgba(255, 255, 255, 0.88); }
.hero--coastal .status-banner { margin-top: 1rem; background: #1d7f6d; color: #ffffff; }
/* the address and the two calls to action in a white bar under the photograph */
.hero--coastal .hero__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding-block: 1.25rem; }
.hero--coastal .hero__address { margin: 0; font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); }
.hero--coastal .hero__actions { margin: 0; }
@media (max-width: 699px) {
  .hero--coastal .hero__media { height: auto; overflow: visible; }
  .hero--coastal .hero__media > :is(img, video, .hero__placeholder), .hero--coastal .hero__media picture > img { display: block; height: auto; aspect-ratio: 4 / 5; max-height: 70svh; }
  .hero--coastal .hero__band { position: static; max-width: none; background: #1e2225; }
  .hero--coastal .hero__actions .btn { flex: 1 1 auto; }
}

.theme-coastal .intro__title, .theme-coastal .story-block__title { font-weight: 300; text-transform: uppercase; letter-spacing: 0.06em; }
.theme-coastal .pull-quote { border-left: 0; padding: 0; color: var(--color-heading); font-family: var(--font-body); font-style: italic; }
.theme-coastal :is(.stat__value, .highlight__value) { font-weight: 300; color: var(--color-heading); }
.theme-coastal .chip { border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }
.theme-coastal .chip.is-active, .theme-coastal .chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
.theme-coastal .site-footer__address { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; color: #1e2225; }