.about-page {
  --about-ink: #172131;
  --about-muted: #596477;
  --about-line: #d9dde4;
  --about-paper: #fbfaf7;
  --about-yellow: #ffc400;
  --hero-banner-h: 244px;
  --hero-portrait-h: 277px;
  color: var(--about-ink);
  background: var(--about-paper);
}

.about-page main { overflow: hidden; }
.about-page h1,
.about-page h2,
.about-page h3,
.about-page p { margin-top: 0; }

.about-page a { color: inherit; }

.about-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--about-yellow);
  color: var(--about-ink);
  font: 700 12px/1 sans-serif;
  transform: translateY(-150%);
}

.about-skip-link:focus { transform: translateY(0); }

.about-profile {
  max-width: 1320px;
  margin: 0 auto;
  padding: 58px clamp(28px, 6vw, 88px) 120px;
}

.about-hero {
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px clamp(28px, 6vw, 88px) 0;
}

.about-hero-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: end;
  gap: clamp(18px, 3vw, 52px);
  min-height: var(--hero-banner-h);
  padding: 0 clamp(26px, 4vw, 60px);
  border-radius: 30px;
  background: var(--about-ink);
}

.about-hero-portrait {
  display: block;
  align-self: end;
  width: auto;
  height: var(--hero-portrait-h);
  /* contribute only the banner's height to row sizing, so the rest overflows upward */
  margin-top: calc(var(--hero-banner-h) - var(--hero-portrait-h));
  pointer-events: none;
}

.about-hero-copy {
  padding: clamp(26px, 3vw, 46px) 0 clamp(28px, 3.2vw, 50px);
}

.about-hero-copy h1 {
  margin-bottom: 18px;
  color: #fff;
  font: 500 clamp(40px, 4.6vw, 68px)/1.05 "Cormorant Garamond", Georgia, serif;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.about-hero-copy h1 mark {
  padding: 0.02em 0.16em 0.08em;
  border-radius: 8px;
  background: var(--about-yellow);
  color: var(--about-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.about-hero-line {
  max-width: 650px;
  margin: 0;
  color: #b9c2d0;
  font-size: clamp(18px, 1.8vw, 25px);
  line-height: 1.35;
}

.about-hero-line em { font-style: italic; }

.about-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(52px, 7vw, 110px);
  align-items: start;
}

.about-profile-copy {
  max-width: none;
  columns: 2;
  column-gap: clamp(40px, 4.5vw, 76px);
  color: #3d495c;
  font-size: 17px;
  line-height: 1.75;
}

.about-profile-copy h1 {
  margin-bottom: 26px;
  color: var(--about-ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: 800;
  line-height: inherit;
}

.about-profile-copy p {
  margin-bottom: 26px;
  font-size: inherit;
  line-height: inherit;
  break-inside: avoid;
}

.about-profile-copy p:last-child { margin-bottom: 0; }

.about-statement em { font-style: italic; }

.about-profile-copy a {
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-weight: 700;
  text-decoration: none;
}

.about-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  font: 800 10px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-section-label span { color: #326f9c; }
.about-section-label p { margin: 0; }

.about-things h2,
.about-contact h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.about-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 82px;
  border-top: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
}

.about-numbers article {
  min-height: 190px;
  padding: 28px 24px 30px;
  border-right: 1px solid var(--about-line);
}

.about-numbers article:first-child { padding-left: 0; }
.about-numbers article:last-child { border-right: 0; }

.about-numbers strong {
  display: block;
  margin-bottom: 18px;
  color: var(--about-ink);
  font: 500 clamp(54px, 5vw, 76px)/0.9 "Cormorant Garamond", Georgia, serif;
  letter-spacing: -0.04em;
}

.about-numbers p {
  max-width: 180px;
  margin: 0;
  color: var(--about-muted);
  font-size: 14px;
  line-height: 1.45;
}

.about-things {
  padding: 105px max(clamp(28px, 6vw, 88px), calc((100vw - 1320px) / 2 + 88px)) 120px;
  color: #f8f4eb;
  background: var(--about-ink);
}

.about-things-head {
  display: grid;
  grid-template-columns: minmax(200px, 0.65fr) minmax(400px, 1.35fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
  max-width: 1144px;
  margin: 0 auto 58px;
}

.about-section-label--light { color: #f8f4eb; }
.about-section-label--light span { color: var(--about-yellow); }

.about-things h2 {
  margin-bottom: 12px;
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1;
}

.about-things-head > div:last-child > p {
  max-width: 620px;
  color: #bfc6d0;
  font-size: 16px;
  line-height: 1.65;
}

.about-thing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1144px;
  margin: 0 auto;
}

.about-thing-card {
  display: flex;
  min-height: 510px;
  flex-direction: column;
  color: var(--about-ink);
  background: #f6f5f1;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.about-thing-card:hover,
.about-thing-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.about-thing-card--yellow { background: var(--about-yellow); }

.thing-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  padding: 30px;
  border-bottom: 1px solid rgba(23, 33, 49, 0.16);
  overflow: hidden;
}

.thing-art-framework { gap: 8px; }

.thing-art-framework span {
  display: grid;
  min-width: 55px;
  min-height: 55px;
  place-items: center;
  border: 1px solid var(--about-ink);
  font: 700 8px/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.thing-art-framework span:last-child { color: #f6f5f1; background: var(--about-ink); }

.thing-art-framework i,
.thing-art-ai i {
  position: relative;
  display: block;
  width: 14px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--about-ink);
}

.thing-art-framework i::after,
.thing-art-ai i::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--about-ink);
  border-right: 1px solid var(--about-ink);
  transform: rotate(45deg);
}

.thing-art-ai { gap: 11px; }

.thing-art-ai span,
.thing-art-ai strong {
  display: grid;
  min-width: 70px;
  min-height: 58px;
  place-items: center;
  border: 1px solid var(--about-ink);
  font: 700 9px/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.thing-art-ai strong { color: #f6f5f1; background: var(--about-ink); }

.thing-art-product { gap: 18px; }

.thing-art-product > div {
  display: grid;
  width: 80px;
  height: 100px;
  padding: 12px;
  grid-template-rows: auto repeat(3, 1px);
  align-content: space-between;
  border: 1px solid var(--about-ink);
  background: rgba(255, 255, 255, 0.38);
}

.thing-art-product > div span { font: 800 16px/1 "IBM Plex Mono", monospace; }
.thing-art-product > div i { display: block; background: rgba(23, 33, 49, 0.35); }
.thing-art-product > strong { font: 800 9px/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.thing-art-product > b { font-size: 24px; font-weight: 400; }

.thing-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px 30px 28px;
}

.thing-copy > p {
  min-height: 28px;
  margin-bottom: 14px;
  color: #326f9c;
  font: 800 9px/1.35 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-thing-card--yellow .thing-copy > p { color: var(--about-ink); }

.thing-copy h3 {
  margin-bottom: 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.thing-copy > span {
  color: #586376;
  font-size: 14px;
  line-height: 1.6;
}

.about-thing-card--yellow .thing-copy > span { color: rgba(23, 33, 49, 0.78); }

.thing-copy > b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 32px;
  font: 800 10px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.thing-copy > b i { font-size: 16px; font-style: normal; }

.about-contact {
  display: grid;
  justify-items: center;
  padding: 120px 28px 130px;
  text-align: center;
  background: var(--about-paper);
}

.about-contact > p {
  margin-bottom: 18px;
  color: #326f9c;
  font: 800 10px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-contact h2 {
  max-width: 760px;
  margin-bottom: 34px;
  font-size: clamp(44px, 5vw, 70px);
  line-height: 1;
}

.about-contact > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 34px; }

.about-contact a {
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font: 750 11px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.03em;
  text-decoration: none;
}

@media (max-width: 860px) {
  .about-profile-copy { columns: 1; max-width: 740px; }
}

@media (max-width: 900px) {
  .about-things-head { grid-template-columns: 1fr; }
  .about-hero-banner {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 0;
    padding: 0 clamp(22px, 4vw, 40px);
  }
  .about-hero-portrait { height: clamp(210px, 34vw, 280px); margin-top: -28px; }
  .about-hero-copy { padding: 26px 0 40px; }
  .about-numbers { grid-template-columns: repeat(2, 1fr); }
  .about-numbers article:nth-child(2) { border-right: 0; }
  .about-numbers article:nth-child(-n + 2) { border-bottom: 1px solid var(--about-line); }
  .about-numbers article:nth-child(3) { padding-left: 0; }
  .about-thing-grid { grid-template-columns: 1fr; }
  .about-thing-card { min-height: 0; }
  .thing-copy { min-height: 290px; }
}

@media (max-width: 560px) {
  .about-page .site-header { grid-template-columns: auto 1fr; }
  .about-page .site-nav { justify-self: end; }
  .about-page .header-contact { display: none; }
  .about-page .brand-copy small { display: none; }
  .about-hero { padding: 40px 22px 0; }
  .about-hero-banner { border-radius: 22px; }
  .about-profile { padding: 44px 22px 90px; }
  .about-profile-copy { font-size: 16px; }
  .about-numbers { margin-top: 56px; }
  .about-numbers article { min-height: 160px; padding: 22px 14px; }
  .about-numbers strong { font-size: 50px; }
  .about-things { padding: 80px 22px 90px; }
  .about-things h2 { font-size: 43px; }
  .thing-art { min-height: 160px; padding: 20px 12px; }
  .thing-art-framework { gap: 5px; }
  .thing-art-framework span { min-width: 48px; min-height: 50px; font-size: 7px; }
  .thing-art-framework i { width: 8px; }
  .thing-art-ai { gap: 6px; }
  .thing-art-ai span,
  .thing-art-ai strong { min-width: 62px; }
  .thing-art-ai i { width: 9px; }
  .thing-copy { min-height: 300px; padding: 26px 24px; }
  .about-contact { padding: 90px 22px 100px; }
  .about-contact h2 { font-size: 44px; }
}