.all-works-page { overflow-x: clip; }
.all-work-section { min-height: 100svh; border: 0; }
.all-work-section .work-stage { min-height: 100svh; padding-block: 32px 24px; display: flex; flex-direction: column; }
.all-work-section .projects-grid { margin-block: 24px; }
.gallery-back { align-self: center; position: relative; z-index: 5; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 10px 24px; border: 1px solid var(--color-border); border-radius: 24px; color: var(--color-textmuted); font-size: 13px; transition: border-color .2s, color .2s, background .2s; }
.gallery-back:hover { border-color: var(--color-textmuted); color: var(--color-text); background: var(--color-surface); }

.all-work-section.is-project-scene { height: 100svh; overflow: clip; }
.all-work-section.is-project-scene .work-stage { --project-width: min(64vw, calc((100svh - 200px) * 1.45), 860px); height: 100svh; min-height: 360px; padding-block: 24px; }
.all-work-section.is-project-scene .projects-grid { flex: 1; margin-block: 0; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.all-work-section :is(.projects-grid, .project-card, .gallery-back):focus-visible { outline: none; }
.all-work-section .project-card:focus-visible .project-title { color: var(--color-accent); }
.gallery-back:focus-visible { border-color: var(--color-textmuted); color: var(--color-text); background: var(--color-surface); }
.all-work-section.is-project-scene .projects-grid.is-dragging { cursor: grabbing; }
.all-work-section.is-project-scene .project-card { cursor: inherit; }
.all-work-section.is-project-scene .project-card.is-current { cursor: pointer; }
.all-work-section.is-project-scene .project-card img { -webkit-user-drag: none; }
.all-work-section.is-project-scene .project-caption { margin-top: 22px; }
.all-work-section.is-project-scene .project-title strong { font-size: clamp(22px, 2.1vw, 30px); }
.all-work-section.is-project-scene .project-meta { margin-top: 6px; }

@media (max-width: 767px) {
  .all-work-section.is-project-scene .work-stage { --project-width: min(86vw, calc((100svh - 280px) * 1.45), 560px); }
  .all-work-section.is-project-scene .projects-grid { perspective: none; transform-style: flat; }
  .all-work-section.is-project-scene .project-card {
    top: calc(50% + clamp(20px, 5svh, 44px));
    transform-style: flat;
  }
  .all-work-section.is-project-scene .project-meta { font-size: 11px; }
}

@media (max-height: 600px) {
  .all-work-section.is-project-scene .work-stage { --project-width: min(56vw, calc((100svh - 180px) * 1.45)); padding-block: 12px; }
  .all-work-section.is-project-scene .project-caption { margin-top: 12px; }
  .all-work-section.is-project-scene .project-title strong { font-size: 20px; }
  .all-work-section.is-project-scene .project-meta { font-size: 10px; }
  .gallery-back { margin-top: 4px; }
}