.about-page {
  --about-ink: #222222;
  --about-muted: #686868;
  --about-line: #dddddd;
  --about-accent: #ef5b38;
  --about-action: #bd563c;
  --about-green: #245f50;
  margin: 0;
  color: var(--about-ink);
  background: #ffffff;
}
.about-page main { overflow: visible; }
.about-page h1,
.about-page h2,
.about-page h3,
.about-page p { margin-top: 0; }

.about-header {
  width: min(1180px, calc(100% - 64px));
  min-height: 86px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--about-line);
}
.about-header nav { gap: 22px; }
.about-header nav a { font-size: 13px; font-weight: 700; text-decoration: none; }

.about-hero {
  width: min(1080px, calc(100% - 64px));
  margin: 0 auto;
  padding: 96px 0 104px;
}
.about-hero h1 {
  max-width: 940px;
  margin-bottom: 28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 7.2vw, 100px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.055em;
}
.about-hero > p {
  max-width: 710px;
  margin-bottom: 0;
  color: var(--about-muted);
  font-size: 20px;
  line-height: 1.55;
}
.about-hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.about-button {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--about-ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.about-button-primary { color: #ffffff; background: var(--about-ink); }
.about-button-secondary { color: var(--about-ink); background: #ffffff; }

.about-purpose {
  padding: 96px max(32px, calc((100vw - 1080px) / 2));
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
  color: #ffffff;
  background: var(--about-green);
}
.about-purpose h2,
.about-for-both h2,
.about-principles h2,
.about-founder h2,
.about-actions h2 {
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.about-purpose-copy p {
  margin-bottom: 22px;
  color: rgba(255, 255, 255, .82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.65;
}
.about-purpose-copy p:last-child { margin-bottom: 0; color: #ffffff; }

.about-for-both {
  width: min(1080px, calc(100% - 64px));
  margin: 0 auto;
  padding: 108px 0;
}
.about-for-both h2 { max-width: 760px; }
.about-audience-grid {
  margin-top: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--about-ink);
  border-bottom: 1px solid var(--about-ink);
}
.about-audience-grid article {
  min-height: 280px;
  padding: 32px;
}
.about-audience-grid article:first-child { border-right: 1px solid var(--about-line); }
.about-audience-grid h3 {
  margin-bottom: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.about-audience-grid p {
  max-width: 440px;
  margin-bottom: 30px;
  color: var(--about-muted);
  font-size: 15px;
  line-height: 1.65;
}
.about-audience-grid a {
  color: var(--about-ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.about-principles {
  padding: 108px max(32px, calc((100vw - 1080px) / 2));
  color: #ffffff;
  background: #1d1d1d;
}
.about-principles h2 { max-width: 820px; }
.principle-grid {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
}
.principle-grid article {
  min-height: 290px;
  padding: 26px 24px;
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.principle-grid article:last-child { border-right: 0; }
.principle-grid span { color: var(--about-accent); font-family: Georgia, serif; font-size: 30px; }
.principle-grid h3 { margin: 56px 0 12px; font-size: 18px; }
.principle-grid p { margin-bottom: 0; color: rgba(255, 255, 255, .66); font-size: 14px; line-height: 1.6; }

.about-founder {
  width: min(1080px, calc(100% - 64px));
  margin: 0 auto;
  padding: 108px 0;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 82px;
  align-items: center;
}
.about-founder-image {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  background: #ececec;
}
.about-founder-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 55% center;
}
.about-founder-copy h2 { margin-bottom: 30px; }
.about-founder-copy > p {
  margin-bottom: 18px;
  color: var(--about-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.65;
}
.about-founder-copy .about-signature {
  margin: 34px 0 5px;
  color: var(--about-ink);
  font-family: "Tektur", sans-serif;
  font-size: 22px;
  font-weight: 800;
}
.about-founder-copy .about-founder-detail {
  margin-bottom: 0;
  color: var(--about-muted);
  font-family: inherit;
  font-size: 12px;
}

.about-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--about-line);
}
.about-actions > div { padding: 78px max(32px, calc((100vw - 1080px) / 2)); }
.about-actions > div:first-child { padding-right: 58px; background: #f5f5f5; }
.about-actions > div:last-child { padding-left: 58px; color: #ffffff; background: var(--about-ink); }
.about-actions h2 { margin-bottom: 28px; font-size: clamp(34px, 4vw, 52px); }
.about-actions a {
  display: inline-flex;
  gap: 8px;
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 800px) {
  .about-header,
  .about-hero,
  .about-for-both,
  .about-founder { width: calc(100% - 36px); }
  .about-header nav a:first-child { display: none; }
  .about-hero { padding: 62px 0 72px; }
  .about-hero h1 { font-size: clamp(46px, 14vw, 70px); }
  .about-hero > p { font-size: 18px; }
  .about-purpose { grid-template-columns: 1fr; gap: 38px; padding: 72px 18px; }
  .about-purpose-copy p { font-size: 18px; }
  .about-for-both { padding: 74px 0; }
  .about-audience-grid { grid-template-columns: 1fr; }
  .about-audience-grid article { min-height: auto; padding: 30px 0; }
  .about-audience-grid article:first-child { border-right: 0; border-bottom: 1px solid var(--about-line); }
  .about-principles { padding: 74px 18px; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid article { min-height: auto; padding: 28px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .principle-grid article:last-child { border-bottom: 0; }
  .principle-grid h3 { margin-top: 28px; }
  .about-founder { grid-template-columns: 1fr; gap: 42px; padding: 74px 0; }
  .about-founder-image { aspect-ratio: 4 / 3; border-radius: 22px; }
  .about-founder-copy > p { font-size: 18px; }
  .about-actions { grid-template-columns: 1fr; }
  .about-actions > div { padding: 62px 18px !important; }
}

@media (max-width: 480px) {
  .about-hero-actions { display: grid; }
  .about-button { width: 100%; }
}