/* ============================================================
   Project Healing Waters — Roanoke & New River Valleys
   Palette drawn from national brand assets:
   rust-red flag trout, warm sand, bronze, charcoal ink.
   ============================================================ */

:root {
  --rust: #c0432a;
  --rust-dark: #9e3620;
  --bronze: #a97b4f;

  /* Text variants of the two brand colours. The brand rust is only 4.04:1 on
     the sand background and the brand bronze only 4.22:1 on ink — both short
     of the 4.5:1 AA floor for body-sized text. These are the same hues nudged
     until they clear it on every background in the palette, so brand rust and
     bronze stay exact wherever they are a fill, a border or the logo. */
  --rust-text: #b13e27;    /* sand 4.59 · cream 5.27 · white 5.85 */
  --bronze-text: #ad8258;  /* ink 4.58 · footer 5.11 */
  --sand: #e5e4dc;
  --cream: #f4f3ee;
  --ink: #20241f;
  --muted: #5c5c53;
  --white: #ffffff;

  --header-h: 67px;
  --maxw: 1120px;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(32, 36, 31, 0.08);

  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

/* The hidden attribute has to win. Any class that sets `display` (.btn does)
   otherwise beats the browser's own [hidden] rule — same specificity, and an
   author stylesheet outranks the UA one — leaving hidden elements on screen. */
[hidden] { display: none !important; }

/* A light-only design: declaring it keeps browser-drawn controls and
   scrollbars light for visitors whose OS is set to dark mode. */
:root { color-scheme: light; }

html { scroll-behavior: smooth; }

/* Anchor targets must clear the sticky header, or nav links land with the
   section heading hidden underneath it. Measured: 67px desktop, 89px mobile. */
section[id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

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

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

a { color: var(--rust-text); }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.4em;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); text-transform: none; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 760px; }
.center { text-align: center; }

.eyebrow {
  /* Now a <span> inside its section's heading rather than a <p> of its own —
     an ADA review flagged the old markup as a paragraph styled to look like a
     heading. display:block and an explicit line-height reproduce the previous
     layout inside a heading that sets its own tight leading. */
  display: block;
  line-height: 1.5;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rust-text);
  margin-bottom: 0.5rem;
}
.eyebrow.center { text-align: center; }

.lead { font-size: 1.15rem; color: var(--muted); }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--rust); color: var(--white); border-color: var(--rust); }
.btn-primary:hover { background: var(--rust-dark); border-color: var(--rust-dark); }

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

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid rgba(32, 36, 31, 0.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--ink); }
.brand-logo { height: 42px; width: auto; }
.brand-branch {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-left: 2px solid var(--bronze);
  padding-left: 0.9rem;
  line-height: 1.15;
}
.site-nav { display: flex; gap: 1.5rem; }
.site-nav a {
  font-family: var(--font-head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover { color: var(--rust-text); }

/* ---------- Hero ---------- */
.hero { background: var(--sand); padding: clamp(2.5rem, 6vw, 5rem) 0; }
.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 2.5rem;
}
.hero-copy h1 { margin-bottom: 0.5rem; }
.hero-lead { font-size: 1.2rem; color: var(--muted); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
/* Shown only when there are no photos, or JS is off */
.hero-fallback {
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 24px rgba(32, 36, 31, 0.15));
}

/* ---------- Hero slideshow ---------- */
.slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(32, 36, 31, 0.07);
  box-shadow: var(--shadow);
}
.slideshow .slides { position: absolute; inset: 0; }
.slideshow .slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.slideshow .slide.is-active { opacity: 1; }
/* Uploads range from tall portraits to wide panoramas, and cropping them to a
   fixed frame cut people out of group shots. Instead the photo is shown whole
   and a blurred, zoomed copy of itself fills the leftover space. */
.slideshow .slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--slide-bg);
  background-size: cover;
  background-position: center;
  filter: blur(20px) saturate(1.15);
  /* Scaled up so the blur never bleeds a soft edge into the frame. */
  transform: scale(1.15);
}
.slideshow .slide img {
  position: relative; /* above the blurred fill */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Scrim so the dots stay legible over a bright photo */
.slideshow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62px;
  background: linear-gradient(to top, rgba(32, 36, 31, 0.42), transparent);
  pointer-events: none;
}

.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: background 0.15s ease;
}
.slide-arrow:hover { background: var(--white); }
.slide-arrow svg { width: 20px; height: 20px; }
.slide-arrow.prev { left: 10px; }
.slide-arrow.next { right: 10px; }
.slide-arrow[hidden] { display: none; }

.slide-dots {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  z-index: 2;
}
.slide-dots[hidden] { display: none; }
/* 32px box gives a usable tap target around a 9px dot */
.slide-dot {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.slide-dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  transition: background 0.15s ease, transform 0.15s ease;
}
.slide-dot[aria-current="true"]::after { background: var(--rust); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .slideshow .slide { transition: none; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--sand); }
.section-dark { background: var(--ink); color: var(--cream); }
.section-dark .eyebrow { color: var(--bronze-text); }
.section-dark h2 { color: var(--white); }

.pillars, .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.cards { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; }

/* A column so the call-to-action can sit on a common baseline across all three
   pillars — the descriptions wrap to different line counts, and without this
   the three links stagger, which reads as accidental rather than designed. */
.pillar {
  text-align: center;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
}
.pillar h3 { color: var(--rust-text); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.card p { flex: 1; color: var(--muted); }
.card .btn { align-self: center; margin-top: 0.5rem; }

/* ---------- Events (where we meet + link to the calendar) ---------- */
.meeting-address {
  font-family: var(--font-head);
  font-style: normal;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0.5rem 0 1rem;
}
.events-cta { margin: 1.6rem 0 0.9rem; }
/* One anchor around the whole address — keeps iOS from auto-detecting each
   wrapped line as its own separate map link. */
.meeting-address a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bronze);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.meeting-address a:hover { color: var(--rust-text); text-decoration-color: var(--rust); }

/* ---------- Contact ---------- */
.contact-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 460px;
  margin: 2rem auto 0;
}
.contact-name { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 0.2rem; }
.contact-role { color: var(--bronze-text); margin-bottom: 1rem; font-weight: 600; }
.contact-lines a {
  color: var(--cream);
  text-decoration: none;
  /* Padded to a ~44px tap target; the address is one long unbreakable token,
     so let it wrap rather than force horizontal scroll on narrow phones. */
  display: inline-block;
  padding: 0.7rem 0.25rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.contact-lines a:hover { color: var(--bronze-text); }
/* Compact pill so the link reads as a distinct control rather than another
   line of contact text. */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.social-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.social-link:hover { color: var(--bronze-text); border-color: var(--bronze); }

/* ---------- Footer ---------- */
.site-footer {
  background: #171a16;
  color: #b9bab2;
  padding: 2rem 0;
  font-size: 0.9rem;
}
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.site-footer a { color: var(--bronze-text); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-lead { max-width: none; margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  /* Photos deserve more room than the trout graphic needed */
  .hero-art { order: -1; max-width: 520px; margin: 0 auto; width: 100%; }
  .pillars, .cards { grid-template-columns: 1fr; }
  .site-nav { display: none; }
}

/* Phones: the lockup and the branch name can't sit side by side without
   overflowing, so stack them and turn the bronze rule into an underline. */
@media (max-width: 640px) {
  :root { --header-h: 89px; }  /* taller once the branch name stacks below */
  .header-inner { justify-content: center; gap: 0; }
  .brand { flex-direction: column; gap: 0.5rem; text-align: center; }
  .brand-logo { height: 34px; }
  .brand-branch {
    border-left: 0;
    border-top: 2px solid var(--bronze);
    padding-left: 0;
    padding-top: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  /* Reclaim horizontal room on small phones */
  .contact-card { padding: 1.5rem 1.1rem; }
  .card { padding: 1.5rem 1.25rem; }
  /* Centered body copy becomes hard to read when it wraps to 11 lines.
     Left-align the mission paragraph for better readability on small screens. */
  #about .lead { text-align: left; }
}

/* ---------- Tutorials page ---------- */
.site-nav a[aria-current="page"] { color: var(--rust-text); }

.page-head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0.2rem 0 0.9rem; }

/* Content sections that sit directly under a page-head intro tighten their
   top padding, so the heading and the grid read as one block. */
.tutorials-section, .leaders-section { padding-top: clamp(2rem, 5vw, 3.5rem); }

.tutorial-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.tutorial-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

/* Fixed 16:9 box so the grid stays even whether a card holds a thumbnail or a
   playing iframe, and so nothing reflows at the moment someone presses play. */
.tutorial-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  /* Guarantees a thumbnail can never bleed down over the title below it. */
  overflow: hidden;
}
.tutorial-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tutorial-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
/* Absolutely positioned rather than sized with height:100%: the button is a
   grid (to centre the play glyph), and a percentage height inside an
   auto-sized grid row is indeterminate — browsers fall back to the image's
   intrinsic aspect, which makes 4:3 fallback thumbnails overflow the frame. */
.tutorial-play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-glyph {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  transition: transform 0.18s ease;
}
/* YouTube's own red until hovered, then the branch rust. */
.play-glyph .play-bg { fill: #212121; opacity: 0.82; }
.tutorial-play:hover .play-glyph { transform: scale(1.08); }
.tutorial-play:hover .play-glyph .play-bg { fill: var(--rust); opacity: 1; }
.tutorial-play:focus-visible { outline: 3px solid var(--rust); outline-offset: -3px; }
.tutorial-play:focus-visible .play-glyph .play-bg { fill: var(--rust); opacity: 1; }

.tutorial-body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}
.tutorial-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0;
}
.tutorial-desc { margin: 0; color: var(--muted); font-size: 0.95rem; flex: 1; }
.tutorial-out {
  align-self: flex-start;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 1px;
}
.tutorial-out:hover { color: var(--rust-text); border-color: var(--rust); }

/* Loading / empty states */
.page-state { text-align: center; color: var(--muted); margin: 0; padding: 2rem 0; }
.page-state.empty {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem;
  box-shadow: var(--shadow);
  max-width: 620px;
  margin: 0 auto;
}
.page-state.empty h2 { font-family: var(--font-head); margin: 0 0 0.6rem; color: var(--ink); }
.page-state.empty p { margin: 0 0 1.2rem; }

@media (max-width: 620px) {
  .tutorial-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .play-glyph, .tutorial-play:hover .play-glyph { transition: none; transform: none; }
}

.pillar-link { margin: 0; padding-top: 0.6rem; margin-top: auto; }
.pillar-link a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--rust-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.pillar-link a:hover { color: var(--rust-dark); }
/* The text itself is only ~24px tall — exactly the WCAG 2.2 AA minimum, with
   nothing to spare on a shaky tap. This transparent overlay grows the hit area
   to ~44px without shifting the underline away from the baseline, which extra
   padding on the anchor would do. */
.pillar-link a { position: relative; }
.pillar-link a::after { content: ""; position: absolute; inset: -10px -8px; }

/* ---------- Calendar page ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.cal-head h2 {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  margin: 0;
  min-width: 11ch;
  text-align: center;
}
.cal-nav {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line, rgba(32,36,31,.14));
  background: var(--white);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.cal-nav:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.cal-today { padding: .4rem .9rem; min-height: 40px; font-size: .8rem; }

/* Table scrolls inside its own box rather than pushing the page wide. */
.cal-grid-wrap { overflow-x: auto; margin-bottom: 2rem; }
.cal-grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  table-layout: fixed;
  min-width: 320px;
}
.cal-grid th {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .7rem .2rem;
  border-bottom: 1px solid rgba(32,36,31,.1);
}
.cal-grid th abbr { text-decoration: none; }
.cal-cell {
  /* Fixed rather than clamped so every row matches — a calendar with uneven
     rows reads as broken rather than as a calendar. */
  height: 68px;
  vertical-align: top;
  text-align: center;
  border: 1px solid rgba(32,36,31,.07);
  padding: .35rem .2rem;
}
.cal-cell.empty { background: rgba(32,36,31,.02); }
.cal-daynum { font-size: .95rem; color: var(--ink); line-height: 1.1; }
.cal-cell.is-today { background: rgba(192,67,42,.07); box-shadow: inset 0 0 0 2px var(--rust); }
.cal-cell.is-today .cal-daynum { font-weight: 700; color: var(--rust-text); }

.cal-daybtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22rem;
  width: 100%;
  min-height: 40px;
  background: none;
  border: 0;
  padding: .1rem;
  cursor: pointer;
  font: inherit;
  border-radius: 6px;
}
.cal-daybtn:hover { background: rgba(192,67,42,.1); }
.cal-daybtn:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); }

/* ---------- Event list ---------- */
.cal-list { display: grid; gap: 1rem; }
.cal-event {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 1.1rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.3rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  transition: box-shadow .3s ease, transform .3s ease;
}
.cal-event.is-flash { box-shadow: 0 0 0 3px var(--rust), var(--shadow); }
.cal-event-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--sand);
  border-radius: 8px;
  padding: .55rem .3rem .7rem;
  height: fit-content;
}
.cal-event-dow {
  font-family: var(--font-head);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rust-text);
}
.cal-event-daynum { font-family: var(--font-head); font-size: 1.6rem; line-height: 1.1; }
.cal-event-body { min-width: 0; }
.cal-event-title { font-family: var(--font-head); font-size: 1.2rem; margin: 0 0 .3rem; }
.cal-event-meta { margin: 0 0 .25rem; color: var(--muted); font-size: .92rem; font-weight: 600; }
.cal-event-where { margin: 0 0 .4rem; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.cal-event-desc { margin: 0 0 .8rem; }
.cal-directions { padding: .45rem 1rem; min-height: 40px; font-size: .8rem; }

@media (max-width: 620px) {
  .cal-event { grid-template-columns: 58px 1fr; gap: .85rem; padding: 1rem; }
  .cal-event-daynum { font-size: 1.35rem; }
  .cal-head h2 { order: -1; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-event { transition: none; }
}

/* ---------- Mobile menu ---------- */
/* Hidden on desktop, where the nav is a plain row of links. */
.nav-toggle { display: none; }

.nav-toggle-box {
  display: grid;
  gap: 5px;
  width: 22px;
}
.nav-toggle-box > span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
/* Bars fold into an X. The outer two travel 7px to meet in the middle:
   bars are 2px with 5px gaps, so their centres sit 7px apart. */
.nav-toggle[aria-expanded="true"] .nav-toggle-box > span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-box > span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box > span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 820px) {
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line, rgba(32, 36, 31, 0.14));
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    flex: none;
  }
  .nav-toggle:hover { background: var(--sand); }
  .nav-toggle:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

  /* Drops out of the header rather than pushing the page down. The header is
     position: sticky, which is the containing block for this. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid rgba(32, 36, 31, 0.08);
    box-shadow: var(--shadow);
    padding: 0.4rem 0 0.6rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    border-bottom: 1px solid rgba(32, 36, 31, 0.06);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a[aria-current="page"] { color: var(--rust-text); }
  .site-nav.is-open { animation: navDrop 0.16s ease-out; }
}

/* Below 640px the brand centres and stacks, so the button is pinned to the
   right edge instead of sitting in the flex row. */
@media (max-width: 640px) {
  .header-inner { position: relative; }
  .nav-toggle {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

@keyframes navDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav.is-open { animation: none; }
  .nav-toggle-box > span { transition: none; }
}

/* ---------- Calendar cells: named events on wide screens ---------- */
/* Default (narrow): the whole cell is one tap target with a dot. The named
   chips and the corner day number are for wide screens only. */
.cal-chips,
.cal-daynum-wide { display: none; }

@media (min-width: 700px) {
  /* `height` on a td is treated as a MINIMUM, so every row gets the same tall
     baseline and only grows if one day is unusually busy. (min-height is
     ignored on table cells, which is what left empty days as 32px slivers
     while event days stretched — the rows never matched.) */
  .cal-cell { height: 132px; padding: 0.35rem 0.35rem 0.45rem; }
  /* The whole-cell dot button gives way to individual named chips. */
  .cal-daybtn { display: none; }
  /* Every day number sits in the same corner, whether or not the day has
     events — otherwise event days read as right-aligned and empty days as
     centred, and the column looks broken. */
  .cal-daynum-wide,
  .cal-cell > .cal-daynum {
    display: block;
    text-align: right;
    padding: 0 0.2rem 0.2rem;
  }
  .cal-cell.is-today .cal-daynum-wide { font-weight: 700; color: var(--rust-text); }

  .cal-chips {
    display: grid;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .cal-chip {
    display: block;
    width: 100%;
    border: 0;
    border-left: 3px solid var(--rust);
    border-radius: 3px;
    background: rgba(192, 67, 42, 0.09);
    color: var(--ink);
    font: inherit;
    font-size: 0.76rem;
    line-height: 1.25;
    text-align: left;
    padding: 0.22rem 0.35rem;
    cursor: pointer;
  }
  .cal-chip:hover { background: rgba(192, 67, 42, 0.18); }
  .cal-chip:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; }
  .cal-chip-time {
    display: block;
    font-weight: 600;
    color: var(--rust-text);
    font-size: 0.7rem;
  }
  /* Long names are clipped to two lines rather than stretching the row. */
  .cal-chip-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
}

/* ---------- Skip link ---------- */
/* Keyboard and screen-reader users land on the nav on every page; this gives
   them one keystroke past it. Visible only while focused. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--rust);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* The skip link's target. tabindex="-1" makes <main> programmatically
   focusable so a screen reader actually moves there rather than only scrolling;
   it stays out of the tab order, so the outline would only ever appear from the
   skip link itself — where a ring around the whole page is just noise. */
main:focus { outline: none; }

/* ---------- Calendar: printed-wall-calendar proportions ---------- */
/* Full day names once there's room for them; never fewer than three letters,
   which stays unambiguous (Tue/Thu, Sat/Sun) where one or two would not. */
.dow-full { display: none; }
.dow-abbr { display: inline; }

/* Same 700px threshold as the named event chips, so the calendar has a single
   wide mode rather than changing character twice on the way down. Measured at
   700px: "WEDNESDAY" is ~71px in a ~93px column. */
@media (min-width: 700px) {
  .dow-full { display: inline; }
  .dow-abbr { display: none; }
}

/* The grid earns more width than the reading column: a wall calendar wants
   near-square cells, and at 1120px seven columns are wide, flat letterboxes.
   The event list below stays at reading width. */
@media (min-width: 1200px) {
  .calendar-section > .container { max-width: 1320px; }
  .cal-list { max-width: 1120px; margin-left: auto; margin-right: auto; }
}

.cal-grid th {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  font-size: 0.82rem;
}
@media (min-width: 900px) {
  .cal-grid th { font-size: 0.9rem; letter-spacing: 0.08em; }
}
/* Between 700 and 900 the full names are shown at the smaller size, which is
   what keeps them inside the narrower columns. */

/* Wall-calendar detailing: on a printed calendar the date is the most
   prominent thing in the box, and the rules between boxes are clearly drawn.
   At web defaults both were too timid for cells this size. */
@media (min-width: 700px) {
  .cal-cell { border-color: rgba(32, 36, 31, 0.13); }
  .cal-daynum-wide,
  .cal-cell > .cal-daynum {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--muted);
    padding: 0.05rem 0.35rem 0.25rem;
  }
  .cal-cell.is-today .cal-daynum-wide { color: var(--rust-text); }
  /* Days with something on deserve a darker number than empty ones. */
  .cal-cell.has-events .cal-daynum-wide { color: var(--ink); }

  .cal-chip { font-size: 0.8rem; padding: 0.3rem 0.45rem; }
  .cal-chip-time { font-size: 0.72rem; }
  .cal-chips { gap: 3px; }
}

/* ---------- Leaders page ---------- */
.leader-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.leader-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
}

.leader-photo {
  aspect-ratio: 1 / 1;
  background: var(--sand);
  overflow: hidden;
}
.leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leader-body { padding: 1rem 1.1rem 1.3rem; }
.leader-name {
  font-family: var(--font-head);
  font-size: 1.1rem;
  margin: 0 0 0.2rem;
}
.leader-role { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* A bio runs several sentences, and centred paragraphs are ragged on both
   edges — hard work for exactly the readers this site has to serve well. The
   name and role above stay centred; only the paragraph goes left. */
.leader-bio {
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--sand);
  text-align: left;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-line;
}

/* One card per row on a phone. Two-up suited a headshot-and-name card, but a
   bio paragraph in a half-width column is only a few words per line. */
/* Cap and centre the grid, not the cards: auto margins on a grid item stop it
   stretching, which would size every card to its own text and leave a card
   without a bio visibly narrower than its neighbours. */
@media (max-width: 560px) {
  .leader-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}