/* TRACK RECORD — composed from the Field Notes component library. */

.page-track main { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); }

/* Header */
.tr-header { padding: clamp(var(--sp-7), 5vw, var(--sp-9)) 0 var(--sp-6); }
.tr-header h1 { margin-bottom: var(--sp-5); }
.tr-lede { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.45; color: var(--ink); max-width: 60ch; }
.tr-sub { margin-top: var(--sp-4); color: var(--ink-soft); max-width: 62ch; }
.tr-header .idband { margin-top: var(--sp-7); }

/* Quote band goes full-bleed, but its inner column must line up with the 900px
   page column. .wrap-wide is wider than that, so it would hang left. */
.tr-quote-band { margin: var(--sp-7) calc(50% - 50vw); padding-left: var(--pad); padding-right: var(--pad); }
.tr-quote-band .wrap-wide { max-width: 900px; margin: 0 auto; padding: 0; }
.tr-quote { margin: 0; max-width: 62ch; }
.tr-quote p { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.3; font-weight: 600; margin-bottom: var(--sp-4); }
.tr-quote cite { font-style: normal; font-size: var(--fs-small); opacity: .8; }

/* Sections */
.tr-section { padding: var(--sp-7) 0; border-top: 1px solid var(--line); }
.tr-section > h2 { margin-bottom: var(--sp-2); }
.tr-section > h2::after { content: ""; display: block; width: 44px; height: 3px; background: var(--clay); border-radius: 2px; margin: var(--sp-4) 0 var(--sp-5); }
.tr-section-dek { color: var(--ink-soft); max-width: 62ch; margin-bottom: var(--sp-6); }

/* Roles */
.role { padding: var(--sp-6) 0; border-bottom: 1px solid var(--line); }
.role:first-of-type { padding-top: 0; }
.role-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.role-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }
.role-org { font-size: var(--fs-small); color: var(--clay); font-weight: 600; margin-top: 2px; }
.role-note { color: var(--muted); font-weight: 400; }
.role-dates { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.role-scope { color: var(--ink-soft); margin-top: var(--sp-4); max-width: 66ch; }
.role-points { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.role-points li { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; padding-left: 20px; position: relative; max-width: 70ch; }
.role-points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--field); }
.role-points strong { color: var(--ink); font-weight: 600; }

/* Earlier roles */
.tr-earlier { margin-top: var(--sp-7); }
.tr-earlier h3 { margin-bottom: var(--sp-5); }
.row-item.static { cursor: default; }
.row-item.static:hover { transform: none; }

/* Capabilities */
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.cap { padding: var(--sp-5) var(--sp-6); }
.cap-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-3); }
.cap p { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }

/* Fit list — shared shape with the Work page */
.fit-list { list-style: none; display: grid; gap: var(--sp-4); margin-top: var(--sp-2); }
.fit-list li { color: var(--ink-soft); padding-left: 26px; position: relative; line-height: 1.55; max-width: 70ch; }
.fit-list.yes li::before { content: "✓"; position: absolute; left: 0; color: var(--field); font-weight: 700; }
.fit-list strong { color: var(--ink); }

/* Credentials */
.cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-6); }
.cred-label { font-size: var(--fs-tiny, .78rem); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3); }
.cred ul { list-style: none; display: grid; gap: var(--sp-2); }
.cred li { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.5; padding-left: 16px; position: relative; }
.cred li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); }

@media (max-width: 720px) {
  .cap-grid, .cred-grid { grid-template-columns: 1fr; }
  .role-head { flex-direction: column; gap: var(--sp-1); }
}