/* Chivo Mono, self-hosted. Variable font, so one 26KB file covers every
   weight and there is no external font request. Licensed under the OFL. */
@font-face {
  font-family: "Chivo Mono";
  src: url("assets/fonts/chivo-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Dark clinical: deep slate ground with pale text. */
:root {
  --bg: #0f1519;
  --ink: #dee5ea;
  --muted: #7d8b95;
  --rule: rgba(222, 229, 234, 0.18);
  --size: 15px;
}

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

/* One type size throughout — hierarchy comes from weight and whitespace
   only, never from scale. */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--size);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Field of molecular structures, full bleed. Inverted so the linework
   glows on the dark ground, and masked so it thins out under the text
   column on the right rather than competing with it. */
.backdrop {
  position: fixed;
  inset: 0;
  background: url("assets/molecules.jpg") center / cover no-repeat;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.26;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, #000, #000 42%, transparent 82%);
  mask-image: linear-gradient(to right, #000, #000 42%, transparent 82%);
}

/* Content sits centred in the viewport rather than pinned top-left. */
.col {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* `safe` falls back to flex-start once the content is taller than the
     viewport; plain `center` would push the top out of reach of scroll. */
  justify-content: center;
  justify-content: safe center;
  gap: 2.25rem;
  max-width: 30rem;
  margin-left: auto;
  margin-right: clamp(1.5rem, 8vw, 6rem);
  padding: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 5vw, 2rem);
}

.mark { width: 22px; height: 22px; display: block; margin-bottom: 1.1rem; }

h1, h2 {
  font-size: var(--size);
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
}

h2 { margin-bottom: 0.75rem; }

/* Short display line — justifying it just stretches the word gaps. */
.tagline { color: var(--muted); text-align: left; hyphens: none; }

/* Justified so every block forms a flush rectangle of the same width.
   Monospace can only stretch word gaps, so hyphenation keeps them tight. */
p {
  margin: 0;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

section { border-top: 1px solid var(--rule); padding-top: 1.5rem; }

.mailto { margin-top: 1.15rem; }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover { color: var(--muted); }

footer {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: baseline;
  color: var(--muted);
}


/* Below roughly 40 characters of measure, justification stretches word
   gaps into visible rivers — worse in monospace, which can only pad
   gaps, never glyphs. Fall back to a ragged right edge. */
@media (max-width: 520px) {
  p { text-align: left; hyphens: none; }
}