/* =========================================================================
   The founders row — one component, two addresses.

   The same drawing on the landing page and on /about: one row of four boxes
   at 4:5, three portraits and the mark on its own plate, one border weight
   across all four. It lives here rather than in either page's stylesheet
   because it is now on both, and a row that drifts between the two pages is
   the drift this file exists to prevent — the same reason the nav's script
   was pulled out of three copies into nav.js.

   What stays with each page: the section wrapper and its heading. The row is
   the same; how much air it gets, and what it is introduced as, is the page's
   own business. metal.js draws the plate on whichever page hosts it; the
   baked still stands until the shader reports it is drawing.
   ========================================================================= */


/* One row of four: an empty cell, then the three founders. The empty cell is a
   real cell rather than an offset, so the row starts on the same column edge as
   everything else on the page and there is somewhere to put a fourth card. */
.founders {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fx-space-sm);
}

/* One frame, one border weight, across all four — the three portraits and the
   mark's plate share a box, a border and a 4:5 so the row reads as one set. */
.founder,
.founder-plate {
  margin: 0;
  border: 1px solid var(--fx-border-soft);
  border-radius: var(--fx-radius);
  aspect-ratio: 4 / 5;
}

/* The cards go somewhere now, so the border lights under the pointer — the
   note that used to stand here said to add this back WITH the link, and this
   is that. Only the linked ones: a card that lights and does not click is the
   exact promise that note was refusing to make. */
.founder {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--fx-raised);
}

/* The whole card is the hit area, but the LINK is the name — one anchor with
   real text rather than an empty box wrapped around the figure. `figcaption`
   has to stay a direct child of `figure` to be valid, so an <a> around the
   whole card is not available; the name's ::after is stretched over the card
   instead, which is the same click target and keeps the accessible name.

   z-index 2 puts it over the caption's own scrim and the plate, and under
   nothing — the caption text below it is not interactive. */
.founder--linked {
  transition: border-color 240ms var(--fx-ease);
}
.founder--linked:hover,
.founder--linked:focus-within {
  border-color: var(--fx-orange);
}

.founder__link {
  text-decoration: none;
}
.founder__link::after {
  content: "";
  position: absolute;
  /* NOT `inset: 0`. The caption is itself absolutely positioned, so it — not
     the card — is this pseudo-element's containing block, and `inset: 0` gets
     you a hit area the size of the caption alone. The sides and the bottom do
     line up with the card's edges, so only the top needs to escape: it
     overshoots well past the card and `.founder`'s own `overflow: hidden`
     trims it back to exactly the card. */
  top: -1000px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

/* The plate is the frame the portrait fills. It holds the box whether or not
   there is a photo yet, so dropping one in later changes no layout. */
/* `isolation: isolate` is load-bearing: the paper blends with its backdrop,
   and without a stacking context of its own that backdrop is the whole page
   behind the card, not the photograph inside it. */
.founder__plate {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Monochrome, with a touch of contrast back: greyscale flattens a photo's
   midtones, and the midtones are what has to read through the orange. */
.founder__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.08);
}

/* Coarse pointers have no hover, so the second line would be unreachable.
   There, both roles simply sit at full strength — see the caption rules. */

/* The mark's plate: a photograph for ground, the paper over it, and the mark
   centred on top. It carries the same `isolation` as a portrait plate because
   the paper on it blends the same way. */
.founder-plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--fx-raised);
}
/* Monochrome, on the same terms as the three portraits beside it: the row is
   one set, and a colour plate in it reads as the odd cell rather than the
   fourth. Greyscale also hands the whole card's colour budget to the mark. */
.founder-plate__ground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
/* The mark on its own, not the lockup — and big, because it is the only thing
   on this plate. Square, so one number sets both sides.

   The shader mounts its canvas INTO this box and its own stylesheet puts that
   canvas at z-index -1, behind whatever else the box holds. That is why the
   still sits inside rather than beside it: the canvas lands underneath, and
   the still is simply switched off once the shader says it is drawing. */
.founder-plate__metal {
  position: relative;
  z-index: 1;
  width: 66%;
  aspect-ratio: 1;
}
.founder-plate__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 240ms var(--fx-ease);
}
.founder-plate__metal[data-live="true"] .founder-plate__mark {
  opacity: 0;
}

/* Paper. The look is Paper's `paper-texture` shader — fibre, crumples,
   roughness and drops layered over the image — but not the library: that ships
   as a React component over WebGL, and this page has no React, no bundler and
   a stated no-library rule for its other three canvases. A shader that renders
   the same four static noise layers on every frame is a raster asset wearing a
   GPU, so it is baked as one.

   The tile is 4:5, the card's own ratio, and stretched to fill: one tile per
   card means no repeat and therefore no seam, which a square tile at a fixed
   pixel size would have shown twice across a 350px column.

   `overlay` rather than flat alpha — a flat grey wash would just fog the
   photograph. Overlay multiplies the shadows and screens the highlights, which
   is what makes grain sit IN the picture instead of on top of it. */
.founder__paper {
  position: absolute;
  inset: 0;
  background-image: url("/img/paper.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}

/* Name and role sit on the portrait's bottom-left. The scrim is a solid block
   at low alpha rather than a fade — a fade here is a gradient, which the
   design system does not take. */
.founder__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  /* THE BAND IS A LABEL, NOT A PANEL. Three lines had taken it to 109px on a
     420px card — a quarter of the portrait spent on furniture, and the
     portrait is the reason the card exists. Every number in here is set for
     the ink and nothing else: 4px between the name and the title block and
     4px inside it (the rhythm still widens downward, it is just tighter), and
     the two line-heights below are set rather than inherited, because body
     copy's leading is generous by design and these are labels. It comes back
     at 87px with all three lines still on it.

     Even on all four sides. It was 16 top against 14 elsewhere, which is not a
     considered asymmetry — it is --fx-space-sm meeting a hand-set number. */
  gap: 4px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.55);
}
.founder__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #ffffff;
}
/* Both lines, always. The title the card carries, and the work each of them
   was doing before it — one under the other rather than one behind the other.
   A hover swap hid half the caption from anyone on a touch screen and made the
   second line something you had to discover; neither is worth the reveal. */
.founder__roles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.founder__role {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fx-orange);
}

/* One step quieter than the current title, so the pair reads in order rather
   than as two equal claims.

   Two lines of room held on every card, not only the one that needs them: the
   longest of the three wraps, and without this the other two captions sit a
   line shorter and their names step down out of alignment across the row. */
.founder__role--prior {
  color: var(--fx-smoke);
  /* The reserve is centred, and that is the whole of this rule. The longest of
     the three roles wraps at most widths; without a reserve that caption runs a
     line taller than its neighbours, which moves the name AND the top edge of
     the scrim behind it, so one card sits visibly out of step. The slack on the
     cards that need one line has to go somewhere, and centring it splits the
     leftover so neither mismatch is large enough to read. */
  /* Two lines, written as two lines: `em` here resolves against this rule's
     own 10px, so the reserve is exactly 2 x the line-height above it and
     follows either number if it ever changes. It was a hand-set 32px, which
     was two lines of the leading this rule no longer inherits. */
  min-height: calc(2 * 1.3em);
  display: flex;
  align-items: center;
}

/* Below this the four columns are too narrow to hold a portrait: the mark's
   plate goes, and the three portraits take the row on their own. */
@media (max-width: 900px) {
  .founders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .founder-plate {
    display: none;
  }
  /* THREE LINES IN THE TWO-COLUMN BAND. Under about 800px the longest prior
     role takes a third row, and a reserve one line short lets that caption grow
     past its neighbour's again — the exact thing the reserve exists to stop.
     All three cards take the deeper reserve, not just the one that needs it,
     which is what keeps the leftover centred and equal across the row. */
  .founder__role--prior {
    min-height: calc(3 * 1.3em);
  }
}
@media (max-width: 560px) {
  .founders {
    grid-template-columns: minmax(0, 1fr);
  }
  /* One column: no row to be out of step with, so the deeper reserve is just
     dead air under every caption. Back to two lines. */
  .founder__role--prior {
    min-height: calc(2 * 1.3em);
  }
}