/* ===========================================================================
   base.css — the shared vocabulary. Typography carried over from the CV
   (TeX Gyre Pagella + Lato) so the site and the PDF are visibly one person.
   =========================================================================== */

@font-face {
  font-family: 'Pagella';
  src: url('../fonts/pagella-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pagella';
  src: url('../fonts/pagella-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Pagella';
  src: url('../fonts/pagella-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- the board -------------------------------------------------------- */
  --board:        #121614;   /* slate, with a green-black cast. never #000 */
  --board-lift:   #1b201d;
  --board-deep:   #0b0e0d;

  /* --- chalk ------------------------------------------------------------
     Real chalk is warm and never pure white. Three weights only. */
  --chalk:        #e6e3d8;
  --chalk-soft:   #a8ada4;
  --chalk-faint:  #79807a;   /* 4.5:1 on the board — the floor for text */
  --chalk-hair:   #5d6560;   /* rules and strokes only, never text */
  --chalk-ochre:  #d8b25e;   /* the yellow stick. carries the CV's bronze. */

  /* --- the box of sticks -------------------------------------------------
     What the board writes with. Muted on purpose: coloured chalk on a slate
     is pigment in a soft binder, never ink, so every one of these sits near
     the luminance of --chalk-soft and well under its own pure hue. Anything
     more saturated stops reading as chalk and starts reading as marker.

     These are the RESTING weights. The board brightens a stick toward
     --chalk when its paper is pointed at, and mixes it toward --board for
     the gloss underneath, so each colour needs only its one value here. */
  --stick-white:  #a8ada4;   /* = --chalk-soft. most of the box is this */
  --stick-yellow: #c4a463;   /* the ochre stick, a shade back from the CV's */
  --stick-red:    #c08c82;   /* dusty, toward terracotta. a true red glares */
  --stick-blue:   #8ea7bd;
  --stick-green:  #8cb39b;

  /* --- type ------------------------------------------------------------- */
  --serif: 'Pagella', 'TeX Gyre Pagella', Palatino, 'Palatino Linotype',
           'Book Antiqua', Georgia, serif;
  --sans:  'Lato', 'Carlito', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --tracking-label: .18em;

  /* --- motion -----------------------------------------------------------
     A spring that overshoots once and settles. Used when the lens
     rearranges the board, so the change reads as physical. */
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%,
            1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%,
            1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%,
            0.98 57.1%, 1.018 69.2%, 1.006 81.5%, 0.997 100%);
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--board);
  color: var(--chalk);
  font-family: var(--serif);
  font-size: clamp(15px, 1.05vw + 11px, 18px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Available to screen readers and keyboard users, invisible on the board. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus-visible {
  position: fixed; inset-block-start: 12px; inset-inline-start: 12px;
  z-index: 999; width: auto; height: auto; clip-path: none;
  padding: .6em 1em; background: var(--board-lift);
  border: 1px solid var(--chalk-soft); border-radius: 2px;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--chalk-ochre);
  outline-offset: 4px;
}

.label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--chalk-soft);
}