/* ==========================================================
   SUAS — About page (about.html only)
   Loaded after theme.css and pages.css. Three bands:
   #about-suas (plain), #founder (mist + dark photo panel),
   #teams (plain), then the dark footer from layout.js.
   Base rules are the stacked (phone / tablet / short window)
   layout; the desktop block at the end splits bands 1 and 2
   and gives every band one window.
   ========================================================== */

/* Shared section heading size: the same variable and values as home.css
   (home.css is not loaded here, and theme.css / pages.css don't define it). */
:root{
  --h-section:clamp(32px,3.4vw,50px);
  --h-section-lh:1.04;
  /* missing-image placeholders: soft grey-brown, and a dark one for the founder panel */
  --about-ph:linear-gradient(135deg,color-mix(in srgb,var(--bg-alt) 62%,var(--text-muted)) 0%,var(--line) 100%);
  --about-ph-dark:linear-gradient(135deg,var(--dark-3) 0%,var(--dark-2) 55%,var(--dark) 100%);
}
@media (max-width:600px){
  :root{--h-section:32px}
}

/* ---------- Bands ---------- */
.about-band{position:relative;padding:clamp(56px,8vw,96px) 0;background:var(--bg)}
.about-band--mist{background:var(--bg-alt)}
.about-band+.about-band{border-top:1px solid var(--line)}   /* clear edge between bands */
.about-band--split{padding-bottom:0;container-type:inline-size}

/* ---------- Type ---------- */
.about-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.about-eyebrow::before{content:"";width:28px;height:2px;flex:none;background:var(--accent)}
.about-h{margin:0;font:800 var(--h-section)/var(--h-section-lh) var(--f-display);font-stretch:100%;
  text-transform:none;letter-spacing:-.015em;color:var(--txt)}   /* sentence case (pages.css uppercases main h1/h2) */
.about-h .accent{color:var(--accent-hover)}
.about-lede{margin:clamp(16px,2.4vh,24px) 0 0;max-width:52ch;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.65;color:var(--txt-2)}

/* ---------- Text column of the split bands (stacked: in the site container) ---------- */
.about-band__text{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- Photos ---------- */
.about-band__media{position:relative;overflow:hidden;margin-top:clamp(28px,5vw,44px);aspect-ratio:16/10;background:var(--about-ph)}
.about-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* A missing file renders as a broken image: its ::after (shown only for
   broken images) covers the icon and alt text with the placeholder. */
.about-img::after{content:"";position:absolute;inset:0;background:var(--about-ph)}
/* band 1: the photo fades into the band (vertical when stacked) */
.about-fade{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%)}
.about-fade .about-img{object-position:center 60%}

/* ---------- Band 2: founder photo panel with the quote over it ---------- */
.founder{display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
  padding:clamp(28px,5vw,48px) var(--pad);color:var(--text-on-dark);background:var(--about-ph-dark);isolation:isolate}
.founder__img{z-index:-2;object-position:70% 30%}
.founder__img::after{background:var(--about-ph-dark)}
/* overlay so the quote stays readable over any photo */
.founder::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,color-mix(in srgb,var(--ink) 94%,transparent) 0%,color-mix(in srgb,var(--ink) 80%,transparent) 55%,color-mix(in srgb,var(--ink) 55%,transparent) 100%)}
.founder__quote{margin:0;max-width:34em}
.founder__quote::before{content:"\201C";display:block;height:.55em;margin-bottom:.12em;
  font:800 clamp(4rem,6vw,5.5rem)/1 var(--f-display);color:var(--accent-on-dark)}
.founder__quote p{margin:0;font-style:italic;font-weight:400;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.5;color:var(--text-on-dark)}
.founder__by{font-size:.86rem;letter-spacing:.02em;color:var(--text-on-dark-muted)}

/* ---------- Band 3: teams ---------- */
.teams{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:clamp(28px,4vw,40px)}
.team{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 1px 2px color-mix(in srgb,var(--text) 4%,transparent),0 14px 30px -18px color-mix(in srgb,var(--text) 26%,transparent);
  transition:box-shadow .25s var(--ease)}
.team:hover{box-shadow:0 1px 2px color-mix(in srgb,var(--text) 4%,transparent),0 20px 38px -18px color-mix(in srgb,var(--text) 32%,transparent)}
/* All four photos share one 16:9 box, filled edge to edge (cover, centred, never stretched);
   the card's overflow + radius clip the top corners. */
.team__media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--about-ph)}
.team__media .about-img{object-fit:cover;object-position:center}
.team__body{padding:18px 18px 20px}
.team__t{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.team__ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1.5px solid var(--accent);border-radius:50%;color:var(--accent)}
.team__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.team h3{margin:0;font:700 1.02rem/1.25 var(--f-display);font-stretch:104%;color:var(--txt)}
.team p{margin:0;font-size:.92rem;line-height:1.55;color:var(--txt-2)}

@media (min-width:601px){
  .teams{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:901px){
  .teams{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:600px){
  .about-h{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
}
@media (prefers-reduced-motion:reduce){
  .team{transition:none}
}

/* ==========================================================
   Desktop: one band per window (same condition as the home page).
   The sticky header is in flow, so bands are 100svh minus --hdr
   and need no header offset in their padding.
   ========================================================== */
@media (min-width:901px) and (min-height:620px){
  html{scroll-snap-type:y proximity;scroll-padding-top:var(--hdr)}

  .about-band{box-sizing:border-box;min-height:calc(100svh - var(--hdr));scroll-snap-align:start;
    display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,4vh,56px) 0}
  .about-band>.wrap{width:100%}

  /* bands 1 + 2: text in the site container's left edge, photo bleeding to the
     right edge of the window (~58% of it); the text column never gets narrower
     than 460px */
  .about-band--split{display:grid;align-items:stretch;padding:0;
    grid-template-columns:max(42%,calc(max(var(--pad),(100% - var(--maxw)) / 2 + var(--pad)) + 460px)) minmax(0,1fr)}
  .about-band__text{align-self:center;max-width:none;margin:0;
    padding:clamp(24px,4vh,56px) clamp(24px,3vw,48px) clamp(24px,4vh,56px) max(var(--pad),calc((100cqw - var(--maxw)) / 2 + var(--pad)))}
  .about-band__media{margin:0;aspect-ratio:auto}
  .about-fade{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 32%);mask-image:linear-gradient(to right,transparent 0,#000 32%)}

  .founder{justify-content:center;padding:clamp(28px,5vh,64px) clamp(28px,4vw,64px)}
  /* >= 84% ink under the whole quote (it ends by ~56% of the panel): the quote
     stays above 7:1 and the caption above 5:1 even over a pure-white photo */
  .founder::before{background:linear-gradient(90deg,
    color-mix(in srgb,var(--ink) 92%,transparent) 0%,color-mix(in srgb,var(--ink) 84%,transparent) 58%,
    color-mix(in srgb,var(--ink) 30%,transparent) 80%,transparent 95%)}
  .founder__quote,.founder__by{max-width:clamp(260px,48%,470px)}

  /* band 3: heading + subtitle + one row of cards in the window */
  .teams{margin-top:clamp(18px,3.5vh,40px)}
  .team__body{padding:clamp(12px,2vh,18px) 18px clamp(14px,2.2vh,20px)}
}