/* About uses the shared homepage palette, type, navigation, and footer. */
.about-page .about-intro {
  display:grid;
  grid-template-columns:minmax(0,400px) minmax(0,1fr);
  align-items:center;
  gap:clamp(48px,7vw,104px);
  padding-block:76px 48px
}

.about-page .about-portrait {
  min-width:0;
  margin:0
}

.about-page .about-portrait img {
  width:100%;
  height:auto;
  border-radius:4px
}

.about-page .about-portrait figcaption {
  max-width:370px;
  margin-top:17px;
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}

.about-page .about-portrait figcaption a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px
}

.about-page .about-story {
  min-width:0;
  max-width:660px
}

.about-page .about-story h1 {
  margin:0 0 27px;
  font-size:clamp(48px,5.4vw,72px);
  line-height:1.08;
  letter-spacing:-.065em;
  font-weight:550
}

.about-page .about-story p {
  margin:0 0 19px;
  color:var(--muted);
  font-size:15px;
  line-height:1.9
}

.about-page .about-story p:first-of-type {
  color:var(--ink);
  font-size:17px;
  line-height:1.8
}

.about-page .about-story p em {
  font-family:inherit;
  font-weight:550;
  letter-spacing:normal
}

.about-page .about-values-section {
  padding-block:48px 82px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--soft)
}

.about-page .about-values-title {
  max-width:670px;
  margin:0 0 38px;
  font-size:clamp(32px,3.4vw,46px);
  line-height:1.18;
  letter-spacing:-.045em
}

.about-page .about-values-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  list-style:none;
  margin:0;
  padding:0
}

.about-page .about-value {
  min-width:0;
  padding:27px 30px 29px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--paper);
  color:var(--muted);
  font-size:14px;
  line-height:1.85
}

.about-page .about-value > strong {
  display:block;
  margin-bottom:11px;
  color:var(--ink);
  font-family:var(--display);
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.025em
}

.about-page .about-value a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px
}

.about-page .about-story a[href^="#"],
.about-page .about-value a[href^="#"] {
  margin-left:2px;
  color:var(--rust)
}

.about-page .about-notes {
  padding-block:35px 46px
}

.about-page .about-footnote {
  max-width:1000px;
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.85;
  scroll-margin-top:120px
}

.about-page .about-footnote + .about-footnote {
  margin-top:12px
}

.about-page #paper-test-video {
  max-width:calc(100vw - 48px)
}

.about-page #paper-video {
  display:block;
  width:100%;
  max-width:480px;
  height:auto
}

@media(max-width:1190px) {
  .about-page .about-intro {
    grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:56px
  }
  .about-page .about-story h1 {
    font-size:58px
  }
}

@media(max-width:960px) {
  .about-page .about-intro {
    grid-template-columns:minmax(0,280px) minmax(0,1fr);
    gap:36px;
    align-items:start;
    padding-block:58px 40px
  }
  .about-page .about-story h1 {
    font-size:48px;
    margin-bottom:23px
  }
  .about-page .about-story p {
    font-size:14px
  }
  .about-page .about-story p:first-of-type {
    font-size:15px
  }
  .about-page .about-values-section {
    padding-block:40px 65px
  }
  .about-page .about-value {
    padding:24px;
    font-size:13px
  }
}

@media(max-width:740px) {
  .about-page .about-intro {
    grid-template-columns:minmax(0,1fr);
    gap:36px;
    padding-block:40px 32px
  }
  .about-page .about-portrait {
    width:100%;
    max-width:340px;
    margin-inline:auto
  }
  .about-page .about-portrait figcaption {
    margin-top:14px;
    font-size:11px
  }
  .about-page .about-story {
    max-width:none
  }
  .about-page .about-story h1 {
    font-size:clamp(42px,10vw,58px)
  }
  .about-page .about-story p {
    font-size:14px;
    line-height:1.85
  }
  .about-page .about-values-section {
    padding-block:32px 52px
  }
  .about-page .about-values-title {
    margin-bottom:27px;
    font-size:34px
  }
  .about-page .about-values-list {
    grid-template-columns:minmax(0,1fr);
    gap:15px
  }
  .about-page .about-value {
    padding:23px 24px 25px;
    font-size:13px
  }
  .about-page .about-value > strong {
    font-size:16px
  }
  .about-page .about-notes {
    padding-block:27px 35px
  }
}

@media(max-width:380px) {
  .about-page .about-story h1 {
    font-size:40px
  }
  .about-page .about-values-title {
    font-size:31px
  }
  .about-page .about-value {
    padding-inline:20px
  }
}