/* ═══════════════════════════════════════════════════════════════
   careiti-firstscreen.css — the homepage's first screen

   Two measured problems, reported from a real iPad:

     · The first section did not fit. On an iPad in portrait it ran 1380px
       against an 1180px viewport, and on a phone 1274px against 844px —
       so the section always ended below the fold, cut mid-thought.
     · Nothing said the page continued. A section that fills the screen and
       is cut off at the bottom edge with no cue reads, to someone who is
       not a confident scroller, as the whole page. This audience includes
       people for whom that is exactly the wrong assumption to invite.

   Loaded only by index.html — the marketing page has its own album layout
   and is deliberately outside the body[data-ct="app"] scope.
   ═══════════════════════════════════════════════════════════════ */

/* The opening screen is .al-track / .al-stage — the scroll-driven album
   timeline described in MASTER.md. Above 900px that track is PINNED and
   already occupies exactly one viewport (measured: 0 overflow at both
   1024x1366 and 1194x834), so it must not be touched; capping a pinned
   scroll timeline would break the sequence it drives.
   The problem lives in the band where MASTER.md removes the pin and the
   track simply stacks: 700–899px, which is precisely iPad mini (744) and
   iPad 10.9 (820) in portrait — the two devices in the report. There it ran
   1380px against an 1180px viewport. */
@media (min-width: 700px) and (max-width: 899px) {
  .al-track,
  .al-stage,
  [data-first-screen] {
    max-height: calc(100dvh - 96px);
    overflow: hidden;
  }
  .al-grid { gap: clamp(12px, 2.2vh, 28px); }

  /* The hero print was sized for a phone column. Sizing it against viewport
     height rather than width is what actually recovers the overflow — the
     section is too tall, not too wide. */
  .hero-photo { max-width: min(34vh, 400px); }
  .al-stack { gap: clamp(10px, 1.8vh, 22px); }
}

/* Short landscape below the pin threshold: height is scarcest, so the photo
   yields first — the words are what have to survive. */
@media (min-width: 700px) and (max-width: 899px) and (orientation: landscape) {
  .hero-photo { max-width: min(28vh, 320px); }
  .al-track, .al-stage, [data-first-screen] { max-height: calc(100dvh - 68px); }
}

/* ── Scroll cue ─────────────────────────────────────────────────
   A quiet, non-looping hint. MASTER.md is explicit that nothing loops
   forever, so this nudges three times and stops: enough to be noticed,
   not a permanently moving object on a page read by people with
   vestibular sensitivity. It hides itself once the reader has scrolled,
   because a cue that persists after it has been obeyed is just clutter. */
.cfs-cue {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--ink-3, #6F6355);
  font-family: var(--f-album, system-ui, sans-serif);
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
  opacity: 1;
  transition: opacity .3s;
}
.cfs-cue svg { width: 22px; height: 22px; animation: cfs-nudge 1.9s ease-in-out 3; }
.cfs-cue[hidden] { display: none; }
.cfs-cue.cfs-gone { opacity: 0; pointer-events: none; }

@keyframes cfs-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .cfs-cue svg { animation: none; }
}

@media print { .cfs-cue { display: none !important; } }