/* Layered pockets: back, contained artwork, then a hinged front. */
.folders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 500px;
  margin: 8px auto 30px;
}
.folder-help { color: var(--muted); font-size: 13px; }
.folder {
  --folder-color: var(--sage);
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 210px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  font: 13px/1.5 "Hanken Grotesk", sans-serif;
  -webkit-appearance: none;
  appearance: none;
}
.folder:nth-child(2) { --folder-color: var(--blue); }
.folder:focus-visible { outline: 2px solid var(--link); outline-offset: 5px; }
.folder-back, .folder-front {
  position: absolute;
  right: 10px;
  bottom: 12px;
  left: 10px;
  border: 1px solid var(--line);
  background: var(--folder-color);
}
.folder-back {
  top: 64px;
  z-index: 0;
  border-radius: 0 6px 6px 6px;
  box-shadow: 0 5px 22px var(--shadow);
}
.folder-back::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: -1px;
  width: 40%;
  height: 16px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: var(--folder-color);
}
.folder-cards { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.folder-cards > img {
  position: absolute;
  top: 72px;
  left: 21%;
  width: 58%;
  height: 108px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: 0 3px 12px var(--shadow);
  transform-origin: 50% 100%;
  transform: var(--tucked);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.folder-cards > img:nth-child(1) { --tucked: rotate(-5deg); --fanned: translate(-12%, -38%) rotate(-14deg); }
.folder-cards > img:nth-child(2) { --tucked: translateY(-4px) rotate(4deg); --fanned: translate(0, -48%) rotate(2deg); }
.folder-cards > img:nth-child(3) { --tucked: translateY(4px) rotate(-1deg); --fanned: translate(12%, -34%) rotate(13deg); }
.folder-front {
  top: 90px;
  z-index: 2;
  padding: 12px 14px;
  background: var(--subtle);
  border-radius: 5px 5px 6px 6px;
  box-shadow: 0 -3px 16px var(--shadow);
  transform-origin: 50% 100%;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.folder-front strong, .folder-front > span { display: block; }
.folder-front strong {
  width: fit-content;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  font: 500 20px/1.25 "Bricolage Grotesque", sans-serif;
  margin-bottom: 3px;
}
.folder-front > span { font-size: 13px; }
.folder-status { margin-top: 6px; color: var(--muted); }
.folder-status::after { content: "Open gallery ↗"; }
.folder[aria-expanded="true"] .folder-status::after { content: "Gallery open ↓"; }
/* Selection marks the label, never holds the layers open between entries. */
.folder[aria-expanded="true"] .folder-front strong { border-color: var(--link); }
.folder:focus-visible .folder-cards > img { transform: var(--fanned); }
.folder:focus-visible .folder-front { transform: perspective(560px) rotateX(-20deg); }
@media (hover: hover) and (pointer: fine) {
  .folder:hover .folder-cards > img { transform: var(--fanned); }
  .folder:hover .folder-front { transform: perspective(560px) rotateX(-20deg); }
}
@media (max-width: 520px) {
  .folders { grid-template-columns: 1fr; gap: 10px; max-width: 238px; }
}
/* A compact frame leaves the complete original visible; the viewer keeps full size. */
.gallery .art button {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--subtle);
  box-shadow: 0 2px 8px var(--shadow);
  transform: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gallery .art img {
  width: 100%;
  object-fit: contain;
  background: var(--subtle);
}
.gallery .art figcaption {
  margin: 10px 2px 4px;
  color: var(--muted);
  font: 12px/1.55 "IBM Plex Mono", monospace;
  overflow-wrap: anywhere;
}
.gallery .art button:focus-visible {
  border-color: var(--link);
  box-shadow: 0 6px 18px var(--shadow), var(--card-shadow);
  transform: translateY(-1px);
}
@media (hover: hover) and (pointer: fine) {
  .gallery .art button:hover {
    border-color: var(--muted);
    box-shadow: 0 6px 18px var(--shadow), var(--card-shadow);
    transform: translateY(-1px);
  }
}
/* Selection and focus remain visible with either motion preference. */
.motion-off .folder-cards > img { transform: var(--tucked) !important; }
.motion-off .folder-front, .motion-off .gallery .art button { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .folder-cards > img { transform: var(--tucked) !important; transition: none; }
  .folder-front, .gallery .art button { transform: none !important; transition: none; }
}