/* CV: the landing's type and palette, set as a sober document. Tokens and fonts come from /style.css. */
.hud .id { text-decoration: none; }

.cv { inline-size: min(100% - 2 * var(--gutter), 50rem); margin-inline: auto; padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) 4rem; }

.cv-head { display: grid; gap: 0.9rem; padding-block-end: 1.75rem; border-block-end: 2px solid var(--yellow); }
.cv h1 { margin: 0; font: 900 clamp(2.6rem, 1.6rem + 4vw, 4.75rem)/0.9 var(--display); text-transform: uppercase; color: var(--yellow); view-transition-name: name; }
.role { margin: 0; font-weight: 600; font-size: 1.15rem; }
.contacts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0; padding: 0; list-style: none; font: 500 0.85rem/1.5 var(--data); }
.contacts a { color: var(--cyan); }
.cv-head .btn { justify-self: start; margin-block-start: 0.4rem; border: 0; cursor: pointer; }

.cv h2 { margin: 2.75rem 0 1rem; font: 900 clamp(1.7rem, 1.4rem + 1vw, 2.2rem)/1 var(--display); text-transform: uppercase; color: var(--yellow); }
.cv p { max-inline-size: 68ch; }
.job li b { color: var(--cyan); font-weight: 700; }

.job { margin-block-end: 2rem; break-inside: avoid; }
.job-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; padding-block-end: 0.4rem; border-block-end: 1px solid var(--rule); }
.job-head strong { font: 800 1.45rem/1.1 var(--display); text-transform: uppercase; }
.job-head strong span { margin-inline-start: 0.5rem; font: 600 1rem var(--text); text-transform: none; color: var(--dim); }
.job-head > span { font: 500 0.8rem var(--data); color: var(--dim); }
.job h3 { margin: 0.9rem 0 0.3rem; font: 700 0.72rem/1.4 var(--data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.job ul { margin: 0.4rem 0 0; padding-inline-start: 1.2rem; }
.job li + li { margin-block-start: 0.25rem; }
.job li::marker { color: var(--red); }

.skills { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.skills dt { font: 700 0.75rem/1.9 var(--data); letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); }
.skills dd { margin: 0; }
@media (width < 36rem) { .skills { grid-template-columns: 1fr; gap: 0.1rem; } .skills dd { margin-block-end: 0.6rem; } }

@media (hover: hover) and (pointer: fine) {
  .cv-head .btn:hover { background: var(--cyan); color: var(--ink); }
}

@media print {
  :root { color-scheme: light; }
  html, body { background: #fff; }
  :root { --ink: #fff; --paper: #000; --dim: #444; --yellow: #000; --cyan: #000; --red: #000; --rule: #bbb; }
  @page { size: A4; margin: 12mm 14mm; }
  body { font-size: 9.5pt; line-height: 1.4; }
  .no-print { display: none !important; }
  a { text-decoration: none; }
  .cv { inline-size: auto; padding: 0; }
  .cv-head { gap: 0.3rem; padding-block-end: 0.6rem; border-block-end-width: 1.5px; }
  .cv h1 { font-size: 26pt; }
  .role { font-size: 10.5pt; }
  .cv h2 { margin: 0.9rem 0 0.4rem; font-size: 14pt; }
  .cv p { margin: 0.3rem 0; }
  .job { margin-block-end: 0.7rem; }
  .job-head strong { font-size: 12.5pt; }
  .job-head strong span { font-size: 9.5pt; }
  .job h3 { margin: 0.35rem 0 0.1rem; }
  .job ul { margin-block-start: 0.15rem; }
  .job li + li { margin-block-start: 0; }
  .skills { gap: 0.05rem 1rem; }
  .skills dt { line-height: 1.5; }
}