html { scroll-behavior: smooth; scroll-padding-top: 96px; }
.header { position: fixed; inset: 0 0 auto; z-index: 30; transition: color 200ms ease, background-color 200ms ease; }
.hero { padding-top: 96px; }
.nav-links a { display: block; padding: 14px 16px; color: #181818; font-size: 13px; font-weight: 550; }
.header.is-light { color: #0c0d0f; background-color: #f4f2ee; }
.header.is-light .nav-links { background: #fff; }
.header.is-light .nav-note { color: #767a80; }
.header.is-light .menu-toggle { color: #0c0d0f; background: #fff; border-color: #deddda; }
.header.is-light a:focus-visible, .header.is-light .menu-toggle:focus-visible { outline-color: #e0171f; }
.header.is-light nav.open { background: #fff; }

.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: 132px 5% 64px;
  background: #f4f2ee;
  color: #0c0d0f;
  color-scheme: light;
  scroll-margin-top: -96px;
}
.about-content { position: relative; max-width: 1720px; margin: 0 auto; }
.about-title {
  position: relative;
  max-width: 1320px;
  margin: 0;
  font-size: 100px;
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: 1.04;
  text-wrap: pretty;
}
.about-title > span { position: relative; z-index: 2; }
/* Only the dark phrase blends with the photos behind it. */
.about-title-ink { mix-blend-mode: difference; color: #e8e5df; }
.about-title-muted { color: #767a80; }
.about-details { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 104px; border-top: 1px solid #767a80; }
.about-details article { padding: 27px 32px 0; }
.about-details article:first-child { padding-left: 0; }
.about-details article:last-child { padding-right: 0; }
.about-details article + article { border-left: 1px solid #d9d7d3; }
.about-details h3 { margin: 0 0 14px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; }
.about-details p { max-width: 410px; margin: 0; font-size: 16px; line-height: 1.55; font-weight: 400; color: #494b4e; }

.image-trail {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, #000f 50%, #000e 60%, #000b 70%, #0007 80%, #0003 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, #000f 50%, #000e 60%, #000b 70%, #0007 80%, #0003 90%, transparent 100%);
}
.trail-image {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(104px, 6.9vw, 132px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
}

@media(max-width:1100px) {
  .hero { padding-top: 92px; }
  .nav-links a { padding: 14px 11px; }
  .about { padding-inline: 4%; }
  .about-title { font-size: 86px; }
  .about-details article { padding-inline: 24px; }
}
@media(max-width:900px) {
  html { scroll-padding-top: 84px; }
  .hero { padding-top: 84px; }
  .about { padding: 112px 5% 56px; scroll-margin-top: -84px; }
  .about-title { font-size: clamp(54px, 8.7vw, 76px); }
  .about-details { margin-top: 72px; }
  .about-details article { padding-inline: 20px; }
  .nav-links a { min-height: 44px; padding: 12px; }
}
@media(max-width:600px) {
  html { scroll-padding-top: 80px; }
  .hero { padding-top: 80px; }
  .about { min-height: auto; padding: 108px 6% 48px; scroll-margin-top: -80px; }
  .about-title { font-size: clamp(38px, 10.8vw, 64px); line-height: 1.08; letter-spacing: -.055em; }
  .about-details { grid-template-columns: 1fr; margin-top: 56px; }
  .about-details article { padding: 24px 0; }
  .about-details article + article { border-left: 0; border-top: 1px solid #d9d7d3; }
  .about-details article:last-child { padding-bottom: 0; }
  .about-details h3 { font-size: 20px; margin-bottom: 12px; }
  .about-details p { font-size: 16px; }
}
@media(hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) { .image-trail { display: none; } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
}