/* ICONIC VOICES — static voice/book landing pages (SEO).
   Self-contained: defines its own tokens so pages render on-brand even
   without the SPA's style.css. Loads alongside iv-karaoke.css. */
:root{
  --bg-primary:#0A0A0B;--bg-secondary:#141416;--bg-tertiary:#1C1C1F;
  --gold-primary:#C9A84C;--gold-light:#E8D48B;--gold-dark:#8B7333;
  --gold-glow:rgba(201,168,76,.15);--gold-glow-strong:rgba(201,168,76,.30);
  --text-primary:#F5F5F7;--text-secondary:#A1A1A6;--text-tertiary:#6E6E73;
  --border-subtle:rgba(201,168,76,.10);--border-card:rgba(201,168,76,.15);
  --border-active:rgba(201,168,76,.40);
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:880px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.iv-voice{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-secondary);line-height:1.7;overflow-x:hidden}
.iv-voice img{max-width:100%;display:block;height:auto}
.iv-voice a{color:var(--gold-primary);text-decoration:none;transition:color .2s}
.iv-voice a:hover{color:var(--gold-light)}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(201,168,76,.55);border-radius:6px}

/* header */
.iv-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px clamp(16px,5vw,40px);background:rgba(10,10,11,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-subtle)}
.iv-nav__brand{font-family:var(--font-display);font-size:1.15rem;color:var(--text-primary);letter-spacing:.01em}
.iv-nav__brand b{color:var(--gold-primary);font-weight:700}
.iv-nav__links{display:flex;gap:clamp(12px,3vw,26px);font-size:.86rem}
.iv-nav__links a{color:var(--text-secondary)}
.iv-nav__links a:hover{color:var(--gold-light)}

/* shell */
.iv-wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,5vw,24px)}
.iv-crumb{font-size:.76rem;color:var(--text-tertiary);padding:22px 0 0;letter-spacing:.03em}
.iv-crumb a{color:var(--text-tertiary)}.iv-crumb a:hover{color:var(--gold-primary)}

/* hero */
.iv-hero{padding:26px 0 8px;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,4vw,30px);align-items:center}
.iv-hero__portrait{width:clamp(96px,22vw,150px);aspect-ratio:1;border-radius:14px;object-fit:cover;
  border:1px solid var(--border-card);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 50px -20px var(--gold-glow-strong)}
.iv-hero__portrait--ph{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:clamp(2rem,7vw,3.2rem);color:var(--gold-dark);background:var(--bg-tertiary)}
.iv-eyebrow{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}
.iv-h1{font-family:var(--font-display);color:var(--text-primary);font-size:clamp(1.7rem,4.4vw,2.7rem);
  line-height:1.12;letter-spacing:-.02em}
.iv-h1 em{font-style:italic;color:var(--gold-light)}
.iv-meta{margin-top:10px;font-size:.82rem;color:var(--text-tertiary);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.iv-badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;padding:4px 10px;border-radius:999px;
  border:1px solid var(--border-card);color:var(--text-secondary)}
.iv-badge--real{color:var(--gold-light);border-color:var(--border-active)}
.iv-badge--narrator,.iv-badge--disputed{color:#9fb0c8}
@media(max-width:560px){.iv-hero{grid-template-columns:1fr;text-align:left}}

/* sample player block */
.iv-sample{margin:22px 0 8px;padding:18px 18px 8px;background:linear-gradient(180deg,rgba(201,168,76,.05),transparent);
  border:1px solid var(--border-card);border-radius:16px}
.iv-sample__lead{font-size:.86rem;color:var(--text-secondary);margin-bottom:12px}
.iv-sample__lead b{color:var(--gold-light);font-weight:600}

/* prose */
.iv-section{padding:26px 0;border-top:1px solid var(--border-subtle)}
.iv-section h2{font-family:var(--font-display);color:var(--text-primary);font-size:1.4rem;margin-bottom:12px;font-weight:700}
.iv-prose p{margin-bottom:14px;color:var(--text-secondary)}
.iv-prose p:last-child{margin-bottom:0}
.iv-quote{font-family:var(--font-display);font-style:italic;font-size:1.25rem;color:var(--gold-light);
  border-left:2px solid var(--border-active);padding:4px 0 4px 18px;margin:6px 0 4px}

/* CTA */
.iv-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.iv-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-size:.9rem;
  font-weight:600;transition:transform .15s,background .2s,box-shadow .2s}
.iv-btn--gold{background:var(--gold-primary);color:#161200;box-shadow:0 10px 30px -12px var(--gold-glow-strong)}
.iv-btn--gold:hover{color:#161200;transform:translateY(-1px);box-shadow:0 14px 34px -12px var(--gold-glow-strong)}
.iv-btn--ghost{border:1px solid var(--border-card);color:var(--text-primary)}
.iv-btn--ghost:hover{border-color:var(--border-active);color:var(--gold-light)}
.iv-note{font-size:.74rem;color:var(--text-tertiary);margin-top:10px}

/* FAQ */
.iv-faq details{border:1px solid var(--border-subtle);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--bg-secondary)}
.iv-faq summary{cursor:pointer;color:var(--text-primary);font-weight:600;font-size:.95rem;list-style:none}
.iv-faq summary::-webkit-details-marker{display:none}
.iv-faq summary::before{content:'+';color:var(--gold-primary);margin-right:10px;font-weight:700}
.iv-faq details[open] summary::before{content:'–'}
.iv-faq p{margin-top:10px;font-size:.9rem}

/* related */
.iv-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.iv-rel a{display:block;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-secondary);transition:border-color .2s,transform .15s}
.iv-rel a:hover{border-color:var(--border-active);transform:translateY(-2px)}
.iv-rel__name{font-family:var(--font-display);color:var(--text-primary);font-size:1.05rem;margin-bottom:2px}
.iv-rel__title{font-size:.8rem;color:var(--text-tertiary)}

/* footer */
.iv-foot{margin-top:40px;padding:28px clamp(16px,5vw,40px);border-top:1px solid var(--border-subtle);
  display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;font-size:.78rem;color:var(--text-tertiary)}
.iv-foot a{color:var(--text-tertiary)}.iv-foot a:hover{color:var(--gold-primary)}
.iv-foot__links{display:flex;gap:16px;flex-wrap:wrap}

/* index hub */
.iv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:24px 0 10px}
.iv-card{display:block;padding:16px;border:1px solid var(--border-subtle);border-radius:14px;background:var(--bg-secondary);transition:border-color .2s,transform .15s}
.iv-card:hover{border-color:var(--border-active);transform:translateY(-2px)}
.iv-card__name{font-family:var(--font-display);color:var(--text-primary);font-size:1.12rem}
.iv-card__title{font-size:.82rem;color:var(--text-secondary);margin:4px 0 8px}
.iv-card__tag{font-size:.68rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em}
.iv-lede{max-width:var(--maxw);margin:0 auto;padding:34px clamp(16px,5vw,24px) 0;text-align:center}
.iv-lede h1{font-family:var(--font-display);color:var(--text-primary);font-size:clamp(2rem,5vw,3rem);letter-spacing:-.02em}
.iv-lede h1 em{font-style:italic;color:var(--gold-light)}
.iv-lede p{color:var(--text-secondary);margin-top:12px;font-size:1.02rem}

/* email capture */
.iv-email{margin:8px 0;padding:22px 20px;background:linear-gradient(180deg,rgba(201,168,76,.06),transparent);border:1px solid var(--border-card);border-radius:16px;text-align:center}
.iv-email h3{font-family:var(--font-display);color:var(--text-primary);font-size:1.25rem;margin-bottom:6px}
.iv-email p{font-size:.88rem;color:var(--text-secondary);margin-bottom:14px}
.iv-email-form{display:flex;gap:8px;max-width:440px;margin:0 auto;flex-wrap:wrap}
.iv-email-form input{flex:1;min-width:190px;padding:12px 14px;background:var(--bg-primary);border:1px solid var(--border-card);border-radius:10px;color:var(--text-primary);font-size:.9rem;font-family:var(--font-body)}
.iv-email-form input:focus{outline:none;border-color:var(--gold-primary);box-shadow:0 0 0 3px rgba(201,168,76,.25)}
.iv-email-form button{padding:12px 20px;border-radius:10px;background:var(--gold-primary);color:#161200;font-weight:600;font-size:.9rem;border:none;cursor:pointer;transition:transform .15s}
.iv-email-form button:hover{transform:translateY(-1px)}
.iv-email-form button:disabled{opacity:.6;cursor:wait}
.iv-email-msg{font-size:.8rem;color:var(--gold-light);margin-top:10px;min-height:1.1em}
