/*
Theme Name: Who's John
Theme URI:  https://whosjohn.com
Author:     John Malgioglio
Description: Custom single-page theme for Who's John — KNTXT-inspired brutalist techno aesthetic.
Version: 1.2.0
License:    Private
Text Domain: whosjohn
*/


/* =============================================================================
   Reset & Base
   ============================================================================= */

*, *::before, *::after {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

:root {
    --black:    #000;
    --white:    #fff;
    --dim:      rgba(255,255,255,.4);
    --line:     rgba(255,255,255,.12);
    --nav-h:    64px;
    --footer-h: 64px;
    --tick-w:   32px;
    --pad-x:    32px;
    --pad-y:    52px;
    --inner-pad: 128px;
}

html, body {
    width:              100%;
    height:             100%;
    overflow:           hidden;
    background:         var(--black);
    color:              var(--white);
    font-family:        'Syne', 'Helvetica Neue', sans-serif;
    text-transform:     uppercase;
    letter-spacing:     .08em;
    cursor:             crosshair;
    overscroll-behavior: none;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }


/* =============================================================================
   Navigation
   ============================================================================= */

nav {
    position:       fixed;
    top:            0;
    left:           0;
    right:          0;
    height:         var(--nav-h);
    z-index:        500;
    display:        flex;
    align-items:    center;
    padding:        0 160px;
    border-bottom:  1px solid var(--line);
    background:     var(--black);
}

.nav-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}

.nav-inner button,
.nav-inner a {
    background:     none;
    border:         none;
    color:          var(--white);
    font-family:    inherit;
    font-size:      17px;
    font-weight:    800;
    letter-spacing: .25em;
    text-transform: uppercase;
    cursor:         crosshair;
    opacity:        .5;
    transition:     opacity .2s;
    padding:        0;
    min-height:     44px;
    display:        flex;
    align-items:    center;
    text-decoration: none;
}

.nav-sep {
    color:          var(--white);
    opacity:        .15;
    font-weight:    300;
    font-size:      14px;
    letter-spacing: 0;
}

.nav-inner button:hover,
.nav-inner button.active,
.nav-inner a:hover { opacity: 1; }

#nav-site-name {
    display:        none;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: .22em;
}

#nav-toggle {
    display:     none;
    background:  none;
    border:      none;
    color:       var(--white);
    cursor:      crosshair;
    font-size:   22px;
    padding:     0;
    letter-spacing: 0;
    min-height:  44px;
    min-width:   44px;
    justify-content: center;
    align-items: center;
}

#nav-panel-name {
    display:        none;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: .22em;
    opacity:        .55;
}

/* Mobile-right wrapper — hidden on desktop, flex on mobile */
#nav-mobile-right {
    display: none;
}

/* Pill flyout trigger — bare typographic + (no circle), × when open */
#pill-trigger {
    position:        relative;
    width:           32px;
    height:          32px;
    border:          none;
    background:      none;
    cursor:          crosshair;
    padding:         0;
    display:         none; /* shown on mobile via media query */
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

/* + / × bars inside trigger */
.ptb {
    position:       absolute;
    top:            50%;
    left:           50%;
    width:          15px;
    height:         1.5px;
    background:     var(--white);
    transform:      translate(-50%, -50%);
    transition:     transform .32s cubic-bezier(.77,0,.18,1);
    pointer-events: none;
}

.ptb-v { transform: translate(-50%, -50%) rotate(90deg); }

#pill-trigger.open .ptb-h { transform: translate(-50%, -50%) rotate(45deg);  }
#pill-trigger.open .ptb-v { transform: translate(-50%, -50%) rotate(-45deg); }

/* Pill flyout menu */
#pill-menu {
    position:       absolute;
    top:            calc(100% + 14px);
    right:          0;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            8px;
    pointer-events: none;
    z-index:        1;
}

#pill-menu.open { pointer-events: auto; }

.pill-item {
    background:     var(--black);
    border:         1px solid rgba(255,255,255,.2);
    border-radius:  20px;
    color:          rgba(255,255,255,.7);
    box-shadow:     0 4px 24px rgba(0,0,0,.55);
    font-family:    inherit;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding:        8px 18px;
    cursor:         crosshair;
    white-space:    nowrap;
    opacity:        0;
    transform:      translateY(-10px) scale(.96);
    transition:     opacity .2s ease,
                    transform .24s cubic-bezier(.77,0,.18,1),
                    color .15s,
                    border-color .15s;
}

#pill-menu.open .pill-item { opacity: 1; transform: translateY(0) scale(1); }

/* Staggered entry — each pill fans in slightly after the previous */
#pill-menu.open .pill-item:nth-child(1) { transition-delay: 0ms;   }
#pill-menu.open .pill-item:nth-child(2) { transition-delay: 45ms;  }
#pill-menu.open .pill-item:nth-child(3) { transition-delay: 85ms;  }
#pill-menu.open .pill-item:nth-child(4) { transition-delay: 120ms; }
#pill-menu.open .pill-item:nth-child(5) { transition-delay: 150ms; }

.pill-item.active {
    color:        var(--white);
    border-color: rgba(255,255,255,.5);
}

.pill-item:hover { color: var(--white); }


/* =============================================================================
   Mobile Nav Overlay
   ============================================================================= */

#nav-overlay {
    position:        fixed;
    inset:           0;
    z-index:         600;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             4px;
    background:      var(--black);
    transform:       translateX(100%);
    transition:      transform .4s cubic-bezier(.77,0,.18,1);
}

#nav-overlay.open { transform: translateX(0); }

#nav-close {
    position:        absolute;
    top:             16px;
    right:           var(--pad-x);
    background:      none;
    border:          none;
    color:           var(--white);
    cursor:          crosshair;
    font-size:       28px;
    letter-spacing:  0;
    min-height:      44px;
    min-width:       44px;
    display:         flex;
    justify-content: center;
    align-items:     center;
}

#nav-overlay .ovr-btn {
    background:     none;
    border:         none;
    color:          var(--white);
    cursor:         crosshair;
    font-family:    inherit;
    font-size:      clamp(36px, 10vw, 68px);
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity:        .25;
    transition:     opacity .2s;
    padding:        6px 0;
}

#nav-overlay .ovr-btn.active,
#nav-overlay .ovr-btn:hover { opacity: 1; }


/* =============================================================================
   Panels
   ============================================================================= */

.panel {
    position:        fixed;
    top:             calc(var(--nav-h) + var(--tick-w));
    left:            160px !important;
    right:           160px !important;
    height:          calc(100dvh - var(--nav-h) - var(--footer-h) - calc(var(--tick-w) * 2));
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    background:      var(--black);
    padding:         var(--pad-y) 0 40px;
    transform:       translateY(100%);
    transition:      transform .32s cubic-bezier(.77,0,.18,1),
                     opacity   .32s cubic-bezier(.77,0,.18,1);
    opacity:         0;
    pointer-events:  none;
    z-index:         10;
}

.panel.active    { transform: translateY(0);  opacity: 1; pointer-events: all; }
.panel.exit-up   { transform: translateY(-6%); opacity: 0; pointer-events: none; }


/* =============================================================================
   Home Panel
   ============================================================================= */

#panel-home {
    left:    0 !important;
    right:   0 !important;
    /* top + height inherit from .panel — respects nav and ticker boundaries */
    padding: 0 !important;
    justify-content: flex-end;
}

#hero-canvas {
    display: none;
}

#hero-fallback {
    /* Visible immediately so visitors see the wordmark before any JS runs.
       whosjohn-hero.js hides this once the canvas effect has real pixels. */
    display: block;
}

.marquee-wrap {
    overflow:       hidden;
    white-space:    nowrap;
    border-top:     1px solid var(--line);
    border-bottom:  1px solid var(--line);
    padding:        14px 0;
    margin:         0 calc(-1 * var(--pad-x));
    flex-shrink:    0;
}

.marquee-inner {
    display:   inline-flex;
    animation: marquee 28s linear infinite;
}

.marquee-inner.rev { animation-direction: reverse; }

.marquee-inner span {
    font-size:      12px;
    letter-spacing: .22em;
    color:          var(--dim);
    padding:        0 28px;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.hero-logo {
    line-height: .82;
    user-select: none;
}

.hero-logo .letter {
    font-size:      clamp(64px, 18vw, 260px);
    font-weight:    700;
    letter-spacing: -.02em;
    display:        inline-block;
    transition:     opacity .15s;
}

.hero-logo .letter:hover { opacity: .35; }

.hero-tagline {
    margin-top:     32px;
    border-top:     1px solid var(--line);
    padding-top:    20px;
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    flex-shrink:    0;
}

.hero-tagline span {
    font-size:      13px;
    letter-spacing: .22em;
    color:          var(--dim);
}


/* =============================================================================
   Bio Panel
   ============================================================================= */

#panel-bio {
    justify-content: center;
}

#panel-bio .bio-inner {
    display:               grid;
    grid-template-columns: 1fr 1.4fr;
    align-items:           center;
    flex:                  1;
    overflow:              hidden;
    min-height:            0;
    max-height:            100%;
}

.bio-left {
    padding-right:  48px;
    border-right:   1px solid var(--line);
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.bio-quote {
    font-size:      clamp(18px, 2vw, 28px);
    font-weight:    700;
    letter-spacing: -.01em;
    line-height:    1.25;
    color:          var(--white);
}

.bio-quote-divider {
    width:      24px;
    height:     1px;
    background: rgba(255,255,255,.25);
}

.bio-meta {
    font-size:      13px;
    letter-spacing: .2em;
    color:          rgba(255,255,255,.35);
    line-height:    2;
}

.bio-body {
    font-size:      17px;
    line-height:    1.9;
    font-weight:    300;
    letter-spacing: .04em;
    text-transform: none;
    color:          rgba(255,255,255,.7);
    overflow-y:     auto;
    max-height:     100%;
    padding-left:   48px;
    padding-right:  12px;
}

.bio-body::-webkit-scrollbar       { width: 2px; }
.bio-body::-webkit-scrollbar-thumb { background: var(--line); }
.bio-body p + p                    { margin-top: 20px; }


/* =============================================================================
   Music Panel
   ============================================================================= */

#panel-music {
    padding: 0;
    left:    var(--tick-w) !important;
    right:   var(--tick-w) !important;
}

.music-layout {
    display:               grid;
    grid-template-columns: 1fr 540px;
    flex:                  1;
    min-height:            0;
    overflow:              hidden;
}

.music-player {
    display:        flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:        var(--pad-y) 40px;
    border-right:   1px solid var(--line);
    overflow:       hidden;
    min-height:     0;
}

.mp-now {
    font-size:      13px;
    letter-spacing: .28em;
    color:          rgba(255,255,255,.5);
    margin-bottom:  12px;
    display:        flex;
    align-items:    center;
    gap:            10px;
    flex-shrink:    0;
    padding-left:   4px;
}

.mp-pulse {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    #e03030;
    animation:     vpulse 1.6s ease-in-out infinite;
}

.mp-pulse.on { background: #ff3333; }

@keyframes vpulse {
    0%,  100% { opacity: .4;  transform: scale(1);   }
    50%       { opacity: 1;   transform: scale(1.3); }
}

.mp-title {
    font-size:      clamp(18px, 1.8vw, 28px);
    font-weight:    700;
    letter-spacing: -.02em;
    line-height:    1.15;
    margin-bottom:  clamp(24px, 5vh, 72px);
    flex-shrink:    0;
    max-height:     4em;
    overflow:       hidden;
}

#mp-viz {
    width:       100%;
    height:      280px;
    display:     block;
    flex-shrink: 0;
    margin-bottom: 24px;
    cursor:      crosshair;
}

.mp-prog-row {
    display:       flex;
    align-items:   center;
    gap:           14px;
    margin-bottom: 32px;
    flex-shrink:   0;
}

.mp-t {
    font-size:      11px;
    letter-spacing: .15em;
    color:          rgba(255,255,255,.3);
    min-width:      38px;
}

.mp-prog {
    flex:        1;
    min-height:  32px;
    position:    relative;
    cursor:      crosshair;
}

.mp-prog::after {
    content:    '';
    position:   absolute;
    left:       0;
    right:      0;
    top:        50%;
    height:     2px;
    background: rgba(255,255,255,.15);
    transform:  translateY(-50%);
    pointer-events: none;
}

.mp-prog-fill {
    height:     2px;
    background: #fff;
    width:      0;
    position:   absolute;
    top:        50%;
    left:       0;
    transform:  translateY(-50%);
}

.mp-prog-handle {
    width:         16px;
    height:        16px;
    background:    #fff;
    border-radius: 50%;
    position:      absolute;
    top:           50%;
    left:          0;
    transform:     translate(-50%, -50%);
}

.mp-btns {
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            32px;
    flex-shrink:    0;
    margin-top:     clamp(24px, 5vh, 72px);
    margin-bottom:  32px;
}

.mp-btn {
    background:     none;
    border:         none;
    color:          rgba(255,255,255,.35);
    font-family:    inherit;
    font-size:      11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    cursor:         crosshair;
    padding:        0;
    transition:     color .15s;
}

.mp-btn:hover { color: #fff; }

.mp-btn-play {
    border:   1px solid rgba(255,255,255,.3);
    padding:  16px 48px;
    color:    #fff;
    font-size: 13px;
    letter-spacing: .3em;
}

.mp-btn-play:hover { background: rgba(255,255,255,.06); }

.mp-sc {
    font-size:      10px;
    letter-spacing: .25em;
    color:          rgba(255,255,255,.2);
    display:        flex;
    justify-content: space-between;
    flex-shrink:    0;
}

.mp-sc a {
    color:          rgba(255,255,255,.35);
    text-decoration: none;
    cursor:         crosshair;
    transition:     color .15s;
}

.mp-sc a:hover { color: #fff; }

.mp-tracklist {
    display:        flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow:       hidden;
    min-height:     0;
    padding-top:    var(--pad-y);
}

.mp-tl-head {
    font-size:      13px;
    letter-spacing: .25em;
    color:          rgba(255,255,255,.28);
    padding:        0 28px 16px;
    border-bottom:  1px solid var(--line);
    display:        flex;
    justify-content: space-between;
    flex-shrink:    0;
}

.mp-tl-scroll {
    flex:       0 1 auto;
    overflow-y: auto;
    max-height: 100%;
}

.mp-tl-scroll::-webkit-scrollbar       { width: 1px; }
.mp-tl-scroll::-webkit-scrollbar-thumb { background: var(--line); }

.mp-row {
    display:       flex;
    align-items:   center;
    gap:           16px;
    padding:       22px 28px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    cursor:        crosshair;
    transition:    background .12s;
    position:      relative;
}

.mp-row:hover  { background: rgba(255,255,255,.04); }
.mp-row.active { background: rgba(255,255,255,.07); }

.mp-row.active::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      2px;
    background: #fff;
}

.mp-row-num {
    font-size:      13px;
    color:          rgba(255,255,255,.22);
    width:          32px;
    flex-shrink:    0;
    letter-spacing: .1em;
}

.mp-row-info { flex: 1; min-width: 0; }

.mp-row-name {
    font-size:      16px;
    letter-spacing: .05em;
    color:          rgba(255,255,255,.8);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    line-height:    1.4;
}

.mp-row.active .mp-row-name { color: #fff; }

.mp-row-tag {
    font-size:      11px;
    letter-spacing: .16em;
    color:          rgba(255,255,255,.28);
}

.mp-row-dur {
    font-size:      13px;
    color:          rgba(255,255,255,.28);
    flex-shrink:    0;
    letter-spacing: .06em;
}

.mp-empty {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            1;
    font-size:       12px;
    letter-spacing:  .25em;
    opacity:         .3;
    padding:         40px;
}

.mp-more-btn {
    display:        block;
    width:          100%;
    background:     none;
    border:         none;
    border-top:     1px solid rgba(255,255,255,.07);
    color:          rgba(255,255,255,.3);
    font-family:    inherit;
    font-size:      10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    padding:        16px 20px;
    cursor:         crosshair;
    text-align:     left;
    transition:     color .15s;
}

.mp-more-btn:hover { color: #fff; }

#sc-widget {
    position:   absolute;
    width:      1px;
    height:     1px;
    left:       -9999px;
    top:        -9999px;
    visibility: hidden;
}


/* =============================================================================
   Video Panel
   ============================================================================= */

#panel-video {
    padding: 0;
    left:    var(--tick-w) !important;
    right:   var(--tick-w) !important;
}

.vp-layout {
    display:               grid;
    grid-template-columns: 1fr 500px;
    flex:                  1;
    min-height:            0;
    overflow:              hidden;
}

.vp-player {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            18px;
    padding:        0 40px;
    border-right:   1px solid var(--line);
    overflow:       hidden;
    min-height:     0;
}

.vp-now {
    font-size:      13px;
    letter-spacing: .28em;
    color:          rgba(255,255,255,.5);
    display:        flex;
    align-items:    center;
    gap:            10px;
    flex-shrink:    0;
    padding-left:   4px;
}

.vp-pulse {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #e03030;
    animation:     vpulse 1.6s ease-in-out infinite;
}

.vp-pulse.on { background: #ff3333; }

.vp-title {
    font-size:       clamp(13px, 1.5vw, 22px);
    font-weight:     700;
    letter-spacing:  -.02em;
    line-height:     1.2;
    flex-shrink:     0;
    display:         -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:        hidden;
}

.vp-iframe-wrap {
    position:   relative;
    width:      100%;
    flex-shrink: 0;
    background: #080808;
    border:     1px solid var(--line);
}

.vp-iframe-wrap::before {
    content:     '';
    display:     block;
    padding-top: 56.25%; /* 16:9 */
}

.vp-iframe-wrap iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
    display:  block;
}

.vp-facade {
    position:            absolute;
    inset:               0;
    z-index:             2;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    cursor:              pointer;
    background-color:    #080808;
    background-size:     cover;
    background-position: center;
}

.vp-facade.hidden {
    display: none;
}

.vp-facade-play {
    width:           60px;
    height:          60px;
    border-radius:   50%;
    background:      rgba(0, 0, 0, 0.55);
    border:          2px solid rgba(255, 255, 255, 0.85);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform 0.15s ease, background 0.15s ease;
}

.vp-facade-play::after {
    content:      '';
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
    margin-left:  4px;
}

.vp-facade:hover .vp-facade-play,
.vp-facade:focus-visible .vp-facade-play {
    background: rgba(0, 0, 0, 0.75);
    transform:  scale(1.08);
}

.vp-tracklist {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    overflow:       hidden;
    min-height:     0;
}

.vp-tl-head {
    font-size:      13px;
    letter-spacing: .25em;
    color:          rgba(255,255,255,.28);
    padding:        0 24px 16px;
    border-bottom:  1px solid var(--line);
    display:        flex;
    justify-content: space-between;
    flex-shrink:    0;
}

.vp-tl-scroll {
    flex:       0 1 auto;
    overflow-y: auto;
    max-height: 100%;
}

.vp-tl-scroll::-webkit-scrollbar       { width: 1px; }
.vp-tl-scroll::-webkit-scrollbar-thumb { background: var(--line); }

.vp-row {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       18px 24px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    cursor:        crosshair;
    transition:    background .12s;
    position:      relative;
}

.vp-row:hover  { background: rgba(255,255,255,.04); }
.vp-row.active { background: rgba(255,255,255,.07); }

.vp-row.active::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      2px;
    background: #fff;
}

.vp-num {
    font-size:      12px;
    color:          rgba(255,255,255,.22);
    width:          28px;
    flex-shrink:    0;
    letter-spacing: .1em;
}

.vp-thumb {
    width:        108px;
    flex-shrink:  0;
    aspect-ratio: 16/9;
    overflow:     hidden;
    background:   #111;
}

.vp-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: opacity .2s;
}

.vp-row:hover .vp-thumb img { opacity: .7; }

.vp-info { flex: 1; min-width: 0; }

.vp-name {
    font-size:       14px;
    letter-spacing:  .05em;
    color:           rgba(255,255,255,.75);
    line-height:     1.5;
    display:         -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:        hidden;
}

.vp-row.active .vp-name { color: #fff; }

.vp-empty {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            1;
    font-size:       12px;
    letter-spacing:  .25em;
    opacity:         .3;
}

.vp-extra        { display: none; }
.vp-extra.shown  { display: flex; }

.vp-more-btn {
    display:        block;
    width:          100%;
    background:     none;
    border:         none;
    border-top:     1px solid rgba(255,255,255,.07);
    color:          rgba(255,255,255,.3);
    font-family:    inherit;
    font-size:      10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    padding:        16px 20px;
    cursor:         crosshair;
    text-align:     left;
    transition:     color .15s;
}

.vp-more-btn:hover { color: #fff; }


/* =============================================================================
   Live / Flyers Panel
   ============================================================================= */

#panel-live {
    padding: 0;
    left:    var(--tick-w) !important;
    right:   var(--tick-w) !important;
}

.live-layout {
    display:               grid;
    grid-template-columns: 1fr 680px;
    flex:                  1;
    min-height:            0;
    overflow:              hidden;
}

.live-left {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--black);
    border-right:    1px solid var(--line);
    overflow:        hidden;
    min-height:      0;
    padding:         32px;
}

.live-img-block {
    display:        inline-flex;
    flex-direction: column;
    align-items:    flex-start;
}

.live-path {
    font-size:      11px;
    letter-spacing: .18em;
    color:          rgba(255,255,255,.6);
    font-family:    'Courier New', monospace;
    margin-bottom:  10px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    width:          100%;
}

.live-img-wrap { overflow: hidden; }

.live-img-wrap img {
    width:       auto;
    height:      auto;
    max-height:  64vh;
    max-width:   100%;
    object-fit:  contain;
    display:     block;
}

.live-counter {
    font-size:      10px;
    letter-spacing: .18em;
    color:          rgba(255,255,255,.25);
    margin-top:     10px;
    align-self:     flex-end;
}

.live-right {
    display:        flex;
    flex-direction: column;
    background:     var(--black);
    overflow:       hidden;
    min-height:     0;
}

.live-header {
    font-size:      13px;
    letter-spacing: .25em;
    color:          rgba(255,255,255,.28);
    padding:        20px 24px 16px;
    flex-shrink:    0;
    border-bottom:  1px solid var(--line);
    display:        flex;
    justify-content: space-between;
    align-items:    center;
}

.live-list {
    flex:       1;
    overflow-y: auto;
    padding:    0;
}

.live-list::-webkit-scrollbar       { width: 2px; }
.live-list::-webkit-scrollbar-thumb { background: var(--line); }

.lrow {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       16px 24px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    cursor:        crosshair;
    transition:    background .12s;
    position:      relative;
}

.lrow:hover  { background: rgba(255,255,255,.04); }
.lrow.active { background: rgba(255,255,255,.07); }

.lrow.active .lr-num,
.lrow.active .lr-name,
.lrow.active .lr-date { color: rgba(255,255,255,.9); }

.lrow.active .lr-cursor { opacity: 1; }

.lrow.active::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      2px;
    background: #fff;
}

.lr-cursor {
    font-size:  11px;
    opacity:    0;
    width:      10px;
    flex-shrink: 0;
}

.lr-num {
    font-size:      12px;
    letter-spacing: .1em;
    color:          rgba(255,255,255,.3);
    flex-shrink:    0;
    width:          28px;
}

.lr-thumb {
    width:        64px;
    flex-shrink:  0;
    aspect-ratio: 3/4;
    overflow:     hidden;
    background:   #111;
}

.lr-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: opacity .2s;
}

.lrow:hover .lr-thumb img { opacity: .7; }

.lr-name {
    font-size:      clamp(15px, 1.4vw, 20px);
    letter-spacing: .07em;
    color:          rgba(255,255,255,.7);
    flex:           1;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    text-transform: uppercase;
}

.lr-date {
    font-size:      12px;
    color:          rgba(255,255,255,.25);
    flex-shrink:    0;
    letter-spacing: .05em;
}


/* =============================================================================
   Music panel link list (legacy / fallback)
   ============================================================================= */

.link-list {
    display:    flex;
    flex-direction: column;
    background: var(--black);
    width:      100%;
    max-width:  900px;
}

.link-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         22px 0;
    border-bottom:   1px solid var(--line);
    font-size:       15px;
    font-weight:     500;
    letter-spacing:  .2em;
    transition:      padding-left .2s, opacity .2s;
    min-height:      44px;
}

.link-list .link-row:first-child { border-top: 1px solid var(--line); }
.link-row:hover                  { padding-left: 14px; opacity: .5; }

.link-row .arrow {
    font-size:  20px;
    letter-spacing: 0;
    opacity:    .3;
    transition: opacity .2s, transform .2s;
}

.link-row:hover .arrow { opacity: 1; transform: translateX(6px); }


/* =============================================================================
   Footer
   ============================================================================= */

.panel-footer {
    border-top:     1px solid var(--line);
    padding-top:    18px;
    margin-top:     18px;
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    flex-shrink:    0;
}

.panel-footer .socials { display: flex; gap: 24px; }

.panel-footer a {
    font-size:      12px;
    letter-spacing: .2em;
    opacity:        .4;
    transition:     opacity .2s;
}

.panel-footer a:hover { opacity: 1; }

.panel-footer .copy {
    font-size:      11px;
    letter-spacing: .18em;
    opacity:        .2;
}

#site-footer {
    position:    fixed;
    bottom:      0;
    left:        0;
    right:       0;
    height:      var(--footer-h);
    z-index:     500;
    display:     flex;
    align-items: center;
    padding:     0 160px;
    border-top:  1px solid var(--line);
    background:  var(--black);
}

.footer-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}

.footer-inner a {
    font-size:      14px;
    font-weight:    800;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity:        .5;
    transition:     opacity .2s;
    min-height:     40px;
    display:        flex;
    align-items:    center;
    white-space:    nowrap;
}

.footer-inner a:hover { opacity: 1; }

.footer-copy {
    font-size:      12px;
    letter-spacing: .18em;
    opacity:        .25;
    font-weight:    600;
    white-space:    nowrap;
}

/* Mobile link-index takeover — elements injected by whosjohn-panels.js;
   hidden on desktop, enabled inside the ≤1024 block */
#links-trigger { display: none; }
#links-overlay { display: none; }

/* Crossfader nav (v1) — elements injected by whosjohn-fader.js;
   hidden on desktop, enabled inside the ≤1024 block */
#fader-nav, #fader-dim, #fader-preview, #fader-hint { display: none; }


/* =============================================================================
   Mobile Dot Navigation
   ============================================================================= */

#mobile-dots {
    position:        fixed;
    bottom:          calc(var(--footer-h) + 16px);
    left:            0;
    right:           0;
    display:         none; /* shown only on mobile */
    justify-content: center;
    align-items:     center;
    gap:             8px;
    z-index:         490;
    pointer-events:  none;
}

.mob-dot {
    width:           6px;
    height:          6px;
    border-radius:   3px;
    background:      rgba(255,255,255,.25);
    border:          none;
    padding:         0;
    cursor:          crosshair;
    pointer-events:  all;
    transition:      width .3s ease, background .3s ease;
    flex-shrink:     0;
}

.mob-dot.active {
    width:      20px;
    background: rgba(255,255,255,.9);
}


/* =============================================================================
   Frame Masks
   ============================================================================= */

/* Black bars that sit over the ticker/gap zone on left and right edges */
#fmask-l, #fmask-r {
    position:       fixed;
    z-index:        400;
    pointer-events: none;
    background:     var(--black);
    top:            0;
    bottom:         0;
    width:          var(--tick-w);
}

#fmask-l { left:  0; }
#fmask-r { right: 0; }


/* =============================================================================
   Perimeter Ticker
   ============================================================================= */

/* Horizontal strips */
#ptick-t, #ptick-b {
    position:       fixed;
    left:           0;
    right:          0;
    height:         var(--tick-w);
    overflow:       hidden;
    pointer-events: none;
    z-index:        450;
    display:        flex;
    align-items:    center;
}

#ptick-t {
    top:           var(--nav-h);
    border-bottom: 1px solid rgba(255,255,255,.2);
}

#ptick-b {
    bottom:     var(--footer-h);
    border-top: 1px solid rgba(255,255,255,.2);
}

#ptick-t .ptick-inner,
#ptick-b .ptick-inner {
    display:     inline-flex;
    white-space: nowrap;
    flex-shrink: 0;
}

#ptick-t .ptick-inner span,
#ptick-b .ptick-inner span {
    font-size:      12px;
    letter-spacing: .22em;
    color:          rgba(255,255,255,.55);
    text-transform: uppercase;
    padding:        0 18px;
}

#ptick-t .ptick-inner { animation: marquee 32s linear infinite reverse; }
#ptick-b .ptick-inner { animation: marquee 32s linear infinite; }

/* Vertical strips — writing-mode approach */
#ptick-l, #ptick-r {
    position:        fixed;
    top:             calc(var(--nav-h) + var(--tick-w));
    bottom:          calc(var(--footer-h) + var(--tick-w));
    width:           var(--tick-w);
    overflow:        hidden;
    pointer-events:  none;
    z-index:         450;
    display:         flex;
    justify-content: center;
}

#ptick-l { left: 0;  border-right: 1px solid rgba(255,255,255,.2); }
#ptick-r { right: 0; border-left:  1px solid rgba(255,255,255,.2); }

#ptick-l .ptick-inner,
#ptick-r .ptick-inner {
    display:       block;
    writing-mode:  vertical-lr;
    white-space:   nowrap;
    height:        max-content;
}

#ptick-l .ptick-inner span,
#ptick-r .ptick-inner span {
    font-size:      12px;
    letter-spacing: .22em;
    color:          rgba(255,255,255,.55);
    text-transform: uppercase;
    padding:        10px 0;
}

#ptick-l .ptick-inner { animation: mqv 30s linear infinite; }
#ptick-r .ptick-inner { animation: mqv 30s linear infinite reverse; }

@keyframes mqv {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}


/* =============================================================================
   WordPress Admin Bar Offsets
   ============================================================================= */

/*
 * nav and #nav-overlay top positions are driven by the --adminbar CSS variable,
 * which is set inline by PHP in <head> based on is_admin_bar_showing().
 * Panel and ticker positions are handled dynamically by fixTickers() in JS.
 */
nav          { top: var(--adminbar); }
#nav-overlay { top: var(--adminbar); }

/* Admin-bar-specific panel and ticker adjustments */
.admin-bar .panel {
    top:    calc(var(--nav-h) + var(--tick-w) + 32px);
    height: calc(100dvh - var(--nav-h) - var(--footer-h) - calc(var(--tick-w) * 2) - 32px);
}

.admin-bar #ptick-t {
    top: calc(var(--nav-h) + 32px);
}

.admin-bar #ptick-l,
.admin-bar #ptick-r {
    top: calc(var(--nav-h) + var(--tick-w) + 32px);
}

/* 601px–782px: admin bar is 46px tall */
@media screen and (max-width: 782px) {
    .admin-bar .panel {
        top:    calc(var(--nav-h) + var(--tick-w) + 46px);
        height: calc(100dvh - var(--nav-h) - var(--footer-h) - calc(var(--tick-w) * 2) - 46px);
    }
    .admin-bar #ptick-t { top: calc(var(--nav-h) + 46px); }
    .admin-bar #ptick-l,
    .admin-bar #ptick-r { top: calc(var(--nav-h) + var(--tick-w) + 46px); }
}

/* ≤600px: WP admin bar moves to the bottom, so top offsets reset to 0 */
@media screen and (max-width: 600px) {
    .admin-bar .panel {
        top:    calc(var(--nav-h) + var(--tick-w));
        height: calc(100dvh - var(--nav-h) - var(--footer-h) - calc(var(--tick-w) * 2));
    }
    .admin-bar #ptick-t { top: var(--nav-h); }
    .admin-bar #ptick-l,
    .admin-bar #ptick-r { top: calc(var(--nav-h) + var(--tick-w)); }
}


/* =============================================================================
   Narrow desktop — 1025–1440px
   The 160px footer padding + 14px links overflow at these widths now that
   links are nowrap (previously they wrapped mid-label, which looked broken
   in a different way). Tighten padding + type so one row always fits.
   ============================================================================= */

@media (min-width: 1025px) and (max-width: 1440px) {
    #site-footer    { padding: 0 48px; }
    .footer-inner a { font-size: 12px; }
    .footer-copy    { font-size: 11px; }
}


/* =============================================================================
   Tablet — ≤960px
   ============================================================================= */

@media (max-width: 960px) {
    :root {
        --pad-x:     24px;
        --pad-y:     40px;
        --inner-pad: 80px;
    }
}


/* =============================================================================
   Mobile — ≤1024px (phones + tablets get the stacked layout)
   ============================================================================= */

@media (max-width: 1024px) {
    /* Hide perimeter tickers — collapse their space to zero */
    .ptick { display: none; }
    :root  { --tick-w: 0px; --inner-pad: 20px; }
    :root  { --pad-x: 20px; --pad-y: 28px; --nav-h: 56px; --footer-h: 48px; }

    /* Swipe nav: hide hamburger + overlay, show panel name label */
    .nav-inner      { display: none; }
    #nav-toggle     { display: none; }
    #nav-site-name  { display: block; font-size: 16px; font-weight: 800; letter-spacing: .16em; white-space: nowrap; }
    #nav-panel-name { display: block; font-weight: 800; opacity: 1; font-size: 12px; white-space: nowrap; }
    #nav-panel-name::before { content: '/'; margin-right: 8px; opacity: .3; font-weight: 400; }
    #nav-overlay    { display: none !important; }

    /* Dot indicators — replaced by the crossfader nav (v1) below.
       Restore `display: flex;` here to roll back to dots. */
    #mobile-dots    { display: none; }

    /* Pill flyout: show right-side wrapper and trigger */
    #nav-mobile-right {
        display:     flex;
        align-items: center;
        gap:         8px;
        position:    relative;
    }
    #pill-trigger { display: flex; }

    /* Bio panel: single column */
    #panel-bio .bio-inner  { grid-template-columns: 1fr; }
    .bio-left {
        padding-right:  0;
        border-right:   none;
        border-bottom:  1px solid var(--line);
        padding-bottom: 24px;
        margin-bottom:  24px;
    }
    .bio-body {
        padding-left:  0;
        padding-right: 0;
        max-height:    none;
        overflow-y:    visible;
        line-height:   1.65;
    }
    #panel-bio { overflow-y: auto; }

    /* Link list */
    .link-row { font-size: 13px; padding: 16px 0; }

    /* Live/Flyers panel: single column */
    .live-layout    { display: flex; flex-direction: column; flex: none; height: auto; overflow: visible; width: 100%; }
    .live-left      { border-right: none; border-bottom: 1px solid var(--line); padding: 0; flex-shrink: 0; align-items: flex-start; justify-content: flex-start; }
    .live-img-block { width: 100%; display: flex; flex-direction: column; }
    .live-path      { height: 36px; padding: 0 var(--pad-x); font-size: 10px; display: flex; align-items: center; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
    .live-img-wrap  { width: 100%; overflow: hidden; }
    /* max-height: none is critical — the desktop 64vh cap otherwise clamps
       height while width stays 100%, squashing the flyer's aspect ratio */
    .live-img-wrap img { width: 100%; height: auto; max-width: none; max-height: none; object-fit: initial; }
    .live-counter   { padding: 6px var(--pad-x) 10px; align-self: flex-end; }
    .live-right     { border-top: none; max-height: none; overflow: visible; flex-shrink: 0; }
    .live-list      { overflow: visible; max-height: none; }
    .lrow           { padding: 10px var(--pad-x); gap: 10px; }
    .lr-thumb       { width: 36px; }
    .lr-num         { font-size: 11px; width: 22px; }
    .lr-name        { font-size: 13px; }
    .lr-date        { font-size: 11px; }
    #panel-live     { overflow-y: auto; padding-bottom: 64px; }

    /* Hero tagline: stacked */
    .hero-tagline             { flex-direction: column; align-items: flex-start; gap: 6px; }
    .hero-tagline span        { font-size: 11px; }

    /* Video panel: single column */
    .vp-layout       { display: flex; flex-direction: column; flex: none; height: auto; overflow: visible; width: 100%; }
    .vp-player       { padding: 20px var(--pad-x) 24px; border-right: none; border-bottom: 1px solid var(--line); gap: 12px; overflow: visible; flex-shrink: 0; justify-content: flex-start; }
    .vp-tl-head      { padding: 14px var(--pad-x); align-items: center; }
    .vp-row          { padding: 14px var(--pad-x); }
    .vp-tracklist    { max-height: none; overflow: visible; flex-shrink: 0; }
    .vp-tl-scroll    { overflow: visible; max-height: none; }
    #panel-video     { overflow-y: auto; padding-bottom: 64px; }

    /* Music panel: single column */
    .music-layout    { display: flex; flex-direction: column; flex: none; height: auto; overflow: visible; width: 100%; }
    .music-player    { padding: 20px var(--pad-x) 28px; border-right: none; border-bottom: 1px solid var(--line); overflow: visible; flex-shrink: 0; height: auto; min-width: 0; }
    .mp-title        { word-break: break-word; overflow-wrap: anywhere; white-space: normal; }
    .mp-tracklist    { flex-shrink: 0; }
    #mp-viz          { height: 130px; margin-bottom: 16px; }
    .mp-title        { margin-bottom: 16px; }
    .mp-btns         { margin-top: 8px; margin-bottom: 16px; }
    .mp-prog-row     { margin-bottom: 20px; }
    .mp-tracklist    { max-height: none; overflow: visible; }
    .mp-tl-scroll    { overflow: visible; max-height: none; }
    #panel-music     { overflow-y: auto; padding-bottom: 64px; }

    /* Misc */
    .panel-footer             { flex-direction: column; gap: 10px; align-items: flex-start; }
    .panel-footer .socials    { flex-wrap: wrap; gap: 14px; }

    /* Nav: fix padding and spread WJ / hamburger to edges.
       z-index above the footer (500) so the nav takeover covers it. */
    nav { padding: 0 var(--pad-x); justify-content: space-between; z-index: 940; }
    #pill-trigger { position: relative; z-index: 2; }

    /* Nav flyout = full-screen numbered index dropping from the top —
       the twin of the links takeover. Same markup + JS as the old pill
       menu; only the presentation changes. Numbers via CSS counter. */
    #pill-menu {
        position:       fixed;
        top:            var(--nav-h);
        left:           0;
        right:          0;
        bottom:         0;
        z-index:        1;
        background:     var(--black);
        display:        flex;
        flex-direction: column;
        align-items:    stretch;
        gap:            0;
        padding:        4px var(--pad-x) 14px;
        transform:      translateY(-103%);
        visibility:     hidden;
        transition:     transform .38s cubic-bezier(.77,0,.18,1), visibility 0s .38s;
        counter-reset:  navidx;
    }
    #pill-menu.open {
        transform:  none;
        visibility: visible;
        transition: transform .38s cubic-bezier(.77,0,.18,1);
    }
    .pill-item {
        counter-increment: navidx;
        flex:            1;
        min-height:      0;
        display:         flex;
        align-items:     center;
        justify-content: flex-start;
        text-align:      left;
        gap:             14px;
        background:      none;
        border:          none;
        border-radius:   0;
        border-top:      1px solid rgba(255,255,255,.14);
        box-shadow:      none;
        padding:         0;
        color:           rgba(255,255,255,.55);
        font-family:     'Bebas Neue', 'Arial Narrow', sans-serif;
        font-weight:     400;
        font-size:       clamp(40px, 8.5vh, 76px);
        letter-spacing:  .01em;
        line-height:     .9;
        text-transform:  uppercase;
        transform:       translateY(16px);
    }
    .pill-item:first-child { border-top: none; }
    .pill-item::before {
        content:        counter(navidx, decimal-leading-zero);
        font-family:    'Syne', sans-serif;
        font-size:      11px;
        font-weight:    700;
        letter-spacing: .2em;
        color:          rgba(255,255,255,.3);
        width:          28px;
        flex-shrink:    0;
    }
    .pill-item::after {
        content:     '\2192';
        margin-left: auto;
        font-family: 'Syne', sans-serif;
        font-size:   16px;
        color:       rgba(255,255,255,.35);
    }
    .pill-item.active { color: var(--white); border-color: rgba(255,255,255,.14); }

    /* Footer: fix padding, wrap social links */
    #site-footer { padding: 0 var(--pad-x); }
    /* Footer = short LINKS bar; the links themselves live in a full-screen
       numbered index (#links-overlay) that flies up over the page.
       Elements are built by whosjohn-panels.js from the .footer-inner links. */
    .footer-inner { display: none; }
    #links-trigger {
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             10px;
        width:           100%;
        height:          100%;
        background:      none;
        border:          none;
        color:           var(--white);
        font-family:     inherit;
        font-size:       12px;
        font-weight:     700;
        letter-spacing:  .3em;
        text-transform:  uppercase;
        cursor:          crosshair;
    }
    #links-overlay {
        display:        flex;
        flex-direction: column;
        position:       fixed;
        inset:          0;
        z-index:        950;
        background:     var(--black);
        padding:        18px var(--pad-x) 14px;
        transform:      translateY(101%);
        visibility:     hidden;
        transition:     transform .38s cubic-bezier(.77,0,.18,1), visibility 0s .38s;
    }
    #links-overlay.open {
        transform:  none;
        visibility: visible;
        transition: transform .38s cubic-bezier(.77,0,.18,1);
    }
    .lo-head  { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; padding-bottom: 12px; }
    .lo-title { font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.45); font-weight: 700; text-transform: uppercase; }
    #lo-close { background: none; border: none; color: var(--white); font-size: 20px; line-height: 1; cursor: crosshair; padding: 10px; margin: -10px; }
    #lo-close:focus         { outline: none; }
    #lo-close:focus-visible { outline: 1px solid rgba(255,255,255,.5); }
    .lo-row {
        flex:            1;
        min-height:      0;
        display:         flex;
        align-items:     center;
        gap:             14px;
        border-top:      1px solid rgba(255,255,255,.14);
        color:           var(--white);
        text-decoration: none;
        cursor:          crosshair;
        opacity:         0;
        transform:       translateY(16px);
        transition:      opacity .25s, transform .3s cubic-bezier(.77,0,.18,1);
    }
    #links-overlay.open .lo-row { opacity: 1; transform: none; }
    #links-overlay.open .lo-row:nth-child(2) { transition-delay: .04s; }
    #links-overlay.open .lo-row:nth-child(3) { transition-delay: .09s; }
    #links-overlay.open .lo-row:nth-child(4) { transition-delay: .14s; }
    #links-overlay.open .lo-row:nth-child(5) { transition-delay: .19s; }
    #links-overlay.open .lo-row:nth-child(6) { transition-delay: .24s; }
    #links-overlay.open .lo-row:nth-child(7) { transition-delay: .29s; }
    .lo-num   { font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.3); width: 28px; flex-shrink: 0; }
    .lo-name  { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(34px, 7.2vh, 64px); line-height: .9; flex: 1; text-transform: uppercase; letter-spacing: .01em; }
    .lo-arrow { color: rgba(255,255,255,.35); font-size: 16px; flex-shrink: 0; }
    .lo-foot  { flex-shrink: 0; display: flex; justify-content: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.3); }

    /* ── Crossfader nav (v1) ─────────────────────────────────────
       Replaces #mobile-dots. Self-contained: this block + whosjohn-fader.js
       + one enqueue line in functions.php. Delete all three to roll back. */
    #fader-nav {
        display:      block;
        position:     fixed;
        left:         0;
        right:        0;
        bottom:       var(--footer-h);
        height:       30px;
        z-index:      490;
        cursor:       ew-resize;
        touch-action: none;
    }
    .fader-segs   { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; gap: 6px; pointer-events: none; }
    .fader-segs i { flex: 1; height: 1px; background: rgba(255,255,255,.18); transition: background .15s, height .15s; }
    .fader-segs i.cur { background: var(--white); height: 2px; }
    .fader-segs i.hov { background: var(--white); height: 3px; }
    #fader-cap {
        display:        block;
        position:       absolute;
        bottom:         2px;
        width:          16px;
        height:         6px;
        background:     var(--white);
        pointer-events: none;
        transition:     left .3s cubic-bezier(.77,0,.18,1);
    }
    #fader-dim {
        display:        block;
        position:       fixed;
        inset:          0;
        background:     rgba(0,0,0,0);
        transition:     background .2s;
        pointer-events: none;
        z-index:        480;
    }
    #fader-hint {
        display:        block;
        position:       fixed;
        left:           0;
        right:          0;
        bottom:         calc(var(--footer-h) + 44px);
        text-align:     center;
        font-size:      10px;
        font-weight:    700;
        letter-spacing: .3em;
        color:          rgba(255,255,255,.65);
        opacity:        0;
        transition:     opacity .4s;
        pointer-events: none;
        z-index:        490;
    }
    #fader-preview {
        display:        flex;
        position:       fixed;
        left:           0;
        right:          0;
        bottom:         calc(var(--footer-h) + 90px);
        flex-direction: column;
        align-items:    center;
        gap:            8px;
        opacity:        0;
        transition:     opacity .15s;
        pointer-events: none;
        z-index:        490;
    }
    #fader-preview .fp-name  { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(56px, 14vw, 96px); line-height: .9; color: var(--white); text-transform: uppercase; }
    #fader-preview .fp-count { font-size: 10px; font-weight: 700; letter-spacing: .3em; color: rgba(255,255,255,.45); }
    body.fader-scrubbing #fader-dim     { background: rgba(0,0,0,.55); }
    body.fader-scrubbing #fader-preview { opacity: 1; }

    /* Mobile swipe: horizontal Tinder-style transitions */
    .panel         { transform: translateX(100%); transition: transform .2s cubic-bezier(.77,0,.18,1), opacity .2s cubic-bezier(.77,0,.18,1); }
    .panel.active  { transform: translateX(0); }
    .panel.exit-up { transform: translateX(-40%); opacity: 0; }
    @keyframes mob-from-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
    .panel.mob-from-left { animation: mob-from-left .2s cubic-bezier(.77,0,.18,1) both; }

    /* Remove top gap on all panels */
    .panel { padding-top: 0; }

    /* Bio panel: full-width + scrollable */
    #panel-bio {
        left: 0 !important;
        right: 0 !important;
        padding: 20px var(--pad-x) 64px;
        justify-content: flex-start;
    }
    #panel-bio .bio-inner {
        overflow: visible;
        max-height: none;
        flex: none;
        align-items: flex-start;
        /* Cap the reading measure — at tablet widths the stacked layout
           otherwise runs 110+ chars per line. No effect on phones. */
        max-width: 720px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =============================================================================
   Small Mobile — ≤480px
   ============================================================================= */

@media (max-width: 480px) {
    :root    { --pad-x: 16px; }
    .vitem   { padding: 10px 12px; }
}