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

html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-bg-subtle);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background var(--transition-base), color var(--transition-base);
}

/* Everything between the nav and the footer (every page's own content, whatever
   markup it uses) grows to fill the viewport, so the footer stays pinned to the
   bottom on short pages instead of floating right under sparse content. */
.page-wrap { flex: 1 0 auto; width: 100%; }

h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.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;
}

::selection { background: var(--color-primary-100); color: var(--color-primary-900); }

/* Keyboard focus ring (only for keyboard users, not mouse clicks) */
:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

/* Reveal-on-scroll: elements start hidden/shifted, JS adds .is-visible when they
   enter the viewport. Staggering via inline --reveal-delay. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--transition-base), transform 0.6s var(--transition-base);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@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;
    }
    .reveal { opacity: 1; transform: none; }
}