/* Base: reset + global + accessibility + SEO-safe defaults */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink-on-light); }
.section--dark a:hover, .footer a:hover { color: var(--color-terracotta-soft); }

::selection { background: var(--color-terracotta); color: var(--color-paper); }

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

/* Skip link */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--color-navy); color: var(--text-on-dark);
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  padding: 10px 16px; border-radius: var(--radius-sm);
  text-decoration: none; transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* Screen-reader only */
.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;
}

/* No-JS fallback: reveal the primary nav instead of the menu button. */
html.no-js .nav, html.no-js .nav__actions { display: flex; }
html.no-js .menu-btn { display: none; }
@media (max-width: 899px) {
  html.no-js .site-header { height: auto; }
  html.no-js .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 12px; row-gap: 10px; }
  html.no-js .nav__list { flex-wrap: wrap; }
}

/* Forms inherit */
input, textarea, select, button { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Placeholder marker — clearly identifiable */
.placeholder-note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed var(--line-strong);
  padding: 8px 12px;
  display: inline-block;
}