body.route-about main { align-items: flex-start; overflow: auto; }
body.route-about .content {
  position: relative; right: auto; bottom: auto; z-index: 2;
  width: min(1420px, calc(100% - 56px)); margin: 0 auto;
  padding: clamp(88px,10vh,128px) 0 130px; text-align: left;
}
.about-page { width: 100%; color: #eaf5f2; }
.about-hero, .about-article {
  border: 1px solid rgba(116,220,217,.28); border-radius: 24px;
  background: rgba(2,21,27,.84); box-shadow: 0 26px 80px rgba(0,0,0,.36);
  backdrop-filter: blur(10px);
}
.about-hero {
  display: grid; grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr);
  gap: clamp(34px,5vw,78px); align-items: center; padding: clamp(18px,3vw,42px);
}
.about-portrait { margin: 0; }
.about-portrait img {
  display: block; width: 100%; max-height: 720px; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 16px; box-shadow: 0 20px 46px rgba(0,0,0,.4);
}
.about-kicker { color: #74ddda; font-size: 13px; font-weight: 800; letter-spacing: .23em; text-transform: uppercase; }
.about-intro h1 {
  max-width: 760px; margin: 16px 0 12px; color: #f2faf7;
  font-size: clamp(30px,3.6vw,50px); line-height: 1.08; letter-spacing: -.035em;
}
.about-role { margin: 0 0 32px; color: #78ddda; font-size: clamp(17px,1.7vw,24px); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.about-lead { max-width: 720px; margin: 0; color: rgba(232,246,242,.86); font-size: clamp(19px,1.55vw,24px); line-height: 1.65; }
.about-article { margin-top: 34px; padding: clamp(30px,5vw,74px); padding-left: clamp(92px,8vw,118px); }
.about-section { max-width: 1180px; margin: 0 auto; }
.about-section + .about-section { margin-top: clamp(48px,6vw,82px); padding-top: clamp(42px,5vw,66px); border-top: 1px solid rgba(116,220,217,.2); }
.about-section h2 { margin: 0 0 22px; color: #eef9f6; font-size: clamp(30px,3.6vw,50px); line-height: 1.08; letter-spacing: -.035em; }
.about-section p { margin: 0 0 20px; color: rgba(226,242,238,.84); font-size: clamp(17px,1.25vw,20px); line-height: 1.78; text-align: justify; text-wrap: pretty; }
.about-section p:last-child { margin-bottom: 0; }
.about-project-invite { color: #8ce4e1 !important; font-weight: 750; }
.about-heading-link { color: inherit; text-decoration: none; }
.about-heading-link:hover, .about-heading-link:focus-visible,
.about-inline-link:hover, .about-inline-link:focus-visible { color: #8ce4e1; outline: none; }
.about-inline-link { color: #8ce4e1; font-weight: 700; text-underline-offset: .18em; }
.about-active { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(280px,.72fr); gap: clamp(34px,5vw,72px); align-items: center; max-width: 1180px; }
.about-cave-photo { margin: 0; }
.about-cave-photo img { display: block; width: 100%; max-height: 680px; aspect-ratio: 3/4; object-fit: cover; border: 10px solid #e9e5d9; box-shadow: 0 22px 48px rgba(0,0,0,.46); transform: rotate(1.6deg); }
.about-cave-photo figcaption { margin-top: 16px; color: rgba(214,235,231,.62); font-size: 12px; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.about-cta { display: flex; justify-content: center; margin-top: 66px; }
.about-cta a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 25px; color: #7ce0dd; border: 1px solid rgba(124,224,221,.55); border-radius: 999px; background: rgba(12,54,61,.66); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.about-cta a:hover, .about-cta a:focus-visible { color: #06191e; background: #7ce0dd; outline: none; }

@media (max-width: 850px) {
  body.route-about .content { width: min(100% - 24px,680px); padding-top: 72px; }
  .about-hero { grid-template-columns: 1fr; }
  .about-portrait { max-width: 460px; margin: 0 auto; }
  .about-intro { text-align: center; }
  .about-lead { margin-inline: auto; }
  .about-active { grid-template-columns: 1fr; }
  .about-cave-photo { max-width: 470px; margin: 8px auto 0; }
  .about-section p { text-align: left; }
}

@media (max-width: 480px) {
  .about-hero, .about-article { border-radius: 16px; }
  .about-article { padding: 28px 20px 42px 52px; }
  .about-cave-photo img { border-width: 7px; transform: none; }
}