/* ==========================================================================
   FOMS — Base
   Reset, base typography, and accessibility primitives.
   Mobile-first: unadorned base styles, enhanced upward via min-width queries.
   ========================================================================== */

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:var(--fs-base);
  line-height:1.5;
  min-height:100dvh;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--ink);line-height:1.15}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:var(--fs-sm);color:var(--ink)}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
table{border-collapse:collapse}

/* ---- selection / focus ---- */
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- utilities ---- */
.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);font-weight:600;
}
.muted{color:var(--slate)}

.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:var(--sp-3);top:-48px;z-index:1000;
  background:var(--ink);color:var(--paper-alt);padding:10px 16px;
  border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;
  transition:top var(--dur-fast);
}
.skip-link:focus{top:calc(var(--topnav-h) + 8px)}

/* ---- container ----
   Mobile-first fluid padding; caps at --container-max on wide screens. */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:20px;
}
@media (min-width:768px){ .container{ padding-inline:32px;} }
@media (min-width:1024px){ .container{ padding-inline:48px;} }

/* ---- responsive type ---- */
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-md)}
p{font-size:var(--fs-base)}

/* prototype-only top strip from the mockup is intentionally NOT ported —
   real pages don't ship a "jump to page" dev nav. See BUILD-NOTES.md. */