/* Linn's CV: one A4 page, white with black text, in the portfolio's
   type: PP Mori, "Digital communicator" as a headline, the about text as
   the Introduction's statement (semibold, tight), contact and skills as
   the footer's lists, employers as the work cards' titles, semibold
   labels under hairlines. The five sizes are the CV's own, set for A4
   (794px wide at 96dpi), where the site's viewport sizes would be far
   too big. */

/* The same PP Mori files as the site (free personal-use version, kept
   out of git; see CLAUDE.md "Fonts"). */
@font-face {
  font-family: "PP Mori";
  src: url("/assets/fonts/PPMori-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Mori";
  src: url("/assets/fonts/PPMori-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #000000;
  --rule: rgba(0, 0, 0, 0.13);
  --radius-media: 10px;

  /* Type scale for the A4 sheet (px at 96dpi) */
  --text-title: 36px;   /* "Digital communicator" */
  --text-display: 24px; /* employers and schools */
  --text-large: 15.5px; /* the about statement */
  --text-medium: 13px;  /* everything in the left column, roles */
  --text-small: 11px;   /* body, labels, dates */

  --font-body: "PP Mori", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --sheet-w: 210mm;
  --sheet-h: 297mm;
  --pad-x: 13mm;
  --pad-y: 12mm;
  --side-w: 50mm;
  --col-gap: 10mm;
  --block-gap: 6.5mm;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-small) / 1.38 var(--font-body);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p,
ul,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Screen only: back to the site and the PDF, as underlined links */
.cv-bar {
  display: flex;
  justify-content: space-between;
  width: var(--sheet-w);
  margin: 28px auto 16px;
  font-size: 15px;
  font-weight: 600;
}

.cv-bar a {
  border-bottom: 1px solid currentColor;
}

/* The A4 sheet: a narrow column on the left (the signature, then the
   portrait right under it) and the headline, the statement and the work
   on the right. The two columns run independently: the header's parts
   are placed straight on the sheet's grid, and the statement spans the
   signature's row and the next, so the portrait doesn't wait for it.
   On screen a hairline marks the paper's edge. */
.sheet {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-content: start;
  column-gap: var(--col-gap);
  width: var(--sheet-w);
  height: var(--sheet-h);
  margin: 0 auto 64px;
  padding: var(--pad-y) var(--pad-x);
  overflow: hidden;
  background: var(--paper);
  outline: 1px solid var(--rule);
}

.cv-head {
  display: contents;
}

.cv-name {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: var(--block-gap);
  line-height: 0;
}

/* The signature as wide as the portrait under it, ink to ink (the
   SVG's drawing fills its whole viewBox) */
.cv-name img {
  width: 100%;
}

.cv-lead {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-bottom: 7mm;
}

.cv-side {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.cv-main {
  grid-column: 2;
  grid-row: 3;
}

/* The headline, regular and tight like the site's display type */
.cv-title {
  margin-bottom: 5mm;
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* The Introduction's statement */
.cv-intro__text {
  font-size: var(--text-large);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* Section labels: semibold, small, under a hairline as on the site.
   The statement's label has no hairline, like "Introduction". */
.cv-label {
  margin-bottom: 3mm;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
}

.cv-section > .cv-label {
  padding-top: 2.2mm;
  border-top: 1px solid var(--rule);
}

.cv-intro > .cv-label {
  margin-bottom: 2.4mm;
}

.cv-section + .cv-section {
  margin-top: var(--block-gap);
}

.cv-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--radius-media);
  margin-bottom: var(--block-gap);
}

/* Contact, skills and other information: big and tight, as the
   footer's lists, all one size */
.cv-big-list,
.cv-facts {
  font-size: var(--text-medium);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* A skill that wraps hangs its second line, so it still reads as one */
.cv-big-list li {
  padding-left: 0.75em;
  text-indent: -0.75em;
}

.cv-facts > div + div {
  margin-top: 2.4mm;
}

.cv-facts dt {
  font-weight: 600;
}

/* Employers as the work cards' titles, the dates on their baseline.
   The two are inline blocks on one justified line rather than flex
   items, so the space between them stays in the PDF's text ("Svedea
   Nov 2023", not "SvedeaNov 2023"). */
.cv-job + .cv-job {
  margin-top: 4.5mm;
}

.cv-job__head {
  text-align: justify;
  text-align-last: justify;
  line-height: 1;
}

.cv-job__org,
.cv-job__dates {
  display: inline-block;
  text-align: left;
}

.cv-job__org {
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cv-job__dates {
  line-height: 1.38;
}

.cv-job__role {
  margin: 1.2mm 0 1.8mm;
  font-size: var(--text-medium);
  font-weight: 600;
  line-height: 1.2;
}

.cv-job__list li {
  position: relative;
  padding-left: 1.1em;
}

.cv-job__list li + li {
  margin-top: 0.6mm;
}

.cv-job__list li::before {
  content: "–";
  position: absolute;
  left: 0;
}

/* Phones: one column, the site's phone sizes. The side column
   dissolves so other information can come last. */
@media screen and (max-width: 840px) {
  :root {
    --text-title: 44px;
    --text-display: 40px;
    --text-large: 24px;
    --text-medium: 18px;
    --text-small: 15px;
    --block-gap: 36px;
  }

  .cv-bar {
    width: auto;
    margin: 20px 16px;
  }

  .sheet {
    display: flex;
    flex-direction: column;
    gap: var(--block-gap);
    width: auto;
    height: auto;
    margin: 0;
    padding: 16px 16px 56px;
    outline: 0;
  }

  .cv-side {
    display: contents;
  }

  .cv-head {
    display: block;
    margin: 0;
  }

  .cv-main { order: 1; }
  .cv-other { order: 2; }

  .cv-portrait,
  .cv-section + .cv-section {
    margin: 0;
  }

  .cv-main .cv-section + .cv-section {
    margin-top: var(--block-gap);
  }

  .cv-name {
    margin-bottom: 24px;
  }

  .cv-name img {
    width: min(220px, 60vw);
  }

  .cv-lead {
    margin: 0;
  }

  .cv-title {
    margin-bottom: var(--block-gap);
  }

  .cv-label,
  .cv-intro > .cv-label {
    margin-bottom: 14px;
  }

  .cv-section > .cv-label {
    padding-top: 10px;
  }

  .cv-portrait {
    width: min(100%, 360px);
  }

  .cv-job + .cv-job {
    margin-top: 32px;
  }

  .cv-job__head {
    text-align: left;
    text-align-last: auto;
  }

  .cv-job__dates {
    display: block;
    margin-top: 6px;
  }

  .cv-job__role {
    margin: 6px 0 10px;
  }

  .cv-job__list li + li {
    margin-top: 6px;
  }
}

/* Print: one A4 page, edge to edge */
@page {
  size: A4;
  margin: 0;
}

@media print {
  .cv-bar {
    display: none;
  }

  .sheet {
    margin: 0;
    outline: 0;
  }
}