:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* light mode colours */
  --bg:#f8faf6; --paper:#ffffff; --ink:#10302a; --muted:#4f645c;
  --em:#0d4a40; --em-deep:#06291f; --gold:#8a6a1d; --gold-b:#d9b45a;
  --line:rgba(16,48,42,.12); --tint:rgba(217,180,90,.2); --bar:rgba(248,250,246,.92);
  --hero-bg:linear-gradient(170deg,#e2eee7 0%,#f1f6f0 58%,#f8faf6 100%);
  --hero-ink:#0c3a31; --hero-gold:#8a6a1d; --sky:#bcd5c7;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%230d4a40' stroke-opacity='.13'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E");
  --logo-bg:transparent; --logo-pad:0px; --logo-ring:transparent;
  --card-shadow:0 1px 2px rgba(16,48,42,.05),0 8px 24px rgba(16,48,42,.06);
}
:root[data-theme="dark"]{
  --bg:#071c17; --paper:#0d2b25; --ink:#ece6d3; --muted:#9db3aa;
  --gold:#d9b45a; --line:rgba(217,180,90,.18); --tint:rgba(217,180,90,.14); --bar:rgba(7,28,23,.9);
  --hero-bg:linear-gradient(165deg,#06291f,#0d4a40 62%,#0a3a32);
  --hero-ink:#f4ecd6; --hero-gold:#d9b45a; --sky:#071c17;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-opacity='.22'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E");
  --logo-bg:transparent; --logo-pad:0px; --logo-ring:transparent;
  --card-shadow:none;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);font-size:clamp(16px,calc(16px + (100vw - 1400px) * 0.0045),22px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Amiri','Cormorant Garamond',Georgia,serif;font-weight:700;line-height:1.15;margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold-b);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.wrap{width:min(78rem,100% - 2.5rem);margin-inline:auto}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;border-bottom:1px solid var(--line)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand .logo{width:46px;height:46px;flex:none;border-radius:50%;background:var(--logo-bg);padding:var(--logo-pad);border:1.5px solid var(--logo-ring);object-fit:contain}
.brand b{display:block;font-family:'Amiri',Georgia,serif;font-size:1.25rem;line-height:1.1}
.brand small{display:block;font-size:.78rem;color:var(--muted)}
.hright{display:flex;align-items:center;gap:.5rem}
.theme{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;padding:0}
.theme:hover{background:var(--tint)}
.theme svg{width:20px;height:20px}
.logo-d{display:none}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
.tabs{display:flex;gap:.25rem}
.tabs a{padding:.55rem .95rem;border-radius:999px;text-decoration:none;font-weight:500;font-size:.95rem;color:var(--muted)}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);background:var(--tint);box-shadow:inset 0 -2px 0 var(--gold-b)}

/* big green section at the top */
.hero{--skh:max(72px,9.167vw);position:relative;color:var(--hero-ink);background:var(--hero-bg);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.8;
  background-image:var(--pat);
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 95%);mask-image:linear-gradient(to bottom,#000 30%,transparent 95%)}
.hero-in{position:relative;z-index:1;display:grid;gap:2rem;padding:2.2rem 0 calc(var(--skh) * .2182);align-items:center}
@media(min-width:880px){.hero-in{grid-template-columns:1.15fr .85fr;align-items:end;padding:3.2rem 0 calc(var(--skh) * .2182)}.hero-text{padding-bottom:calc(var(--skh) * .78 + 14px)}}
.bismillah{font-family:'Amiri',serif;font-size:1.9rem;color:var(--hero-gold);margin:0 0 .6rem;text-align:left}
.hero h1{font-size:clamp(2.3rem,6.4vw,4rem);letter-spacing:.005em}
.hero .sub{margin:.5rem 0 1.4rem;font-size:1.1rem;opacity:.9;max-width:34ch}
.dates{display:grid;gap:.15rem;font-size:1.02rem}
.dates .h{color:var(--hero-gold);font-weight:600}
.dates small{opacity:.7;font-size:.8rem}
.demo{display:inline-block;margin-top:1rem;padding:.35rem .75rem;border:1px solid var(--hero-gold);border-radius:999px;font-size:.82rem;color:var(--hero-gold)}

/* the mosque arch with the countdown in it */
.arch{color:#f4ecd6;position:relative;width:min(21.25rem,80vw);aspect-ratio:300/380;justify-self:center;container-type:inline-size}
.arch svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.arch-in{position:absolute;left:15%;right:15%;top:31%;bottom:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.arch-label{font-size:4.6cqw;opacity:.85}
.arch-name{font-family:'Amiri',serif;font-weight:700;font-size:15cqw;line-height:1.05;margin-top:1.5cqw}
.arch-ar{font-family:'Amiri',serif;font-size:8.5cqw;color:var(--gold-b);line-height:1.3}
.arch-count{font-variant-numeric:tabular-nums;font-weight:600;font-size:11.5cqw;letter-spacing:.02em;margin:2cqw 0 2.5cqw}
.arch-meta{font-size:4.8cqw;line-height:1.5;opacity:.92}
.arch-meta b{color:var(--gold-b);font-weight:600}
.sky{display:block;position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--skh);z-index:0}
.sky *{fill:var(--sky)}
.sky .base{fill:var(--bg)}

/* everything under the top section */
.grid{display:grid;gap:2rem;padding:.5rem 0 3rem;align-items:start}
.grid>*,.two>*,.hero-in>*{min-width:0}
@media(min-width:900px){.grid{grid-template-columns:1.25fr .75fr;gap:3rem}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--card-shadow)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.panel-h h2{font-size:1.7rem;white-space:nowrap}
.panel-h p{margin:0;color:var(--muted);font-size:.9rem}
.toggle{white-space:nowrap;font:inherit;font-size:.82rem;font-weight:600;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;cursor:pointer}
.toggle:hover{background:var(--tint)}
.cols,.prow{display:grid;grid-template-columns:minmax(0,1fr) 6.4rem 6.4rem;align-items:center;padding:.9rem 1.3rem;gap:.5rem}
.cols{padding-block:.6rem;font-size:.82rem;color:var(--muted);border-bottom:1px solid var(--line)}
.cols span:not(:first-child),.t{text-align:right}
.prow{border-top:1px solid var(--line);position:relative}
.prow:first-of-type{border-top:0}
.pname{display:flex;align-items:baseline;gap:.2rem .7rem;flex-wrap:wrap}
.pname .en{font-family:'Amiri',serif;font-size:1.5rem;font-weight:700}
.pname .ar{font-family:'Amiri',serif;color:var(--gold);font-size:1.15rem}
.t{font-variant-numeric:tabular-nums;font-size:1.15rem;white-space:nowrap}
.t.start{color:var(--muted)}
.t.jam{font-weight:700}
.atstart{font-size:.82rem;font-weight:500;color:var(--muted)}
.prow.info{opacity:.75}
.prow.info .en{font-size:1.2rem;font-weight:400;font-style:italic}
.prow.past{opacity:.45}
.prow.next{background:var(--tint)}
.prow.next::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold-b)}
.badge{font-family:'Figtree',sans-serif;font-style:normal;font-size:.72rem;font-weight:700;color:#06291f;background:var(--gold-b);border-radius:999px;padding:.1rem .55rem}
.fine{margin:0;padding:.9rem 1.3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}

/* side column: just lines, no boxes */
.side section{padding:0 0 1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line)}
.side h2{font-size:1.6rem;margin-bottom:.7rem}
.side dl{margin:0;display:grid;gap:.7rem}
.side dt{font-weight:600}
.side dd{margin:0;color:var(--muted);font-size:.95rem}
.big-times{display:flex;gap:2rem;flex-wrap:wrap}
.big-times div{font-variant-numeric:tabular-nums}
.big-times b{display:block;font-family:'Amiri',serif;font-size:2.3rem;line-height:1}
.big-times span{font-size:.88rem;color:var(--muted)}
.side .donate{background:var(--em);color:#f4ecd6;border-radius:20px;padding:1.6rem;margin-bottom:0;border:0}
.donate h2{color:#f4ecd6}
.donate p{margin:.2rem 0 1rem;opacity:.9}
.btn{display:inline-block;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;border:0;border-radius:999px;padding:.7rem 1.3rem;background:var(--gold-b);color:#06291f}
.btn:hover{filter:brightness(1.07)}
.btn.line{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* monthly table */
details.month{margin-top:2rem;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--card-shadow)}
details.month summary{cursor:pointer;padding:1.1rem 1.3rem;font-family:'Amiri',serif;font-weight:700;font-size:clamp(1.25rem,4.4vw,1.5rem);gap:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.month summary::-webkit-details-marker{display:none}
details.month summary::after{content:"+";font-family:'Figtree',sans-serif;font-size:1.5rem;color:var(--gold)}
details.month[open] summary::after{content:"\2212"}
.scroll{overflow-x:auto;border-top:1px solid var(--line)}
table.m{border-collapse:collapse;width:100%;min-width:760px;font-variant-numeric:tabular-nums;font-size:.9rem}
.m th,.m td{padding:.5rem .7rem;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line)}
.m td{background-color:var(--paper)}
.m thead th{background-color:var(--paper);background-image:linear-gradient(var(--tint),var(--tint));font-weight:600;position:sticky;top:0}
.m td:first-child,.m th:first-child{text-align:left;padding-left:1.2rem;position:sticky;left:0;z-index:1;white-space:nowrap;box-shadow:1px 0 0 var(--line)}
.m thead th:first-child{z-index:2}
.m td.j{font-weight:700}
.m small.jm{display:block;font-size:.68rem;font-weight:600;color:var(--gold);line-height:1.1}
.m tr.fri td{background-image:linear-gradient(rgba(217,180,90,.12),rgba(217,180,90,.12))}
.m tr.today td{background-image:linear-gradient(var(--tint),var(--tint));box-shadow:inset 0 2px 0 var(--gold-b),inset 0 -2px 0 var(--gold-b)}
.m tr.today td:first-child{box-shadow:inset 0 2px 0 var(--gold-b),inset 0 -2px 0 var(--gold-b),1px 0 0 var(--line)}
.m tr.shift td{border-top:2px solid var(--gold-b)}

/* the other pages */
.page{padding:2.5rem 0 4rem}
.page>.wrap>h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:.4rem}
.lead{color:var(--muted);max-width:56ch;margin:0 0 2rem;font-size:1.1rem}
.news{column-gap:1.3rem}
@media(min-width:700px){.news{columns:2}}
@media(min-width:1040px){.news{columns:3}}
.post{break-inside:avoid;margin:0 0 1.3rem;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--card-shadow)}
.post img{display:block;width:100%;height:auto;cursor:zoom-in}
.post .body{padding:1.1rem 1.2rem 1.3rem}
.post time{font-size:.82rem;color:var(--muted)}
.post h3{font-size:1.45rem;margin:.2rem 0 .4rem}
.post p{margin:0 0 .8rem;color:var(--muted)}
.post a.more{font-weight:600;color:var(--gold);text-underline-offset:3px}
.two{display:grid;gap:2.5rem}
@media(min-width:860px){.two{grid-template-columns:1.1fr .9fr}}
.prose p{max-width:62ch}
.prose h2{font-size:1.8rem;margin:1.8rem 0 .5rem}
.prose h2:first-child{margin-top:0}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:0}
.facts li{padding:.9rem 0;border-top:1px solid var(--line)}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts b{display:block;font-family:'Amiri',serif;font-size:1.25rem}
.facts span{color:var(--muted);font-size:.95rem}
form.c{display:grid;gap:1rem}
.c label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
.c input,.c textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem}
.c textarea{min-height:140px;resize:vertical}
.status{min-height:1.5rem;color:var(--gold);font-weight:600}
.lb{position:fixed;inset:0;z-index:60;background:rgba(3,15,12,.92);display:grid;place-items:center;padding:1.2rem;cursor:zoom-out}
.lb img{max-width:min(900px,100%);max-height:90vh;width:auto;height:auto;border-radius:12px}
footer{border-top:1px solid var(--line);padding:2rem 0 2.5rem;color:var(--muted);font-size:.9rem}
footer .wrap{display:grid;gap:.4rem}
.flogo{display:flex;align-items:center;gap:.8rem;margin-bottom:.4rem}
.flogo img{width:44px;height:44px;border-radius:50%;background:var(--logo-bg);padding:var(--logo-pad);border:1.5px solid var(--logo-ring);object-fit:contain}

@media(max-width:759px){
  .top .wrap{min-height:58px}
  .brand small{display:none}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--bar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom,0px))}
  .tabs a{text-align:center;border-radius:12px;padding:.7rem .2rem}
  main{padding-bottom:4.8rem}
  .cols,.prow{grid-template-columns:minmax(0,1fr) 5.3rem 5.3rem;padding-inline:1rem;gap:.3rem}
  .t{font-size:1.02rem}
  .pname .ar{display:none}
  .pname .en{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){.draw{animation:none;stroke-dashoffset:0}}

/* bits added once it went live */
.notice{background:var(--em);color:#f4ecd6;text-align:center;padding:.7rem 1.2rem;font-weight:500;font-size:.95rem}
.prov{margin:0;padding:.8rem 1.3rem;border-bottom:1px solid var(--line);background:var(--tint);font-size:.9rem}
.mnav{display:flex;align-items:center;gap:.5rem}
.mnav button{font:inherit;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.mnav button:disabled{opacity:.35;cursor:default}
details.month summary .mt{flex:1}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.3rem;border-top:1px solid var(--line)}
.mhead h3{font-size:1.25rem}
.state{padding:2rem 1.3rem;text-align:center;color:var(--muted)}
.state button{margin-top:.8rem}
.lead a:not(.btn),.prose a:not(.btn){color:var(--gold)}
.empty{color:var(--muted);padding:1rem 0}
.post.pin::before{content:"Pinned";display:block;background:var(--tint);color:var(--ink);font-size:.78rem;font-weight:600;padding:.3rem 1.2rem}
.dl{display:inline-block;margin:.9rem 1.3rem;color:var(--gold);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine.nobox{padding:.8rem 0 0;border:0}
.facts a.strong{font-weight:600}
.facts a.gold{color:var(--gold)}
.facts a.wa{display:inline-flex;align-items:center;gap:.6rem;margin-top:.35rem;padding:.55rem 1.1rem;border-radius:999px;background:#25d366;color:#06391b;font-weight:600;text-decoration:none}
.facts a.wa:hover{filter:brightness(1.06)}
.wa svg{width:1.35rem;height:1.35rem;flex:none;fill:currentColor}
.facts a.wa span{color:inherit;font-size:inherit}
.arch-open{margin-top:2.4cqw;max-width:90%;font-size:4cqw;line-height:1.35;color:#ead9a4}
.prow .t.start.dash{opacity:.4}
.arch-open{text-wrap:balance}
.notice.wa{padding:0;background:#25d366;color:#06391b}
.notice.wa a{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.75rem 1.2rem;color:inherit;font-weight:600;text-decoration:none}
.notice.wa a:hover{filter:brightness(1.06)}
.notice.wa svg{width:1.35rem;height:1.35rem;flex:none;fill:currentColor}