/* Stable questions surround turning illustration panels. Scroll moves only the art. */
.idea-deck.illustration-deck {
  align-items: start;
  gap: clamp(24px, 3.5vw, 52px);
  padding: 14px 0 32px;
  perspective: none;
}
.idea-card.illustration-card {
  --art-progress: .5;
  --art-start: -3deg;
  --art-turn: 6deg;
  --art-travel: 12px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}
.illustration-card.illustration-live { --art-start: -2deg; --art-turn: 4deg; --art-travel: 8px; }
.illustration-card.illustration-belong { --art-start: -2.5deg; --art-turn: 5deg; --art-travel: 10px; }
.illustration-index {
  padding-top: 14px;
  margin-bottom: 24px;
  border-top: 1px solid #1612113d;
  color: #625a53;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .04em;
}
.illustration-card h3 {
  margin: 0 0 20px;
  font-size: clamp(27px, 2.75vw, 39px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.illustration-panel {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.illustration-panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.illustration-turner, .illustration-face, .illustration-art { display: block; }
.illustration-art { aspect-ratio: 1; background: var(--paper); }
.illustration-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform-origin: 50% 60%;
}
.illustration-back { padding: 22px 2px 0; }
.illustration-card .card-question {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
/* Without JavaScript both artwork and explanation remain in normal reading order. */
.illustration-panel.illustration-interactive {
  aspect-ratio: 1;
  perspective: 1200px;
  cursor: pointer;
}
.illustration-interactive .illustration-turner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(.2,.7,.2,1);
}
.illustration-interactive .illustration-face {
  position: absolute;
  inset: 0;
  background: var(--paper);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.illustration-interactive .illustration-art { height: 100%; }
.illustration-interactive .illustration-back {
  display: grid;
  align-items: center;
  padding: clamp(22px, 2.5vw, 38px);
  border: 1px solid #16121135;
  transform: rotateY(180deg);
}
.illustration-interactive.is-flipped .illustration-turner { transform: rotateY(180deg); }
body.motion-enabled .illustration-art img {
  transform: translate3d(0, calc((.5 - var(--art-progress)) * var(--art-travel)), 0)
    rotate(calc(var(--art-start) + var(--art-progress) * var(--art-turn)));
}
.attendance-photo {
  --stage-progress: 0;
  height: clamp(220px, 31vw, 420px);
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}
.attendance-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
body.motion-enabled .attendance-photo img { transform: scale(calc(1.03 - var(--stage-progress) * .03)); }
body.motion-paused .illustration-art img, body.motion-paused .attendance-photo img { transform: none; }
body.motion-paused .illustration-interactive .illustration-turner,
body.motion-paused .illustration-interactive .illustration-face { transform: none; transition: none; backface-visibility: visible; }
body.motion-paused .illustration-interactive .illustration-back { opacity: 0; }
body.motion-paused .illustration-interactive.is-flipped .illustration-front { opacity: 0; }
body.motion-paused .illustration-interactive.is-flipped .illustration-back { opacity: 1; }
@media (max-width: 1050px) and (min-width: 761px) {
  .idea-deck.illustration-deck { gap: 24px; }
  .illustration-card h3 { font-size: 29px; }
  .illustration-card .card-question { font-size: 15px; }
}
@media (max-width: 760px) {
  .idea-deck.illustration-deck { max-width: 440px; gap: 45px; padding: 6px 7px 20px; }
  .illustration-index { margin-bottom: 20px; }
  .illustration-card h3 { font-size: clamp(30px, 8vw, 38px); }
  .illustration-card .card-question { font-size: 17px; }
  .illustration-interactive .illustration-back { padding: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .illustration-art img, .attendance-photo img { transform: none !important; }
  .illustration-interactive .illustration-turner,
  .illustration-interactive .illustration-face { transform: none !important; transition: none !important; backface-visibility: visible; }
  .illustration-interactive .illustration-back { opacity: 0; }
  .illustration-interactive.is-flipped .illustration-front { opacity: 0; }
  .illustration-interactive.is-flipped .illustration-back { opacity: 1; }
}