.about-page { min-height: 100vh; overflow-x: hidden; }

.about-page .site-nav {
  position: absolute;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-page .nav-links a[aria-current="page"] { color: var(--text-primary); position: relative; }
.about-page .nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -17px;
  height: 1px;
  background: var(--accent);
}

.about-hero {
  width: min(1180px, calc(100% - 112px));
  min-height: 650px;
  margin: 0 auto;
  padding-top: 132px;
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  align-items: center;
  gap: 64px;
}

.about-hero-copy { align-self: start; padding-top: 58px; }
.about-hero h1, .story-ending, .about-footer span {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
}
.about-hero h1 { font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.about-rule { display: block; width: 24px; height: 1px; margin: 22px 0 20px; background: rgba(141, 122, 232, 0.72); }
.about-hero-copy > p { color: var(--text-secondary); font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; line-height: 1.45; }

.about-hero-media { align-self: stretch; min-height: 510px; overflow: hidden; }
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% center; }

.about-story { width: min(760px, calc(100% - 112px)); margin: 72px auto 0; }
.story-narrative {
  padding: 64px 0 24px;
  border-top: 1px solid var(--border);
}
.story-narrative > p {
  color: var(--text-secondary);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.16rem, 1.7vw, 1.32rem);
  line-height: 1.68;
}
.story-narrative > p + p { margin-top: 22px; }

.story-ending { margin-top: 30px; }
.story-ending p:first-child { color: var(--text-primary); font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.story-ending p:nth-child(2) { margin-top: 3px; color: var(--accent); font-size: clamp(1.25rem, 2vw, 1.55rem); font-style: italic; }
.about-signature { margin-top: 28px; color: var(--text-secondary); font-family: 'Cormorant Garamond', serif; font-size: clamp(1.3rem, 1.8vw, 1.5rem); font-style: italic; }

.about-footer {
  min-height: 245px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 46px;
  padding: 36px 6vw;
}
.about-footer span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 236, 0.48);
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.8;
  text-transform: uppercase;
}
.about-footer span:first-child { text-align: right; }
.about-footer img { width: clamp(86px, 10vw, 132px); }

@media (max-width: 860px) {
  .about-page .site-nav { padding: 0 24px; }
  .about-hero { width: 100%; min-height: auto; padding-top: 112px; grid-template-columns: 1fr; gap: 28px; }
  .about-hero-copy { padding: 22px 24px 0; }
  .about-hero-media { min-height: 430px; }
  .about-hero-media img { object-position: 69% center; }
  .about-story { width: calc(100% - 48px); margin-top: 72px; }
  .story-narrative { padding: 48px 0 20px; }
  .story-narrative > p { font-size: 1.08rem; }
  .about-footer { min-height: 170px; gap: 14px; padding-inline: 20px; }
  .about-footer span { font-size: clamp(2.4rem, 13vw, 5rem); }
}

@media (max-width: 520px) {
  .about-hero-media { min-height: 345px; }
  .about-story { width: calc(100% - 32px); }
  .about-footer img { width: 70px; }
}