/* ==========================================================================
   Work / case studies — a 3D book of cases on a huge rotating starburst.
   Desktop: open spread (image page | quote page), fanned side pages with the
   client names on their spines; pages turn with a drag (rotateY on the spine).
   ≤991px: sticky flip deck (image on top, quote below) that flips up with scroll.
   ========================================================================== */

.s-work {
  --work-half: 300rem;                 /* mobile: height of one half of the deck */
  --work-off: 6rem;                    /* mobile: stacked-page offset */
  position: relative;
  z-index: 0;
  padding: 367rem 0 317rem;            /* the dashes below the book add 50rem */
  overflow-x: clip;                    /* clip the fan + burst sideways, let the burst bleed vertically */
  -webkit-user-select: none;
  user-select: none;
}

.work__stage { position: relative; max-width: 1920rem; margin: 0 auto; padding: 0 80rem; }
.work__drag { position: relative; height: 600rem; touch-action: pan-y; }

/* ---------- Starburst (rotates with scroll) ---------- */
.work__burst {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 1320rem; height: 1320rem; margin: -660rem 0 0 -660rem;   /* the long rays clear the book top and bottom, like the reference star */
  pointer-events: none;
}
.work__burst-svg { width: 100%; height: 100%; overflow: visible; will-change: transform; }
.work__burst-svg path { fill: var(--blue); }

/* ---------- Fanned side pages (one per case, client name on the spine) ---------- */
.work__fans { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.work__fan {
  position: absolute; top: 0;
  width: 450rem; height: 600rem;
  pointer-events: auto;
  border-radius: 16rem;
}
.work__fan--d1 { z-index: 3; }
.work__fan--d2 { z-index: 2; }
.work__fan--d3 { z-index: 1; }
.work__fan--l.work__fan--d3 { left: 0; }
.work__fan--l.work__fan--d2 { left: 140rem; }
.work__fan--l.work__fan--d1 { left: 280rem; }
.work__fan--r.work__fan--d1 { right: 280rem; }
.work__fan--r.work__fan--d2 { right: 140rem; }
.work__fan--r.work__fan--d3 { right: 0; }

.work__fan-card {
  position: absolute; inset: 0; display: block;
  padding: 18rem;
  background: var(--ice);
  border-radius: 16rem;
  scale: var(--fan-scale, 1);
  transition: translate .3s cubic-bezier(.3, 1.25, .45, 1);
}
.work__fan--d1 .work__fan-card { --fan-scale: .95; }
.work__fan--d2 .work__fan-card { --fan-scale: .9; }
.work__fan--d3 .work__fan-card { --fan-scale: .85; }
.work__fan--l .work__fan-card { box-shadow: -14rem 0 40rem rgba(7, 11, 31, .35); }
.work__fan--r .work__fan-card { box-shadow: 14rem 0 40rem rgba(7, 11, 31, .35); }
.work__fan-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 12rem; pointer-events: none; }

/* the spine label: a dark vertical pill on the visible edge */
.work__spine {
  position: absolute; top: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 40rem; padding: 20rem 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  border-radius: 40rem;
  background: rgba(7, 11, 31, .78);
  color: var(--white);
  font-size: 15rem; font-weight: 700; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: letter-spacing .3s cubic-bezier(.3, 1.25, .45, 1), background-color .3s ease, color .3s ease;
}
.work__fan--l .work__spine { left: 26rem; }
.work__fan--r .work__spine { right: 26rem; }
.work__fan:hover .work__spine { letter-spacing: .2em; }
.work__fan.is-current .work__spine { background: var(--cyan); color: var(--ink); box-shadow: 0 0 0 3rem var(--ink); }
.work__fan--l:hover .work__fan-card { translate: -24rem 0; }
.work__fan--r:hover .work__fan-card { translate: 24rem 0; }
.work__fan--l.is-current .work__fan-card { translate: -14rem 0; }
.work__fan--r.is-current .work__fan-card { translate: 14rem 0; }
.work__fan:focus-visible { outline: none; }
.work__fan:focus-visible .work__fan-card { outline: 3rem solid var(--cyan); outline-offset: 4rem; }
/* the card is mostly tucked behind its neighbour, so keyboard focus also slides it out and rings the spine */
.work__fan--l:focus-visible .work__fan-card { translate: -24rem 0; }
.work__fan--r:focus-visible .work__fan-card { translate: 24rem 0; }
.work__fan:focus-visible .work__spine { box-shadow: 0 0 0 3rem var(--ink), 0 0 0 6rem var(--cyan); }

/* ---------- The book ---------- */
.work__deck {
  position: absolute; left: 50%; top: 0; z-index: 2;
  width: 900rem; height: 600rem; margin-left: -450rem;
  border-radius: 16rem;
}
.work__deck:focus { outline: none; }
.work__deck:focus-visible { outline: 3rem solid var(--cyan); outline-offset: 14rem; }
.work__book { position: relative; width: 100%; height: 100%; perspective: 1800rem; }
.work__book::before {                  /* soft drop shadow under the spread */
  content: ""; position: absolute; z-index: -1;
  left: 3%; right: 3%; top: 8%; bottom: 0;
  border-radius: 40rem;
  box-shadow: 0 60rem 110rem rgba(0, 0, 0, .5);
}
.work__sheet { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; }
.work__sheet--first { left: 0; transform-origin: 100% 50%; z-index: 1; }
.work__sheet--last { transform-origin: 0 50%; z-index: 1; }
.work__page { transform-origin: 0 50%; transform-style: preserve-3d; z-index: 10; will-change: transform; }

/* both faces of a page share the page box; the back is mirrored */
.work__face {
  position: absolute; inset: 0;
  background: var(--ice);
  color: var(--ink);
  border: 1rem solid rgba(7, 11, 31, .06);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.work__page .work__face *, .work__page .work__face::before, .work__page .work__face::after { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.work__page .work__face--back { transform: rotateY(180deg); visibility: hidden; }
.work__face--img { padding: 18rem; border-radius: 16rem 0 0 16rem; }
.work__img { width: 100%; height: 100%; object-fit: cover; border-radius: 12rem; background: var(--ice-2); }
.work__face--quote {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 18rem 28rem;
  border-radius: 0 16rem 16rem 0;
  text-align: center;
}
/* gutter shading at the spine, like a real bound book */
.work__face::before, .work__face::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none;
}
.work__face--img::before { background: linear-gradient(270deg, rgba(7, 11, 31, .3), rgba(7, 11, 31, .08) 3%, rgba(7, 11, 31, 0) 12%); }
.work__face--quote::before { background: linear-gradient(90deg, rgba(7, 11, 31, .18), rgba(7, 11, 31, .04) 3%, rgba(7, 11, 31, 0) 12%); }
/* turning shade, driven by the page angle (--shade set in work.js) */
.work__face::after { z-index: 3; background: linear-gradient(90deg, rgba(7, 11, 31, .42), rgba(7, 11, 31, .06) 70%, rgba(255, 255, 255, .12)); opacity: var(--shade, 0); }
.work__face--back::after { background: linear-gradient(270deg, rgba(7, 11, 31, .42), rgba(7, 11, 31, .06) 70%, rgba(255, 255, 255, .12)); }

/* ---------- Quote page ---------- */
.work__count { font-size: 12rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.work__count-sep { margin: 0 .15em; }
.work__content { display: flex; flex-direction: column; align-items: center; }
.work__quote {
  max-width: 380rem;
  font-family: var(--font-display);
  font-size: 40rem; line-height: 1.02; letter-spacing: .01em;
  text-transform: uppercase;
}
.work__quote em { font-style: normal; color: var(--blue); }
.work__link {
  display: inline-flex; align-items: center;
  margin-top: 28rem; padding: .2em .34em .1em;
  border-radius: 10rem;
  background: var(--ink); color: var(--cyan);
  font-family: var(--font-display); font-size: 36rem; line-height: .9; text-transform: uppercase;
  --bubble: var(--cyan); --bubble-fg: var(--ink);
  transition: color .35s ease, transform .45s var(--ease-back);
}
.work__link:hover { transform: rotate(-3deg) scale(1.06); }
.work__link.is-soon { color: var(--yellow); }
.work__link.is-soon:hover { color: var(--ink); }
.work__author { display: flex; align-items: center; gap: 12rem; margin-top: 24rem; }
.work__rating {
  display: grid; place-items: center; flex: none;
  width: 55rem; height: 55rem; border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-family: var(--font-wide); font-stretch: 150%; font-variation-settings: "wdth" 150, "wght" 500;
  font-size: 16rem; line-height: 1;
}
.work__client {
  font-family: var(--font-wide); font-stretch: 150%; font-variation-settings: "wdth" 150, "wght" 650;
  font-size: 16rem; line-height: 1.1; text-transform: uppercase; text-align: left;
}
.work__tag {
  padding: 11rem 14rem;
  border-radius: 170rem;
  background: rgba(7, 11, 31, .07);
  font-size: 12rem; font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
}

/* ---------- Prev / next on the book's outer edges + progress dashes (desktop) ---------- */
.work__arrow {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  display: grid; place-items: center;
  width: 64rem; height: 64rem; margin-top: -32rem; border-radius: 50%;
  background: var(--ice); color: var(--ink);
  box-shadow: 0 12rem 30rem rgba(7, 11, 31, .35), 0 0 0 5rem rgba(7, 11, 31, .12);
  --bubble: var(--cyan); --bubble-fg: var(--ink);
  transition: opacity .3s ease, transform .5s var(--ease-back), color .35s ease, visibility 0s linear 0s;
}
.work__arrow--prev { margin-left: -482rem; }      /* centred on the left edge of the 900rem spread */
.work__arrow--next { margin-left: 418rem; }       /* centred on the right edge */
.work__arrow svg { position: relative; width: 40%; height: 40%; transition: transform .45s var(--ease-back); }
.work__arrow:hover { transform: scale(1.1); }
.work__arrow--prev:hover svg { transform: translateX(-3rem); }
.work__arrow--next:hover svg { transform: translateX(3rem); }
/* nothing to turn that way: tuck the arrow away */
.work__arrow[aria-disabled="true"] {
  opacity: 0; transform: scale(.5); visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, transform .4s ease, visibility 0s linear .4s;
}
.work__dashes { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 8rem; margin-top: 44rem; }
.work__dash { display: block; width: 16rem; height: 6rem; border-radius: 6rem; background: rgba(212, 226, 255, .28); transition: width .5s var(--ease-out), background-color .3s ease; }
.work__dash.is-on { width: 52rem; background: var(--cyan); }

/* ---------- Legibility floors (desktop) ----------
   1rem = viewport/1920, so on 1024–1440px screens the small labels would drop to
   6–9px. Keep them readable; the pills and the rating disc grow with their text. */
@media (min-width: 992px) {
  .work__count, .work__tag { font-size: max(11px, 12rem); }
  .work__tag { padding: max(6px, 11rem) max(9px, 14rem); }
  .work__client { font-size: max(11px, 16rem); }
  .work__rating { width: max(38px, 55rem); height: max(38px, 55rem); font-size: max(11px, 16rem); }
  .work__spine { width: max(24px, 40rem); font-size: max(11px, 15rem); }
}

/* ==========================================================================
   ≤991px — sticky flip deck: image half on top, quote half below; each page is
   hinged at the middle and flips up (rotateX) as you scroll. Side pages become
   tabs peeking above (cases 1–3) and below (cases 4–6) the deck.
   ========================================================================== */
@media (max-width: 991px) {
  .s-work {
    --work-peek: 32rem;
    --work-off: 7rem;
    --work-dock: 176rem;                 /* room for the fixed dock */
    --work-half: clamp(200rem, calc((var(--vhx, 100svh) - var(--work-peek) * 6 - var(--work-off) * 2 - var(--work-dock) - 24rem) / 2), 434rem);
    padding: 60rem 0 40rem;
    min-height: calc(100rem + var(--vhx, 100svh) * 4.1);
  }
  .work__pin {
    position: -webkit-sticky; position: sticky; top: 0;
    height: var(--vhx, 100svh);
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--work-peek) * 3 + 8rem) 0 calc(var(--work-peek) * 3 + var(--work-off) * 2 + var(--work-dock));
  }
  .work__stage { width: 100%; padding: 0 24rem; }
  .work__drag { width: 100%; max-width: 680rem; height: calc(var(--work-half) * 2); margin: 0 auto; touch-action: auto; }
  .work__burst { width: 900rem; height: 900rem; margin: -450rem 0 0 -450rem; }

  .work__deck { left: 0; top: 0; width: 100%; height: 100%; margin: 0; }
  .work__book { perspective: 1500rem; }
  .work__book::before { left: 4%; right: 4%; top: 10%; bottom: 2%; box-shadow: 0 40rem 80rem rgba(0, 0, 0, .45); }
  .work__sheet { left: 0; top: 50%; width: 100%; height: 50%; }
  .work__sheet--first { top: 0; transform-origin: 50% 100%; }
  .work__sheet--last { transform-origin: 50% 0; }
  .work__page { transform-origin: 50% 0; }
  .work__page .work__face--back { transform: rotateX(180deg); }
  .work__face--img { border-radius: 16rem 16rem 0 0; }
  .work__face--quote { border-radius: 0 0 16rem 16rem; box-shadow: 0 16rem 34rem rgba(7, 11, 31, .18); }
  .work__face--img::before { background: linear-gradient(0deg, rgba(7, 11, 31, .26), rgba(7, 11, 31, .06) 4%, rgba(7, 11, 31, 0) 14%); }
  .work__face--quote::before { background: linear-gradient(180deg, rgba(7, 11, 31, .16), rgba(7, 11, 31, .04) 4%, rgba(7, 11, 31, 0) 14%); }
  .work__face::after { background: linear-gradient(180deg, rgba(7, 11, 31, .42), rgba(7, 11, 31, .06) 70%, rgba(255, 255, 255, .12)); }
  .work__face--back::after { background: linear-gradient(0deg, rgba(7, 11, 31, .42), rgba(7, 11, 31, .06) 70%, rgba(255, 255, 255, .12)); }

  .work__face--img { padding: 14rem; }
  .work__face--quote { padding: 20rem 28rem 22rem; }
  .work__quote { max-width: 580rem; font-size: 33rem; line-height: 1.04; }
  .work__link { margin-top: 16rem; font-size: 28rem; border-radius: 8rem; }
  .work__author { margin-top: 14rem; }
  .work__rating { width: 46rem; height: 46rem; font-size: 14rem; }
  .work__client { font-size: 14rem; }
  .work__count { font-size: 12rem; }
  .work__tag { font-size: 11rem; padding: 9rem 12rem; }

  .work__arrow, .work__dashes { display: none; }

  /* side pages → tabs */
  .work__fan { left: auto; right: auto; top: auto; bottom: auto; width: auto; height: 220rem; }
  .work__fan--l.work__fan--d1, .work__fan--r.work__fan--d1 { left: 20rem; right: 20rem; }
  .work__fan--l.work__fan--d2, .work__fan--r.work__fan--d2 { left: 40rem; right: 40rem; }
  .work__fan--l.work__fan--d3, .work__fan--r.work__fan--d3 { left: 60rem; right: 60rem; }
  .work__fan--l.work__fan--d1 { top: calc(var(--work-peek) * -1); }
  .work__fan--l.work__fan--d2 { top: calc(var(--work-peek) * -2); }
  .work__fan--l.work__fan--d3 { top: calc(var(--work-peek) * -3); }
  .work__fan--r.work__fan--d1 { bottom: calc(var(--work-peek) * -1 - var(--work-off) * 2); }
  .work__fan--r.work__fan--d2 { bottom: calc(var(--work-peek) * -2 - var(--work-off) * 2); }
  .work__fan--r.work__fan--d3 { bottom: calc(var(--work-peek) * -3 - var(--work-off) * 2); }
  .work__fan .work__fan-card { --fan-scale: 1; padding: 6rem; }
  .work__fan--l .work__fan-card { box-shadow: 0 -6rem 20rem rgba(7, 11, 31, .25); }
  .work__fan--r .work__fan-card { box-shadow: 0 6rem 20rem rgba(7, 11, 31, .25); }
  .work__fan-card img { border-radius: 11rem; object-position: 50% 0; }
  .work__fan--r .work__fan-card img { object-position: 50% 100%; }
  .work__fan--l .work__spine, .work__fan--r .work__spine { left: 50%; right: auto; }
  .work__spine {
    top: 6rem;
    width: auto; height: calc(var(--work-peek) - 12rem); padding: 0 14rem;
    transform: translateX(-50%);
    writing-mode: horizontal-tb;
    font-size: 12rem; letter-spacing: .12em;
  }
  .work__fan--r .work__spine { top: auto; bottom: 6rem; }
  .work__fan:hover .work__spine { letter-spacing: .12em; }
  .work__fan--l:hover .work__fan-card, .work__fan--l:active .work__fan-card, .work__fan--l:focus-visible .work__fan-card { translate: 0 -6rem; }
  .work__fan--r:hover .work__fan-card, .work__fan--r:active .work__fan-card, .work__fan--r:focus-visible .work__fan-card { translate: 0 6rem; }
  .work__fan--l.is-current .work__fan-card, .work__fan--r.is-current .work__fan-card { translate: 0 0; }
}

@media (max-width: 743px) {
  .s-work {
    --work-peek: 24rem;
    --work-off: 5rem;
    --work-dock: 78rem;
    --work-half: clamp(200rem, calc((var(--vhx, 100svh) - var(--work-peek) * 6 - var(--work-off) * 2 - var(--work-dock) - 14rem) / 2), 340rem);
    padding: 40rem 0 20rem;
  }
  .work__stage { padding: 0 16rem; }
  .work__burst { width: 620rem; height: 620rem; margin: -310rem 0 0 -310rem; }
  .work__face--img { padding: 10rem; }
  .work__img { border-radius: 10rem; }
  .work__face--quote { padding: 18rem 18rem 18rem; }
  .work__quote { font-size: 24rem; line-height: 1.04; }
  .work__link { margin-top: 14rem; font-size: 23rem; border-radius: 7rem; }
  .work__author { margin-top: 13rem; gap: 9rem; }
  .work__rating { width: 38rem; height: 38rem; font-size: 12rem; }
  .work__client { font-size: 12rem; }
  .work__count { font-size: 10rem; }
  .work__tag { font-size: 10rem; padding: 8rem 11rem; }
  .work__fan--l.work__fan--d1, .work__fan--r.work__fan--d1 { left: 12rem; right: 12rem; }
  .work__fan--l.work__fan--d2, .work__fan--r.work__fan--d2 { left: 24rem; right: 24rem; }
  .work__fan--l.work__fan--d3, .work__fan--r.work__fan--d3 { left: 36rem; right: 36rem; }
  .work__fan { height: 160rem; }
  .work__fan .work__fan-card { padding: 4rem; }
  .work__fan-card img { border-radius: 8rem; }
  .work__spine { top: 4rem; height: calc(var(--work-peek) - 8rem); padding: 0 10rem; font-size: 9rem; letter-spacing: .12em; }
  .work__fan--r .work__spine { bottom: 4rem; }
}

/* ==========================================================================
   ≤991px on its side (phones in landscape, short windows): the portrait deck is
   sized in width-based rem and would be taller than the screen. Same flip deck,
   re-proportioned from the viewport height (--lu = 1px on a 390px-tall screen):
   short wide halves that stop above the dock, the case tabs move to the sides
   (like the desktop fan), and the quote page's type follows the page height
   (container units) so it always fits.
   ========================================================================== */
@media (max-width: 991px) and (orientation: landscape) {
  .s-work {
    --lu: calc(var(--vhx, 100svh) / 390);
    --work-peek: calc(24 * var(--lu));         /* side tab strip */
    --work-off: 4rem;                          /* stacked-page step (work.js reads it in rem) */
    --work-top: calc(12 * var(--lu));
    --work-gap: calc(10 * var(--lu));          /* air between the deck and the dock */
    --work-dock-room: 172rem;                  /* dock height + its bottom offset; work.js measures the real one */
    --work-half: max(calc(70 * var(--lu)), calc((var(--vhx, 100svh) - var(--work-top) - var(--work-gap) - var(--work-dock-room) - var(--work-off) * 2) / 2));
  }
  .work__pin { padding: var(--work-top) 0 calc(var(--work-gap) + var(--work-dock-room) + var(--work-off) * 2); }
  .work__stage { padding: 0 calc(16 * var(--lu)); }
  .work__drag { width: min(100% - var(--work-peek) * 6 - 24 * var(--lu), var(--work-half) * 3.7); max-width: none; }
  .work__burst { width: calc(820 * var(--lu)); height: calc(820 * var(--lu)); margin: calc(-410 * var(--lu)) 0 0 calc(-410 * var(--lu)); }
  .work__book { perspective: calc(var(--work-half) * 5.5); }
  .work__book::before { box-shadow: 0 calc(24 * var(--lu)) calc(50 * var(--lu)) rgba(0, 0, 0, .45); }

  /* pages: the faces are size containers, so their contents scale with the half height */
  .work__face { container-type: size; }
  .work__face--img { padding: calc(8 * var(--lu)); border-radius: calc(14 * var(--lu)) calc(14 * var(--lu)) 0 0; }
  .work__img { border-radius: calc(9 * var(--lu)); }
  /* quote page: count | tag on top, the quote across, link + client side by side */
  .work__face--quote {
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr;
    align-items: center; column-gap: calc(12 * var(--lu));
    padding: calc(10 * var(--lu)) calc(16 * var(--lu));
    border-radius: 0 0 calc(14 * var(--lu)) calc(14 * var(--lu));
    box-shadow: 0 calc(10 * var(--lu)) calc(24 * var(--lu)) rgba(7, 11, 31, .18);
  }
  .work__count { grid-area: 1 / 1; justify-self: start; font-size: clamp(10px, 8.5cqh, 14px); }
  .work__tag { grid-area: 1 / 2; justify-self: end; padding: .6em .95em; font-size: clamp(10px, 8cqh, 13px); }
  .work__content { grid-area: 2 / 1 / 3 / 3; align-self: center; flex-flow: row wrap; justify-content: center; column-gap: 7cqh; }
  .work__quote { flex: 0 0 100%; max-width: none; font-size: clamp(12px, 16.5cqh, 30px); line-height: 1.02; }
  .work__link { margin-top: 5cqh; font-size: clamp(12px, 14cqh, 26px); border-radius: .22em; }
  .work__author { margin-top: 5cqh; gap: clamp(6px, 4cqh, 10px); }
  .work__rating { width: clamp(24px, 24cqh, 44px); height: clamp(24px, 24cqh, 44px); font-size: clamp(9px, 8cqh, 14px); }
  .work__client { font-size: clamp(10px, 8.5cqh, 14px); }

  /* case tabs → strips peeking out on both sides: cases 1–3 left, 4–6 right */
  .work__fan { width: 46%; height: auto; }
  .work__fan--l.work__fan--d1, .work__fan--r.work__fan--d1 { top: calc(8 * var(--lu)); bottom: calc(8 * var(--lu)); }
  .work__fan--l.work__fan--d2, .work__fan--r.work__fan--d2 { top: calc(16 * var(--lu)); bottom: calc(16 * var(--lu)); }
  .work__fan--l.work__fan--d3, .work__fan--r.work__fan--d3 { top: calc(24 * var(--lu)); bottom: calc(24 * var(--lu)); }
  .work__fan--l.work__fan--d1 { left: calc(var(--work-peek) * -1); right: auto; }
  .work__fan--l.work__fan--d2 { left: calc(var(--work-peek) * -2); right: auto; }
  .work__fan--l.work__fan--d3 { left: calc(var(--work-peek) * -3); right: auto; }
  .work__fan--r.work__fan--d1 { right: calc(var(--work-peek) * -1); left: auto; }
  .work__fan--r.work__fan--d2 { right: calc(var(--work-peek) * -2); left: auto; }
  .work__fan--r.work__fan--d3 { right: calc(var(--work-peek) * -3); left: auto; }
  .work__fan .work__fan-card { padding: calc(3 * var(--lu)); border-radius: calc(12 * var(--lu)); }
  .work__fan--l .work__fan-card { box-shadow: calc(-6 * var(--lu)) 0 calc(18 * var(--lu)) rgba(7, 11, 31, .3); }
  .work__fan--r .work__fan-card { box-shadow: calc(6 * var(--lu)) 0 calc(18 * var(--lu)) rgba(7, 11, 31, .3); }
  .work__fan-card img { border-radius: calc(9 * var(--lu)); object-position: 0 50%; }
  .work__fan--r .work__fan-card img { object-position: 100% 50%; }
  .work__spine {
    width: calc(var(--work-peek) - 6 * var(--lu)); height: auto; padding: calc(10 * var(--lu)) 0;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: clamp(10px, calc(11 * var(--lu)), 13px); letter-spacing: .12em;
  }
  .work__fan--l .work__spine, .work__fan--r .work__spine { top: 50%; bottom: auto; }
  .work__fan--l .work__spine { left: calc(3 * var(--lu)); right: auto; }
  .work__fan--r .work__spine { right: calc(3 * var(--lu)); left: auto; }
  .work__fan--l:hover .work__fan-card, .work__fan--l:active .work__fan-card, .work__fan--l:focus-visible .work__fan-card { translate: calc(-5 * var(--lu)) 0; }
  .work__fan--r:hover .work__fan-card, .work__fan--r:active .work__fan-card, .work__fan--r:focus-visible .work__fan-card { translate: calc(5 * var(--lu)) 0; }
  .work__fan--l.is-current .work__fan-card, .work__fan--r.is-current .work__fan-card { translate: 0 0; }
}
/* dock room fallbacks, mirroring components.css until work.js has measured the dock */
@media (max-width: 991px) and (min-width: 744px) and (max-height: 760px) and (orientation: landscape) {
  .s-work { --work-dock-room: 98rem; }         /* scaled .72, 24rem up */
}
@media (max-width: 991px) and (min-width: 744px) and (max-height: 500px) and (orientation: landscape) {
  .s-work { --work-dock-room: 51rem; }         /* slim landscape dock, scaled .72, 10rem up */
}
@media (max-width: 743px) and (orientation: landscape) {
  .s-work { --work-off: 2.5rem; --work-dock-room: 74rem; }
}
@media (max-width: 743px) and (max-height: 500px) and (orientation: landscape) {
  .s-work { --work-dock-room: 66rem; }
}

/* reduced motion: no spring on the side pages */
@media (prefers-reduced-motion: reduce) {
  .work__fan-card, .work__spine, .work__dash { transition: none; }
}