:root { --navy:#2e2b72; --blue:#2648a3; --red:#f51e28; --cream:#f7f5ef; --ink:#191d2b; --muted:#606778; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
p { line-height:1.68; }
.site-header,.simple-header { height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:0 clamp(22px,5vw,76px); background:#fff; position:sticky; top:0; z-index:50; border-bottom:1px solid #e5e3dc; }
.brand { color:var(--navy); font-size:24px; font-weight:950; letter-spacing:-1px; font-style:italic; white-space:nowrap; }
.brand span { color:var(--red); }
.logo-brand { align-self:stretch; display:flex; align-items:center; }
.logo-brand img { width:150px; height:76px; object-fit:contain; filter:drop-shadow(0 5px 6px #1218422b); }
.nav-links { display:flex; align-items:center; gap:clamp(14px,2vw,28px); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.nav-links a:hover { color:var(--red); }
.nav-donate { background:var(--red); color:#fff!important; padding:13px 19px; box-shadow:5px 5px 0 var(--navy); }
.nav-toggle,.nav-button { display:none; }
.hero { min-height:700px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; overflow:hidden; background:linear-gradient(110deg,#fff 0%,#fff 54%,#edf0fa 54%,#edf0fa 100%); }
.hero-copy { padding:85px clamp(28px,6vw,100px); max-width:850px; }
.eyebrow { margin:0 0 18px; color:var(--blue); font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.18em; }
.eyebrow.red { color:var(--red); } .eyebrow.light { color:#fff; opacity:.8; }
.hero h1,.chinese-hero h1 { margin:0; font-size:clamp(54px,6.3vw,102px); line-height:.91; letter-spacing:-.07em; text-transform:uppercase; color:var(--navy); font-weight:950; }
.hero h1 span,.chinese-hero h1 span { color:var(--red); }
.hero-lead { margin:30px 0; max-width:620px; font-size:clamp(18px,2vw,25px); line-height:1.4; font-weight:700; color:#34384a; }
.hero-actions,.support-actions { display:flex; flex-wrap:wrap; gap:14px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:16px 22px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:14px; transition:.2s ease; }
.button:hover { transform:translateY(-2px); }
.button-red { background:var(--red); color:#fff; box-shadow:6px 6px 0 var(--navy); }
.button-outline { border:2px solid var(--navy); color:var(--navy); background:#fff; }
.button-white { background:#fff; color:var(--navy); }
.portrait-wrap { align-self:stretch; position:relative; display:flex; align-items:flex-end; justify-content:center; padding:70px 8% 0; }
.portrait-burst { position:absolute; inset:14% -10% 18% 8%; background:var(--blue); transform:skew(-10deg) rotate(-5deg); box-shadow:24px 24px 0 var(--red); }
.portrait { position:relative; z-index:2; width:min(92%,560px); height:auto; object-fit:cover; border:9px solid #fff; box-shadow:0 25px 55px #13154235; }
.portrait-logo { position:absolute; z-index:4; right:4%; bottom:26px; width:clamp(130px,16vw,220px); height:auto; background:#fff; padding:7px; filter:drop-shadow(0 8px 10px #10143d55); }
.portrait-tag { position:absolute; z-index:3; left:3%; bottom:38px; color:#fff; background:var(--navy); padding:18px 26px; transform:rotate(-2deg); box-shadow:8px 8px 0 var(--red); }
.portrait-tag strong { display:block; font-size:27px; font-style:italic; }.portrait-tag span { color:#fff; font-size:19px; font-weight:950; }
.millbrae-landscape { min-height:430px; position:relative; display:flex; align-items:flex-end; justify-content:flex-end; padding:38px clamp(24px,7vw,110px); background:url('/assets/millbrae-landscape.webp') center/cover no-repeat; border-bottom:10px solid var(--red); }
.landscape-caption { display:flex; align-items:center; gap:20px; color:#fff; background:#17164be8; padding:18px 26px 18px 18px; box-shadow:8px 8px 0 var(--red); }.landscape-caption img { width:145px; height:100px; object-fit:contain; background:#fff; padding:6px; }.landscape-caption p { margin:0; color:#cbd7ff; text-transform:uppercase; letter-spacing:.13em; font-size:12px; font-weight:900; }.landscape-caption h2 { margin:4px 0 0; font-size:32px; line-height:1; }
.section-pad { padding:100px clamp(24px,7vw,110px); }
.section-kicker { border-top:6px solid var(--red); color:var(--navy); padding-top:15px; font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.16em; }
.intro-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:8vw; padding-top:38px; }
.intro h2,.section-heading h2,.leadership h2,.listen h2,.support h2,.endorsements h2,.gallery h2 { margin:0; color:var(--navy); font-size:clamp(38px,4.6vw,70px); line-height:1; letter-spacing:-.045em; }
.intro-grid p { font-size:19px; margin-top:0; color:#444b5c; }
.leadership { background:var(--navy); }
.leadership-card { display:grid; grid-template-columns:1fr 1fr; gap:8vw; background:#fff; padding:clamp(35px,5vw,75px); box-shadow:16px 16px 0 var(--red); }
.leadership-card>div>p:last-child { color:var(--muted); font-size:18px; }
.accomplishment-strip { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:38px; }.accomplishment-strip article { color:#fff; border:1px solid #ffffff38; border-top:6px solid var(--red); padding:30px; }.accomplishment-strip span { color:#aebeff; text-transform:uppercase; letter-spacing:.14em; font-weight:900; font-size:12px; }.accomplishment-strip h3 { font-size:27px; margin:10px 0; text-transform:uppercase; }.accomplishment-strip p { color:#dce2ff; margin:0; }
.check-list { list-style:none; margin:0; padding:0; display:grid; gap:0; align-content:center; }
.check-list li { padding:20px 0; border-bottom:1px solid #dcdce5; display:flex; gap:15px; align-items:flex-start; font-size:17px; font-weight:700; }
.check-list svg { color:var(--red); flex:0 0 auto; }
.priorities { background:#fff; }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:8vw; align-items:end; margin-bottom:55px; }.section-heading.compact { align-items:center; }
.section-heading>p { color:var(--muted); font-size:18px; margin:0; }
.priority-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.priority-card { min-height:315px; position:relative; padding:34px 27px; border:1px solid #dfe1ea; background:var(--cream); transition:.2s; }
.priority-card:hover { transform:translateY(-6px); border-color:var(--red); }
.priority-card>svg { color:var(--red); width:38px; height:38px; margin-top:50px; }
.priority-number { position:absolute; top:25px; right:25px; color:#aeb2c1; font-weight:900; }
.priority-card h3 { color:var(--navy); font-size:22px; text-transform:uppercase; margin:22px 0 8px; }.priority-card p { color:var(--muted); margin:0; }
.listen { display:grid; grid-template-columns:.35fr 1fr; gap:7vw; align-items:start; color:#fff; background:var(--blue); }
.listen h2 { color:#fff; max-width:900px; }.listen>div>p:not(.eyebrow) { max-width:800px; font-size:20px; color:#e4e9ff; }
.quote-icon { width:120px; height:120px; color:var(--red); }
.text-link { display:inline-flex; align-items:center; gap:8px; border-bottom:2px solid #fff; padding-bottom:7px; margin-top:10px; font-weight:900; text-transform:uppercase; }
.endorsement-placeholder { display:flex; align-items:center; gap:25px; padding:36px; border:2px dashed #b8bbca; background:#fff; }.endorsement-placeholder>svg { width:54px; height:54px; color:var(--red); }.endorsement-placeholder h3 { margin:0; color:var(--navy); font-size:24px; }.endorsement-placeholder p { margin:4px 0 0; color:var(--muted); }
.endorsement-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.endorsement-grid article { background:#fff; border:1px solid #dedfe8; border-top:5px solid var(--blue); padding:25px 20px; }.endorsement-grid article.endorsement-featured { color:#fff; background:var(--navy); border-color:var(--red); }.endorsement-grid span { display:block; color:var(--red); min-height:30px; text-transform:uppercase; letter-spacing:.11em; font-weight:900; font-size:11px; }.endorsement-grid h3 { margin:7px 0 0; color:inherit; font-size:23px; line-height:1.05; }
.support { display:flex; justify-content:space-between; align-items:center; gap:60px; color:#fff; background:var(--navy); border-top:14px solid var(--red); }.support h2 { color:#fff; max-width:850px; }.support-copy>p:not(.eyebrow) { max-width:700px; font-size:19px; }.support-icon { flex:0 0 auto; width:min(18vw,210px); height:min(18vw,210px); color:var(--red); opacity:.9; }
.gallery { background:#fff; }.gallery-card { max-width:900px; display:grid; grid-template-columns:1fr 1fr; background:var(--cream); border-left:10px solid var(--red); }.gallery-card img { width:100%; height:100%; object-fit:cover; }.gallery-card>div { padding:40px; align-self:center; }.gallery-card span { color:var(--red); font-weight:900; text-transform:uppercase; letter-spacing:.12em; }.gallery-card h3 { color:var(--navy); font-size:35px; line-height:1.05; margin:12px 0; }.gallery-card p { color:var(--muted); }
.photo-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:235px; gap:12px; }.photo-grid figure { position:relative; margin:0; overflow:hidden; background:#d9deef; }.photo-grid figure.photo-wide { grid-column:span 2; }.photo-grid img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }.photo-grid figure:hover img { transform:scale(1.035); }.photo-grid figcaption { position:absolute; inset:auto 0 0; padding:34px 16px 14px; color:#fff; font-size:13px; font-weight:800; background:linear-gradient(transparent,#11143ecc); }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:54px; }.video-grid article { background:var(--navy); color:#fff; border-bottom:5px solid var(--red); }.video-grid video { display:block; width:100%; aspect-ratio:16/9; background:#05061a; object-fit:cover; }.video-grid h3 { margin:0; padding:18px 20px; font-size:19px; }
.footer { color:#fff; background:#17164b; }.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:65px clamp(24px,7vw,110px); }.footer-brand { margin:0; font-size:27px; font-weight:950; font-style:italic; }.footer-brand em { color:var(--red); }.footer-grid p:last-child { color:#c8c9df; }
.footer-brand-group { display:flex; align-items:center; gap:22px; }.footer-logo { width:190px; height:135px; object-fit:contain; background:#fff; padding:8px; }
.contact-list { display:grid; gap:14px; align-content:start; }.contact-list a,.contact-list span { display:flex; align-items:center; gap:10px; }
.footer-legal { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:20px clamp(24px,7vw,110px); border-top:1px solid #ffffff2c; font-size:13px; }.footer-legal a { display:flex; align-items:center; gap:7px; color:#fff; font-weight:900; text-transform:uppercase; }
.simple-header { position:relative; }.back-link { display:flex; align-items:center; gap:7px; color:var(--navy); font-weight:800; }
.chinese-hero { color:#fff; background:var(--navy); min-height:570px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }.chinese-hero h1 { color:#fff; font-size:clamp(50px,7vw,96px); }.chinese-hero>p:not(.eyebrow) { font-size:22px; }.chinese-content { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.chinese-content article { background:#fff; padding:40px; border-top:7px solid var(--red); }.chinese-content article>span { color:var(--red); font-weight:950; }.chinese-content h2 { color:var(--navy); font-size:30px; }.chinese-content p { color:var(--muted); font-size:17px; }.chinese-contact { background:var(--blue); color:#fff; }.chinese-contact h2 { font-size:45px; margin-top:0; }
@media (max-width:1000px) { .nav-button { display:block; }.nav-toggle { display:none; }.nav-links { display:none; position:absolute; left:0; right:0; top:82px; background:#fff; padding:25px; flex-direction:column; align-items:stretch; border-bottom:5px solid var(--red); }.nav-toggle:checked~.nav-links { display:flex; }.hero { grid-template-columns:1fr; background:#fff; }.hero-copy { padding-bottom:40px; }.portrait-wrap { min-height:520px; background:#edf0fa; }.priority-grid { grid-template-columns:1fr 1fr; }.endorsement-grid { grid-template-columns:1fr 1fr; }.photo-grid { grid-template-columns:1fr 1fr; }.video-grid { grid-template-columns:1fr; }.intro-grid,.leadership-card,.section-heading { grid-template-columns:1fr; }.listen { grid-template-columns:1fr; }.quote-icon { width:70px; height:70px; }.support-icon { display:none; } }
@media (max-width:650px) { .site-header,.simple-header { height:70px; padding:0 20px; }.nav-links { top:70px; }.brand { font-size:20px; }.logo-brand img { width:74px; height:74px; }.hero h1 { font-size:50px; }.hero-copy { padding:55px 24px 40px; }.portrait-wrap { min-height:420px; padding:50px 28px 0; }.portrait-tag { left:17px; bottom:24px; }.portrait-logo { right:12px; bottom:17px; width:105px; }.millbrae-landscape { min-height:330px; padding:22px; }.landscape-caption { width:100%; }.landscape-caption img { width:78px; height:78px; }.landscape-caption h2 { font-size:25px; }.section-pad { padding:70px 24px; }.intro-grid { gap:20px; }.leadership-card { padding:30px 24px; box-shadow:9px 9px 0 var(--red); }.accomplishment-strip,.priority-grid,.endorsement-grid,.photo-grid,.chinese-content { grid-template-columns:1fr; }.photo-grid { grid-auto-rows:260px; }.photo-grid figure.photo-wide { grid-column:span 1; }.priority-card { min-height:250px; }.listen { gap:15px; }.support { padding-top:65px; padding-bottom:65px; }.gallery-card { grid-template-columns:1fr; }.footer-grid { grid-template-columns:1fr; padding:50px 24px; }.footer-brand-group { align-items:flex-start; }.footer-legal { flex-direction:column; align-items:flex-start; padding:22px 24px; }.chinese-hero h1 { font-size:46px; } }
@media (max-width:650px) { .logo-brand img { width:118px; height:63px; } .landscape-caption img { width:112px; height:82px; } }
.photo-open { display:block; height:100%; cursor:zoom-in; }
.photo-open:focus-visible { outline:4px solid var(--red); outline-offset:-4px; }
body.viewer-open { overflow:hidden; }
#photo-viewer { box-sizing:border-box; width:94vw; max-width:1400px; height:92vh; max-height:92dvh; padding:16px; border:0; border-radius:10px; color:white; background:#101124; }
#photo-viewer::backdrop { background:rgba(0,0,0,.85); }
.viewer-toolbar { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding-bottom:12px; }
.viewer-toolbar button { min-width:44px; min-height:44px; padding:8px 14px; border:1px solid #74758c; border-radius:6px; background:#fff; color:#17164b; font-size:18px; cursor:pointer; }
.viewer-toolbar button:disabled { opacity:.4; cursor:default; }
.viewer-toolbar button:focus-visible { outline:3px solid #ff3545; outline-offset:2px; }
.viewer-stage { height:calc(100% - 125px); overflow:auto; background:#080910; }
#viewer-image { display:block; width:100%; height:100%; max-width:none; object-fit:contain; }
#viewer-image.is-zoomed { height:auto; object-fit:initial; }
#viewer-caption { margin:12px 0 0; text-align:center; font-size:16px; }
@media(max-width:650px) { #photo-viewer { padding:10px; width:98vw; } .viewer-toolbar { gap:4px; } .viewer-toolbar button { padding:6px 10px; } }
.photo-grid .photo-flyer img { object-fit:contain; background:#f7f5ef; }