/* Primitive Engineering — what the site adds on top of the kit.
   The page chrome (nav, hero, cards, footer, axioms, ink bands) is the kit's own <style> block,
   carried verbatim into each page by scripts/derive-from-kit.py. This file only holds what the
   desktop kit specimens do not need: the responsive rules and the always-visible focus ring. */

:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* Focus: always visible (design foundation §interaction) */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 880px) {
  .wrap { padding: 0 20px; }
  .cards-3, .cards-2, .cards-3.wide-first, .why { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; }
  .feature-panel { border-left: 0; border-top: 1px solid var(--hairline); }
  .why { gap: 36px; }
}
@media (max-width: 640px) {
  :root { --fs-display: 2.35rem; --fs-h1: 1.85rem; --fs-h2: 1.35rem; }
  nav.top .links { gap: 16px; }
  .hero { padding-top: 56px; padding-bottom: 56px; }
  .hero-fig { display: none; }
  .hero-band { background-image: linear-gradient(color-mix(in oklch, var(--bg) 55%, transparent), color-mix(in oklch, var(--bg) 55%, transparent)), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); }
  .manifesto { font-size: 16px; }
}
@media (max-width: 480px) {
  .logo .wm { display: none; }  /* the ± bug alone is the mark; the wordmark collides with the links */
}