:root {
  --bg: #fff;
  --ink: #1d1b19;
  --muted: rgba(29, 27, 25, .4);
  --faint: rgba(29, 27, 25, .032);
  --accent: #f04438;
  --font: "Zalando Sans", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-variation-settings: "wdth" 100;
  letter-spacing: -.32px;
}

button { color: inherit; }

main {
  position: relative;
  min-height: 100svh;
  overflow-x: clip;
  overflow-y: hidden;
}

body.details-open main { overflow-y: visible; }

main::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(29, 27, 25, .16);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .9s var(--ease) .04s;
}

body.details-open main::before { transform: scaleY(1); }
body.details-closing main::before {
  transform: scaleY(0);
  transition-duration: .55s;
  transition-delay: .14s;
}

.logo {
  position: sticky;
  z-index: 20;
  top: 40px;
  left: 40px;
  display: block;
  width: 126.7px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  animation: enter .8s var(--ease) .48s forwards;
}

.profile {
  --profile-perspective-origin-x: -40px;
  --profile-perspective-origin-y: 50vh;
  position: absolute;
  z-index: 2;
  top: 33px;
  left: calc(50% + 40px);
  width: 357px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  perspective: 920px;
  perspective-origin: var(--profile-perspective-origin-x) var(--profile-perspective-origin-y);
  transform-style: preserve-3d;
}

.profile-scene,
.profile-billboard {
  width: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

.profile-scene {
  position: relative;
  transform: rotateY(var(--scene-ry, 0deg)) rotateX(var(--scene-rx, 0deg));
  transform-origin: var(--scene-local-origin-x, -40px) var(--scene-local-origin-y, 50vh);
}

.profile-billboard {
  display: flex;
  flex-direction: column;
  transform: rotateX(var(--scene-counter-rx, 0deg)) rotateY(var(--scene-counter-ry, 0deg));
  transform-origin: left top;
}

.profile-previous-billboard { gap: 8px; }
.profile-previous-billboard .details-group { margin-top: 0; }

.profile-anchor-marker {
  position: absolute;
  z-index: 24;
  top: 8.5px;
  left: -43.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: rotateX(var(--scene-counter-rx, 0deg)) rotateY(var(--scene-counter-ry, 0deg));
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: opacity .24s ease, visibility 0s linear .52s;
}

body.details-open .profile-anchor-marker {
  opacity: 1;
  visibility: visible;
  transition-delay: .18s, 0s;
}

.bio,
.scholar,
.group-panel p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.groups { display: flex; flex-direction: column; gap: 40px; }
.group { width: 100%; }

.group-trigger,
.nested-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.08;
  letter-spacing: -.32px;
  text-align: left;
  cursor: pointer;
}

.accordion-icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: block;
}

.accordion-icon i {
  position: absolute;
  inset: 0;
  font-size: 16px;
  line-height: 16px;
  transition: opacity .26s ease, transform .48s var(--ease);
}

.icon-plus { opacity: 1; transform: rotate(0) scale(1); }
.icon-minus { opacity: 0; transform: rotate(-90deg) scale(.72); }

[aria-expanded="true"] .icon-plus {
  opacity: 0;
  transform: rotate(90deg) scale(.72);
}

[aria-expanded="true"] .icon-minus {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.group-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .58s var(--ease) .18s, opacity .28s ease .14s;
}

.group.is-open > .group-panel {
  max-height: 500px;
  opacity: 1;
  transition-delay: 0s;
}

.nested-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .52s var(--ease) .18s, opacity .26s ease .12s;
}

.nested-group.is-open > .nested-panel {
  max-height: 100px;
  opacity: 1;
  transition-delay: 0s;
}

.group-panel-inner,
.nested-panel-inner { min-height: 0; overflow: hidden; }

.group-panel-inner { padding-top: 8px; }
.group-panel-inner > p { color: var(--muted); line-height: 1.08; letter-spacing: -.16px; margin-bottom: 8px; }

.nested-trigger { color: var(--muted); }
.nested-panel-inner p {
  width: calc(100% - 23px);
  margin: 8px 0 0 auto;
  color: var(--muted);
  line-height: 1.5;
}

.nested-panel-inner p > span { display: block; }

.accordion-line {
  position: relative;
  top: 3px;
  opacity: 0;
  transition: opacity .3s ease, top .42s var(--ease);
  transition-delay: calc((4 - var(--line)) * .035s);
}

.group.is-open > .group-panel > .group-panel-inner > p.accordion-line,
.group.is-open > .group-panel > .group-panel-inner > .nested-group > .nested-trigger.accordion-line {
  top: 0;
  opacity: 1;
  transition-delay: calc(var(--line) * .045s);
}

.nested-group.is-open > .nested-panel .accordion-line {
  top: 0;
  opacity: 1;
  transition-delay: calc(var(--line) * .05s);
}

.previous-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.previous-row > p {
  max-width: 337px;
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.previous-row .icon-trigger {
  flex: 0 0 16px;
  width: 16px;
  min-height: 16px;
  display: block;
  padding: 0;
}

.details-group {
  width: 100%;
  margin-top: -32px;
}

.details-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.32px;
  text-align: left;
  cursor: pointer;
}

.details-label {
  position: relative;
  display: block;
  width: 84px;
  height: 24px;
  overflow: hidden;
}

.details-label > span {
  position: absolute;
  inset: 0 auto auto 0;
  white-space: nowrap;
  transition: opacity .3s ease, transform .48s var(--ease);
}

.details-label-more {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.details-label-less {
  opacity: 0;
  transform: translate3d(0, 4px, 0);
}

.details-trigger[aria-expanded="true"] .details-label-more {
  opacity: 0;
  transform: translate3d(0, -4px, 0);
}

.details-trigger[aria-expanded="true"] .details-label-less {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .08s;
}

.timeline-panel {
  --scene-origin-y: 50vh;
  --scene-rx: 0deg;
  --scene-ry: 0deg;
  --scene-counter-rx: 0deg;
  --scene-counter-ry: 0deg;
  width: 100vw;
  padding-top: 0;
  overflow: visible;
  perspective: 920px;
  perspective-origin: 50% var(--scene-origin-y);
  touch-action: pan-y;
}

.timeline-panel[hidden] { display: none; }

.timeline-panel-inner {
  --timeline-axis-start: 0px;
  --timeline-axis-length: 100%;
  position: relative;
  min-height: 0;
  overflow: visible;
  opacity: 0;
  transform: rotateY(var(--scene-ry)) rotateX(var(--scene-rx));
  transform-origin: 50% var(--scene-origin-y);
  transform-style: preserve-3d;
  transition: opacity .28s ease;
}

.timeline-panel-inner::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--timeline-axis-start);
  left: 50%;
  width: 2px;
  height: var(--timeline-axis-length);
  background: rgba(29, 27, 25, .16);
  pointer-events: none;
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

.timeline-panel.is-scene-dragging .timeline-panel-inner,
.timeline-panel.is-scene-settling .timeline-panel-inner {
  will-change: transform;
}

.timeline-panel.is-scene-dragging .timeline-year-heading,
.timeline-panel.is-scene-settling .timeline-year-heading,
.timeline-panel.is-scene-dragging .timeline-entry-copy,
.timeline-panel.is-scene-settling .timeline-entry-copy,
.timeline-panel.is-scene-dragging .timeline-marker,
.timeline-panel.is-scene-settling .timeline-marker {
  will-change: transform;
}

body.details-open .timeline-panel { cursor: grab; }

body.timeline-scene-dragging,
body.timeline-scene-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

body.details-open .timeline-panel-inner {
  opacity: 1;
}

body.details-open main::before { opacity: 0; }

.timeline {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 0 24px;
  overflow: visible;
  transform-style: preserve-3d;
}

.timeline-year {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 50% 50%;
  padding: 0;
  overflow: visible;
  transform-style: preserve-3d;
}

.timeline-year-heading {
  --year-offset: max(0px, calc(28px - .47em));
  position: sticky;
  z-index: 4;
  top: calc(40px - var(--year-offset));
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: auto;
  margin: 0;
  padding: var(--year-offset) 32px 0 5vw;
  pointer-events: none;
  text-align: right;
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 100;
  line-height: .94;
  letter-spacing: -2.4px;
  opacity: 0;
  transform: rotateX(var(--scene-counter-rx)) rotateY(var(--scene-counter-ry));
  transform-origin: right center;
  backface-visibility: hidden;
  transition: opacity .42s ease calc(80ms + var(--year-delay, 0ms));
}

.timeline-year-heading > span {
  display: inline-block;
  transform: translateY(6px);
  transition: transform .62s var(--ease) calc(80ms + var(--year-delay, 0ms));
}

body.details-open:not(.details-closing) .timeline-year-heading {
  opacity: 1;
}

body.details-open:not(.details-closing) .timeline-year-heading > span {
  transform: translateY(0);
}

.timeline-year-heading.is-exiting {
  opacity: 0;
  transition-duration: .28s;
  transition-delay: var(--close-delay, 0ms);
}

.timeline-year-heading.is-exiting > span {
  transform: translateY(-4px);
  transition-duration: .42s;
  transition-delay: var(--close-delay, 0ms);
}

.timeline-year-entries {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  transform-style: preserve-3d;
}

.timeline-year:first-child .timeline-year-entries { padding-top: 440px; }

.timeline-entry {
  --scene-blur: 0px;
  --scene-opacity: 1;
  --scene-scale: 1;
  --scene-z: 0px;
  position: relative;
  z-index: 2;
  top: 0;
  width: 100%;
  min-height: 112px;
  margin: 0 0 72px;
  padding: 0 6vw 0 40px;
  overflow: visible;
  opacity: 1;
  transform: translateZ(var(--scene-z)) scale(var(--scene-scale));
  transform-origin: left 24px;
  transform-style: preserve-3d;
  transition: none;
}

.timeline-entry.is-active {
  --scene-opacity: 1;
  --scene-scale: 1;
  --scene-z: 0px;
}

.timeline-entry:last-child { margin-bottom: 0; }

.timeline-entry.is-visible {
  top: 0;
  opacity: 1;
}

.timeline-entry.is-visible.is-exiting {
  top: -6px;
  opacity: 0;
  transition-duration: .3s, .44s;
  transition-delay: var(--close-delay, 0ms);
}

.timeline-marker {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: -3.5px;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  transform: rotateX(var(--scene-counter-rx)) rotateY(var(--scene-counter-ry));
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: top .58s var(--ease), left .58s var(--ease), width .58s var(--ease), height .58s var(--ease), background-color .3s ease;
}

.timeline-marker.is-muted {
  background: #dbdbda;
  box-shadow: 0 0 0 2px #fff;
}

.present-project-trigger {
  position: absolute;
  z-index: 24;
  top: -3px;
  left: -57px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: rotateX(var(--scene-counter-rx, 0deg)) rotateY(var(--scene-counter-ry, 0deg));
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: opacity .24s ease, visibility 0s linear .52s;
}

.present-project-trigger::after,
.project-expand-trigger::after,
.writing-expand-trigger::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

.present-project-trigger i {
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transform: rotate(-90deg) scale(.4);
  transition: opacity .24s ease, transform .52s var(--ease);
}

body.details-open .present-project-trigger {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transition-delay: .18s, 0s;
}

body.details-open .present-project-trigger i {
  opacity: 1;
  transform: rotate(0) scale(1);
  transition-delay: .12s;
}

.present-project-trigger[aria-expanded="true"] i { transform: rotate(0) scale(1); }

.present-project-trigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

button.timeline-marker {
  pointer-events: none;
}

.timeline-marker i {
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transform: rotate(-90deg) scale(.4);
  transition: opacity .24s ease .08s, transform .52s var(--ease) .04s;
}

.timeline-entry.is-active .project-expand-trigger,
.timeline-entry.is-active .writing-expand-trigger {
  top: 10.5px;
  left: -17px;
  width: 34px;
  height: 34px;
  pointer-events: auto;
  cursor: pointer;
}

.timeline-entry.is-active .project-expand-trigger i,
.timeline-entry.is-active .writing-expand-trigger i {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.project-expand-trigger[aria-expanded="true"] i {
  transform: rotate(0) scale(1);
}

.project-expand-trigger:focus-visible,
.writing-expand-trigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
}

.timeline-entry-copy {
  position: relative;
  text-align: left;
  background: transparent;
  box-shadow: none;
  opacity: var(--scene-opacity, 1);
  transform: rotateX(var(--scene-counter-rx)) rotateY(var(--scene-counter-ry));
  transform-origin: left 24px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: opacity .28s ease;
}

.timeline-entry.is-active .timeline-entry-copy { opacity: 1; }

.timeline-entry h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  font-variation-settings: "wght" 400, "wdth" 100;
  line-height: 1.18;
  letter-spacing: -.32px;
  text-align: left;
  transition: opacity .34s ease, font-variation-settings .62s var(--ease), letter-spacing .62s var(--ease);
}

.timeline.has-active .timeline-entry:not(.is-active) h3 { opacity: .42; }
.timeline-entry.is-active h3,
.timeline-entry:focus-within h3 {
  opacity: 1;
  font-variation-settings: "wght" 540, "wdth" 104;
  letter-spacing: -.38px;
}

.timeline-entry p {
  max-width: 520px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.32;
  letter-spacing: -.14px;
  text-wrap: balance;
  widows: 2;
  orphans: 2;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 4px, 0);
  transition:
    opacity .38s ease,
    transform .58s var(--ease),
    visibility 0s linear .58s;
}

.timeline-entry.is-active p,
.timeline-entry:focus-within p {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: .08s, .04s, 0s;
}

.project-title-trigger {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  text-align: left;
  pointer-events: none;
}

.timeline-entry.is-active .project-title-trigger {
  pointer-events: auto;
}

.timeline-external {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 4px, 0);
  transition: color .2s ease, opacity .32s ease, transform .52s var(--ease), visibility 0s linear .52s;
}

.timeline-external i {
  font-size: 13px;
  line-height: 1;
}

.timeline-entry.is-active .timeline-external,
.timeline-entry:focus-within .timeline-external {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, .14s, .1s, 0s;
}

.timeline-external:hover,
.timeline-external:focus-visible {
  color: var(--ink);
}

.timeline-entry a {
  color: inherit;
  text-decoration-color: rgba(29, 27, 25, .32);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.timeline-entry a:hover,
.timeline-entry a:focus-visible {
  color: var(--ink);
  text-decoration-color: currentColor;
}

body.details-open .footer-contact {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

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

.text-link {
  appearance: none;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

.preview-shell {
  display: inline;
}

.preview-card {
  position: fixed;
  z-index: 30;
  top: auto;
  right: auto;
  bottom: 40px;
  left: 40px;
  width: min(44vw, 640px);
  max-height: calc(100svh - 80px);
  aspect-ratio: 1200 / 630;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.985);
  transform-origin: left bottom;
  transition: opacity .3s ease, transform .52s var(--ease), visibility 0s linear .52s;
}

.timeline .preview-card { width: min(360px, calc(50vw - 80px)); }

.preview-card img,
.preview-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-focus-preview {
  --preview-progress: 0;
  position: fixed;
  z-index: 30;
  bottom: 40px;
  left: 40px;
  width: min(36vw, 520px);
  aspect-ratio: 1200 / 630;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 10px, 0) scale(.988);
  transform-origin: left bottom;
  transition: opacity .32s ease, transform .62s var(--ease), visibility 0s linear .62s;
}

.project-focus-preview.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transform: none;
  transition-delay: .12s, .12s, 0s;
}

.project-focus-preview-image {
  border: 0;
  border-radius: 4px;
  background: #fff;
}

.project-focus-preview:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.project-focus-preview-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: none;
  transition: none;
}

.project-focus-preview-image[hidden] { display: none; }

.project-focus-preview-video { background: #fff; }

.project-preview-progress {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 5px;
  pointer-events: none;
}

.project-preview-progress::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 1px;
  background: rgba(29, 27, 25, .16);
}

.project-preview-progress-thumb {
  position: absolute;
  top: calc(var(--preview-progress) * (100% - 22px));
  left: 1px;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--ink);
  transition: top .08s linear;
}

.profile .preview-shell:hover .preview-card,
.profile .preview-shell:focus-within .preview-card,
.profile .preview-shell.is-open .preview-card,
.timeline-entry.is-preview-active .preview-card,
.timeline-entry:focus-within .preview-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.site-viewer {
  --viewer-start-left: 40px;
  --viewer-start-bottom: 40px;
  --viewer-start-width: 360px;
  --viewer-start-height: 189px;
  position: fixed;
  z-index: 50;
  top: auto;
  right: auto;
  bottom: var(--viewer-start-bottom);
  left: var(--viewer-start-left);
  width: var(--viewer-start-width);
  height: var(--viewer-start-height);
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.995);
  transform-origin: left bottom;
  transition: left .58s var(--ease), bottom .58s var(--ease), width .58s var(--ease), height .68s var(--ease), opacity .24s ease, transform .58s var(--ease), visibility 0s linear .68s;
}

.site-viewer.is-preparing,
.site-viewer.is-open,
.site-viewer.is-closing {
  opacity: 1;
  visibility: visible;
}

.site-viewer.is-open {
  bottom: 40px;
  left: 40px;
  width: 390px;
  height: min(760px, calc(100svh - 80px));
  transform: none;
  transition-delay: 0s;
}

.site-viewer.is-scroll-closing {
  opacity: 0;
  transform: translateY(6px) scale(.99);
  transition: opacity .22s ease, transform .34s var(--ease), visibility 0s linear .34s;
}

.site-viewer-bar {
  position: relative;
  z-index: 3;
  flex: 0 0 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid rgba(29, 27, 25, .12);
  background: var(--bg);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .28s ease .2s, transform .46s var(--ease) .2s;
}

.site-viewer.is-open .site-viewer-bar {
  opacity: 1;
  transform: none;
}

.site-viewer-title {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -.12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-viewer-close {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.site-viewer-close:hover,
.site-viewer-close:focus-visible { background: rgba(29, 27, 25, .07); }

.site-viewer-close i { font-size: 17px; line-height: 1; }

.site-viewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.site-viewer-content,
.site-viewer-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.site-viewer-content {
  z-index: 1;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  opacity: 0;
  transition: opacity .38s ease;
}

.site-viewer-content:focus { outline: 0; }

.site-viewer-poster {
  z-index: 2;
  background: #fff;
  opacity: 1;
  transition: opacity .38s ease;
}

.site-viewer-poster img,
.site-viewer-poster video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-viewer.is-loaded .site-viewer-content { opacity: 1; }
.site-viewer.is-loaded .site-viewer-poster { opacity: 0; pointer-events: none; }

.native-reader {
  width: 100%;
  padding: 28px 24px 56px;
}

.native-reader-header {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(29, 27, 25, .14);
}

.native-reader h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 8vw, 42px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -1.7px;
}

.native-reader-meta {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.native-reader h2,
.native-reader h3 {
  margin: 36px 0 12px;
  font-weight: 400;
  line-height: 1.1;
}

.native-reader h2 { font-size: 23px; letter-spacing: -.7px; }
.native-reader h3 { font-size: 18px; }

.native-reader p,
.native-reader li {
  font-size: 16px;
  line-height: 1.48;
}

.native-reader p { margin: 0 0 20px; }
.native-reader ul { margin: 0 0 24px; padding-left: 20px; }
.native-reader li { margin-bottom: 8px; }

.native-reader blockquote {
  margin: 28px 0;
  padding-left: 16px;
  border-left: 1px solid var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.native-reader img {
  display: block;
  width: calc(100% + 48px);
  height: auto;
  margin: 28px -24px;
}

.native-inline-link {
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 2px;
}

.native-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.native-carousel-stage {
  position: absolute;
  inset: 0 0 34px;
  overflow: hidden;
}

.native-carousel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: 0;
  transform: translateX(calc(var(--slide-direction, 1) * 5px));
  transition: opacity .34s ease, transform .5s var(--ease);
}

.native-carousel-slide.is-visible { opacity: 1; transform: none; }

.native-carousel-slide img,
.native-carousel-slide canvas,
.native-carousel-slide video,
.native-youtube,
.native-youtube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.native-carousel-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-top: 1px solid rgba(29, 27, 25, .12);
  background: #fff;
}

.native-carousel-controls button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.native-carousel-controls button:hover,
.native-carousel-controls button:focus-visible { background: rgba(29, 27, 25, .07); }
.native-carousel-count { color: var(--muted); font-size: 12px; line-height: 1; }
.native-empty { margin: 24px; color: var(--muted); }

.site-viewer-progress {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 35%;
  height: 1px;
  background: var(--ink);
  opacity: 0;
  transform: translateX(-110%);
}

.site-viewer.is-open:not(.is-loaded) .site-viewer-progress {
  opacity: .55;
  animation: viewer-progress 1.1s ease-in-out infinite;
}

@keyframes viewer-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(390%); }
}

.project-scatter {
  position: fixed;
  z-index: 45;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.project-scatter.is-active,
.project-scatter.is-closing { visibility: visible; }

.logo,
.timeline-year-heading,
.timeline-marker { z-index: 48; }

.project-scatter-trigger { position: relative; z-index: 48; }

.scatter-group {
  position: absolute;
  inset: 0;
}

.scatter-item {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  max-height: 42svh;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: transparent;
  opacity: 0;
  transform: translate3d(0, var(--scatter-in-y, -16px), 0) scale(.985);
  transform-origin: center;
  transition: opacity .38s ease var(--delay, 0ms), transform .72s var(--ease) var(--delay, 0ms);
  will-change: opacity, transform;
}

.scatter-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.scatter-group.is-leaving .scatter-item {
  opacity: 0;
  transform: translate3d(0, var(--scatter-out-y, 18px), 0) scale(.992);
  transition-delay: var(--exit-delay, 0ms);
  transition-duration: .32s, .52s;
}

.scatter-item img,
.scatter-item video,
.scatter-item canvas,
.scatter-item iframe {
  display: block;
  width: 100%;
  height: auto;
  max-height: 42svh;
  border: 0;
  border-radius: 4px;
  object-fit: contain;
}

.scatter-item.has-embed { pointer-events: auto; }

.scatter-item iframe {
  height: min(352px, 42svh);
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.writing-reader {
  position: fixed;
  z-index: 60;
  top: auto;
  bottom: var(--reader-bottom, 40px);
  left: var(--reader-left, 40px);
  width: min(var(--reader-width, 560px), calc(50vw - 64px));
  height: min(72svh, 760px);
  overflow: hidden;
  border: 1px solid rgba(29, 27, 25, .14);
  border-radius: 4px;
  background: #fff;
  opacity: 0;
  transform: translate3d(-10px, 8px, 0) scale(.992);
  transform-origin: left bottom;
  transition: opacity .3s ease, transform .58s var(--ease);
}

.writing-reader.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.writing-reader.is-closing {
  opacity: 0;
  transform: translate3d(-6px, 3px, 0) scale(.996);
}

.writing-reader-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  cursor: pointer;
}

.writing-reader-close i { font-size: 19px; line-height: 1; }

.writing-reader-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 64px 56px 80px;
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 27, 25, .28) transparent;
}

.writing-reader-header { margin-bottom: 48px; }

.writing-reader-header h1 {
  max-width: 480px;
  margin: 0 0 16px;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.writing-reader-meta {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.writing-reader-content { font-size: 17px; line-height: 1.52; }
.writing-reader-content p { margin: 0 0 1.35em; }
.writing-reader-content h2,
.writing-reader-content h3,
.writing-reader-content h4 {
  margin: 2.2em 0 .7em;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.writing-reader-content h2 { font-size: 27px; }
.writing-reader-content h3 { font-size: 22px; }
.writing-reader-content h4 { font-size: 19px; }
.writing-reader-content blockquote {
  margin: 2em 0;
  padding-left: 18px;
  border-left: 1px solid currentColor;
  font-size: 20px;
  line-height: 1.35;
}
.writing-reader-content ul,
.writing-reader-content ol { margin: 0 0 1.35em; padding-left: 1.2em; }
.writing-reader-content li { margin-bottom: .45em; }
.writing-reader-content img {
  display: block;
  width: calc(100% + 112px);
  max-width: none;
  height: auto;
  margin: 40px -56px;
}
.writing-reader-content figcaption {
  margin-top: -28px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.writing-reader-content a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.writing-reader-content hr { margin: 40px 0; border: 0; border-top: 1px solid rgba(29, 27, 25, .14); }

.load-line {
  opacity: 0;
  transform: translateY(4px);
  animation: text-in .72s var(--ease) calc(.58s + var(--i) * .055s) both;
}

.bio > span,
.group-panel-inner > p > .load-line,
.nested-panel-inner .load-line { display: block; }

.footer-contact {
  position: absolute;
  left: calc(50% + 40px);
  bottom: 40px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  transform-style: preserve-3d;
}

.footer-contact-scene,
.footer-contact-billboard {
  margin: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

.footer-contact-scene {
  transform: rotateY(var(--scene-ry, 0deg)) rotateX(var(--scene-rx, 0deg));
  transform-origin: var(--scene-local-origin-x, -40px) var(--scene-local-origin-y, 50vh);
}

.footer-contact-billboard {
  transform: rotateX(var(--scene-counter-rx, 0deg)) rotateY(var(--scene-counter-ry, 0deg));
  transform-origin: left top;
}

.footer-contact-billboard > span { display: block; }
.footer-scholar { color: var(--muted); }

.timeline-footer-anchor {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: clamp(360px, 54vh, 620px);
  padding-top: 112px;
  overflow: visible;
  transform-style: preserve-3d;
}

.timeline-footer-billboard {
  grid-column: 2;
  align-self: start;
  margin: 0;
  padding: 0 6vw 0 40px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  transform: rotateX(var(--scene-counter-rx)) rotateY(var(--scene-counter-ry));
  transform-origin: left top;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.timeline-footer-billboard > span { display: block; }
.timeline-footer-billboard > span:first-child { color: var(--muted); }

.viewport-controls {
  position: fixed;
  z-index: 90;
  right: 40px;
  bottom: 40px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.back-to-top {
  --scene-rx: 0deg;
  --scene-ry: 0deg;
  --scene-counter-rx: 0deg;
  --scene-counter-ry: 0deg;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility 0s linear .52s;
}

.back-to-top-object {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(29, 27, 25, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  transform: translate3d(0, 8px, 0) scale(.94);
  transition: background-color .24s ease, color .24s ease;
}

.back-to-top i {
  font-size: 18px;
  line-height: 1;
  transform: rotateY(var(--scene-ry)) rotateX(var(--scene-rx));
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transition-delay: 0s;
}

.back-to-top.is-visible .back-to-top-object {
  transform: scale(1);
}

.back-to-top:hover .back-to-top-object {
  background: var(--ink);
  color: #fff;
}

.back-to-top:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.scene-reset {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(29, 27, 25, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.94);
  transition: opacity .24s ease, visibility 0s linear .32s, transform .42s var(--ease), background-color .24s ease, color .24s ease;
}

.scene-reset i { font-size: 17px; line-height: 1; }

.scene-reset.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.scene-reset:hover { background: var(--ink); color: #fff; }
.scene-reset:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes text-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  main { overflow: visible; }

  .logo {
    position: sticky;
    top: 24px;
    left: auto;
    width: 106.4px;
    height: auto;
    margin: 24px 20px 0;
  }

  .profile {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    min-height: 50svh;
    margin: calc(35svh - 64px) 20px 0 40px;
    padding-bottom: 28px;
    transform: none;
    animation-name: enter;
  }

  .present-project-trigger {
    left: calc(50vw - 57px);
  }

  .profile-anchor-marker {
    left: calc(50vw - 43.5px);
  }

  .groups { gap: 40px; }
  .nested-panel-inner p { width: calc(100% - 16px); }

  .timeline-panel {
    width: 100vw;
    padding-top: 24px;
  }

  .timeline-year:first-child .timeline-year-entries { padding-top: 0; }

  .timeline-year-heading {
    --year-offset: max(0px, calc(28px - .47em));
    top: calc(24px - var(--year-offset));
    padding-right: 20px;
    padding-left: 12px;
    font-size: 31px;
    letter-spacing: -1.5px;
  }

  .timeline-entry {
    width: 100%;
    min-height: 116px;
    margin: 0 0 64px;
    padding: 0 18px 0 20px;
    text-align: left;
  }

  .timeline-entry p {
    font-size: 13px;
    line-height: 1.35;
  }

  .footer-contact {
    left: 40px;
    bottom: 24px;
  }

  .viewport-controls {
    right: 20px;
    bottom: 20px;
  }

  .timeline-footer-anchor {
    display: grid;
    grid-template-columns: 40px 1fr;
    min-height: 44svh;
    padding-top: 72px;
  }

  .timeline-footer-billboard {
    grid-column: 2;
    padding: 0 18px 0 20px;
    font-size: 15px;
  }

  .scatter-item {
    max-height: 31svh;
  }

  .scatter-item img,
  .scatter-item video,
  .scatter-item canvas,
  .scatter-item iframe { max-height: 31svh; }

  .scatter-item iframe { height: min(352px, 31svh); }

  .writing-reader {
    top: auto;
    right: 20px;
    bottom: 20px;
    left: 20px;
    width: auto;
    height: min(68svh, 620px);
    transform: translate3d(0, 8px, 0) scale(.994);
  }

  .writing-reader.is-open { transform: none; }
  .writing-reader.is-closing { transform: translate3d(0, -4px, 0) scale(.997); }
  .writing-reader-scroll { padding: 56px 24px 64px; }
  .writing-reader-header { margin-bottom: 38px; }
  .writing-reader-header h1 { font-size: 30px; line-height: 1.06; }
  .writing-reader-content { font-size: 16px; }
  .writing-reader-content h2 { font-size: 24px; }
  .writing-reader-content img { width: calc(100% + 48px); margin: 32px -24px; }

  .preview-card {
    top: auto;
    right: 20px;
    bottom: 20px;
    left: 20px;
    width: auto;
    max-height: calc(100svh - 40px);
    transform: translateY(8px) scale(.985);
  }

  .timeline .preview-card {
    right: 20px;
    left: 40px;
    width: auto;
  }

  .project-focus-preview {
    right: 20px;
    bottom: 20px;
    left: 20px;
    width: auto;
    max-height: 34svh;
  }

  .site-viewer.is-open {
    right: 20px;
    bottom: 20px;
    left: 20px;
    width: calc(100vw - 40px);
    height: min(72svh, 650px);
  }

  .profile .preview-shell:hover .preview-card,
  .profile .preview-shell:focus-within .preview-card,
  .profile .preview-shell.is-open .preview-card,
  .timeline-entry.is-preview-active .preview-card,
  .timeline-entry:focus-within .preview-card { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .timeline-panel-inner { transform: none !important; }
  .timeline-entry { top: 0; opacity: 1; transform: none; }
  .timeline-entry-copy,
  .timeline-year-heading,
  .timeline-year-heading > span,
  .timeline-marker,
  .present-project-trigger,
  .profile-anchor-marker,
  .profile-scene,
  .profile-billboard,
  .footer-contact-scene,
  .footer-contact-billboard,
  .timeline-footer-billboard { transform: none !important; filter: none !important; }
}