@font-face {
  font-family: 'Inter Tight';
  src: url('assets/heavy.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --rail: clamp(52px, 10.1cqw, 150px);
  --gap: clamp(20px, 6cqw, 90px);
  --link-size: clamp(27px, 6.9cqw, 103px);
  --depth: clamp(10px, 1.2cqw, 18px);
  --cap-thickness: clamp(4px, .4cqw, 6px);
  --button-radius: clamp(14px, 1.5cqw, 22px);
  --page-padding: clamp(16px, 2vw, 30px);
  font-family: 'Inter Tight', 'Arial Black', sans-serif;
  font-weight: 900;
  background: white;
  color: black;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Scale the composition to available height, preserving its proportions. */
.page {
  container-type: inline-size;
  width: min(100%, 120svh, 1547px);
  margin: 0 auto;
  padding: clamp(16px, 2svh, 28px) var(--page-padding);
}
.header { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--gap); align-items: stretch; margin-bottom: clamp(18px, 2.7cqw, 40px); }
.identity { min-width: 0; position: relative; }
h1 { margin: 0; font-size: clamp(70px, 21.7cqw, 330px); font-weight: 900; letter-spacing: -.035em; line-height: .78; }
h1 span { display: block; width: max-content; }
.first-name { padding-bottom: .04em; line-height: .9; transform: scaleX(1.23); transform-origin: left center; }
.first-name .name-r { display: inline; margin-right: .055em; }
.last-name { white-space: nowrap; transform: scaleX(.9); transform-origin: left center; }
.last-name .apostrophe { display: inline; font-size: .58em; letter-spacing: -.04em; }
.doodles { display: flex; align-items: center; gap: 4%; position: absolute; right: -1%; top: 7%; width: 31%; height: 47%; }
.doodles svg { width: 50%; height: 100%; overflow: visible; }
.doodles path { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.socials { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 2px 0 8px; gap: 8px; }
.projects { display: grid; gap: clamp(14px, 1.8cqw, 26px); }
:is(.project-link, .social-link) {
  --travel: var(--depth);
  --focus-travel: calc(var(--depth) - min(3px, calc((var(--depth) - var(--cap-thickness)) / 2)));
  position: relative;
  isolation: isolate;
  display: block;
  margin-top: var(--depth);
  background: black;
  border-radius: var(--button-radius);
  box-shadow: none;
}
/* Keep the original raised area clickable while the cap moves away. */
:is(.project-link, .social-link)::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--depth));
  right: 0;
  bottom: 0;
  left: calc(-1 * var(--depth));
}
/* Sweep a rounded base along the diagonal without clipping its corner arcs. */
:is(.project-link, .social-link)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: black;
  border-radius: inherit;
  box-shadow:
    calc(var(--travel) * -0.0625) calc(var(--travel) * -0.0625) 0 black,
    calc(var(--travel) * -0.125) calc(var(--travel) * -0.125) 0 black,
    calc(var(--travel) * -0.1875) calc(var(--travel) * -0.1875) 0 black,
    calc(var(--travel) * -0.25) calc(var(--travel) * -0.25) 0 black,
    calc(var(--travel) * -0.3125) calc(var(--travel) * -0.3125) 0 black,
    calc(var(--travel) * -0.375) calc(var(--travel) * -0.375) 0 black,
    calc(var(--travel) * -0.4375) calc(var(--travel) * -0.4375) 0 black,
    calc(var(--travel) * -0.5) calc(var(--travel) * -0.5) 0 black,
    calc(var(--travel) * -0.5625) calc(var(--travel) * -0.5625) 0 black,
    calc(var(--travel) * -0.625) calc(var(--travel) * -0.625) 0 black,
    calc(var(--travel) * -0.6875) calc(var(--travel) * -0.6875) 0 black,
    calc(var(--travel) * -0.75) calc(var(--travel) * -0.75) 0 black,
    calc(var(--travel) * -0.8125) calc(var(--travel) * -0.8125) 0 black,
    calc(var(--travel) * -0.875) calc(var(--travel) * -0.875) 0 black,
    calc(var(--travel) * -0.9375) calc(var(--travel) * -0.9375) 0 black,
    calc(var(--travel) * -1) calc(var(--travel) * -1) 0 black;
  z-index: -1;
  pointer-events: none;
  transition: box-shadow 160ms cubic-bezier(.2,.8,.2,1);
}
.button-face {
  --thickness: var(--cap-thickness);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  align-items: center;
  min-height: clamp(64px, 9cqw, 130px);
  padding: clamp(12px, 1.4cqw, 20px) 0 clamp(12px, 1.4cqw, 20px) clamp(14px, 1.6cqw, 24px);
  background: white;
  color: black;
  outline: 4px solid black;
  outline-offset: -4px;
  border-radius: var(--button-radius);
  box-shadow: var(--thickness) var(--thickness) 0 black;
  transform: translate(calc(-1 * var(--depth)), calc(-1 * var(--depth)));
  transition: background-color 120ms, color 120ms, transform 160ms cubic-bezier(.2,.8,.2,1);
}
.project-label { font-size: var(--link-size); font-weight: 900; letter-spacing: 0; word-spacing: .12em; line-height: 1.08; }
.project-arrow { display: block; width: 70%; height: auto; justify-self: center; }
:is(.project-link, .social-link):focus-visible { --travel: var(--focus-travel); outline: 4px dashed black; outline-offset: 6px; }
:is(.project-link, .social-link):focus-visible .button-face {
  background: black;
  color: white;
  transform: translate(calc(-1 * var(--focus-travel)), calc(-1 * var(--focus-travel)));
}
:is(.project-link, .social-link):is(:active, .is-pressed) { --travel: calc(var(--cap-thickness) / 2); }
:is(.project-link, .social-link):is(:active, .is-pressed) .button-face {
  --thickness: calc(var(--cap-thickness) / 2);
  background: black;
  color: white;
  outline: 3px solid white;
  outline-offset: -6px;
  transform: translate(calc(-1 * var(--cap-thickness) / 2), calc(-1 * var(--cap-thickness) / 2));
}
/* Social buttons share the project-button mechanics at icon scale. */
.social-link {
  width: min(100%, 110px);
  min-height: 44px;
  aspect-ratio: 1;
}
.social-link .social-face {
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 44px;
  aspect-ratio: 1;
  padding: clamp(6px, .8cqw, 10px);
}
.social-face svg { display: block; width: 100%; height: auto; aspect-ratio: 1; color: black; transition: filter 120ms; }
.social-link:focus-visible svg, .social-link:active svg, .social-link.is-pressed svg { filter: invert(1); }
@media (max-width: 800px) {
  .page { width: 100%; }
  .header {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 18px;
    align-items: center;
    margin-bottom: clamp(18px, 2.7cqw, 30px);
  }
  .identity { display: contents; }
  h1 { grid-column: 1 / -1; grid-row: 1; }
  .doodles {
    position: static;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    width: clamp(84px, 28cqw, 150px);
    height: clamp(44px, 14cqw, 72px);
    transform: translateY(calc(-1 * var(--depth) / 2));
  }
  .socials {
    flex-direction: row;
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    gap: clamp(18px, 3cqw, 28px);
    margin-top: 0;
    padding: 0;
  }
  .social-link { width: clamp(44px, 8cqw, 72px); }
  h1 { font-size: 26cqw; }
  .button-face { min-height: clamp(70px, 9cqw, 92px); padding: clamp(12px, 1.8cqw, 18px) 0 clamp(12px, 1.8cqw, 18px) 14px; }
  .projects { gap: clamp(14px, 1.8cqw, 22px); }
}
@media (max-width: 480px) {
  .page { padding-top: clamp(16px, 2svh, 24px); }
  .header { gap: 18px; margin-bottom: 28px; }
  h1 { font-size: 26cqw; line-height: .92; }

  .doodles path { stroke-width: 10; }
  .socials { padding: 0; }
  .social-link { width: 44px; }
  .social-link .social-face { padding: 6px; }
  .projects { gap: clamp(14px, 2.4svh, 20px); }
  .button-face { min-height: clamp(70px, 12svh, 94px); padding: clamp(12px, 2svh, 18px) 0 clamp(12px, 2svh, 18px) 14px; }
  .first-name { transform: scaleX(1.42); }
  .last-name { transform: scaleX(.92); }
  .project-arrow { width: 60%; }
}
/* Compact landscape windows keep full-size targets and allow scroll if necessary. */
@media (min-width: 801px) and (max-height: 500px) {
  :root { --rail: 44px; --depth: 6px; --cap-thickness: 3px; --link-size: clamp(22px, 6.9cqw, 103px); }
  .page { width: min(100%, 110svh); padding: 12px; }
  .socials { padding: 0; gap: 4px; }
  .header { margin-bottom: 16px; }
  h1 { font-size: clamp(48px, 21.7cqw, 330px); }
  .projects { gap: 12px; }
  .button-face { min-height: 44px; padding: 8px 0 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}