/* =========================================================================
   Muslim Portal — muslimportal.net
   Design system: "The Illuminated Broadsheet"
   Palette: deep emerald + illumination gold + manuscript ivory
   Type: Amiri (display) · Spectral (body) · Inter (labels/UI)
   ========================================================================= */

:root{
  --paper:      #FBF8F1;
  --paper-2:    #F3ECDC;
  --paper-3:    #EFE6D2;
  --ink:        #211E17;
  --ink-soft:   #5C5343;
  --ink-faint:  #8A7F68;
  --emerald:    #0B322D;
  --emerald-2:  #0E3E37;
  --emerald-3:  #072320;
  --gold:       #B0842B;
  --gold-2:     #97701F;
  --gold-bright:#D8B25A;
  --gold-soft:  #E4D9BF;
  --rule:       #E4D9BF;
  --display: "Amiri", Georgia, "Times New Roman", serif;
  --body:    "Spectral", Georgia, serif;
  --ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 46px);
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.65;
  font-weight:400; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.1em; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.kicker{
  font-family:var(--ui); font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2);
}
.kicker--light{ color:var(--gold-bright); }
.meta{
  font-family:var(--ui); font-size:12.5px; color:var(--ink-faint);
  letter-spacing:.02em;
}

/* Topbar */
.topbar{
  background:var(--emerald-3); color:#CDBE92;
  font-family:var(--ui); font-size:12px; letter-spacing:.04em;
  border-bottom:1px solid rgba(216,178,90,.18);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:38px; }
.topbar__date{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar__date .dot{ width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.6; }
.topbar__links{ display:flex; gap:18px; }
.topbar__links a{ color:#CDBE92; transition:color .2s; }
.topbar__links a:hover{ color:var(--gold-bright); }
@media (max-width:640px){ .topbar__links{ display:none; } }

/* Masthead (hidden — logo lives in nav) */
.masthead{ display:none; }

/* Navigation */
.nav{
  position:sticky; top:0; z-index:40;
  background:var(--emerald); border-bottom:1px solid rgba(216,178,90,.18);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; }
.nav__brand{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-size:20px; color:var(--gold-bright); }
.nav__brand img{ height:26px; }
.nav__list{ display:flex; flex-wrap:wrap; gap:2px; list-style:none; margin:0; padding:0; }
.nav__list a,
.nav__list > li > a{
  font-family:var(--ui); font-weight:600; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.75); padding:9px 13px; position:relative;
  transition:color .2s; display:block;
}
.nav__list a::after,
.nav__list > li > a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
  background:var(--gold-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav__list a:hover,
.nav__list a[aria-current="page"],
.nav__list .current-menu-item > a{ color:var(--gold-bright); }
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after,
.nav__list .current-menu-item > a::after{ transform:scaleX(1); }
.nav__search{
  font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.05em;
  color:rgba(255,255,255,.65); border:1px solid rgba(216,178,90,.3); border-radius:100px;
  padding:7px 15px 7px 12px; display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.07); transition:border-color .2s, color .2s;
}
.nav__search:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
.nav__search svg{ width:13px; height:13px; }
@media (max-width:820px){
  .nav__inner{ flex-wrap:wrap; }
  .nav__brand{ display:flex; }
  .nav__list{ order:3; width:100%; overflow-x:auto; flex-wrap:nowrap;
    border-top:1px solid rgba(216,178,90,.15); padding-block:3px; -webkit-overflow-scrolling:touch; }
  .nav__list a,.nav__list > li > a{ white-space:nowrap; }
  .nav__search{ display:none; }
}

/* Admin bar offset */
.admin-bar .nav{ top:32px; }
@media (max-width:782px){ .admin-bar .nav{ top:46px; } }

/* Sections */
.section{ padding-block:clamp(34px,5vw,58px); }
.section--tint{ background:var(--paper-2); border-block:1px solid var(--rule); }
.section__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:22px; padding-bottom:12px; border-bottom:2px solid var(--emerald);
}
.section__title{
  font-family:var(--display); font-weight:700; font-size:clamp(24px,3vw,30px);
  color:var(--emerald); letter-spacing:.005em;
}
.section__more{ font-family:var(--ui); font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-2); white-space:nowrap; }
.section__more:hover{ color:var(--gold); }

.divider{ display:block; width:min(420px,72%); margin:34px auto; opacity:.85; }

.tag{
  font-family:var(--ui); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-2);
  display:inline-flex; align-items:center; gap:7px;
}
.tag::before{ content:""; width:13px; height:13px; flex:none;
  background:url("../img/star.svg") center/contain no-repeat; }

/* Lead */
.lead{
  display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(24px,3.5vw,52px);
  align-items:start;
}
.lead__main{ animation:rise .8s .1s both; }
.lead__figure{
  position:relative; border:1px solid var(--gold-soft); border-radius:var(--radius);
  overflow:hidden; margin-bottom:20px; box-shadow:0 18px 40px -26px rgba(11,50,45,.5);
}
.lead__figure img{ width:100%; aspect-ratio:8/5; object-fit:cover; }
.lead__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(31px,4.4vw,50px); line-height:1.08; color:var(--emerald);
  letter-spacing:-.01em; margin:14px 0 12px;
}
.lead__title a:hover{ color:var(--gold-2); }
.lead__dek{ font-size:clamp(18px,1.5vw,21px); color:#3a3527; max-width:44ch; }
.byline{ font-family:var(--ui); font-size:12.5px; color:var(--ink-soft); margin-top:14px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.byline strong{ color:var(--ink); font-weight:600; }
.byline .sep{ width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.7; }

.rail{ border-left:1px solid var(--rule); padding-left:clamp(18px,2vw,28px); }
.rail__head{
  font-family:var(--ui); font-weight:700; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-2); margin-bottom:6px;
}
.rail__item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--rule); }
.rail__item:last-child{ border-bottom:0; }
.rail__num{
  font-family:var(--display); font-weight:700; font-size:26px; color:var(--gold-soft);
  line-height:1; flex:none; width:26px; text-align:center;
}
.rail__item:hover .rail__num{ color:var(--gold); }
.rail__title{ font-family:var(--display); font-weight:700; font-size:19px; line-height:1.24;
  color:var(--emerald); }
.rail__item:hover .rail__title{ color:var(--gold-2); }
.rail__meta{ margin-top:5px; }
@media (max-width:900px){
  .lead{ grid-template-columns:1fr; }
  .rail{ border-left:0; padding-left:0; border-top:2px solid var(--emerald); padding-top:8px; }
}

/* Cards */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.card{ display:flex; flex-direction:column; }
.card__figure{
  border:1px solid var(--gold-soft); border-radius:var(--radius); overflow:hidden;
  margin-bottom:14px; background:var(--emerald);
}
.card__figure img{ width:100%; aspect-ratio:8/5; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__figure img{ transform:scale(1.045); }
.card__title{
  font-family:var(--display); font-weight:700; font-size:clamp(20px,1.8vw,23px);
  line-height:1.2; color:var(--emerald); margin:9px 0 8px;
}
.card:hover .card__title{ color:var(--gold-2); }
.card__dek{ font-size:15.5px; color:var(--ink-soft); margin-bottom:12px; }
.card__meta{ margin-top:auto; }
@media (max-width:820px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid,.grid--2{ grid-template-columns:1fr; } }

/* List */
.list__item{ display:grid; grid-template-columns:120px 1fr; gap:16px; padding:18px 0;
  border-bottom:1px solid var(--rule); align-items:center; }
.list__item img{ width:120px; aspect-ratio:8/6; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--gold-soft); }
.list__title{ font-family:var(--display); font-weight:700; font-size:21px; color:var(--emerald); line-height:1.22; }
.list__item:hover .list__title{ color:var(--gold-2); }
@media (max-width:520px){ .list__item{ grid-template-columns:88px 1fr; } .list__item img{ width:88px; } }

/* Band */
.band{ background:var(--emerald); color:var(--paper); position:relative; overflow:hidden; }
.band::before{
  content:""; position:absolute; inset:0;
  background:url("../img/pattern-gold.svg"); background-size:150px; opacity:.06;
}
.band .wrap{ position:relative; }
.band__grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(26px,4vw,56px); align-items:center; }
.band__eyebrow{ margin-bottom:14px; }
.band__title{ font-family:var(--display); font-weight:700; font-size:clamp(26px,3.4vw,40px);
  line-height:1.14; color:#fff; margin-bottom:14px; }
.band__body{ color:#D9D2BF; font-size:18px; max-width:46ch; }
.band__cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-family:var(--ui); font-weight:600; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--emerald); background:var(--gold-bright);
  padding:12px 22px; border-radius:100px; transition:transform .2s, background .2s;
}
.band__cta:hover{ background:#e6c579; transform:translateY(-2px); }
.ayah{ border-left:3px solid var(--gold-bright); padding:6px 0 6px 26px; }
.ayah__arabic{ font-family:var(--display); font-size:clamp(26px,3vw,34px); color:var(--gold-bright);
  line-height:1.6; direction:rtl; margin-bottom:14px; }
.ayah__en{ font-family:var(--body); font-style:italic; font-size:19px; color:#EDE7D6; margin-bottom:8px; }
.ayah__ref{ font-family:var(--ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright); }
@media (max-width:820px){ .band__grid{ grid-template-columns:1fr; } }

/* Newsletter */
.subscribe{ text-align:center; }
.subscribe__title{ font-family:var(--display); font-weight:700; font-size:clamp(24px,3vw,34px);
  color:var(--emerald); margin-bottom:8px; }
.subscribe__body{ color:var(--ink-soft); max-width:52ch; margin:0 auto 22px; }
.subscribe__form{ display:flex; gap:10px; max-width:480px; margin:0 auto; }
.subscribe__form input{
  flex:1; font-family:var(--ui); font-size:15px; padding:13px 16px;
  border:1px solid var(--gold-soft); border-radius:100px; background:var(--paper);
  color:var(--ink);
}
.subscribe__form input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.subscribe__form button{
  font-family:var(--ui); font-weight:700; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--paper); background:var(--emerald);
  border:0; border-radius:100px; padding:0 26px; cursor:pointer;
  transition:background .2s;
}
.subscribe__form button:hover{ background:var(--emerald-2); }
@media (max-width:520px){ .subscribe__form{ flex-direction:column; } .subscribe__form button{ padding:13px; } }

/* Article */
.article{ max-width:760px; margin-inline:auto; }
.article__head{ text-align:center; padding-top:clamp(24px,4vw,44px); }
.article__cat{ margin-bottom:16px; }
.article__title{
  font-family:var(--display); font-weight:700; color:var(--emerald);
  font-size:clamp(30px,4.6vw,52px); line-height:1.1; letter-spacing:-.01em; margin-bottom:16px;
}
.article__dek{ font-size:clamp(19px,1.6vw,22px); color:#3a3527; max-width:40ch; margin:0 auto 20px; }
.article__byline{ font-family:var(--ui); font-size:13px; color:var(--ink-soft);
  display:flex; justify-content:center; align-items:center; gap:11px; flex-wrap:wrap; }
.article__byline strong{ color:var(--ink); }
.article__byline .sep{ width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.7; }
.article__hero{ margin:30px 0; border:1px solid var(--gold-soft); border-radius:var(--radius); overflow:hidden; }
.article__hero img{ width:100%; aspect-ratio:16/8; object-fit:cover; }
.article__hero figcaption{ font-family:var(--ui); font-size:12px; color:var(--ink-faint);
  padding:9px 14px; background:var(--paper-2); border-top:1px solid var(--rule); }

.prose{ font-size:19px; line-height:1.78; color:#2b271e; }
.prose > p:first-of-type::first-letter{
  font-family:var(--display); font-weight:700; float:left; font-size:4.1em;
  line-height:.82; padding:6px 12px 0 0; color:var(--gold-2);
}
.prose h2{ font-family:var(--display); font-weight:700; font-size:clamp(23px,2.4vw,29px);
  color:var(--emerald); margin:1.6em 0 .5em; }
.prose h3{ font-family:var(--ui); font-weight:700; font-size:15px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-2); margin:1.7em 0 .4em; }
.prose a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--gold-soft); }
.prose a:hover{ text-decoration-color:var(--gold); }
.prose blockquote{
  margin:1.6em 0; padding:6px 0 6px 26px; border-left:3px solid var(--gold);
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(22px,2.4vw,28px); line-height:1.4; color:var(--emerald);
}
.prose hr{ border:0; height:26px; background:url("../img/divider.svg") center/contain no-repeat;
  margin:2em 0; }
.prose ul.dotted{ margin:1em 0 1.2em; }
.prose ul.dotted li{ position:relative; padding-left:26px; margin-bottom:.5em; }
.prose ul.dotted li::before{ content:""; position:absolute; left:0; top:.55em; width:12px; height:12px;
  background:url("../img/star.svg") center/contain no-repeat; }

.article__foot{ margin-top:40px; padding-top:20px; border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.share{ display:flex; gap:9px; }
.share a{ width:36px; height:36px; border:1px solid var(--rule); border-radius:50%;
  display:grid; place-items:center; color:var(--emerald); transition:.2s; }
.share a:hover{ background:var(--emerald); color:var(--gold-bright); border-color:var(--emerald); }
.share svg{ width:15px; height:15px; }

/* Pagehead */
.pagehead{ background:var(--emerald); color:var(--paper); text-align:center;
  padding:clamp(34px,5vw,60px) var(--gutter); position:relative; overflow:hidden; }
.pagehead::before{ content:""; position:absolute; inset:0;
  background:url("../img/pattern-gold.svg"); background-size:150px; opacity:.06; }
.pagehead__inner{ position:relative; }
.pagehead__eyebrow{ margin-bottom:12px; }
.pagehead__title{ font-family:var(--display); font-weight:700; color:#fff;
  font-size:clamp(30px,4.5vw,50px); line-height:1.08; }
.pagehead__sub{ color:#D9D2BF; margin-top:12px; font-size:18px; max-width:56ch; margin-inline:auto; }

/* Opinion */
.op-featured{ text-align:center; padding:clamp(36px,5vw,60px) 0; }
.op-featured__byline{ font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-2); margin-bottom:16px; }
.op-featured__title{ font-family:var(--display); font-weight:700; color:var(--emerald);
  font-size:clamp(34px,5vw,58px); line-height:1.06; letter-spacing:-.01em; margin-bottom:18px; }
.op-featured__dek{ font-size:clamp(18px,1.5vw,21px); color:#3a3527;
  max-width:42ch; margin:0 auto 24px; font-style:italic; }
.op-featured__read{ font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-2); border-bottom:1px solid var(--gold-soft);
  padding-bottom:2px; transition:color .2s, border-color .2s; }
.op-featured__read:hover{ color:var(--gold); border-color:var(--gold); }
.op-featured__rule{ width:60px; height:3px; background:var(--gold); border:0; margin:0 auto 28px; }
.op-card{ border-top:1px solid var(--rule); padding:24px 0 18px; display:flex; flex-direction:column; }
.op-card__author{ font-family:var(--ui); font-weight:700; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold-2); margin-bottom:8px; }
.op-card__title{ font-family:var(--display); font-weight:700; font-size:clamp(20px,1.8vw,24px);
  line-height:1.22; color:var(--emerald); margin-bottom:10px; }
.op-card:hover .op-card__title{ color:var(--gold-2); }
.op-card__dek{ font-size:15.5px; color:var(--ink-soft); flex:1; }
.op-card__meta{ font-family:var(--ui); font-size:12px; color:var(--ink-faint); margin-top:10px; }

/* Region tabs */
.region-tabs{ display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-bottom:2px solid var(--rule); margin-bottom:32px; }
.region-tabs a{ font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); padding:10px 18px;
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .2s, border-color .2s; margin-bottom:-2px; }
.region-tabs a:hover{ color:var(--emerald); }
.region-tabs a.active{ color:var(--emerald); border-bottom-color:var(--emerald); }

/* Footer */
.footer{ background:var(--emerald-3); color:#C6B89A; padding-block:48px 26px; position:relative; }
.footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:34px;
  border-bottom:1px solid rgba(216,178,90,.16); }
.footer__brand img{ width:190px; margin-bottom:14px; }
.footer__brand p{ font-size:14.5px; color:#B7A981; max-width:34ch; }
.footer__col h4{ font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-bright); margin-bottom:14px; }
.footer__col a{ display:block; font-family:var(--ui); font-size:14px; padding:5px 0; color:#C6B89A; transition:color .2s; }
.footer__col a:hover{ color:var(--gold-bright); }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:22px; font-family:var(--ui); font-size:12.5px; color:#9C8F6C; flex-wrap:wrap; }
.footer__bottom a{ color:#9C8F6C; }
.footer__bottom a:hover{ color:var(--gold-bright); }
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer__top{ grid-template-columns:1fr; } }

/* WordPress: pagination */
.page-numbers{ font-family:var(--ui); font-size:13px; }
.nav-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.nav-links a,.nav-links span{ font-family:var(--ui); font-size:13px; font-weight:600;
  padding:8px 14px; border:1px solid var(--rule); border-radius:var(--radius);
  color:var(--ink-soft); transition:color .2s, border-color .2s; }
.nav-links .current{ color:var(--emerald); border-color:var(--emerald); }
.nav-links a:hover{ color:var(--gold-2); border-color:var(--gold-2); }

/* WordPress: alignment */
.alignleft{ float:left; margin:0 1.5em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.5em; }
.aligncenter{ margin-inline:auto; display:block; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-family:var(--ui); font-size:12px; color:var(--ink-faint); margin-top:6px; }

/* Screen reader */
.screen-reader-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Motion */
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:.9; } }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:2px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}