/* ═══════════════════════════════════════════════════════════════
   Responsive layer — 4 tiers: 1199.98 / 991.98 / 767.98 / 575.98
   Desktop (≥ 1200) scales from the 1920 design via --u and clamp() type.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet landscape ── */
@media (max-width: 1199.98px) {
    :root { --skin-gutter: 48px; --skin-edge: 32px; }

    /* header tablet-landscape rules live in modules/header.css */

    .about__text { width: 60%; }
    .about__person { width: 26%; }

    .site-footer__cols li { line-height: 32px; }
}

/* ── Tablet portrait — mmenu kicks in ── */
@media (max-width: 991.98px) {
    :root { --skin-gutter: 32px; --skin-edge: 24px; }

    /* Figma crops → plain cover once the box aspect ratio changes */
    .figma-crop { position: static; width: 100% !important; height: 100% !important; object-fit: cover; }

    /* Header */
    .site-header { height: 80px; }
    .site-header__inner { align-items: center; }
    .site-header__logo { margin-top: 0; }
    .site-header__nav { display: none; }
    .nav-toggle { display: flex; }

    /* Hero — fixed height → min-height */
    .hero { height: auto; min-height: 600px; }
    .hero__asterisk { width: 200px; top: 28%; }
    .hero__logo { bottom: 48px; }
    .hero__logo img { width: min(60vw, 300px); }

    /* About — stack */
    .about__inner { flex-direction: column; align-items: stretch; padding: 72px 0 56px; }
    .about__text, .about__person { width: 100%; }
    .about__title { max-width: none; }
    .about__eyebrow { margin-top: 32px; }
    .about__body { margin-top: 20px; }
    .about__person { margin: 48px auto 0; max-width: 280px; text-align: center; }
    .about__person figcaption { margin-top: 12px; }
    .about__more { margin-top: 20px; }
    .about__bird { top: 32px; left: auto; right: 0; width: 48px; }
    .about__asterisk { width: 160px; top: -40px; right: -80px; }

    /* Projects */
    .projects { padding: 48px 0 40px; }
    .projects__slides { height: max(360px, 56.25vw); margin-top: 32px; }
    .projects__name { font-size: 40px; }
    .projects__name--bottom-left { left: 24px; bottom: 24px; }
    .projects__name--top-left { left: 24px; top: 24px; }
    .projects__name--top-right { right: 24px; top: 24px; }
    .projects__controls { gap: 12px; margin-top: 16px; padding-right: var(--skin-edge); }

    /* Stats */
    .stats { padding: 48px 0; }
    .stats__list { grid-template-columns: repeat(3, 1fr); }
    .stats__num { margin-top: 20px; }
    .stats__label { margin-top: 14px; }
    .stats__label--wide { max-width: 90%; }

    /* Insight */
    .insight { padding: 56px 0 48px; }
    .insight__sketch { width: min(80%, 460px); }
    .insight__title { margin-top: 32px; }
    .insight__sub { margin-top: 20px; }
    .insight__asterisk { width: 180px; top: -70px; left: -100px; }

    /* Featured */
    .featured__media { height: max(360px, 60vw); }
    .featured__overlay { left: 24px; top: 40px; max-width: 70%; }
    .featured__rule { width: 48px; }
    .featured__name { margin-top: 18px; font-size: 40px; }
    .featured__intro { max-width: none; }
    .featured__links { padding: 16px 0 8px; }

    /* Studio — text first, collage below at full width */
    .studio { --c: calc(100vw / 1189); min-height: 0; display: flex; flex-direction: column; }
    .studio__inner { width: calc(100% - 2 * var(--skin-gutter)); padding: 56px 0 32px; justify-content: flex-start; }
    .studio__text { width: 100%; text-align: left; }
    .studio__title { white-space: normal; }
    .studio__body br { display: none; }
    .studio__collage { position: relative; order: 2; }

    /* Partners */
    .partners { --c: calc(var(--u) * 1.4); padding: 64px 0 80px; }
    .partners__grid { width: calc(100% - 2 * var(--skin-gutter)); margin-top: 48px; grid-template-columns: repeat(3, 1fr); row-gap: 40px; }

    /* Footer */
    .site-footer { padding: 40px 0 24px; }
    .site-footer__inner, .site-footer__copy { width: calc(100% - 2 * var(--skin-gutter)); }
    .site-footer__cols { grid-template-columns: repeat(3, 1fr); row-gap: 24px; margin-top: 28px; }
    .site-footer__cols li { line-height: 30px; }
    .site-footer__bar {
        width: calc(100% - 2 * var(--skin-gutter));
        margin-top: 32px;
        padding: 18px 24px;
        grid-template-columns: 1fr 1fr;
        gap: 16px 24px;
    }
    .site-footer__social { gap: 12px; }
    .site-footer__copy { margin-top: 24px; }
}

/* ── Mobile ── */
@media (max-width: 767.98px) {
    :root { --skin-gutter: 20px; --skin-edge: 20px; }

    .hero { min-height: 500px; }
    .hero__asterisk { width: 160px; }

    .about__body { text-align: left; }   /* justify makes rivers on narrow columns */

    .projects__name { font-size: 30px; }

    .stats__list { grid-template-columns: 1fr !important; row-gap: 40px; }

    .featured__name { font-size: 30px; }
    .featured__intro { font-size: 15px; }

    .partners__grid { grid-template-columns: repeat(2, 1fr); }
    .partners { --c: calc(100vw / 900); }

    .site-footer__cols { grid-template-columns: 1fr 1fr; }
    .site-footer__bar { grid-template-columns: 1fr; }
    .site-footer__social { flex-wrap: wrap; }
}

/* ── Small mobile ── */
@media (max-width: 575.98px) {
    .site-header { height: 72px; }
    .site-header__logo img { width: 120px; height: auto; }

    .hero { min-height: 460px; }
    .hero__asterisk { width: 130px; }

    .projects__name { font-size: 26px; }
    .projects__controls { justify-content: center; padding-right: 0; }

    .studio__ramp-small, .studio__birds { display: none; }

    .site-footer__cols { grid-template-columns: 1fr; }
    .site-footer__cols li { white-space: normal; }
    .site-footer__copy { line-height: 1.6; }
}