/* base.css — reset, element defaults, typography, focus, accessibility */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--announce-h) + 16px); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base);
  font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; /* safety net only; layouts must not rely on it */
}
@supports (overflow: clip) { body { overflow-x: clip; } }
main { flex: 1 0 auto; display: block; }
img, svg, video, canvas { max-width: 100%; height: auto; }
img { display: block; }
svg { flex-shrink: 0; }
iframe { max-width: 100%; border: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--c-primary-600); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-primary); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--space-6) 0; }
::selection { background: color-mix(in srgb, var(--c-accent) 35%, transparent); color: var(--c-text); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; color: var(--c-ink); font-family: var(--font-display); font-weight: 500; line-height: var(--lh-snug); letter-spacing: -.012em; text-wrap: balance; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f1f4fa; }
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -.02em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-family: var(--font-sans); font-weight: 650; letter-spacing: -.005em; }
h5, h6 { font-size: var(--fs-base); font-family: var(--font-sans); font-weight: 650; }
small { font-size: var(--fs-sm); }
strong, b { font-weight: 650; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .92em; }
mark { background: var(--c-accent-soft); color: inherit; padding: 0 .15em; border-radius: 2px; }

/* Focus — always visible for keyboard users */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
.btn:focus-visible, .input:focus-visible, .select:focus-visible { outline-offset: 2px; }

/* Accessibility utilities */
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; left: var(--space-4); top: -100px; z-index: var(--z-skip);
  background: var(--c-ink); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none; box-shadow: var(--shadow-lg); transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #fff; outline-color: var(--c-accent); }
.hp-field { position: absolute !important; left: -9999px !important; }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }

/* Utilities (small, deliberate set) */
.text-center { text-align: center; }
.text-muted { color: var(--c-text-muted); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* Reduced motion: no smooth scroll, no decorative animation */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .site-footer, .announce, #bg-chat, .back-to-top, .page-progress, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
}
