/* ==========================================================================
   Woosh Biz — reset, typography, layout primitives
   Load after woosh-tokens.css.
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* The fixed navbar would otherwise cover the target of every #hash link. */
    scroll-padding-top: calc(var(--nav-h) + 20px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--paper);
    background: var(--night);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* height:auto is load-bearing. Images carry width/height attributes so the
   browser can reserve their space before the file lands — but those are
   presentational hints that beat a bare `aspect-ratio`, which would stretch
   every 16:9 photo into a portrait strip. */
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
    border-radius: 3px;
}

::selection { background: var(--plum-l); color: #fff; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--gut); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.display {
    font-family: var(--disp);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.02em;
}
.display em { font-style: italic; color: var(--gold); }

h1.display { font-size: clamp(2.5rem, 6vw, 4.8rem); }
h2.display { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
h3.display { font-size: clamp(1.4rem, 2.4vw, 2rem); }

.lede { font-size: clamp(1rem, 1.4vw, 1.12rem); }
.dim  { color: var(--dim); }
.small { font-size: .88rem; }

/* Eyebrow — the small tracked label above a heading. On a lit scene the rule
   and text swap to the darker pair so they stay legible. */
.eyebrow {
    display: inline-flex; align-items: center; gap: 11px;
    font-size: .7rem; font-weight: 600; letter-spacing: .28em;
    text-transform: uppercase; color: var(--plum-l);
}
.eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--orange); }

/* --------------------------------------------------------------------------
   Light-on-dark inversion

   Every scene is either dark (default) or lit. `.lit` flips the four things
   that actually change — ground, ink, muted ink, hairline — so components do
   not each need a light variant.
   -------------------------------------------------------------------------- */

.lit {
    background: var(--paper);
    color: var(--ink);
}
.lit .dim { color: var(--ink-2); }
.lit .eyebrow { color: var(--plum); }
.lit .display em { color: var(--plum); }

@media print {
    body { background: #fff; color: #000; }
    .navbar, .scroll-to-top, .w3d-progress { display: none; }
}