:root{
  --bg:#050b10;
  --bg2:#09131a;
  --panel:rgba(8,17,23,.84);
  --panel-strong:rgba(5,12,17,.95);
  --paper:#f1eee7;
  --muted:#aeb8be;
  --soft:#7f8c94;
  --red:#b52b25;
  --red-bright:#d43a31;
  --line:rgba(235,239,240,.14);
  --shadow:0 30px 90px rgba(0,0,0,.55);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--bg);color:var(--paper);font-family:"Segoe UI",Arial,Helvetica,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%;height:auto}
button,input{font:inherit}
.skip-link{position:fixed;top:8px;left:8px;z-index:9999;padding:10px 14px;background:#fff;color:#000;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.site-header{position:fixed;inset:0 0 auto;z-index:60;background:linear-gradient(to bottom,rgba(3,8,12,.96),rgba(3,8,12,.72),transparent);backdrop-filter:blur(8px)}
.nav{width:min(var(--max),calc(100% - 42px));height:82px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12)}
.brand{text-decoration:none;font-family:"Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;font-weight:800;letter-spacing:.22em;font-size:15px;text-transform:uppercase}
.brand span{color:var(--red-bright)}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{text-decoration:none;text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:700;color:#d9dddf;position:relative;padding:10px 0}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;background:var(--red);transition:right .2s ease}
.nav-links a:hover:after,.nav-links a:focus-visible:after{right:0}
.menu-toggle{display:none;background:none;border:0;color:#fff;padding:8px;cursor:pointer}
.menu-toggle span{display:block;width:26px;height:2px;background:#fff;margin:5px 0}
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;padding:118px 0 66px;background-image:linear-gradient(90deg,rgba(2,7,10,.96) 0%,rgba(4,10,14,.90) 38%,rgba(4,10,14,.47) 66%,rgba(2,7,10,.74) 100%),url('../img/hero-background.webp');background-size:cover;background-position:center}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 74% 35%,rgba(213,225,232,.08),transparent 28%),linear-gradient(to bottom,transparent 68%,#050b10 100%)}
.grain{position:absolute;inset:0;opacity:.12;mix-blend-mode:soft-light;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.hero-inner{position:relative;z-index:2;width:min(var(--max),calc(100% - 42px));margin:auto;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(330px,.72fr);gap:clamp(46px,7vw,104px);align-items:center}
.eyebrow{margin:0 0 18px;color:var(--red-bright);font-family:"Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;font-size:14px;font-weight:800;letter-spacing:.28em;text-transform:uppercase}
.display-title{margin:0;max-width:820px;font-family:Impact,"Arial Narrow","Liberation Sans Narrow",sans-serif;font-size:clamp(61px,7.4vw,126px);line-height:.84;letter-spacing:.005em;text-transform:uppercase;text-shadow:0 4px 20px rgba(0,0,0,.55)}
.display-title span{display:block}
.hero-kicker{max-width:700px;margin:30px 0 0;font-family:"Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;font-size:clamp(21px,2vw,31px);line-height:1.28;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.hero-kicker strong{display:block;color:#fff}
.red-rule{width:150px;height:3px;background:var(--red);margin:22px 0}
.hero-copy{max-width:650px;margin:0;color:#ccd2d5;font-size:clamp(17px,1.4vw,21px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:54px;padding:0 23px;border:1px solid rgba(255,255,255,.28);text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);border-color:#fff}
.btn-primary{background:linear-gradient(145deg,#b82c24,#8f1713);border-color:#d3453d;box-shadow:0 14px 28px rgba(145,21,17,.24)}
.btn-secondary{background:rgba(4,10,14,.58)}
.release-pill{display:flex;align-items:center;gap:10px;margin-top:26px;color:#cbd1d4;font-size:14px}
.release-dot{width:8px;height:8px;border-radius:50%;background:var(--red-bright);box-shadow:0 0 18px var(--red)}
.date-change-note{margin:18px 0 0;padding:14px 16px;border-left:2px solid var(--red-bright);background:rgba(184,44,36,.08);color:#cbd1d4;font-size:13px;line-height:1.58}
.date-change-note strong{color:#fff}
.book-stage{perspective:1400px;display:grid;place-items:center;min-height:620px}
.book{position:relative;width:min(390px,82%);transform:rotateY(-11deg) rotateX(1.5deg);filter:drop-shadow(0 35px 45px rgba(0,0,0,.62));transition:transform .45s ease}
.book:hover{transform:rotateY(-5deg) translateY(-6px)}
.book:before{content:"";position:absolute;z-index:-1;left:-15px;top:10px;bottom:10px;width:24px;background:linear-gradient(90deg,#020405,#283039,#05080a);transform:skewY(-5deg);border-radius:4px 0 0 4px}
.book:after{content:"";position:absolute;z-index:-2;right:-12px;top:12px;bottom:12px;width:20px;background:repeating-linear-gradient(90deg,#d9d4c8 0 2px,#aaa69d 2px 3px);transform:skewY(3deg);border-radius:0 4px 4px 0}
.book img{display:block;width:100%;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.section{position:relative;padding:112px 0;border-top:1px solid rgba(255,255,255,.06)}
.section-inner{width:min(var(--max),calc(100% - 42px));margin:auto}
.section-label{margin:0 0 10px;color:var(--red-bright);font-size:12px;font-weight:800;letter-spacing:.25em;text-transform:uppercase}
.section-title{margin:0;font-family:Impact,"Arial Narrow","Liberation Sans Narrow",sans-serif;font-size:clamp(42px,5vw,76px);line-height:.98;letter-spacing:.018em;text-transform:uppercase}
.section-intro{max-width:760px;margin:24px 0 0;color:#bcc5ca;font-size:clamp(18px,1.45vw,22px)}
.book-section{background:linear-gradient(150deg,#071017 0%,#09151d 54%,#050b10 100%)}
.book-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.72fr);gap:clamp(48px,8vw,110px);align-items:start}
.book-text p{color:#c1c9cd;font-size:18px;max-width:770px}
.lead-quote{margin:38px 0;padding:26px 0 26px 28px;border-left:4px solid var(--red);font-family:Georgia,serif;font-size:clamp(24px,3vw,42px);line-height:1.25;color:#f0ece4}
.lead-quote span{display:block;margin-top:10px;font-family:"Segoe UI",Arial,sans-serif;font-size:14px;font-style:normal;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.meta-card{position:sticky;top:110px;padding:30px;background:linear-gradient(155deg,rgba(15,29,37,.96),rgba(5,12,17,.97));border:1px solid var(--line);box-shadow:var(--shadow)}
.meta-card h3{margin:0 0 19px;font-family:"Arial Narrow",Arial,sans-serif;font-size:24px;letter-spacing:.05em;text-transform:uppercase}
.meta-list{list-style:none;padding:0;margin:0}
.meta-list li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--line);color:#b7c0c5}
.meta-list strong{color:#fff;font-weight:700;text-align:right}
.shop-links{display:grid;gap:10px;margin-top:24px}
.shop-links[hidden]{display:none}
.shop-link{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border:1px solid var(--line);text-decoration:none;color:#e9ecee;background:rgba(255,255,255,.025)}
.shop-link:hover{border-color:var(--red);background:rgba(181,43,37,.09)}
.excerpt{padding:84px 0;background:#050b10}
.excerpt blockquote{max-width:940px;margin:0 auto;text-align:center;font-family:Georgia,serif;font-size:clamp(27px,3.5vw,48px);line-height:1.35;color:#e9e5dc}
.excerpt blockquote:before{content:'„';display:block;font-family:Georgia,serif;font-size:100px;line-height:.55;color:var(--red)}
.excerpt cite{display:block;margin-top:24px;font-family:"Segoe UI",Arial,sans-serif;font-size:13px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#8e9aa1}
.song-section{overflow:hidden;background-image:linear-gradient(90deg,rgba(4,10,14,.96),rgba(4,10,14,.72)),url('../img/hero-background.webp');background-size:cover;background-position:center 55%}
.song-grid{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:clamp(46px,7vw,100px);align-items:center}
.song-card{padding:32px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(6,15,20,.94),rgba(12,27,35,.86));box-shadow:var(--shadow)}
.wave{display:flex;align-items:center;height:88px;gap:5px;margin:15px 0 22px}
.wave i{display:block;width:5px;background:linear-gradient(to top,var(--red),#e3e8ea);border-radius:5px;animation:wave 1.1s ease-in-out infinite;animation-delay:calc(var(--i)*-.06s)}
@keyframes wave{0%,100%{height:16%}50%{height:88%}}
.song-card p{color:#b8c2c7}
.author-section{background:linear-gradient(135deg,#09141c,#050b10)}
.author-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(48px,7vw,92px);align-items:center}
.monogram{width:260px;aspect-ratio:1;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;position:relative;background:radial-gradient(circle at 40% 30%,rgba(202,216,223,.12),transparent 40%),#071017;box-shadow:var(--shadow)}
.monogram:before,.monogram:after{content:"";position:absolute;background:var(--red)}
.monogram:before{width:70%;height:2px;top:26px;left:15%}
.monogram:after{width:70%;height:2px;bottom:26px;left:15%}
.monogram span{font-family:Impact,"Arial Narrow",sans-serif;font-size:84px;letter-spacing:.04em;color:#e8e5de}
.author-copy p{color:#c1c9cd;font-size:18px;max-width:790px}
.credentials{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}
.credential{padding:10px 13px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.025);color:#d8dde0;font-size:13px}
.contact-section{text-align:center;background:#04090d}
.contact-section .section-intro{margin-left:auto;margin-right:auto}
.contact-mail{display:inline-block;margin-top:30px;font-family:"Arial Narrow",Arial,sans-serif;font-size:clamp(22px,3vw,36px);letter-spacing:.06em;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:5px}
.site-footer{padding:34px 0;border-top:1px solid var(--line);background:#020609;color:#7f8a91;font-size:13px}
.footer-inner{width:min(var(--max),calc(100% - 42px));margin:auto;display:flex;justify-content:space-between;align-items:center;gap:24px}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.legal-page{min-height:100svh;padding:130px 0 70px;background:linear-gradient(145deg,#071017,#03070a)}
.legal-wrap{width:min(880px,calc(100% - 42px));margin:auto}
.legal-wrap h1{font-family:Impact,"Arial Narrow",sans-serif;font-size:54px;letter-spacing:.04em;text-transform:uppercase}
.legal-wrap h2{margin-top:35px;font-size:22px}
.legal-wrap p,.legal-wrap li,.legal-wrap address{color:#c0c8cc;font-style:normal}
.notice{padding:18px;border-left:4px solid var(--red);background:rgba(181,43,37,.10);color:#fff;margin:25px 0}
.audio-page{min-height:100svh;padding:112px 0 50px;background-image:linear-gradient(90deg,rgba(2,7,10,.95),rgba(5,14,20,.75)),url('../img/hero-background.webp');background-size:cover;background-position:center}
.audio-wrap{width:min(1140px,calc(100% - 42px));margin:auto;display:grid;grid-template-columns:360px minmax(0,1fr);gap:70px;align-items:center}
.audio-cover{box-shadow:var(--shadow);transform:rotate(-1.5deg)}
.audio-panel{padding:45px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(5,13,18,.96),rgba(10,24,32,.91));box-shadow:var(--shadow)}
.audio-panel h1{margin:0;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(54px,7vw,86px);letter-spacing:.03em;text-transform:uppercase}
.audio-panel .intro{color:#b7c1c6;font-size:19px}
.player{margin-top:34px;padding:24px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.player-top{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:16px}
.play-button{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:#ece9e1;color:#081017;display:grid;place-items:center;cursor:pointer}
.play-button svg{width:25px;fill:currentColor}
.track-name{font-weight:800;font-size:18px}
.track-meta{color:#8f9ca3;font-size:14px}
.timeline{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center;margin-top:22px}
.progress{width:100%;accent-color:var(--red)}
.time{font-variant-numeric:tabular-nums;color:#b6c0c5;font-size:13px}
.back-link{display:inline-block;margin-top:24px;color:#b7c0c5;text-decoration:none}
.back-link:hover{color:#fff}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media (max-width:980px){
  .hero{background-position:61% center}
  .hero-inner,.book-grid,.song-grid,.author-grid,.audio-wrap{grid-template-columns:1fr}
  .hero-inner{padding-top:36px}
  .book-stage{min-height:auto;margin-top:25px}
  .book{width:min(360px,72%)}
  .meta-card{position:relative;top:auto}
  .song-card{max-width:520px}
  .author-grid{text-align:center}.monogram{margin:auto}.author-copy p{margin-left:auto;margin-right:auto}.credentials{justify-content:center}
  .audio-cover{max-width:330px;margin:auto}.audio-panel{max-width:720px;margin:auto}
}
@media (max-width:760px){
  .nav{height:70px}
  .menu-toggle{display:block}
  .nav-links{position:absolute;top:70px;left:21px;right:21px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:16px;background:rgba(3,8,12,.98);border:1px solid var(--line)}
  .nav-links.is-open{display:flex}
  .nav-links a{padding:13px}
  .hero{padding-top:92px;background-image:linear-gradient(to bottom,rgba(2,7,10,.86),rgba(2,7,10,.92)),url('../img/hero-background.webp');background-position:68% center}
  .display-title{font-size:clamp(54px,18vw,82px)}
  .hero-kicker{font-size:20px}
  .hero-actions{display:grid}.btn{width:100%}
  .section{padding:82px 0}
  .book{width:min(330px,85%)}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .audio-panel{padding:28px}
}

/* ---------------------------------------------------------
   Mobile portrait correction – V6
   Prevents long headings and text blocks from widening the
   CSS grid beyond the viewport on phones held upright.
   --------------------------------------------------------- */
@media (max-width:980px){
  .hero-inner>* ,
  .book-grid>* ,
  .song-grid>* ,
  .author-grid>* ,
  .audio-wrap>* {min-width:0}

  .display-title,
  .hero-kicker,
  .hero-copy,
  .section-title,
  .section-intro,
  .author-copy,
  .audio-panel {max-width:100%}
}

@media (max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .nav,.hero-inner,.section-inner,.footer-inner,.audio-wrap,.legal-wrap{
    width:calc(100% - 32px);
    max-width:100%;
  }

  .hero{
    min-height:auto;
    overflow-x:clip;
    padding:96px 0 72px;
  }
  .hero-inner{width:calc(100% - 32px);padding-top:22px;gap:38px}
  .hero-inner>div:first-child{width:100%;min-width:0;max-width:100%}

  .display-title{
    width:100%;
    max-width:100%;
    font-size:clamp(50px,16.2vw,70px);
    line-height:.88;
    letter-spacing:0;
    overflow-wrap:normal;
    word-break:normal;
  }
  .display-title span{width:100%;max-width:100%}
  .display-title span:last-child{
    margin-top:7px;
    font-size:clamp(34px,11.5vw,48px);
    line-height:1.03;
    letter-spacing:0;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .eyebrow{max-width:100%;font-size:13px;letter-spacing:.22em;overflow-wrap:anywhere}
  .hero-kicker{
    width:100%;
    max-width:100%;
    margin-top:25px;
    font-size:clamp(17px,4.8vw,20px);
    line-height:1.34;
    letter-spacing:.025em;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
  }
  .hero-kicker strong{max-width:100%}
  .hero-copy{
    width:100%;
    max-width:100%;
    font-size:16px;
    line-height:1.62;
    overflow-wrap:break-word;
  }
  .red-rule{width:112px;margin:20px 0}
  .hero-actions{width:100%;max-width:100%;gap:12px}
  .btn{max-width:100%;padding-inline:16px;letter-spacing:.11em}
  .release-pill{max-width:100%;align-items:flex-start;line-height:1.45}
  .release-dot{flex:0 0 8px;margin-top:6px}

  .book-stage{width:100%;max-width:100%;overflow:visible;margin-top:6px}
  .book{width:min(292px,82%);max-width:82%;transform:none}
  .book:hover{transform:translateY(-4px)}

  .section-title{
    max-width:100%;
    font-size:clamp(36px,11vw,52px);
    line-height:1.02;
    overflow-wrap:break-word;
    word-break:normal;
  }
  .book-text p,.author-copy p,.song-card p,.section-intro{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }
  .lead-quote{padding-left:18px;font-size:clamp(22px,7vw,31px)}
  .meta-card{padding:24px}
  .meta-list li{flex-direction:column;gap:3px}
  .meta-list strong{text-align:left;overflow-wrap:break-word}

  .song-card{width:100%;max-width:100%;padding:24px}
  .wave{gap:3px;overflow:hidden}
  .wave i{min-width:3px;width:4px}

  .monogram{width:min(240px,78vw)}
  .credentials{max-width:100%}
  .credential{max-width:100%;overflow-wrap:break-word}

  .contact-mail{
    max-width:100%;
    font-size:clamp(17px,5vw,25px);
    letter-spacing:.015em;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .audio-page{padding-top:96px}
  .audio-wrap{gap:30px}
  .audio-cover{width:min(280px,78vw)}
  .audio-panel{width:100%;padding:24px}
  .audio-panel h1{max-width:100%;font-size:clamp(46px,15vw,68px);line-height:.98;overflow-wrap:break-word}
  .audio-panel .intro{font-size:17px;overflow-wrap:break-word}
  .player{padding:18px}
  .player-top{grid-template-columns:54px minmax(0,1fr);gap:13px}
  .play-button{width:54px;height:54px}
  .track-name,.track-meta{max-width:100%;overflow-wrap:break-word;word-break:normal}
  .timeline{grid-template-columns:1fr;gap:7px}
  .time{justify-self:end}

  .legal-wrap h1{font-size:clamp(38px,12vw,52px);overflow-wrap:break-word}
}

@media (max-width:360px){
  .nav,.hero-inner,.section-inner,.footer-inner,.audio-wrap,.legal-wrap{width:calc(100% - 24px)}
  .brand{font-size:13px;letter-spacing:.13em}
  .display-title{font-size:clamp(45px,15.4vw,55px)}
  .display-title span:last-child{font-size:clamp(32px,10.9vw,40px)}
  .hero-kicker{font-size:17px;letter-spacing:.012em}
  .hero-copy{font-size:15.5px}
  .btn{min-height:52px;padding-inline:13px;font-size:11px;letter-spacing:.09em}
  .release-pill{font-size:13px}
  .section{padding:72px 0}
}

@media (max-width:760px){
  .timeline{width:100%;min-width:0;max-width:100%;overflow:hidden}
  .progress{display:block;width:100%;min-width:0;max-width:100%;margin:0}
}

/* Desktop safeguard for the long title word. */
@media (min-width:761px){
  .display-title{font-size:clamp(61px,7vw,100px)}
}

/* Song release gate – V8 */
.release-lock{margin-top:34px;padding:26px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.release-lock-label{margin:0 0 18px;color:#d8dde0;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.countdown-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.countdown-grid>div{min-width:0;padding:16px 8px;text-align:center;border:1px solid rgba(255,255,255,.12);background:rgba(2,7,10,.44)}
.countdown-grid strong{display:block;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(28px,4vw,46px);line-height:1;color:#f1eee7;font-variant-numeric:tabular-nums}
.countdown-grid span{display:block;margin-top:8px;color:#8f9ca3;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.release-lock-note{margin:18px 0 0;color:#9ba7ad;font-size:13px}
@media (max-width:520px){
  .countdown-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .release-lock{padding:20px}
}