/* ══════════════════════════════════════════
   Mobile & Responsive Overrides
   ══════════════════════════════════════════ */

/* ── Tablet & below ── */
@media (max-width: 1024px) {
    .status-badge {
        font-size: 10px;
        padding: 4px 10px 4px 8px;
    }
}

/* ── Phone landscape / small tablet ── */
@media (max-width: 768px) {
    .link:not(.link--cta) {
        display: none;
    }

    .link--cta {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .navbar-center {
        display: none;
    }

    .story-row,
    .story-row.reverse {
        flex-direction: column;
    }

    .story-text,
    .story-image {
        width: 100%;
    }

    .story-container > .story-row:nth-child(odd) .story-text {
        text-align: left;
    }

    #footer {
        padding: clamp(24px, 8vh, 80px) var(--pad-edge) clamp(16px, 4vh, 32px);
    }

    .footer-top-links {
        flex-direction: column;
        gap: clamp(24px, 6vw, 40px);
    }

    .hero-scroll-hint {
        display: none;
    }

    .featured-meta {
        display: none;
    }
}

/* ── Small phones ── */
@media (max-width: 480px) {

    .big-name {
        font-size: clamp(60px, 30vw, 200px);
    }
}

/* ── About Page ── */
@media (max-width: 1024px) {
    .story-container--catch {
        flex-direction: column-reverse;
        text-align: center;
        gap: 32px;
    }

    .story-prose--catch {
        text-align: center;
        margin-right: 0;
        mix-blend-mode: normal; /* Blend mode can be messy on some mobile browsers over flat colors */
    }

    .about-title {
        text-align: center;
    }

    .story-portrait--catch {
        flex: 1;
        max-width: 100%;
    }

    .story-portrait {
        position: static;
        max-width: 420px;
    }
}

@media (max-width: 768px) {
    .exp-block,
    .skill-band {
        grid-template-columns: 1fr;
        gap: clamp(8px, 1.5vh, 14px);
    }

    .exp-year {
        grid-column: 1;
        grid-row: auto;
        padding-top: 0;
        margin-bottom: 4px;
    }

    .exp-title,
    .exp-role,
    .exp-lede,
    .exp-list,
    .exp-facts {
        grid-column: 1;
    }

    .skills-aside {
        padding-left: 0;
    }

    .about-cta-title {
        font-size: clamp(36px, 11vw, 64px);
    }
}

@media (max-width: 480px) {
    .exp-facts {
        grid-template-columns: 1fr;
    }
}