/* Mast Innovations — about page additions. Shared shell lives in
   style.css; every value here traces to design-system.md. */

/* Native scroll on this page: the shared shell's smooth-scroll animates
   scripted and keyboard scrolls, which reads as a floaty trail behind the
   wheel (mechanism 6: scrubbed things track 1:1). Loaded after style.css,
   so this wins. */
html{scroll-behavior:auto}

/* Luminous hero (§7): same rework as portfolio.css — the ink ramp
   protects the text block, not the frame. Alpha 0 at 120px above the
   first text line (top:-24px against the 96px container padding),
   0.44 at 56px above, 0.88 at the line, held to the bottom. From
   1200px up the ramp fades out right of the text column (full to 53%,
   gone by 76%) so the room reads at every height. */
.hero .container{padding-bottom:64px}
.hero h1{max-width:13ch}
.hero .container::before{top:-24px;
  background:linear-gradient(180deg,rgba(27,25,22,0) 0px,rgba(27,25,22,0.44) 64px,rgba(27,25,22,0.88) 120px,rgba(27,25,22,0.88) 100%)}
@media (min-width:1200px){
  .hero .container::before{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 53%,rgba(0,0,0,0) 76%);
    mask-image:linear-gradient(90deg,#000 0,#000 53%,rgba(0,0,0,0) 76%)}
}
@media (max-width:900px){
  /* Deeper text blocks than the home hero: open the window so the
     photograph keeps the top of the frame (S7 ceiling). */
  .hero{height:min(92vh,780px)}
}

/* Origin story: text + photo, 24px gap (§3). */
.origin-grid{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start}
.origin-copy .tick-eyebrow{margin-bottom:16px}
.origin-copy .h2{margin-bottom:24px;max-width:18ch}
.origin-copy p{max-width:45ch}
.origin-copy p + p{margin-top:16px}
.origin-copy .lead{margin-bottom:32px}
.origin-photo{margin:0}
.origin-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
/* Quiet 13px annotation style (§2): sentence case, tracking 0.04em. */
.annot{display:block;margin-top:16px;font-size:13px;line-height:1.4;
  letter-spacing:0.04em;color:var(--muted)}

/* People cards: photo 4:5, name h3, role small, short bio. */
.people-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.people-grid.three{grid-template-columns:repeat(3,1fr)}
.person{margin:0}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.person .h3{margin-top:16px}
.person .role{display:block;margin-top:8px;color:var(--muted)}
.person p{margin-top:8px;max-width:45ch}

/* Installation team section sits on the deep parchment band. */
.team{background:var(--parchment-deep)}

/* Values: six themes as a quiet two-column list. */
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.value{border-top:1px solid var(--line);padding-top:24px}
.value .h3{margin-bottom:8px}
.value p{max-width:45ch}

@media (max-width:900px){
  .origin-grid{grid-template-columns:1fr}
  .people-grid,.people-grid.three{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
}