/* index.css — Chapter & Verse */
/* Basic reset and full-viewport stage */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #000;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  overflow: hidden;            /* no scrollbars */
  overscroll-behavior: none;   /* reduce pull-to-refresh visuals */
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Uniform scaling to available display area, areas outside are black */
.hero-image {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;     /* scale image uniformly */
  background-color: #000;  /* ensure any letterbox area remains black */
  display: block;
}

/* Accessibility: hide helper text visually but keep for screen readers */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}