/* The About page's own passages, in page order. Served on /about only, after styles.css. */

/* ---------- welcome (data-section="opening") ----------
   Her own welcome in words, and the welcome desk that says it. */
.ab-open{padding-block:clamp(32px, 5vw, 72px) clamp(48px, 6vw, 110px)}
.ab-open h1{font-size:clamp(34px, 9vw, 42px);line-height:1.06;letter-spacing:-.018em}
.ab-open-words .lede{margin-top:14px}
.ab-welcome{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:16px;line-height:1.55;color:var(--mist);max-width:32em}
.ab-open-photo{margin-top:26px}
.ab-open-photo .photo{aspect-ratio:4/5}
@media (min-width:900px){
  .ab-open-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .ab-open-words{grid-column:1 / 7}
  .ab-open h1{font-size:clamp(42px, 20px + 2.3vw, 60px);line-height:1.02}
  .ab-open-words .lede{margin-top:clamp(16px, 1.4vw, 24px);max-width:30em}
  .ab-open-photo{grid-column:8 / 13;margin:0}
  .ab-open-photo .photo{height:clamp(420px, 42vw, 680px);aspect-ratio:auto}
}

/* ---------- what guests say about us (data-section="guests") ---------- */
.ab-said{background:var(--pool);padding-block:clamp(56px, 7vw, 120px)}
.ab-said-grid{display:grid;gap:16px}
.ab-said-grid h2{margin-bottom:10px}
.ab-said .review{height:100%}
@media (min-width:900px){
  .ab-said-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:24px;align-items:stretch}
  .ab-said-grid h2{grid-column:1 / -1;margin:0}
  .ab-said-a{grid-column:1 / 7}
  .ab-said-b{grid-column:7 / 13}
  .ab-said-more{grid-column:1 / -1}
}

/* ---------- the dates: each way's own page, after the check-in line ---------- */
.ab-way-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0}