/* Shared look for the landing page and the lab, after the Cosmos reference: linen ground, ink type,
   one 16px radius, colour only in the dioramas. Type: Archivo throughout (headings slightly widened),
   and one hand-drawn accent word in Excalifont, the whiteboard hand system design is sketched in. */
/* Archivo, a variable font (weight 400 to 800, width 100% to 125%), OFL-1.1 (Archivo-OFL.txt).
   Served from this site rather than Google Fonts, so visitors' browsers contact no one else.
   The same two files Google serves for Latin text, each used only for the characters it covers. */
@font-face {
  font-family: 'Archivo'; src: url('../assets/fonts/Archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; src: url('../assets/fonts/Archivo-latin.woff2') format('woff2');
  font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {   /* Excalidraw's font, OFL-1.1 (licence inside the file); Latin subset only */
  font-family: 'Excalifont'; src: url('../assets/fonts/Excalifont-Regular.woff2') format('woff2'); font-display: swap;
}
:root {
  --linen: #f7f5f3;   /* page ground, never pure white */
  --paper: #ffffff;   /* cards and raised surfaces */
  --ink: #0d0d0d;     /* text, filled buttons, strokes */
  --stone: #6e6a69;   /* body and supporting text */
  --pebble: #9a9796;  /* muted helper text */
  --line: rgb(13 13 13 / 0.14);
  --radius: 16px;
  --radius-tile: 12px;
  --display: 'Archivo', system-ui, sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
  --hand: 'Excalifont', 'Archivo', system-ui, sans-serif;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; box-sizing: border-box;
  font: 600 16px/1 var(--display); text-decoration: none; cursor: pointer;
  border: 1px solid var(--ink); border-radius: var(--radius);
}
.btn-primary { background: var(--ink); color: var(--linen); }
.btn-secondary { background: var(--linen); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn:disabled { opacity: 0.45; cursor: default; }