.listen{position:relative;display:flex;flex-direction:column;gap:.9rem;max-width:29rem;margin:1.5rem 0 2rem;padding:1.15rem 1.25rem 1.3rem;border:1px solid var(--border,#35302a);border-radius:14px;background:linear-gradient(158deg,rgba(204,180,108,.07),rgba(255,255,255,.012) 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 44px -24px rgba(0,0,0,.55);overflow:hidden}
/* A faint crane watermark, embossed into the card corner: brand presence without touching the clear controls. */
.listen::after{content:"";position:absolute;right:-14px;bottom:-16px;width:118px;height:118px;background:url(/logo.png) no-repeat center/contain;opacity:.05;pointer-events:none;z-index:0}
.listen-head,.listen-controls,.listen-label,.listen-scrub{position:relative;z-index:1}
.listen-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.listen-eyebrow{font-family:var(--font-sans);font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent,#CCB46C);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Speed pill: the same machined skin as the transport, in pill form — a champagne bezel ring over a dark face,
   held quiet (dim bezel) at 1x and lit full when a faster speed is engaged. */
.listen-speed{flex:0 0 auto;position:relative;isolation:isolate;min-width:2.9rem;padding:.3rem .62rem;border:0;border-radius:999px;background:transparent;cursor:pointer;font-family:var(--font-sans);font-size:.66rem;font-weight:700;letter-spacing:.03em;color:#3a2a0c;-webkit-appearance:none;appearance:none;font-variant-numeric:tabular-nums;box-shadow:0 4px 12px -6px rgba(0,0,0,.55);transition:color .3s var(--ease-luxury,ease)}
.listen-speed::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:999px;padding:1.5px;background:conic-gradient(from var(--lmang,0deg),#4b402a,#e6dcc4,#b0a488,#f7f1e4,#6e6146,#d8ccb2,#4b402a,#f7f1e4,#4b402a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.58;filter:saturate(.82);transition:opacity .3s ease,filter .3s ease}
.listen-speed::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:999px;background:radial-gradient(135% 150% at 30% -20%,#efe0b2,#d3b76c 60%,#a5842f);box-shadow:inset 0 1px 1px rgba(255,251,236,.5)}
.listen-speed:hover{color:#241a06}
.listen-speed:hover::before{opacity:1;filter:saturate(1.05) brightness(1.1)}
.listen-speed:focus-visible{outline:2px solid var(--accent-bright,#E4CC84);outline-offset:2px}
.listen.is-fast .listen-speed{color:#241a06}
.listen.is-fast .listen-speed::before{opacity:1;filter:saturate(1.05) brightness(1.08)}
.listen-controls{display:flex;align-items:center;justify-content:center;gap:1.2rem}
/* Machined play/pause (same language as the CTA family): champagne bezel + gilded near-black face + gold
   glyph. Falls back to a static bezel where @property/mask is unsupported (--lmang + lmspin are global from
   main.css). */
.listen-btn{flex:0 0 auto;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;padding:0;border:0;border-radius:50%;cursor:pointer;background:transparent;color:#2e2008;-webkit-appearance:none;appearance:none;box-shadow:0 8px 22px -6px rgba(0,0,0,.7);transition:transform .3s var(--ease-luxury,cubic-bezier(.22,1,.36,1)),box-shadow .3s ease}
.listen-btn::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:50%;padding:2.5px;background:conic-gradient(from var(--lmang,0deg),#4b402a,#e6dcc4,#b0a488,#f7f1e4,#6e6146,#d8ccb2,#4b402a,#f7f1e4,#4b402a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.listen-btn::after{content:"";position:absolute;inset:2.5px;z-index:-1;border-radius:50%;background:radial-gradient(135% 150% at 30% -20%,#fbf3d8,#e2c887 55%,#b8933f);box-shadow:inset 0 1px 1px rgba(255,251,236,0.6),inset 0 -8px 16px -10px rgba(80,52,12,0.5)}
.listen-btn:hover{transform:scale(1.04);box-shadow:0 10px 26px -6px rgba(0,0,0,.7),0 0 22px -8px rgba(204,180,108,.5)}
.listen-btn:hover::before{filter:brightness(1.12) saturate(1.04)}
.listen-btn:active{transform:scale(.97)}
.listen-btn:focus-visible{outline:2px solid var(--accent-bright,#E4CC84);outline-offset:4px}
.listen-ic{display:block;width:24px;height:24px;fill:currentColor}
.listen-ic-pause{display:none}
.listen.is-playing .listen-ic-play{display:none}
.listen.is-playing .listen-ic-pause{display:block}
/* Secondary transport (skip ±15): the SAME machined language as the centre play coin, held a step quieter so
   the hierarchy reads — a dimmer champagne bezel over a darker face, brightening on hover. */
.listen-skip{flex:0 0 auto;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;background:transparent;color:#3a2a0c;-webkit-appearance:none;appearance:none;box-shadow:0 6px 16px -7px rgba(0,0,0,.6);transition:color .3s ease,transform .3s var(--ease-luxury,ease),box-shadow .3s ease}
.listen-skip::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:50%;padding:2px;background:conic-gradient(from var(--lmang,0deg),#4b402a,#e6dcc4,#b0a488,#f7f1e4,#6e6146,#d8ccb2,#4b402a,#f7f1e4,#4b402a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.6;filter:saturate(.82);transition:opacity .3s ease,filter .3s ease}
.listen-skip::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:50%;background:radial-gradient(135% 150% at 30% -20%,#efe0b2,#d3b76c 60%,#a5842f);box-shadow:inset 0 1px 1px rgba(255,251,236,.5)}
.listen-skip .listen-ic{width:26px;height:26px;fill:none}
.listen-skip:hover{color:#241a06;transform:translateY(-1px)}
.listen-skip:hover::before{opacity:1;filter:saturate(1.05) brightness(1.1)}
.listen-skip:active{transform:scale(.94)}
.listen-skip:focus-visible{outline:2px solid var(--accent-bright,#E4CC84);outline-offset:2px}
.listen-label{text-align:center;font-family:var(--font-sans);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#a49b86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listen.is-playing .listen-label,.listen.is-paused .listen-label{color:var(--accent,#CCB46C)}
.listen.is-loading .listen-label{color:var(--accent,#CCB46C);animation:listenPulse 1.4s var(--ease-luxury,ease) infinite}
@keyframes listenPulse{0%,100%{opacity:.55}50%{opacity:1}}
.listen-scrub{display:flex;align-items:center;gap:.7rem}
.listen-time{flex:0 0 auto;font-family:var(--font-sans);font-size:.66rem;font-weight:500;letter-spacing:.02em;color:var(--text-subtle,var(--text-muted,#8a8378));font-variant-numeric:tabular-nums;min-width:2.5rem}
.listen-time-dur{text-align:right}
.listen-track{position:relative;flex:1 1 auto;height:14px;display:flex;align-items:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.listen-track::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:2px;background:var(--border,#35302a)}
.listen-fill{position:absolute;top:50%;left:0;transform:translateY(-50%);height:4px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--accent,#CCB46C),var(--accent-bright,#E4CC84));box-shadow:0 0 8px rgba(204,180,108,.35);transition:width .12s linear}
.listen-thumb{position:absolute;top:50%;left:0;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--accent-bright,#E4CC84);box-shadow:0 1px 4px rgba(0,0,0,.4),0 0 0 3px rgba(204,180,108,.18);transform:translateY(-50%) scale(0);transition:transform .18s var(--ease-luxury,ease)}
.listen-track:hover .listen-thumb,.listen-track:focus-visible .listen-thumb,.listen.is-scrubbing .listen-thumb{transform:translateY(-50%) scale(1)}
.listen-track:focus-visible{outline:2px solid var(--accent-bright,#E4CC84);outline-offset:4px;border-radius:3px}
/* ── Hero variant ──────────────────────────────────────────────────────────
   The article card is tall (stacked rows). Dropped into the fixed-height hero
   (height:100vh; overflow:hidden; vertically centred) it overflows and clips
   the eyebrow/partners/proof. In a hero we lay the SAME controls out as a
   compact horizontal bar: play cluster on the left (spanning two rows), the
   label and speed on the top row, the scrubber along the bottom. Roughly half
   the height, and it sits lightly over the video rather than as a heavy box. */
.listen-hero{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"ctrl label speed" "ctrl scrub scrub";
  align-items:center;
  /* row-gap then column-gap, in ONE shorthand: a separate `gap:0` here previously overrode any column-gap
     set above it (gap is shorthand for both), which is why the label butted straight up against the 1x pill. */
  gap:.5rem 1.5rem;
  width:100%;max-width:33rem;
  margin:1.35rem 0 0;padding:.85rem 1.2rem;
}
.listen-hero::after{display:none}                 /* no watermark in the compact bar */
.listen-hero .listen-head{display:contents}        /* let the speed button place directly in the grid */
.listen-hero .listen-eyebrow{display:none}         /* redundant with the "Listen in Nic's voice" label */
.listen-hero .listen-controls{grid-area:ctrl;gap:.5rem}
/* The hero label ("Listen in Nic's voice") is longer than the compact bar's middle column on a phone.
   The base .listen-label truncates with an ellipsis (right for the article card's one-line states), so here
   we let it wrap instead, never clip. The play cluster spans both rows and is taller, so a second line fits. */
.listen-hero .listen-label{grid-area:label;text-align:left;margin:0;min-width:0;font-size:.58rem;letter-spacing:.06em;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
.listen-hero .listen-speed{grid-area:speed;align-self:center}
.listen-hero .listen-scrub{grid-area:scrub;gap:.55rem}
.listen-hero .listen-btn{width:50px;height:50px}
.listen-hero .listen-btn .listen-ic{width:21px;height:21px}
.listen-hero .listen-skip{width:37px;height:37px}
.listen-hero .listen-skip .listen-ic{width:22px;height:22px}
.listen-hero .listen-time{font-size:.6rem;min-width:2.1rem}
.listen-hero audio{display:none}
@media(max-width:768px){ .listen-hero{max-width:100%;column-gap:.9rem} }
@media(prefers-reduced-motion:reduce){
  .listen-btn,.listen-skip,.listen-fill,.listen-thumb{transition:none}
  .listen-btn:hover,.listen-btn:active,.listen-skip:active{transform:none}
  .listen.is-loading .listen-label{animation:none}
}
/* "Read from here": a subtle per-paragraph affordance that starts the narration at that block and lights the
   block being spoken as it plays. Pointer-only enhancement; the core player stays fully keyboard-operable. */
.narr-block{padding:.2rem .55rem;margin:0 -.55rem;border-radius:6px;transition:background-color .45s var(--ease-luxury,ease),box-shadow .45s var(--ease-luxury,ease)}
.narr-block.narr-hover{background:rgba(204,180,108,.03)}
.narr-block.narr-playing{background:rgba(204,180,108,.06);box-shadow:inset 2px 0 0 rgba(204,180,108,.5)}
/* A play marker that sits in the LEFT MARGIN, aligned to the first line of the hovered paragraph or heading.
   A small gold-leaf filled disc (matching the main play button) with a dark glyph, so it reads clearly against
   the page. While the block it points at is the one being spoken, it flips to a pause control. */
/* The floating "read from here" marker is a play/pause control too, so it wears the machined coin, not a bright
   solid gold-leaf fill (the odd one out before): champagne bezel + dark gilded face + gold glyph, at 34px. */
.narr-pill{position:fixed;z-index:60;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:#2e2008;cursor:pointer;box-shadow:0 6px 18px -5px rgba(0,0,0,.6),0 0 18px -7px rgba(204,180,108,.4);opacity:0;transform:translateX(4px) scale(.92);transition:opacity .24s var(--ease-luxury,ease),transform .24s var(--ease-luxury,ease),box-shadow .24s ease,filter .24s ease;pointer-events:none;-webkit-appearance:none;appearance:none}
.narr-pill::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:50%;padding:2px;background:conic-gradient(from var(--lmang,0deg),#4b402a,#e6dcc4,#b0a488,#f7f1e4,#6e6146,#d8ccb2,#4b402a,#f7f1e4,#4b402a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.narr-pill::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:50%;background:radial-gradient(135% 150% at 30% -20%,#fbf3d8,#e2c887 55%,#b8933f);box-shadow:inset 0 1px 1px rgba(255,251,236,.5)}
.narr-pill.show{opacity:1;transform:translateX(0) scale(1);pointer-events:auto}
.narr-pill:hover{filter:brightness(1.04);box-shadow:0 8px 22px -5px rgba(0,0,0,.65),0 0 24px -6px rgba(204,180,108,.55)}
.narr-pill:hover::before{filter:brightness(1.12) saturate(1.04)}
.narr-pill:active{transform:translateX(0) scale(.95)}
.narr-pill:focus-visible{outline:2px solid var(--accent-bright,#E4CC84);outline-offset:3px}
.narr-pill svg{display:block;width:13px;height:13px;fill:currentColor}
.narr-pill .narr-ic-play{margin-left:1px}
.narr-pill .narr-ic-pause{display:none}
.narr-pill.playing .narr-ic-play{display:none}
.narr-pill.playing .narr-ic-pause{display:block}
@media(prefers-reduced-motion:reduce){.narr-pill{transition:opacity .24s ease}}
@media(prefers-reduced-motion:reduce){.narr-block,.narr-pill{transition:none}}