/* Base / Reset */
*{ box-sizing: border-box; }
html{ color-scheme: dark; }
html:focus-within{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; height:auto; }
svg{ display:block; }
a{ color: inherit; text-decoration: none; }

/* Layout */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-2);
}

/* Typography */
h1,h2,h3,h4{ margin:0 0 .65em; line-height: 1.1; }
p{ margin:0 0 1em; }

/* Focus */
:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Skip link */
.skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 999;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.85);
  border: 1px solid var(--border);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible{ transform: translateY(0); }

/* Prevent content hiding behind fixed header when using anchor links */
:target{ scroll-margin-top: calc(var(--header-h) + 16px); }

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

/* Scroll lock (mobile nav) */
html.is-scroll-locked, body.is-scroll-locked{ overflow: hidden; }