/* Self-hosted rather than loaded from Google Fonts: embedding the
   Google-hosted stylesheet sends every visitor's IP to Google, which EU
   courts have held to be a GDPR breach. Both faces are SIL Open Font
   License 1.1 — licences alongside the files in /fonts.
   Latin subsets only (U+0000-00FF covers å ä ö). */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Martian Mono";
  src: url("fonts/martian-mono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #e9eaec;
  --ink: #0c0d0e;
  --amber: #de7018;
  --mute: #6a6d71;

  --display: "Martian Mono", ui-monospace, monospace;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --pad: clamp(1.1rem, 3.5vw, 5rem);

  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------
   shell — one screen at any ordinary size. min-height rather than
   height, and `safe` centring, so that content which genuinely cannot
   fit (very large default font on a short window) scrolls instead of
   being clipped away with no way to reach it.
   --------------------------------------------------------------- */

.shell {
  min-height: 100svh;
  display: grid;
  align-content: safe center;
  justify-content: center;
  text-align: center;
  /* extra padding at the foot lifts the block to the optical centre,
     which sits a little above the true one */
  padding: var(--pad) var(--pad) calc(var(--pad) + 5vh);
}

.name {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.1vw + 1.1vh, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.tag {
  margin: clamp(0.5rem, 1.6vh, 1rem) 0 0;
  font-size: clamp(0.8rem, 0.4vw + 0.6vh, 1.3125rem);
  color: var(--amber);
}

/* ---------------------------------------------------------------
   links
   --------------------------------------------------------------- */

.links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  margin-top: clamp(1.5rem, 5vh, 3rem);
}

.link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--mute);
  transition: color 0.25s;
}

.link:hover,
.link:focus-visible { color: var(--amber); }

.link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.icon {
  width: clamp(1.25rem, 0.5vw + 0.9vh, 1.625rem);
  display: block;
}

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