/* THE NARRATOR (js/narrator.js): the robot sits at the left of the Listen bar, at a desk that runs the bar's whole
   width along its bottom edge; its head stands up out of the top. --nb is its width, --desk the desk's height
   (7.7% of the robot's video, where its own desk is). */
section.listen.has-nb{--nb:210px;--desk:calc(var(--nb) * .5208 * .0767);position:relative;min-height:calc(var(--nb) * 1.04);
  padding-left:calc(var(--nb) + 18px);padding-bottom:calc(var(--desk) + 48px);margin-top:22px;align-content:center}   /* tall enough that her head (about 1.03 x --nb from the bar's bottom) stays inside it, so no room is kept above
section.listen.has-nb::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--desk);border-radius:0 0 16px 16px;pointer-events:none;
  background:url(/assets/narrator/desk.jpg?v=1) left bottom/auto 100% repeat-x}   /* the same walnut, mirrored so it runs on without a seam */
.nb{position:absolute;left:0;bottom:0;width:var(--nb);height:calc(var(--nb) * .5208);pointer-events:none;
  clip-path:inset(-100vh -100vw 0 0 round 0 0 0 16px);z-index:1}   /* nothing below the bar's bottom edge */
.nb-rise{position:absolute;inset:0}   /* in place from the start: hands on the desk, in view */
.nb-body{position:absolute;top:0;left:-34.72%;width:169.44%;height:100%;object-fit:cover;border-radius:0 0 0 16px;background:url(/assets/narrator/rest.jpg?v=6) center/cover,url(data:image/webp;base64,UklGRoQCAABXRUJQVlA4IHgCAADwDgCdASqCACgAPrVSoEwnJKaiKrVbGOAWiWIAz9oNP8vwzrm3g55nTM96GRuE44VXd2kTU14W4BR6I26vfLOm3ThBQoHGvcwxzBz4VpbgtaUy59Xw6F1BWvNJFWDERV1jixpT25hBibdx3QfoYebO/MxXqlVgz5Eb/VazJKRiAAD+8iHc+/T7o8md12qpHabjT2iyHnSYHd/jZ9M+a0DnyvZhjnVVBObhhE8kRnmZMUtgw4ItMsoK6Er/Xyzk2Oyct7Q1wvSj4HszlDmSIDVHW+0mcHFLHu24GwnPcJ+aR9xmgWwGwjOsWEbDVk6O1Avd3O1NzEu3X7iDwCBB0ybcaak5LWVcmmUaeBy9PcfiA8iTbW1u34lbFMEBDVQ2gD6NZ7ilveY1dJr8e1564nBZNoIGN1MuTxmvfScte8jAGRjiiYHHoQsbi5dQtNuCW3F6jtQwQc/FwEwDN+UrcnMvao4tvarJIvWqvFW7fv+deMZ6PLv4XdEi9K9xtqmR2p0lWspwiZ/zD87xVIWboYlu6Ivnl9qVnkHLxMpDwwxVR/kEweYvWsKWJBx46WX8k6Fke5hogJFaKUSQjD6fdQ7jL2UOLtX2xjJ+i28F4rwpHYap7W+lbyYu5y2zUWTa9M38Gl5+Ty8SlImRKBKFgw6xX4Vr+RKvVh2kFz6f2mnnTLI+LtDv/tS5ev4ito8HSxHUCFgZnyIswj1SyQbGYWsWnoW4tmkWtYnLVUZF7Y8uwxJhd1xCB33Nq5MDI+dSQRgrIJD2BYOA8u0lG8UT2DK9dJdpxv3LKBLS0kaaS+2rQvYYoUw65iKhBv5O4wkW1chL4TNRKAAAAA==) center/cover,#0f4d47;   /* the rest pose behind the video, in case a frame is ever missing; under it a tiny copy (80 x 42, inline) so her body is there the moment the bar is, before anything else loads */
  /* its right edge blends into the desk strip, and its top edge softens into the bar */
  -webkit-mask-image:linear-gradient(90deg,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%);mask-composite:intersect}
/* her head: her chin rests on the torso's collar (the collar's top is 9.8% down the torso). The layers are cut
   wide, so big hair (a perm, a ponytail) has room: her face itself is 30% of the robot's width */
.nb-head{position:absolute;left:-1.92%;width:103.85%;bottom:57.09%;aspect-ratio:623/437;transform-origin:50% 77.1%;pointer-events:none;z-index:1;transition:rotate .5s cubic-bezier(.3,1.4,.5,1),translate .5s cubic-bezier(.3,1.4,.5,1);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.nb-head img{position:absolute;inset:0;width:100%;height:100%;display:block}
.nb-jaw,.nb-jaw-s{will-change:transform}
/* her eyes (Christian, Oct 6, 2026): Lake Tahoe blue, tucked under her brass upper lid and lashes, deep cobalt into turquoise, with a small dark pupil and two
   catchlights, laid over the glass of every look. The iris sits in the lens (head-lens.png), so it can glance toward
   the Play button in the hints; the catchlights stay put, the way a reflection does. */
.nb-eyes{position:absolute;inset:0;-webkit-mask:url(/assets/narrator/head-lens.png?v=2) 0 0/100% 100% no-repeat;mask:url(/assets/narrator/head-lens.png?v=2) 0 0/100% 100% no-repeat}
.nb-iris{translate:var(--gx,0%) var(--gy,0%);transition:translate .45s cubic-bezier(.3,1.3,.5,1)}   /* her gaze (narrator.js gaze()) */
.nb.look .nb-iris{translate:.7% 0}
.nb.follow .nb-iris,.nb.follow.look .nb-iris{translate:var(--fx,0%) var(--fy,0%);transition:translate .16s ease-out}   /* following the mouse at rest (narrator.js follow()) */
.nb-lids{opacity:0}
.nb.wink .nb-lids{opacity:1;clip-path:inset(0 0 0 50%)}   /* a wink: the eye nearer the Play button */
.nb.blink .nb-lids{opacity:1;clip-path:none}
/* the hints: the head turns toward the Play button, and the antenna bulb glows and flickers */
.nb.look .nb-head{rotate:7deg;translate:2.4% 0}
.nb-bulb{position:absolute;left:49.8%;top:5.03%;width:12.5%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s ease-in-out;
  mix-blend-mode:screen}
.nb-bulb::after{content:"";position:absolute;inset:0;border-radius:50%;animation:nb-flick 1.4s ease-in-out infinite;   /* it breathes inside, so on and off are plain fades */
  background:radial-gradient(circle,rgba(235,255,255,.95) 0,rgba(130,240,255,.6) 22%,rgba(80,220,255,0) 68%)}
.nb.nb-nobulb .nb-bulb{display:none}   /* a look whose hat or bow covers the antenna */
.nb.glow .nb-bulb{opacity:1}
@keyframes nb-flick{50%{opacity:.45}}
@media (max-width:560px){section.listen.has-nb{--nb:150px;padding-left:calc(var(--nb) + 12px)}}
@media (prefers-reduced-motion:reduce){.nb-head{transition:none}.nb-bulb::after{animation:none}}

/* changing her hair on a click (narrator.js restyle): the old look fades out over the new one, her head gives a
   little shake; the click target is her face and hair only, not the whole wide layer */
.nb-hit{position:absolute;left:31%;width:38%;top:8%;height:70%;border-radius:50%;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nb-old{transition:opacity .8s ease-in-out}
.nb.nb-swap .nb-head{animation:nb-shake .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes nb-shake{0%{scale:1}25%{scale:1.04 .97;rotate:-3deg}55%{scale:.98 1.03;rotate:2.5deg}100%{scale:1;rotate:0deg}}
@media (prefers-reduced-motion:reduce){.nb-old{transition:none}}
/* her name in the bar, under the episode title */
.nb-by{display:block;margin-top:3px;font:600 12px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;color:#9fd8d0}
/* her nameplate, sitting on the desk just to her right: a small dark plate in a brushed silver holder, tipped back,
   her name engraved in grey. Quiet on purpose: noticed second, not first. */
.nb-plate{position:absolute;left:calc(var(--nb) + 10px);bottom:calc(var(--desk) - 4px);z-index:1;display:flex;flex-direction:column;align-items:center;
  padding:2px 8px 2px;pointer-events:none;background:linear-gradient(180deg,#2c2a28,#171615);
  border-top:1.5px solid #c9ccce;border-bottom:2.5px solid #b3b6b8;box-shadow:0 2px 3px rgba(0,0,0,.3);
  transform:perspective(160px) rotateX(16deg);transform-origin:50% 100%;opacity:.92}
.nb-plate b{font:600 8px/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;color:#a8acaf;text-shadow:0 -.5px 0 rgba(0,0,0,.7)}
.nb-plate small{font:500 5.5px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.03em;color:#8c9093}
@media (max-width:560px){.nb-plate{left:calc(var(--nb) + 4px);padding:1px 6px}.nb-plate b{font-size:7px}.nb-plate small{font-size:5px}}

/* HER BACKDROP (narrator.js backdrop()): a scene behind the whole bar, softly blurred and dimmed so the card stays
   easy to read; the desk strip and GlazyArray stay in front of it, and her body is keyed off its teal (.nb-keyed) */
.nb-bd{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.nb-bd i{position:absolute;inset:-16px;background:center/cover no-repeat;filter:blur(5px) saturate(.95) brightness(.7)}
.nb-bd::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,30,28,.05) 0,rgba(8,30,28,.35) 100%)}
section.listen.has-bd::before{z-index:1}
.nb-keying .nb-body{opacity:0}
.nb-keyed{position:absolute;top:0;left:-34.72%;width:169.44%;height:100%;border-radius:0 0 0 16px;
  -webkit-mask-image:linear-gradient(90deg,#000 95%,transparent);mask-image:linear-gradient(90deg,#000 95%,transparent)}

/* THE PLAYER (narrator.js player()): the title, her name and the controls on one glass card, after the sample
   Christian liked: a frosted gradient, a thin light edge, white type; the plain audio element is hidden */
.nb-glass{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;padding:14px 18px 12px;border-radius:20px;color:#fff;
  background:linear-gradient(to right top,rgba(40,44,44,.62),rgba(239,239,239,.2));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(240,240,240,.16);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.nb-glass>div:first-child{display:flex;flex-direction:column}
/* out of sight but still on the page: the site's audio rules pause a track whose player can't be seen (audio-rules.js) */
.nb-glass .nb-audio{display:block;position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.nb-player{display:flex;flex-direction:column;gap:6px}
.nb-row{display:flex;align-items:center;gap:10px;font:600 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:#e8eeee;font-variant-numeric:tabular-nums}
.nb-row span{min-width:32px;text-align:center}
.nb-seek{--p:0%;-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:6px;margin:0;cursor:pointer;
  background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.22) var(--p))}
.nb-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.nb-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.nb-seek:focus-visible{outline:2px solid #9fd8d0;outline-offset:3px}
.nb-ctl{display:flex;align-items:center;justify-content:center;gap:14px}
.nb-ctl button{display:grid;place-items:center;width:38px;height:38px;padding:7px;border:0;border-radius:50%;background:none;color:#e8eeee;cursor:pointer;transition:background .4s ease}
.nb-ctl button:hover{background:rgba(255,255,255,.12)}
.nb-ctl button:focus-visible{outline:2px solid #9fd8d0;outline-offset:2px}
.nb-ctl .nb-pp{width:48px;height:48px;padding:12px;background:rgba(30,32,32,.62)}
.nb-ctl .nb-pp:hover{background:rgba(30,32,32,.8)}
.nb-glass .nb-ctl svg{position:static;inset:auto;width:100%;height:100%;display:block}   /* (pages that style every svg, like the catalog's scenes, leave these be) */
@media (max-width:560px){.nb-glass{padding:12px 12px 10px;border-radius:16px}.nb-ctl{gap:8px}}

/* on a phone the bar is too narrow for her and the card side by side: the card runs the full width on top, and she
   sits at her desk below it (her head reaches about 1.03 x --nb above the bar's bottom), the nameplate beside her */
@media (max-width:560px){
  section.listen.has-nb{flex-direction:column;align-items:stretch;padding:12px 12px calc(var(--nb) * 1.05 + 10px);margin-top:12px}
  section.listen.has-nb .nb-glass{flex:none;width:100%;box-sizing:border-box;min-width:0}
}

/* her video is wider than her box (976 x 300 against the box's 576 x 300: 200px of room each side, about a third of
   --nb), so her open arms and the heart she draws stay whole; its side edges just fade into the bar */
.nb-body,.nb-keyed{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 6%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 6%);mask-composite:intersect}
/* on a phone she sits in the middle of the bar under the card, the nameplate just to her right, and nothing clips
   her sides, so her hands move their full width */
@media (max-width:560px){
  section.listen.has-nb .nb{left:calc(50% - var(--nb) / 2);clip-path:inset(-100vh -100vw 0 -100vw)}
  section.listen.has-nb .nb-body,section.listen.has-nb .nb-keyed{border-radius:0}
  section.listen.has-nb .nb-plate{left:calc(50% + var(--nb) / 2 - 6px)}
}
/* on a wider screen she sits in from the bar's left edge by her reach (--nbx, the video's extra width each side), with
   nothing clipping her sides, so her hands swing their full width both ways; the card starts past her right hand's
   reach, and the nameplate sits on the desk just past it */
@media (min-width:561px){
  section.listen.has-nb{--nbx:calc(var(--nb) * .3472);padding-left:calc(var(--nb) + var(--nbx) * 2 + 10px)}
  section.listen.has-nb .nb{left:var(--nbx);clip-path:inset(-100vh -100vw 0 -100vw)}
  section.listen.has-nb .nb-body,section.listen.has-nb .nb-keyed{border-radius:0}
  section.listen.has-nb .nb-plate{left:calc(var(--nb) + var(--nbx) * 2 - 20px)}
}

/* THE NOTE'S PALETTE (data-palette on the bar: two accent colours from its hero, --ga1 and --ga2). Her flair: the parts
   of whatever look she wears that take it (narrator.js flair(): a mask per colour), tinted with a "color" blend at 45% (a tint over the original, not a repaint) so
   the brass, folds and shading show through; then the glass card, its seek bar and Play, and the backdrop's shade */
.nb-flair{position:absolute;inset:0;display:block;mix-blend-mode:color;opacity:var(--fk,.45);background:var(--ga1,var(--gd,transparent));pointer-events:none;
  -webkit-mask:var(--fm) 0 0/100% 100% no-repeat;mask:var(--fm) 0 0/100% 100% no-repeat}
.nb-flair[data-k="b"]{background:var(--ga2,var(--gd,transparent))}
.nb-flair.dye{mix-blend-mode:multiply}   /* white or pale parts (looks.json flairDye): dyed the colour itself, so white trim turns the colour, and white stays white */
.nb-flair[hidden]{display:none}
section.listen:not(.has-pal) .nb-flair:not(.based){display:none}   /* a white-based look (flairBase) wears its own colours */
/* the shine: now and then a band of light sweeps across the scene behind her (the backdrop) and on over the glass player;
   not over her, where it showed the edges of the video layer */
@keyframes nb-glint{0%{background-position:100% 0}22%,100%{background-position:0 0}}
section.has-pal .nb-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65%) no-repeat;background-size:300% 100%;background-position:100% 0;
  animation:nb-glint 6.5s 1.35s ease-in-out infinite}
section.has-pal .nb-bd::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,248,230,.16) 50%,transparent 62%) no-repeat;background-size:300% 100%;background-position:100% 0;
  animation:nb-glint 6.5s 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){section.has-pal .nb-bd::before,section.has-pal .nb-glass::before{animation:none;opacity:0}}
section.has-pal .nb-glass{background:linear-gradient(to right top,color-mix(in srgb,var(--ga1) 26%,rgba(30,34,34,.66)),color-mix(in srgb,var(--ga2) 20%,rgba(239,239,239,.18)));
  border-color:color-mix(in srgb,var(--ga2) 40%,rgba(240,240,240,.22))}
section.has-pal .nb-seek{background:linear-gradient(90deg,var(--ga1) var(--p),rgba(255,255,255,.22) var(--p))}
section.has-pal .nb-ctl .nb-pp{background:color-mix(in srgb,var(--ga1) 45%,rgba(24,26,26,.7))}
section.has-pal .nb-ctl .nb-pp:hover{background:color-mix(in srgb,var(--ga1) 62%,rgba(24,26,26,.7))}
section.has-pal .nb-bd::after{background:linear-gradient(90deg,color-mix(in srgb,var(--ga2) 14%,rgba(8,30,28,.05)) 0,color-mix(in srgb,var(--ga1) 22%,rgba(8,30,28,.35)) 100%)}
section.has-pal .nb-by{color:color-mix(in srgb,var(--ga2) 55%,#fff)}