/* ==========================================================================
   ABOUT
   Owner story and the portfolio facts.
   ========================================================================== */

/* ==========================================================================
   ABOUT — page-specific CSS
   The page hero, breadcrumbs, opening band, "worth knowing" grid, FAQ
   accordion, closing CTA, header and footer all come from the shared
   stylesheet.
     [CSS] this block -> assets/css/about.css
   One rule below is an exception and is filed as shared: .cta__alt, the
   secondary link beside the closing button, was written here but the Contact
   and Vacation Rentals pages use the same link. It was styling nothing on
   those two pages — a default blue underline on a photograph — so the split
   files it into components.css, where all three pages pick it up. 
   ========================================================================== */
/* --- Owner story: two consecutive bio paragraphs -------------------------- */
/* host__bio's own top margin is sized for the gap under the headline, which is
   far too much air between two paragraphs of the same voice. */
.host__bio + .host__bio{margin-top:clamp(.9rem,1.6vw,1.5rem)}
/* --- Portfolio facts ------------------------------------------------------ */
/* A spec list, deliberately not a card grid and not a table: these are
   label/value pairs, a <dl> says so, and two columns of hairline rows read
   like a printed guide rather than a dashboard. */
.facts{
  margin:clamp(1.75rem,3.1vw,3.125rem) 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.75rem,4vw,4.5rem);
}
.facts__row{
  display:grid;
  grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
  gap:clamp(.5rem,1.2vw,1.25rem);
  align-items:baseline;
  padding:clamp(.7rem,1.3vw,1.05rem) 0;
  border-top:1px solid var(--line);
}
.facts__row:nth-child(-n+2){border-top:0;padding-top:0}
.facts dt{
  margin:0;
  font-size:clamp(.875rem,1.02vw,1rem);
  line-height:1.45;
  color:var(--text-soft);
}
.facts dd{
  margin:0;
  font-size:clamp(.9375rem,1.05vw,1.0625rem);
  line-height:1.5;
  color:var(--ink);
}
.facts dd b{font-weight:500}
/* The "see all thirteen homes" link under the list. Its own paragraph, so
   the gap is set here rather than on the link. */
.facts__more{margin:clamp(1.75rem,3vw,3rem) 0 0}
@media (max-width:860px){
.facts{grid-template-columns:1fr}
.facts__row:nth-child(2){
    border-top:1px solid var(--line);
    padding-top:clamp(.7rem,1.3vw,1.05rem);
  }
}
@media (max-width:460px){
.facts__row{grid-template-columns:1fr;gap:.15rem}
}