/* madih.info. Iznik tiles and the two-halved Arabic verse.
   Tokens first; the tile colours and patterns are classes used by the wall and the section banners. */
@font-face{font-family:Markazi;src:url(fonts/markazi-arabic-400-700.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Markazi;src:url(fonts/markazi-latin-400-700.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Amiri;src:url(fonts/amiri-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Amiri;src:url(fonts/amiri-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Amiri;src:url(fonts/amiri-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Amiri;src:url(fonts/amiri-latin-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f6f7f2; --surface:#fff; --sunk:#e8ecea; --ink:#121c40; --muted:#59637e; --line:#d6dce3;
  --accent:#1c3fa6; --teal:#0f7f78; --red:#c2352b;
  --night:#0e1f5e; --on-night:#f6f7f2;
  --t-cobalt:#1c3fa6; --t-deep:#10246b; --t-teal:#0d6f69; --t-red:#b02f27; --t-plum:#5b2a58; --t-sage:#3f6b50; --t-ochre:#8f5e14;
  --ui:Markazi,"Noto Naskh Arabic",serif; --verse:Amiri,"Traditional Arabic",serif; --display:Markazi,"Noto Naskh Arabic",serif;
  --gutter:16px; --wide:1240px; --ly:1.375rem;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0b1330; --surface:#131d44; --sunk:#1a2652; --ink:#eef1e8; --muted:#a6b0c8; --line:#27345f;
  --accent:#9db4fa; --teal:#5fd0c4; --red:#f07a6e; --night:#070d24;
}}
:root[data-theme=dark]{
  --bg:#0b1330; --surface:#131d44; --sunk:#1a2652; --ink:#eef1e8; --muted:#a6b0c8; --line:#27345f;
  --accent:#9db4fa; --teal:#5fd0c4; --red:#f07a6e; --night:#070d24;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:112.5%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.5 var(--ui);padding-bottom:calc(66px + env(safe-area-inset-bottom));overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.i{display:block}

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:20px;padding:10px var(--gutter);background:var(--night);color:var(--on-night)}
.top.over{position:absolute;inset:0 0 auto;z-index:5;background:none}
.logo{display:flex;align-items:center;gap:9px;font:700 1.875rem/1.5 var(--verse)}
.mark{width:26px;height:26px;fill:currentColor;flex:none}
.top-nav{display:none;gap:26px;margin-inline-start:16px}
.top-nav a{position:relative;padding:6px 0;font-weight:500}
.top-nav a[aria-current]::after,.top-nav a:hover::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:currentColor}
.theme{margin-inline-start:auto;background:none;border:0;color:inherit;padding:8px;cursor:pointer}

/* ---------- phone bar ---------- */
.bottom{position:fixed;inset:auto 0 0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bottom a{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 0 7px;font-size:.875rem;line-height:1.2;color:var(--muted)}
.bottom a[aria-current]{color:var(--accent);font-weight:600}
.bottom a[aria-current]::before{content:"";position:absolute;inset:-1px 24% auto;height:3px;background:var(--accent)}

/* ---------- hero: one verse over the singer's picture ---------- */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(280px,44svh,380px);background:var(--tile,var(--night));color:var(--on-night);overflow:hidden}
.hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--tile,var(--night)) 12%,color-mix(in srgb,var(--tile,var(--night)) 74%,transparent) 50%,color-mix(in srgb,var(--tile,var(--night)) 50%,transparent))}
.hero-in{width:100%;max-width:var(--wide);margin:auto;padding:64px var(--gutter) 50px}
.hero-verse{font:700 clamp(1.75rem,7vw,3.6rem)/1.55 var(--verse);margin-bottom:14px;text-wrap:balance}
.hero-verse span{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-verse span:last-child{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(.25em)}}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.hero-meta small{display:block;font-size:1rem;color:#cfd8ee}
.hero-meta b{display:block;font-weight:500;font-size:1.0625rem}
.play{display:inline-flex;align-items:center;gap:10px;background:var(--on-night);color:#0e1f5e;font-weight:600;padding:9px 22px 9px 18px;border-radius:999px}
.play::before{content:"";border-block:8px solid transparent;border-inline-end:13px solid #c2352b}
.play:hover{background:#fff}

/* the verse: two halves, staggered like a printed poem */
.bayt{display:grid;grid-template-columns:minmax(0,1fr);row-gap:.1em}
.bayt>span:first-child{justify-self:start}
.bayt>span:last-child{justify-self:end;text-align:left}

/* search, resting on the hero's edge */
.search-wrap{position:relative;z-index:2;max-width:760px;margin:-28px auto 0;padding-inline:var(--gutter)}
.search-box{display:flex;background:var(--surface);color:var(--ink);border-radius:8px;box-shadow:0 8px 28px rgba(14,31,94,.2)}
.search-box input{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;font-size:1.0625rem;padding:15px 16px}
.search-box input:focus{outline:0}
.search-box button{border:0;background:none;color:var(--accent);padding:0 16px;cursor:pointer}
.search-box:focus-within{outline:3px solid var(--teal)}
.plain .search-box{box-shadow:none;border:2px solid var(--ink)}

/* ---------- tile wall ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:128px;aspect-ratio:4/3;padding:14px;color:#fff;background-color:var(--tile);background-image:var(--pat);background-size:96px 96px;background-position:center}
.tile b{font:700 1.625rem/1.25 var(--display)}
.tile small{font-size:.9375rem;opacity:.85}
.tile:hover{filter:brightness(1.12)}
.c-cobalt{--tile:var(--t-cobalt)}.c-deep{--tile:var(--t-deep)}.c-teal{--tile:var(--t-teal)}.c-red{--tile:var(--t-red)}.c-plum{--tile:var(--t-plum)}.c-sage{--tile:var(--t-sage)}.c-ochre{--tile:var(--t-ochre)}
.p-star{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='1.6'%3E%3Crect x='27' y='27' width='66' height='66'/%3E%3Crect x='27' y='27' width='66' height='66' transform='rotate(45 60 60)'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E")}
.p-ros{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='1.6'%3E%3Ccircle cx='0' cy='60' r='60'/%3E%3Ccircle cx='120' cy='60' r='60'/%3E%3Ccircle cx='60' cy='0' r='60'/%3E%3Ccircle cx='60' cy='120' r='60'/%3E%3C/g%3E%3C/svg%3E")}
.p-hex{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M60 10 103 85H17z'/%3E%3Cpath d='M60 110 17 35h86z'/%3E%3C/g%3E%3C/svg%3E")}
.p-lat{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 60 60 0l60 60-60 60z'/%3E%3Cpath d='M30 30h60v60H30z'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- blocks ---------- */
.block,.page{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.block{margin-top:44px}
.page{padding-block:24px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
h2{font:700 2rem/1.25 var(--display)}
.page-title{font:700 2.625rem/1.25 var(--display);margin-bottom:6px}
.page-sub{color:var(--muted);margin-bottom:20px}
.more{color:var(--accent);font-weight:500;white-space:nowrap}
.more:hover{text-decoration:underline}
.home-tiles{margin-top:34px}

/* ---------- video cards ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
.card a{display:block}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--sunk);overflow:hidden;border-radius:6px}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
@media (hover:hover){.card a:hover img{transform:scale(1.04)}.card a:hover .c-title{color:var(--accent)}}
.dur{position:absolute;inset:auto auto 6px 6px;background:rgba(7,13,36,.86);color:#fff;font-size:.6875rem;line-height:1;padding:4px 6px;direction:ltr;border-radius:3px}
.words{position:absolute;inset:6px 6px auto auto;background:var(--t-teal);color:#fff;font-size:.8125rem;font-weight:500;line-height:1;padding:4px 7px;border-radius:3px}
.c-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:7px;font-weight:600;font-size:1.0625rem;line-height:1.3}
.c-meta{display:block;color:var(--muted);font-size:.9375rem;line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* rails scroll sideways; the next card peeks in */
.rail{position:relative}
.rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(74vw,300px);gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.rail-track::-webkit-scrollbar{display:none}
.rail-track>li{scroll-snap-align:start}
.rank{position:absolute;inset:auto 8px 0 auto;font:700 3.25rem/1.1 var(--display);color:#fff;text-shadow:0 2px 14px rgba(7,13,36,.8)}
.rail-btn{display:none}

/* singers in an arch, like a mihrab niche */
.arch{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 6px 6px;background:var(--sunk)}
.singers-rail{grid-auto-columns:116px}
.singer{display:block;text-align:center}
.singer b{display:block;font-weight:600;font-size:1.0625rem;line-height:1.25;margin-top:8px}
.singer small{color:var(--muted);font-size:.9375rem}
.singer:hover b{color:var(--accent)}
.singers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}

/* ---------- banners on list pages ---------- */
.banner{display:flex;align-items:flex-end;gap:18px;min-height:172px;padding:26px max(var(--gutter),calc((100% - var(--wide))/2 + var(--gutter)));color:#fff;background-color:var(--tile,var(--night));background-image:var(--pat);background-size:96px 96px}
.banner h1{font:700 2.625rem/1.25 var(--display)}
.banner p{opacity:.9}
.banner .arch{width:96px;flex:none;border:3px solid rgba(255,255,255,.85)}
.sorter{display:flex;gap:8px;margin-bottom:18px}
.sorter a{padding:5px 16px;border:1px solid var(--line);border-radius:999px;font-size:1rem}
.sorter a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:30px}
.empty{padding:28px 0;color:var(--muted)}

/* ---------- track page ---------- */
.track{max-width:var(--wide);margin:auto;padding-bottom:24px}
/* On phones the video stays on top while the words scroll, so it must sit directly in .track. */
.track-main{display:contents}
.player{position:sticky;top:0;z-index:10;background:#000;aspect-ratio:16/9}
.player button,.player iframe{display:block;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer}
.player button{position:relative}
.player img{width:100%;height:100%;object-fit:cover}
.player button::after{content:"";position:absolute;top:50%;left:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--on-night)}
.player button::before{content:"";position:absolute;z-index:1;top:50%;left:50%;margin:-14px 0 0 -9px;border-block:14px solid transparent;border-inline-end:23px solid #c2352b}
.track-head{padding:18px var(--gutter) 0}
.track-head h1{font:700 2.25rem/1.25 var(--display)}
.track-sub{display:flex;align-items:center;gap:12px;margin-top:12px}
.by{display:flex;align-items:center;gap:10px;min-width:0;font-weight:500}
.by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.by small{display:block;color:var(--muted);font-weight:400;font-size:.9375rem;direction:ltr;text-align:right}
.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-inline-start:auto}
.btn[hidden]{display:none}
.btn{display:inline-flex;align-items:center;background:var(--sunk);border:0;color:inherit;font:inherit;font-size:1rem;font-weight:500;border-radius:999px;padding:8px 16px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--line)}

/* share buttons */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 18px}
.share a,.share button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--c);color:#fff;font:inherit;cursor:pointer}
.share a:hover,.share button:hover{filter:brightness(1.12)}
.share button[hidden]{display:none}
.si{width:21px;height:21px;fill:currentColor}
.share-mail .si,.share-native .si,.share-copy .si{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.share-whatsapp{--c:#128c7e}.share-telegram{--c:#1b87bd}.share-facebook{--c:#1877f2}.share-x{--c:#000}.share-mail{--c:var(--t-ochre)}
.share .share-native{--c:var(--t-cobalt);width:auto;gap:7px;padding-inline:14px 16px;border-radius:21px;font-weight:500;font-size:.9375rem}
.share .share-copy{background:var(--sunk);color:var(--ink)}
.share-status{font-size:.875rem;color:var(--teal)}

/* the words: set on the page like a printed poem, centred, with a small star between stanzas */
.lyrics{container-type:inline-size;padding:26px var(--gutter) 0}
.lyrics-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.lyrics-head h2{font-size:1.5rem}
.size{display:flex;align-items:center;gap:2px;color:var(--muted)}
.size button{background:none;border:0;color:inherit;font:inherit;font-size:.9375rem;min-width:40px;height:36px;cursor:pointer}
.size button:hover{color:var(--ink)}
.lyrics-body{font:400 var(--ly)/2 var(--verse);text-align:center;max-width:44rem;margin-inline:auto}
.stanza+.stanza::before{content:"";display:block;width:13px;height:13px;margin:1.1em auto;background:var(--accent);opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3.2 3.1 4.6.1.1 4.6L23 12l-3.1 3.2-.1 4.6-4.6.1L12 23l-3.2-3.1-4.6-.1-.1-4.6L1 12l3.1-3.2.1-4.6 4.6-.1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3.2 3.1 4.6.1.1 4.6L23 12l-3.1 3.2-.1 4.6-4.6.1L12 23l-3.2-3.1-4.6-.1-.1-4.6L1 12l3.1-3.2.1-4.6 4.6-.1z'/%3E%3C/svg%3E") center/contain no-repeat}
.misra{margin-bottom:.15em}
.lyrics-body .bayt{display:block;margin-bottom:.75em}
.lyrics-body .bayt>span{display:block;text-align:center}
/* Two halves side by side only where a verse really fits on one line */
@container (min-width:640px){
  .lyrics-body .bayt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2.4em;margin-bottom:.35em}
  .lyrics-body .bayt>span:first-child{justify-self:end;text-align:left}
  .lyrics-body .bayt>span:last-child{justify-self:start;text-align:right}
}
.side{padding:30px var(--gutter) 0}
.side .card a{display:grid;grid-template-columns:136px minmax(0,1fr);gap:12px}
.side .grid{grid-template-columns:minmax(0,1fr);gap:14px}
.side .c-title{margin-top:0}
.foot{text-align:center;color:var(--muted);font-size:1rem;padding:44px 16px 20px}

@media (min-width:600px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
  .singers-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:900px){
  body{padding-bottom:0}
  .bottom{display:none}
  .top-nav{display:flex}
  .top{padding-inline:max(var(--gutter),calc((100% - var(--wide))/2 + var(--gutter)))}
  .hero-in{padding-bottom:58px}
  .hero-verse{text-align:center}
  .hero-verse.bayt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:.9em}
  .hero-verse.bayt>span:first-child{justify-self:end;text-align:left}
  .hero-verse.bayt>span:last-child{justify-self:start;text-align:right}
  .hero-meta{justify-content:center}
  .tile b{font-size:1.875rem}
  .tile{padding:20px}
  .home-tiles{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .singers-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .singers-rail{grid-auto-columns:150px}
  .rail-btn{display:flex;align-items:center;justify-content:center;position:absolute;top:calc(50% - 40px);z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:0 2px 10px rgba(7,13,36,.25);cursor:pointer;font-size:1.25rem}
  .rail-btn.prev{right:-10px}
  .rail-btn.next{left:-10px}
  .banner .arch{width:124px}
  .banner h1{font-size:3.25rem}
  .track{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:36px;padding:26px var(--gutter)}
  .track-main{display:block;position:sticky;top:18px;align-self:start}
  .player{position:static;border-radius:8px;overflow:hidden}
  .track-head,.side{padding-inline:0}
  .lyrics{padding:0}
}
/* «فيديو أكبر» on a computer: the video takes the full width, the words go under it */
@media (min-width:900px){
  .track.theater{display:block;max-width:1560px}
  .theater .track-main{position:static}
  .theater .player{max-width:calc((100svh - 96px)*16/9);margin-inline:auto}
  .theater .track-rest:has(.lyrics){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:36px;align-items:start}
  .theater .track-rest{margin-top:24px}
  .theater .side{padding-top:0}
  .theater .track-rest:not(:has(.lyrics)) .side .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .hero-verse span{animation:none}
  .thumb img{transition:none}
}