/* =====================================================================================
   Inner pages (everything except the home page): the landing page's Islamic background
   (deep green, geometric tile, glow, hanging lanterns) and a calligraphy verse per page.
   ===================================================================================== */

/* ---- Page header: same background as the landing hero -------------------------------------------- */
body:not(.page-home):not(.page-welcome) .pagehead{
  position:relative;overflow:hidden;
  display:flex;align-items:center;min-height:8.5rem;
  background:
    radial-gradient(520px 260px at 84% 125%,rgba(23,115,85,.95),transparent 70%),
    radial-gradient(420px 240px at 6% -25%,rgba(15,90,67,.55),transparent 70%),
    #0b4b38;
  border-bottom:3px solid var(--gold-500);
}
body:not(.page-home):not(.page-welcome) .pagehead::before{opacity:.09}
body:not(.page-home):not(.page-welcome) .pagehead>.wrap{position:relative;z-index:2}
body:not(.page-home):not(.page-welcome) .pagehead--cal{min-height:7rem}

/* ---- Calligraphy ------------------------------------------------------------------------------------- */
.pagecal{
  margin:0;position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
  max-width:min(46%,520px);text-align:end;
}
.pagecal__ar{
  margin:0 0 .35rem;font-family:'Aref Ruqaa','Amiri','Noto Naskh Arabic',serif;font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.75;color:var(--gold-100,#f6e7b8);
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.pagecal__tr{margin:0;font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.78)}
.pagecal__tr [lang=ur]{font-family:var(--font-ur-ui);font-size:.9rem;line-height:1.9}
.pagecal__ref{color:var(--gold-500);font-weight:600;white-space:nowrap}
html[dir=rtl] .pagecal{text-align:start}

/* the header's own text keeps clear of the verse */
body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .wrap>*:not(.pagecal):not(.pagecal__lantern){max-width:50%}

/* ---- Lanterns (same artwork as the landing page, smaller) ------------------------------------------ */
.pagecal__lantern{
  position:absolute;top:0;width:clamp(26px,3vw,38px);height:auto;transform-origin:50% 0;
  animation:sway 5.5s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(226,176,74,.45));pointer-events:none;
}
.pagecal__lantern--a{inset-inline-end:calc(min(46%,520px) + 1rem)}
.pagecal__lantern--b{inset-inline-end:calc(min(46%,520px) + 4.2rem);animation-delay:-2.7s;transform:scale(.8)}
.pagehead>.wrap{--cal-top:0}
body:not(.page-home):not(.page-welcome) .pagehead>.wrap .pagecal__lantern{top:calc(-1 * 1.05rem)}
@media (prefers-reduced-motion:reduce){.pagecal__lantern{animation:none}}

@media (max-width:860px){
  body:not(.page-home):not(.page-welcome) .pagehead{display:block;min-height:0;padding-bottom:1.1rem}
  .pagecal{position:static;transform:none;max-width:none;text-align:start;margin-top:.7rem}
  .pagecal__ar{font-size:1.5rem;text-align:start}
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .wrap>*:not(.pagecal):not(.pagecal__lantern){max-width:none}
  .pagecal__lantern{display:none}
}

/* ---- Page body: the same geometric tile, very soft, behind the content ---------------------------- */
body:not(.page-home):not(.page-welcome) main{
  position:relative;
  background-color:var(--bg);background-image:var(--tile-dark);background-size:72px;
}
body:not(.page-home):not(.page-welcome) main::before{
  content:"";position:absolute;inset:0;background:var(--bg);opacity:.96;pointer-events:none;
}
/* keep sticky bars (e.g. the transparency sub-menu) sticky; everything else sits above the tile overlay */
body:not(.page-home):not(.page-welcome) main>*:not(.tsub){position:relative}
/* ---- No sideways overflow on narrow screens ---------------------------------------------------------- */
body:not(.page-home):not(.page-welcome){overflow-x:clip}
.chart{grid-template-columns:repeat(12,minmax(0,1fr))}
.chart__col{min-width:0}
.chart small{max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap;font-size:.65rem}
@media (max-width:480px){.chart{gap:.2rem}.chart small{font-size:.58rem}}

/* ---- Section edges: tinted bands fade in and out instead of stopping the pattern with a hard line --------- */
body:not(.page-home):not(.page-welcome) .section--tint,
body:not(.page-home):not(.page-welcome) .section--pattern,
body:not(.page-home):not(.page-welcome) .section--tile{
  background:linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb,var(--tint) 82%,transparent) 80px,
    color-mix(in srgb,var(--tint) 82%,transparent) calc(100% - 80px),
    transparent 100%);
}
body:not(.page-home):not(.page-welcome) .section--pattern::before,
body:not(.page-home):not(.page-welcome) .section--tile::before{display:none}

/* About page letter: runs the full width of the page container */
.about-letter,.wrap.about-letter{max-width:none;width:min(var(--wrap-max,1160px),100% - 2*var(--gutter,1.5rem))}
.about-letter p{max-width:none}

/* Page-header verse: Amiri for the Arabic, Urdu and English translations stacked beneath */
.pagecal__ar{font-family:'Amiri','Noto Naskh Arabic',serif;font-weight:700;font-size:clamp(1.55rem,2.7vw,2.25rem);line-height:1.8}
.pagecal__tr{display:grid;gap:.1rem}
.pagecal__ur{font-family:var(--font-ur);font-size:.95rem;line-height:1.95;color:rgba(255,255,255,.88);text-align:end}
.pagecal__en{font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.75);text-align:end}
.pagecal__tr [lang=ur]{font-size:.95rem}
html[dir=rtl] .pagecal__ur,html[dir=rtl] .pagecal__en{text-align:start}
@media (max-width:860px){.pagecal__ur,.pagecal__en{text-align:start}.pagecal__ur{text-align:right}}

/* More breathing room above and below the header content and verse */
body:not(.page-home):not(.page-welcome) .pagehead{padding-block:1.75rem 1.6rem;min-height:9.5rem}
body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal)>.wrap{min-height:7.6rem;display:flex;flex-direction:column;justify-content:center}
body:not(.page-home):not(.page-welcome) .pagehead--cal{padding-block:2.1rem 1.9rem}
body:not(.page-home):not(.page-welcome) .pagehead>.wrap .pagecal__lantern{top:calc(-1 * 1.75rem)}
@media (max-width:860px){
  body:not(.page-home):not(.page-welcome) .pagehead{min-height:0;padding-block:1.6rem 1.5rem}
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal)>.wrap{min-height:0;display:block}
  .pagecal{margin-top:1rem}
  body:not(.page-home):not(.page-welcome) .pagehead--cal .pagecal{margin-top:0}
}

/* Phones: title first, verse beneath it */
@media (max-width:860px){
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal)>.wrap{display:flex;flex-direction:column}
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .pagecal{order:99;margin-top:1.1rem}
  body:not(.page-home):not(.page-welcome) .pagehead{padding-block:1.9rem 1.7rem}
}

/* ---- Final header sizing: back to the compact height; each translation stays on one line ---------------- */
@media (min-width:861px){
  body:not(.page-home):not(.page-welcome) .pagehead{padding-block:1.05rem;min-height:8.5rem}
  body:not(.page-home):not(.page-welcome) .pagehead--cal{padding-block:1.4rem;min-height:7rem}
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal)>.wrap{min-height:0;display:block}
  body:not(.page-home):not(.page-welcome) .pagehead>.wrap .pagecal__lantern{top:calc(-1 * 1.05rem)}
  .pagecal{max-width:min(62%,680px)}
  .pagecal__lantern--a{inset-inline-end:calc(min(62%,680px) + 1rem)}
  .pagecal__lantern--b{inset-inline-end:calc(min(62%,680px) + 4.2rem)}
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .wrap>*:not(.pagecal):not(.pagecal__lantern){max-width:34%}
}
.pagecal__ar{font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.65;margin-bottom:.25rem}
.pagecal__ur,.pagecal__en{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pagecal__ur{font-size:.9rem;line-height:1.8}
.pagecal__en{font-size:.76rem}
@media (max-width:860px){
  body:not(.page-home):not(.page-welcome) .pagehead{padding-block:1.4rem 1.3rem}
  .pagecal__ur,.pagecal__en{white-space:normal}   /* narrow screens may wrap */
}

/* lanterns sit in the gap between the title and the verse; header text is limited to two lines so the header keeps its height */
@media (min-width:861px){
  .pagecal{max-width:min(58%,660px)}
  .pagecal__lantern--a{inset-inline-end:calc(min(58%,660px) + .5rem)}
  .pagecal__lantern--b{inset-inline-end:calc(min(58%,660px) + 3rem)}
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .wrap>p:not(.eyebrow):not(.pagecal__ar){
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
}

/* Verse translations: Urdu and English together on ONE line (English · reference | Urdu) */
@media (min-width:861px){
  .pagecal{max-width:min(66%,760px)}
  .pagecal__lantern--a{inset-inline-end:calc(min(66%,760px) + .5rem)}
  .pagecal__lantern--b{inset-inline-end:calc(min(66%,760px) + 3rem)}
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .wrap>*:not(.pagecal):not(.pagecal__lantern){max-width:28%}
  .pagecal__tr{display:flex;direction:ltr;justify-content:flex-end;align-items:center;gap:0 .9rem;white-space:nowrap}
  .pagecal__en{font-size:.72rem;max-width:none;overflow:visible;text-align:end}
  .pagecal__ur{font-size:.84rem;line-height:1.7;max-width:none;overflow:visible;padding-inline-start:.9rem;border-inline-start:1px solid rgba(255,255,255,.28)}
  html[dir=rtl] .pagecal__tr{justify-content:flex-start}
}
@media (min-width:861px){
  .pagecal__en{font-size:calc(.74rem * var(--trs,1))}
  .pagecal__ur{font-size:calc(.86rem * var(--trs,1))}
}

/* ---- Verse block: wider so both translations fit on one line; the Arabic is right-aligned ------------------ */
.pagehead>.wrap{--calw:min(70%,800px)}
.pagecal__ar{text-align:right}
@media (min-width:861px){
  .pagecal{max-width:var(--calw)}
  .pagecal__lantern--a{inset-inline-end:calc(var(--calw) + .5rem)}
  .pagecal__lantern--b{inset-inline-end:calc(var(--calw) + 2.8rem)}
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .wrap>*:not(.pagecal):not(.pagecal__lantern){max-width:26%}
  .pagecal__en{font-size:calc(.78rem * var(--trs,1))}
  .pagecal__ur{font-size:calc(.9rem * var(--trs,1))}
}
@media (max-width:860px){.pagecal__ar{text-align:right}}

/* ---- About page: "Dear friend," in a handwritten face ---------------------------------------------------------- */
.about-letter__hello{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:700;font-size:2.2rem;line-height:1.2;color:var(--green-800,#0b4b38);margin:0 0 .6rem}
html.is-ur .about-letter__hello{font-family:var(--font-ur);font-weight:400;font-size:1.7rem;line-height:1.8}
@media (min-width:861px){
  body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .wrap>h1:not(.pagecal):not(.pagecal__lantern){max-width:42%}
}
/* About's title matches every other page header */
body:not(.page-home) .about-hero h1{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.25}

/* Lanterns hang beside the verse itself (inside its block), so they never land on the title */
@media (min-width:861px){
  .pagecal__lantern--a{inset-inline-end:auto;inset-inline-start:-2.6rem}
  .pagecal__lantern--b{inset-inline-end:auto;inset-inline-start:-5.4rem}
  body:not(.page-home):not(.page-welcome) .pagehead>.wrap .pagecal__lantern{top:-30px}
}

/* ---- B: large faint phrase at the top right of the page body, under the header ------------------------------- */
.pagewm{position:relative;height:0;z-index:0;pointer-events:none;overflow:visible}
.pagewm span{
  position:absolute;top:.4rem;inset-inline-end:max(1.5rem,calc((100% - var(--wrap-max,1160px))/2));
  font-family:'Aref Ruqaa','Amiri',serif;font-weight:700;font-size:clamp(5rem,13vw,11rem);line-height:1.25;
  color:var(--green-800,#0b4b38);opacity:.07;white-space:nowrap;user-select:none;
}
html[dir=rtl] .pagewm span{inset-inline-end:auto;inset-inline-start:max(1.5rem,calc((100% - var(--wrap-max,1160px))/2))}
@media (max-width:640px){.pagewm span{font-size:5rem;top:0}}
/* physical sides (the phrase itself is right-to-left, so logical insets would flip it) */
.pagewm span{inset-inline-end:auto;inset-inline-start:auto;left:auto;right:max(1.5rem,calc((100% - var(--wrap-max,1160px))/2))}
html[dir=rtl] .pagewm span{right:auto;left:max(1.5rem,calc((100% - var(--wrap-max,1160px))/2))}
/* Funded-by cells on the project page ledger */
.tx-fund{white-space:normal}
.tx-giver{display:inline-flex;align-items:baseline;gap:6px;margin:0 8px 2px 0;font-size:.8rem}
.tx-giver code{font-size:.78rem;background:var(--green-100,#e3f1ea);color:#0b4b38;border-radius:6px;padding:1px 6px;font-weight:700}
.tx-giver small{color:var(--muted);font-size:.7rem}
.tx-giver em{font-style:normal;color:var(--muted);font-size:.74rem;font-variant-numeric:tabular-nums}
.tx-giver.is-anon{color:var(--muted);font-style:italic}
.tx-giver--more{background:var(--tint,#f3efe4);border-radius:99px;padding:0 8px;font-weight:700;color:var(--muted);cursor:help}
@media (max-width:720px){td.tx-fund{text-align:start}}

/* watermark phrase sits higher, tucked just under the header */
.pagewm span{top:-2.2rem}
@media (max-width:640px){.pagewm span{top:-1.2rem}}

/* Compact header (Ways to give) */
body:not(.page-home):not(.page-welcome) .pagehead.pagehead--slim{min-height:0;padding-block:1.1rem 1rem}
.pagehead--slim h1{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:0}
.pagehead--slim .eyebrow{margin-bottom:.15rem}
body:not(.page-home):not(.page-welcome) .pagehead.pagehead--slim{min-height:7.5rem;padding-block:1.9rem 1.4rem}

/* Events page: upcoming on the left, past events on the right */
.evpage{display:grid;gap:2rem;align-items:start}
@media (min-width:980px){.evpage{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem}}
.evpage__col{min-width:0}
.evpage .h-sub{margin-top:0}
.evpage__n{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .4rem;margin-inline-start:.5rem;border-radius:99px;background:var(--green-100,#e3f1ea);color:#0b4b38;font:700 .78rem/1 var(--font-body,inherit);vertical-align:middle}
.evpage .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:640px){.evpage .pgrid{grid-template-columns:minmax(0,1fr)}}
.evpage .pgrid:has(>:only-child){grid-template-columns:minmax(0,1fr)}

/* ---- Compact header with even space above and below every line of text ---- */
@media (min-width:861px){
  body:not(.page-home):not(.page-welcome) .pagehead,
  body:not(.page-home):not(.page-welcome) .pagehead--cal{padding-block:1.3rem;min-height:6.75rem}
  body:not(.page-home):not(.page-welcome) .pagehead>.wrap{display:flex;flex-direction:column;justify-content:center;min-height:0}
  body:not(.page-home):not(.page-welcome) .pagehead>.wrap .pagecal__lantern{top:-1.3rem}
  .pagehead .eyebrow{margin:0 0 .2rem}
  .pagehead h1{margin:0;line-height:1.2}
  .pagehead .ur--hero{margin:.15rem 0 0}
  .pagecal__ar{line-height:1.5;margin-bottom:.1rem}
  .pagecal__tr{line-height:1.4}
}
@media (max-width:860px){
  body:not(.page-home):not(.page-welcome) .pagehead{padding-block:1.3rem}
}

/* Watermark calligraphy: small enough to sit in the gap under the header, not behind the cards */
.pagewm span{font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1.2;top:-.1rem}
@media (max-width:640px){.pagewm span{font-size:2.4rem;top:0}}
.pagewm span{font-size:calc(clamp(2.4rem,4.4vw,3.6rem) + 5px)}
@media (max-width:640px){.pagewm span{font-size:calc(2.4rem + 5px)}}

/* Donor account header: name on one row, small buttons beside it */
.pagehead__who{min-width:0;max-width:min(58%,640px)}
.pagehead__line{display:flex;align-items:center;gap:.8rem;flex-wrap:nowrap}
.pagehead__line h1{margin:0;white-space:nowrap;font-size:clamp(1.15rem,2vw,1.5rem);overflow:hidden;text-overflow:ellipsis;min-width:0}
.pagehead__line .pagehead__actions{flex:none;gap:.35rem}
.pagehead__line .btn{padding:.08rem .6rem;font-size:.74rem;line-height:1.5;min-height:0;height:auto;white-space:nowrap}
@media (max-width:860px){.pagehead__who{max-width:none}.pagehead__line{flex-wrap:wrap}.pagehead__line h1{white-space:normal}}
.pagehead__who{flex:1 1 100%;width:min(58%,640px)}
.pagehead__line h1{flex:0 1 auto}
@media (max-width:860px){.pagehead__who{width:100%;max-width:none}.pagehead__line h1{white-space:nowrap}}
/* Donor account header: wider title area (name on one line), compact buttons on the next line */
body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .wrap>.pagehead__who{max-width:40%;width:auto;flex:none}
.pagehead__line{flex-direction:column;align-items:flex-start;gap:.25rem}
.pagehead__line h1{max-width:100%}
@media (max-width:860px){body:not(.page-home):not(.page-welcome) .pagehead:not(.pagehead--cal) .wrap>.pagehead__who{max-width:none;width:100%}}
.pagehead .wrap>.pagehead__who{max-width:42%!important;width:auto}
.pagehead__line h1{white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;font-size:clamp(1.05rem,1.8vw,1.4rem)}
@media (max-width:860px){.pagehead .wrap>.pagehead__who{max-width:100%!important}}

/* Greetings in handwriting (English; Urdu keeps its own face) */
html:not(.is-ur) .pagehead__line h1,
html:not(.is-ur) .dp-greet__salam{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:700;letter-spacing:0}
html:not(.is-ur) .pagehead__line h1{font-size:clamp(1.5rem,2.4vw,1.9rem)!important;line-height:1.1}
html:not(.is-ur) .dp-greet__salam{font-size:1.35rem}
.pagehead__name{color:var(--gold-500,#e2b04a)}

/* ---- About: the letter is written by hand: handwriting face, normal weight, no bold ---- */
.about-letter,.about-letter p{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:400;font-size:1.55rem;line-height:1.5;color:var(--ink)}
.about-letter p{margin:0 0 .9rem}
.about-letter__hello{font-weight:400;font-size:2.3rem;line-height:1.2;margin:0 0 .5rem}
.about-letter__sign{font-size:1.5rem;color:var(--green-800,#0b4b38);border-top:0;padding-top:0;margin-top:1.2rem}
.about-letter__sign span{font-weight:400;font-size:1.7rem;color:var(--green-700,#0f5a43)}
html.is-ur .about-letter,html.is-ur .about-letter p{font-family:var(--font-ur);font-weight:400;font-size:1.2rem;line-height:2.3}
html.is-ur .about-letter__hello{font-size:1.5rem;line-height:2}
html.is-ur .about-letter__sign span{font-size:1.2rem}
@media (max-width:700px){
  .about-letter,.about-letter p{font-size:1.35rem}
  .about-letter__hello{font-size:2rem}
  html.is-ur .about-letter,html.is-ur .about-letter p{font-size:1.05rem}
}

/* "How we keep your trust": full width, heading on the left */
.about-promise-band .wrap.about-promise{max-width:none;width:calc(100% - 2*var(--gutter,1.5rem))}
.about-promise-band .section__head{text-align:start}
/* "Four moments": heading on the left */
.about-moments-band .section__head{text-align:start}
.about-moments-band .section__head .eyebrow{justify-content:flex-start}
.about-letter,.wrap.about-letter{width:min(60rem,100% - 2*var(--gutter,1.5rem));margin-inline:auto}

/* About: "When we show up" lines up with "How we keep your trust" and uses the same card design */
.about-moments-band .wrap{max-width:none;width:calc(100% - 2*var(--gutter,1.5rem));margin-inline:auto}
.about-promise-band .wrap.about-promise{margin-inline:auto}
.about-moments-band .moments{gap:.7rem}
.moment{border:1px solid var(--line);border-inline-start:1px solid var(--line);border-top:1px solid var(--line);background:var(--surface,#fff);box-shadow:var(--shadow)}
.moment__icon{background:var(--green-100);color:var(--green-700)}
.moment h3,.moment p{text-align:start}
.moment h3{font-family:var(--font-head);font-weight:700}

/* About: promise + moments sit in the same column as the letter, and their cards share one width */
.about-promise-band .wrap.about-promise,.about-moments-band .wrap{width:min(60rem,100% - 2*var(--gutter,1.5rem));max-width:none;margin-inline:auto}
.about-promise-band .grid--3,.about-moments-band .moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
@media (max-width:820px){.about-promise-band .grid--3,.about-moments-band .moments{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.about-promise-band .grid--3,.about-moments-band .moments{grid-template-columns:1fr}}

/* About: "Together, so far" cards get the same soft shadow as the other cards */
.together li{box-shadow:var(--shadow)}
.wrap.about-together{width:min(60rem,100% - 2*var(--gutter,1.5rem));max-width:none;margin-inline:auto}

/* Ways to give: the Arabic watermark sits a little further right and has its own room above the cards, so the whole word shows */
main:has(.gs2) .pagewm span{right:max(.5rem,calc(max(1.5rem,calc((100% - var(--wrap-max,1160px))/2)) - 2.2rem))}
main:has(.gs2) .gs2{margin-top:2.2rem}
html[dir=rtl] main:has(.gs2) .pagewm span{right:auto;left:max(.5rem,calc(max(1.5rem,calc((100% - var(--wrap-max,1160px))/2)) - 2.2rem))}

/* ---- Events page: same photo-first pair as the home page, then more upcoming rows and earlier events ---- */
main .evc{display:grid;gap:24px;align-items:stretch}
@media (min-width:1000px){main .evc{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
main .evc__lead,main .evc__next{min-width:0;display:flex;flex-direction:column}
main .evc__lead .pevent{flex:1;height:100%}
main .evc__lead .pevent__media{aspect-ratio:auto;flex:1 1 auto;min-height:300px}
main .evc__next .efeature{flex:1;grid-template-columns:minmax(0,1fr);gap:16px;padding:24px;align-content:center}
main .evc__next .efeature>.eyebrow{margin:0}
main .evc__next .efeature__date{display:flex;align-items:center;gap:14px;text-align:start}
main .evc__next .efeature__date p{margin:0;font-size:1rem}
main .evpage__up{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px}
main .evpage__past{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}

/* ---- Events page: filterable card grid ---- */
.evf__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin:0 0 .9rem}
.evf__pills{display:flex;flex-wrap:wrap;gap:.5rem}
.evf__pills--cats{margin:0 0 1.25rem}
.evf__pill{font:inherit;font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .95rem;border:1px solid var(--line);border-radius:99px;background:var(--surface,#fff);color:var(--ink,inherit)}
.evf__pill em{font-style:normal;font-size:.72rem;padding:.05rem .5rem;border-radius:99px;background:rgba(127,127,127,.18)}
.evf__pill:hover{border-color:var(--gold-500,#c9962b)}
.evf__pill.is-on{background:var(--green-800,#0b4b38);border-color:var(--green-800,#0b4b38);color:#fff}
.evf__search{margin-inline-start:auto;min-width:min(100%,260px)}
.evf__search input{width:100%;font:inherit;font-size:.9rem;padding:.45rem 1rem;border:1px solid var(--line);border-radius:99px;background:var(--surface,#fff);color:inherit}
.evf__grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.evf__grid .pevent[hidden]{display:none}
.evf__grid .pevent__media{aspect-ratio:16/10}
.evf__empty{margin-top:1rem}

/* Whole card is the link: the title link covers the card */
.evcard{position:relative;cursor:pointer}
.evcard .pevent__body h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.evcard:hover{border-color:var(--gold-500,#c9962b)}
.evcard:focus-within{outline:2px solid var(--gold-500,#c9962b);outline-offset:2px}

/* Event page: space between the album and the related-project button */
.detail__main .gal{margin-bottom:0}
.detail__main .evrel{margin:1.75rem 0 0}

/* Event page: related project as a boxed card (name + status stand out) */
.evproj{display:grid;gap:.35rem;margin:1.75rem 0 0;padding:1rem 1.25rem;border:1px solid rgba(201,150,43,.55);border-inline-start:5px solid var(--gold-500,#c9962b);border-radius:14px;background:rgba(226,176,74,.1);color:inherit;text-decoration:none}
.evproj__lab{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600,#a8741a)}
.evproj__name{font-size:1.25rem;line-height:1.3}
.evproj__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.15rem}
.evproj__go{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;color:var(--gold-600,#a8741a)}
.evproj--link:hover{border-color:var(--gold-500,#c9962b);background:rgba(226,176,74,.18)}
.evproj--link:hover .evproj__go{text-decoration:underline}
.detail__main .evproj{margin:1.25rem 0}
.detail__main .evproj + .gal{margin-top:0}

/* Related-project card: compact, name and status on one line */
.detail__main .evproj{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .75rem;margin:1rem 0;padding:.55rem .9rem;border-radius:12px;border-inline-start-width:4px}
.detail__main .evproj__lab{flex-basis:100%;font-size:.64rem}
.detail__main .evproj__name{font-size:1.02rem;line-height:1.3}
.detail__main .evproj__meta{margin:0;margin-inline-start:auto;gap:.6rem}
.detail__main .evproj__go{font-size:.82rem}

/* Event page: album sits in a bordered frame */
.detail__main .gal{padding:14px;border:1px solid rgba(201,150,43,.55);border-radius:14px;margin:0 0 1rem}

/* Transparency: report tables inside cards */
.tx .tx-kpis + .tx-card{margin-top:1.25rem}
.tx-led>h3{margin:0;padding:1rem 1.25rem 0;font-size:1.05rem}
.tx-led>.tx-sub{margin:.2rem 0 0;padding:0 1.25rem .75rem}
.tx-led>.note{margin:0;padding:.75rem 1.25rem 1rem}
.tx-led tfoot th{font-weight:700;border-top:2px solid var(--line)}

/* Donor login pages: the full logo replaces mark + text */
.adl__brand .brandfull,.login__brand .brandfull{height:56px;width:auto;max-width:100%;filter:none;margin:0}
.adl__brand .brandfull,.login__brand .brandfull{height:72px}