/* pages.css - one look for about, listen, links, press, blog and legal (matches the homepage:
   black, thin lines, square corners, small spaced capitals, red only as an accent) */
:root{--pg-line:#1f1c1c;--pg-card:#0b0a0a;--pg-red:#b22222;--pg-dim:#8a8484;--pg-text:#c9c3c3}

/* page titles clear the fixed header on computers (the header is ~112px tall) */
@media (min-width:769px){
  html:not(.mobile-device) .page-header,html:not(.mobile-device) .blog-header{padding:calc(112px + 3.25rem) 0 2.75rem!important}
  html:not(.mobile-device) .article-header{padding:calc(112px + 2.5rem) 0 2.5rem!important}
}
.page-header,.blog-header{background:none!important}
.page-title,.page-title.glitch{text-shadow:0 0 14px rgba(178,34,34,.28)!important}
.page-subtitle{color:var(--pg-dim)!important;font-size:.8rem!important;letter-spacing:.32em!important}

/* cards: square, thin border, no lift or glow */
.content-block,.listen-card,.press-stat,.press-link,.press-photo,.press-tracks li,.blog-card,.link-item,.contact-method,
.credit-item,.press-contact-box,.ns-embed,.platform-link,.article-cta,.press-member img,.pg-card{border-radius:0!important}
.content-block{background:var(--pg-card)!important;border:1px solid var(--pg-line)!important;border-left:2px solid var(--pg-red)!important;box-shadow:none!important}
.content-block:hover{transform:none!important;box-shadow:none!important;background:var(--pg-card)!important}
.about-content{background:none!important}
.listen-card{background:var(--pg-card)!important;border-color:var(--pg-line)!important}
.listen-card:hover{box-shadow:none!important;border-color:#4a1515!important}
.listen-card iframe{border-radius:0!important}
.blog-card{background:var(--pg-card)!important;border:1px solid var(--pg-line)!important}
.blog-card:hover{border-color:#4a1515!important}

/* ---------- ABOUT ---------- */
.ab-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.ab-grid .full{grid-column:1/-1}
.ab-grid .content-block p{max-width:62ch}
.ab-facts{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ab-facts li{border:1px solid var(--pg-line);padding:12px 10px;text-align:center;font-family:var(--font-body);font-size:.68rem;letter-spacing:.14em;color:var(--pg-dim);text-transform:uppercase}
.ab-facts b{display:block;color:var(--pg-red);font-size:1.15rem;letter-spacing:.08em;margin-bottom:4px;font-weight:400}
.nm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px}
.nm-grid li{margin:0;padding:0}
.nm-grid a{display:block;text-decoration:none;color:var(--pg-dim);font-family:var(--font-body);font-size:.66rem;letter-spacing:.12em;text-align:center}
.nm-grid a::after{content:none!important}
.nm-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:grayscale(.85) contrast(1.1);border:1px solid #222;transition:filter .2s}
.nm-grid span{display:block;margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-grid a:hover img,.nm-grid a:focus-visible img{filter:none}
.nm-grid a:hover,.nm-grid a:focus-visible{color:#f2eeee}
.ab-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ab-tags li{margin:0;padding:0}
.ab-tags a{display:inline-block;white-space:nowrap;border:1px solid var(--pg-line);padding:7px 10px;color:var(--pg-text);text-decoration:none;font-family:var(--font-body);font-size:.7rem;letter-spacing:.12em}
.ab-tags a:hover,.ab-tags a:focus-visible{border-color:var(--pg-red);color:#fff}
.ab-note{font-size:.75rem!important;color:var(--pg-dim)!important;margin:14px 0 0!important}
.ab-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
.ab-contact a{display:block;border:1px solid var(--pg-line);padding:16px 14px;text-decoration:none;color:var(--pg-text);font-family:var(--font-body);font-size:.78rem;letter-spacing:.1em;word-break:break-word}
.ab-contact a small{display:block;color:var(--pg-dim);font-size:.62rem;letter-spacing:.18em;margin-bottom:6px;text-transform:uppercase}
.ab-contact a:hover,.ab-contact a:focus-visible{border-color:var(--pg-red);color:#fff}
@media (max-width:900px){.ab-grid{grid-template-columns:1fr}.ab-contact{grid-template-columns:1fr}}
@media (max-width:420px){.ab-facts{gap:6px}.ab-facts li{padding:10px 4px;font-size:.58rem;letter-spacing:.08em}.nm-grid{gap:12px 8px}.nm-grid a{font-size:.56rem;letter-spacing:.04em}}
.mobile-device .ab-contact a{font-size:.85rem!important;min-height:44px}
.mobile-device .ab-tags a{font-size:.72rem!important;padding:9px 10px!important}

/* ---------- LISTEN ---------- */
.listen-card-label{font-family:var(--font-body)!important;font-size:.95rem!important;letter-spacing:.24em!important}
.listen-card-label a{color:inherit;text-decoration:none}
.listen-card-label a::after{content:none!important}
.listen-card-label a:hover{color:#fff}

/* ---------- LINKS ---------- */
.links-section .link-item{background:var(--pg-card)!important}
.links-section .link-item:hover{transform:none!important;box-shadow:none!important}
.links-email a{color:var(--pg-dim);text-decoration:none;border-bottom:1px solid #333}
.links-email a:hover{color:#fff;border-color:var(--pg-red)}
.links-email a::after{content:none!important}

/* ---------- PRESS ---------- */
.press-stats{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.press-members{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.press-photos{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.press-links{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.press-stat,.press-link,.press-tracks li{background:var(--pg-card)!important;border-color:var(--pg-line)!important}
.press-genre-tag{border-radius:0!important}
.press-member img{filter:grayscale(.85) contrast(1.1);transition:filter .2s}
.press-member:hover img{filter:none}
@media (max-width:900px){.press-links{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:768px){.press-members,.press-photos{grid-template-columns:repeat(2,minmax(0,1fr))!important}.press-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .press-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.press-stats .press-stat:last-child{grid-column:1/-1}}

/* ---------- LEGAL ---------- */
.lg-doc{max-width:780px;margin:0 auto}
.lg-toc{list-style:none;margin:0 0 28px;padding:14px 16px;border:1px solid var(--pg-line);display:flex;flex-wrap:wrap;gap:8px 18px}
.lg-toc li{margin:0}
.lg-toc a{color:var(--pg-dim);text-decoration:none;font-family:var(--font-body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.lg-toc a::after{content:none!important}
.lg-toc a:hover{color:#fff}
.lg-doc .content-block{margin:0 0 22px;scroll-margin-top:130px}
.lg-doc .content-block p,.lg-doc .legal-list li{max-width:none}
.lg-updated{color:var(--pg-dim);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;margin:8px 0 0}
.mobile-device .lg-toc a{font-size:.72rem!important;line-height:2}

/* the consent banner never hides the last links on the page */
html.nsc-open .site-footer{padding-bottom:calc(72px + var(--nsc-h,0px))!important}

/* small phones: a slightly smaller logo leaves room for the EN button in the header (instead of floating over the text) */
@media (max-width:380px){.mobile-device .site-header .logo-image{height:66px!important;width:auto!important}}
/* right-to-left (Arabic): the menu button is on the left and the label is wider, so the logo gives a little more room */
@media (max-width:400px){html[dir=rtl].mobile-device .site-header .logo-image{height:72px!important;width:auto!important}}
@media (max-width:380px){html[dir=rtl].mobile-device .site-header .logo-image{height:62px!important}}
@media (max-width:768px){html:not(.mobile-device) .page-header,html:not(.mobile-device) .blog-header,html:not(.mobile-device) .article-header{padding-top:148px!important}}
.press-photo img{object-fit:contain!important;padding:10px;box-sizing:border-box}

/* ==== Touch-up 29 Oct 2026: no red, no glow on About, Legal, Blog, articles, Listen, Links, Press (same layout) ==== */
main{--pg-red:#8f897f;--color-blood-primary:#8f897f;--color-blood-accent:#ece7df;--color-glow:transparent;--link-accent:#ece7df}
main a:hover,main a:focus-visible,main button:hover{text-shadow:none!important}
/* About + Legal */
html body .about-content{background:none!important}
html body .content-block{border-left:1px solid #2a2825!important}
html body .content-block:hover{border-left-color:#3a3631!important;box-shadow:none!important}
html body .content-block h2{color:#ece7df!important}
html body .content-block h2::after{background-color:#3a3631!important}
html body .ab-facts b{color:#ece7df!important}
html body .ab-tags a:hover,html body .ab-tags a:focus-visible,html body .ab-contact a:hover,html body .ab-contact a:focus-visible{border-color:#8f897f!important}
html body .legal-list li::before{color:#8f897f!important}
html body .content-block p a,html body .legal-list li a{color:#ece7df!important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#5a554e}
/* Blog list */
html body .blog-card:hover{border-color:#3a3631!important;box-shadow:none!important}
html body .blog-card-label{color:#8f897f!important;border-color:#3a3631!important}
html body .blog-card-read{color:#ece7df!important;border-color:transparent!important}
html body .blog-card-read::after{color:inherit!important}
html body .blog-card:hover .blog-card-read{text-decoration:underline;text-underline-offset:4px}
/* Articles */
html body .article-back{color:#8f897f!important;border-color:transparent!important}
html body .article-back::before{color:inherit!important;background:none!important}
html body .article-back:hover{color:#ece7df!important}
html body .article-body h2{color:#ece7df!important}
html body .article-body a{color:#ece7df!important;border-bottom:1px solid #5a554e!important}
html body .article-body a::after{color:#8f897f!important}
html body .article-body a:hover{border-bottom-color:#ece7df!important}
html body .article-divider{background:#3a3631!important}
html body .article-cta a.cta-btn{color:#ece7df!important;border:1px solid #8f897f!important;box-shadow:none!important}
html body .article-cta a.cta-btn::after{color:inherit!important}
html body .article-cta a.cta-btn:hover{background:#ece7df!important;color:#151311!important;border-color:#ece7df!important}
/* Listen */
html body .listen-card:hover{border-color:#3a3631!important;box-shadow:none!important}
html body .listen-card-label,html body .listen-card-label a{color:#ece7df!important}
html body .platform-link:hover{border-color:#8f897f!important;color:#ece7df!important;box-shadow:none!important;text-shadow:none!important}
html body .listen-divider{background:linear-gradient(90deg,transparent 0%,#2a2825 20%,#3a3631 50%,#2a2825 80%,transparent 100%)!important}
/* Links */
html body .links-logo{filter:none!important}
html body .links-title{color:#ece7df!important;text-shadow:none!important}
html body .link-youtube,html body .link-website{--link-accent:#ece7df!important}
html body .link-item:hover{box-shadow:none!important}
html body .links-email a{color:#8f897f!important}
html body .links-email a:hover{color:#ece7df!important;border-color:#8f897f!important}
/* Press */
html body .press-section h2{color:#ece7df!important}
html body .press-stat-number,html body .press-track-plays{color:#ece7df!important}
html body .press-genre-tag{color:#8f897f!important;border-color:#3a3631!important}
html body .press-tracks li:hover{border-color:#3a3631!important}
html body .press-link:hover{border-color:#8f897f!important;color:#ece7df!important;box-shadow:none!important}
html body .press-photo-download a,html body .press-contact-box a{color:#ece7df!important;text-decoration:underline;text-underline-offset:3px}
html body .press-contact-box{border:1px solid #3a3631!important}


/* ==== Red accents 29 Oct 2026: flat red on small things only. Never titles, never glow, about one per screen.
   #B22222 for lines and fills; #E0443A for small red text (readable on black). ==== */
html body .article-meta{color:#e0443a!important}
html body .article-divider{background:#b22222!important;opacity:1!important}
html body .article-cta a.cta-btn:hover,html body .article-cta a.cta-btn:focus-visible{background:#b22222!important;border-color:#b22222!important;color:#ece7df!important}
html body .blog-card:hover{border-color:#b22222!important}