/* The community journal design, shared by every programme and archive page. */
:root{--surface:#f4f6fa;--ice:#e9efff;--serif:var(--sans);--gold:#cfa452}
.interior-page h1,.interior-page h2,.interior-page h3,.interior-page h4{font-family:var(--sans);font-weight:750;letter-spacing:-.045em}
.interior-page h1{font-weight:800;overflow-wrap:break-word}
.interior-page em{font-style:normal}
.interior-page address{font-style:normal}
.interior-page :is(.about-hero,.programme-hero,.guide-hero.with-photo,.projects-intro,.project-detail-heading,.contact-heading) a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.interior-page main{padding-bottom:8px}
.interior-page main .eyebrow{font-size:.75rem;letter-spacing:.1em;font-weight:700;color:var(--blue)}
.interior-page #site-nav>a[aria-current]{background:var(--blue)}
.interior-page .site-header{position:relative;top:auto;border:0;box-shadow:none}
.interior-page .site-footer{border-top:2px solid var(--ink);background:white}
.interior-page .button{font-weight:700;border-radius:4px;min-height:48px}
.button-ice{background:var(--blue);color:white}.button-ice:hover{background:var(--blue-dark)}
.button-outline{border:1px solid var(--ink);color:var(--ink);background:transparent}.button-outline:hover{background:var(--surface)}
.hero-actions{display:flex;gap:12px 22px;align-items:center;flex-wrap:wrap}
.hero-text-link{display:inline-flex;gap:10px;align-items:center;min-height:44px;font-size:.875rem;font-weight:700;color:var(--blue)}
.interior-page :is(.breadcrumbs,.about-breadcrumbs,.contact-breadcrumbs,.guide-breadcrumbs){font-size:.8125rem;min-height:66px;padding-block:15px;gap:10px}
.interior-page :is(.breadcrumbs,.about-breadcrumbs,.contact-breadcrumbs,.guide-breadcrumbs) a{min-height:36px;display:inline-flex;align-items:center}
.interior-page :is(.breadcrumbs,.about-breadcrumbs,.contact-breadcrumbs,.guide-breadcrumbs) .icon{width:14px;height:14px}
.interior-page :is(.about-hero,.programme-hero,.guide-hero.with-photo,.projects-intro,.project-detail-heading,.contact-heading){border-radius:0;background:white;color:var(--ink);padding:28px 0 38px;border-bottom:2px solid var(--ink);gap:48px}
.interior-page :is(.about-hero,.programme-hero,.guide-hero,.projects-intro,.project-detail-heading,.contact-heading) h1{color:var(--blue);font-size:clamp(2.5rem,4.35vw,4.5rem);line-height:1.03;letter-spacing:-.055em}
.interior-page :is(.about-hero,.programme-hero,.guide-hero,.projects-intro,.project-detail-heading,.contact-heading) h1 em{color:var(--ink)}
.interior-page :is(.about-hero-copy,.programme-hero-copy,.guide-hero-copy,.projects-intro-copy)>p:not(.eyebrow),.interior-page :is(.project-detail-heading,.contact-heading)>p:last-child{color:var(--muted);font-size:1.0625rem;line-height:1.75;max-width:620px;margin-top:22px}
.interior-page :is(.about-hero,.programme-hero,.guide-hero,.projects-intro,.project-detail-heading,.contact-heading) .eyebrow{color:var(--blue);margin-bottom:18px}
.interior-page :is(.about-hero-photo,.about-archive-photo img,.programme-hero-photo .photo-frame,.guide-hero-photo .photo-frame){border-radius:4px;overflow:hidden;background:var(--surface)}
.interior-page :is(.about-hero-photo,.programme-hero-photo,.guide-hero-photo) figcaption{font-size:.75rem;line-height:1.6;color:var(--muted);padding:11px 0 0;margin:0;background:white}
.interior-page :is(.programme-hero-photo,.guide-hero-photo) .photo-frame{aspect-ratio:3/2}
.interior-page :is(.programme-hero-photo,.guide-hero-photo) img{object-fit:cover;object-position:center}
.interior-page :is(.programme-hero-photo,.guide-hero-photo) .photo-contain img{object-fit:contain}
.interior-page .generated-photo img{object-position:center}
.interior-page main :is(.about-reading p,.about-story-heading>p:last-child,.about-moments article>p:not(.about-moment-year),.about-purpose-heading>p:last-child,.about-purpose-grid p,.about-welcome>div>p:not(.eyebrow),.contact-intro,.contact-note,.contact-arrival-note,.guide-article p,.pillar-list,.project-story-copy>p,.chapter-photo figcaption){color:var(--muted)}
.interior-page main :is(.about-text-link,.chapter-link,.project-source,.project-return,.archive-footer a,.guide-back,.contact-prayer-link){color:var(--blue);font-weight:700}
.interior-page main :is(.about-text-link,.chapter-link,.project-source,.project-return,.archive-footer a,.guide-back,.contact-prayer-link):hover{text-decoration:underline;text-underline-offset:4px}
/* About: a clear introduction, a real centre photograph, and the community story. */
.about-hero{grid-template-columns:1.1fr 1fr}
.about-hero-photo img{aspect-ratio:3/2;object-fit:cover}
.about-hero-location{color:var(--ink);font-size:.875rem;font-weight:600}
.about-hero-location .icon{color:var(--blue)}
.about-jump-links{justify-content:flex-start;padding:22px 0 0;gap:10px}
.about-jump-links a{min-width:0;border-radius:3px;background:white;border-color:var(--line);font-weight:700;font-size:.875rem;padding:11px 22px}
.about-jump-links a:hover{color:white;background:var(--blue);border-color:var(--blue)}
.about-chapter{padding-block:60px}
.about-chapter h2,.about-welcome h2{font-size:clamp(2rem,3vw,3rem);line-height:1.1}
.about-chapter h2 em{color:var(--blue)}
.about-introduction{gap:80px}.about-reading .about-lead{color:var(--ink);font-size:1.1875rem}
.about-story-feature{gap:48px}.about-story-feature h3{font-size:1.85rem;line-height:1.2}
.about-archive-photo figcaption,.about-archive-note{color:var(--muted);font-size:.8125rem}
.about-moments{gap:28px;margin-top:40px}
.about-moments article{border-top:3px solid var(--blue);padding:22px 0 0}
.about-moment-year{font-size:1.1rem;color:var(--blue);font-weight:800}
.about-moments h3{font-size:1.5rem;line-height:1.2}
.about-purpose{border:0;border-radius:0;padding:40px;background:var(--surface);position:relative}
.about-purpose:before{content:"";position:absolute;top:0;left:0;width:85px;height:4px;background:var(--gold)}
.about-purpose-grid{gap:30px 48px}.about-purpose-grid article{border-color:var(--line)}
.about-purpose-grid h3{font-size:1.5rem}.about-value-icon{border-radius:3px;background:white;color:var(--blue)}
.about-community-photo{border-radius:4px}.about-community-photo img{aspect-ratio:5/2;object-fit:cover}
.about-community-photo figcaption{color:var(--muted);font-size:.8125rem;background:white}
.about-welcome{padding-block:52px 64px}.about-welcome-details{border-left:3px solid var(--blue)}
/* Programme pages: strong titles, simple tabs and a useful enquiry rail. */
.interior-page.programme-page .programme-hero{grid-template-columns:1.12fr 1fr;gap:45px}
.programme-tabs{border:0;border-bottom:1px solid var(--line);border-radius:0;background:white;padding:0;gap:0;margin-top:0}
.programme-tabs a{border-radius:0;min-height:66px;font-weight:700;padding:14px 16px;position:relative}
.programme-tabs a[aria-current=page]{background:var(--surface);color:var(--blue);box-shadow:inset 0 -3px var(--blue)}
.programme-tabs a:hover{background:var(--surface)}
.programme-layout{grid-template-columns:minmax(0,1fr) 300px;gap:60px;padding-block:40px 50px}
.programme-overview.inline-overview{border:0;border-bottom:1px solid var(--line);border-radius:0;background:white;padding:0 0 18px;gap:2px 26px;margin-bottom:32px}
.programme-overview.inline-overview>p{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.programme-overview.inline-overview a{font-size:.875rem;color:var(--blue);font-weight:700}
.programme-intro h2{font-size:clamp(2rem,3vw,2.7rem);line-height:1.1}
.programme-chapter h3{font-size:1.65rem}.chapter-heading{gap:12px}.chapter-icon{background:var(--surface);border-radius:3px;color:var(--blue);width:40px;height:40px}
.availability-note{border-radius:0;border-left:3px solid var(--gold);background:#fbf8f1;color:#52504b}
.availability-note .icon{color:#866323}.topic-list li:before{background:var(--blue);border-radius:0}
.programme-sidebar{top:24px;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:4px;background:white;padding:24px}
.programme-sidebar h2{font-size:1.8rem}.programme-sidebar .side-link{background:var(--green);color:#07190d;border-radius:4px;font-weight:700;padding:10px;line-height:1.35}
.programme-sidebar .side-link:hover{background:#67f394;text-decoration:none}.side-location{font-size:.8125rem}
.programme-more{border-top:2px solid var(--ink);padding-block:35px 55px}.programme-more h2{font-size:2rem}
.programme-more-grid>a{border-radius:4px;padding:22px}.programme-more-grid strong{font-weight:700}.programme-more-grid .icon{color:var(--blue)}
.resource-links{gap:12px;counter-reset:guide}.resource-links a{counter-increment:guide;background:white;border:1px solid var(--line);border-radius:4px;padding:19px 16px;font-weight:700;min-height:84px}
.resource-links a:before{content:"0" counter(guide);color:var(--blue);font-size:.75rem;align-self:flex-start;min-width:20px;padding-top:3px}
.resource-links a .icon{margin-left:auto;color:var(--blue)}.resource-links a:hover{background:var(--surface);border-color:var(--blue)}
.chapter-photo{border-radius:4px}.chapter-photo figcaption strong{font-weight:700}
.study-schedule{border-top:2px solid var(--ink);padding-top:30px;margin:30px 0}
.study-schedule h2{font-size:2rem;line-height:1.1;margin:8px 0 22px}
.study-schedule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.study-session{background:var(--surface);padding:23px;border-radius:4px;border-top:3px solid var(--blue)}
.study-session:nth-child(n+3){border-color:var(--gold)}.study-session h3{font-size:1.15rem;letter-spacing:-.02em;margin-bottom:12px}
.study-session p{font-size:.9375rem;line-height:1.7;color:var(--muted)}.study-session strong{display:block;color:var(--blue);font-weight:750;font-size:1.1rem;margin-top:6px}
.study-schedule>p:last-child{font-size:.875rem;color:var(--muted);line-height:1.7;margin-top:16px}.study-schedule>p:last-child a{text-decoration:underline;color:var(--blue)}
.quran-discovery{display:flex;gap:22px;justify-content:space-between;align-items:center;background:var(--blue);color:white;padding:26px;margin-top:30px;border-radius:4px;background-image:linear-gradient(90deg,#245bda,#245bdad9),url('/assets/brand/islamic-banner.webp');background-size:cover}
.quran-discovery h3{font-size:1.65rem}.quran-discovery p{font-size:.9375rem;margin-top:8px;max-width:460px}.quran-discovery .button{background:white;color:var(--blue);flex-shrink:0}
/* Guides: comfortable reading length, a compact contents panel and next steps. */
.interior-page .guide-hero.with-photo{grid-template-columns:1.2fr 1fr}
.guide-layout{grid-template-columns:minmax(0,1fr) 300px;padding:44px 0 54px;gap:75px}
.guide-article{max-width:780px}.guide-article h2{font-size:1.8rem;line-height:1.2}.guide-article p,.pillar-list{font-size:1.0625rem;line-height:1.85}
.guide-article section+section{padding-top:30px;margin-top:30px}
.guide-sidebar{position:sticky;top:24px;background:white;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:4px;padding:23px 15px}
.guide-sidebar h2{font-size:1.55rem}.guide-menu a{border-radius:3px;font-size:.875rem;min-height:48px}.guide-menu a[aria-current=page]{font-weight:700}
.guide-pagination{border-top:2px solid var(--ink);gap:18px;padding-bottom:55px}.guide-pagination a{border-radius:4px}.guide-pagination strong{font-weight:700}
.guide-quicknav{display:none}
/* Projects: a visual archive with full, uncropped original posters. */
.projects-intro{display:grid;grid-template-columns:1.12fr 1fr;align-items:center}.project-count{color:var(--blue);font-size:.875rem;font-weight:700;margin-top:18px}
.projects-intro .hero-actions{margin-top:22px}.projects-intro-photo{min-width:0;align-self:center}.projects-intro-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}.projects-intro-photo figcaption{font-size:.75rem;line-height:1.6;color:var(--muted);margin-top:10px}
.project-jumps{padding-block:22px 8px;gap:9px}.project-jumps a{border-radius:3px;color:var(--ink);font-weight:600;background:white;font-size:.875rem}
.project-jumps a:hover{color:white;background:var(--blue);border-color:var(--blue)}
.projects-section h2,.archive-head h2{font-size:clamp(2rem,3vw,2.8rem)}
.project-grid{gap:24px}.project-card{border-radius:4px;border-color:var(--line)}
.project-card:has(.project-card-link:hover){border-color:var(--blue);box-shadow:none}
.project-card .project-card-body{padding:23px}.project-card .project-card-body h3,.project-catalogue .project-card h4,.project-detail-page .project-card .project-card-body h3{font:750 1.45rem/1.18 var(--sans);letter-spacing:-.035em;color:var(--ink);margin-bottom:12px}
.project-card .project-image{aspect-ratio:16/11;background:var(--surface)}
.project-card .project-image.contain img{object-fit:contain;background:var(--surface);padding:12px}.project-card .project-image.artwork img{background:white}
.project-card .project-meta{color:var(--blue);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.project-card-body>p:not(.project-meta){font-size:.9375rem;line-height:1.75}.project-result{color:var(--ink);font-size:.8125rem}
.project-card .project-source{font-weight:700;color:var(--blue)}
.archive-wrap.project-catalogue{border-top:2px solid var(--ink);margin-top:28px}
.project-catalogue .archive-category>h3{font-size:1.75rem}.archive-category{border-color:var(--line)}
.projects-cta{background:var(--blue);border-radius:4px;padding:34px 38px}.projects-cta h2{font-size:2rem;letter-spacing:-.04em}.projects-cta p{color:white;opacity:.9}
.projects-cta .button-ice{background:white;color:var(--blue)}.projects-cta .button-outline{border-color:white;color:white}
.project-detail-heading h1{max-width:1050px}.project-story{grid-template-columns:1.05fr 1fr;gap:55px;padding-block:38px 52px}
.project-story-photo>a{border-radius:4px;background:var(--surface)}.project-story-photo img{object-fit:contain;max-height:580px}
.project-story-copy h2{font-size:2rem}.project-fact{border-radius:0;border-color:var(--gold);background:var(--surface)}
.project-fact h3{color:var(--blue);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.project-fact p{color:var(--ink)}
.project-story-photo figcaption{font-size:.8125rem;margin-left:0}.project-story-photo figcaption span{color:var(--blue)}
.related-projects{border-top:2px solid var(--ink)}.related-projects h2{font-size:2rem}
.project-theme-image{margin-top:25px;border-radius:4px;overflow:hidden;background:var(--surface)}
.project-theme-image img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}.project-theme-image figcaption{font-size:.7rem;line-height:1.5;color:var(--muted);padding:8px 10px}
.project-story-photo .archive-image-link{display:flex;min-height:44px;align-items:center;color:var(--blue);font-weight:600;text-decoration:underline;font-size:.875rem;margin-top:8px;border:0;background:white;border-radius:0}
.image-label{position:absolute;left:8px;bottom:8px;background:#ffffffed;color:var(--ink);padding:3px 7px;font-size:.65rem;line-height:1.5}
/* Contact: practical ways to get in touch with a welcoming location panel. */
.contact-heading h1{max-width:900px}.contact-layout{gap:60px;padding-block:36px 42px}
.contact-methods h2,.contact-location h2{font-size:2.2rem}.contact-method{border-radius:4px;padding:22px;gap:16px}
.contact-method:hover{background:var(--surface);border-color:var(--blue)}.contact-icon{border-radius:3px;color:var(--blue);background:var(--surface)}
.contact-method-copy strong{font-weight:750;font-size:clamp(1.25rem,2.3vw,1.65rem)}
.contact-method-copy small,.contact-method-copy>span{color:var(--muted)}
.contact-location{border:0;border-radius:4px;background:var(--surface);padding:30px;overflow:hidden}
.contact-location h2 em{color:var(--blue)}.contact-location address{font-style:normal;margin:20px 0}.contact-location-icon{background:white;color:var(--blue);border-radius:3px;margin-bottom:18px}
.contact-location-photo{margin:-30px -30px 26px}.contact-location-photo img{width:100%;aspect-ratio:5/2;object-fit:cover}.contact-location-photo figcaption{padding:7px 14px;font-size:.7rem;color:var(--muted);background:white}
.contact-updates{background:#eafbf0;border:1px solid #b8e8c8;border-radius:4px;padding:27px 30px}
.contact-updates h2{font-size:1.65rem}.contact-updates p{color:#345441}.contact-updates .contact-icon{background:var(--green);color:#07190d}
.interior-page main a[href*="chat.whatsapp.com"].button{background:var(--green);border-color:var(--green);color:#07190d}
.interior-page main a[href*="chat.whatsapp.com"].button:hover{background:#67f394;border-color:#67f394}
.page-illustration{margin:32px 0 0}.page-illustration img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;border-radius:4px}.page-illustration figcaption{font-size:.75rem;color:var(--muted);margin-top:9px}
/* Fit the same hierarchy onto a phone; navigation stays useful without JavaScript. */
@media(max-width:1100px){
 .interior-page :is(.about-hero,.programme-hero,.guide-hero.with-photo){gap:28px}
 .programme-layout,.guide-layout{gap:35px;grid-template-columns:minmax(0,1fr) 270px}
 .project-story{gap:32px}.contact-layout{gap:32px}
}
@media(max-width:850px){
 .interior-page :is(.about-hero,.programme-hero,.guide-hero.with-photo),.interior-page.programme-page .programme-hero{grid-template-columns:1fr;gap:26px;padding:16px 0 28px}
 .interior-page :is(.about-hero,.programme-hero,.guide-hero,.projects-intro,.project-detail-heading,.contact-heading) h1{font-size:clamp(2.35rem,7vw,3.6rem)}
 .interior-page :is(.about-hero-photo,.programme-hero-photo,.guide-hero-photo){width:100%;max-width:none}
 .interior-page :is(.programme-hero-photo,.guide-hero-photo) .photo-frame,.about-hero-photo img{aspect-ratio:2/1}
 .programme-layout,.guide-layout{grid-template-columns:1fr;gap:28px;padding:30px 0 40px}
 .programme-sidebar,.guide-sidebar{position:static}.programme-sidebar .side-link{max-width:300px;justify-content:center}
 .guide-quicknav{display:inline-flex;margin-top:20px;align-items:center;min-height:44px;font-weight:700;font-size:.875rem;color:var(--blue);border-bottom:1px solid var(--blue)}
 .guide-sidebar{scroll-margin-top:20px}.guide-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
 .about-introduction,.about-story-feature{grid-template-columns:1fr;gap:26px}.about-moments{grid-template-columns:1fr}
 .project-story{grid-template-columns:1fr;gap:24px}.project-story-photo img{max-height:520px}
 .quran-discovery{align-items:flex-start;flex-direction:column}.projects-intro{grid-template-columns:1fr;align-items:flex-start;gap:24px}
 .interior-page :is(.projects-intro,.project-detail-heading,.contact-heading){padding:18px 0 30px}
}
@media(max-width:700px){
 .about-chapter{padding-block:38px}.about-purpose{padding:28px 24px}.about-purpose-grid{gap:26px}
 .about-welcome{grid-template-columns:1fr;gap:25px;padding-block:38px}.about-welcome-details{padding:23px 0 0;border-left:0;border-top:3px solid var(--blue)}
 .about-community-photo img{aspect-ratio:3/2}.contact-layout{grid-template-columns:1fr;gap:24px;padding-block:28px}
 .contact-methods h2,.contact-location h2{font-size:1.85rem}.contact-location{padding:24px}.contact-location-photo{margin:-24px -24px 22px}
 .contact-updates{padding:24px}.contact-updates .button{margin-left:0}.project-story-copy{padding:0}
 .interior-page main h2{overflow-wrap:break-word}.projects-cta{padding:27px}.page-illustration img{aspect-ratio:2/1}
}
@media(max-width:530px){
 .interior-page :is(.breadcrumbs,.about-breadcrumbs,.contact-breadcrumbs,.guide-breadcrumbs){font-size:.75rem;gap:7px;padding-block:12px;min-height:58px}
 .interior-page :is(.about-hero-copy,.programme-hero-copy,.guide-hero-copy,.projects-intro-copy)>p:not(.eyebrow),.interior-page :is(.project-detail-heading,.contact-heading)>p:last-child{font-size:1rem}
 .interior-page :is(.programme-hero-photo,.guide-hero-photo) .photo-frame,.about-hero-photo img{aspect-ratio:3/2}
 .programme-tabs a{font-size:.8125rem;min-height:58px;padding:12px 8px}
 .programme-overview.inline-overview>a{width:auto;min-height:44px}.programme-overview.inline-overview{gap:0 19px}
 .programme-chapter h3{font-size:1.5rem}.programme-intro h2,.programme-more h2{font-size:1.9rem}
 .programme-sidebar .side-link{max-width:none}.study-schedule-grid,.about-purpose-grid,.guide-menu{grid-template-columns:1fr}
 .study-session{padding:20px}.study-session h3{font-size:1.15rem}.resource-links{grid-template-columns:1fr}.resource-links a{min-height:68px}
 .guide-article h2{font-size:1.65rem}.guide-article p,.pillar-list{font-size:1rem}.guide-pagination{grid-template-columns:1fr}
 .project-grid{grid-template-columns:1fr}.project-card .project-card-body{padding:22px}.project-story-photo img{max-height:none}
 .projects-intro .button,.projects-cta .button,.about-welcome-actions .button{width:100%}
 .hero-actions{align-items:stretch;gap:10px}.hero-actions .button{width:100%}.hero-text-link{justify-content:center;width:100%}
 .about-jump-links{gap:7px}.about-jump-links a{flex:1 1 90px;padding:10px 12px;font-size:.8125rem}
 .contact-method{padding:18px 14px}.contact-icon{width:40px;height:44px}.contact-method-copy strong{font-size:1.25rem}
 .project-detail-heading h1{overflow-wrap:anywhere}.contact-updates .button{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.interior-page *{transition:none!important}}

/* Compact Projects introduction */
.interior-page .projects-intro{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;padding:22px 0 28px;align-items:center}
.interior-page .projects-intro h1{font-size:clamp(2.25rem,3.2vw,3.25rem);line-height:1.08}
.interior-page .projects-intro-copy>p:not(.eyebrow){font-size:1rem;line-height:1.65;margin-top:16px;max-width:550px}
.projects-intro .hero-actions{margin-top:16px}
.projects-intro-photo{margin:0;width:100%;min-width:0}
.projects-intro-photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;max-height:320px;object-fit:cover;object-position:center}
.projects-intro-photo figcaption{margin-top:7px}
@media(max-width:850px){.interior-page .projects-intro{grid-template-columns:1fr;gap:22px;padding:14px 0 24px}.projects-intro-photo img{aspect-ratio:16/9;max-height:260px}.interior-page .projects-intro h1{font-size:clamp(2rem,5.5vw,2.75rem)}}