/* ============================================================
   About — the only page-specific sheet. Everything structural
   (the content column, the footer, the eyebrow and claim type)
   comes from case-study.css; this sets the page's own alignment
   and adds the dated lists and the image slots.

   The alignment is a set of nested centred bands: a wide band
   for the headline, a slightly narrower one for the imagery,
   and a genuinely narrow one for the reading column. Every band
   is centred on the page, so the whole thing reads as one axis
   even though the prose inside the column stays left-aligned.
   ============================================================ */

:root {
  /* A page of writing rather than a page of work: the slight grey takes the
     glare off a screen of continuous text, and the image cards read as
     objects sitting on it rather than as holes cut out of white. */
  --page: #F3F3F3;

  /* One width for the whole page. The headline no longer breaks wider than
     the text: it sits inside the same column as everything else, so the page
     has a single left and right edge all the way down. */
  --head-w: 780px;
  --measure: 780px;
}

/* ── Page shell ────────────────────────────────────────── */

/* With no side index to clear, the column is simply centred. case-study.css
   floors its left margin at --nav-reserve to keep clear of that index, which
   would otherwise leave this page pushed to the right of the window. */
.content {
  width: min(var(--head-w), 100% - var(--edge) * 2);
  margin-inline: auto;
  padding-top: var(--block);
}

/* Every block sits in the one column: headline, prose, photographs, lists. */
.about__back,
.about__lede,
.eyebrow,
.claim,
.section__lede,
.entries {
  max-width: var(--measure);
  margin-inline: auto;
}

/* The rule still spans the window, but its contents line up with the headline
   band rather than with an index that is no longer there. */
.foot__bar {
  width: min(var(--head-w), 100%);
  margin-inline: auto;
}
.foot { --foot-inset: var(--edge); }
/* A shade darker than on white, so the wordmark carries the same weight
   against the grey that it does on the other pages. */
.foot__mark { --dot: #C9C9C9; }

/* Back to the homepage — the only route out, now that the index is gone. */
.about__back {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 40px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.2px;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.about__back:hover { color: var(--ink); }
.about__back svg { flex-shrink: 0; }

/* ── Intro ─────────────────────────────────────────────── */

/* Centred and lighter than the case study's title: this one opens a page
   about a person. */
.hero__title {
  max-width: var(--head-w);
  margin-inline: auto;
  font-size: clamp(26px, 3.1vw, 34px);
  font-weight: 500;
  line-height: 135%;
  text-align: center;
  /* Two short sentences centred in a wide column strand the last word on its
     own line. Balancing spreads them evenly instead of filling line one to
     the edge, and it re-solves at every width rather than at one breakpoint. */
  text-wrap: balance;
}

/* The headline is now the personal line, so the facts it used to carry sit
   under it in the quiet register instead of being lost. */
.about__dek {
  max-width: var(--measure);
  margin: 14px auto 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 155%;
  text-align: center;
  color: var(--ink-muted);
}

/* A 2x2 grid squared to the reading column below it. Four slots on one ratio
   rather than each photograph's own: a grid only reads as a grid when every
   cell matches, and these come from a mix of portrait and landscape frames. */
.about__shots {
  /* Squared to the reading column: the grid's outer edges land on the same
     line the prose below it starts and ends on. */
  max-width: var(--measure);
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.about__shot { margin: 0; }

/* 4:3, wider than tall, so the row of two spans the column without the block
   growing taller than the writing it introduces. The files are cut to the
   ratio, so `cover` has nothing left to crop and the framing cannot shift. */
.about__shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

/* A single measure rather than the two columns the case study uses: this is
   continuous prose, and a reader should not have to hop between columns to
   follow one train of thought. */
.about__lede {
  margin-top: var(--block);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about__lede p {
  font-size: 15px;
  font-weight: 500;
  line-height: 175%;
  color: var(--ink-body);
}

/* ── Dated lists ───────────────────────────────────────── */

/* Experience, speaking and awards share one shape: a date in a fixed lane on
   the left, the entry beside it. The lane is a fixed width rather than a
   fraction, so every date across all three lists starts on the same vertical
   line however long the entry beside it runs. */
.entries {
  margin-top: 26px;
  padding: 0;
  list-style: none;
}

.entry {
  display: grid;
  /* The lane is sized to the longest range so no date ever wraps: a two-line
     date reads as a second entry. */
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 0 24px;
  padding: 20px 0;
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.entry:first-child { padding-top: 0; }

.entry__when {
  font-size: 12px;
  font-weight: 500;
  line-height: 155%;
  white-space: nowrap;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.entry__role {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 150%;
  color: var(--ink);
}
/* Location and arrangement sit under the role in the quiet register: useful
   to know, never the thing being scanned for. */
.entry__place {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  line-height: 155%;
  color: var(--ink-faint);
}

/* case-study.css strips list styling globally, so the markers are put back
   here. They hang outside the text, which keeps the wrapped lines of a point
   aligned with its first line rather than with the bullet. */
.entry__points {
  margin-top: 10px;
  padding-left: 17px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.entry__points li {
  font-size: 14px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}
.entry__points li::marker { color: var(--ink-faint); }

.entry__note {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}

/* A fact about the company rather than a duty of the role, so it sits off the
   bullet list with its own space and drops a step in the hierarchy: read after
   the points, not as one of them. */
.entry__points + .entry__note--metric {
  margin-top: 13px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 700px) {
  /* The pair stacks rather than shrinking to two thumbnails. */
  .about__shots { grid-template-columns: 1fr; gap: 28px; }

  /* The date lane collapses above the entry rather than squeezing to a few
     characters a line. */
  .entry {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ── Elsewhere ─────────────────────────────────────────── */

/* The case study runs its claim at the weight of a section heading, which in
   this column would outweigh the page's own title. Pulled back so the
   headline stays the heaviest thing on the page. */
.claim {
  font-size: 22px;
  font-weight: 600;
  line-height: 145%;
}
.claim + .section__lede {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 175%;
  color: var(--ink-muted);
}

/* ── Sidekick's own face ───────────────────────────────── */

/* Jinky is the title face on the photo page; the one link that goes there is
   set in it, so the page it opens is announced in its own hand. Declared as
   photos.css declares it, unicode-range included: Jinky draws the comma and
   the apostrophe as filled blobs, so those two fall through to Caveat. */
@font-face {
  font-family: "Jinky";
  src: url("../assets/photos/fonts/JINKY.ttf") format("truetype");
  font-display: swap;
  unicode-range: U+0020-0026, U+0028-002B, U+002D-007E, U+00A0-024F, U+2190-21FF;
  /* The excluded comma and apostrophe now fall to the generic cursive rather
     than to Caveat, which this page no longer fetches. Neither character
     appears in the one line set in this face. */
}

/* ── Elsewhere link ────────────────────────────────────── */

/* The one outbound link on the page. It steps out of the left-aligned prose
   and centres in the column, which is the page's own axis: the headline and
   the dek are centred on it too, so the section closes on the same line it
   opened with. */
.elsewhere__cta {
  margin-top: 30px;
  text-align: center;
}

/* Same ink as the prose, with the hairline rule the homepage's bio links use,
   so it reads as a destination without shouting over the paragraph above it.
   The icon is the homepage's camera at the size this larger type asks for. */
.elsewhere__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* The gallery's own title hand. Setting the link in it puts a little of
     that page on this one before the panel opens, so the jump from a page of
     typed prose to a wall of handwriting is announced rather than sprung.
     Jinky's x-height is small for its em, so it is set well above the prose
     to carry the same weight on the line. */
  font-family: "Jinky", cursive;
  font-size: 44px;
  font-weight: 500;
  line-height: 130%;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--hairline);
  transition: box-shadow .3s var(--ease);
}
.elsewhere__link:hover { box-shadow: inset 0 -1px 0 currentColor; }
.elsewhere__icon { flex-shrink: 0; }

/* ── Hover caption ─────────────────────────────────────── */

/* Rides the cursor over the photo grid (js/shot-caption.js). Fixed rather
   than absolute so it is positioned from the pointer's own viewport
   coordinates, and pointer-events: none so it never blocks the photo it is
   describing. The transform is written by the script, so only opacity is
   transitioned here. */
.shot-tag {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  margin: 0;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.1px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.shot-tag.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .shot-tag { transition: none; }
}