/* Shared page chrome: corner navigation and logo, used by full-bleed screens */

.nav-top,
.nav-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.nav-top {
  align-items: flex-start;
}

.nav-bottom {
  align-items: flex-end;
}

/* ---------- Consistent corner navigation ----------
   The logo + three nav links are pinned to the four screen corners,
   identically on every app screen, so the chrome never shifts in size or
   position between views and always stays on screen. */
.nav-corner {
  position: fixed;
  z-index: 30;
}

.nav-corner--tl { top: 2.6vh; left: 2.8vw; }
.nav-corner--tr { top: 3vh; right: 2.8vw; }
.nav-corner--bl { bottom: 3.2vh; left: 2.8vw; }
.nav-corner--br { bottom: 3.2vh; right: 2.8vw; }

/* one consistent logo size for every app screen (welcome keeps its own).
   A fixed size — not a viewport-relative clamp — so the chrome never changes
   size between a narrow and a wide window. */
.logo.nav-corner--tl {
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.logo {
  font-family: var(--font-display);
  font-size: 3rem; /* one fixed brand size, identical on welcome and every app screen */
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-decoration: none;
  cursor: pointer;
}

/* The archive/gallery header uses title case instead */
.logo--title {
  text-transform: none;
  letter-spacing: 0.02em;
}

.nav-link {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  text-transform: uppercase;
  color: var(--color-cream);
  background: none;
  border: none;
  cursor: pointer;
}

/* pressed state: the nav button goes bold and blue while held */
.nav-link:active {
  font-weight: 700;
  color: var(--color-ink-blue);
}

/* the nav item for the screen you're currently on is shown blue */
.nav-current {
  color: var(--color-ink-blue);
  font-weight: 700;
  text-decoration: none;
  opacity: 1;
  cursor: default;
}

/* Mobile: pages routinely scroll on a narrow screen (they mostly don't on
   desktop), so the fixed corners end up sitting over whatever content has
   scrolled underneath. A small scrim keeps the pinned chrome legible without
   changing its position or size. */
@media (max-width: 720px) {
  /* no box behind the corner links — it read as clutter. A soft dark halo
     keeps them legible over a bright capture without any visible background. */
  .nav-corner {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
  }
}