/* Architectural Blueprint, Style 05: the presenter (narration.js). Proof of concept, round 2, 2026-10-14. */
.bp-has-presenter{position:relative}

/* Each narrated section: one "Add narration" button on the heading row; the transport under the timeline. */
.bp-bar-wrap.has-presenter .bp-bar{gap:12px}
.bp-add{display:inline-flex;align-items:center;gap:8px;flex:none;background:none;border:1px solid var(--navy);min-height:36px;padding:0 12px;
  font:11px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;color:var(--navy);cursor:pointer}
.bp-add i{width:7px;height:7px;border-radius:50%;border:1px solid var(--navy)}
.bp-add.is-on{background:var(--navy);color:#fff}
.bp-add.is-on i{background:var(--accent);border-color:var(--accent);animation:bp-flash 1.2s ease-in-out infinite}
.bp-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bp-bar-wrap.has-presenter .bp-transport{margin:2px 0 6px}

/* The header switch: "Add narration" with the narrator's picture; "Narration on · Turn off" once on. */
.bp-hdr{gap:10px;cursor:pointer;padding-left:8px!important}
.bp-hdr-face{width:28px;height:28px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.bp-hdr-face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.bp-hdr-off{display:none;font:500 11px/1 var(--sans);opacity:.75;padding-left:10px;border-left:1px solid rgba(255,255,255,.35)}
.bp-hdr.is-on{background:var(--paper);color:var(--navy)}
.bp-hdr.is-on .bp-hdr-off{display:inline;border-left-color:var(--rule)}
.bp-hdr.is-on .bp-hdr-face{box-shadow:0 0 0 2px var(--accent)}
.bp-hdr-call{position:fixed;z-index:60;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:6px;pointer-events:none;
  opacity:0;transform:translateX(48px);transition:opacity 500ms ease,transform 700ms cubic-bezier(.2,.7,.2,1)}
.bp-hdr-call.is-on{opacity:1;transform:none}
.bp-hdr-call svg{width:40px;height:46px;flex:none}
.bp-hdr-call path{fill:none;stroke:var(--accent);stroke-width:1.2}
.bp-hdr-call span{margin-top:30px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;font:11px ui-monospace,"SF Mono",Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:var(--paper);padding:8px 10px;border:1px solid var(--rule)}
.bp-hdr-call span i{display:none}
.bp-hdr-call small{font:12px/1.3 var(--serif,Georgia);letter-spacing:0;text-transform:none;color:var(--graphite)}
.bp-hdr-call.is-on span{animation:bp-blink 1.3s ease-in-out 3}

/* The presenter: picture, name, and role. */
.bp-presenter{position:absolute;display:flex;align-items:center;gap:12px;flex-direction:row-reverse;z-index:3;
  transition:opacity 600ms ease,transform 700ms cubic-bezier(.2,.7,.2,1);transform-origin:right center}
.bp-presenter.is-hidden{opacity:0;transform:scale(.6);pointer-events:none}
.bp-presenter.is-inline{position:relative;justify-content:flex-start;margin:0 0 14px auto;width:max-content}
.bp-presenter-face{position:relative;width:120px;height:120px;padding:0;border:0;border-radius:50%;background:var(--paper);cursor:pointer;flex:none}
.bp-presenter-face:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.bp-presenter-media{position:absolute;inset:11px;border-radius:50%;overflow:hidden;background:var(--wash,#efebe3)}
.bp-presenter-media :is(img,video){width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;filter:saturate(.85)}
.bp-presenter svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.bp-ring-track{fill:none;stroke:var(--graphite);stroke-width:.75;opacity:.6}
.bp-ring-fill{fill:none;stroke:var(--navy);stroke-width:1.6;transition:stroke-dashoffset 120ms linear}
.bp-presenter.is-live .bp-ring-track{animation:bp-breathe 2.4s ease-in-out infinite}
@keyframes bp-breathe{50%{opacity:.25}}
.bp-presenter-label{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font:9px/1.4 ui-monospace,"SF Mono",Menlo,monospace;
  letter-spacing:.06em;color:var(--graphite);padding-right:12px;border-right:1px solid var(--rule)}
.bp-presenter-label span:first-child{color:var(--navy)}

/* The call: "Add narration", in the site's small capitals, with hairline arrows to Voice and Video. */
.bp-call{position:absolute;z-index:4;pointer-events:none;opacity:0;transition:opacity 500ms ease;width:260px}
.bp-call.is-inline{position:relative;margin:0 0 -6px auto}
.bp-call.is-on{opacity:1}
.bp-call.is-gone{opacity:0!important;transition:opacity 700ms ease}
.bp-call-text{display:flex;align-items:center;justify-content:flex-end;gap:8px;height:22px;font:11px ui-monospace,"SF Mono",Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.bp-call-text i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:bp-flash 1s steps(2,jump-none) infinite}
.bp-call.is-on .bp-call-text{animation:bp-blink 1.3s ease-in-out infinite}
@keyframes bp-flash{50%{opacity:.15}}
@keyframes bp-blink{50%{opacity:.45}}
.bp-call-arrows{position:absolute;left:0;top:0;overflow:visible}
.bp-call-arrows path{fill:none;stroke:var(--accent);stroke-width:1}

/* The beat before the drawing starts: the copy and the layers wait. */
.bp-intro .bp-stage,.bp-intro .bp-head{opacity:0}
.js .bp-intro [data-layer]{opacity:0}
.bp-player .bp-stage,.bp-player .bp-head{transition:opacity 700ms ease}

@media(max-width:899px){
  .bp-presenter-face{width:84px;height:84px}
  .bp-presenter-media{inset:8px}
  .bp-call{width:100%}
}
@media(prefers-reduced-motion:reduce){.bp-presenter,.bp-presenter *,.bp-call,.bp-call *{animation:none!important;transition:none!important}}

/* Narrated text sections: while the narrator reads, the passage being read stays at full strength. */
[data-narration-text] [data-nar]{transition:opacity 500ms ease}
.bp-text-live [data-nar]{opacity:.42}
.bp-text-live [data-nar].bp-now{opacity:1}
.bp-presenter-text.is-inline{margin:8px 0 16px auto}
@media(prefers-reduced-motion:reduce){[data-narration-text] [data-nar]{transition:none}}
/* Under a headline, the picture leads and the name follows, reading left to right. */
.bp-presenter.is-under{flex-direction:row;transform-origin:left center}
.bp-presenter.is-under .bp-presenter-label{align-items:flex-start;padding:0 0 0 12px;border-right:0;border-left:1px solid var(--rule)}
.bp-presenter.is-docked{position:fixed;right:24px;bottom:24px;left:auto!important;top:auto!important;z-index:40;background:var(--paper);
  padding:6px 6px 6px 14px;border:1px solid var(--rule);border-radius:70px}
@media(max-width:899px){.bp-presenter.is-docked{right:12px;bottom:12px}.bp-presenter.is-docked .bp-presenter-label{display:none}.bp-presenter.is-docked{padding:4px}}
/* Phone width: the picture alone on the headline's row; the name and role would crowd the headline. */
@media(max-width:899px){.bp-presenter-text .bp-presenter-label{display:none}}
.bp-room .nw{white-space:normal}
@media(max-width:899px){.bp-presenter .bp-presenter-label{display:none}}