/* ============================================================
   NUBEM · Base reset + element defaults
   ============================================================ */

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

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

body {
  font-family: var(--nb-font-sans);
  font-size: var(--nb-fs-body);
  line-height: var(--nb-lh-normal);
  color: var(--nb-text);
  background: var(--nb-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--nb-sage-deep);
  font-weight: var(--nb-fw-semi);
  line-height: var(--nb-lh-snug);
  letter-spacing: var(--nb-track-tight);
  text-wrap: balance;
}
h1 { font-size: var(--nb-fs-h1); line-height: var(--nb-lh-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--nb-fs-h2); }
h3 { font-size: var(--nb-fs-h3); }
h4 { font-size: var(--nb-fs-h4); }

p { text-wrap: pretty; }
p + p { margin-top: var(--nb-s-4); }

a {
  color: var(--nb-sage-deep);
  text-decoration-color: var(--nb-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--nb-d-base) var(--nb-ease);
}
a:hover { color: var(--nb-lime-600); }

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

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

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--nb-lime); color: var(--nb-sage-deep); }

/* Focus ring — keyboard only */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--nb-lime);
  outline-offset: 2px;
  border-radius: var(--nb-r-xs);
}

/* Utility: screen-reader only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Container */
.nb-container {
  width: 100%;
  max-width: var(--nb-container);
  margin-inline: auto;
  padding-inline: var(--nb-gutter);
}
.nb-container--narrow { max-width: var(--nb-container-narrow); }
.nb-container--wide   { max-width: var(--nb-container-wide); }

/* Section rhythm */
.nb-section { padding-block: var(--nb-section-py); }
.nb-section--sm { padding-block: clamp(40px, 6vw, 72px); }

/* Eyebrow label */
.nb-eyebrow {
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-micro);
  font-weight: var(--nb-fw-medium);
  letter-spacing: var(--nb-track-wide);
  text-transform: uppercase;
  color: var(--nb-sage-500);
}

/* Accent underline for inline highlights */
.nb-hl {
  background: linear-gradient(180deg, transparent 62%, var(--nb-lime) 62%, var(--nb-lime) 92%, transparent 92%);
  padding-inline: 2px;
}

/* Surface helpers */
.nb-bg-paper  { background: var(--nb-paper); }
.nb-bg-cream  { background: var(--nb-cream); }
.nb-bg-sage   { background: var(--nb-sage-deep); color: var(--nb-cream); }
.nb-bg-sage h1, .nb-bg-sage h2, .nb-bg-sage h3, .nb-bg-sage h4 { color: var(--nb-cream); }
.nb-bg-ink    { background: var(--nb-ink); color: var(--nb-cream); }
.nb-bg-ink  h1, .nb-bg-ink  h2, .nb-bg-ink  h3, .nb-bg-ink  h4 { color: var(--nb-cream); }

/* Text utilities */
.nb-muted    { color: var(--nb-text-muted); }
.nb-mono     { font-family: var(--nb-font-mono); }
.nb-center   { text-align: center; }
.nb-lead     { font-size: var(--nb-fs-body-lg); line-height: var(--nb-lh-loose); color: var(--nb-text-muted); }

/* Flow — vertical rhythm inside content blocks */
.nb-flow > * + * { margin-top: var(--nb-flow-space, var(--nb-s-4)); }
.nb-flow--loose { --nb-flow-space: var(--nb-s-6); }
.nb-flow--tight { --nb-flow-space: var(--nb-s-2); }