/* ============================================================================
   base.css — reset, document defaults, typography, accessibility primitives
   ========================================================================= */

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

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

body {
  min-height: 100%;
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-text-2);
  background: var(--c-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* A single restrained atmospheric wash behind the page — never a busy backdrop. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--g-hero);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

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

/* ── Headings ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--c-text);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.021em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -0.012em; }
h4 { font-size: var(--fs-md); letter-spacing: -0.008em; }

p { text-wrap: pretty; }

/* ── Links ───────────────────────────────────────────────────────────── */
a {
  color: var(--c-accent-hi);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: #8ecaff; }

/* In running prose, links are underlined so they never rely on colour alone. */
.prose a, p > a:not(.btn):not(.card-link) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(96, 180, 255, 0.42);
}
.prose a:hover, p > a:not(.btn):not(.card-link):hover {
  text-decoration-color: currentColor;
}

/* ── Lists ───────────────────────────────────────────────────────────── */
ul, ol { padding-left: 1.25em; }
li { margin-bottom: var(--sp-2); }
li::marker { color: var(--c-text-4); }
ul.plain, ol.plain { list-style: none; padding-left: 0; }

strong, b { color: var(--c-text); font-weight: 650; }

hr {
  border: 0;
  height: 1px;
  background: var(--g-rule);
  margin: var(--sp-12) 0;
}

code, kbd, samp, .num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}
code {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  color: var(--c-text);
}

/* ── The single focus indicator (mirrors the application's own rule) ──── */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Skip link ───────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--c-accent-deep);
  border: 1px solid var(--c-accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

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

/* ── Layout helpers ──────────────────────────────────────────────────── */
.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--sp-6); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--sp-6); }
.wrap-text { width: 100%; max-width: var(--wrap-text); margin-inline: auto; padding-inline: var(--sp-6); }

/* Vertical rhythm between sections. Deliberately tighter than a typical
   marketing site: the panels already carry their own internal padding, so a
   very large outer gap just reads as dead space. */
.section        { padding-block: var(--sp-16); }
.section--tight { padding-block: var(--sp-12); }
/* ── Joining sections into one visual block ────────────────────────────────
   `--joined` on a section, and `--flush` on the one after it, make the two
   read as a single stack: the gap between them becomes --sp-6 (24px), exactly
   the gap between cards inside a grid, instead of the full 64px section
   rhythm. Used for System requirements → Professional use → final CTA.

   Written as `.section.section--flush` (two classes) on purpose: responsive.css
   loads last and resets `.section { padding-block: … }` at each breakpoint, so
   a single-class modifier here would lose to it below 980px. */
.section.section--joined { padding-bottom: 0; }
.section.section--flush  { padding-block: var(--sp-6) 0; }
.section--flush + .section { padding-top: var(--sp-6); }
.section--alt   { background: var(--c-base-2); border-block: 1px solid var(--c-border); }

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }

/* ── Elements hidden by site.js when configuration is missing ─────────── */
[hidden], .is-hidden { display: none !important; }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Print ───────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  body::before, .site-header, .site-footer, .gallery-lightbox { display: none !important; }
  a { color: #000; text-decoration: underline; }
}