/* Generated for Pack 43 — edit theme/styles.css in the generator, not this file. */
:root {
  --brand-primary: #003F87;
  --brand-primary-hover: #245A98;
  --brand-primary-dark: #002958;
  --brand-primary-soft: #E0E8F1;
  --brand-primary-tint: #F0F3F8;
  --brand-primary-ring: rgba(0, 63, 135, 0.35);
  --brand-on-primary: #FFFFFF;
  --brand-accent: #FDC116;
  --brand-accent-hover: #E4AE14;
  --brand-accent-dark: #B1870F;
  --brand-accent-soft: #FFF6DC;
  --brand-accent-ring: rgba(253, 193, 22, 0.40);
  --brand-on-accent: #000000;
  --brand-accent-ink: #003F87;
  --brand-leaders: #2F6B4F;
  --brand-leaders-hover: #4C8068;
  --brand-on-leaders: #FFFFFF;
  --brand-ink: #1E293B;
  --brand-ink-soft: #6D7480;
  --brand-ink-faint: #A0A5AD;
  --brand-surface: #F8FAFC;
  --brand-border: #DADCDE;
}

/* ==========================================================================
   Pack site design system
   --------------------------------------------------------------------------
   Hand-authored rather than compiled from a utility framework: the generator
   has no Node toolchain, and more importantly every color here resolves to a
   custom property that packsite/theme.py derives from two hex values in
   pack.yml. Change theme.primary / theme.accent and the whole site re-themes.

   The generator injects the :root block above this file at build time.
   ========================================================================== */

/* --- Reset ------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

/* Every list in this design is styled deliberately — none of them want default
   markers. Scoping this to `ul[class]`, the usual preflight idiom, let the
   footer's unclassed lists sprout bullets. */
ul, ol { list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

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

/* --- Base -------------------------------------------------------------- */

:root {
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10);
  --shadow-lift: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --wrap: 72rem;
}

body {
  font-family: var(--font-body);
  color: var(--brand-ink);
  background: var(--brand-surface);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

a { color: var(--brand-primary); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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

@media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } }

.section { padding-block: 3rem; }
.section--tight { padding-block: 2rem; }
.section--surface { background: var(--brand-surface); }
.section--white { background: #ffffff; }

@media (min-width: 768px) { .section { padding-block: 4rem; } }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Typography -------------------------------------------------------- */

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; }

.display {
  font-size: clamp(2rem, 6vw, 3.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-primary);
}

.section-title--accent { color: var(--brand-accent); }
.section-title--center { text-align: center; }

.section-lede {
  margin-top: 0.75rem;
  color: var(--brand-ink-soft);
  max-width: 46rem;
}
/* The lede is width-constrained, so centring the text is not enough — the box
   itself has to be centred or it sits flush left inside a centred section.
   Covers all three ways it gets centred: inside a .center container, carrying
   .center itself, or following a centred section title. */
.center .section-lede,
.section-lede.center,
.section-title--center + .section-lede {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  opacity: 0.75;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-primary);
}
/* A class rather than an inline style because site.js rebuilds one of these
   headings from the events feed, and a rule beats copying a colour into JS. */
.card-title--accent { color: var(--brand-accent-dark); }

.prose p + p { margin-top: 1rem; }
.prose { color: var(--brand-ink-soft); }
.prose strong { color: var(--brand-ink); }

.muted { color: var(--brand-ink-soft); }
.fine { font-size: 0.8rem; color: var(--brand-ink-faint); }

/* --- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--accent { background: var(--brand-accent); color: var(--brand-accent-ink); }
.btn--accent:hover { background: var(--brand-accent-hover); }

.btn--primary { background: var(--brand-primary); color: var(--brand-on-primary); }
.btn--primary:hover { background: var(--brand-primary-hover); }

.btn--dark { background: #0f172a; color: #ffffff; }
.btn--dark:hover { background: #1e293b; }

.btn--light { background: #ffffff; color: var(--brand-ink); border-color: var(--brand-border); }
.btn--light:hover { background: var(--brand-surface); }

.btn--outline {
  background: transparent;
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.btn--outline:hover { background: var(--brand-accent); color: var(--brand-accent-ink); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.45rem 0.9rem; font-size: 0.875rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.btn-row--center { justify-content: center; }

/* --- Header ------------------------------------------------------------ */

/* The desktop nav appears at 1024px, not the usual 768px. The bar is a
   symmetric 1fr/auto/1fr grid, so the emblem can only stay centred if BOTH
   outer columns are at least as wide as the nav — the layout needs roughly
   twice the nav width plus the emblem before it fits. Below that the nav
   crowds the emblem and the Join button wraps, so the hamburger stays. */

.site-header {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  position: relative;
  z-index: 20;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
  padding-block: 0.75rem;
}

/* Three columns with equal outer tracks, so the emblem sits on the true centre
   of the page. With flex + space-between it lands wherever the brand and nav
   widths happen to leave it, which is off-centre for every pack whose name or
   nav is a different length from the other side. */
@media (min-width: 1024px) {
  .site-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    min-height: 8rem;
    gap: 1.5rem;
  }
  .site-header__brand { justify-self: start; min-width: 0; }
  .site-header__center { justify-self: center; }
  .site-nav { justify-self: end; min-width: 0; }
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.site-header__mark { height: 3.5rem; width: auto; }
.site-header__emblem { height: 4rem; width: auto; }

@media (min-width: 1024px) {
  .site-header__mark { height: 5.5rem; }
  .site-header__emblem { height: 6rem; }
}

/* The centered emblem is decorative on small screens where space is tight. */
.site-header__center { display: none; }
@media (min-width: 1024px) { .site-header__center { display: block; } }

.site-header__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
@media (min-width: 1024px) { .site-header__wordmark { display: none; } }

.site-nav { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .site-nav { display: flex; } }

.site-nav a {
  color: #f9fafb;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--brand-accent); }
.site-nav a[aria-current="page"] {
  color: var(--brand-accent);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.site-nav__cta {
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  border: 2px solid var(--brand-accent);
  color: var(--brand-accent) !important;
  font-weight: 700;
}
.site-nav__cta:hover { background: rgba(255, 255, 255, 0.08); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.menu-toggle:hover { background: rgba(255, 255, 255, 0.12); }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.mobile-nav { display: none; padding-bottom: 1rem; }
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

.mobile-nav a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: 0.5rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
}
.mobile-nav a:hover { background: rgba(255, 255, 255, 0.12); color: var(--brand-accent); }

/* --- Hero -------------------------------------------------------------- */

.hero { position: relative; }

.hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 20rem;
  display: grid;
  place-items: center;
  isolation: isolate;
}

@media (min-width: 768px) { .hero__frame { min-height: 28rem; } }

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0.55) 100%);
  z-index: -1;
}

.hero__content { text-align: center; padding: 2rem 1.25rem; }

.hero__heading {
  color: var(--brand-accent);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.hero__sub {
  margin-top: 0.75rem;
  color: #ffffff;
  font-size: 1.05rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.hero__actions { margin-top: 1.5rem; justify-content: center; }

/* --- Cards ------------------------------------------------------------- */

.card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--brand-border);
  padding: 1.25rem;
}

.card--flush { padding: 0; overflow: hidden; }
.card--pad-lg { padding: 1.75rem; }

.card__media {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
}

.card__body { padding: 1rem 1.25rem 1.25rem; }

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Overview / PDF panel ---------------------------------------------- */

.panel {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
}

@media (min-width: 768px) { .panel { padding: 3rem; } }

.panel__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .panel__grid { grid-template-columns: 1fr 1fr; } }

.panel__heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--brand-accent);
  letter-spacing: 0.02em;
}

.panel__preview {
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lift);
  background: #ffffff;
}

.panel--center { text-align: center; }

/* Two handout pages fanned like a printed pair, as on the reference site. */
.fan {
  position: relative;
  padding: 0 2.5rem 2.5rem 0;
}
.fan img {
  border-radius: 0.35rem;
  box-shadow: var(--shadow-lift);
  background: #ffffff;
  display: block;
}
.fan__back {
  position: absolute;
  top: 1.5rem;
  right: 0;
  width: 88%;
  transform: rotate(4deg);
  transform-origin: bottom right;
}
.fan__front {
  position: relative;
  width: 88%;
  transform: rotate(-2deg);
  transform-origin: bottom left;
}
@media (prefers-reduced-motion: reduce) {
  .fan__back, .fan__front { transform: none; }
}

.panel__aside {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-direction: column;
}
@media (min-width: 640px) { .panel__aside { flex-direction: row; } }

/* --- Events ------------------------------------------------------------ */

.event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.5rem;
}

.event-card__date {
  font-size: 0.875rem;
  color: var(--brand-ink-faint);
}

.event-card__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
}

.event-card__title { font-weight: 700; font-family: var(--font-display); }
.event-card__title a { color: var(--brand-accent-dark); text-decoration: none; }
.event-card__title a:hover { text-decoration: underline; }

.event-card__meta { font-size: 0.875rem; color: var(--brand-ink-soft); }
.event-card__time { font-size: 0.8rem; color: var(--brand-ink-faint); }

.event-card__link {
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.event-card__link:hover { text-decoration: underline; }

.event-more li + li {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--brand-border);
}
.event-more__date {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-ink-faint);
}
.event-more a { color: var(--brand-ink); text-decoration: none; font-weight: 500; }
.event-more a:hover { text-decoration: underline; }

/* Placeholder bars for the "Coming Up" cards, which the home page ships empty
   and site.js fills from the events feed. They exist to hold the grid's height
   for the moment the fetch is in flight, and are discarded — not filled in —
   when the real cards arrive. The sizes are eyeballed against a typical card
   rather than measured: nothing lines up with the content that replaces them,
   it just has to be about the right size. */

/* The one measurement that matters: this holds the row open. A grid stretches
   every card to the tallest, which in a filled row is the "more" list, so that
   is what is approximated here rather than a single event card. Being roughly
   right is the whole job — too short and the page lurches downward when the
   feed lands, which is the layout shift the placeholders exist to prevent. */
.event-card--placeholder { min-height: 17.5rem; }

.skeleton {
  background: var(--brand-border);
  border-radius: 0.25rem;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton--date { height: 0.875rem; width: 6rem; }
.skeleton--title { height: 1.15rem; width: 75%; }
.skeleton--meta { height: 0.8rem; width: 50%; }
.skeleton--link { height: 0.9rem; width: 4.5rem; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

.event-detail__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--brand-primary);
}
.event-detail__when { margin-top: 0.5rem; font-weight: 600; }
.event-detail__where { color: var(--brand-ink-soft); }
.event-detail__body { margin-top: 1.5rem; white-space: pre-line; }

/* --- Feature lists ----------------------------------------------------- */

.feature-list { display: grid; gap: 0.75rem; margin-top: 1.5rem; }

.feature-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.95rem;
}

.feature-list__icon { flex-shrink: 0; line-height: 1.5; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } }

/* --- Leaders ----------------------------------------------------------- */

.leader-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
@media (min-width: 480px) { .leader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.leader {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
}

.leader__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  /* White behind the ring so portraits with transparent edges read as a filled
     disc rather than letting the card colour show through. */
  background: #ffffff;
  /* Drawn outside the box, so the ring never crops the portrait the way a
     border would. Per-leader colour comes from --leader-ring when set. */
  box-shadow: 0 0 0 2px var(--leader-ring, var(--brand-primary));
}

.leader__avatar--initials {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
}

.leader__name { font-weight: 700; font-size: 0.9rem; display: block; }
.leader__role { font-size: 0.8rem; color: var(--brand-ink-soft); display: block; }

/* --- Dens -------------------------------------------------------------- */

.den-list { display: grid; gap: 0.75rem; margin-top: 1.5rem; }

.den {
  padding: 0.9rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
}
.den__name { font-weight: 700; font-family: var(--font-display); }
.den__meta { font-size: 0.85rem; color: var(--brand-ink-soft); }

/* --- Steps (register page) --------------------------------------------- */

.step-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 900px) { .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.step { display: flex; flex-direction: column; }

.step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.step__number {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.step__minutes {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-faint);
  font-weight: 500;
}

.step__title {
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-primary);
  margin-bottom: 0.75rem;
}

.step__body { color: var(--brand-ink-soft); }
.step__note {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--brand-ink-soft);
}

.step__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin-top: 1.25rem;
  font-size: 0.9rem;
}
.step__facts dt { font-weight: 700; color: var(--brand-primary); }
.step__facts dd { color: var(--brand-ink-soft); }

.step__actions { margin-top: 1.25rem; display: grid; gap: 0.6rem; }

.pay-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: background-color 0.15s ease;
}
.pay-button__amount { font-size: 1.15rem; letter-spacing: 0; }

.pay-button--primary { background: var(--brand-primary); color: var(--brand-accent); }
.pay-button--primary:hover { background: var(--brand-primary-hover); }
.pay-button--accent { background: var(--brand-accent); color: var(--brand-accent-ink); }
.pay-button--accent:hover { background: var(--brand-accent-hover); }

/* Shown instead of the pay buttons when a pack takes only cash and cheques.
   Deliberately not styled as a button — there is nothing to click. */
.pay-person {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--brand-border);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius);
  background: var(--brand-primary-tint);
}

.pay-person__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.pay-person__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.pay-person__amount {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--brand-primary);
}

.pay-person__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.9rem;
}
.pay-person__facts dt { font-weight: 700; color: var(--brand-primary); }
.pay-person__facts dd { margin: 0; color: var(--brand-ink-soft); }

.pay-person__note {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--brand-ink-soft);
}

.step__fineprint {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--brand-ink-faint);
}

/* --- Scout law / principles -------------------------------------------- */

.law-grid {
  display: grid;
  gap: 1.5rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
  text-align: center;
}
@media (min-width: 768px) { .law-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.law-grid li {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-ink-soft);
}

.principle-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 768px) { .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.principle__title {
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 0.35rem;
}
.principle__body { font-size: 0.95rem; color: var(--brand-ink-soft); }

.code-list { display: grid; gap: 0.9rem; margin-top: 1rem; }
.code-list__title { font-weight: 700; }
.code-list li { font-size: 0.95rem; color: var(--brand-ink-soft); }

/* --- Testimonials ------------------------------------------------------ */

.quote {
  background: #ffffff;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.quote__text { font-style: italic; }
.quote__author { margin-top: 0.75rem; font-size: 0.875rem; color: var(--brand-ink-faint); }

/* --- Calendar ---------------------------------------------------------- */

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.875rem;
}
.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.calendar-legend i {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  display: inline-block;
}
.legend-pack { background: var(--brand-primary); }
.legend-den { background: var(--brand-accent); }
.legend-leaders { background: var(--brand-leaders); }

#calendar { margin-top: 1.5rem; }
#calendar .fc a { text-decoration: none; }
#calendar .fc .fc-button-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
#calendar .fc .fc-button-primary:not(:disabled):hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}
#calendar .fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
#calendar .fc .fc-toolbar-title { font-family: var(--font-display); font-weight: 800; }

/* Month view: let the title wrap onto a second line, but never let flex steal
   width from the time — that is what clips "7:00 PM" down to "7". */
#calendar .fc-daygrid-event {
  cursor: pointer;
  white-space: normal;
  align-items: flex-start;
  padding: 2px 4px;
}
#calendar .fc-daygrid-event .fc-event-time {
  flex-shrink: 0;
  flex-grow: 0;
  min-width: max-content;
  overflow: visible;
  font-weight: 700;
  margin-right: 0.3em;
}
#calendar .fc-daygrid-event .fc-event-title {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
#calendar .fc-daygrid-block-event .fc-event-time { font-weight: 700; }
#calendar .fc-day-today .fc-daygrid-day-number {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border-radius: 999px;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
}
/* Days before today. The grid will not scroll back past this month, so these
   are the only ones ever shown — dim rather than grey them out, so the month
   still reads as a month and not as a half-loaded one. */
#calendar .fc-day-disabled {
  background: transparent;
  opacity: 0.45;
}

/* The list that renders when JavaScript is unavailable. It is the calendar's
   only content until site.js swaps in the month grid. */
.agenda { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.agenda__month {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--brand-primary);
  margin-top: 1rem;
}
.agenda__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  align-items: baseline;
}
.agenda__date {
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 0.85rem;
}
.agenda__title { font-weight: 600; }
.agenda__title a { color: inherit; text-decoration: none; }
.agenda__title a:hover { text-decoration: underline; }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  margin-top: 3rem;
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-block: 2.5rem;
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; } }

.site-footer__motto {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

.site-footer h2 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.site-footer a { color: var(--brand-accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer li + li { margin-top: 0.35rem; }

.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-block: 1rem;
  text-align: center;
  font-size: 0.8rem;
}
.site-footer__legal a { text-decoration: underline; }

/* --- Icons ------------------------------------------------------------- */

/* Sized in em so an icon always matches the text it sits beside, and colored by
   currentColor so it inherits the button or link it is inside. */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.15em;
}

.menu-toggle .icon { width: 1.5rem; height: 1.5rem; }
.btn .icon { margin-right: -0.1rem; }

/* Email links get their href from site.js, so they have no href in the markup
   and would otherwise not look or behave like links. */
.email {
  color: var(--brand-primary);
  text-decoration: underline;
  cursor: pointer;
  word-break: break-word;
}
.site-footer .email { color: var(--brand-accent); }
.btn.email { text-decoration: none; }

/* --- Utilities --------------------------------------------------------- */

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.stack-lg > * + * { margin-top: 2rem; }
.center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

@media print {
  .site-header, .site-footer, .btn-row, .menu-toggle { display: none !important; }
  body { background: #ffffff; }
}