/* ==========================================================================
   METHOD FUSION — responsive.css
   Mobile-first. Base styles in style.css target small screens; these scale up.
   Breakpoints: 640 (tablet), 900 (desktop nav / grids), 1100 (large).
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE NAV (default < 900px): hamburger + full-screen overlay
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .nav__toggle { display: inline-flex; }

    .nav__list {
        position: fixed; inset: 0; z-index: 999;
        flex-direction: column; align-items: flex-start; justify-content: center;
        gap: 1.4rem; padding: 6rem var(--gutter) 3rem;
        background: rgba(15, 13, 10, 0.98);
        backdrop-filter: blur(10px);
        transform: translateY(-100%);
        transition: transform 0.55s var(--ease);
        overflow-y: auto;
    }
    body.nav-open .nav__list { transform: translateY(0); }
    body.nav-open { overflow: hidden; }

    .nav__link { font-size: 1.6rem; letter-spacing: 0.02em; text-transform: none; font-family: var(--f-display); color: var(--bone); }
    .nav__item { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
    body.nav-open .nav__item { opacity: 1; transform: none; }
    body.nav-open .nav__item:nth-child(1) { transition-delay: 0.12s; }
    body.nav-open .nav__item:nth-child(2) { transition-delay: 0.18s; }
    body.nav-open .nav__item:nth-child(3) { transition-delay: 0.24s; }
    body.nav-open .nav__item:nth-child(4) { transition-delay: 0.30s; }
    body.nav-open .nav__item:nth-child(5) { transition-delay: 0.36s; }

    .nav__link--cta { font-family: var(--f-body); font-size: 0.9rem; text-transform: uppercase; }

    /* hamburger -> X */
    body.nav-open .nav__toggle-icon span:nth-child(1) { top: 4px; transform: rotate(45deg); }
    body.nav-open .nav__toggle-icon span:nth-child(2) { bottom: 4px; transform: rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   TABLET  (>= 640px)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .craft__grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
    .craft__item:nth-last-child(-n+2) { border-bottom: 0; }

    .collections__grid { grid-template-columns: 1fr 1fr; }

    .stats__grid { grid-template-columns: repeat(4, 1fr); }

    .zoom__frame { height: clamp(420px, 64vh, 720px); }
}

/* --------------------------------------------------------------------------
   DESKTOP  (>= 900px)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    .statement__grid {
        grid-template-columns: minmax(150px, 230px) 1fr;
        gap: clamp(2.5rem, 5vw, 5.5rem);
    }

    .site-footer__inner {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 3rem;
    }

    .craft__grid { grid-template-columns: repeat(4, 1fr); column-gap: 2.5rem; }
    .craft__item { border-bottom: 0; padding-top: 2.8rem; }
    .craft__item:not(:first-child) { border-left: 1px solid var(--line-d); padding-left: 2.2rem; }

    .cta__inner { grid-template-columns: 1.05fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
}

/* --------------------------------------------------------------------------
   LARGE  (>= 1100px)
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
    .hero__lead { font-size: 1.3rem; }
    .zoom__caption { grid-template-columns: auto 1fr auto; }
}

/* --------------------------------------------------------------------------
   FINE POINTER — enable richer hover only where it makes sense
   -------------------------------------------------------------------------- */
@media (hover: none) {
    .card:hover .card__img { transform: scale(1.01); }
}