:root {
  color-scheme: light;
  --paper: #f6f6f2;
  --ink: #171717;
  --muted: #62625e;
  --line: #d4d4ce;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-underline-offset: 0.25em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

.skip-link {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  padding: 0.8rem 1rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.page {
  width: min(100% - 112px, 1520px);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(72px, 9vh, 120px) 0 64px;
}

h1 {
  margin: 0;
  font-size: clamp(6rem, 18.5vw, 17rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.075em;
}
h1 span { display: block; }

.details { margin-top: clamp(48px, 6vh, 80px); }
.details p { margin: 0; font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.5; }
.details a { display: inline-block; margin-top: 1.25rem; padding-block: 0.5rem; }

footer {
  padding: 25px 0 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .page { width: calc(100% - 48px); }
  main { padding: 72px 0 64px; }
  h1 { font-size: 24vw; }
  .details { margin-top: 40px; }
  footer { padding: 22px 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; }
}