/**
 * Pusedainos Wiki - Wikipedia-style CSS (LEGACY BASE LAYER)
 *
 * This file used to drive the whole visual design (red-on-white,
 * Linux Libertine, Wikipedia-ish layout). It is now the BASE LAYER
 * underneath assets/css/itunes-theme.css, which paints the iTunes
 * Y2K chrome on top.
 *
 * What still lives here that is actually rendered:
 *   - body / article typography (h1..h4, p, ul, code, blockquote)
 *   - article-content link colours and visited states fallback
 *   - misc utility classes (.no-articles, .article-meta, etc)
 *
 * What is dead (overridden by itunes-theme.css):
 *   - .wiki-wrapper / .wiki-sidebar / .wiki-content shells
 *   - .nt-tile* primitives (now styled by itunes-theme.css)
 *   - .article-hero / .article-facts / .article-statusbar
 *
 * Do NOT add new visual rules here. New styles go into itunes-theme.css.
 * When the legacy file is fully retired this file can be deleted.
 *
 * Colours: White, Black, Red (#d42a2a)
 */

/* ===== CSS Variables ===== */
:root {
    --color-primary: #d42a2a;
    --color-primary-dark: #a82222;
    --color-primary-light: #ff4444;
    --color-black: #0a0a0a;
    --color-black-soft: #1a1a1a;
    --color-white: #ffffff;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #eaecf0;
    --color-gray-300: #c8ccd1;
    --color-gray-400: #a2a9b1;
    --color-gray-500: #72777d;
    --color-gray-600: #54595d;
    --color-text: #202122;
    --color-text-light: #54595d;
    --color-link: #d42a2a;
    --color-link-hover: #a82222;
    --color-link-visited: #8b1c1c;
    --color-border: #a2a9b1;
    --font-heading: 'Linux Libertine', 'Libre Baskerville', 'Georgia', 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
    --sidebar-width: 160px;
    --content-max-width: 960px;
    --transition-fast: 0.15s ease;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text);
    /* The whole wiki sits on a black backdrop, with the content
       wrapper floating on top as a bright surface. This gives every
       page (main, category, article, maximized share view) a
       consistent "iTunes app on a dark desktop" framing. */
    background: #000000;
}

::selection {
    background: var(--color-primary);
    color: var(--color-white);
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: var(--color-link-visited);
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: normal;
    line-height: 1.3;
    margin: 0;
}

/* ===== Wiki Layout ===== */
.wiki-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Header ===== */
.wiki-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-300);
    padding: 0.5rem 1rem;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-black);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo:hover {
    text-decoration: none;
}

.logo-img {
    height: 36px;
    width: auto;
}

.logo-text {
    color: var(--color-black);
}

.logo-accent {
    color: var(--color-primary);
}

.search-form {
    display: flex;
}

.search-input {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    font-size: 0.8125rem;
    width: 200px;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.search-btn {
    padding: 0.375rem 0.75rem;
    background: var(--color-gray-100);
    border: 1px solid var(--color-border);
    border-left: none;
    cursor: pointer;
    font-size: 0.8125rem;
}

.search-btn:hover {
    background: var(--color-gray-200);
}

/* ===== Tab Navigation ===== */
.wiki-tabs {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    background: var(--color-gray-100);
    border-bottom: 1px solid var(--color-border);
}

.tab-link {
    display: inline-block;
    width: var(--sidebar-width);
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    color: var(--color-link);
    font-size: 0.8125rem;
    background: var(--color-gray-100);
    border: none;
    border-right: 1px solid var(--color-gray-300);
    border-bottom: 1px solid var(--color-gray-300);
    margin-bottom: -1px;
}

.tab-link:hover {
    text-decoration: none;
}

/* ===== Main Container (Wikipedia Layout) ===== */
.wiki-container {
    display: flex;
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ===== Left Sidebar ===== */
.wiki-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    padding: 1rem 0.75rem;
    background: var(--color-gray-100);
    border-right: 1px solid var(--color-gray-300);
    font-size: 0.8125rem;
}

.sidebar-section {
    margin-bottom: 1.5rem;
}

.sidebar-section h3 {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-text-light);
    margin: 0 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-gray-300);
}

.sidebar-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-section li {
    margin: 0;
}

.sidebar-section a {
    display: block;
    padding: 0.25rem 0;
    color: var(--color-link);
    font-size: 0.8125rem;
}

.sidebar-section a:hover {
    text-decoration: underline;
}

/* ===== Main Content ===== */
.wiki-content {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.5rem 2rem;
    background: var(--color-white);
}

/* ===== Article Styles ===== */
.wiki-article {
    line-height: 1.6;
}

.article-header {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.25rem;
    position: relative;
}

.admin-edit-btn {
    position: absolute;
    top: 0.25rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.35em 0.85em;
    font-size: 0.85rem;
    font-family: var(--font-body);
    color: var(--color-white);
    background: var(--color-primary);
    border: none;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.admin-edit-btn:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
}

.admin-edit-btn::before {
    content: "\270E";
}

.article-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: normal;
    color: var(--color-black);
    margin: 0;
    line-height: 1.2;
}

.article-meta {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin-top: 0.25rem;
}

.article-meta a {
    color: var(--color-link);
}

.article-body {
    margin-top: 0.5rem;
}

.article-content {
    line-height: 1.6;
}

.article-content p {
    margin: 0.5rem 0;
}

.article-content h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: normal;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.125rem;
    margin: 1.5rem 0 0.5rem;
    clear: both;
}

.article-content h3 {
    font-size: 1.17rem;
    font-weight: bold;
    margin: 1rem 0 0.5rem;
}

.article-content h4 {
    font-size: 1rem;
    font-weight: bold;
    margin: 1rem 0 0.25rem;
}

.article-content ul,
.article-content ol {
    margin: 0.5rem 0;
    padding-left: 2.5rem;
}

.article-content li {
    margin: 0.25rem 0;
}

.article-content blockquote {
    margin: 0.5rem 2rem;
    padding-left: 1rem;
    border-left: 3px solid var(--color-gray-300);
    color: var(--color-text-light);
}

/* ===== Infobox (Wikipedia-style, floats right) ===== */
.infobox {
    float: right;
    clear: right;
    width: 320px;
    min-width: 320px;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    border: 1px solid var(--color-border);
    background: var(--color-gray-100);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.infobox-title {
    background: var(--color-black);
    color: var(--color-white);
    padding: 0.4em;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    font-family: var(--font-heading);
}

.infobox-image {
    text-align: center;
    padding: 0.4em;
}

.infobox-image img {
    max-width: 100%;
    max-height: 250px;
}

.infobox-caption {
    font-size: 0.75rem;
    text-align: center;
    padding: 0.2em 0.4em;
    color: var(--color-text-light);
}

.infobox-data {
    width: 100%;
    border-collapse: collapse;
}

.infobox-data th,
.infobox-data td {
    padding: 0.3em 0.4em;
    vertical-align: top;
    border-top: 1px solid var(--color-gray-300);
}

.infobox-data th {
    text-align: left;
    width: 40%;
    background: var(--color-gray-200);
    font-weight: 600;
    font-size: 0.75rem;
}

.infobox-data td {
    background: var(--color-gray-100);
}

.infobox-social {
    padding: 0.4em;
    border-top: 1px solid var(--color-gray-300);
    background: var(--color-gray-200);
    text-align: center;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.5rem 0;
}

.social-link,
a.social-link,
a.social-link:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-gray-300);
    color: var(--color-black-soft);
    transition: all 0.2s ease;
}

.social-link svg {
    width: 18px;
    height: 18px;
}

.social-link:hover {
    transform: scale(1.1);
    text-decoration: none;
    color: white;
}

.social-link-label {
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    position: absolute;
    bottom: -0.7em;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--color-text-light);
}

.social-link:has(.social-link-label) {
    position: relative;
    margin-bottom: 0.6em;
}

/* Social link brand colors on hover */
.social-link.instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-link.facebook:hover {
    background: #1877f2;
}

.social-link.tiktok:hover {
    background: #000;
    box-shadow: 2px 0 0 #69c9d0, -2px 0 0 #ee1d52;
}

.social-link.youtube:hover {
    background: #ff0000;
}

.social-link.spotify:hover {
    background: #1db954;
}

.social-link.applemusic:hover {
    background: linear-gradient(135deg, #fc3c44, #fa2d55);
}

.social-link.soundcloud:hover {
    background: #ff5500;
}

.infobox-songs {
    border-top: 1px solid var(--color-gray-300);
}

.songs-title {
    background: var(--color-gray-200);
    padding: 0.3em;
    font-weight: 600;
    font-size: 0.75rem;
    text-align: center;
}

.songs-embeds {
    padding: 0.3rem;
}

.songs-embeds iframe {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 0.5rem;
    border-radius: 8px;
}

/* Spotify embed fix */
.songs-embeds iframe[src*="spotify"] {
    height: 80px;
}

/* Event Infobox */
.event-infobox {
    background: var(--color-gray-100);
    border: 1px solid var(--color-border);
}

.event-infobox .infobox-title {
    background: var(--color-primary);
}

.event-infobox .infobox-data a {
    color: var(--color-link);
}

/* Custom/Glossary/History Infobox */
.custom-infobox {
    background: var(--color-gray-100);
    border: 1px solid var(--color-border);
}

.custom-infobox .infobox-image {
    padding: 0.4em;
}

.custom-infobox .infobox-image img {
    max-width: 100%;
    max-height: 200px;
}

/* ===== Table of Contents ===== */
.toc {
    display: inline-block;
    background: var(--color-gray-100);
    border: 1px solid var(--color-border);
    padding: 0.5em 0.7em;
    margin: 0.5em 0 1em;
    font-size: 0.9em;
}

.toc-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.5em;
}

.toc-toggle {
    font-weight: normal;
    font-size: 0.9em;
    color: var(--color-link);
    cursor: pointer;
    margin-left: 0.5em;
}

.toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc > ul > li {
    margin: 0.3em 0;
}

.toc-level-1 > a {
    font-weight: normal;
}

.toc-level-2 {
    margin-left: 1.5em;
}

.toc a {
    color: var(--color-link);
}

/* ===== Wiki Links ===== */
.wiki-link {
    color: var(--color-link);
}

.wiki-link-missing {
    color: var(--color-primary);
}

/* ===== Related Articles & Backlinks ===== */
.related-articles,
.backlinks {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--color-border);
    clear: both;
}

.related-articles h2,
.backlinks h2 {
    font-size: 1.17rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.related-articles ul,
.backlinks ul {
    margin: 0;
    padding-left: 2.5em;
}

.related-articles li,
.backlinks li {
    margin: 0.25rem 0;
}

/* ===== Auto-Generated Sections (Artist-Event relationships) ===== */
.auto-section {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--color-border);
    clear: both;
}

.auto-section h2 {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 0.25rem;
}

.auto-section p {
    margin-bottom: 0.75rem;
    color: var(--color-text-light);
}

/* Events list for artist pages */
.events-list {
    margin: 0;
    padding-left: 2em;
}

.events-list li {
    margin: 0.4rem 0;
}

.events-list .event-date {
    color: var(--color-text-light);
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

/* Artists grid for event pages */
.artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.artist-card {
    text-align: center;
}

.artist-card .artist-photo {
    display: block;
    margin-bottom: 0.5rem;
}

.artist-card .artist-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.artist-card .artist-name {
    display: block;
    font-size: 0.875rem;
    color: var(--color-link);
    text-decoration: none;
}

.artist-card .artist-name:hover {
    text-decoration: underline;
}

/* ===== Article Footer ===== */
.article-footer {
    margin-top: 2em;
    padding-top: 0.5em;
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    color: var(--color-text-light);
    clear: both;
}

.article-info {
    display: flex;
    gap: 2rem;
}

.article-contributors {
    margin-top: 0.5em;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.contributors-label {
    font-weight: 500;
    margin-right: 0.25em;
}

/* ===== Homepage ===== */
.homepage .welcome-box {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    padding: 1em;
    margin-bottom: 1em;
}

.homepage .welcome-box p {
    margin: 0.25em 0;
}

.homepage .welcome-box strong {
    color: var(--color-primary);
}

.homepage-section {
    margin-bottom: 1.5em;
}

.homepage-section h2 {
    font-family: var(--font-heading);
    font-size: 1.17rem;
    font-weight: normal;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.125rem;
    margin-bottom: 0.5rem;
}

.homepage-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.featured-card {
    background: var(--color-gray-100);
    padding: 0.75rem;
    border: 1px solid var(--color-gray-300);
}

.featured-card:hover {
    border-color: var(--color-primary);
}

.featured-card h3 {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 0.25rem;
}

.featured-card h3 a {
    color: var(--color-link);
}

.featured-card p {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin: 0;
}

.category-tag {
    display: inline-block;
    font-size: 0.6875rem;
    background: var(--color-black);
    color: var(--color-white);
    padding: 0.1em 0.3em;
    margin-top: 0.5em;
}

.article-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-list li {
    padding: 0.35em 0;
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.article-list a {
    color: var(--color-link);
}

.article-list .meta {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    white-space: nowrap;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.category-card {
    display: block;
    padding: 0.75rem;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    text-align: center;
}

.category-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.category-name {
    display: block;
    font-weight: 600;
    color: var(--color-link);
}

.category-count {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* ===== Category Page ===== */
.category-description {
    background: var(--color-gray-100);
    padding: 0.75em 1em;
    margin-bottom: 1em;
    border-left: 3px solid var(--color-primary);
}

.category-stats {
    color: var(--color-text-light);
    margin-bottom: 1em;
}

.article-table {
    width: 100%;
    border-collapse: collapse;
}

.article-table th,
.article-table td {
    padding: 0.5em;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.article-table th {
    background: var(--color-gray-100);
    font-weight: 600;
}

.article-table tbody tr:hover {
    background: var(--color-gray-100);
}

.article-excerpt {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.view-count {
    text-align: right;
    color: var(--color-gray-500);
    font-size: 0.8125rem;
}

/* ===== Search Page ===== */
.search-form-large {
    display: flex;
    max-width: 400px;
    margin-bottom: 1em;
}

.search-input-large {
    flex: 1;
    padding: 0.5em;
    border: 1px solid var(--color-border);
}

.search-input-large:focus {
    outline: none;
    border-color: var(--color-primary);
}

.search-btn-large {
    padding: 0.5em 1em;
    background: var(--color-gray-100);
    border: 1px solid var(--color-border);
    border-left: none;
    cursor: pointer;
}

.search-btn-large:hover {
    background: var(--color-gray-200);
}

.results-count {
    color: var(--color-text-light);
    margin-bottom: 1em;
}

.results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.result-item {
    padding: 0.75em 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.result-item h3 {
    margin: 0 0 0.25em;
    font-size: 1rem;
    font-weight: bold;
}

.result-item h3 a {
    color: var(--color-link);
}

.result-category {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.result-excerpt {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin-top: 0.25em;
}

.no-results,
.search-tips {
    background: var(--color-gray-100);
    padding: 1em;
    border-left: 3px solid var(--color-primary);
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    gap: 0.25em;
    margin-top: 1em;
}

.pagination a,
.pagination .current {
    padding: 0.25em 0.5em;
    color: var(--color-link);
}

.pagination .current {
    font-weight: bold;
    color: var(--color-text);
}

/* ===== Embed Containers ===== */
.embed-container {
    margin: 1em 0;
}

.embed-youtube {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.embed-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.embed-spotify iframe,
.embed-soundcloud iframe {
    width: 100%;
    border: none;
}

/* ===== Video Container ===== */
.video-container {
    margin: 1em 0;
    max-width: 100%;
}

.video-container video {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 4px;
    background: #000;
}

.video-uploading {
    padding: 1em;
    background: var(--color-gray-100);
    border: 1px dashed var(--color-gray-300);
    border-radius: 4px;
    text-align: center;
    color: var(--color-text-light);
    font-style: italic;
}

/* ===== External Links ===== */
.external-link::after {
    content: ' ↗';
    font-size: 0.7em;
}

/* ===== Search Highlight ===== */
.search-highlight {
    background: yellow;
    padding: 0 0.1em;
}

/* ===== Footer ===== */
.wiki-footer {
    background: var(--color-gray-100);
    border-top: 1px solid var(--color-gray-300);
    padding: 1em;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 1.5em;
}

.footer-links a {
    color: var(--color-link);
}

.footer-info {
    text-align: right;
}

.footer-info p {
    margin: 0.125em 0;
}

/* ===== Error Pages ===== */
.error-page .error-box {
    background: var(--color-gray-100);
    padding: 1em;
    border-left: 3px solid var(--color-primary);
    margin-bottom: 1em;
}

.error-page .error-box code {
    background: var(--color-gray-200);
    padding: 0.1em 0.3em;
    font-family: var(--font-mono);
}

.error-page h2 {
    font-size: 1.17rem;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.error-page ul {
    margin: 0;
    padding-left: 2em;
}

/* ===== Mobile Navigation ===== */
.wiki-mobile-nav {
    display: none;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .wiki-sidebar {
        display: none;
    }

    .wiki-mobile-nav {
        display: flex;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--border-color);
        background: #fff;
        scrollbar-width: none;
    }

    .wiki-mobile-nav::-webkit-scrollbar {
        display: none;
    }

    .wiki-mobile-nav a {
        flex-shrink: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
        text-decoration: none;
        white-space: nowrap;
        border-right: 1px solid var(--border-color);
        transition: background 0.15s, color 0.15s;
    }

    .wiki-mobile-nav a:last-child {
        border-right: none;
    }

    .wiki-mobile-nav a:hover,
    .wiki-mobile-nav a:active {
        background: #f5f5f5;
        color: var(--primary-color);
    }
    
    .wiki-content {
        padding: 1rem;
    }
    
    .homepage-columns {
        grid-template-columns: 1fr;
    }
    
    .infobox {
        float: none;
        width: 100%;
        min-width: 0;
        margin: 0.5em 0;
    }
    
    .header-inner {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .search-input {
        width: 100%;
    }
    
    .footer-inner {
        flex-direction: column;
        gap: 0.5em;
        text-align: center;
    }
    
    .footer-info {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .article-title {
        font-size: 1.5rem;
    }

    .article-list li {
        flex-direction: column;
        gap: 0.125rem;
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   NT THEME - Windows NT 4.0 chrome with Linktree-style content
   ============================================================
   Loaded AFTER the legacy Wikipedia styles above; these rules
   intentionally override the chrome to give the wiki an NT look
   while keeping the article body's Wikipedia typography.
   ============================================================ */

/* ----- NT tokens (kept as fallbacks for admin + legacy bits) ----- */
:root {
    --nt-bg: #c0c0c0;
    --nt-bg-light: #dfdfdf;
    --nt-bg-dark: #a0a0a0;
    --nt-bevel-light: #ffffff;
    --nt-bevel-lighter: #dfdfdf;
    --nt-bevel-dark: #808080;
    --nt-bevel-darker: #404040;
    --nt-titlebar: #000080;
    --nt-titlebar-end: #1084d0;
    --nt-titlebar-inactive: #7a7a7a;
    --nt-titlebar-text: #ffffff;
    --nt-desktop: #008080;
    --nt-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
    --font-nt: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    /* Classic bevel: outset (raised) */
    --nt-bevel-out:
        inset 1px 1px 0 var(--nt-bevel-light),
        inset -1px -1px 0 var(--nt-bevel-darker),
        inset 2px 2px 0 var(--nt-bevel-lighter),
        inset -2px -2px 0 var(--nt-bevel-dark);
    /* Inset (sunken) - for pressed buttons, status bars */
    --nt-bevel-in:
        inset 1px 1px 0 var(--nt-bevel-darker),
        inset -1px -1px 0 var(--nt-bevel-light),
        inset 2px 2px 0 var(--nt-bevel-dark),
        inset -2px -2px 0 var(--nt-bevel-lighter);
    /* Thin bevels for small UI bits */
    --nt-bevel-out-thin:
        inset 1px 1px 0 var(--nt-bevel-light),
        inset -1px -1px 0 var(--nt-bevel-dark);
    --nt-bevel-in-thin:
        inset 1px 1px 0 var(--nt-bevel-dark),
        inset -1px -1px 0 var(--nt-bevel-light);
}

/* Body chrome (radial-blue desktop, wrapper window) lives in
   itunes-theme.css. NT panel/titlebar/window primitives were removed
   when the chrome moved to a single iTunes window. */

/* ----- NT primitive: button (beveled gray legacy - iTunes overrides) ----- */
.nt-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 75px;
    padding: 5px 12px;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out);
    border: 1px solid var(--nt-bevel-darker);
    color: var(--color-text);
    font-family: var(--font-nt);
    font-size: 11px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.nt-button:hover {
    text-decoration: none;
    color: var(--color-text);
}

.nt-button:active,
.nt-button.is-active {
    box-shadow: var(--nt-bevel-in);
    padding: 6px 11px 4px 13px;
}

.nt-button:focus-visible {
    outline: 1px dotted var(--color-text);
    outline-offset: -4px;
}

.nt-button--primary {
    font-weight: 700;
}

/* ----- NT primitive: link button (Linktree-style big stacked) ----- */
.nt-linkbtn-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 520px;
    margin: 18px auto;
}

.nt-linkbtn {
    display: grid;
    grid-template-columns: 48px 1fr 16px;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 12px;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out);
    border: 1px solid var(--nt-bevel-darker);
    color: var(--color-text);
    font-family: var(--font-nt);
    text-decoration: none;
    transition: transform 0.05s;
}

.nt-linkbtn:hover {
    text-decoration: none;
    color: var(--color-text);
}

.nt-linkbtn:active {
    box-shadow: var(--nt-bevel-in);
    transform: translateY(1px);
}

.nt-linkbtn:focus-visible {
    outline: 1px dotted var(--color-text);
    outline-offset: -4px;
}

.nt-linkbtn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-in-thin);
    color: #fff;
}

.nt-linkbtn-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.nt-linkbtn-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.nt-linkbtn-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nt-linkbtn-sub {
    font-size: 11px;
    color: var(--nt-bevel-darker);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nt-linkbtn-chevron {
    font-size: 18px;
    font-weight: 700;
    color: var(--nt-bevel-dark);
    text-align: center;
    line-height: 1;
}

/* Brand colour wells for socials */
.nt-linkbtn--instagram .nt-linkbtn-icon { background: #e1306c; }
.nt-linkbtn--facebook  .nt-linkbtn-icon { background: #1877f2; }
.nt-linkbtn--tiktok    .nt-linkbtn-icon { background: #000; }
.nt-linkbtn--youtube   .nt-linkbtn-icon { background: #ff0000; }
.nt-linkbtn--spotify   .nt-linkbtn-icon { background: #1db954; }
.nt-linkbtn--applemusic .nt-linkbtn-icon { background: linear-gradient(135deg, #fc3c44, #fa2d55); }
.nt-linkbtn--soundcloud .nt-linkbtn-icon { background: #ff5500; }
.nt-linkbtn--web      .nt-linkbtn-icon { background: var(--color-primary); }
.nt-linkbtn--map      .nt-linkbtn-icon { background: #34a853; }
.nt-linkbtn--ticket   .nt-linkbtn-icon { background: #f4b400; color: #000; }
.nt-linkbtn--article  .nt-linkbtn-icon { background: var(--nt-titlebar); }
.nt-linkbtn--generic  .nt-linkbtn-icon { background: var(--nt-bevel-darker); }

/* ----- NT primitive: tile (desktop shortcut) ----- */
.nt-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px 4px;
    padding: 10px;
}

.nt-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    color: #fff;
    font-family: var(--font-nt);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 1px dotted transparent;
}

.nt-tile:hover {
    text-decoration: none;
    color: #fff;
}

.nt-tile:focus,
.nt-tile:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 36, 0.35);
}

.nt-tile--on-light {
    color: var(--color-text);
}

.nt-tile--on-light:hover,
.nt-tile--on-light:focus {
    color: var(--color-text);
    background: rgba(0, 0, 128, 0.15);
    border-color: var(--color-text);
}

.nt-tile-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    overflow: hidden;
    image-rendering: pixelated;
}

.nt-tile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nt-tile-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.nt-tile-label {
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

.nt-tile--on-light .nt-tile-label {
    text-shadow: none;
}

.nt-tile-meta {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    opacity: 0.85;
    line-height: 1.1;
}

/* ----- NT primitive: status bar ----- */
.nt-statusbar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 3px;
    background: var(--nt-bg);
    font-family: var(--font-nt);
    font-size: 11px;
    color: var(--color-text);
}

.nt-statusbar-cell {
    flex: 1;
    padding: 2px 6px;
    box-shadow: var(--nt-bevel-in-thin);
    background: var(--nt-bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nt-statusbar-cell + .nt-statusbar-cell {
    margin-left: 2px;
}

.nt-statusbar-cell--grow {
    flex: 2;
}

/* NT menubar, taskbar/start button, and dialog primitives were
   removed when the chrome moved to a single iTunes window + the
   .it-alert panel. */

/* ----- NT primitive: fieldset (grouped form) ----- */
.nt-fieldset {
    border: none;
    box-shadow: var(--nt-bevel-out-thin);
    padding: 12px 12px 10px;
    margin: 8px 0;
    background: var(--nt-bg);
    font-family: var(--font-nt);
    font-size: 11px;
}

.nt-fieldset > legend {
    padding: 0 4px;
    font-family: var(--font-nt);
    font-size: 11px;
    color: var(--color-text);
}

/* ----- NT primitive: input/select/textarea ----- */
.nt-input {
    background: #fff;
    box-shadow: var(--nt-bevel-in-thin);
    border: 1px solid var(--nt-bevel-dark);
    padding: 3px 5px;
    font-family: var(--font-nt);
    font-size: 11px;
    color: var(--color-text);
    line-height: 1.4;
}

.nt-input:focus {
    outline: 1px dotted var(--color-text);
    outline-offset: -4px;
}

/* ----- NT primitive: badge ----- */
.nt-badge {
    display: inline-block;
    padding: 1px 8px;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    font-family: var(--font-nt);
    font-size: 10px;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.5;
}

a.nt-badge:hover {
    text-decoration: none;
    color: var(--color-text);
    background: var(--nt-bg-light);
}

/* ============================================================
   SITE CHROME
   ============================================================
   The window chassis (titlebar, toolbar, source-list sidebar,
   status bar) is owned by itunes-theme.css. The only legacy
   rules kept here hide the original .wiki-header / .wiki-tabs
   / .wiki-mobile-nav blocks in case any stale HTML still ships
   them. */

.wiki-header .header-inner { display: none; }
.wiki-tabs                 { display: none; }
.wiki-mobile-nav           { display: none !important; }

/* ============================================================
   ARTICLE PAGE - Linktree-style profile layout
   ============================================================ */

.wiki-article {
    line-height: 1.55;
}

/* Breadcrumb shown at the top of article pages */
.article-breadcrumb {
    font-size: 12px;
    color: var(--color-text-light);
    margin: 0 0 12px;
    padding: 4px 8px;
    background: var(--nt-bg-light, #f5f5f5);
    box-shadow: var(--nt-bevel-in, inset 1px 1px 0 #808080, inset -1px -1px 0 #fff);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.article-breadcrumb a {
    color: var(--color-text);
    text-decoration: none;
}

.article-breadcrumb a:hover {
    text-decoration: underline;
}

.article-breadcrumb-sep {
    color: var(--color-text-light);
    opacity: 0.7;
}

.article-breadcrumb-current {
    color: var(--color-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

/* Article header: legacy treatment stays the same inside white content body */
.article-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.article-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: normal;
    color: var(--color-black);
    margin: 0;
    line-height: 1.15;
    flex: 1;
    min-width: 0;
}

.article-meta {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin-top: 0;
    flex-basis: 100%;
}

.admin-edit-btn {
    position: static;
    background: var(--nt-bg);
    color: var(--color-text);
    box-shadow: var(--nt-bevel-out);
    border: 1px solid var(--nt-bevel-darker);
    border-radius: 0;
    padding: 3px 10px;
    font-family: var(--font-nt);
    font-size: 11px;
}

.admin-edit-btn:hover {
    background: var(--nt-bg-light);
    color: var(--color-text);
}

.admin-edit-btn:active {
    box-shadow: var(--nt-bevel-in);
}

.admin-edit-btn::before {
    content: '';
    margin: 0;
}

/* ----- Hero (photo + name + category badge) ----- */
.article-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 14px auto 18px;
    text-align: center;
}

.article-hero-photo {
    width: 220px;
    height: 220px;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out);
    padding: 4px;
    display: block;
    flex-shrink: 0;
}

.article-hero-photo img,
.article-hero-photo .article-hero-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--nt-bg-light);
    box-shadow: var(--nt-bevel-in-thin);
}

.article-hero-photo .article-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nt-bevel-darker);
}

.article-hero-photo .article-hero-placeholder svg {
    width: 96px;
    height: 96px;
    opacity: 0.65;
}

.article-hero-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.1;
    margin: 0;
    color: var(--color-black);
}

.article-hero-badge {
    display: inline-block;
    padding: 2px 10px;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    font-family: var(--font-nt);
    font-size: 11px;
    color: var(--nt-titlebar);
    text-decoration: none;
}

.article-hero-badge:hover {
    background: var(--nt-bg-light);
    text-decoration: none;
    color: var(--nt-titlebar);
}

/* ----- Facts panel (compact two-column under buttons) ----- */
.article-facts {
    max-width: 520px;
    margin: 12px auto 18px;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    padding: 8px 10px;
    font-family: var(--font-nt);
    font-size: 11px;
}

.article-facts-table {
    width: 100%;
    border-collapse: collapse;
}

.article-facts-table th,
.article-facts-table td {
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
    font-family: var(--font-nt);
    font-size: 11px;
    line-height: 1.4;
    border: none;
}

.article-facts-table tr + tr th,
.article-facts-table tr + tr td {
    border-top: 1px solid var(--nt-bevel-dark);
}

.article-facts-table th {
    width: 38%;
    background: transparent;
    color: var(--nt-bevel-darker);
    font-weight: 700;
}

.article-facts-table td {
    background: transparent;
    color: var(--color-text);
}

.article-facts-table a {
    color: var(--color-link);
}

/* ----- Description (Wikipedia-clean prose, white inner) ----- */
.article-description {
    margin: 18px 0 22px;
    background: #fff;
    box-shadow: var(--nt-bevel-in-thin);
    padding: 14px 18px;
}

.article-description-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 10px;
    background: linear-gradient(180deg, #f4f4f4, #d8d8d8);
    color: #4a4a4a;
    font-family: var(--it-font, sans-serif);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    border-bottom: 1px solid #b8b8b8;
}

.article-description .article-content {
    color: var(--color-text);
}

/* ----- Related tile groups (under description) ----- */
.article-tiles {
    margin: 18px 0;
}

.article-tiles-group + .article-tiles-group {
    margin-top: 18px;
}

.article-tiles-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(180deg, var(--it-aqua-1, #6ea1e0), var(--it-aqua-2, #2061c9));
    color: #fff;
    font-family: var(--it-font, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
    border-radius: 3px 3px 0 0;
}

.article-tiles-group .nt-tile-grid {
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    padding: 10px;
}

/* Event tiles get a bigger poster image - the artwork is the point.
   Posters come in mixed aspect ratios (square album covers AND
   portrait flyers), so we keep object-fit: contain and rely on
   itunes-theme.css's neutral letterbox bg. The poster row gets
   the largest min-width in the wiki because cropped event names
   are the most common readability complaint. */
.article-tiles-group--events .nt-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.article-tiles-group--events .nt-tile-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.article-tiles-group--events .nt-tile-icon svg {
    width: 56px;
    height: 56px;
}

/* Tiles on the article page sit on light background */
.article-tiles .nt-tile {
    color: var(--color-text);
}

.article-tiles .nt-tile:hover,
.article-tiles .nt-tile:focus {
    color: var(--color-text);
    background: rgba(0, 0, 128, 0.12);
    border-color: var(--color-text);
}

.article-tiles .nt-tile-label {
    text-shadow: none;
}

/* ----- Article status bar ----- */
.article-statusbar {
    margin-top: 20px;
}

.article-statusbar .nt-statusbar {
    padding: 3px;
}

/* ----- Article gallery in NT panel ----- */
.article-gallery-section {
    margin-top: 18px;
    padding: 0;
    border: none;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
}

.article-gallery-section > h2 {
    margin: 0;
    padding: 4px 10px;
    background: linear-gradient(180deg, var(--it-aqua-1, #6ea1e0), var(--it-aqua-2, #2061c9));
    color: #fff;
    font-family: var(--it-font, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}

.article-gallery-section .article-carousel {
    padding: 10px;
}

/* ----- Article songs (Spotify / SoundCloud / etc. embeds) -----
   No NT chrome around the embeds - they have their own colored UI
   that clashes with our titlebar/panel look. */
.article-songs {
    margin: 18px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ============================================================
   ARTIST PAGE - 2-column hero, compact link buttons
   ============================================================
   Scoped under .wiki-article--artist so other categories are
   untouched. Layout: photo + facts in left sidebar, name + links
   in right main column. Music-platform links bubble to the top
   of the unified link list via PHP-side sort.
*/

.wiki-article--artist .article-hero {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: start;
    gap: 24px;
    margin: 14px 0 18px;
    text-align: left;
}

.wiki-article--artist .article-hero-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.wiki-article--artist .article-hero-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.wiki-article--artist .article-hero-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.wiki-article--artist .article-hero-name {
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.05;
    text-align: left;
}

/* Facts panel sits inside the sidebar, full sidebar width. */
.wiki-article--artist .article-hero-side .article-facts {
    max-width: none;
    margin: 0;
    padding: 6px 8px;
}

.wiki-article--artist .article-hero-side .article-facts-table th {
    width: 44%;
}

.wiki-article--artist .article-hero-side .article-facts-table th,
.wiki-article--artist .article-hero-side .article-facts-table td {
    padding: 3px 5px;
    line-height: 1.35;
}

/* Compact link buttons: 2-column wrap on desktop. Each button is a
   solid brand-colored card (Spotify green, YouTube red, etc.) so it
   reads as one cohesive object instead of "colored icon glued onto
   gray bevel body". Icon area gets a translucent dark wash to keep
   the visual hierarchy. NT chrome (bevel/border) is replaced with a
   soft modern shadow so colored backgrounds don't fight the gray bevels. */
.wiki-article--artist .article-hero-main .nt-linkbtn-stack {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.wiki-article--artist .article-hero-main .nt-linkbtn {
    grid-template-columns: 52px 1fr;
    min-height: 56px;
    padding: 0;
    gap: 0;
    overflow: hidden;
    border: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.wiki-article--artist .article-hero-main .nt-linkbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.wiki-article--artist .article-hero-main .nt-linkbtn:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.wiki-article--artist .article-hero-main .nt-linkbtn-icon {
    width: 52px;
    height: auto;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: none;
}

.wiki-article--artist .article-hero-main .nt-linkbtn-icon svg {
    width: 26px;
    height: 26px;
}

/* SoundCloud's wordmark logo is horizontal (2.3:1) so size it differently
   from the square platform icons. */
.wiki-article--artist .article-hero-main .nt-linkbtn--soundcloud .nt-linkbtn-icon svg {
    width: 38px;
    height: auto;
}

.wiki-article--artist .article-hero-main .nt-linkbtn-body {
    padding: 6px 12px;
    gap: 2px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wiki-article--artist .article-hero-main .nt-linkbtn-label {
    font-size: 13px;
    color: #fff;
}

.wiki-article--artist .article-hero-main .nt-linkbtn-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
}

.wiki-article--artist .article-hero-main .nt-linkbtn-chevron {
    display: none;
}

/* Apply each brand color to the WHOLE button instead of just the icon block.
   The :not(.nt-linkbtn--ticket) selectors below skip ticket which uses a
   yellow background with dark text. */
.wiki-article--artist .article-hero-main .nt-linkbtn--instagram   { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.wiki-article--artist .article-hero-main .nt-linkbtn--facebook    { background: #1877f2; }
.wiki-article--artist .article-hero-main .nt-linkbtn--tiktok      { background: #000; }
.wiki-article--artist .article-hero-main .nt-linkbtn--youtube     { background: #ff0000; }
.wiki-article--artist .article-hero-main .nt-linkbtn--spotify     { background: #1db954; }
.wiki-article--artist .article-hero-main .nt-linkbtn--applemusic  { background: linear-gradient(135deg, #fc3c44, #fa2d55); }
.wiki-article--artist .article-hero-main .nt-linkbtn--soundcloud  { background: #ff5500; }
.wiki-article--artist .article-hero-main .nt-linkbtn--web         { background: var(--color-primary); }
.wiki-article--artist .article-hero-main .nt-linkbtn--map         { background: #34a853; }
.wiki-article--artist .article-hero-main .nt-linkbtn--article     { background: var(--nt-titlebar); }
.wiki-article--artist .article-hero-main .nt-linkbtn--generic     { background: #4a4a4a; }

/* Ticket keeps its yellow + dark text combo */
.wiki-article--artist .article-hero-main .nt-linkbtn--ticket      { background: #f4b400; }
.wiki-article--artist .article-hero-main .nt-linkbtn--ticket .nt-linkbtn-label { color: #000; }
.wiki-article--artist .article-hero-main .nt-linkbtn--ticket .nt-linkbtn-sub   { color: rgba(0, 0, 0, 0.7); }

@media (max-width: 800px) {
    .wiki-article--artist .article-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: center;
    }

    .wiki-article--artist .article-hero-side {
        align-items: center;
    }

    .wiki-article--artist .article-hero-photo {
        max-width: 220px;
        width: 100%;
    }

    .wiki-article--artist .article-hero-side .article-facts {
        max-width: 520px;
        width: 100%;
        text-align: left;
    }

    .wiki-article--artist .article-hero-name {
        text-align: center;
        font-size: 1.9rem;
    }

    .wiki-article--artist .article-hero-main .nt-linkbtn-stack {
        grid-template-columns: 1fr;
    }
}

/* ----- Hide legacy infobox/related/backlinks/auto-section on article pages
         (we render the Linktree layout instead) ----- */
.wiki-article .infobox,
.wiki-article .auto-section,
.wiki-article .related-articles,
.wiki-article .backlinks,
.wiki-article > .article-footer {
    /* Will only appear if the page falls back to legacy rendering.
       New article.php skips them entirely. */
}

/* The NT desktop-shortcut homepage was replaced by the iTunes
   library landing in index.php. All .nt-desktop-* and .nt-welcome
   rules were removed; new homepage primitives live in
   itunes-theme.css under section 9 (HOMEPAGE). */

/* ============================================================
   CATEGORY & SEARCH pages
   ============================================================ */

.category-description {
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    padding: 8px 12px;
    margin: 10px 0 12px;
    border-left: none;
    font-family: var(--font-nt);
    font-size: 11px;
}

.category-stats {
    font-family: var(--font-nt);
    font-size: 11px;
    color: var(--nt-bevel-darker);
    margin-bottom: 10px;
}

.category-view-toggle {
    display: flex;
    gap: 0;
    margin: 8px 0;
    font-family: var(--font-nt);
    font-size: 11px;
}

.category-view-toggle .nt-button {
    min-width: 0;
    padding: 3px 10px;
}

.category-folder {
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    padding: 8px;
    margin: 10px 0;
}

.category-folder .nt-tile-grid {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* Detail view (table) inside folder */
.category-detail-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-family: var(--font-nt);
    font-size: 11px;
}

.category-detail-table thead th {
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    padding: 3px 8px;
    text-align: left;
    font-weight: 700;
    color: var(--color-text);
    border: none;
}

.category-detail-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--nt-bevel-light);
    color: var(--color-text);
}

.category-detail-table tbody tr:hover {
    background: rgba(0, 0, 128, 0.08);
}

.category-detail-table .article-excerpt {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-light);
    margin: 2px 0 0;
}

/* Search page */
.search-form-large {
    display: flex;
    max-width: 460px;
    margin-bottom: 12px;
}

.search-input-large {
    flex: 1;
    background: #fff;
    box-shadow: var(--nt-bevel-in-thin);
    border: 1px solid var(--nt-bevel-dark);
    padding: 4px 6px;
    font-family: var(--font-nt);
    font-size: 12px;
}

.search-input-large:focus {
    outline: 1px dotted var(--color-text);
    outline-offset: -3px;
    border-color: var(--nt-bevel-dark);
}

.search-btn-large {
    padding: 4px 14px;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out);
    border: 1px solid var(--nt-bevel-darker);
    border-left: none;
    font-family: var(--font-nt);
    font-size: 12px;
    cursor: pointer;
}

.search-btn-large:active {
    box-shadow: var(--nt-bevel-in);
}

.search-results-list {
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    padding: 8px;
}

.search-results-list .nt-tile-grid {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.results-count {
    font-family: var(--font-nt);
    font-size: 11px;
    color: var(--nt-bevel-darker);
    margin-bottom: 8px;
}

.no-results,
.search-tips {
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    padding: 10px 12px;
    border-left: none;
    font-family: var(--font-body);
    font-size: 12px;
}

.no-results h2,
.search-tips h2 {
    font-family: var(--font-nt);
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 6px;
}

/* ============================================================
   PAGINATION (NT-styled)
   ============================================================ */

.pagination {
    display: flex;
    gap: 2px;
    margin-top: 12px;
    font-family: var(--font-nt);
    font-size: 11px;
}

.pagination a,
.pagination .current {
    display: inline-block;
    min-width: 22px;
    padding: 3px 8px;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out);
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
}

.pagination a:hover {
    text-decoration: none;
    background: var(--nt-bg-light);
}

.pagination .current {
    box-shadow: var(--nt-bevel-in);
    font-weight: 700;
}

/* Footer (status bar) and error-page chrome live in
   itunes-theme.css (.wiki-footer.it-statusbar and .it-alert). */
.wiki-footer .footer-inner { display: none; }
.error-page { background: transparent; padding: 24px 0; }

/* ============================================================
   FORM ELEMENTS INSIDE NT CONTENT BODY
   ============================================================ */

.wiki-content input[type="text"],
.wiki-content input[type="email"],
.wiki-content input[type="password"],
.wiki-content input[type="search"],
.wiki-content input[type="url"],
.wiki-content textarea,
.wiki-content select {
    font-family: var(--font-body);
    font-size: 13px;
}

/* ============================================================
   MOBILE / RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 980px) {
    .article-hero-photo {
        width: 200px;
        height: 200px;
    }

    .article-hero-name {
        font-size: 1.7rem;
    }

    .nt-linkbtn-stack {
        max-width: 100%;
    }

    .nt-tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 600px) {
    .article-hero-photo {
        width: 160px;
        height: 160px;
    }

    .article-hero-name {
        font-size: 1.5rem;
    }

    .nt-linkbtn {
        grid-template-columns: 40px 1fr 12px;
        min-height: 50px;
        padding: 6px 10px;
        gap: 10px;
    }

    .nt-linkbtn-icon {
        width: 36px;
        height: 36px;
    }

    .nt-linkbtn-icon svg {
        width: 20px;
        height: 20px;
    }

    .nt-linkbtn-label {
        font-size: 12px;
    }

    .nt-linkbtn-sub {
        font-size: 10px;
    }

    .article-description {
        padding: 12px 14px;
    }

    .article-description-header {
        margin: -12px -14px 10px;
    }
}

/* ============================================================
   GALLERY PAGE (NT panels around groups)
   ============================================================ */

.gallery-page .article-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
}

.gallery-page .gallery-subtitle {
    font-family: var(--font-nt);
    font-size: 11px;
    color: var(--nt-bevel-darker);
    margin: 4px 0 0;
}

.gallery-filter-tabs {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    padding: 4px;
    margin-bottom: 10px;
}

.gallery-filter-tabs .filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    color: var(--color-text);
    font-family: var(--font-nt);
    font-size: 11px;
    text-decoration: none;
    margin-right: 2px;
}

.gallery-filter-tabs .filter-tab:hover {
    background: var(--nt-bg-light);
    text-decoration: none;
    color: var(--color-text);
}

.gallery-filter-tabs .filter-tab.active {
    box-shadow: var(--nt-bevel-in-thin);
}

.gallery-filter-tabs .filter-count {
    background: var(--nt-bg-light);
    box-shadow: var(--nt-bevel-in-thin);
    padding: 0 6px;
    font-size: 10px;
    margin-left: 4px;
}

.gallery-group {
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out-thin);
    padding: 0;
    margin: 10px 0;
}

.gallery-group-header {
    background: linear-gradient(180deg, var(--it-aqua-1, #6ea1e0), var(--it-aqua-2, #2061c9));
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
    padding: 4px 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.gallery-group-header h2 {
    margin: 0;
    font-family: var(--font-nt);
    font-size: 11px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
}

.gallery-group-header h2 a {
    color: #fff;
    text-decoration: none;
}

.gallery-group-header h2 a:hover {
    text-decoration: underline;
}

.gallery-group-category {
    font-family: var(--font-nt);
    font-size: 10px;
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 6px;
}

.gallery-group-count {
    font-family: var(--font-nt);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
}

.gallery-group .gallery-grid {
    padding: 8px;
    background: var(--nt-bg);
}

/* ============================================================
   ADMIN PAGES (lightweight NT overrides)
   ============================================================ */

.admin-body {
    background: var(--nt-desktop);
}

.admin-header,
.admin-nav,
.admin-content {
    font-family: var(--font-body);
}

.admin-login {
    background: var(--nt-bg);
    box-shadow: var(--nt-bevel-out);
    padding: 0;
}

.admin-login-form {
    padding: 18px;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.nt-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-110%);
    padding: 6px 14px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-nt);
    font-size: 12px;
    text-decoration: none;
    z-index: 1000;
    transition: transform 0.15s;
}

.nt-skip-link:focus {
    transform: translateY(0);
    color: #fff;
    text-decoration: none;
    outline: 2px solid #fff;
    outline-offset: 0;
}

/* Visually-hidden helper */
.nt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   NT ICON SVG sprites (inline-style classes for reuse)
   ============================================================ */

.nt-icon {
    display: inline-block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    vertical-align: middle;
}

/* ============================================================
   Public edit suggestions: CTA + form styling
   ============================================================ */

.suggest-edit-cta {
    margin: 2rem 0 1rem;
    padding: 1.25rem 1.5rem;
    background: #f5f7fb;
    border: 1px solid #d6deea;
    border-left: 4px solid #3b6fd1;
    border-radius: 6px;
}

.suggest-edit-cta h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.suggest-edit-cta p {
    margin: 0 0 0.75rem;
    color: #455168;
    line-height: 1.5;
}

.it-suggest-cta .it-row-head h2 {
    font-size: 1rem;
}

.it-suggest-cta-body {
    padding: 1rem 1.5rem 1.25rem;
    background: #fafbfd;
    border: 1px solid #e4e8f0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.it-suggest-cta-body p {
    margin: 0;
    color: #455168;
    line-height: 1.5;
}

.suggest-form-page {
    padding-bottom: 3rem;
}

.suggest-form-header {
    margin-bottom: 1.5rem;
}

.suggest-form-lead {
    color: #455168;
    line-height: 1.6;
    margin: 0.5rem 0 0;
}

.suggest-form-errors {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #fdecea;
    border: 1px solid #f5c2bd;
    border-radius: 6px;
    color: #6e1c14;
}

.suggest-form-errors ul {
    margin: 0;
    padding-left: 1.25rem;
}

.suggest-form-section {
    background: #fff;
    border: 1px solid #e4e8f0;
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.suggest-form-section h2 {
    font-size: 1.1rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eef0f5;
}

.suggest-form-section .subsection-heading {
    font-size: 0.95rem;
    margin: 1.25rem 0 0.5rem;
    color: #455168;
}

.suggest-form .form-group {
    margin-bottom: 0.85rem;
}

.suggest-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    color: #2f3a52;
}

.suggest-form input[type="text"],
.suggest-form input[type="url"],
.suggest-form input[type="file"],
.suggest-form select,
.suggest-form textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    font: inherit;
    background: #fff;
    box-sizing: border-box;
}

.suggest-form textarea {
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.suggest-form .help-text {
    color: #6c7689;
    font-size: 0.8rem;
    margin: 0.25rem 0 0;
}

.suggest-form .social-link-row,
.suggest-form .custom-field-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: flex-start;
}

.suggest-form .social-link-row > * {
    flex: 1 1 auto;
}

.suggest-form .social-link-row select {
    flex: 0 0 130px;
}

.suggest-form .custom-field-row .form-group {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.suggest-form .events-checklist {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e4e8f0;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    background: #fafbfd;
}

.suggest-form .events-checklist .checkbox-label {
    display: block;
    padding: 0.2rem 0;
    font-weight: 400;
}

.suggest-form .events-checklist input[type="checkbox"] {
    margin-right: 0.4rem;
}

.suggest-form-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.suggest-form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.suggest-form-actions .btn {
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #cfd6e0;
    background: #fff;
    color: #2f3a52;
    cursor: pointer;
}

.suggest-form-actions .btn-primary,
.suggest-edit-cta .btn-primary {
    background: #3b6fd1;
    color: #fff;
    border-color: #3b6fd1;
}

.suggest-form-success {
    padding: 2rem;
    text-align: left;
}