.work-section {
  position: relative;
  background: var(--color-background);
  overflow-x: clip;
}

html.has-project-gestures { overscroll-behavior-x: none; }

#work.is-project-scene .work-stage {
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
}

#work.is-project-scene .projects-grid {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

#work.is-project-scene .project-card img { -webkit-user-drag: none; }
#work.is-project-scene .work-stage.is-dragging,
#work.is-project-scene .work-stage.is-dragging .project-card { cursor: grabbing; }

.work-stage {
  padding-block: 96px 112px;
}

.work-section .section-heading { justify-content: center; text-align: center; }
.work-section #work-title { width: 100%; }

.project-window {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid #d5d7db;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 36px #1b1d2010;
  transform-origin: 50% 50%;
}

.browser-toolbar {
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
  gap: 16px;
  height: 38px;
  padding-inline: 12px;
  background: linear-gradient(#f6f6f8, #e9eaed);
  border-bottom: 1px solid #d9dce0;
}

.browser-controls { display: flex; gap: 5px; }
.browser-controls i { width: 8px; height: 8px; border-radius: 50%; background: #ff6058; box-shadow: inset 0 0 0 1px #0000000c; }
.browser-controls i:nth-child(2) { background: #febc2e; }
.browser-controls i:nth-child(3) { background: #28c840; }
.browser-address { padding: 2px 12px; border-radius: 5px; background: #ffffffb3; text-align: center; color: #626870; font-size: 10px; line-height: 18px; }
.browser-tabs { justify-self: end; width: 10px; height: 10px; border: 1px solid #9298a0; border-radius: 2px; box-shadow: -3px -3px 0 -1px #eceef1, -3px -3px 0 0 #9298a0; }
.project-caption { display: block; width: 100%; }
.project-caption[hidden] { display: none; }
.project-window .project-cover { aspect-ratio: 16 / 10; }
.project-window .pyakh-cover { background: #e7eddf; }
.project-window .pyakh-cover img { object-fit: cover; object-position: top; }
.project-window .website-cover img { object-position: top; }

.archive-cover {
  container-type: inline-size;
  flex-direction: column;
  gap: clamp(16px, 3vw, 36px);
  padding: 8%;
  background: var(--color-accent);
  color: #fff;
  text-align: center;
  transition: background .3s;
}
.archive-headline {
  display: block;
  font-size: clamp(28px, 13cqi, 88px);
  font-weight: 600;
  line-height: 1.02;
}
.archive-headline > span { display: block; }
.archive-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.3cqi 5cqi;
  border: 1px solid #ffffff80;
  border-radius: 100px;
  font-size: clamp(10px, 2.6cqi, 16px);
  line-height: 1.5;
  transition: background .3s, border-color .3s;
}
.project-archive:is(:hover, :focus-visible) .archive-cover { background: var(--color-accenthover); }
.project-archive:is(:hover, :focus-visible) .archive-action { background: #ffffff14; border-color: #fff; }

.is-project-scene .work-stage {
  --project-width: min(58vw, calc((100svh - 330px) * 1.55), 760px);
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 520px;
  padding-block: var(--anchor-offset) 32px;
  overflow: visible;
}

.is-project-scene .section-heading { position: relative; z-index: 5; flex: none; margin-bottom: 24px; }
.is-project-scene .section-heading h2 { font-size: clamp(32px, 3.2vw, 46px); }
.is-project-scene .projects-grid {
  position: relative;
  z-index: 1;
  display: block;
  flex: 1;
  min-height: 0;
  margin-top: 18px;
  margin-inline: calc(-1 * var(--page-gutter));
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}

.is-project-scene .project-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--project-width);
  padding: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.is-project-scene .project-window { box-shadow: 0 24px 60px -16px #1b1d2040, 0 2px 6px #1b1d201a; }
.is-project-scene .browser-toolbar { grid-template-columns: 68px 1fr 68px; height: 42px; padding-inline: 16px; }
.is-project-scene .browser-controls { gap: 7px; }
.is-project-scene .browser-controls i { width: 10px; height: 10px; }
.is-project-scene .browser-address { font-size: 11px; line-height: 20px; }
.is-project-scene .project-caption { margin-top: 28px; text-align: center; }
.is-project-scene .project-title { justify-content: center; margin-top: 0; }
.is-project-scene .project-title strong { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.3; }
.is-project-scene .project-meta { display: block; font-family: Geologica, sans-serif; font-size: 13px; line-height: 1.6; letter-spacing: 0; }
.is-project-scene .project-card:hover .project-cover > img { transform: none; }

/* The home gallery uses the whole stage, with room around its centred title. */
#work.is-project-scene .work-stage {
  --project-width: min(68vw, calc((100svh - 150px) * 1.45), 920px);
  position: relative;
  padding-block: 0;
}
#work.is-project-scene .section-heading {
  position: absolute;
  top: var(--anchor-offset);
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  pointer-events: none;
}
#work.is-project-scene .projects-grid { margin-block: 0; }
#work.is-project-scene .project-archive::after {
  content: "";
  display: block;
  height: calc(28px + clamp(22px, 2.1vw, 30px) * 1.3 + 8px + 20.8px);
}

@media (max-width: 767px) {
  .work-stage { padding-block: 64px 72px; }
  .is-project-scene .work-stage {
    --project-width: min(82vw, calc((100svh - 310px) * 1.5), 560px);
    padding-block: var(--anchor-offset) 24px;
  }
  .is-project-scene .section-heading { gap: 8px; margin-bottom: 20px; }
  .is-project-scene .projects-grid { margin-inline: calc(-1 * var(--page-gutter)); perspective: 1000px; perspective-origin: 50% 45%; }
  .is-project-scene .project-caption { margin-top: 28px; }
  .is-project-scene .project-title strong { font-size: 24px; }
  .is-project-scene .project-meta { font-size: 11px; }
  .is-project-scene .browser-toolbar { grid-template-columns: 44px 1fr 44px; gap: 8px; height: 32px; padding-inline: 10px; }
  .is-project-scene .browser-controls { gap: 4px; }
  .is-project-scene .browser-controls i { width: 7px; height: 7px; }
  .is-project-scene .browser-address { font-size: 9px; line-height: 16px; }
  #work.is-project-scene .work-stage { --project-width: min(82vw, calc((100svh - 280px) * 1.45), 560px); }
  #work.is-project-scene .project-archive::after { height: calc(28px + 31.2px + 8px + 17.6px); }
}

@media (max-width: 359px) {
  .browser-toolbar { grid-template-columns: 40px 1fr 20px; gap: 8px; }
}