/* Reset + base typography */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .22em; }

button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

/* Headings — Bubblebody/Bricolage display */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-3);
  color: var(--c-ink);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; }

p  { margin: 0 0 var(--sp-3); max-width: 62ch; }
p.lead { font-size: var(--fs-lead); color: var(--c-ink-soft); }

small, .overline {
  font-size: var(--fs-overline);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-ink-soft);
}

::selection { background: var(--c-blue-soft); color: var(--c-ink); }

/* Layout primitives ─ container → section → component */
.section {
  padding-block: clamp(64px, 8vw, 128px);
  position: relative;
}
.section--tight  { padding-block: clamp(48px, 5vw, 80px); }
.section--soft   { background: var(--c-bg-soft); }
.section--ink    { background: var(--c-ink); color: #F3F3F8; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #FFFFFF; }
.section--aurora { background: var(--g-aurora); }

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--max-w-rd); }

/* Stack + cluster utility classes (Every Layout style, used sparingly) */
.stack > * + *     { margin-top: var(--stack-gap, var(--sp-3)); }
.cluster           { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--sp-2)); align-items: center; }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--c-blue-electric);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}