/* CV page: one reading column on screen, and a plain single-column document when printed, so the
   PDF that screening software reads is the same text a visitor sees. */
/* one typeface for the CV itself: the serif carries headings, body and meta; only the site header and the button use the sans */
.cv-head, .cv-sec { --font-data: var(--font-body); --font-mono: var(--font-body); }
.cv { max-width: 860px; padding-block: 28px 72px; display: grid; gap: 34px; }
.cv-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.cv-updated { font-family: var(--font-data); font-size: var(--step--2); color: var(--muted); }

.cv-head { display: grid; gap: 8px; }
.cv-head h1 { font-size: var(--step-3); }
.cv-title { font-family: var(--font-display); font-size: var(--step-1); color: var(--emit); }
.cv-contact { font-family: var(--font-data); font-size: var(--step--2); color: var(--muted); line-height: 2; }

.cv-sec { display: grid; gap: 14px; }
.cv-sec h2 { font-size: var(--step-1); letter-spacing: 0.01em; font-family: var(--font-display); font-weight: 400; color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.cv-sec > p { max-width: var(--measure); }
.cv-note { color: var(--muted); font-size: var(--step--1); }
.cv-items { display: flex; flex-direction: column; gap: 14px; }
.cv-item { border-left: 2px solid var(--rule); padding: 4px 0 4px 18px; display: grid; gap: 8px; transition: border-color 0.25s, opacity 0.25s; }
.cv-item h3 { font-size: var(--step-0); line-height: 1.3; }
.cv-item h3 a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cv-item h3 a:hover { color: var(--emit); } }
.cv-item ul { padding-left: 1.1em; display: grid; gap: 6px; font-size: var(--step--1); line-height: 1.6; }
.cv-meta { font-family: var(--font-data); font-size: var(--step--2); color: var(--muted); }
.cv-links { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--font-data); font-size: var(--step--2); letter-spacing: 0.01em; text-decoration: none; color: var(--ink); border: 1px solid var(--rule); border-radius: 3px; padding: 6px 14px; min-height: 36px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--emit); } }
.cv-urls, .print-only { display: none; }
.how summary { font-family: var(--font-data); font-size: var(--step--2); color: var(--muted); cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.how p { font-size: var(--step--1); color: var(--muted); max-width: var(--measure); padding-top: 4px; }

.cv-skills { display: flex; flex-direction: column; gap: 16px; }
.cv-group { display: grid; gap: 6px; }
.cv-group h3 { font-size: var(--step--1); font-family: var(--font-data); font-weight: 500; color: var(--ink); letter-spacing: 0.01em; }
.cv-group p { font-size: var(--step--1); line-height: 2.1; color: var(--muted); }
.skill { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dashed var(--muted); padding: 0; cursor: pointer; text-align: left; }
.skill[aria-pressed="true"] { color: var(--emit); border-bottom-color: var(--emit); }
@media (hover: hover) and (pointer: fine) { .skill:hover { color: var(--emit); border-bottom-color: var(--emit); } }
/* evidence map: a selected skill lights the work that shows it and dims the rest */
.cv.filtering .cv-item { opacity: 0.35; }
.cv.filtering .cv-item.lit { opacity: 1; border-left-color: var(--emit); }
@media (prefers-reduced-motion: reduce) { .cv-item { transition: none; } }

@media (max-width: 640px) {
  .cv { padding-block: 18px 56px; gap: 28px; }
  .cv-sec h2 { font-size: var(--step-0); }
}

/* Print, and the PDF made from it: black on white, one column, standard headings, the links written out. */
@media print {
  @page { size: A4; margin: 9mm 12mm; }
  :root { --ink: #000; --muted: #333; --rule: #bbb; color-scheme: light; }
  html, body { background: #fff !important; color: #000; }
  body { font-size: 9.5pt; line-height: 1.26; }
  .print-only { display: inline; }
  .cv-group { display: block; }
  .cv-group h3 { display: inline; }
  .cv-group h3::after { content: ": "; }
  body::before, .top-wrap, .cv-tools, .cv-links, .how, .screen-only { display: none !important; }
  .gutter { padding: 0; }
  .cv { max-width: none; padding: 0; gap: 7pt; }
  .cv-head h1 { font-size: 20pt; letter-spacing: 0; }
  .cv-title { color: #000; font-size: 12pt; }
  .cv-contact, .cv-meta { font-family: var(--font-body); font-size: 9.5pt; color: #333; line-height: 1.4; }
  .cv-contact a, .cv-item h3 a { text-decoration: none; color: #000; }
  .cv-sec { gap: 6pt; break-inside: auto; }
  .cv-sec h2 { font-family: var(--font-display); font-size: 11pt; color: #000; letter-spacing: 0.01em; padding-bottom: 3pt; border-bottom: 1px solid #999; }
  .cv-note { font-size: 9pt; color: #333; }
  .cv-items { gap: 4pt; }
  .cv-item { border: 0; padding: 0; gap: 2pt; opacity: 1 !important; }
  .cv-item h3, .cv-meta, .cv-sec h2 { break-after: avoid; }
  .cv-item li { break-inside: avoid; }
  .cv-item h3 { font-size: 10pt; }
  .cv-edu .cv-item, .cv-item.compact { display: block; }
  .cv-edu .cv-item h3, .cv-edu .cv-meta, .compact h3, .compact .cv-meta { display: inline; }
  .cv-edu .cv-meta::before, .compact .cv-meta::before { content: " · "; }
  .compact ul { display: inline; padding: 0; }
  .compact li { display: inline; }
  .compact li::before { content: ": "; }
  .cv-item ul { font-size: 9pt; line-height: 1.26; gap: 0; }
  .cv-urls { display: block; font-family: var(--font-body); font-size: 9pt; color: #333; }
  .cv-group h3 { font-family: var(--font-display); font-size: 10pt; color: #000; }
  .cv-group p { font-size: 9pt; line-height: 1.35; color: #000; }
  .skill { border: 0; color: #000; }
  .cv-sec > p { font-size: 9pt; max-width: none; }
}
