/* /about — main-site page language, not the newswire's editorial one.
   Values copied from why-attend / speakers so this page reads as one of the
   marketing pages: green rule + mono eyebrow, Space Grotesk 700 headings at the
   main-page scale, #f2f2ed band, speaker-card shell for the editorial card. */

.abt{max-width:1200px;margin:0 auto;padding:56px 40px 0}
.abt-band{background:#f2f2ed;margin-top:64px;padding:56px 0 8px}
.abt-band .abt{padding-top:0}
.abt-last{padding-bottom:72px}

.abt-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.abt-eyebrow i{display:block;width:36px;height:8px;background:#57e000;flex:none}
.abt-eyebrow span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-size:16px;
  letter-spacing:.2em;color:#0a0a0a;text-transform:uppercase}

.abt h1{margin:0 0 18px;font-size:52px;font-weight:700;line-height:1.18;letter-spacing:-.01em;
  text-wrap:pretty;max-width:20ch}
.abt h2{margin:0 0 18px;font-size:38px;font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:pretty}
.abt p{margin:0 0 20px;font-size:20px;line-height:1.6;color:#444;max-width:62ch;text-wrap:pretty}
.abt p.abt-lede{font-size:22px;color:#444}
.abt a{color:#3fae00;font-weight:600;border-bottom:2px solid #57e000}
.abt a:hover{background:#57e000;color:#0a0a0a}

/* contact line — the site's own callout shape */
.abt-contact{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  border-top:2px solid #0a0a0a;padding-top:20px;margin:28px 0 8px;max-width:62ch}
.abt-contact b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:#0a0a0a}
.abt-contact span{font-size:18px;line-height:1.6;color:#555}

/* masthead, borrowed from /news at a fraction of the size */
.abt h2.abt-mast{margin:0 0 20px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:50px;
  line-height:.95;letter-spacing:.01em;text-transform:uppercase;color:#0a0a0a}
.abt h2.abt-mast span{color:#57e000}

/* editorial card — the speaker-card shell, inverted and tightened */
.abt-card{border:1px solid #ddd;background:#ffffff;display:flex;flex-direction:column;
  max-width:440px;margin-top:34px}
.abt-card .abt-cap{height:5px;background:#57e000}
.abt-card .abt-in{padding:16px 20px 18px}
.abt-card .abt-who{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:#9a9a94;margin-bottom:4px}
.abt-card h3{margin:0 0 6px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:21px;
  line-height:1.1;letter-spacing:.02em;text-transform:uppercase}
.abt-card p{margin:0 0 9px;font-size:14px;line-height:1.55;color:#444;max-width:none}
.abt-card .abt-links{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-size:11.5px;letter-spacing:.08em}

.abt-dark{background:#0a0a0a;border-color:#0a0a0a}
.abt-dark .abt-who{color:#8d8d86}
.abt-dark h3{color:#ffffff}
.abt-dark p{color:#c9c9c4}
.abt-dark .abt-links a{color:#57e000;border-bottom-color:#57e000}
.abt-dark .abt-links a:hover{background:#57e000;color:#0a0a0a}

/* /about#isabelle-martin: without this the sticky nav sits on top of the card
   when the browser jumps to it. Clear the bar plus breathing room. */
#isabelle-martin{scroll-margin-top:150px}

@media (max-width:1099px){
  .abt{padding:46px 20px 0}
  .abt-band{margin-top:44px;padding:44px 0 4px}
  .abt-last{padding-bottom:48px}
  .abt-eyebrow{gap:9px;margin-bottom:16px}
  .abt-eyebrow i{width:28px;height:7px}
  .abt-eyebrow span{font-size:12px;letter-spacing:.18em}
  .abt h1{font-size:34px;line-height:1.14;margin-bottom:14px}
  .abt h2{font-size:28px;margin-bottom:14px}
  .abt p{font-size:17px;margin-bottom:16px}
  .abt p.abt-lede{font-size:18px}
  .abt-contact{padding-top:16px;margin:22px 0 4px}
  .abt-contact span{font-size:16px}
  .abt h2.abt-mast{font-size:33px;margin-bottom:14px}
  .abt-card{margin-top:40px}
  #isabelle-martin{scroll-margin-top:110px}
  .abt-card .abt-in{padding:15px 17px 17px}
}