/* Phone layouts. Loaded after the page styles; desktop keeps its own composition. */
@media (max-width: 700px) {
    .punch-site {
        --navbar-height: 72px;
        --punch-mobile-gutter: 20px;
        --punch-mobile-header: calc(72px + env(safe-area-inset-top, 0px));
    }
    html { scroll-padding-top: 20px; }

    /* One clear row, with enough space to tap every control. */
    .punch-header { background: color-mix(in srgb, var(--punch-bg) 95%, transparent); }
    .punch-header::before { content: none; }
    .punch-header .punch-nav {
        min-height: var(--punch-mobile-header);
        padding: calc(12px + env(safe-area-inset-top, 0px)) var(--punch-mobile-gutter) 12px;
        grid-template-columns: minmax(0, 1fr) auto 44px;
        gap: 8px;
    }
    .punch-header .punch-brand { min-width: 0; min-height: 44px; gap: 8px; }
    .punch-header .punch-brand > .punch-brand-mark { width: 36px; height: 40px; }
    .punch-header .punch-brand img { width: 36px; height: 36px; }
    .punch-header .punch-brand > .punch-brand-wordmark { display: block; font-size: 13px; }
    .punch-header .punch-brand-wordmark > span { font-size: 10px; margin-top: 2px; }
    .punch-header .punch-account { gap: 2px; }
    .punch-site .punch-header .punch-user-toggle { min-width: 44px; padding: 5px; }
    .punch-header .punch-user-name { display: none; }
    .punch-header .punch-signup-label-wide { display: none; }
    .punch-header .punch-signup-label-compact { display: inline; }
    .punch-site .punch-header .punch-menu-toggle { background: #ffffff08; }
    .punch-header .punch-navigation { margin-top: 8px; padding: 8px 0; max-height: calc(100dvh - var(--punch-mobile-header) - 24px); }
    .punch-header .punch-nav-link { min-height: 48px; font-size: 16px; }
    .punch-header .punch-dropdown-panel.punch-nav-panel { padding-left: 0; }
    .punch-header .punch-dropdown-panel .punch-dropdown-link { min-height: 56px; padding: 12px 8px; }
    .punch-header .punch-link-copy > small { font-size: 12px; line-height: 1.5; }
    .punch-header .punch-notifications > .dropdown-menu {
        position: fixed !important;
        top: calc(var(--punch-mobile-header) + 8px) !important;
        left: 12px !important; right: 12px !important;
        width: auto; max-width: none;
        max-height: calc(100dvh - var(--punch-mobile-header) - 24px);
        overflow-y: auto;
        border: 1px solid var(--punch-line);
        border-radius: 18px;
        background: var(--punch-surface);
    }
    .punch-header .punch-user-menu .punch-user-panel {
        position: fixed;
        top: calc(var(--punch-mobile-header) + 8px);
        left: 12px; right: 12px;
        width: auto; max-width: none;
        max-height: calc(100dvh - var(--punch-mobile-header) - 24px);
        overflow-y: auto;
        border: 1px solid var(--punch-line);
        border-radius: 18px;
        background: var(--punch-surface);
    }

    /* A photograph with a natural end, followed by readable, left-aligned copy. */
    .punch-home .punch-hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding-bottom: 24px;
    }
    .punch-home .punch-hero-picture {
        inset: var(--punch-mobile-header) 0 auto;
        height: clamp(270px, 76vw, 380px);
    }
    .punch-home .punch-hero-picture img { object-position: 100% 45%; opacity: 1; }
    .punch-home .punch-hero-shade {
        background: linear-gradient(180deg, transparent 180px, color-mix(in srgb, var(--punch-bg) 25%, transparent) 250px, var(--punch-bg) 390px);
    }
    .punch-home .punch-hero-content {
        margin: 0;
        padding: calc(var(--punch-mobile-header) + clamp(210px, 56vw, 270px)) var(--punch-mobile-gutter) 0;
        text-align: left;
    }
    .punch-home .punch-hero h1 {
        max-width: 560px;
        margin: 0;
        font-size: clamp(28px, 8.2vw, 40px);
        line-height: 1.19;
        letter-spacing: -.045em;
        text-wrap: balance;
        text-shadow: 0 2px 16px color-mix(in srgb, var(--punch-bg) 44%, transparent);
    }
    .punch-home .punch-hero-description {
        max-width: 34ch;
        margin: 20px 0 0;
        font-size: 15px;
        line-height: 1.65;
        color: var(--punch-muted);
        text-wrap: pretty;
    }
    .punch-home .punch-hero-actions { flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 24px; }
    .punch-home .punch-hero-actions > * { flex: 1 1 160px; }
    .punch-home .punch-hero-actions .punch-button { width: 100%; min-height: 48px; padding: 12px 16px; font-size: 14px; }
    .punch-home .punch-socials {
        display: grid;
        grid-template-columns: repeat(7, minmax(44px, 1fr));
        justify-content: start;
        gap: 4px;
        max-width: 368px;
        margin-top: 24px;
    }
    .punch-home .punch-socials a { width: 100%; height: 44px; min-width: 44px; border-radius: 10px; background: #ffffff05; }
    .punch-home .punch-socials svg { width: 20px; height: 20px; }
    .punch-home .punch-about-link {
        position: static;
        align-self: flex-start;
        transform: none;
        min-height: 44px;
        margin: 20px var(--punch-mobile-gutter) 0;
        padding: 0;
        font-size: 14px;
        color: var(--punch-text);
    }

    /* Compact member cards: portrait and identity, then the complete biography. */
    .punch-home .crew { padding: 32px var(--punch-mobile-gutter) 48px; }
    .punch-home .crew-inner { min-width: 0; }
    .punch-home .crew-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
    .punch-home .crew-heading h2 { font-size: 32px; line-height: 1.2; }
    .punch-home .crew-heading-copy > p { max-width: 36ch; margin-top: 12px; font-size: 15px; line-height: 1.65; text-wrap: pretty; }
    .punch-home .crew-motion { min-height: 44px; margin: 0; padding: 8px 12px; }
    .punch-home .crew-roster {
        order: 1;
        display: flex;
        min-width: 0;
        gap: 6px;
        margin: 0 calc(-1 * var(--punch-mobile-gutter)) 20px;
        padding: 4px var(--punch-mobile-gutter) 12px;
        overflow-x: auto;
        scroll-padding-inline: var(--punch-mobile-gutter);
        scroll-snap-type: x proximity;
    }
    .punch-home .crew-roster[hidden] { display: none; }
    .punch-home .crew-pick { flex: 0 0 88px; gap: 8px; padding-bottom: 12px; scroll-snap-align: center; }
    .punch-home .crew-pick-art { height: 72px; }
    .punch-home .crew-pick-art img { height: 70px; }
    .punch-home .crew-stage { order: 2; border-radius: 20px; }
    .punch-home .crew-panel { display: grid; grid-template-columns: 104px minmax(0, 1fr); min-height: 0; padding: 20px 20px 84px; }
    .punch-home .crew-panel[hidden] { display: none; }
    .punch-home .crew-visual { grid-column: 1; grid-row: 1; min-height: 0; height: 172px; }
    .punch-home .crew-character { height: 164px; max-width: 100%; margin-bottom: 4px; }
    .punch-home .crew-panel[data-member=golderrina] .crew-character { height: 150px; max-width: 100%; }
    .punch-home .crew-halo { inset: 10% 4% 5%; }
    .punch-home .crew-word { display: none; }
    .punch-home .crew-floor { bottom: 0; left: 8%; right: 8%; height: 14px; }
    .punch-home .crew-record { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
    .punch-home .crew-bio { display: contents; }
    .punch-home .crew-identity { grid-column: 2; grid-row: 1; align-self: center; padding-left: 16px; min-width: 0; }
    .punch-home .crew-role { margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
    .punch-home .crew-bio h3 { margin: 0; font-size: clamp(20px, 5.2vw, 27px); line-height: 1.3; overflow-wrap: anywhere; }
    .punch-home .crew-intro { grid-column: 1 / -1; max-width: none; margin: 16px 0 12px; font-size: 17px; line-height: 1.5; }
    .punch-home .crew-description { grid-column: 1 / -1; max-width: none; font-size: 14px; line-height: 1.75; }
    .punch-home .crew-skills { grid-column: 1 / -1; gap: 8px 14px; margin-top: 20px; }
    .punch-home .crew-controls { left: 20px; right: 20px; bottom: 20px; justify-content: flex-end; }
    .punch-home .crew-position { margin-right: auto; }

    .punch-home .punch-news { padding: 0 var(--punch-mobile-gutter) 48px; }
    .punch-home .punch-news-heading { padding-top: 36px; margin-bottom: 24px; gap: 20px; }
    .punch-home .punch-news-heading > div { min-width: 0; max-width: 100%; }
    .punch-home .punch-news-heading h2 { max-width: 12ch; font-size: 30px; line-height: 1.25; text-wrap: balance; }
    .punch-home .punch-news-heading p { margin-top: 12px; font-size: 15px; line-height: 1.65; }
    .punch-home .punch-news-grid { gap: 24px; grid-template-columns: minmax(0, 1fr); }
    .punch-home .punch-news-featured-body { padding: 20px; }
    .punch-home .punch-news-featured h3 { font-size: 24px; }
    .punch-home .punch-news-read { padding-top: 24px; }
    .punch-home .punch-news-item-link { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding-block: 20px; }
    .punch-home .punch-news-item-arrow { display: none; }
    .punch-home .punch-news-item h3 { font-size: 18px; line-height: 1.4; }
    .punch-home .punch-news-item .punch-news-summary { font-size: 13px; line-height: 1.55; }

    .punch-site .punch-footer { padding: 36px var(--punch-mobile-gutter) 20px; }
    .punch-footer-invite h2 { max-width: 14ch; font-size: 27px; line-height: 1.25; }
    .punch-footer-invite { gap: 20px; padding-bottom: 28px; margin-bottom: 28px; }
    .punch-footer-invite p { font-size: 15px; line-height: 1.65; }
    .punch-site .punch-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .punch-footer-socials { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 4px; max-width: 368px; }
    .punch-footer-socials a { width: 100%; border: 0; background: #ffffff05; }
    .punch-footer-top { align-self: flex-start; }

    /* Internal pages follow the same gutters and readable phone type sizes. */
    .punch-page-banner { padding: calc(var(--punch-mobile-header) + 32px) var(--punch-mobile-gutter) 28px; text-align: left; }
    .punch-page-banner h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1.25; overflow-wrap: anywhere; }
    .punch-page-content { padding-inline: var(--punch-mobile-gutter); padding-bottom: 40px; }
    .punch-page-content > .container { padding-inline: 0; }
    .punch-page-content :is(.user-html-content, .card-body) { overflow-wrap: anywhere; }
    .punch-page-content .user-html-content :is(img, video, iframe) { max-width: 100%; }
    .punch-site :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
    .punch-auth { padding-top: calc(var(--punch-mobile-header) + 24px); padding-inline: var(--punch-mobile-gutter); }
    .punch-auth-content { padding: 24px 20px; }
    .punch-profile { padding-top: calc(var(--punch-mobile-header) + 24px); padding-inline: var(--punch-mobile-gutter); }
}

@media (max-width: 389px) {
    .punch-site { --punch-mobile-gutter: 16px; }
    .punch-home .punch-socials, .punch-footer-socials { gap: 2px; }
}

@media (max-width: 371px) {
    .punch-site { --punch-mobile-gutter: 16px; }
    .punch-header .punch-nav { gap: 6px; }
    .punch-header .punch-brand > .punch-brand-mark { width: 30px; }
    .punch-header .punch-brand img { width: 30px; height: 30px; }
    .punch-header .punch-brand > .punch-brand-wordmark { font-size: 11px; }
    .punch-header .punch-brand-wordmark > span { font-size: 9px; }
    .punch-home .punch-socials, .punch-footer-socials { grid-template-columns: repeat(4, minmax(44px, 1fr)); max-width: 260px; gap: 6px; }
    .punch-home .punch-hero h1 { font-size: 28px; }
    .punch-home .crew-panel { grid-template-columns: 80px minmax(0, 1fr); padding-inline: 16px; }
    .punch-home .crew-identity { padding-left: 12px; }
    .punch-home .crew-bio h3 { font-size: 20px; }
    .punch-home .punch-news-item-link { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
}