/**
 * Pusedainos Wiki - iTunes-native layout (Y2K Mac OS X Tiger / iTunes 5-7)
 *
 * This file IS the layout system, not an override layer. It defines
 * the window chassis, titlebar, toolbar, source-list sidebar, status
 * bar and all the homepage / category / alert primitives.
 *
 * Note: most class names still carry the `nt-` prefix because this
 * stylesheet was the successor to a Windows NT theme. They are now
 * just opaque identifiers; the visual treatment is pure iTunes.
 */

/* =========================================================
   0. RESET / TOKENS
   ========================================================= */

:root {
    /* Aqua palette */
    --it-aqua-1:        #6ea1e0;
    --it-aqua-2:        #2061c9;
    --it-aqua-3:        #14437a;
    --it-aqua-soft:     #cfe0f4;

    /* Brushed metal stops */
    --it-brushed-top:   #ececec;
    --it-brushed-mid:   #c8c8c8;
    --it-brushed-bot:   #aeaeae;
    --it-brushed-edge:  #6b6b6b;

    /* Source list stops */
    --it-src-top:       #d6dde6;
    --it-src-bot:       #c1cad6;
    --it-src-edge:      #7d8794;
    --it-src-label:     #5c6776;

    /* Desktop wallpaper */
    --it-desk-1:        #5a8ab8;
    --it-desk-2:        #2c4d6d;
    --it-desk-3:        #1a2f44;

    /* Surface tokens */
    --it-text:          #1a1a1a;
    --it-text-mute:     #5e6975;
    --it-row-zebra:     #ecf3fa;
    --it-row-border:    #e2e2e2;
    --it-divider:       #d8d8d8;

    /* Category cover hues (data-cat="...") */
    --cat-artists-1:    #6ea1e0;  --cat-artists-2:    #1c4f9a;
    --cat-performers-1: #6ea1e0;  --cat-performers-2: #1c4f9a;
    --cat-events-1:     #ff8e8e;  --cat-events-2:     #9a1414;
    --cat-glossary-1:   #b888e8;  --cat-glossary-2:   #5e2a99;
    --cat-history-1:    #f5e1b4;  --cat-history-2:    #c69b56;
    --cat-friends-1:    #a7e69c;  --cat-friends-2:    #2f8a3f;
    --cat-zaidimai-1:   #ffb15c;  --cat-zaidimai-2:   #c75a00;
    --cat-depozito-1:   #c2c8d6;  --cat-depozito-2:   #4e5666;
    --cat-scenografijos-1: #ee9bdd; --cat-scenografijos-2: #8a2378;
    --cat-default-1:    #cdd6e3;  --cat-default-2:    #6e7889;

    --it-font: -apple-system, BlinkMacSystemFont, "Lucida Grande",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Retro CRT/LCD stack: VT323 (Google Font, dot-matrix terminal),
       falling back through the classic console monospaces. Used for
       the player LCD readout - artist name marquee, subtitle, and
       elapsed/remaining time digits - so the display feels like a
       genuine iPod Classic / iTunes 4-era now-playing screen. */
    --it-font-retro: "VT323", "Courier New", "Andale Mono",
                     ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Brushed-metal helper -- vertical gradient + 1px horizontal pinstripes */
.it-brushed,
.it-titlebar,
.it-toolbar,
.it-statusbar {
    background:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 1px,
            rgba(0,0,0,0.04) 1px, rgba(0,0,0,0.04) 2px),
        linear-gradient(180deg, var(--it-brushed-top) 0%,
                                var(--it-brushed-mid) 50%,
                                var(--it-brushed-bot) 100%);
}

/* =========================================================
   1. DESKTOP & WINDOW CHASSIS
   ========================================================= */

html { background: transparent; }
body.wiki-body {
    margin: 0;
    padding: 24px 16px 60px;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at center,
            var(--it-desk-1) 0%,
            var(--it-desk-2) 70%,
            var(--it-desk-3) 100%) fixed;
    font-family: var(--it-font);
    font-size: 12px;
    color: var(--it-text);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--it-aqua-2); color: #fff; }

.it-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--it-aqua-2);
    color: #fff;
    padding: 6px 12px;
    border-radius: 0 0 6px 0;
    z-index: 9999;
}
.it-skip-link:focus { left: 0; }

.wiki-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 10px 10px 6px 6px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.5),
        0 30px 80px rgba(0,0,0,0.55),
        0 12px 30px rgba(0,0,0,0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 70vh;
}

/* =========================================================
   2. TITLEBAR (traffic lights + centered title)
   ========================================================= */

.it-titlebar {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border-bottom: 1px solid var(--it-brushed-edge);
}

.it-traffic-lights {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    z-index: 2;
}
.it-tl {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -2px 2px rgba(0,0,0,0.3);
}
.it-tl--close { background: radial-gradient(circle at 35% 30%, #ff9a8a, #d63a23 70%); }
.it-tl--min   { background: radial-gradient(circle at 35% 30%, #ffe17a, #d6a300 70%); }
.it-tl--zoom  { background: radial-gradient(circle at 35% 30%, #b8ee82, #2c8a18 70%); }

/* When an inner .it-window is on the page, the outer titlebar acts as the
   "inactive" window: its traffic lights desaturate to uniform grey, and
   only reveal their colours on hover - mirroring modern macOS behaviour
   for background windows. */
body:has(.it-window) .it-titlebar .it-tl {
    background: radial-gradient(circle at 35% 30%, #d4d4d4, #8a8a8a 70%);
    transition: background 120ms ease;
}
body:has(.it-window) .it-titlebar .it-traffic-lights:hover .it-tl--close {
    background: radial-gradient(circle at 35% 30%, #ff9a8a, #d63a23 70%);
}
body:has(.it-window) .it-titlebar .it-traffic-lights:hover .it-tl--min {
    background: radial-gradient(circle at 35% 30%, #ffe17a, #d6a300 70%);
}
body:has(.it-window) .it-titlebar .it-traffic-lights:hover .it-tl--zoom {
    background: radial-gradient(circle at 35% 30%, #b8ee82, #2c8a18 70%);
}

.it-titlebar-text {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
    font: 700 12px/1 var(--it-font);
    color: #2c2c2c;
    text-shadow: 0 1px 0 rgba(255,255,255,0.55);
    pointer-events: none;
}
.it-titlebar-text a {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
}
.it-titlebar-text a:hover { text-decoration: none; }

/* =========================================================
   3. TOOLBAR (back/forward + burger + search)
   ========================================================= */

.it-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--it-brushed-edge);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.4);
}

.it-toolbar-nav {
    display: inline-flex;
    gap: 1px;
    background: linear-gradient(180deg, #fafafa, #cdcdcd);
    border: 1px solid #7a7a7a;
    border-radius: 14px;
    padding: 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.18);
}
.it-nav-btn {
    width: 38px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2a2a2a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.it-nav-btn:first-child { border-radius: 14px 0 0 14px; padding-right: 2px; }
.it-nav-btn:last-child  { border-radius: 0 14px 14px 0; padding-left: 2px; border-left: 1px solid rgba(0,0,0,0.18); }
.it-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.5); }
.it-nav-btn:active:not(:disabled) { background: rgba(0,0,0,0.06); }
.it-nav-btn:disabled { color: #b8b8b8; cursor: default; }
.it-nav-btn:focus-visible {
    outline: 2px solid var(--it-aqua-2);
    outline-offset: 1px;
    z-index: 1;
}

.it-burger {
    display: none;
    width: 30px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.6) 0%,
            rgba(255,255,255,0.18) 48%,
            rgba(0,0,0,0.04) 50%,
            rgba(255,255,255,0.22) 100%),
        linear-gradient(180deg, #fafafa, #cccccc);
    border: 1px solid #7a7a7a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.18);
    color: var(--it-text);
    cursor: pointer;
}

.it-search {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.it-search input[type="text"] {
    width: 220px;
    height: 24px;
    padding: 0 12px 0 28px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, #ffffff, #e6e6e6) padding-box,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%237a7a7a' stroke-width='1.5'/><path d='M9.8 9.8 L14 14' stroke='%237a7a7a' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat 9px center / 12px 12px;
    border: 1px solid #7a7a7a;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.18),
        0 1px 0 rgba(255,255,255,0.4);
    font: 12px/1 var(--it-font);
    color: var(--it-text);
}
.it-search input[type="text"]:focus {
    outline: 0;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.18),
        0 0 0 3px rgba(110,161,224,0.45);
}

/* =========================================================
   4. CONTAINER: SOURCE LIST + MAIN PANE
   ========================================================= */

.wiki-container {
    display: flex;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    max-width: none;
    background: #ffffff;
}

.wiki-sidebar {
    width: 210px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--it-src-top) 0%, var(--it-src-bot) 100%);
    border-right: 1px solid var(--it-src-edge);
    padding: 8px 0 16px;
    font-family: var(--it-font);
    font-size: 11.5px;
    color: var(--it-text);
    align-self: stretch;
    margin: 0;
    box-shadow: none;
}
.wiki-sidebar .sidebar-section {
    padding: 8px 0 4px;
    margin: 0;
    border-top: 0;
}
.wiki-sidebar .sidebar-section + .sidebar-section {
    margin-top: 4px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.wiki-sidebar .sidebar-section h3 {
    margin: 0 0 6px;
    padding: 0 12px;
    font: 700 10px/1 var(--it-font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--it-src-label);
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    border: 0;
}
.wiki-sidebar .sidebar-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.wiki-sidebar .sidebar-section li { margin: 0; padding: 0; }
.wiki-sidebar .sidebar-section a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font: 11.5px/1.2 var(--it-font);
    color: var(--it-text);
    text-decoration: none;
    background: transparent;
    border-left: 0;
    line-height: 1.2;
}
.wiki-sidebar .sidebar-section a .nt-icon {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}
.wiki-sidebar .sidebar-section a:hover {
    background: rgba(255,255,255,0.35);
    color: var(--it-text);
    text-decoration: none;
}
.wiki-sidebar .sidebar-section a.is-current,
.wiki-sidebar .sidebar-section a[aria-current="page"] {
    background: linear-gradient(180deg, var(--it-aqua-1) 0%, var(--it-aqua-2) 100%);
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.wiki-sidebar .sidebar-section a.is-current .nt-icon path,
.wiki-sidebar .sidebar-section a[aria-current="page"] .nt-icon path { filter: brightness(1.15); }

/* Primary categories (Atlikėjai, Renginiai) - the headline content,
   given a slightly larger row, bold weight and an aqua accent so they
   read as the main entry points into the wiki. */
.wiki-sidebar .sidebar-section--primary a.sidebar-link--primary {
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--it-aqua-3);
}
.wiki-sidebar .sidebar-section--primary a.sidebar-link--primary .nt-icon {
    width: 15px;
    height: 15px;
}
.wiki-sidebar .sidebar-section--primary a.sidebar-link--primary:hover {
    background: rgba(110, 161, 224, 0.18);
    color: var(--it-aqua-3);
}
.wiki-sidebar .sidebar-section--primary a.sidebar-link--primary.is-current {
    color: #fff;
}

/* Secondary categories - present but visually muted so they don't
   compete with the primary section. */
.wiki-sidebar .sidebar-section--secondary a {
    color: var(--it-text-mute);
    font-size: 11px;
}
.wiki-sidebar .sidebar-section--secondary a:hover {
    color: var(--it-text);
}
.wiki-sidebar .sidebar-section--secondary a.is-current {
    color: #fff;
}

.wiki-content {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    padding: 22px 28px 32px;
    margin: 0;
    box-shadow: none;
    border: 0;
}

/* =========================================================
   5. STATUS BAR (footer)
   ========================================================= */

.wiki-footer.it-statusbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 10px;
    border-top: 1px solid var(--it-src-edge);
    margin: 0;
    font: 11px/1 var(--it-font);
    color: var(--it-text);
}

.it-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    min-width: 30px;
    padding: 0 10px;
    border-radius: 10px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.6) 0%,
            rgba(255,255,255,0.18) 48%,
            rgba(0,0,0,0.04) 50%,
            rgba(255,255,255,0.22) 100%),
        linear-gradient(180deg, #fafafa, #cccccc);
    border: 1px solid #7a7a7a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.2);
    color: var(--it-text);
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    font: 700 11px/1 var(--it-font);
    text-decoration: none;
    cursor: pointer;
}
.it-pill:disabled,
.it-pill[disabled] { opacity: 0.45; cursor: default; }
.it-pill:hover:not(:disabled):not(.is-active) { filter: brightness(1.05); }
.it-pill:active:not(:disabled) { box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
.it-pill:focus-visible {
    outline: 2px solid var(--it-aqua-2);
    outline-offset: 2px;
}
.it-pill.is-active {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.1)),
        linear-gradient(180deg, var(--it-aqua-1), var(--it-aqua-2));
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
    border-color: var(--it-aqua-3);
}
.it-pill--plus { width: 26px; min-width: 0; padding: 0; font-size: 16px; }
.it-pill svg { display: block; }

/* Invisible spacer that stands in for the "+" pill when the visitor is
   not logged in. Keeps the centered summary text visually aligned. */
.it-pill-spacer {
    display: inline-block;
    width: 26px;
    height: 20px;
}

.it-pill-group {
    display: inline-flex;
    gap: 0;
}
.it-pill-group .it-pill {
    border-radius: 0;
    margin-left: -1px;
}
.it-pill-group .it-pill:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.it-pill-group .it-pill:last-child  { border-radius: 0 10px 10px 0; }

.it-statusbar-summary {
    flex: 1;
    text-align: center;
    color: var(--it-text-mute);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.it-statusbar-summary strong { color: var(--it-text); font-weight: 700; }

.it-statusbar-tray {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.it-clock {
    font: 12px/1 "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--it-text);
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    padding: 0 4px;
}

/* =========================================================
   6. NEOCITIES STRIP (below the window)
   ========================================================= */

.it-neocities {
    max-width: 1180px;
    margin: 18px auto 0;
    padding: 0 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    color: #ffd2e4;
    font: 11px/1.4 "Comic Sans MS", "Chalkboard SE", var(--it-font);
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.it-vinyl {
    width: 28px; height: 28px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at center,
            transparent 0px, transparent 2px,
            rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 3px),
        radial-gradient(circle at center,
            #c8c8c8 0%, #c8c8c8 16%,
            #d63a23 17%, #d63a23 25%,
            #1a1a1a 26%, #1a1a1a 100%);
    box-shadow: inset 0 0 0 1px #000, 0 1px 2px rgba(0,0,0,0.6);
    animation: it-spin 2.6s linear infinite;
    flex-shrink: 0;
}
@keyframes it-spin { to { transform: rotate(360deg); } }

.it-signoff {
    color: #ffd2e4;
    font-style: italic;
    flex: 1;
    min-width: 200px;
}
.it-heart { color: #ff5b8d; font-style: normal; }

.it-blinkie {
    display: inline-block;
    padding: 3px 8px;
    background: #000;
    color: #00ff66;
    border: 1px solid #00ff66;
    font: 700 9.5px/1 "Courier New", monospace;
    letter-spacing: 0.06em;
    animation: it-blink 1.1s steps(2, end) infinite;
    text-shadow: 0 0 4px #00ff66;
}
@keyframes it-blink { 50% { opacity: 0.15; } }

.it-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffce6b;
    font: 700 11px/1 var(--it-font);
    text-shadow: 0 0 6px rgba(255,180,60,0.5), 0 1px 1px rgba(0,0,0,0.7);
}
.it-counter-digits {
    display: inline-block;
    padding: 2px 8px;
    background: #111;
    color: #ff4d4d;
    font: 700 13px/1 "Courier New", monospace;
    border: 2px inset #777;
    border-radius: 3px;
    text-shadow: 0 0 4px rgba(255,80,80,0.8);
    letter-spacing: 0.12em;
}

/* =========================================================
   7. AQUA BUTTONS (legacy .nt-button reused)
   ========================================================= */

.nt-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 16px;
    border-radius: 13px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.6) 0%,
            rgba(255,255,255,0.18) 48%,
            rgba(0,0,0,0.04) 50%,
            rgba(255,255,255,0.22) 100%),
        linear-gradient(180deg, #fafafa, #cccccc);
    border: 1px solid #7a7a7a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.2);
    color: var(--it-text);
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    font: 600 12px/1 var(--it-font);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--it-font);
}
.nt-button:hover { filter: brightness(1.05); }
.nt-button:active { box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
.nt-button:focus-visible {
    outline: 2px solid var(--it-aqua-2);
    outline-offset: 2px;
}
.nt-button.is-active,
.nt-button--primary {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.55) 0%,
            rgba(255,255,255,0.15) 48%,
            rgba(0,0,0,0.05) 50%,
            rgba(255,255,255,0.2) 100%),
        linear-gradient(180deg, var(--it-aqua-1), var(--it-aqua-2));
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
    border-color: var(--it-aqua-3);
}
.nt-button .nt-icon { flex-shrink: 0; }

/* =========================================================
   8. SEGMENTED CONTROL (category view toggle)
   ========================================================= */

.it-segctrl {
    display: inline-flex;
    margin: 0 0 16px;
    border-radius: 13px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.2);
    overflow: hidden;
}
.it-segctrl-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 14px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.55) 0%,
            rgba(255,255,255,0.15) 48%,
            rgba(0,0,0,0.04) 50%,
            rgba(255,255,255,0.2) 100%),
        linear-gradient(180deg, #fafafa, #cccccc);
    border: 1px solid #7a7a7a;
    border-right: 0;
    color: var(--it-text);
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    font: 600 12px/1 var(--it-font);
    text-decoration: none;
}
.it-segctrl-opt:first-child { border-radius: 13px 0 0 13px; }
.it-segctrl-opt:last-child  { border-radius: 0 13px 13px 0; border-right: 1px solid #7a7a7a; }
.it-segctrl-opt:hover { filter: brightness(1.05); }
.it-segctrl-opt.is-active {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.10)),
        linear-gradient(180deg, var(--it-aqua-1), var(--it-aqua-2));
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
    border-color: var(--it-aqua-3);
}

/* =========================================================
   9. HOMEPAGE
   ========================================================= */

.it-home {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ----- Featured hero ----- */

.it-hero {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 22px;
    padding: 18px;
    background: linear-gradient(180deg, #f4f7fb 0%, #e3e9f1 100%);
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 #ffffff;
}
.it-hero-cover {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 6px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.35),
        0 12px 28px rgba(0,0,0,0.28),
        0 3px 6px rgba(0,0,0,0.18);
    background: linear-gradient(135deg, #4a78b4, #2c4d6d);
}
.it-hero-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.it-hero-cover-fallback {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.it-hero-cover-fallback .nt-icon { width: 60%; height: 60%; }

.it-hero-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.it-hero-eyebrow {
    font: 600 11px/1.2 var(--it-font);
    color: var(--it-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}
.it-hero-eyebrow a { color: var(--it-aqua-2); text-decoration: none; }
.it-hero-eyebrow a:hover { text-decoration: underline; }
.it-hero-eyebrow-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--it-aqua-1), var(--it-aqua-2));
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    font-size: 10px;
    letter-spacing: 0.06em;
    margin-right: 4px;
}
.it-hero-title {
    margin: 0 0 8px;
    font: 700 26px/1.2 var(--it-font);
    color: var(--it-text);
    letter-spacing: -0.01em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.it-hero-title a { color: inherit; text-decoration: none; }
.it-hero-title a:hover { color: var(--it-aqua-2); }
.it-hero-excerpt {
    margin: 0 0 14px;
    font: 13px/1.5 var(--it-font);
    color: var(--it-text);
    max-width: 56ch;
}
.it-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ----- Row container (recent, related, etc) ----- */

.it-row { margin: 0; }
.it-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 10px;
    padding: 0;
    border-bottom: 1px solid var(--it-divider);
    padding-bottom: 6px;
}
.it-row-head h2 {
    margin: 0;
    font: 700 14px/1 var(--it-font);
    color: var(--it-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.it-row-more {
    font: 600 11.5px/1 var(--it-font);
    color: var(--it-aqua-2);
    text-decoration: none;
}
.it-row-more:hover { text-decoration: underline; }

.it-row-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.it-row-scroll::-webkit-scrollbar { height: 8px; }
.it-row-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
}

/* ----- Cover tile (used in row scroll) ----- */

.it-cover-tile {
    flex-shrink: 0;
    width: 140px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--it-text);
    scroll-snap-align: start;
    transition: transform .12s ease;
}
.it-cover-tile:hover { transform: translateY(-2px); }
.it-cover-tile:hover .it-cover {
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.4),
        0 8px 18px rgba(0,0,0,0.32),
        0 2px 5px rgba(0,0,0,0.2);
}
.it-cover {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.35),
        0 4px 10px rgba(0,0,0,0.22),
        0 1px 3px rgba(0,0,0,0.18);
    background: linear-gradient(135deg, var(--cat-default-1), var(--cat-default-2));
    margin-bottom: 6px;
    position: relative;
}
.it-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.it-cover-fallback {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
}
.it-cover-fallback .nt-icon { width: 50%; height: 50%; }

/* Per-category cover hue (data-cat="artists" etc) */
.it-cover[data-cat="artists"],    .it-cover[data-cat="performers"]    { background: linear-gradient(135deg, var(--cat-artists-1), var(--cat-artists-2)); }
.it-cover[data-cat="events"]      { background: linear-gradient(135deg, var(--cat-events-1), var(--cat-events-2)); }
.it-cover[data-cat="glossary"]    { background: linear-gradient(135deg, var(--cat-glossary-1), var(--cat-glossary-2)); }
.it-cover[data-cat="history"]     { background: linear-gradient(135deg, var(--cat-history-1), var(--cat-history-2)); }
.it-cover[data-cat="friends"]     { background: linear-gradient(135deg, var(--cat-friends-1), var(--cat-friends-2)); }
.it-cover[data-cat="zaidimai"]    { background: linear-gradient(135deg, var(--cat-zaidimai-1), var(--cat-zaidimai-2)); }
.it-cover[data-cat="depozito-departamentas"]    { background: linear-gradient(135deg, var(--cat-depozito-1), var(--cat-depozito-2)); }
.it-cover[data-cat="scenografijos-departamentas"] { background: linear-gradient(135deg, var(--cat-scenografijos-1), var(--cat-scenografijos-2)); }

.it-cover-title {
    font: 600 12px/1.25 var(--it-font);
    color: var(--it-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}
.it-cover-meta {
    font: 11px/1.25 var(--it-font);
    color: var(--it-text-mute);
    margin-top: 2px;
}

/* ----- Category grid ----- */

.it-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 22px 18px;
    padding: 4px 0;
}
.it-cat-tile {
    text-align: center;
    text-decoration: none;
    color: var(--it-text);
    transition: transform .12s ease;
}
.it-cat-tile:hover { transform: translateY(-2px); }
.it-cat-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--cat-default-1), var(--cat-default-2));
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.35),
        0 8px 18px rgba(0,0,0,0.26),
        0 2px 5px rgba(0,0,0,0.2);
    margin-bottom: 8px;
    overflow: hidden;
}
.it-cat-cover .nt-icon {
    width: 56%;
    height: 56%;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.it-cat-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.it-cat-cover.has-photo .it-cat-badge {
    z-index: 1;
}
.it-cat-cover[data-cat="artists"],    .it-cat-cover[data-cat="performers"]    { background: linear-gradient(135deg, var(--cat-artists-1), var(--cat-artists-2)); }
.it-cat-cover[data-cat="events"]      { background: linear-gradient(135deg, var(--cat-events-1), var(--cat-events-2)); }
.it-cat-cover[data-cat="glossary"]    { background: linear-gradient(135deg, var(--cat-glossary-1), var(--cat-glossary-2)); }
.it-cat-cover[data-cat="history"]     { background: linear-gradient(135deg, var(--cat-history-1), var(--cat-history-2)); }
.it-cat-cover[data-cat="friends"]     { background: linear-gradient(135deg, var(--cat-friends-1), var(--cat-friends-2)); }
.it-cat-cover[data-cat="zaidimai"]    { background: linear-gradient(135deg, var(--cat-zaidimai-1), var(--cat-zaidimai-2)); }
.it-cat-cover[data-cat="depozito-departamentas"]    { background: linear-gradient(135deg, var(--cat-depozito-1), var(--cat-depozito-2)); }
.it-cat-cover[data-cat="scenografijos-departamentas"] { background: linear-gradient(135deg, var(--cat-scenografijos-1), var(--cat-scenografijos-2)); }

.it-cat-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font: 700 11px/20px var(--it-font);
    text-align: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.it-cat-name {
    font: 700 14px/1.2 var(--it-font);
    color: var(--it-text);
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.it-cat-count {
    font: 11px/1.3 var(--it-font);
    color: var(--it-text-mute);
    margin-top: 2px;
}

/* =========================================================
   10. ALERT PANEL (404, error)
   ========================================================= */

.it-alert {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
        "icon body"
        "actions actions";
    gap: 14px 20px;
    align-items: start;
    max-width: 560px;
    margin: 24px auto;
    padding: 24px 26px 20px;
    background: linear-gradient(180deg, #f7faff 0%, #e3eaf3 100%);
    border: 1px solid rgba(0,0,0,0.45);
    border-radius: 10px;
    box-shadow:
        0 16px 40px rgba(0,0,0,0.35),
        0 4px 12px rgba(0,0,0,0.18);
}
.it-alert-icon { grid-area: icon; }
.it-alert-body { grid-area: body; min-width: 0; }
.it-alert-body h1 {
    margin: 0 0 6px;
    font: 700 18px/1.2 var(--it-font);
    color: var(--it-text);
}
.it-alert-body p { margin: 0 0 6px; font: 13px/1.5 var(--it-font); color: var(--it-text); }
.it-alert-body code {
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    padding: 1px 5px;
    font: 12px/1.4 "SF Mono", Menlo, Consolas, monospace;
}
.it-alert-sub { color: var(--it-text-mute) !important; }
.it-alert-actions {
    grid-area: actions;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.it-body--standalone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}
.it-alert--standalone { margin: 0; }

/* =========================================================
   11. ARTICLE CONTENT polish (typography + iTunes touches)
   ========================================================= */

.wiki-content .article-breadcrumb {
    background: linear-gradient(180deg, #f4f7fb, #e3e9f1) !important;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 #ffffff !important;
    color: var(--it-text-mute);
    font: 11.5px/1.4 var(--it-font);
    padding: 5px 10px;
}
.article-breadcrumb a { color: var(--it-aqua-2); }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb-current { color: var(--it-text); }

/* On narrow viewports the breadcrumb is dropped: the sidebar is
   collapsed behind the burger menu so it's not a sibling navigation
   aid, the article title already names where you are, and the wide
   gradient strip eats valuable vertical real estate above the hero. */
@media (max-width: 880px) {
    .wiki-content .article-breadcrumb { display: none; }
}

.article-title,
.article-hero-name {
    font-family: var(--it-font) !important;
    color: var(--it-text);
    letter-spacing: -0.01em;
}

.article-content {
    font-family: var(--it-font);
    color: var(--it-text);
}
.article-content h2,
.article-content h3,
.article-content h4 {
    font-family: var(--it-font);
    color: var(--it-text);
    letter-spacing: -0.01em;
}
.article-content h2 {
    border-bottom: 1px solid var(--it-divider);
    padding-bottom: 4px;
}
.article-content a,
.wiki-link {
    color: var(--it-aqua-2);
    text-decoration: none;
}
.article-content a:hover,
.wiki-link:hover { text-decoration: underline; }
.wiki-link-missing { color: #b54040; }

/* Facts panel / table */
.article-facts-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    overflow: hidden;
    font-family: var(--it-font);
}
.article-facts-table th,
.article-facts-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #e3e3e3;
    font-size: 11.5px;
    line-height: 1.4;
}
.article-facts-table th {
    text-align: right;
    background: linear-gradient(180deg, #f4f4f4, #e6e6e6);
    color: #4a4a4a;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    border-right: 1px solid #c8c8c8;
    width: 38%;
}
.article-facts-table td { background: #fff; color: var(--it-text); }
.article-facts-table tr:last-child th,
.article-facts-table tr:last-child td { border-bottom: 0; }

.article-table {
    border: 1px solid #c8c8c8;
    border-collapse: collapse;
    font-family: var(--it-font);
}
.article-table th {
    background: linear-gradient(180deg, #f4f4f4, #d8d8d8);
    color: #4a4a4a;
    border-right: 1px solid #b8b8b8;
    border-bottom: 1px solid #9a9a9a;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    padding: 5px 10px;
    text-align: left;
}
.article-table tbody td { padding: 5px 10px; border-bottom: 1px solid #e3e3e3; }
.article-table tbody tr:nth-child(odd) td { background: #fff; }
.article-table tbody tr:nth-child(even) td { background: var(--it-row-zebra); }

/* Article hero (non-artist generic) */
.article-hero {
    background: linear-gradient(180deg, #f4f7fb 0%, #e3e9f1 100%);
    border: 1px solid #c4c4c4;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 #ffffff;
    padding: 16px;
}
.article-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--it-aqua-1), var(--it-aqua-2));
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    border: 1px solid var(--it-aqua-3);
    font: 600 11px/1.4 var(--it-font);
    text-decoration: none;
}

.article-description-header {
    background: linear-gradient(180deg, #f4f4f4, #e0e0e0);
    border: 1px solid #c8c8c8;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    padding: 5px 10px;
    font: 700 11px/1 var(--it-font);
    text-transform: uppercase;
    color: var(--it-src-label);
    letter-spacing: 0.04em;
    display: flex;
    gap: 6px;
    align-items: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.article-description { margin: 18px 0; }
.article-description > .article-content {
    border: 1px solid #c8c8c8;
    border-top: 0;
    border-radius: 0 0 3px 3px;
    padding: 14px 16px;
    background: #fff;
}

/* Article statusbar (per-page footer cells) */
.article-statusbar { margin-top: 20px; }
.nt-statusbar {
    background: linear-gradient(180deg, #fafafa, #e6e6e6);
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    padding: 4px;
    gap: 4px;
    font: 11px/1.3 var(--it-font);
    color: var(--it-text-mute);
    display: flex;
    align-items: stretch;
}
.nt-statusbar-cell {
    flex: 1;
    background: transparent;
    box-shadow: none;
    padding: 2px 8px;
    border-right: 1px solid rgba(0,0,0,0.08);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nt-statusbar-cell:last-child { border-right: 0; }
.nt-statusbar-cell--grow { flex: 2; }

/* =========================================================
   12. LINKTREE-STYLE STACK on artist page (kept as-is)
   ========================================================= */

.nt-linkbtn-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}
.nt-linkbtn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.55) 0%,
            rgba(255,255,255,0.15) 48%,
            rgba(0,0,0,0.05) 50%,
            rgba(255,255,255,0.2) 100%),
        linear-gradient(180deg, #fafafa, #d8d8d8);
    border: 1px solid #7a7a7a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 2px 6px rgba(0,0,0,0.18);
    color: var(--it-text);
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    font: 600 13px/1.2 var(--it-font);
    text-decoration: none;
    transition: filter .12s ease, transform .08s ease;
}
.nt-linkbtn:hover { filter: brightness(1.05); }
.nt-linkbtn:active { transform: translateY(1px); }
.nt-linkbtn-icon {
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 1px 2px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.nt-linkbtn-label { font: 700 14px/1.2 var(--it-font); color: var(--it-text); }
.nt-linkbtn-sub   { font: 11.5px/1.3 var(--it-font); color: var(--it-text-mute); text-shadow: none; }
.nt-linkbtn-chevron { margin-left: auto; color: var(--it-text-mute); opacity: 0.6; }

/* =========================================================
   13. LEGACY TILES (.nt-tile) - used in 404 suggestions and
   the article-tiles related-content groups. Tiles are bigger
   here than in iTunes proper so event posters and artist
   photos are legible; `object-fit: contain` keeps the full
   image visible (no head-cropped portraits, no clipped
   poster lettering). To avoid the blue iTunes gradient
   bleeding around letterboxed photos, tiles that actually
   wrap an <img> get a neutral cream/aluminum background;
   icon-only (svg) tiles keep the classic aqua gradient.
   ========================================================= */

.nt-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px 16px;
    padding: 4px 0;
}
.nt-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--it-text);
    padding: 4px;
    border-radius: 6px;
    transition: transform .12s ease;
}
.nt-tile:hover { transform: translateY(-1px); background: rgba(110,161,224,0.10); }
/* NOTE: `height: auto` is critical here. wiki-style.css still ships
   the legacy `.nt-tile-icon { width: 48px; height: 48px }` rule for
   pre-iTunes call sites, and the 48px height *wins* over our
   aspect-ratio unless we explicitly reset it. Without `height: auto`
   the box collapses to a 48px-tall flat strip, the aspect-ratio gets
   ignored entirely (both dimensions explicit), and `object-fit:
   contain` ends up scaling posters down to ~48px so they swim in a
   sea of letterbox background. */
.nt-tile-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    margin-bottom: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(135deg, #4a78b4, #2c4d6d);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.35),
        0 6px 14px rgba(0,0,0,0.25),
        0 2px 4px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
/* Photos use `cover` so the artwork fills the whole square the
   way iTunes album art does - no awkward cream/black bands around
   a tiny floating poster. We accept a small crop on the long edge
   of non-square posters; cropped edge pixels are virtually always
   background, not the event name. */
.nt-tile-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-tile-icon svg { width: 56%; height: 56%; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.nt-tile--on-light .nt-tile-icon {
    background: linear-gradient(135deg, #f0f4fa, #cdd8e6);
    color: var(--it-aqua-2);
}
.nt-tile-label {
    font: 600 12px/1.25 var(--it-font);
    color: var(--it-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}
.nt-tile-meta {
    display: block;
    font: 11px/1.2 var(--it-font);
    color: var(--it-text-mute);
    margin-top: 2px;
}

/* =========================================================
   14. SEARCH-PAGE big input
   ========================================================= */

.search-form-large { margin: 0 0 18px; display: flex; gap: 8px; }
.search-input-large {
    flex: 1;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #e6e6e6);
    border: 1px solid #7a7a7a;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.18),
        0 1px 0 rgba(255,255,255,0.4);
    font: 13px/1 var(--it-font);
    color: var(--it-text);
}
.search-input-large:focus {
    outline: 0;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.18),
        0 0 0 3px rgba(110,161,224,0.45);
}
.search-btn-large {
    height: 32px;
    padding: 0 20px;
    border-radius: 16px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.55) 0%,
            rgba(255,255,255,0.15) 48%,
            rgba(0,0,0,0.05) 50%,
            rgba(255,255,255,0.2) 100%),
        linear-gradient(180deg, var(--it-aqua-1), var(--it-aqua-2));
    border: 1px solid var(--it-aqua-3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.2);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
    font: 700 13px/1 var(--it-font);
    cursor: pointer;
}

/* "/" keyboard shortcut hint, injected by assets/js/main.js next to the
   big search input on /search. Hidden on narrow screens where there is
   no physical keyboard. */
.search-form-large .search-hint {
    align-self: center;
    margin-left: 4px;
    font: 11px/1 var(--it-font);
    color: var(--it-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    user-select: none;
}
@media (max-width: 880px) {
    .search-form-large .search-hint { display: none; }
}

/* =========================================================
   15. CATEGORY-PAGE polish
   ========================================================= */

.category-stats { color: var(--it-text-mute); font: 11.5px/1.4 var(--it-font); margin: 6px 0 12px; }
.category-description { color: var(--it-text-mute); font: 12px/1.5 var(--it-font); margin: 4px 0 12px; }
.category-folder { padding-top: 4px; }

.category-detail-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c8c8c8;
    font-family: var(--it-font);
}
.category-detail-table th,
.category-detail-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #e3e3e3;
    font-size: 12px;
}
.category-detail-table th {
    background: linear-gradient(180deg, #f4f4f4, #d8d8d8);
    color: #4a4a4a;
    text-align: left;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    border-right: 1px solid #b8b8b8;
    border-bottom: 1px solid #9a9a9a;
}
.category-detail-table tbody tr:nth-child(odd) td  { background: #ffffff; }
.category-detail-table tbody tr:nth-child(even) td { background: var(--it-row-zebra); }
.category-detail-table a { color: var(--it-aqua-2); text-decoration: none; }
.category-detail-table a:hover { text-decoration: underline; }

.no-articles { color: var(--it-text-mute); font: italic 12px/1.4 var(--it-font); }

/* =========================================================
   16. RESPONSIVE
   ========================================================= */

@media (max-width: 880px) {
    body.wiki-body { padding: 10px 6px 40px; }

    .wiki-wrapper { border-radius: 8px; }

    .it-titlebar-text { font-size: 11px; }

    .it-toolbar { padding: 6px 8px; gap: 6px; }
    .it-search input[type="text"] { width: 140px; }

    .wiki-container { flex-direction: column; }
    /* `display: block` is critical here: wiki-style.css ships a
       legacy `@media (max-width: 768px) { .wiki-sidebar { display: none } }`
       rule that hides the sidebar outright on phones. Even though we
       slide our drawer in via position:fixed + left:0, `display: none`
       from the legacy rule still applies (different property, doesn't
       cascade-override) and the drawer never paints. Setting display
       explicitly here cancels that override so the burger menu works. */
    .wiki-sidebar {
        display: block;
        position: fixed;
        top: 0; left: -260px;
        bottom: 0;
        width: 240px;
        z-index: 100;
        overflow-y: auto;
        transition: left .22s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,0.4);
        border-right: 1px solid var(--it-src-edge);
    }
    .wiki-sidebar.is-open { left: 0; }
    .it-burger { display: inline-flex; }

    .wiki-content { padding: 16px 14px 24px; }

    .it-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px;
    }
    .it-hero-cover { max-width: 220px; }
    .it-hero-title { font-size: 22px; }

    .it-cover-tile { width: 120px; }
    .it-cat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

    .it-neocities { font-size: 10px; gap: 8px; }
    .it-vinyl { width: 22px; height: 22px; }

    .it-statusbar-summary { font-size: 10px; }
}

@media (max-width: 520px) {
    .it-blinkie { display: none; }
    .it-counter { font-size: 10px; }
    .it-counter-digits { font-size: 11px; }
    .it-titlebar-text { font-size: 10px; }
    .it-toolbar-nav { display: none; }
    .it-search input[type="text"] { width: 110px; font-size: 11px; }
}

/* =========================================================
   ARTIST PAGE - "ONE iTUNES WINDOW" LAYOUT
   The artist page is rendered as a single, self-contained Y2K iTunes
   application window: aqua-pinstripe titlebar, brushed-aluminum tool
   row (transport + LCD + volume), a 2-column body (album art + Get
   Info inspector | numbered track list = linktree), and a status bar
   along the bottom. Everything reads as ONE chrome surface.
   ========================================================= */

/* Reset whatever the generic article hero was doing - we're drawing
   our own window chassis from scratch. */
.wiki-article--artist .article-hero--itunes.it-window {
    box-sizing: border-box;
    width: 100%;
    margin: 4px 0 28px;
    padding: 0;
    gap: 0;
    background: linear-gradient(180deg, #e8eaee 0%, #cdd1d8 100%);
    border: 1px solid #4a4f59;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65),
        0 1px 0 rgba(0,0,0,0.05),
        0 16px 36px rgba(0,0,0,0.32),
        0 4px 10px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    /* Reset the inherited align-items:center / text-align:center from the
       base .article-hero rule - the iTunes window stretches its sections
       (titlebar, toolbar, body, statusbar) to its full width, and aligns
       text on a per-section basis. */
    align-items: stretch;
    text-align: left;
    overflow: hidden;
    color: var(--it-text);
    font-family: "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
}
/* Belt-and-braces: every immediate child of the window fills horizontally
   so the chrome reads as one continuous surface even if some upstream
   rule reintroduces flex alignment. */
.wiki-article--artist .article-hero--itunes.it-window > .it-window-bar,
.wiki-article--artist .article-hero--itunes.it-window > .it-window-toolbar,
.wiki-article--artist .article-hero--itunes.it-window > .it-window-body,
.wiki-article--artist .article-hero--itunes.it-window > .it-window-status {
    box-sizing: border-box;
    width: 100%;
    align-self: stretch;
}

/* ---------- 1. Titlebar: aqua pinstripes + traffic lights + title ---------- */

.it-window .it-window-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    background:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 1px,
            rgba(0,0,0,0.05)        1px, rgba(0,0,0,0.05)        2px),
        linear-gradient(180deg, #ededed 0%, #c3c6cc 50%, #aeb1b9 100%);
    border-bottom: 1px solid #6c707a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    flex-shrink: 0;
}

.it-window .it-window-bar .it-traffic-lights {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
    z-index: 2;
}
.it-window .it-window-bar .it-tl {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -2px 2px rgba(0,0,0,0.25);
}
.it-window .it-window-bar .it-tl--close { background: radial-gradient(circle at 35% 30%, #ff9a8a, #d63a23 70%); }
.it-window .it-window-bar .it-tl--min   { background: radial-gradient(circle at 35% 30%, #ffe17a, #d6a300 70%); }
.it-window .it-window-bar .it-tl--zoom  { background: radial-gradient(circle at 35% 30%, #b8ee82, #2c8a18 70%); }

/* Title sits centered in the WHOLE bar but is capped at calc(100% -
   160px) so it never reaches into the traffic-lights cluster, even on
   narrow viewports. Long titles get an ellipsis. */
.it-window .it-window-bar-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    max-width: calc(100% - 160px);
    padding: 0 8px;
    font: 700 12px/1 "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
    color: #2c2c2c;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
}
.it-window .it-window-bar-note {
    color: #2c2c2c;
    flex-shrink: 0;
}
.it-window .it-window-bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ---------- 2. Toolbar: transport + LCD readout + volume ---------- */

.it-window .it-window-toolbar {
    --it-vol: 55%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 1px,
            rgba(0,0,0,0.035)      1px, rgba(0,0,0,0.035)      2px),
        linear-gradient(180deg, #e3e6ea 0%, #c6cad1 55%, #b0b4bc 100%);
    border-bottom: 1px solid #757a83;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(0,0,0,0.08);
    flex-shrink: 0;
}

/* Transport buttons cluster (prev / play / next) - aqua-flavored gels */
.it-window .it-transport {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.it-window .it-transport-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.it-window .it-tbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #6e7480;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 28%, #fafbfd 0%, #d6dbe2 60%, #aab1bb 100%);
    color: #2c3340;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform 80ms ease-out, box-shadow 80ms ease-out, filter 80ms ease-out;
    -webkit-appearance: none;
    appearance: none;
}
.it-window .it-tbtn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 2px 4px rgba(0,0,0,0.32);
}
.it-window .it-tbtn:active {
    transform: translateY(0);
    filter: brightness(0.92);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.35),
        inset 0 -1px 0 rgba(255,255,255,0.4);
}
.it-window .it-tbtn:focus-visible {
    outline: 2px solid var(--it-aqua-2);
    outline-offset: 2px;
}
.it-window .it-tbtn--play {
    width: 38px;
    height: 38px;
    background: radial-gradient(circle at 50% 24%, #ffffff 0%, #d8dde5 55%, #9aa1ad 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(0,0,0,0.16),
        0 2px 4px rgba(0,0,0,0.3);
}
.it-window .it-tbtn--play .it-tbtn-glyph { width: 18px; height: 18px; }
.it-window .it-tbtn.is-pulsing { animation: it-tbtn-pulse 280ms ease-out; }
@keyframes it-tbtn-pulse {
    0%   { transform: scale(0.92); filter: brightness(0.92); }
    45%  { transform: scale(1.05); filter: brightness(1.1);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.95),
                0 2px 8px rgba(110,160,220,0.55); }
    100% { transform: scale(1); filter: brightness(1); }
}
.it-window .it-tbtn--play .it-tbtn-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 120ms ease-out;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.6));
}
.it-window .it-tbtn--play .it-tbtn-glyph--play  { opacity: 1; }
.it-window .it-tbtn--play .it-tbtn-glyph--pause { opacity: 0; }
.it-window .it-tbtn--play[aria-pressed="true"] .it-tbtn-glyph--play  { opacity: 0; }
.it-window .it-tbtn--play[aria-pressed="true"] .it-tbtn-glyph--pause { opacity: 1; }
.it-window .it-transport[data-it-state="playing"] .it-tbtn--play {
    animation: it-tbtn-glow 1.6s ease-in-out infinite;
}
@keyframes it-tbtn-glow {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.95),
            inset 0 -1px 0 rgba(0,0,0,0.16),
            0 2px 4px rgba(0,0,0,0.3),
            0 0 0 0 rgba(110,161,224,0);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.95),
            inset 0 -1px 0 rgba(0,0,0,0.16),
            0 2px 4px rgba(0,0,0,0.3),
            0 0 12px 2px rgba(110,161,224,0.55);
    }
}

/* LCD readout - wide pill, beige glass with the note icon, marquee
   title, subtitle, elapsed/progress/remaining row underneath. */
.it-window .it-display {
    margin: 0;
    padding: 2px;
    background: linear-gradient(180deg, #b1a880 0%, #8c8458 100%);
    border-radius: 14px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5),
        0 2px 4px rgba(0,0,0,0.18);
    min-width: 0;
}
.it-window .it-display-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 2px;
    padding: 6px 14px 7px 12px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.55) 0%,
            rgba(255,255,255,0.05) 38%,
            rgba(0,0,0,0.04) 100%),
        linear-gradient(180deg, #f5efd4 0%, #e3d8a0 100%);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        inset 0 0 0 1px rgba(120,108,72,0.45);
    color: #2c2418;
    align-items: center;
    min-width: 0;
}
.it-window .it-display-icon {
    grid-row: 1 / span 2;
    align-self: center;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #cabf8a, #968a4d);
    border: 1px solid #6b6232;
    color: #f5efd4;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 1px 0 rgba(255,255,255,0.4);
    flex-shrink: 0;
}
/* Retro LCD typography. The whole display swaps Lucida for VT323,
   a Google Font that emulates a 1970s/80s CRT terminal - chunky
   pixel-stroke letters with a faint glow that read like the dot
   matrix of an iPod Classic or an iTunes 4-era LCD readout. Used
   on BOTH the normal article view and the maximized share view so
   the player chrome feels consistently retro everywhere. */
.it-window .it-display-text {
    min-width: 0;
    overflow: hidden;
    text-align: left;
}
.it-window .it-display-track,
.it-window .it-display .article-hero-name {
    margin: 0;
    font: 400 22px/1 var(--it-font-retro);
    color: #2a1f08;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.55),
        0 0 4px rgba(196,140,38,0.45);
    overflow: hidden;
    white-space: nowrap;
}
/* Classic single-copy iPod marquee. The title starts off-screen to
   the right of the LCD (achieved with padding-left: 100%, which
   pushes the text past the readout's right edge), slides leftward
   across the readout, then exits off the left. Because both the
   start position (just past right edge) and the end position (just
   past left edge) are off-screen, the animation loops without a
   visible jump - the text simply "re-enters" from the right. The
   second pre-rendered copy from PHP is hidden; we only need one.
   Hovering the LCD pauses the scroll so visitors can pin a long
   title in place to read it. */
.it-window .it-display-track-marquee {
    display: inline-block;
    padding-left: 100%;
    will-change: transform;
    animation: it-display-marquee 14s linear infinite;
}
.it-window .it-display-track-text {
    display: inline-block;
    flex-shrink: 0;
}
.it-window .it-display-track-text + .it-display-track-text {
    display: none;
}
.it-window .it-display:hover .it-display-track-marquee {
    animation-play-state: paused;
}
@keyframes it-display-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .it-window .it-display-track-marquee {
        animation: none;
        transform: none;
        padding-left: 0;
    }
}
.it-window .it-display-sub {
    margin: 0;
    font: 400 14px/1.1 var(--it-font-retro);
    color: #6b5325;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.it-window .it-display-meta {
    grid-column: 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.it-window .it-display-time {
    font: 400 14px/1 var(--it-font-retro);
    color: #5c4218;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    min-width: 32px;
    text-align: center;
}
.it-window .it-display-time--remaining { text-align: right; }
.it-window .it-display-bar {
    position: relative;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, #9d9259 0%, #7b7140 100%);
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.35),
        0 1px 0 rgba(255,255,255,0.4);
    overflow: hidden;
}
/* Width is driven by JS (paintProgress) while playing; defaults to 0
   while paused so the LCD reads as "stopped at the start of the song". */
.it-window .it-display-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(180deg, #f8efb0 0%, #c9b766 100%);
    box-shadow: 0 0 4px rgba(248,239,176,0.7);
    border-radius: 3px 0 0 3px;
    transition: width 220ms linear;
}

/* Volume slider - aqua fill with chrome thumb */
.it-window .it-volume {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 110px;
    max-width: 180px;
    color: #4a5160;
}
.it-window .it-volume-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #4a5160;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.it-window .it-volume-track {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(180deg, #9aa1ad 0%, #c2c8d2 100%);
    border: 1px solid #707782;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    cursor: pointer;
    touch-action: none;
}
.it-window .it-volume-track:focus-visible {
    outline: 2px solid var(--it-aqua-2);
    outline-offset: 2px;
}
.it-window .it-volume-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--it-vol);
    background: linear-gradient(180deg, #6ea1e0 0%, #2c4d6d 100%);
    border-radius: 3px 0 0 3px;
}
.it-window .it-volume-thumb {
    position: absolute;
    top: 50%;
    left: var(--it-vol);
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 28%, #ffffff 0%, #dde2ea 60%, #9aa1ad 100%);
    border: 1px solid #6f7680;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    transition: transform 100ms ease-out;
    pointer-events: none;
}
.it-window .it-volume-track:hover .it-volume-thumb,
.it-window .it-volume-track:active .it-volume-thumb,
.it-window .it-volume-track:focus-visible .it-volume-thumb {
    transform: translate(-50%, -50%) scale(1.18);
}

/* ---------- 3. Window body: source pane + tracks pane ---------- */

.it-window .it-window-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: stretch;
    background: #ffffff;
    flex: 1;
    min-height: 0;
}

/* Left pane: brushed source list look with the album art well at the
   top and the "Get Info" facts list underneath as one continuous strip
   (no nested cards). */
.it-window .it-source {
    padding: 12px;
    background: linear-gradient(180deg, var(--it-src-top) 0%, var(--it-src-bot) 100%);
    border-right: 1px solid var(--it-src-edge);
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.45);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Album art sits inside the source pane as a flush square with just a
   1px hairline at the bottom to separate it from the info section
   beneath. No own shadow/border so it doesn't read as a button - it
   reads as iTunes album-art real estate inside the sidebar. */
.it-window .it-source-art {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    background: #d4d0c8;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
    position: relative;
}
.it-window .it-source-art img,
.it-window .it-source-art .article-hero-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: transparent;
    border-radius: 0;
}
.it-window .it-source-art .article-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.35);
    background: linear-gradient(180deg, #d8d4c4 0%, #b3aea0 100%);
}
.it-window .it-source-art .article-hero-placeholder svg {
    width: 72%;
    height: 72%;
    opacity: 0.78;
}
/* Glossy highlight strip across the top quarter of the album art */
.it-window .it-source-art::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 36%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.28) 0%,
        rgba(255,255,255,0) 100%);
    pointer-events: none;
}

/* "Get Info" section: flat on the sidebar background with just a top
   divider line and a small uppercase section heading. No framed card -
   the sidebar IS the card. */
.it-window .it-source-info {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    padding-top: 6px;
}
.it-window .it-source-info-header {
    padding: 0 2px 6px;
    font: 700 9.5px/1.2 "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--it-src-label);
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}
.it-window .it-source-info .article-facts {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* Facts table sits directly on the brushed sidebar surface as a
   key/value list. Labels stay on one line; values wrap. Subtle hairline
   between rows so the whole thing reads like the iTunes inspector. */
.it-window .it-source-info .article-facts-table {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    table-layout: auto;
    font: 11.5px/1.35 "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
}
.it-window .it-source-info .article-facts-table th {
    width: 1%;
    padding: 3px 6px 3px 2px;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    color: var(--it-src-label);
    font-weight: 700;
    text-align: right;
    text-shadow: 0 1px 0 rgba(255,255,255,0.55);
    vertical-align: top;
    white-space: nowrap;
}
.it-window .it-source-info .article-facts-table td {
    padding: 3px 2px 3px 6px;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    color: var(--it-text);
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.it-window .it-source-info .article-facts-table tr:first-child th,
.it-window .it-source-info .article-facts-table tr:first-child td {
    border-top: 0;
}

/* Right pane: the linktree as a numbered iTunes track list */
.it-window .it-tracks {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
}

/* Column header strip - a thin brushed gradient kept purely as a
   visual separator between the now-playing toolbar and the track
   rows. The text labels (Pavadinimas / Profilis) were dropped: the
   rows are self-describing (brand icon + service name + handle) so
   the labels are noise, and the previous version drifted out of
   alignment with the row data. The grid still mirrors the row grid
   1:1 (counter | art | name | handle) so the per-column hairline
   dividers line up between header and rows. The last column has no
   right border so the strip ends cleanly against the window edge. */
.it-window .it-tracks-header {
    display: grid;
    grid-template-columns: 36px 34px 1fr minmax(80px, 30%);
    align-items: center;
    height: 18px;
    padding: 0;
    background: linear-gradient(180deg, #d8dde6 0%, #b6bdc8 100%);
    border-bottom: 1px solid #8a93a0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
    flex-shrink: 0;
}
.it-window .it-tracks-col {
    height: 100%;
    border-right: 1px solid rgba(0,0,0,0.12);
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.45);
}
.it-window .it-tracks-col:last-child { border-right: 0; box-shadow: none; }

/* The link button stack becomes the track-list body. Row numbers are
   added via a CSS counter so the PHP markup doesn't need to change. */
.it-window .nt-linkbtn-stack {
    counter-reset: itunes-row;
    margin: 0;
    /* Reset the 520px cap + auto centering that wiki-style.css ships
       for the standalone (non-iTunes) link stack. Inside the track
       pane we want the stack to fill the entire pane edge-to-edge so
       rows align with the column header strip above them. */
    max-width: none;
    width: 100%;
    display: block;
    grid-template-columns: none;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}
.it-window .nt-linkbtn-stack::before { content: none; }

/* Each link button = one track row. Grid lines up 1:1 with the
   tracks-header above: counter (36px) | art (34px) | name (1fr) |
   handle (min 80px). The trailing chevron column was dropped so rows
   really fill the pane edge-to-edge. Row height is 34px so the
   brand-colored art square has room to be a proper iTunes-style
   thumbnail (28x28) instead of a 20px floating chip. */
.it-window .nt-linkbtn {
    counter-increment: itunes-row;
    position: relative;
    display: grid;
    grid-template-columns: 36px 34px 1fr minmax(80px, 30%);
    align-items: center;
    gap: 0;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #e8eaee;
    border-radius: 0;
    background: #ffffff;
    color: var(--it-text);
    box-shadow: none;
    overflow: hidden;
    transform: none;
    font-family: "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
    transition: background-color 80ms ease, color 80ms ease;
    text-decoration: none;
}

/* Row number column - rendered as a ::before pseudo with the counter */
.it-window .nt-linkbtn::before {
    content: counter(itunes-row);
    grid-column: 1;
    justify-self: center;
    font: 400 11px/1 "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
    color: var(--it-text-mute);
    text-align: center;
}
/* Current "now playing" track shows a play indicator instead of the number */
.it-window .nt-linkbtn.is-current::before {
    content: "\25B6";
    color: var(--it-aqua-2);
    font-size: 10px;
}
.it-window .nt-linkbtn.is-current.is-playing::before {
    color: #ffffff;
    text-shadow: 0 0 4px #6ea1e0;
}

/* Zebra striping, alternating from row 2 since we don't have an
   actual table row counter on the <a> tags. */
.it-window .nt-linkbtn:nth-of-type(even) {
    background: #eef2f8;
}
.it-window .nt-linkbtn:last-of-type {
    border-bottom: 0;
}
.it-window .nt-linkbtn:hover,
.it-window .nt-linkbtn:focus {
    background: linear-gradient(180deg, #6ea5e8 0%, #2c66bf 100%);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}
.it-window .nt-linkbtn:active {
    background: linear-gradient(180deg, #4d86d4 0%, #194a99 100%);
    transform: none;
    box-shadow: none;
}
.it-window .nt-linkbtn.is-current {
    background: linear-gradient(180deg, #c8dcf5 0%, #9cbde8 100%);
    color: var(--it-text);
}
.it-window .nt-linkbtn.is-current:hover,
.it-window .nt-linkbtn.is-current:focus {
    background: linear-gradient(180deg, #6ea5e8 0%, #2c66bf 100%);
    color: #ffffff;
}

/* Brand-colored album-art square. Lives in the dedicated art column
   between the row counter and the name, sized to feel like a real
   iTunes thumbnail (28x28) with a soft inset highlight + 1px hairline
   so it reads as a tiny pressed cover. The internal SVG fills enough
   of the tile to be recognisable but keeps a small breathing margin
   like the App Store icon grid. */
.it-window .nt-linkbtn-icon {
    grid-column: 2;
    width: 28px;
    height: 28px;
    align-self: center;
    justify-self: center;
    border-radius: 5px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 0 0 1px rgba(0,0,0,0.22),
        0 1px 2px rgba(0,0,0,0.18);
    border-right: 0;
    color: #ffffff;
    background: #888;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.it-window .nt-linkbtn-icon svg { width: 18px; height: 18px; }
.it-window .nt-linkbtn--soundcloud .nt-linkbtn-icon svg { width: 22px; height: auto; }

.it-window .nt-linkbtn--instagram   .nt-linkbtn-icon { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.it-window .nt-linkbtn--facebook    .nt-linkbtn-icon { background: #1877f2; }
.it-window .nt-linkbtn--tiktok      .nt-linkbtn-icon { background: #000000; }
.it-window .nt-linkbtn--youtube     .nt-linkbtn-icon { background: #ff0000; }
.it-window .nt-linkbtn--spotify     .nt-linkbtn-icon { background: #1db954; }
.it-window .nt-linkbtn--applemusic  .nt-linkbtn-icon { background: linear-gradient(135deg, #fc3c44, #fa2d55); }
.it-window .nt-linkbtn--soundcloud  .nt-linkbtn-icon { background: #ff5500; }
.it-window .nt-linkbtn--web         .nt-linkbtn-icon { background: var(--color-primary); }
.it-window .nt-linkbtn--map         .nt-linkbtn-icon { background: #34a853; }
.it-window .nt-linkbtn--ticket      .nt-linkbtn-icon { background: #f4b400; color: #000; }
.it-window .nt-linkbtn--article     .nt-linkbtn-icon { background: var(--nt-titlebar); }
.it-window .nt-linkbtn--generic     .nt-linkbtn-icon { background: #4a4a4a; }

/* The body wrapper is taken out of the layout via display:contents so
   its children (label + handle) participate DIRECTLY in the row's
   outer grid. This is the only way to get the row's name/handle to
   sit in the exact same grid tracks as the column header above them -
   a nested sub-grid would measure 30% off a narrower width and the
   handle would drift right of where "Profilis" lives in the header. */
.it-window .nt-linkbtn-body {
    display: contents;
}
.it-window .nt-linkbtn-label {
    grid-column: 3;
    padding: 0 8px;
    font: 700 12px/1.2 "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
    color: var(--it-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.it-window .nt-linkbtn-sub {
    grid-column: 4;
    padding: 0 8px;
    font: 400 11px/1.2 "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
    color: var(--it-text-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.it-window .nt-linkbtn:hover .nt-linkbtn-label,
.it-window .nt-linkbtn:focus .nt-linkbtn-label,
.it-window .nt-linkbtn:hover .nt-linkbtn-sub,
.it-window .nt-linkbtn:focus .nt-linkbtn-sub {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

/* The trailing "↗" external-link chevron is dropped entirely - the
   rows are visibly link buttons (brand-colored album-art tiles,
   pointer cursor, aqua hover) so the arrow was visual noise. */
.it-window .nt-linkbtn-chevron { display: none; }
.it-window .nt-linkbtn--ticket .nt-linkbtn-icon { color: #000; }

/* Empty-playlist state (no links yet) */
.it-window .it-tracks-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--it-text-mute);
    font: italic 12px/1.4 "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
    background:
        repeating-linear-gradient(45deg,
            rgba(0,0,0,0.018) 0px, rgba(0,0,0,0.018) 8px,
            transparent       8px, transparent       16px),
        #ffffff;
}

/* ---------- 4. Window status bar ---------- */

.it-window .it-window-status {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    background:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 1px,
            rgba(0,0,0,0.035)      1px, rgba(0,0,0,0.035)      2px),
        linear-gradient(180deg, #d8dbe1 0%, #b8bcc4 100%);
    border-top: 1px solid #757a83;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    font: 11px/1 "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
    color: #3a3f47;
    text-shadow: 0 1px 0 rgba(255,255,255,0.55);
    flex-shrink: 0;
}
.it-window .it-window-status-cell {
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.it-window .it-window-status-cell--center { text-align: center; }
.it-window .it-window-status-cell--right  { text-align: right; color: #5a606b; font-style: italic; }

/* ---------- Responsive: collapse to single column under tablet ---------- */

@media (max-width: 820px) {
    .it-window .it-window-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .it-window .it-transport-buttons { justify-content: center; }
    .it-window .it-volume { margin: 0 auto; max-width: 240px; width: 100%; }
    .it-window .it-window-body {
        grid-template-columns: 1fr;
    }
    .it-window .it-source {
        border-right: 0;
        border-bottom: 1px solid var(--it-src-edge);
        flex-direction: row;
        gap: 14px;
        padding: 14px;
    }
    .it-window .it-source-art {
        flex: 0 0 130px;
        max-width: 130px;
    }
    .it-window .it-source-info { flex: 1; min-width: 0; }
}

@media (max-width: 540px) {
    .it-window .it-display-inner { padding: 6px 10px; }
    .it-window .it-display-icon { width: 18px; height: 18px; }
    .it-window .it-display-track,
    .it-window .it-display .article-hero-name { font-size: 14px; }
    .it-window .it-tbtn { width: 26px; height: 26px; }
    .it-window .it-tbtn--play { width: 32px; height: 32px; }
    .it-window .it-tbtn--play .it-tbtn-glyph { width: 14px; height: 14px; }
    .it-window .it-source {
        flex-direction: column;
        align-items: stretch;
    }
    .it-window .it-source-art {
        flex: 0 0 auto;
        max-width: 200px;
        margin: 0 auto;
    }
    /* On phone we drop the secondary handle column - it's redundant
       with the service name and risks pushing the row too wide. Header
       and rows still align 1:1: counter | art | name. */
    .it-window .it-tracks-header {
        grid-template-columns: 28px 30px 1fr;
    }
    .it-window .it-tracks-col--sub { display: none; }
    .it-window .nt-linkbtn {
        grid-template-columns: 28px 30px 1fr;
        height: 36px;
        min-height: 36px;
    }
    .it-window .nt-linkbtn-icon {
        width: 26px;
        height: 26px;
    }
    .it-window .nt-linkbtn-label {
        grid-column: 3;
        padding: 0 6px;
    }
    .it-window .nt-linkbtn-sub { display: none; }
    .it-window .it-window-status {
        grid-template-columns: 1fr auto;
        font-size: 10px;
    }
    .it-window .it-window-status-cell--center { display: none; }
}

/* =========================================================
   ARTIST PAGE - TRAFFIC LIGHT INTERACTIVITY (both views)
   The titlebar buttons are real <a>s now: red closes back to the
   Atlikėjai category, green toggles between the rich /article/<slug>
   page and the maximized /<slug> share page. Tap target stays the
   classic ~12px disc but the hover state explodes into a colored
   glow so the affordance is unmistakable.
   ========================================================= */

.it-window .it-window-bar .it-tl {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 140ms ease,
                filter 120ms ease;
}
.it-window .it-window-bar .it-tl:hover,
.it-window .it-window-bar .it-tl:focus-visible {
    transform: scale(1.18);
    filter: brightness(1.08);
    outline: 0;
    text-decoration: none;
}
.it-window .it-window-bar .it-tl--close:hover,
.it-window .it-window-bar .it-tl--close:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        inset 0 -2px 2px rgba(0,0,0,0.28),
        0 0 0 1px rgba(230,80,60,0.55),
        0 0 10px rgba(230,80,60,0.75);
}
.it-window .it-window-bar .it-tl--zoom:hover,
.it-window .it-window-bar .it-tl--zoom:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        inset 0 -2px 2px rgba(0,0,0,0.28),
        0 0 0 1px rgba(120,210,80,0.55),
        0 0 10px rgba(120,210,80,0.75);
}

/* =========================================================
   ARTIST PAGE - STATUS BAR SHARE PILL (both views)
   Aqua gel button living in the right cell of the iTunes
   status bar. Web Share API on mobile, clipboard fallback
   on desktop (the JS layer handles the actual copy + toast).
   ========================================================= */

.it-window .it-window-status-cell--right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.it-window-credit-inline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.it-window-share {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 18px;
    padding: 0 9px 0 7px;
    border-radius: 9px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.55) 0%,
            rgba(255,255,255,0.15) 48%,
            rgba(0,0,0,0.05) 50%,
            rgba(255,255,255,0.2) 100%),
        linear-gradient(180deg, var(--it-aqua-1), var(--it-aqua-2));
    border: 1px solid var(--it-aqua-3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 2px rgba(0,0,0,0.25);
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
    font: 700 10.5px/1 var(--it-font);
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease,
                box-shadow 120ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.it-window-share svg { display: block; flex-shrink: 0; }
.it-window-share:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 2px 5px rgba(0,0,0,0.32);
}
.it-window-share:active { transform: translateY(0); filter: brightness(0.95); }
.it-window-share:focus-visible {
    outline: 2px solid var(--it-aqua-2);
    outline-offset: 2px;
}

/* Clipboard-copy toast - fixed bottom-center aqua pill. JS adds
   .is-visible to fade it in, then auto-removes the class so the
   pill slides back down. */
.it-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 12px);
    padding: 10px 18px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.4) 0%,
            rgba(255,255,255,0.08) 48%,
            rgba(0,0,0,0.06) 50%,
            rgba(255,255,255,0.18) 100%),
        linear-gradient(180deg, var(--it-aqua-1), var(--it-aqua-2));
    border: 1px solid var(--it-aqua-3);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 12px 28px rgba(0,0,0,0.4);
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
    font: 700 13px/1.2 var(--it-font);
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transition: opacity 220ms ease, transform 220ms ease;
}
.it-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* =========================================================
   ARTIST PAGE - MAXIMIZED VARIANT (.wiki-article--linktree)
   The /<slug> share view. Same iTunes window as the normal
   article page, but the surrounding chrome is stripped, the
   volume slider is hidden, the body flips to a single column,
   the album art and name scale up, and the page sits on a
   blurred-photo ambient backdrop.
   ========================================================= */

/* Site chrome reset: in the maximized share view the wiki shell
   (site titlebar, toolbar, sidebar, footer, neocities strip, BETA
   feedback) is hidden so a single iTunes window can carry the page.
   On desktop the window is a narrow portrait column floating on a
   black backdrop (the "linktree" phone-shaped share card); on
   phones it goes edge-to-edge against the same black field. */
body.wiki-body:has(.wiki-article--linktree) {
    background: #000000;
}
body.wiki-body:has(.wiki-article--linktree) .it-titlebar,
body.wiki-body:has(.wiki-article--linktree) .it-toolbar,
body.wiki-body:has(.wiki-article--linktree) .wiki-sidebar,
body.wiki-body:has(.wiki-article--linktree) .wiki-footer,
body.wiki-body:has(.wiki-article--linktree) .it-statusbar,
body.wiki-body:has(.wiki-article--linktree) .it-neocities,
body.wiki-body:has(.wiki-article--linktree) #feedback-banner,
body.wiki-body:has(.wiki-article--linktree) #feedback-toggle,
body.wiki-body:has(.wiki-article--linktree) .feedback-banner,
body.wiki-body:has(.wiki-article--linktree) .feedback-toggle,
body.wiki-body:has(.wiki-article--linktree) .it-skip-link {
    display: none !important;
}
body.wiki-body:has(.wiki-article--linktree) .wiki-wrapper {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    max-width: none;
    width: 100%;
}
body.wiki-body:has(.wiki-article--linktree) .wiki-container {
    display: block;
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    background: transparent;
}
body.wiki-body:has(.wiki-article--linktree) .wiki-content {
    grid-column: 1 / -1;
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.wiki-article--linktree {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 100vh;
    background: transparent;
}

/* Elevated chassis: floating window with bigger shadow. The window
   already has a view-transition-name set inline by PHP so the
   browser morphs it between the normal and maximized routes.
   Note on specificity: the existing
   `.wiki-article--artist .article-hero--itunes.it-window` rule has
   3 classes (margin: 4px 0 28px; width: 100%) and would otherwise
   pin this window to the left edge of the viewport. We chain
   .wiki-article--linktree.wiki-article--artist + the inner full
   class chain to land at 5 classes and unambiguously win the
   margin/max-width war that controls horizontal centering. */
/* Portrait window chassis. On desktop we cap the width at 560px and
   center the window with margin auto, so the share view reads as a
   tall phone-shaped column (linktree-style). The drop shadow + soft
   border-radius float the chassis over the light-gray page. On
   phones a media query below kills max-width / margin / shadow /
   radius so the window goes truly full-bleed. */
.wiki-article--linktree.wiki-article--artist
    .article-hero--itunes.it-window.it-window--linktree {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 32px auto 28px;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65),
        0 1px 0 rgba(0,0,0,0.05),
        0 18px 48px rgba(0,0,0,0.18),
        0 4px 12px rgba(0,0,0,0.1);
    animation: none;
    overflow: hidden;
}
@media (min-width: 900px) {
    .wiki-article--linktree.wiki-article--artist
        .article-hero--itunes.it-window.it-window--linktree {
        margin-top: 40px;
        margin-bottom: 36px;
    }
}

/* iPod-style now-playing reorder: in the maximized share view the
   cover art rises to sit RIGHT below the titlebar, with the LCD/
   transport toolbar dropping underneath it. The track list and the
   status bar stay at the bottom in the normal order. The net effect
   is an iPod Classic "Now Playing" silhouette - big square album
   art up top, LCD readout (scrolling artist name + progress bar)
   directly under the art, then the song list, then the status pill.
   We use display:contents on .it-window-body to promote .it-source
   and .it-tracks into the parent flex layout so the existing
   `order` property can interleave them with the toolbar. */
.wiki-article--linktree .it-window--linktree > .it-window-body {
    display: contents;
}
.wiki-article--linktree .it-window--linktree > .it-window-bar { order: 1; }
.wiki-article--linktree .it-window--linktree .it-source { order: 2; }
.wiki-article--linktree .it-window--linktree > .it-window-toolbar { order: 3; }
.wiki-article--linktree .it-window--linktree .it-tracks { order: 4; }
.wiki-article--linktree .it-window--linktree > .it-window-status { order: 5; }
.wiki-article--linktree .it-window--linktree .it-source,
.wiki-article--linktree .it-window--linktree .it-tracks {
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

/* Toolbar: stacked iPod layout. The LCD readout (artist name
   marquee + subtitle + progress bar with elapsed/remaining times)
   takes the full toolbar width on the top row; the prev/play/next
   transport buttons sit on a SECOND row directly below the progress
   bar, centered. Volume is dropped entirely. Top border + inset
   highlight read the transition from cover to player. */
.wiki-article--linktree .it-window--linktree .it-window-toolbar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid #4a4f59;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.wiki-article--linktree .it-window--linktree .it-display { order: 1; }
.wiki-article--linktree .it-window--linktree .it-transport {
    order: 2;
    justify-self: center;
}
.wiki-article--linktree .it-window--linktree .it-volume {
    display: none;
}

/* Body: kept as a 1-col grid for the rare cases where display:contents
   isn't honored (older browsers). The contents override above hoists
   the children up regardless. */
.wiki-article--linktree .it-window--linktree .it-window-body {
    grid-template-columns: 1fr;
}
.wiki-article--linktree .it-window--linktree .it-source {
    border-right: 0;
    border-bottom: 1px solid var(--it-src-edge);
    padding: 22px 18px 18px;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    text-align: center;
}
.wiki-article--linktree .it-window--linktree .it-source-art {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    /* overflow:visible so the vinyl peek can bleed outside the square;
       isolation:isolate creates a stacking context so the ::before
       z-index:-1 stays scoped (otherwise it would slip behind ancestor
       backgrounds and disappear entirely). */
    overflow: visible;
    isolation: isolate;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.45),
        0 12px 28px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.4);
    animation: it-art-breathe 7s ease-in-out infinite;
}
@keyframes it-art-breathe {
    0%, 100% { transform: scale(1);     }
    50%      { transform: scale(1.015); }
}
/* The cover sits cleanly on the album-art well with no vinyl-peek
   ornament. In the iPod-style stack the LCD strip lands directly
   below the cover, so any disc that bled past the right edge of
   the photo would collide with the brushed-metal LCD chassis - we
   keep the cover crisp and let the readout do the player work. */
/* Facts panel is dropped entirely in this view; replaced by a small
   "Daugiau apie atlikėją" anchor injected by PHP after the link list.
   The artist name no longer appears here either - on the maximized
   share view it only shows in the titlebar (top) and as the scrolling
   LCD marquee below the cover (two places, like a real iPod). */
.wiki-article--linktree .it-window--linktree .it-source-info {
    display: none;
}

/* Tracks pane in the maximized view: inherits the full iTunes track
   list look from `.it-window .nt-linkbtn` (column header strip, 34px
   rows, white/zebra background, brand-colored 28x28 album-art tiles,
   aqua-gradient hover, .is-current highlight, ↗ chevron column,
   Lucida Grande typography) so the share view is visually identical
   to the rows on the normal artist page. */
.wiki-article--linktree .it-window--linktree .it-tracks {
    padding: 0;
    background: #ffffff;
}
.wiki-article--linktree .it-window--linktree .nt-linkbtn-stack {
    margin: 0;
    padding: 0;
    background: transparent;
}
/* Defensive: main.js auto-tags every external <a> inside .wiki-content
   with .external-link, which carries a `::after { content: " ↗" }`
   from wiki-style.css. Inside the grid .nt-linkbtn that pseudo gets
   auto-placed under the row content as a stray arrow. The JS now
   skips .nt-linkbtn, but kill the pseudo here too as a safety net. */
.it-window .nt-linkbtn::after,
.it-window .nt-linkbtn.external-link::after {
    content: none !important;
    display: none !important;
}

/* Song embeds (Spotify / SoundCloud / YouTube cards) injected via
   renderArticleSongs(). Lives between the link rows and the more-info
   button. Slim padding so the existing aqua window chrome above and
   below stays visible, with a subtle hairline divider so it reads as
   its own "now playing" tray. */
.it-songs {
    padding: 14px 16px 6px;
    background: #ffffff;
    border-top: 1px solid #e6e9ee;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.it-songs .article-songs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: transparent;
}
.it-songs .embed-container {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.08);
}
.it-songs .embed-container iframe {
    display: block;
    width: 100%;
    border: 0;
}
.it-songs .embed-spotify iframe   { height: 80px; }
.it-songs .embed-soundcloud iframe { height: 120px; }
.it-songs .embed-youtube { position: relative; padding-top: 56.25%; }
.it-songs .embed-youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* "Daugiau apie atlikėją" secondary action - rendered as a proper
   iTunes Aqua gel pill so it matches the share button + transport
   buttons aesthetic instead of looking like a stray text link. */
.it-more-link {
    margin: 14px 0 0;
    padding: 0 16px 16px;
    text-align: center;
    background: #ffffff;
}
.it-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid #b5bcc6;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.85) 0%,
            rgba(255,255,255,0.35) 48%,
            rgba(0,0,0,0.04) 50%,
            rgba(255,255,255,0.45) 100%),
        linear-gradient(180deg, #f4f6fa 0%, #d6dbe3 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        0 1px 2px rgba(0,0,0,0.12);
    color: var(--it-text);
    text-decoration: none;
    font: 700 12.5px/1 "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    transition: transform 120ms ease, filter 120ms ease,
                box-shadow 120ms ease;
}
.it-more-btn:hover,
.it-more-btn:focus {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        0 2px 5px rgba(0,0,0,0.18);
    outline: 0;
    text-decoration: none;
}
.it-more-btn:active {
    transform: translateY(0);
    filter: brightness(0.95);
}
.it-more-btn-arrow {
    font-size: 14px;
    line-height: 1;
    transition: transform 180ms ease;
}
.it-more-btn:hover .it-more-btn-arrow,
.it-more-btn:focus .it-more-btn-arrow {
    transform: translateX(3px);
}

/* Linktree status bar: slimmer two-cell layout. The brand-name
   credit is hidden entirely in this view (the window IS the brand
   already, and the share pill anchors the right cell). */
.wiki-article--linktree .it-window--linktree .it-window-status-cell--right
    .it-window-credit-inline {
    display: none;
}
.wiki-article--linktree .it-window--linktree .it-window-status--linktree {
    grid-template-columns: 1fr auto;
    gap: 10px;
}
.wiki-article--linktree .it-window--linktree .it-window-status-cell--origin {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phone variant: the window drops the desktop "floating widget"
   framing - no margin, no shadow, no radius, no light-gray backdrop -
   and goes truly edge-to-edge so the share view reads as a native
   phone screen. Rows also bump to 48px for comfortable thumb tapping. */
@media (max-width: 639px) {
    body.wiki-body:has(.wiki-article--linktree) {
        background: #000000;
    }
    .wiki-article--linktree.wiki-article--artist
        .article-hero--itunes.it-window.it-window--linktree {
        max-width: none;
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .wiki-article--linktree .it-window--linktree .it-window-bar {
        padding-left: 12px;
        padding-right: 12px;
    }
    .wiki-article--linktree .it-window--linktree .it-source {
        padding: 18px 14px 14px;
    }
    .wiki-article--linktree .it-window--linktree .it-source-art {
        max-width: 320px;
    }
    .wiki-article--linktree .it-window--linktree .nt-linkbtn {
        height: 48px;
        min-height: 48px;
    }
    .wiki-article--linktree .it-songs {
        padding: 12px 12px 4px;
    }
    .wiki-article--linktree .it-more-link {
        padding: 12px 12px 18px;
    }
}
@media (max-width: 380px) {
    .wiki-article--linktree .it-window--linktree .it-source-art {
        max-width: 260px;
    }
}
@media (min-width: 900px) {
    .wiki-article--linktree .it-window--linktree .it-source-art {
        max-width: 360px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wiki-article--linktree .it-window--linktree .it-source-art {
        animation: none !important;
        transform: none !important;
    }
}

/* =========================================================
   VIEW TRANSITIONS - cross-document morph between routes
   The browser snapshots the iTunes window (and its named
   children: traffic lights, album art) on the old page, then
   morphs them into their counterparts on the new page. No JS
   needed; Firefox + non-VT browsers fall back to instant nav.
   ========================================================= */

@view-transition { navigation: auto; }

::view-transition-old(it-artist-window),
::view-transition-new(it-artist-window),
::view-transition-old(it-source-art),
::view-transition-new(it-source-art),
::view-transition-old(it-tl-close),
::view-transition-new(it-tl-close),
::view-transition-old(it-tl-zoom),
::view-transition-new(it-tl-zoom) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(it-artist-window),
    ::view-transition-new(it-artist-window),
    ::view-transition-old(it-source-art),
    ::view-transition-new(it-source-art),
    ::view-transition-old(it-tl-close),
    ::view-transition-new(it-tl-close),
    ::view-transition-old(it-tl-zoom),
    ::view-transition-new(it-tl-zoom) {
        animation-duration: 120ms;
    }
}