/* ird-narration.css · version 2.0 · the IRD skin for the current Style 05 narration engine (engine/narration.js, unchanged).
   Loads AFTER engine/narration.css and overrides it. Colors, type, radius, shadow, and motion come from the page's
   own tokens (canon/brand/DESIGN.md §1–§5).
   Cleaned 2026-10-16 from the 2026-10-14 skin (../ird-narration.css): the dock, the reserved gutter, the header-band
   dock, the under-headline position, and the masthead restyle are removed. Doug, 2026-10-15: never a corner, never
   under the headline, never on the left. The engine now places the narrator at the right end of the headline's row
   and makes room for it. The v1.0 page draws its own layered drawings, so the drawing structure rules are removed too.
   Kept: brand styling for the switch, the invite card, the ring, the name plate, the drawing's own switch and call,
   and the read-along emphasis. */

/* ── 0 · token bridge: the engine's variable names, filled with IRD's tokens ── */
:root{
  --navy:var(--accent-navy);
  --accent:var(--accent-amber);
  --paper:var(--bg-primary);
  --wash:var(--bg-secondary);
  --rule:var(--border-subtle);
  --graphite:var(--text-secondary);
  --sans:var(--font-sans);
  --serif:var(--font-sans);
}

/* ── 1 · the header slot: the engine replaces `.masthead a.button` with the switch; hidden until it does ── */
html,body{overflow-x:clip}   /* the page's overflow-x:hidden makes body the scroller and breaks the sticky header; clip does not */
.masthead a.button:not(.bp-hdr){display:none}

/* ── 2 · the header switch: his picture and "Add narration"; on: "Narration on · Turn off" ── */
.bp-hdr{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 14px 0 6px!important;
  background:var(--bg-primary);color:var(--accent-navy);border:1.5px solid var(--accent-navy);border-radius:var(--radius-sm);
  font:600 14px/1 var(--font-sans);cursor:pointer;transition:var(--transition-smooth);white-space:nowrap}
.bp-hdr:hover{background:var(--bg-secondary)}
.bp-hdr:focus-visible{outline:2px solid var(--accent-amber);outline-offset:2px}
.bp-hdr-face{width:30px;height:30px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1.5px var(--border-accent);background:var(--bg-secondary)}
.bp-hdr-face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
/* The engine writes "Add narration" / "Narration on"; IRD's words replace them in the same element. */
.bp-hdr-label{font-size:0;line-height:1}
.bp-hdr-label::after{content:"Add narration";font-size:14px;font-weight:600}
.bp-hdr.is-on{background:var(--accent-navy);color:#fff;border-color:var(--accent-navy)}
.bp-hdr.is-on .bp-hdr-label::after{content:"Narration on"}
.bp-hdr.is-on .bp-hdr-face{box-shadow:0 0 0 2px var(--accent-amber)}
.bp-hdr-off{display:none;font:500 12px/1 var(--font-sans);opacity:.85;padding-left:10px;border-left:1px solid rgba(255,255,255,.35)}
.bp-hdr.is-on .bp-hdr-off{display:inline}
/* The live header also carries the nav and the chat buttons, with about 115 px to spare at 1440. Below 1600 px a
   labelled switch would push the nav onto two lines, so the switch is the face alone (the invite card names it),
   and the face with "Turn off" once on. The nav items never wrap. */
.masthead .mast-nav :is(a,button){white-space:nowrap}
@media (max-width:1599px){
  .bp-hdr{padding:0 10px 0 6px!important}
  /* The label stays. Collapsed to a bare face nobody knows what it is
     (Doug, 2026-10-16), and 1599px meant almost every desktop. */
  .bp-hdr.is-on{padding:0 10px 0 5px!important}
  .bp-hdr.is-on .bp-hdr-off{border-left:0;padding-left:0}
}
@media (max-width:1199px){
  .bp-hdr{padding:0 8px 0 5px!important;gap:6px}
  .bp-hdr-label::after{font-size:13px}                        /* tighter, but still worded */
  .bp-hdr.is-on .bp-hdr-off{padding-left:6px}
}
/* On a phone the header row holds the wordmark, the switch, Enroll, and the menu; the switch is the face alone,
   navy with an amber ring when on, so the menu button keeps its place on the row. */
@media (max-width:599px){
  .bp-hdr{padding:0 4px!important;min-height:40px}
  .bp-hdr.is-on .bp-hdr-off{display:none}
}
/* A headline that wraps short of the picture lets its unbreakable phrases break; the engine does this for `.nw`,
   and this page marks those phrases `.nowrap`. */
.bp-room .nowrap{white-space:normal}
/* The narrator's picture keeps a margin from the window's edge on a phone. */
@media (max-width:899px){.bp-presenter{margin-left:-14px}}

/* ── 3 · the invite card (rule 8): slides in once from the right and points at the switch ── */
.bp-hdr-call{position:fixed;z-index:70;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:6px;pointer-events:none;
  opacity:0;transform:translateX(48px);transition:opacity .3s ease,transform .3s ease}
.bp-hdr-call.is-on{opacity:1;transform:none}
.bp-hdr-call svg{width:44px;height:52px;flex:none}
.bp-hdr-call path{fill:none;stroke:var(--accent-amber);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bp-hdr-call span{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:0;letter-spacing:0;text-transform:none;
  color:var(--accent-navy);background:var(--bg-card);padding:12px 14px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);max-width:260px;text-align:left}
.bp-hdr-call span::before{content:"Add narration";font:700 15px/1.3 var(--font-sans)}
.bp-hdr-call span i{display:none}
.bp-hdr-call small{font:14px/1.45 var(--font-sans);color:var(--text-secondary)}
.bp-hdr-call.is-on span{animation:ird-blink 1.3s ease-in-out 3}

/* On a phone the header row wraps and the switch moves to the LEFT, but the
   engine anchors this card by its right edge (placeCall: style.right from the
   button's rect), which assumes the switch is near the right of the screen.
   At 390 that put the card mostly off-screen to the left -- Doug on his own
   phone, 2026-10-16. Below 600px the card spans the row instead, with the
   arrow on the left so it still points up at the switch. !important is what
   beats the engine's inline style.rect. */
/* On a phone the header wraps, and with space-between the three controls
   spread across the second row, which left the narration switch orphaned at
   the bottom-left corner -- the first thing a thumb is nowhere near, and the
   furthest point from where the card wants to sit (Doug, 2026-10-16). The
   wordmark takes the first row on its own and the three controls pack to the
   right on the second, so the switch sits beside Enroll exactly as it does on
   a desktop. */

@media (max-width:599px){
  /* The engine anchors this card to the switch's own bottom and right edge.
     With the switch on the middle row that put the card over the Enroll row
     and squeezed it to about 100px. On a phone it spans the width instead,
     below the whole header, with the arrow on the left under the switch.
     No top override: the header is one row again, so the engine's own
     placement under the switch is already under the header. */
  .bp-hdr-call{
    left:12px!important;
    transform:translateY(-10px);
  }
  .bp-hdr-call.is-on{transform:none}
  .bp-hdr-call span{max-width:none;flex:1 1 auto;min-width:0;margin-top:26px}
  .bp-hdr-call svg{width:36px;height:44px}
}
@keyframes ird-blink{50%{opacity:.55}}

/* ── 4 · the presenter: Doug's picture, the progress ring, his name ── */
.bp-presenter{transition:opacity .3s ease,transform .3s ease}
.bp-presenter-face{background:var(--bg-primary);box-shadow:var(--shadow-card)}
.bp-presenter-media{inset:9px;background:var(--bg-secondary)}
.bp-presenter-media :is(img,video){object-position:50% 50%;filter:none}
.bp-ring-track{stroke:var(--border-subtle);stroke-width:3;opacity:1}
.bp-ring-fill{stroke:var(--accent-navy);stroke-width:3;stroke-linecap:round}
.bp-presenter.is-live .bp-ring-track{animation:ird-breathe 2.4s ease-in-out infinite}
@keyframes ird-breathe{50%{opacity:.35}}
.bp-presenter-label{font:700 12px/1.4 var(--font-sans);letter-spacing:.06em;color:var(--text-muted);border-right:2px solid var(--border-subtle)}
.bp-presenter-label span:first-child{color:var(--accent-navy)}
@media (max-width:899px){.bp-presenter-media{inset:7px}}
/* On the dark sections the name plate turns light, or it vanishes into the navy. */
:is(.pgs-1,.pgs-loop,.pgs-fd,.pgs-st,.pgs-of) .bp-presenter-label{color:rgba(255,255,255,.72);border-right-color:rgba(255,255,255,.3)}
:is(.pgs-1,.pgs-loop,.pgs-fd,.pgs-st,.pgs-of) .bp-presenter-label span:first-child{color:#fff}
/* The foundation's stat cards are boxes, not copy, so the engine's room-making test skips them and the picture
   lands on the last card. While narration is on, the cards drop below the picture. */
@media (min-width:900px){html.bp-narrating .pgs-fd .fd-stats{margin-top:96px}}
@media (max-width:899px){html.bp-narrating .pgs-fd .fd-stats{margin-top:40px}}
/* On the amber section the role line goes navy too; the muted gray disappears into the amber. */
.pgs-8 .bp-presenter-label{color:var(--accent-navy);border-right-color:rgba(15,31,51,.35)}
/* The hero's photograph sits in the column under the narrator's spot; while narration is on it drops below the
   picture, once, as the engine does for a two-column section's right column (the engine's room-making test skips
   the photo plate, which is a background, not a figure). */
@media (min-width:768px){html.bp-narrating .pgs-1 .plate{margin-top:150px}}

/* ── 5 · read-along emphasis (rule 5): the passage being read stays at full strength; the rest recedes ── */
[data-narration-text] [data-nar]{transition:opacity .3s ease}
.bp-text-live [data-nar]{opacity:.42}
.bp-text-live [data-nar].bp-now{opacity:1}

/* ── 6 · a layered drawing's own switch and call (rule 8), in IRD's look ── */
.bp-add{background:var(--bg-primary);border:1.5px solid var(--accent-navy);border-radius:var(--radius-sm);min-height:40px;
  font:600 12px/1 var(--font-sans);color:var(--accent-navy);transition:var(--transition-smooth)}
.bp-add i{width:8px;height:8px;border:1.5px solid var(--accent-navy)}
.bp-add span{font-size:0}
.bp-add span::after{content:"Add narration";font-size:12px}
.bp-add.is-on{background:var(--accent-navy);color:#fff}
.bp-add.is-on span::after{content:"Narration on"}
.bp-add.is-on i{background:var(--accent-amber);border-color:var(--accent-amber)}
.bp-add:focus-visible{outline:2px solid var(--accent-amber);outline-offset:2px}
.bp-call-text{font:700 12px/1 var(--font-sans);letter-spacing:.04em;text-transform:none;color:var(--accent-navy)}
.bp-call-arrows path{stroke:var(--accent-amber);stroke-width:1.4;stroke-linecap:round}

/* ── 7 · motion limits (DESIGN.md §5): every animation has a reduced-motion fallback ── */
@media (prefers-reduced-motion:reduce){
  .bp-presenter,.bp-presenter *,.bp-call,.bp-call *,.bp-hdr-call,.bp-hdr-call *,.bp-hdr,.bp-add,[data-narration-text] [data-nar]{animation:none!important;transition:none!important}
}

/* ── 8 · version 2.1 (Doug, 2026-10-16: "Fix the widow on the subhead", and the same in the amber section) ──
   The week loop's lead and the reading cycle's headline left one word alone on their last line. The browser now
   balances those last lines; no word changes. */
#connected-week .loop-head p,#why-now h2,#why-now .cyc-lead{text-wrap:pretty}

/* One row on a phone. Wrapping put the switch either in the bottom-left
   corner or on a row of its own that collided with the wordmark and made the
   header three rows tall (Doug, 2026-10-16). Everything shrinks a little and
   keeps the single row it has on a desktop: wordmark, switch, Enroll, menu. */
@media (max-width:599px){
  .mast .wrap{flex-wrap:nowrap;gap:8px}
  .mast .wordmark img{height:22px}
  .mast-actions{gap:8px}
  .bp-hdr{padding:0 8px 0 4px!important;gap:6px;min-height:36px}
  .bp-hdr-face{width:26px;height:26px}
  .bp-hdr-label::after{font-size:12.5px}
  .mast .hdr-cta{padding:0 10px;font-size:13px;min-height:36px}
  .mast .nav-toggle{padding:6px}
}