:root { --navy:#0b2b4a; --navy-80:#123a63; --gold:#c79a2a; --ink:#1f2937; --muted:#6b7280; --bg:#f7f7f5; --white:#ffffff; --max:1200px; }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3,h4{font-family:Merriweather,Georgia,'Times New Roman',serif;color:var(--navy);margin:0 0 .6rem}
p{line-height:1.65;color:var(--ink)}
a{color:var(--navy)}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.unstyled{list-style:none;margin:0;padding:0}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:.6rem;text-decoration:none;font-weight:700}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
/* Header */
.site-header{background:var(--navy);color:var(--white);position:sticky;top:0;z-index:10}
.header-row{display:flex;align-items:center;gap:20px;padding:14px 0}
.brand{display:flex;text-decoration:none;color:inherit;gap:12px;align-items:center}
.kofc-logo{width:66px;height:66px;object-fit:contain;flex-shrink:0;background:#fff;border-radius:6px;padding:3px}
.brand-title{font-weight:900;letter-spacing:.5px}
.brand-sub{display:block;font-size:.85rem;opacity:.9}
.main-nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.nav-link{text-decoration:none;color:var(--white);opacity:.95;padding:8px 10px;border-radius:8px}
.nav-link.active,.nav-link:hover{background:rgba(255,255,255,.12)}
.nav-toggle{display:none;margin-left:auto;font-size:22px;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.25rem .5rem;border-radius:.4rem}
/* Hero */
.hero{background:linear-gradient(0deg,rgba(11,43,74,.85),rgba(11,43,74,.85)),url('assets/hero.jpg') center/cover no-repeat;color:#fff;padding:72px 0}
.hero-title{font-size:2.4rem;color:#fff}
.hero-sub{font-size:1.1rem;color:#fff;opacity:.95;max-width:820px}
.hero-ctas{margin-top:12px}
/* Body */
.page-body{padding:40px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:20px;box-shadow:0 6px 22px rgba(0,0,0,.03)}
/* Section titles */
.section-title{margin-top:32px}
/* Feature photos (home page project highlights) */
.feature-photo{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.03);text-decoration:none;color:inherit}
.feature-photo img{width:100%;height:220px;object-fit:cover;display:block}
/* Sanctity of Life photo is a tall portrait shot; use a taller, top-weighted crop so more of the statue shows */
.feature-photo img.feature-photo-statue{height:340px;object-position:center 15%}
.feature-caption{padding:16px 20px}
.feature-caption h3{margin-bottom:.3rem}
.feature-caption p{margin:0}
.highlight-card{margin-top:20px;border-left:4px solid var(--gold)}
/* Officers */
.officers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.officer{text-align:center}
.officer .avatar{width:120px;height:120px;border-radius:999px;background:#e5e7eb;margin:0 auto 12px}
.officer .avatar-photo{width:120px;height:120px;border-radius:999px;object-fit:cover;margin:0 auto 12px;display:block;border:3px solid var(--navy)}
.officer .role{color:var(--muted);font-size:.95rem}
/* Content photo pages (Sanctity of Life, News) */
.content-photo{width:100%;max-width:420px;border-radius:14px;box-shadow:0 6px 22px rgba(0,0,0,.1);display:block;margin:0 auto 20px}
.founder-photo{max-width:200px;float:right;margin:0 0 12px 16px}
.photo-card{text-align:center}
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.news-item{padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.news-item.expanded{grid-column:1/-1}
.news-item h3{margin-bottom:.3rem}
.news-item .meta{color:var(--muted);font-size:.9rem;margin-bottom:.4rem}
.news-photo{width:100%;max-height:360px;object-fit:contain;object-position:center;background:#eef0f2;border-radius:8px;display:block;margin-bottom:12px}
/* News photo click-to-reveal popup */
.news-photo-frame{position:relative;margin-bottom:12px}
.news-photo-btn{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;font:inherit;text-align:left}
.news-photo-btn .news-photo{margin-bottom:0}
.news-photo-hint{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;background:rgba(11,43,74,.75);color:#fff;font-size:.8rem;text-align:center;border-radius:0 0 8px 8px}
.news-popup{position:absolute;inset:0;background:rgba(11,43,74,.95);color:#fff;padding:20px 44px 20px 20px;border-radius:8px;overflow-y:auto;opacity:0;transform:scale(.97);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.news-popup.open{opacity:1;transform:scale(1);pointer-events:auto}
.news-popup .meta{color:#cbd5e1}
.news-popup p{color:#fff}
.news-popup-close{position:absolute;top:6px;right:8px;background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:6px 10px}
/* Calendar */
.calendar-embed{width:100%;max-width:100%;height:600px;border:0;border-radius:12px}
.calendar-embed-placeholder{border:2px dashed #cbd5e1;border-radius:12px;background:#f3f4f6;padding:40px 20px;text-align:center;color:var(--muted)}
.calendar-embed-placeholder p{color:var(--muted)}
.muted{color:var(--muted);font-size:.95rem}
/* Events */
.event{display:flex;gap:16px;align-items:flex-start;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;margin-bottom:12px}
.date-badge{min-width:70px;text-align:center;padding:8px;border-radius:10px;background:#fff3;border:1px solid #e5e7eb}
.date-badge .mon{font-weight:700;color:var(--navy)}
.date-badge .day{font-size:1.6rem;font-weight:900;color:var(--navy)}
.event .meta{color:var(--muted);font-size:.95rem}
/* Footer */
.site-footer{background:var(--navy);color:#e5e7eb;margin-top:40px;padding:30px 0}
.site-footer h3{color:#fff}
.site-footer p{color:#e5e7eb}
.site-footer a{color:#e5e7eb;text-decoration:underline}
.footer-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.footer-logo-link{display:inline-block;margin-top:12px;text-decoration:none}
.footer-logo{width:170px;max-width:100%;height:auto;border-radius:8px;background:#fff;padding:6px;display:block}
.copyright{border-top:1px solid rgba(255,255,255,.15);margin-top:16px;padding-top:16px;font-size:.9rem;color:#d1d5db}
/* Auxiliary page mission GIF */
.auxiliary-logo{width:110px;height:auto;float:left;margin:0 16px 12px 0}
/* Fourth Degree page logo banner */
.fourth-degree-logo{display:block;width:100%;max-width:140px;height:auto;margin:0 auto 16px}
/* About Us page — general Knights of Columbus emblem */
.about-kofc-logo{display:block;width:100%;max-width:160px;height:auto;margin:0 auto 16px}
/* Reusable contact list (Contact / Join page program contacts) */
.contact-list li{padding:8px 0;border-bottom:1px solid #e5e7eb}
.contact-list li:last-child{border-bottom:none}
/* Responsive */
@media(max-width:900px){.main-nav{display:none}.nav-toggle{display:block}.hero{padding:56px 0}}
@media(max-width:700px){.news-grid{grid-template-columns:1fr}.news-item.expanded{grid-column:auto}}