/* Awards and celebrity mentions — a coverflow row.
   Card width is the only measurement; pitch, depth and perspective are all
   derived from it in coverflow.js, so the whole rake scales with one number. */
.acclaim.section { background: var(--paper); padding-top: var(--band); padding-bottom: var(--band); }
.acclaim .centered-heading { margin-bottom: 4px; }

.coverflow { --cf-card: clamp(190px, 24vw, 310px); width: 100%; }
.cf-stage { position: relative; display: flex; align-items: center; justify-content: center; }

.cf-frame {
  flex: 1 1 auto; min-width: 0;
  /* Vertical padding keeps the card shadows clear of the overflow clip. */
  padding-block: 26px;
  overflow: hidden; outline: none; cursor: grab;
  /* Horizontal drag is ours; the page keeps vertical scrolling. */
  touch-action: pan-y;
}
.cf-frame:active { cursor: grabbing; }
.cf-frame:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 10px; }

.cf-track { position: relative; height: calc(var(--cf-card) * 4 / 3); transform-style: preserve-3d; user-select: none; }

.cf-card {
  position: absolute; left: 50%; top: 0;
  width: var(--cf-card); aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 18px; background: var(--sage);
  box-shadow: 0 18px 44px rgba(3, 76, 41, .18);
  will-change: transform, opacity;
}
/* Photographs here are every shape — a wide awards stage, a portrait trophy
   shot, a phone-shaped story. Cropping them to one card shape cut people's
   heads off, so the whole picture is fitted inside and a blurred copy of it
   fills the space left over. */
.cf-card img, .cf-card video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; user-select: none; -webkit-user-drag: none;
}
.cf-card .cf-fill { object-fit: cover; filter: blur(9px) saturate(1.1); transform: scale(1.12); opacity: .5; }
.cf-card .cf-main, .cf-card video { object-fit: contain; }
.cf-card video { opacity: 0; transition: opacity .25s; }
.cf-card.is-playing video { opacity: 1; }
.cf-card.is-playing .cf-main { opacity: 0; }

/* The clip plays by itself, silently, so the control is about sound rather
   than playback. It sits in the corner instead of over her face. */
.cf-card.has-video { cursor: pointer; }
.cf-sound {
  position: absolute; right: 12px; bottom: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: var(--lime);
  box-shadow: 0 6px 18px rgba(2, 58, 31, .35);
  transition: transform .25s, background-color .25s;
}
.cf-sound .icon { width: 19px; height: 19px; grid-area: 1 / 1; }
.cf-sound .icon:last-child { display: none; }
.cf-card.sound-on .cf-sound { background: var(--pink-ink); }
.cf-card.sound-on .cf-sound .icon:first-child { display: none; }
.cf-card.sound-on .cf-sound .icon:last-child { display: block; }
.cf-card.has-video:hover .cf-sound { transform: scale(1.08); }
.cf-sound:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }


.cf-arrow {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--green); display: grid; place-items: center;
  cursor: pointer; z-index: 200; transition: background .2s, color .2s;
}
.cf-arrow:hover { background: var(--green); color: var(--lime); }
.cf-arrow .icon { width: 19px; height: 19px; }
.cf-flip { transform: scaleX(-1); }

.cf-caption { text-align: center; margin: 2px 0 0; min-height: 46px; }
.cf-caption b { display: block; font-family: var(--serif); font-size: 23px; font-weight: 500; color: var(--green); }
.cf-caption span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }

.cf-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
/* The dot keeps a constant box and the bar inside it stretches, so the pill
   grows on the compositor rather than relaying out the row each time. */
.cf-dot {
  width: 24px; height: 18px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.cf-dot::before {
  content: ''; display: block; width: 9px; height: 9px; border-radius: 999px;
  background: var(--green); opacity: .28;
  transition: transform .25s, opacity .25s, background-color .25s;
}
.cf-dot.on::before { transform: scaleX(2.67); opacity: 1; background: var(--pink-ink); }

@media (max-width: 950px) {
  .acclaim.section { padding-top: var(--band); padding-bottom: var(--band); }
  .coverflow { --cf-card: clamp(180px, 34vw, 260px); }
}
@media (max-width: 700px) {
  .acclaim.section { padding-top: var(--band); padding-bottom: var(--band); }
  .coverflow { --cf-card: clamp(168px, 52vw, 230px); }
  /* The row is dragged on a phone, so the arrows are only in the way. */
  .cf-arrow { display: none; }
  .cf-frame { padding-block: 20px; }
  .cf-sound { width: 38px; height: 38px; right: 9px; bottom: 9px; }
  .cf-caption b { font-size: 20px; }
  .cf-caption span { font-size: 13px; }
}