/* ═════ what we really measure: the readings on a drum (kit/drum.js) ═════
   The earlier landing's drum (owner, 26 Sept; MGN-4738), back on the front
   page before trust (John, 21 Oct). Without the script, and under reduced
   motion, the readings stand as a plain list; drum.js turns the list into
   the drum (.is-on) and hangs the loops round it (.drum-gifs). */
.moments { position: relative; padding: var(--beat) var(--gutter) calc(var(--beat) * 0.5); text-align: center; }
/* the title the size of the gems' and the character's */
.moments .feat-h { font-size: clamp(30px, 4vw, 58px); line-height: 0.98; }
.drum-wrap { position: relative; width: min(100%, 940px); margin: clamp(22px, 3vw, 40px) auto 0; }
/* (the drum's own faded edge is the rest of its air) */
.drum-wrap.is-on { margin-top: clamp(12px, 1.8vw, 26px); }
.drum { margin: 0; padding: 0; list-style: none; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -0.02em; }
/* the drum: one line each, as large as the width lets it stand (drum.js
   sets the long ones down to fit), the one in front in full ink and the
   rest tipping away above and below */
.drum-wrap.is-on .drum {
  --row: 1.3em;
  position: relative; height: calc(var(--row) * 3.7);
  font-size: clamp(22px, 5vw, 66px); line-height: 1.1;
  perspective: 1200px; transform-style: preserve-3d; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.drum-wrap.is-on .drum li { position: absolute; left: 0; right: 0; top: 50%; height: var(--row); margin-top: calc(var(--row) / -2); white-space: nowrap; backface-visibility: hidden; will-change: transform, opacity; }
/* the loops, round the drum rather than under it: one at a time, each whole
   at its own shape, popping in, drifting a little, and gone at the turn */
.drum-gifs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.drum-gif { position: absolute; margin: 0; overflow: hidden; background: #e9e7e2; rotate: var(--rot, 0deg); box-shadow: 0 6px 14px rgb(23 21 15 / 0.16), 0 22px 48px rgb(23 21 15 / 0.22); animation: drum-gif-in 520ms cubic-bezier(0.3, 1.5, 0.5, 1) both, drum-gif-bob var(--bob, 5s) 520ms ease-in-out infinite; }
.drum-gif video { display: block; width: 100%; height: 100%; object-fit: cover; }
.drum-gif.out { animation: drum-gif-out 380ms ease-in both; }
/* one placed for a width the window no longer has (drum.js, on a resize) */
.drum-gif.gone { visibility: hidden; }
@keyframes drum-gif-in { from { opacity: 0; scale: 0.6; } }
@keyframes drum-gif-bob { 50% { translate: 0 -8px; } }
@keyframes drum-gif-out { to { opacity: 0; scale: 0.8; } }
/* a quiet caption under the drum, not a second headline (in the page's own
   caption grey, which reads at AA: the earlier landing's lighter grey did not) */
.moments .feat-p { margin: clamp(20px, 2.2vw, 30px) auto 0; max-width: 30em; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.4; text-wrap: balance; }
@media (max-width: 640px) { .drum-wrap.is-on .drum { font-size: clamp(22px, 7.6vw, 34px); } }
/* with no room at the drum's sides (a phone, a tablet upright) the loop
   stands over it, clear of its words, left and right in turn (2026-09-30):
   room for it under the title, the tallest loop (drum.js holds these to a
   112px 4:3) and its bob */
@media (max-width: 900px) {
  .drum-wrap.is-on { margin-top: 176px; }
  .drum-gif { bottom: calc(100% + 16px); }
}