/* ============================================================
   SHELF.CSS — Bookshelf section styles
   ============================================================ */

#work{padding:clamp(52px,6vw,72px) 0}
#work .sec-head{margin-bottom:22px;padding-bottom:16px}
.shelf-grid{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(20px,2.4vw,32px);
  align-items:stretch;
}
.shelf-stage{
  position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  padding:48px 40px 32px;overflow:hidden;
}
.shelf-row{
  display:flex;gap:18px;align-items:flex-end;justify-content:center;
  min-height:240px;padding-bottom:8px;
}
.shelf-board{
  position:absolute;left:24px;right:24px;bottom:24px;height:8px;border-radius:2px;
  background:linear-gradient(180deg, #6e4a2e 0%, #4d3320 100%);
  box-shadow:0 4px 8px -2px rgba(0,0,0,0.25);
}
.bookend{
  width:14px;height:120px;border-radius:2px;background:linear-gradient(180deg, var(--midnight) 0%, var(--midnight-deep) 100%);
  box-shadow:2px 4px 8px -2px rgba(0,0,0,0.2);align-self:flex-end;
}
.shelf-obj{
  display:block;position:relative;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
  align-self:flex-end;
}
.shelf-obj:hover{transform:translateY(-6px)}
.shape-book{
  width:90px;height:230px;border-radius:3px 5px 5px 3px;
  padding:20px 16px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg, var(--midnight) 0%, var(--midnight-deep) 100%);
  color:var(--lionsmane);
  box-shadow:inset 6px 0 8px -4px rgba(0,0,0,0.35), 4px 6px 16px -6px rgba(0,0,0,0.3);
  position:relative;
}
.shape-book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:rgba(0,0,0,0.25)}
.b-cat{font-family:var(--mono);font-size:8px;letter-spacing:0.16em;text-transform:uppercase;opacity:.85}
.b-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;line-height:1.15;letter-spacing:-0.01em}
.b-foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;opacity:.85}
.shelf-note{
  margin-top:14px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);
}

.shelf-sign{
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;
  transition:border-color .3s, box-shadow .3s;
}
.shelf-sign.lit{border-color:var(--rule-strong);box-shadow:0 30px 50px -30px rgba(1,61,90,0.18)}
.shelf-sign .ss-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--marigold);
}
.shelf-sign .led{display:inline-flex;align-items:center;gap:6px;color:var(--ink-mute)}
.shelf-sign .led::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-mute);transition:.3s}
.shelf-sign.lit .led::before{background:var(--herb);box-shadow:0 0 0 4px rgba(112,140,105,0.18)}
.shelf-sign h4{
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.2;
  color:var(--midnight);margin-bottom:14px;letter-spacing:-0.01em;
}
.shelf-sign h4 em{font-style:italic}
.shelf-sign p{color:var(--ink-soft);font-size:15px;line-height:1.6;margin-bottom:18px}
.shelf-sign .ss-cat{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:10px;
}
.shelf-sign .ss-cta{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--midnight);
  border-bottom:1px solid var(--midnight);padding-bottom:4px;transition:.25s;
}
.shelf-sign .ss-cta:hover{color:var(--marigold);border-color:var(--marigold)}
.shelf-sign .ss-cta .arr{transition:transform .25s}
.shelf-sign .ss-cta:hover .arr{transform:translateX(3px)}

/* Responsive */
@media (max-width:980px){
  .shelf-grid{grid-template-columns:1fr}
}