/* ==========================================================================
   STYLESHEET

   All the visual design lives in this one file.

   To change the colors or fonts, you only need the "DESIGN TOKENS" section
   immediately below. It is the first thing in the file for exactly that
   reason. See docs/how-to/change-colors-and-fonts.md for a walkthrough.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   Change a value here and it updates everywhere on the site.
   -------------------------------------------------------------------------- */

:root {
  /* -- Brand colors ------------------------------------------------------ */
  /* The main church color. Used for headings, the header bar, and buttons. */
  --color-brand: #1e4a38;
  --color-brand-dark: #122f24;
  --color-brand-light: #2f6b52;

  /* The warm highlight color. Used sparingly, for accents and small details.
     Most of what it colors is small uppercase text, which needs a contrast
     ratio of 4.5:1. This shade clears that on white (5.91:1) and on the soft
     tint below (5.09:1). Lighten it and the small labels stop being legible
     for anyone with less than perfect eyesight. */
  --color-accent: #8a5a17;
  --color-accent-soft: #f4eeda;

  /* -- Text and surfaces -------------------------------------------------- */
  --color-ink: #171c23; /* headings */
  --color-body: #3f4854; /* paragraphs */
  --color-muted: #667080; /* captions, dates, fine print */
  --color-line: #e3e7ec; /* borders and dividers */
  --color-page: #ffffff; /* page background */
  --color-surface: #ffffff; /* cards */
  --color-surface-alt: #f6f8fa; /* alternating section bands */

  --color-focus: #9a6b2a; /* the outline shown when tabbing with a keyboard */

  /* -- Type --------------------------------------------------------------- */
  /* Headings use a serif for warmth. Body text uses the reader's system font,
     which loads instantly and looks native on every device. */
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* A fluid type scale. These grow smoothly between phone and desktop
     rather than jumping at fixed breakpoints. */
  --text-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --text-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-2xl: clamp(1.85rem, 1.5rem + 1.6vw, 2.6rem);
  --text-3xl: clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);

  /* -- Spacing ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* -- Shape -------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 4%);
  --shadow: 0 4px 6px -2px rgb(16 24 40 / 5%), 0 12px 16px -4px rgb(16 24 40 / 8%);

  /* -- Layout ------------------------------------------------------------- */
  --width-page: 72rem;
  --width-prose: 68ch;

  /* -- Per-component colors ------------------------------------------------ */
  /* These exist so dark mode only ever changes token values, never rules
     further down the file. If you add a component that needs its own dark
     treatment, give it a token here and in the two dark blocks below. */
  --hero-grad-a: var(--color-brand);
  --hero-grad-b: var(--color-brand-dark);
  --hero-eyebrow: var(--color-accent-soft);
  --badge-today-ink: #ffffff;
  --strip-bg: var(--color-brand);
  --strip-label: var(--color-accent-soft);

  /* Tells the browser both themes exist, so scrollbars and form controls
     match whichever one is active. */
  color-scheme: light dark;
}

/* The theme toggle in the header pins one theme by setting data-theme on the
   page. These two lines keep built-in browser UI in step with that choice. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Dark mode. Follows whatever the visitor's phone or computer is already set
   to so there is no toggle to maintain, and it never surprises anyone.
   (Since then a toggle button was added to the header. It only overrides this
   default for people who press it; everyone else still follows their device.)

   The dark values appear twice on purpose: once for device dark mode, once
   for the toggle. KEEP THE TWO BLOCKS IDENTICAL when changing colors. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand: #86c3a6;
    --color-brand-dark: #0b120e;
    --color-brand-light: #a3d4bc;

    --color-accent: #dda766;
    --color-accent-soft: #2a2117;

    --color-ink: #ecf1ec;
    --color-body: #c3cdc4;
    --color-muted: #8da295;
    --color-line: #263029;
    --color-page: #0f1512;
    --color-surface: #161d18;
    --color-surface-alt: #121813;

    --color-focus: #e2ab6b;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 4px 6px -2px rgb(0 0 0 / 30%), 0 12px 16px -4px rgb(0 0 0 / 40%);

    --hero-grad-a: #17382c;
    --hero-grad-b: #0c150f;
    --hero-eyebrow: var(--color-accent);
    --badge-today-ink: #1a1208;
    --strip-bg: #17382c;
    --strip-label: var(--color-accent);
  }
}

/* Second copy: the same dark values, applied when the toggle picks dark. */
:root[data-theme="dark"] {
  --color-brand: #86c3a6;
  --color-brand-dark: #0b120e;
  --color-brand-light: #a3d4bc;

  --color-accent: #dda766;
  --color-accent-soft: #2a2117;

  --color-ink: #ecf1ec;
  --color-body: #c3cdc4;
  --color-muted: #8da295;
  --color-line: #263029;
  --color-page: #0f1512;
  --color-surface: #161d18;
  --color-surface-alt: #121813;

  --color-focus: #e2ab6b;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow: 0 4px 6px -2px rgb(0 0 0 / 30%), 0 12px 16px -4px rgb(0 0 0 / 40%);

  --hero-grad-a: #17382c;
  --hero-grad-b: #0c150f;
  --hero-eyebrow: var(--color-accent);
  --badge-today-ink: #1a1208;
  --strip-bg: #17382c;
  --strip-label: var(--color-accent);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

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

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

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-lg);
}

h4 {
  font-size: var(--text-md);
}

p,
ul,
ol {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-accent);
}

/* A clearly visible ring when navigating by keyboard. Never remove this as
   it is how people who cannot use a mouse find their place on the page. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

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

hr {
  height: 1px;
  margin: var(--space-6) 0;
  border: 0;
  background: var(--color-line);
}

blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: italic;
}

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

/* --------------------------------------------------------------------------
   LAYOUT HELPERS
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-8);
}

.section--tight {
  padding-block: var(--space-7);
}

.section--alt {
  background: var(--color-surface-alt);
  border-block: 1px solid var(--color-line);
}

.section__head {
  margin-bottom: var(--space-6);
}

.section__head p {
  max-width: var(--width-prose);
  margin-bottom: 0;
  color: var(--color-muted);
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

.stack-top {
  margin-top: var(--space-5);
}

/* Supporting text under a button or a link, a size down and quieter. */
.hint {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* The muted grey only reaches 4.31:1 on the callout's soft accent background,
   so inside one the hint keeps the callout's own text color. */
.callout .hint {
  color: var(--color-ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* min-height keeps every button comfortably tappable on a phone */
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--color-brand);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-brand-light);
  color: #fff;
}

.btn--secondary {
  background: transparent;
  border-color: currentcolor;
  color: var(--color-brand);
}

.btn--secondary:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

.btn--small {
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* On the dark hero, buttons need their own treatment. */
.hero .btn--primary {
  background: #fff;
  color: var(--color-brand-dark);
}

.hero .btn--primary:hover {
  background: var(--color-accent-soft);
  color: var(--color-brand-dark);
}

.hero .btn--secondary {
  border-color: rgb(255 255 255 / 55%);
  color: #fff;
}

.hero .btn--secondary:hover {
  background: rgb(255 255 255 / 12%);
  border-color: #fff;
  color: #fff;
}

/* --------------------------------------------------------------------------
   SITE HEADER
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--color-brand-dark);
  color: rgb(255 255 255 / 88%);
  font-size: var(--text-sm);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
  text-align: center;
}

/* The service time and phone number are grouped so that, on a narrow phone
   where they wrap onto two lines, the Light/Dark button stays beside them
   rather than dropping onto a lonely third row of its own. */
.topbar__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-5);
}

.topbar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.topbar a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .topbar__inner {
    justify-content: flex-end;
  }
}

.masthead {
  background: var(--color-page);
  border-bottom: 1px solid var(--color-line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

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

.brand__name {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Held to a single line. A long tagline would otherwise push the menu onto a
   second row on desktop and take up three lines on a phone. */
.brand__tagline {
  margin-top: 2px;
  max-width: 34ch;
  overflow: hidden;
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .brand__tagline {
    display: none;
  }
}

/* -- Navigation ---------------------------------------------------------- */

.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

/* -- The Light/Dark Button ------------------------------------------------ */

/* Hidden until JavaScript is running, because without JavaScript pressing it
   could do nothing. People without JavaScript still get dark mode from their
   device setting. */
/* It lives in the top strip, on the dark green, so it takes its color from
   the strip instead of carrying a border of its own. Borderless keeps it from
   competing with the menu links below it. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* The visible circle is small to keep the strip compact, but the button
     itself stays 44px so it is still comfortable to hit with a thumb. The
     negative margin stops that height from making the strip taller. */
  width: 44px;
  min-height: 44px;
  /* Without this the flex row squeezes the button below 44px on a narrow
     phone, which is exactly where the full-size target matters most. */
  flex-shrink: 0;
  margin-block: calc(var(--space-2) * -1);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
}

.js .theme-toggle {
  display: inline-flex;
}

.theme-toggle:hover {
  background: rgb(255 255 255 / 14%);
  color: #fff;
}

/* The strip is dark in both themes, so the usual focus color would be hard to
   pick out. This one state uses a fixed light ring instead.
   Deliberately not a token: the accent tokens flip to near-black in dark mode,
   which would leave the ring at 1.2:1 against this strip and effectively
   invisible to anyone tabbing through. White measures 14.4:1 in light and
   19.0:1 in dark. */
.theme-toggle:focus-visible {
  outline-color: #fff;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Show the moon in light mode (press for dark) and the sun in dark mode
   (press for light). The class is kept current by theme.js. */
.theme-toggle .icon-sun {
  display: none;
}

.theme-dark .theme-toggle .icon-sun {
  display: block;
}

.theme-dark .theme-toggle .icon-moon {
  display: none;
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: flex;
  align-items: center;
  /* 44px is the smallest target a thumb hits reliably. */
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  background: var(--color-surface-alt);
  color: var(--color-brand);
}

/* The page you are currently on. */
.nav__link[aria-current="page"] {
  color: var(--color-brand);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

/* Collapse the menu on small screens but only when JavaScript is running,
   so the links are never unreachable if the script fails to load. */
@media (max-width: 60rem) {
  .js .nav__toggle {
    display: inline-flex;
  }

  .js .nav__list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-5) var(--space-4);
    background: var(--color-page);
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow);
  }

  .js .nav--open .nav__list {
    display: flex;
  }

  .js .nav__link {
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-base);
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
  }

  .js .nav__list li:last-child .nav__link {
    border-bottom: 0;
  }

  .masthead__inner {
    position: relative;
  }
}

/* --------------------------------------------------------------------------
   HERO — the first thing a visitor sees
   -------------------------------------------------------------------------- */

.hero {
  background:
    linear-gradient(160deg, var(--hero-grad-a) 0%, var(--hero-grad-b) 100%);
  color: #fff;
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

@media (min-width: 56rem) {
  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: var(--space-8);
    padding-block: var(--space-9);
  }
}

.hero h1 {
  color: #fff;
  font-size: var(--text-3xl);
}

.hero__lede {
  max-width: 40ch;
  margin-bottom: var(--space-6);
  color: rgb(255 255 255 / 90%);
  font-size: var(--text-md);
}

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

/* The service-times card sitting in the hero. This is the single most
   important block on the site, so it gets a solid surface of its own. */
.times-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--color-body);
}

.times-card h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.times-card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
}

.times-card__footer p {
  margin-bottom: var(--space-1);
}

.times-card__address {
  color: var(--color-ink);
  font-weight: 600;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   SERVICE TIMES LIST
   -------------------------------------------------------------------------- */

.services {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A grid rather than a flex row. On a narrow phone the service name wraps
   onto two lines and the time stays put on the right, instead of the time
   dropping onto a line of its own. */
.service {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.service:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.service:first-child {
  padding-top: 0;
}

.service__label {
  min-width: 0;
}

.service__name {
  display: block;
  color: var(--color-ink);
  font-weight: 650;
}

.service__day,
.service__note {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.service__time {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.service--primary .service__time {
  color: var(--color-accent);
}

.service__flag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  background: var(--color-accent-soft);
  border-radius: 999px;
  color: var(--color-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   CARDS AND GRIDS
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40rem) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56rem) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.card h3 {
  margin-bottom: var(--space-2);
}

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

/* --------------------------------------------------------------------------
   EVENT CARDS
   -------------------------------------------------------------------------- */

.event-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.event-card:hover {
  border-color: var(--color-brand-light);
  box-shadow: var(--shadow-sm);
}

/* The little tear-off calendar square. */
.event-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.75rem;
  padding: var(--space-2);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-align: center;
}

.event-card__month {
  color: var(--color-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-card__day {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.1;
}

.event-card__weekday {
  color: var(--color-muted);
  font-size: 0.6875rem;
}

.event-card__body {
  min-width: 0;
}

.event-card__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-md);
}

.event-card__title a {
  text-decoration: none;
  color: var(--color-ink);
}

.event-card__title a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.event-card__summary {
  margin-bottom: 0;
  font-size: var(--text-sm);
}

.badge-today {
  display: inline-block;
  padding: 1px var(--space-2);
  background: var(--color-accent);
  border-radius: 999px;
  color: var(--badge-today-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* -- Month groupings on the events page ---------------------------------- */

.month-group {
  margin-bottom: var(--space-7);
}

.month-group__heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.month-group__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.event-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -- Past events archive -------------------------------------------------- */

.archive {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.archive > summary {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

.archive[open] > summary {
  margin-bottom: var(--space-5);
}

.archive .event-card {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   EVENT DETAIL PAGE
   -------------------------------------------------------------------------- */

.event-header {
  padding-block: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.event-facts {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

@media (min-width: 40rem) {
  .event-facts {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}

.event-facts dt {
  margin-bottom: var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.event-image {
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   PROSE — styling for text written in Markdown
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--width-prose);
}

.prose > h2 {
  margin-top: var(--space-7);
}

.prose > h3 {
  margin-top: var(--space-6);
}

.prose > :first-child {
  margin-top: 0;
}

/* An eyebrow label introduces the heading below it, so the usual gap above
   that heading would separate the two things that belong together. */
.prose > .eyebrow + h2,
.prose > .eyebrow + h3 {
  margin-top: 0;
}

.prose ul,
.prose ol {
  padding-left: var(--space-5);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose li::marker {
  color: var(--color-accent);
}

.prose .lede {
  color: var(--color-ink);
  font-size: var(--text-md);
}

/* --------------------------------------------------------------------------
   PAGE HEADER (every page except the homepage)
   -------------------------------------------------------------------------- */

.page-header {
  padding-block: var(--space-7);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-line);
}

.page-header p {
  max-width: var(--width-prose);
  margin-bottom: 0;
  color: var(--color-muted);
  font-size: var(--text-md);
}

/* --------------------------------------------------------------------------
   LEADERSHIP
   -------------------------------------------------------------------------- */

.person {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.person__name {
  margin-bottom: var(--space-1);
  font-size: var(--text-md);
}

.person__role {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.contact-item {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.contact-item h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
}

.contact-item p,
.contact-item address {
  margin-bottom: 0;
  font-style: normal;
}

.contact-item__value {
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: break-word;
}

/* The band of contact details near the bottom of the homepage. */
.contact-strip {
  background: var(--strip-bg);
  color: rgb(255 255 255 / 92%);
}

.contact-strip h2 {
  color: #fff;
}

.contact-strip a {
  color: #fff;
  font-weight: 600;
}

.contact-strip__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .contact-strip__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-strip__label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--strip-label);
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


.contact-strip address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  padding-block: var(--space-7) var(--space-5);
  background: var(--color-brand-dark);
  color: rgb(255 255 255 / 78%);
  font-size: var(--text-sm);
}

.footer a {
  color: #fff;
}

.footer h2 {
  margin-bottom: var(--space-3);
  color: #fff;
  font-size: var(--text-base);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

@media (min-width: 48rem) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__list li {
  margin-bottom: var(--space-2);
}

.footer address {
  font-style: normal;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 15%);
  color: rgb(255 255 255 / 62%);
}

.footer__social {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   CALLOUT. A highlighted note, used for "no events scheduled" and similar
   -------------------------------------------------------------------------- */

.callout {
  padding: var(--space-5);
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-ink);
}

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

/* --------------------------------------------------------------------------
   PRINT. People really do print directions and service times
   -------------------------------------------------------------------------- */

@media print {
  .topbar,
  .nav,
  .skip-link,
  .btn,
  .archive {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .hero,
  .contact-strip,
  .footer {
    background: #fff !important;
    color: #000 !important;
  }

  .hero h1,
  .hero__lede,
  .contact-strip h2,
  .contact-strip a,
  .footer a,
  .footer h2 {
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .card,
  .event-card,
  .times-card,
  .contact-item {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }
}