/* The proof row (src/proof.js). gradescope.com puts three quote cards under each product pane,
   384 px wide and 24 px apart inside a 1200 px box (DISSECTION.md 3.1): a round photograph, the
   quote at its own size so the three cards end level, then the name, the role, and the institution
   behind a 3 px rule. Until a quote with consent exists (src/proof-data.js) the same cards hold
   the product's own output, and the institution line becomes a mono caption saying what each is.

   The row is 1200 px wide and centred on the page's 1120 px column, so the heading keeps the
   page's left edge and the cards keep gradescope's measure. Inside a card the three parts sit on a
   subgrid, so the texts, the names and the captions line up across the row. Under 900 px the
   cards stack in one column.

   The row is the size container (not the card: containment on the card would stop it being a
   subgrid). The text is set at --qs px on a full 384 px card, and scaled down with the card.

   Tokens only. Nothing here animates: the cards carry the site's .reveal and move only through
   its observer, never without the script, never under reduced motion. */

.proof .section-head .lede{text-wrap:pretty}

.proof-wide{width:min(1200px,calc(100vw - 48px));margin-left:calc((100% - min(1200px,calc(100vw - 48px))) / 2)}

.proof-row{display:grid;grid-template-columns:repeat(3,minmax(0,384px));gap:24px;margin-top:clamp(26px,3vw,40px);container-type:inline-size}

.proof-card{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:0;align-content:start;min-width:0;margin:0;padding:28px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}

/* the photograph, or the disc that stands in for it */
.proof-photo,.proof-disc{width:84px;height:84px;border-radius:50%;margin:0 0 22px}
.proof-photo{object-fit:cover;background:var(--tint)}
.proof-disc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--draft-wash);color:var(--navy);text-align:center;line-height:1}
.proof-disc-k{font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.proof-disc-v{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.proof-disc.is-signed{background:var(--emerald-wash)}
.proof-disc.is-signed .proof-disc-k{color:var(--emerald-ink)}
.proof-disc.is-initials{background:var(--emerald-wash);color:var(--emerald-ink);font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:.01em}

/* the text: a card's text box is a third of the row less the gaps, the padding and the border */
.proof-text{margin:0 0 24px;font-family:var(--font-display);font-weight:500;font-size:calc(var(--qs,20) * 1px);font-size:max(15px,calc(var(--qs,20) * min(1px,((100cqw - 48px) / 3 - 58px) / 326)));line-height:1.36;letter-spacing:-.012em;color:var(--navy);text-wrap:pretty}
.proof-text.is-quote{text-indent:-.42em}

/* the name, the role, and the institution or the caption */
.proof-by{display:flex;flex-direction:column;gap:3px;font-size:14.5px;line-height:1.4}
.proof-name{font-weight:700;color:var(--navy)}
.proof-role{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.proof-inst,.proof-cap{margin-top:9px;padding-left:10px;border-left:3px solid var(--emerald);font-family:var(--font-mono);color:var(--slate)}
.proof-inst{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.proof-cap{font-size:12px;letter-spacing:.01em}

.proof-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 28px;margin-top:22px}
.proof-foot .footnote,.proof-foot .thread-link{margin-top:0}

@supports not (grid-template-rows:subgrid){
  .proof-card{display:flex;flex-direction:column}
  .proof-by{margin-top:auto}
}

@media (max-width:899px){
  .proof-wide{width:auto;margin-left:0;max-width:600px}
  .proof-row{grid-template-columns:minmax(0,1fr);gap:16px}
  .proof-card{padding:24px}
  /* one card is the row: its text box is the row less the padding and the border */
  .proof-text{font-size:max(15px,calc(var(--qs,20) * min(1px,(100cqw - 50px) / 326)))}
}