/* ============================================================
   LAYOUT — Full-viewport sections, proximity snap
   Short sections fill the screen; taller ones grow.
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
}

body {
    background: var(--bg);
    color: var(--ink);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

::selection {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

main {
    display: block;
}

/* Full-viewport sections — one screen, then the next */
section {
    min-height: 100dvh;
    padding: 108px var(--gutter) 56px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

#home.hero {
    padding-top: 120px;
}

.section-inner {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

/* Hairline rule between sections */
section + section {
    border-top: 1px solid var(--line);
}

/* Section header block */
/* Section header — no pills, plain eyebrow text */
.section-head {
    margin-bottom: clamp(40px, 6vw, 60px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-head .h2 {
    max-width: 16ch;
}

/* Focus visible for keyboard users */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* Reduced motion: honor user preference globally */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 760px) {
    html { scroll-padding-top: 0; }

    section {
        min-height: 100dvh;
        padding: 40px var(--gutter) 108px;
        justify-content: flex-start;
    }

    #home.hero {
        padding-top: 32px;
        padding-bottom: 108px;
    }
}