/* The static gallery remains readable if JavaScript is unavailable. */
.fablematics__visual {
  flex-direction: column;
  gap: 22px;
  padding: 42px 0 34px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #3c5145 0, #1e3028 38%, #101b17 78%);
}
.story-flow { width: 100%; min-width: 0; text-align: center; }
.story-flow__intro { margin: 0 24px 16px; color: #d4ddcf; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.story-flow__stage {
  display: flex;
  gap: 18px;
  padding: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.story-flow__cover {
  position: relative;
  flex: 0 0 65%;
  max-width: 238px;
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid #f3e5c659;
  border-radius: 10px;
  background: #14231f;
  color: #fff5dc;
  box-shadow: 0 22px 35px #0007;
  text-align: left;
  scroll-snap-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.story-flow__cover img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.story-flow__cover::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 3px 0 5px #fff2; pointer-events: none; }
.story-flow__subject {
  position: absolute;
  top: 15px;
  left: 14px;
  max-width: calc(100% - 28px);
  padding: 6px 9px;
  border: 1px solid #ffffff70;
  border-radius: 5px;
  background: var(--subject-color, #243b32);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
}
.story-flow__title {
  position: absolute;
  inset: auto 0 0;
  padding: 55px 17px 22px;
  background: linear-gradient(transparent, #08120ded 48%, #08120d);
  font-family: var(--font-display);
  font-size: clamp(23px, 2.4vw, 31px);
  font-weight: 400;
  line-height: 1.07;
  text-wrap: balance;
}
.story-flow__controls, .story-flow__hint, .story-flow__explore { display: none; }
.story-flow.is-ready .story-flow__stage {
  position: relative;
  display: block;
  height: clamp(310px, 45vw, 416px);
  padding: 0;
  overflow: clip;
  scroll-snap-type: none;
  perspective: 1000px;
  touch-action: pan-y;
  cursor: grab;
}
.story-flow.is-ready.is-dragging .story-flow__stage { cursor: grabbing; }
.story-flow.is-ready .story-flow__cover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(58%, 238px);
  max-width: none;
  z-index: var(--depth);
  transform: translate(-50%, -50%) translateX(var(--shift)) rotateY(var(--turn)) scale(var(--scale));
  opacity: var(--opacity);
  visibility: visible;
  transition: transform 460ms cubic-bezier(.22,.75,.22,1), opacity 300ms, visibility 460ms;
}
.story-flow.is-ready .story-flow__cover[data-distant] { visibility: hidden; pointer-events: none; }
.story-flow.is-ready .story-flow__cover[aria-current="true"] { border-color: #f5dfacb3; box-shadow: 0 24px 36px #0009, 0 0 35px #e9d79a0c; }
.story-flow.is-ready .story-flow__controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 10px 24px 0; }
.story-flow__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #9cab8d70;
  border-radius: 50%;
  background: #e7edc909;
  color: #f3e9cb;
  cursor: pointer;
  transition: background 180ms, border-color 180ms;
}
.story-flow__arrow:hover { background: #e7edc91c; border-color: #e7d7b3; }
.story-flow__arrow svg { width: 18px; height: 18px; }
.story-flow__count { min-width: 62px; color: #e1dcc9; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.story-flow.is-ready .story-flow__hint { display: block; margin: 13px 20px 16px; color: #aab9ab; font-size: 11px; }
.story-flow.is-ready .story-flow__explore { display: inline-flex; align-items: center; min-height: 44px; color: #f1d5a4; font-size: 13px; text-underline-offset: 5px; text-decoration: underline; }
.story-flow button:focus-visible, .story-flow__stage:focus-visible { outline: 3px solid #f5d69a; outline-offset: -4px; }
.story-flow__announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  .fablematics__visual { padding-top: 30px; padding-bottom: 24px; }
  .story-flow__intro { margin-bottom: 8px; }
  .story-flow__title { font-size: clamp(23px, 6.4vw, 30px); padding: 48px 14px 18px; }
  .story-flow__subject { top: 12px; left: 12px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-flow.is-ready .story-flow__cover, .story-flow__arrow { transition: none; }
}