/* =========================================================================
   PAGES: profile picker + wishlist
   ========================================================================= */

/* ---- Landing: the painting + four names ------------------------------
   The painting is fitted to the screen's height and centred; the sides are
   cropped (object-fit: cover), never squashed. On very wide, short screens
   cover crops a little top and bottom instead, so there's never a gap.     */
.cover {
  position: relative; height: 100vh; height: 100dvh; overflow: hidden;
  background: #E9E3D8; /* the painting's own sky, shown while it loads */
}
.cover__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transform: scale(1.02);
  transition: opacity var(--dur-4) var(--ease), transform calc(var(--dur-4) * 2) var(--ease);
}
.cover__art.is-loaded { opacity: 1; transform: none; }
/* Ink-bleed layer: each person's painting soaks through here on hover (see inkbleed.js) */
.cover__ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* a whisper of shade behind the names so white stays legible on the pale sky */
.cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 26% at 50% 44%, color-mix(in srgb, #2b1d14 22%, transparent), transparent 100%);
}

/* Names: one row on the grid, each in an equal 3-column cell (1 of 4 on phones),
   centred left to right, sitting slightly above the middle of the screen. */
.cover__names { position: absolute; z-index: 1; left: 0; right: 0; top: 44%; translate: 0 -50%; }
.cover__names .grid { align-items: center; }
.cover__names li { grid-column: span 3; text-align: center; }          /* 4 × 3 of 12 columns */
.cover__name {
  position: relative;
  font-family: var(--font-label); font-weight: var(--label-weight);
  text-transform: uppercase; letter-spacing: var(--label-tracking);
  font-size: clamp(14px, 2.3vw, 34px); line-height: 1.2;
  color: #FFFFFF;
  /* one crisp, faint drop shadow: offset, almost no blur, very light */
  text-shadow: 1px 2px 0 color-mix(in srgb, #2b1d14 18%, transparent);
  padding: 0 var(--s-2) var(--s-2);
  transition: transform var(--dur-3) var(--ease);
}
.cover__name::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 2px; height: 1.5px;
  background: #FFFFFF; transform: scaleX(0); transition: transform var(--dur-3) var(--ease);
}
.cover__name:focus-visible { box-shadow: none; }
.cover__name:focus-visible::after { transform: scaleX(1); }
.cover__name:active { transform: scale(0.97); }
@media (hover: hover) {
  .cover__name:hover { transform: translateY(-4px); }
  .cover__name:hover::after { transform: scaleX(1); }
}

/* Phones: 4 × 1 of 4 columns. Must come after the rules above to win. */
@media (max-width: 743px) {
  .cover__names li { grid-column: span 1; }
  .cover__name { font-size: clamp(11px, 3.4vw, 14px); padding-inline: 0; letter-spacing: 0.12em; }
}

/* ---- Wishlist -------------------------------------------------------------- */
.page { padding-bottom: var(--s-6); }