/* ============================================================
   House of Afghanistan — Site pages (shared)
   Loads AFTER home/home.css. Adds: utility nav, breadcrumbs,
   generic page chrome, timeline, pillars, member tiers, etc.
   ============================================================ */

/* ---- two-tier nav: utility strip above the main bar ---- */
.nav__util { background: rgba(21,36,47,.92); border-bottom: 1px solid rgba(199,164,104,.12); }
.nav.is-scrolled .nav__util { display: none; }
.nav__util-in { max-width: var(--maxw); margin: 0 auto; padding: 8px 40px; display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.nav__util-in a { font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-mut); transition: color .25s; }
.nav__util-in a:hover { color: var(--champagne-soft); }
.nav__util-give { color: var(--champagne) !important; display: inline-flex; align-items: center; gap: 7px; }
.nav__util-give::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--champagne); }
.nav__links--wide { gap: 22px; }
.nav__links--wide .nav__link { font-size: 10.5px; letter-spacing: .16em; }

/* page body sits below the taller (two-tier) fixed nav */
.page { background: var(--slate-deep); }

/* ---- page hero ---- */
.phero { padding: 168px 40px 0; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 120% 150% at 50% -30%, var(--slate-lift) 0%, var(--slate) 42%, var(--slate-deep) 78%, var(--slate-deeper) 100%); }
.phero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(199,164,104,.4) 18%, rgba(199,164,104,.4) 82%, transparent); pointer-events: none; }
.phero__inner { max-width: var(--maxw); margin: 0 auto; position: relative; }

/* ---- breadcrumbs ---- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-family: var(--caps); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-mut); padding: 6px 0 26px; }
.crumbs a { color: var(--on-dark-mut); transition: color .25s; }
.crumbs a:hover { color: var(--champagne-soft); }
.crumbs__sep { color: rgba(199,164,104,.55); }
.crumbs__here { color: var(--champagne); }

.phero__head { display: flex; flex-direction: column; gap: 22px; max-width: 940px; padding: clamp(40px,5vw,68px) 0 clamp(52px,7vw,96px); position: relative; }
.phero__head::before { content: ""; display: block; width: 54px; height: 1px; background: var(--champagne); margin-bottom: 4px; }
.phero__head--center { align-items: center; text-align: center; margin: 0 auto; }
.phero__head--center::before { margin-inline: auto; }
.phero__eyebrow { font-family: var(--caps); font-weight: 500; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--champagne); }
.phero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(44px,6.4vw,88px); line-height: 1.0; letter-spacing: -.035em; color: var(--ivory); }
.phero__title em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.phero__lead { font-family: var(--serif); font-size: clamp(19px,2vw,23px); line-height: 1.6; color: var(--on-dark-mut); max-width: 56ch; }

/* ---- ghosted Farsi "words as texture" behind page headers ---- */
.phero__fa { position: absolute; top: 50%; right: 3%; transform: translateY(-50%);
  font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: clamp(120px, 17vw, 250px);
  line-height: 1; direction: rtl; white-space: nowrap; color: rgba(236,233,226,.12);
  pointer-events: none; user-select: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to left, #000 86%, transparent 100%);
  mask-image: linear-gradient(to left, #000 86%, transparent 100%); }
.phero__fa--center { right: auto; left: 50%; transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(ellipse 92% 100% at 50% 50%, #000 72%, transparent 98%);
  mask-image: radial-gradient(ellipse 92% 100% at 50% 50%, #000 72%, transparent 98%); }
.phero .crumbs, .phero__head { position: relative; z-index: 1; }
@media (max-width: 720px) { .phero__fa { font-size: clamp(120px, 38vw, 220px); opacity: .85; } }

/* ---- generic section ---- */
.psec { max-width: var(--maxw); margin: 0 auto; padding: clamp(64px,9vw,120px) 40px; }
.psec--cream { background: var(--cream); }
.psec--cream-wrap { background: var(--cream); }
.psec--cream-wrap .psec { background: none; }
.psec__head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin-bottom: clamp(40px,5vw,60px); }
.psec__head--center { align-items: center; text-align: center; margin-inline: auto; }
.psec__eyebrow { font-family: var(--caps); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); display: inline-flex; align-items: center; gap: 12px; }
.psec__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--champagne); }
.psec__title { font-family: var(--serif); font-weight: 500; font-size: clamp(30px,4vw,50px); line-height: 1.08; letter-spacing: -.02em; color: var(--ivory); }
.psec__title em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.psec--cream .psec__title, .psec--cream-wrap .psec__title { color: var(--ink); }
.psec--cream .psec__eyebrow, .psec--cream-wrap .psec__eyebrow { color: var(--champagne-deep); }
.psec--cream .psec__eyebrow::before, .psec--cream-wrap .psec__eyebrow::before { background: var(--champagne-deep); }
.psec__intro { font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--on-dark-mut); }
.psec--cream .psec__intro, .psec--cream-wrap .psec__intro { color: var(--ink-mut); }

/* ---- long-form prose ---- */
.prose-col { max-width: 720px; margin: 0 auto; }
.prose-col p { font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--ivory); margin-bottom: 24px; }
.prose-col--ink p { color: var(--ink); }
.prose-col h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--ivory); margin: 40px 0 14px; }
.prose-col--ink h3 { color: var(--ink); }
.prose-col h3 em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.prose-col--ink h3 em { color: var(--champagne-deep); }

/* ---- symbolism: meaning of the marks ---- */
.sym__intro { font-family: var(--serif); font-size: clamp(20px,2.4vw,27px); line-height: 1.55; color: var(--on-dark-mut); max-width: 30ch; margin: 2px 0 clamp(48px,6vw,76px); }
.sym__duo { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px,6vw,88px); align-items: center; margin-bottom: clamp(56px,8vw,104px); }
.sym__mark { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sym__mark::before { content: ""; position: absolute; top: -6%; left: 50%; transform: translateX(-50%); width: 86%; aspect-ratio: 1; border-radius: 999px; background: radial-gradient(circle at 50% 42%, rgba(199,164,104,.16), transparent 64%); pointer-events: none; }
.sym__mark img { position: relative; width: min(100%, 340px); aspect-ratio: 1; object-fit: contain; }
.sym__mark figcaption { position: relative; font-family: var(--caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.sym__duo-text { display: flex; flex-direction: column; gap: clamp(28px,4vw,40px); }
.sym__item { border-left: 1px solid rgba(199,164,104,.32); padding-left: clamp(20px,2.4vw,30px); }
.sym__item h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px,3vw,34px); line-height: 1.1; color: var(--ivory); margin-bottom: 12px; }
.sym__item h3 em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.sym__item p { font-family: var(--serif); font-size: clamp(17px,1.8vw,19px); line-height: 1.72; color: var(--on-dark-mut); }

.sym__reed { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(199,164,104,.2); min-height: 440px; }
.sym__reed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.sym__reed::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 72% 82% at 50% 46%, rgba(30,51,64,.86) 0%, rgba(30,51,64,.56) 48%, transparent 80%); pointer-events: none; }
.sym__reed-cap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: clamp(48px,7vw,84px) clamp(28px,5vw,64px); min-height: 440px; box-sizing: border-box; }
.sym__reed-cap h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px,3.8vw,46px); line-height: 1; color: var(--ivory); }
.sym__reed-cap h3 em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.sym__reed-cap p { max-width: 60ch; font-family: var(--serif); font-size: clamp(16px,1.7vw,20px); line-height: 1.72; color: var(--ivory); opacity: .94; }
.sym__reed-cap p em { font-style: italic; color: var(--champagne-soft); }
.sym__reed-fa { font-family: 'Noto Nastaliq Urdu', serif; font-weight: 500; font-size: clamp(26px,3.4vw,42px); line-height: 2; color: var(--champagne-soft); direction: rtl; margin-top: 6px; }
.sym__reed-sign { font-family: var(--caps); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--champagne); }
@media (max-width: 760px) {
  .sym__duo { grid-template-columns: 1fr; }
  .sym__mark img { width: min(72%, 280px); }
}

/* ---- patrons / founders honor wall ---- */
.pat-intro { max-width: 62ch; font-family: var(--serif); font-size: clamp(19px,2.1vw,24px); line-height: 1.6; color: var(--on-dark-mut); margin-top: 2px; }
.pat-intro em { font-style: italic; color: var(--champagne-soft); }

.pat-seal { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 9px 18px; border: 1px solid rgba(199,164,104,.4); border-radius: 999px; font-family: var(--caps); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.pat-seal::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--champagne); }

.pat-stones { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,2vw,24px); margin-top: clamp(40px,5vw,60px); }
.pat-stone { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(199,164,104,.22); background: linear-gradient(168deg, var(--slate-lift) 0%, var(--slate-deep) 100%); padding: clamp(30px,3vw,44px) 20px clamp(26px,3vw,36px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s; }
.pat-stone::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(to right, transparent, var(--champagne), transparent); opacity: .7; }
.pat-stone:hover { transform: translateY(-5px); border-color: rgba(199,164,104,.5); box-shadow: 0 24px 50px -30px rgba(0,0,0,.7); }
.pat-stone__over { font-family: var(--caps); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); }
.pat-stone__name { font-family: var(--serif); font-weight: 500; font-size: clamp(26px,2.6vw,34px); line-height: 1.05; letter-spacing: -.01em; color: var(--ivory); }
.pat-stone__rule { width: 26px; height: 1px; background: rgba(199,164,104,.55); }
.pat-stone__meta { font-family: var(--caps); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-mut); }

/* named circles (registry) */
.pat-circles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px,2vw,22px); margin-top: clamp(36px,4vw,52px); }
.pat-circle { position: relative; border: 1px solid rgba(43,74,92,.16); border-radius: 14px; background: #fff; padding: clamp(26px,3vw,38px); display: flex; flex-direction: column; gap: 14px; transition: border-color .5s, box-shadow .5s, transform .5s; }
.pat-circle:hover { border-color: rgba(169,138,85,.45); box-shadow: 0 22px 44px -32px rgba(43,74,92,.5); transform: translateY(-3px); }
.pat-circle__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pat-circle__name { font-family: var(--serif); font-weight: 500; font-size: clamp(24px,2.6vw,30px); color: var(--ink); }
.pat-circle__amt { font-family: var(--caps); font-size: 12px; letter-spacing: .12em; color: var(--champagne-deep); white-space: nowrap; }
.pat-circle__desc { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-mut); }
.pat-circle__roster { margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(43,74,92,.12); font-family: var(--caps); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne-deep); display: flex; align-items: center; gap: 10px; }
.pat-circle__roster::before { content: ""; width: 6px; height: 6px; border-radius: 999px; border: 1px solid var(--champagne-deep); }
.pat-circle--open .pat-circle__roster { color: var(--ink-soft, #6b6256); }

@media (max-width: 860px) { .pat-stones { grid-template-columns: repeat(2, 1fr); } .pat-circles { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .pat-stones { grid-template-columns: 1fr; } }

/* open invitation slot */
.pat-invite { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(16px,2vw,24px); padding: clamp(22px,2.6vw,32px) clamp(26px,3vw,40px); border: 1px dashed rgba(199,164,104,.5); border-radius: 12px; text-decoration: none; transition: border-color .5s, background .5s; }
.pat-invite:hover { border-color: var(--champagne); background: rgba(199,164,104,.06); }
.pat-invite__l { font-family: var(--serif); font-size: clamp(20px,2.3vw,28px); color: var(--ivory); }
.pat-invite__l em { font-style: italic; color: var(--champagne-soft); }
.pat-invite__cta { font-family: var(--caps); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); white-space: nowrap; }

/* ---- naming opportunities (Balboa-Park style named gifts) ---- */
.gift-group { margin-top: clamp(44px,5vw,68px); }
.gift-group__h { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(20px,2.4vw,28px); }
.gift-group__k { font-family: var(--caps); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); white-space: nowrap; }
.gift-group__line { flex: 1; height: 1px; background: linear-gradient(to right, rgba(199,164,104,.45), transparent); }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: clamp(14px,1.8vw,20px); }
.gift { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px,2.6vw,34px); border: 1px solid rgba(199,164,104,.18); border-radius: 14px; background: linear-gradient(168deg, rgba(255,255,255,.035), rgba(0,0,0,.07)); transition: border-color .5s, transform .5s, box-shadow .5s; }
.gift--named { border-color: rgba(199,164,104,.4); background: linear-gradient(168deg, rgba(199,164,104,.07), rgba(0,0,0,.06)); }
.gift--open { text-decoration: none; border-style: dashed; border-color: rgba(199,164,104,.4); }
.gift--open:hover { border-color: var(--champagne); transform: translateY(-4px); background: rgba(199,164,104,.05); box-shadow: 0 24px 48px -32px rgba(0,0,0,.7); }
.gift__name { font-family: var(--serif); font-weight: 500; font-size: clamp(22px,2.3vw,28px); line-height: 1.12; color: var(--ivory); }
.gift__name em { font-style: italic; color: var(--champagne-soft); }
.gift__desc { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--on-dark-mut); flex: 1; }
.gift__plate { margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(199,164,104,.16); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gift__by { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.25; color: var(--champagne-soft); }
.gift__by small { display: block; font-family: var(--caps); font-style: normal; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: 4px; }
.gift__open { font-family: var(--caps); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.gift__amt { font-family: var(--caps); font-size: 11px; letter-spacing: .08em; color: var(--on-dark-mut); white-space: nowrap; }
.gift-thanks { margin-top: clamp(48px,6vw,72px); padding-top: clamp(28px,3vw,36px); border-top: 1px solid rgba(199,164,104,.16); font-family: var(--serif); font-size: clamp(17px,1.9vw,21px); line-height: 1.6; color: var(--on-dark-mut); }
.gift-thanks b { color: var(--champagne-soft); font-weight: 500; }

/* ---- "made possible by" patron plaques ---- */
.madeby-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,1.8vw,20px); margin-top: clamp(36px,4vw,52px); }
.madeby { padding: clamp(30px,3.4vw,48px) 22px; border: 1px solid rgba(199,164,104,.3); border-radius: 12px; background: linear-gradient(168deg, rgba(199,164,104,.08), rgba(0,0,0,.06)); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: transform .5s, border-color .5s, box-shadow .5s; }
.madeby:hover { transform: translateY(-4px); border-color: rgba(199,164,104,.55); box-shadow: 0 24px 48px -30px rgba(0,0,0,.7); }
.madeby__k { font-family: var(--caps); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-mut); }
.madeby__rule { width: 22px; height: 1px; background: rgba(199,164,104,.55); }
.madeby__n { font-family: var(--serif); font-weight: 500; font-size: clamp(23px,2.5vw,33px); line-height: 1.08; color: var(--ivory); }
.madeby__n em { font-style: italic; color: var(--champagne-soft); }
.madeby--open { text-decoration: none; border-style: dashed; border-color: rgba(199,164,104,.45); background: transparent; }
.madeby--open:hover { border-color: var(--champagne); background: rgba(199,164,104,.05); transform: translateY(-4px); }
.madeby--open .madeby__k { color: var(--champagne); }
.madeby--open .madeby__n { color: var(--champagne-soft); }
@media (max-width: 760px) { .madeby-grid { grid-template-columns: repeat(2, 1fr); } }

/* the patrons' wall — framed, monumental, ever-living */
.patwall { margin-top: clamp(34px,4vw,50px); padding: clamp(26px,3.4vw,46px); border: 1px solid rgba(199,164,104,.32); border-radius: 18px; background: radial-gradient(ellipse 120% 90% at 50% 0%, rgba(199,164,104,.07), transparent 58%), linear-gradient(180deg, var(--slate-deep), var(--slate-deeper)); }
.patwall__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: clamp(14px,1.6vw,20px); }
.patwall__foot { margin-top: clamp(24px,3vw,34px); padding-top: clamp(20px,2.4vw,28px); border-top: 1px solid rgba(199,164,104,.16); text-align: center; font-family: var(--caps); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }

/* grant scale: 6 levels in two rows */
.tiers--grants { grid-template-columns: repeat(3, 1fr); }
.tier__give { font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--on-dark-mut); }

/* ---- donor families marquee (used on Home + Patrons) ---- */
.dmarq { background: var(--slate-deeper); padding: clamp(40px,5vw,66px) 0; border-top: 1px solid rgba(199,164,104,.14); border-bottom: 1px solid rgba(199,164,104,.14); overflow: hidden; }
.dmarq__eyebrow { text-align: center; font-family: var(--caps); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); margin: 0 0 clamp(26px,3vw,38px); }
.dmarq__legacy { display: block; text-align: center; font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.7; color: var(--on-dark-mut); margin: clamp(28px,3.4vw,42px) auto 0; max-width: 52ch; transition: color .3s; }
.dmarq__legacy:hover { color: var(--champagne-soft); }
.dmarq__legacy em { font-style: normal; color: var(--champagne); border-bottom: 1px solid rgba(199,164,104,.35); }

/* ---- families honor roll (static tribute) ---- */
.hon { background: radial-gradient(ellipse 100% 120% at 50% 0%, var(--slate-lift) 0%, var(--slate-deep) 52%, var(--slate-deeper) 100%); padding: clamp(76px,9vw,128px) 40px; position: relative; overflow: hidden; }
.hon__in { max-width: 1040px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.hon__crest { width: 52px; height: 52px; opacity: .9; margin-bottom: 22px; }
.hon__eyebrow { font-family: var(--caps); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--champagne); }
.hon__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px,4.4vw,56px); line-height: 1.04; letter-spacing: -.02em; color: var(--ivory); margin-top: 16px; }
.hon__title em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.hon__intro { font-family: var(--serif); font-size: clamp(17px,1.9vw,21px); line-height: 1.62; color: var(--on-dark-mut); max-width: 58ch; margin-top: 18px; }
.hon__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,2.6vw,40px) clamp(28px,4vw,64px); margin-top: clamp(44px,5.5vw,72px); width: 100%; }
.hon__name { position: relative; font-family: var(--serif); font-weight: 500; font-size: clamp(21px,2.2vw,28px); line-height: 1.2; letter-spacing: -.01em; color: var(--ivory); padding-top: 22px; }
.hon__name::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 1px; background: var(--champagne); opacity: .8; }
.hon__name em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.hon__sub { display: block; font-family: var(--caps); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-mut); margin-top: 7px; }
.hon__foot { font-family: var(--serif); font-style: italic; font-size: clamp(16px,1.8vw,20px); line-height: 1.5; color: var(--on-dark-mut); margin-top: clamp(44px,5vw,68px); }
.hon__cta { display: inline-block; margin-top: 26px; font-family: var(--caps); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); border-bottom: 1px solid rgba(199,164,104,.4); padding-bottom: 3px; transition: color .25s, border-color .25s; }
.hon__cta:hover { color: var(--champagne-soft); border-bottom-color: var(--champagne); }
@media (max-width: 720px) { .hon__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .hon__grid { grid-template-columns: 1fr; } }
.dmarq__viewport { position: relative; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.dmarq__track { display: flex; align-items: center; gap: clamp(44px,5vw,88px); width: max-content; animation: dmarq-drift 52s linear infinite reverse; }
.dmarq:hover .dmarq__track { animation-play-state: running; }
.dmarq__item { display: inline-flex; align-items: stretch; gap: 16px; text-decoration: none; }
.dmarq__rule { flex: none; width: 1px; background: linear-gradient(to bottom, transparent, rgba(199,164,104,.5) 22%, rgba(199,164,104,.5) 78%, transparent); }
.dmarq__txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.dmarq__pre { font-family: var(--caps); font-size: clamp(10px,1vw,12px); letter-spacing: .18em; text-transform: uppercase; color: rgba(199,164,104,.66); }
.dmarq__name { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.2vw,44px); line-height: 1; letter-spacing: .005em; color: rgba(236,233,226,.66); }
.dmarq__suf { font-family: var(--caps); font-size: clamp(9px,.9vw,11px); letter-spacing: .26em; text-transform: uppercase; color: rgba(236,233,226,.44); }
.dmarq__en { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,3vw,40px); letter-spacing: .005em; color: rgba(236,233,226,.55); }
.dmarq__fa { font-family: 'Noto Nastaliq Urdu', serif; font-size: clamp(19px,2.3vw,30px); color: rgba(199,164,104,.5); direction: rtl; }
.dmarq__dot { flex: none; width: 5px; height: 5px; border-radius: 999px; background: var(--champagne); opacity: .4; }
@keyframes dmarq-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .dmarq__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 18px; } }

/* ---- volunteer roles board (careers-style) ---- */
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px,2vw,22px); margin-top: clamp(36px,4vw,52px); }
.role { display: flex; flex-direction: column; gap: 15px; padding: clamp(26px,3vw,38px); border: 1px solid rgba(199,164,104,.18); border-radius: 14px; background: linear-gradient(168deg, rgba(255,255,255,.03), rgba(0,0,0,.06)); transition: transform .5s, border-color .5s, box-shadow .5s; text-decoration: none; color: inherit; }
.role:hover { transform: translateY(-4px); border-color: rgba(199,164,104,.45); box-shadow: 0 24px 48px -32px rgba(0,0,0,.7); }
.role:hover .role__cta { color: var(--champagne-soft); }
.role__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.role__tag { font-family: var(--caps); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); border: 1px solid rgba(199,164,104,.35); border-radius: 999px; padding: 5px 12px; }
.role__title { font-family: var(--serif); font-weight: 500; font-size: clamp(24px,2.6vw,31px); line-height: 1.08; color: var(--ivory); }
.role__title em { font-style: italic; color: var(--champagne-soft); }
.role__desc { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--on-dark-mut); flex: 1; }
.role__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 2px; padding-top: 16px; border-top: 1px solid rgba(199,164,104,.14); }
.role__commit { font-family: var(--caps); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mut); }
.role__cta { font-family: var(--caps); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); white-space: nowrap; text-decoration: none; }
.role__cta:hover { color: var(--champagne-soft); }
@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } }

/* ---- role detail page ---- */
.rd { display: grid; grid-template-columns: 1.55fr .85fr; gap: clamp(36px,5vw,72px); align-items: start; margin-top: clamp(20px,3vw,40px); }
.rd__sec { margin-bottom: clamp(30px,3.5vw,46px); }
.rd__sec:last-child { margin-bottom: 0; }
.rd__h { font-family: var(--caps); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); margin-bottom: 16px; }
.rd__p { font-family: var(--serif); font-size: 19px; line-height: 1.7; color: var(--ivory); }
.rd__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rd__list li { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--on-dark-mut); padding-left: 24px; position: relative; }
.rd__list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 11px; height: 1px; background: var(--champagne); }
.rd__aside { position: sticky; top: 104px; border: 1px solid rgba(199,164,104,.22); border-radius: 16px; padding: clamp(26px,3vw,34px); background: linear-gradient(168deg, var(--slate-lift), var(--slate-deep)); display: flex; flex-direction: column; gap: 18px; }
.rd__aside .role__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rd__meta { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.rd__meta-row { display: flex; flex-direction: column; gap: 4px; }
.rd__meta-k { font-family: var(--caps); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-mut); }
.rd__meta-v { font-family: var(--serif); font-size: 17px; color: var(--ivory); }
.rd__aside .btn { width: 100%; justify-content: center; text-align: center; margin-top: 4px; }
.rd__mail { font-family: var(--caps); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--champagne); text-align: center; text-decoration: none; word-break: break-word; }
.rd__back { font-family: var(--caps); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-mut); text-align: center; text-decoration: none; }
.rd__back:hover { color: var(--champagne); }
@media (max-width: 860px) { .rd { grid-template-columns: 1fr; } .rd__aside { position: static; } }

/* ---- FAQ accordion ---- */
.faq-wrap { max-width: 880px; }
.faq-group { margin-top: clamp(36px,4.5vw,60px); }
.faq-group:first-of-type { margin-top: clamp(18px,2vw,28px); }
.faq-group__h { font-family: var(--caps); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); margin-bottom: 4px; }
.faq-item { border-top: 1px solid rgba(199,164,104,.16); }
.faq-group .faq-item:last-child { border-bottom: 1px solid rgba(199,164,104,.16); }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: clamp(20px,2.4vw,28px) 0; font-family: var(--serif); font-size: clamp(20px,2.1vw,25px); line-height: 1.3; color: var(--ivory); transition: color .3s; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--champagne-soft); }
.faq-item__icon { flex: none; width: 22px; height: 22px; position: relative; margin-top: 5px; }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; background: var(--champagne); transition: transform .3s, opacity .3s; }
.faq-item__icon::before { top: 10px; left: 2px; right: 2px; height: 1.5px; }
.faq-item__icon::after { left: 10px; top: 2px; bottom: 2px; width: 1.5px; }
.faq-item[open] .faq-item__icon::after { transform: scaleY(0); opacity: 0; }
.faq-item__a { padding: 0 40px clamp(24px,3vw,32px) 0; max-width: 68ch; }
.faq-item__a p { font-family: var(--serif); font-size: 18px; line-height: 1.72; color: var(--on-dark-mut); }
.faq-item__a p + p { margin-top: 14px; }
.faq-item__a a { color: var(--champagne-soft); border-bottom: 1px solid rgba(199,164,104,.4); text-decoration: none; }
.faq-item__a a:hover { color: var(--champagne); }

/* ---- partnerships: audience grid ---- */
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.8vw,20px); margin-top: clamp(32px,4vw,48px); }
.aud { padding: clamp(24px,2.8vw,32px); border: 1px solid rgba(199,164,104,.18); border-radius: 12px; background: linear-gradient(168deg, rgba(255,255,255,.03), rgba(0,0,0,.06)); display: flex; flex-direction: column; gap: 8px; }
.aud__k { font-family: var(--caps); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }
.aud__n { font-family: var(--serif); font-weight: 500; font-size: clamp(20px,2.1vw,25px); line-height: 1.12; color: var(--ivory); }
.aud__d { font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--on-dark-mut); }
@media (max-width: 760px) { .aud-grid { grid-template-columns: 1fr; } }

/* ---- bequest / planned giving ---- */
.bq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); margin-top: clamp(32px,4vw,48px); align-items: start; }
.bq-card { border: 1px solid rgba(199,164,104,.3); border-radius: 14px; padding: clamp(26px,3vw,36px); background: linear-gradient(168deg, rgba(199,164,104,.07), rgba(0,0,0,.06)); }
.bq-card__k { display: block; font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); margin-bottom: 14px; }
.bq-legal { font-family: var(--serif); font-size: clamp(17px,1.9vw,20px); line-height: 1.62; color: var(--ivory); }
.bq-legal b { color: var(--champagne-soft); font-weight: 500; }
.bq-clause { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--ivory); padding-left: 18px; border-left: 2px solid rgba(199,164,104,.4); }
@media (max-width: 760px) { .bq-grid { grid-template-columns: 1fr; } }

/* ---- matching gifts ---- */
.mg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,2vw,24px); margin-top: clamp(34px,4vw,52px); }
.mg-step { display: flex; flex-direction: column; gap: 10px; }
.mg-step__n { font-family: var(--caps); font-size: 11px; letter-spacing: .2em; color: var(--champagne); }
.mg-step__r { width: 100%; height: 1px; background: linear-gradient(to right, rgba(199,164,104,.5), transparent); }
.mg-step__t { font-family: var(--serif); font-size: clamp(17px,1.9vw,20px); line-height: 1.35; color: var(--ivory); }
.mg-step__d { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--on-dark-mut); }
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px,1.4vw,16px); margin-top: clamp(30px,3.5vw,44px); }
.logo-chip { display: flex; align-items: center; justify-content: center; background: var(--ivory); border-radius: 12px; aspect-ratio: 5 / 2.4; padding: 16px 20px; transition: transform .4s, box-shadow .4s; }
.logo-chip:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(0,0,0,.6); }
.logo-chip img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .4s, opacity .4s; }
.logo-chip:hover img { filter: grayscale(0); opacity: 1; }
.mg-terms { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(28px,3vw,38px); }
.mg-term { font-family: var(--caps); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); border: 1px solid rgba(199,164,104,.3); border-radius: 999px; padding: 8px 16px; }
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } .mg-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }

/* ---- mission centerpiece ---- */
.mission { text-align: center; max-width: 1060px; margin: 0 auto; }
.mission__eyebrow { display: block; font-family: var(--caps); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--champagne); margin-bottom: clamp(24px,3vw,36px); }
.mission__eyebrow::before { content: ""; display: block; width: 54px; height: 1px; background: var(--champagne); margin: 0 auto 22px; }
.mission__big { font-family: var(--serif); font-weight: 500; font-size: clamp(28px,4vw,56px); line-height: 1.22; letter-spacing: -.02em; color: var(--ivory); text-wrap: balance; }
.mission__big em { font-style: italic; color: var(--champagne-soft); }

/* About · two things, one house */
.twothings { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,2.6vw,36px); margin-top: clamp(34px,4vw,52px); }
.twothing { padding: clamp(28px,3vw,42px); border: 1px solid rgba(199,164,104,.2); border-radius: 16px; background: linear-gradient(168deg, rgba(255,255,255,.03), rgba(0,0,0,.05)); }
.twothing__k { font-family: var(--caps); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }
.twothing__h { font-family: var(--serif); font-weight: 500; font-size: clamp(26px,3vw,38px); line-height: 1.06; letter-spacing: -.01em; color: var(--ivory); margin: 14px 0 16px; }
.twothing__h em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.twothing p { font-family: var(--serif); font-size: clamp(17px,1.8vw,19px); line-height: 1.68; color: var(--on-dark-mut); }
@media (max-width: 760px) { .twothings { grid-template-columns: 1fr; } }

/* ---- Canon · first research area (Cuisine) feature band ---- */
.cfeat { background: radial-gradient(ellipse 110% 130% at 80% 0%, var(--slate-lift) 0%, var(--slate-deep) 55%, var(--slate-deeper) 100%); padding: clamp(72px,9vw,128px) 40px; position: relative; overflow: hidden; }
.cfeat__fa { position: absolute; top: 50%; right: -2%; transform: translateY(-50%); font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: clamp(150px,24vw,360px); line-height: 1; direction: rtl; white-space: nowrap; color: rgba(236,233,226,.045); pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to left, #000 64%, transparent 100%); mask-image: linear-gradient(to left, #000 64%, transparent 100%); }
.cfeat__in { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px,6vw,88px); align-items: center; }
.cfeat__status { display: inline-flex; align-items: center; gap: 11px; font-family: var(--caps); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }
.cfeat__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--champagne); box-shadow: 0 0 0 0 rgba(199,164,104,.5); animation: cz-pulse 2.6s var(--ease) infinite; }
@keyframes cz-pulse { 0%{box-shadow:0 0 0 0 rgba(199,164,104,.45);} 70%{box-shadow:0 0 0 9px rgba(199,164,104,0);} 100%{box-shadow:0 0 0 0 rgba(199,164,104,0);} }
.cfeat__eyebrow { font-family: var(--caps); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-mut); margin-top: 20px; }
.cfeat__title { font-family: var(--serif); font-weight: 500; font-size: clamp(38px,5vw,68px); line-height: 1.02; letter-spacing: -.025em; color: var(--ivory); margin-top: 12px; }
.cfeat__title em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.cfeat__fa-name { font-family: 'Noto Nastaliq Urdu', serif; font-size: clamp(22px,2.6vw,32px); color: var(--champagne-soft); direction: rtl; line-height: 1.9; margin-top: 14px; }
.cfeat__lead { font-family: var(--serif); font-size: clamp(18px,1.9vw,21px); line-height: 1.6; color: var(--on-dark-mut); max-width: 52ch; margin-top: 18px; }
.cfeat__ctas { display: flex; align-items: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.cfeat__stats { display: flex; flex-direction: column; gap: 18px; border-left: 1px solid rgba(199,164,104,.22); padding-left: clamp(28px,3vw,44px); }
.cfeat__stat { display: flex; flex-direction: column; gap: 4px; }
.cfeat__stat-n { font-family: var(--serif); font-weight: 500; font-size: clamp(44px,5vw,68px); line-height: 1; color: var(--ivory); }
.cfeat__stat-l { font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
@media (max-width: 860px) { .cfeat__in { grid-template-columns: 1fr; } .cfeat__stats { flex-direction: row; flex-wrap: wrap; gap: 28px 40px; border-left: none; border-top: 1px solid rgba(199,164,104,.22); padding-left: 0; padding-top: 28px; } }

/* donate teaser → patrons */
.pat-teaser { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(199,164,104,.22); background: linear-gradient(150deg, var(--slate-lift), var(--slate-deeper)); padding: clamp(40px,6vw,72px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,64px); align-items: center; }
.pat-teaser__names { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 22px; }
.pat-teaser__name { font-family: var(--serif); font-size: clamp(20px,2.4vw,28px); color: var(--ivory); }
.pat-teaser__name + .pat-teaser__name::before { content: "·"; color: var(--champagne); margin-right: 14px; }
@media (max-width: 760px) { .pat-teaser { grid-template-columns: 1fr; } }

/* ---- pillars (roadmap) ---- */
.pillars4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pillarc { background: var(--slate); border: 1px solid rgba(199,164,104,.18); border-radius: 12px; padding: 36px 34px; display: flex; flex-direction: column; gap: 14px; position: relative; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.pillarc:hover { transform: translateY(-3px); border-color: rgba(199,164,104,.4); }
.pillarc__no { font-family: var(--caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.pillarc__name { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.08; color: var(--ivory); }
.pillarc__name em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.pillarc__desc { font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--on-dark-mut); }
.pillarc__progs { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(199,164,104,.16); }
.pillarc__progs li { font-family: var(--serif); font-size: 15.5px; color: var(--ivory); padding-left: 18px; position: relative; }
.pillarc__progs li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--champagne); }

/* ---- timeline (history) ---- */
.timeline { max-width: 820px; margin: 0 auto; position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--champagne), rgba(199,164,104,.15)); }
.tl { position: relative; padding: 0 0 48px 34px; }
.tl::before { content: ""; position: absolute; left: -30px; top: 6px; width: 9px; height: 9px; border-radius: 999px; background: var(--champagne); box-shadow: 0 0 0 4px var(--slate-deep); }
.tl:last-child { padding-bottom: 0; }
.tl__year { font-family: var(--caps); font-size: 12px; letter-spacing: .2em; color: var(--champagne); }
.tl__title { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.18; color: var(--ivory); margin: 7px 0 8px; }
.tl__body { font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--on-dark-mut); max-width: 56ch; }

/* ---- member tiers ---- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tier { background: var(--slate); border: 1px solid rgba(199,164,104,.18); border-radius: 12px; padding: 38px 32px; display: flex; flex-direction: column; gap: 16px; position: relative; transition: transform .3s var(--ease); }
.tier:hover { transform: translateY(-3px); }
.tier--feat { background: linear-gradient(180deg, var(--slate), var(--slate-deep)); border-color: rgba(199,164,104,.45); }
.tier__flag { position: absolute; top: -11px; left: 32px; font-family: var(--caps); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate-deep); background: var(--champagne); padding: 5px 13px; border-radius: 999px; }
.tier__name { font-family: var(--caps); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.tier__price { font-family: var(--serif); font-weight: 500; font-size: 46px; line-height: 1; color: var(--ivory); }
.tier__price small { font-family: var(--caps); font-size: 11px; letter-spacing: .12em; color: var(--on-dark-mut); }
.tier__perks { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.tier__perks li { font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ivory); padding-left: 20px; position: relative; }
.tier__perks li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 1px; background: var(--champagne); }
.tier .btn { align-self: flex-start; margin-top: 6px; }

/* ---- info cards (cottage, connect) ---- */
.infogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.infocard { background: var(--slate); border: 1px solid rgba(199,164,104,.16); border-radius: 12px; padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; }
.infocard__k { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }
.infocard__v { font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--ivory); }
.infocard__sub { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--on-dark-mut); }
.infocard a.inline { color: var(--champagne-soft); border-bottom: 1px solid rgba(199,164,104,.4); }

/* ---- board grid ---- */
.boardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
.person { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.person__portrait { transition: transform .4s; }
.person:hover .person__portrait { transform: translateY(-5px); }
.person:hover .person__name { color: var(--champagne-soft); }
.person__portrait { aspect-ratio: 1; border-radius: 10px; overflow: hidden; position: relative; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse 100% 100% at 50% 0%, var(--slate-lift), var(--slate-deeper)); }
.person__portrait .pmark { width: 46%; height: 46%; opacity: .22; margin-bottom: 0; align-self: center; }
.person__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
.person__name { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ivory); }
.person__role { font-family: var(--caps); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.person__bio { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--on-dark-mut); }

/* ---- CTA band ---- */
.ctaband { background: radial-gradient(ellipse 90% 130% at 50% 0%, var(--slate-lift), var(--slate-deep) 60%, var(--slate-deeper)); padding: clamp(80px,11vw,150px) 40px; text-align: center; }
.ctaband__inner { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ctaband__crest { width: 64px; height: 64px; opacity: .92; }
.ctaband__title { font-family: var(--serif); font-weight: 500; font-size: clamp(34px,4.6vw,58px); line-height: 1.04; letter-spacing: -.02em; color: var(--ivory); }
.ctaband__title em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.ctaband__p { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--on-dark-mut); }
.ctaband__ctas { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* ---- legal / doc ---- */
.doc { max-width: 760px; margin: 0 auto; padding: clamp(48px,7vw,90px) 40px; }
.doc h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ivory); margin: 38px 0 12px; }
.doc p, .doc li { font-family: var(--serif); font-size: 17px; line-height: 1.7; color: var(--on-dark-mut); margin-bottom: 16px; }
.doc ul { padding-left: 22px; margin-bottom: 16px; }
.doc__updated { font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); margin-bottom: 8px; }

/* ---- canon browse (themes + types) ---- */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.themec { border: 1px solid rgba(199,164,104,.2); border-radius: 12px; padding: 30px 28px; display: flex; flex-direction: column; gap: 9px; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease); min-height: 150px; }
.themec:hover { background: rgba(199,164,104,.05); border-color: rgba(199,164,104,.4); }
.themec__no { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; color: var(--champagne); }
.themec__name { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--ivory); margin-top: auto; }
.themec__name em { font-style: italic; font-weight: 400; }
.themec__count { font-family: var(--caps); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-mut); }
.typerow { display: flex; flex-wrap: wrap; gap: 10px; }
.typchip { font-family: var(--caps); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); border: 1px solid rgba(199,164,104,.3); border-radius: 999px; padding: 10px 18px; }

/* ---- footer: 4-col sitemap already supported by .foot__inner ---- */
.foot__col ul li a { cursor: pointer; }

@media (max-width: 980px) {
  .nav__links--wide { display: none; }
  .pillars4, .tiers, .infogrid, .boardgrid, .themes { grid-template-columns: 1fr; }
  .nav__util-in { justify-content: center; }
}


/* ---- hub landing grids (About, Get Involved) ---- */
.hubgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.hubcard { background: var(--slate); border: 1px solid rgba(199,164,104,.18); border-radius: 12px; padding: 34px 32px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.hubcard:hover { transform: translateY(-3px); border-color: rgba(199,164,104,.42); }
.hubcard__k { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }
.hubcard__t { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.08; color: var(--ivory); margin-top: 4px; }
.hubcard__d { font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--on-dark-mut); }
.hubcard__go { font-family: var(--caps); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); margin-top: auto; padding-top: 14px; transition: transform .25s var(--ease); }
.hubcard:hover .hubcard__go { transform: translateX(4px); }
@media (max-width: 760px){ .hubgrid { grid-template-columns: 1fr; } }

/* ---- The Canon — unified hero (merges old phero + cintro) ---- */
.canonhero { background: var(--slate-deep); padding: clamp(116px,15vw,176px) 40px clamp(64px,8vw,100px); text-align: center; position: relative; overflow: hidden; }
.canonhero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(ellipse 58% 48% at 50% -4%, rgba(199,164,104,.12), transparent 64%); }
.canonhero__in { position: relative; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.canonhero__fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: clamp(150px, 23vw, 340px);
  line-height: 1; direction: rtl; white-space: nowrap; color: rgba(236,233,226,.10);
  pointer-events: none; user-select: none; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 92% 100% at 50% 50%, #000 72%, transparent 98%);
  mask-image: radial-gradient(ellipse 92% 100% at 50% 50%, #000 72%, transparent 98%); }
.canonhero .crumbs { justify-content: center; margin-bottom: 30px; }
.canonhero__stamp { display: inline-flex; align-items: center; gap: 12px; padding: 9px 20px; border: 1px solid rgba(199,164,104,.5); border-radius: 999px; font-family: var(--caps); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); margin-bottom: 28px; }
.canonhero__stamp::before, .canonhero__stamp::after { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--champagne); }
.canonhero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(62px,10vw,140px); line-height: .98; letter-spacing: -.04em; color: var(--ivory); }
.canonhero__title em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.canonhero__lead { font-family: var(--serif); font-size: clamp(19px,2.1vw,25px); line-height: 1.5; color: var(--on-dark-mut); margin-top: 26px; max-width: 58ch; }
.canonhero__lead em { font-style: italic; color: var(--ivory); }
.canonhero .cintro__scope { margin-top: clamp(48px,6vw,68px); }
.canonhero .cintro__rail { margin-top: clamp(40px,5vw,54px); }

/* ---- Canon contributor form ---- */
.cform-sec { background: radial-gradient(ellipse 90% 130% at 50% 0%, var(--slate-lift), var(--slate-deep) 58%, var(--slate-deeper)); padding: clamp(88px,12vw,150px) 40px; }
.cform-wrap { max-width: 860px; margin: 0 auto; }
.cform-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: clamp(40px,5vw,60px); }
.cform-head .psec__eyebrow { justify-content: center; }
.cform-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px,4.6vw,58px); line-height: 1.04; letter-spacing: -.02em; color: var(--ivory); }
.cform-head h2 em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.cform-head p { font-family: var(--serif); font-size: clamp(18px,1.9vw,21px); line-height: 1.6; color: var(--on-dark-mut); max-width: 60ch; }
.cform { background: rgba(43,74,92,.35); border: 1px solid rgba(199,164,104,.2); border-radius: 14px; padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; gap: 26px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cfield { display: flex; flex-direction: column; gap: 8px; }
.cfield label { font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.cfield input, .cform textarea { font-family: var(--serif); font-size: 17px; padding: 13px 15px; background: rgba(21,36,47,.5); border: 1px solid rgba(199,164,104,.22); border-radius: 6px; color: var(--ivory); outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.cfield input::placeholder, .cform textarea::placeholder { color: rgba(167,185,196,.5); }
.cfield input:focus, .cform textarea:focus { border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(199,164,104,.16); }
.cform textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.cform__block-l { font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); margin-bottom: 4px; }
.cform__hint { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--on-dark-mut); margin-top: 4px; }
.cchecks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px 18px; }
.ccheck { display: flex; align-items: flex-start; gap: 10px; font-family: var(--serif); font-size: 16px; line-height: 1.35; color: var(--ivory); cursor: pointer; }
.ccheck input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; border: 1px solid rgba(199,164,104,.5); border-radius: 4px; background: rgba(21,36,47,.5); cursor: pointer; transition: background .15s, border-color .15s; position: relative; }
.ccheck input:checked { background: var(--champagne); border-color: var(--champagne); }
.ccheck input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--slate-deep); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cradio { display: flex; flex-wrap: wrap; gap: 10px; }
.cradio label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 16px; color: var(--ivory); border: 1px solid rgba(199,164,104,.3); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.cradio input { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border-radius: 999px; border: 1px solid rgba(199,164,104,.6); cursor: pointer; }
.cradio input:checked { background: var(--champagne); border-color: var(--champagne); box-shadow: inset 0 0 0 2px rgba(21,36,47,.6); }
.cform__note { background: rgba(107,79,112,.16); border: 1px solid rgba(199,164,104,.2); border-radius: 10px; padding: 18px 22px; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ivory); }
.cform__note em { font-style: italic; color: var(--champagne-soft); }
.cform__submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cform__submit .cform__hint { margin: 0; }
@media (max-width: 680px) { .cform__row { grid-template-columns: 1fr; } .cchecks { grid-template-columns: 1fr 1fr; } }

/* light, inviting form surface */
.cform { background: var(--cream); border-color: rgba(43,74,92,.14); }
.cfield label, .cform__block-l { color: var(--ink); }
.cfield label span { color: var(--champagne-deep) !important; }
.cfield input, .cform textarea { background: #fff; border-color: rgba(43,74,92,.22); color: var(--ink); }
.cfield input::placeholder, .cform textarea::placeholder { color: rgba(43,74,92,.42); }
.cfield input:focus, .cform textarea:focus { border-color: var(--champagne-deep); box-shadow: 0 0 0 3px rgba(199,164,104,.22); }
.ccheck { color: var(--ink); }
.ccheck input { background: #fff; border-color: rgba(43,74,92,.4); }
.ccheck input:checked { background: var(--champagne-deep); border-color: var(--champagne-deep); }
.ccheck input:checked::after { border-color: #fff; }
.cradio label { color: var(--ink); border-color: rgba(43,74,92,.28); }
.cradio label:hover { border-color: var(--champagne-deep); background: rgba(199,164,104,.08); }
.cradio input { background: #fff; border-color: rgba(43,74,92,.5); }
.cradio input:checked { background: var(--champagne-deep); border-color: var(--champagne-deep); box-shadow: inset 0 0 0 2px #fff; }
.cform__hint { color: var(--ink-mut); }
.cform__note { background: rgba(107,79,112,.1); border-color: rgba(107,79,112,.3); color: var(--ink); }
.cform__note em { color: var(--plum); }

/* === refined dark-editorial form (matches the site) === */
.cform-sec { background: var(--slate-deep); }
.cform { background: transparent; border: 0; padding: 0; gap: 36px; max-width: 720px; margin: 0 auto; }
.cform__row { gap: 30px; }
.cfield { gap: 11px; }
.cform .cfield label, .cform__block-l { color: var(--champagne-soft); font-family: var(--caps); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; }
.cform .cfield label span { color: var(--champagne) !important; }
.cform .cfield input, .cform textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(199,164,104,.3); border-radius: 0; padding: 9px 2px; color: var(--ivory); font-size: 19px; }
.cform .cfield input::placeholder, .cform textarea::placeholder { color: rgba(167,185,196,.4); }
.cform .cfield input:focus, .cform textarea:focus { border-bottom-color: var(--champagne); box-shadow: none; }
.cform textarea { border: 1px solid rgba(199,164,104,.26); border-radius: 8px; padding: 15px 17px; min-height: 120px; }
.cform textarea:focus { border-color: var(--champagne); }
.cform__block-l { margin-bottom: 14px; }
.cchecks { display: flex; flex-wrap: wrap; gap: 10px; }
.ccheck { background: rgba(255,255,255,.05); border: 1px solid rgba(199,164,104,.34); border-radius: 999px; padding: 11px 18px; color: var(--ivory); font-family: var(--serif); font-size: 17px; line-height: 1; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.ccheck:hover { border-color: var(--champagne); background: rgba(199,164,104,.12); }
.ccheck input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ccheck:has(input:checked) { background: var(--champagne); border-color: var(--champagne); color: var(--slate-deep); }
.cradio { gap: 10px; }
.cradio label { color: var(--ivory); border-color: rgba(199,164,104,.34); background: rgba(255,255,255,.05); }
.cradio label:hover { border-color: var(--champagne); background: transparent; }
.cradio input { background: transparent; border-color: rgba(199,164,104,.55); }
.cradio input:checked { background: var(--champagne); border-color: var(--champagne); box-shadow: inset 0 0 0 2px var(--slate-deep); }
.cform__note { background: transparent; border: 0; border-left: 2px solid var(--plum); border-radius: 0; padding: 6px 0 6px 22px; color: var(--on-dark-mut); font-size: 18px; font-style: italic; line-height: 1.5; }
.cform__note em { color: var(--champagne-soft); }
.cform__hint { color: var(--on-dark-mut); }

/* ---- The Canon — the work has begun (vision/status) ---- */
.cbegin { background: var(--slate-deep); padding: clamp(88px,11vw,150px) 40px; }
.cbegin__inner { max-width: 920px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cbegin__eyebrow { font-family: var(--caps); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); }
.cbegin__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px,4.4vw,56px); line-height: 1.08; letter-spacing: -.02em; color: var(--ivory); }
.cbegin__title em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.cbegin__lead { font-family: var(--serif); font-size: clamp(18px,1.9vw,21px); line-height: 1.7; color: var(--on-dark-mut); max-width: 58ch; }
.cbegin__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(28px,4vw,44px); width: 100%; }
.cbegin__step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 180px; max-width: 240px; padding: 24px 20px; border: 1px solid rgba(199,164,104,.18); border-radius: 12px; }
.cbegin__step--on { border-color: rgba(199,164,104,.5); background: rgba(199,164,104,.06); }
.cbegin__dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(199,164,104,.35); }
.cbegin__step--on .cbegin__dot { background: var(--champagne); box-shadow: 0 0 0 4px rgba(199,164,104,.16); }
.cbegin__k { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }
.cbegin__t { font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--ivory); }

/* ---- author bio page ---- */
.author-hero { display: grid; grid-template-columns: 220px 1fr; gap: clamp(32px,5vw,64px); align-items: start; max-width: var(--maxw); margin: 0 auto; }
.author-hero__portrait { aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; background: radial-gradient(ellipse 100% 100% at 50% 0%, var(--slate-lift), var(--slate-deeper)); }
.author-hero__portrait .pmark { width: 50%; height: 50%; opacity: .24; }
.author-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 14%; }
.author-hero__body { display: flex; flex-direction: column; gap: 16px; }
.author-hero__role { font-family: var(--caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.author-hero__name { font-family: var(--serif); font-weight: 500; font-size: clamp(40px,5.4vw,68px); line-height: 1.02; letter-spacing: -.03em; color: var(--ivory); }
.author-hero__lead { font-family: var(--serif); font-size: clamp(19px,2vw,23px); line-height: 1.55; color: var(--ivory); max-width: 52ch; }
.author-hero__lead em { font-style: italic; color: var(--champagne-soft); }
.author-hero__bio { font-family: var(--serif); font-size: 18px; line-height: 1.72; color: var(--on-dark-mut); max-width: 60ch; }
.author-hero__links { margin-top: 8px; }
.author-pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.author-piece { display: flex; flex-direction: column; gap: 8px; padding: 28px 30px; background: var(--cream-warm, #F1EBDE); border: 1px solid rgba(35,50,61,.14); border-radius: 12px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.author-piece:hover { transform: translateY(-3px); border-color: rgba(169,138,85,.5); }
.author-piece__cat { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne-deep); }
.author-piece__title { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.14; color: var(--ink); }
.author-piece__meta { font-family: var(--caps); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mut); margin-top: auto; }
@media (max-width: 760px) { .author-hero { grid-template-columns: 1fr; } .author-hero__portrait { max-width: 200px; } .author-pieces { grid-template-columns: 1fr; } }

/* ---- roadmap: program clusters + phased arc ---- */
.rmap-intro { display: flex; flex-direction: column; gap: 14px; max-width: 64ch; margin-bottom: clamp(36px,5vw,56px); }
.rmap-note { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--on-dark-mut); border-left: 2px solid var(--champagne); padding-left: 18px; }
.rcluster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rcluster { background: var(--slate); border: 1px solid rgba(199,164,104,.18); border-radius: 14px; padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; gap: 22px; }
.rcluster__head { display: flex; flex-direction: column; gap: 8px; }
.rcluster__no { font-family: var(--caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.rcluster__name { font-family: var(--serif); font-weight: 500; font-size: clamp(26px,2.6vw,34px); line-height: 1.05; color: var(--ivory); }
.rcluster__name em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.rcluster__desc { font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--on-dark-mut); }
.rgroup { display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid rgba(199,164,104,.14); }
.rgroup__l { font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne-soft); opacity: .85; }
.rchips { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip { font-family: var(--serif); font-size: 14.5px; color: var(--ivory); background: rgba(255,255,255,.04); border: 1px solid rgba(199,164,104,.18); border-radius: 999px; padding: 7px 14px; }

/* phased 10-year arc */
.rphase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(36px,5vw,56px); }
.rphase { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(199,164,104,.3); }
.rphase__k { font-family: var(--caps); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.rphase__yr { font-family: var(--serif); font-weight: 500; font-size: clamp(24px,2.4vw,30px); line-height: 1; color: var(--ivory); }
.rphase__yr em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.rphase__desc { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--on-dark-mut); }
@media (max-width: 880px) { .rcluster-grid { grid-template-columns: 1fr; } .rphase-grid { grid-template-columns: 1fr; } }
/* rphase sits on a cream section — use ink colors for contrast */
.psec--cream-wrap .rphase { border-top-color: rgba(43,74,92,.22); }
.psec--cream-wrap .rphase__k { color: var(--champagne-deep); }
.psec--cream-wrap .rphase__yr { color: var(--ink); }
.psec--cream-wrap .rphase__yr em { color: var(--champagne-deep); }
.psec--cream-wrap .rphase__desc { color: var(--ink-mut); }

/* ---- get involved: featured student spotlight ---- */
.gi-hero { position: relative; overflow: hidden; padding: 150px 40px clamp(56px,7vw,88px); background: radial-gradient(ellipse 110% 130% at 70% -10%, var(--slate-lift) 0%, var(--slate) 48%, var(--slate-deep) 100%); }
.gi-hero__in { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 1; }
.gi-hero__fa { position: absolute; top: 50%; right: 3%; transform: translateY(-50%);
  font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: clamp(120px, 17vw, 250px);
  line-height: 1; direction: rtl; white-space: nowrap; color: rgba(236,233,226,.12);
  pointer-events: none; user-select: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to left, #000 86%, transparent 100%);
  mask-image: linear-gradient(to left, #000 86%, transparent 100%); }
.gi-hero__crumbs { margin-bottom: 30px; }
.gi-hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(44px,6.4vw,84px); line-height: 1.0; letter-spacing: -.03em; color: var(--ivory); }
.gi-hero__title em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.gi-hero__lead { font-family: var(--serif); font-size: clamp(19px,2vw,23px); line-height: 1.6; color: var(--on-dark-mut); max-width: 52ch; margin-top: 18px; }

.gi-spot { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid rgba(199,164,104,.3); border-radius: 18px; overflow: hidden; background: var(--slate); box-shadow: 0 28px 70px rgba(0,0,0,.4); }
.gi-spot__art { position: relative; min-height: 360px; overflow: hidden; }
.gi-spot__art-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 80% at 75% 18%, rgba(199,164,104,.4), transparent 56%), linear-gradient(155deg, var(--cultural-teal,#1F676C) 0%, var(--slate) 64%, var(--slate-deeper) 100%); }
.gi-spot__stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 22% 26%, rgba(199,164,104,.7), transparent), radial-gradient(1.3px 1.3px at 66% 20%, rgba(236,233,226,.6), transparent), radial-gradient(1.4px 1.4px at 84% 40%, rgba(199,164,104,.6), transparent), radial-gradient(1.1px 1.1px at 40% 54%, rgba(236,233,226,.5), transparent); }
.gi-spot__reeds { position: absolute; inset: 0; opacity: .5; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 82%); mask-image: linear-gradient(to top, #000 0%, transparent 82%); }
.gi-spot__reeds img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.gi-spot__badge { position: absolute; top: 22px; left: 22px; z-index: 2; font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate-deep); background: var(--champagne); padding: 8px 15px; border-radius: 999px; }
.gi-spot__quote { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 2; font-family: var(--serif); font-style: italic; font-size: clamp(20px,2vw,26px); line-height: 1.3; color: var(--ivory); text-shadow: 0 2px 24px rgba(21,36,47,.6); }
.gi-spot__body { padding: clamp(36px,3.6vw,56px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.gi-spot__k { font-family: var(--caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.gi-spot__h { font-family: var(--serif); font-weight: 500; font-size: clamp(28px,3.2vw,42px); line-height: 1.08; color: var(--ivory); }
.gi-spot__h em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.gi-spot__p { font-family: var(--serif); font-size: 17px; line-height: 1.65; color: var(--on-dark-mut); }
.gi-spot__ways { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.gi-spot__way { display: flex; gap: 12px; align-items: baseline; font-family: var(--serif); font-size: 16px; color: var(--ivory); }
.gi-spot__way::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 7px; background: var(--champagne); transform: rotate(45deg); }
.gi-spot__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.gi-spot__contact { font-family: var(--caps); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); }
.gi-spot__contact a { color: var(--champagne); }
@media (max-width: 860px) { .gi-spot { grid-template-columns: 1fr; } .gi-spot__art { min-height: 220px; } }

/* ---- high-school students: earn volunteer hours ---- */
.stu { background: var(--slate-deeper); }
.stu .psec { padding-block: clamp(72px,10vw,128px); }
.stu__lead { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,5vw,72px); align-items: end; margin-bottom: clamp(40px,5vw,60px); }
.stu__lead-r { font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--on-dark-mut); }
.stugrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stucard { background: var(--slate); border: 1px solid rgba(199,164,104,.18); border-radius: 12px; padding: 32px 30px; display: flex; flex-direction: column; gap: 11px; }
.stucard__k { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }
.stucard__t { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.1; color: var(--ivory); }
.stucard__t em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.stucard__d { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--on-dark-mut); }
.stu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(36px,4.5vw,56px); padding-top: clamp(28px,3.5vw,40px); border-top: 1px solid rgba(199,164,104,.18); }
.stu__foot-note { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--on-dark-mut); max-width: 42ch; }
.stu__foot-note b { color: var(--ivory); font-weight: 600; }
.stu__contact { display: flex; flex-direction: column; gap: 6px; font-family: var(--caps); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); }
.stu__contact a { color: var(--champagne); transition: color .25s; }
.stu__contact a:hover { color: var(--champagne-soft); }
@media (max-width: 860px){ .stu__lead { grid-template-columns: 1fr; } .stugrid { grid-template-columns: 1fr; } }


/* ---- cottage: horizontal path/steps ---- */
.hpath { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(32px,4vw,52px); }
.hpath__step { position: relative; background: var(--cream-warm,#F1EBDE); border: 1px solid rgba(35,50,61,.14); border-radius: 14px; padding: 30px 28px 32px; display: flex; flex-direction: column; gap: 9px; }
.hpath__step::before { content: ""; position: absolute; left: 28px; top: 0; width: 40px; height: 3px; background: rgba(35,50,61,.16); border-radius: 0 0 3px 3px; }
.hpath__step--done::before { background: var(--champagne-deep,#A98A55); }
.hpath__step--now { border-color: rgba(169,138,85,.55); box-shadow: 0 18px 44px rgba(35,50,61,.12); }
.hpath__step--now::before { background: var(--champagne); height: 4px; }
.hpath__k { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne-deep,#A98A55); }
.hpath__yr { font-family: var(--caps); font-size: 12px; letter-spacing: .12em; color: var(--ink-mut); }
.hpath__t { font-family: var(--serif); font-weight: 500; font-size: clamp(22px,2.4vw,28px); line-height: 1.1; color: var(--ink); margin-top: 2px; }
.hpath__t em { font-style: italic; font-weight: 400; }
.hpath__d { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink-mut); }
@media (max-width: 820px) { .hpath { grid-template-columns: 1fr; } }


/* ---- cottage reference photo ---- */
.cottage-photo { margin: 0 0 clamp(28px,3.5vw,44px); }
.cottage-photo img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 22px 54px rgba(0,0,0,.34); border: 1px solid rgba(199,164,104,.18); }
.cottage-photo figcaption { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--on-dark-mut); margin-top: 14px; text-align: center; }


/* ---- cottage: "no cottage yet" notice ---- */
.cottage-notice { max-width: 820px; margin: 0 auto; background: rgba(199,164,104,.07); border: 1px solid rgba(199,164,104,.32); border-left: 3px solid var(--champagne); border-radius: 14px; padding: clamp(28px,3.4vw,44px); display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
.cottage-notice__k { font-family: var(--caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.cottage-notice__t { font-family: var(--serif); font-weight: 500; font-size: clamp(24px,3vw,38px); line-height: 1.12; color: var(--ivory); margin: 0; }
.cottage-notice__t em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.cottage-notice__p { font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--on-dark-mut); max-width: 60ch; margin: 0; }
.cottage-notice__p strong { color: var(--ivory); font-weight: 600; }
.cottage-notice__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }


/* ---- cottage page beautified ---- */
.ch-hero { position: relative; min-height: 68vh; display: flex; align-items: flex-end; overflow: hidden; padding: 140px 40px clamp(48px,6vw,80px); background: var(--slate-deeper); }
.ch-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ch-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ch-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--slate-deeper) 5%, rgba(21,36,47,.62) 44%, rgba(21,36,47,.42) 100%); }
.ch-hero__in { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ch-hero__in .crumbs { margin-bottom: 8px; }
.ch-hero__pill { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); border: 1px solid rgba(199,164,104,.5); border-radius: 999px; padding: 8px 16px; }
.ch-hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(48px,7vw,104px); line-height: .98; letter-spacing: -.03em; color: var(--ivory); text-shadow: 0 2px 40px rgba(21,36,47,.6); }
.ch-hero__title em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.ch-hero__lead { font-family: var(--serif); font-size: clamp(19px,2vw,23px); line-height: 1.6; color: var(--ivory); opacity: .92; max-width: 50ch; }

.clarity { background: var(--slate-deep); padding: clamp(72px,9vw,120px) 40px; }
.clarity__in { max-width: 780px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.clarity__k { font-family: var(--caps); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); }
.clarity__t { font-family: var(--serif); font-weight: 500; font-size: clamp(32px,4.4vw,56px); line-height: 1.06; letter-spacing: -.02em; color: var(--ivory); margin: 0; }
.clarity__t em { font-style: italic; font-weight: 400; color: var(--champagne-soft); }
.clarity__p { font-family: var(--serif); font-size: clamp(18px,1.9vw,21px); line-height: 1.7; color: var(--on-dark-mut); max-width: 60ch; margin: 0; }
.clarity__p strong { color: var(--ivory); font-weight: 600; }
.clarity__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }

.cprose { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(40px,6vw,84px); align-items: start; }
.cprose__aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 16px; }
.cprose__eyebrow { font-family: var(--caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); }
.cprose__body { max-width: none; }
.cprose .cottage-photo { margin: 0; }
@media (max-width: 900px) { .cprose { grid-template-columns: 1fr; gap: 32px; } .cprose__aside { position: static; } }


/* standard phero pill (consistent header accent) */
.phero__pill { display: inline-block; align-self: flex-start; width: fit-content; font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); border: 1px solid rgba(199,164,104,.5); border-radius: 999px; padding: 8px 16px; margin-bottom: 18px; }