/* CV: a white sheet with a turned corner on the green cutting mat. Black text, green only for headings, numbers
   and lines. The line of this world is a thin dimension line with a tick at each end. */
body.page-cv, .page-cv .stage {
  background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, #0000 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, #0000 1px);
  background-size: 28px 28px;
}
.page-cv .top { color: #fff; }
.page-cv main { padding-top: clamp(20px, 4vh, 40px); }
.page-cv .paper { max-width: 960px; margin: 0 auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)) drop-shadow(0 14px 30px rgba(0, 0, 0, 0.25)); }
.sheet {
  --fold: 46px;
  --green: #0E5C47;
  position: relative;
  background: #fff;
  color: #151D1A;
  padding: clamp(26px, 5vw, 60px);
  font-size: 16.5px;
  display: grid;
  gap: 40px;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}
/* the turned corner */
.sheet::after { content: ''; position: absolute; top: 0; right: 0; width: var(--fold); height: var(--fold); background: linear-gradient(225deg, #0000 50%, #C9D6D1 50%); }

.cv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: start; }
.cv-doc { display: flex; align-items: center; gap: 10px; color: var(--green); font-size: 15px; font-weight: 800; letter-spacing: 0.14em; }
.cv-doc .mark { width: 34px; height: 34px; }
.sheet .mark polygon { fill: var(--green); }
.cv-head h1 { margin-top: 10px; font-size: clamp(38px, 5.2vw, 60px); font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.cv-role { margin-top: 12px; font-size: 20px; font-weight: 700; color: var(--green); line-height: 1.3; }
.cv-intro { margin-top: 10px; max-width: 58ch; }
.cv-contacts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 15.5px; }
.cv-contacts li { display: grid; gap: 1px; }
.cv-contacts span { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.cv-contacts a, .cv-contacts b { font-weight: 600; }
.cv-side { display: grid; gap: 14px; justify-items: end; padding-right: 22px; }
.cv-side img { width: 132px; height: 132px; border-radius: 4px; }
.cv-pdf { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: 200px; font-size: 15px; line-height: 1.3; text-align: right; }
.cv-pdf span { flex-basis: 100%; }
.cv-pdf a { padding: 6px 14px; border: 2px solid var(--green); color: var(--green); font-weight: 800; letter-spacing: 0.06em; text-decoration: none; }
.cv-pdf a:hover, .cv-pdf a:focus-visible { background: var(--green); color: #fff; }

.cv-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 26px; padding: 22px 0; border-block: 1.5px solid var(--green); }
.cv-nums dt { font-size: clamp(38px, 4.6vw, 54px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--green); }
.cv-nums dd { margin-top: 6px; font-size: 15px; line-height: 1.35; }

/* a heading with the dimension line of the drawing board running to the edge of the sheet */
.sheet h2 { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.sheet h2::after { content: ''; flex: 1; height: 11px; border-inline: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.sheet section { display: grid; gap: 20px; }

.xp { display: grid; gap: 22px; }
.xp > li { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; }
.xp-when { font-weight: 700; color: var(--green); padding-top: 3px; }
.xp-what { display: grid; gap: 5px; max-width: 66ch; }
.xp h3 { font-size: 21px; line-height: 1.2; }
.xp-role { font-weight: 700; }
.xp-role span { font-weight: 400; }
.xp-role span::before { content: ' · '; }
/* what was done at a place, as the résumé lists it: a dash of the sheet's green before every point */
.xp h4 { margin: 7px 0 0; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.xp-points { display: grid; gap: 6px; }
.xp-points li { position: relative; padding-left: 18px; }
.xp-points li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 9px; border-top: 2px solid var(--green); }
.xp-stack { font-size: 15px; line-height: 1.5; color: #3F4B47; }

.made { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.made li { display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--green); font-size: 15px; }
.made b { font-size: 17px; }
.made .num { font-weight: 700; color: var(--green); }

.stack { display: grid; gap: 12px; }
.stack div { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; }
.stack dt { font-weight: 700; color: var(--green); }
.cv-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; }
.plain { display: grid; gap: 6px; }

@media (max-width: 860px) {
  .cv-head { grid-template-columns: minmax(0, 1fr); }
  .cv-side { grid-template-columns: auto 1fr; justify-items: start; align-items: center; padding-right: 0; }
  .cv-pdf { justify-content: flex-start; text-align: left; max-width: none; }
  .cv-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp > li, .stack div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .made { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-two { grid-template-columns: minmax(0, 1fr); }
}

/* On paper: the sheet alone, two pages of A4, nothing cut in the middle. The PDF of the page is printed from this. */
@media print {
  @page { size: A4; margin: 12mm 0; }
  body.page-cv { background: #fff; }
  .page-cv .top, .page-cv .stage, .page-cv .cv-pdf { display: none; }
  .page-cv main { padding: 0; }
  .page-cv .paper { max-width: none; filter: none; }
  .page-cv .sheet { padding: 0 54px; clip-path: none; gap: 30px; }
  .page-cv .sheet::after { display: none; }
  .page-cv .xp-points li, .page-cv .xp h3, .page-cv .made > *, .page-cv .stack div, .page-cv .cv-nums, .page-cv .cv-head { break-inside: avoid; }
  .page-cv h2 { break-after: avoid; }
}