/*
Theme Name: Dust and Testament
Theme URI: https://example.com
Author: Dust and Testament
Description: Music-first custom WordPress theme for Dust and Testament.
Version: 0.3.0
Requires PHP: 8.0
Text Domain: dust-testament
*/

:root{
  --bg:#0e0f10;
  --panel:#17191b;
  --panel2:#111315;
  --ink:#efe8dc;
  --muted:#aaa298;
  --rust:#a9472e;
  --rust-dark:#7e2f21;
  --line:#2a2d30;
  --cream:#d9cbb5;
  --max:1380px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5;overflow-x:hidden}
body.nav-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
a,button{-webkit-tap-highlight-color:transparent}

.content-width,.section-inner,.manifesto-inner,.footer-inner{width:min(var(--max),calc(100% - 12vw));margin-inline:auto}
.section{padding:78px 0;border-top:1px solid var(--line)}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(10,11,12,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.header-inner{width:min(var(--max),calc(100% - 8vw));min-height:72px;margin:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.brand{font-weight:900;letter-spacing:1.5px;font-size:20px;white-space:nowrap}
.primary-nav{justify-self:end}
.primary-menu{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.primary-menu a{display:block;color:#c9c1b5;font-size:14px;padding:12px 0}
.primary-menu a:hover,.primary-menu a:focus-visible{color:#fff}
.listen,.mobile-listen{background:var(--rust);font-weight:800;letter-spacing:.5px;font-size:13px;padding:11px 15px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.desktop-listen{grid-column:3}
.mobile-listen{display:none}
.menu-toggle{display:none;border:1px solid #4a4d50;background:transparent;color:#fff;width:46px;height:46px;padding:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:2px}
.menu-toggle span{width:22px;height:2px;background:#fff;display:block;transition:.2s ease}
.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){opacity:0}
.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{min-height:min(72vh,760px);position:relative;display:grid;align-items:end;padding:80px 0;background:linear-gradient(110deg,#151719 0%,#23272a 38%,#70412f 72%,#b26a3b 100%);overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 25%,rgba(255,194,120,.34),transparent 30%),linear-gradient(15deg,transparent 55%,rgba(0,0,0,.45))}
.hero:after{content:"";position:absolute;right:8%;bottom:0;width:42%;height:55%;background:linear-gradient(145deg,#111 0 48%,transparent 49%),linear-gradient(35deg,#1c1f21 0 49%,transparent 50%);clip-path:polygon(0 35%,100% 0,100% 100%,0 100%);opacity:.55}
.hero-copy{position:relative;z-index:2}
.eyebrow,.kicker{font-size:11px;line-height:1.4;letter-spacing:2.1px;color:#d9a28b;font-weight:800}
.hero h1,.page-title,.song-title{overflow-wrap:anywhere}
.hero h1{font-size:clamp(44px,7vw,96px);line-height:.92;margin:14px 0 12px;letter-spacing:-2px;max-width:900px}
.hero p{font-size:clamp(18px,2vw,22px);color:#ddd4c8;margin:0 0 26px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{border:1px solid #d5c8b7;padding:12px 18px;font-weight:800;min-height:46px;display:inline-flex;align-items:center;justify-content:center}
.btn.primary{background:var(--rust);border-color:var(--rust)}

/* Type */
h1,h2,h3,p{overflow-wrap:anywhere}
h2{font-size:clamp(32px,4.2vw,56px);line-height:1.02;margin:10px 0 18px}
h3{margin:12px 0 4px;line-height:1.2}
.page-title{font-size:clamp(42px,7vw,88px);line-height:.96;margin:12px 0 38px}
.song-title{font-size:clamp(42px,7vw,88px);line-height:.96;margin:12px 0 42px}

/* New release */
.new-release{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:56px;align-items:center}
.release-excerpt,.manifesto p,.stories-grid p{color:var(--muted);max-width:700px}
.release-art{min-width:0}
.release-cover,.song-cover,.single-cover{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid #35383b;background:#202224}
.release-cover{max-width:560px;margin-left:auto}
.cover-placeholder{aspect-ratio:1/1;background:linear-gradient(135deg,#161819,#5a3325);border:1px solid #35383b;display:grid;place-items:center;text-align:center;padding:20px;font-weight:900;letter-spacing:1px}
.release-placeholder{max-width:560px;margin-left:auto;font-size:clamp(24px,4vw,42px)}
.song-audio{display:block;width:100%;max-width:100%;margin:24px 0 18px}
.song-player{width:100%;max-width:100%;margin:24px 0 18px}
.youtube-player{position:relative;width:100%;aspect-ratio:16/9;background:#090a0b;border:1px solid #34383b;overflow:hidden}
.youtube-player iframe,.youtube-player embed,.youtube-player object{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.audio-player .song-audio{margin:0}
.player-fallback{margin:24px 0 18px}
.streaming{display:flex;gap:10px;flex-wrap:wrap}
.stream-link{color:#f0c0af;font-weight:700;border:1px solid #54433d;padding:10px 13px;min-height:44px;display:inline-flex;align-items:center}
.stream-link:hover,.stream-link:focus-visible{background:#211a18}

/* Cards */
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.text-link,.stories-grid a{color:#dca08d;font-weight:700}
.song-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.song-card{min-width:0}
.song-card a{display:block}
.song-cover{transition:transform .2s ease}
.song-card a:hover .song-cover{transform:translateY(-2px)}
.song-card p,.video-card p{margin:0;color:var(--muted);font-size:14px}

/* Manifesto */
.manifesto{padding:96px 0;text-align:center;background:#131516;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.manifesto blockquote{font-family:Georgia,serif;font-size:clamp(28px,4vw,54px);line-height:1.18;margin:18px auto;max-width:1050px}
.manifesto p{margin:18px auto 0}

/* Video */
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.video-card{min-width:0}
.video-media{position:relative;aspect-ratio:16/9;background:#202326;border:1px solid #34383b;overflow:hidden}
.video-image,.video-placeholder{width:100%;height:100%;object-fit:cover}
.video-placeholder{background:linear-gradient(145deg,#181a1c,#5b3728)}
.play-badge{position:absolute;left:50%;top:50%;translate:-50% -50%;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(169,71,46,.96);color:#fff;padding-left:3px;box-shadow:0 6px 22px rgba(0,0,0,.4)}

/* Stories */
.stories-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.stories-grid article{background:var(--panel);border:1px solid var(--line);padding:28px;min-width:0}
.stories-grid span{font-size:10px;letter-spacing:1.8px;color:#d9a28b}
.story-list{max-width:960px}
.story-list article{padding:0 0 46px;margin-bottom:46px;border-bottom:1px solid var(--line)}

/* Single song / prose */
.song-single-grid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.song-details{min-width:0}
.single-cover{max-width:580px}
.lyrics{max-width:820px;margin-top:60px;padding-top:44px;border-top:1px solid var(--line)}
.lyrics-text{white-space:pre-line;color:#ded7cc;font-size:17px;line-height:1.75}
.prose{max-width:960px}
.prose iframe,.prose video,.prose img{max-width:100%}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:30px 0;color:#b8b0a6}
.footer-inner{display:flex;gap:20px;align-items:center}
.footer-inner span{margin-left:auto}
.footer-inner small{color:#777}

/* Tablet */
@media (max-width:1000px){
  .content-width,.section-inner,.manifesto-inner,.footer-inner{width:min(var(--max),calc(100% - 8vw))}
  .header-inner{width:calc(100% - 6vw)}
  .new-release{gap:36px}
  .song-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stories-grid{grid-template-columns:1fr 1fr}
  .stories-grid article:last-child{grid-column:1/-1}
}

/* Mobile navigation and one-column layout */
@media (max-width:800px){
  .section{padding:60px 0}
  .content-width,.section-inner,.manifesto-inner,.footer-inner{width:calc(100% - 40px)}
  .header-inner{width:calc(100% - 28px);min-height:64px;grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
  .brand{font-size:16px;letter-spacing:1px;white-space:normal;line-height:1.05;max-width:190px}
  .desktop-listen{font-size:11px;padding:9px 11px;min-height:42px}
  .menu-toggle{display:flex}
  .primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#0b0c0d;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 20px 20px;max-height:calc(100vh - 64px);overflow:auto}
  .menu-open .primary-nav{display:block}
  .primary-menu{display:block}
  .primary-menu li{border-bottom:1px solid #24272a}
  .primary-menu a{font-size:17px;padding:16px 2px;min-height:52px}
  .mobile-listen{display:flex;margin-top:16px;width:100%}

  .hero{min-height:56vh;padding:68px 0 44px;align-items:end}
  .hero:after{width:65%;height:42%;right:-12%;opacity:.4}
  .hero h1{font-size:clamp(42px,13vw,72px);letter-spacing:-1.5px}
  .hero p{font-size:18px}
  .eyebrow{font-size:10px;letter-spacing:1.55px;max-width:520px}

  .new-release{grid-template-columns:1fr;gap:28px}
  .release-art{grid-row:1}
  .release-copy{grid-row:2}
  .release-cover,.release-placeholder{max-width:520px;margin:0 auto}
  .song-grid,.video-grid,.stories-grid{grid-template-columns:1fr}
  .stories-grid article:last-child{grid-column:auto}
  .section-head{align-items:flex-start;flex-direction:column;margin-bottom:24px}
  .manifesto{padding:70px 0}
  .manifesto blockquote{font-size:clamp(27px,7vw,42px)}
  .song-single-grid{grid-template-columns:1fr;gap:28px}
  .single-cover{margin:auto}
  .footer-inner{display:grid;gap:8px}
  .footer-inner span{margin-left:0}
}

/* Small phones: Galaxy S25 / iPhone-sized widths */
@media (max-width:560px){
  .section{padding:48px 0}
  .content-width,.section-inner,.manifesto-inner,.footer-inner{width:calc(100% - 28px)}
  .header-inner{width:calc(100% - 20px)}
  .brand{font-size:14px;max-width:145px}
  .desktop-listen{display:none}
  .header-inner{grid-template-columns:minmax(0,1fr) auto}
  .menu-toggle{grid-column:2}
  .hero{min-height:500px;padding:62px 0 36px}
  .hero h1{font-size:clamp(40px,13.5vw,62px);line-height:.94}
  .hero p{margin-bottom:22px}
  .actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .btn{width:100%;padding:12px 10px}
  h2{font-size:clamp(30px,9vw,44px)}
  .page-title,.song-title{font-size:clamp(38px,12vw,58px);margin-bottom:28px}
  .streaming{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .stream-link{justify-content:center;text-align:center;font-size:14px;padding:10px 8px}
  .song-grid{gap:24px}
  .song-card h3,.video-card h3{font-size:19px}
  .stories-grid article{padding:22px}
  .lyrics{margin-top:44px;padding-top:34px}
  .lyrics-text{font-size:16px;line-height:1.7}
  audio{min-height:48px}
}

@media (max-width:380px){
  .content-width,.section-inner,.manifesto-inner,.footer-inner{width:calc(100% - 22px)}
  .header-inner{width:calc(100% - 16px)}
  .brand{font-size:13px;max-width:132px}
  .hero h1{font-size:39px}
  .eyebrow{letter-spacing:1.2px}
  .actions,.streaming{grid-template-columns:1fr}
}