/* Shared typography and small-screen refinements. The font is served locally. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
}

:root {
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: var(--font);
  --serif: var(--font);
}

body {
  font-size: 1rem;
  line-height: 1.7;
  font-optical-sizing: auto;
}

h1, h2, h3 {
  font-weight: 550;
  letter-spacing: -.035em;
  line-height: 1.16;
}

h1, .page-intro h1, .hero-copy h1 {
  font-size: clamp(2.75rem, 4.5vw, 4rem);
}

h2, .apartment-description h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
}

h3, .card-copy h3, .travel-grid h3 {
  font-size: 1.75rem;
}

.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
}

.topline {
  font-size: .8125rem;
}

.topline > span {
  font-size: .8125rem;
  font-style: normal;
}

.header-inner {
  min-height: 94px;
}

.brand-copy strong {
  font-size: 1.875rem;
  font-weight: 600;
}

.brand-copy small {
  font-size: .625rem;
  letter-spacing: .08em;
}

.main-nav {
  gap: 25px;
  font-size: .9375rem;
}

.button, .hero-actions .text-link {
  font-size: .9375rem;
  font-weight: 600;
}

.button-small {
  font-size: .875rem;
  gap: 16px;
}

.text-link {
  font-size: .9375rem;
  min-height: 36px;
}

.hero-copy h1 {
  line-height: 1.1;
}

.hero-copy .hero-heading {
  font-size: clamp(1.75rem, 3.8vw, 3.25rem);
  line-height: 1.18;
}

.hero-lead {
  font-size: 1.0625rem;
  max-width: 365px;
}

.hero-note, .island-number > span {
  font-size: .9375rem;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 0;
}

.hero-image::after {
  content: none;
}

.highlights {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: .875rem;
}

.highlights > div {
  flex: 0 0 auto;
  gap: 10px;
  white-space: nowrap;
}

.highlights > div > span {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
}

.floorplan-thumb {
  background: #fff;
}

.floorplan-thumb img {
  object-fit: contain;
  padding: 4px;
}

.section {
  padding-block: 80px;
}

.welcome-section {
  padding-bottom: 40px;
}

.large-copy {
  font-size: 1.125rem;
}

.section-heading > p {
  font-size: 1rem;
}

.apartment-section .section-heading {
  display: block;
}

.apartment-section .section-heading > p {
  max-width: 60ch;
  margin: 16px 0 0;
  line-height: 1.7;
}

.apartment-meta {
  font-size: .875rem;
  line-height: 1.6;
  font-weight: 500;
  color: #4e6757;
}

.apartment-meta > span {
  padding-inline: 5px;
}

.card-copy .text-link {
  font-size: .875rem;
  gap: 12px;
}

.apartment-card {
  display: flex;
  flex-direction: column;
}

.card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 20px;
}

.card-image {
  flex-shrink: 0;
}

.card-summary {
  font-size: .9375rem;
  line-height: 1.6;
  margin: 0 0 12px;
}

.card-copy .text-link {
  margin-top: auto;
}

.apartment-lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 24px;
}

.apartment-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0 0 24px;
  padding-block: 20px;
  border-block: 1px solid var(--line);
}

.apartment-facts dt {
  color: var(--muted);
  font-size: .8125rem;
  margin-bottom: 3px;
}

.apartment-facts dd {
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

.booking-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terms-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 24px;
  font-size: .9375rem;
}

.terms-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--green);
}

.legal-copy h2[id] {
  scroll-margin-top: 120px;
}

.island-number {
  font-size: 7rem;
  font-weight: 500;
}

.stay-inner h2 {
  font-size: 2rem;
}

.stay-actions .text-link {
  font-size: .875rem;
}

footer {
  font-size: .9375rem;
}

.footer-brand {
  font-size: 2.25rem;
  font-weight: 550;
}

.footer-brand > span, .footer-grid h2 {
  font-size: .75rem;
  letter-spacing: .09em;
}

.footer-bottom {
  font-size: .8125rem;
}

.footer-grid > div > a:not(.footer-brand) {
  padding-block: 3px;
}

.preview-notice {
  font-size: .6875rem;
}

.page-intro > .container > p:not(.eyebrow) {
  font-size: 1.0625rem;
}

.apartment-jump {
  gap: 8px 24px;
  font-size: .9375rem;
}

.apartment-jump > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.apartment-main-photo > span, .booking-note {
  font-size: .8125rem;
}

.apartment-body, .facilities-grid p, .travel-grid p,
.island-grid p:not(.eyebrow), .legal-copy {
  font-size: 1rem;
  line-height: 1.75;
}

.facilities-grid strong {
  font-weight: 600;
}

.walking-list strong {
  font-size: 1.625rem;
  font-weight: 550;
}

.walking-list span, .travel-index, .travel-grid .text-link {
  font-size: .9375rem;
}

.contact-detail > span {
  font-size: .8125rem;
  letter-spacing: .03em;
  text-transform: none;
}

.contact-detail > a:not(.text-link) {
  font-size: 1.5rem;
  font-weight: 500;
}

.contact-detail > .email-address {
  font-size: 1.125rem !important;
}

.contact-detail p, .contact-detail .text-link, .booking-panel p,
.form-explanation, .form-status, .gallery-dialog figcaption {
  font-size: .9375rem;
}

.enquiry-panel h2, .booking-panel h3, .legal-copy h2 {
  font-size: 1.875rem;
}

.enquiry-panel label {
  font-size: .875rem;
}

.enquiry-panel input, .enquiry-panel textarea {
  font-size: 1rem;
}

.gallery-dialog button {
  width: 44px;
  height: 44px;
}

#gallery-count {
  font-size: .875rem;
}

@media (max-width: 1100px) {
  .highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
  }
}

@media (max-width: 1000px) {
  .header-inner {
    min-height: 86px;
    gap: 16px;
  }

  .menu-toggle {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    padding: 9px 13px;
    min-height: 44px;
    background: transparent;
    color: var(--green);
    font-size: .9375rem;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 10px 20px 24px;
    box-shadow: 0 15px 20px #0001;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav > a[aria-current="page"]::after {
    display: none;
  }

  .main-nav > a[aria-current="page"] {
    font-weight: 650;
  }

  .main-nav > a:not(.button) {
    font-size: 1rem;
    min-height: 44px;
  }

  .main-nav > .button {
    margin-top: 10px;
  }
}

@media (max-width: 800px) {
  .hero-copy .hero-heading {
    font-size: clamp(1.75rem, 8vw, 3.25rem);
  }

  .section {
    padding-block: 56px;
  }

  .welcome-section {
    padding-bottom: 24px;
  }

  .hero-copy {
    padding-block: 40px;
  }

  .hero-copy h1 {
    font-size: clamp(2.75rem, 6vw, 3.5rem);
  }

  .hero-lead {
    font-size: 1rem;
  }

  .highlights {
    font-size: .8125rem;
  }

  .card-copy h3 {
    font-size: 1.625rem;
  }

  .card-copy .text-link {
    font-size: .875rem;
    gap: 8px;
    min-height: 44px;
  }

  .apartment-meta {
    font-size: .8125rem;
  }

  .island-grid h2 {
    font-size: 2rem;
  }

  .island-number {
    font-size: 5.5rem;
  }

  .stay-inner h2 {
    font-size: 1.875rem;
  }

  .page-intro h1 {
    font-size: 2.75rem;
  }
}

@media (max-width: 500px) {
  .header-inner {
    min-height: 78px;
  }

  .brand {
    gap: 8px;
  }

  .brand-copy strong {
    font-size: 1.625rem;
  }

  .brand-copy small {
    font-size: .5625rem;
  }

  .brand-sun {
    font-size: 2.25rem;
  }

  .topline, .topline > span {
    font-size: .75rem;
  }

  .hero-actions .button {
    padding-inline: 18px;
    gap: 16px;
  }

  .hero-actions .text-link {
    font-size: .9375rem;
  }

  .highlights {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-block: 20px;
    font-size: .875rem;
  }

  .highlights > div {
    gap: 12px;
  }

  .apartment-grid {
    gap: 28px 18px;
  }

  .card-copy h3 {
    font-size: 1.5rem;
  }

  .stay-actions .text-link, .footer-bottom {
    font-size: .875rem;
  }

  .preview-notice {
    font-size: .6875rem;
  }
}