/* Manrope + Caveat, matching the client's reference website.
   Clean, confident headings with handwritten accents on subheadings. */
:root { --sans: "Manrope", Arial, sans-serif; --heading: "Manrope", Arial, sans-serif; --script: "Caveat", "Segoe Print", cursive; }
body { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--heading); font-weight: 750; letter-spacing: -.045em; line-height: 1.15; }
h1 em, h2 em, h3 em, .about-inset em { font-family: var(--script); font-style: normal; font-weight: 400; letter-spacing: -.025em; }
h2 em { font-size: 1.2em; line-height: .95; }
.script-kicker { display: block; color: var(--rust); font: 400 58px/1.05 var(--script); letter-spacing: -.02em; margin-bottom: 12px; }
.script-kicker.light { color: #e9c7a4; }
.button, .text-button { font-size: 13px; font-weight: 650; letter-spacing: 0; }
.button.ivory { font-weight: 700; }
.eyebrow { font-weight: 750; font-size: 11px; letter-spacing: .16em; }
.site-header nav button { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.hero-coast .site-header nav button { font-size: 11px; font-weight: 700; }
.section-heading h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.15; }
.section-heading>p, .section-aside { font-size: 15px; line-height: 1.85; }
.section-heading>p { max-width: 620px; margin-left: auto; margin-right: auto; }
.section-title-row { gap: 45px; }
.section-title-row .section-heading { flex: 1; }
.section-aside { max-width: 330px; }

/* Three hero treatments, each with its own scale and rhythm. */
.hero-tidal .hero-copy { top: 25%; }
.hero-tidal h1 { font-size: clamp(66px, 7.4vw, 114px); line-height: .98; }
.hero-tidal h1 em { font-size: 1.65em; line-height: 1.05; letter-spacing: -.025em; }
.hero-tidal h1 span { font-size: .66em; margin-top: 5px; font-weight: 750; letter-spacing: -.05em; }
.hero-kicker { font-weight: 600; margin: 28px 0; }
.tidal-bottom>span { font: 500 13px/1.5 var(--sans); letter-spacing: .04em; }
.follow-tide>em { font: 400 29px/1.1 var(--script); letter-spacing: 0; }
.hero-coast h1 { font-size: clamp(40px, 4.5vw, 68px); font-weight: 750; line-height: 1.12; }
.hero-coast h1 em { font-size: 1.27em; white-space: nowrap; }
.hero-coast .hero-copy { top: 38%; }
.hero-coast .button { font-size: 13px; }
.fold-copy { padding-top: 45px; }
.fold-copy h1 { font-size: clamp(66px, 7.1vw, 104px); line-height: .98; letter-spacing: -.05em; }
.fold-copy h1 em { display: inline-block; font-size: 1.3em; line-height: .85; letter-spacing: -.025em; color: var(--rust); }
.fold-copy>p { font-family: var(--sans); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.65; font-weight: 450; letter-spacing: -.02em; margin: 26px 0; }
.fold-copy .button { font-size: 14px; font-weight: 650; }
.fold-tags { margin-top: 34px; }
.fold-tags button { font-size: 12px; font-weight: 600; letter-spacing: .04em; }

/* Destination, journey and journal cards. */
.destination-card h3 { font-size: clamp(23px, 2.4vw, 34px); line-height: 1.12; }
.destination-card p { font-size: 12px; }
.nature-caption h3 { font-size: clamp(22px, 2vw, 29px); font-weight: 750; letter-spacing: -.045em; padding-right: 24px; }
.nature-caption>span { font-size: 9px; letter-spacing: .12em; }
.coast-callout h3 { font: 400 clamp(35px, 3.5vw, 50px)/1.12 var(--script); letter-spacing: -.02em; }
.package-copy h3 { font-size: 27px; line-height: 1.25; }
.package-copy>p { font-size: 14px; line-height: 1.8; }
.package-stops { font-size: 11px; line-height: 1.7; }
.package-filters button { font-size: 13px; font-weight: 650; }
.journal-card h3 { font-size: 25px; line-height: 1.3; }
.journal-meta { font-size: 10px; letter-spacing: .07em; }
.journal-note { font: 400 27px/1.2 var(--script); letter-spacing: 0; }
.journal-card .text-button { font-size: 13px; }

/* Map labels stay compact and easy to read. */
.map-intro h2 { font-size: clamp(32px, 3.2vw, 47px); line-height: 1.15; }
.map-intro>p { font-family: var(--sans); font-size: 16px; line-height: 1.8; letter-spacing: -.01em; }
.route-select-label { font-size: 10px; font-weight: 700; }
.select-wrap select { font-size: 13px; }
.route-stops strong { font: 700 16px/1.4 var(--sans); }
.route-stops small { font-size: 10px; letter-spacing: 0; }
.map-intro .button { font-size: 12px; }
.map-intro .map-note { font-size: 10px; }
.map-floating-label>span { font: 600 25px/1.2 var(--sans); letter-spacing: .12em; }
.map-floating-label>small { font: 400 27px/1.1 var(--script); }
.journey-pin>span { font: 650 12px var(--sans); }
.place-label { font: 600 12px/1.4 var(--sans); }
.map-popup h3 { font-size: 23px; }
.map-popup p { font-size: 12px; }
.ribbon-title h3 { font-size: 27px; line-height: 1.2; }
.route-ribbon>button>span { font: 650 17px/1.2 var(--sans); }

/* Warm introductions with comfortable text beneath. */
.about-copy>h2 { font-size: clamp(40px, 4.2vw, 60px); margin: 14px 0 26px; }
.about-copy h2 em, .footer-invitation h2 em { font-family: var(--heading); font-size: 1em; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.about-copy>p { font-size: 15px; line-height: 1.85; }
.about-copy>p.large-copy { font: 650 21px/1.5 var(--sans); }
.about-values>span { font-size: 13px; }
.about-copy>.button { font-size: 13px; }
.about-inset>p { font: 650 29px/1.15 var(--heading); letter-spacing: -.04em; }
.about-inset em { font-size: 1.35em; }
.reviews h2 { font-size: clamp(34px, 3.9vw, 56px); }
.reviews>p { font-size: 15px; line-height: 1.85; }
.footer-invitation h2 { font-size: clamp(40px, 4.6vw, 66px); margin: 18px 0 30px; }
.footer-invitation .button { font-size: 13px; }
.footer-main p, .footer-main>div>button { font-size: 13px; }
.footer-main>div>.eyebrow { font-size: 10px; }
.footer-bottom, .footer-bottom button, .footer-bottom a { font-size: 10px; }

/* Collection and dialogs. */
.gallery-intro h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.1; }
.gallery-intro h1 em { font-size: 1.3em; }
.gallery-intro>p { font-size: 14px; }
.design-caption h2 { font-size: 24px; font-weight: 700; }
.design-caption p { font-size: 13px; }
.design-caption .eyebrow { font-size: 9px; }
.design-thumb { aspect-ratio: 16 / 9; }
.dialog-body h2 { font-size: 38px; line-height: 1.2; }
.dialog-body>p { font-size: 14px; line-height: 1.85; }
.dialog-body>p.large-copy { font: 650 22px/1.5 var(--sans); }
.dialog-itinerary h3 { font-size: 21px; }
.dialog-itinerary p { font-size: 13px; }
form label, form legend { font-size: 12px; font-weight: 600; }
form input:not([type=checkbox]), form select, form textarea { font-size: 14px; font-weight: 400; }
.interest-options span, .form-notice { font-size: 12px; font-weight: 400; }
.credit-list li>span { font-size: 13px; }
.credit-list li>a, .credits-body p { font-size: 12px; }

@media (max-width: 1100px) {
  .site-header nav button { font-size: 12px; }
  .nature-caption { padding: 18px; }
  .nature-caption h3 { font-size: 23px; }
  .nature-caption>span { font-size: 8px; letter-spacing: .08em; }
  .package-copy h3, .journal-card h3 { font-size: 23px; }
}
@media (max-width: 800px) {
  .section-title-row { display: block; }
  .section-aside { max-width: 100%; }
  .hero-tidal h1 { font-size: 76px; }
  .hero-coast h1 { font-size: 43px; }
  .fold-copy { padding-top: 85px; }
  .fold-copy h1 { font-size: 68px; }
  .fold-copy>p { font-size: 18px; }
  .fold-tags button { padding: 8px 15px; }
  .nature-caption h3 { font-size: 21px; padding-right: 0; }
  .map-intro h2 { font-size: 35px; }
  .map-intro>.route-stops { margin-top: 65px; }
  .map-intro>.button { width: 100%; padding: 12px; gap: 12px; }
  .footer-main { gap: 40px; }
}
@media (max-width: 560px) {
  .section-heading h2 { font-size: 33px; }
  .section-heading>p, .section-aside { font-size: 14px; }
  .script-kicker { font-size: 49px; }
  .hero-tidal .hero-copy { top: 31%; }
  .hero-tidal h1 { font-size: clamp(43px, 12.5vw, 66px); }
  .hero-tidal h1 em { font-size: 1.65em; }
  .hero-tidal h1 span { font-size: .82em; margin-top: 14px; }
  .hero-tidal .button { font-size: 12px; }
  .follow-tide>em { font-size: 25px; }
  .tidal-bottom>span { font-size: 10px; }
  .hero-coast .hero-copy { top: 35%; }
  .hero-coast h1 { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.08; }
  .hero-coast h1 em { display: block; font-size: 1.45em; margin-top: 5px; }
  .hero-layers { height: 1020px; }
  .fold-copy { padding-top: 30px; }
  .fold-copy h1 { font-size: clamp(54px, 13.8vw, 73px); line-height: .98; }
  .fold-copy h1 em { font-size: 1.35em; }
  .fold-copy>p { font-size: 17px; margin: 20px 0; line-height: 1.6; }
  .fold-copy .button { font-size: 13px; }
  .fold-tags { margin-top: 23px; gap: 8px; }
  .fold-tags button { padding: 7px 13px; font-size: 11px; }
  .fold-art { top: 535px; mask-image: linear-gradient(transparent, #000 15%); }
  .destination-card h3 { font-size: 21px; }
  .destination-card p { font-size: 10px; }
  .destination-card>div { left: 12px; right: 10px; }
  .coast-destinations .section-heading h2 { font-size: 33px; }
  .nature-caption h3 { font-size: 25px; padding-right: 23px; }
  .nature-caption>span { font-size: 9px; }
  .coast-callout h3 { font-size: 36px; }
  .package-copy h3, .journal-card h3 { font-size: 26px; }
  .package-filters { gap: 20px; }
  .package-filters button { font-size: 12px; }
  .map-intro h2 { font-size: 36px; }
  .map-intro>p { font-size: 15px; }
  .map-intro>.route-stops { margin-top: 15px; }
  .route-stops strong { font-size: 14px; }
  .route-stops small { font-size: 9px; }
  .route-stops button { gap: 8px; }
  .ribbon-title h3 { font-size: 26px; }
  .route-ribbon>button>span { font-size: 12px; }
  .about-copy>h2 { font-size: 41px; }
  .about-copy>p, .reviews>p { font-size: 14px; }
  .about-inset>p { font-size: 26px; }
  .reviews h2 { font-size: 32px; }
  .footer-invitation h2 { font-size: 39px; }
  .footer-main { gap: 30px 22px; }
  .gallery-intro h1 { font-size: 39px; }
  .gallery-intro>p, .design-caption p { font-size: 13px; }
  .design-caption h2 { font-size: 25px; }
  .dialog-body h2 { font-size: 31px; }
  .dialog-body>p { font-size: 14px; }
  form input:not([type=checkbox]), form select, form textarea { font-size: 16px; }
}
