/* Tomic Labs design system. One file: tokens, then the few elements every page uses.
   Pages load the typeface themselves:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..700&display=swap"> */

:root {
  /* Colour: black, paper for the words, one grey. The only other colour on a page is in the atoms. */
  --black: #000;
  --paper: #f3f0e8;
  --grey: #9a988f;
  color-scheme: dark;

  /* Atoms: the phase colour scale of Chen et al., Science 2021 (Fig. 2A), bright centre to dark edge */
  --atom: radial-gradient(circle closest-side, #fdfcd0 0%, #fefc6f 19%, #f8d017 28%, #f87c11 34%, #ed070c 43%, #890206 53%, #380304 66%, transparent 83%);
  --a: 15px;              /* atom spacing; 15 x 26 is a triangular lattice to within 0.1% */
  --h: 26px;
  --twist: 3.5deg;

  /* Type: one family, Archivo, with its width axis doing the work */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: clamp(1.0625rem, 0.9rem + 0.55vw, 1.375rem);
  --width-text: 110%;
  --width-wordmark: 125%;
}

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

body {
  background: var(--black);
  color: var(--paper);
  font: 400 var(--text)/1.25 var(--font);
  font-stretch: var(--width-text);
  -webkit-font-smoothing: antialiased;
}

/* Everything is one size. Weight and width make the hierarchy. */
h1 { font-size: inherit; font-weight: 500; text-wrap: balance; }
.quiet { color: var(--grey); }

/* The name, set like the nameplate on an instrument */
.wordmark { font-stretch: var(--width-wordmark); font-weight: 700; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.08em; }

/* A link is plain text with a hairline under it */
a { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* A measured value: just the number and its unit */
.readout { font-size: 0.75em; color: var(--grey); }
.readout output { color: var(--paper); font-variant-numeric: tabular-nums; }

/* The mark as a small logo. Size comes from the width you give it. */
.mark { display: block; width: 3.5rem; aspect-ratio: 1; fill: var(--paper); }

/* Atoms: two .layer elements inside a positioned, clipped box. The second is turned by --twist. */
.layer {
  position: absolute;
  inset: -40%;
  background-image: var(--atom), var(--atom);
  background-size: var(--a) var(--h);
  background-position: 0 0, calc(var(--a) / 2) calc(var(--h) / 2);
  rotate: 9deg;
}
.layer + .layer { rotate: calc(9deg + var(--twist)); mix-blend-mode: screen; }

@media (prefers-reduced-motion: no-preference) {
  .layer + .layer { animation: drift 48s ease-in-out infinite alternate; }   /* sample drift */
  @keyframes drift { to { translate: 7px 4px; } }
}