/* The home page printed as an A4 CV. scripts/build-cv-pdf.mjs prints it to
   public/martin-beck-cv.pdf, so the PDF always says what the page says.
   Page 1: header, about, experience. Page 2: projects, education and skills. */

@page {
  size: A4;
  margin: 11mm 14mm;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-raise: #ffffff;
  --panel: #f2f4f6;
  --panel-hi: #e6eaee;
  --line: #d3dae1;
  --line-strong: #b4bec8;
  --text: #0f1a26;
  --muted: #36434f;
  --faint: #55626f;
  --accent: #1b4266;
  --accent-ink: #ffffff;
}

html {
  font-size: 8.8pt;
}
body {
  background: #ffffff;
  color: var(--text);
  line-height: 1.4;
}

.skip,
.top,
.hero__actions,
.hero__links,
.day,
.chat,
#contact,
footer,
.arrow svg {
  display: none !important;
}
.print-only {
  display: block;
}

.wrap {
  max-width: none;
  padding-inline: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a[data-print]:not(.arrow)::after {
  content: " (" attr(data-print) ")";
}
h2,
h3,
h4 {
  break-after: avoid;
}
p {
  orphans: 3;
  widows: 3;
}
.mono {
  font-size: 7.6pt;
}

/* Header */
.hero {
  grid-template-columns: minmax(0, 1fr) 29mm;
  grid-template-areas:
    "head photo"
    "body photo";
  gap: 2.5mm 8mm;
  align-items: start;
  padding-block: 0 4mm;
}
.hero__head {
  gap: 1.5mm;
}
.hero__eyebrow {
  color: var(--accent);
}
.hero h1 {
  font-size: 30pt;
  line-height: 1;
  letter-spacing: -0.035em;
}
.hero h1 span {
  display: inline;
}
.hero h1 .last {
  margin-left: 0.2em;
}
.hero__body {
  gap: 2mm;
}
.hero__lead {
  font-size: 12.5pt;
  max-width: none;
}
.hero__sub {
  max-width: none;
}
.hero__contact {
  color: var(--accent);
  padding-top: 0.5mm;
}
.portrait {
  width: 29mm;
  max-width: none;
  max-height: none;
  aspect-ratio: 1 / 1.08;
  align-self: start;
  justify-self: end;
  border: 0;
  border-radius: 2mm;
  background: #142436;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}


/* Sections */
.section {
  grid-template-columns: 27mm minmax(0, 1fr);
  gap: 0 6mm;
  padding-block: 3.4mm 3.8mm;
  border-top: 0.3mm solid var(--line);
}
.section > h2 {
  position: static;
  font-size: 11.5pt;
  color: var(--accent);
}
#projects {
  break-before: page;
  border-top: 0;
  padding-top: 0;
}
.prose {
  max-width: none;
  gap: 1.7mm;
}
.prose--lead p:first-child {
  font-family: var(--body);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: 0;
}

/* Experience */
.jobs {
  gap: 4mm;
}
.job {
  gap: 2mm;
}
.job + .job {
  break-inside: avoid;
}
.job__head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.4mm 6mm;
  break-inside: avoid;
}
.job__head h3 {
  font-size: 15pt;
}
.job__when {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}
.job__role {
  font-size: 10.5pt;
}
.job__intro {
  max-width: none;
}
.build {
  grid-template-columns: 38mm minmax(0, 1fr);
  gap: 0.4mm 5mm;
  padding-block: 1.9mm;
  break-inside: avoid;
}
.build:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.build p {
  max-width: none;
}
.build .mono {
  grid-column: 2;
  padding-top: 0.2mm;
}

/* Projects */
.feature {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  break-inside: avoid;
}
.feature__text {
  gap: 2mm;
}
.feature h3 {
  font-size: 15pt;
}
.feature p {
  max-width: none;
}
.status::before {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rows {
  margin-top: 4mm;
}
.row {
  grid-template-columns: 38mm minmax(0, 1fr);
  gap: 0.4mm 5mm;
  padding-block: 2.6mm;
  break-inside: avoid;
}
.row h3 {
  font-size: 10.5pt;
}
.row__text {
  gap: 1mm;
}
.row__text p {
  max-width: none;
}
.arrow {
  font-size: 0;
  gap: 0;
}
.arrow::after {
  content: attr(data-print);
  font-family: var(--mono);
  font-size: 7.6pt;
  font-weight: 400;
  color: var(--accent);
}

/* Education and skills */
.facts {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0 10mm;
}
.timeline li {
  grid-template-columns: 22mm minmax(0, 1fr);
  padding-block: 2mm;
  break-inside: avoid;
}
.timeline li:first-child {
  border-top: 0;
  padding-top: 0;
}
.timeline li:last-child {
  border-bottom: 0;
}
.skills {
  gap: 2.5mm;
}
.skills dd {
  font-size: 10pt;
}
.skills dd.small {
  font-size: inherit;
}