/* Tenpo mobile final layer.
   Loaded after the main stylesheet and Vite CSS so phone layout stays predictable. */
@media (max-width: 900px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        background: #ffffff !important;
        color: #181818 !important;
        font-size: 16px !important;
        line-height: 1.65 !important;
        padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    }

    .container,
    .site-header .container,
    .tempo-footer__inner {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: none !important;
        width: min(100% - 24px, 720px) !important;
    }

    .site-header {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(17, 17, 17, .12) !important;
        box-shadow: 0 8px 24px rgba(17, 17, 17, .06) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 9000 !important;
    }

    .masthead {
        align-items: center !important;
        display: flex !important;
        gap: 12px !important;
        justify-content: space-between !important;
        min-height: 76px !important;
        padding: 10px 0 !important;
    }

    .brand,
    .brand-logo {
        align-items: center !important;
        display: inline-flex !important;
        min-width: 0 !important;
    }

    .brand-image {
        height: 42px !important;
        max-width: min(190px, 48vw) !important;
        object-fit: contain !important;
        object-position: left center !important;
        width: auto !important;
    }

    .masthead-product-nav,
    .subscribe-button,
    .theme-toggle,
    .profile-button,
    .search-box {
        display: none !important;
    }

    .masthead__links {
        align-items: center !important;
        display: flex !important;
        flex: 0 0 auto !important;
        gap: 0 !important;
    }
    .login-button {
        display: none !important;
    }

    .header-nav-row {
        background: #ffffff !important;
        border-top: 1px solid rgba(17, 17, 17, .08) !important;
        border-bottom: 1px solid rgba(17, 17, 17, .12) !important;
    }

    .header-content {
        align-items: center !important;
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        min-height: 52px !important;
        padding: 0 !important;
    }

    .desktop-nav {
        display: flex !important;
        gap: 18px !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        padding: 0 0 3px !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
    }

    .desktop-nav::-webkit-scrollbar {
        display: none !important;
    }

    .desktop-nav a,
    .site-header .desktop-nav a {
        align-items: center !important;
        border: 0 !important;
        border-bottom: 3px solid transparent !important;
        color: #5f5f5f !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        height: 49px !important;
        letter-spacing: 0 !important;
        padding: 0 !important;
        text-transform: none !important;
    }

    .desktop-nav a.active,
    .site-header .desktop-nav a.active {
        border-bottom-color: #d6a000 !important;
        color: #c28f00 !important;
        font-weight: 700 !important;
    }

    .nav-pill {
        background: #d6a000 !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        font-size: 10px !important;
        margin-left: 6px !important;
        padding: 4px 10px !important;
    }

    .header-actions {
        align-items: center !important;
        display: flex !important;
        flex: 0 0 auto !important;
        gap: 8px !important;
    }

    .mobile-search-toggle,
    .menu-btn {
        align-items: center !important;
        background: #fff8dd !important;
        border: 1px solid rgba(214, 160, 0, .42) !important;
        color: #8b6600 !important;
        display: inline-flex !important;
        font-size: 20px !important;
        height: 42px !important;
        justify-content: center !important;
        padding: 0 !important;
        width: 42px !important;
    }

    .tempo-top-ad,
    .ad-slot--hero,
    .ad-placeholder.ad-slot--hero {
        margin-top: 0 !important;
    }

    .tempo-top-ad {
        padding: 14px 12px 16px !important;
    }

    .tempo-top-ad p {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }

    .tempo-top-ad .ad-slot,
    .tempo-top-ad .ad-placeholder,
    .ad-slot--hero,
    .ad-placeholder.ad-slot--hero,
    .ad-slot--footer,
    .ad-placeholder.ad-slot--footer {
        border-radius: 0 !important;
        height: 82px !important;
        min-height: 82px !important;
    }

    .issue-cover,
    .magazine-shell,
    .topic-ledger,
    .article-layout {
        margin-left: auto !important;
        margin-right: auto !important;
        width: min(100% - 24px, 720px) !important;
    }

    .issue-cover {
        margin-top: 18px !important;
    }

    .issue-cover__grid {
        border: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    .cover-visual {
        background: #f4f4f4 !important;
        height: auto !important;
        order: 1 !important;
        padding: 0 !important;
    }

    .cover-visual img {
        aspect-ratio: auto !important;
        border-radius: 0 !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center !important;
        width: 100% !important;
    }

    .cover-story {
        border: 0 !important;
        order: 2 !important;
        padding: 18px 0 10px !important;
    }

    .cover-story h1 {
        font-size: 28px !important;
        letter-spacing: 0 !important;
        line-height: 1.15 !important;
        margin: 8px 0 0 !important;
        text-align: center !important;
    }

    .cover-story p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .cover-index {
        border: 0 !important;
        order: 3 !important;
        padding: 18px 0 0 !important;
    }

    .cover-index::before {
        display: none !important;
    }

    .cover-index h2,
    .section-heading h2,
    .aside-panel h3 {
        font-size: 22px !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
    }

    .topic-ledger {
        display: none !important;
    }

    .magazine-shell,
    .article-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        padding-bottom: 28px !important;
    }

    .magazine-main,
    .magazine-aside,
    .article-content,
    .article-sidebar {
        border: 0 !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .section-heading {
        align-items: baseline !important;
        border-bottom: 1px solid rgba(17, 17, 17, .12) !important;
        display: flex !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
    }

    .section-heading span {
        color: #c28f00 !important;
        flex: 0 0 auto !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .latest-ledger .ledger-item,
    .ledger-item {
        align-items: start !important;
        border-bottom: 1px solid rgba(17, 17, 17, .1) !important;
        display: grid !important;
        gap: 12px !important;
        grid-template-columns: 98px minmax(0, 1fr) !important;
        padding: 14px 0 !important;
    }

    .ledger-item__number {
        display: none !important;
    }

    .ledger-item__image,
    .ledger-item__image img {
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        max-height: 78px !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    .ledger-item__body span {
        display: inline-flex !important;
        font-size: 11px !important;
        margin-bottom: 6px !important;
        padding: 4px 8px !important;
    }

    .ledger-item h3 {
        font-size: 17px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    .ledger-item p {
        display: none !important;
    }

    .news-meta {
        color: #777777 !important;
        font-size: 11px !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .perspective-grid {
        display: grid !important;
        gap: 12px !important;
        grid-template-columns: 1fr !important;
    }

    .perspective-card,
    .aside-panel,
    .newsletter-card {
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 18px !important;
    }

    .article-hero {
        padding: 32px 12px 20px !important;
    }

    .article-hero h1 {
        font-size: 34px !important;
        letter-spacing: 0 !important;
        line-height: 1.13 !important;
        text-align: center !important;
    }

    .article-meta {
        align-items: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        font-size: 13px !important;
        gap: 10px 14px !important;
        justify-content: center !important;
    }

    .article-content > img.article-image,
    .article-content .article-image {
        border-radius: 0 !important;
        height: auto !important;
        margin: 0 0 18px !important;
        max-height: none !important;
        max-width: none !important;
        object-fit: contain !important;
        width: 100% !important;
    }

    .article-body {
        font-size: 17px !important;
        line-height: 1.78 !important;
    }

    .article-body p {
        margin-bottom: 18px !important;
    }

    #mobileNav.mobile-nav.tempo-drawer {
        background: rgba(12, 12, 12, .5) !important;
        border: 0 !important;
        display: block !important;
        height: 100dvh !important;
        inset: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: fixed !important;
        transition: opacity .22s ease, visibility .22s ease !important;
        visibility: hidden !important;
        width: 100vw !important;
        z-index: 12000 !important;
    }

    #mobileNav.mobile-nav.tempo-drawer.is-open {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    #mobileNav .tempo-drawer__panel {
        background: #fffdf8 !important;
        box-shadow: 18px 0 38px rgba(17, 17, 17, .24) !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        max-width: min(390px, 88vw) !important;
        overflow-y: auto !important;
        padding: 0 18px 30px !important;
        transform: translateX(-105%) !important;
        transition: transform .24s ease !important;
        width: min(390px, 88vw) !important;
    }

    #mobileNav.is-open .tempo-drawer__panel {
        transform: translateX(0) !important;
    }

    #mobileNav .tempo-drawer__head {
        align-items: center !important;
        display: flex !important;
        justify-content: space-between !important;
        min-height: 58px !important;
    }

    #mobileNav .tempo-drawer__search {
        border-radius: 999px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 50px !important;
        height: 48px !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    #mobileNav .tempo-drawer__home,
    #mobileNav .tempo-drawer__section-title,
    #mobileNav .tempo-drawer__label,
    #mobileNav .tempo-drawer__section a {
        border-bottom: 1px solid rgba(214, 160, 0, .16) !important;
        color: #171717 !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        min-height: 44px !important;
        padding: 0 !important;
    }

    .mobile-search-overlay {
        background: rgba(17, 17, 17, .54) !important;
        inset: 0 !important;
        padding: 20px !important;
        position: fixed !important;
        z-index: 12010 !important;
    }

    .mobile-search-overlay.is-open {
        align-items: center !important;
        display: flex !important;
        justify-content: center !important;
    }

    .mobile-search-panel {
        background: #ffffff !important;
        border: 1px solid rgba(214, 160, 0, .22) !important;
        border-radius: 0 !important;
        box-shadow: 0 24px 60px rgba(17, 17, 17, .25) !important;
        padding: 20px !important;
        width: min(100%, 420px) !important;
    }

    .site-footer.tempo-footer,
    .tempo-footer {
        background: #171717 !important;
        border-top: 4px solid #d6a000 !important;
        color: #ffffff !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 0 0 calc(96px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer.tempo-footer .tempo-footer__inner,
    .tempo-footer__inner {
        display: block !important;
        max-width: none !important;
        padding: 24px 20px 30px !important;
        width: 100% !important;
    }

    .tempo-footer__top,
    .tempo-footer__middle,
    .tempo-footer__trust {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
        grid-template-columns: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .tempo-footer__quote {
        color: rgba(255, 255, 255, .78) !important;
        display: block !important;
        flex: none !important;
        font-size: 15px !important;
        font-style: italic !important;
        line-height: 1.65 !important;
        max-width: none !important;
        min-width: 0 !important;
        text-align: left !important;
        width: 100% !important;
        word-break: normal !important;
    }

    .tempo-footer__quote strong {
        color: #ffffff !important;
        font-weight: 800 !important;
    }

    .tempo-footer__social,
    .tempo-footer__apps,
    .tempo-footer__network,
    .tempo-footer__info {
        display: block !important;
        flex: none !important;
        width: 100% !important;
    }

    .tempo-footer h3 {
        color: #ffffff !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
        margin: 0 0 12px !important;
        text-align: left !important;
    }

    .tempo-footer__icons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .tempo-footer__icons a {
        align-items: center !important;
        background: rgba(255, 255, 255, .06) !important;
        border: 1px solid rgba(255, 255, 255, .14) !important;
        border-radius: 999px !important;
        color: rgba(255, 255, 255, .84) !important;
        display: inline-flex !important;
        flex: 0 0 42px !important;
        font-size: 18px !important;
        height: 42px !important;
        justify-content: center !important;
        width: 42px !important;
    }

    .tempo-footer__apps a {
        align-items: center !important;
        background: #050505 !important;
        border: 1px solid rgba(255, 255, 255, .22) !important;
        border-radius: 8px !important;
        display: grid !important;
        gap: 10px !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        margin: 0 0 10px !important;
        max-width: 270px !important;
        min-height: 52px !important;
        padding: 8px 14px !important;
        width: 100% !important;
    }

    .tempo-footer__apps a i {
        color: #ffffff !important;
        font-size: 24px !important;
    }

    .tempo-footer__apps a span {
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
    }

    .tempo-footer__apps a small {
        color: rgba(255, 255, 255, .72) !important;
        display: block !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .tempo-footer__middle,
    .tempo-footer__trust {
        border-top: 1px solid rgba(255, 255, 255, .12) !important;
        margin-top: 24px !important;
        padding-top: 22px !important;
    }

    .tempo-footer__network p,
    .tempo-footer__info a {
        color: rgba(255, 255, 255, .72) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .tempo-footer__info > div {
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: 1fr !important;
    }

    .tempo-footer__trust > div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }

    .tempo-footer__trust span {
        align-items: center !important;
        background: rgba(214, 160, 0, .12) !important;
        border: 1px solid rgba(214, 160, 0, .28) !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        display: inline-flex !important;
        gap: 8px !important;
        min-height: 38px !important;
        padding: 0 12px !important;
    }

    .mobile-bottom-nav {
        align-items: center !important;
        background: #ffffff !important;
        border-top: 1px solid rgba(214, 160, 0, .24) !important;
        bottom: 0 !important;
        box-shadow: 0 -10px 28px rgba(17, 17, 17, .1) !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        left: 0 !important;
        min-height: calc(66px + env(safe-area-inset-bottom)) !important;
        padding: 6px 4px env(safe-area-inset-bottom) !important;
        position: fixed !important;
        right: 0 !important;
        z-index: 11000 !important;
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        align-items: center !important;
        background: transparent !important;
        border: 0 !important;
        color: #6a6a6a !important;
        display: flex !important;
        flex-direction: column !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        gap: 3px !important;
        justify-content: center !important;
        min-width: 0 !important;
        padding: 4px 0 !important;
        text-align: center !important;
    }

    .mobile-bottom-nav i {
        color: #d6a000 !important;
        font-size: 20px !important;
    }
}

@media (max-width: 420px) {
    .login-button {
        display: none !important;
    }

    .brand-image {
        max-width: 176px !important;
    }

    .latest-ledger .ledger-item,
    .ledger-item {
        grid-template-columns: 92px minmax(0, 1fr) !important;
    }

    .article-hero h1 {
        font-size: 30px !important;
    }
}