/* Karamatics base styles, v1: reset, page defaults and typography. Requires tokens.css. */

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

:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  height: 100%;
  background: var(--bg);
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Theme switch (theme.js). The page cross-fades as one image through a view transition, so solid colors, gradients,
   glows and canvas drawings all change together instead of gradients snapping first and colors fading after.
   While it runs, element transitions are switched off (they would replay underneath the fade), except on the toggle,
   which is captured separately so its knob keeps sliding. */
html.theme-switching :not(.toggle, .toggle-knob, .toggle svg),
html.theme-switching ::before,
html.theme-switching ::after { transition: none !important; }
html.theme-switching .toggle { view-transition-name: theme-toggle; }
::view-transition-old(theme-toggle) { display: none; }
::view-transition-new(theme-toggle) { animation: none; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .45s; animation-timing-function: ease; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* Components set display (grid, flex), which would otherwise override the hidden attribute */
[hidden] { display: none !important; }

.container { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.08; letter-spacing: -.02em; font-variation-settings: "opsz" 60; }
p { margin: 0; }
sub, sup { font-size: .72em; line-height: 0; }