/* Pack 13 — Cub Scout homepage
   Blue & gold, warm outdoor feel, mobile-first.
   Read STYLE.md before adding a page or changing the look.
   Nunito and Source Sans 3 are self-hosted (SIL Open Font License). */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue-900: #0a1f4d;
  --blue-800: #0f2d6b;
  --blue-700: #153f8f;
  --blue-600: #1a4fb8;
  --gold-400: #f5c518;
  --gold-300: #ffd84d;
  --gold-200: #ffe989;
  --cream: #f7f4ec;
  --sand: #ebe4d4;
  --ink: #1a1f2e;
  --ink-soft: #3d4659;
  --muted: #5c667a;
  --white: #ffffff;
  --shadow: 0 12px 40px rgba(10, 31, 77, 0.12);
  --shadow-sm: 0 4px 16px rgba(10, 31, 77, 0.08);
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --font-display: "Nunito", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --max: 72rem;
  --header-h: 4.25rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}

/* Back to top. Keep this off the sticky header: a sticky target stays
   in view, so the browser will not scroll the page up. The negative
   margin cancels scroll-padding-top and lands on the real top. */
#top {
  scroll-margin-top: calc(-1 * (var(--header-h) + 0.75rem));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--blue-600);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--blue-800);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--blue-900);
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 800;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

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

.container {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 1000;
  padding: 0.65rem 1rem;
  background: var(--gold-400);
  color: var(--blue-900);
  font-weight: 700;
  border-radius: 0.5rem;
}

.skip-link:focus {
  top: 1rem;
}

.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;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin: 0 0 0.75rem;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 236, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(10, 31, 77, 0.08);
  height: var(--header-h);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.brand:hover {
  color: inherit;
}

.brand-mark-img {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  object-fit: contain;
}

.brand-mark-img.small {
  width: 2.4rem;
  height: 2.4rem;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--blue-900);
}

.brand-text span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem 1.25rem;
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.35rem 0;
}

.site-nav a:hover {
  color: var(--blue-700);
}

.site-nav a[aria-current="page"] {
  color: var(--blue-900);
  box-shadow: inset 0 -3px 0 var(--gold-400);
}

.site-nav .nav-cta[aria-current="page"] {
  box-shadow: none;
  background: var(--blue-900);
  color: var(--white);
}

/* Focus. One ring for every link, button, and field: navy on the cream and
   white bands, gold on dark blue (heroes, footer, Join banner).
   Gold on cream is about 1.3:1 and disappears, so it is only for dark bands. */
:focus-visible {
  outline: 3px solid var(--blue-900);
  outline-offset: 3px;
}

.hero :focus-visible,
.page-hero :focus-visible,
.join-banner :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold-300);
}

/* Programmatic focus targets (skip link destination, #top) need no ring. */
[tabindex="-1"]:focus-visible,
main:focus-visible {
  outline: none;
}

.site-nav .nav-cta {
  background: var(--blue-700);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-left: 0.25rem;
}

.site-nav .nav-cta:hover {
  background: var(--blue-900);
  color: var(--white);
}

.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--blue-900);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle span:nth-child(1) {
  top: 14px;
}

.nav-toggle span:nth-child(2) {
  top: 22px;
}

.nav-toggle span:nth-child(3) {
  top: 30px;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--gold-400);
  color: var(--blue-900);
  border-color: var(--gold-400);
}

.btn-primary:hover {
  background: var(--gold-300);
  color: var(--blue-900);
  border-color: var(--gold-300);
}

.btn-secondary {
  background: transparent;
  color: var(--blue-700);
  border-color: rgba(21, 63, 143, 0.35);
}

.btn-secondary:hover {
  background: rgba(21, 63, 143, 0.06);
  color: var(--blue-900);
  border-color: var(--blue-700);
}

.hero .btn-secondary {
  background: rgba(247, 244, 236, 0.62);
  color: var(--blue-900);
  border-color: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.hero .btn-secondary:hover {
  background: rgba(247, 244, 236, 0.8);
  color: var(--blue-900);
  border-color: var(--white);
}

.join-banner .btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

.join-banner .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  border-color: var(--white);
}

.btn-block {
  width: 100%;
}

.section.missing-actions {
  padding: 2rem 0 3rem;
}

.section.missing-actions .hero-actions {
  margin-bottom: 0;
}

/* Hero */
.hero {
  position: relative;
  color: var(--white);
  padding: 4rem 0 5rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(245, 197, 24, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(37, 99, 199, 0.45), transparent 50%),
    linear-gradient(155deg, var(--blue-900) 0%, var(--blue-800) 45%, #1a3a7a 100%);
  z-index: 0;
}

.hero .hero-bg,
.page-hero .hero-bg {
  --hero-image: url("media/trail.jpg");
  --hero-position: center 48%;
  background: var(--hero-image) var(--hero-position) / cover no-repeat;
}

/* About, program, events, volunteer, and resources share one trail crop.
   The shared min-height keeps a one-line subtitle from slicing the photo higher. */
.page-hero-about,
.page-hero-program,
.page-hero-events,
.page-hero-volunteer,
.page-hero-resources {
  min-height: 15.25rem;
}

.page-hero-about .hero-bg,
.page-hero-program .hero-bg,
.page-hero-events .hero-bg,
.page-hero-volunteer .hero-bg,
.page-hero-resources .hero-bg {
  --hero-image: url("media/trail.jpg");
  --hero-position: center 68%;
}

/* Keep the boy in trail.jpg in frame at every width. He stands 60-66% across
   and 56-83% down the photo. Wide heroes show only a strip of it, and a fixed
   percentage slides that strip off his head as the window widens. Instead:
   center the strip on him (69% down) when it is tall enough to hold all of
   him, never start it below his hair (54%), and never run past the photo's
   top or bottom. These heroes span the window and the photo is 16:9, so its
   drawn height is about 56.25vw: 50% - 10.6875vw centers 69%, and -30.375vw
   starts the strip at 54%. */
.hero .hero-bg,
.page-hero-about .hero-bg,
.page-hero-program .hero-bg,
.page-hero-events .hero-bg,
.page-hero-volunteer .hero-bg,
.page-hero-resources .hero-bg {
  --hero-position: 63% max(100%, -30.375vw, min(0px, 50% - 10.6875vw));
}

/* Taller than the trail heroes so fishing.jpg is not a thin strip. */
.page-hero-join {
  min-height: clamp(18rem, 32vw, 24rem);
}

/* The boy in fishing.jpg runs from his cap (23% down) to his feet (77%).
   Center the strip on him (50%) while it can hold all of him; on wider
   windows, where it cannot, start it just above his cap (20%). The photo is
   2:1 and spans the window, so 20% down is 10vw. */
.page-hero-join .hero-bg {
  --hero-image: url("media/fishing.jpg");
  --hero-position: left max(-10vw, 50%);
  background: var(--blue-900);
}

.resource-list {
  display: grid;
  gap: 1.25rem;
  max-width: 42rem;
}

.resource-card .hero-actions {
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}

.page-hero-404 {
  min-height: clamp(18rem, 38vw, 26rem);
  display: flex;
  align-items: center;
  padding: 3rem 0;
}

/* The sign in gone-fishing.jpg runs from 23% to 60% down; its words start
   at 27%. Center the strip on the sign (41.5%) while it fits; on very wide
   windows, start just above the words (24%). The photo is 16:9 and spans the
   window: 50% + 4.78vw centers 41.5%, and -13.5vw starts at 24%. */
.page-hero-404 .hero-bg {
  --hero-image: url("media/gone-fishing.jpg");
  --hero-position: center max(100%, -13.5vw, min(0px, 50% + 4.78vw));
}

.hero .hero-bg::after,
.page-hero .hero-bg::after {
  opacity: 0;
}

/* Inner pages: a soft scrim instead of the home page's glass panel. A
   neutral dark shade sits behind the text and fades to clear past it, so the
   right side of the photo keeps its full color. Stops are measured from the container's left edge, where
   the text starts; percentages resolve against the hero's width. On phones
   the full overlay in the max-width: 720px block replaces it, the same look
   at any width. Small text is near the 4.5:1 contrast floor: measure before
   lowering --scrim-alpha. */
.page-hero .hero-bg::after {
  --scrim-edge: max(1rem, (100% - var(--max)) / 2);
  opacity: 1;
  background: linear-gradient(
    90deg,
    rgba(8, 12, 22, var(--scrim-alpha, 0.6)) 0%,
    rgba(8, 12, 22, var(--scrim-alpha, 0.6)) calc(var(--scrim-edge) + 30rem),
    rgba(8, 12, 22, 0) calc(var(--scrim-edge) + 50rem)
  );
}

/* Mirror only the photo. The boy stands on the left of fishing.jpg, under
   the left-aligned text. Flipping the picture moves him to the open side.
   On phones ::after carries the dark overlay, which must not flip with him. */
.page-hero-join .hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-image) var(--hero-position) / cover no-repeat;
  transform: scaleX(-1);
}

/* Program photo gallery.
   The photo is clean: arrows appear on its left and right edges on hover or
   keyboard focus. Below it, always visible: a pause/play button and the
   progress dots. Phones swipe. On wide screens the gallery is wider than
   the text column, up to 80rem (1280px); some photos are only 1280-1536px
   wide, so going wider would soften them. */
.gallery {
  --gallery-w: min(100vw - 2rem, 80rem);
  /* First thing on the Program page, above "Dens by grade". */
  margin-bottom: 3.5rem;
}

@media (min-width: 75rem) {
  .gallery {
    width: var(--gallery-w);
    margin-inline: calc((100% - var(--gallery-w)) / 2);
  }
}

.gallery-stage {
  position: relative;
  /* Let the page scroll vertically through the photo; horizontal swipes
     are the gallery's. */
  touch-action: pan-y;
}

.gallery-frame {
  position: relative;
  /* Matches the 16:9 files from scripts/prepare-photo.py. */
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--blue-900);
  box-shadow: var(--shadow);
}

.gallery-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.9s ease;
}

.gallery-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Arrows on the photo's edges. */
.gallery-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--blue-900);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
}

.gallery-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.gallery-prev {
  left: 1rem;
}

.gallery-next {
  right: 1rem;
}

.gallery-stage:hover .gallery-arrow,
.gallery-arrow:focus-visible {
  opacity: 1;
}

.gallery-arrow:hover {
  background: var(--white);
}

/* Over a photo a navy ring alone can vanish, so add a white halo. */
.gallery-arrow:focus-visible {
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--white);
}

/* Touch screens have no hover: they swipe and use the dots. */
@media (hover: none) {
  .gallery-arrow:not(:focus-visible) {
    display: none;
  }
}

/* Below the photo: pause/play and the dots. */
.gallery-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.gallery-dots {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

/* Each dot is a 24px target with a small mark drawn inside it. */
.gallery-dot {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 0.3s ease;
}

.gallery-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--muted);
  transition: width 0.3s ease, background 0.3s ease;
}

.gallery-dot[aria-current="true"] {
  width: 2.5rem;
}

.gallery-dot[aria-current="true"]::before {
  width: 1.75rem;
  background: rgba(92, 102, 122, 0.35);
}

/* Progress toward the next photo, inside the current dot. */
.gallery-dot-fill {
  position: absolute;
  left: calc(50% - 0.875rem);
  top: 50%;
  width: 1.75rem;
  height: 0.55rem;
  margin-top: -0.275rem;
  border-radius: 999px;
  background: var(--blue-900);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.gallery-dot:not([aria-current="true"]) .gallery-dot-fill {
  display: none;
}

.gallery.is-paused .gallery-dot[aria-current="true"] .gallery-dot-fill,
.gallery-dot[aria-current="true"]:hover .gallery-dot-fill {
  transform: scaleX(1);
}

.gallery-dot:hover::before {
  background: var(--blue-700);
}

.gallery-pause {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.gallery-pause:hover {
  border-color: var(--blue-900);
}

/* Two bars for Pause; a triangle for Play. */
.gallery-pause::before,
.gallery-pause::after {
  content: "";
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background: var(--blue-900);
}

.gallery.is-paused .gallery-pause::before {
  width: 0;
  height: 0;
  margin-left: 2px;
  background: transparent;
  border-radius: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--blue-900);
}

.gallery.is-paused .gallery-pause::after {
  display: none;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* The text starts at the container's left edge, under the logo, where the
   wash is darkest; capping .hero-content itself would center it, since
   .container centers with auto margins. Cap the lines instead. */
.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content > * {
  max-width: 42rem;
}

/* Home scrim: a navy glass panel behind the hero's eyebrow, heading, and
   paragraph, so the rest of the photo keeps its full color. Inner pages use
   the soft scrim on .page-hero .hero-bg::after instead. A strong blur does most of
   the work, so the tint can stay light. The buttons and the home highlights
   sit outside it; the highlights carry the same glass. The text stays in
   line with the logo and the panel reaches a little past it; negative block
   margins keep the hero the same height. Phones turn it off and darken the
   whole photo instead (see the max-width: 720px block). The eyebrow is white
   on every hero: gold at that size falls under 4.5:1. Measure the brightest
   part of the photo behind the text before lightening the glass. */
.hero .hero-text {
  --scrim-pad: clamp(0.75rem, (100vw - var(--max)) / 2 - 0.5rem, 1.5rem);
  width: fit-content;
  margin: -1.25rem 0 -1.25rem calc(-1 * var(--scrim-pad));
  padding: 1.25rem var(--scrim-pad);
  background: rgba(10, 31, 77, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
}

.hero .hero-text .eyebrow,
.page-hero .hero-text .eyebrow {
  color: var(--white);
}

.hero-text > :last-child {
  margin-bottom: 0;
}

/* Home: room between the panel and the buttons below it. */
.hero .hero-text {
  margin-bottom: 1rem;
}

.hero .eyebrow {
  color: var(--gold-300);
}

.hero h1 {
  color: var(--white);
  margin-bottom: 1.15rem;
}

.hero h1 span {
  color: var(--gold-300);
}

.page-hero {
  position: relative;
  color: var(--white);
  padding: 2.75rem 0 2.5rem;
  overflow: hidden;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero .eyebrow {
  color: var(--gold-300);
}

.page-hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 0.75rem;
}

.page-hero p:last-child {
  max-width: 40rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.path-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(10, 31, 77, 0.06);
  box-shadow: var(--shadow-sm);
}

.path-card h3 {
  font-size: 1.25rem;
  margin: 0;
}

.path-card p {
  flex: 1;
  margin: 0;
}

.path-card .more {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--blue-600);
}

.path-card:hover {
  color: inherit;
  border-color: rgba(26, 79, 184, 0.25);
  box-shadow: var(--shadow);
}

.path-card:hover .more {
  color: var(--blue-800);
}

.hero-lead {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 36rem;
  margin-bottom: 1.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.hero-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.75rem;
  max-width: 42rem;
}

/* Navy glass like the .hero-text scrim, a little denser: the labels are small. */
.hero-stats li {
  background: rgba(10, 31, 77, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 0.85rem 0.9rem;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.hero-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-300);
  margin-bottom: 0.15rem;
}

.hero-stats span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.hero-place strong,
.hero-place span {
  text-wrap: balance;
}

/* Sections */
.section {
  padding: 4.5rem 0;
}

#next {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.section-alt {
  background: var(--white);
}

.section-header {
  max-width: 38rem;
  margin-bottom: 2.5rem;
}

.section-header.light .eyebrow {
  color: var(--gold-300);
}

.section-header.light h2,
.section-header.light p {
  color: var(--white);
}

.section-header.light p {
  color: rgba(255, 255, 255, 0.85);
}

.section-header.light a {
  color: var(--gold-300);
}

.section-header.light a:hover {
  color: var(--gold-200);
}

.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: start;
}

.check-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.check-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.65rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--gold-400)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a1f4d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E")
    center / 0.7rem no-repeat;
}

.about-photo-row {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 0.85rem;
  margin-top: 2.75rem;
}

.about-photo-row img {
  width: 100%;
  height: 17rem;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-lg);
  display: block;
}

.about-stack {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.about-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(10, 31, 77, 0.06);
  position: relative;
}

.law-intro {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue-900);
}

/* The twelve points read down the first column, then the second, in
   recited order: Trustworthy to Obedient, then Cheerful to Reverent. */
.law-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  gap: 0.45rem 1.25rem;
  margin: 0;
  padding: 0;
}

.law-list li {
  position: relative;
  padding-left: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue-900);
}

.law-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gold-400);
}

.about-card h3 {
  margin-top: 0;
}

.about-card blockquote {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  background: var(--cream);
  border-left: 4px solid var(--gold-400);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1.55;
}

.card-note {
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
}

/* Vision, aims, methods: two columns of short items, so the national
   material takes about one screen and no card sits alone in a row. */
.foundation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  align-items: start;
}

.foundation-block + .foundation-block {
  margin-top: 2.25rem;
}

.foundation-block h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.foundation-statement {
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--cream);
  border-left: 4px solid var(--gold-400);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--blue-900);
}

.pillar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pillar-list li {
  padding: 0.75rem 1rem;
  background: var(--cream);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}

.pillar-list strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue-900);
}

@media (max-width: 900px) {
  .foundation-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* A new heading after the cards (Volunteer's Getting started) gets the same
   room as the Program gallery leaves before Dens by grade. */
.method-grid + .section-header {
  margin-top: 3.5rem;
}

.method-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(10, 31, 77, 0.06);
}

.method-card h3,
.den-card h3,
.path-card h3,
.steps h3,
.info-card h3,
.cost-note h3,
.activity h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.method-card p {
  margin: 0;
  font-size: 0.95rem;
}

/* Program */
.den-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.den-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(10, 31, 77, 0.05);
}

.den-card p {
  font-size: 0.95rem;
  margin: 0;
}

.uniform-card {
  margin: 0;
  padding: 0 0 1.15rem;
  overflow: hidden;
}

.uniform-card img {
  display: block;
  width: 100%;
  height: auto;
}

.uniform-card figcaption {
  padding: 0.9rem 1.15rem 0;
}

.uniform-card .den-badge {
  margin-bottom: 0.45rem;
}

.uniform-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.uniform-caption {
  max-width: 42rem;
  margin: 0 0 1.75rem;
}

.den-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  color: var(--ink);
}

/* Field colors from the Cub Scout Adventures insignia chart. */
.den-badge.lion {
  background: #fbc010;
}
.den-badge.tiger {
  background: #f4742a;
}
.den-badge.wolf {
  /* A shade darker than the chart's #eb2734 so the white label passes
     4.5:1 at this small size (4.73:1; the chart red is 4.31:1). */
  background: #e0222e;
  color: var(--white);
}
.den-badge.bear {
  background: #9fcff0;
}
.den-badge.webelos {
  background: #88ab4d;
}
.den-badge.aol {
  background: #f0d9c6;
}

.activity-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.activity {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid rgba(10, 31, 77, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.5rem;
}

.activity-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.activity h3 {
  margin-bottom: 0.25rem;
}

.activity p {
  font-size: 0.9rem;
  margin: 0;
}

/* Events */
.events {
  background: transparent;
}

/* Home calendar is the lower band. .events would otherwise paint over section-alt. */
.section-alt.events {
  background: var(--white);
}

.events-list {
  display: grid;
  gap: 0.75rem;
}

/* While events load, hold about three cards of room so the cards arriving
   do not push the rest of the page down. script.js drops data-loading once
   the list is filled. Without JavaScript the list never loads, so no room. */
.js .events-list[data-loading] {
  min-height: 26rem;
  align-content: start;
}

/* A next-event card slot (Events committee, Join Pack Night) holds one card's
   room the same way. Set to the shortest card, so the slot only grows. */
.js [data-next-event][data-display="card"][data-loading] {
  min-height: 7rem;
}

.events-status {
  margin: 0;
  padding: 1.25rem 1.35rem;
  background: var(--cream);
  border-radius: var(--radius);
  color: var(--muted);
  border: 1px dashed rgba(10, 31, 77, 0.15);
}

.events-status.is-error {
  border-style: solid;
  border-color: rgba(153, 27, 27, 0.2);
  color: #7f1d1d;
  background: #fef2f2;
}

.event-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem 1.25rem;
  align-items: center;
  background: var(--white);
  border: 1px solid rgba(10, 31, 77, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.15rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(26, 79, 184, 0.25);
  color: inherit;
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  padding: 0.55rem 0.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(160deg, var(--blue-800), var(--blue-600));
  color: var(--white);
  text-align: center;
  line-height: 1.1;
}

.event-date .month {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.event-date .day {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
}

.event-date .weekday {
  font-size: 0.72rem;
  opacity: 0.8;
  margin-top: 0.15rem;
}

.event-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  color: var(--blue-900);
}

.event-meta {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.event-meta span {
  display: block;
}

.event-meta .location {
  margin-top: 0.15rem;
}

.event-cta {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--blue-600);
  white-space: nowrap;
}

.event-card:hover .event-cta {
  color: var(--blue-800);
}

.events-updated {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.events-updated.is-stale {
  color: #7f1d1d;
}

.events-footnote {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Meetings */
.meeting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.info-card {
  background: var(--white);
  border: 1px solid rgba(10, 31, 77, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.5rem;
}

.info-card h3 {
  color: var(--blue-900);
  margin-bottom: 1rem;
}

.info-card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.info-card dl {
  margin: 0 0 1rem;
}

.info-card dl > div {
  margin-bottom: 0.85rem;
}

.info-card dt {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.info-card dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.info-card .hint {
  display: block;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.info-card.highlight {
  background: linear-gradient(160deg, rgba(245, 197, 24, 0.95), rgba(255, 216, 77, 0.9));
  border-color: transparent;
  display: flex;
  flex-direction: column;
}

.info-card.highlight h3 {
  color: var(--blue-900);
}

.info-card.highlight p {
  color: var(--blue-900);
  flex: 1;
  margin-bottom: 1.25rem;
}

/* Join */
.steps {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  counter-reset: none;
}

.steps li {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(10, 31, 77, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.step-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--blue-700);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.steps h3 {
  margin-bottom: 0.35rem;
}

.steps p {
  margin: 0;
  font-size: 0.98rem;
}

.join-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--blue-800), var(--blue-600));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
}

.join-banner h3 {
  color: var(--white);
  margin-bottom: 0.35rem;
}

.join-banner p {
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 36rem;
}

.join-banner .hero-actions {
  margin: 0;
}

.volunteer-note {
  margin: 0 0 1.25rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.cost-note {
  background: var(--white);
  border: 1px solid rgba(10, 31, 77, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
}

.cost-note h3 {
  margin-bottom: 0.4rem;
}

/* Contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.contact-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.contact-list li {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(10, 31, 77, 0.1);
}

.contact-list strong {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-list a,
.contact-list span {
  font-weight: 600;
  color: var(--blue-900);
  text-decoration: none;
}

.contact-list a:hover {
  color: var(--blue-600);
  text-decoration: underline;
}

.fine-print {
  font-size: 0.88rem;
  color: var(--muted);
}

.contact-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(10, 31, 77, 0.06);
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--blue-900);
  margin-bottom: 0.35rem;
}

.req {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--cream);
  /* --muted gives the field edge about 5:1, above the 3:1 an input
     outline needs. The old 12% navy was about 1.3:1. */
  border: 1.5px solid var(--muted);
  border-radius: 0.65rem;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue-900);
  background: var(--white);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 2px;
}

.field ::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-note,
.form-status {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.form-status {
  color: var(--blue-900);
  font-weight: 600;
}

.fundraiser-grid {
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

.fundraising-notes {
  margin-top: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  max-width: none;
}

/* A single wide photo inside a page section (Volunteer). */
.page-photo {
  margin: 0 0 2.5rem;
}

.page-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.page-photo figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Events: next committee meeting */
/* Events page: the committee callout leads the page, then pack and council
   events sit side by side on wide screens and stack, pack first, on narrow
   ones. */
.committee-band {
  padding-bottom: 0;
}

.committee-callout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem 1.75rem;
  align-items: center;
  padding: 1.5rem;
  background: var(--sand);
  border-radius: var(--radius-lg);
}

/* An h2 in the outline (it leads its band), sized like a card heading. */
.committee-callout h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.events-columns {
  display: grid;
  gap: 3.5rem;
}

@media (max-width: 720px) {
  .committee-callout {
    grid-template-columns: 1fr;
  }
}

/* Each column spans the same three rows (header, list, note), so both lists
   start level even when one header runs longer. */
@media (min-width: 64rem) {
  .events-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2.5rem;
  }

  .events-column {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

.next-event-line {
  margin-top: 1rem;
  color: var(--ink-soft);
}

.next-event-line a {
  font-weight: 700;
}

.section.events-notes {
  padding: 2rem 0 3rem;
}

/* Join: visit a Pack Night */
.next-pack-night {
  max-width: 42rem;
}

.visit-note {
  max-width: 42rem;
  margin-top: 1.25rem;
}

.next-event-line:empty,
.next-pack-night-line:empty {
  display: none;
}

.next-pack-night-line {
  font-size: 0.95rem;
  color: var(--blue-900);
}

.next-pack-night-line a {
  color: var(--blue-900);
  font-weight: 700;
}

/* Join: FAQ. Native <details>, so it works without JavaScript and every
   question is a button to keyboards and screen readers. */
.faq-list {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
}

.faq-item {
  background: var(--white);
  border: 1px solid rgba(10, 31, 77, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  position: relative;
  display: block;
  padding: 1rem 3rem 1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue-900);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a minus when open. */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 0.85rem;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--blue-700);
}

.faq-item summary::after {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(0deg);
}

.faq-item summary:hover {
  color: var(--blue-700);
}

.faq-item summary:focus-visible {
  outline-offset: -3px;
  border-radius: var(--radius);
}

.faq-item p {
  margin: 0 1.25rem 1rem;
}

.faq-item p:last-child {
  margin-bottom: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

/* Footer */
.site-footer {
  background: var(--blue-900);
  color: rgba(255, 255, 255, 0.75);
  padding: 2.5rem 0;
}

/* The fixed Back to top button sits over the lower right. On a phone it
   would cover the end of the legal line, so leave room beneath it. */
@media (max-width: 520px) {
  .site-footer {
    padding-bottom: 4.75rem;
  }
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem 1.25rem;
}

.footer-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--gold-300);
}


.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.footer-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-300);
  margin: 0;
  line-height: 1.3;
  text-wrap: balance;
}

/* Once the motto no longer fits beside the logo, break it into two even beats. */
@media (max-width: 480px) {
  .footer-tagline-rest {
    display: block;
  }
}

/* Back to top. Fixed, so it can sit over the page and the navy footer.
   With JavaScript it stays hidden until the page has been scrolled. */
.to-top {
  position: fixed;
  z-index: 90;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: var(--gold-400);
  color: var(--blue-900);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(10, 31, 77, 0.28);
}

.to-top:hover {
  background: var(--gold-300);
  color: var(--blue-900);
}

.js .to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 0.4rem;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0.2s;
}

.js .to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
}

/* About credits: a quiet band at the foot of the page. The h2 is sized down;
   its level comes from the outline. Every credit names the work, who made it,
   where it is from, and its license, linked, when the license asks for that. */
.credits {
  padding: 3rem 0;
}

.credits h2 {
  font-size: 1.35rem;
}

.credits-list {
  display: grid;
  gap: 0.5rem;
  max-width: 42rem;
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Footer sign-off: "Made by Pack 13 families, for yours." between the
   WikiProject Scouting fleur-de-lis and a small pixel-art heart. When the footer scrolls into
   view, script.js adds .is-sprung: the fleur-de-lis pops, the phrase springs
   out from behind it, and the heart pops in and beats twice. It is hidden
   beforehand only when JavaScript runs and the visitor allows motion, so
   without either it simply shows. Screen readers read the phrase; the
   fleur-de-lis and heart are decorative. */
.footer-made {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--white);
}

/* media/fleur-de-lis.svg is CC BY-SA 3.0, credited on the About page. */
.footer-fleur {
  position: relative;
  z-index: 1;
  flex: none;
  width: auto;
  height: 2.45rem;
}

.footer-made-text {
  display: inline-block;
  min-width: 0;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 720px) {
  .footer-made {
    font-size: 1.28rem;
  }

  .footer-fleur {
    height: 2.1rem;
  }
}

/* Hug the wrapped sign-off so the fleur and heart stay beside the words. */
@media (max-width: 480px) {
  .footer-made-text {
    max-width: 13rem;
  }
}

/* 3px per pixel keeps the pixel art crisp next to the larger sign-off. */
.footer-heart {
  flex: none;
  width: 21px;
  height: 18px;
  margin-left: 0.15rem;
}

@media (prefers-reduced-motion: no-preference) {
  .js .footer-made .footer-fleur {
    transform: scale(0) rotate(-25deg);
  }

  .js .footer-made .footer-made-text {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-1.5rem);
  }

  .js .footer-made .footer-heart {
    transform: scale(0);
  }

  .js .footer-made.is-sprung .footer-fleur {
    animation: fleur-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  .js .footer-made.is-sprung .footer-made-text {
    animation: made-spring 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s forwards;
  }

  .js .footer-made.is-sprung .footer-heart {
    animation:
      heart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s forwards,
      heart-beat 0.9s ease-in-out 1.6s 2;
  }
}

@keyframes fleur-pop {
  to {
    transform: none;
  }
}

@keyframes made-spring {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

@keyframes heart-pop {
  to {
    transform: none;
  }
}

@keyframes heart-beat {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: scale(1.3);
  }
  40% {
    transform: scale(1.05);
  }
  60% {
    transform: scale(1.2);
  }
}

.footer-legal {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 36rem;
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .split,
  .contact-grid,
  .meeting-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .den-grid,
  .path-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-photo-row {
    grid-template-columns: 1fr 1fr;
  }

  .about-photo-row img {
    height: 12rem;
  }

  .about-photo-row img:first-child {
    grid-column: 1 / -1;
    height: 14rem;
  }

  .activity-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Phone and tablet menu. The dropdown needs script.js, so it is gated on the
   .js class that a one-line script in each page's <head> adds. Without
   JavaScript the links stay visible as a wrapped row under the logo. */
@media (max-width: 960px) {
  html:not(.js) .site-header {
    height: auto;
    padding: 0.6rem 0 0.75rem;
  }

  html:not(.js) .header-inner {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }

  html:not(.js) .site-nav {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }

  .js .nav-toggle {
    display: flex;
  }

  .js .site-nav {
    position: fixed;
    top: calc(var(--header-h) + 0.4rem);
    right: max(1rem, calc((100% - var(--max)) / 2));
    left: auto;
    width: min(12.5rem, calc(100% - 2rem));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border: 1px solid rgba(10, 31, 77, 0.1);
    border-radius: var(--radius);
    padding: 0.35rem 0 0.7rem;
    box-shadow: var(--shadow);
    transform: translateY(-0.75rem);
    opacity: 0;
    /* Hidden, not just transparent: a closed menu's links must not take
       keyboard focus. The delay lets the fade finish before it hides. */
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }

  .js .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s;
  }

  .js .site-nav a {
    padding: 0.7rem 0.9rem;
    text-align: right;
    border-bottom: 1px solid rgba(10, 31, 77, 0.06);
  }

  .js .site-nav .nav-cta {
    align-self: flex-end;
    margin: 0.7rem 0.55rem 0.15rem;
    text-align: center;
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  /* Phones get the 960px trail photo (about 190 KB instead of 700 KB). */
  .hero .hero-bg,
  .page-hero-about .hero-bg,
  .page-hero-program .hero-bg,
  .page-hero-events .hero-bg,
  .page-hero-volunteer .hero-bg,
  .page-hero-resources .hero-bg {
    --hero-image: url("media/trail-960.jpg");
  }

  .event-card {
    grid-template-columns: auto 1fr;
  }

  /* Phone cards are taller; three of them need more room. */
  .js .events-list[data-loading] {
    min-height: 33rem;
  }

  .js [data-next-event][data-display="card"][data-loading] {
    min-height: 9.5rem;
  }

  .event-cta {
    grid-column: 2;
    justify-self: start;
  }

  .hero {
    padding: 2.35rem 0 2.75rem;
  }

  .hero .hero-bg::after,
  .page-hero .hero-bg::after {
    opacity: 1;
    background-image: none;
    background: linear-gradient(
      180deg,
      rgba(8, 12, 22, 0.68) 0%,
      rgba(8, 12, 22, 0.45) 48%,
      rgba(8, 12, 22, 0.66) 100%
    );
  }

  .hero-text,
  .hero .hero-text {
    width: auto;
    margin: 0 0 1.75rem;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
  }

  .page-hero .hero-text {
    margin-bottom: 0;
  }

  .hero-lead,
  .page-hero p:last-child {
    color: #fff;
  }

  .hero-actions {
    margin-bottom: 1.25rem;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }

  .hero-place {
    grid-column: 1 / -1;
  }

  .hero-stats li {
    padding: 0.65rem 0.45rem;
    text-align: center;
  }

  .den-grid,
  .activity-row,
  .method-grid,
  .path-grid {
    grid-template-columns: 1fr;
  }



  .section {
    padding: 3.25rem 0;
  }

  .join-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-text span {
    font-size: 0.7rem;
  }

  .page-hero-404 {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
    color: var(--ink);
  }

  .page-hero-404 .hero-bg {
    position: relative;
    inset: auto;
    min-height: 15rem;
    background:
      var(--hero-image) center 40% / cover no-repeat;
  }

  .page-hero-404 .hero-bg::after {
    opacity: 0;
  }

  .page-hero-404 .container {
    background: var(--cream);
    padding: 1.75rem 1.25rem 0;
  }

  /* On cream here, so blue, not the white of the photo heroes. */
  .page-hero-404 .eyebrow,
  .page-hero-404 .hero-text .eyebrow {
    color: var(--blue-600);
  }

  .page-hero-404 h1 {
    color: var(--blue-900);
  }

  .page-hero-404 p:last-child {
    color: var(--ink-soft);
  }
}

/* The events list and the gallery controls need script.js. Without it the
   <noscript> note points to Scoutbook Plus instead. */
html:not(.js) #events-panel,
html:not(.js) [data-next-event],
html:not(.js) #council-list,
html:not(.js) .gallery-bar,
html:not(.js) .gallery-arrow {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .to-top {
    transition: none;
    translate: none;
  }

  .btn,
  .den-card,
  .event-card,
  .nav-toggle span,
  .js .site-nav,
  .js .site-nav.is-open {
    transition: none;
  }

  .btn:hover,
  .event-card:hover {
    transform: none;
  }

  .gallery-slide {
    transition: none;
  }

  .gallery-arrow,
  .gallery-dot,
  .gallery-dot::before {
    transition: none;
  }
}