/* Resets and element defaults */
* { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--text);
  /* Timelines are position-driven; anchors smoothed via JS when needed */
  scroll-behavior: auto;
}
html, body { overflow-x: hidden; }
body { margin: 0; font-family: var(--sans); line-height: var(--lh-normal); }
img, picture { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-underline-offset: 2px; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 600; }
p { margin: 0 0 1em; }
figure { margin: 0; }

/* Modal safety: ensure scroll lock wins over sticky overflow tweaks */
html.modal-open,
html.modal-open body {
  overflow: hidden !important;
}

.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 16px; top: 16px; width: auto; height: auto;
  background: #fff; color: #000; padding: 8px 12px;
  box-shadow: 0 0 0 2px currentColor inset;
}

/* Theme helpers */
.theme-cream { --surface: var(--cream);  --fg: var(--ink); }
.theme-sage  { --surface: var(--sage);   --fg: #ffffff; }
.theme-slate { --surface: var(--slate);  --fg: #ffffff; }
.theme-lilac { --surface: var(--lilac);  --fg: #1b1b1b; }
.theme-garnet{ --surface: var(--garnet); --fg: #ffffff; }
.theme-gold  { --surface: var(--gold);   --fg: #1b1b1b; }

.is-themed { background: var(--surface); color: var(--fg); }

.accent-sage  { --accent: var(--sage); }
.accent-slate { --accent: var(--slate); }
.accent-lilac { --accent: var(--lilac); }
.accent-garnet{ --accent: var(--garnet); }
.accent-gold  { --accent: var(--gold); }

/* Misc base vars */
body { --heroProgress: 0; }