/* About Matt Hankerson - built from the DiffUI reference, fitted to the Sacred ID shell. */

.ab-page {
  --about-ground: #06181b;
  --about-veil: rgba(4, 13, 15, .78);
  --cream: #efe6d8;
  --nav-ground: 8, 20, 22;
  background: var(--about-ground);
}

.ab-page .deco-frame { inset: max(1.2vw, 8px); }

.about-page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(100vh, 820px);
  padding: calc(1.8vh + 78px + clamp(22px, 3.2vh, 56px)) clamp(28px, 3.3vw, 70px) clamp(30px, 4vh, 70px);
  background:
    radial-gradient(circle at 88% 22%, rgba(134, 209, 205, .12), transparent 28%),
    #06181b;
}

.about-page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: url("assets/reflections/moonlit-beach.webp") no-repeat right center / cover;
  opacity: .55;
  filter: saturate(.78) brightness(.7);
}

.about-page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 7, 8, .28) 0%, rgba(2, 7, 8, .46) 46%, rgba(2, 7, 8, .82) 58%, rgba(2, 7, 8, .9) 100%),
    radial-gradient(circle at 72% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .34) 58%, rgba(0, 0, 0, .68) 100%);
}

.about-page-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(320px, .95fr) minmax(420px, 1fr);
  gap: clamp(34px, 4.2vw, 86px); align-items: stretch;
  max-width: 1840px; min-height: calc(max(100vh, 820px) - 160px);
  margin: 0 auto;
}

.about-page-portrait {
  position: relative; min-height: 620px;
  border: 1px solid var(--accent-line);
  background: rgba(2, 8, 9, .42);
  overflow: hidden;
}

.about-page-portrait::before,
.about-page-portrait::after,
.about-page-copy::before,
.about-page-copy::after {
  content: ""; position: absolute; width: clamp(36px, 4vw, 72px); height: clamp(36px, 4vw, 72px);
  border: 1px solid rgba(201, 160, 99, .72); pointer-events: none;
}

.about-page-portrait::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.about-page-portrait::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }

.about-page-portrait img {
  width: 100%; height: 100%;
  min-height: 620px;
  object-fit: cover; object-position: 52% 50%;
  filter: saturate(.72) contrast(1.08) brightness(.72);
}

.about-page-portrait figcaption {
  position: absolute; left: clamp(28px, 3vw, 62px); right: clamp(28px, 3vw, 62px); bottom: clamp(24px, 3vh, 50px);
  display: flex; align-items: center; gap: clamp(12px, 1.4vw, 28px);
  font: 500 clamp(10px, .9vw, 16px)/1.7 var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--cream);
}

.about-page-portrait figcaption::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--accent-line);
}

.about-page-rail {
  position: absolute; z-index: 2; left: clamp(28px, 3vw, 62px); top: clamp(100px, 15vh, 190px);
  display: grid; gap: .85em;
  color: var(--accent);
  font: 500 clamp(10px, .92vw, 17px)/1 var(--mono);
  letter-spacing: .3em; text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9), 0 0 22px rgba(0, 0, 0, .86);
}

.about-page-rail::after {
  content: ""; width: 1px; height: clamp(60px, 9vh, 116px);
  margin: .6em 0 0 .45em; background: var(--accent-line);
}

.about-page-copy {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(34px, 5vw, 96px) clamp(20px, 2.6vw, 54px);
}

.about-page-copy::before { right: 0; top: 0; border-left: 0; border-bottom: 0; opacity: .5; }
.about-page-copy::after { right: 0; bottom: 0; border-left: 0; border-top: 0; opacity: .5; }

.about-page-orbit {
  position: absolute; right: clamp(-18px, -1vw, 0px); top: clamp(24px, 4vh, 72px);
  width: clamp(150px, 17vw, 280px); aspect-ratio: 1;
  border: 1px dashed rgba(201, 160, 99, .32); border-radius: 50%;
  pointer-events: none;
}

.about-page-orbit::before {
  content: ""; position: absolute; inset: 18%; border: 1px solid rgba(201, 160, 99, .24); border-radius: 50%;
}

.about-page-orbit::after {
  content: ""; position: absolute; right: 17%; top: 19%;
  width: 36%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 65% 45%, transparent 0 38%, rgba(201, 160, 99, .86) 39% 58%, transparent 59%);
  transform: rotate(-22deg);
}

.about-page-eyebrow {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: clamp(20px, 3vh, 46px);
  color: var(--accent);
  font: 500 clamp(12px, 1.1vw, 20px)/1 var(--mono);
  letter-spacing: .34em; text-transform: uppercase;
}

.about-page-eyebrow::before,
.about-page-eyebrow::after {
  content: ""; display: block; height: 1px; background: var(--accent-line);
}

.about-page-eyebrow::before { width: 72px; }
.about-page-eyebrow::after { flex: 1 1 auto; max-width: 390px; }

.about-page-eyebrow i {
  width: 16px; height: 16px; border: 2px solid var(--accent); transform: rotate(45deg);
}

.about-page-title {
  max-width: 11.5em;
  font: 900 clamp(50px, 5.7vw, 112px)/.88 var(--display);
  letter-spacing: -.045em; word-spacing: .05em;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .55);
}

.about-page-lede {
  max-width: 15.5em;
  margin-top: clamp(22px, 3.3vh, 46px);
  font: 300 clamp(26px, 2.75vw, 54px)/1.28 var(--serif);
  color: #fff;
}

.about-page-body {
  max-width: 28em;
  margin-top: clamp(18px, 2.4vh, 34px);
  font: 300 clamp(18px, 1.58vw, 31px)/1.38 var(--serif);
  color: rgba(239, 230, 216, .92);
}

.about-page-rule {
  position: relative; height: 1px; max-width: 720px;
  margin: clamp(26px, 4vh, 54px) 0 clamp(18px, 2.8vh, 36px);
  background: var(--accent-line);
}

.about-page-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid var(--accent); background: var(--about-ground); transform: rotate(45deg);
}

.about-page-cta {
  align-self: flex-start;
  margin-top: clamp(18px, 2.8vh, 40px);
  border-color: var(--accent);
}

.about-page-cta svg { color: var(--action); }
.about-page-cta:hover { background: rgba(134, 209, 205, .12); }

.about-page-kicker {
  margin-top: clamp(14px, 1.9vh, 26px);
  color: rgba(239, 230, 216, .72);
  font: 500 clamp(10px, .88vw, 16px)/1.7 var(--mono);
  letter-spacing: .22em; text-transform: uppercase;
}

.about-page-note {
  position: absolute; right: clamp(20px, 3vw, 62px); bottom: clamp(30px, 5vh, 80px);
  padding-left: 18px; border-left: 1px solid var(--accent-line);
  color: var(--accent);
  font: 500 clamp(10px, .88vw, 16px)/1.8 var(--mono);
  letter-spacing: .28em; text-transform: uppercase;
}

@media (max-width: 1120px) {
  .about-page-hero { min-height: 0; padding-top: calc(1.8vh + 78px + 34px); }
  .about-page-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .about-page-portrait { min-height: min(78vh, 760px); }
  .about-page-portrait img { min-height: min(78vh, 760px); object-position: 52% 50%; }
  .about-page-copy { padding: clamp(34px, 6vw, 72px) clamp(12px, 3vw, 36px) clamp(74px, 9vh, 120px); }
  .about-page-note { position: static; margin-top: clamp(24px, 4vh, 48px); align-self: flex-end; }
}

@media (max-width: 720px) {
  .ab-page .nav { height: 64px; padding: 0 12px 0 16px; }
  .ab-page .nav-end::before { display: none; }
  .ab-page .nav .bp-cta { padding: 10px 16px; font-size: 12px; letter-spacing: .08em; gap: 0; white-space: nowrap; }
  .ab-page .nav .bp-cta svg { display: none; }
  .ab-page .brand img { height: 26px; margin-left: calc(26px * -0.15); }
  .about-page-hero { padding: calc(1.8vh + 64px + 22px) 18px 34px; }
  .about-page-portrait { min-height: 520px; }
  .about-page-portrait img { min-height: 520px; }
  .about-page-rail { top: 40px; }
  .about-page-title { font-size: clamp(42px, 12vw, 66px); }
  .about-page-lede { font-size: clamp(23px, 7.2vw, 34px); }
  .about-page-body { font-size: clamp(17px, 5.1vw, 22px); }
  .about-page-eyebrow { gap: 14px; letter-spacing: .22em; }
  .about-page-eyebrow::before { width: 28px; }
  .about-page-orbit { opacity: .45; }
}