/* The illustrations float below the statement, without changing its layout. */
.hero-art-trigger { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-opening-active .hero-art-trigger { cursor: default; }
.hero-art-trigger:focus-visible { outline: 1px solid #a23829; outline-offset: 7px; border-radius: 2px; }
.hero-art-active > .hero-original, .hero-changing.hero-art-active .hero-word-visual { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; text-decoration-color: #a2382960; }
.hero-art-preview { position: fixed; z-index: 80; width: var(--hero-art-size,286px); max-width: calc(100vw - 32px); pointer-events: none; }
.hero-art-preview[hidden] { display: none; }
.hero-art-sheet { position: relative; margin: 0; padding: 6px; background: #faf9f5; border: 1px solid #d1cabd; box-shadow: 0 16px 45px #302a2026, 0 3px 8px #302a2012; opacity: 0; transform: translateY(18px) rotate(calc(var(--hero-art-tilt,-3deg) - 3deg)) scale(.94); transform-origin: 50% 60%; transition: opacity .2s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.hero-art-preview.is-visible .hero-art-sheet { opacity: 1; transform: translateY(0) rotate(var(--hero-art-tilt,-3deg)) scale(1); }
.hero-art-sheet img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #e6dfd2; opacity: 0; transition: opacity .18s ease; }
.hero-art-sheet img.is-ready { opacity: 1; }
.hero-art-sheet figcaption { display: flex; gap: 12px; align-items: baseline; padding: 10px 8px 5px; color: #625f54; }
.hero-art-number { font: 9px/1.6 var(--mono); color: #a23829; }
.hero-art-label { display: block; font: 500 10px/1.5 Arial,sans-serif; }
.hero-art-sheet small { display: block; font: 7px/1.8 var(--mono); letter-spacing: .06em; color: #858071; }
.hero-art-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid #d1cabd; border-radius: 50%; background: #faf9f5; color: #454237; font: 20px/1 Arial,sans-serif; cursor: pointer; }
.hero-art-preview.is-pinned { pointer-events: auto; }
@media print { .hero-art-preview { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .hero-art-sheet, .hero-art-sheet img { transition: none; }
  .hero-art-sheet, .hero-art-preview.is-visible .hero-art-sheet { transform: none; }
}