:root{
  /* Palette sampled directly from the parish emblem.
     maroon #722E30 · orange #ED992C · navy #38406A · sky #4EA4CA */
  --nyx:#121629; --nyx-2:#1A1F38; --nyx-3:#222847;
  --navy:#38406A; --orange:#ED992C; --maroon:#722E30; --sky:#4EA4CA;
  --gesso:#ECE8E0; --stone:#928E86; --label:#BEB9AE;
  --display:"Cormorant Garamond",Garamond,serif;
  --body:"Spectral",Georgia,serif;
  --gut:clamp(1.25rem,4vw,3rem);
  --measure:36rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--nyx);color:var(--gesso);font-family:var(--body);
  font-weight:300;font-size:clamp(1rem,.55vw + .9rem,1.125rem);line-height:1.72}
img,svg{max-width:100%}
a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(237,153,44,.35)}
a:hover{border-bottom-color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.el{font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange);margin:0 0 1.1rem}
.gr{font-family:var(--display);font-weight:400}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.08;margin:0 0 1rem;letter-spacing:-.005em}
h1{font-size:clamp(3rem,10vw,6.5rem);line-height:.96}
h1 em{font-style:italic;font-weight:300}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.55rem);font-weight:400;line-height:1.25}
p{margin:0 0 1.15rem;max-width:var(--measure)}
.lede{font-size:clamp(1.1rem,1.1vw + .85rem,1.4rem);line-height:1.6;color:#F3EFE5}
.wrap{max-width:74rem;margin:0 auto;padding:0 var(--gut)}
.reg{padding:clamp(3.5rem,8vw,7rem) 0}
.reg + .reg{border-top:1px solid rgba(233,228,216,.10)}
.reg-head{display:grid;gap:.25rem;margin-bottom:2.75rem}
@media(min-width:52rem){.reg-head{grid-template-columns:12rem 1fr;gap:2.5rem;align-items:start}
  .reg-head .el{margin:.55rem 0 0}}

/* masthead */
.mast{padding:clamp(2rem,5vw,3rem) 0 0}
.mast-inner{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;align-items:center}
.emblem{width:auto;height:clamp(3.25rem,6vw,4.5rem);flex:none}
.mast-name{font-family:var(--display);font-size:1.05rem}
.mast-gr{font-family:var(--display);font-size:1.05rem;color:var(--stone)}
.mast-est{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
@media(min-width:60rem){.mast-est{margin-left:auto}}

/* site nav — sticky, sits below the masthead once scrolled past it */
.site-nav{position:sticky;top:0;z-index:20;background:rgba(18,22,41,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(233,228,216,.12)}
.site-nav-inner{display:flex;align-items:center;gap:1.75rem;padding:.85rem var(--gut);
  flex-wrap:wrap;max-width:74rem;margin:0 auto}
.site-nav a{font-family:var(--display);font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--label);border-bottom:none;white-space:nowrap}
.site-nav a:hover{color:var(--gesso)}
.nav-give{margin-left:auto;font-family:var(--display);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.5rem 1.25rem;background:var(--orange);color:var(--nyx)!important;
  border:1px solid var(--orange)}
.nav-give:hover{background:#F5AE4F;border-color:#F5AE4F}
@media(max-width:34rem){.site-nav-inner{gap:1rem}
  .site-nav a{font-size:.78rem}}

/* hero */
.hero{padding:clamp(3rem,8vw,6rem) 0 0}
.hero h1{max-width:16ch}
.hero .attrib{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin:1.5rem 0 2rem}
.hero .lede{max-width:40rem}

/* SIGNATURE: building section — the shaft the campaign fills */
.sect{margin:clamp(2.5rem,6vw,4.5rem) 0 0;display:grid;gap:2rem;align-items:center}
@media(min-width:56rem){.sect{grid-template-columns:minmax(0,1fr) 20rem;gap:3.5rem}}
.sect-fig{background:linear-gradient(180deg,rgba(56,64,106,.16),rgba(15,20,32,0));
  border:1px solid rgba(237,153,44,.20);padding:1.25rem}
.sect-fig svg{display:block;width:100%;height:auto}
#shaftFill,#shaftPledged{transform:translate(0px,340px) scale(1,0) translate(0px,-340px);
  transition:transform 1.1s cubic-bezier(.22,.8,.26,1)}
#shaftPledged{transition-delay:.15s}
@media(prefers-reduced-motion:reduce){#shaftFill,#shaftPledged{transition:none}}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin:.9rem 0 0;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.legend span{display:flex;align-items:center;gap:.5rem}
.legend i{width:.8rem;height:.8rem;flex:none;display:block}
.legend .solid{background:linear-gradient(180deg,#E3C158,#C9A227)}
.legend .hatch{background:rgba(237,153,44,.22);
  background-image:repeating-linear-gradient(45deg,var(--orange) 0 2px,transparent 2px 6px)}
.stat{border-top:1px solid rgba(237,153,44,.4);padding-top:.9rem;margin-bottom:1.75rem}
.stat b{display:block;font-family:var(--display);font-size:clamp(2rem,4vw,2.9rem);
  font-weight:500;line-height:1;color:var(--gesso);margin-bottom:.3rem}
.stat span{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.stat.gold b{color:var(--orange)}
.sect-note{font-size:.85rem;color:var(--stone);max-width:26rem}

/* buttons */
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin:2.25rem 0 0}
.btn{font-family:var(--display);font-size:1rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:.95rem 1.9rem;border:1px solid var(--orange);
  background:transparent;color:var(--orange);cursor:pointer;
  transition:background .18s ease,color .18s ease}
.btn:hover{background:var(--orange);color:var(--nyx)}
.btn-solid{background:var(--orange);color:var(--nyx)}
.btn-solid:hover{background:#F5AE4F}

/* participation pull */
.pull{background:var(--nyx-2);border-left:3px solid var(--orange);
  padding:clamp(1.75rem,4vw,3rem);margin-top:clamp(2.5rem,6vw,4rem)}
.pull h2{margin-bottom:1.25rem}
.pull p:last-child{margin-bottom:0}

/* five anniversaries */
.anniv{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid rgba(233,228,216,.12)}
.anniv li{display:grid;grid-template-columns:5.5rem 1fr;gap:1.5rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid rgba(233,228,216,.12)}
.anniv .n{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:500;
  line-height:1;color:var(--orange);text-align:right;font-variant-numeric:tabular-nums}
.anniv .w{font-size:1rem;color:var(--gesso)}
.anniv em{font-style:italic;color:var(--label)}
@media(min-width:56rem){.anniv{grid-template-columns:1fr 1fr;column-gap:3.5rem}
  .anniv li:nth-last-child(-n+1){border-bottom:none}}

/* priorities */
.prio{display:grid;gap:2.5rem}
@media(min-width:56rem){.prio{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.prio-item{border-top:2px solid var(--orange);padding-top:1.4rem}
.prio-item:nth-child(2){border-top-color:rgba(237,153,44,.55)}
.prio-item:nth-child(3){border-top-color:rgba(237,153,44,.3)}
.prio-n{font-family:var(--display);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);margin:0 0 .55rem}
.prio-item p{max-width:none;font-size:.98rem}
.prio-item ul{margin:1rem 0 0;padding:0;list-style:none}
.prio-item li{padding-left:1.25rem;position:relative;margin-bottom:.45rem;font-size:.95rem;max-width:none}
.prio-item li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;
  background:var(--orange);transform:rotate(45deg)}

/* priority infographics: sequence + dollar allocation, side by side */
.alloc{display:grid;gap:2.5rem;margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:clamp(2.5rem,6vw,4rem);border-top:1px solid rgba(233,228,216,.10)}
@media(min-width:56rem){.alloc{grid-template-columns:1fr 1fr;gap:3.5rem}}
.alloc h4{font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stone);margin:0 0 1.4rem}

/* sequence strip */
.alloc-seq{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:0}
.alloc-seq li{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;
  max-width:none;font-size:.85rem;color:var(--label)}
.alloc-seq .dot{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--orange);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-size:1.15rem;color:var(--orange);margin-bottom:.65rem;flex:none;background:var(--nyx)}
.alloc-seq .arrow{flex:none;width:2.5rem;align-self:flex-start;margin-top:1.15rem;
  color:var(--orange);opacity:.5;font-size:1rem}
.alloc-seq b{display:block;font-family:var(--display);font-size:1rem;font-weight:500;
  color:var(--gesso);margin-bottom:.2rem}
@media(max-width:34rem){.alloc-seq{flex-direction:column;align-items:stretch}
  .alloc-seq li{flex-direction:row;text-align:left;gap:1rem;align-items:center}
  .alloc-seq .dot{margin-bottom:0}
  .alloc-seq .arrow{align-self:center;width:auto;margin:.35rem 0 .35rem 1.25rem;
    transform:rotate(90deg)}}

/* dollar allocation bar */
.alloc-bar{display:flex;width:100%;height:2.25rem;overflow:hidden}
.alloc-bar span{display:block;height:100%}
.alloc-legend{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.65rem}
.alloc-legend li{display:flex;align-items:baseline;gap:.65rem;font-size:.88rem;
  color:var(--label);max-width:none}
.alloc-legend i{width:.75rem;height:.75rem;flex:none;display:block;border-radius:1px;
  transform:translateY(1px)}
.alloc-legend b{font-family:var(--display);font-weight:500;color:var(--gesso);
  font-size:.98rem;white-space:nowrap}
.alloc-note{font-size:.85rem;color:var(--stone);max-width:none;margin-top:1.5rem}

/* done / next */
.split{display:grid;gap:2.5rem}
@media(min-width:56rem){.split{grid-template-columns:1fr 1fr;gap:3.5rem}}
.tag{display:inline-block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.3rem .7rem;border:1px solid rgba(233,228,216,.3);color:var(--stone);margin-bottom:1.1rem}
.tag.live{border-color:var(--orange);color:var(--orange)}
.plain{margin:1rem 0 0;padding:0;list-style:none}
.plain li{padding:.55rem 0 .55rem 1.3rem;position:relative;border-bottom:1px solid rgba(233,228,216,.08);max-width:none;font-size:.97rem}
.plain li b{font-family:var(--display);font-weight:600;font-size:1.02em;color:var(--gesso)}
.plain li::before{content:"";position:absolute;left:0;top:1.15em;width:5px;height:5px;background:var(--orange);transform:rotate(45deg)}
.split .done .plain li b{font-family:var(--display);font-weight:600;font-size:1.02em;color:var(--gesso)}
.plain li::before{background:var(--stone)}

/* timeline */
.tl{margin:0;padding:0;list-style:none;border-left:1px solid rgba(237,153,44,.3);margin-left:.4rem}
.tl li{position:relative;padding:0 0 2rem 2rem;max-width:none}
.tl li::before{content:"";position:absolute;left:-4.5px;top:.62em;width:8px;height:8px;
  background:var(--nyx);border:1px solid var(--orange);transform:rotate(45deg)}
.tl li.now::before{background:var(--orange)}
.tl .yr{font-family:var(--display);font-size:1.5rem;font-weight:500;color:var(--orange);
  display:block;line-height:1;margin-bottom:.35rem}
.tl .pl{font-family:var(--display);font-size:1.1rem;color:var(--gesso);display:block;margin-bottom:.3rem}
.tl p{font-size:.95rem;margin:0;color:#DAD4C6;max-width:44rem}
@media(min-width:56rem){.tl-cols{columns:2;column-gap:4rem}.tl{break-inside:avoid}}

/* history teaser (on the main page, once the full section moved to history.html) */
.hist-teaser{background:var(--nyx-2);padding:clamp(1.5rem,4vw,2.5rem);border-left:3px solid var(--orange)}
.hist-teaser p:last-child{margin-bottom:0}

/* history page's own back-link */
.back-link{display:inline-block;margin-bottom:2rem;font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--label);border-bottom:none}
.back-link:hover{color:var(--orange)}

/* photography */
.photo-feature{margin:2.5rem 0 0;max-width:38rem}
.photo-feature img{display:block;width:100%;height:auto;border-top:2px solid var(--orange)}
.photo-feature figcaption{font-size:.85rem;color:var(--stone);margin-top:.6rem;max-width:var(--measure)}
.photo-feature--right{margin-left:auto}
.photo-feature--hero{max-width:none;margin-bottom:2.5rem}
.photo-feature--hero img{max-height:32rem;object-fit:cover;object-position:center 70%}
@media(min-width:56rem){
  .photo-feature{max-width:26rem}
  .photo-feature--hero{max-width:none}
}

.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}
.photo-grid a{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--nyx-2)}
.photo-grid img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease,filter .35s ease;filter:saturate(.94)}
.photo-grid a:hover img{transform:scale(1.045);filter:saturate(1.05)}
@media(min-width:44rem){.photo-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:64rem){.photo-grid{grid-template-columns:repeat(4,1fr)}}

/* paths */
.paths{display:grid;gap:1.5rem}
@media(min-width:52rem){.paths{grid-template-columns:1fr 1fr;gap:2rem}}
.path{background:var(--nyx-2);padding:clamp(1.5rem,3vw,2.25rem);border-left:3px solid var(--orange)}
.path.now{border-left-color:var(--navy)}
.path h3{margin-bottom:.6rem}
.path p{font-size:.98rem;max-width:none}
.path p:last-child{margin-bottom:0}

/* levels */
.levels{width:100%;border-collapse:collapse;font-size:.97rem}
.levels caption{text-align:left;color:var(--maroon);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;padding-bottom:1rem}
.levels th,.levels td{text-align:left;padding:.95rem .75rem;border-bottom:1px solid rgba(233,228,216,.11);vertical-align:top}
.levels th{font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stone)}
.levels td:first-child{font-family:var(--display);font-size:1.15rem;font-weight:500;white-space:nowrap}
.levels td:nth-child(2){color:var(--orange);font-family:var(--display);font-size:1.05rem;white-space:nowrap}
.levels tr:last-child td{border-bottom:none}

/* form */
.form-shell{background:var(--nyx-2);padding:clamp(1.5rem,4vw,3rem);border-top:2px solid var(--orange)}
.grid{display:grid;gap:1.35rem}
@media(min-width:44rem){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:1fr 1fr 1fr}}
.grid + .grid{margin-top:1.35rem}
.f{display:flex;flex-direction:column;gap:.45rem}
.f label,legend{font-family:var(--display);font-size:.85rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label)}
.f .hint{font-size:.82rem;color:var(--stone);letter-spacing:0;text-transform:none;font-family:var(--body)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  font-family:var(--body);font-size:1rem;color:var(--gesso);background:#0C1119;
  border:1px solid rgba(233,228,216,.22);padding:.8rem .85rem;width:100%;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 1px var(--orange)}
textarea{min-height:6.5rem;resize:vertical}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--orange) 50%),linear-gradient(135deg,var(--orange) 50%,transparent 50%);
  background-position:calc(100% - 18px) 1.25rem,calc(100% - 12px) 1.25rem;
  background-size:6px 6px;background-repeat:no-repeat}
fieldset{border:none;padding:0;margin:0}
legend{padding:0;margin-bottom:.9rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;max-width:var(--measure)}
.check input{margin-top:.42rem;accent-color:var(--orange);width:1rem;height:1rem;flex:none}
.rule{border:none;border-top:1px solid rgba(233,228,216,.11);margin:2.25rem 0}
.f.invalid label{color:#F0A899}
.f.invalid input,.f.invalid select,.f.invalid textarea{border-color:#F0A899;box-shadow:0 0 0 1px #F0A899}
label.check.invalid{color:#F0A899;outline:1px solid #F0A899;outline-offset:.4rem;border-radius:1px}
.form-status{margin-top:1.25rem;font-size:.95rem;min-height:1.5rem}
.form-status.err{color:#F0A899}
.thanks{display:none}
.thanks h3{color:var(--orange)}

/* donorbox */
.dbox{background:var(--nyx-2);border-top:2px solid var(--navy);padding:clamp(1.25rem,3vw,2rem)}

/* give-now widget */
.give-widget{max-width:28rem}
.give-toggle{display:flex;gap:.5rem;margin-bottom:1.5rem}
.give-toggle-btn{flex:1;font-family:var(--display);font-size:.95rem;letter-spacing:.05em;
  padding:.7rem 1rem;border:1px solid rgba(233,228,216,.25);background:transparent;
  color:var(--label);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.give-toggle-btn.active{background:var(--orange);color:var(--nyx);border-color:var(--orange)}
.give-amounts{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:1.1rem}
@media(min-width:26rem){.give-amounts{grid-template-columns:repeat(4,1fr)}}
.give-amt{font-family:var(--display);font-size:1.1rem;padding:.85rem .5rem;text-align:center;
  border:1px solid rgba(233,228,216,.25);background:transparent;color:var(--gesso);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.give-amt.active{background:var(--orange);color:var(--nyx);border-color:var(--orange)}
.give-amt small{display:block;font-family:var(--body);font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;color:inherit;opacity:.75;margin-top:.2rem}
.give-custom{margin-bottom:1.1rem}
.give-custom-input{display:flex;align-items:center;gap:.4rem;border:1px solid rgba(233,228,216,.25);
  padding:.15rem .9rem;background:rgba(0,0,0,.15)}
.give-custom-input span{color:var(--stone);font-family:var(--display);font-size:1.1rem}
.give-custom-input input{border:none;background:transparent;padding:.6rem 0;font-size:1.05rem}
.give-fee{margin:0 0 1.4rem;font-size:.9rem;color:var(--label);display:flex;gap:.6rem;align-items:flex-start}
.give-summary{font-size:.95rem;color:var(--label);margin-bottom:1.2rem;padding-bottom:1.1rem;
  border-bottom:1px solid rgba(233,228,216,.12)}
.give-summary b{color:var(--gesso);font-family:var(--display);font-weight:600}
.give-error{background:rgba(114,46,48,.35);border:1px solid var(--maroon);color:#F3D9D5;
  padding:.75rem 1rem;font-size:.9rem;margin:0 0 1rem}
#giveStep2 .cta-row .btn:first-child{border-color:rgba(233,228,216,.3);color:var(--label)}
#giveStep2 .cta-row .btn:first-child:hover{background:rgba(233,228,216,.1);color:var(--gesso)}
.give-done{text-align:center;padding:1rem 0}
.dbox-ph{border:1px dashed rgba(233,228,216,.28);padding:2.5rem 1.5rem;text-align:center;
  color:var(--stone);font-size:.92rem}

/* faq */
.faq{border-top:1px solid rgba(233,228,216,.11)}
.faq summary{cursor:pointer;padding:1.25rem 0;font-family:var(--display);font-size:1.15rem;
  list-style:none;display:flex;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--orange);flex:none}
.faq[open] summary::before{content:"\2013"}
.faq p{padding:0 0 1.25rem 1.9rem;max-width:52rem;font-size:.98rem}

.foot{border-top:1px solid rgba(233,228,216,.11);padding:3rem 0 4rem;color:var(--stone);font-size:.9rem}
.foot p{max-width:42rem}
.mark125{background:#fff;display:inline-block;padding:1rem 1.35rem;margin-bottom:2rem}
.mark125 img{display:block;width:auto;height:clamp(5rem,11vw,7.5rem)}
.foot .gr{color:var(--orange);font-size:1.15rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--orange);color:var(--nyx);padding:.6rem 1rem;z-index:9}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
