/* One screen of deep leaf green. A cross-section of tree rings grows off to
   the right; the words sit low on the left, like a label on a log end. */
:root {
  --leaf: #17331f;        /* base: shaded leaf, dark and lush */
  --leaf-deep: #10261a;   /* latewood, the darker bands */
  --sap: #a9c48f;         /* light ring lines */
  --bud: #c4d896;         /* new growth, used once */
  --text: #e7eedc;        /* underside of a leaf */
  --muted: #93ad88;
  --face: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--leaf);
  color: var(--text);
  font-family: var(--face);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

main {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  align-content: end;
  gap: clamp(20px, 3.5vh, 36px);
  padding-top: max(clamp(24px, 5vh, 56px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(24px, 5vh, 56px), env(safe-area-inset-bottom, 0px));
  padding-left: max(clamp(20px, 6vw, 88px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 6vw, 88px), env(safe-area-inset-right, 0px));
}

h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.4rem, 6.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(24px, 3vw, 40px);
}

.link {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-block: 4px;
}
.link::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--bud);
  transition: transform 0.4s ease;
}
.link:hover::before { transform: scale(1.5); }
.link:focus-visible { outline: 2px solid var(--bud); outline-offset: 6px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .link::before { transition: none; }
}