/* Zero-JS static recording page — mirrors the site's parchment theme. */
:root{
  --cream-50:#fbf6ea; --cream-100:#f3ecdb; --cream-200:#ece2cc; --cream-300:#e0d3ba;
  --ink-900:#2a2418; --ink-700:#473a26; --ink-500:#6b5c40;
  --gold-400:#c2a15f; --gold-500:#b09050; --gold-600:#8f7434; --gold-line:rgba(176,144,80,.45);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--cream-50); color:var(--ink-900);
  font-family:'Noto Naskh Arabic','Amiri',serif; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
/* English pages lead with a Latin UI face; Arabic runs inside them keep the
   naskh face via the [lang=ar] rule below. */
body.is-en{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; line-height:1.75}
body.is-en [lang="ar"]{font-family:'Noto Naskh Arabic','Amiri',serif; line-height:1.95}
.s-wrap{max-width:760px; margin:0 auto; padding:28px 20px 64px}
.s-topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px}
.s-home{
  display:inline-block; color:var(--gold-600);
  font-weight:700; text-decoration:none; font-size:15px;
}
.s-home:hover{text-decoration:underline}
.s-lang{
  flex:0 0 auto; padding:6px 14px; border:1px solid var(--gold-400); border-radius:999px;
  color:var(--gold-600); text-decoration:none; font-size:13.5px; font-weight:700;
}
.s-lang:hover{background:var(--cream-200)}
.s-card{
  background:linear-gradient(180deg,#fff 0%,var(--cream-100) 100%);
  border:1px solid var(--gold-line); border-radius:16px; padding:30px 28px;
}
.s-eyebrow{font-size:13px; letter-spacing:.14em; color:var(--gold-600); font-weight:600; margin-bottom:10px}
.s-title{margin:0 0 14px; font-size:26px; font-weight:700; line-height:1.5; color:var(--ink-900)}
.s-scholar{font-size:16px; color:var(--ink-700); margin-bottom:4px}
.s-series{font-size:14px; color:var(--ink-500); margin-bottom:18px}
.s-media{margin:18px 0}
.s-player{width:100%; border-radius:10px; background:#000; display:block; margin-bottom:12px}
.s-image{max-width:100%; height:auto; border-radius:10px; display:block; margin-bottom:12px}
.s-context{
  margin:16px 0; padding:14px 18px; border-inline-start:3px solid var(--gold-500);
  background:var(--cream-100); border-radius:0 8px 8px 0; color:var(--ink-700);
  font-size:15px; text-align:justify;
}
.s-btn{
  display:inline-block; padding:11px 20px; border-radius:999px; text-decoration:none;
  font-weight:700; font-size:15px; margin:6px 0; text-align:center;
}
.s-btn-gold{background:var(--gold-500); color:#fff}
.s-btn-gold:hover{background:var(--gold-600)}
.s-btn-primary{background:var(--ink-900); color:var(--cream-50)}
.s-btn-ghost{background:transparent; border:1px solid var(--gold-400); color:var(--gold-600)}
.s-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.s-note{margin-top:22px; font-size:12.5px; color:var(--ink-500); line-height:1.7}
/* transcript */
.s-transcript{margin:22px 0 0; padding-top:18px; border-top:1px solid var(--gold-line)}
.s-h2{font-size:17px; margin:0 0 14px; color:var(--ink-900)}
.s-tnote{
  margin:0 0 14px; padding:10px 14px; background:var(--cream-100);
  border:1px dashed var(--gold-line); border-radius:8px;
  font-size:13px; color:var(--ink-500); line-height:1.65;
}
.s-intro,.s-outro{font-size:14px; color:var(--ink-500); margin:0 0 12px}
.s-outro{margin-top:12px; font-style:italic}
.s-turn{display:grid; grid-template-columns:auto 1fr; gap:12px; margin-bottom:14px; align-items:start}
.s-text-group{display:flex; flex-direction:column; gap:8px; min-width:0}
.s-label{
  flex:0 0 auto; min-width:46px; padding:4px 10px; border-radius:999px;
  font-size:12.5px; font-weight:700; text-align:center; align-self:start;
}
.s-q .s-label{background:var(--cream-300); color:var(--ink-700); border:1px solid var(--gold-line)}
.s-a .s-label{background:var(--gold-500); color:#fff}
.s-text{margin:0; font-size:15.5px; line-height:1.95}
.s-a .s-text{padding-inline-start:14px; border-inline-start:3px solid var(--gold-400)}
/* English translation shown beneath its verbatim Arabic counterpart */
.s-en{
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:14px; line-height:1.75; color:var(--ink-500);
  padding-top:8px; border-top:1px dashed var(--gold-line);
}
.s-a .s-text.s-en{border-inline-start:none; padding-inline-start:0}
/* directory list */
.d-list{list-style:none; margin:20px 0 0; padding:0}
.d-item{margin:0 0 10px}
.d-link{
  display:block; padding:14px 18px; text-decoration:none;
  background:var(--cream-100); border:1px solid var(--gold-line); border-radius:10px;
  transition:background .15s ease;
}
.d-link:hover{background:var(--cream-200)}
.d-title{display:block; font-size:16px; font-weight:700; color:var(--ink-900); line-height:1.6}
.d-meta{display:block; font-size:13.5px; color:var(--ink-500); margin-top:3px}