/* ==========================================================================
   base.css — reset, document defaults, type, focus, layout primitives.
   Loads after tokens.css, before components.css.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-height) + var(--space-4)); }
body{
  margin:0; min-height:100vh; padding-top:var(--nav-height);
  background:var(--bg); color:var(--text-1);
  font-family:var(--font-sans); font-size:var(--text-md); line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}

/* Type */
h1,h2,h3,h4{ margin:0; font-weight:var(--weight-semibold); line-height:var(--leading-heading); color:var(--text-1); }
h1{ font-size:var(--text-3xl); letter-spacing:var(--tracking-heading); }
h2{ font-size:var(--text-2xl); letter-spacing:var(--tracking-heading); }
h3{ font-size:var(--text-xl); letter-spacing:var(--tracking-heading); }
h4{ font-size:var(--text-lg); }
p{ margin:0; max-width:var(--measure); text-wrap:pretty; }
small{ font-size:var(--text-sm); }
strong,b{ font-weight:var(--weight-semibold); }
a{ color:var(--accent); text-decoration:none; transition:color var(--duration) var(--ease); }
a:hover{ color:var(--accent-hover); text-decoration:underline; }
ul,ol{ margin:0; padding-left:1.25em; }
table,.price,.stat,.tnum,time{ font-variant-numeric:tabular-nums; }
pre,code,kbd{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--text-sm); }
pre{ margin:0; overflow:auto; }

/* Media and controls */
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; margin:0; }
button{ background:none; border:0; padding:0; cursor:pointer; }
:disabled{ cursor:not-allowed; }

/* Focus: one ring, everywhere */
:focus{ outline:none; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm); }
#content:focus{ box-shadow:none; }

/* Layout primitives */
.container{ width:100%; max-width:var(--content-max); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--space-12); border-top:1px solid var(--border); }
.section--first{ border-top:0; }
.section__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-4); }
.section__sub{ color:var(--text-2); font-size:var(--text-sm); margin-top:var(--space-1); }
.section__link{ font-size:var(--text-sm); font-weight:var(--weight-medium); }
.two{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:var(--space-8); }
.stack{ display:flex; flex-direction:column; gap:var(--space-4); }

/* Text utilities */
.text-secondary{ color:var(--text-2); }
.text-muted{ color:var(--text-3); }
.text-sm{ font-size:var(--text-sm); }

/* Skip link: first focusable element on every page */
.skip-link{
  position:absolute; top:var(--space-2); left:var(--space-2); z-index:100;
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm);
  background:var(--accent); color:var(--accent-on); font-weight:var(--weight-semibold);
  transform:translateY(-200%); transition:transform var(--duration) var(--ease);
}
.skip-link:focus{ transform:none; color:var(--accent-on); text-decoration:none; }

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

@media (max-width:900px){
  .two{ grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
}
@media (max-width:640px){
  .section{ padding-block:var(--space-8); }
}