@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#F5F6F1;
  --surface:#FFFFFF;
  --surface-2:#E9ECE2;
  --ink:#1C2420;
  --ink-soft:#4B564E;
  --ink-faint:#77816F;
  --line:#D9DCCE;
  --gold:#8F6D24;
  --gold-bright:#B98A2B;
  --gold-bg:#F3EBD6;
  --green:#3C5940;
  --green-deep:#233A29;
  --green-bg:#E4EBE2;
  --rust:#9C3626;
  --rust-bg:#F5E1DC;
  --shadow: 0 1px 3px rgba(28,36,32,0.08), 0 1px 1px rgba(28,36,32,0.04);
  --shadow-lg: 0 8px 24px rgba(28,36,32,0.12);
  --radius: 8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12150E; --surface:#181C13; --surface-2:#1F2418; --ink:#E8EAE0; --ink-soft:#ABB39F;
    --ink-faint:#7C8474; --line:#333A2A; --gold:#D8B461; --gold-bright:#E2C077; --gold-bg:#2C2517;
    --green:#8AAB8E; --green-deep:#0F1710; --green-bg:#1E2A20; --rust:#E28A78; --rust-bg:#2E1E1A;
    --shadow: 0 1px 3px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --bg:#12150E; --surface:#181C13; --surface-2:#1F2418; --ink:#E8EAE0; --ink-soft:#ABB39F;
  --ink-faint:#7C8474; --line:#333A2A; --gold:#D8B461; --gold-bright:#E2C077; --gold-bg:#2C2517;
  --green:#8AAB8E; --green-deep:#0F1710; --green-bg:#1E2A20; --rust:#E28A78; --rust-bg:#2E1E1A;
  --shadow: 0 1px 3px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Public Sans', system-ui, sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; }
h1,h2,h3,h4{ font-family:'Oswald', system-ui, sans-serif; font-weight:700; text-wrap:balance; margin:0; }
p{ margin:0 0 1rem; max-width:70ch; }
a{ color:var(--green); text-decoration-color:var(--line); }
a:hover{ color:var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.mono{ font-family:'IBM Plex Mono', monospace; }
.eyebrow{ font-family:'IBM Plex Mono'; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.container{ max-width:1080px; margin:0 auto; padding:0 1.5rem; }
.btn{ display:inline-block; font-family:'Oswald'; font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:.85rem; padding:.75rem 1.4rem; border-radius:5px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--gold); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--gold-bright); color:#fff; }
.btn-outline{ background:transparent; border-color:var(--surface); color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline:hover{ background:rgba(255,255,255,.12); color:#fff; }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow); }

/* ---------- Header ---------- */
.site-header{ background:var(--green-deep); position:sticky; top:0; z-index:40; box-shadow:var(--shadow); }
.header-inner{ max-width:1080px; margin:0 auto; padding:.65rem 1.5rem; display:flex; align-items:center; gap:1.2rem; }
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; }
.brand img{ width:42px; height:42px; border-radius:50%; }
.brand-text{ font-family:'Oswald'; line-height:1.15; }
.brand-text .l1{ display:block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#B7C2AF; }
.brand-text .l2{ display:block; font-size:1rem; font-weight:700; color:#fff; }
.main-nav{ display:flex; gap:1.3rem; align-items:center; }
.main-nav a{ font-family:'Oswald'; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; color:#DCE3D6; text-decoration:none; padding:.3rem 0; border-bottom:2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--gold-bright); }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer; }
@media (max-width:880px){
  .main-nav{ position:absolute; top:100%; left:0; right:0; background:var(--green-deep); flex-direction:column; align-items:stretch; padding:.5rem 1.5rem 1rem; gap:.2rem; display:none; }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.1); }
  .nav-toggle{ display:block; }
  .header-inner{ position:relative; flex-wrap:wrap; }
}

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(155deg, var(--green-deep) 0%, var(--green) 140%); color:#fff; padding:3.4rem 0 3rem; position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 34px); pointer-events:none; }
.hero-inner{ position:relative; max-width:760px; }
.hero h1{ font-size:clamp(1.9rem,4.6vw,2.7rem); color:#fff; margin-top:.5rem; }
.hero .lede{ color:#DCE3D6; font-size:1.08rem; max-width:58ch; margin-top:.8rem; }
.hero .actions{ display:flex; gap:.8rem; margin-top:1.5rem; flex-wrap:wrap; }
.hero-sm{ padding:2.2rem 0 2rem; }
.hero-sm h1{ font-size:clamp(1.6rem,4vw,2.1rem); }

/* ---------- Sections ---------- */
.section{ padding:3rem 0; }
.section-tight{ padding:1.8rem 0; }
.section-head{ margin-bottom:1.6rem; }
.section-head h2{ font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em; margin-top:.35rem; }
.section-alt{ background:var(--surface-2); }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:1.1rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:820px){ .grid-3{ grid-template-columns:repeat(2,1fr); } .grid-5{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-2, .grid-3, .grid-5{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.3rem 1.4rem; }
.card h3{ font-size:1.05rem; margin-bottom:.5rem; }
.card p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:0; }

.pillar-card{ background:var(--green-bg); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1rem; text-align:center; }
.pillar-card .num{ font-family:'IBM Plex Mono'; color:var(--gold); font-size:.8rem; }
.pillar-card h3{ font-size:1rem; margin-top:.4rem; }
.pillar-card p{ font-size:.87rem; margin-top:.5rem; color:var(--ink-soft); }

/* ---------- Council / roster cards with photo ---------- */
.council-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:1.2rem; }
.council-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.council-card .portrait-frame{
  aspect-ratio:1/1; overflow:hidden; background:var(--surface-2); border-bottom:3px solid var(--gold);
  display:flex; align-items:center; justify-content:center; padding:.35rem;
}
/* Same rule as the Fallen Comrades portraits: object-fit:contain, never cover.
   These are casual, non-uniform photos of varying aspect ratio and framing --
   a center-crop risks cutting a real person's face out of their own roster photo. */
.council-card .portrait-frame img{ width:100%; height:100%; object-fit:contain; display:block; }
.council-card .portrait-frame.no-photo{ padding:0; }
.council-card .initials-avatar{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'Oswald'; font-weight:700; font-size:2.1rem; color:var(--gold); background:var(--green-bg);
}
.council-card .initials-avatar.vacant{ color:var(--ink-faint); font-size:1.6rem; background:var(--surface-2); border:2px dashed var(--line); }
.council-card .council-text{ padding:.8rem .9rem .95rem; }
.council-card .role{ display:block; font-family:'IBM Plex Mono'; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gold); }
.council-card .name{ display:block; font-family:'Oswald'; font-weight:600; font-size:1rem; margin-top:.3rem; line-height:1.3; }
.council-card a{ font-size:.82rem; display:block; margin-top:.4rem; }
.council-card.is-vacant .name{ color:var(--ink-faint); font-style:italic; }

/* ---------- Roll of Honor (fallen comrades) ---------- */
.fallen-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.4rem; }
.fallen-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.fallen-card .portrait-frame{
  aspect-ratio:4/5; overflow:hidden; background:var(--surface-2); border-bottom:3px solid var(--gold);
  display:flex; align-items:center; justify-content:center; padding:.4rem;
}
/* object-fit:contain, not cover -- these are memorial portraits of the fallen and every
   frame must show the whole photo. Source photos range from tight headshots to full-body
   environmental shots; cropping to fill the frame risked cutting people out of their own
   memorial photo (caught on Dickinson's). Never trade a tidy grid for that again. */
.fallen-card .portrait-frame img{ width:100%; height:100%; object-fit:contain; display:block; }
.fallen-card .memorial-text{ padding:.9rem 1.05rem 1.1rem; }
.fallen-card .rank-name{ font-family:'Oswald'; font-weight:700; font-size:1.05rem; line-height:1.25; }
.fallen-card .when{ font-family:'IBM Plex Mono'; font-size:.78rem; color:var(--gold); margin-top:.35rem; }
.fallen-card .theater{ color:var(--ink-soft); font-size:.88rem; margin-top:.15rem; }
.fallen-banner{
  text-align:center; font-family:'Oswald'; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  font-size:.85rem; color:var(--gold); margin:2.2rem 0 1.1rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.fallen-grid + .fallen-banner{ margin-top:2.6rem; }

/* ---------- Events ---------- */
.event{ display:flex; gap:1.1rem; padding:1.1rem 0; border-top:1px solid var(--line); }
.event:first-child{ border-top:none; }
.event .date-badge{ flex:none; width:64px; text-align:center; background:var(--green-bg); border:1px solid var(--line); border-radius:6px; padding:.4rem 0; }
.event .date-badge .mon{ font-family:'IBM Plex Mono'; font-size:.65rem; text-transform:uppercase; color:var(--gold); display:block; }
.event .date-badge .day{ font-family:'Oswald'; font-weight:700; font-size:1.2rem; }
.event h3{ font-size:1.02rem; }
.event .meta{ font-family:'IBM Plex Mono'; font-size:.78rem; color:var(--ink-faint); margin-top:.2rem; }
.event p{ margin-top:.4rem; font-size:.92rem; color:var(--ink-soft); }
.tag-past{ display:inline-block; font-family:'IBM Plex Mono'; font-size:.65rem; text-transform:uppercase; color:var(--ink-faint); background:var(--surface-2); border-radius:99px; padding:.15rem .5rem; margin-left:.5rem; }

/* ---------- Sponsor logos ---------- */
/* Real paying sponsors get their actual logo, not a text pill -- logo placement
   is part of what they're paying for. Every logo here is dark-on-light artwork
   with no dark-mode variant on file, so the card background is pinned to a fixed
   near-white regardless of site theme (deliberate exception to the token system --
   this is the one place a literal, not a --token, is correct: the alternative is
   an invisible logo on a dark background). */
.sponsor-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:1rem; }
.sponsor-logo-card{
  display:flex; align-items:center; justify-content:center; height:110px;
  background:#FBFAF6; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem 1.2rem; transition:transform .12s ease, box-shadow .12s ease;
}
.sponsor-logo-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.sponsor-logo-card img{ max-width:100%; max-height:100%; object-fit:contain; }
.sponsor-caption{ text-align:center; font-family:'IBM Plex Mono'; font-size:.72rem; color:var(--ink-faint); margin-top:.4rem; }

/* Individual sponsors -- named people (and a couple of units), not
   companies with logos on file. A tag list, not a logo grid. */
.individual-sponsors{ display:flex; flex-wrap:wrap; gap:.55rem; }
.individual-sponsors span{
  font-family:'IBM Plex Mono'; font-size:.82rem; background:var(--surface);
  border:1px solid var(--line); border-radius:99px; padding:.4rem 1rem; color:var(--ink-soft);
}

/* ---------- Photo gallery (chapter activities) ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.2rem; }
.gallery-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--surface); }
.gallery-card .photo-frame{ aspect-ratio:3/2; background:var(--surface-2); display:flex; align-items:center; justify-content:center; }
/* Same object-fit:contain policy as the Fallen Comrades and Council portraits --
   these are real people at a real chapter event; a crop can't be allowed to cut
   someone out of their own group photo. */
.gallery-card img{ width:100%; height:100%; object-fit:contain; display:block; }
.gallery-card .caption{ padding:.75rem .95rem; font-size:.86rem; color:var(--ink-soft); }
.gallery-card .caption b{ color:var(--ink); }

/* ---------- Forms ---------- */
form{ display:flex; flex-direction:column; gap:.85rem; max-width:520px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
label{ font-family:'IBM Plex Mono'; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:.3rem; }
input, textarea{ width:100%; font-family:'Public Sans'; font-size:.95rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink); }
textarea{ min-height:110px; resize:vertical; }
.field{ display:flex; flex-direction:column; }
/* Honeypot spam trap: off-screen, not display:none (some bots skip hidden
   fields entirely), never focusable, never announced to screen readers. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-status{ font-size:.88rem; padding:.6rem .8rem; border-radius:5px; display:none; }
.form-status.ok{ display:block; background:var(--green-bg); color:var(--green); }
.form-status.err{ display:block; background:var(--rust-bg); color:var(--rust); }

.inline-form{ display:flex; flex-direction:row; gap:.5rem; max-width:none; }
.inline-form input{ flex:1; }
.inline-form button{ flex:none; }

/* ---------- Newsletter block (footer) ---------- */
.newsletter-block h4{ font-family:'Oswald'; font-size:.95rem; text-transform:uppercase; letter-spacing:.03em; color:#fff; margin-bottom:.5rem; }
.newsletter-block p{ color:#B7C2AF; font-size:.85rem; margin-bottom:.7rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--green-deep); color:#DCE3D6; margin-top:3rem; }
.footer-inner{ max-width:1080px; margin:0 auto; padding:2.6rem 1.5rem 1.6rem; display:grid; grid-template-columns:1.3fr 1fr 1.3fr; gap:2rem; }
@media (max-width:760px){ .footer-inner{ grid-template-columns:1fr; } }
.footer-col h4{ font-family:'Oswald'; font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; color:#fff; margin-bottom:.6rem; }
.footer-col p{ color:#B7C2AF; font-size:.85rem; }
.footer-col a{ color:#DCE3D6; display:block; font-size:.88rem; margin-bottom:.35rem; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-legal{ max-width:1080px; margin:0 auto; padding:1.2rem 1.5rem 2rem; border-top:1px solid rgba(255,255,255,.12); font-size:.76rem; color:#8FA089; }
.footer-legal a{ color:#B7C2AF; }

/* ---------- Callout / notice ---------- */
.notice{ border:1px solid var(--line); border-left:4px solid var(--gold); background:var(--surface); border-radius:6px; padding:1rem 1.2rem; box-shadow:var(--shadow); }
.notice p{ margin:.3rem 0 0; font-size:.92rem; color:var(--ink-soft); }

.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:.5rem 1rem; z-index:100; }
.skip-link:focus{ left:1rem; top:.5rem; }