/* ============================================================
   RESET + BASE
   Global reset, element defaults, and foundational
   accessibility helpers. Media queries for these rules live
   in responsive.css, not here.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg-0);color:var(--fg-0);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.75;
  -webkit-font-smoothing:antialiased;transition:background var(--dur-med) var(--ease-out),color var(--dur-med) var(--ease-out);
}
body.lock-scroll{overflow:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.28;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%;display:block}
code,.mono{font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* layout primitive used by every section */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}

/* accessibility helpers */
.skip-link{position:absolute;right:var(--space-2);top:-100px;background:var(--accent);color:var(--bg-0);padding:.6rem 1.2rem;border-radius:var(--radius-sm);z-index:200;transition:top var(--dur-fast) var(--ease-out)}
.skip-link:focus{top:var(--space-2)}

/* small generic text utility (not tied to one component) */
.muted-sm{color:var(--fg-1);font-size:var(--text-sm)}