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

:root {
  --bg:        #0f1117;
  --text:      #d1d8e0;   /* Flat UI DE: light blue-grey */
  --text-mid:  #778ca3;   /* Flat UI DE: blue-grey */
  --text-dim:  #4b6584;   /* Flat UI DE: dark steel */
  --red:       #eb3b5a;   /* Flat UI DE: amaranth */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;
  --col:       56rem;
  --px:        clamp(2rem, 8vw, 8rem);
  --py:        clamp(2.5rem, 6vw, 5rem);
}

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--py) var(--px);
  animation: appear 1s ease both;
}

@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

main,
footer {
  max-width: var(--col);
  width: 100%;
}

/* ── Main ── */

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Wordmark ── */

h1 {
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 14vw, 11rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 2.75rem;
}

/* ── Descriptor ── */

.descriptor {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.5rem;
}

/* ── Statement ── */

.statement {
  font-family: var(--font-mono);
  font-size: 0.775rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 38rem;
  margin-bottom: 2.75rem;
}

/* ── Specialisms ── */

.specialisms {
  list-style: none;
}

.specialisms li {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--text-mid);
}

.specialisms li + li::before {
  content: '  ·  ';
  color: var(--text-dim);
}

/* ── Footer ── */

footer {
  padding-top: 1.5rem;
  border-top: 1px solid var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.575rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}