/* Responsive shelf specimen. Each tile is ONE accessible button/link.
   Artwork contains a decorative plus; do not put another button inside it. */
.mori-shelf {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 16px;
  padding: 0 12px 22px;
  isolation: isolate;
}
.mori-shelf::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 24px;
  border-radius: 12px 12px 5px 5px;
  background: linear-gradient(175deg, var(--shelf-top), var(--shelf-front));
  box-shadow: inset 0 1px 0 #FFFFFF66;
}
.mori-shelf::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(var(--shelf-front), var(--shelf-edge));
  box-shadow: 0 8px 12px #352C291A, inset 0 1px 0 #FFFFFF3D;
}
.mori-add-story {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  font: inherit;
  color: #AE412C;
  cursor: pointer;
}
.mori-add-story > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mori-add-story .tile-dark { display: none; }
.dark .mori-add-story .tile-light { display: none; }
.dark .mori-add-story .tile-dark { display: block; }
.dark .mori-add-story { color: #FFF4DA; }
.mori-add-story > span {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 14%;
  text-align: center;
  font-weight: var(--weight-title);
  font-size: clamp(16px, 3.8vw, 25px);
  line-height: 1.2;
}
@media (hover: hover) {
  .mori-add-story:hover { outline: 2px solid var(--ring); outline-offset: 2px; }
}
.mori-add-story:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.mori-add-story:active { box-shadow: inset 0 0 0 2px var(--ring); }