/* KYRNARC Originals mixed showcase: characters + stories. */
.originals-grid .original-card {
  --card-glow: oklch(72% 0.07 275);
}
.original-character { --card-glow: oklch(73% 0.07 285); }
.original-asteria { --card-glow: oklch(78% 0.08 78); }
.original-monsters { --card-glow: oklch(71% 0.10 278); }
.original-restaurant { --card-glow: oklch(74% 0.10 62); }

.original-portrait,
.original-story-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.original-portrait {
  display: grid;
  place-items: center;
  isolation: isolate;
}
.original-portrait::before,
.original-portrait::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.original-portrait-vael {
  background:
    radial-gradient(circle at 72% 24%, rgba(117, 126, 178, .22), transparent 28%),
    radial-gradient(circle at 22% 70%, rgba(77, 61, 103, .16), transparent 34%),
    linear-gradient(135deg, #171a24 0%, #0c0e14 52%, #121019 100%);
}
.original-portrait-asteria {
  background:
    radial-gradient(circle at 68% 18%, rgba(229, 199, 141, .26), transparent 26%),
    radial-gradient(circle at 22% 62%, rgba(116, 91, 145, .12), transparent 34%),
    linear-gradient(145deg, #201d20 0%, #111116 58%, #181310 100%);
}
.portrait-glow {
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218, 222, 242, .16), rgba(100, 97, 144, .06) 48%, transparent 72%);
  filter: blur(8px);
  transform: translate(16%, -10%);
}
.original-asteria .portrait-glow {
  background: radial-gradient(circle, rgba(244, 216, 162, .2), rgba(176, 123, 89, .06) 48%, transparent 72%);
}
.portrait-monogram {
  position: absolute;
  right: 9%;
  top: 4%;
  z-index: -1;
  color: rgba(244, 240, 233, .045);
  font-family: var(--font-display);
  font-size: clamp(13rem, 30vw, 28rem);
  line-height: .8;
  user-select: none;
}
.original-portrait::before {
  width: 28%;
  min-width: 150px;
  aspect-ratio: .78;
  left: 51%;
  top: 18%;
  border-radius: 48% 48% 44% 44%;
  background: linear-gradient(155deg, rgba(32, 35, 48, .92), rgba(6, 7, 11, .98));
  box-shadow:
    -18px 8px 42px rgba(113, 120, 170, .10),
    inset 11px 0 0 rgba(255,255,255,.018);
  transform: translateX(-50%) rotate(2deg);
}
.original-portrait::after {
  width: 48%;
  height: 34%;
  left: 51%;
  bottom: 8%;
  border-radius: 48% 48% 12% 12%;
  background: linear-gradient(170deg, rgba(26, 28, 38, .92), rgba(5, 6, 9, .98));
  transform: translateX(-50%);
  box-shadow: 0 -24px 55px rgba(71, 77, 119, .08);
}
.original-asteria .original-portrait::before,
.original-asteria .original-portrait::after { box-shadow: none; }
.portrait-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 212, 181, .55), transparent);
  opacity: .38;
}
.portrait-line-one { width: 32%; right: 7%; top: 34%; }
.portrait-line-two { width: 22%; left: 8%; bottom: 26%; }

.monsters-art {
  background:
    radial-gradient(circle at 72% 18%, rgba(140, 126, 206, .24), transparent 28%),
    linear-gradient(150deg, #1a1928 0%, #0a0b10 55%, #18121d 100%);
}
.monster-moon {
  position: absolute;
  right: 13%;
  top: 11%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ece5ce, #9b927e 78%);
  box-shadow: 0 0 46px rgba(214, 198, 158, .18);
}
.monster-moon::after {
  content: "";
  position: absolute;
  width: 105%;
  height: 105%;
  left: 36%;
  top: -8%;
  border-radius: 50%;
  background: #12131b;
}
.monster-ridge {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 15%;
  height: 42%;
  background: #08090d;
  clip-path: polygon(0 100%, 0 72%, 14% 55%, 28% 73%, 43% 46%, 57% 68%, 70% 39%, 84% 66%, 100% 49%, 100% 100%);
}
.monster-ridge-b { bottom: 3%; opacity: .9; transform: scaleX(1.12); }
.monster-dot {
  position: absolute;
  bottom: 13%;
  width: 5%;
  min-width: 15px;
  aspect-ratio: .45;
  border-radius: 50% 50% 14% 14%;
  background: #030406;
  box-shadow: 0 -12px 0 -4px #030406;
}
.md1 { left: 18%; height: 16%; }
.md2 { left: 36%; height: 23%; }
.md3 { left: 58%; height: 19%; }
.md4 { left: 76%; height: 26%; }

.restaurant-art {
  background:
    radial-gradient(circle at 70% 20%, rgba(229, 165, 96, .25), transparent 28%),
    linear-gradient(155deg, #33251f 0%, #171316 52%, #0b0b0e 100%);
}
.restaurant-light {
  position: absolute;
  width: 42%;
  height: 32%;
  right: 8%;
  top: 9%;
  background: linear-gradient(135deg, rgba(255, 210, 151, .62), rgba(216, 135, 72, .06));
  filter: blur(5px);
  box-shadow: 0 0 72px rgba(216, 147, 81, .17);
}
.restaurant-table {
  position: absolute;
  width: 62%;
  height: 12%;
  left: 19%;
  bottom: 25%;
  border-radius: 50%;
  background: linear-gradient(180deg, #2c211d, #0c0b0c);
  box-shadow: 0 22px 26px rgba(0,0,0,.28);
}
.restaurant-table::after {
  content: "";
  position: absolute;
  width: 8%;
  height: 150%;
  left: 46%;
  top: 58%;
  background: #09080a;
}
.restaurant-chair {
  position: absolute;
  bottom: 12%;
  width: 18%;
  height: 34%;
  border: 2px solid rgba(219, 184, 143, .16);
  border-bottom: 0;
  border-radius: 44% 44% 8% 8%;
}
.chair-left { left: 14%; transform: rotate(-5deg); }
.chair-right { right: 14%; transform: rotate(5deg); }
.restaurant-sign {
  position: absolute;
  left: 8%;
  top: 10%;
  color: rgba(239, 207, 144, .56);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: .06em;
}

.original-card .story-genre {
  opacity: .78;
}
.original-card:hover .story-genre {
  opacity: 1;
}

@media (max-width: 820px) {
  .original-portrait::before { min-width: 110px; width: 32%; top: 16%; }
  .original-portrait::after { width: 56%; height: 32%; }
  .portrait-monogram { font-size: 12rem; }
}