/* Shared by every page: fonts, colour tokens, base type, the shell, the footer. */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-display: swap;
}

:root {
  /* Atom colours: the standard ball-and-stick (CPK) scheme, softened slightly. Each has a highlight and a shadow for the shaded spheres. */
  --C: #8E959D;  --C-hi: #DDE1E5;  --C-lo: #4B5158;
  --N: #3A5BEF;  --N-hi: #A8B9FF;  --N-lo: #1A2A86;
  --O: #E03A2E;  --O-hi: #FFA197;  --O-lo: #86150F;
  --P: #F28A1C;  --P-hi: #FFCB8F;  --P-lo: #9A4C00;

  --ground:   #F3F5F7;
  --ink:      #161A1F;
  --ink-soft: #4C5560;
  --rule:     #D9DEE4;
  --bond:     #B3B9C0;
  --accent:   #B35E00;
  --card:     #FFFFFF;

  --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body: 'Source Serif 4', ui-serif, Georgia, serif;
  --shell: 1040px;
  --gutter: clamp(16px, 5vw, 56px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:   #121519;
    --ink:      #E8ECF0;
    --ink-soft: #A2ACB7;
    --rule:     #2A3038;
    --bond:     #4E5761;
    --accent:   #FFA344;
  --card:     #1A1E23;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(17px, 0.55vw + 15px, 19px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

a { color: inherit; }
:where(a, button):focus-visible {
  outline: 3px solid var(--P);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ---------- footer ---------- */

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 28px 40px;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 15px;
  font-stretch: 100%;
  color: var(--ink-soft);
}
footer p { margin: 0; }
footer nav { display: flex; gap: 20px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }