:root { --navy:#052b67; --blue:#0756b9; --blue-light:#e8f0fc; --red:#c91422; --ink:#15243a; --muted:#5d6878; --paper:#fff; --ground:#f6f8fc; --line:#dce3ef; --success:#08704c; --danger:#b42318; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ground); color:var(--ink); font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { min-height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.topbar { min-height:88px; display:flex; align-items:center; gap:30px; padding:11px clamp(20px,6vw,92px); background:#fffffff2; backdrop-filter:blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; min-width:0; }
.brand-mark { width:54px; height:54px; object-fit:contain; }
.brand-copy strong { display:block; color:var(--navy); font-size:1rem; font-weight:850; letter-spacing:-.02em; }
.brand small { display:block; color:var(--red); font-weight:800; font-size:.61rem; letter-spacing:.09em; text-transform:uppercase; margin-top:5px; white-space:nowrap; }
.brand small b { color:var(--blue); padding:0 2px; }
nav { display:flex; align-items:center; gap:25px; margin-left:auto; }
nav a { position:relative; color:var(--muted); text-decoration:none; font-weight:750; font-size:.9rem; padding:8px 0; }
nav a::after { content:""; position:absolute; right:0; bottom:0; left:0; height:2px; background:var(--red); transform:scaleX(0); transition:transform .18s ease; }
nav a:hover,nav a:focus-visible { color:var(--navy); } nav a:hover::after,nav a:focus-visible::after { transform:scaleX(1); }
main { width:min(1180px,100% - 40px); margin:0 auto; flex:1; padding:42px 0 76px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding:22px clamp(20px,6vw,92px); color:var(--muted); font-size:.84rem; background:#fff; }
.footer-identity { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }.footer-logo { width:27px; height:27px; object-fit:contain; } footer strong { color:var(--navy); font-weight:850; } footer em { color:var(--red); font-style:normal; font-weight:700; }.footer-contact { color:var(--navy); font-weight:800; text-decoration:none; }.footer-contact:hover { text-decoration:underline; }
.hero { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(34px,6vw,80px); align-items:center; padding:25px 0 70px; min-height:530px; }.eac-hero { position:relative; }.eac-hero::before { content:""; position:absolute; z-index:-1; width:500px; height:500px; right:-330px; top:-180px; border-radius:50%; background:radial-gradient(circle,var(--blue-light),transparent 68%); }
.eyebrow { font-size:.72rem; letter-spacing:.145em; font-weight:850; color:var(--red); margin:0 0 12px; }.hero h1,.page-title,h1,h2 { font-family:Georgia,"Times New Roman",serif; }.hero h1,.page-title { font-size:clamp(2.6rem,5vw,4.8rem); line-height:1.04; letter-spacing:-.05em; color:var(--navy); margin:0 0 21px; max-width:12ch; }.hero h1::after { content:""; display:block; width:78px; height:5px; margin-top:24px; border-radius:6px; background:linear-gradient(90deg,var(--red) 0 45%,var(--blue) 45%); }.hero p { max-width:640px; color:#405069; font-size:1.08rem; }.hero p+p { margin-top:24px; }
.hero-card,.panel { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px; box-shadow:0 18px 45px #052b6710; }.eac-logo-card { position:relative; overflow:hidden; border-top:4px solid var(--red); background:linear-gradient(145deg,#fff,#f4f7fe); }.eac-logo-card>img { display:block; width:min(100%,330px); margin:0 auto 12px; filter:drop-shadow(0 12px 13px #052b6720); }.hero-card h2,.panel h2 { font:700 1.55rem/1.16 Georgia,serif; color:var(--navy); margin:0 0 14px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:42px; }.stat { padding:17px 15px; border:1px solid var(--line); border-top:3px solid var(--red); border-radius:10px; background:#ffffffbd; }.stat:nth-child(2) { border-top-color:var(--blue); }.stat strong { display:block; color:var(--navy); font-size:1.15rem; }.stat span { color:var(--muted); font-size:.84rem; }
.button { appearance:none; border:1px solid transparent; border-radius:9px; padding:11px 17px; font:800 .9rem inherit; cursor:pointer; text-decoration:none; display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }.button:hover { transform:translateY(-1px); }.primary { color:#fff; background:var(--navy); box-shadow:0 8px 17px #052b6728; }.primary:hover { background:var(--blue); }.quiet { background:#fff; border-color:var(--navy); color:var(--navy); }.quiet:hover { background:var(--blue-light); }.wide { width:100%; }.text-button { display:block; border:0; background:none; color:var(--blue); font-weight:800; padding:10px 0; cursor:pointer; }
.home-section { margin-top:34px; padding:clamp(26px,4vw,48px); border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:0 12px 34px #052b6709; }.home-section h2 { color:var(--navy); font-size:clamp(1.9rem,3.2vw,3rem); line-height:1.1; letter-spacing:-.04em; margin:0; }.about-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(25px,7vw,100px); background:linear-gradient(130deg,#fff 0 62%,#edf3fe 100%); }.prose p { margin:0 0 16px; color:#405069; }.mission-section { display:grid; grid-template-columns:110px 1fr; gap:30px; align-items:center; color:#fff; background:linear-gradient(115deg,var(--navy),#0a4aa0); }.mission-section h2,.mission-section p { color:#fff; }.mission-section .eyebrow { color:#ffccd0; }.mission-mark { width:100px; height:100px; display:grid; place-items:center; border:1px solid #ffffff66; border-radius:50%; font:800 1.65rem Georgia,serif; letter-spacing:.06em; background:#ffffff12; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:23px; }.section-heading>p { max-width:360px; margin:0; color:var(--muted); }.program-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(245px,1fr); gap:16px; overflow-x:auto; padding:2px 1px 12px; scroll-snap-type:x mandatory; scrollbar-color:var(--blue) transparent; }.program-card { min-height:245px; padding:23px; border-radius:15px; scroll-snap-align:start; color:#fff; background:linear-gradient(145deg,#0a4da3,#052b67); box-shadow:inset 0 -65px 70px #052b678c; }.program-card.learning { background:linear-gradient(145deg,#b70f20,#6f0712); }.program-card.livelihoods { background:linear-gradient(145deg,#07625e,#063a38); }.program-card.resilient { background:linear-gradient(145deg,#735016,#3e2603); }.program-card span { display:inline-flex; width:31px; height:31px; border-radius:50%; align-items:center; justify-content:center; font-size:.72rem; font-weight:900; border:1px solid #ffffff88; }.program-card h3 { font:700 1.4rem/1.15 Georgia,serif; margin:38px 0 11px; }.program-card p { font-size:.9rem; margin:0; color:#ffffffdf; }.callout-section { display:flex; align-items:center; justify-content:space-between; gap:35px; border-left:5px solid var(--red); }.callout-section p { max-width:650px; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:22px; }.span-8 { grid-column:span 8; }.span-4 { grid-column:span 4; }.panel h3 { margin:0 0 5px; font-size:1rem; color:var(--navy); }.page-title { font-size:clamp(2.35rem,4vw,3.65rem); }.muted,.detail { color:var(--muted); }.detail { font-size:.9rem; }.message { min-height:1.35em; color:var(--danger); font-weight:650; font-size:.9rem; }.success { color:var(--success); }
form label { display:block; font-weight:750; font-size:.88rem; margin:14px 0; } input,select,textarea { display:block; width:100%; border:1px solid #b9c7dd; background:#fff; padding:11px 12px; border-radius:8px; margin-top:6px; font:inherit; color:var(--ink); } input:hover,select:hover,textarea:hover { border-color:var(--blue); } textarea { min-height:105px; resize:vertical; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px; }.full { grid-column:1/-1; }.consent-row { display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-weight:600; line-height:1.35; }.consent-row input { display:inline-block; width:18px; margin:2px 0 0; accent-color:var(--navy); }.form-actions { margin-top:22px; display:flex; align-items:center; gap:16px; }.badge { display:inline-block; border-radius:30px; padding:4px 10px; font-size:.76rem; font-weight:850; background:#e1f2ed; color:#17604f; }.badge.submitted,.badge.under_review { background:#fff1c7; color:#755500; }.badge.rejected,.badge.suspended { background:#ffe5e1; color:#9c3b30; }.badge.approved { background:#dff3e8; color:#17604f; }.dashboard-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:27px; }.dashboard-head h1 { font:700 2.5rem Georgia,serif; color:var(--navy); margin:0; }.list { padding:0; margin:0; list-style:none; }.list li { padding:14px 0; border-bottom:1px solid var(--line); }.list li:last-child { border-bottom:0; }.eac-logo-card .list li { padding-left:23px; position:relative; }.eac-logo-card .list li::before { content:""; position:absolute; left:2px; top:22px; width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:13px 0 0 var(--blue); }.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; } table { width:100%; border-collapse:collapse; font-size:.9rem; } th,td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); } th { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:#f2f6fd; } tr:hover td { background:#f8faff; }.empty { padding:25px; color:var(--muted); border:1px dashed var(--line); border-radius:10px; }
dialog { border:0; border-radius:18px; padding:0; max-width:440px; width:calc(100% - 32px); box-shadow:0 24px 75px #052b6755; } dialog::backdrop { background:#061a3d88; } dialog form { padding:32px; background:#fff; position:relative; }.close { position:absolute; right:16px; top:12px; border:0; background:none; font-size:28px; cursor:pointer; color:var(--muted); } hr { border:0; border-top:1px solid var(--line); margin:22px 0; }.auth-only,.admin-only { display:none; }:focus-visible { outline:3px solid #c9142275; outline-offset:3px; }
.community-head { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:30px; }.community-head .page-title { max-width:15ch; }.community-head p { max-width:660px; color:var(--muted); }.community-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:22px; align-items:start; }.community-panel { padding:28px; }.announcement-form { display:grid; grid-template-columns:1fr 180px; gap:0 16px; }.announcement-form .full { grid-column:1/-1; }.announcement-list { display:grid; gap:13px; }.announcement-card { border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:12px; padding:18px; background:#fbfcff; }.announcement-card.memo { border-left-color:var(--red); }.announcement-card.member_approval { border-left-color:var(--success); background:#f6fcf8; }.announcement-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.78rem; color:var(--muted); }.announcement-card h3 { color:var(--navy); margin:13px 0 7px; font:700 1.23rem Georgia,serif; }.announcement-card p { white-space:pre-wrap; margin:0 0 10px; color:#405069; }.announcement-card small,.chat-message small { color:var(--muted); }.chat-list { max-height:580px; overflow:auto; display:grid; gap:12px; padding:4px 4px 4px 0; margin:18px 0; }.chat-message { padding:14px; border:1px solid var(--line); border-radius:12px; background:#f9fbff; }.chat-message strong { color:var(--navy); }.chat-message p { white-space:pre-wrap; margin:7px 0; }.chat-message .badge { margin-left:4px; font-size:.65rem; background:var(--blue-light); color:var(--navy); }
@media(max-width:840px) { .topbar { gap:18px; padding:12px 28px; }.hero { grid-template-columns:1fr; }.hero-card { max-width:580px; }.about-section { grid-template-columns:1fr; } }
@media(max-width:760px) { .topbar { gap:12px; padding:11px 18px; }.topbar nav { display:none; }.brand-copy strong { font-size:.92rem; }.brand small { max-width:200px; overflow:hidden; text-overflow:ellipsis; }.hero { padding-top:20px; min-height:0; }.hero h1 { font-size:clamp(2.65rem,12vw,3.7rem); }.stats { grid-template-columns:1fr; }.grid { display:block; }.span-8,.span-4 { margin-bottom:18px; }.form-grid { grid-template-columns:1fr; }.dashboard-head { align-items:flex-start; flex-direction:column; }.hero-card,.panel,.home-section { padding:24px; }.mission-section { grid-template-columns:1fr; }.mission-mark { width:70px; height:70px; }.section-heading,.callout-section,.community-head { align-items:flex-start; flex-direction:column; }.program-carousel { grid-auto-columns:82%; }.community-grid { grid-template-columns:1fr; }.announcement-form { grid-template-columns:1fr; } footer { justify-content:center; text-align:center; }.footer-identity { justify-content:center; } }