/* الأعمال الكاملة للشاعر سليمان العشري — stylesheet */
@font-face{font-family:"Amiri";src:url(../fonts/Amiri-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Amiri";src:url(../fonts/Amiri-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Aref Ruqaa";src:url(../fonts/ArefRuqaa-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Aref Ruqaa";src:url(../fonts/ArefRuqaa-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Reem Kufi";src:url(../fonts/ReemKufi-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Reem Kufi";src:url(../fonts/ReemKufi-Medium.woff) format("woff");font-weight:500;font-display:swap}

:root{
  --parch:#f6efe0; --paper:#fcf8f0; --card:#fffcf5;
  --ink:#2b1d14; --ink-soft:#5b4636; --muted:#8a7560;
  --gold:#b08a3e; --gold-l:#d6b46c; --gold-d:#8a6a2c;
  --lapis:#1d3557; --lapis-d:#132540; --lapis-l:#2a4a75;
  --line:rgba(176,138,62,.45);
  --verse:1.32rem;
  --f-text:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
  --f-display:"Aref Ruqaa","Amiri",serif;
  --f-label:"Reem Kufi","Amiri",sans-serif;
  --shadow:0 1px 2px rgba(43,29,20,.06),0 8px 28px -12px rgba(43,29,20,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-text);color:var(--ink);background:var(--parch);
  background-image:url(../img/lattice-faint.svg);background-size:72px 72px;
  font-size:1.125rem;line-height:1.9;text-rendering:optimizeLegibility}
a{color:var(--lapis);text-decoration-color:var(--gold-l);text-underline-offset:.25em}
a:hover{color:var(--gold-d)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
img{max-width:100%}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--lapis);color:#fff;padding:.5rem 1rem;z-index:20}
.skip:focus{inset-inline-start:1rem}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:10;background:rgba(19,37,64,.96);backdrop-filter:blur(6px);
  color:#efe3c8;border-bottom:1px solid rgba(214,180,108,.35)}
.topbar .in{max-width:1180px;margin:0 auto;padding:.55rem 1.25rem;display:flex;align-items:center;gap:1rem;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.6rem;color:#f3e7cb;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.3rem;line-height:1.2}
.brand img{width:30px;height:30px}
.brand:hover{color:#fff}
.nav{display:flex;gap:.25rem;flex-wrap:wrap}
.nav a{color:#e6d6b2;text-decoration:none;font-family:var(--f-text);font-size:1.05rem;padding:.3rem .75rem;border-radius:999px}
.nav a:hover,.nav a[aria-current=page]{background:rgba(214,180,108,.16);color:#fff}

/* ---------- bands & ornaments ---------- */
.band{height:16px;background:url(../img/band.svg) repeat-x center/auto 16px}
.band.dark{background-image:url(../img/band-dark.svg)}
.divider{display:block;width:min(320px,70%);height:28px;margin:.4rem auto 1.4rem;background:url(../img/divider.svg) no-repeat center/contain}
.section-title{text-align:center;margin:0}
.section-title .label{display:block;font-family:var(--f-label);color:var(--gold-d);font-size:1rem;letter-spacing:0}
.section-title h2{font-family:var(--f-display);font-weight:700;color:var(--lapis);font-size:clamp(2rem,4.5vw,2.8rem);line-height:1.35;margin:.1rem 0 0}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--lapis) url(../img/lattice-strap.svg) repeat center/96px 96px;
  padding:clamp(2.2rem,6vw,4.5rem) 1.25rem clamp(2.6rem,6vw,4.5rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:14px;border:1px solid rgba(214,180,108,.55);outline:1px solid rgba(214,180,108,.25);outline-offset:4px;pointer-events:none}
.hero .corner{position:absolute;width:34px;height:34px;background:url(../img/rosette.svg) no-repeat center/contain;z-index:1}
.hero .corner.tl{top:-3px;left:-3px}.hero .corner.tr{top:-3px;right:-3px}.hero .corner.bl{bottom:-3px;left:-3px}.hero .corner.br{bottom:-3px;right:-3px}
.arch-wrap{position:relative;max-width:560px;margin:0 auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.arch-cap{position:relative;aspect-ratio:560/250;background:url(../img/arch-cap.svg) no-repeat center bottom/100% 100%;margin-bottom:-1px}
.arch-cap .shamsa{position:absolute;left:50%;top:58%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:url(../img/shamsa.svg) no-repeat center/contain;animation:turn 150s linear infinite}
@keyframes turn{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.arch-cap .shamsa{animation:none}}
.arch{position:relative;text-align:center;background:var(--paper);border:3px solid var(--gold);border-top:0;
  padding:.4rem clamp(1.2rem,5vw,3rem) 2.2rem}
.arch::before{content:"";position:absolute;left:1.6%;right:1.6%;top:0;bottom:8px;border:1px solid var(--gold);border-top:0;pointer-events:none}
.hero .kicker{font-family:var(--f-text);color:var(--gold-d);font-size:1.2rem;margin:0}
.hero h1{font-family:var(--f-display);font-weight:700;color:var(--lapis);font-size:clamp(3rem,10vw,5.2rem);line-height:1.25;margin:.2rem 0 .1rem}
.hero .rahimahu{font-family:var(--f-text);color:var(--muted);font-size:1.05rem;margin:0}
.portrait{position:relative;width:min(230px,62%);aspect-ratio:38/50;margin:1.3rem auto .4rem}
.portrait .frame{position:absolute;inset:0;background:url(../img/portrait-frame.svg) no-repeat center/100% 100%}
.portrait .img{position:absolute;inset:4.4% 5.8%;background:url(../img/portrait-ink.png) no-repeat 50% 100%/100% auto;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMy42IDQ1LjYiIHdpZHRoPSIzMzYiIGhlaWdodD0iNDU2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCw0NS42IEwwLDE2LjQyIEMwLDcuMzkgMTIuMSwyLjk1IDE2LjgsMCBDMjEuNSwyLjk1IDMzLjYsNy4zOSAzMy42LDE2LjQyIEwzMy42LDQ1LjZaIiBmaWxsPSIjMDAwIi8+PC9zdmc+") no-repeat center/100% 100%;mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMy42IDQ1LjYiIHdpZHRoPSIzMzYiIGhlaWdodD0iNDU2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCw0NS42IEwwLDE2LjQyIEMwLDcuMzkgMTIuMSwyLjk1IDE2LjgsMCBDMjEuNSwyLjk1IDMzLjYsNy4zOSAzMy42LDE2LjQyIEwzMy42LDQ1LjZaIiBmaWxsPSIjMDAwIi8+PC9zdmc+") no-repeat center/100% 100%}
.stats{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1rem 0 0;padding:0;list-style:none}
.stats li{font-family:var(--f-text);font-size:1.05rem!important;color:var(--lapis);background:rgba(176,138,62,.1);border:1px solid var(--line);border-radius:999px;padding:.2rem .95rem;font-size:.98rem}
.stats b{font-family:var(--f-text);font-weight:700;color:var(--gold-d);margin-inline-end:.2rem}
.hero .cta{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-text);font-weight:700;font-size:1.05rem;line-height:1.2;
  padding:.62rem 1.15rem;border-radius:999px;text-decoration:none;border:1px solid var(--gold);cursor:pointer;transition:.18s ease;background:none}
.btn svg{width:18px;height:18px;flex:none}
.btn.primary{background:var(--lapis);color:#f6ead0;border-color:var(--lapis)}
.btn.primary:hover{background:var(--lapis-l);color:#fff}
.btn.ghost{color:var(--lapis);background:rgba(255,255,255,.5)}
.btn.ghost:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn.small{font-size:.92rem;padding:.42rem .9rem}

/* ---------- main sections ---------- */
main{display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.section{padding:clamp(2.5rem,6vw,4.2rem) 0}
.intro{max-width:720px;margin:0 auto;text-align:center;font-size:1.2rem;color:var(--ink-soft)}

/* ---------- diwan cards ---------- */
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:2.6rem 1.6rem;margin-top:1.4rem}
.grid>.card{flex:0 1 268px}
.card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:3.3rem 1.3rem 1.4rem;background:var(--card);border:1px solid var(--line);
  border-radius:120px 120px 10px 10px / 70px 70px 10px 10px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(176,138,62,.28);border-radius:inherit;pointer-events:none}
.card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(43,29,20,.08),0 20px 36px -16px rgba(29,53,87,.4)}
.card .medal{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:56px;height:56px;
  background:url(../img/medal.svg) no-repeat center/contain;display:grid;place-items:center;
  font-family:var(--f-label);font-weight:500;color:#f3e3bd;font-size:1.15rem;line-height:1;padding-top:2px}
.card .label{font-family:var(--f-label);color:var(--gold-d);font-size:.95rem}
.card h3{font-family:var(--f-display);font-weight:700;color:var(--lapis);font-size:1.95rem;line-height:1.35;margin:.15rem 0 .1rem}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card .meta{color:var(--muted);font-size:1rem;margin:0 0 .9rem}
.card .first{font-size:1.02rem;color:var(--ink-soft);margin:0 0 1rem;min-height:3.6em;line-height:1.8;
  border-top:1px solid rgba(176,138,62,.25);border-bottom:1px solid rgba(176,138,62,.25);padding:.5rem .2rem;width:100%}
.card .actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:auto;position:relative;z-index:1}

/* ---------- search ---------- */
.search-box{max-width:680px;margin:0 auto;position:relative}
.search-box input{width:100%;font-family:var(--f-text);font-size:1.2rem;padding:.85rem 3.2rem .85rem 1.1rem;border-radius:999px;
  border:1px solid var(--gold);background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.search-box input:focus{outline:none;border-color:var(--lapis);box-shadow:0 0 0 3px rgba(176,138,62,.25)}
.search-box .ico{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--gold-d)}
.search-meta{text-align:center;color:var(--muted);font-family:var(--f-text);font-size:1.05rem;min-height:1.6em;margin:.8rem 0 .3rem}
.results{list-style:none;margin:0 auto;padding:0;max-width:820px;display:grid;gap:.7rem}
.results li a{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem 1.1rem;color:var(--ink);transition:.15s}
.results li a:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.results .rt{font-family:var(--f-display);font-weight:700;color:var(--lapis);font-size:1.3rem;line-height:1.4}
.results .rd{font-family:var(--f-text);color:var(--gold-d);font-size:.98rem;margin-inline-start:.5rem}
.results .rl{display:block;color:var(--ink-soft);font-size:1.08rem;line-height:1.8}
.results mark{background:rgba(214,180,108,.38);color:inherit;border-radius:3px;padding:0 .1em}

/* ---------- footer ---------- */
footer{background:var(--lapis) url(../img/lattice-strap.svg) repeat center/96px 96px;color:#d9c9a6;text-align:center;padding:2.4rem 1.25rem 2rem;margin-top:2rem}
footer .name{font-family:var(--f-display);font-weight:700;font-size:1.7rem;color:#f2e4c2;margin:.4rem 0 .2rem}
footer p{margin:.2rem 0;font-size:1rem}
footer a{color:#f0dcae}
footer .shamsa-s{width:58px;height:58px;margin:0 auto;background:url(../img/shamsa-dark.svg) no-repeat center/contain}

/* ---------- diwan page ---------- */
.dhead{background:var(--lapis) url(../img/lattice-strap.svg) repeat center/96px 96px;padding:2.4rem 1.25rem 2.6rem;text-align:center;position:relative}
.dhead .cart{position:relative;display:inline-block;padding:1.1rem 4.2rem 1.3rem;margin:.2rem auto 0;min-width:min(520px,92%)}
.dhead .cart::before{content:"";position:absolute;inset:0;background:url(../img/cartouche-lg.svg) no-repeat center/100% 100%}
.dhead .cart>*{position:relative}
.dhead .label{font-family:var(--f-label);color:var(--gold-d);font-size:1rem;display:block;line-height:1.4}
.dhead h1{font-family:var(--f-display);font-weight:700;color:var(--lapis);font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.3;margin:0}
.dhead .meta{color:#e8d8b4;font-family:var(--f-text);margin:1rem 0 .8rem;font-size:1.15rem}
.dhead .btn.primary{background:var(--gold);border-color:var(--gold);color:#fff}
.dhead .btn.primary:hover{background:#c69c4b;color:#fff}
.dhead .actions{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.dhead .btn.ghost{background:rgba(252,248,240,.92)}
.reader{display:grid;grid-template-columns:290px minmax(0,1fr);gap:2rem;align-items:start;padding:2.2rem 0 1rem}
.toc{position:sticky;top:68px;max-height:calc(100vh - 88px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem .6rem 1rem .9rem;box-shadow:var(--shadow);scrollbar-width:thin}
.toc h2{font-family:var(--f-display);font-weight:700;color:var(--lapis);font-size:1.5rem;text-align:center;margin:0 0 .4rem}
.toc input{width:100%;font-family:var(--f-text);font-size:1rem;border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;background:var(--paper);margin-bottom:.5rem}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li a{display:flex;gap:.55rem;align-items:baseline;text-decoration:none;color:var(--ink);padding:.18rem .45rem;border-radius:8px;line-height:1.6;font-size:1.04rem}
.toc li a:hover{background:rgba(176,138,62,.12)}
.toc li a.on{background:var(--lapis);color:#f6ead0}
.toc li a.on .n{color:var(--gold-l)}
.toc .n{font-family:var(--f-label);color:var(--gold-d);font-size:.82rem;min-width:1.6rem;text-align:center;flex:none}
.tools{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:1.2rem;flex-wrap:wrap}
.tools .grp{display:flex;gap:.35rem;align-items:center;font-family:var(--f-text);color:var(--muted);font-size:1.05rem}
.tools button{font-family:var(--f-text);font-size:1rem;width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--lapis);cursor:pointer}
.tools button:hover{border-color:var(--gold);background:#fff}
.poems{display:grid;gap:2rem}
.poem{position:relative;background:var(--card);border:1px solid var(--gold);border-radius:4px;padding:clamp(1.6rem,4vw,2.6rem) clamp(1rem,4vw,2.6rem) 2rem;box-shadow:var(--shadow);scroll-margin-top:80px}
.poem::before{content:"";position:absolute;inset:5px;border:1px solid rgba(176,138,62,.5);pointer-events:none}
.poem::after{content:"";position:absolute;inset:9px;border:1px solid rgba(29,53,87,.18);pointer-events:none}
.poem .rz{position:absolute;width:22px;height:22px;background:url(../img/rosette.svg) no-repeat center/contain;z-index:1}
.poem .rz.a{top:-6px;right:-6px}.poem .rz.b{top:-6px;left:-6px}.poem .rz.c{bottom:-6px;right:-6px}.poem .rz.d{bottom:-6px;left:-6px}
.poem header{text-align:center;margin-bottom:.4rem}
.poem .pn{display:block;font-family:var(--f-text);color:var(--gold-d);font-size:1rem}
.poem h2{position:relative;display:inline-block;font-family:var(--f-display);font-weight:700;color:var(--lapis);font-size:clamp(1.5rem,3.6vw,2rem);line-height:1.5;
  margin:.1rem auto 0;padding:.55rem 3.4rem .8rem;min-width:min(380px,100%)}
.poem h2::before{content:"";position:absolute;inset:0;background:url(../img/cartouche.svg) no-repeat center/100% 100%;z-index:-1}
.poem h2{z-index:0}
.poem .divider{margin:.5rem auto 1.1rem;width:min(240px,60%);height:22px}
.verses{font-size:var(--verse);line-height:2.15;text-align:center}
.st{margin:0}
.st+.st{margin-top:.2rem}
.st+.st::before{content:"";display:block;width:14px;height:14px;margin:.55rem auto .7rem;background:url(../img/star.svg) no-repeat center/contain;opacity:.8}
.verses p{margin:0}
.verses .note{font-size:.82em;color:var(--gold-d);font-family:var(--f-text)}
.verses .num{display:block;font-family:var(--f-label);color:var(--lapis);font-size:1.05em}
.prose .verses{text-align:justify;line-height:2}
.prose .st{text-indent:1.4em;margin-bottom:.8rem}
.prose .st+.st::before{display:none}
.poem .foot{display:flex;justify-content:space-between;margin-top:1.4rem;font-family:var(--f-text);font-size:1rem}
.poem .foot a{text-decoration:none;color:var(--muted)}
.poem .foot a:hover{color:var(--gold-d)}
.pager{display:flex;justify-content:space-between;gap:1rem;margin:2.4rem 0 0;flex-wrap:wrap}
.pager a{flex:1;min-width:220px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem 1.2rem;box-shadow:var(--shadow)}
.pager a:hover{border-color:var(--gold)}
.pager small{display:block;font-family:var(--f-text);color:var(--muted)}
.pager b{font-family:var(--f-display);color:var(--lapis);font-size:1.45rem;font-weight:700}
.pager .next{text-align:left}
.totop{position:fixed;left:1.1rem;bottom:1.1rem;width:46px;height:46px;border-radius:50%;background:var(--lapis);border:1px solid var(--gold);
  display:grid;place-items:center;color:var(--gold-l);text-decoration:none;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:9}
.totop.show{opacity:1;pointer-events:auto}
.totop svg{width:20px;height:20px}
.toc-mobile{display:none}

@media (max-width:900px){
  .reader{grid-template-columns:1fr}
  .toc{display:none}
  .toc-mobile{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:1.2rem;box-shadow:var(--shadow)}
  .toc-mobile summary{cursor:pointer;padding:.7rem 1rem;font-family:var(--f-display);font-weight:700;color:var(--lapis);font-size:1.3rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
  .toc-mobile summary::-webkit-details-marker{display:none}
  .toc-mobile summary::after{content:"";width:14px;height:14px;background:url(../img/star.svg) no-repeat center/contain;transition:.2s}
  .toc-mobile[open] summary::after{transform:rotate(45deg)}
  .toc-mobile ol{list-style:none;margin:0;padding:0 .6rem .8rem;columns:2;column-gap:1rem}
  .toc-mobile li a{display:block;padding:.15rem .3rem;text-decoration:none;color:var(--ink);font-size:1rem;break-inside:avoid}
  .toc-mobile .n{display:inline-block;min-width:1.6rem;font-family:var(--f-label);color:var(--gold-d);font-size:.85rem;text-align:center}
  .topbar .brand span{font-size:1.1rem}
}
@media (max-width:560px){
  .nav a{padding:.25rem .5rem;font-size:.9rem}
  .brand span{display:none}
  .toc-mobile ol{columns:1}
  .poem h2{padding:.5rem 2.4rem .7rem}
  .dhead .cart{padding:1rem 2.6rem 1.2rem}
}
@media print{
  .topbar,.toc,.toc-mobile,.tools,.pager,.totop,footer,.dhead .actions{display:none!important}
  body{background:#fff}
  .poem{break-inside:avoid-page;box-shadow:none}
}