/* ============================================================================
   about.css — the founder's page (/about).
   ----------------------------------------------------------------------------
   Sits on clusterhack.css and guide.css (the page frame, the section heads
   and the closing call come from there). One sentence carries the page —
   every "we" on this site is one person — so the hero sets it at display
   size next to the one face it refers to, and everything after it stays
   quiet: a story column, a cast list in which every seat has the same name,
   and the counted numbers.

   Prefix: .about-
   ========================================================================== */

.about{padding-bottom:20px}

/* ---- hero: the sentence and the face ------------------------------------ */
.about-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:20px 48px;
  align-items:center;padding:56px 0 20px}
.about-eyebrow{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.about-note{font-family:var(--hk-mono);font-size:12px;color:var(--hk-faint)}
.about-h1{font-family:var(--hk-sans);font-weight:700;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(32px,5.6vw,62px);color:var(--hk-ink);margin:14px 0 20px;text-wrap:balance;max-width:14ch}
.about-h1 .k{color:var(--hk-amber)}
.about-hero-text .hk-sub{max-width:48ch;margin:0 0 24px}
.about-portrait{margin:0;justify-self:end;width:min(100%,360px)}
.about-portrait picture{display:block}
.about-portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--hk-radius-lg);border:1px solid var(--hk-line);box-shadow:var(--hk-shadow-lg);
  background:var(--hk-surface)}
.about-portrait figcaption{margin-top:12px;font-family:var(--hk-mono);font-size:12.5px;color:var(--hk-dim);line-height:1.6}
.about-portrait figcaption b{display:block;font-size:13.5px;font-weight:600;color:var(--hk-ink)}

/* ---- sections ----------------------------------------------------------- */
.about-sec{padding:48px 0 0;scroll-margin-top:72px}
.about-sec .guide-sec-head{margin-bottom:24px}

/* ---- the story: one column, read at leisure ----------------------------- */
.about-story{max-width:64ch}
.about-story h3{font-family:var(--hk-sans);font-size:19px;font-weight:700;letter-spacing:-.015em;
  color:var(--hk-ink);margin:30px 0 10px}
.about-story h3:first-child{margin-top:0}
.about-story p{font-size:16.5px;line-height:1.75;color:var(--hk-muted);margin:0 0 16px}
.about-story p b{color:var(--hk-ink);font-weight:600}
.about-story p:last-child{margin-bottom:0}

/* ---- the cast list: every seat, one name --------------------------------
   A dotted leader runs from the seat to the name, the way a table of
   contents or a film's credits does; the joke only lands if the right-hand
   column lines up. */
.about-roster{margin:26px 0 0;font-family:var(--hk-mono);font-size:13.5px;background:var(--hk-surface);
  border:1px solid var(--hk-line);border-radius:var(--hk-radius);overflow:hidden}
.about-roster .row{display:flex;align-items:baseline;gap:12px;padding:12px 20px;border-top:1px solid var(--hk-line-2)}
.about-roster .row:first-child{border-top:0}
.about-roster dt{order:1;flex:none;max-width:62%;color:var(--hk-muted)}
.about-roster dt i{font-style:normal;color:var(--hk-dim)}
.about-roster .row::after{content:"";order:2;flex:1;min-width:24px;border-bottom:1px dotted var(--hk-faint);
  transform:translateY(-4px)}
.about-roster dd{order:3;flex:none;margin:0;color:var(--hk-ink)}
.about-roster .row.sum{border-top:1px solid var(--hk-line);background:var(--hk-surface-2)}
.about-roster .row.sum dd{color:var(--hk-amber);font-weight:600}

/* ---- the numbers, counted ----------------------------------------------- */
.about-env{margin-top:18px;font-family:var(--hk-mono);font-size:13px;display:flex;flex-wrap:wrap;gap:8px 28px;
  padding:13px 18px;background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius-sm)}
.about-env b{color:var(--hk-muted);font-weight:400}
.about-env .v{color:var(--hk-ink)} .about-env .v.c{color:var(--hk-cyan)}
.about-env-note{font-family:var(--hk-mono);font-size:12px;color:var(--hk-faint);margin:8px 0 0}

/* ---- closing ------------------------------------------------------------ */
.about-end{margin-top:56px}
.about-end .hk-hint{margin:18px auto 0;max-width:52ch}
.about-end .hk-hint a{color:var(--hk-cyan)}
.about-end .hk-hint a:hover{color:var(--hk-amber)}

/* ---- narrow screens ----------------------------------------------------- */
@media(max-width:820px){
  .about-hero{grid-template-columns:1fr;gap:26px;padding-top:40px}
  .about-portrait{justify-self:start;width:min(100%,300px)}
  .about-h1{max-width:16ch}
}
@media(max-width:560px){
  .about-roster .row{padding:11px 14px;gap:8px}
  /* The seat may wrap; the name never gets clipped. The asides go. */
  .about-roster dt{flex:0 1 auto;min-width:0;max-width:none}
  .about-roster dt i{display:none}
  .about-env{gap:6px 18px;padding:12px 14px}
}