.narration-shell {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.narration-recording { min-width: 0; }

.narration-artifact {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid rgba(227,195,124,.3);
  background: linear-gradient(115deg, rgba(255,255,255,.04), transparent 30%), rgba(14,12,10,.9);
  box-shadow: 0 40px 90px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.08);
}

.narration-artifact::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.045);
  content: "";
  pointer-events: none;
}

.narration-control { position: relative; display: flex; gap: 1.5rem; align-items: center; }
.narration-play { display: inline-flex; flex: 0 0 auto; gap: .65rem; align-items: center; justify-content: center; min-width: 7.5rem; min-height: 3.15rem; padding: .8rem 1.1rem; border: 1px solid var(--gold); color: #171107; background: var(--pale); font: inherit; font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.narration-play:hover,.narration-play:focus-visible { background: #fff0bd; outline: 2px solid var(--pale); outline-offset: 3px; }
.narration-readout { display: grid; gap: .35rem; min-width: 0; }
.narration-readout p,.narration-readout span { margin: 0; color: var(--muted); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.narration-readout strong { color: var(--text); font: 500 clamp(1.05rem,2.2vw,1.45rem)/1.2 Georgia,serif; }
.narration-progress { margin-top: 2.2rem; }
.narration-progress label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.narration-progress input { width: 100%; height: 2px; margin: 0; border: 0; appearance: none; background: linear-gradient(to right,var(--pale) 0 var(--narration-progress,0%),rgba(255,255,255,.15) var(--narration-progress,0%) 100%); cursor: pointer; }
.narration-progress input::-webkit-slider-thumb { width: 12px; height: 12px; border: 1px solid #f6e4b6; border-radius: 50%; appearance: none; background: var(--pale); }
.narration-progress > div { display: flex; justify-content: space-between; margin-top: .75rem; color: #8f887e; font-size: .58rem; letter-spacing: .12em; }
.listen-note { margin: 1.5rem 0 0; color: var(--gold); font: italic .95rem/1.4 Georgia,serif; }

.transcript { margin-top: 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.transcript summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; color: var(--text); cursor: pointer; list-style: none; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary span { font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.transcript summary span::after { margin-left: .75rem; color: var(--gold); content: "+"; }
.transcript[open] summary span::after { content: "−"; }
.transcript summary small { color: #90877a; font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; }
.transcript-copy { padding: 1rem 0 2.5rem; }
.transcript-copy p { max-width: 80ch; margin: 0 0 1.2rem; color: #c5bcae; font: 1rem/1.75 Georgia,serif; }
.transcript-copy time { display: inline-block; min-width: 4.5rem; color: var(--gold); font: 600 .62rem/1.7 Inter,Arial,sans-serif; letter-spacing: .12em; }
.transcript-copy .transcript-note { padding: 1rem 1.2rem; border-left: 2px solid var(--gold); color: #a99f91; font-size: .88rem; }

@media (max-width: 760px) {
  .narration-shell { grid-template-columns: 1fr; }
  .narration-control { align-items: flex-start; }
  .narration-readout strong { white-space: normal; }
  .transcript summary small { display: none; }
  .transcript-copy time { display: block; margin-bottom: .3rem; }
}