/* about.html page-specific styles. Tokens only, no raw sizes/colors. */

/* assemble interlude: four short step captions scrubbed across the pinned
   travel, same shape as the homepage process chapter */
.interlude--about{ --ih:220vh }
@media (prefers-reduced-motion: reduce){ .interlude--about{ --ih:100vh } }

/* page head: mono label + h1 + lead, first viewport, no piece interlude here (piece is a
   quiet frame behind it), letter tone starts immediately below */
.about-head{
  padding:calc(var(--nav-h) + var(--space-8)) 0 var(--space-7);
}
.about-head .lbl{ margin-bottom:var(--space-4) }
.about-head h1{ margin-top:var(--space-2) }
.about-head .lead{ margin-top:var(--space-5) }

/* the letter: a narrower measure than the default column so it reads like a
   first-person letter rather than a marketing block */
.about-letter .about-measure{ max-width:34rem }
.about-letter .lbl{ display:block; margin-bottom:var(--space-3) }
.about-letter h2{ margin-bottom:var(--space-5) }
.about-letter p{ max-width:none }
.about-letter p + p{ margin-top:var(--space-4) }

/* facts ledger reusing the shared dl pattern from the home page tokens,
   scoped so it never leaks into other pages */
.about-facts{
  margin:var(--space-6) 0 0;
  border-bottom:1px solid var(--hair);
}
.about-facts > div{
  border-top:1px solid var(--hair);
  padding:var(--space-5) 0;
}
.about-facts dt{ margin:0 }
.about-facts .fig{
  display:block;
  font-size:var(--step-2);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--brass);
}
.about-facts .term{
  display:block;
  margin-top:var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--step--1);
  line-height:1.45;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.about-facts dd{
  margin:var(--space-2) 0 0;
  color:var(--paper);
  max-width:var(--measure);
}
@media (min-width:640px){
  .about-facts > div{
    display:grid;
    grid-template-columns:14rem 1fr;
    column-gap:var(--space-6);
    align-items:start;
  }
  .about-facts dd{ margin-top:var(--space-1) }
}

.about-who{
  margin-top:var(--space-6);
  color:var(--muted);
}

/* full-bleed real photo band between the facts and the FAQ, matching v3's
   band-photo without inventing a new visual language */
.about-photo{
  position:relative;
  z-index:1;
  margin:0;
  line-height:0;
}
.about-photo img{
  width:100%;
  height:auto;
  max-height:60vh;
  object-fit:cover;
  display:block;
}

.chapter-cta{
  text-align:left;
  border-top:1px solid var(--hair);
}
.chapter-cta h2{ max-width:var(--measure) }
.chapter-cta .lead{ margin-top:var(--space-4) }
.chapter-cta .btn{ margin-top:var(--space-6) }

@media (max-width:640px){
  .about-head{ padding-top:calc(var(--nav-h) + var(--space-6)) }
}