@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* The name always sets on two lines. Nine characters at 0.6em, less tracking,
   is 5.2em wide, so the type fills the width until the height runs out. The
   10rem holds room for the button and footer on short screens. */
:root {
  --paper: #f4f3ef;
  --ink: #161616;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --tall: 100vh;
  --name: min(
    (100vw - 2 * var(--gutter)) / 5.2,
    (var(--tall) - 2 * var(--gutter) - 10rem) / 2
  );
  /* The O's side bearing, so smaller things line up with its visible edge. */
  --edge: calc(var(--name) * 0.041);
}

@supports (height: 100svh) {
  :root {
    --tall: 100svh;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161616;
    --ink: #f4f3ef;
  }
}

* {
  margin: 0;
  box-sizing: border-box;
}

/* Equal rows above and below keep the name centered with the footer present. */
body {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--gutter);
  background: var(--paper);
  color: var(--ink);
  font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  font-weight: 300;
}

main {
  grid-row: 2;
}

h1 {
  font-size: var(--name);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

h1 span {
  display: block;
}

#contact {
  display: inline-flex;
  align-items: center;
  margin: clamp(1.25rem, var(--name) * 0.2, 3rem) 0 0 var(--edge);
  padding: 0.8em 1.2em;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: clamp(0.875rem, var(--name) * 0.09, 1.25rem);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#contact[hidden] {
  display: none;
}

#contact svg {
  width: 0;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  opacity: 0;
  transition: width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease;
}

#contact:hover,
#contact:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

#contact:hover svg,
#contact:focus-visible svg {
  width: 1em;
  margin-left: 0.75em;
  opacity: 1;
}

/* Touch screens have no rollover, so the arrow simply stays. */
@media (hover: none) {
  #contact svg {
    width: 1em;
    margin-left: 0.75em;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #contact,
  #contact svg {
    transition: none;
  }
}

/* Sized to the name's width, never widening it. */
footer {
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 2em;
  width: 0;
  min-width: 100%;
  padding-left: var(--edge);
  font-size: 0.8125rem;
}

footer a {
  color: color-mix(in srgb, var(--ink) 60%, var(--paper));
  text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
  color: var(--ink);
}