:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  color: #202020;
  background: #fafafa;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 48px 0;
  min-width: 280px;
  min-height: 100svh;
}

::selection { background: #e9e8ef; color: #161616; }

main {
  flex-shrink: 0;
  width: min(980px, calc(100% - 96px));
  margin: auto;
}

h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 54px;
  color: #292929;
  font-size: clamp(72px, 7.8vw, 108px);
  line-height: 1.01;
  font-weight: 750;
  letter-spacing: -0.06em;
  text-shadow: -0.3px -0.3px 0.35px #fff, 0.25px 0.4px 0.45px rgba(0, 0, 0, 0.14);
}

h1 .reflection + .reflection { margin-left: 8.333%; }

/* The headline settles, holds for a beat, then the supporting content appears. */
h1 { animation: entrance-fade 1s ease-in-out both; }
.introduction,
.contact { animation: entrance-fade 1.2s ease-in-out 2s both; }

@keyframes entrance-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.introduction {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-top: 25px;
  color: rgba(0, 0, 0, .6);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.introduction-lead {
  grid-column: 1 / 5;
  max-width: 285px;
  padding-right: 16px;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.introduction-detail { grid-column: 6 / -1; }

.mobile-name { display: none; }

p { margin: 0; }
p + p { margin-top: 23px; }

.introduction a {
  color: #8800ff;
  text-decoration-color: #8800ff;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 180ms ease;
}

.introduction a:hover { text-decoration-color: transparent; }

.introduction a,
.contact a {
  opacity: 0.6;
  transition: opacity 180ms ease, text-decoration-color 180ms ease;
}

.introduction a:hover,
.introduction a:focus-visible,
.contact a:hover,
.contact a:focus-visible {
  opacity: 1;
}

.contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 20px;
  margin-top: 38px;
  padding-top: 19px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.contact a:last-child { margin-left: auto; }

.contact a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: #8800ff;
  white-space: nowrap;
  text-decoration: none;
}

.contact a[href]:hover { text-decoration: underline; text-underline-offset: 5px; }

.contact .contact-primary {
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 12px 18px;
  gap: 24px;
  color: #8800ff;
  background: #fff;
  border: 1px solid rgba(136, 0, 255, .6);
  opacity: 1;
  font-size: 14px;
  font-weight: 450;
  transition: border-color 180ms ease;
}

.contact .contact-primary[href]:hover { border-color: #8800ff; text-decoration: none; }
.contact .contact-primary:focus-visible { outline: 2px solid #8800ff; outline-offset: 4px; }
.arrow { color: inherit; font-size: 13px; transition: transform 180ms ease; }
.contact a[href]:hover .arrow { transform: translate(1px, -1px); }

a:focus-visible { outline: 1px solid #666; outline-offset: 6px; border-radius: 1px; }

/* A soft pearlescent colour field, clipped to the letters themselves. */
.reflection {
  position: relative;
  display: inline-block;
  /* Let the colour layers cover descenders without changing line spacing. */
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.reflection::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  pointer-events: none;
  text-shadow: none;
  background-image: linear-gradient(var(--pearl-angle, 260deg),
    transparent 12%,
    rgba(239, 233, 224, .18) 27%,
    rgba(193, 237, 203, .48) 37%,
    rgba(146, 245, 255, .85) 47%,
    rgba(135, 148, 255, .85) 59%,
    rgba(225, 186, 237, .38) 70%,
    transparent 86%);
  background-size: 260% 160%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
}

.reflection.is-reflecting::after {
  animation: reflected-light var(--glint-duration, 5s) ease-in-out var(--glint-delay, 0s) 1 var(--glint-direction, normal) both;
}

@keyframes reflected-light {
  0% { background-position: 110% 35%; opacity: 0; }
  20% { opacity: calc(var(--glint-opacity, .36) * .45); }
  45% { opacity: var(--glint-opacity, .36); }
  65% { opacity: calc(var(--glint-opacity, .36) * .85); }
  82% { opacity: calc(var(--glint-opacity, .36) * .4); }
  100% { background-position: -10% 65%; opacity: 0; }
}

@media (max-width: 700px) {
  .desktop-pronoun { display: none; }
  .mobile-name { display: inline; }
  body { padding-block: 36px; }
  main { width: calc(100% - 54px); }
  h1 { font-size: clamp(40px, 13.8vw, 88px); margin-bottom: 40px; }
  h1 .reflection + .reflection { margin-left: 0; }
  .introduction { display: flex; flex-direction: column; padding-top: 0; font-size: 19px; }
  .introduction-lead { display: contents; }
  .introduction-detail { order: 1; margin-top: 25px; }
  .introduction-lead p + p { order: 2; }
  p + p { margin-top: 22px; }
  .contact { margin-top: 40px; padding-top: 0; column-gap: 23px; row-gap: 17px; }
  .contact a:last-child { margin-left: 0; }
  .contact .contact-primary { order: -1; flex-basis: 100%; }
}

@media (max-width: 370px) {
  main { width: calc(100% - 44px); }
  h1 { font-size: clamp(36px, 13.8vw, 51px); }
  .introduction { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  h1, .introduction, .contact { animation: none; }
  .reflection::after, .reflection.is-reflecting::after { animation: none; }
  .arrow, .introduction a, .contact a, .contact .contact-primary { transition: none; }
}