/* ============================================================
   ABOUT — about.css
   Requires tokens.css, global.css and case-study-template.css.
   Linked by about.php through render_head()'s $extraCss.

   Same system as the rest of the site — same tokens, same type
   roles, same gold — but a different composition on purpose.
   Case studies are centred and symmetrical; this page hangs
   everything off one left edge and lets the media strip run
   wide. It should read as the same hand, not the same page.

     .about-wrap      the shared left-aligned column
     .about-hero      eyebrow / h1 / lead, ranged left
     .about-media     the image strip under the hero
     .about-intro     opening paragraphs, at lead size
     .about-history   the plotted CV — year, role, what it was
     .about-quotes    anonymous quotes, on a tinted band
   ============================================================ */

:root {
  /* ~70 characters at --text-dek. Every text block on the page
     shares it, so prose never runs wider than it reads. */
  --about-measure: 42rem;
}

/* ── The column everything hangs off ────────────────────────*/
.about-wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.about-measure { max-width: var(--about-measure); }

/* ── Hero ───────────────────────────────────────────────────*/
/* .cs-hero centres its children; this is the same furniture
   ranged left, which is most of what makes the page feel
   different at a glance. */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-block: var(--head-top) clamp(2rem, 4vw, 3.5rem);
}

/* The opening runs the full width of the column, so the heading, the
   lead and the intro all line up with the edges of the media strip
   below them. Only the history and the quotes pull back to a reading
   measure. */
/* Type comes from the shared page-title role in global.css. */
.about-hero h1 { align-self: stretch; }

.about-hero .about-lead {
  align-self: stretch;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  font-weight: var(--font-weight-lead);
  color: var(--cream-dim);
  text-wrap: pretty;
}

/* ── Media strip ────────────────────────────────────────────*/
/* Asymmetric on purpose — a case study's media rows are equal
   thirds, so unequal columns read as a different page while
   using the same radius and ratio language. */
.about-media {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  padding-block: clamp(1rem, 2vw, 2rem) clamp(3rem, 6vw, 5rem);
}

.about-shot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

/* Only the wide slot carries a ratio. Giving all three one would
   make each a definite height and defeat the grid's stretch, which
   is what keeps the row square along the bottom. */
.about-media .about-shot:first-child { aspect-ratio: 3 / 2; }

.about-shot img { width: 100%; height: 100%; object-fit: cover; }

/* Empty slots are the normal state until there's artwork, so they
   have to look deliberate rather than broken. */
/* Flat --surface, matching the quotes band, so the page has one
   raised tone rather than a grey one and a plum one. */
.about-shot:not(:has(img)) {
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-soft);
  background: var(--surface);
}

.about-shot:not(:has(img))::after {
  content: attr(data-slot);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--cream-dim);
  opacity: .5;
}

/* ── Intro ──────────────────────────────────────────────────*/
.about-intro p {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  font-weight: var(--font-weight-lead);
  color: var(--cream-dim);
  text-wrap: pretty;
}

.about-intro p + p { margin-top: .85em; }

.about-intro strong {
  color: var(--cream);
  font-weight: var(--font-weight-lead);
}

/* ── History ────────────────────────────────────────────────*/
.about-history { padding-block: clamp(3.5rem, 7vw, 7rem); }

.about-history h2 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: var(--text-section-title);
  line-height: var(--leading-section-title);
  letter-spacing: var(--tracking-section-title);
  font-weight: var(--font-weight-section-title);
  color: var(--cream);
}

.about-roles {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3.5vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: var(--about-measure);
  list-style: none;
}

/* Year above the role rather than in a date gutter: it keeps the
   whole page on one left edge and reads better at narrow widths. */
.about-role-years {
  display: block;
  font-size: var(--text-svc-label);
  line-height: var(--leading-svc-label);
  font-weight: var(--font-weight-svc-label);
  color: var(--gold);
}

.about-role h3 {
  margin-top: 10px;
  font-size: var(--text-svc-title);
  line-height: var(--leading-svc-title);
  letter-spacing: var(--tracking-svc-title);
  font-weight: var(--font-weight-svc-title);
  color: var(--cream);
}

.about-role h3 span {
  font-weight: var(--font-weight-regular);
  color: var(--cream-dim);
}

.about-role p {
  margin-top: 8px;
  color: var(--cream-dim);
  text-wrap: pretty;
}

/* The earliest years, compressed — enough to show the shape of the
   route without giving 2004 the same weight as eBay. */
.about-early {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  max-width: var(--about-measure);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--text-svc-body);
  line-height: var(--leading-svc-body);
  color: var(--cream-dim);
}

.about-early b {
  display: block;
  margin-bottom: 10px;
  font-size: var(--text-svc-label);
  line-height: var(--leading-svc-label);
  font-weight: var(--font-weight-svc-label);
  color: var(--gold);
}

/* ── Quotes ─────────────────────────────────────────────────*/
/* A tinted full-bleed band, so the shift from Ray's account of the
   work to other people's is visible before it's read. */
.about-quotes {
  /* --surface, the same grey as the homepage's .svc-cards panel,
     rather than the warmer --plum-soft. */
  background: var(--surface);
  border-block: 1px solid var(--rule-soft);
  padding-block: clamp(3rem, 6vw, 6rem);
}

/* No measure on this one — it's a short line and it's meant to stay
   on one. In gold: with the eyebrow gone it opens the section alone,
   and the accent is what tells you a new one has started. */
.about-quotes h2 {
  font-family: var(--font-display);
  font-size: var(--text-section-title);
  line-height: var(--leading-section-title);
  letter-spacing: var(--tracking-section-title);
  font-weight: var(--font-weight-section-title);
  color: var(--gold);
  text-wrap: balance;
}

.about-quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* The mark is the display serif at a size it was drawn for — it does
   the job a card border would, without boxing four quotes in. */
.about-quote::before {
  content: "\201C";
  display: block;
  margin-bottom: -.35em;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--gold);
}

.about-quote blockquote {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  font-weight: var(--font-weight-lead);
  color: var(--cream);
  text-wrap: pretty;
}

/* Quotes in a row are never the same length, so the attributions
   drop to the bottom of the row rather than each hanging off its
   own last line. */
.about-quote { display: flex; flex-direction: column; }

.about-quote figcaption {
  margin-top: auto;
  padding-top: 14px;
  font-size: var(--text-svc-label);
  line-height: var(--leading-svc-label);
  font-weight: var(--font-weight-svc-label);
  color: var(--cream-dim);
}

/* ── CTA ────────────────────────────────────────────────────*/
/* No rules here on purpose. The closing call to action is the shared
   .cs-cta, centred exactly as it is on the case studies and /work.
   The rest of this page ranges left, so the CTA reading as a return
   to the site's usual rhythm is the point of it. */

/* ── Narrow ─────────────────────────────────────────────────*/
/* 820px matches the case study template's breakpoint, so the whole
   site reflows at one width rather than several. */
@media (max-width: 820px) {
  /* Three slots won't survive a phone. The wide one carries the
     page; the other two sit side by side under it. */
  .about-media { grid-template-columns: 1fr 1fr; }
  .about-media .about-shot:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
  /* Nothing stretches them once the wide slot is on its own row. */
  .about-media .about-shot:not(:first-child) { aspect-ratio: 1 / 1; }

  .about-quote-grid { grid-template-columns: 1fr; }
}