/* about-page.css. Owner: S3. The About page's own look (merge plan 3.3,
   "About"). Not to be confused with about.css, the custom websites page's
   about section with the halftone photo, which S1 uses as it is and this
   page does not load.

   Tokens, bands, .label, .lede, .statement-section/.statement, .text-button
   and .band h2 rise-in all come from base.css, components.css and
   sections.js/sections.css (shared, loaded before this file on every
   marketing page). This file only lays out what is specific to /about/: the
   hero's full-bleed montage (the highlight media treatment, plan 3.1), the
   two-column sections, the racing-photo case, the Skool mark and the close.

   Photography renders black and white site-wide (brand-visual.md, plan 3.5):
   the montage frames and the racing photo both carry the same grayscale
   treatment the draft's story.css and the custom page's about.css used. */

/* ── hero: full-bleed montage, then the label/h1/intro column ───────────── */

.about-hero { padding-block: 0; }

.about-hero-media {
  position: relative;
  overflow: hidden;
  height: min(56vw, calc(100vh - var(--bar-h)));
  height: min(56vw, calc(100svh - var(--bar-h)));
  background: var(--ink-lift);
}
.montage-frame { position: absolute; inset: 0; opacity: 0; }
.montage-frame.is-active { opacity: 1; }
:root[data-motion="full"] .montage-frame { transition: opacity 900ms ease; }
.montage-frame img, .montage-frame video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 24%;
  filter: grayscale(1) contrast(1.06);
}

.about-hero-body { padding-block: clamp(40px, 6vw, 72px) var(--band-y); }
.about-hero-body .label { margin-bottom: clamp(16px, 2.4vw, 24px); }
.about-hero-body h1 { max-width: 18ch; }
.about-scroll { margin-top: clamp(24px, 3vw, 36px); }

/* ── statement: the Pause motion button under the line ──────────────────── */

.about-statement .label { margin-bottom: clamp(16px, 2.4vw, 24px); }
.about-pause { margin-top: clamp(20px, 2.6vw, 28px); }

/* ── the four short sections: label + h2 beside the body copy ───────────── */

.about-block-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.about-block-head .label { margin-bottom: clamp(16px, 2.4vw, 24px); }
.about-block-copy p + p { margin-top: 1em; }
.about-block-copy { max-width: var(--measure); }
@media (max-width: 800px) {
  .about-block-grid { grid-template-columns: 1fr; }
}

/* ── section 2: the racing photograph beside the copy ────────────────────── */

.about-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.about-case-media img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
.about-case-copy .label { margin-bottom: clamp(16px, 2.4vw, 24px); }
.about-case-copy p + p { margin-top: 1em; }
.about-case-copy { max-width: var(--measure); }
@media (max-width: 800px) {
  .about-case-grid { grid-template-columns: 1fr; }
  .about-case-media { order: -1; }
}

/* ── section 3: the Skool mark under the copy, not a link ───────────────── */

.about-community-mark { margin-top: clamp(32px, 4.5vw, 56px); }
.about-community-mark img { width: 100%; max-width: 280px; height: auto; }

/* ── close: the line, the signature, one action, centred on red ─────────── */

.about-close { text-align: center; }
.about-close .statement { margin-inline: auto; }
.about-signature {
  width: 180px; height: auto;
  margin: clamp(28px, 4vw, 44px) auto 0;
}
.about-close-actions { margin-top: clamp(24px, 3vw, 32px); justify-content: center; }