/* READ ALOUD. The narration bar under the byline and the sticky bar it becomes
   on scroll. Progressive enhancement, the app-cta.js contract: the markup ships
   as a real <audio controls> and read-aloud.js upgrades it, so no-JS and every
   crawler get a working player rather than a dead control.

   All rules scoped under .readaloud / .ra- so this sheet can be linked into any
   dispatch without colliding. It does NOT restyle .art p: the highlight is a
   left rule and an ink shift, added by class, so a page that never loads the
   script reads exactly as it does today. */

.readaloud{max-width:680px;margin:clamp(30px,3.6vw,40px) auto 0;padding:0 clamp(22px,5vw,24px)}
.readaloud .ra-native{width:100%}                     /* the no-JS player */
.readaloud.is-live .ra-native{display:none}

/* ONE rule, on top. The article's own <hr class="rule"> sits immediately below
   this section, so a bottom border here puts three dashed lines inside 100px and
   they read as one thick mistake rather than as three separators. */
.ra-bar{display:none;align-items:center;flex-wrap:wrap;gap:14px;padding:16px 0 18px;
  border-top:1px dashed var(--dash)}
.readaloud.is-live .ra-bar{display:flex}

.ra-play{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:background .18s ease,border-color .18s ease}
.ra-play:hover{background:var(--bg-2);border-color:var(--ink)}
.ra-play svg{width:15px;height:15px;fill:currentColor;pointer-events:none}
.ra-play .ra-pause{display:none}
.readaloud.is-playing .ra-play .ra-pause{display:block}
.readaloud.is-playing .ra-play .ra-icon-play{display:none}

.ra-text{flex:1 1 auto;min-width:0}
.ra-lab{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted-2)}
.ra-sub{font-family:'Lora',Georgia,serif;font-size:14px;color:var(--muted);margin-top:5px}

/* THE TRACK ONLY EXISTS ONCE THERE IS PROGRESS TO SHOW. At rest an empty 3px
   bar under the sub-line reads as an underline of the text, and on a page whose
   entire separator language is dashed hairlines it is a fourth stray rule. */
.ra-track{position:relative;height:3px;background:var(--line);cursor:pointer;display:none;flex:0 0 100%;margin-top:6px}
.readaloud.is-started .ra-track{display:block}
.ra-stick .ra-track{display:block;flex:0 0 34%;margin-top:0}
.ra-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue)}
.ra-track:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

.ra-tools{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.ra-btn{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);
  background:transparent;border:1px solid transparent;padding:6px 8px;cursor:pointer;border-radius:2px;
  display:flex;align-items:center;gap:4px}
.ra-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ra-back span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em}
.ra-btn:hover{color:var(--ink);border-color:var(--line)}

/* THE PARAGRAPH BEING READ. A hairline in the margin and the ink brought up to
   full strength: enough to find your place after looking away, not so much that
   it turns the column into a karaoke screen. */
.art p.ra-now{color:var(--ink);box-shadow:-14px 0 0 -12px var(--blue)}
@media(prefers-reduced-motion:no-preference){
  .art p{transition:color .5s ease,box-shadow .5s ease}
}

/* STICKY. Appears once the article scrolls past the bar and only while playing:
   a control that follows you down a page you are not listening to is clutter. */
.ra-stick{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:12px;
  padding:11px clamp(16px,4vw,26px);background:rgba(250,249,246,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);transform:translateY(100%);transition:transform .28s ease}
.ra-stick.is-in{display:flex;transform:none}
.ra-stick .ra-play{width:36px;height:36px}
.ra-stick .ra-title{flex:1 1 auto;min-width:0;font-family:'Archivo',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra-stick .ra-time{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted)}
.ra-stick .ra-track{flex:0 0 34%;margin-top:0}

@media(max-width:620px){
  .ra-bar{flex-wrap:wrap}
  .ra-tools{order:3;margin-left:auto;margin-top:-4px}
  .ra-bar .ra-track{order:4}
  .ra-stick .ra-track{display:none}
}