/* 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);
}
/* The scrollbar down the side is hidden unless SHOW_SCROLLBAR turns it on.
   Hidden is the way round that needs no waiting: the page starts this way
   and the class is added only if the setting asks for it, so the bar never
   shows for a moment and disappears. Scrolling itself is untouched — wheel,
   keys, swipe and the page-down key all work as they always did. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }
html.show-scrollbar { scrollbar-width: auto; -ms-overflow-style: auto; }
html.show-scrollbar::-webkit-scrollbar,
html.show-scrollbar body::-webkit-scrollbar { width: auto; height: auto; display: block; }
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; }
/* Something built separately, dropped into a page by name (!rsvp!). It sits
   in a frame of its own, so its own styling stays inside it. (The home page
   keeps its own copy of these rules, in index.html.) */
.pay-content .embed {
  display: block;
  width: 100%;
  margin: 1.2em 0;
  border: none;
  background: transparent;
  color-scheme: normal;
  /* Something shown this way is to look at, not to touch: the pointer goes
     straight through to the page, so scrolling over it scrolls the page. */
  pointer-events: none;
}
/* An embed set to touch: "always" is one you fill in — a box for an address,
   say. It has nothing to take a roll of the wheel with, so it needs no gate
   in front of it. */
.pay-content .embed.always-on { pointer-events: auto; }
/* An embed set to touch: "wake" waits under a word until it is clicked. */
.embed-holder {
  display: block;
  position: relative;
}
.embed-holder.awake > .embed { pointer-events: auto; }
.embed-holder.awake > .embed-wake { display: none; }
.embed-wake {
  position: absolute;
  top: 1.2em;
  right: 0;
  bottom: 1.2em;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.embed-wake span {
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--accent, #dfeac0);
  color: var(--fg, #0b1105);
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.embed-wake:hover span { filter: brightness(0.96); }
/* Words pushed into the middle of the page, between -> and <- in the file. */
.pay-content .centered { text-align: center; }
/* A centered list has no room down the left for its bullets, so they go in
   front of the words instead. */
.pay-content ul.centered,
.pay-content ol.centered { list-style-position: inside; padding-left: 0; }
/* Two columns either side of a gutter down the middle, for a cast list:
   Role — Name in the file. Each side is set against the gutter, so the two
   read as one list however long the words on either side are. */
.pay-content .pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--pair-gap, 64px);
  margin: 0 auto 1em;
  max-width: var(--paragraph-width, none);
}
.pay-content .pairs p { margin: 0; }
.pay-content .pairs .pair-left { text-align: right; }
.pay-content .pairs .pair-right { text-align: left; }
.pay-content .pairs .pair-dash { display: none; }
/* With TWO_COLUMN_DASH on, the dash stands in the gutter with half the space
   either side of it, so the two sides stay as far apart as they were. */
.two-column-dash .pay-content .pairs {
  grid-template-columns: 1fr minmax(var(--pair-gap, 64px), auto) 1fr;
  column-gap: 0;
}
.two-column-dash .pay-content .pairs .pair-dash { display: block; text-align: center; }
.pay-content .pairs .pair-dash::before { content: var(--pair-dash-char, "\2014"); }
/* Side by side there is no room on a narrow screen, so they stack instead,
   each pair kept together and set in the middle. */
@media (max-width: 480px) {
  .pay-content .pairs,
  .two-column-dash .pay-content .pairs { grid-template-columns: 1fr; column-gap: 0; }
  .pay-content .pairs .pair-left { text-align: center; margin-top: 0.5em; }
  .pay-content .pairs .pair-right { text-align: center; }
  .two-column-dash .pay-content .pairs .pair-dash { display: none; }
}
.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; }
/* An ordinary numbered list, written 1. 2. 3. */
.pay-content ol { margin: 0 0 1em; padding-left: 1.3em; }
/* Written 1) 2) 3) instead, it becomes the steps: each number in a filled
   accent circle, with room between them. */
.pay-content ol.steps {
  counter-reset: step;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pay-content ol.steps 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.steps li:last-child { margin-bottom: 0; }
.pay-content ol.steps 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;
}

/* ---- The play's page (is_nirmal_normal.html) ------------------------------
   The person icon repeated in an even grid behind the words, with one of
   them drawn as an outline instead of filled in. play.js works out the grid
   and sets the sizes. */
/* The figures belong to the page, not to the window: they sit at a place on
   the page and scroll away with the words. play.js gives this its height,
   which is as far down as the figures reach. */
#icon-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#icon-field .person {
  position: absolute;
  display: block;
}
/* Both kinds are copies of the same drawing: these two rules are the whole
   difference between them. The rules reach the shapes themselves, since a
   drawing may carry colors of its own that would otherwise win. */
svg.person.filled * {
  fill: var(--icon-color, #000);
  stroke: none;
}
/* The odd one out: the shape drawn with a pen instead of filled in. The line
   is measured on the screen, so it stays the set thickness at any size. */
svg.person.outline {
  overflow: visible; /* room for the line, which sits astride the edge */
}
svg.person.outline * {
  fill: none;
  stroke: var(--icon-color, #000);
  stroke-width: var(--icon-outline, 3px);
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* The question mark standing inside the outlined figure is filled in rather
   than drawn as a line, and set in the page's heading font. */
svg.person.outline .question {
  fill: var(--icon-color, #000);
  stroke: none;
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
}
/* The title in two lines, with the outlined figure standing between them. */
h1.split-by-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
h1.split-by-figure .title-line { display: block; }
h1.split-by-figure svg.person.in-title {
  display: block;
  overflow: visible;
  margin: 6px 0;
}
/* The words sit above the icons. */
body.play main { position: relative; z-index: 1; }
/* The play's page has a menu bar of its own: it sits in the page rather than
   hanging over it, and takes its own colours (PLAY_MENU_* in settings.md). */
body.play #quick-nav {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  background: var(--play-menu-bg, #ffffff);
  border: var(--play-menu-outline-thickness, 2px) solid var(--play-menu-outline, #000000);
}