:root {
  --text: #000;
  --muted: #8a8a8a;
  --link: #0080ff;
  --line: #e6e6e6;
  --bg: #fff;
  --pad: 16px;
  --gap: 24px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 0.55vw + 7px, 15px);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 1px solid var(--link); outline-offset: 2px;
}

p { margin: 0 0 1.3em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; margin: 0; }

.muted { color: var(--muted); }

/* 12-column grid shared by header and content */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding: 0 var(--pad);
}

/* header */
.site-head {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  padding-top: 14px; padding-bottom: 14px;
}
.site-head .name { grid-column: 3 / span 3; }
.site-head .n1 { grid-column: 6 / span 2; }
.site-head .n4 { grid-column: 8 / span 3; text-align: center; }
.site-head .n3 { grid-column: 11 / span 2; text-align: right; }
.site-head a[aria-current="page"] { color: var(--text); }
.site-head .langs { grid-column: 1 / span 2; grid-row: 1; display: flex; gap: 10px; }
.langs .lang-link { color: var(--muted); }
.langs .lang-link:hover { color: var(--link); }
.langs .lang-link[aria-current="true"] { color: var(--text); }

main { padding-bottom: 120px; }

/* intro block */
.intro { margin-top: 24px; }
.intro .text { grid-column: 3 / span 5; }
.intro .photo { grid-column: 10 / span 3; }
.intro .photo img { width: 100%; height: auto; max-width: 220px; display: block; margin-left: auto; }

/* numbered entries on home */
.entries { margin-top: 96px; }
.home-facts { margin-top: 96px; }
.home-digest { margin-top: 56px; }
.entry { padding-bottom: 72px; align-items: start; color: var(--text); }
.entry:hover { text-decoration: none; }
.entry .title, .entry .go { color: var(--link); }
.entry:hover .go, .entry:hover .title { text-decoration: underline; text-underline-offset: 2px; }
.entry .num { grid-column: 1 / span 2; }
.entry .title { grid-column: 3 / span 3; }
.entry .desc { grid-column: 6 / span 4; }
.entry .go { grid-column: 11 / span 2; text-align: right; }

/* page title, centered like the reference "CV" / "CASES" */
.page-title { text-align: center; margin: 120px 0 28px; font-size: 1.55em; }

/* labelled rows (CV, digest, contact) */
.block { margin-bottom: 40px; align-items: start; }
.block > .label { grid-column: 1 / span 2; color: var(--muted); }
.block > .body { grid-column: 3 / span 8; }

.row { display: grid; grid-template-columns: 3fr 4fr 2fr; column-gap: var(--gap); margin-bottom: 18px; }
.row:last-child { margin-bottom: 0; }
.row .role a { text-transform: none; }
.row .when { white-space: nowrap; }
.row ul li { margin-bottom: 4px; }
.row ul li::before { content: "– "; }

.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.list li { margin-bottom: 4px; }
.refs { counter-reset: r; }
.refs li { counter-increment: r; display: grid; grid-template-columns: 2.2em 1fr; margin-bottom: 10px; }
.refs li::before { content: counter(r, decimal-leading-zero); color: var(--muted); }

.center { text-align: center; margin-top: 64px; }

/* digest */
.digest p { max-width: 62ch; }
.lede { font-size: 1.55em; line-height: 1.2; max-width: 30ch; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); }
.facts b { display: block; font-weight: 400; font-size: 1.55em; margin-bottom: 4px; }
.note { color: var(--muted); }

/* contact form */
.form { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 18px; max-width: 640px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; margin-bottom: 6px; }
.form input, .form textarea {
  width: 100%; font: inherit; color: var(--text); background: transparent;
  border: 0; border-bottom: 1px solid var(--text); border-radius: 0; padding: 6px 0;
}
.form textarea { resize: vertical; min-height: 120px; }
.form button {
  font: inherit; color: var(--text); background: transparent; border: 1px solid var(--link); border-radius: 2px;
  padding: 7px 14px; cursor: pointer; transition: color .15s ease;
}
.form button:hover { color: var(--link); }
.form button[disabled] { color: var(--muted); cursor: progress; }
.hp { position: absolute !important; left: -9999px !important; }
.status { margin-left: 16px; }
.status.err { color: #d00; }

/* footer */
.site-foot { padding-bottom: 24px; color: var(--muted); }
.site-foot .l { grid-column: 3 / span 4; }
.site-foot .r { grid-column: 9 / span 4; text-align: right; }

/* phones */
@media screen and (max-width: 760px) {
  body { font-size: 15px; line-height: 1.35; }
  .grid { display: block; }
  .site-head { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .site-head .name { flex: 1 0 100%; }
  .site-head .langs { position: absolute; top: 10px; right: var(--pad); gap: 16px; }
  .intro .photo { margin-top: 32px; }
  .intro .photo img { margin-left: 0; max-width: 150px; }
  .entries { margin-top: 80px; }
  .entry { display: block; padding-bottom: 48px; }
  .entry > *, .site-foot > * { display: block; margin-bottom: 4px; }
  .entry .num { color: var(--muted); }
  .entry .go { text-align: left; }
  .page-title { margin-top: 64px; }
  .block > .label { margin-bottom: 10px; color: var(--muted); }
  .row { grid-template-columns: 1fr; row-gap: 4px; margin-bottom: 24px; }
  .row .when { order: -1; color: var(--muted); }
  .two, .facts, .form { grid-template-columns: 1fr; row-gap: 18px; }
  .site-foot .r { text-align: left; margin-top: 4px; }
}

.print-only { display: none; }

@media print {
  @page { size: A4; margin: 14mm 12mm 14mm 12mm; }
  body { font-size: 9.6pt; line-height: 1.32; }
  .site-head, .site-foot, .center, .page-title, .no-print { display: none !important; }
  .print-only { display: block; }
  main { padding-bottom: 0; }
  .grid { padding: 0; column-gap: 14px; }
  .block { margin-bottom: 16px; break-inside: avoid; }
  .block.allow-break { break-inside: auto; }
  html:lang(de) body, html:lang(tt) body { font-size: 9.1pt; line-height: 1.28; }
  html:lang(de) .row, html:lang(tt) .row { margin-bottom: 7px; }
  html:lang(tt) body { font-size: 8.8pt; line-height: 1.25; }
  html:lang(tt) .block { margin-bottom: 12px; }
  .block > .body { grid-column: 3 / -1; }
  .row { margin-bottom: 9px; column-gap: 14px; break-inside: avoid; }
  .row ul li { margin-bottom: 1px; }
  .refs li { margin-bottom: 4px; }
  .list li { margin-bottom: 1px; }
  .two p { margin-bottom: 4px; }
  a { color: var(--text); }
  .print-head { margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--text); }
  .print-head .who { font-size: 1.9em; line-height: 1.1; }
  .print-head .meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .print-head .meta a { color: var(--link); }
}

.js-email.copied { color: var(--text); }

.downloads li { margin-bottom: 6px; }
.sub-title { text-align: center; margin: 120px 0 48px; }

.hl li { margin-bottom: 12px; max-width: 70ch; }
.hl .k { font-weight: 700; }
.hl i { font-style: normal; display: block; margin-top: 2px; }

/* publications: list on the left, digest panel follows the hovered item */
.pubs-wrap { align-items: start; }
.pubs-wrap > .label { grid-column: 1 / span 2; color: var(--muted); }
.pubs { grid-column: 3 / span 6; }
.pub-panel { grid-column: 9 / span 4; position: sticky; top: 64px; min-height: 120px; }
.pub-panel .hint { color: var(--muted); }
.pub-panel .p-title { margin-bottom: 10px; }
.pub-panel .p-digest { font-size: 1.15em; line-height: 1.32; margin-bottom: 12px; }
.pub-panel .p-meta { color: var(--muted); }

.pubs .year { color: var(--muted); margin: 22px 0 8px; }
.pubs .year:first-child { margin-top: 0; }
.pub { padding: 8px 0; border-top: 1px solid var(--line); cursor: default; outline: none; }
.pub:last-child { border-bottom: 1px solid var(--line); }
.pub .t { display: block; }
.pub .m { display: block; color: var(--muted); margin-top: 2px; }

.pub .digest { display: none; }
.pub.active .t, .pub:focus-visible .t { color: var(--link); }


/* devices without hover, or narrow screens: tap to expand inline */
@media (hover: none), screen and (max-width: 760px) {
  .pub-panel { display: none; }
  .pubs { grid-column: 3 / -1; }
  .pub { cursor: pointer; }
  .pub .t::after { content: " +"; color: var(--link); }
  .pub.open .t::after { content: " –"; }
  .pub.open .digest { display: block; margin-top: 8px; }
  .pub .digest p { margin-bottom: 6px; }
}
@media print { .pub-panel { display: none; } .pub .digest { display: block; color: var(--muted); } }
.p-meta .me, .pub .me { color: var(--text); }

.mt-14 { margin-top: 14px; }
.mt-48 { margin-top: 48px; }
.title-plain { color: var(--text) !important; }

:root { --shade: #eef5ff; --shade-strong: #dcebff; }
.btn {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--link); border-radius: 2px;
  color: var(--text); background: transparent;
  text-decoration: none; transition: color .15s ease;
}
.btn:hover { color: var(--link); text-decoration: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* download button: hover (or tap) shows which CV to download */
.dl { position: relative; display: inline-block; text-align: left; }
.dl-menu {
  display: none; position: absolute; z-index: 4; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 100%; padding: 4px 0; border: 1px solid var(--link); border-top: 0; background: var(--bg); border-radius: 0 0 2px 2px;
}
.dl:hover .dl-menu, .dl:focus-within .dl-menu, .dl.open .dl-menu { display: block; }
.dl:hover .dl-main, .dl.open .dl-main { color: var(--link); border-radius: 2px 2px 0 0; }
.dl-menu a { display: block; padding: 6px 14px; text-decoration: none; white-space: nowrap; color: var(--text); }
.dl-menu a:hover, .dl-menu a:focus-visible { color: var(--link); text-decoration: none; }
.dl-menu .muted { margin-left: 6px; }
.dl-left { margin-top: 8px; }
.dl-left .dl-menu { left: 0; transform: none; }

/* software and tools: shaded labels so they stand out */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.chips li {
  background: var(--shade); color: var(--link); border-radius: 2px;
  padding: 3px 9px; white-space: nowrap;
}
@media print {
  .chips { gap: 4px; }
  .chips li { padding: 1px 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.sw-groups { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 40px; row-gap: 14px; }
.sw-groups p { margin-bottom: 6px; }
@media screen and (max-width: 760px) { .sw-groups { grid-template-columns: 1fr; } }

/* call-back platform picker: minimal shaded pills */
.platforms { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.platforms legend { padding: 0; margin-bottom: 6px; }
.platforms label { margin: 0; cursor: pointer; }
.platforms input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.platforms span {
  display: inline-block; padding: 6px 12px; border-radius: 2px;
  border: 1px solid var(--link); color: var(--text); background: transparent; transition: color .15s ease;
}
.platforms label:hover span { color: var(--link); }
.platforms input:checked + span { color: var(--link); background: var(--shade); }
.platforms input:focus-visible + span { outline: 1px solid var(--link); outline-offset: 2px; }
.form ::placeholder { color: #b5b5b5; }

/* recruiter answers: scannable question / answer rows */
.qa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
button.btn { font: inherit; cursor: pointer; }
.qa-group { color: var(--muted); margin: 22px 0 4px; }
.qa { margin: 0; }
.qa > div { display: grid; grid-template-columns: 200px 1fr; column-gap: var(--gap); padding: 6px 0; border-top: 1px solid var(--line); }
.qa dt { color: var(--muted); }
.qa dd { margin: 0; }
.qa .chips { margin: 0; }
@media screen and (max-width: 760px) { .qa > div { grid-template-columns: 1fr; row-gap: 2px; } }

/* ---- phones: bigger tap targets, no input zoom, more screen space ---- */
@media screen and (max-width: 760px) {
  body { font-size: 16px; }
  .site-head { position: relative; padding-top: 10px; padding-bottom: 6px; gap: 0 22px; }
  .site-head a { display: inline-block; padding: 11px 0; min-height: 44px; }
  .form input, .form textarea { font-size: 16px; padding: 11px 0; min-height: 44px; }
  .btn, .form button, .platforms span { padding: 12px 18px; min-height: 44px; }
  .qa-actions .btn { flex: 1 1 auto; text-align: center; }
  .dl { display: block; }
  .dl .dl-main { display: block; text-align: center; }
  .dl-menu { left: 0; right: 0; transform: none; }
  .dl-menu a { padding: 12px 16px; }
  .platforms { gap: 8px; }
  .entry { padding-top: 6px; }
  .pub { padding: 12px 0; }
  .site-foot a { display: inline-block; padding: 8px 0; }
}