/* ============================================================
   about.css — About page (BRIEF §7, revised structure).
   2.2:1 self-portrait hero (video loop when delivered, dark still
   until then), scroll cue, statement as the page's main text,
   selected clients.
   ============================================================ */

/* ---- hero: full-width 2.2:1 media slot (~45vw tall) ---- */
.about-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
  background: #10131a;
}

.about-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: var(--grade-filter);
}

/* ink veil: reads as a quiet dark frame */
.about-hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(14, 17, 22, 0.38);
}

/* INK scrim: header legibility above, metadata zone below */
.about-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 14, 19, 0.66) 0%,
    rgba(11, 14, 19, 0.16) 34%,
    rgba(11, 14, 19, 0.10) 52%,
    rgba(11, 14, 19, 0.62) 78%,
    rgba(11, 14, 19, 0.88) 100%
  );
}

/* gallery label, bottom-left — kept in production as a museum
   wall label (BRIEF §7); one line only */
.about-hero__label {
  position: absolute;
  left: calc(40 * var(--u));
  bottom: calc(26 * var(--u));
  font-family: var(--font-mono);
  font-size: max(calc(9.5 * var(--u)), 8.5px);
  letter-spacing: var(--meta-tracking);
  color: var(--numerals);
  pointer-events: none;
  white-space: nowrap;
}

/* The `↓` scroll cue that stood at the bottom-centre of the hero is
   REMOVED (author, 14.09.2026), on every viewport. Everything that
   existed only to serve it went with it: the pulse keyframes, its
   hover colour, its reduced-motion variant, and the
   `scroll-behavior: smooth` on `html:has(.page-about)` — which was
   there for the cue's own anchor click and nothing else. The gallery
   label in the opposite corner stays; so does `id="statement"` on
   the section below, which is a valid deep-link target whether or not
   anything on the page points at it. */

/* ---- statement: editorial essay (BRIEF §7) ---- */

/* one shared content edge for statement + clients (≈63ch of the
   statement body size); px so every block resolves the same width.
   --label-gutter is the fixed gap between the hanging mono label and
   the statement's left edge. */
.page-about {
  --about-col: 620px;
  --label-gutter: 52px;
}

/* the statement column stays centered in the viewport (where it sat
   before the label existed — right-side breathing room intact); the
   mono museum label hangs into the left margin, attached to the
   text and moving with it. Below 1024px the label stacks above the
   lead (media query further down). Clients share the same centered
   column, so both keep one left edge. */
.statement {
  position: relative;
  z-index: 2;
  margin: calc(64 * var(--u)) auto 0;
  padding: 0 var(--edge-x);
}

.statement__body {
  max-width: var(--about-col);
  margin: 0 auto;
}

/* mono label hung in the left margin: right edge a fixed gutter left
   of the centered statement's left edge, top-aligned with the lead's
   first line. right-aligned so the text hugs the gutter. */
.statement__label {
  position: absolute;
  top: 0; /* optical align to the lead's first line */
  right: calc(50% + var(--about-col) / 2 + var(--label-gutter));
  font-family: var(--font-mono);
  font-size: max(calc(9.5 * var(--u)), 8.5px);
  letter-spacing: var(--meta-tracking);
  text-transform: uppercase;
  text-align: right;
  color: var(--numerals);
  white-space: nowrap;
  pointer-events: none;
}

/* body: quiet grotesque, dimmed ~80% relative to the lead */
.statement__body p {
  font-family: var(--font-grotesque);
  font-weight: 400;
  font-size: clamp(15px, 0.28vw + 14px, 17px);
  line-height: 1.6;
  color: rgba(233, 233, 228, 0.8);
}

.statement__body p + p {
  margin-top: 1.6em;
}

/* lead — serif roman (approved exception to the italic-only serif
   role), the brightest text on the page after headings */
.statement__body p:first-child {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 32px);
  line-height: 1.2;
  color: var(--paper);
}

/* ---- selected clients (no numeral — numerals stay on category
   pages); same column pattern as the statement: one left edge ---- */
.about-section {
  position: relative;
  z-index: 2;
  /* a deliberate pause after the statement: ~1.8× paragraph
     spacing, one composition rather than content + footer */
  margin: calc(56 * var(--u)) auto calc(96 * var(--u));
  padding: 0 var(--edge-x);
}

/* clients sit in the same centered column as the statement — one
   shared left edge (the statement label hangs outside this column) */
.about-section__inner {
  max-width: var(--about-col);
  margin: 0 auto;
}

.about-section__title {
  font-family: var(--font-grotesque);
  font-size: calc(22 * var(--u));
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--paper);
}

/* one run-in line in Cormorant roman, natural wrapping — reads as
   the closing strophe of the statement, not as metadata; names come
   joined from src/data/clients.json, near-full text brightness. The
   SELECTED CLIENTS heading above stays untouched — the contrast
   between heading and strophe is the composition. */
.clients-line {
  margin-top: calc(26 * var(--u));
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(17px, 1.4vw, 19px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.7;
  color: rgba(233, 233, 228, 0.95);
}

/* each name carries its following "/" as one unbreakable unit (the
   separator is glued inside the span at build time), so a line can
   start with a name but never with a separator */
.clients-line__name {
  white-space: nowrap;
}

/* below 1024px the hanging label no longer fits in the left margin:
   drop it back into the flow above the lead as a small heading-label
   (mobile behavior unchanged). */
@media (max-width: 1024px) {
  .statement__label {
    position: static;
    max-width: var(--about-col);
    margin: 0 auto calc(20 * var(--u));
    text-align: left;
  }
}

/* ============================================================
   Mobile (≤768px): header returns to the flow so it does not
   cover the short hero band; the still gets a 16:9 frame (site
   convention for mobile stills); statement and clients recompose
   on the 20px inset.
   ============================================================ */
@media (max-width: 768px) {
  .page-about .site-header {
    position: static;
  }

  .about-hero {
    margin-top: 18px;
    aspect-ratio: 16 / 9;
  }

  .about-hero__label {
    left: var(--edge-x);
    bottom: 14px;
    font-size: 8px;
    letter-spacing: 0.18em;
  }

  .statement {
    margin-top: 44px;
  }

  .about-section {
    margin: 44px auto 64px;
  }

  .clients-line {
    margin-top: 20px;
  }
}