/* ==========================================================================
   About page. Loads after styles.css and only adds what this page needs.
   Tokens only. No hex values. Breakpoints 1080, 900, 640, 420.
   ========================================================================== */

/* ---------- 1. Hero: the cutout is cropped tighter, head to chest ---------- */
.about-role { margin-top: 18px; font: 600 clamp(18px, 1.7vw, 22px)/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.about-hero .ihero-quote { position: relative; margin-top: 34px; padding-left: 50px; max-width: 19em; font-size: clamp(23px, 2.5vw, 34px); line-height: 1.32; text-wrap: balance; }
/* pull quotes are set one way on every page: one large Playfair mark, and no quote marks in the text */
.about-hero .ihero-quote::before, .about-say blockquote::before { content: "\201C"; position: absolute; left: 0; top: -.04em; font: italic 500 72px/1 var(--quote); color: var(--gold); }
@media (min-width: 901px) {
  .about-hero.ihero--figure .ihero-inner { min-height: 640px; }
  .about-hero .ihero-figure { right: 8px; height: calc(100% - var(--nav-h) - 4px); aspect-ratio: 10 / 11; }
}
@media (max-width: 900px) {
  .about-hero .ihero-figure { height: 82vw; max-height: 470px; }
  .about-hero .ihero-figure img { width: min(100vw, 520px); }
  /* the mark sits above the quote here, the same as on the home page */
  .about-hero .ihero-quote { padding-left: 0; }
  .about-hero .ihero-quote::before { display: block; position: static; height: 40px; margin: 0 0 6px -4px; }
}

/* the social strip on the cut */
.about-strip-label { flex: none; margin-right: 16px; font: 700 13px/1.4 var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--on-dark-muted); }
.about-strip .social { flex-wrap: nowrap; gap: 12px; }
@media (max-width: 420px) {
  .about-strip-label { margin-right: 8px; font-size: 13px; letter-spacing: .08em; }
  .about-strip .social { gap: 8px; }
}

/* ---------- 2. Highlights and areas of focus ---------- */
/* white follows white here, so the shared gap is cut */
.about-points { padding-bottom: 36px; }
.about-points .bullets h2 { padding-bottom: 18px; border-bottom: 1px solid var(--rule); position: relative; }
.about-points .bullets h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; background: var(--gold); }
@media (max-width: 640px) { .about-points { padding-top: 56px; padding-bottom: 8px; } }

/* ---------- 3. Full bio: all of it is in styles.css ---------- */

/* ---------- 4. The record: five stats on a dark band, with the cut on its top edge ---------- */
.about-record { --cut: 72px; --cut-sw: 3.33; --cut-x: 30%; overflow: hidden; background: linear-gradient(180deg, var(--navy) 0%, var(--deep) 70%); padding-top: calc(var(--pad) + var(--cut) * .5); }
.about-record::before { content: ""; position: absolute; top: -1px; left: 0; z-index: 2; width: calc(var(--cut-x) + var(--cut)); height: calc(var(--cut) + 1px); background: var(--seam); clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.about-record .cutline { top: 0; bottom: auto; }
.about-record .statrow { margin-top: 60px; }
.about-record .stat-n { font-size: clamp(56px, 6.2vw, 88px); }
.about-record .stat-l { font-size: clamp(18px, 1.5vw, 21px); }
@media (max-width: 900px) { .about-record { --cut: 56px; --cut-sw: 4.29; --cut-x: 36%; } }
@media (max-width: 640px) {
  .about-record { --cut: 40px; --cut-sw: 6; --cut-x: 44%; }
  .about-record .statrow { margin-top: 44px; }
}

/* ---------- 5. Closing: the signature quote ---------- */
.about-say { margin-top: 28px; max-width: 34em; }
.about-say blockquote { position: relative; padding-left: 50px; font: italic 500 clamp(20px, 1.9vw, 26px)/1.45 var(--quote); color: var(--on-dark); text-wrap: balance; }
.about-say figcaption { margin-top: 18px; padding-left: 50px; font-size: 14.5px; color: var(--on-dark-muted); }
.about-say figcaption b { display: block; font: 700 20px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); }
@media (max-width: 900px) {
  .about-say blockquote, .about-say figcaption { padding-left: 0; }
  .about-say blockquote::before { display: block; position: static; height: 40px; margin: 0 0 6px -4px; }
}