/* About (card 1g). Tokens only: sizes are var(--fs-N), yellow lives on .logo-dot and .btn-primary alone. */

/* the hero: the kit's notched panel, once. The notch holds the title; the story sits in the panel; the photo's slot is the right-hand column. */
.about-hero { margin-top: var(--space-5); }
.about-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 28vw, 360px);
  grid-template-areas: "notch photo" "story photo";
  grid-template-rows: auto 1fr;
  column-gap: var(--space-7);
  padding-right: 36px;
}
.about-notch { grid-area: notch; justify-self: start; padding-top: 40px; }
.about-line { color: var(--muted-dark); text-wrap: balance; }

/* his headshot is not on file (decision 40; 89 (2)): a navy panel at the photo's 4:5 with the logo's yellow dot, no face, no stock */
.about-photo {
  grid-area: photo; align-self: start; margin-block: 36px;
  flex-direction: column; gap: var(--space-4);
  border-radius: var(--r-card); background: var(--ink); color: var(--muted-dark);
}
.about-dot { width: 32px; height: 32px; margin: 0; }

.about-story { grid-area: story; display: flex; flex-direction: column; gap: var(--space-4); padding: 36px 0 44px 36px; color: var(--ink); }
.about-story p { max-width: 60ch; font-size: var(--fs-6); line-height: 1.6; }
.about-story a { font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* three values: plain filled blocks one tone step from the ground; no icons. Under 900 px they stack; from 900 px the titles share one
   row and the sentences another (subgrid), so a two-line title does not push its sentence out of line with its neighbours */
.about-value-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.about-value { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--r-card); background: var(--graphite); }
.about-value .h-card { font-size: var(--fs-3); }
.about-value p { max-width: 38ch; color: var(--text-soft); }
@media (min-width: 900px) {
  .about-value-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--space-5); row-gap: 0; }
  .about-value { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .about-value .h-card { margin-bottom: var(--space-3); }
}

/* "why": his words are still to come, so the section says so quietly */
.about-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4) var(--space-7); align-items: baseline; }
.about-why-body { display: flex; flex-direction: column; gap: var(--space-3); }
.about-why-draft { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--paper); }
.about-why-note { font-size: var(--fs-7); color: var(--muted-dark); }

/* the close */
.about-close-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-7);
  padding: var(--space-7); border-radius: var(--r-panel); background: var(--graphite);
}
.about-close-band .h-section { max-width: 18ch; }

/* under 960 px the photo drops under the title (a 280 px story column beside it was too narrow); under 760 px it is the full width */
@media (max-width: 959.98px) {
  .about-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "notch" "photo" "story"; grid-template-rows: auto; padding-right: 0; }
  .about-notch { padding-top: 28px; }
  .about-photo { width: min(360px, 100% - 72px); margin: var(--space-5) 36px 0; }
  .about-story { padding: var(--space-5) 36px 36px; }
}
@media (max-width: 759.98px) {
  .about-photo { width: auto; margin: var(--space-5) var(--space-4) 0; }
  .about-photo.ph { width: 160px; }   /* the empty placeholder only (89 (2)): 160 x 200 at the real 4:5, not the full width (about 326 x 407, the biggest thing on a phone screen); his headshot, placed without .ph, takes the full width (card 1i fix round 1, review r1; UNCONFIRMED look call) */
  .about-story { padding: var(--space-5) 20px 28px; }
  .about-why { grid-template-columns: minmax(0, 1fr); }
  .about-value { padding: var(--space-5); }
  .about-close-band { padding: var(--space-6) var(--space-5); }
}