/* =====================================================
   519 MAGAZINE — MOBILE APP CSS  v1.1
   Applies to: < 1024px (portrait phones & tablets)
   ===================================================== */

/* --- Always hide mobile-only elements on desktop --- */
#mobile-header,
#mobile-nav-drawer,
#mobile-nav-overlay,
#mobile-bottom-nav,
.f519-mob-feed-ad {
    display: none;
}

/* =====================================================
   MOBILE OVERRIDES
   ===================================================== */
@media (max-width: 1023px) {

    /* Feed ads injected between category blocks — always in HTML, CSS reveals on mobile */
    .f519-mob-feed-ad {
        display: block;
        margin: 4px 0 8px;
    }

    /* --- Custom properties --- */
    :root {
        --mob-bg:        #000000;
        --mob-card:      #111111;
        --mob-card-alt:  #181818;
        --mob-accent:    #00A3FF;
        --mob-text:      #e0e0e0;
        --mob-muted:     #666666;
        --mob-border:    rgba(255, 255, 255, 0.1);
        --mob-hdr-h:     58px;
        --mob-bot-h:     64px;
        --mob-logo-hang: 22px;  /* how far the logo droops below the header */
    }

    /* --- Base --- */
    /* --- Base --- */
    body {
        background: var(--mob-bg) !important;
        /* Content starts right at the header bottom so the hanging logo
           overlaps the hero image — that's the intended overhang effect */
        padding-top: var(--mob-hdr-h) !important;
        padding-bottom: calc(var(--mob-bot-h) + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden;
    }

    /* --- Hide desktop-only elements --- */
    .site-header,
    .ad-container-top,
    .hero-sprockets,
    .hero-frame-line,
    .hero-film-scratches,
    .hero-grit,
    .hero-vignette,
    .hero-grain-video,
    .hero-excerpt-columns,
    .cover-dots {
        display: none !important;
    }

    /* --- Reveal mobile elements --- */
    #mobile-header      { display: flex; }
    #mobile-nav-overlay { display: block; }
    #mobile-nav-drawer  { display: flex; }
    #mobile-bottom-nav  { display: flex; }

    /* =================================================
       MOBILE HEADER
       ================================================= */
    #mobile-header {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: var(--mob-hdr-h);
        z-index: 1001;
        align-items: center;
        justify-content: center;
        /* Always black — even in light mode, per design */
        background: #000 !important;
        border-bottom: 2px solid var(--mob-accent);
        /* Must be visible so the hanging logo shows */
        overflow: visible;
    }

    /* Frosted glass on scroll (stays black base) */
    #mobile-header.scrolled {
        background: rgba(0, 0, 0, 0.94) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    /* Logo: position:fixed so it's always relative to the viewport —
       prevents iOS Safari recalculating the containing block when wide
       content (e.g. square CD cover images) causes body reflow.
       top = header height - logo height + hang = 58-64+22 = 16px */
    .mobile-logo {
        position: fixed;
        top: calc(var(--mob-hdr-h) - 64px + var(--mob-logo-hang));
        left: 50vw;
        transform: translateX(-50%);
        line-height: 0;
        z-index: 1002;
    }

    .mobile-logo a,
    .mobile-logo .custom-logo-link {
        display: block;
        line-height: 0;
    }

    /* Logo — matches desktop: 4px white border + accent-blue pulsing glow */
    .mobile-logo img,
    .mobile-logo .custom-logo {
        height: 64px !important;
        width: 64px !important;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        background-color: #000;
        /* Same solid white ring as the desktop logo */
        border: 3px solid #fff !important;
        /* Base glow — mirrors f519-toggle-pulse at rest */
        box-shadow: 0 0 7px 2px rgba(0, 163, 255, 0.5);
        /* Pulsing blue glow identical to the desktop light/dark toggle */
        animation: mob-logo-pulse 2.8s ease-in-out infinite;
    }

    @keyframes mob-logo-pulse {
        0%,  100% { box-shadow: 0 0 5px 1px rgba(0, 163, 255, 0.4); }
        50%        { box-shadow: 0 0 14px 5px rgba(0, 163, 255, 0.8); }
    }

    #mobile-hamburger {
        position: absolute;
        right: 10px;
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
    }

    #mobile-hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.28s ease, opacity 0.28s ease;
        transform-origin: center;
    }

    #mobile-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #mobile-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    #mobile-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* =================================================
       NAV OVERLAY
       ================================================= */
    /* Overlay not needed — drawer is full-screen */
    #mobile-nav-overlay,
    #mobile-nav-overlay.open {
        display: none !important;
    }

    /* =================================================
       NAV DRAWER
       ================================================= */
    #mobile-nav-drawer {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: #3277a1;
        border: none;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        padding: 0 24px 32px;
        opacity: 0;
        transform: translateY(14px);
        pointer-events: none;
        transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #mobile-nav-drawer.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    #mobile-nav-close {
        position: absolute;
        top: 14px; right: 14px;
        background: none;
        border: none;
        color: rgba(255,255,255,0.7);
        font-size: 32px;
        line-height: 1;
        cursor: pointer;
        padding: 8px;
        -webkit-tap-highlight-color: transparent;
    }
    #mobile-nav-close:active { color: #fff; }

    /* Logo centred at top */
    .mob-drawer-logo {
        display: flex;
        justify-content: center;
        padding: 56px 0 28px;
        flex-shrink: 0;
    }
    .mob-drawer-logo img,
    .mob-drawer-logo .custom-logo {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,0.9);
        box-shadow: 0 0 14px rgba(255,255,255,0.5), 0 0 36px rgba(255,255,255,0.2);
        object-fit: cover;
        display: block;
    }

    /* Search box — white-on-blue */
    .mob-drawer-search {
        display: flex;
        align-items: center;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 10px;
        padding: 2px 4px 2px 14px;
        margin-bottom: 28px;
        flex-shrink: 0;
    }
    .mob-drawer-search input[type="search"] {
        flex: 1;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 0.95rem;
        padding: 10px 0;
        outline: none;
        min-width: 0;
    }
    .mob-drawer-search input[type="search"]::placeholder { color: rgba(255,255,255,0.55); }
    .mob-drawer-search button {
        background: transparent;
        border: none;
        color: rgba(255,255,255,0.7);
        padding: 10px 10px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
    .mob-drawer-search button:active { color: #fff; }

    /* Section label */
    .mob-drawer-label {
        font-size: 0.58rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: rgba(255,255,255,0.5);
        margin: 0 0 10px 2px;
        flex-shrink: 0;
    }

    /* Social icons row pinned to bottom */
    .mob-drawer-social {
        margin-top: auto;
        padding-top: 28px;
        display: flex;
        justify-content: center;
        gap: 28px;
        flex-shrink: 0;
    }
    .mob-drawer-social a {
        color: rgba(255,255,255,0.65);
        display: inline-flex;
        align-items: center;
        padding: 8px;
        -webkit-tap-highlight-color: transparent;
    }
    .mob-drawer-social a:active { color: #fff; }

    #mobile-nav-drawer #primary-menu,
    #mobile-nav-drawer .menu {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #mobile-nav-drawer .menu-item { border-bottom: 1px solid rgba(255,255,255,0.15); }
    #mobile-nav-drawer .menu-item:first-child { border-top: 1px solid rgba(255,255,255,0.15); }

    #mobile-nav-drawer .menu-item a {
        display: block;
        padding: 16px 4px;
        color: rgba(255,255,255,0.9);
        text-decoration: none;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        transition: color 0.15s ease, padding-left 0.15s ease;
    }

    #mobile-nav-drawer .menu-item a:active,
    #mobile-nav-drawer .menu-item.current-menu-item a,
    #mobile-nav-drawer .menu-item.current_page_item a {
        color: #fff;
        padding-left: 10px;
    }

    /* =================================================
       LAYOUT
       ================================================= */
    .content-wrapper {
        display: block !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        grid-template-columns: unset !important;
    }

    #primary {
        /* 14px sides give section title text breathing room from screen edge */
        padding: 0 14px 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Non-post screens: reserve vertical space below the hanging logo/header stack.
       Padding is more reliable than header margins (no margin-collapse edge cases). */
    body.archive #primary,
    body.category #primary,
    body.tag #primary,
    body.page #primary {
        padding-top: calc(var(--mob-logo-hang) + 20px) !important;
    }

    /* =================================================
       HERO / COVER STORY — CRITICAL FIXES
       ================================================= */

    /* Fix: the wipe animation starts with a zero-area clip-path.
       Clear both the animation and the clip on mobile. */
    .hero-animate-wipe {
        animation: none !important;
        clip-path: none !important;
    }

    /* Kill the desktop parallax (inline style set by JS) */
    #flyaway-hero {
        transform: none !important;
        opacity: 1 !important;
        will-change: unset !important;
    }

    /* Replace zoom-wipe with a plain cross-fade — animationend still fires so JS stays in sync */
    @keyframes mob-fade-in  { from { opacity: 0; transform: none; } to { opacity: 1; transform: none; } }
    @keyframes mob-fade-out { from { opacity: 1; } to { opacity: 0; } }
    .cover-hero-slide.wipe-in  { animation: mob-fade-in  0.35s ease forwards !important; }
    .cover-hero-slide.wipe-out { animation: mob-fade-out 0.35s ease forwards !important; }

    .cover-hero-slider {
        /* Small gap between the blue header bar and the hero image — matches desktop rhythm */
        margin: 10px -14px 0;
        background: transparent;
    }

    .hero-article {
        display: block;
        background: var(--mob-card);
        overflow: hidden;
        border: 1px solid rgba(0, 163, 255, 0.15);
    }

    /* Fixed-ratio box so every cover image is the same height — no layout shift on rotation.
       object-fit:cover zooms proportionally if the image ratio doesn't match. */
    .hero-visual-wrapper {
        position: relative !important;
        aspect-ratio: 3 / 2 !important;
        height: unset !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        background: transparent !important;
        display: block !important;
    }

    /* Direct anchor wrapper (front-page cover story structure) */
    .hero-visual-wrapper > a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Neutralise wp-block-image alignment quirks inside the hero viewport */
    .hero-visual-wrapper figure,
    .hero-visual-wrapper .wp-block-image,
    .hero-visual-wrapper figure.alignleft,
    .hero-visual-wrapper figure.alignright,
    .hero-visual-wrapper figure.aligncenter {
        float: none !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        display: block !important;
    }

    .hero-visual-wrapper figure a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Fill the fixed-ratio container — zoom to cover, crop edges if needed */
    .hero-visual-wrapper .hero-main-img,
    .hero-visual-wrapper img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center top !important;
        aspect-ratio: unset !important;
        display: block !important;
        animation: none !important;
    }

    /* Vignette: keep it, style it like the mockup */
    .hero-vignette {
        background: linear-gradient(to bottom, transparent 25%, rgba(0,0,0,0.85) 100%) !important;
    }

    .hero-content {
        padding: 14px 14px 18px !important;
        margin: 0 !important;
        background: var(--mob-card) !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .hero-label {
        display: inline-block !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        color: #000 !important;
        background: var(--mob-accent) !important;
        border: none !important;
        border-bottom: none !important;
        padding: 3px 8px !important;
        border-radius: 3px !important;
        margin-bottom: 8px !important;
    }

    .hero-title {
        font-size: clamp(1.1rem, 5.5vw, 1.6rem) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }

    .hero-title a { color: var(--mob-text) !important; text-decoration: none; }

    /* =================================================
       SINGLE ARTICLE HERO (infinite scroll pages)
       ================================================= */

    /* Break out of #primary’s 14px gutters — width:auto was collapsing full-bleed after some loads */
    .single-article > .hero-visual-wrapper {
        box-sizing: border-box !important;
        width: calc(100% + 28px) !important;
        max-width: 100vw !important;
        margin: 10px -14px 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .single-article > .hero-visual-wrapper img,
    .single-article > .hero-visual-wrapper .hero-main-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* CD reviews: square hero matches the album cover format */
    .single-article.category-cd-reviews > .hero-visual-wrapper {
        aspect-ratio: 1 / 1 !important;
    }

    /* Generic override for the inline style="margin-bottom:30px" on the wrapper */
    .hero-visual-wrapper[style*="margin-bottom"] {
        margin-bottom: 0 !important;
    }

    /* =================================================
       ARCHIVE / CATEGORY PAGE HEADER
       ================================================= */
    .page-header {
        margin: calc(var(--mob-logo-hang) + 30px) 0 16px !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .page-title {
        font-size: clamp(1rem, 5vw, 1.4rem) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        color: var(--mob-text) !important;
        margin: 0 !important;
    }

    /* Unified non-post mobile title treatment:
       pages + category/tag/archive should all look the same. */
    body.page .entry-header {
        text-align: right !important;
        margin: 0 0 8px !important;
    }

    body.page .entry-header > .single-title,
    body.page .entry-header > .entry-title,
    body.page .entry-header h1,
    body.page .entry-header > .about-us-title,
    body.archive .page-header .page-title,
    body.category .page-header .page-title,
    body.tag .page-header .page-title {
        text-align: right !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        font-size: clamp(1rem, 5vw, 1.4rem) !important;
        font-weight: 700 !important;
        margin: 0 !important;
        color: var(--mob-text) !important;
        display: inline-block !important;
        border-bottom: 3px solid var(--mob-accent) !important;
        padding-bottom: 4px !important;
        line-height: 1.1 !important;
    }

    body.page .entry-header > .entry-title a {
        color: inherit !important;
        text-decoration: none !important;
    }

    .archive-description {
        font-size: 0.8rem;
        color: var(--mob-muted);
        margin-top: 6px;
        padding-left: 10px;
    }

    .single-title {
        font-size: clamp(1.2rem, 5.5vw, 1.8rem) !important;
        line-height: 1.25 !important;
    }

    .f519-event-box {
        margin: 0 0 14px !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
        border: 1px solid var(--mob-border) !important;
        background: var(--mob-card-alt) !important;
    }
    .f519-event-box-title { font-size: 0.9rem !important; margin-bottom: 8px !important; }
    .f519-event-box-meta p { font-size: 0.86rem !important; margin-bottom: 5px !important; }
    .f519-event-box-cta { font-size: 0.68rem !important; }

    /* Category/tag/archive headers also need clearance below hanging logo */
    body.archive .page-header,
    body.category .page-header,
    body.tag .page-header {
        margin-top: 0 !important;
    }

    .entry-content {
        font-size: 0.95rem;
        line-height: 1.7;
        /* color handled per-mode in the light/dark overrides below */
    }

    /* Mobile reading flow: disable desktop float wraps for aligned images. */
    .entry-content img.alignleft,
    .entry-content img.alignright,
    .entry-content .wp-block-image.alignleft,
    .entry-content .wp-block-image.alignright,
    .entry-content figure.alignleft,
    .entry-content figure.alignright {
        float: none !important;
        display: table !important;
        margin: 0 auto 1rem !important;
    }

    [data-theme="dark"] .entry-content {
        color: var(--mob-text);
    }

    /* =================================================
       AD SLOTS
       ================================================= */

    /* fp_hero: pull it closer to both neighbours — half the previous gap */
    .ad-container.ad-fp_hero {
        margin-top: -17px !important;
        margin-bottom: -17px !important;
    }

    /* Full-bleed ads: 100vw + negative left margin = viewport-wide regardless of parent
       overflow or padding constraints. #primary has 14px padding so margin-left:-14px
       aligns the ad's left edge to the viewport left. */
    .ad-container {
        width: 100vw !important;
        margin-left: -14px !important;
        margin-right: 0 !important;
        margin-top: 14px;
        margin-bottom: 14px;
        overflow: hidden;
        border-radius: 0;
        max-width: none !important;
    }

    .ad-container a {
        display: block !important;
        width: 100% !important;
    }

    .ad-container img,
    .ad-container iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
    }

    /* Inline f519-ad-container (in-article ads) — same full-bleed treatment */
    .f519-ad-container {
        width: 100vw !important;
        margin-left: -14px !important;
        margin-right: 0 !important;
        margin-top: 14px;
        margin-bottom: 14px;
        border-radius: 0;
        overflow: hidden;
        border: none;
        max-width: none !important;
    }

    .f519-ad-container img,
    .f519-ad-container a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* =================================================
       SIDEBAR — shown vertically on mobile
       ================================================= */
    #secondary {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 14px 8px !important;
        margin-top: 8px;
        float: none !important;
    }

    .sidebar-ad-item {
        margin: 10px 0;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid var(--mob-border);
    }

    .sidebar-ad-item img,
    .sidebar-ad-item > * {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    .sidebar-widget-zone {
        background: var(--mob-card-alt);
        border: 1px solid var(--mob-border);
        border-radius: 8px;
        padding: 14px;
        margin: 10px 0;
    }

    .sidebar-widget-zone .widget-title {
        font-size: 0.6rem;
        font-family: var(--font-headline);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--heading-base);
        /* Reset browser default h2 margin-top — that gap looks like a stray line */
        margin: 0 0 12px;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(0, 163, 255, 0.2);
    }

    .sidebar-widget-zone .widget {
        font-size: 0.85rem;
        color: var(--mob-text);
    }

    /* Reset browser h2 default top margin inside widget cards —
       that gap reads as a mysterious line above the title */
    .sidebar-widget-zone h2,
    .sidebar-widget-zone h3,
    .sidebar-widget-zone h4 {
        margin-top: 0 !important;
    }

    /* Ads are injected into the feed above; suppress them here to avoid duplication */
    #secondary .sidebar-ad-item {
        display: none !important;
    }

    /* =================================================
       AUTHOR MINI-GRID (More On X / Continue Exploring)
       Same 1-full + 2-below layout as the magazine grid.
       ================================================= */
    .author-mini-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* First post spans full width */
    .author-mini-grid .mini-post:first-child {
        grid-column: 1 / -1;
    }

    /* Cards match .grid-item exactly: same bg, border, shadow */
    .mini-post {
        background: var(--mob-card-alt) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Blue left accent on the full-width first card — matches .grid-item:first-child */
    .author-mini-grid .mini-post:first-child {
        border-left: 3px solid var(--mob-accent) !important;
    }

    .mini-post a {
        display: block !important;
        text-decoration: none !important;
        color: var(--heading-base) !important;
    }

    /* Padding-top hack: creates the aspect-ratio box using the element's OWN width
       (padding % is always relative to width, never height — works in any context). */
    .mini-post-thumb {
        position: relative;
        overflow: hidden;
        background: #111;
        width: 100%;
        display: block;
    }

    /* Full-width first card: 16:9 → 9÷16 = 56.25% */
    .author-mini-grid .mini-post:first-child .mini-post-thumb {
        padding-top: 56.25%;
    }

    /* Half-width cards: 4:3 → 3÷4 = 75% */
    .author-mini-grid .mini-post:not(:first-child) .mini-post-thumb {
        padding-top: 75%;
    }

    /* Image fills the padding-top space via absolute positioning */
    .mini-post-thumb img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block !important;
        margin: 0 !important;
    }

    .mini-post span {
        display: block !important;
        padding: 9px 10px 11px !important;
        font-size: clamp(0.7rem, 3.2vw, 0.88rem) !important;
        font-family: var(--font-headline) !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        color: var(--mob-text) !important;
        flex: 1;
    }

    .author-mini-grid .mini-post:first-child span {
        font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
        padding: 9px 10px 11px !important;
    }

    /* Light mode: mini-post text goes dark */
    html:not([data-theme="dark"]) .mini-post span,
    html:not([data-theme="dark"]) .mini-post a { color: #111 !important; }

    /* Author latest bar — flows like any other category-block section */
    .author-latest-bar {
        margin: 14px 0 14px !important;
        border-top: none !important;
        padding-top: 0 !important;
    }

    /* Latest-by title matches section-title-defined exactly */
    .latest-by-title {
        font-size: 0.6rem !important;
        font-family: var(--font-headline) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2.5px !important;
        color: var(--heading-base) !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
        display: block !important;
    }

    /* =================================================
       CATEGORY SECTIONS
       ================================================= */
    .category-block-defined {
        margin: 14px 0 14px !important;
        background: none !important;
        border: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .category-block-inner { padding: 0 !important; }

    /* Section headers: flush, clean — no desktop box styling */
    .section-header-defined {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 0 6px 0 !important;
        margin: 0 0 8px !important;
    }

    .section-title-defined {
        font-size: 0.6rem !important;
        font-family: var(--font-headline) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2.5px !important;
        color: var(--heading-base) !important;
        margin: 0 !important;
    }

    .section-view-all-defined {
        font-size: 0.58rem;
        font-family: var(--font-headline);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--mob-muted);
        text-decoration: none;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* =================================================
       MAGAZINE GRID — 1 full-width + 2 below
       ================================================= */
    .magazine-grid,
    .magazine-grid.magazine-grid-2-col,
    .magazine-grid.magazine-grid-3-col {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* First card always spans full width */
    .magazine-grid .grid-item:first-child {
        grid-column: 1 / -1;
    }

    /* When only 1 post exists in a section, it stays full-width */
    .magazine-grid .grid-item:first-child:last-child {
        grid-column: 1 / -1;
    }

    /* Orphan card — a non-first card alone on the last row (section returned fewer posts
       than requested). nth-child(even) = positions 2,4,6 which land at col 1 after the
       full-width first card, so they'd sit alone. Span them full-width instead. */
    .magazine-grid:not(.magazine-grid-cd) .grid-item:not(:first-child):last-child:nth-child(even) {
        grid-column: 1 / -1;
    }

    /* Same for CD grid (no full-width first card): orphan at an odd position */
    .magazine-grid-cd .grid-item:last-child:nth-child(odd):not(:first-child) {
        grid-column: 1 / -1;
    }

    /* =================================================
       CD REVIEWS — 2×2 even grid, square images
       ================================================= */
    .magazine-grid-cd .grid-item:first-child {
        grid-column: auto !important;
    }
    .magazine-grid-cd .grid-item:first-child:last-child {
        grid-column: 1 / -1 !important;
    }
    .magazine-grid-cd .grid-item .post-thumbnail {
        aspect-ratio: 1 / 1 !important;
    }

    /* =================================================
       ARTICLE CARDS — boxy, high contrast
       ================================================= */
    .grid-item {
        background: var(--mob-card-alt) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .grid-item .post-thumbnail {
        overflow: hidden;
        background: #111;
        flex-shrink: 0;
    }

    /* Full-width first card: widescreen image */
    .magazine-grid .grid-item:first-child .post-thumbnail {
        aspect-ratio: 16 / 9;
    }

    /* Half-width cards: more square */
    .magazine-grid .grid-item:not(:first-child) .post-thumbnail {
        aspect-ratio: 4 / 3;
    }

    .grid-item .post-thumbnail a {
        display: block;
        height: 100%;
        overflow: hidden;
    }

    .grid-item .post-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.3s ease;
    }

    .grid-item .entry-header {
        padding: 9px 10px 11px !important;
        margin: 0 !important;
        flex: 1;
        display: flex;
        align-items: flex-start;
    }

    .grid-item .entry-title {
        font-size: clamp(0.7rem, 3.3vw, 0.88rem) !important;
        font-family: var(--font-headline) !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        font-weight: 600;
    }

    /* Full-width first card — bigger title */
    .magazine-grid .grid-item:first-child .entry-title {
        font-size: clamp(0.95rem, 4.2vw, 1.2rem) !important;
    }

    .grid-item .entry-title a {
        color: var(--mob-text) !important;
        text-decoration: none;
    }

    /* Accent left-border on full-width card */
    .magazine-grid .grid-item:first-child {
        border-left: 3px solid var(--mob-accent) !important;
    }

    /* =================================================
       LIGHT MODE OVERRIDES
       The mobile header and hero are ALWAYS dark by design.
       Only content/card areas adapt to light mode.
       ================================================= */
    html:not([data-theme="dark"]) body {
        background: #f2f2f7 !important;
    }

    /* Cards go light */
    html:not([data-theme="dark"]) .grid-item,
    html:not([data-theme="dark"]) .mini-post {
        background: #fff !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;
    }
    html:not([data-theme="dark"]) .grid-item .entry-title a { color: #111 !important; }

    /* Hero adapts to light mode */
    html:not([data-theme="dark"]) .hero-article {
        background: #fff !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;
    }
    html:not([data-theme="dark"]) .hero-content {
        background: #fff !important;
    }
    html:not([data-theme="dark"]) .hero-title a  { color: #111 !important; }
    html:not([data-theme="dark"]) .hero-vignette {
        background: linear-gradient(to bottom, transparent 25%, rgba(255,255,255,0.6) 100%) !important;
    }

    /* Header stays black — hamburger always white */
    /* (header already has background:#000 !important above) */

    /* Sidebar widgets go light */
    html:not([data-theme="dark"]) .sidebar-widget-zone {
        background: #fff;
        border-color: rgba(0, 0, 0, 0.08);
    }

    /* Single article pages: readable text on light bg */
    html:not([data-theme="dark"]) .single-title {
        color: #111 !important;
    }
    html:not([data-theme="dark"]) .entry-content {
        color: #1a1a1a !important;
    }
    html:not([data-theme="dark"]) .entry-meta,
    html:not([data-theme="dark"]) .category-label {
        color: #444 !important;
    }

    /* =================================================
       FOOTER
       ================================================= */
    .site-footer {
        padding: 16px 16px 10px !important;
        margin-top: 16px !important;
    }

    .site-footer .footer-right-nav { display: none !important; }

    .site-footer .site-info > div:first-child {
        justify-content: center !important;
        gap: 16px !important;
    }

    /* =================================================
       BOTTOM NAVIGATION BAR
       ================================================= */
    #mobile-bottom-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 1000;
        align-items: stretch;
        justify-content: space-around;
        min-height: var(--mob-bot-h);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(18px) saturate(180%);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: rgba(255, 255, 255, 0.38);
        text-decoration: none;
        background: none;
        border: none;
        padding: 8px 2px;
        cursor: pointer;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.18s ease;
        min-width: 0;
    }

    .mob-nav-item:active { opacity: 0.6; }
    .mob-nav-item.active { color: var(--mob-accent); }

    .mob-nav-item svg {
        width: 23px;
        height: 23px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
        transition: filter 0.2s ease;
    }

    /* Vinyl icon is fill-based (record disc shape) */
    .mob-nav-item[data-action="vinyl"] svg {
        stroke: none;
        fill: currentColor;
    }

    .mob-nav-item[data-action="vinyl"].active svg {
        filter: drop-shadow(0 0 5px var(--mob-accent));
    }

    .mob-nav-label {
        font-size: 8px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1;
        white-space: nowrap;
    }

    /* =================================================
       OSWALD EVERYWHERE — category titles, card titles,
       read-more, author grids, any missed headline
       ================================================= */
    .read-more-btn,
    .author-mini-grid .entry-title,
    .page-title,
    .entry-title,
    .widget-title {
        font-family: var(--font-headline) !important;
    }

    /* =================================================
       FONT SIZER — A− / A+ in mobile header
       ================================================= */
    .mob-font-sizer {
        position: absolute;
        left: 10px;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .mob-font-btn {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.7);
        border-radius: 5px;
        padding: 4px 7px;
        font-family: var(--font-headline);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        cursor: pointer;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, color 0.15s ease;
        user-select: none;
    }

    .mob-font-btn:active {
        background: rgba(0, 163, 255, 0.25);
        color: var(--mob-accent);
    }

    .mob-font-btn.at-limit {
        opacity: 0.3;
        pointer-events: none;
    }

} /* end @media (max-width: 1023px) */