/* ============================================================
   Solvyr v2 — Base / reset / global typography
   ============================================================ */

/* ---- Modern reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
}
body {
    margin: 0;
    min-height: 100vh;
    background: var(--ink-900);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01', 'cv02', 'cv11';
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
hr {
    border: 0;
    border-top: 1px solid var(--ink-700);
    margin: var(--space-5) 0;
}
:focus-visible {
    outline: 2px solid var(--amber-500);
    outline-offset: 3px;
    border-radius: 3px;
}
::selection {
    background: var(--amber-500);
    color: var(--ink-900);
}

/* ---- Global noise texture ---- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.9  0 0 0 0 0.7  0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Layout primitives ---- */
.container {
    width: min(100% - 3rem, var(--container));
    margin-inline: auto;
    position: relative;
    z-index: 1;
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.stack > * + * { margin-top: var(--stack, var(--space-3)); }
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* ---- Typography classes ---- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber-500);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    line-height: 1;
}
.eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
}
.eyebrow--plain::before { display: none; }

.display {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-5);
    line-height: 1.04;
    letter-spacing: -0.02em;
    font-variation-settings: 'opsz' 96, 'SOFT' 40;
}
.display em,
.h1 em,
.h2 em,
.h3 em {
    font-style: italic;
    font-weight: 400;
    color: var(--amber-500);
    font-variation-settings: 'opsz' 96, 'SOFT' 100;
}

.h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-5);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variation-settings: 'opsz' 96;
}
.h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-4);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variation-settings: 'opsz' 60;
}
.h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-3);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variation-settings: 'opsz' 36;
}
.h4 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-2);
    line-height: 1.2;
    letter-spacing: -0.005em;
    font-variation-settings: 'opsz' 24;
}

.lead {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--paper-dim);
    max-width: 56ch;
}
.muted { color: var(--mute-500); }
.paper-dim { color: var(--paper-dim); }

.mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* ---- Utilities ---- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--amber-500);
    color: var(--ink-900);
    padding: 0.5rem 1rem;
    z-index: 9999;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.text-center { text-align: center; }
.text-amber  { color: var(--amber-500); }

/* ---- Reveal-on-scroll ----
   Default state is visible so no-JS and SSR show content.
   When site.js runs it adds .js-reveals to <html> to activate the hide-until-observed state.
*/
.html--reveal-ready .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-4) var(--ease-out),
                transform var(--dur-4) var(--ease-out);
}
.html--reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
}
.html--reveal-ready .reveal[data-delay='1'] { transition-delay: 100ms; }
.html--reveal-ready .reveal[data-delay='2'] { transition-delay: 200ms; }
.html--reveal-ready .reveal[data-delay='3'] { transition-delay: 300ms; }
.html--reveal-ready .reveal[data-delay='4'] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .html--reveal-ready .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}