/* Fonts are bundled so the site makes no third-party font requests. */
@font-face{font-family:Alegreya;src:url(../fonts/alegreya-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Alegreya;src:url(../fonts/alegreya-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Alegreya;src:url(../fonts/alegreya-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Alegreya;src:url(../fonts/alegreya-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(../fonts/alegreya-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(../fonts/alegreya-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(../fonts/alegreya-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Nastaliq Urdu";src:url(../fonts/noto-nastaliq-urdu-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
	--plaster:#F8FBF8;   /* page */
	--lime:#E3EEE7;      /* limewashed wall */
	--chadar:#0F5141;    /* dargah green */
	--chadar-deep:#0A3A2F;
	--marigold:#F2AE35;
	--rose:#9E2A4B;      /* attar and rose petals: links only */
	--ink:#14302A;
	--muted:#47605A;
	--line:#C5D6CC;
	--serif:Alegreya,Georgia,"Times New Roman",serif;
	--sans:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
	--gutter:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--plaster);color:var(--ink);font:400 1.125rem/1.65 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.band--green :focus-visible,.foot :focus-visible,.write :focus-visible,.plinth :focus-visible{outline-color:#fff}

.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--chadar);color:#fff;padding:.5em 1em;z-index:60}
.skip:focus{left:8px;color:#fff}

/* Header */
.top{background:var(--plaster);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.admin-bar .top{top:32px}
.top__row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand__logo{max-height:56px;width:auto}
.brand__arch{width:30px;height:44px;background:var(--chadar);clip-path:url(#kp-arch);flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.2;font-size:.95rem;color:var(--muted)}
.brand__text strong{font:500 1.22rem/1.15 var(--serif);color:var(--ink)}
.menu-btn{display:none;font:500 1.05rem var(--sans);background:none;border:1px solid var(--chadar);color:var(--chadar);padding:.3em .9em;cursor:pointer}
.nav__list{display:flex;gap:clamp(14px,2vw,30px);align-items:center}
.nav__list>li{position:relative}
.nav__list a{color:var(--ink);text-decoration:none;font-weight:500;display:block;padding:.45em 0}
.nav__list>li>a{border-bottom:2px solid transparent}
.nav__list>li>a:hover,.nav__list>.current-menu-item>a,.nav__list>.current-menu-ancestor>a,.nav__list>.current_page_parent>a{border-bottom-color:var(--marigold);color:var(--ink)}
.nav .sub-menu{position:absolute;left:-18px;top:100%;min-width:230px;background:var(--plaster);border:1px solid var(--line);padding:8px 18px;visibility:hidden;opacity:0;z-index:50}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{visibility:visible;opacity:1}
.nav .sub-menu a:hover{color:var(--rose)}

/* Hero arcade: the one big gesture on the site */
.hero{background:linear-gradient(var(--lime),var(--plaster) 72%);padding-top:clamp(20px,3.5vh,44px);overflow:hidden}
.hero__arcade{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:clamp(10px,1.8vw,26px);align-items:end}
.arch{position:relative;display:block;text-decoration:none}
.arch__clip{position:absolute;inset:0;clip-path:url(#kp-arch);display:block}
.arch-line{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--chadar);stroke-width:1.5;pointer-events:none}
.arch-line--gold{stroke:var(--marigold);transform:scale(.965,.98);transform-origin:50% 100%}
.arch--main{height:clamp(420px,62vh,640px)}
.arch--main .arch__clip{background:var(--chadar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76' viewBox='0 0 76 76'%3E%3Cg fill='none' stroke='%23F2AE35' stroke-opacity='.2'%3E%3Cpath d='M38 4 48 28 72 38 48 48 38 72 28 48 4 38 28 28Z'/%3E%3Cpath d='M14 14 28 28M62 14 48 28M14 62 28 48M62 62 48 48'/%3E%3C/g%3E%3C/svg%3E")}
.arch__img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.arch__calli{position:absolute;inset:26% 6% 6%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--marigold)}
.urdu{font-family:"Noto Nastaliq Urdu",serif;font-weight:500;display:block;line-height:2.5;font-size:clamp(1.25rem,2.3vw,2rem)}
.urdu>span{display:block}
.urdu__big{font-size:2.3em;line-height:1.9;color:#fff}
.arch--side{height:clamp(320px,47vh,490px);color:var(--ink)}
.arch--side .arch__clip{background:var(--plaster);transition:background-color .2s}
.arch--side:hover .arch__clip{background:#fff}
.arch--side:hover{color:var(--ink)}
.arch__text{position:absolute;inset:auto 0 0;padding:0 clamp(16px,2.2vw,34px) clamp(18px,2.4vw,30px);display:flex;flex-direction:column;gap:.35em}
.arch__title{font:500 clamp(1.5rem,2.5vw,2.25rem)/1.1 var(--serif)}
.arch__sub{color:var(--muted);line-height:1.35;text-wrap:pretty}
.arch__go{color:var(--rose);font-weight:500;margin-top:.5em;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.plinth{background:var(--chadar);color:#fff;padding:clamp(20px,3vw,36px) 0 clamp(24px,3.4vw,42px)}
.plinth__name{font-size:clamp(2.35rem,7vw,5.9rem);line-height:1.02;letter-spacing:-.012em}
.plinth__title{margin:.4em 0 0;font:italic 400 clamp(1.15rem,2vw,1.65rem)/1.3 var(--serif);color:var(--marigold)}

/* The single orchestrated entrance */
@media (prefers-reduced-motion:no-preference){
	.home .arch{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
	.home .arch--left{animation-delay:.18s}
	.home .arch--right{animation-delay:.3s}
	@keyframes rise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Bands */
.band{padding:clamp(52px,7vw,96px) 0}
.band--lime{background:var(--lime)}
.band--green{background:var(--chadar-deep);color:#fff;--line:#2D6456;--muted:#BFD6CC}
.band__top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(20px,3vw,36px);flex-wrap:wrap}
.band__h{font-size:clamp(2rem,3.8vw,3.1rem)}
.band--green .band__h{margin-bottom:clamp(26px,4vw,48px)}
.more{font-weight:500}
.band--green a{color:var(--marigold)}

.intro__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,6vw,96px)}
.intro__lead{font:400 clamp(1.7rem,3.1vw,2.6rem)/1.24 var(--serif);margin:0;text-wrap:pretty}
.intro__body p{max-width:60ch}
.intro__links{display:flex;flex-wrap:wrap;gap:.3em 1.6em;margin-top:1.2em;font-weight:500}


.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,4vw,56px)}
.timeline__item{border-top:1px solid var(--line);padding:18px 0 34px}
.timeline__when{font-size:1.4rem;margin-bottom:.45em}
.band--green .timeline__when{color:var(--marigold)}
.timeline__what{margin:0;color:var(--muted);max-width:42ch}

/* Activities register */
.register{border-top:1px solid var(--line)}
.reg{border-bottom:1px solid var(--line)}
.reg__link{display:grid;grid-template-columns:96px 1fr auto;gap:clamp(10px,2.4vw,32px);align-items:start;padding:18px 0;color:var(--ink);text-decoration:none}
.reg__link:hover{color:var(--ink);background:linear-gradient(90deg,transparent,rgba(237,165,38,.14))}
.reg__period{color:var(--muted);font-variant-numeric:lining-nums;padding-top:.32em}
.reg__main{display:flex;flex-direction:column;gap:.15em}
.reg__title{font:500 clamp(1.3rem,2.1vw,1.7rem)/1.22 var(--serif);text-wrap:pretty;max-width:46ch}
.reg__type{color:var(--muted);font-size:1rem}
.reg__thumb{width:88px;height:112px;clip-path:url(#kp-arch);display:block;overflow:hidden}
.reg__thumb img{width:100%;height:100%;object-fit:cover}

/* Videos */
.videos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px)}
.videos--home{grid-template-columns:1.7fr 1fr}
.videos--home .video:first-child{grid-row:span 2}
.video{margin:0}
.video__frame{aspect-ratio:16/9;background:var(--chadar)}
.video__frame iframe{width:100%;height:100%;border:0;display:block}
.video figcaption{font:500 1.22rem/1.3 var(--serif);margin-top:.55em}

/* Photographs */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery-page{padding-block:clamp(36px,5vw,68px)}
.masonry{columns:4 240px;column-gap:12px}
.shot{display:block;margin-bottom:12px;break-inside:avoid}
.shot img{width:100%}
.shot:hover img{outline:3px solid var(--marigold);outline-offset:-3px}
.gallery-more{text-align:center;margin:28px 0 0}
.empty{background:var(--lime);padding:clamp(28px,5vw,56px);font:400 clamp(1.3rem,2.2vw,1.7rem)/1.35 var(--serif)}
.empty p{margin:0;max-width:44ch}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,3vw,34px)}
.pill{font:500 1.05rem var(--sans);padding:.3em 1em;border:1px solid var(--chadar);background:none;color:var(--chadar);text-decoration:none;cursor:pointer;border-radius:999px}
.pill:hover{background:var(--lime);color:var(--chadar)}
.pill.is-on{background:var(--chadar);color:#fff}
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.lightbox::backdrop{background:rgba(6,30,24,.94)}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox figure{margin:0;text-align:center}
.lightbox img{max-width:min(86vw,1400px);max-height:84vh;width:auto;height:auto;margin:auto}
.lightbox figcaption{margin-top:10px}
.lightbox button{background:none;border:0;color:#fff;font:500 1.1rem var(--sans);cursor:pointer}
.lightbox__close{position:absolute;top:14px;right:20px;padding:.4em .8em}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);font-size:3rem!important;line-height:1;padding:.2em .4em}
.lightbox__prev{left:4px}.lightbox__next{right:4px}

/* Inner page heading: a small arcade frieze along the base */
.page-head{background:var(--lime);padding:clamp(26px,4vw,50px) 0 clamp(58px,6vw,84px);position:relative}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34' viewBox='0 0 40 34'%3E%3Cpath fill='%23F8FBF8' d='M3 34V15C3 9 14 6 20 1 26 6 37 9 37 15V34Z'/%3E%3C/svg%3E") repeat-x left bottom}
.crumbs{color:var(--muted);font-size:1rem;display:flex;flex-wrap:wrap;gap:.45em;margin-bottom:.8em}
.crumbs a{color:var(--muted)}
.page-head__title{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.06;max-width:22ch;text-wrap:balance}
.page-head__lead{font:italic 400 clamp(1.2rem,2vw,1.55rem)/1.35 var(--serif);margin:.6em 0 0;max-width:46ch;color:var(--chadar)}
.single-kp_activity .page-head__title{font-size:clamp(2rem,4vw,3.3rem);max-width:28ch}

/* Long reads */
.read{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,6vw,88px);padding-block:clamp(36px,5vw,68px)}
.read--solo{grid-template-columns:minmax(0,1fr)}
.read--haj{grid-template-columns:minmax(0,1fr) 300px}
.toc{position:sticky;top:104px;align-self:start;max-height:calc(100vh - 124px);overflow:auto}
.toc__h{font:700 1rem var(--sans);margin-bottom:.5em}
.toc a{display:block;padding:.28em 0;color:var(--muted);text-decoration:none;line-height:1.3}
.toc a:hover{color:var(--rose)}
.prose{font:400 1.25rem/1.72 var(--serif);max-width:68ch}
.prose h2{font-size:clamp(1.75rem,3vw,2.3rem);margin:1.6em 0 .55em;scroll-margin-top:100px}
.prose>h2:first-child{margin-top:0}
.prose .timeline{grid-template-columns:1fr;font-family:var(--sans);font-size:1.08rem;margin-bottom:2em;line-height:1.5}
.prose .timeline__item{padding:12px 0 18px}
.prose .timeline__when{margin:0 0 .25em;font-size:1.3rem}
.prose .timeline__what{max-width:none}
.prose img{height:auto}
.entry-meta{font:400 1.08rem var(--sans);color:var(--muted)}
.entry-photo{margin:0 0 1.2em}
.entry-photo img{width:auto;max-height:70vh}
.next{display:block;border-top:1px solid var(--line);margin-top:2.4em;padding-top:1em;text-decoration:none;color:var(--ink);font-family:var(--sans)}
.next span{display:block;color:var(--muted);font-size:1.05rem}
.next strong{font:500 clamp(1.7rem,3vw,2.3rem)/1.2 var(--serif);color:var(--rose)}
.next:hover strong{color:var(--ink)}
.concerns{background:var(--chadar);color:#fff;padding:26px;align-self:start;position:sticky;top:104px}
.concerns__h{font-size:1.45rem;margin-bottom:.7em;color:var(--marigold)}
.concerns li{padding:.42em 0;border-top:1px solid #2D6F5F}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,6vw,88px);padding-block:clamp(36px,5vw,68px)}
.contact__h{font-size:1.5rem;margin:1.2em 0 .3em}
.contact__h:first-child{margin-top:0}
.contact__addr{margin-bottom:.6em}
.contact__social{display:flex;gap:1.3em;flex-wrap:wrap}
.form{background:var(--lime);padding:clamp(22px,4vw,44px)}
.form__h{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:.6em}
.form__hp{position:absolute;left:-9999px}
.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-weight:500;margin-bottom:.2em}
.field input,.field select,.field textarea{width:100%;font:inherit;color:var(--ink);padding:.6em .7em;background:var(--plaster);border:1px solid #7E978D;border-radius:0}
.btn{display:inline-block;background:var(--marigold);color:var(--chadar-deep);font:700 1.12rem var(--sans);padding:.72em 1.5em;border:0;text-decoration:none;cursor:pointer}
.btn:hover{background:#fff;color:var(--chadar-deep)}
.form .btn:hover{background:var(--chadar);color:#fff}
.btn--line{background:none;border:1px solid var(--chadar);color:var(--chadar)}
.btn--line:hover{background:var(--chadar);color:#fff}
.note{padding:.75em 1em;border-left:4px solid}
.note--ok{border-color:var(--chadar);background:var(--plaster)}
.note--err{border-color:var(--rose);background:var(--plaster)}

/* Team */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 28px}
.team__photo{aspect-ratio:3/4;clip-path:url(#kp-arch);background:var(--lime);overflow:hidden}
.team__photo img{width:100%;height:100%;object-fit:cover}
.team__name{font-size:1.6rem;margin-top:.6em}
.team__role{color:var(--muted);margin:.1em 0 .5em}

/* Write band and footer */
.write{background:var(--chadar);color:#fff;padding:clamp(40px,5vw,66px) 0}
.write__row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.write__h{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:.3em}
.write__addr{color:#CFE2D9}
.foot{background:var(--chadar-deep);color:#D3E4DC;padding-top:clamp(44px,5vw,70px);font-size:1.05rem}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{color:var(--marigold)}
.foot__grid{display:grid;grid-template-columns:1.35fr 1.3fr .9fr .8fr .7fr;gap:32px}
.foot__h{font:700 1.02rem var(--sans);color:var(--marigold);margin-bottom:.55em}
.foot__list li{padding:.13em 0}
.foot__addr{margin-bottom:.5em}
.foot__name{color:var(--marigold)}
.foot__name .urdu{font-size:1.1rem;text-align:left}
.foot__name .urdu__big{font-size:2em}
.foot__legal{margin-top:34px;padding-block:16px;background:linear-gradient(#1F5647,#1F5647) var(--gutter) 0/calc(100% - 2*var(--gutter)) 1px no-repeat;font-size:.97rem;color:#A9C6BA}

/* Editor content helpers */
.alignwide{max-width:none}
.aligncenter{margin-inline:auto}
.pagination,.navigation.pagination{margin-top:30px}
.nav-links{display:flex;gap:8px;flex-wrap:wrap}
.page-numbers{padding:.25em .8em;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.page-numbers.current{background:var(--chadar);color:#fff;border-color:var(--chadar)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (max-width:1040px){
	.foot__grid{grid-template-columns:repeat(2,1fr)}
	.foot__name{grid-column:1/-1}
	.timeline{grid-template-columns:repeat(2,1fr)}
	.strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
	.menu-btn{display:block}
	.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--plaster);border-bottom:1px solid var(--line);padding:6px var(--gutter) 18px;max-height:calc(100vh - 76px);overflow:auto}
	.nav.is-open{display:block}
	.nav__list{display:block}
	.nav__list>li{border-bottom:1px solid var(--line)}
	.nav__list a{padding:.65em 0}
	.nav__list>li>a{border-bottom:0}
	.nav .sub-menu{position:static;visibility:visible;opacity:1;border:0;padding:0 0 8px 16px;background:none}
	.nav .sub-menu a{padding:.32em 0;font-weight:400}
	.read,.read--haj{grid-template-columns:minmax(0,1fr)}
	.toc{position:static;max-height:none;background:var(--lime);padding:16px 18px}
	.concerns{position:static}
	.contact,.intro__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
	.hero__arcade{grid-template-columns:1fr 1fr}
	.arch--main{grid-column:1/-1;grid-row:1;height:min(112vw,540px)}
	.arch--side{height:min(76vw,330px)}
	.arch__text{padding:0 12px 14px}
	.arch__title{font-size:1.32rem}
	.arch__sub{font-size:.96rem}
	.urdu{font-size:1.25rem}
	.videos,.videos--home{grid-template-columns:minmax(0,1fr)}
	.timeline{grid-template-columns:minmax(0,1fr)}
	.reg__link{grid-template-columns:minmax(0,1fr) auto}
	.reg__period{grid-column:1/-1;padding:0}
	.reg__period:empty{display:none}
	.reg__thumb{width:64px;height:84px}
	.field-row{grid-template-columns:minmax(0,1fr)}
	.prose{font-size:1.18rem}
	.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.admin-bar .top{top:0}}
