:root {
  --ink: #1A1A1A;
  --red: #D62B2B;
  --paper: #FFFFFF;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html { background: var(--paper); color: var(--ink); }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  font-family: var(--mono);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

/* Head widths are 222 dots x 2, 1.5 or 4/3 CSS px, matching the files picked in index.html. */
.head { display: block; width: 444px; height: auto; }
@media (max-width: 475px) {
  .head { width: 333px; }
}
@media (max-width: 475px) and (min-resolution: 2.5dppx) {
  .head { width: 296px; }
}

h1 { line-height: 0; }
.wordmark { width: min(360px, 80vw); height: auto; }

.soon {
  font-size: 14px;
  letter-spacing: 0.5em;
  margin-right: -0.5em; /* letter-spacing adds trailing space; keep it centred */
  text-transform: uppercase;
}

.social { display: flex; gap: 24px; list-style: none; }
.social a { display: block; color: var(--ink); transition: color 0.15s; }
.social svg { display: block; width: 22px; height: 22px; fill: currentColor; }

.mail {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.15s;
}

.social a:hover, .social a:focus-visible,
.mail:hover, .mail:focus-visible { color: var(--red); }

a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }