/* ============================================================================
   CV — one page, two columns, print-first.
   The page is sized to A4 and the screen view is a preview of the print, not
   the other way round: every measurement below is one a printer can honour.
   ========================================================================= */

:root{
  /* A few points of warmth in every grey. On paper a blue-black reads clinical;
     shifting the whole ramp towards the yellow side softens it without anyone
     being able to name what changed. */
  --ink:#221F1D;
  --ink-2:#57534E;
  --muted:#8C8780;
  --line:#E6E2DC;
  --line-soft:#F0EDE8;
  --paper:#FFFFFF;
  --ground:#F5F5F7;
  --accent:#1D1D1F;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  /* Plus Jakarta Sans: geometric and soft-cornered, with enough character in
     the letterforms to carry a page this dense. A neutral grotesk at 9pt reads
     technical whatever you do to the leading and the greys — this does not. */
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:10.2pt;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3{font-weight:inherit;margin:0;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}

/* --- The sheet -------------------------------------------------------------
   210 × 297mm with a 13mm gutter. On screen it floats on the grey ground so
   you can see the page edge you are actually going to get. */
.sheet{
  width:210mm;
  min-height:297mm;
  margin:24px auto;
  padding:13mm 13mm 11mm;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 44px -22px rgba(0,0,0,.28);
}

/* --- Masthead ------------------------------------------------------------- */
/* No rule under the masthead: the first divider in each column sits directly
   beneath it and does the separating for both. */
.mast{margin-bottom:16px}
/* Weights follow the portfolio: 700 and tight for anything that behaves like a
   headline, 600 for the line beneath it. Tracking is scaled down from the site's
   values — the same -.028em that suits a 5rem hero is far too tight at 20pt. */
.mast h1{font-size:20pt;font-weight:700;letter-spacing:-.012em;line-height:1.12}
/* The role and the link share a row so `align-items:baseline` can do the work.
   Aligning them by eye against the whole masthead would drift the moment the
   name wrapped or a size changed; sitting them in one flex row means the
   browser solves it from the actual metrics, every time. */
.mast__line{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:2px;
}
.mast__role{
  font-size:10.4pt;font-weight:600;letter-spacing:-.002em;color:var(--ink-2);
}
.mast__site{
  display:inline-flex;align-items:baseline;gap:5px;flex:none;
  font-size:8.6pt;font-weight:600;color:var(--ink);
}
.mast__site svg{width:9px;height:9px;flex:none;opacity:.75;align-self:center}
/* Visually hidden — the icon needs a spoken equivalent for screen readers. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.mast__contact .is-strong{color:var(--ink);font-weight:600}

/* --- Two columns -----------------------------------------------------------
   The narrow rail carries everything that is a list; the wide column carries
   the history. It is the only way fifteen years fits on one sheet. */
.cols{display:grid;grid-template-columns:60mm 1fr;gap:0 11mm;align-items:start}
/* The rail has vertical room the history column does not, so its sections can
   breathe further apart. The gap to the next divider is this plus the label's
   own 15px of padding. */
.rail > * + *{margin-top:18px}
.main > * + *{margin-top:12px}

/* --- Section labels ------------------------------------------------------- */
/* Sentence case: nothing on the site is uppercase. A full point and a half
   above body at 700 against 400, so size and weight carry the step and the
   divider above only has to mark where the section starts. */
.label{
  display:block;position:relative;
  font-size:11.5pt;font-weight:700;letter-spacing:-.012em;
  color:var(--ink);
  padding-top:15px;margin-bottom:8px;
}
/* A 2px ink rule across the full column. Weight is what stops this reading as
   a table border — a 1px hairline is a default, two solid pixels is a mark. */
.label::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ink);
}

/* --- Rail content --------------------------------------------------------- */
/* One body size across both columns. Four sizes within half a point of each
   other read as fuzz, not as levels — the hierarchy has to come from the
   headings standing clear of a single, settled body. */
.summary{font-size:9pt;line-height:1.62;color:var(--ink-2)}
.summary + .summary{margin-top:.55rem}
.summary strong{color:var(--ink);font-weight:700}

/* No rules between the items. A hairline under every line turns a short list
   into a spec sheet; spacing separates them just as well and reads calmer. */
.stack li{
  font-size:9pt;line-height:1.55;color:var(--ink-2);
}
.stack li + li{margin-top:5px}

.practice li{
  font-size:9pt;line-height:1.6;color:var(--ink-2);
  position:relative;padding-left:11px;
}
.practice li + li{margin-top:5px}
.practice li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:4px;height:4px;border-radius:50%;background:var(--line);
}

/* --- Work history ----------------------------------------------------------
   Company is the heading and the roles nest under it, so a decade in one
   organisation reads as a progression rather than as three separate jobs.
   No markers and no rules: size, weight and space carry it. */
.org + .org{margin-top:17px}
.org__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:5px;
}
.org__name{font-size:12.5pt;font-weight:700;letter-spacing:-.008em}
.org__dates{font-size:8.4pt;color:var(--muted);white-space:nowrap}
.org__roles{
  font-size:8.8pt;color:var(--muted);
  margin-bottom:7px;
}
.org__roles b{color:var(--ink);font-weight:600}

.duties li{
  font-size:9pt;line-height:1.53;color:var(--ink-2);
  position:relative;padding-left:12px;
}
.duties li + li{margin-top:4px}
.duties li::before{
  content:"";position:absolute;left:1px;top:.62em;
  width:3px;height:3px;border-radius:50%;background:var(--ink);opacity:.28;
}
.duties strong{color:var(--ink);font-weight:600}

/* --- Export control --------------------------------------------------------
   Screen only. One source of truth: the PDF is this page, printed. */
.export{
  position:fixed;top:20px;right:20px;z-index:10;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:9.6pt;font-weight:500;
  border:0;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.10),0 14px 30px -16px rgba(0,0,0,.5);
  transition:background .2s ease,transform .2s ease;
}
.export:hover{background:#3A3A3C;transform:translateY(-1px)}
.export svg{width:15px;height:15px;flex:none}

.back{
  position:fixed;top:20px;left:20px;z-index:10;
  font-size:9.6pt;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px;
}
.back:hover{color:var(--ink)}
.back svg{width:14px;height:14px}

/* --- Print -----------------------------------------------------------------
   No shadow, no ground, no chrome, and the sheet's own padding stands down in
   favour of the @page margin so nothing is counted twice. */
@page{ size:A4; margin:13mm; }
@media print{
  body{background:#fff}
  .sheet{
    width:auto;min-height:0;margin:0;padding:0;
    box-shadow:none;
  }
  .export,.back{display:none !important}
  a{text-decoration:none}
  .org,.practice li,.duties li{break-inside:avoid}
}

/* --- Narrow screens --------------------------------------------------------
   The sheet is a fixed A4 width, so below that it simply scales down rather
   than reflowing into a layout that would not match the printed page.

   These MUST be scoped to `screen`. A printed page is 210mm less its margins,
   which is about 184mm — comfortably inside `max-width:230mm`. Unscoped, these
   rules fire while printing, put the sheet's padding back after the print
   block had zeroed it, and push the last two centimetres onto a second page. */
@media screen and (max-width:230mm){
  body{padding:0 10px}
  .sheet{width:100%;padding:22px 20px}
}
@media screen and (max-width:620px){
  .cols{grid-template-columns:1fr;gap:16px}
  .mast{flex-wrap:wrap}
  .mast__contact{text-align:left;width:100%}
  .mast__contact a{display:inline;margin-right:10px}
}