/* V152 — Work / WRITING bookshelf alignment + exact Writing-page hover behavior.
   Base geometry is inherited from the Writing page bookshelf.
   The visual book/shelf positions stay unchanged; only the glass-card bottom is trimmed. */

.work-writing-shelf-stage{
  --work-writing-pad:clamp(30px,3.3vw,52px);
  --work-writing-trim:clamp(86px,7.2vw,112px);
  padding-left:0!important;
  padding-right:0!important;
  padding-bottom:clamp(18px,1.8vw,28px)!important;
  overflow:visible!important;
}

.work-writing-shelf-stage .section-heading{
  margin-bottom:clamp(32px,3vw,48px);
  padding-left:var(--work-writing-pad);
  padding-right:var(--work-writing-pad);
}

.work-writing-shelf-stage .section-heading-inline{display:block;}

/* Same bookshelf geometry as Writing, with only the unused bottom area removed.
   Desk bottom is offset by the same trim amount, so its visual position does not move. */
.work-writing-shelf-scene{
  position:relative;
  width:100%;
  min-height:calc(clamp(500px,43vw,660px) - var(--work-writing-trim));
  margin:0 auto;
  padding:12px clamp(12px,1.5vw,24px) 166px;
  overflow:visible;
}

.work-writing-books{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,54px);
  align-items:end;
  padding:0 clamp(22px,3.5vw,62px);
}

.work-shelf-book{
  --tilt-x:0deg;
  --tilt-y:0deg;
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  z-index:1;
  display:block;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  outline:none;
  perspective:1200px;
  -webkit-tap-highlight-color:transparent;
  transition:z-index 0s linear .22s;
}

.work-shelf-book:hover,
.work-shelf-book:focus-visible{
  z-index:12;
  transition-delay:0s;
}

.work-shelf-book-float{
  display:block;
  position:relative;
  width:100%;
  transform:translateY(0);
  transform-origin:center bottom;
  will-change:transform,filter;
}

/* Exact Writing page .book-visual behavior. */
.work-shelf-book-visual{
  position:relative;
  display:block;
  width:min(100%,240px);
  aspect-ratio:941 / 1468;
  margin:0 auto;
  transform-style:preserve-3d;
  transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0) scale(var(--book-scale,1));
  transform-origin:center bottom;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),filter .35s ease;
  filter:drop-shadow(0 28px 25px rgba(0,0,0,.38));
  will-change:transform,filter;
}

.work-shelf-book-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.work-shelf-book:hover .work-shelf-book-float,
.work-shelf-book:focus-visible .work-shelf-book-float{
  animation:workWritingBookFloat 2.15s ease-in-out infinite;
}

.work-shelf-book:hover .work-shelf-book-visual,
.work-shelf-book:focus-visible .work-shelf-book-visual{
  --book-scale:1.10;
  filter:drop-shadow(0 44px 36px rgba(0,0,0,.52)) drop-shadow(0 0 24px rgba(225,190,122,.12));
}

.work-shelf-book:focus-visible .work-shelf-book-visual{
  outline:1px solid rgba(238,201,128,.85);
  outline-offset:8px;
  border-radius:4px;
}

.work-shelf-book::after{
  content:"";
  display:block;
  width:68%;
  height:14px;
  margin:-5px auto 0;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.38),rgba(0,0,0,0) 70%);
  filter:blur(4px);
  opacity:.56;
  transform:scaleX(1);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}

.work-shelf-book:hover::after,
.work-shelf-book:focus-visible::after{
  opacity:.34;
  transform:scaleX(.88);
}

@keyframes workWritingBookFloat{
  0%,100%{transform:translateY(-7px) scale(1.008)}
  50%{transform:translateY(-16px) scale(1.018)}
}

.work-writing-desk-wrap{
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:calc(-150px - var(--work-writing-trim));
  width:100%;
  pointer-events:none;
}

.work-writing-desk{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center top;
  filter:drop-shadow(0 24px 35px rgba(0,0,0,.38));
  user-select:none;
  -webkit-user-drag:none;
}



@media(max-width:1180px){
  .work-writing-shelf-stage{--work-writing-trim:clamp(70px,7vw,92px);}
  .work-writing-books{gap:18px;padding-inline:18px;}
  .work-shelf-book-visual{width:min(100%,205px);}
}

@media(max-width:900px){
  .work-writing-shelf-stage{--work-writing-trim:54px;}
  .work-writing-shelf-scene{
    min-height:calc(500px - var(--work-writing-trim));
    padding-bottom:136px;
  }
  .work-writing-books{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:42px;
  }
  .work-shelf-book-visual{width:min(100%,220px);}
  .work-writing-desk-wrap{
    bottom:calc(-182px - var(--work-writing-trim));
    width:120%;
    left:-10%;
    right:auto;
  }
}

@media(max-width:620px){
  .work-writing-shelf-stage{
    --work-writing-pad:26px;
    --work-writing-trim:36px;
    padding-bottom:18px!important;
  }
  .work-writing-books{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 12px;
    padding-inline:4px;
  }
  .work-shelf-book-visual{width:min(100%,165px);}
  .work-writing-shelf-scene{
    min-height:calc(500px - var(--work-writing-trim));
    padding-inline:0;
    padding-bottom:124px;
  }
}

@media(prefers-reduced-motion:reduce){
  .work-shelf-book-float{animation:none!important;}
  .work-shelf-book-visual,
  .work-shelf-book::after{transition-duration:.01ms!important;}
}

/* V153 — transient compositor nudge used after cover/desk image decode.
   It forces a fresh paint without changing the bookshelf geometry or hover motion. */
.work-writing-shelf-scene.is-render-stable{
  transform:translateZ(0);
}
.work-writing-shelf-scene .work-shelf-book img,
.work-writing-shelf-scene .work-writing-desk{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}