/* ─────────────────────────────────────────────────────────────────────────────
   cv.css — the CV page's styles (cv.html). Kept as its own sheet rather than an
   inline <style> block because the resume briefly had a matching page; the resume
   is now a PDF, so this has one consumer, but it stays split so the CV page's head
   reads like the rest of the site's.
   Everything is built on the tokens in colors_and_type.css, so both themes work
   without a .theme-light block of its own.
   Listed in deploy.sh's REQUIRED_CSS.
   ───────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* The header and the footer are the site's shared ones (components/site-header.js, site-footer.js; 2026-10-31). */

/* ── SHELL ── */
.cv-wrap { width: min(980px, 92vw); margin: 0 auto; }
main { padding-bottom: clamp(60px, 10vh, 110px); }

/* ── MASTHEAD ── */
.cv-head { padding: clamp(104px, 15vh, 168px) 0 clamp(32px, 5vh, 48px); }
.cv-kicker {
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--fg3); display: block; margin-bottom: 18px;
}
.cv-name {
  font: var(--type-title);
  letter-spacing: -0.03em; margin-bottom: 14px;
}
.cv-name em { font-style: normal; font-weight: inherit; color: inherit; animation: none; text-shadow: none; }
.cv-roles {
  font-size: clamp(16px, 2.2vw, 21px); line-height: var(--lh-snug);
  color: var(--fg2); max-width: 32ch; margin-bottom: 26px;
}
/* Contact line: set as instrumentation, the same register as the About ledger. */
.cv-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: var(--font-code); font-size: var(--text-xs);
  letter-spacing: 0.06em; color: var(--fg3);
  padding-top: 18px; border-top: 1px solid var(--border);
}
.cv-meta a { border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; }
.cv-meta a:hover, .cv-meta a:focus-visible { color: var(--fg-accent); border-bottom-color: currentColor; }

/* ── ACTIONS: the site's solid button and small link (colors_and_type.css .btn-notch, .link-caps; 2026-10-31) ── */
.cv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.cv-btn-note {
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--fg3);
  align-self: center;
}

/* ── SECTIONS: mono label in a left rail, content on the right ── */
.cv-section { border-top: 1px solid var(--border); padding: clamp(32px, 5vh, 52px) 0; }
.cv-section-grid { display: grid; grid-template-columns: 168px 1fr; gap: clamp(20px, 4vw, 48px); }
.cv-section-label {
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--fg3); padding-top: 4px;
}
.cv-section-body { min-width: 0; }

/* ── ENTRY: one role, project, or credential ── */
.cv-entry + .cv-entry { margin-top: clamp(26px, 4vh, 38px); }
.cv-entry-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 20px;
}
.cv-entry-title {
  font: var(--type-h3);
  letter-spacing: -0.01em;
}
.cv-entry-title em { font-style: normal; font-weight: inherit; color: inherit; animation: none; text-shadow: none; }
.cv-entry-date {
  font-family: var(--font-code); font-size: var(--text-xs);
  letter-spacing: 0.06em; color: var(--fg3); white-space: nowrap;
}
.cv-entry-sub {
  font-size: var(--text-sm); color: var(--fg2);
  margin-top: 5px; line-height: var(--lh-normal);
}
/* a link inside a sentence: one underline (2026-10-31) */
.cv-entry-sub a { color: var(--fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cv-entry-sub a:hover, .cv-entry-sub a:focus-visible { color: var(--fg1); }

/* Bullets: a hairline marker rather than a disc, to match the site's rule-and-label language. */
.cv-points { list-style: none; margin-top: 13px; display: grid; gap: 9px; }
.cv-points li {
  position: relative; padding-left: 20px;
  font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--fg2);
}
.cv-points li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 9px; height: 1px; background: var(--accent); opacity: 0.75;
}
.cv-points strong { color: var(--fg1); font-weight: 500; }

/* ── LEDGER: education facts, skills, exhibitions ── */
.cv-ledger { display: grid; gap: 0; }
.cv-ledger-row {
  display: grid; grid-template-columns: 148px 1fr; gap: 8px 20px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.cv-ledger-row:first-child { padding-top: 0; }
.cv-ledger-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cv-ledger-k {
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--fg3);
  padding-top: 3px;
}
.cv-ledger-v { font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg2); }
.cv-ledger-v strong { color: var(--fg1); font-weight: 500; }

/* ── COURSEWORK: a plain line with dots, no pills (Lucy, 2026-10-31) ── */
.cv-tags { display: flex; flex-wrap: wrap; gap: 0; margin-top: 11px; }
.cv-tag { font: var(--type-tag); color: var(--fg2); }
.cv-tag + .cv-tag::before { content: "\00b7"; margin: 0 .55em; color: var(--fg3); }

/* ── THE LAST LINE: the PDF again, for whoever read to the end ── */
.cv-end { border-top: 1px solid var(--border); padding: 26px 0 0; }

/* ── RESPONSIVE: the rail label stacks above its section ── */
@media (max-width: 760px) {
  .cv-section-grid { grid-template-columns: 1fr; gap: 16px; }
  .cv-ledger-row { grid-template-columns: 1fr; gap: 3px; }
  .cv-ledger-k { padding-top: 0; }
  .cv-entry-head { gap: 2px; }
  .cv-entry-date { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-meta a { transition: none; }
}

/* ── PRINT: the page itself is a usable CV on paper, so Ctrl+P is a third route ── */
@media print {
  .cv-actions, .cv-end { display: none; }
  body { background: #FFFFFF; color: #101010; }
  .cv-wrap { width: 100%; }
  .cv-head { padding: 0 0 18px; }
  .cv-section { padding: 16px 0; break-inside: avoid; }
  .cv-entry { break-inside: avoid; }
  .cv-points li, .cv-ledger-v, .cv-entry-sub { color: #333333; }
  .cv-name, .cv-entry-title strong, .cv-points strong, .cv-ledger-v strong { color: #101010; }
  .cv-name em, .cv-entry-title em { font-style: normal; font-weight: inherit; color: inherit; animation: none; text-shadow: none; }
  a { color: inherit; }
}

/* ── SWITCH: each page points at the other, because "CV" and "resume" are two
   different documents and a visitor who wants one often wants to know the other
   exists. Sits under the buttons so it reads as an aside to them, not a nav item. ── */
.cv-switch {
  margin-top: 20px;
  font-size: var(--text-sm); color: var(--fg2); line-height: var(--lh-normal);
}
.cv-switch a { color: var(--fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cv-switch a:hover, .cv-switch a:focus-visible { color: var(--fg1); }
@media print { .cv-switch { display: none; } }