:root {
  --paper: #f4f5f2;
  --ink: #17241e;
  --muted: #46544b;
  --green: #135e3e;
  --line: #c3cec5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

/* 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: 16px/1.6 system-ui, sans-serif;
}
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: #003d28; }
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: #fff; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand strong {
  color: var(--green);
  font-size: 1.6rem;
  letter-spacing: -.05em;
  line-height: 1;
}
.brand span { font-size: .9rem; font-weight: 600; }
nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
nav a {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
nav a:hover { color: var(--green); text-decoration: underline; }
.mobile-menu { display: none; }
.nav-dropdown { position: relative; }
.nav-dropdown > summary, .mobile-involvement > summary {
  color: var(--ink);
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
  list-style: none;
}
.nav-dropdown > summary::-webkit-details-marker,
.mobile-involvement > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after, .mobile-involvement > summary::after { content: " ▾"; }
.nav-dropdown > summary:focus-visible,
.mobile-involvement > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.nav-dropdown-menu {
  position: absolute;
  z-index: 3;
  top: calc(100% + 8px);
  left: -16px;
  display: grid;
  min-width: 205px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 18px #17241e20;
}
.nav-dropdown-menu a { padding: 6px 0; }

.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;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #ffffffaa;
  border-radius: 50%;
  background: #202b2470;
  color: white;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  list-style: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.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;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  background: #202b24b8;
  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: 70vh; padding-block: 52px 80px; }
.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, 3vw, 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; }
.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 20px; font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.logistics-summary-hint { display: none; }
.logistics-details > summary::-webkit-details-marker { display: none; }
.logistics-details > summary::marker { content: ""; }
.logistics-details > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.logistics-rsvp-desktop { margin-bottom: 20px; }
.logistics dl { margin: 0 0 24px; }
.logistics dt { color: var(--muted); font-size: .86rem; font-weight: 700; }
.logistics dd { margin: 0 0 16px; }
.logistics dl.logistics-note { margin-top: 16px; }
.button {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--green);
  border-radius: 3px;
  background: var(--green);
  color: white;
  font-size: .94rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.button:hover { border-color: #003d28; background: #003d28; color: white; }
.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 select {
  width: 100%;
  min-height: 44px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffefa;
  color: var(--ink);
  font: inherit;
}
.payment-options select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.payment-options button {
  width: 100%;
  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; }
.empty-state h1 { margin: 0 0 8px; font-size: 2.2rem; line-height: 1.2; }
.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; }
.empty-state { max-width: 55ch; }
.site-footer {
  border-top: 1px solid var(--line);
  padding: 25px 0;
  color: var(--muted);
  font-size: .88rem;
}

@media (max-width: 760px) {
  .header-inner { position: relative; min-height: 72px; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu > summary {
    list-style: none;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 700;
  }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
  .mobile-menu > nav {
    position: absolute;
    z-index: 3;
    top: 100%;
    right: 0;
    display: block;
    width: min(300px, 100%);
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fffefa;
    box-shadow: 0 2px 8px #202b2414;
  }
  .mobile-menu nav a {
    display: block;
    padding: 8px 0;
    color: var(--ink);
  }
  .mobile-involvement > summary { padding: 8px 0; }
  .mobile-involvement a { padding-left: 14px !important; font-weight: 500 !important; }
  main { padding-block: 35px 60px; }
  .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: #fffefa;
    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: #fffefa;
  }
  .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; }
  .prose table { display: block; overflow-x: auto; }
}

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