/* Shared styles for every menu page and 404.html. */
:root {
  --bg: #000;
  --fg: #fff;
  --heading-font: 'Lora', Georgia, serif;
  --heading-weight: 600;
  --body-font: 'Quicksand', 'Segoe UI', sans-serif;
  --body-weight: 500;
  --heading-size: 64px;
  --body-size: 24px;
}
html, body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body-font);
  font-weight: var(--body-weight);
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px 16px;
  box-sizing: border-box;
  text-align: center;
}
h1 {
  margin: 0 0 16px;
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: min(var(--heading-size), 12vw);
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.status {
  margin: 0;
  font-size: calc(var(--body-size) * 0.8);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}
.contact[hidden] { display: none; }
.phone {
  color: var(--fg);
  font-size: var(--body-size);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.phone:hover,
.phone:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.venmo { display: block; width: 160px; max-width: 60vw; height: auto; }
.back {
  position: fixed;
  left: 20px;
  top: 20px;
  color: var(--fg);
  font-size: calc(var(--body-size) * 0.6);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.75;
}
.back:hover,
.back:focus-visible { opacity: 1; }
@media (max-width: 640px) {
}

/* ---- Payments page (payments.html) ---------------------------------------- */
main.payments {
  justify-content: flex-start;
  max-width: 560px;
  margin: 0 auto;
  padding-top: 104px;
}
/* The Zelle logo under the heading (or the word Zelle until the logo file
   is there). */
.zelle-mark[hidden] { display: none; }
.zelle-mark {
  width: 100%;
  margin: 8px 0 40px;
  line-height: 1;
}
.zelle-mark img[hidden] { display: none; }
.zelle-mark img {
  display: block;
  width: var(--zelle-logo-width, 240px);
  border-radius: var(--zelle-logo-radius, 15px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
#zelle-word {
  font-size: calc(var(--body-size) * 1.4);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The steps: each numbered by a filled accent circle, with room between
   them. */
.pay-content {
  width: 100%;
  text-align: left;
  font-size: calc(var(--body-size) * 0.75);
  line-height: 1.6;
}
.pay-content h2,
.pay-content h3 {
  margin: 0 0 12px;
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: calc(var(--body-size) * 1.1);
  text-align: center;
}
.pay-content p { margin: 0 0 1em; }
/* An extra empty line in the text file. */
.pay-content .md-space { height: 1em; margin: 0; }
/* A list with empty lines between its items sits a little further apart. */
.pay-content ul.spaced li { margin-bottom: 1em; }
.pay-content p.centered { text-align: center; }
.pay-content a { color: inherit; text-underline-offset: 3px; }
.pay-content .md-image { display: block; max-width: 100%; height: auto; margin: 0 auto 1em; border-radius: var(--zelle-logo-radius, 15px); }
.pay-content ul { margin: 0 0 1em; padding-left: 1.3em; }
/* A numbered list becomes the steps: each number in a filled accent circle,
   with room between them. */
.pay-content ol {
  counter-reset: step;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pay-content ol li {
  position: relative;
  min-height: var(--step-circle, 36px);
  padding-left: calc(var(--step-circle, 36px) + 18px);
  margin-bottom: var(--step-gap, 28px);
}
.pay-content ol li:last-child { margin-bottom: 0; }
.pay-content ol li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: calc((1.6em - var(--step-circle, 36px)) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-circle, 36px);
  height: var(--step-circle, 36px);
  border-radius: 50%;
  background: var(--accent, #dfeac0);
  color: var(--fg);
  font-weight: 700;
  font-size: 0.95em;
}
.placeholder { font-style: italic; font-weight: 500; opacity: 0.7; }

/* ---- Menu bar across the top (pages that have one) ------------------------
   The same bar as the home page's, built by page.js from MENU_ITEMS. Its
   options lead back to their section on the home page. It slides down when
   the page opens. */
#quick-nav {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 2;
  height: var(--top-menu-height, 64px);
  background: var(--accent, #e8f0d4);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--top-menu-slide-ms, 350ms) cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear var(--top-menu-slide-ms, 350ms);
}
#quick-nav.show {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--top-menu-slide-ms, 350ms) cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.no-top-menu-animation #quick-nav,
.no-top-menu-animation #quick-nav.show { transition: none; }
#quick-list {
  display: flex;
  align-items: center;
  justify-content: safe center;
  height: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#quick-list::-webkit-scrollbar { display: none; }
/* Hovering an option spreads its letters a little, which nudges the options
   beside it aside; they slide back when the pointer leaves. */
#quick-list a {
  position: relative;
  flex: none;
  padding: 8px 14px;
  color: var(--fg);
  font-size: var(--top-menu-text-size, 17px);
  letter-spacing: var(--menu-spacing-hover, 0.15em);
  text-indent: var(--menu-spacing-hover, 0.15em);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: letter-spacing var(--top-menu-hover-ms, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    text-indent var(--top-menu-hover-ms, 250ms) cubic-bezier(0.22, 1, 0.36, 1);
}
#quick-list a:hover,
#quick-list a:focus-visible {
  letter-spacing: var(--top-menu-hover-spacing, 0.3em);
  text-indent: var(--top-menu-hover-spacing, 0.3em);
}
#quick-list a:focus-visible { outline: none; }
/* Underline: two halves that grow out from the middle of the word. */
#quick-list.underline a::before,
#quick-list.underline a::after {
  content: '';
  position: absolute;
  bottom: 3px;
  width: calc(50% - 14px - var(--top-menu-hover-spacing, 0.3em));
  height: var(--top-underline-thickness, 2px);
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--top-menu-hover-ms, 250ms) cubic-bezier(0.22, 1, 0.36, 1);
}
#quick-list.underline a::before { right: 50%; transform-origin: 100% 50%; border-radius: 99px 0 0 99px; }
#quick-list.underline a::after { left: 50%; transform-origin: 0 50%; border-radius: 0 99px 99px 0; }
#quick-list.underline a:hover::before,
#quick-list.underline a:hover::after,
#quick-list.underline a:focus-visible::before,
#quick-list.underline a:focus-visible::after { transform: scaleX(1); }

/* ---- The numbers on the "page not found" page ----------------------------
   They sit under the heading until one is pushed; then notfound.js takes
   over, placing each one wherever it has bounced to. */
.digits {
  display: flex;
  gap: 0.04em;
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: min(calc(var(--heading-size) * 2.2), 34vw);
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
  -webkit-user-select: none;
}
.digits[hidden] { display: none; }
.digits span {
  display: block;
  color: var(--accent, #dfeac0);
  cursor: grab;
  touch-action: none;
}
.digits span:active { cursor: grabbing; }
/* Every character of the heading is its own piece too, so it can be pushed
   and can spin on its own. */
#title span {
  display: inline-block;
  cursor: grab;
  touch-action: none;
}
#title span:active,
.digits.loose span.held,
#title.loose span.held { cursor: grabbing; }
/* Once they're loose, each character is placed on the page by itself. */
.digits.loose,
#title.loose {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  margin: 0;
  pointer-events: none;
}
#title.loose { height: 0; overflow: visible; }
.digits.loose span canvas,
#title.loose span canvas { display: block; }
.digits.loose span,
#title.loose span {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: auto;
  will-change: transform;
}