@import url("/tokens.css");

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--illun-canvas);
  color: var(--illun-ink);
  font-family: "Hanken Grotesk", sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--illun-sage); }
.page {
  width: min(100%, 100rem);
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.wordmark {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.065em;
}
main {
  min-width: 0;
  display: flex;
  align-items: center;
  padding-block: 6rem 8rem;
}
h1 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(3.25rem, 9vw, 9rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.055em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.period { color: var(--illun-accent); }
.horizon {
  height: 1px;
  background: var(--illun-line);
}
.horizon::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--illun-accent);
}
@media (max-width: 480px) {
  h1 { max-width: 5.5em; }
  main { padding-block: 5rem 7rem; }
}