/* About uses the shared visual frame, with its own portrait and story layout. */
#press.about-page .about-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:center;padding-block:75px 95px}
#press.about-page .about-intro{min-width:0}
#press.about-page .about-hero h1{font-size:clamp(58px,6.4vw,92px);line-height:.99;letter-spacing:-.065em}
#press.about-page .about-hero h1 span,#press.about-page .about-contact h2 span{color:var(--pink)}
#press.about-page .about-lede{font-size:24px;line-height:1.4;margin-top:30px}
#press.about-page .about-intro-copy{font-size:20px;line-height:1.55;color:var(--muted);max-width:40ch;margin-top:14px}
#press.about-page .about-portrait{max-width:460px;justify-self:end;align-self:center;width:100%}
#press.about-page .about-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
#press.about-page .about-portrait figcaption{font-size:13px;color:var(--muted);margin-top:17px}
#press.about-page .about-split{display:grid;grid-template-columns:1fr 1.25fr;gap:80px}
#press.about-page .about-heading h2{font-size:clamp(40px,4.3vw,62px)}
#press.about-page .about-copy{min-width:0;max-width:640px}
#press.about-page .about-copy .large-copy{font-size:clamp(26px,2.5vw,36px);line-height:1.3}
#press.about-page .about-copy>p+p{font-size:20px;color:var(--muted);line-height:1.6;margin-top:24px;max-width:49ch}
#press.about-page .about-work .about-split{border-top:1px solid var(--line);padding-top:65px}
#press.about-page .about-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-block:48px 80px}
#press.about-page .about-project .portfolio-art{height:auto;aspect-ratio:1.5}
#press.about-page .about-project .portfolio-art img{height:100%;object-fit:cover}
#press.about-page .about-project:first-child img{object-position:25% center}
#press.about-page .about-project--diagram .portfolio-art img{object-fit:contain;object-position:center}
#press.about-page .about-project[href="/things/pangea/"] .portfolio-art{background:#0e1226}
#press.about-page .about-project[href="/things/sulaco/"] .portfolio-art{background:#1b1f21}
#press.about-page .about-project-caption{display:grid;gap:9px;padding-top:20px}
#press.about-page .about-project-caption h3{font-size:28px}
#press.about-page .about-project-caption p{grid-column:1/-1;font-size:15px;color:var(--muted)}
#press.about-page .about-project:is(:hover,:focus-visible) .portfolio-art img{transform:scale(1.025)}
#press.about-page .about-story .about-split{border-top:1px solid var(--line);padding-block:72px}
#press.about-page .about-teaching{padding-block:10px 0}
#press.about-page .about-course{display:grid;grid-template-columns:1fr 1.25fr;gap:65px;padding:58px;background:#1b33c4;color:#edeae0;--muted:#d3d8ff}
#press.about-page .about-course .eyebrow{color:#ffc90a}
#press.about-page .about-course-format{font-size:18px;margin-top:24px;color:var(--muted)}
#press.about-page .about-course .text-link{border-color:#ffc90a}
#press.about-page .about-course a:focus-visible{outline-color:#ffc90a}
#press.about-page .about-contact{padding-top:100px}
#press.about-page .about-contact-row{display:flex;justify-content:space-between;align-items:flex-end;gap:45px}
#press.about-page .about-contact h2{font-size:clamp(54px,6.5vw,94px);letter-spacing:-.06em}
#press.about-page .about-contact-links{display:grid;justify-items:start;gap:24px;padding-bottom:5px;min-width:0}
#press.about-page .about-contact-links .text-link{margin:0}
#press.about-page .about-mail{font-size:18px;color:var(--muted);overflow-wrap:anywhere}
#press.about-page .about-mail:hover{color:var(--ink)}
#press.about-page[data-mode=light] .about-hero h1 span,#press.about-page[data-mode=light] .about-contact h2 span{color:#b51a59}

@media(max-width:1100px){
  #press.about-page .section{padding-inline:42px}
  #press.about-page .about-hero{gap:48px;padding-block:60px 75px}
  #press.about-page .about-hero h1{font-size:clamp(51px,6.5vw,70px)}
  #press.about-page .about-split{gap:48px}
  #press.about-page .about-projects{gap:22px}
  #press.about-page .about-project-caption h3{font-size:25px}
  #press.about-page .about-course{padding:40px;gap:40px}
}
@media(max-width:800px){
  #press.about-page .section{padding-inline:28px}
  #press.about-page .about-hero{gap:32px;grid-template-columns:1.15fr 1fr}
  #press.about-page .about-hero h1{font-size:clamp(44px,6.5vw,52px)}
  #press.about-page .about-lede{font-size:21px}
  #press.about-page .about-intro-copy{font-size:18px}
  #press.about-page .about-split{grid-template-columns:1fr 1.3fr;gap:35px}
  #press.about-page .about-heading h2{font-size:40px}
  #press.about-page .about-copy>p+p{font-size:18px}
  #press.about-page .about-projects{gap:18px;padding-bottom:60px}
  #press.about-page .about-project-caption h3{font-size:23px}
  #press.about-page .about-project-caption p{font-size:14px}
  #press.about-page .about-course{grid-template-columns:1fr;gap:35px}
  #press.about-page .about-course-format{margin-top:18px}
}
@media(max-width:640px){
  #press.about-page .section{padding-inline:22px}
  #press.about-page .about-hero{grid-template-columns:1fr;gap:40px;padding-block:40px 55px}
  #press.about-page .about-hero h1{font-size:clamp(42px,10.9vw,67px)}
  #press.about-page .about-lede{margin-top:25px}
  #press.about-page .about-intro-copy{max-width:39ch}
  #press.about-page .about-portrait{max-width:400px;justify-self:start}
  #press.about-page .about-portrait figcaption{font-size:12px;margin-top:13px}
  #press.about-page .about-split{grid-template-columns:1fr;gap:25px}
  #press.about-page .about-work .about-split{padding-top:40px}
  #press.about-page .about-projects{grid-template-columns:1fr;gap:35px;padding-block:35px 50px}
  #press.about-page .about-project-caption{padding-top:17px}
  #press.about-page .about-project-caption h3{font-size:28px}
  #press.about-page .about-story .about-split{padding-block:45px}
  #press.about-page .about-copy>p+p{margin-top:20px}
  #press.about-page .about-course{padding:32px 25px;gap:30px}
  #press.about-page .about-contact{padding-top:60px}
  #press.about-page .about-contact-row{flex-direction:column;align-items:flex-start;gap:30px}
  #press.about-page .about-contact h2{font-size:clamp(48px,12vw,72px)}
  #press.about-page .about-contact-links{gap:22px}
}

/* the service block: the offer's yellow field, above the course's blue one */
#press.about-page .about-deploying{padding-block:10px 0}
#press.about-page .about-deploy{display:grid;grid-template-columns:1fr 1.25fr;gap:65px;padding:58px;background:#ffc90a;color:#0e1226;--ink:#0e1226;--muted:#4a4322;margin-bottom:28px}
#press.about-page .about-deploy .eyebrow{color:#0e1226}
#press.about-page .about-deploy-rate{font-size:18px;margin-top:26px}
#press.about-page .about-deploy-rate b{display:block;font-size:clamp(44px,4.6vw,64px);letter-spacing:-.06em;line-height:1;margin-bottom:6px}
#press.about-page .about-deploy .text-link{border-color:#0e1226;transition:border-color .2s}
#press.about-page .about-deploy .text-link:hover{border-color:var(--pink)}
#press.about-page .about-deploy a:focus-visible{outline-color:#0e1226}
@media(max-width:1100px){#press.about-page .about-deploy{padding:40px;gap:40px}}
@media(max-width:800px){#press.about-page .about-deploy{grid-template-columns:1fr;gap:35px}#press.about-page .about-deploy-rate{margin-top:18px}}
@media(max-width:640px){#press.about-page .about-deploy{padding:32px 25px;gap:30px}}