/* The QuantyVerse look: white paper, large flat fields of the logo
   colors, ink type. Every page loads fonts.css and this file.

   Contrast (WCAG 2.2 AA), measured:
   - ink on paper 14.9, ink on every field except sky at least 4.5,
     so fields carry ink text; sky (3.8 with ink, 3.9 with white)
     is a field for large type and shapes only, sky-deep carries
     small white text (6.7).
   - the *-text colors are for colored text on paper, all at least
     5.4. The field colors themselves are never small text on paper.
*/
:root {
  color-scheme: light;

  --paper: #FFFFFF;
  --ink: #232733;
  --ink-soft: #4A5263;
  --slate: #3B4657;
  --rule: #D5D9E2;
  --tint: #F3F5F9;

  --sun: #FFC21F;
  --tangerine: #FF8A1F;
  --leaf: #24A865;
  --lagoon: #159E99;
  --sky: #2F7FEF;
  --sky-deep: #1857BD;
  --coral: #FF4F4F;
  --mint: #62F2A2;
  --bone: #FCEBD3;

  --sky-text: #1B5FCC;
  --leaf-text: #0F7A45;
  --lagoon-text: #0B7570;
  --tangerine-text: #B54708;
  --coral-text: #C42B2B;

  --display: "Anybody", "Arial Narrow", "Helvetica Neue", Arial,
    sans-serif;
  --body: "Red Hat Text", "Segoe UI", "Helvetica Neue", Arial,
    sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", Menlo,
    Consolas, monospace;

  /* type scale, ratio 1.25 from 18px body */
  --s-1: 0.875rem;
  --s0: 1.125rem;
  --s1: 1.406rem;
  --s2: 1.758rem;
  --s3: 2.197rem;
  --s4: 2.747rem;
  --s5: clamp(2.75rem, 6vw, 4.5rem);
  --s6: clamp(3.25rem, 11vw, 9rem);

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --measure: 68ch;
  --wide: 1360px;

  --focus: var(--ink);
  --focus-halo: var(--sun);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--s0);
  line-height: 1.6;
  font-kerning: normal;
}

[hidden] { display: none !important; }

img, svg, canvas, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}

p, ul, ol, dl, pre, table, blockquote, figure { margin: 0; }

a { color: inherit; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.12em; }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.92em; }

/* WCAG 2.4.7, 2.4.11, 2.4.13: a two-color focus ring that reads on
   paper and on every field, never hidden under sticky bars */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* WCAG 2.5.8: interactive targets at least 24 by 24 CSS pixels */
a, button, summary { min-height: 24px; }
button { font: inherit; color: inherit; }

.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

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