/* «الأغاني تبوح» — sister section of «السينما تحكي»; builds on styles.css + cinema.css (test, 31 Oct) */

/* hero: same shape as the article pages, a touch more air */
.sg-hero h1{font-size:clamp(2rem,8.4vw,3rem);max-width:none;margin-bottom:.35rem}
.sg-hero .lead{font-family:'El Messiri','Tajawal',serif;font-weight:500;color:#ece4f7;max-width:none}

/* philosophy line — set alone, between two thin gold rules */
.cin-read .sg-motto{font-family:'Amiri','Tajawal',serif;text-align:center!important;text-align-last:center!important;
  font-size:clamp(1.55rem,6.4vw,2.05rem);line-height:1.95;color:var(--purple);margin:.4rem auto 2rem;padding:1.1rem 0;
  border-block:1px solid rgba(201,162,91,.55);max-width:26ch}
.sg-motto span{display:block}
.sg-motto .sg-motto-2{color:#A07C35}

/* intro (draft) */
.cin-read .sg-intro p{text-align:center!important;text-align-last:center!important;color:var(--muted);font-size:1.14rem;line-height:2.15;margin:0 auto 0;max-width:36ch;text-wrap:pretty}

/* entry */
.sg-entry{margin-top:.4rem}
.sg-entry-h{text-align:center;margin-bottom:1.3rem}
.cin-read .sg-entry-h h2{font-size:clamp(1.55rem,6vw,2rem);margin:0 0 .2rem;line-height:1.5}
.cin-read .sg-entry-sub{font-family:'Tajawal',system-ui,sans-serif;color:var(--purple-2);font-size:1.02rem;margin:0!important;text-align:center!important;text-align-last:center!important;text-wrap:balance}

/* the excerpt: words as the image — gold on deep purple */
.sg-verse{margin:0 auto 2.4rem;background:linear-gradient(165deg,#57417A 0%,#3F2E58 62%,#35264b 100%);border-radius:22px;
  padding:2.3rem 1.6rem 1.5rem;position:relative;box-shadow:0 22px 44px -24px rgba(30,18,48,.75)}
.sg-verse::before{content:"";position:absolute;inset:9px;border:1px solid rgba(226,196,138,.45);border-radius:15px;pointer-events:none}
.sg-verse blockquote{margin:0}
.cin-read .sg-verse p{font-family:'Amiri','Tajawal',serif;color:#E2C48A;text-align:center!important;text-align-last:center!important;
  font-size:clamp(1.18rem,4.8vw,1.6rem);line-height:1.85;margin:0 0 .85rem!important;text-wrap:balance}
.cin-read .sg-verse p.sg-v1{font-family:'El Messiri','Amiri',serif;font-weight:600;color:#E2C48A;font-size:clamp(1.85rem,8vw,2.5rem);line-height:1.6;margin-bottom:1.1rem!important}
.sg-verse figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .6rem;margin-top:1.3rem;padding-top:.9rem;
  border-top:1px solid rgba(226,196,138,.3);font-family:'Tajawal',system-ui,sans-serif;font-size:.95rem;color:#EFE8F7}
.sg-verse figcaption i{font-style:normal;color:#C9A25B}

/* her reading: short poetic lines, centred, on the solid panel */
.sg-reading{margin:0 auto}
.cin-read .sg-reading p.sg-st{font-family:'Amiri','Tajawal',serif;font-size:1.2rem;line-height:2.1;color:var(--ink);
  text-align:center!important;text-align-last:center!important;margin:0 auto 1.9em!important;text-wrap:balance}
.sg-reading .ln{display:block}
.sg-reading .ln.q{color:#8A6A2E}
.cin-read .sg-reading p.sg-st-last{margin-top:2.6rem!important;padding-top:1.6rem;border-top:1px solid rgba(201,162,91,.5);
  font-family:'El Messiri','Tajawal',serif;color:var(--purple);font-size:1.22rem;line-height:2}
.sg-reading p.sg-st-last .ln.q{color:#A07C35}
@media (min-width:700px){ .cin-read .sg-reading p.sg-st{font-size:1.27rem} }

/* مساحة للبوح (question) — sits right above the comments */
.sg-bawh{margin:2.6rem auto 0;text-align:center;background:linear-gradient(180deg,#EFE8F7,#F5F0FA);border:1px solid rgba(201,162,91,.4);
  border-radius:22px;padding:1.5rem 1.3rem 1.4rem}
.cin-read .sg-bawh h3{font-family:'El Messiri','Tajawal',serif;color:var(--purple);font-size:1.45rem;margin:0 0 .5rem}
.cin-read .sg-bawh p{font-family:'Amiri','Tajawal',serif;font-size:1.2rem;line-height:2;color:var(--ink);margin:0!important;
  text-align:center!important;text-align-last:center!important;text-wrap:balance}

/* listen — official video */
.sg-listen{margin:2.6rem auto 0;text-align:center}
.cin-read .sg-listen h3{font-family:'El Messiri','Tajawal',serif;color:var(--purple);font-size:1.35rem;margin:0 0 .3rem}
.cin-read .sg-listen p{font-family:'Tajawal',system-ui,sans-serif;text-align:center!important;text-align-last:center!important;margin:0 0 .9rem!important;line-height:1.8}
.cin-read .sg-listen-t{color:var(--muted);font-size:1.02rem;text-wrap:balance}
.sg-listen .nw{white-space:nowrap}
.sg-yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#3F2E58;
  box-shadow:0 0 0 1px rgba(201,162,91,.5),0 22px 44px -24px rgba(30,18,48,.7)}
.sg-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cin-read .sg-listen p.sg-listen-src{font-size:.92rem;color:var(--muted);margin:1rem 0 0!important;line-height:1.9}
.sg-listen-src a{font-weight:700}

.cin-read .sg-end{margin-top:2.6rem}

/* tap-to-play: nothing loads from YouTube until the reader taps (no thumbnails, no web images) */
.sg-yt-play{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  background:linear-gradient(165deg,#57417A 0%,#3F2E58 70%);color:#E2C48A;font:inherit;padding:1rem}
.sg-yt-play::before{content:"";position:absolute;inset:8px;border:1px solid rgba(226,196,138,.4);border-radius:12px;pointer-events:none}
.sg-yt-ico{flex:none;width:58px;height:58px;border-radius:50%;border:1.5px solid #C9A25B;display:flex;align-items:center;justify-content:center;margin-bottom:.35rem;
  padding-inline-start:3px;transition:background .15s ease}
.sg-yt-play:hover .sg-yt-ico,.sg-yt-play:focus-visible .sg-yt-ico{background:rgba(201,162,91,.18)}
.sg-yt-play:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.sg-yt-t{font-family:'El Messiri','Amiri',serif;font-weight:600;font-size:1.35rem;line-height:1.4}
.sg-yt-s{font-family:'Tajawal',system-ui,sans-serif;font-size:.92rem;color:#EFE8F7}

/* version B (test): her prose — justified Amiri paragraphs with in-card part headings */
.sg-hero-tag{margin:.9rem 0 0;color:var(--gold-2);font-family:'El Messiri','Tajawal',serif;font-size:1rem;letter-spacing:.01em}
.cin-read h3.sg-part{font-family:'El Messiri','Tajawal',serif;color:var(--purple);font-size:1.4rem;font-weight:600;text-align:center;margin:2.6rem 0 1.1rem;line-height:1.4}
.cin-read h3.sg-part::after{content:"";display:block;width:46px;height:1px;background:#C9A25B;margin:.55rem auto 0}
.sg-b .sg-entry-h{margin-bottom:.2rem}
.sg-verse.sg-verse-title{padding:2.4rem 1.2rem 1.4rem;margin-bottom:1.9rem}
.cin-read .sg-verse-title p.sg-v1{font-size:clamp(2rem,9vw,2.7rem);margin-bottom:0!important}
.cin-read .sg-bawh-b p{text-align:center!important;text-align-last:center!important;margin:0 0 .9rem!important;line-height:2.05}
.cin-read .sg-bawh-b p:last-child{margin-bottom:0!important;color:var(--purple-2)}
.sg-foot{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid rgba(201,162,91,.45);text-align:center}
.cin-read .sg-foot p{text-align:center!important;text-align-last:center!important;margin:0 0 .5rem!important;line-height:1.9}
.cin-read .sg-foot .sg-foot-1{font-family:'El Messiri','Tajawal',serif;color:var(--purple-2);font-size:1.05rem}
.cin-read .sg-foot .sg-foot-2{font-family:'Amiri','Tajawal',serif;color:var(--purple);font-size:1.3rem}
.cin-read .sg-foot .cin-close{margin-top:.2rem!important}

/* merged page: lead line under the philosophy line, and a quiet divider between the two readings */
.cin-read p.sg-lead{font-family:'Amiri','Tajawal',serif;text-align:center!important;text-align-last:center!important;
  font-size:clamp(1.3rem,5.4vw,1.55rem);line-height:2;color:var(--purple-2);margin:0 auto 1.9rem!important;max-width:24ch;text-wrap:balance}
.sg-sep{width:62%;height:1px;margin:2.8rem auto 2.6rem;background:linear-gradient(90deg,rgba(201,162,91,0),#C9A25B 50%,rgba(201,162,91,0))}

/* video moved under the verses */
.cin-read .sg-listen-top{margin:1.6rem 0 2rem}

/* split (31 Oct): section landing + one page per song/poem */
.sg-page .nw{white-space:nowrap}
.sg-hero .lead,.cin-card-s{text-wrap:balance}
.sg-landing .sg-list{margin-top:.6rem}
.sg-landing .cin-list{margin-inline:auto}
/* card art: the title set in gold on deep purple (typography, no image) */
.cin-card .sg-card-art{display:block;margin:-1.5rem -1.4rem 1.1rem;padding:10px;background:linear-gradient(165deg,#57417A 0%,#3F2E58 62%,#35264b 100%);
  border-bottom:1px solid rgba(201,162,91,.45)}
.sg-card-art-in{display:flex;align-items:center;justify-content:center;min-height:118px;padding:1.1rem 1rem;border:1px solid rgba(226,196,138,.45);border-radius:12px}
.cin-card .sg-card-art .cin-card-t{font-family:'Amiri','El Messiri',serif;font-weight:700;color:#E2C48A;font-size:clamp(1.6rem,7vw,2.1rem);line-height:1.5;margin:0;text-align:center}
.sg-card .cin-card-s{margin-bottom:.5rem}

/* article: the song stage — verses + video on translucent purple over the moving lavender (Yasmin: «حالم») */
.sg-stage-wrap{position:relative;z-index:1;padding:0 0 2.2rem}
.cin-read.sg-stage{width:min(720px,100% - 1.4rem);margin-inline:auto;padding:1.5rem 1.1rem 1.3rem;border-radius:24px;
  background:rgba(63,46,88,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(226,196,138,.55);
  box-shadow:0 18px 44px -26px rgba(20,10,36,.7)}
.cin-read.sg-stage h3.sg-part{color:#E2C48A;margin:0 0 1rem;text-shadow:0 1px 3px rgba(20,10,36,.55)}
.cin-read.sg-stage h3.sg-part::after{background:rgba(226,196,138,.8)}
.sg-stage .sg-verse{background:rgba(53,38,75,.28);box-shadow:none;margin-bottom:1.6rem}
.sg-stage .sg-verse::before{border-color:rgba(226,196,138,.5)}
.cin-read.sg-stage .sg-verse p{text-shadow:0 1px 3px rgba(20,10,36,.65)}
.sg-stage .sg-verse figcaption{text-shadow:0 1px 2px rgba(20,10,36,.6)}
.cin-read.sg-stage .sg-listen-top{margin:0}
.cin-read.sg-stage .sg-listen h3{color:#F5F0FA;text-shadow:0 1px 3px rgba(20,10,36,.6)}
.cin-read.sg-stage .sg-listen-t,.cin-read.sg-stage p.sg-listen-src{color:#EFE8F7;text-shadow:0 1px 2px rgba(20,10,36,.6)}
.sg-stage .sg-listen-src a{color:#E2C48A}
.sg-art-hero .page-hero-in{padding-bottom:2.6rem}

/* dreamy section (Yasmin 31 Oct, «حالم»): the moving lavender shows through the whole page, gold glints rise
   slowly behind the content, and the reading sits on frosted lavender glass (still solid enough to read comfortably) */
.sg-page main>.section.cin-article{background:transparent!important;padding:.4rem 0 2.6rem}
.sg-page main>.section.cin-article>.cin-read{width:min(720px,100% - 1.2rem);padding:1.9rem 1.15rem 1.6rem;border-radius:24px;
  background:rgba(245,240,250,.84);-webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);
  border:1px solid rgba(201,162,91,.5);box-shadow:0 22px 50px -30px rgba(30,18,48,.6)}
@media (min-width:700px){.sg-page main>.section.cin-article>.cin-read{padding:2.6rem 2.4rem 2.2rem}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sg-page main>.section.cin-article>.cin-read{background:rgba(247,243,251,.95)}}
.sg-page .sg-hero{background:transparent}
.sg-embers{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sg-embers .ember{animation-name:sgrise}
@keyframes sgrise{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:.8}70%{opacity:.45}100%{transform:translate3d(var(--dx,0),-48vh,0);opacity:0}}
@media (prefers-reduced-motion:reduce){.sg-embers{display:none}}

/* the verses' golden gate (Yasmin 31 Oct): an arched doorway in a thin double gold line, a small keystone at its crown,
   the lavender showing through the purple glass inside. CSS + inline SVG only. */
.sg-stage .sg-verse{--arch:clamp(130px,40vw,190px);border:1px solid #C9A25B;border-radius:50% 50% 14px 14px / var(--arch) var(--arch) 14px 14px;
  background:linear-gradient(180deg,rgba(63,46,88,.18),rgba(53,38,75,.34));padding:clamp(4.3rem,19vw,5.6rem) 1.4rem 1.5rem;margin:1.4rem auto 1.7rem;overflow:visible}
.sg-stage .sg-verse::before{inset:7px;border:1px solid rgba(226,196,138,.6);border-radius:50% 50% 9px 9px / calc(var(--arch) - 7px) calc(var(--arch) - 7px) 9px 9px}
.sg-stage .sg-verse::after{content:"";position:absolute;top:-15px;left:50%;width:22px;height:28px;margin-left:-11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 1 L20 13 L12 25 L4 13 Z' fill='%233F2E58' stroke='%23E2C48A' stroke-width='1.3'/%3E%3Cpath d='M12 7 L16 13 L12 19 L8 13 Z' fill='none' stroke='%23C9A25B' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat}
.sg-stage .sg-verse figcaption{border-top-color:rgba(226,196,138,.38)}
.cin-read.sg-stage .sg-verse p.sg-v1{margin-bottom:1.2rem!important}
.cin-read.sg-stage{background:rgba(63,46,88,.34)}
/* landing card: the same arch in miniature */
.sg-card .sg-card-art-in{position:relative;border-color:rgba(201,162,91,.85);border-radius:50% 50% 8px 8px / 52px 52px 8px 8px;padding:1.9rem 1rem .9rem;min-height:126px;
  box-shadow:inset 0 0 0 5px rgba(63,46,88,0),inset 0 0 0 6px rgba(226,196,138,.35)}
.sg-card .sg-card-art{padding:16px 14px 12px}
.sg-card .sg-card-art-in::after{content:"";position:absolute;top:-11px;left:50%;width:16px;height:20px;margin-left:-8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 1 L20 13 L12 25 L4 13 Z' fill='%233F2E58' stroke='%23E2C48A' stroke-width='1.3'/%3E%3Cpath d='M12 7 L16 13 L12 19 L8 13 Z' fill='none' stroke='%23C9A25B' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat}
.sg-page .cin-read .cin-cta p{text-align:center!important;text-align-last:center!important;text-justify:auto}

/* landing card (Yasmin 31 Oct 10:28): no arch — translucent purple glass with moving lavender behind, like the article */
.sg-card .sg-card-art{position:relative;overflow:hidden;background:#3F2E58;padding:14px}
.sg-card .sg-card-lav{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.sg-card .sg-card-art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(165deg,rgba(87,65,122,.42),rgba(53,38,75,.55));pointer-events:none}
.sg-card .sg-card-art-in{position:relative;z-index:2;border:1px solid rgba(226,196,138,.75);border-radius:14px;padding:1.4rem 1rem;min-height:132px;
  background:rgba(63,46,88,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 0 0 5px rgba(0,0,0,0),inset 0 0 0 6px rgba(226,196,138,.3)}
.sg-card .sg-card-art-in::after{display:none!important}
.cin-card.sg-card .sg-card-art .cin-card-t{text-shadow:0 1px 4px rgba(20,10,36,.75)}
@media (prefers-reduced-motion:reduce){.sg-card .sg-card-lav{display:none}.sg-card .sg-card-art{background:#3F2E58 url(assets/lavender-poster.jpg) center/cover}}

/* landing cards — Yasmin's pick 31 Oct 10:35 (option 2): lavender fully visible, no frame, gold title low and quiet */
.sg-card .sg-card-art{padding:0}
.sg-card .sg-card-art::before{background:linear-gradient(180deg,rgba(63,46,88,.05) 0%,rgba(63,46,88,.15) 45%,rgba(53,38,75,.72) 100%)}
.sg-card .sg-card-art-in{border:0;box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;min-height:170px;
  flex-direction:column;justify-content:flex-end;align-items:center;padding:1rem 1rem 1.1rem}
.sg-card .sg-card-art-in::before{content:"";order:2;display:block;width:56px;height:1px;margin:.35rem auto 0;background:linear-gradient(90deg,transparent,#E2C48A,transparent)}
.cin-card.sg-card .sg-card-art .cin-card-t{color:#F6E2A8;font-family:'El Messiri','Amiri',serif;font-weight:600;text-align:center}

/* short-line reading: inline subheads + sign-off (songs-capital, 31 Oct) — site roles: El Messiri heads, Amiri lines */
.cin-read .sg-reading h4.sg-sub{font-family:'El Messiri','Tajawal',serif;font-weight:600;color:#A07C35;font-size:1.12rem;line-height:1.5;
  text-align:center;margin:2.4rem auto 1.1rem;display:flex;align-items:center;justify-content:center;gap:.7rem}
.cin-read .sg-reading h4.sg-sub::before,.cin-read .sg-reading h4.sg-sub::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,#C9A25B,transparent)}
.cin-read .sg-reading p.sg-sign{font-family:'El Messiri','Tajawal',serif;color:#A07C35;font-size:1.02rem;text-align:center!important;text-align-last:center!important;margin:1.2rem auto 0!important}

/* card glow — faded Nizar & Kazem as soft light in the lavender (preview 31 Oct). Public-domain photos via Wikimedia Commons */
.sg-card .sg-card-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:url(assets/sg-glow-a.jpg?v=1) center top/cover no-repeat;
  mix-blend-mode:screen;opacity:.45;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 80%);mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 80%)}

/* poem / collection / song under the card title (1 Nov) — art made taller so the faces stay clear */
.cin-card.sg-card .sg-card-art-in{min-height:250px}
.cin-card.sg-card .sg-card-poem{order:3;display:block;margin-top:.45rem;font-family:'Tajawal',sans-serif;font-size:.8rem;line-height:1.55;font-weight:500;color:#F5F0FA;opacity:.92;letter-spacing:.2px;text-shadow:0 1px 3px rgba(20,10,36,.85);text-align:center}
.cin-card.sg-card .sg-card-poem .pn{display:block}
.cin-card.sg-card .sg-card-song{order:4;margin-top:.15rem;color:#E2C48A}
.cin-card.sg-card .sg-card-glow{background-size:100% auto;background-position:center top}

/* gold corners on the card art (her pick, 1 Nov) */
.cin-card.sg-card .sg-card-art{position:relative}.cin-card.sg-card .sg-card-art::after{content:'';position:absolute;inset:9px;pointer-events:none;z-index:3;background:linear-gradient(#E2C48A,#E2C48A) top left/26px 1px no-repeat,linear-gradient(#E2C48A,#E2C48A) top left/1px 26px no-repeat,linear-gradient(#E2C48A,#E2C48A) top right/26px 1px no-repeat,linear-gradient(#E2C48A,#E2C48A) top right/1px 26px no-repeat,linear-gradient(#E2C48A,#E2C48A) bottom left/26px 1px no-repeat,linear-gradient(#E2C48A,#E2C48A) bottom left/1px 26px no-repeat,linear-gradient(#E2C48A,#E2C48A) bottom right/26px 1px no-repeat,linear-gradient(#E2C48A,#E2C48A) bottom right/1px 26px no-repeat}