/* ==========================================================================
   DIA BONITO · island.css
   The Island: narrative text now lives inside full-bleed .panel sections
   (see style.css). These are just the type styles for that copy, still
   scoped under isl-section-* so nothing else on the page has to change.
   Hero, notes grid, and closing CTA come from style.css.
   ========================================================================== */

.isl-section-title {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(28px, 4.8vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bone);
  max-width: 780px;
  margin: 0 auto;
  text-shadow:
    0 1px 3px rgba(10, 19, 16, 0.9),
    0 2px 20px rgba(10, 19, 16, 0.7),
    0 4px 40px rgba(10, 19, 16, 0.5);
}

.isl-section-rule { margin-top: 36px; margin-bottom: 44px; }

.isl-section-body {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.8;
  color: var(--bone-2);
  max-width: 660px;
  margin: 0 auto 24px;
  text-align: left;
}

.isl-section-body:last-child { margin-bottom: 0; }


/* FAQ: the one-line answer that sits between the question and the full answer */
.faq-short {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.4;
  color: var(--bone-2);
  max-width: 640px;
  margin: 14px auto 0;
}

/* FAQ: header above the two-column notes grid, matching the Stay map
   header pattern (css/stay.css .map-eyebrow / .map-title / .map-lede) so
   the switch from photo panels to type reads as a deliberate section,
   not an accident. */
.isl-notes-head {
  max-width: 680px;
  margin: 0 auto clamp(56px, 8vw, 88px);
  padding: 0 var(--gutter);
  text-align: center;
}


.isl-notes-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.1;
  color: var(--bone);
  margin: 0 0 18px;
}

.isl-notes-lede {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--bone-2);
  margin: 0;
}

.isl-notes-lede a {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.isl-notes-lede a:hover {
  color: var(--lagoon);
}

/* The prototype scrim, headline shadow, and backing card that were scoped
   to just "island-why-here" are now the shared defaults in style.css
   (.panel-center .panel-scrim, .isl-section-title, .panel-backing), so
   every panel on this page and its sibling pages gets the same treatment
   without a one-off override. */