/* ── Tablet (601px – 1024px) ─────────────────────────────── */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* Work: text left, illustration right */
    .work__row-body {
        grid-template-columns: 1fr 160px;
        gap: 1.2rem 2vw;
        padding: 3.5vw 1.5rem;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
    .work__illus { width: 120px; height: 120px; }
    .work__meta    { width: auto; }

    .splash_hello {
        font-size: 7rem;
        padding-top: 8%;
    }
    footer {
        flex-direction: row;
        align-items: center;
    }
}

/* ── Mobile (≤600px) ─────────────────────────────────────── */
@media only screen and (max-width: 600px) {
    /* About section — match 6vw mobile padding, reduce top gap from hero */
    #about {
        padding: 2vh 6vw 10vh;
        min-height: auto;
    }

    /* Work section — match 6vw mobile padding */
    #work {
        padding: 4vh 6vw 18vh;
    }

    /* Work: single column, illustration on top, text below */
    /* Hover background bleeds into section padding via negative margins */
    .work__row-body {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        padding: 8vw 4vw;
        margin-left: -4vw;
        margin-right: -4vw;
    }
    .work__illus {
        width: 72px;
        height: 72px;
        order: -1;          /* move illustration above text */
        margin: 0;          /* left-align instead of centred */
    }
    .work__meta {
        width: auto;
        transform: none;
        opacity: 1;
    }
    .work__meta-title { font-size: 1rem; }

    /* "Read more" link — mobile only */
    .work__read-more {
        display: inline-block;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--accent);
        margin-top: 0.6rem;
        letter-spacing: 0.03em;
    }

    /* ── Process / "How I work" ──────────────────────────── */
    #process {
        padding: 8vh 0 12vh;
    }
    #process__inner {
        gap: 0.8rem;
    }
    #process__header {
        padding: 0 6vw;
        gap: 0.3rem;
    }
    #process__title {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
    }
    #process__tagline {
        font-size: 0.85rem;
    }
    #process__steps {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 0;
        width: 100vw;
    }
    .process__step {
        padding: 0 6vw;
        gap: 0.3rem;
    }
    .process__step:first-child { padding-left: 6vw; }
    .process__step:last-child  { padding-right: 6vw; }
    .process__step-icon {
        width: 160px;
        height: 160px;
        margin-bottom: -0.4rem;
    }
    .process__step-icon canvas {
        width: 160px !important;
        height: 160px !important;
    }
    .process__step-rule {
        margin-bottom: 0.1rem;
    }
    .process__step-title {
        font-size: 1.4rem;
    }
    .process__step-desc {
        font-size: 0.85rem;
        max-width: none;
        width: 100%;
        line-height: 1.5;
    }

    .cursor {
        display: none;
    }
    /* ── Floating icons: subtler on mobile ──────────────────── */
    .about__float svg {
        opacity: 0.12;
    }
    .about__float-outer {
        filter: blur(3px);
    }
    /* ── Hero layout: name sits just above mid-screen ────── */
    #hero__desc {
        flex-direction: column;
        align-items: flex-start;
        top: auto;
        bottom: 50%;
        gap: 10px;
        padding: 0 6vw;
    }
    .hero__name-display {
        font-size: clamp(2.6rem, 11vw, 4rem);
    }
    .hero__tag {
        font-size: 0.85rem;
        margin-top: 0.4rem;
    }
    #hero__scroll-hint {
        font-size: 0.72rem;
    }

    /* ── "hello!" spans the full width at the bottom ─────── */
    #hero__name {
        bottom: 4%;
        padding: 0 6vw;
    }
    .splash_hello {
        font-size: 27vw;
        padding: 0;
        letter-spacing: -0.02em;
        width: 100%;
        box-sizing: border-box;
    }

    /* ── Footer ──────────────────────────────────────────── */
    footer {
        flex-direction: column;
        align-items: flex-start;
        max-width: 100%;
        padding: 5vh 6vw 4vh;
        gap: 1.8rem;
    }
    .footer__logo {
        height: 56px;
    }
    .footer__name {
        font-size: 1.3rem;
    }
    .footer__tagline {
        font-size: 0.82rem;
    }
    .footer__links {
        gap: 1.6rem;
    }
    .footer__link span {
        display: none;
    }
    .footer__link i {
        font-size: 1.5rem;
    }
}