/* Generated copy of sites/shared/base.css — edit the source, then run scripts/sync_kit.js */
/* ==========================================================================
   Shared base layer — elements, layout primitives, accessibility
   Requires tokens.css (and fonts.css when the page is not English).
   ========================================================================== */

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

/* No `overflow-x: hidden` on html or body anywhere in the kit: it hides the
   one bug it looks like a fix for. If a page scrolls sideways, something in it
   is genuinely too wide, and the layout has to say so. Measured 2026-09-17 at
   390px in he and ar: documentElement.scrollWidth 375 against clientWidth 375,
   nothing past the viewport. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--kol-paper);
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  background: var(--kol-paper);
  color: var(--kol-ink);
  font-family: var(--kol-font-sans);
  font-size: var(--kol-text-md);
  line-height: var(--kol-leading);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings: tight, dark, never gradient-filled --------------------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--kol-ink);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-tight);
  line-height: var(--kol-leading-snug);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--kol-text-3xl);
  line-height: var(--kol-leading-tight);
}

h2 {
  font-size: var(--kol-text-2xl);
}

h3 {
  font-size: var(--kol-text-lg);
}

p {
  margin: 0;
  color: var(--kol-ink-muted);
  overflow-wrap: anywhere;
}

p strong,
strong {
  color: var(--kol-ink);
  font-weight: 600;
}

small {
  font-size: var(--kol-text-sm);
  color: var(--kol-ink-faint);
}

a {
  color: var(--kol-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--kol-line-strong);
  /* Text must not shimmer when the pointer crosses individual glyphs. */
  transition: none;
}

a:hover {
  text-decoration-color: var(--kol-ink);
}

ul,
ol {
  margin: 0;
  padding-inline-start: 1.15em;
}

li {
  color: var(--kol-ink-muted);
  overflow-wrap: anywhere;
}

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

figure {
  margin: 0;
}

hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--kol-line);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

table {
  width: 100%;
  border-collapse: collapse;
}

/* --- Focus: always visible, never only a colour change ---------------- */
:focus-visible {
  outline: 2px solid var(--kol-focus);
  outline-offset: 2px;
  border-radius: var(--kol-radius-sm);
  animation: none;
  transition: none;
}

.kol-skip {
  position: absolute;
  inset-inline-start: var(--kol-gutter);
  top: -100px;
  z-index: 200;
  padding: var(--kol-space-3) var(--kol-space-4);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-surface);
  color: var(--kol-ink);
  text-decoration: none;
  transition: top var(--kol-motion) var(--kol-ease);
}

.kol-skip:focus {
  top: var(--kol-space-3);
}

.kol-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[id] {
  scroll-margin-top: calc(var(--kol-header-h) + var(--kol-space-5));
}

/* --- Layout primitives ------------------------------------------------ */
.kol-container {
  width: 100%;
  max-width: var(--kol-max);
  margin-inline: auto;
  padding-inline: var(--kol-gutter);
}

/* The 12-column grid. Children claim columns with --span (mobile stacks). */
.kol-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--kol-gap);
}

.kol-grid > * {
  min-width: 0;
  grid-column: span 12;
}

@media (min-width: 768px) {
  .kol-grid > [data-span] {
    grid-column: span var(--span, 12);
  }
}

.kol-section {
  padding-block: var(--kol-section-y);
}

.kol-section + .kol-section {
  border-top: 1px solid var(--kol-line);
}

.kol-stack {
  display: flex;
  flex-direction: column;
  gap: var(--kol-space-4);
}

.kol-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-3);
}

.kol-measure {
  max-width: var(--kol-measure);
}

/* --- Section heading rhythm ------------------------------------------- */
.kol-eyebrow {
  margin: 0;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
}

.kol-lead {
  font-size: var(--kol-text-lg);
  color: var(--kol-ink-muted);
  line-height: var(--kol-leading-snug);
  max-width: var(--kol-measure);
}

.kol-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--kol-space-3);
  margin-bottom: var(--kol-space-6);
  max-width: var(--kol-measure);
}

/* --- Reveal: one 180ms fade, off when the visitor asked for less ------
   The hidden state is scoped to .kol-js, which chrome.js sets on <html> (and
   kolwrite.com's head script sets earlier still). Without it the content is
   simply visible: a fade-in must never be what decides whether a page has
   words on it. */
.kol-js [data-kol-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--kol-motion) var(--kol-ease),
    transform var(--kol-motion) var(--kol-ease);
}

.kol-js [data-kol-reveal].is-in,
.kol-no-motion [data-kol-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .kol-js [data-kol-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --- RTL ------------------------------------------------------------- */
[dir="rtl"] .kol-skip {
  inset-inline-start: var(--kol-gutter);
}

/* Latin fragments inside RTL copy (KolWrite, SRT, API) keep their order. */
[dir="rtl"] .kol-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}