/* Karamatics base styles, v2: 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(--focus); 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; }

/* Skip link: the first Tab stop on every page, hidden until focused, jumps past the nav to <main> */
.skip-link {
  position: absolute; left: 16px; top: -200px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 500; text-decoration: none; color: var(--bg); background: var(--ink);
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
/* <main> takes focus from the skip link (tabindex="-1"); it doesn't need a focus ring */
main:focus { outline: none; }
/* Keeps a short phrase (e.g. a product name like k-Suite) on one line */
.nowrap { white-space: nowrap; }
.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; }