.work {
  --k: min(calc((100vw - 240px) / 1352), calc((100svh - var(--hdr) - 40px) / 1023));
  scroll-margin-top: var(--hdr);
  padding-top: 24px;
  padding-bottom: 42px;
}
.work-stage {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  column-gap: 28px;
  align-items: center;
  width: calc(1352 * var(--k) + 168px);
  max-width: calc(100% - 64px);
  margin: 0 auto;
}
.work-head {
  width: calc(1352 * var(--k));
  height: 74px;
  margin: 0 auto;
  padding: 0 0 0;
  align-items: flex-start;
}
.work-label {
  left: 0;
  top: 0;
  font-size: clamp(28px, 2.8vw, 42px);
}
.work-count { margin: 5px 0 0; font-size: 18px; letter-spacing: .02em; }
.work-stage > .work-deck { width: 100%; margin: 0; }
.work-topnav > .work-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #800521;
  box-shadow: none;
  transform: none;
  transition: color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.work-topnav > .work-btn::before { inset: 0; }
.work-topnav > .work-btn svg {
  width: 32px;
  height: 20px;
  stroke-width: 1.65;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1);
}
.work-topnav > .work-btn:focus-visible { outline: 1px solid #800521; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .work-topnav > .work-btn:hover { color: #440315; transform: none; }
  .work-topnav > .work-prev:hover svg { transform: translateX(-4px); }
  .work-topnav > .work-next:hover svg { transform: translateX(4px); }
}
@media (max-width: 699px) {
  .work { --gw: calc(100vw - 120px); --sw: calc(var(--gw) * .86); padding-top: 22px; padding-bottom: 34px; }
  .work-head { width: calc(100% - 104px); height: 58px; padding: 0; }
  .work-label { position: static; font-size: 25px; letter-spacing: -.04em; padding: 0; }
  .work-count { font-size: 14px; margin-top: 5px; }
  .work-stage { width: calc(100% - 24px); max-width: none; grid-template-columns: 32px minmax(0, 1fr) 32px; column-gap: 8px; }
  .work-topnav > .work-btn { width: 32px; height: 48px; }
  .work-topnav > .work-btn svg { width: 24px; height: 15px; }
  .work-stage > .work-deck { width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .work-topnav > .work-btn, .work-topnav > .work-btn svg { transition: none; } }

.work-stage { display: block; width: calc(1352 * var(--k)); max-width: calc(100% - 64px); }
.work-topnav { display: flex; align-items: center; gap: 12px; height: 40px; margin: -3px 0 0 auto; }
.work-topnav > .work-btn { width: 40px; height: 40px; }
.work-topnav .work-count { margin: 0; }
@media (max-width: 699px) {
  .work { --gw: calc(100vw - 72px); }
  .work-head, .work-stage { width: calc(100% - 40px); max-width: none; }
  .work-head { align-items: flex-start; }
  .work-label { font-size: 24px; }
  .work-topnav { gap: 6px; height: 34px; margin-top: -3px; }
  .work-topnav > .work-btn { width: 30px; min-width: 30px; height: 38px; }
  .work-topnav > .work-btn svg { width: 24px; height: 15px; }
}