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

/* ---------- who we are (data-section="opening") ----------
   Our names large at the left and the red stained-glass front door at the right, the photograph that says "come in":
   a 2,560 file at its own 4:3 that runs off the screen's right edge from 900px. On a phone the words come first, then
   the door full width. */
.ab-open{padding-block:clamp(32px, 5vw, 72px) clamp(40px, 6vw, 110px)}
.ab-open h1{font-size:clamp(38px, 10vw, 46px);line-height:1.04;letter-spacing:-.018em}
.ab-open-words .lede{margin-top:14px}
.ab-open-photo{margin:26px calc(-1*var(--pad)) 0}
.ab-open-photo .photo{aspect-ratio:4/3}
.ab-open-photo .photo img{object-position:50% 45%}
.ab-open-photo figcaption{padding-inline:var(--pad)}
@media (min-width:900px){
  .ab-open-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
  .ab-open-words{grid-column:1 / 6}
  .ab-open h1{font-size:clamp(52px, 22px + 3.4vw, 104px);line-height:1}
  .ab-open-words .lede{margin-top:clamp(18px, 1.6vw, 30px)}
  .ab-open-photo{grid-column:6 / 13;margin:0 calc(-1*var(--edge)) 0 0}
  .ab-open-photo figcaption{padding:0}
}

/* ---------- who to ask (data-section="the-lodge") ----------
   The page's one pine band: the lodge in one large line, then what we made for a guest looking before they come. Quiet
   words on pine are lichen. */
.ab-host{background:var(--pine);color:var(--white);padding-block:clamp(56px, 7vw, 120px)}
.ab-host-grid,.ab-who-grid,.ab-sib-grid,.ab-ask-grid{display:grid;gap:18px}
.ab-big{font-family:var(--display);font-size:clamp(28px, 7.4vw, 38px);line-height:1.14;text-wrap:balance}
.ab-host-line{margin-top:20px;color:var(--lichen);max-width:36em}
.ab-host-line a,.ab-host .more{color:var(--white)}
.ab-links{display:flex;flex-wrap:wrap;gap:6px 24px;margin:10px 0 0}
.ab-host .ab-links{margin-top:22px}
@media (min-width:900px){
  .ab-host-grid,.ab-who-grid,.ab-sib-grid,.ab-ask-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .ab-host h2,.ab-who h2,.ab-sib h2,.ab-ask h2{grid-column:1 / 5}
  .ab-host-words,.ab-ask-words,.ab-people,.ab-story,.ab-cards{grid-column:5 / 13}
  .ab-big{font-size:clamp(36px, 18px + 1.7vw, 54px);max-width:18em}
}

/* ---------- passages that wait for the record (host, business story, team) ---------- */
.ab-who{padding-block:clamp(44px, 5.5vw, 96px);border-top:1px solid var(--line)}
.ab-people,.ab-cards{display:grid;gap:22px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ab-people .photo{aspect-ratio:4/5;margin-bottom:10px}
.ab-people figcaption{display:grid;gap:2px;font-size:15px;margin-top:0}
.ab-role{color:var(--moss)}
.ab-story{display:grid;gap:14px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;color:var(--moss);max-width:40em}
.ab-story p{margin:0}

/* ---------- our other cabin (data-section="our-other-cabin"): one card for each sister house, all the same size ---------- */
.ab-sib{padding-block:clamp(44px, 5.5vw, 96px);border-top:1px solid var(--line)}
.ab-cards .photo{aspect-ratio:4/3;margin-bottom:10px;background:var(--birch)}
.ab-cards h3{font-size:clamp(19px, 17px + .4vw, 22px)}
.ab-cards h3 a{text-decoration:none}
.ab-cards h3 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ab-cards p{margin:4px 0 0;font-size:15px;color:var(--moss)}
@media (min-width:900px){ .ab-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- ask us (data-section="ask-us") ---------- */
.ab-ask{padding-block:clamp(48px, 6vw, 104px) clamp(64px, 8vw, 140px);border-top:1px solid var(--line)}
.ab-ask-words .lede{margin-top:0}

/* On a phone the opening photograph carries no caption under it (the render's phone-opening-caption rule, from Michael's
   23 Oct 2026 correction on this site; the caption shows from 900px). */
@media (max-width:899px){ .ab-open-photo figcaption{display:none} }
/* the owner's own picture of the lodge's front above the words on the pine band (27 Oct 2026). */
.ab-host-photo .photo{aspect-ratio:16/10;background:rgba(255,255,255,.06)}
.ab-host-photo figcaption{color:var(--lichen)}
@media (min-width:900px){ .ab-host-photo{grid-column:5 / 13;grid-row:1} .ab-host-words{grid-row:2} .ab-host h2{grid-row:1 / 3} }