/* Shared TOP / Works card. Values match the current TOP card's settled design.
   Gallery/slider layout and TOP entrance motion remain owned by their pages. */
.home-story-films__card {
  display: flex; align-self: flex-start; flex-direction: column;
  min-width: 0; padding: 0; border: 0; background: transparent;
  color: var(--home-story-ink, #4a4d4b); cursor: pointer;
  font: 300 14px/2 "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  text-align: left; text-decoration: none;
}
.home-story-films__card figure {
  position: relative; flex: 0 0 auto; width: 100%; margin: 0;
  overflow: hidden; aspect-ratio: 3 / 4; background: #f1f1ed;
}
.home-story-films__card figure::after {
  content: ""; position: absolute; z-index: 1; inset: 0;
  background: rgb(255 255 255 / .1); pointer-events: none;
}
.home-story-films__card img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: none; transform: scale(1);
  transition: transform 800ms cubic-bezier(.22, 1, .36, 1);
}
.home-story-films__card img.home-story-films__image--keely {
  width: 120%; height: 120%; margin-top: 0; margin-left: -10%; object-position: center 40%;
}
.home-story-films__play {
  position: absolute; z-index: 3; top: 50%; right: auto; bottom: auto; left: 50%;
  display: grid; justify-items: center; gap: 0; transform: translate(-50%, -50%);
}
.home-story-films__play i {
  position: relative; display: block; width: 62px; height: 62px;
  border: 1px solid rgb(255 255 255 / .9); border-radius: 50%;
  background: rgb(20 29 26 / .18);
  transition: background-color 360ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.home-story-films__play i::before {
  content: ""; position: absolute; top: 50%; left: 53%; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid #fff; transform: translate(-50%, -50%);
}
.home-story-films__play small { display: none; }
.home-story-films__meta { display: block; margin-top: 20px; padding: 0; }
.home-story-films__meta h3 {
  margin: 0; font-family: "Cormorant Garamond", serif; font-size: 18px;
  font-weight: 400; line-height: 1.34; letter-spacing: .05em;
}
.home-story-films__meta p {
  margin: 8px 0 0; color: inherit; font-size: 10px;
  font-weight: 300; line-height: 1.2; letter-spacing: .1em;
}
.home-story-films__meta h3.home-story-films__role {
  font-family: "Shippori Mincho B1", serif; font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.45; letter-spacing: .08em;
}
.home-story-films__meta p.home-story-films__name {
  margin-top: 13px; font-family: "Cormorant Garamond", serif;
  font-size: 11px; line-height: 1.2; letter-spacing: .08em;
}
.home-story-films__meta p.home-story-films__theme {
  position: relative; margin-top: 20px; padding-top: 17px;
  border-top: 1px solid transparent; color: inherit;
  font-family: "Shippori Mincho B1", serif; font-size: 14px;
  font-weight: 400; line-height: 1.85; letter-spacing: .045em;
}
.home-story-films__theme::before {
  content: ""; position: absolute; top: -1px; right: 0; left: 0;
  height: 1px; opacity: .65; background: currentColor;
  transform: scaleY(.5); pointer-events: none;
}
.home-story-films__meta p.home-story-films__theme + h3 { margin-top: 16px; }
.home-story-films__card:hover img,
.home-story-films__card:focus-visible img { filter: none; transform: scale(1.04); }
.home-story-films__card:hover .home-story-films__play i,
.home-story-films__card:focus-visible .home-story-films__play i { background: rgb(20 29 26 / .42); transform: scale(1.1); }
.home-story-films__card:focus-visible { outline: 1px solid #8e9692; outline-offset: 7px; }
.works-grid > .home-story-films__card { width: 100%; }
@media (max-width: 820px) {
  .home-story-films__play i { width: 54px; height: 54px; }
  .home-story-films__meta { margin-top: 14px; padding: 0; }
  .home-story-films__meta h3 { font-size: 15px; line-height: 1.34; }
  .home-story-films__meta p { margin: 7px 0 0; font-size: 9px; line-height: 1.1; }
  .home-story-films__meta p.home-story-films__theme { margin-top: 15px; padding-top: 13px; font-size: 12px; line-height: 1.8; }
  .home-story-films__meta p.home-story-films__theme + h3 { margin-top: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-story-films__card img, .home-story-films__play i { transition: none; }
}