@media (max-width: 900px) {
.site-header {
    width: calc(100% - 28px);
    padding-left: 16px;
    transition: transform 280ms ease;
    will-change: transform;
}

.site-header.is-hidden {
    transform: translateX(-50%) translateY(calc(-100% - 20px));
}

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .site-navigation {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: 0;
        display: block;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: var(--paper-soft);
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-7px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    .site-header.menu-open .site-navigation {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links {
        display: grid;
        gap: 3px;
    }

    .nav-link {
        display: block;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .theme-toggle {
        width: 100%;
        margin-top: 7px;
    }

    .hero-content {
        width: calc(100% - 28px);
        padding-bottom: 65px;
    }

    .hero-character {
        bottom: 21%;
        width: clamp(145px, 30vw, 220px);
        max-height: 33vh;
    }

    .hero-copy {
        width: min(100%, 560px);
        margin-bottom: 0;
        padding: 22px 20px;
    }

    .scene-house {
        bottom: 25%;
        width: min(390px, 62vw);
        height: min(215px, 34vw);
    }

    .scene-courtyard {
        width: 125vw;
        height: 40%;
    }

    .section {
        width: calc(100% - 28px);
        padding: 82px 0;
    }

    .site-footer {
        width: calc(100% - 28px);
    }
}

@media (max-width: 600px) {
    .site-header {
        margin-top: 10px;
    }

    .brand {
        font-size: 1rem;
    }

    .hero {
        min-height: 760px;
    }

    .hero-content {
        min-height: 760px;
        align-items: flex-end;
        padding-top: 110px;
    }

    .hero-copy {
        border-radius: 20px;
    }

    .hero-copy h1 {
        font-size: clamp(2.65rem, 16vw, 4.1rem);
    }

    .hero-character {
        bottom: 27%;
        width: min(52vw, 195px);
    }

    .scene-house {
        bottom: 29%;
        width: min(320px, 76vw);
        height: 180px;
        border-width: 6px;
    }

    .scene-window {
        bottom: 18px;
        width: 76px;
        height: 75px;
        border-width: 6px;
    }

    .scene-window::before {
        width: 4px;
    }

    .scene-window::after {
        height: 4px;
    }

    .scene-mountain {
        bottom: 25%;
        width: 120%;
        height: 40%;
    }

    .scene-mountain-back {
        bottom: 32%;
        width: 120%;
        height: 35%;
    }

    .scene-cloud {
        width: 170px;
        height: 52px;
    }

    .scene-sun {
        top: 14%;
        right: 9%;
        width: 70px;
    }

    .section {
        padding: 68px 0;
    }

    .page-stub {
        width: calc(100% - 28px);
        padding-top: 140px;
    }
}

@media (max-width: 390px) {
    .hero-character {
        bottom: 29%;
        width: 165px;
    }

    .hero-copy {
        padding: 19px 16px;
    }

    .hero-copy p {
        font-size: 0.9rem;
    }
}

/* Little Fluffy home scene v2 responsive rules */
@media (max-width: 900px) {
    .site-header { width: calc(100% - 28px); }
    .home-hero { min-height: 880px; }
    .home-hero-inner { width: calc(100% - 28px); min-height: 880px; padding-top: 135px; }
    .home-intro { top: 15%; left: 0; width: min(560px, 64vw); }
    .home-character-stage { right: -7%; bottom: 5%; width: min(600px, 65vw); height: 520px; }
    .home-character { width: min(510px, 60vw); right: 3%; }
    .character-note { right: 2%; top: 12%; }
    .server-box { right: 0; }
    .about-home-grid { grid-template-columns: 1fr; }
    .home-trio { grid-template-columns: 1fr; }
    .home-card { display: grid; grid-template-columns: 240px 1fr; }
    .card-art { min-height: 100%; }
}

@media (max-width: 620px) {
    .site-header { margin-top: 8px; }
    .brand-wood { padding: 6px 10px; }
    .home-hero { min-height: 820px; }
    .home-hero-inner { min-height: 820px; padding-top: 118px; }
    .home-art { background-position: 61% center; }
    .home-wash { background: linear-gradient(180deg, rgba(255,248,231,.96) 0%, rgba(255,248,231,.82) 36%, rgba(255,248,231,.2) 66%, rgba(66,91,58,.45) 100%); }
    html[data-theme="dark"] .home-wash { background: linear-gradient(180deg, rgba(24,38,33,.97), rgba(24,38,33,.76) 36%, rgba(24,38,33,.15) 68%, rgba(10,27,23,.58)); }
    .home-intro { top: 14%; width: 100%; padding: 21px 19px 22px; }
    .home-intro h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
    .home-copy { font-size: .9rem; }
    .home-tags span { font-size: .7rem; }
    .home-character-stage { right: -4%; bottom: 0; width: 96vw; height: 420px; }
    .home-character { width: 410px; max-width: 90vw; right: 2%; }
    .character-note { right: 1%; top: 8%; transform: rotate(2deg) scale(.88); transform-origin: right top; }
    .server-box { right: 5%; bottom: 4%; transform: scale(.85); transform-origin: right bottom; }
    .home-signpost { left: 3%; bottom: 9%; transform: rotate(-2deg) scale(.82); transform-origin: left bottom; }
    .home-scroll { bottom: 8px; }
    .home-section { width: calc(100% - 28px); padding: 62px 0; }
    .about-home-card { grid-template-columns: 1fr; text-align: center; padding: 22px 18px; }
    .mini-tianlu { margin: 0 auto; }
    .interest-icons { grid-template-columns: repeat(2,1fr); }
    .home-card { display: block; }
    .card-art { min-height: 140px; }
}