/* Firoozeh · base: reset, typography, focus, accessibility helpers */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--k-bg); color: var(--k-ink);
  font: 400 var(--k-text-md) / var(--k-leading-ui) var(--k-font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-synthesis: none;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
/* :where() keeps base link colour at zero specificity so component colours (.k-btn etc.) always win.
   Pass-3 bug: a theme-scoped `:root[data-theme="dark"] a` rule (0,2,1) overrode .k-btn--primary text in forced dark only. */
:where(a) { color: var(--k-accent-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:where(a):hover { color: var(--k-accent); }
h1, h2, h3, h4 { font-family: var(--k-font-display); font-weight: 700; line-height: var(--k-leading-tight); margin: 0; color: var(--k-ink); text-wrap: balance; }
h1 { font-size: var(--k-text-3xl); }
h2 { font-size: var(--k-text-2xl); }
h3 { font-size: var(--k-text-xl); }
h4 { font-size: var(--k-text-lg); }
p { margin: 0; }
p + p { margin-top: var(--k-3); }
::selection { background: var(--k-selection); }
hr { border: 0; border-top: 1px solid var(--k-line); margin: var(--k-5) 0; }
table { border-collapse: collapse; width: 100%; }
code, kbd, pre { font-family: var(--k-font-mono); font-size: 0.9em; direction: ltr; }
[hidden] { display: none !important; }
[dir="ltr"], .k-ltr { direction: ltr; unicode-bidi: isolate; }

/* Focus is always visible for keyboard users, never for mouse clicks */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; border-radius: var(--k-radius-sm); }

.k-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.k-skip {
  position: fixed; inset-inline-start: var(--k-4); top: -4rem; z-index: 100;
  background: var(--k-deep); color: var(--k-on-deep); padding: var(--k-2) var(--k-4);
  border-radius: var(--k-radius-sm); font-family: var(--k-font-display); transition: top var(--k-dur-2) var(--k-ease);
}
.k-skip:focus { top: var(--k-3); color: var(--k-on-deep); }

/* Type helpers */
.k-display { font-family: var(--k-font-display); font-weight: 700; font-size: var(--k-text-5xl); line-height: 1.15; letter-spacing: -0.01em; }
.k-title { font-family: var(--k-font-display); font-weight: 700; font-size: var(--k-text-2xl); line-height: var(--k-leading-tight); }
.k-eyebrow { font-family: var(--k-font-display); font-size: var(--k-text-sm); font-weight: 400; color: var(--k-accent-ink); letter-spacing: 0; }
.k-lead { font-size: var(--k-text-lg); color: var(--k-ink-2); line-height: var(--k-leading-body); }
.k-prose { line-height: var(--k-leading-body); max-width: 68ch; }
.k-prose > * + * { margin-top: var(--k-3); }
.k-muted { color: var(--k-muted); }
.k-num { font-variant-numeric: tabular-nums; }
.k-mono { font-family: var(--k-font-mono); direction: ltr; unicode-bidi: isolate; }
.k-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Layout helpers */
.k-stack { display: flex; flex-direction: column; gap: var(--k-gap, var(--k-4)); }
.k-row { display: flex; align-items: center; gap: var(--k-gap, var(--k-3)); flex-wrap: wrap; }
.k-row--nowrap { flex-wrap: nowrap; }
.k-between { justify-content: space-between; }
.k-grow { flex: 1 1 auto; min-width: 0; }
.k-grid { display: grid; gap: var(--k-gap, var(--k-4)); grid-template-columns: repeat(auto-fill, minmax(var(--k-min, 16rem), 1fr)); }
.k-container { width: 100%; max-width: var(--k-content-max); margin-inline: auto; padding-inline: var(--k-5); }
@media (max-width: 40rem) { .k-container { padding-inline: var(--k-4); } }

.k-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.k-icon--sm { width: 1rem; height: 1rem; }
.k-icon--lg { width: 1.5rem; height: 1.5rem; }
[dir="rtl"] .k-icon--flip { transform: scaleX(-1); }