/* Shared phone / small-screen hardening for the whole site. */

@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    body {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }

    .site-wrap {
        padding: 1.15rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0));
        padding-left: max(1.1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.1rem, env(safe-area-inset-right, 0px));
    }

    /* Larger tap targets without changing the visual mark much */
    .site-menu-btn {
        width: 44px;
        height: 44px;
        margin: -6px 0 0 -6px;
    }

    .site-current-nav {
        max-width: calc(100% - 3.25rem);
        gap: 0.65rem 0.85rem;
    }

    .site-current-nav__title,
    .site-current-nav__subs a {
        font-size: 0.78rem;
        padding: 0.35rem 0;
        min-height: 2rem;
        display: inline-flex;
        align-items: center;
    }

    .site-current-nav__subs {
        gap: 0.55rem 0.85rem;
    }

    .site-drawer__panel {
        width: min(22rem, 92vw);
        padding:
            max(1.5rem, env(safe-area-inset-top, 0px))
            1.35rem
            max(2rem, env(safe-area-inset-bottom, 0px))
            max(1.35rem, env(safe-area-inset-left, 0px));
        -webkit-overflow-scrolling: touch;
    }

    .site-drawer__section > a {
        display: inline-flex;
        align-items: center;
        min-height: 2.4rem;
        padding: 0.35rem 0;
    }

    .site-drawer__section ul a {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.55rem 0;
        font-size: 0.9rem;
    }

    .site-suggest {
        margin-top: 2.75rem;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .site-suggest__item {
        flex: 0 0 112px;
        width: 112px;
    }

    .site-suggest__preview {
        width: 112px;
        height: 112px;
    }

    .site-suggest__label {
        font-size: 0.7rem;
        min-height: 1.6rem;
    }

    /* Project pages: window / quilt / natural dye */
    .container {
        width: 100%;
        max-width: 100%;
    }

    .project-header {
        margin: 1.25rem 0 1.5rem;
        max-width: 100%;
    }

    .project-header h1,
    .container > .project-header h1,
    .container h1 {
        font-size: 1.35rem;
        letter-spacing: 0.08em;
    }

    .description {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .carousel-section {
        margin: 1.75rem -1.1rem;
        padding: 0 1.1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .carousel-section::-webkit-scrollbar {
        display: none;
    }

    .carousel-container {
        gap: 0.75rem;
    }

    .carousel-slide img,
    .carousel-slide video {
        height: 140px;
        max-width: 72vw;
        width: auto;
        object-fit: cover;
    }

    .image-container {
        margin-top: 2rem;
    }

    .project-image {
        margin-bottom: 1.25rem;
        scroll-margin-top: 1rem;
    }

    .project-image img,
    .project-image video {
        width: 100%;
        max-height: min(75vh, 75dvh);
        object-fit: contain;
    }

    /* Show page carousel */
    .show-carousel {
        margin-left: -1.1rem;
        margin-right: -1.1rem;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .show-carousel-slide img {
        height: auto;
        max-height: min(58vh, 58dvh);
        max-width: min(82vw, 340px);
        width: auto;
    }

    .show-main video,
    .show-video video {
        width: 100%;
        height: auto;
        max-height: min(70vh, 70dvh);
    }

    /* Grids */
    .pieces-grid,
    .prints-grid,
    .site-gallery,
    .projects-grid {
        gap: 0.75rem;
    }

    .illustrations-grid {
        column-count: 2;
        column-gap: 0.7rem;
    }

    .illustrations-grid__item {
        margin-bottom: 0.7rem;
    }

    .illustrations-grid__item,
    .pieces-grid__item,
    .prints-grid button,
    .site-gallery button {
        -webkit-tap-highlight-color: transparent;
    }

    /* Lightboxes / viewer chrome */
    .pieces-lightbox__close,
    .prints-lightbox__close,
    .site-gallery-lightbox__close,
    .image-viewer__btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.65rem 0.35rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .page-title {
        font-size: 1rem;
        margin-bottom: 1.35rem;
    }

    .features-list a,
    .contact-value a {
        word-break: break-word;
    }

    .resume-layout,
    .contact-layout {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .site-wrap {
        padding-top: 1rem;
    }

    .carousel-slide img,
    .carousel-slide video {
        height: 120px;
        max-width: 68vw;
    }

    .site-suggest__item {
        flex: 0 0 96px;
        width: 96px;
    }

    .site-suggest__preview {
        width: 96px;
        height: 96px;
    }

    .illustrations-grid {
        column-gap: 0.55rem;
    }

    .show-carousel-slide img {
        max-width: 78vw;
        max-height: min(52vh, 52dvh);
    }
}