/* public site additions on top of admin.css (the prototype's full stylesheet) */
.pgn{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:32px 0 8px}
.pgn .pg{display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);font-weight:700;justify-content:center;text-decoration:none}
.pgn a.pg:hover{border-color:#622599;color:#622599}
.pgn .pg.on{background:#622599;border-color:#622599;color:#fff}
.pgn .pg-gap{color:var(--muted)}
.pgn svg{width:16px;height:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.tag{background:#f3edf9;color:#4b1c76;border-radius:999px;padding:4px 14px;font-size:14px;font-weight:700;text-decoration:none}
.tag:hover{background:#622599;color:#fff}
.yt-box{position:relative;aspect-ratio:16/9;margin:20px 0;border-radius:16px;overflow:hidden;background:#000}
.yt-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.body.article img{max-width:100%;height:auto;border-radius:14px}
.body.article figure{margin:20px 0}
.body.article figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:6px}
.body.article video{width:100%;border-radius:14px;background:#000}
.body.article .fbx{margin:20px 0}
.nf-p{padding:8px 0 24px}
.hbtn.paused{background:#622599;color:#fff}
/* editor: placeholders of old embeds stay visible while editing */
.rte .fbx,.rte .yt{display:block;border:1.5px dashed var(--line);border-radius:12px;padding:14px;margin:10px 0;color:var(--muted);font-size:14px}
.rte .fbx::before{content:"منشور فيسبوك مضمّن (يظهر للقرّاء كما هو)"}
.rte .yt::before{content:"فيديو يوتيوب مضمّن"}
.rte img{max-width:100%;height:auto;border-radius:10px}
/* story title: sized to the screen — smaller on phones, smaller again for long titles */
.post h1{font-size:clamp(22px,1.6vw + 16px,40px);line-height:1.5;font-weight:800;margin:10px 0 14px;text-wrap:balance}
.post h1.long{font-size:clamp(20px,1.2vw + 15px,34px)}
.phead h1{font-size:clamp(24px,2vw + 16px,44px);line-height:1.4}
@media (max-width:600px){
  .post h1{text-align:right}
  .post .meta.center{justify-content:flex-start}
  .post .post-k,.post .crumbs{text-align:right;justify-content:flex-start}
}