/* 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:#8E8E96;
  --prov-restored:var(--gold-light);--prov-narrator:#A9B4C0;--prov-disputed:#D08B4C;
  --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-primary);margin-bottom:8px}
.iv-h1{font-family:var(--font-display);color:var(--text-primary);font-size:clamp(2rem,5vw,3.2rem);
  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(--prov-restored);border-color:var(--border-active)}
.iv-badge--narrator{color:var(--prov-narrator);border-color:rgba(169,180,192,.35)}
.iv-badge--disputed{color:var(--prov-disputed);border-color:rgba(208,139,76,.4)}
@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}
/* Scoped: `.iv-voice a` above is (0,1,1) and outranks a bare `.iv-btn--*` (0,1,0),
   which painted anchor CTAs gold-on-gold. Every page loading this sheet is
   body.iv-voice, so the scope always matches — do not drop it. */
.iv-voice .iv-btn--gold{background:var(--gold-primary);color:#161200;box-shadow:0 10px 30px -12px var(--gold-glow-strong)}
.iv-voice .iv-btn--gold:hover{color:#161200;transform:translateY(-1px);box-shadow:0 14px 34px -12px var(--gold-glow-strong)}
.iv-voice .iv-btn--ghost{border:1px solid var(--border-card);color:var(--text-primary)}
.iv-voice .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-v2-author-card language: portrait thumb, Playfair name,
   color-coded provenance tag, inline play chip */
.iv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:24px 0 10px}
.iv-card{position:relative;display:block;border:1px solid var(--border-subtle);border-radius:14px;
  background:var(--bg-secondary);overflow:hidden;transition:border-color .2s,transform .15s,box-shadow .2s}
.iv-card:hover{border-color:var(--border-active);transform:translateY(-3px);
  box-shadow:0 18px 40px -24px var(--gold-glow-strong)}
.iv-card__main{display:block}
.iv-card__pic{width:100%;aspect-ratio:1;object-fit:cover;border-bottom:1px solid var(--border-subtle);
  filter:saturate(.92) contrast(1.02);background:var(--bg-tertiary)}
.iv-card:hover .iv-card__pic{filter:saturate(1) contrast(1.04)}
.iv-card__body{padding:14px 16px 16px}
.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 10px}
.iv-card__tag{display:inline-block;font-size:.66rem;color:var(--text-tertiary);text-transform:uppercase;
  letter-spacing:.08em;padding:3px 9px;border-radius:999px;border:1px solid var(--border-subtle)}
.iv-card__tag--restored{color:var(--prov-restored);border-color:rgba(232,212,139,.35)}
.iv-card__tag--narrator{color:var(--prov-narrator);border-color:rgba(169,180,192,.35)}
.iv-card__tag--disputed{color:var(--prov-disputed);border-color:rgba(208,139,76,.4)}
.iv-chip{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:none;
  cursor:pointer;display:grid;place-items:center;font-size:.9rem;color:#20180A;
  background:linear-gradient(180deg,#E8D48B,#C9A84C 55%,#A8862F);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.8);opacity:.92;transition:transform .15s,opacity .15s}
.iv-chip:hover{opacity:1;transform:scale(1.06)}
.iv-chip.is-playing{background:linear-gradient(180deg,#F5E7AE,#E8D48B)}
.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:max(16px,1rem);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}

/* ---------------------------------------------------------------------------
   D3 — cinematic aura, CSS-only port of the landing atmosphere.
   iv-2026.css sets body::before{background:none!important} for the homepage
   WebGL stage; voice pages have no #iv-bg markup, so re-light them here
   (higher specificity + later file wins). */
body.iv-voice::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(120% 90% at 50% -10%,rgba(201,168,76,.13),transparent 55%),
  radial-gradient(80% 60% at 85% 100%,rgba(120,84,38,.09),transparent 60%),
  radial-gradient(150% 130% at 50% 46%,transparent 55%,rgba(3,2,5,.55) 100%) !important}
.iv-wrap,.iv-lede,.iv-nav,.iv-foot{position:relative;z-index:1}

/* D3 — compact no-wrap nav on small screens (the old nav wrapped at 375px) */
@media(max-width:560px){
  .iv-nav{flex-wrap:nowrap;padding:12px 14px;gap:10px}
  .iv-nav__brand{font-size:1rem;white-space:nowrap}
  /* `min-width:0` is the fix, not the gap: a flex item defaults to
     min-width:auto and so refuses to shrink below its content, which pushed the
     last link 5px past the viewport on EVERY voice page at 390. With it the row
     shrinks and scrolls inside its own box, so the page itself never scrolls
     sideways no matter how many links the nav grows. */
  .iv-nav__links{
    gap:10px;font-size:.78rem;white-space:nowrap;
    min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .iv-nav__links::-webkit-scrollbar{display:none}
}
@media(max-width:360px){.iv-nav__links{gap:8px;font-size:.72rem}}

/* notify-me CTA under the sample reader */
.iv-notify{margin:16px 0 10px;padding:14px 16px;border:1px dashed var(--border-card);border-radius:12px;
  background:linear-gradient(180deg,rgba(201,168,76,.04),transparent)}
.iv-notify__lead{font-size:.84rem;color:var(--text-secondary);margin-bottom:10px}
.iv-notify .iv-email-form{margin:0;max-width:440px}

/* Per-voice source line. The policy page promises that every restored voice
   names the recording it was built from; this is where that promise is kept.
   Quiet by default — it is evidence, not a sales line — but selectable and
   linkable so anyone with an interest in the recording can act on it. */
.iv-source-line{margin:10px 0 0;max-width:70ch;font-size:.82rem;line-height:1.6;
  color:var(--text-tertiary);border-left:2px solid var(--border-subtle);padding-left:12px}
.iv-source-line strong{color:var(--text-secondary);font-weight:600}
.iv-source-line a{color:var(--gold-primary);text-decoration:underline;text-underline-offset:2px}
.iv-source-line a:hover{color:var(--gold-light)}
@media (max-width:560px){.iv-source-line{font-size:.78rem}}