/* ==========================================================================
   Centerville Small Arms Association
   Design system + components. One stylesheet, no build step.
   Brand anchor: #944e1a (carried over from the original site).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals — cool charcoals against warm paper */
  --ink-900:#0e1116;
  --ink-850:#141821;
  --ink-800:#1a1f29;
  --ink-700:#232935;
  --ink-600:#333b49;
  --ink-500:#4a5464;

  --paper:#ffffff;
  --paper-2:#f7f5f2;
  --paper-3:#efebe5;
  --paper-4:#e3ddd4;

  --text:#181c23;
  --text-2:#39414e;
  --muted:#646d7c;
  --muted-dark:#9aa4b2;

  /* Brand */
  --brand:#944e1a;
  --brand-deep:#7a3f14;
  --brand-bright:#c9762c;   /* for dark backgrounds — meets contrast */
  --brand-tint:#f7ece2;
  --brand-line:#e0cbb5;

  /* Status */
  --ok:#1c7a4b;
  --ok-tint:#e8f4ed;
  --warn:#8f5d06;          /* on --warn-tint = 5.0:1, meets WCAG AA */
  --warn-tint:#fbf1dd;
  --stop:#a92318;
  --stop-tint:#fbeae8;

  /* Structure */
  --line:#e2ddd6;
  --line-dark:rgba(255,255,255,.12);
  --radius:4px;
  --radius-lg:8px;
  --wrap:1180px;
  --shadow:0 1px 2px rgba(14,17,22,.06), 0 8px 24px -12px rgba(14,17,22,.18);

  /* Type */
  --display:"Oswald","Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img,svg { max-width:100%; height:auto; display:block; }
a { color:var(--brand); text-underline-offset:.18em; }
a:hover { color:var(--brand-deep); }

h1,h2,h3,h4 {
  font-family:var(--display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:.01em;
  margin:0 0 .5em;
  text-wrap:balance;
}

p { margin:0 0 1.1em; }
p:last-child { margin-bottom:0; }

:focus-visible {
  outline:3px solid var(--brand-bright);
  outline-offset:2px;
  border-radius:2px;
}

.wrap {
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2.25rem);
}

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:.75rem 1.25rem; font-weight:600;
}
.skip-link:focus { left:0; }

/* --------------------------------------------------------------------------
   3. Masthead & navigation
   -------------------------------------------------------------------------- */
.masthead {
  background:var(--ink-900);
  color:#fff;
  border-bottom:1px solid var(--line-dark);
  position:sticky; top:0; z-index:100;
}

/* The masthead runs wider than the 1180px content column so the full club name
   fits on one line beside all ten nav items. */
.masthead__inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:76px; max-width:1400px;
}

/* flex:none so the wordmark is never squeezed narrower than its text — without
   it the name silently clips at the widest hamburger breakpoint. */
.brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; color:#fff; padding:.6rem 0; flex:none; }
.brand__mark { width:38px; height:26px; color:var(--brand-bright); flex:none; }
.brand__text { display:flex; flex-direction:column; min-width:0; }
/* The full name is long, so it wraps to two lines at desktop widths and the
   nav keeps its single row. max-width forces the break after "Arms". */
.brand__name {
  font-family:var(--display); font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; line-height:1.1;
  /* The full name sits on ONE line at every width — it scales down rather
     than wrapping. Never add white-space:normal in a media query below. */
  white-space:nowrap;
  font-size:clamp(.62rem, 2.15vw, 1.12rem);
}
.brand__sub {
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted-dark); margin-top:.25rem;
}

.nav__list {
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:.25rem;
}
.nav__link {
  display:block; padding:.6rem .44rem;
  font-size:.745rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:#d7dbe2; text-decoration:none; border-radius:var(--radius); white-space:nowrap;
  transition:color .15s, background .15s;
}
.nav__link:hover { color:#fff; background:rgba(255,255,255,.07); }
.nav__link.is-current { color:#fff; box-shadow:inset 0 -2px 0 var(--brand-bright); }
.nav__cta-item { margin-left:.6rem; }

.nav-toggle {
  display:none; align-items:center; gap:.55rem;
  background:transparent; border:1px solid var(--line-dark); color:#fff;
  padding:.55rem .85rem; border-radius:var(--radius); cursor:pointer;
  font-family:var(--body); font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.nav-toggle__bars { display:grid; gap:4px; width:17px; }
.nav-toggle__bars span { height:2px; background:currentColor; border-radius:2px; }

/* --------------------------------------------------------------------------
   4. Range status bar
   -------------------------------------------------------------------------- */
.status { border-bottom:1px solid var(--line); font-size:.9rem; }
.status__inner {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem .85rem;
  padding-block:.7rem;
}
.status__dot {
  width:9px; height:9px; border-radius:50%; background:currentColor; flex:none;
  align-self:center; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.status__label { font-weight:600; letter-spacing:.02em; }
.status__label strong { text-transform:uppercase; letter-spacing:.06em; }
.status__note { color:var(--text-2); font-size:.86rem; }

.status--open    { background:var(--ok-tint);   color:var(--ok);   border-bottom-color:#c7e2d4; }
.status--limited { background:var(--warn-tint); color:var(--warn); border-bottom-color:#ecd9ab; }
.status--closed  { background:var(--stop-tint); color:var(--stop); border-bottom-color:#f0c5c0; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position:relative; background:var(--ink-900); color:#fff; overflow:hidden;
  border-bottom:3px solid var(--brand);
}
.hero__media { position:absolute; inset:0; }
.hero__media img { width:100%; height:100%; object-fit:cover; opacity:.32; filter:grayscale(.35) contrast(1.05); }
.hero__media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--ink-900) 22%, rgba(14,17,22,.86) 55%, rgba(14,17,22,.55) 100%);
}
.hero__inner { position:relative; padding-block:clamp(3.5rem,9vw,6.5rem); max-width:44rem; }

.eyebrow {
  display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brand-bright);
  margin-bottom:1rem;
}
.hero h1 {
  font-size:clamp(2.4rem,6.2vw,4.1rem);
  text-transform:uppercase; letter-spacing:.005em; font-weight:700;
  margin-bottom:.45em;
}
.hero__lede { font-size:clamp(1.02rem,2vw,1.2rem); color:#ccd2db; max-width:36rem; }
.hero__actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

.hero__affil {
  position:relative; border-top:1px solid var(--line-dark);
  padding-block:1.1rem; display:flex; flex-wrap:wrap; gap:.5rem 2.2rem;
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-dark);
}

/* --------------------------------------------------------------------------
   6. Page header (interior pages)
   -------------------------------------------------------------------------- */
.pagehead {
  background:var(--ink-900); color:#fff; border-bottom:3px solid var(--brand);
}
.pagehead__inner { padding-block:clamp(2.4rem,5.5vw,3.6rem); max-width:46rem; }
.pagehead h1 {
  font-size:clamp(2rem,4.6vw,3rem); text-transform:uppercase; font-weight:700; margin-bottom:.3em;
}
.pagehead__lede { color:#ccd2db; font-size:1.03rem; margin:0; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--body); font-size:.82rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.85rem 1.5rem; border-radius:var(--radius); border:1.5px solid transparent;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.btn--primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn--primary:hover { background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn--ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }
.btn--outline { background:transparent; color:var(--brand); border-color:var(--brand-line); }
.btn--outline:hover { background:var(--brand-tint); border-color:var(--brand); color:var(--brand-deep); }
.btn--sm { padding:.55rem 1rem; font-size:.74rem; }

/* --------------------------------------------------------------------------
   8. Sections
   -------------------------------------------------------------------------- */
.section { padding-block:clamp(3rem,6.5vw,5rem); }
.section--tint { background:var(--paper-2); border-block:1px solid var(--line); }
.section--dark { background:var(--ink-850); color:#fff; }
.section--dark h2, .section--dark h3 { color:#fff; }
.section--dark p { color:#c3cad4; }
.section--flush { padding-block:0; }

.section-head { max-width:44rem; margin-bottom:2.5rem; }
.section-head h2 {
  font-size:clamp(1.6rem,3.2vw,2.25rem); text-transform:uppercase; font-weight:600;
}
.section-head p { color:var(--muted); font-size:1.02rem; margin:0; }
.section--dark .section-head p { color:var(--muted-dark); }

/* --------------------------------------------------------------------------
   9. Grids & cards
   -------------------------------------------------------------------------- */
.grid { display:grid; gap:1.25rem; }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
.grid--4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

.card {
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1.6rem;
  display:flex; flex-direction:column;
}
.card h3 { font-size:1.12rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.5rem; }
.card p { color:var(--text-2); font-size:.95rem; }
.card__tag {
  display:inline-block; align-self:flex-start;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-tint); border:1px solid var(--brand-line);
  padding:.24rem .55rem; border-radius:2px; margin-bottom:.85rem;
}
.card--accent { border-left:3px solid var(--brand); }

/* Notice cards (meeting / next event) */
.notices { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.notice {
  background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--brand);
  border-radius:var(--radius-lg); padding:1.5rem 1.6rem;
}
.notice__kicker {
  font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand); margin-bottom:.7rem;
}
.notice__title { font-family:var(--display); font-size:1.5rem; font-weight:600; line-height:1.15; margin-bottom:.35rem; }
.notice__meta { color:var(--text-2); font-size:.94rem; margin:0; }
.notice__meta + .notice__meta { margin-top:.15rem; }

/* Announcement strip */
.announce {
  background:var(--brand-tint); border:1px solid var(--brand-line);
  border-left:3px solid var(--brand); border-radius:var(--radius);
  padding:1rem 1.25rem; margin-bottom:2rem;
  display:flex; gap:.85rem; align-items:flex-start;
  font-size:.96rem; color:var(--text-2);
}
.announce strong { color:var(--brand-deep); }

/* Quick safety strip */
.safety { display:grid; gap:1px; background:var(--line-dark); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.safety__item { background:var(--ink-850); padding:1.5rem 1.35rem; }
.safety__item strong {
  display:block; font-family:var(--display); font-size:1.05rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--brand-bright); margin-bottom:.4rem;
}
.safety__item span { font-size:.9rem; color:#c3cad4; }

/* --------------------------------------------------------------------------
   10. Prose (long-form copy blocks)
   -------------------------------------------------------------------------- */
.prose { max-width:44rem; }
.prose h2 { font-size:1.5rem; text-transform:uppercase; margin-top:2.2rem; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:1.12rem; text-transform:uppercase; margin-top:1.8rem; }
.prose ul { padding-left:1.1rem; margin:0 0 1.2em; }
.prose li { margin-bottom:.45em; }
.prose li::marker { color:var(--brand); }

.lede { font-size:1.1rem; color:var(--text-2); }

/* --------------------------------------------------------------------------
   11. Numbered range rules
   -------------------------------------------------------------------------- */
.rules { list-style:none; counter-reset:rule; margin:0; padding:0; display:grid; gap:.7rem; }
.rules li {
  counter-increment:rule; position:relative;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.05rem 1.25rem 1.05rem 3.9rem;
  font-size:.97rem; color:var(--text-2);
  overflow-wrap:anywhere;   /* Rule 1 contains a long unbroken URL */
}
.rules li::before {
  content:counter(rule,decimal-leading-zero);
  position:absolute; left:1.25rem; top:1.05rem;
  font-family:var(--display); font-size:1.05rem; font-weight:600;
  color:var(--brand); letter-spacing:.02em;
}
.rules li strong, .rules li b { color:var(--text); }

.rules--critical li { border-left:3px solid var(--stop); }

/* --------------------------------------------------------------------------
   12. Steps (membership)
   -------------------------------------------------------------------------- */
.steps { list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:1.1rem; }
.steps li {
  counter-increment:step; position:relative;
  padding-left:3.6rem; min-height:2.6rem;
}
.steps li::before {
  content:counter(step);
  position:absolute; left:0; top:0;
  width:2.5rem; height:2.5rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand); color:#fff;
  font-family:var(--display); font-size:1.15rem; font-weight:600;
}
.steps h3 { font-size:1.08rem; text-transform:uppercase; margin-bottom:.3rem; }
.steps p { font-size:.95rem; color:var(--text-2); margin:0; }

/* Price callout */
.price {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem;
  background:var(--ink-850); color:#fff; border-radius:var(--radius-lg);
  padding:1.6rem 1.8rem; border-left:3px solid var(--brand-bright);
}
.price__amount { font-family:var(--display); font-size:3rem; font-weight:700; line-height:1; }
.price__unit { font-size:.95rem; color:var(--muted-dark); }

/* Fee schedule */
.fee-card {
  background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--brand);
  border-radius:var(--radius-lg); padding:1.6rem 1.7rem; display:flex; flex-direction:column;
}
.fee-card__who {
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); margin-bottom:.4rem;
}
.fee-card__title { font-family:var(--display); font-size:1.35rem; font-weight:600; text-transform:uppercase; line-height:1.15; margin-bottom:1.2rem; }

.fee-lines { list-style:none; margin:0 0 auto; padding:0; }
.fee-lines li {
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.96rem;
}
.fee-lines li:first-child { padding-top:0; }
.fee-lines__amount { font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--text); flex:none; }

.fee-total {
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:1.2rem; padding-top:1.1rem; border-top:2px solid var(--ink-900);
}
.fee-total__label { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.fee-total__amount { font-family:var(--display); font-size:2.4rem; font-weight:700; line-height:1; color:var(--brand); }

.fee-note {
  background:var(--stop-tint); border:1px solid #f0c5c0; border-left:3px solid var(--stop);
  border-radius:var(--radius-lg); padding:1.4rem 1.6rem;
}
.fee-note h3 { font-size:1.1rem; text-transform:uppercase; margin-bottom:.4rem; color:var(--stop); }
.fee-note p { margin:0; color:var(--text-2); font-size:.96rem; }
.fee-note strong { color:var(--stop); }

/* Download list */
.downloads { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.downloads a {
  display:flex; align-items:center; gap:.9rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.05rem 1.25rem; text-decoration:none; color:var(--text);
  transition:border-color .15s, background .15s;
}
.downloads a:hover { border-color:var(--brand); background:var(--brand-tint); }
.downloads__icon {
  flex:none; width:2.35rem; height:2.35rem; border-radius:var(--radius);
  background:var(--brand-tint); color:var(--brand); border:1px solid var(--brand-line);
  display:grid; place-items:center;
  font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.03em;
}
.downloads__label { font-weight:600; font-size:.98rem; }
.downloads__meta { display:block; font-weight:400; font-size:.85rem; color:var(--muted); margin-top:.1rem; }

/* Download rows that have no file yet — greyed out, never a broken link */
.downloads .downloads__row {
  display:flex; align-items:center; gap:.9rem;
  background:var(--paper-2); border:1px dashed var(--line); border-radius:var(--radius-lg);
  padding:1.05rem 1.25rem; color:var(--muted);
}
.downloads .is-pending .downloads__icon { background:var(--paper-3); color:var(--muted); border-color:var(--line); }
.downloads .is-pending .downloads__label { color:var(--muted); font-weight:600; }
.downloads__soon {
  display:inline-block; font-style:normal; font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--warn);
  background:var(--warn-tint); border:1px solid #ecd9ab; border-radius:2px;
  padding:.16rem .45rem; margin-left:.5rem; vertical-align:.08em;
}

/* Calendar action buttons under an embed */
.calendar-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.1rem; }

/* --------------------------------------------------------------------------
   12b. Gate lock / announcement callout
   -------------------------------------------------------------------------- */
.callout {
  display:grid; gap:1.6rem; align-items:start;
  background:var(--ink-850); color:#fff; border-radius:var(--radius-lg);
  border-left:4px solid var(--brand-bright);
  padding:clamp(1.6rem,3.5vw,2.4rem);
}
@media (min-width:820px) { .callout { grid-template-columns:1.35fr 1fr; gap:2.6rem; } }
.callout__new {
  display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-900); background:var(--brand-bright);
  padding:.26rem .6rem; border-radius:2px; margin-bottom:.9rem;
}
.callout h2 { font-size:clamp(1.4rem,3vw,2rem); text-transform:uppercase; margin-bottom:.5rem; color:#fff; }
.callout p { color:#c3cad4; margin-bottom:1rem; }
.callout__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }

.callout__facts { list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.callout__facts li {
  display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--line-dark); font-size:.9rem; color:#c3cad4;
}
.callout__facts li:last-child { border-bottom:0; }
.callout__facts b { color:#fff; font-weight:600; text-align:right; }

/* Numbered how-to steps on a dark background */
.steps--dark li::before { background:var(--brand-bright); color:var(--ink-900); }
.steps--dark h3 { color:#fff; }
.steps--dark p { color:#c3cad4; }

/* Troubleshooting table */
.trouble { width:100%; border-collapse:collapse; font-size:.94rem; }
.trouble th, .trouble td { text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.trouble thead th {
  background:var(--ink-900); color:#fff; font-family:var(--display); font-weight:600;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
}
.trouble tbody th { font-weight:600; color:var(--text); width:38%; }
.trouble td { color:var(--text-2); }
.trouble tbody tr:last-child th, .trouble tbody tr:last-child td { border-bottom:0; }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); }

/* Timeline (range history) */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 1.6rem 3.4rem; border-left:2px solid var(--line); margin-left:.5rem; }
.timeline li:last-child { border-left-color:transparent; padding-bottom:0; }
.timeline li::before {
  content:""; position:absolute; left:-7px; top:.45rem; width:12px; height:12px;
  border-radius:50%; background:var(--brand); border:2.5px solid var(--paper);
}
.timeline__year {
  display:block; font-family:var(--display); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:.25rem;
}
.timeline p { margin:0; color:var(--text-2); font-size:.96rem; }
.section--dark .timeline li { border-left-color:var(--line-dark); }
.section--dark .timeline li::before { background:var(--brand-bright); border-color:var(--ink-850); }
.section--dark .timeline__year { color:var(--brand-bright); }

/* --------------------------------------------------------------------------
   13. Contact cards
   -------------------------------------------------------------------------- */
.contact-card {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:.25rem;
}
.contact-card__role {
  font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brand); margin-bottom:.35rem;
}
.contact-card__name { font-family:var(--display); font-size:1.24rem; font-weight:600; line-height:1.2; }
.contact-card__links { margin-top:.6rem; display:grid; gap:.2rem; font-size:.92rem; }
.contact-card__links a { text-decoration:none; word-break:break-word; }
.contact-card__links a:hover { text-decoration:underline; }

/* --------------------------------------------------------------------------
   14. Results
   -------------------------------------------------------------------------- */
.results-year { margin-bottom:2.4rem; }
.results-year__head {
  display:flex; align-items:center; gap:1rem; margin-bottom:1rem;
}
.results-year__head h2 {
  font-size:1.9rem; margin:0; color:var(--brand); letter-spacing:.02em;
}
.results-year__head hr { flex:1; border:0; border-top:1px solid var(--line); margin:0; }

.results-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.results-list a {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:.9rem 1.2rem; text-decoration:none; color:var(--text); font-weight:500; font-size:.97rem;
  transition:border-color .15s, background .15s, transform .15s;
}
.results-list a:hover { border-color:var(--brand); background:var(--brand-tint); }
.results-list__type {
  font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); flex:none;
}
/* A results row whose file is not on the server yet — same shape as a real
   row, but visibly inert rather than a link that 404s. */
.results-list .is-missing {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--paper-2); border:1px dashed var(--line); border-radius:var(--radius-lg);
  padding:.9rem 1.2rem; color:var(--muted); font-weight:500; font-size:.97rem;
}

/* --------------------------------------------------------------------------
   15. Calendar embed
   -------------------------------------------------------------------------- */
.calendar-embed {
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--paper);
}
.calendar-embed iframe { display:block; width:100%; height:640px; border:0; }
@media (max-width:640px) { .calendar-embed iframe { height:520px; } }

/* --------------------------------------------------------------------------
   16. Directions
   -------------------------------------------------------------------------- */
.directions-grid { display:grid; gap:2.2rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px) { .directions-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:3rem; } }

.route { list-style:none; margin:0; padding:0; counter-reset:leg; }
.route li {
  counter-increment:leg; position:relative;
  padding:0 0 1.5rem 2.6rem; border-left:2px solid var(--line); margin-left:.6rem;
}
.route li:last-child { border-left-color:transparent; padding-bottom:0; }
.route li::before {
  content:""; position:absolute; left:-7px; top:.42rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--brand);
}
.route li:last-child::before { background:var(--brand); }
.route strong { display:block; font-size:1rem; }
.route span { font-size:.93rem; color:var(--muted); }

.map-figure {
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--paper); padding:1rem; overflow:hidden;
}
.map-figure img { border-radius:var(--radius); }
.map-figure figcaption { font-size:.85rem; color:var(--muted); margin-top:.85rem; text-align:center; }

/* An embedded Google Map inside a .map-figure card, sized the same way the
   calendar embed is — a fixed height rather than aspect-ratio, since an
   interactive map (unlike an image) has no natural intrinsic ratio to fall
   back on if that height is unsupported. */
.map-embed { border-radius:var(--radius); overflow:hidden; background:var(--paper-2); }
.map-embed iframe { display:block; width:100%; height:360px; border:0; }
@media (min-width:900px) { .map-embed iframe { height:460px; } }
.map-figure .btn { margin-top:.9rem; }

/* --------------------------------------------------------------------------
   17. Gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display:grid; gap:.6rem;
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width:560px)  { .gallery-grid { grid-template-columns:repeat(3, 1fr); } }
@media (min-width:900px)  { .gallery-grid { grid-template-columns:repeat(4, 1fr); gap:.85rem; } }

.gallery-grid__item {
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius); background:var(--paper-2);
  aspect-ratio:1 / 1; border:0; padding:0; cursor:pointer; width:100%;
}
.gallery-grid__item img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s ease;
}
.gallery-grid__item:hover img,
.gallery-grid__item:focus-visible img { transform:scale(1.06); }
.gallery-grid__item:focus-visible { outline:3px solid var(--brand-bright); outline-offset:2px; }

/* Lightbox — plain CSS + a small amount of JS (assets/js/site.js) to toggle
   .is-open. No dependency, matching the rest of the site. */
.lightbox {
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(14,17,22,.92); padding:clamp(1rem,4vw,3rem);
  align-items:center; justify-content:center;
}
.lightbox.is-open { display:flex; }
.lightbox__figure {
  margin:0; max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:.9rem; min-height:0;
}
.lightbox img {
  max-width:100%; max-height:100%; display:block; min-height:0; object-fit:contain;
  border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox__figure figcaption { text-align:center; max-width:34rem; flex:none; }
.lightbox__caption-text { display:block; color:#fff; font-size:1rem; }
.lightbox__album-text {
  display:block; color:#c3cad4; font-size:.82rem; margin-top:.2rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.lightbox__close {
  position:absolute; top:clamp(.75rem,2vw,1.5rem); right:clamp(.75rem,2vw,1.5rem);
  width:2.6rem; height:2.6rem; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.4rem; line-height:1;
  display:grid; place-items:center;
}
.lightbox__close:hover, .lightbox__close:focus-visible { background:rgba(255,255,255,.22); }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta {
  background:var(--brand); color:#fff;
  padding-block:clamp(2.6rem,5vw,3.6rem);
}
.cta__inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.cta h2 { font-size:clamp(1.5rem,3vw,2.1rem); text-transform:uppercase; margin:0 0 .3rem; color:#fff; }
.cta p { margin:0; color:rgba(255,255,255,.88); max-width:34rem; }
.cta .btn--ghost { border-color:rgba(255,255,255,.6); }
.cta .btn--solid { background:#fff; color:var(--brand-deep); border-color:#fff; }
.cta .btn--solid:hover { background:var(--paper-3); color:var(--brand-deep); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.footer { background:var(--ink-900); color:#c3cad4; font-size:.93rem; }
.footer__grid {
  display:grid; gap:2.4rem; padding-block:clamp(2.6rem,5vw,3.6rem);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.footer__col--brand { grid-column:span 1; }
@media (min-width:1000px) { .footer__col--brand { grid-column:span 1; max-width:24rem; } }

.footer__mark { width:36px; height:24px; color:var(--brand-bright); margin-bottom:.9rem; }
.footer__name {
  font-family:var(--display); font-size:1.05rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:#fff; margin:0 0 .7rem;
}
.footer__blurb { margin:0 0 .9rem; }
.footer__affil { font-size:.84rem; color:var(--muted-dark); margin:0; }

.footer__head {
  font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:#fff; margin:0 0 1rem;
}
.footer__links, .footer__notes { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer__links a { color:#c3cad4; text-decoration:none; }
.footer__links a:hover { color:#fff; text-decoration:underline; }
.footer__notes li { position:relative; padding-left:1rem; font-size:.88rem; color:var(--muted-dark); }
.footer__notes li::before { content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; background:var(--brand-bright); border-radius:50%; }

.footer__bar { border-top:1px solid var(--line-dark); }
.footer__bar-inner {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem;
  padding-block:1.3rem; font-size:.82rem; color:var(--muted-dark);
}
.footer__bar-inner p { margin:0; }

/* --------------------------------------------------------------------------
   18b. Affiliation badges
   Credibility signal — the CMP/NRA/USRPA affiliations were buried in a
   paragraph on the old site. Industry leaders surface these as badges.
   -------------------------------------------------------------------------- */
.badges { display:grid; gap:1px; background:var(--line); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.badge { background:var(--paper); padding:1.5rem 1.6rem; display:flex; gap:1rem; align-items:flex-start; }
.badge__abbr {
  flex:none; width:3.1rem; height:3.1rem; border-radius:50%;
  background:var(--ink-900); color:var(--brand-bright);
  display:grid; place-items:center;
  font-family:var(--display); font-size:.82rem; font-weight:700; letter-spacing:.04em;
}
.badge__text strong { display:block; font-family:var(--display); font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; line-height:1.25; }
.badge__text span { display:block; font-size:.87rem; color:var(--muted); margin-top:.25rem; }

/* --------------------------------------------------------------------------
   18c. Purpose / mission blocks
   -------------------------------------------------------------------------- */
.purpose { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.purpose__item { border-top:2px solid var(--brand); padding-top:1.4rem; }
.purpose__num {
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:.6rem;
}
.purpose__item h3 { font-size:1.3rem; text-transform:uppercase; margin-bottom:.5rem; }
.purpose__item p { color:var(--text-2); margin:0; font-size:.97rem; }
.section--dark .purpose__item { border-top-color:var(--brand-bright); }
.section--dark .purpose__num { color:var(--brand-bright); }

/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */
.stack > * + * { margin-top:1.5rem; }
.mt-lg { margin-top:2.5rem; }
.mb-lg { margin-bottom:2.5rem; }
.text-center { text-align:center; }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   21. Responsive — mobile navigation
   -------------------------------------------------------------------------- */
@media (max-width:1320px) {
  .nav-toggle { display:inline-flex; }

  .nav {
    position:absolute; left:0; right:0; top:100%;
    background:var(--ink-850); border-bottom:1px solid var(--line-dark);
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .25s ease, visibility .25s;
  }
  /* Sized to "whatever's left below the header" (--header-h, set in
     site.js) rather than a guessed fixed number — a fixed number silently
     clips the last item the next time a nav link is added. The vh line is
     a fallback for browsers without dvh support; the dvh line overrides it
     where available so mobile Safari's address-bar show/hide doesn't
     shrink-then-clip the open menu. overflow-y + overscroll-behavior make
     the menu itself scroll (and stop there) instead of leaking the scroll
     gesture through to the page underneath once content is taller than
     the room left. */
  .nav.is-open {
    max-height:calc(100vh - var(--header-h, 76px));
    max-height:calc(100dvh - var(--header-h, 76px));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    visibility:visible;
  }

  .nav__list {
    flex-direction:column; align-items:stretch; gap:0;
    padding:.6rem clamp(1rem,4vw,2.25rem) 1.4rem;
  }
  .nav__link {
    padding:.95rem .25rem; font-size:.95rem; letter-spacing:.05em;
    border-bottom:1px solid var(--line-dark); border-radius:0;
  }
  .nav__link.is-current { box-shadow:none; color:var(--brand-bright); }
  .nav__cta-item { margin:1rem 0 0; }
  .nav__cta-item .btn { width:100%; justify-content:center; padding-block:.85rem; font-size:.82rem; }

  .masthead__inner { position:relative; min-height:68px; }
}

@media (max-width:640px) {
  body { font-size:16px; }
  /* font-size is handled by the clamp() above — do not override it here,
     and do not re-enable wrapping. */
  .brand__sub { font-size:.55rem; letter-spacing:.1em; }
  .brand__mark { width:26px; height:18px; }
  .nav-toggle { padding:.5rem .6rem; }
  .nav-toggle__label { display:none; }
  .hero__actions .btn { width:100%; justify-content:center; }
  .status__inner { padding-block:.75rem; }
  .cta__inner { flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */
@media print {
  .masthead, .nav, .cta, .footer__grid, .skip-link, .hero__media, .lightbox { display:none !important; }
  body { font-size:11pt; color:#000; }
  .hero, .pagehead { background:#fff; color:#000; border-bottom:2px solid #000; }
  .hero h1, .pagehead h1 { color:#000; }
  .rules li, .card { break-inside:avoid; border:1px solid #999; }
}