/* ==========================================================================
   Textum Media — about.css
   Page-only layout for /about. Loaded after site.css.
   Everything else on this page uses shared components from site.css.
   ========================================================================== */


/* --- The promise, set as an oversized pull statement ---------------------
   site.css has no pull-quote primitive: .section__title caps at 18ch (too
   tight for a full sentence) and .lede is secondary text. The one large
   decorative bracket allowed per page (DESIGN.md) frames it.
   ------------------------------------------------------------------------ */

.about__promise {
  position: relative;
  /* Hug the statement instead of stretching to the row, so the bracket that
     is sized from this box frames the words and not the empty space. */
  align-self: start;
}

.about__pull {
  position: relative;
  z-index: var(--z-raised);
  max-width: 20ch;
  margin-top: var(--space-3);
}

.about__bracket {
  display: none;
}

@media (min-width: 901px) {
  /* Stretched to frame the whole statement: preserveAspectRatio="none" on the
     SVG plus vector-effect="non-scaling-stroke" on its paths keeps the arms
     hairline-thin at any box size. */
  .about__bracket {
    display: block;
    top: calc(var(--space-4) * -1);
    left: calc(var(--space-4) * -1);
    width: calc(100% + var(--space-8));
    height: calc(100% + var(--space-8));
    z-index: var(--z-base);
  }
}


/* --- The four values: gapless 2×2 grid ----------------------------------
   Built the way .stats is built — 1px grid gaps expose the rule colour as
   shared hairlines — but with .card cells, so the card's own border and
   radius are dropped in favour of the shared ones.

   These four are a set, not a sequence, so they no longer carry the
   bracketed [ 01 ]…[ 04 ] numbering or a per-card accent hue (that job now
   belongs solely to the portfolio's industry colours). The cards read as
   quiet: a plain mono kicker and a neutral hover, no colour anywhere.
   ------------------------------------------------------------------------ */

.values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background-color: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}

.values > .card {
  padding: var(--space-5) var(--space-4);
  border: 0;
  border-radius: 0;
}

.values__kicker {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg-2);
}

/* A quiet top rule and hover tint in neutral ink, not an accent hue. */
.values > .card {
  position: relative;
  transition: background-color var(--dur-slow) var(--ease);
}

.values > .card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background-color: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slower) var(--ease);
}

.values > .card:hover {
  background-color: var(--surface-2);
}

.values > .card:hover::before {
  transform: scaleX(1);
}

@media (min-width: 641px) {
  .values > .card {
    padding: var(--space-6) var(--space-5);
  }
}

@media (min-width: 901px) {
  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* --- Studio facts: mono label / value rows ------------------------------
   A key/value list in the bracket motif. This numbering is real: each row
   is a distinct fact, not a sequence eyebrow, so a single-line label isn't
   enough — a value long enough to wrap falls back to the row's left edge
   instead of hanging under itself, so this is its own grid.
   ------------------------------------------------------------------------ */

.about__facts {
  border-top: 1px solid var(--rule);
}

.about__fact {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  line-height: var(--lh-body);
}

.about__fact-key {
  /* Each row is its own grid, so the key column is sized here rather than by
     the track, to keep the values in one column. */
  min-width: 12ch;
  color: var(--fg-2);
  white-space: nowrap;
}

.about__fact-value {
  color: var(--fg);
}

@media (min-width: 641px) {
  .about__fact {
    column-gap: var(--space-3);
    font-size: var(--fs-sm);
  }
}


/* --- Industries marquee -------------------------------------------------
   Shared .marquee, pushed clear of the grid above it.
   ------------------------------------------------------------------------ */

.about__marquee {
  margin-top: var(--space-9);
}

/* The strip of concept sites sits under the industry marquee in the ink
   section and needs room to breathe from it. */
.about__strip {
  margin-top: var(--space-6);
}