:root {
  --measure: 580px;
}

.page {
  max-width: calc(var(--measure) + var(--padding-edge) * 2);
  margin: 0 auto;
  padding: 0 var(--padding-edge);
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xtreme1);
  padding-block: var(--spacing-xxxlarge) var(--spacing-xtreme2);
}

.intro-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-xlarge);
}

.intro-name {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.portrait-figure {
  width: fit-content;
  margin: 0;
  flex: 0 0 auto;
  perspective: 620px;
}

.portrait {
  position: relative;
  margin: 0;
  width: 189px;
  height: 214px;
  border-radius: var(--radius-medium);
  overflow: clip;
  transform-style: preserve-3d;
  will-change: transform;
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-xsmall) solid var(--border-transparent);
  border-radius: inherit;
  pointer-events: none;
}

.portrait-glare {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgb(255 255 255 / 0.7),
    rgb(255 255 255 / 0) 58%
  );
}

.portrait img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-disabled);
  background: var(--background-tertiary);
}

.portrait:has(img) .portrait-empty { display: none; }

.portrait-empty svg { width: 48px; height: 48px; }

.headline {
  margin: 0;
  font: var(--text-title1-regular);
  letter-spacing: var(--text-title1-regular-tracking);
  color: var(--content-primary);
}

.subline {
  margin: 0;
  font: var(--text-title-alt1-italic);
  letter-spacing: var(--text-title-alt1-italic-tracking);
  color: var(--content-expressive-red);
}

.time {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
  margin: 0 0 var(--spacing-large);
  font: var(--text-caption-alt1-regular);
  letter-spacing: var(--text-caption-alt1-regular-tracking);
  color: var(--content-secondary);
  font-variant-numeric: tabular-nums;
}

.clock {
  --clock-fill: var(--background-transparent-subtle);
  --clock-hand: var(--content-primary);
  --clock-second: var(--content-expressive-red);

  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: var(--clock-fill);
}

.clock i {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  margin: 0;
  padding-top: var(--spacing-xxlarge);
  font: var(--text-subheadline-regular);
  letter-spacing: var(--text-subheadline-regular-tracking);
  color: var(--content-secondary);
}

.prose p { margin: 0; }

.prose a {
  position: relative;
  padding: var(--spacing-xxxsmall);
  margin: calc(var(--spacing-xxxsmall) * -1);
  color: var(--content-primary);
  text-decoration: none;
  transition: color 200ms ease;
}

@media (hover: hover) {
  .prose a:hover { color: var(--content-expressive-red); }
}

main > section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

.section-title {
  margin: 0;
  font: var(--text-caption1-ac-medium);
  letter-spacing: var(--text-caption1-ac-medium-tracking);
  text-transform: uppercase;
  color: var(--content-secondary);
}

.section-cv { margin-top: calc(var(--spacing-xxlarge) - var(--spacing-xtreme1)); }

@property --sign-wipe {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.signature {
  --sign-feather: 14%;

  display: block;
  width: 117px;
  aspect-ratio: 187 / 74;
  mask-image:
    linear-gradient(112deg, #000 calc(var(--sign-wipe) - var(--sign-feather)), transparent var(--sign-wipe)),
    url("../assets/signature.svg");
  mask-repeat: no-repeat;
  mask-size: 100% 100%, contain;
  mask-position: center, center;
  mask-composite: intersect;
}

.signature.shown { animation: sign 2000ms cubic-bezier(0.4, 0, 0.6, 1) 240ms both; }

@keyframes sign {
  from { --sign-wipe: 0%; }
  to { --sign-wipe: 120%; }
}

.reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 700ms ease, translate 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.shown { opacity: 1; translate: none; }

@media (max-width: 600px) {
  .intro-top { flex-direction: column; align-items: flex-start; gap: var(--spacing-xxlarge); }
  .intro-name { width: 100%; }
  .portrait-figure { width: 100%; }

  .portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 358 / 405;
  }

  .time { margin-bottom: var(--spacing-small); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transition: none; }
  .signature { --sign-wipe: 120%; }
  .signature.shown { animation: none; }
}