/* About page — an editorial memoir in five chapters */

.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* ── Opening ── */
.ab-open {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: end; gap: 0;
  padding: 140px var(--gutter) clamp(60px, 10vh, 110px);
  border-bottom: 1px solid var(--rule);
}
.ab-open__title {
  margin: .35em 0 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(60px, 12.5vw, 230px); line-height: .86; letter-spacing: -.035em;
}
.ab-open__title span { display: block; opacity: 0; transform: translateY(.25em); animation: rise 1.6s var(--ease) forwards; }
.ab-open__l2 { padding-left: 18vw; animation-delay: .25s !important; }
@keyframes rise { to { opacity: 1; transform: none; } }
.ab-open__route {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: clamp(40px, 7vh, 80px) 0 0;
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase; font-weight: 500; color: var(--graphite);
  opacity: 0; animation: rise 1.4s var(--ease) .7s forwards;
}
.ab-open__route i { width: clamp(24px, 6vw, 90px); height: 1px; background: var(--ink); opacity: .35; }
.ab-open__route span:last-child { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .ab-open__title span, .ab-open__route { animation: none; opacity: 1; transform: none; } }

/* ── Chapters ── */
.chapter {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 130px);
  align-items: center;
  padding: clamp(110px, 16vh, 200px) var(--gutter);
}
.chapter--flip .chapter__photo { order: 2; }
.chapter--long { align-items: start; }
.chapter__photo { margin: 0; }
.chapter__photo--sticky { position: sticky; top: 12vh; }

.frame { overflow: hidden; background: var(--paper-2); position: relative; }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--land { aspect-ratio: 4 / 3; }
/* photos with no headroom: keep their own proportions, no crop, no drift */
.frame--still { aspect-ratio: 1401 / 2324; width: min(100%, calc(82vh * 1401 / 2324)); }
.frame.frame--still img { height: 100%; object-position: 50% 0; transform: none; }
.frame--still + figcaption { width: min(100%, calc(82vh * 1401 / 2324)); }
.frame img {
  width: 100%; height: 115%; object-fit: cover; will-change: transform;
  filter: grayscale(1) contrast(1.05);
  transition: filter 1.4s var(--ease);
}
.chapter__photo:hover .frame img { filter: grayscale(0) contrast(1); }
.chapter__photo figcaption {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-style: italic; color: var(--graphite); font-size: 16px;
}

.chapter__text { max-width: 34em; }
.chapter--flip .chapter__text { justify-self: end; }
.chapter__text p { margin: 0 0 1.15em; color: #2c2c2e; }
.chapter__n {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 2em !important;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase; font-weight: 500; color: var(--graphite) !important;
}
.chapter__n span { font-family: var(--display); font-style: italic; font-size: clamp(44px, 4.4vw, 72px); letter-spacing: -.01em; color: var(--ink); line-height: .8; text-transform: none; }

.dropcap { font-size: clamp(21px, 1.6vw, 26px); line-height: 1.5; color: var(--ink) !important; }
.dropcap::first-letter {
  font-family: var(--display); float: left; font-size: 4.2em; line-height: .78;
  padding: .06em .1em 0 0; color: var(--ink);
}
.say { font-family: var(--display); font-size: clamp(26px, 2.2vw, 36px); line-height: 1.2; color: var(--ink) !important; margin: 1.2em 0 !important; }

.aside {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px;
  margin: 1.8em 0 !important; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.aside__num { font-family: var(--display); font-size: clamp(54px, 5.4vw, 92px); line-height: .9; letter-spacing: -.03em; color: var(--ink); }
.aside__txt { font-style: italic; color: var(--graphite); font-size: 18px; max-width: 12em; }

@media (max-width: 900px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter--flip .chapter__photo { order: 0; }
  .chapter--flip .chapter__text { justify-self: start; }
  .chapter__photo--sticky { position: static; }
}

/* ── Interludes ── */
.interlude {
  min-height: 90vh; display: grid; place-content: center; text-align: center;
  padding: 80px var(--gutter); overflow: hidden;
}
.interlude__word {
  margin: 0; font-family: var(--display); font-style: italic;
  font-size: clamp(90px, 24vw, 420px); line-height: .9; letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: 1px var(--ink);
  background: linear-gradient(90deg, var(--ink) 0 50%, transparent 50%) 0 0 / 200% 100% no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
}
.interlude--ink { background: var(--ink); color: var(--paper); min-height: 100vh; }
.interlude__quote {
  margin: 0; font-family: var(--display); font-size: clamp(48px, 7.6vw, 140px); line-height: 1; letter-spacing: -.025em;
}
.interlude__quote em { font-style: italic; }
.interlude__after {
  margin: clamp(40px, 7vh, 70px) auto 0; max-width: 26em; font-style: italic; color: var(--ash);
  font-size: clamp(19px, 1.5vw, 24px);
}

/* ── Closing ── */
.ab-close {
  display: grid; justify-items: center; text-align: center; gap: 44px;
  padding: clamp(130px, 20vh, 240px) var(--gutter);
}
.ab-close__mark { width: 110px; }
.ab-close__text {
  margin: 0; max-width: 18em; font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 3.8vw, 64px); line-height: 1.15; letter-spacing: -.015em;
}
.ab-close__text em { color: var(--green); }