/* ============================================
   WORK EX — standing binders that open like a book
   ============================================ */

.work-ex {
  max-width: 1040px;
  padding-top: var(--space-md);
}

.work-scribble {
  font-family: var(--font-hand);
  font-size: 1.55rem;
  color: var(--ink-soft);
  transform: rotate(-1.5deg);
  margin-bottom: 1.2rem;
}

.binder-shelf {
  --binder-w: min(269px, 28.56vw);
  --binder-spine: calc(var(--binder-w) * 150 / 400);
  --binder-step: calc(var(--binder-spine) * 0.6);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  min-height: calc(var(--binder-w) * 1.35 + 24px);
  padding: 2.4rem 0 0;
  transform: translateX(calc((var(--binder-w) - var(--binder-spine)) / 2));
}

.binder {
  position: relative;
  z-index: 1;
  width: var(--binder-w);
  height: calc(var(--binder-w) * 1.35);
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  filter: drop-shadow(4px 8px 12px rgba(58, 46, 34, 0.18));
  transition: transform 0.22s ease;
}

.binder + .binder {
  margin-left: calc(var(--binder-step) - var(--binder-w));
}

.binder:nth-child(1) { z-index: 1; }
.binder:nth-child(2) { z-index: 2; }
.binder:nth-child(3) { z-index: 3; }
.binder:nth-child(4) { z-index: 4; }

.binder-art,
.binder-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}

.binder-fallback {
  display: none;
  border-radius: 3px 10px 6px 0;
  background: linear-gradient(
    90deg,
    var(--binder-spine-color) 0 37.5%,
    var(--binder-face) 37.5% 100%
  );
  box-shadow: inset -10px 0 0 rgba(0, 0, 0, 0.12);
}

.binder.is-missing .binder-fallback { display: block; }
.binder.is-missing .binder-art { display: none; }

.binder-fallback.navy {
  --binder-spine-color: #c44c48;
  --binder-face: #df5854;
}
.binder-fallback.yellow {
  --binder-spine-color: #c4783b;
  --binder-face: #db8844;
}
.binder-fallback.green {
  --binder-spine-color: #664d86;
  --binder-face: #775b99;
}
.binder-fallback.red {
  --binder-spine-color: #a8373d;
  --binder-face: #c34046;
}

.binder-fallback::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 7%;
  width: 22%;
  height: 46%;
  background: #e8ddd0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(58, 46, 34, 0.12);
}

.binder-fallback::after {
  content: '';
  position: absolute;
  left: 18.75%;
  bottom: 12%;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border: 3px solid #c8c6c0;
  border-radius: 50%;
  background: #1b1714;
}

.spine-write {
  position: absolute;
  top: 55%;
  left: 9%;
  width: 220px;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-hand);
  font-size: 0.945rem;
  color: var(--ink);
  pointer-events: none;
  z-index: 2;
}

.binder:hover,
.binder:focus-visible {
  transform: translateY(-16px);
}

.binder-spread {
  display: none;
  margin-top: 0.5rem;
}

.binder-spread.is-open {
  display: block;
}

.close-folder {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--rust);
  margin-bottom: 0.6rem;
}

.open-folder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
  perspective: 1400px;
}

.leaf {
  background:
    linear-gradient(90deg, rgba(58, 46, 34, 0.08), transparent 18%),
    #f7f1e3;
  padding: 2rem 1.6rem;
  box-shadow: 0 16px 24px rgba(58, 46, 34, 0.12);
}

.leaf.left {
  transform-origin: right center;
  border-right: 1px solid rgba(58, 46, 34, 0.12);
}

.leaf.right {
  transform-origin: left center;
  background:
    linear-gradient(270deg, rgba(58, 46, 34, 0.08), transparent 18%),
    #f4ead6;
}

.binder-spread.is-open .leaf.left {
  animation: folderOpenLeft 0.55s ease;
}

.binder-spread.is-open .leaf.right {
  animation: folderOpenRight 0.55s ease;
}

@keyframes folderOpenLeft {
  from { transform: rotateY(78deg); }
  to { transform: rotateY(0deg); }
}

@keyframes folderOpenRight {
  from { transform: rotateY(-78deg); }
  to { transform: rotateY(0deg); }
}

.leaf-kicker {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--rust);
}

.leaf h3 {
  font-family: var(--font-hand);
  font-size: 2.1rem;
  font-weight: 400;
  font-synthesis: none;
  margin-top: 0.3rem;
}

.leaf p + p {
  margin-top: 0.8rem;
}

.leaf-body {
  margin-top: 0.85rem;
}

.leaf-bullets {
  margin: 0;
  padding: 0 0 0 1.15rem;
}

.leaf-bullets li {
  margin-top: 0.7rem;
}

.leaf-bullets li:first-child {
  margin-top: 0;
}

@media (max-width: 700px) {
  .work-ex {
    overflow-x: clip;
  }

  .binder-shelf {
    --binder-w: min(160px, 42vw);
    justify-content: flex-start;
    transform: none;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 1.6rem 0 0;
  }

  .spine-write {
    width: min(180px, 70%);
    font-size: 0.78rem;
  }

  .open-folder {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .leaf.left {
    border-right: 0;
  }

  .leaf-bullets {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .binder,
  .binder:hover,
  .binder:focus-visible {
    transition: none;
  }

  .binder-spread.is-open .leaf.left,
  .binder-spread.is-open .leaf.right {
    animation: none;
  }
}