/* Content is visible at rest. JS adds one-shot animations without hidden-state classes. */
/* The supplied mobile plate gives the sculpture a tonal ground without a new illustration. */
.mobile-stage {
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1.08;
}

.mobile-stage::before {
  position: absolute;
  inset: 10% 8% 15% 8%;
  background: var(--surface-sculpture);
  mask: url("/images/moment-ochre.svg") center / contain no-repeat;
  rotate: var(--sculpture-backdrop-tilt);
  content: "";
  pointer-events: none;
}

.mobile-figure figcaption {
  position: relative;
  inset: auto;
  width: fit-content;
  max-width: min(100% - var(--space-5) * 2, 32ch);
  margin: var(--space-4) auto 0;
  padding: var(--space-4) var(--space-3) 0;
  border-top: var(--suspension-rule);
  text-align: center;
  text-wrap: balance;
  font-family: var(--sans);
  font-size: inherit;
  font-style: normal;
  line-height: inherit;
}

.topic-link {
  position: relative;
  transition: var(--transition-attention);
}

.topic-link::after {
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--wire-width));
  left: 0;
  height: var(--wire-width);
  background: var(--rust);
  content: "";
  pointer-events: none;
  scale: 0 1;
  transform-origin: left;
  transition: var(--transition-rule);
}

.topic-link > img {
  flex-shrink: 0;
  transition: var(--transition-nudge);
}

.topic-link:focus-visible {
  color: var(--rust);
  background: var(--surface-attention);
}

.topic-link:focus-visible::after {
  scale: 1;
}

@media (hover: hover) and (pointer: fine) {
  .topic-link:hover {
    color: var(--rust);
    background: var(--surface-attention);
  }

  .topic-link:hover::after {
    scale: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .topic-link:hover > img {
      translate: var(--motion-nudge) 0;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .topic-link:focus-visible > img {
    translate: var(--motion-nudge) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topic-link,
  .topic-link::after,
  .topic-link > img {
    transition: none;
  }
}

.positioning {
  background: var(--surface-positioning);
}

.moment-suspension {
  align-self: start;
  justify-self: center;
  width: var(--suspension-piece-size);
  margin-top: var(--suspension-offset);
}

.moment-pendant {
  position: relative;
  display: block;
  padding-top: var(--suspension-height);
  transform-origin: 50% 0;
}

.moment-pendant::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--wire-width);
  height: calc(var(--suspension-height) + var(--space-3));
  background: var(--rule);
  content: "";
}

.moment-pendant::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--balance-pivot-size);
  height: var(--balance-pivot-size);
  border-radius: var(--radius-pivot);
  background: var(--ink);
  translate: -50% -50%;
  content: "";
}

.moment-pendant .moment-shape {
  position: relative;
  width: 100%;
  height: var(--suspension-piece-size);
}

.moments-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-gap);
}

.moments-heading h2 {
  margin-top: 0;
}

.moment-row {
  position: relative;
  padding: var(--space-5) 0;
  transition: var(--transition-attention);
}

.moment-row::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--balance-accent-length);
  height: var(--motion-press);
  background: var(--rust);
  content: "";
  scale: 0 1;
  transform-origin: left;
  transition: var(--transition-rule);
  pointer-events: none;
}

.moment-row:focus-within::after {
  transform: scaleX(1);
  scale: 1;
}

.moment-row:focus-within {
  background: var(--surface-attention);
}

@media (prefers-reduced-motion: no-preference) {
  /* A hanging mobile is never quite still. The beam drifts through a limited
     arc, never reaching edge-on, while each plate turns on its own wire at its
     own pace. The three periods share no common factor, so the mark never
     repeats a pose. */
  .moments-heading {
    perspective: 900px;
  }

  .moment-pendant {
    transition: var(--transition-balance);
  }

  .book-cover {
    transition: var(--transition-balance);
  }

  .moment-row:focus-within .moment-pendant {
    rotate: var(--motion-pivot);
  }

  .book-band:focus-within .book-cover {
    rotate: var(--motion-book-tilt);
  }
}

@media (hover: hover) and (pointer: fine) {
  .moment-row:hover {
    background: var(--surface-attention);
  }

  .moment-row:hover::after {
    scale: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .moment-row:hover .moment-pendant {
      rotate: var(--motion-pivot);
    }

    /* The cover stirs when the pointer reaches for any of the book's actions, the filled button or the quiet link
       (Chris, 28 Sep 2026: the tilt fired only on the button, so the homepage's quiet-link placements never showed it). */
    .book-band:has(.book-copy a:hover) .book-cover {
      rotate: var(--motion-book-tilt);
    }

  }
}

@media (max-width: 720px) {
  .moment-suspension {
    width: var(--suspension-piece-size-small);
  }

  .moment-pendant .moment-shape {
    height: var(--suspension-piece-size-small);
  }

  .moments-heading {
    display: block;
  }

}

@media (prefers-reduced-motion: reduce) {
  .moment-pendant,
  .book-cover {
    translate: none !important;
    rotate: none !important;
  }

}