:root {
  color-scheme: light dark;
  --paper: #f4f5f2;
  --ink: #17241e;
  --muted: #46544b;
  --green: #135e3e;
  --line: #c3cec5;
  --control-border: #6b786e;
  --surface: #fff;
  --surface-warm: #fffefa;
  --green-hover: #003d28;
  --link: var(--green);
  --link-hover: var(--green-hover);
  --link-underline: currentColor;
  --button-ink: #fff;
  --menu-shadow: #17241e20;
}

/* Deep charcoal, crisp text, and blue links keep brand green distinct. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101216;
    --ink: #f5f6f8;
    --muted: #c1c7d0;
    --green: #8dc63f;
    --line: #59616e;
    --control-border: #929cab;
    --surface: #20252d;
    --surface-warm: #2a303a;
    --green-hover: #a6db5b;
    --link: #a9c4ff;
    --link-hover: #d6e3ff;
    --link-underline: currentColor;
    --button-ink: #101216;
    --menu-shadow: #00000050;
  }
}

@layer reset {
  :where(html, body, header, nav, main, aside, footer, section, article, div,
    p, ul, ol, li, dl, dt, dd, details, summary, a, button, input, select,
    textarea, fieldset, iframe, table, th, td, svg) { box-sizing: border-box; }
}
[hidden] { display: none !important; }
:where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 10;
  padding: 8px 16px;
  background: var(--surface);
  color: var(--ink);
}
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
img, video { max-inline-size: 100%; block-size: auto; }
iframe { max-inline-size: 100%; }
:is(h1, h2, h3) { text-wrap: balance; }
.prose :is(p, li) { text-wrap: pretty; }
html { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Keep the previous page visible until the next document is ready to paint. */
@view-transition {
  navigation: auto;
}

/* Switch directly to the new page without the default text crossfade. */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
::view-transition-old(root) { display: none; }
::view-transition-new(root) { mix-blend-mode: normal; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
a { color: var(--link); text-decoration-color: var(--link-underline); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.shell { width: min(100% - 40px, 1050px); margin-inline: auto; }

.site-header { border-bottom: 2px solid var(--green); background: var(--surface); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}
.brand {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.chapter-badge { display: block; width: 64px; height: 64px; flex-shrink: 0; }
.chapter-badge text {
  fill: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.brand span { font-size: .9rem; font-weight: 600; }
/* One navigation tree; a native popover is the compact default. */
.site-nav { flex-shrink: 0; }
.site-nav ul { list-style: none; margin: 0; }
.site-nav a, .site-nav button {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  padding: 4px 0;
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.site-nav button { border: 0; background: transparent; cursor: pointer; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; }
.menu-button { anchor-name: --site-menu; }
.site-menu {
  position: fixed;
  inset: auto;
  inset-block-start: 5.5rem;
  inset-block-start: anchor(--site-menu bottom);
  inset-inline-end: 1rem;
  inline-size: min(22rem, calc(100dvw - 2rem));
  max-block-size: calc(100dvh - 7rem);
  overflow: auto;
  margin-block-start: .5rem !important;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 18px var(--menu-shadow);
}
.site-menu a, .dropdown-trigger { inline-size: 100%; }
.dropdown-trigger { column-gap: .5em; }
.dropdown-list { padding-inline-start: 14px; }
.site-header.is-wide .menu-button { display: none; }
.site-header.is-wide .site-menu {
  display: flex;
  align-items: baseline;
  gap: 24px;
  position: static;
  inline-size: auto;
  max-block-size: none;
  overflow: visible;
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}
.site-header.is-wide .dropdown-list:not(:popover-open) { display: none; }
.site-header.is-wide .dropdown-list[popover] {
  position: fixed;
  inset: auto;
  block-size: auto;
  inline-size: max-content;
  max-inline-size: calc(100dvw - 1rem);
  max-block-size: calc(100dvh - 1rem);
  overflow: auto;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 18px var(--menu-shadow);
  white-space: normal;
}
.site-header.is-wide .dropdown-list:popover-open { display: grid; }
@supports (position-area: block-end) {
  .site-header.is-wide .dropdown-list[popover] {
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    margin-block-start: 8px;
  }
}
.basic-navigation .site-menu { position: static; inline-size: auto; max-block-size: none; }
.basic-navigation .header-inner { flex-wrap: wrap; }

.site-banner {
  position: relative;
  width: min(100% - 40px, 1050px);
  height: clamp(110px, 15vw, 190px);
  margin: 24px auto 0;
  border-radius: 4px;
  overflow: hidden;
  background: #52605a center 22% / cover no-repeat;
}
.photo-attribution {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.photo-attribution > summary {
  display: grid;
  min-width: 25px;
  min-height: 25px;
  place-items: center;
  border: 1px solid #ffffffaa;
  border-radius: 50%;
  background: #202b24;
  color: white;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  list-style: none;
  opacity: 1;
}
.site-banner:hover .photo-attribution > summary,
.site-banner:focus-within .photo-attribution > summary { opacity: 1; }
.photo-attribution > summary::-webkit-details-marker { display: none; }
.photo-attribution > summary:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.photo-credit {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: calc(100dvw - 7rem);
  white-space: normal;
  padding: 4px 8px;
  border-radius: 4px;
  background: #202b24;
  color: white;
  font-size: .75rem;
  line-height: 1.4;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.site-banner:hover .photo-credit,
.site-banner:focus-within .photo-credit,
.photo-attribution[open] .photo-credit { opacity: 1; pointer-events: auto; }
.photo-credit:hover { color: white; background: #202b24e8; }
@media (hover: none) {
  .photo-attribution > summary { opacity: 1; }
}

main { min-height: 70dvh; padding-block: 52px 80px; }
.notification { margin-bottom: 24px; }
.notification > summary {
  color: var(--green);
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
}
.notification > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.notification[open] > summary { margin-bottom: 10px; }
.notification .prose > :last-child { margin-bottom: 0; }
.event-heading {
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  margin-bottom: 30px;
}
.event-heading p { margin: 0; }
.event-heading h1, .prose h1, .page-intro h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.event-heading h1 { margin: 0 0 12px; }
.event-detail-heading { margin-bottom: 12px; padding-bottom: 12px; }
.event-state { color: var(--green); font-weight: 700; }
.event-date { color: var(--muted); }
.event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  align-items: start;
}
.event-copy { grid-column: 1; grid-row: 1; min-width: 0; hyphens: auto; }
.event-copy :is(h1, h2, h3, h4) { text-align: left; }
.event-copy > h2:first-child { margin-top: 0; }
.prose { max-width: 68ch; }
.rsvp-page { max-width: 760px; margin-inline: auto; }
.rsvp-page .event-state { margin-bottom: 12px; font-size: .875rem; }
.rsvp-form { display: block; width: 100%; height: 1200px; border: 0; margin-bottom: 20px; }

/* Google Forms are cross-origin: filter the light embed to follow our theme.
   Keep native controls light before filtering to avoid double darkening. */
.google-form { color-scheme: light; background: #fff; }
.membership-form { display: block; width: 100%; border: 0; }
@media (prefers-color-scheme: dark) {
  .google-form { filter: invert(.93) hue-rotate(180deg); }
}
.prose h1 { margin: 0 0 24px; }
.prose h2 {
  margin: 40px 0 12px;
  font-size: 1.35rem;
  line-height: 1.25;
}
.prose p { margin: 0 0 18px; }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: 8px; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.prose th, .prose td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { font-weight: 700; }
.standard-page { max-width: 780px; }

.logistics {
  grid-column: 2;
  grid-row: 1;
}
.logistics-details > summary { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.logistics-summary-hint { display: none; }
.logistics-details > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.logistics-rsvp-desktop { width: 100%; margin-bottom: 12px; }
.logistics dl { margin: 0 0 16px; }
.logistics dt { color: var(--muted); font-size: .86rem; font-weight: 700; }
.logistics dd { margin: 0 0 10px; }
.logistics dd:last-child { margin-bottom: 0; }
.logistics-address span { display: block; }
.logistics dl.logistics-note { margin-top: 0; margin-bottom: 0; }
.logistics-note dd > p { margin: 0 0 8px; }
.logistics-note dd > p:last-child { margin-bottom: 0; }
.button {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--green);
  border-radius: 3px;
  background: var(--green);
  color: var(--button-ink);
  font-size: .94rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.button:hover { border-color: var(--green-hover); background: var(--green-hover); color: var(--button-ink); }
.logistics .button { text-align: center; }
.logistics .logistics-rsvp-mobile { display: none; }
.payment-options {
  margin-top: 24px;
}
.payment-options form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  gap: 10px;
  margin: 0;
}
.payment-label { font-weight: 700; }
.payment-options fieldset { margin: 0; padding: 12px; border: 1px solid var(--control-border); border-radius: 6px; }
.payment-choice { display: flex; align-items: center; gap: 10px; }
.payment-choice input { accent-color: var(--green); flex-shrink: 0; }
.payment-choice label { display: flex; align-items: center; min-block-size: 48px; cursor: pointer; }
.table-scroll { max-inline-size: 100%; overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.prose caption { text-align: start; font-weight: 700; margin-block-end: 12px; }
.payment-options button {
  width: 100%;
  min-block-size: 48px;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.payment-options button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.page-intro { margin-bottom: 24px; }
.page-intro h1 { margin: 0 0 8px; }
.event-search { margin-bottom: 28px; }
.event-search label { display: block; font-weight: 650; }
.event-search > p { color: var(--muted); margin: 6px 0 12px; }
.event-search input {
  width: 100%;
  max-width: 620px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.event-search input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.meeting-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  align-items: start;
}
.empty-state { min-width: 0; }
.empty-state h1 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.empty-state p { margin: 0; color: var(--muted); text-wrap: pretty; }
.recent-meetings { min-width: 0; }
.recent-meetings h2 { margin: 0 0 20px; color: var(--muted); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.recent-meetings-list { list-style: none; margin: 0; padding: 0; }
.recent-meetings-list li { display: grid; gap: 2px; margin-bottom: 20px; }
.recent-meetings-list li:last-child { margin-bottom: 0; }
.recent-meetings-list time { color: var(--muted); font-size: .82rem; }
.recent-meetings-list a { font-size: .94rem; overflow-wrap: anywhere; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-year {
  margin: 32px 0 0;
  color: var(--green);
  font-size: 1.3rem;
}
.event-year:first-of-type { margin-top: 20px; }
.event-list li {
  display: grid;
  grid-template-columns: 10ch minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
}
.event-list time {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  text-align: left;
}
.event-list a { font-weight: 650; }
.post-tag { margin-left: 8px; color: var(--muted); font-size: .82rem; }
.site-footer {
  border-top: 1px solid var(--line);
  padding: 25px 0;
  color: var(--muted);
  font-size: .88rem;
}

@media (max-width: 47.5rem) {
  .chapter-badge { width: 56px; height: 56px; }
  .header-inner { min-height: 72px; }
  main { padding-block: 35px 60px; }
  .meeting-overview { grid-template-columns: 1fr; gap: 40px; }
  .recent-meetings { padding-top: 24px; border-top: 1px solid var(--line); }
  .event-layout { grid-template-columns: 1fr; gap: 24px; }
  .event-copy, .logistics { grid-column: 1; grid-row: auto; }
  .logistics { max-width: 450px; }
  .logistics-details > summary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-warm);
    font-size: 1rem;
    cursor: pointer;
  }
  .logistics-details > summary::after { content: "+"; color: var(--green); font-size: 1.3rem; line-height: 1; }
  .logistics-details[open] > summary::after { content: "−"; }
  .logistics-summary-hint { display: block; margin-left: auto; color: var(--muted); font-size: .8rem; font-weight: 500; text-align: right; }
  .logistics-details[open] {
    padding: 14px;
    border: 2px solid var(--green);
    border-radius: 6px;
    background: var(--surface-warm);
  }
  .logistics-details[open] > summary {
    margin-bottom: 12px;
    padding: 0;
    border: 0;
  }
  .logistics-details[open] > dl:last-child { margin-bottom: 0; }
  .logistics .logistics-rsvp-mobile { display: block; width: 100%; margin-bottom: 12px; }
  .logistics-rsvp-desktop { display: none; }
}

@media (max-width: 30rem) {
  .shell { width: min(100% - 32px, 1050px); }
  .brand { gap: 9px; white-space: normal; }
}

@media (pointer: coarse) {
  .site-nav :is(a, button), .photo-attribution > summary { min-block-size: 44px; min-inline-size: 44px; }
}
@media (forced-colors: active) {
  :root {
    --paper: Canvas;
    --surface: Canvas;
    --surface-warm: Canvas;
    --ink: CanvasText;
    --muted: CanvasText;
    --green: LinkText;
    --green-hover: LinkText;
    --link: LinkText;
    --link-hover: LinkText;
    --line: CanvasText;
    --control-border: ButtonText;
    --button-ink: Canvas;
  }
  .google-form { filter: none; }
  .photo-attribution > summary, .photo-credit { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}