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

:root {
  --font-main: 'neue-haas-unica', sans-serif;
  --color-text: #8e8f8d;
  --color-muted: #595959;
  --color-line: #3a3a39;
  --color-bg: #0b0a0b;
  --pad: 5px;
  --gap: 5px;
  --fs: 13px;
  --lh: 1.1;
  --ls: -0.01em;
  --fw: 500;
  --row: calc(var(--fs) * var(--lh));
  --indent: 14px;
}

@keyframes overlayFadeOut { 0%, 59% { opacity: 1; } 100% { opacity: 0; } }
#page-overlay {
  position: fixed; inset: 0; background: var(--color-bg); z-index: 9999;
  animation: overlayFadeOut 1700ms ease forwards; pointer-events: none;
}

html, body { background: var(--color-bg); }
body {
  font-family: var(--font-main);
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  font-weight: var(--fw);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-muted); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--color-text); }

.cv { padding: 0 10px; max-width: 660px; }

/* ─── Header ─────────────────────────────────────────────── */
.cv-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 var(--gap);
  align-items: start;
  padding: 10px;
}
.cv-name { justify-self: start; }
.cv-contact {
  font-style: normal;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.cv-contact a { color: var(--color-text); }
.cv-contact a:hover { color: var(--color-muted); }
.cv-contact-row {
  display: flex;
  justify-content: space-between;
  gap: 4em;
  padding: 0 2em;
}

/* ─── Sections ───────────────────────────────────────────── */
.section { margin-bottom: calc(var(--row) * 3); }
.section-title { display: block; }

/* ─── Tree ───────────────────────────────────────────────── */
.tree, .tree ul { list-style: none; }
.tree ul { margin-left: calc(var(--indent) * 0.5); }
.tree { margin-left: 3px; }

.tree li {
  position: relative;
  padding-left: var(--indent);
}

/* elbow: vertical from top of row to midline, then across */
.tree li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--indent) - 4px);
  height: calc(var(--row) / 2);
  border-left: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

/* trunk continues to next sibling */
.tree li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--color-line);
}

.tree .label { display: block; }
.tree .muted { color: var(--color-muted); }

/* breathing room between top-level entries */
.tree > li + li { margin-top: var(--gap); }
.tree > li > ul > li + li.group { margin-top: var(--gap); }

/* ─── Footer ─────────────────────────────────────────────── */
.cv-footer { color: var(--color-muted); text-align: center; padding: 0 10px 10px; }

/* ─── Desktop: pinned header + footer ────────────────────── */
@media (min-width: 769px) {
  .cv-header {
    position: absolute;
    top: 0; left: 0; right: 0;
  }
  .cv-contact {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: var(--color-bg);
  }
  .cv { padding-top: 70px; padding-bottom: calc(var(--row) * 3); }
  .cv-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 20;
    pointer-events: none;
  }
  .cv-footer span { background: var(--color-bg); }
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cv-header { grid-template-columns: 1fr; row-gap: calc(var(--row) * 2); margin-bottom: calc(var(--row) * 3); }
  .cv-contact { justify-self: center; }
}