/* Phone layout. Desktop rules in site.css stay in place above 767px. */
:root {
    --bar: 5rem;
    --dock: 0px;
}

.mobile-dock { display: none; }

.player-mini {
    height: 3px;
    margin-top: 0.45rem;
    overflow: hidden;
    background: #353531;
}

.player-mini [data-player-progress] {
    height: 100%;
    background: #e3c288;
}

@media (hover: none) {
    .piece:hover,
    .dispatch:hover,
    .film:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (max-width: 767px) {
    :root {
        --bar: 3.25rem !important;
        --dock: calc(3.55rem + env(safe-area-inset-bottom)) !important;
    }

    html {
        scroll-padding-top: calc(var(--bar) + env(safe-area-inset-top) + 0.5rem) !important;
        scroll-padding-bottom: calc(var(--dock) + 4.25rem) !important;
    }

    body:not(.desk):not(.miss) {
        padding-bottom: calc(var(--dock) + 1rem) !important;
    }

    body.has-player:not(.desk):not(.miss) {
        padding-bottom: calc(var(--dock) + 4.35rem) !important;
    }

    h1, h2, h3, h4 { overflow-wrap: break-word !important; }

    /* Header sits on the page, not over it */
    .site-header,
    .is-home .site-header,
    .is-home .site-header.is-solid,
    body.nav-open .site-header {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 60 !important;
        height: auto !important;
        padding-top: env(safe-area-inset-top) !important;
        background: #0e0e0c !important;
        border-bottom: 1px solid rgba(227, 194, 136, 0.16) !important;
        backdrop-filter: none !important;
    }

    .site-header-bar {
        height: var(--bar) !important;
        padding: 0 0.9rem !important;
        gap: 0.5rem !important;
    }

    .site-brand {
        font-size: 0.92rem !important;
        letter-spacing: 0.14em !important;
    }

    .site-menu { display: none !important; }

    main.pt-20 { padding-top: 0 !important; }

    .-mt-20,
    .home-hero,
    .masthead,
    .auth-stage {
        margin-top: 0 !important;
    }

    /* Bottom tabs */
    .mobile-dock {
        position: fixed !important;
        z-index: 56 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        height: var(--dock) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        background: #0e0e0c !important;
        border-top: 1px solid rgba(227, 194, 136, 0.16) !important;
        backdrop-filter: none !important;
    }

    .mobile-dock a,
    .mobile-dock button {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.15rem !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #a28c84 !important;
        font-family: Oswald, sans-serif !important;
        font-size: 9px !important;
        line-height: 1 !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
        text-transform: uppercase !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-dock .material-symbols-outlined { font-size: 22px !important; }

    .mobile-dock a[aria-current="page"],
    .mobile-dock button[aria-expanded="true"] { color: #e3c288 !important; }

    .mobile-dock a[aria-current="page"] .material-symbols-outlined {
        font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24 !important;
    }

    .mobile-dock a[aria-current="page"]::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        width: 1.15rem !important;
        height: 2px !important;
        background: #e3c288 !important;
    }

    /* Menu */
    body.nav-open .site-header {
        position: fixed !important;
        top: 0 !important;
    }

    .nav-drawer {
        z-index: 54 !important;
        top: calc(var(--bar) + env(safe-area-inset-top)) !important;
        bottom: var(--dock) !important;
        gap: 1.25rem !important;
        padding: 1.15rem 1.25rem 1.25rem !important;
        background: rgba(14, 14, 12, 0.96) !important;
    }

    .drawer-links a {
        min-height: 2.35rem !important;
        border: 0 !important;
        font-size: 1.15rem !important;
    }

    body.nav-open .site-player { visibility: hidden !important; }

    /* Player */
    .site-player {
        z-index: 49 !important;
        right: 0 !important;
        bottom: var(--dock) !important;
        left: 0 !important;
        padding: 0.55rem 0.85rem 0.6rem !important;
    }

    .player-links,
    .player-album { display: none !important; }

    .player-play {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    /* Type and rhythm */
    .py-space-xl {
        padding-top: 1.85rem !important;
        padding-bottom: 1.85rem !important;
    }

    .mb-space-xl { margin-bottom: 1.1rem !important; }

    .text-subhead {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    main h1[class*="text-["] {
        font-size: 2.1rem !important;
        line-height: 1.05 !important;
    }

    main h2[class*="text-"] {
        font-size: 1.65rem !important;
        line-height: 1.05 !important;
    }

    .route-board,
    .goods-board,
    .shelf,
    .itin,
    .rack {
        padding-top: 1.7rem !important;
        padding-bottom: 1.6rem !important;
    }

    .route-board-head h2,
    .goods-head h2,
    .shelf-head h1,
    .itin-head h1,
    .rack-side h1,
    .masthead-title {
        font-size: 1.85rem !important;
    }

    /* Home hero */
    .home-hero {
        min-height: calc(100svh - var(--bar) - var(--dock)) !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }

    .hero-copy {
        padding-top: 1.5rem !important;
        padding-bottom: 1.15rem !important;
    }

    body.has-player .hero-copy { padding-bottom: 4.6rem !important; }

    .home-hero h1 {
        font-size: 2.7rem !important;
        line-height: 0.92 !important;
    }

    .hero-copy > p { font-size: 0.98rem !important; line-height: 1.5 !important; }

    .hero-copy > p[class*="italic"] {
        margin-top: 0.65rem !important;
        font-size: 1.15rem !important;
    }

    .hero-actions {
        flex-direction: row !important;
        margin-top: 1.1rem !important;
    }

    .hero-actions a {
        flex: none !important;
        justify-content: center !important;
        min-height: 2.75rem !important;
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .stream-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem !important;
        margin-top: 0.85rem !important;
        overflow: visible !important;
    }

    .stream-row > span { display: none !important; }

    .stream-row a {
        justify-content: center !important;
        width: 100% !important;
        min-height: 2rem !important;
        padding: 0.3rem 0.4rem !important;
        font-size: 11px !important;
        letter-spacing: 0.06em !important;
    }

    /* Music */
    .vinyl-disc,
    .preview-card,
    .preview-wave { display: none !important; }

    .home-sleeve {
        width: min(100%, 16.5rem) !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        margin: 0.15rem auto 0.35rem !important;
    }

    .home-sleeve .sleeve {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
    }

    .album-facts {
        flex-wrap: wrap !important;
        gap: 0.2rem 0.55rem !important;
    }

    .track-row {
        gap: 0.6rem !important;
        padding: 0.7rem 0.75rem !important;
    }

    .track-row h4 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    .shelf-grid { gap: 1rem 0.7rem !important; }

    .sleeve-title { font-size: 1.02rem !important; }

    /* Films, news, photos */
    .feature-film h3 {
        font-size: 1.28rem !important;
        line-height: 1.15 !important;
    }

    .feature-film > .absolute {
        padding: 0.85rem 0.95rem !important;
    }

    .film p,
    .dispatch p {
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .dispatch p { -webkit-line-clamp: 3 !important; }

    .gallery-card img { aspect-ratio: 4 / 5 !important; }

    .gallery-card figcaption { padding: 0.85rem !important; }

    /* Dates */
    .route-board-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
    }

    .route-board .route-stop,
    .route-stop {
        grid-template-columns: 2.9rem minmax(0, 1fr) !important;
        gap: 0.15rem 0.75rem !important;
        align-items: start !important;
        padding: 0.8rem 0 !important;
    }

    .route-day { font-size: 1.5rem !important; }

    .route-city { font-size: 1.2rem !important; }

    .route-cta {
        grid-column: 1 / -1 !important;
        margin-top: 0.3rem !important;
    }

    .route-cta > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 2.4rem !important;
    }

    .itin-head > p:not(.itin-count) { display: none !important; }

    .itin-head h1 {
        font-size: 1.7rem !important;
        letter-spacing: -0.03em !important;
        text-transform: none !important;
    }

    .itin-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
        margin-top: 1rem !important;
        overflow: visible !important;
    }

    .itin-filter {
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        overflow-x: auto !important;
        padding-bottom: 0.1rem !important;
        scrollbar-width: none !important;
    }

    .itin-filter > span { display: none !important; }

    .itin-filter a {
        flex: 0 0 auto !important;
        padding: 0.45rem 0.7rem !important;
        border: 1px solid rgba(227, 194, 136, 0.28) !important;
        font-size: 11px !important;
        letter-spacing: 0.1em !important;
    }

    .itin-filter a.is-on {
        background: #e3c288 !important;
        border-color: #e3c288 !important;
        color: #412d02 !important;
    }

    .itin-month {
        margin-top: 1.35rem !important;
        padding-bottom: 0.15rem !important;
        border-bottom: 0 !important;
    }

    .itin-month h2 {
        font-family: Oswald, sans-serif !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
        color: #a28c84 !important;
    }

    .itin-stop {
        grid-template-columns: 3.25rem minmax(0, 1fr) auto !important;
        grid-template-areas:
            "date place act"
            "date region act" !important;
        align-items: center !important;
        column-gap: 0.8rem !important;
        row-gap: 0.15rem !important;
        padding: 0.95rem 0 !important;
    }

    .itin-meta {
        display: flex !important;
        grid-area: region !important;
        align-items: baseline !important;
        gap: 0.45rem !important;
        min-width: 0 !important;
    }

    .itin-status { justify-self: auto !important; }

    .itin-place h3 { font-size: 1.15rem !important; }

    .itin-place p {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .itin-place em { display: none !important; }

    .itin-act {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.55rem !important;
        margin-top: 0 !important;
    }

    .itin-act a:not(.is-vip) {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 2rem !important;
        padding: 0 0.7rem !important;
        background: #d07b53 !important;
        color: #4d1900 !important;
    }

    .itin-act a.is-vip { color: #e3c288 !important; }

    /* Biography and fan club */
    .bio-note {
        position: static !important;
        max-width: none !important;
        margin-top: 0.85rem !important;
        box-shadow: none !important;
    }

    .bio-copy { padding-top: 1.15rem !important; }

    .club-hero {
        min-height: calc(100svh - var(--dock) - 3.25rem) !important;
    }

    .club-hero > .relative {
        padding-top: 5rem !important;
        padding-bottom: 1.35rem !important;
    }

    .club-hero h1 {
        font-size: 2.55rem !important;
        line-height: 0.95 !important;
    }

    .club-hero + section article {
        padding-top: 1.6rem !important;
        padding-bottom: 1.6rem !important;
    }

    .meet-sheet {
        display: flex !important;
        flex-direction: column !important;
        padding-top: 1.5rem !important;
        padding-bottom: 2.25rem !important;
    }

    .meet-back {
        order: 0 !important;
        color: #a28c84 !important;
        font-size: 11px !important;
    }

    .meet-title {
        order: 1 !important;
        margin-top: 1.1rem !important;
        font-size: 1.65rem !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.03em !important;
        text-transform: none !important;
    }

    .meet-code {
        order: 2 !important;
        margin: 1.25rem 0 0 !important;
        padding: 1.35rem 0.75rem !important;
        background: #1c1c19 !important;
        border: 0 !important;
        font-size: 1.7rem !important;
        letter-spacing: 0.18em !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    .meet-note {
        order: 3 !important;
        margin-top: 1rem !important;
        color: #a28c84 !important;
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
    }

    .meet-token {
        color: #e5e2dd !important;
        overflow-wrap: anywhere !important;
    }

    .meet-resend { order: 4 !important; margin-top: 0.85rem !important; }

    .meet-sheet .meet-resend button {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 2.5rem !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        letter-spacing: 0.06em !important;
        text-decoration: underline !important;
        text-underline-offset: 0.28rem !important;
    }

    .meet-who {
        order: 5 !important;
        margin-top: 0.35rem !important;
        color: #8a756c !important;
    }

    .meet-sheet .meet-submit {
        width: 100% !important;
        min-height: 2.85rem !important;
    }

    .masthead { min-height: 0 !important; }

    .masthead .relative {
        padding-top: 5.1rem !important;
        padding-bottom: 1.45rem !important;
    }

    .masthead-dek {
        margin-top: 0.6rem !important;
        font-size: 1rem !important;
    }

    .paper h1 {
        font-size: 1.9rem !important;
        line-height: 1.15 !important;
    }

    /* Forms and account screens */
    main :is(input, textarea, select),
    .site-footer-row input {
        font-size: 16px !important;
    }

    main :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"], input[type="date"], input[type="number"], textarea, select) {
        min-height: 48px !important;
    }

    main button[type="submit"] { min-height: 48px !important; }

    .ticket-card,
    .auth-card { padding: 1.15rem !important; }

    .auth-visual { min-height: 16vh !important; }

    .auth-stage > .flex {
        padding-top: 0.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    /* Footer */
    .site-footer {
        padding: 1.75rem 0 1.35rem !important;
        border-top-color: transparent !important;
        scroll-margin-top: calc(var(--bar) + env(safe-area-inset-top)) !important;
    }

    .site-footer-base nav {
        position: static !important;
    }

    .site-footer-inner { padding: 0 1.25rem !important; }

    .site-footer .kicker,
    .site-footer-dek { display: none !important; }

    .site-footer-name {
        font-size: 1.2rem !important;
        letter-spacing: 0.18em !important;
    }

    .site-footer-top {
        gap: 1.15rem !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    .site-footer-mail label { margin-bottom: 0.65rem !important; }

    .site-footer-row input {
        padding: 0.85rem 0 !important;
        background: transparent !important;
    }

    .site-footer-row button {
        min-height: 44px !important;
        padding: 0 1.05rem !important;
    }

    .site-footer-note { margin-top: 0.55rem !important; }

    .site-footer-grid {
        gap: 1.45rem !important;
        margin-top: 1.35rem !important;
        padding: 1.25rem 0 1rem !important;
        border-top: 1px solid rgba(227, 194, 136, 0.16) !important;
    }

    .site-footer h2 { margin-bottom: 0.75rem !important; }

    .site-footer-visit {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.7rem 1.25rem !important;
    }

    .site-footer-visit a { font-size: 1rem !important; }

    .site-footer-listen .site-footer-links {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.45rem 0.9rem !important;
    }

    .site-footer-listen .site-footer-links a {
        font-family: Oswald, sans-serif !important;
        font-size: 11px !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: #cbb8ae !important;
    }

    .site-footer-studio a {
        display: block !important;
        overflow-wrap: anywhere !important;
    }

    .site-footer-base {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.7rem !important;
        padding-top: 1rem !important;
    }

    .site-footer-base nav { gap: 0.55rem 1rem !important; }
}