/*
 * about.css — About page.
 *
 * Same language as the landing page: one centred thing on a tall, quiet stage,
 * then full-bleed bands beneath it. No two-column split, no side-by-side
 * panels. The rules that divide this page are horizontal, not vertical.
 */

.about-page {
  min-height: calc(100dvh - var(--nav-h));
}

.about-page main {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--nav-h));
}

/* ----------------------------------------------------------------- hero */

.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  min-height: calc(78dvh - var(--nav-h));
  padding: clamp(3rem, 10vh, 7rem) var(--pad-hero);
  text-align: center;
}

/* .hero-title is a flex row of chunks; centre it inside the column. */
.about-hero__title {
  justify-content: center;
  font-size: clamp(2.75rem, 11vw, 7rem);
}

.about-hero__lede {
  max-width: 34ch;
  font-size: var(--size-lede);
  font-weight: 400;
  line-height: 1.45;
  text-wrap: balance;
}

/* --------------------------------------------------------------- ticker */

/*
 * Full-bleed black band. It is the page's only dark surface and the only place
 * imagery appears, which is what makes it land after all that white.
 *
 * about.js drives .ticker__track with a GSAP x-tween. The track holds the image
 * set twice; it scrolls exactly one set width, then repeats, so the loop is
 * seamless. The duplicate set is aria-hidden.
 */
.ticker-band {
  height: min(52dvh, 24rem);
  min-height: 10.5rem;
  border-top: var(--rule);
  border-bottom: var(--rule);
  background: var(--ink);
  overflow: hidden;
}

.ticker,
.ticker__viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.ticker {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}

.ticker__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  height: 100%;
  min-height: 100%;
  will-change: transform;
}

.ticker__set {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  height: 100%;
}

.ticker__item {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-right: var(--rule);
  overflow: hidden;
}

.ticker__item a {
  display: block;
  width: 100%;
  height: 100%;
}

.ticker__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--dur-tint) ease;
}

.ticker__item a:hover img,
.ticker__item a:focus-visible img {
  filter: grayscale(0);
}

/* -------------------------------------------------------------- content */

.about-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Stacked bands, each centred on the page's centre line. The label sits above
   the prose rather than beside it — the vertical rule is gone from this page. */
.about-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 2rem);
  padding: clamp(3.5rem, 11vh, 7rem) var(--pad-hero);
  border-bottom: var(--rule);
  text-align: center;
  scroll-margin-top: var(--nav-h);
}

.about-section:last-of-type {
  border-bottom: none;
}

.about-section__label {
  font-family: var(--font-display);
  font-size: var(--size-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-section__content {
  max-width: 46ch;
}

.about-section__content p {
  margin-bottom: 1.25rem;
  font-size: var(--size-lede);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

.about-section__content p:last-child {
  margin-bottom: 0;
}

.about-page .site-footer {
  margin-top: auto;
  border-top: var(--rule);
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 768px) {
  .about-hero {
    min-height: calc(66dvh - var(--nav-h));
  }

  .ticker-band {
    height: min(40dvh, 15rem);
    min-height: 9rem;
  }
}