/* ============================================================
   Base — reset, typography, links, focus, selection, scrollbar
   ============================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Pre-transform reveal elements briefly extend past the right edge
   below the fold; clip the horizontal overflow instead of showing a
   stray horizontal scrollbar. Fixed overlays (header/drawer) are not
   affected. */
body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--primary);
  background: var(--background);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.18;
  margin: 0 0 var(--space-4);
  color: var(--primary);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--primary); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.4em; }
li { margin-bottom: 0.45em; }

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

strong { color: var(--primary); }

::selection {
  background: var(--accent);
  color: var(--dark);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Custom scrollbar (desktop) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--background); }
  ::-webkit-scrollbar-thumb {
    background: rgba(15, 61, 62, 0.35);
    border-radius: 8px;
    border: 3px solid var(--background);
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(15, 61, 62, 0.55); }
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -60px;
  left: var(--space-4);
  z-index: 1000;
  padding: 0.65rem 1.1rem;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-soft);
}
.skip-link:focus { top: var(--space-4); color: var(--white); }

/* Page enter animation */
.page-content {
  animation: pageEnter 0.35s var(--ease-out) both;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Content typography helpers for long official text */
.prose { font-size: var(--text-lg); line-height: 1.75; color: rgba(7, 26, 27, 0.82); }
.prose p + p { margin-top: 1em; }

.muted { color: var(--muted); }
.text-center { text-align: center; }