/* SHAPE: Spec Sheet.
   A dated record set in two columns: metadata left, evidence right,
   with everything ruled rather than boxed. Credentials close it as a
   literal specification table. No other v2 page may use this shape.

   Fixes from the v1 track record: measure ran to 93 chars/line (the
   worst on the site), the six capability cards were the third instance
   of the same card grid, and the pull-quote attribution measured 1.4:1
   because an opacity multiplier sat on a color-mix toward transparent. */

/* ---------- Header ---------- */
.rec-head { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0 clamp(var(--sp-6), 5vw, var(--sp-7)); }
.rec-head h1 { font-size: var(--fs-hero); max-width: 15ch; }
.rec-head .lead { margin-top: var(--sp-5); max-width: 56ch; }
.rec-sub { margin-top: var(--sp-4); color: var(--muted); max-width: 60ch; }

.rec-facts {
  margin-top: clamp(var(--sp-6), 5vw, var(--sp-7));
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
}
.rec-facts > div { padding: var(--sp-5) var(--sp-5) 0 0; }
.rec-facts dt { font-size: var(--fs-small); font-weight: 600; color: var(--clay-deep); margin-bottom: 6px; }
.rec-facts dd { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; }

/* ---------- Testimony ---------- */
/* Display-size quote, set to fill the band rather than sit in a narrow
   left column. The size scales so the line count stays sensible from
   390px up, and line-length only targets body copy, not display type. */
.rec-testimony { padding: clamp(var(--sp-7), 6vw, var(--sp-8)) 0; }
.rec-testimony blockquote { max-width: none; }
.rec-testimony blockquote p {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.6rem);
  line-height: 1.32; color: var(--paper);
  letter-spacing: var(--tr-display);
  max-width: none; text-wrap: balance;
}
/* Solid color, no opacity multiplier: this is the element that measured
   1.4:1 in v1. --on-field-soft is 5.0:1 on --field. */
.rec-testimony cite {
  display: block; margin-top: var(--sp-5);
  font-style: normal; font-size: var(--fs-small);
  color: var(--on-field-soft);
}

/* ---------- Sections ---------- */
.rec-section { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0; }
.rec-section > .wrap-wide > h2 { margin-bottom: var(--sp-6); }
.rec-dek { color: var(--muted); max-width: 58ch; margin: calc(var(--sp-6) * -1 + var(--sp-2)) 0 var(--sp-6); }

/* ---------- Roles ---------- */
.role {
  display: grid; grid-template-columns: 14rem minmax(0, 1fr);
  gap: clamp(var(--sp-4), 3vw, var(--sp-6));
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line);
}
.role:first-of-type { border-top: 1px solid var(--line-strong); }
.role-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.role-dates { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--faint); }

/* Company marks, linked to the company.
   brightness(0) flattens each one to ink. It is doing two jobs: five logos in
   five palettes otherwise read as a sponsor wall against an editorial page,
   and two of these ship white-on-transparent (drawn for a dark header), so in
   their delivered colours they are invisible on paper. The filter preserves
   alpha, so a white mark and a full-colour one both land as the same ink.
   Any future mark on an OPAQUE plate would come out a black slab instead:
   check a new logo on the page before adding it. */
.role-logo, .re-logo { display: block; line-height: 0; }
.role-logo { margin: var(--sp-2) 0 2px; }
.re-logo { margin-top: var(--sp-3); }
.role-logo img, .re-logo img {
  display: block; width: auto; height: 22px; max-width: 150px;
  filter: brightness(0); opacity: .6;
  transition: opacity .18s var(--ease);
}
.re-logo img { height: 20px; max-width: 120px; }
.role-logo:hover img, .role-logo:focus-visible img,
.re-logo:hover img, .re-logo:focus-visible img { opacity: 1; }
.role-logo:focus-visible, .re-logo:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; }
.role-org { font-weight: 600; color: var(--clay-deep); font-size: var(--fs-small); }
.role-note { display: block; font-weight: 400; color: var(--faint); }
.role-body h3 { margin-bottom: var(--sp-3); }
/* Measure held under 75ch. v1 let this run to 93. */
.role-body p { color: var(--ink-soft); max-width: var(--measure); }
.role-points { list-style: none; margin-top: var(--sp-4); }
.role-points li {
  position: relative; padding-left: 1.1rem;
  font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft);
  max-width: var(--measure);
}
.role-points li + li { margin-top: var(--sp-3); }
.role-points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong);
}

/* ---------- Earlier ---------- */
.rec-subhead { margin: var(--sp-8) 0 var(--sp-4); }
.rec-earlier { list-style: none; border-top: 1px solid var(--line-strong); }
.rec-earlier li {
  display: grid; grid-template-columns: 14rem minmax(0, 1fr);
  gap: 4px clamp(var(--sp-4), 3vw, var(--sp-6));
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
}
.re-date { grid-row: 1 / 3; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--faint); }
.re-role { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.re-note { font-size: var(--fs-small); color: var(--muted); max-width: var(--measure); }

/* ---------- Capabilities ---------- */
.caps { border-top: 1px solid var(--line-strong); }
.caps > div {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr);
  gap: var(--sp-3) clamp(var(--sp-4), 3vw, var(--sp-6));
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--line);
}
.caps dt { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--fs-h3); letter-spacing: var(--tr-display); }
.caps dd { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.6; max-width: var(--measure); }

/* ---------- Principles ---------- */
.principles { list-style: none; counter-reset: p; border-top: 1px solid var(--line-strong); }
.principles li {
  counter-increment: p; position: relative;
  padding: var(--sp-5) 0 var(--sp-5) 3.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft); max-width: var(--measure);
}
.principles li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: var(--sp-5);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--clay-deep);
}

/* ---------- Credentials ---------- */
.creds { border-top: 1px solid var(--line-strong); }
.creds > div {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--sp-2) clamp(var(--sp-4), 3vw, var(--sp-6));
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-strong);
}
.creds dt { font-size: var(--fs-small); font-weight: 600; color: var(--clay-deep); }
.creds dd { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.7; max-width: var(--measure); }

/* ---------- Close ---------- */
.rec-close { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0; }
.rec-close .close-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--sp-5), 4vw, var(--sp-7)); align-items: center;
}
.rec-close h2 { max-width: 20ch; }
.rec-close p { margin-top: var(--sp-4); max-width: 52ch; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .rec-facts { grid-template-columns: repeat(2, 1fr); }
  .role, .rec-earlier li, .caps > div, .creds > div { grid-template-columns: 1fr; }
  .role-meta { flex-direction: row; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
  .role-logo { margin: 0; order: -1; }
  .re-date { grid-row: auto; }
  .rec-close .close-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rec-facts { grid-template-columns: 1fr; }
  .rec-facts > div { padding-right: 0; }
}