:root { --blue:#087cb9; --blue-dark:#075b91; --yellow:#f6b52c; --cream:#fff8e7; --ink:#17344a; --muted:#607889; --line:#dce7ea; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.5; }
a { color:inherit; }
.site-header { max-width:1180px; height:82px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--blue); font-size:20px; font-weight:800; letter-spacing:-.04em; text-decoration:none; }
.wings { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; color:var(--white); background:var(--blue); font-size:27px; line-height:1; transform:rotate(-8deg); }
nav { display:flex; gap:25px; font-size:14px; font-weight:700; }
nav a { color:var(--muted); text-decoration:none; }
nav a:hover { color:var(--blue); }
main { overflow:hidden; }
.hero { max-width:1180px; min-height:570px; margin:0 auto; padding:62px 28px 74px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr); gap:70px; align-items:center; }
.kicker { margin:0 0 14px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:670px; margin-bottom:22px; font-size:clamp(42px,5.3vw,74px); line-height:.98; letter-spacing:-.065em; }
.lead { max-width:610px; margin-bottom:31px; color:var(--muted); font-size:19px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:47px; padding:11px 20px; border-radius:7px; font-size:15px; font-weight:800; text-decoration:none; }
.primary { background:var(--blue); color:var(--white); box-shadow:0 9px 20px rgba(8,124,185,.2); }
.primary:hover { background:var(--blue-dark); }
.secondary { border:1px solid #b8d5e4; background:var(--white); color:var(--blue); }
.secondary:hover { background:#eef8fc; }
.hero-image-wrap { position:relative; justify-self:end; width:min(100%,400px); padding:10px; border-radius:26px; background:linear-gradient(140deg,#e4f6fc 5%,#ffd65d 100%); box-shadow:0 24px 48px rgba(12,80,110,.17); transform:rotate(2.3deg); }
.hero-image-wrap img { display:block; width:100%; border-radius:18px; }
.statement { padding:37px 28px 41px; color:var(--white); background:var(--blue); text-align:center; }
.statement p { margin-bottom:6px; font-size:clamp(24px,3vw,38px); font-weight:850; letter-spacing:-.045em; }
.statement span { color:#c7edff; font-size:16px; }
.section { max-width:1180px; margin:0 auto; padding:100px 28px; }
.about { display:grid; grid-template-columns:.86fr 1.14fr; gap:80px; background:var(--cream); }
h2 { margin-bottom:0; font-size:clamp(31px,4vw,50px); line-height:1.02; letter-spacing:-.055em; }
.about-copy { padding-top:7px; color:var(--muted); font-size:18px; }
.about-copy p + p { margin-top:19px; }
.roles { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; padding-top:0; }
.roles article { min-height:218px; padding:27px 23px; border:1px solid var(--line); border-radius:12px; background:var(--white); }
.icon { display:block; height:33px; margin-bottom:24px; color:var(--yellow); font-size:27px; font-weight:800; letter-spacing:-7px; line-height:1; }
.roles article:nth-child(2) .icon,.roles article:nth-child(4) .icon { color:var(--blue); letter-spacing:0; }
.roles h3 { margin-bottom:8px; font-size:19px; letter-spacing:-.03em; }
.roles p { margin-bottom:0; color:var(--muted); font-size:14px; }
.involvement { display:grid; grid-template-columns:1fr 355px; gap:70px; align-items:center; margin-bottom:95px; padding:64px 70px; border-radius:19px; background:#e7f5fa; }
.involvement h2 { margin-bottom:18px; }
.involvement > div > p:not(.kicker) { max-width:650px; color:var(--muted); font-size:17px; }
.text-link { display:inline-block; margin-top:8px; color:var(--blue); font-weight:800; }
.donation { padding:29px 32px; border-radius:13px; background:var(--white); box-shadow:0 12px 26px rgba(28,88,112,.1); }
.donation p { margin-bottom:2px; color:var(--muted); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.donation strong { display:block; color:var(--yellow); font-size:52px; line-height:1; letter-spacing:-.06em; }
.donation span { display:block; margin-top:7px; font-weight:800; }
.donation small { display:block; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.45; }
.merch { max-width:1040px; margin:0 auto; padding:0 28px 102px; }
.merch-heading { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:end; margin-bottom:34px; }
.merch-heading h2 { max-width:500px; }
.merch-heading > p { max-width:530px; margin:0; color:var(--muted); font-size:17px; }
.shirt-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 260px)); justify-content:center; gap:18px; }
.shirt-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--white); }
.shirt-card img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:#f6f2e9; }
.shirt-card h3 { margin:20px 20px 5px; font-size:20px; letter-spacing:-.03em; }
.shirt-card p { min-height:44px; margin:0 20px 22px; color:var(--muted); font-size:14px; }
footer { display:flex; justify-content:space-between; align-items:end; gap:25px; padding:55px max(28px,calc((100vw - 1124px)/2)); color:var(--white); background:#123c58; }
footer .kicker { color:#8cd8f8; }
footer h2 { font-size:31px; }
footer a { color:#fff; font-size:18px; font-weight:750; }
footer > p { margin:0; color:#a8c8d8; font-size:13px; text-align:right; }
@media (max-width:850px) { .hero { grid-template-columns:1fr; gap:30px; padding-top:42px; } .hero-image-wrap { justify-self:center; width:min(100%,360px); } .about,.merch-heading { grid-template-columns:1fr; gap:24px; } .roles { grid-template-columns:repeat(2,1fr); } .involvement { grid-template-columns:1fr; gap:35px; padding:48px; } .donation { max-width:380px; } .shirt-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:560px) { .site-header { height:68px; padding:0 20px; } .brand { font-size:18px; } .wings { width:30px; height:30px; font-size:24px; } nav { gap:13px; font-size:12px; } nav a:nth-child(2) { display:none; } .hero { min-height:0; padding:43px 20px 58px; } h1 { font-size:47px; } .lead { font-size:17px; } .statement { padding:30px 20px; } .section { padding:68px 20px; } .roles { grid-template-columns:1fr; gap:11px; padding-top:0; } .roles article { min-height:0; } .involvement { margin:0 20px 65px; padding:35px 25px; } .merch { padding:0 20px 68px; } .shirt-grid { grid-template-columns:1fr; gap:14px; } .shirt-card p { min-height:0; } footer { display:block; padding:42px 20px; } footer > p { margin-top:30px; text-align:left; } }