/* Case pages (cases/*.html): shared layout, loaded after styles.css */
.shell--case { align-items: start; }
.case {
  grid-column: 2;
  min-width: 0;
  padding: 36px 80px 64px;
  display: flex;
  flex-direction: column;
}
.case__bar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.case__bar .lang { margin-left: auto; }
/* Pinned to the viewport in the 80px gutter between the sidebar and the content column, so it never covers content */
.back { position: fixed; top: 36px; left: 296px; z-index: 30; display: block; width: 64px; height: 64px; border-radius: 50%; background: rgba(14, 0, 27, 0.88); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); transition: transform 0.2s ease-out, opacity 0.2s ease-out; }
.back:hover { transform: translateX(-4px); }
.back.is-hidden { opacity: 0; pointer-events: none; transform: translateY(-8px); }
.back img { width: 100%; height: 100%; }
.case__content { display: flex; flex-direction: column; gap: 128px; padding-top: 80px; width: 100%; max-width: 1000px; margin-inline: auto; }
.case__sections, .case__intro, .case__context { display: flex; flex-direction: column; gap: 64px; }
.case__head { display: flex; flex-direction: column; gap: 32px; }
.case__title { font-size: 64px; font-weight: 800; line-height: 1; }
.case__summary, .case__lead { font-size: 22px; }
.case__label { font-size: 22px; font-weight: 700; text-transform: uppercase; }
.case__text { font-size: 22px; font-weight: 300; }
.case__text + .case__text { margin-top: 16px; }
.case__block > .case__label { margin-bottom: 16px; }

/* Role / period / what was done */
.meta { display: flex; gap: 32px; }
.meta__item { flex: 0 1 auto; }
.meta__item--wide { flex: 1 1 0; min-width: 0; }
.meta__rule { flex: none; width: 1px; align-self: stretch; background: var(--divider); }

/* Figures: 1000px-wide artwork scaled to the column */
.fig { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1000px; }
.fig__caption { font-size: 22px; color: var(--accent-text); }
.fig img { width: 100%; height: auto; }
.fig__slot { aspect-ratio: 1000 / 561; border-radius: 32px; background: #101010; }
.fig__media img { border-radius: 32px; }

/* Staggered montage: children are placed in % of the 1000px design width */
.montage { position: relative; width: 100%; aspect-ratio: var(--ar); }
.montage > * { position: absolute; left: var(--x); top: var(--y); width: var(--w); border-radius: 32px; overflow: hidden; background: #101010; }
.fig .montage > img { width: var(--w); height: auto; }
.montage > .slot { aspect-ratio: 316.161 / 395.202; height: auto; }

/* Hover-lift stack (reusable): hovered item lifts above its neighbours, tilts toward the cursor; neighbours step aside and dim (driven by case.js).
   .lift--card adds a card shadow + glare for rectangular covers; .lift--free uses a drop-shadow for cut-out stickers. */
.lift-stack { perspective: 1200px; }
.lift { transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.45s ease-out, filter 0.45s ease-out; will-change: transform; }
.lift--card { position: absolute; display: block; }
.lift--card img { display: block; }
.lift--card::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 55%); transition: opacity 0.35s ease-out; }
@media (hover: hover) {
  .lift:hover { z-index: 10; transform: translateY(-14px) scale(1.07) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .lift--card:hover { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(184, 117, 255, 0.35); }
  .lift--card:hover::after { opacity: 1; }
  .lift--free:hover { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(184, 117, 255, 0.45)); }
  .lift.is-tracking { transition: transform 0.12s ease-out, box-shadow 0.45s ease-out, filter 0.45s ease-out; }
  .lift-stack:has(> .lift:hover) > .lift:not(:hover) { filter: brightness(0.6) saturate(0.85); transform: translate(var(--px, 0), var(--py, 0)) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) { .lift, .lift::after { transition: none; } .lift:hover { transform: none; } }

/* Gallery with arrow controls (scroll-snap, driven by case.js) */
.gallery { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1000px; }
.gallery__viewport { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__slide { flex: none; width: 100%; scroll-snap-align: start; }
.gallery__slide img { width: 100%; height: auto; border-radius: 32px; }
.gallery__nav { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.gallery__btn { display: block; width: 48px; height: 48px; padding: 0; border: 0; background: none; transition: opacity 0.2s; }
.gallery__btn img { width: 100%; height: 100%; }
.gallery__btn--prev img { transform: scaleX(-1); }
.gallery__btn:disabled { opacity: 0.3; cursor: default; }
.gallery { position: relative; }
.gallery__progress { display: flex; gap: 8px; }
.slider__bottom-nav { display: none; }
.slider__bottom-button { width: 48px; height: 48px; padding: 0; border: 0; background: transparent; position: relative; }
.slider__bottom-button::before { content: ""; position: absolute; width: 18px; height: 2px; background: white; left: 15px; top: 23px; }
.slider__bottom-button::after { content: ""; position: absolute; width: 9px; height: 9px; border-right: 2px solid white; border-top: 2px solid white; rotate: 45deg; left: 23px; top: 19.5px; }
.slider__bottom-button--prev { rotate: 180deg; }
.slider__bottom-button:disabled { opacity: 0.3; cursor: default; }
@media (min-width: 960px) {
  .case--bottom-sliders .slider__edge { display: none; }
  .case--bottom-sliders .slider__bottom-nav { display: flex; justify-content: space-between; }
}
@media (max-width: 959px) {
  .gallery__nav { position: absolute; inset-inline: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 3; }
  .gallery__btn { pointer-events: auto; border: 1px solid #ffffff66; border-radius: 50%; background: #0e001bcc; }
  .gallery:has(.gallery__progress) .gallery__nav { top: calc((100% - 60px) / 2); }
}
.fig > .gallery__nav { width: 100%; }
/* Three posters per page; wide media is fitted inside the poster slot instead of cropped */
.gallery--3 .gallery__viewport { gap: 2.576%; }
.gallery--3 .gallery__slide { width: 31.616%; }
.gallery--3 .fig__slot { aspect-ratio: 316.161 / 395.202; }
.fig__slot .fig__video--fit { object-fit: contain; }
@media (max-width: 599px) {
  .gallery--3 .gallery__viewport { gap: 16px; }
  .gallery--3 .gallery__slide { width: 100%; }
}

/* Tabs (e.g. concepts, desktop/mobile previews) */
.tabs { display: flex; gap: 8px; }
.tabs__btn { cursor: pointer; text-transform: uppercase; white-space: normal; }
/* Inactive tab: outlined variant of the shared .btn */
.tabs__btn[aria-pressed="false"] { border-color: #555; background: transparent; color: var(--gray); }
.tabs__btn[aria-pressed="false"]:hover { border-color: var(--accent-text); color: var(--white); }
/* The selected toggle keeps its filled state while hovered, so switching stays legible. */
.tabs__btn[aria-pressed="true"]:hover { border-color: var(--purple); background: var(--purple); color: var(--white); }
[data-panel][hidden] { display: none; }

@media (max-width: 959px) {
  .shell--case { display: block; max-width: 600px; margin-inline: auto; padding: 64px 16px; }
  .shell--case .sidebar { display: none; }
  .case { padding: 0; }
  .back { width: 48px; height: 48px; top: 16px; left: max(16px, calc(50% - 284px)); }
  .case__content { gap: 64px; padding-top: 32px; }
  .case__sections, .case__intro, .case__context { gap: 32px; }
  .case__head { gap: 16px; }
  .case__title { font-size: 38px; letter-spacing: -2px; }
  .case__summary, .case__lead, .case__text, .case__label, .fig__caption { font-size: 16px; }
  .meta { flex-direction: column; gap: 24px; }
  .meta__rule { width: 100%; height: 1px; align-self: auto; }
  .fig__slot, .fig__media img, .gallery__slide img { border-radius: 16px; }
  .montage > * { border-radius: 12px; }
}

/* Phone preview figure (mobile tab of site cases) */
.fig--phone { width: 261.15px; max-width: 100%; }
.phone-shot { position: relative; aspect-ratio: 261.15 / 568.806; border-radius: 30px; overflow: hidden; background: #101010; }
.phone-shot img { width: 100%; height: 100%; object-fit: cover; }
.phone-shot::after { content: ""; position: absolute; top: 6.97px; left: 85.09px; width: 89.567px; height: 22.392px; border-radius: 72px; background: #000; }
.fig__media--site { aspect-ratio: 1016 / 569; overflow: hidden; border-radius: 32px; }
.fig__media--site img { height: 100%; object-fit: cover; border-radius: 0; }
.case__lead { color: var(--accent-text); }
.meta__item .case__label { margin-bottom: 16px; }
.case__tabs { margin-top: 0; }
@media (max-width: 959px) {
  .fig__media--site { border-radius: 16px; }
  .phone-shot { border-radius: 24px; }
}

.case__summary--lead { margin-top: 16px; }

@media (max-width: 959px) {
  .fig--phone { margin-inline: auto; }
  .tabs__btn { flex: 1; }
}

/* Cropped sprite: image positioned inside an overflow-hidden box (percentages from the Figma crop) */
.crop { position: relative; overflow: hidden; flex: none; }
.crop > img { position: absolute; max-width: none; }
.row { display: flex; gap: 1.6%; width: 100%; align-items: flex-start; }
.row > * { min-width: 0; }
.row img { height: auto; }
.rounded { border-radius: 32px; overflow: hidden; }

/* Phone mockups with conversation patches (Telegram usage) */
.phones { display: flex; gap: 32px; flex-wrap: wrap; }
.tg { position: relative; width: 261.291px; max-width: 100%; aspect-ratio: 261.291 / 569; }
.tg > * { position: absolute; display: block; max-width: none; }
.tg__screen { background: #080808; }
.tg__patch { background: #090908; }
@media (max-width: 959px) {
  .rounded { border-radius: 16px; }
  .phones { flex-direction: column; }
}

/* Telegram phone screens: one phone per slider slide, centred */
.slider__phones { display: flex; justify-content: center; }
.slider__phones .tg-phone { width: min(100%, 360px); }
.tg-phone { position: relative; aspect-ratio: 342.443 / 745.869; border-radius: 30px; overflow: hidden; background: #101010; }
.tg-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tg-phone::after { content: ""; position: absolute; top: 1.2%; left: 32.6%; width: 34.3%; height: 3.9%; border-radius: 72px; background: #000; }
@media (max-width: 959px) {
  .tg-phone { border-radius: 24px; }
}

/* Grid of small native-size artwork (emoji) */
.emoji-grid { display: grid; grid-template-columns: repeat(3, 100px); gap: 40px; }
.emoji-grid img { width: 100px; height: 100px; }

/* Numbered direction tabs */
.tabs--numbers { gap: 32px; }
.tabs--numbers .tabs__btn { width: 48px; padding: 0; }
.direction { display: flex; align-items: center; gap: 32px; }
.direction__avatar { width: 248px; height: 248px; border-radius: 50%; object-fit: cover; flex: none; }
.swatches { display: flex; gap: 16px; }
.swatch { width: 136px; height: 136px; border-radius: 32px; background: var(--c); flex: none; }
.direction__note { width: 209px; font-size: 22px; font-weight: 700; }
.device-row { display: flex; gap: 1.6%; width: 100%; align-items: flex-start; }
.device-row .desk { flex: 793.562 1 0; aspect-ratio: 793.562 / 414.654; border-radius: 12px; background: #101010; }
.device-row .mob { flex: 190.138 1 0; aspect-ratio: 190.138 / 414.135; border-radius: 16px; background: #101010; position: relative; }
.device-row .mob::after { content: ""; position: absolute; top: 1.2%; left: 32.6%; width: 34.3%; height: 3.9%; border-radius: 72px; background: #000; }
.device-row--video { align-items: flex-start; }
.device-row--video .desk { aspect-ratio: 16 / 9; overflow: hidden; }
.device-row--video .mob { flex-basis: 0; flex-grow: 205.4; aspect-ratio: 1320 / 2868; overflow: hidden; }
.device-row--video .mob::after { display: none; }
.fig__slot { overflow: hidden; }
.video-frame { position: relative; }
.video-play {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 12px;
  background: var(--black);
  color: var(--white);
  font: inherit;
  cursor: pointer;
}
.video-play[hidden] { display: none; }
.fig__slot video, .phone-shot video, .device-row--video video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (max-width: 959px) {
  .direction { flex-direction: column; align-items: flex-start; gap: 24px; }
  .direction__avatar { width: 160px; height: 160px; }
  .swatch { width: 96px; height: 96px; border-radius: 24px; }
  .direction__note { width: auto; font-size: 16px; }
  .tabs--numbers .tabs__btn { flex: none; }
}

.meta__item:not(.meta__item--wide) { max-width: 264px; }
.fig .direction__avatar { width: 248px; height: 248px; }
@media (max-width: 959px) {
  .fig .direction__avatar { width: 160px; height: 160px; }
  .meta__item:not(.meta__item--wide) { max-width: none; }
}

.case__stack { display: flex; flex-direction: column; gap: 64px; }
@media (max-width: 959px) { .case__stack { gap: 32px; } }

/* ---------- Direction switcher: animated stage + sliding tab thumb ---------- */
.tabs--numbers { position: relative; }
.tabs--numbers .tabs__btn { position: relative; z-index: 1; transition: color 0.3s, border-color 0.3s; }
.tabs--numbers .tabs__btn[aria-pressed="true"] { background: transparent; border-color: transparent; }
.tabs__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 64px;
  background: var(--purple);
  will-change: transform;
}
.tabs__thumb.is-ready { transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.5, 1), width 0.6s cubic-bezier(0.34, 1.4, 0.5, 1); }

.dir-stage { display: grid; --dir: 1; }
.dir-stage > [data-panel] { grid-area: 1 / 1; min-width: 0; }
.dir-stage > [data-panel].is-leaving { pointer-events: none; animation: dir-out 0.26s cubic-bezier(0.4, 0, 1, 1) both; }
.dir-stage > [data-panel]:not([hidden]):not(.is-leaving) .direction__avatar {
  animation: dir-avatar 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}
.dir-stage > [data-panel]:not([hidden]):not(.is-leaving) .swatch {
  animation: dir-swatch 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
  animation-delay: calc(0.18s + var(--n, 0) * 0.08s);
}
.dir-stage > [data-panel]:not([hidden]):not(.is-leaving) .swatch:nth-child(2) { --n: 1; }
.dir-stage > [data-panel]:not([hidden]):not(.is-leaving) .swatch:nth-child(3) { --n: 2; }
.dir-stage > [data-panel]:not([hidden]):not(.is-leaving) .direction__note { animation: dir-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.42s both; }
.dir-stage > [data-panel]:not([hidden]):not(.is-leaving) .fig__caption { animation: dir-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
@keyframes dir-out { to { opacity: 0; transform: translateX(calc(var(--dir) * -48px)); } }
@keyframes dir-avatar {
  from { opacity: 0; transform: translateX(calc(var(--dir) * 56px)) scale(0.6) rotate(calc(var(--dir) * -16deg)); box-shadow: 0 0 0 0 var(--black), 0 0 0 0 var(--tone); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; box-shadow: 0 0 0 6px var(--black), 0 0 0 9px var(--tone); }
}
@keyframes dir-swatch {
  from { opacity: 0; transform: translateX(calc(var(--dir) * 40px)) scale(0.6); }
  to { opacity: 1; transform: none; }
}
@keyframes dir-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.direction__avatar { box-shadow: 0 0 0 6px var(--black), 0 0 0 9px var(--tone, transparent); }

/* ---------- Slider (Основной «Колосок») ---------- */
.slider { overflow-anchor: none; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1000px; --dir: 1; }
.slider__stage {
  position: relative;
  display: grid;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  overflow-anchor: none;
  contain: layout paint;
  user-select: none;
  -webkit-user-select: none;
}
.slider__stage.is-ready { transition: height 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.slider__stage img { -webkit-user-drag: none; }
.slider__edge {
  position: absolute;
  inset-block: 0;
  z-index: 2;
  width: clamp(60px, 16%, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: white;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.slider__edge--prev { left: 0; --edge-direction: 1; }
.slider__edge--next { right: 0; --edge-direction: -1; }
.slider__edge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(12 8 24 / 65%), transparent);
  transform: scaleX(var(--edge-direction));
  opacity: 0.55;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.slider__edge-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  background: rgb(20 16 32 / 72%);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgb(0 0 0 / 45%);
  transition: background 0.25s, border-color 0.25s, translate 0.3s, scale 0.2s;
}
.slider__edge-icon::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  rotate: 45deg;
}
.slider__edge--prev .slider__edge-icon::after { rotate: -135deg; }
.slider__edge:not(:disabled):hover::before,
.slider__edge:not(:disabled):focus-visible::before { opacity: 1; }
.slider__edge:not(:disabled):hover .slider__edge-icon,
.slider__edge:not(:disabled):focus-visible .slider__edge-icon { background: #4d0095; border-color: var(--accent-text); translate: calc(var(--edge-direction) * -4px) 0; }
/* One gentle nudge on the arrows when the slider scrolls into view, so the swipe is discoverable */
.slider.is-in .slider__edge:not(:disabled) .slider__edge-icon { animation: edge-nudge 1.4s ease-in-out 0.8s 2; }
@keyframes edge-nudge { 0%, 100% { translate: 0 0; } 40% { translate: calc(var(--edge-direction) * -10px) 0; } }
.slider__edge:not(:disabled):active .slider__edge-icon { scale: 0.88; }
.slider__edge:disabled { visibility: hidden; cursor: default; }
.slider__edge:focus-visible { outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  .slider__edge::before, .slider__edge-icon { transition: none; }
}
.slider__slide { grid-area: 1 / 1; align-self: start; min-width: 0; display: flex; flex-direction: column; gap: 16px; visibility: hidden; pointer-events: none; }
.slider__slide.is-active { visibility: visible; pointer-events: auto; animation: slide-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slider__slide.is-leaving { visibility: visible; animation: slide-out 0.4s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes slide-in { from { transform: translateX(calc(var(--dir) * 7%)); } to { transform: none; } }
@keyframes slide-out { to { opacity: 0; transform: translateX(calc(var(--dir) * -7%)); } }

/* staggered reveal of every tile; images settle from a slight zoom */
.slider__slide.is-active [data-rv] { animation: rv-in 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.12s + var(--i, 0) * 0.06s); }
.slider__slide.is-active [data-rv] img { animation: rv-zoom 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.12s + var(--i, 0) * 0.06s); }
.slider:not(.is-in) .slider__slide.is-active { animation: none; }
.slider:not(.is-in) .slider__slide.is-active [data-rv], .slider:not(.is-in) .slider__slide.is-active [data-rv] img { animation: none; opacity: 0; }
@keyframes rv-in { from { opacity: 0; transform: translateY(32px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes rv-zoom { from { scale: 1.12; } to { scale: 1; } }

.crop-box { position: relative; overflow: hidden; width: 100%; border-radius: 12px; background: var(--line); }
.crop-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slider__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5%; }
.slider__posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 2.094%; }
.post { position: relative; aspect-ratio: 234.293 / 318.041; border-radius: 3px; overflow: hidden; background: var(--line); }
.post img { position: absolute; display: block; max-width: none; }
.post__frame { height: 102.98%; left: -3.19%; top: -2.98%; width: 107.45%; }
.post__img { left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.slider__pdfs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 1%; align-items: start; }
.pdf { overflow: hidden; border-radius: 8px; background: var(--line); }
.pdf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdf--tall { aspect-ratio: 242.571 / 431.238; }
.pdf--a4 { aspect-ratio: 243 / 343; }

/* These artwork containers already reserve their height through aspect-ratio.
   Keep slider stages and dynamically measured panels outside this containment. */
.montage, .crop[style*="aspect-ratio"], .crop-box[style*="aspect-ratio"],
.post, .pdf--tall, .pdf--a4 {
  content-visibility: auto;
  contain-intrinsic-size: auto 1px;
}

.slider__bars { display: flex; gap: 8px; }
.slider__bar { position: relative; flex: 1; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.slider__bar::before, .slider__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.slider__bar::before { background: #333; }
.slider__bar::after { background: var(--accent-text); transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.slider__bar.is-done::after { transform: scaleX(1); }
.slider__bar:hover::before { background: #555; }
.slider__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.slider__count { margin: 0; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--gray); white-space: nowrap; }
.slider__num { display: inline-block; color: var(--white); font-weight: 700; }

@media (max-width: 959px) {
  .slider__slide { gap: 12px; }
  .slider__posts, .slider__pdfs { grid-template-columns: repeat(2, 1fr); gap: 12px 2.5%; }
  .slider__count { font-size: 16px; }
  .emoji-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .emoji-grid img { width: 100%; height: auto; aspect-ratio: 1; }
  .slider__thumbs { gap: 1%; }
  .crop-box, .fig__slot { border-radius: 8px; }
  .pdf { border-radius: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .tabs__thumb.is-ready, .slider__stage.is-ready, .slider__bar::after { transition: none; }
  .dir-stage *, .dir-stage > [data-panel], .slider__slide, .slider__slide [data-rv], .slider__slide [data-rv] img { animation: none !important; }
  .slider:not(.is-in) .slider__slide.is-active [data-rv] { opacity: 1; }
}

/* Avatar ring (9px box-shadow) takes room so it doesn't touch tabs, caption or the column edge */
.direction { padding: 9px; }
.fig > .dir-stage { margin-top: 16px; }