:root {
  color-scheme: light dark;
  --ground: #dcebf2;
  --ink: #102d3a;
  --spark: #f05a3f;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

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

main {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

h1 {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: clamp(2.8rem, 10vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 0.73;
  color: var(--spark);
}

.name { display: block; }

.initial { color: var(--ink); }

a {
  align-self: flex-start;
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.035em;
  text-decoration-color: transparent;
  text-underline-offset: 0.35em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

a:hover, a:focus-visible {
  color: var(--spark);
  text-decoration-color: currentColor;
}

a:focus-visible { outline: 2px solid var(--spark); outline-offset: 0.45rem; }

@media (prefers-color-scheme: dark) {
  :root { --ground: #182329; --ink: #d8edf4; --spark: #ff765f; }
}

@media (prefers-reduced-motion: reduce) { a { transition: none; } }