/* base.css — Aurevix Engineering
   Reset, typography, layout primitives, focus, motion foundation. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sp-header, 4.5rem) + var(--sp-5));
  /* NOTE: scroll-behavior:smooth is set in main.js only when the visitor has
     not asked for reduced motion. Declaring it here in CSS breaks synthetic
     scrolling in headless verification, which is how this site gets checked. */
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--c-selection); }

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

/* --- Headings ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--c-ink);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); }
h5, h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); }

p { margin: 0 0 var(--sp-4); max-width: var(--ms-body); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--fw-semibold); color: var(--c-ink); }

small { font-size: var(--fs-xs); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: var(--sp-rule) solid var(--c-rule);
  margin: var(--sp-7) 0;
}

code, kbd, samp, pre {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

/* --- Links -------------------------------------------------------------- */
a {
  color: var(--c-ink);
  text-decoration-color: var(--c-rule-strong);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-1) var(--ease-standard),
              text-decoration-color var(--dur-1) var(--ease-standard);
}
a:hover {
  color: var(--c-mark-ink);
  text-decoration-color: var(--c-mark);
}

/* --- Focus: WCAG 2.2 focus appearance ----------------------------------
   A 2px mark-coloured ring plus a 2px offset gives a visible indicator on
   BOTH paper and model-space grounds without relying on the component's own
   background. :focus-visible only, so pointer users never see it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-2);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* --- Layout primitives -------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--sp-shell);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}
.shell--wide { max-width: var(--sp-shell-wide); }
.shell--narrow { max-width: 54rem; }

.section {
  padding-block: var(--sp-section);
  position: relative;
}
.section--tight { padding-block: var(--sp-8); }

/* Full-bleed band: always the INVERSE of the page ground, in both themes.
   tokens.css hands a .band the opposite palette wholesale, so the band only
   has to paint itself — every descendant resolves its own colours correctly.
   THERE ARE DELIBERATELY NO PER-COMPONENT .band OVERRIDES IN THIS CODEBASE.
   Adding one re-introduces the bug the wholesale swap exists to prevent. */
.band {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* --- The drafting grid --------------------------------------------------
   Background texture used behind heroes and feature blocks: a fine 8px grid
   inside a 32px major grid, exactly like a setout sheet. Pure CSS, no image. */
.grid-bg {
  position: relative;
  isolation: isolate;
}
.grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--c-rule-faint) var(--sp-rule), transparent var(--sp-rule)),
    linear-gradient(to bottom, var(--c-rule-faint) var(--sp-rule), transparent var(--sp-rule)),
    linear-gradient(to right, var(--c-rule) var(--sp-rule), transparent var(--sp-rule)),
    linear-gradient(to bottom, var(--c-rule) var(--sp-rule), transparent var(--sp-rule));
  background-size:
    var(--sp-grid-fine) var(--sp-grid-fine),
    var(--sp-grid-fine) var(--sp-grid-fine),
    var(--sp-grid) var(--sp-grid),
    var(--sp-grid) var(--sp-grid);
  /* Fade the grid out toward the bottom so content never fights it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
  opacity: 0.85;
}

/* --- Mono eyebrow / annotation label -------------------------------------
   The technical-annotation styling the brief asks for: mono, uppercase,
   wide-tracked, prefixed with a reference tick. */
.label {
  font-family: var(--ff-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}
.label::before {
  content: '';
  inline-size: 14px;
  block-size: var(--sp-rule);
  background: var(--c-mark);
  flex: none;
}
.label--plain::before { display: none; }

/* --- Section head -------------------------------------------------------- */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  max-width: var(--ms-wide);
}
.sec-head__title { margin: 0; }
.sec-head__lede {
  font-size: var(--fs-md);
  color: var(--c-ink-2);
  line-height: var(--lh-snug);
  max-width: var(--ms-body);
  margin: 0;
}

/* --- Lede paragraph ------------------------------------------------------ */
.lede {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--c-ink-2);
  max-width: var(--ms-body);
}

/* --- Utility ------------------------------------------------------------- */
.mono { font-family: var(--ff-mono); font-variant-ligatures: none; }
.nowrap { white-space: nowrap; }
.muted { color: var(--c-ink-3); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--sp-4); }

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

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-btn);
  color: var(--c-btn-ink);
  border-radius: var(--r-2);
  font-weight: var(--fw-semibold);
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-snap);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--c-btn-ink); }

/* --- Scroll reveal -------------------------------------------------------
   Gated behind the .js class added by main.js, so a no-JS visitor sees
   everything immediately rather than a blank page. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-4) var(--ease-snap),
    transform var(--dur-4) var(--ease-snap);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-inview {
  opacity: 1;
  transform: none;
}

/* --- Reduced motion ------------------------------------------------------
   One global override. Anything animated elsewhere must be expressible as
   "final state" — nothing may depend on an animation running to be legible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .draw-line { stroke-dashoffset: 0 !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* --- View transitions ----------------------------------------------------
   Cross-document transitions between index.html and design-system.html.
   Progressive: browsers without support simply navigate normally. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-3);
  animation-timing-function: var(--ease-snap);
}
.brand-mark { view-transition-name: setout-mark; }
.site-header { view-transition-name: setout-header; }

@media print {
  .site-header, .site-footer, .theme-toggle, .hero__figure { display: none; }
  body { background: #fff; color: #000; }
}