/* ---------- page hero ---------- */
.ph{position:relative;padding:150px 0 clamp(80px,9vw,130px);overflow:hidden;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 78% 40%,rgba(198,49,27,.22),transparent 70%)}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.ph h1{font-size:clamp(56px,8.4vw,132px);line-height:.92;margin:22px 0 30px}
.ph h1 em{display:block}
.roles{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.roles span{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;color:var(--cream);transition:background .3s,border-color .3s}
.roles span:hover{background:var(--red);border-color:var(--red)}
.ph .lead{max-width:56ch;color:rgba(246,239,231,.8)}
.ph-photo{position:relative}
.ph-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:260px 260px var(--r) var(--r)/200px 200px var(--r) var(--r)}
.ph-photo .stamp{position:absolute;left:-46px;bottom:60px;width:132px;height:132px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 20px 50px -15px rgba(198,49,27,.8)}
.ph-photo .stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.ph-photo .stamp text{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;fill:#fff;text-transform:uppercase}
.ph-photo .stamp b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px}
@keyframes spin{to{transform:rotate(360deg)}}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.crumbs a:hover{color:var(--cream)}

/* ---------- guitar strings (paper) ---------- */
.guitar-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px);align-items:start}
.quote{font-family:var(--serif);font-size:clamp(32px,3.6vw,54px);line-height:1.1;letter-spacing:-.02em;margin:20px 0 28px}
.quote em{font-style:italic;color:var(--red)}
.guitar-grid .body{color:var(--paper-ink);opacity:.85;max-width:52ch}
.special{margin-top:30px;padding:22px 24px;border-left:3px solid var(--red);background:var(--paper-2);border-radius:0 14px 14px 0;font-family:var(--serif);font-size:20px;line-height:1.4}
.strings{position:relative;background:#120e0d;color:#f6efe7;border-radius:26px;padding:34px 0 26px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(27,19,17,.7)}
.strings::before{content:"";position:absolute;right:-90px;top:50%;width:260px;height:260px;margin-top:-130px;border-radius:50%;background:radial-gradient(circle,#050303 0 58%,#2a1d18 59% 62%,transparent 63%)}
.strings-head{display:flex;justify-content:space-between;padding:0 32px 18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,239,231,.5)}
.string{position:relative;display:block;width:100%;text-align:left;padding:18px 32px 30px;cursor:pointer}
.string + .string{border-top:1px solid rgba(246,239,231,.06)}
.string .top{position:relative;z-index:1;display:flex;align-items:baseline;gap:16px}
.string .note{font-family:var(--mono);font-size:12px;color:var(--red-2);width:22px}
.string h3{font-size:clamp(30px,3vw,42px);transition:color .3s}
.string p{position:relative;z-index:1;font-size:15px;color:rgba(246,239,231,.6);margin:4px 0 0 38px;transition:color .3s}
.string svg{position:absolute;left:0;right:0;bottom:10px;width:100%;height:40px;overflow:visible;pointer-events:none}
.string path{fill:none;stroke:url(#metal);stroke-linecap:round}
.string:hover h3,.string.hot h3{color:var(--red-2)}
.string:hover p,.string.hot p{color:rgba(246,239,231,.9)}
.strings-hint{padding:10px 32px 0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,239,231,.4)}

/* ---------- author / producer ---------- */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.prod-photo{position:relative;border-radius:var(--r);overflow:hidden}
.prod-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%}
.prod-photo figcaption{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,239,231,.75)}
.meter{position:absolute;top:20px;right:20px;display:flex;gap:4px;align-items:flex-end;height:60px;padding:10px;border-radius:12px;background:rgba(13,10,9,.55);backdrop-filter:blur(8px)}
.meter i{width:6px;border-radius:2px;background:linear-gradient(0deg,#c6311b,#e2452c 60%,#f6efe7);animation:lvl 1.3s ease-in-out infinite}
.meter i:nth-child(1){animation-delay:-.2s}.meter i:nth-child(2){animation-delay:-.9s}.meter i:nth-child(3){animation-delay:-.5s}.meter i:nth-child(4){animation-delay:-1.1s}.meter i:nth-child(5){animation-delay:-.35s}
@keyframes lvl{0%,100%{height:20%}40%{height:95%}70%{height:55%}}
.prod h2{margin:18px 0 26px;font-size:clamp(40px,4.6vw,72px)}
.prod .body{color:var(--muted);max-width:54ch}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}
.pillars div{padding:18px;border:1px solid var(--line-2);border-radius:14px}
.pillars b{display:block;font-family:var(--serif);font-weight:500;font-size:20px;margin-bottom:4px}
.pillars span{font-size:14px;color:var(--muted);line-height:1.45;display:block}

/* ---------- journey (paper) ---------- */
.journey-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
.journey-grid .body{color:var(--paper-ink);opacity:.85;margin-top:24px;max-width:44ch}
.stages{border-top:1px solid var(--line-2)}
.stage{position:relative;display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:20px;padding:30px 0;border-bottom:1px solid var(--line-2);transition:padding .4s var(--ease)}
.stage .n{font-family:var(--mono);font-size:12px;color:var(--red)}
.stage h3{font-size:clamp(30px,3.4vw,50px);transition:color .3s}
.stage .tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-muted);text-align:right}
.stage:hover{padding-left:16px}
.stage:hover h3{color:var(--red)}
.peek{position:fixed;z-index:40;width:260px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-60%) scale(.85) rotate(-3deg);transition:opacity .3s,transform .4s var(--ease);box-shadow:0 30px 60px -20px rgba(27,19,17,.6)}
.peek.on{opacity:1;transform:translate(-50%,-60%) scale(1) rotate(-3deg)}
.peek img{width:100%;height:100%;object-fit:cover}

/* ---------- on stage: two faces ---------- */
.faces{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.face{position:relative;border-radius:var(--r);overflow:hidden;min-height:620px;display:flex;align-items:flex-end;isolation:isolate}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.face::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(13,10,9,.95) 0%,rgba(13,10,9,.55) 45%,rgba(13,10,9,.05) 75%)}
.face:hover img{transform:scale(1.05)}
.face-in{padding:clamp(26px,3vw,42px)}
.face .kicker{color:#f6efe7}
.face h3{font-size:clamp(36px,3.6vw,56px);margin:14px 0 14px}
.face p{color:rgba(246,239,231,.8);max-width:44ch}
.face ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;list-style:none}
.face li{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(246,239,231,.1);backdrop-filter:blur(6px)}

/* ---------- contrast slider ---------- */
.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center;margin-top:clamp(90px,10vw,140px)}
.contrast-grid h2{margin:18px 0 24px}
.contrast-grid .body{color:var(--muted);max-width:46ch}
.scale{display:flex;justify-content:space-between;margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.scale b{font-weight:500;color:var(--cream)}
.cmp{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;--x:50%;user-select:none;touch-action:pan-y;cursor:ew-resize}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .b{clip-path:inset(0 0 0 var(--x))}
.cmp .lbl{position:absolute;top:18px;z-index:2;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(13,10,9,.6);backdrop-filter:blur(6px)}
.cmp .l1{left:18px}.cmp .l2{right:18px}
.cmp .handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#f6efe7;z-index:3;pointer-events:none}
.cmp .knob{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5);font-family:var(--mono);font-size:16px;color:#fff}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}

/* ---------- manifesto ---------- */
.manifesto{text-align:center}
.manifesto p.big{font-family:var(--serif);font-size:clamp(36px,5.2vw,80px);line-height:1.06;letter-spacing:-.025em;max-width:18ch;margin:26px auto 0}
.manifesto p.big em{font-style:italic;color:var(--red)}
.manifesto .sub{font-size:clamp(18px,1.6vw,22px);color:var(--paper-muted);max-width:44ch;margin:30px auto 44px}
.manifesto .ctas{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.manifesto .sig{width:220px;margin:0 auto 10px}

@media (max-width:1100px){
  .ph-grid,.guitar-grid,.prod-grid,.journey-grid,.contrast-grid{grid-template-columns:1fr}
  .ph-photo{max-width:640px}
  .ph-photo .stamp{left:auto;right:-14px;bottom:30px}
  .prod-photo{order:-1;max-width:560px}
  .faces{grid-template-columns:1fr}
  .face{min-height:540px}
  .cmp{max-width:560px}
}
@media (max-width:640px){
  .ph{padding-top:120px}
  .ph-photo .stamp{width:104px;height:104px;right:-6px}
  .ph-photo .stamp b{font-size:21px}
  .ph-photo img{border-radius:160px 160px var(--r) var(--r)/120px 120px var(--r) var(--r)}
  .string{padding:16px 20px 28px}.strings-head,.strings-hint{padding-left:20px;padding-right:20px}
  .string p{margin-left:38px}
  .pillars{grid-template-columns:1fr}
  .stage{grid-template-columns:40px 1fr;padding:24px 0}
  .stage .tag{grid-column:2;text-align:left;margin-top:-10px}
  .face{min-height:500px}
  .peek{display:none}
}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
.faq-grid .lead{margin-top:20px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.25;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red-2)}
.faq summary i{flex:none;position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;margin:-.75px 0 0 -6.5px;background:currentColor}
.faq summary i::after{transform:rotate(90deg);transition:transform .3s}
.faq details[open] summary i{background:var(--red);border-color:var(--red);transform:rotate(180deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{color:var(--muted);max-width:60ch;padding:0 50px 28px 0}
@media (max-width:1100px){.faq-grid{grid-template-columns:1fr}}
@media (max-width:640px){.faq details p{padding-right:0}}