/* MUSAI — reset, base type, layout primitives (light) */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.65;
  font-weight: var(--weight-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* layout primitives */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); }
.band { background: var(--paper-2); }

/* label — Iptex System, ALWAYS uppercase */
.label {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--mid);
}

.hair { height: 1px; background: var(--hair); border: 0; }

/* headings — Iptex System Medium, ALL CAPS */
.display, .h2, .h3 {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-head);
}
.display { font-size: var(--text-display); line-height: 1.02; }
.h2 { font-size: var(--text-h2); line-height: 1.1; }
.h3 { font-size: var(--text-h3); line-height: 1.2; }
/* body reading text — Nouv-Sans (inherited), Title/Sentence case */
.lede { font-size: clamp(1rem, 0.92rem + 0.5vw, 1.25rem); color: var(--ink-2); max-width: min(52ch, 100%); line-height: 1.5; }
.muted { color: var(--ink-2); }

/* skip link — visible only on keyboard focus */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .6rem 1rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { left: var(--gutter); top: .5rem; }

/* scroll reveal — transform/opacity only, reduced-motion safe */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}