/* Scroll reel: the site's original reviews remain available without JavaScript. */
.scroll-reel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ecd9c9;
  border-radius: 20px;
  background: #fff8f2;
  box-shadow: inset 0 2px 0 #fff;
  outline-offset: 5px;
}
.reel-portraits {
  height: 240px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.reel-columns { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.reel-track { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.reel-ready .reel-track { transition: transform 800ms cubic-bezier(.65,0,.35,1); }
.reel-cell { width: 121.333333px; height: 121.333333px; flex-shrink: 0; border-radius: 12px; border: 1px solid #ecdccf; background: linear-gradient(#fae9da, #fffaf6); box-shadow: inset 0 2px 0 #fff; filter: blur(1px); }
.reel-featured { position: relative; overflow: hidden; filter: none; border: 0; box-shadow: 0 12px 24px #75451f30, inset 0 1px 0 #fff; }
.reel-featured img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.reel-featured::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 30%, #ffd4a854 50%, transparent 70%); mix-blend-mode: overlay; pointer-events: none; }
.reel-content { padding: 1.6rem 3.2rem 3.2rem; display: flex; flex: 1; min-width: 0; flex-direction: column; }
.reel-quote-mark { font-family: Georgia, serif; font-size: 7rem; height: 5rem; line-height: 1; color: #cf711f; }
.reel-stage { min-height: 215px; }
.reel-review { margin: 0; }
.reel-review blockquote { font-size: 2.2rem; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; color: #333; }
.reel-review figcaption { margin-top: 2rem; font-size: 1.6rem; color: #6f6f6f; }
.reel-word { display: inline-block; white-space: nowrap; }
.reel-char { display: inline-block; opacity: 0; transform: translateY(12px); animation: scroll-reel-char-rise 450ms cubic-bezier(.22,1,.36,1) forwards; }
.reel-exiting { animation: scroll-reel-exit 240ms ease forwards; }
.reel-exiting .reel-char { animation: none; opacity: 1; transform: none; }
.reel-controls { display: flex; gap: 1rem; align-items: center; margin-top: 2.4rem; }
.reel-controls button { width: 4.4rem; height: 4.4rem; border: 1px solid #cf711f55; border-radius: 50%; color: #9c4e0b; background: transparent; font-size: 2rem; cursor: pointer; transition: background 180ms, transform 180ms; }
.reel-controls button:hover:enabled { background: #fae5d3; transform: scale(1.06); }
.reel-controls button:disabled { opacity: .3; cursor: default; }
.reel-controls button:focus-visible, .scroll-reel:focus-visible { outline: 3px solid #cf711f; outline-offset: 4px; }
.reel-position { margin-left: auto; font-size: 1.4rem; color: #6f6f6f; }
@keyframes scroll-reel-char-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes scroll-reel-exit { to { opacity: 0; transform: translateY(-12px); } }
@media (min-width: 1350px), (min-width: 700px) and (max-width: 944px) {
  .scroll-reel { flex-direction: row; min-height: 350px; }
  .reel-portraits { width: 42%; height: auto; flex-shrink: 0; }
  .reel-content { padding: 3.2rem 2.4rem; }
  .reel-stage { min-height: 225px; }
  .reel-controls { margin-top: auto; padding-top: 2rem; }
}
@media (max-width: 400px) {
  .reel-content { padding: 1.6rem 2rem 2.4rem; }
  .reel-review blockquote { font-size: 2rem; }
  .reel-stage { min-height: 235px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-ready .reel-track { transition: none; }
  .reel-char { animation: none; opacity: 1; transform: none; }
  .reel-exiting { animation: none; }
  .reel-controls button { transition: none; }
}