/* ============================================================
   about.css — About page (BRIEF §7, reference about-v2).
   Fullscreen self-portrait hero (video loop when delivered,
   dark still until then), statement, clients, tools/practice.
   ============================================================ */

/* ---- hero: 100vh self-portrait loop slot ---- */
.about-hero {
  position: relative;
  z-index: 1;
  height: 100vh;
  min-height: 600px;
  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 over the lower half */
.about-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 14, 19, 0.66) 0%,
    rgba(11, 14, 19, 0.16) 30%,
    rgba(11, 14, 19, 0.10) 48%,
    rgba(11, 14, 19, 0.62) 74%,
    rgba(11, 14, 19, 0.90) 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;
}

/* display line + metadata, lower third */
.about-hero__titleblock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(26 * var(--u));
  text-align: center;
  padding: 0 calc(40 * var(--u));
}

.about-hero__display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 5.2vw, 96px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--paper);
  max-width: 16em;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(11, 14, 19, 0.55);
}

.about-hero__meta {
  font-family: var(--font-mono);
  font-size: max(calc(10.5 * var(--u)), 9px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tagline-color);
  line-height: 1;
}

/* ---- statement: 2–3 short first-person paragraphs ---- */
.statement {
  position: relative;
  z-index: 2;
  max-width: calc(1280 * var(--u));
  margin: calc(96 * var(--u)) auto 0;
  padding: 0 calc(64 * var(--u));
}

.statement__body {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  max-width: var(--content-max); /* ~34em (BRIEF §7) */
}

.statement__body p {
  font-family: var(--font-grotesque);
  font-weight: 300;
  font-size: max(calc(15.5 * var(--u)), 14px);
  line-height: 1.8;
  color: var(--paper);
}

/* ---- numbered sections: clients (I), tools/practice (II) ---- */
.about-section {
  position: relative;
  z-index: 2;
  max-width: calc(1280 * var(--u));
  margin: calc(110 * var(--u)) auto 0;
  padding: 0 calc(64 * var(--u));
}

.about-section__head {
  display: flex;
  align-items: flex-end;
  gap: calc(36 * var(--u));
}

.about-section__head .numeral {
  font-size: calc(150 * var(--u));
  line-height: 0.78;
}

.about-section__text {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  padding-bottom: calc(5 * var(--u));
}

.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);
}

.about-section__note {
  font-family: var(--font-mono);
  font-size: max(calc(10.5 * var(--u)), 9px);
  letter-spacing: var(--meta-tracking);
  color: var(--secondary);
}

/* clients: flat mono caps list, 2–3 columns → 1 on mobile */
.clients-grid {
  margin-top: calc(44 * var(--u));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(18 * var(--u)) calc(48 * var(--u));
  max-width: calc(900 * var(--u));
}

.clients-grid > div {
  font-family: var(--font-mono);
  font-size: max(calc(11 * var(--u)), 10px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* tools / practice: two dry mono lines */
.practice-lines {
  margin-top: calc(44 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.practice-lines > div {
  font-family: var(--font-mono);
  font-size: max(calc(11 * var(--u)), 10px);
  letter-spacing: 0.24em;
  color: var(--secondary);
}