/* =========================================================
   NOWERA — Base: reset, typography primitives, layout helpers
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  background: var(--deep-black);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--ivory);
  background: var(--deep-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--gold); color: var(--deep-black); }

/* ---- Focus (keyboard only) ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}
.on-light :focus-visible { outline-color: var(--gold-ink); }

/* ---- Accessibility helpers ---- */
.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;
}
.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 200;
  padding: 0.75rem 1.1rem;
  background: var(--gold); color: var(--deep-black);
  font-weight: 600; font-size: var(--fs-small);
  border-radius: var(--radius-s);
  transform: translateY(-160%);
  transition: transform var(--dur-s) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { position: relative; padding-block: var(--section-y); }

/* Scene themes */
.on-dark { background: var(--deep-black); color: var(--ivory); }
.on-soft { background: var(--soft-black); color: var(--ivory); }
.on-light { background: var(--ivory); color: var(--ink); }
.on-white { background: var(--warm-white); color: var(--ink); }

/* ---- Typography primitives ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper-subtle);
}
.on-light .eyebrow, .on-white .eyebrow { color: var(--ink-subtle); }
.eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--gold);
}
.eyebrow--plain::before { display: none; }

.display {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}
.serif-display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  font-weight: 300;
  color: var(--paper-muted);
  max-width: 38ch;
}
.on-light .lead, .on-white .lead { color: var(--ink-muted); }
.text-gold { color: var(--gold); }
.on-light .text-gold, .on-white .text-gold { color: var(--gold-ink); }
.muted { color: var(--paper-subtle); }
.on-light .muted, .on-white .muted { color: var(--ink-subtle); }
.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* Gold hairline divider */
.hairline {
  height: 1px; width: 100%; border: 0; margin: 0;
  background: var(--gold-hairline);
  opacity: 0.6;
}

/* ---- Masked line reveal ---- */
.line {
  display: block;
  overflow: hidden;
  /* room for umlauts (Ä Ö Ü) and descenders inside the mask */
  padding-block: 0.16em 0.1em;
  margin-block: -0.16em -0.1em;
}
.line__inner { display: inline-block; will-change: transform; }

/* ---- Motion initial states (only when JS + motion allowed) ---- */
.motion-ok [data-reveal] { opacity: 0; transform: translateY(28px); }
.motion-ok [data-reveal="fade"] { transform: none; }
.motion-ok [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
.motion-ok [data-split] .line__inner { transform: translateY(110%); }
.motion-ok [data-reveal-line] { transform: scaleX(0); transform-origin: left center; }

/* Respect reduced motion globally */
@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;
  }
}