/* ============================================================================
   CV — one A4 sheet on desktop, a plain column on a phone.

   The sheet is a real 210x297mm box, so "print to PDF" produces an actual A4
   with no scaling: @page takes the margins to zero and the sheet supplies its
   own. Below the width where that sheet would need shrinking to fit, the mm
   drop away and it becomes an ordinary fluid page — same content, same order,
   no pinching about.

   Fonts, colours and hairlines all come from styles.css.
   ========================================================================== */

.cv-page {
  background: #f4f4f5;
  min-height: 100vh;
  /* The back link supplies the top gap — it has to, or the two paddings stack
     and the link sits lower here than on a case page. */
  padding: 0 0 clamp(16px, 4vw, 48px);
}

/* ── Back to the index ───────────────────────────────────────────────────────
   The link itself is the shared .backlink from styles.css, in the same place
   it occupies on the case pages. Only the gap down to the sheet is local. */
.cv-page .backlink { margin-bottom: 10mm; }

/* ── The sheet ───────────────────────────────────────────────────────────── */
.cv {
  --sheet-w: 210mm;
  --sheet-h: 297mm;
  --sheet-pad: 17mm;

  width: var(--sheet-w);
  min-height: var(--sheet-h);
  margin: 0 auto;
  padding: var(--sheet-pad);
  box-sizing: border-box;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  box-shadow: 0 1px 2px rgba(13, 13, 13, .05), 0 12px 32px rgba(13, 13, 13, .08);
}

/* ── Masthead ────────────────────────────────────────────────────────────── */
.cv__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 14mm;
}
.cv__name {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cv__contact {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: right;
}
.cv__contact a { color: inherit; text-decoration: none; }
.cv__contact a:hover { color: var(--ink); }

/* ── Two columns: history on the left, the lists on the right ────────────── */
.cv__cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12mm;
  align-items: start;
}
.cv__col { display: flex; flex-direction: column; gap: 9mm; }

.cv__h {
  margin: 0 0 4mm;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── One job or one qualification ────────────────────────────────────────── */
.cv__list { list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; gap: 5mm; }
.cv__item h3 {
  margin: 0 0 1mm;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.25;
}
.cv__item p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
/* Mono on the dates only — the one place the CV borrows the site's voice. */
.cv__when { font-family: var(--font-mono); font-size: 12px; letter-spacing: -.01em; }

/* ── Skills, tools, languages ────────────────────────────────────────────── */
.cv__plain { list-style: none; margin: 0; padding: 0;
             font-size: 13px; line-height: 1.75; color: var(--ink-soft); }

/* ── Phone and anything too narrow for the sheet ─────────────────────────── */
/* `screen` matters: printing lays the page out at the @page width, and A4 is
   794px, so an unscoped max-width here would hand the printer the phone
   layout and spill the CV onto a second sheet. */
@media screen and (max-width: 880px) {
  .cv-page { background: var(--bg); padding: 0; }
  /* The sheet's own padding is the gap now. */
  .cv-page .backlink { margin-bottom: 0; }
  .cv {
    width: auto;
    min-height: 0;
    padding: clamp(18px, 4vw, 28px) var(--pad) clamp(48px, 12vw, 80px);
    box-shadow: none;
  }
  .cv__top { margin-bottom: 32px; }
  .cv__contact { text-align: left; }
  .cv__cols { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cv__col { gap: 36px; }
  .cv__h { margin-bottom: 14px; }
  .cv__list { gap: 20px; }
}

/* ── Print: the sheet is already A4, so get out of its way ───────────────── */
@page { size: A4; margin: 0; }
@media print {
  .cv-page { background: #fff; padding: 0; min-height: 0; }
  .cv { box-shadow: none; margin: 0; }
}