/* =============================================================================
   PERPSHOOK — the painting.

   The ground is a painting: an oil of a night sea, ultramarine dragged over
   black, hung behind the whole site and never scrolled.

   Everything on top of it is industrial. Square corners, hairline rules, mono
   labels in caps, plates of dark metal bolted over the canvas. The picture
   supplies the beauty; the interface supplies the machinery, and it does not
   pretend to be soft.
   ========================================================================== */
@font-face { font-family: 'Switzer'; src: url('/assets/fonts/Switzer-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/assets/fonts/Switzer-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/assets/fonts/Switzer-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/IBMPlexMono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/IBMPlexMono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* ---- the pigments ---- */
  --abyss:      #04070f;   /* the deep, under the waterline */
  --prussian:   #0a1830;   /* the ground the sky is dragged over */
  --ultra:      #16346b;   /* ultramarine, the body of the sky */
  --ultra-lit:  #2a56a8;   /* where the knife caught the light */
  --sea:        #071021;   /* the water */
  --bone:       #e8ecf5;   /* the cold light on the horizon */
  --bone-2:     #b9c4d8;
  --bone-3:     #8593ad;
  --bone-4:     #5d6a84;

  /* glass over the canvas */
  --glass:      rgba(10, 22, 46, .58);
  --glass-2:    rgba(16, 32, 64, .72);
  --glass-hi:   rgba(232, 236, 245, .06);
  --edge:       rgba(232, 236, 245, .10);
  --edge-2:     rgba(232, 236, 245, .20);
  --blur:       saturate(150%) blur(22px);

  /* ---- the only other colours ---- */
  --long:      #4fd8a4;
  --short:     #ff7a6b;
  --warn:      #e3b45c;
  --long-bg:   rgba(79,216,164,.12);
  --short-bg:  rgba(255,122,107,.12);

  /* Industrial: nothing is rounded except a control you press. */
  --r-s: 8px; --r: 12px; --r-l: 16px;
  --r-panel:    18px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  --t-display: clamp(2.8rem, 6.6vw, 5rem);
  --t-h1:      clamp(2rem, 3.8vw, 2.9rem);
  --t-h2:      clamp(1.5rem, 2.6vw, 2.05rem);
  --t-h3:      1.05rem;
  --t-body:    .96rem;
  --t-sm:      .875rem;
  --t-xs:      .79rem;
  --t-micro:   .705rem;

  --display: 'Switzer', system-ui, sans-serif;
  --sans: 'Switzer', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --lift:   0 2px 6px rgba(0,0,0,.35), 0 24px 60px -30px rgba(0,0,0,.85);
  --lift-2: 0 4px 12px rgba(0,0,0,.4), 0 44px 90px -40px rgba(0,0,0,.9);
  --ring:   0 0 0 3px rgba(42,86,168,.5);

  --rail-w: 208px;
  --ease: cubic-bezier(.22,.68,.28,1);
  --page: 1200px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}