@font-face {
  font-family: Manrope;
  src: url("./fonts/manrope-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --canvas: #d6ff00;
  --ink: #111111;
  --paper: #f7f7f2;
  --gutter: clamp(24px, 4vw, 64px);
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body, h1, p { margin: 0; }
::selection { color: var(--canvas); background: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page {
  max-width: 1920px;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: max(24px, env(safe-area-inset-top)) var(--gutter) max(24px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: 1fr auto;
}

.identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2.5svh, 28px);
  padding-block: 12px 40px;
}

.wordmark { width: min(90%, 92svh); line-height: 0; }
.wordmark img, .wordmark svg { display: block; width: 100%; height: auto; }
.home .wordmark svg { overflow: visible; }
.home .letter { transform-box: fill-box; transform-origin: center bottom; }
.home-scan-beam { opacity: 0; pointer-events: none; }
.statement { font-size: clamp(19px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -.035em; text-align: center; text-wrap: balance; }
.statement a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.statement a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

.footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.4;
  letter-spacing: -.025em;
}

.services { padding-block: 12px; text-wrap: balance; }
.contact-block { display: flex; justify-content: flex-end; align-items: center; gap: .3em; white-space: nowrap; }
.contact {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.contact span { position: relative; }
.contact span::after {
  content: "";
  position: absolute;
  inset: auto 0 -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform 180ms cubic-bezier(.19, 1, .22, 1);
}
.contact:active { opacity: .65; }
.contact:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.contact:focus-visible span::after { transform: scaleX(1); transition: none; }

@media (hover: hover) and (pointer: fine) {
  .contact:hover span::after { transform: scaleX(1); }
}

@keyframes enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scan-letter {
  from { clip-path: inset(0 0 100% 0); transform: translateX(-9px); }
  to { clip-path: inset(0 0 0% 0); transform: translateX(0); }
}

@keyframes scan-beam {
  0% { opacity: 0; transform: translateY(0); }
  8% { opacity: 1; transform: translateY(40px); }
  88% { opacity: 1; transform: translateY(525px); }
  100% { opacity: 0; transform: translateY(535px); }
}

@media (prefers-reduced-motion: no-preference) {
  .home .letter { animation: scan-letter 1150ms steps(8, end) backwards; animation-delay: calc(var(--letter-index) * 55ms); }
  .home-scan-beam { animation: scan-beam 1450ms steps(10, end) backwards; }
  .home .statement, .home .services, .home .contact-block { animation: enter 400ms cubic-bezier(.19, 1, .22, 1) backwards; }
  .home .statement { animation-delay: 1600ms; }
  .home .services { animation-delay: 1770ms; }
  .home .contact-block { animation-delay: 1940ms; }
  .intro-complete .home .letter,
  .intro-complete .home .home-scan-beam,
  .intro-complete .home .statement,
  .intro-complete .home .services,
  .intro-complete .home .contact-block { animation: none; }
}

@media (max-width: 650px) {
  .identity { padding-block: 20px 48px; gap: 24px; }
  .wordmark { width: 90%; }
  .footer { gap: 24px; grid-template-columns: 1fr; text-align: center; }
  .services { padding: 0; }
  .contact-block { justify-content: center; font-size: clamp(12px, 3.5vw, 18px); }
}

@media (max-height: 550px) {
  .page { padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
  .identity { padding-block: 0 16px; gap: 8px; }
  .wordmark { width: min(90%, 85svh); }
  .statement { font-size: 18px; }
  .footer { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact span::after { transition: none; }
}