/* ============================================================================
   SAVRN voice control — THE single source of truth for "Listen" on every page.
   Pair with /static/institute-voice.js (binds .iv-listen by delegation and
   builds #iv-bar itself).

   Why blue: copper is the brand's EMPHASIS colour and is already spoken for by
   primary CTAs. Listen is a persistent utility affordance that appears on every
   section of every page — that is STRUCTURE, which is french blue in the brand
   spec. Making it the one blue control also stops it competing with the copper
   CTA it usually sits beside, and makes it instantly recognisable site-wide.

   Do NOT copy these rules into a page. Link this file.
   ==========================================================================*/
:root{
  --sv-blue:#2F6BB0; --sv-blue-deep:#234E86; --sv-blue-wash:#EAF2FA;
  --sv-copper:#E85D04;
  --sv-ink:#0D1621; --sv-dim:#667085; --sv-faint:#8A9098;
  --sv-rule:#E8EAEE; --sv-rule-2:#D9DCE2;
  --sv-ease:cubic-bezier(.22,1,.32,1);
}

/* ── the pill ──────────────────────────────────────────────────────────── */
.iv-listen{display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:600;font-size:14.5px;
  color:#fff;background:var(--sv-blue);border:none;border-radius:999px;
  padding:13px 22px 13px 15px;
  box-shadow:0 14px 30px -12px rgba(47,107,176,.55);
  transition:transform .14s var(--sv-ease),background .25s,border-color .25s,box-shadow .25s}
.iv-listen:hover{background:var(--sv-blue-deep)}
.iv-listen:active{transform:scale(.96)}
.iv-listen:focus-visible{outline:2px solid var(--sv-blue);outline-offset:3px}
.iv-listen .ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.iv-listen .ic svg{width:12px;height:12px;fill:#fff;margin-left:2px}
.iv-listen .du{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
  font-weight:500;opacity:.75;letter-spacing:.04em}

/* playing: the triangle becomes a pause bar pair, drawn by the JS swapping the path */
.iv-listen.playing .ic svg{margin-left:0}

/* ── section-level variant: SOLID BLUE, same as the page-level one ────────
   Every Listen on the site is the same blue object. It was a white pill with a
   blue icon and it did not read as the same control at a glance — which is the
   whole point of having one. Only size and the invite pulse separate the
   page-level button from a section button now. */
.iv-listen.iv-quiet{color:#fff;background:var(--sv-blue);border:none;
  font-size:13.5px;padding:11px 19px 11px 12px;
  box-shadow:0 10px 24px -12px rgba(47,107,176,.55)}
.iv-listen.iv-quiet .ic{background:rgba(255,255,255,.24);width:26px;height:26px}
.iv-listen.iv-quiet .ic svg{fill:#fff}
.iv-listen.iv-quiet:hover{background:var(--sv-blue-deep)}
.iv-listen.iv-quiet.playing{box-shadow:0 0 0 3px rgba(47,107,176,.22)}

/* on a glass panel over artwork it keeps the solid fill, just a deeper shadow */
.iv-listen.iv-quiet.iv-on-art{background:var(--sv-blue);backdrop-filter:none;
  box-shadow:0 8px 22px -8px rgba(13,22,33,.5)}

/* ── THE PLACEMENT RULE ─────────────────────────────────────────────────
   A section's Listen button sits in the text column, left-aligned, DIRECTLY
   UNDER THE SECTION HEADING — heading, then Listen, then the body copy. Same
   spot on every page so it is found without hunting. Wrap it in .listenrow.
   (Set by /institute; every other page was brought to match it.) */
.listenrow{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── ON-IMAGE variant: RETIRED, kept only so old markup does not break ───
   Tried placing the button on the artwork; it broke the "same plane" rule and
   read as a hole punched in the picture. Do not reintroduce it. ───────────
   This is the site-wide placement. Listen belongs to the picture, not to the
   end of the prose — same corner, every section, every page, so it is found
   without looking. Put .iv-figure on the <figure>/wrapper that holds the img. */
.iv-figure{position:relative;overflow:hidden}
/* Solid blue, not white. A white pill on artwork reads as a hole punched in the
   picture; a solid control reads as a control — the same way a play button does. */
.iv-listen.iv-onimg{position:absolute;top:14px;left:14px;z-index:6;
  color:#fff;background:var(--sv-blue);border:none;
  box-shadow:0 8px 22px -8px rgba(13,22,33,.55)}
.iv-listen.iv-onimg .ic{background:rgba(255,255,255,.24)}
.iv-listen.iv-onimg .ic svg{fill:#fff}
.iv-listen.iv-onimg:hover{background:var(--sv-blue-deep)}
.iv-listen.iv-onimg.playing{box-shadow:0 0 0 3px rgba(255,255,255,.55),0 8px 22px -8px rgba(13,22,33,.55)}
@media(max-width:640px){
  .iv-listen.iv-onimg{top:10px;left:10px;font-size:13px;padding:9px 15px 9px 10px}
  .iv-listen.iv-onimg .ic{width:24px;height:24px}
}

/* ── page-level variant: solid, pulsing, the "start here" ──────────────── */
@keyframes iv-pulse{
  0%{box-shadow:0 0 0 0 rgba(47,107,176,.38)}
  70%{box-shadow:0 0 0 14px rgba(47,107,176,0)}
  100%{box-shadow:0 0 0 0 rgba(47,107,176,0)}}
.iv-invite .ic{animation:iv-pulse 2.4s infinite}
/* iv-hero is a legacy alias for iv-invite — kept so old markup keeps working */
.iv-hero .ic{animation:iv-pulse 2.4s infinite}
.iv-listen.iv-hero{font-size:15.5px;padding:11px 24px 11px 12px}

/* ── the player bar the JS builds ──────────────────────────────────────── */
#iv-bar{position:fixed;left:14px;right:14px;bottom:14px;z-index:120;display:none;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border:1px solid var(--sv-rule);
  border-radius:18px;box-shadow:0 24px 60px -20px rgba(13,22,33,.4);padding:12px 18px;
  grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center;
  max-width:820px;margin:0 auto}
#iv-bar.on{display:grid}
#iv-bar .pp{width:44px;height:44px;border-radius:50%;background:var(--sv-blue);border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .25s,transform .13s}
#iv-bar .pp:hover{background:var(--sv-blue-deep)}
#iv-bar .pp:active{transform:scale(.94)}
#iv-bar .pp svg{width:15px;height:15px;fill:#fff;margin-left:2px}
#iv-bar.playing .pp svg{margin-left:0}
#iv-bar .tt{min-width:0}
#iv-bar .tt .kk{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sv-blue)}
#iv-bar .tt .nm{font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:14.5px;
  color:var(--sv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#iv-wave{width:130px;height:34px;flex:none}
#iv-bar .tm{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;
  color:var(--sv-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
#iv-bar .xx{background:none;border:none;color:var(--sv-faint);font-size:19px;cursor:pointer;
  padding:4px 6px;line-height:1}
#iv-bar .xx:hover{color:var(--sv-ink)}
#iv-seek{position:absolute;left:16px;right:16px;top:-5px;height:10px;cursor:pointer}
#iv-seek .tr{position:absolute;left:0;right:0;top:4px;height:2.5px;background:var(--sv-rule);
  border-radius:2px}
#iv-seek .fl{position:absolute;left:0;top:4px;height:2.5px;background:var(--sv-blue);
  border-radius:2px;width:0}

@media(max-width:760px){
  #iv-wave{display:none}
  .iv-listen{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .iv-invite .ic,.iv-hero .ic{animation:none}
  .iv-listen{transition:none}
}