:root {
  --fade-duration: 0.8s;
  --bottom-space: 90px;   /* empty space below the last item on scrolling pages,
                             and below an open pop-up (script.js) */
}

/* page fade-in on arrival / fade-out before navigating -- the duration lives here as
   the single source of truth; script.js reads --fade-duration to time its setTimeout
   before navigating, and to size the gallery cross-dissolve. Each page's own CSS file
   still sets body's background-color (that part is legitimately page-specific). */
body {
  opacity: 0;
  transition: opacity var(--fade-duration) ease;
}

/* ===== menu (shared across pages) ===== */

#menu-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 36px;
  z-index: 90;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-family: sans-serif;
  color: #6e394d;
  text-transform: lowercase;
}

#menu-bar::before {
  content: "mk";
}

#menu-toggle {
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 100;
  width: 30px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

#menu-toggle span {
  display: block;
  height: 1.3px;
  width: 66%;
  background: #6e394d;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-open #menu-toggle span:nth-child(1) {
  transform: translateY(5.3px) rotate(45deg);
}

.menu-open #menu-toggle span:nth-child(2) {
  opacity: 0;
}

.menu-open #menu-toggle span:nth-child(3) {
  transform: translateY(-5.3px) rotate(-45deg);
}

#drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: max-content; /* only as wide as the longest menu title, on every screen size */
  z-index: 90;
  background: transparent;
  transform: translateX(100%);
  /* hidden while closed, so no sliver of it can peek in at the screen's right edge
     (iPhone landscape showed flashing green bars). visibility waits until the 0.3s
     slide-out has finished before switching to hidden, so the slide still shows. */
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1em;
  padding: 80px 0 0;
  box-sizing: border-box;
}

.menu-open #drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s; /* visible right away when opening */
}

#drawer a {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 8px 14px;
  background: rgba(145, 198, 178, 1); /* fully solid */
}

/* smaller menu text, e.g. the "you can go there again" line under home (added by script.js) */
#drawer .drawer-small {
  display: block;   /* puts it on its own line, under "home" */
  font-size: 16px;
  line-height: 1;   /* tighter space between the two lines; bigger number = more space */
}