/* journey.css — the front page is the picture: today's boat under way,
   drawn live by the show's engine over the whole window. The words stand
   on the water the way the banner's do — the wordmark in ink, the day's
   numbers on plates — and nothing else is on the page. */

body[data-page="journey"] { overflow: hidden; height: 100vh; height: 100dvh; }
body[data-page="journey"] main { position: fixed; inset: 0; }

/* the engine's canvas fills the window a few pixels a dot; the fallback
   picture (no WebGL, or a document from before the live boat) sits at the
   centre whole-pixel */
.sea canvas.still { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sea canvas.live3d { position: absolute; left: 0; top: 0; }

/* the hero: under the header, on the window's centre line */
.hero {
  position: fixed; top: calc(var(--top) + 16px); left: var(--gutter); right: var(--gutter); z-index: 10;
  text-align: center; pointer-events: none;
}
.hero .word { color: var(--ink); }
/* the three numbers as one block: two up, one across, under the wordmark */
.hero .tags { display: grid; grid-template-columns: auto auto; gap: 4px; width: max-content; max-width: 100%; margin: 8px auto 0; }
.hero .tags .tag { pointer-events: auto; text-align: center; }
.hero .tags #hPeople { grid-column: 1 / -1; }
/* the hint stands at the foot of the picture, by the boat, until the first turn by hand */
.hint { position: fixed; right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); z-index: 10;
  font-weight: 500; font-size: 11px; letter-spacing: 2px; line-height: 1; padding: 17px 10px 16px; background: var(--ink); color: var(--paper); white-space: nowrap; }
.hint[hidden] { display: none; }

/* nothing published yet, or the read failed: one plate in the middle */
.empty { position: fixed; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 10;
  max-width: 420px; margin: 0 auto; padding: 16px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.empty p { font-size: 13px; }

@media (min-width: 600px) {
  .hero { top: calc(var(--top) + 10px); }
  .hero .tags { margin-top: 12px; }
}