/* =============================================================================
   PBPR — Responsive
   Mobile-first. Default styles in style.css target mobile.
   Below: progressive enhancement for larger viewports + mobile nav overrides.
   ========================================================================== */
/* ───────────────────────────────────────────────────────────────────────────
   Mobile-only overrides (max-width applied because the nav is reverse — default desktop, special mobile)
   The desktop nav is the design baseline; mobile collapses into a drawer.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
    .site-nav__toggle {
        display: flex;
    }
    .site-nav__list {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 88vw);
        background: var(--color-paper);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--space-5);
        padding: var(--space-9) var(--space-6) var(--space-6);
        transform: translateX(100%);
        transition: transform 0.5s var(--ease-out);
        box-shadow: -30px 0 60px -20px rgba(29,29,29,0.25);
        border-left: 1px solid var(--color-bone);
    }
    .site-nav__list.is-open {
        transform: translateX(0);
    }
    .site-nav__item {
        width: 100%;
    }
    .site-nav__link {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.9rem;
        letter-spacing: -0.02em;
        line-height: 1.2;
        padding: 0.5rem 0;
    }
    .site-nav__link.is-active {
        color: var(--color-accent);
    }
    .site-nav__cta {
        margin-top: var(--space-4);
        padding: 0.85rem 1.5rem;
        font-size: var(--fs-small);
    }
    /* Body lock when menu open */
    body.menu-open {
        overflow: hidden;
    }
    /* Backdrop */
    body.menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(29, 29, 29, 0.5);
        z-index: 99;
        backdrop-filter: blur(4px);
    }
    /* Header is always solid on mobile when scrolled */
    .site-header.is-over-dark .logo-mark,
    .site-header.is-over-dark .site-nav__toggle-bar {
        color: var(--color-snow);
    }
}
/* ───────────────────────────────────────────────────────────────────────────
   Small mobile adjustments
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    :root {
        --container-pad: 1.25rem;
        --fs-h3: 1.75rem;
        --fs-h4: 1.5rem;
        --space-9: 4rem;
        --space-10: 5rem;
    }
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .site-footer__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    .section {
        padding: var(--space-8) 0;
    }
}
/* ───────────────────────────────────────────────────────────────────────────
   Tablet
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
    :root {
        --container-pad: 2rem;
    }
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}
/* ───────────────────────────────────────────────────────────────────────────
   Large desktop polish
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
    :root {
        --container-pad: 2.5rem;
    }
}
/* ───────────────────────────────────────────────────────────────────────────
   Motion reduce
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
}