/* /my-photos/ — one person's own photographs.

   ALMOST NOTHING IS HERE ON PURPOSE. The grid, the tiles and the photo viewer
   are albums.css; the year headings are people.css; the head band, the section
   rhythm and the nav are the site shell. What is left is this page's own head
   band accent and its two waiting screens, and that is all this file may ever
   grow into — a third copy of the photo grid is exactly what the shared
   stylesheets exist to prevent. */

/* The count, in the mono voice every other meta line on this site uses, and in
   gold because it is the one piece of this band that is about THIS person.
   THE BAND IS WARM OAK, NOT INK: `dark-chapter on-dark` on this site is a
   deeper paper tone (styles.css) and its text stays ink — a white-opacity
   value here is invisible, which is exactly how this line first shipped. */
.my-photos-page .mp-count {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.my-photos-page .mp-count[hidden] { display: none; }

.my-photos-page .mp-body { padding-top: 40px; }

/* The waiting screens. Generous, quiet, centred — a person who is not in the
   archive yet is the FIRST thing some youths will ever see here, so it has to
   read as a warm "soon", never as an empty result set. */
.my-photos-page .mp-wait {
  max-width: 34rem;
  margin: 0 auto;
  padding: 44px 0 56px;
  text-align: center;
}
.my-photos-page .mp-wait[hidden] { display: none; }
.my-photos-page .mp-wait-big {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.my-photos-page .mp-wait-line {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--steel);
}

/* The warm one gets a hairline card and a faint accent wash, so "check back
   soon" sits on something rather than floating in white space. */
.my-photos-page .mp-warm {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px 24px 44px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--ink-rgb), 0.03), transparent 70%),
    var(--paper);
}

.my-photos-page .mp-door {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: none;
  transition: transform var(--t-fast, 150ms) var(--ease, cubic-bezier(.4, 0, .2, 1)),
              opacity var(--t-fast, 150ms) var(--ease, cubic-bezier(.4, 0, .2, 1));
  touch-action: manipulation;
}
.my-photos-page .mp-door .arr {
  display: inline-block;
  transition: transform var(--t-fast, 150ms) var(--ease, cubic-bezier(.4, 0, .2, 1));
}
@media (hover: hover) {
  .my-photos-page .mp-door:hover .arr { transform: translateX(2px); }
}
.my-photos-page .mp-door:active { transform: scale(0.97); opacity: 0.85; }
.my-photos-page .mp-door:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .my-photos-page .mp-door,
  .my-photos-page .mp-door .arr { transition: none; }
  .my-photos-page .mp-door:active { transform: none; }
}

/* Phones first: the head band tightens and the waiting card loses its side
   padding before the words start wrapping badly. */
@media (max-width: 560px) {
  .my-photos-page .mp-body { padding-top: 28px; }
  .my-photos-page .mp-wait { padding: 30px 0 40px; }
  .my-photos-page .mp-warm { padding: 32px 18px 34px; }
  .my-photos-page .mp-wait-big { font-size: 21px; }
}