/* A little more breathing room in the existing Urbanist headlines. */
h1,
h2,
.arrival-story h1,
.home-arrival .arrival-story h1,
.welcome-content .arrival-story h1,
.choice-panel h2,
.home-arrival .choice-panel h2,
.service-hero h1,
.section h2,
.destinations h2,
.booking-heading h2,
.quiz-aside h1,
#quiz-stage h2 {
  letter-spacing: .012em;
}

/* Handheld reading scale. Deliberately overrides component-level tiny text,
   including inline helper text, without changing desktop typography or icons. */
@media (max-width: 760px) {
  body { font-size: 17px; line-height: 1.7; }
  body p:not(.eyebrow):not(.question-count):not(.panel-note),
  body main li:not(.island-program > li) {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
  body :is(.button, .pill, .text-link, .hero-secondary, .group-link,
    .service-learn-more, .welcome-start, .welcome-back, .choice-bubbles a,
    .services-cta, .quiz-secondary, .quiz-exit, .answer-option,
    .travel-date-field, .custom-budget-field label, .inquiry-consent,
    .program-tags a, .cta-email, summary, nav, nav a, .footer-contact) {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  body :is(.answer-fields > input, .answer-fields > textarea,
    .travel-date-field input, .custom-budget-field input) {
    font-size: 17px !important;
    line-height: 1.5;
  }
  body :is(.eyebrow, .question-count, .panel-note, .panel-top p, .step-count,
    .progress-label, .progress-label span, .service-number, .number,
    .hero-caption, .hero-bottom, .island-strip > span, .arrival-footer > span,
    .photo-credit, .brand-credentials, .brand-credentials span,
    .aside-bottom small, .aside-bottom > span, .draft-notice, figcaption,
    .image-context, .island-availability, .island-source, .copy-status,
    .share-note, .answer-error, .group-swipe-hint, .quiz-footnote,
    .booking-help, .footer-bottom, footer small) {
    font-size: 14px !important;
    line-height: 1.65 !important;
    letter-spacing: .035em;
  }
  body .travel-date-field input { min-height: 60px; height: auto; }
  body .review-row h3 { font-size: 16px; line-height: 1.5; }
  body :is(.brand span, .arrival-brand span, .quiz-header .brand span) {
    font-size: 10px !important;
    line-height: 1.5;
    letter-spacing: .08em;
    white-space: normal;
  }
  body :is(.choice-bubbles a, .button, .pill, .welcome-start,
    .services-cta, .service-learn-more, .quiz-secondary) {
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }
  body :is(.choice-bubbles, .service-links, .date-range-fields) {
    grid-template-columns: minmax(0, 1fr);
  }
  body .service-links > a { gap: 12px; }
  body :is(.arrival-story, .choice-panel, .section-head > p,
    .quiz-aside, .service-header nav, .footer-contact) { min-width: 0; }
  body :is(.arrival-header, .service-header, .quiz-header) {
    height: auto;
    flex-wrap: wrap;
  }
  body .quiz-header .quiz-exit { max-width: 100%; }
  body .group-choice-summary { flex-wrap: wrap; gap: 10px; font-size: 16px; }
  body .progress-label { flex-wrap: wrap; gap: 6px 12px; }
  body .review-row { flex-wrap: wrap; }
  body .hero { height: auto; min-height: 0; padding-bottom: 28px; }
  body .hero-content { padding-top: 56px; padding-bottom: 28px; }
  body .hero-bottom {
    position: relative; left: auto; right: auto; bottom: auto;
    margin: 0 7%; flex-wrap: wrap; gap: 16px;
  }
  body .text-link { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
  body .hero-secondary { display: inline-flex; margin: 16px 0 0; min-height: 44px; align-items: center; }
  body .service-footer, body .footer-top { gap: 28px; }
  body .footer-bottom { flex-wrap: wrap; gap: 14px; }
  body :is(p, figcaption, .footer-contact a, .cta-email, h1, h2, h3) {
    overflow-wrap: anywhere;
  }
  /* The policy pages use the simple header rather than the menu component. */
  body > header:not([class]):not(:has(#nav)) {
    height: auto; padding: 24px 6%; flex-direction: column; gap: 20px;
  }
  body > header:not([class]):not(:has(#nav)) nav { flex-wrap: wrap; justify-content: center; gap: 18px; }
}