:root {
  --ink:    #1A1A1E;
  --ink-2:  #3C3C44;
  --muted:  #6E6C74;
  --faint:  #9C9A95;
  --line:   #E2DED7;
  --accent:      #8F1D2F;
  --accent-deep: #6E1623;
  --accent-wash: #F7EAEC;
  --paper:  #FFFFFF;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #c9c7c4;
  font-family: var(--body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding: 28px 0;
}

/* ---- A4 page ---- */
.page {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  background: var(--paper);
  padding: 14mm 16mm 11mm;
  position: relative;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  color: var(--ink);
}
.page::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px; background: var(--accent);
}

/* ---- header ---- */
.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 12pt;
}
.head__id { display: flex; gap: 12px; align-items: flex-start; }
.mark {
  font-family: var(--display); font-weight: 700; font-size: 13pt;
  letter-spacing: .03em; color: #fff; background: var(--accent);
  width: 30pt; height: 30pt; border-radius: 7px;
  display: grid; place-items: center; flex: none; margin-top: 3pt;
}
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: 24pt; line-height: 1; letter-spacing: -0.025em;
  margin: 0; color: var(--ink);
}
.role {
  margin: 6pt 0 0; font-family: var(--display); font-weight: 500;
  font-size: 11pt; color: var(--accent); letter-spacing: .01em;
}
.contact {
  font-family: var(--mono); font-size: 8.6pt; line-height: 1.7;
  color: var(--ink-2); text-align: right; white-space: nowrap;
}
.contact a { color: var(--ink-2); text-decoration: none; }
.contact .ic { color: var(--accent); }

/* ---- section ---- */
section { margin-top: 13pt; }
.sec-label {
  display: flex; align-items: center; gap: 10pt;
  font-family: var(--mono); font-size: 9pt; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 8pt;
}
.sec-label .n { color: var(--faint); font-weight: 400; }
.sec-label::after { content: ""; flex: 1; height: 1px; background: var(--accent); opacity: .35; }

/* ---- timeline rows ---- */
.row {
  display: grid;
  grid-template-columns: 33mm 1fr;
  gap: 8mm;
  padding: 6.5pt 0;
  border-top: 1px solid var(--line);
}
.row:first-of-type { border-top: 0; padding-top: 2pt; }
.when {
  font-family: var(--mono); font-size: 8.8pt; color: var(--accent-deep);
  font-weight: 500; padding-top: 1.5pt;
}
.when small { display: block; color: var(--faint); font-weight: 400; font-size: 8pt; margin-top: 3pt; }
.entry h3 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: 11pt; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25;
}
.entry h3 .co { color: var(--accent); }
.entry h3 .loc { color: var(--muted); font-weight: 400; font-size: 9.6pt; }
.entry ul {
  margin: 4.5pt 0 0; padding: 0; list-style: none;
  display: grid; gap: 2.5pt;
}
.entry li {
  position: relative; padding-left: 12pt;
  font-size: 9.7pt; line-height: 1.42; color: var(--ink-2);
}
.entry li::before {
  content: ""; position: absolute; left: 0; top: 6.2pt;
  width: 4pt; height: 1.4pt; background: var(--accent);
}

/* ---- skills ---- */
.skills { display: grid; gap: 5pt; }
.skill-row { display: grid; grid-template-columns: 42mm 1fr; gap: 6mm; align-items: baseline; }
.skill-row .k {
  font-family: var(--mono); font-size: 8.3pt; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.skill-row .v { font-size: 9.8pt; color: var(--ink); font-weight: 500; }
.skill-row .v b { color: var(--accent-deep); font-weight: 600; }

.footnote {
  display: flex; flex-wrap: wrap; gap: 7pt; margin-top: 8pt;
  align-items: center;
}
.tag {
  font-family: var(--mono); font-size: 8.3pt; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 3.5pt 8pt;
}
.tag .ic { color: var(--accent); }

.interests {
  font-size: 10pt; color: var(--ink-2); line-height: 1.6;
}
.interests b { color: var(--ink); font-weight: 500; }

/* ---- print ---- */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; padding: 0; }
  .page { box-shadow: none; margin: 0; width: auto; min-height: 297mm; }
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media screen and (max-width: 800px) {
  .page { width: 100%; min-height: 0; padding: 28px 22px; }
  .head { flex-direction: column; }
  .contact { text-align: left; white-space: normal; }
  .row { grid-template-columns: 1fr; gap: 4pt; }
  .skill-row { grid-template-columns: 1fr; gap: 2pt; }
}