@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT@9..144,500..700,50..100&display=swap');

:root { --navy:#17394a; --teal:#3c8c88; --mint:#dff1ea; --coral:#ef7867; --peach:#f8ddd0; --ivory:#fdfbf5; --sand:#f4efe5; --gold:#e8b869; --text:#23404a; --muted:#63777d; --shadow:0 14px 35px rgba(23,57,74,.11); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ivory); color:var(--text); font-family:"DM Sans",Arial,sans-serif; } a { color:inherit; } main img { border-radius:12px; }

.site-header { display:flex; align-items:center; justify-content:space-between; padding:22px clamp(24px,6vw,96px); color:var(--navy); background:var(--ivory); border-bottom:1px solid #e5ece7; }
.wordmark-link { color:var(--teal); font:600 21px/1 "Fraunces",Georgia,serif; text-decoration:none; }.wordmark-link::before { content:"✦"; margin-right:9px; color:var(--coral); font-size:14px; }
nav { display:flex; flex-wrap:wrap; gap:10px 26px; } nav a { padding:8px 0; color:var(--navy); font-size:11px; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; } nav a:hover { color:var(--coral); }

.hero { position:relative; overflow:hidden; padding:57px 20px 65px; text-align:center; background:linear-gradient(130deg,var(--mint),#edf7f2 52%,var(--peach)); }.hero::before { content:""; position:absolute; width:500px; height:500px; top:-335px; left:-130px; border:46px solid rgba(239,120,103,.18); border-radius:50%; }.hero::after { content:""; position:absolute; width:280px; height:280px; right:6vw; bottom:-195px; border:42px solid rgba(60,140,136,.13); border-radius:50%; }
h1 { position:relative; z-index:1; margin:0 0 25px; } h1 img { display:block; width:min(480px,86vw); margin:auto; filter:drop-shadow(0 8px 14px rgba(23,57,74,.11)); }
address { position:relative; z-index:1; display:flex; flex-direction:column; gap:8px; color:var(--navy); font-size:14px; font-style:normal; font-weight:600; line-height:1.5; } address span:last-child { display:inline-block; width:max-content; margin:5px auto 0; padding:7px 16px; color:#fff; background:var(--teal); border-radius:99px; font-size:13px; letter-spacing:.03em; }

.scholarships { max-width:1320px; margin:0 auto; padding:86px clamp(24px,5vw,72px) 96px; }.scholarships h2 { max-width:780px; margin:0 auto 46px; color:var(--navy); font:600 41px/1.13 "Fraunces",Georgia,serif; text-align:center; }.scholarships h2 em { color:var(--coral); font-style:normal; }.scholarships h2 span { color:var(--teal); }
.scholarship-grid { display:grid; grid-template-columns:.92fr 1.5fr .84fr; align-items:center; gap:clamp(24px,4vw,58px); }.graduation-card { overflow:hidden; background:#1b1412; border-radius:12px; box-shadow:var(--shadow); }.graduation-card img { display:block; width:100%; height:auto; }
.club-card { position:relative; padding:22px; background:#fff; border:1px solid #e4ece7; border-radius:12px; box-shadow:var(--shadow); }.club-card::before { content:"Scholarship spotlight"; display:block; margin-bottom:9px; color:var(--coral); font-size:10px; font-weight:700; letter-spacing:.12em; text-align:center; text-transform:uppercase; }.club-card h3 { margin:0 0 18px; color:var(--navy); font:600 18px/1.3 "Fraunces",Georgia,serif; text-align:center; }.ocean-photo { display:block; width:100%; height:auto; }.club-card > p { margin:17px 3px 0; color:var(--muted); font-size:14px; line-height:1.65; }
.futures-card { position:relative; padding:32px 23px 25px; background:var(--mint); border-radius:12px; box-shadow:var(--shadow); text-align:center; }.futures-card::before { content:"Community partner"; position:absolute; top:13px; left:0; right:0; color:var(--teal); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.futures-card img { width:100%; height:auto; }.futures-card p { margin:15px 0 0; color:var(--navy); font-size:14px; font-weight:600; line-height:1.55; }

.events { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,8vw,115px); align-items:center; max-width:1160px; margin:0 auto; padding:0 clamp(24px,5vw,72px) 95px; }.events-image { position:relative; }.events-image::before { content:""; position:absolute; width:74px; height:74px; top:-17px; left:-17px; background:var(--gold); border-radius:50%; z-index:-1; }.events-image img { display:block; width:100%; box-shadow:var(--shadow); }.events-copy { max-width:430px; }.eyebrow { margin:0 0 10px; color:var(--coral); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.events h2 { margin:0 0 16px; color:var(--navy); font:600 44px/1 "Fraunces",Georgia,serif; }.events-copy > p:not(.eyebrow),.sale-note p:last-child { color:var(--muted); font-size:15px; line-height:1.7; }.sale-note { margin-top:26px; padding:21px 24px; background:var(--peach); border-radius:10px; }.sale-note h3 { margin:0 0 7px; color:var(--navy); font:600 28px/1 "Fraunces",Georgia,serif; }.sale-note p:last-child { margin:0; }

.story { display:grid; grid-template-columns:1.3fr 1fr .9fr; gap:clamp(35px,7vw,110px); min-height:430px; padding:90px max(8vw,35px); color:#fff; background:var(--navy); }.story h2 { margin:0; color:var(--gold); font:600 50px/1 "Fraunces",Georgia,serif; }.story p { margin:0; font-size:15px; font-weight:500; line-height:1.58; }.story em { color:#a9e0d0; }
footer { display:flex; justify-content:space-between; min-height:230px; padding:51px max(8vw,35px); background:var(--sand); color:var(--navy); font-size:14px; font-weight:600; } footer h2 { margin:0 0 20px; color:var(--teal); font:600 25px/1 "Fraunces",Georgia,serif; } footer a { display:block; width:max-content; margin-bottom:14px; text-decoration:none; } footer a:hover { color:var(--coral); } footer div:last-child { text-align:right; }

@media (max-width:900px) { .scholarship-grid { grid-template-columns:1fr 1fr; }.graduation-card { grid-row:span 2; width:100%; max-width:360px; margin:auto; }.story { grid-template-columns:1fr 1fr; }.story h2 { grid-column:1 / -1; } }
@media (max-width:640px) { .site-header { align-items:flex-start; flex-direction:column; gap:15px; padding:21px 24px; } nav { gap:6px 18px; }.hero { padding:45px 20px 51px; }.scholarships { padding:65px 22px 72px; }.scholarships h2 { font-size:33px; }.scholarship-grid,.events,.story { grid-template-columns:1fr; }.graduation-card { grid-row:auto; }.club-card { padding:18px; }.events { gap:38px; padding:0 28px 70px; }.events h2 { font-size:40px; }.story { gap:27px; padding:64px 28px; }.story h2 { grid-column:auto; font-size:43px; } footer { min-height:0; flex-direction:column; gap:25px; padding:44px 28px; } footer div:last-child { text-align:left; } }