@media (min-width: 1600px) {
    :root {
        --page-h: min(calc(100dvh - 220px), 840px);
        --nav-height: 82px;
    }
}

@media (max-width: 1280px) {
    .site-footer-hint {
        display: none;
    }
}

@media (max-width: 1200px) {
    .nav-burger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        inset: 0;
        z-index: 600;
        display: grid;
        place-items: center;
        background:
            radial-gradient(60% 45% at 50% 30%, rgba(99, 102, 241, 0.14), transparent 70%),
            rgba(7, 8, 13, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transform: translateY(-102%);
        transition: transform 0.6s var(--ease-flip);
        visibility: hidden;
    }

    .nav-menu.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 90px 34px 40px;
    }

    .nav-link {
        font-size: clamp(21px, 4.4vw, 30px);
        letter-spacing: 0.16em;
        padding: 10px 4px;
    }

    .nav-link::after {
        left: 4px;
        bottom: 8px;
    }

    .nav-link-num {
        font-size: 11px;
        vertical-align: middle;
    }

    .nav-menu-glow {
        display: block;
        position: absolute;
        width: 42vmax;
        height: 42vmax;
        bottom: -16vmax;
        right: -12vmax;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(34, 211, 238, 0.1), transparent 65%);
        filter: blur(60px);
        pointer-events: none;
    }

    .site-footer {
        display: none;
    }
}

@media (max-width: 900px) {
    :root {
        --nav-height: 64px;
        --booknav-height: 78px;
        --page-w: min(92vw, 560px);
        --page-h: min(calc(100dvh - var(--nav-height) - var(--booknav-height) - 18px), 840px);
    }

    .portfolio-book {
        inset: var(--nav-height) 0 var(--booknav-height) 0;
    }

    .book {
        width: var(--page-w);
    }

    .book-page {
        left: 0;
        width: 100%;
    }

    .page-front {
        border-radius: var(--radius-lg);
    }

    .page-front::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 60px);
    }

    .page-back {
        display: none;
    }

    .book-spine,
    .book-stack-left {
        display: none;
    }

    .book-stack-right {
        width: 8px;
    }

    .page-under-shadow {
        left: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 30%, rgba(0, 0, 0, 0.35));
    }

    .cover-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cover-visual {
        min-height: 300px;
    }

    .cover-card-status {
        left: 0;
    }

    .cover-stats,
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .about-layout,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .about-photo {
        max-width: 320px;
        margin: 0 auto;
        aspect-ratio: 4 / 3.4;
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .project-card,
    .project-card-featured {
        grid-template-columns: 1fr;
    }

    .project-media {
        min-height: 0;
        aspect-ratio: 16 / 8.5;
    }

    .project-card-featured .project-media {
        min-height: 0;
    }

    .blog-card {
        grid-template-columns: 1fr;
    }

    .blog-media {
        min-height: 0;
        aspect-ratio: 16 / 8.5;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .form-field:nth-child(3),
    .form-field:nth-child(4) {
        grid-column: auto;
    }

    .about-facts {
        grid-template-columns: 1fr;
    }

    .book-nav-label {
        display: none;
    }

    .book-nav-btn {
        padding: 12px 16px;
    }

    .page-foot {
        font-size: 9px;
        letter-spacing: 0.2em;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .page-running-head,
    .page-running-mark {
        display: none;
    }

    .page-foot {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .page-content {
        padding: 18px 18px 20px;
    }

    .cover-title {
        font-size: clamp(34px, 12vw, 52px);
    }

    .cover-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .cover-portrait {
        width: min(62vw, 230px);
    }

    .cover-portrait-ring {
        width: min(74vw, 270px);
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skill-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }

    .timeline {
        padding-left: 26px;
    }

    .timeline-node {
        left: -23px;
    }
}

@media (max-width: 380px) {
    .cover-title {
        font-size: clamp(30px, 13vw, 40px);
    }

    .contact-title {
        font-size: clamp(22px, 8.5vw, 34px);
    }

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

    .cover-stats,
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .book-nav-indicator {
        padding: 9px 14px;
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .cover-visual {
        min-height: 250px;
    }

    .cover-portrait {
        width: clamp(150px, 20cqw, 210px);
    }

    .cover-portrait-ring {
        width: clamp(180px, 26cqw, 250px);
    }

    .page-content {
        padding-top: 16px;
    }
}