@font-face{font-family:Archivo;src:url('/assets/50cfc2cb-e4c9-471c-8e92-39fdc57e3902.woff2') format('woff2');font-weight:500 900;font-display:swap}
@font-face{font-family:Figtree;src:url('/assets/a7b01e7a-0362-4e0d-af79-3ff6856818a9.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Playfair;src:url('/assets/db140d83-32e9-4b80-88e5-f7c82b9d4d91.woff2') format('woff2');font-weight:400 600;font-style:italic;font-display:swap}
:root{--navy:#0c3f66;--blue:#1473b9;--sky:#66b5e0;--green:#237a30;--bright:#3db44c;--ink:#3f5866;--pale:#f1f5f8;--mint:#e4f1e7;--line:#dce6ed}
/* Three radii only: small controls, large surfaces, pills. Buttons are always pills. */
:root{--r-sm:8px;--r-md:16px;--r-pill:999px}
*{box-sizing:border-box}body{margin:0;background:white;color:var(--ink);font:18px/1.65 Figtree,Arial,sans-serif}h1,h2,h3,h4{font-family:Archivo,Arial,sans-serif;color:var(--navy);line-height:1.13;letter-spacing:-.025em;margin:0 0 22px}h1{font-size:clamp(2.8rem,5.5vw,4.5rem);font-weight:800}h2{font-size:clamp(2rem,3.3vw,2.8rem)}h3{font-size:1.4rem}p{margin:0 0 22px}a{color:var(--blue);text-underline-offset:5px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}img{max-width:100%;display:block}.wrap{width:min(1200px,calc(100% - 64px));margin:auto}.topbar{background:var(--navy);color:white;text-align:center;padding:10px 20px;font-size:14px}.topbar a{color:white;font-weight:700;margin-left:16px}.header{border-bottom:1px solid var(--line);background:#fff}.header-inner{display:flex;align-items:center;gap:30px;min-height:96px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font:800 14px/1.3 Archivo,sans-serif;letter-spacing:.12em;flex-shrink:0}.brand img{width:46px;height:38px;object-fit:contain}.nav{display:flex;align-items:center;gap:26px;margin-left:auto}.nav a{text-decoration:none;font-size:16px;color:var(--ink);white-space:nowrap}.nav a[aria-current=page]{color:var(--navy);border-bottom:2px solid var(--bright)}.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;text-decoration:none;background:var(--blue);color:white;border:2px solid var(--blue);border-radius:var(--r-pill);padding:13px 27px;font:700 15px/1.4 Archivo,sans-serif;min-height:48px}.button:hover{background:var(--navy);border-color:var(--navy);color:white}.button.secondary{background:white;color:var(--navy);border-color:#cbd ae4;border-color:var(--line)}.button.small{padding:11px 22px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.menu-toggle{display:none}.eyebrow{display:block;color:var(--green);text-transform:uppercase;font:700 13px/1.5 Archivo,sans-serif;letter-spacing:.18em;margin-bottom:20px}.section{padding-block:82px}.pale{background:var(--pale)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}.section-head h2{margin-bottom:0}.section-head a{white-space:nowrap;font-size:16px}.grid{display:grid;gap:24px}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.two{grid-template-columns:repeat(2,1fr)}.card{border:1px solid var(--line);border-radius:var(--r-md);padding:30px;background:white;display:flex;flex-direction:column;align-items:start}.card p{font-size:17px}.card a{margin-top:auto;font-weight:700;font-size:16px}.card h3{margin-bottom:16px}.story{background:var(--pale);padding-block:66px}.story h2{max-width:800px}.story p{max-width:740px;font-size:20px}.values{list-style:none;padding:0;margin:0}.values li{padding:20px 0;border-bottom:1px solid var(--line)}.values strong{display:block;color:var(--navy)}.narrow{max-width:780px}.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}.quote{background:#e6f2fa;padding:40px;border-radius:var(--r-md)}.quote p{font:italic 30px/1.45 Playfair,Georgia,serif;color:var(--navy)}details.faq{border-bottom:1px solid var(--line);padding:22px 0}summary{cursor:pointer;color:var(--navy);font-weight:700}details.faq p{padding-top:16px;margin:0}.cta{padding:72px 0;background:var(--mint)}.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px}.cta h2{margin:0}.footer{background:var(--navy);color:#d7e7f2;padding:60px 0 22px}.footer h3{color:white;font-size:18px}.footer a{color:white}.footer .brand{color:white;margin-bottom:20px}.footer-links{display:flex;flex-direction:column;gap:9px}.footer-links a{font-size:16px;text-decoration:none}.footer-bottom{border-top:1px solid #426884;padding-top:24px;margin-top:42px;font-size:14px;display:flex;justify-content:space-between;gap:20px}.page-title{background:var(--pale);padding:52px 0 60px}.breadcrumb{font-size:14px;margin-bottom:24px}.page-title h1{font-size:clamp(2.6rem,5vw,3.6rem);max-width:900px}.page-title p{max-width:720px;margin:0}.notice{padding:16px 20px;background:#eef5f9;border-left:3px solid var(--sky);font-size:16px;border-radius:0 var(--r-sm) var(--r-sm) 0}.form{padding:36px;border:1px solid var(--line);border-radius:var(--r-md);background:white}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}.field label,legend{font-weight:700;color:var(--navy);font-size:16px}input,textarea,select{width:100%;border:1px solid #9dafbb;border-radius:var(--r-sm);padding:12px;background:white;color:var(--navy)}textarea{min-height:150px;resize:vertical}fieldset{border:0;padding:0;margin:0 0 22px}legend{margin-bottom:10px}.choices{display:flex;gap:10px;flex-wrap:wrap}.choice{position:relative;flex:1;text-align:center;min-width:66px}.choice input{position:absolute;opacity:0;width:1px;height:1px}.choice span{display:block;border:1px solid #9dafbb;border-radius:var(--r-sm);padding:12px;color:var(--navy);font-weight:700;cursor:pointer}.choice input:checked+span{background:#e6f2fa;border:2px solid var(--blue);padding:11px}.choice input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}.amount-button{background:white;border:1px solid #9dafbb;border-radius:var(--r-sm);padding:10px 16px;color:var(--navy);flex:1}.amount-button[aria-pressed=true]{background:var(--blue);color:white}.form .button{width:100%}.status{font-size:16px;margin-top:16px}.status:empty{display:none}.empty{border:1px solid var(--line);border-radius:var(--r-md);padding:46px;max-width:800px}.skip{position:absolute;left:12px;top:-100px;padding:12px;background:white;z-index:10}.skip:focus{top:12px}[hidden]{display:none!important}
@media(max-width:1050px){.nav{gap:15px}.header-inner{gap:18px}.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.topbar{font-size:12px}.topbar a{margin-left:8px}.header-inner{min-height:80px;flex-wrap:wrap;justify-content:space-between;padding-block:15px}.menu-toggle{display:block;background:white;color:var(--navy);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 15px;font-size:16px}.nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin:0}.nav.open{display:flex}.nav a{padding:12px 0}.section{padding-block:54px}.three,.two,.split{grid-template-columns:1fr}.split{gap:30px}.four{grid-template-columns:1fr 1fr}.card{padding:24px}.section-head{align-items:start;flex-direction:column}.story{padding-block:46px}.cta .wrap{align-items:start;flex-direction:column}.footer-bottom{flex-direction:column}.form{padding:24px}.page-title{padding-block:36px}.quote{padding:28px}.actions .button{flex-grow:1}}
@media(max-width:420px){.four{grid-template-columns:1fr}.topbar a{display:none}.empty{padding:28px}}
@media(prefers-reduced-motion:no-preference){a,button{transition:background .15s,color .15s}}
/* Preserve intrinsic artwork proportions and allow narrow grid tracks to shrink. */
img{height:auto}

/* Newsletter is the opening section of the shared footer. */
.newsletter{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:64px;padding:0 0 48px;margin-bottom:48px;border-bottom:1px solid #426884}.newsletter h2{color:white;font-size:clamp(1.9rem,3vw,2.5rem);margin-bottom:14px}.newsletter .eyebrow{color:#a9d7f2}.newsletter p{margin-bottom:0;max-width:530px}.newsletter-form{min-width:0}.newsletter-form label{display:block;font-weight:600;font-size:16px;color:white;margin-bottom:8px}.newsletter-controls{display:flex;gap:12px}.newsletter-controls input{min-width:0;flex:1;border-color:transparent;border-radius:var(--r-pill);padding:13px 22px}.newsletter-controls .button{flex-shrink:0;background:#fff;color:var(--navy);border-color:#fff}.newsletter-controls .button:hover{background:#d9effb;border-color:#d9effb}.newsletter .newsletter-note{font-size:14px;margin-top:12px;color:#c1d6e5}.newsletter .status{color:white;margin-top:12px}.newsletter :focus-visible{outline-color:var(--sky)}
@media(max-width:760px){.newsletter{grid-template-columns:1fr;gap:28px;padding-bottom:36px;margin-bottom:36px}}
@media(max-width:420px){.newsletter-controls{flex-direction:column}.newsletter-controls .button{width:100%}}

/* Reserved photo areas: replace figure contents with approved images and alt text. */
.photo-placeholder{margin:0;background:#e5eef3;border:1px solid #c8d9e3;border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-width:0;padding:30px;text-align:center;color:#37586c;overflow:hidden;position:relative}.photo-placeholder::before{content:"";position:absolute;inset:16px;border:1px dashed #a9bfcd;border-radius:var(--r-sm);pointer-events:none}.photo-symbol{font:400 44px/1 Arial,sans-serif;color:#6a8a9c}.photo-placeholder figcaption{max-width:350px;position:relative}.photo-label{display:block;text-transform:uppercase;font:600 12px/1.5 Archivo,sans-serif;letter-spacing:.16em;margin-bottom:8px;color:#506e80}.photo-placeholder strong{font:500 18px/1.45 Figtree,sans-serif;display:block}.photo-card{padding:0;overflow:hidden}.card-photo{width:100%;aspect-ratio:16/10;border-radius:0;border-width:0 0 1px;flex-shrink:0;padding:30px 22px;gap:14px}.card-photo strong{font-size:16px}.card-photo .photo-symbol{font-size:32px}.card-content{display:flex;flex-direction:column;align-items:start;padding:28px;flex:1}.card-content a{margin-top:auto}.four .card-photo{aspect-ratio:4/3;padding:28px 20px}.photo-pair{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;margin-top:32px}.field-photo{aspect-ratio:4/3}.photo-pair .field-photo:nth-child(2){background:#eaf1ec;border-color:#cbdccf}.page-photo{padding-top:48px}.wide-photo{aspect-ratio:3/1;min-height:280px}.photo-placeholder img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.photo-pair{grid-template-columns:1fr;gap:20px}.page-photo{padding-top:30px}.wide-photo{aspect-ratio:4/3;min-height:240px}.card-content{padding:24px}.four .card-photo{aspect-ratio:4/3}}
.wide-photo{width:100%;max-width:100%}

.site-photo{margin:0;position:relative;overflow:hidden;border-radius:var(--r-md);background:#e5eef3;min-width:0}.site-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Per-image crop corrections where the default centre crop loses the subject. */
.site-photo[data-photo="family-parcel"] img{object-position:center 30%}.site-photo.card-photo{border-radius:0;padding:0}.site-photo.wide-photo{aspect-ratio:16/7;max-height:560px}.field-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:34px}.gallery-photo{aspect-ratio:4/3}.gallery-caption{font-size:16px;color:var(--navy);font-weight:600;margin:12px 0 0}.field-gallery>div{min-width:0}@media(max-width:760px){.field-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.site-photo.wide-photo{aspect-ratio:4/3;min-height:0}}@media(max-width:480px){.field-gallery{grid-template-columns:1fr}}



/* Hero: the copy on white beside a photo that runs off the right edge of the screen.
   The photo is 4:3; stretched across a laptop screen it showed only a short strip of the
   scene. Beside the copy its frame stays close to its own shape, so it shows the whole
   scene and is drawn near its real resolution. Only its left corners are rounded, so it
   reads as a card coming in from the edge. --c is the page's content width, so the copy
   lines up with the logo and the rest of the page. */
.hero{--c:min(1200px,100% - 64px);display:grid;grid-template-columns:calc((100% - var(--c)) / 2) calc(var(--c) * .4) minmax(0,1fr);min-height:min(clamp(560px,calc(100svh - 140px),820px),62vw);padding-block:32px 40px}
.hero-media{grid-area:1/3;min-height:0;border-radius:var(--r-md) 0 0 var(--r-md)}
/* The two people span about 9%–92% of the photo's width and their faces 13%–80%. At 45%
   everyone stays in frame at 1280px and up, and both faces still do at 1024px, where
   the photo column is narrowest. */
.hero-media img{object-position:45% center}
/* A light shade at the foot of the photo so the credit reads over any part of it. */
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,33,54,.6),rgba(7,33,54,0) 26%)}
.hero-copy{grid-area:1/2;align-self:center;padding:24px 48px 24px 0}
/* Capped so "feel cared for." (about 6.1em wide) stays on one line in the copy column. */
.hero h1{font-size:clamp(2.8rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.04em;margin:0}
.hero-sub p{font-size:19px;line-height:1.6;margin:24px 0 0;max-width:460px;text-wrap:pretty}
.hero-sub .actions{align-items:center;gap:24px;margin-top:32px}
.hero-text-link{font-weight:600;font-size:16px;text-decoration:none}.hero-text-link:hover{text-decoration:underline}
.hero-credit{grid-area:1/3;position:relative;align-self:end;justify-self:end;margin:0;padding:0 24px 18px;font-size:14px;color:#e2edf4}
/* Below 1000px the photo column would get too narrow to hold both faces, so the copy
   comes first and the photo follows at its own 4:3 shape inside the page margins: the
   whole scene, nothing laid over it. */
@media(max-width:1000px){
 .hero{grid-template-columns:calc((100% - var(--c)) / 2) var(--c) calc((100% - var(--c)) / 2);min-height:0;padding-block:40px 56px}
 .hero-copy{padding:0 0 32px}
 .hero-sub p{max-width:560px}
 .hero-media{grid-area:2/2;aspect-ratio:4/3;border-radius:var(--r-md)}
 .hero-media img{object-position:center}
 .hero-credit{grid-area:2/2;padding:0 16px 14px}
}
@media(max-width:760px){
 .hero{--c:calc(100% - 40px);padding-block:28px 44px}
 .hero-copy{padding-bottom:28px}
 .hero h1{font-size:clamp(2.6rem,11vw,3.6rem)}
 .hero-sub p{font-size:18px;margin-top:20px}
 .hero-sub .actions{width:100%;gap:16px;margin-top:24px}
 .hero-credit{font-size:13px}
}

/* The donate button is the one control that must never disappear, so it shortens
   to "Donate" on narrow screens instead of being hidden as it was before. */
.header-cta .cta-short{display:none}
@media(max-width:1050px){
 .nav{gap:13px}
 .header-cta{padding:11px 20px}
 .header-cta .cta-long{display:none}
 .header-cta .cta-short{display:inline}
}
/* Hamburger from 860px rather than 760px: below this the six nav links plus the
   donate button overflow the row, and shrinking the nav type to fit reads worse
   than a menu does. Restates the toggle styling because the 760px block below
   this width is the only other place it is defined. */
@media(max-width:860px){
 .header-inner{flex-wrap:wrap;justify-content:flex-start;gap:10px;min-height:80px;padding-block:15px}
 .brand{margin-right:auto}
 .header-cta{order:2}
 .menu-toggle{display:block;order:3;min-height:44px;background:white;color:var(--navy);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 15px;font-size:16px}
 .nav{order:4;display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin:0}
 .nav.open{display:flex}
 .nav a{padding:12px 0;font-size:16px}
}
/* Brand, donate and menu must share one row at 375px, or the header costs a
   second row on every mobile page. Measured to fit with room to spare. */
@media(max-width:420px){
 .header-inner{gap:8px}
 .brand{font-size:12.5px;letter-spacing:.08em;gap:9px}
 .brand img{width:38px;height:32px}
 .header-cta{padding:10px 17px}
 .menu-toggle{padding:9px 13px}
}

/* Accordion: replace the default disclosure triangle with a chevron that turns,
   and let rows span the column so the band does not read as half-empty. */
.faq-list{max-width:900px}
details.faq{padding:0}
details.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font-size:18px;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-top:-5px;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(45deg)}
details.faq[open] summary::after{margin-top:4px;transform:rotate(-135deg)}
details.faq p{padding:0 0 24px;margin:0;max-width:760px}
@media(prefers-reduced-motion:no-preference){details.faq summary::after{transition:transform .2s,margin-top .2s}}

/* A short column beside a tall one leaves a hole at the bottom; centring spreads
   that space so the pairing reads as deliberate. Only for deliberately uneven splits. */
.split.center{align-items:center}

/* Four across needs a shorter crop and tighter padding, or the cards tower and
   the copy wraps to five cramped lines. */
.four .card-photo{aspect-ratio:3/2}
.four .card-content{padding:24px}
.four .card h3{font-size:1.22rem}
.four .card p{font-size:16px}

@media(max-width:1050px){.field-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.four .card-photo{aspect-ratio:4/3}.faq-list details.faq summary{font-size:17px}}
/* Restated after the 1050px rule above, which would otherwise win at this width. */
@media(max-width:480px){.field-gallery{grid-template-columns:minmax(0,1fr)}}

/* Contact details and the tax disclosure, shown site-wide. */
.footer-contact{font-size:16px;line-height:1.7}
.footer-tax{margin:42px 0 0;font-size:14px;color:#c1d6e5;max-width:760px}
.footer-bottom a{color:inherit}
.tax-note{margin-top:24px;font-size:15px;color:var(--ink)}
.contact-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:baseline}
.contact-list a{overflow-wrap:anywhere}
@media(max-width:480px){.contact-list li{grid-template-columns:1fr;gap:2px}}

/* Long-form text such as the privacy policy. */
.prose{max-width:720px}
.prose h2{font-size:1.5rem;margin:44px 0 14px}
.prose p,.prose li{font-size:17px}
.prose ul{padding-left:22px;margin:0 0 22px}
.prose li{margin-bottom:8px}
.prose .updated{color:var(--ink);font-size:15px}

/* Upcoming programs: a tinted panel stands where the photo will go, keeping cards even. */
.card-soon{width:100%;aspect-ratio:16/10;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--pale);border-bottom:1px solid var(--line)}
.four .card-soon{aspect-ratio:3/2}
.card-soon span{font:700 13px/1 Archivo,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--green);border:1px solid #b9d9c0;border-radius:var(--r-pill);padding:10px 16px;background:white}
.soon-banner{background:var(--pale);border:1px solid var(--line);border-radius:var(--r-md);padding:36px 40px}
.soon-banner p{font-size:19px;max-width:620px;color:var(--navy)}
@media(max-width:760px){.four .card-soon{aspect-ratio:4/3}.soon-banner{padding:28px 24px}}

/* Ways to give, while online giving is being set up. */
.give-soon h3{font-size:1.7rem}
.give-soon .button{width:auto}

