/* MarineTL Premium Showcase 2.8.6 | Scoped entirely to the dedicated shortcode.
   Layout adapts to the WIDTH OF THE CONTENT AREA (container queries), so it stays
   correct with or without a Fictioneer sidebar. Legacy browsers fall back to
   viewport media queries. Dark mode keeps the original "ink + gilt" treatment;
   Fictioneer light mode switches to a warm editorial paper + gilt palette. */

.showcase.mtl-premium-showcase {
  --mtl-ink: #0d1419;
  --mtl-ink-2: #131c23;
  --mtl-paper: #fbf6ea;
  --mtl-mist: #b9c4c3;
  --mtl-gold: #e8c48a;
  --mtl-gold-hi: #f6e2ba;
  --mtl-gold-lo: #d2a35d;
  --mtl-radius: 26px;
  --mtl-ease: cubic-bezier(.2, .75, .2, 1);
  --mtl-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mtl-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* control cluster geometry (shared so the pause button always lines up with the arrows) */
  --mtl-ctl: 40px;
  --mtl-ctl-pad: 5px;
  --mtl-bar-w: calc(var(--mtl-ctl) * 2 + var(--mtl-ctl-pad) * 2 + 6px);
  --mtl-bar-h: calc(var(--mtl-ctl) + var(--mtl-ctl-pad) * 2 + 2px);
  --mtl-edge-x: 30px;
  --mtl-edge-y: 28px;
  --this-shadow-space: 0px;
  --this-arrow-horizontal-padding: 0px;
  --this-pagination-side-padding: 0px;
  --this-pagination-vertical-padding: 0px;
  container: mtl / inline-size;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  margin-block: 1rem 2.25rem;
  padding: 0 1px !important;
  box-sizing: border-box;
  color: var(--mtl-paper);
  -webkit-tap-highlight-color: transparent;
}
.showcase.mtl-premium-showcase:has(.splide__arrows) { --this-arrow-horizontal-padding: 0px; }
.showcase.mtl-premium-showcase *, .showcase.mtl-premium-showcase *::before, .showcase.mtl-premium-showcase *::after { box-sizing: border-box; }

.showcase.mtl-premium-showcase .polygon,
.showcase.mtl-premium-showcase .polygon::before,
.showcase.mtl-premium-showcase .polygon::after { clip-path: none !important; }

.showcase.mtl-premium-showcase .splide__track {
  overflow: hidden;
  padding: 2px 1px 5px !important;
  border-radius: var(--mtl-radius);
}
.showcase.mtl-premium-showcase .showcase__list { align-items: stretch; }

/* Fictioneer's loading styles size only the first slide. Size every slide before
   Splide mounts so text wrapping and the tallest mobile card already match the
   initialized carousel. Keep the gap in sync with the shortcode's Splide options;
   Splide owns slide widths and margins once initialization is complete. */
.showcase.mtl-premium-showcase.splide:not(.is-initialized) .showcase__list-item {
  flex: 0 0 auto;
  width: 100%;
  margin-right: 16px;
}

/* ---------- Card shell: gilt hairline border, deep soft shadow ---------- */
.showcase.mtl-premium-showcase .showcase__list-item {
  position: relative;
  min-width: 0;
  max-width: none;
  height: 520px !important;
  height: clamp(420px, 46cqi, 500px) !important;
  aspect-ratio: auto !important;
  align-self: stretch;
  overflow: hidden;
  contain: layout paint style;
  border: 1px solid transparent;
  border-radius: var(--mtl-radius);
  background:
    linear-gradient(var(--mtl-ink), var(--mtl-ink)) padding-box,
    linear-gradient(150deg, rgba(246, 226, 186, .62), rgba(232, 196, 138, .12) 34%, rgba(232, 196, 138, .05) 62%, rgba(246, 226, 186, .36)) border-box;
  box-shadow: 0 22px 48px -22px rgba(4, 9, 13, .62), 0 3px 8px rgba(4, 9, 13, .16);
}
.showcase.mtl-premium-showcase .showcase__list-item::before { display: none; }
.showcase.mtl-premium-showcase .showcase__list-item-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none !important;
  border-radius: inherit;
  outline: none;
}
.showcase.mtl-premium-showcase .showcase__list-item-link:focus-visible {
  outline: 3px solid var(--mtl-gold);
  outline-offset: -6px;
}

/* ---------- Editorial split: reading panel + framed artwork ---------- */
.showcase.mtl-premium-showcase .showcase__list-item-figure {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  width: 100%;
  margin: 0;
  background: var(--mtl-ink);
}
.showcase.mtl-premium-showcase .showcase__image {
  position: relative !important;
  inset: auto !important;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
  display: block;
  height: 100%;
  width: 100%;
  max-width: none;
  min-width: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(.94) contrast(1.03);
  transform: scale(1);
  transition: transform 1.1s var(--mtl-ease);
}
.showcase.mtl-premium-showcase .showcase__image._no-cover {
  background:
    radial-gradient(circle at 68% 24%, rgba(232, 183, 99, .42), transparent 39%),
    linear-gradient(145deg, #424247, #233039 44%, #0d1419);
}
/* Whole cover, never cropped: the image is CONTAINED and a deliberately small
   blurred WordPress rendition fills the rest. Both live in a wrapper added by the plugin. */
.showcase.mtl-premium-showcase .mtl-premium__art {
  position: relative;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--mtl-ink-2);
}
.showcase.mtl-premium-showcase .mtl-premium__backdrop {
  position: absolute;
  top: -14%;
  left: -14%;
  width: 128%;
  height: 128%;
  max-width: none;
  object-fit: cover;
  filter: blur(26px) saturate(1.35) brightness(.58);
  pointer-events: none;
  user-select: none;
}
.showcase.mtl-premium-showcase .mtl-premium__art .showcase__image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  box-shadow: none;
}
/* Blend the reading panel into the artwork. */
.showcase.mtl-premium-showcase .showcase__list-item-figure::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0 0 0 38%;
  background:
    linear-gradient(90deg, var(--mtl-ink) 0, rgba(13, 20, 25, .86) 11%, rgba(13, 20, 25, .12) 44%, rgba(13, 20, 25, .06) 100%),
    linear-gradient(0deg, rgba(6, 10, 14, .52), transparent 38%, rgba(6, 10, 14, .26));
}
.showcase.mtl-premium-showcase .mtl-premium__art-stamp {
  position: absolute;
  z-index: 4;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 13px 8px 12px;
  border: 1px solid rgba(255, 246, 218, .26);
  border-radius: 999px;
  background: rgba(8, 14, 20, .62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--mtl-gold-hi);
  font: 700 10px/1.3 var(--mtl-sans);
  letter-spacing: .14em;
  white-space: nowrap;
}
.showcase.mtl-premium-showcase .mtl-premium__art-stamp strong {
  font: 500 20px/1 var(--mtl-serif);
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.showcase.mtl-premium-showcase .mtl-premium__art-stamp i {
  color: #cfc6b4;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Reading panel (the stock figcaption holds only the title) ---------- */
.showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption) {
  position: relative !important;
  inset: auto !important;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 46px clamp(28px, 4.4cqi, 60px) 42px !important;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 0% 0%, rgba(214, 172, 104, .14), transparent 72%),
    radial-gradient(ellipse 70% 40% at 20% 100%, rgba(86, 128, 150, .09), transparent 75%) !important;
  color: var(--mtl-paper) !important;
  text-align: left !important;
  white-space: normal !important;
  text-overflow: clip !important;
  font: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none;
}
/* Short gilt rule above the title (a flex item, so it never fights the line clamp). */
.showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption)::before {
  content: "";
  flex: 0 0 auto;
  width: 44px;
  height: 2px;
  margin-bottom: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mtl-gold-hi), var(--mtl-gold-lo));
  box-shadow: 0 0 14px rgba(232, 196, 138, .45);
}
.showcase.mtl-premium-showcase .mtl-premium__title {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow-wrap: anywhere;
  text-wrap: balance;
  color: var(--mtl-paper);
  font-family: var(--mtl-serif);
  font-size: clamp(30px, 4.1cqi, 47px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .35);
}
.showcase.mtl-premium-showcase .mtl-premium__description {
  display: -webkit-box;
  width: 100%;
  max-width: 46ch;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: var(--mtl-mist);
  font: 400 14.5px/1.66 var(--mtl-sans);
  letter-spacing: .003em;
  text-wrap: pretty;
}
.showcase.mtl-premium-showcase .mtl-premium__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font: 650 11px/1.2 var(--mtl-sans);
  letter-spacing: .03em;
}
.showcase.mtl-premium-showcase .mtl-premium__meta > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(232, 196, 138, .30);
  color: #efd9b1;
  background: rgba(232, 196, 138, .075);
}
.showcase.mtl-premium-showcase .mtl-premium__status::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.showcase.mtl-premium-showcase .mtl-premium__status[data-status="ongoing"]::before { animation: mtl-pulse 2.6s ease-in-out infinite; }
.showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="completed"],
.showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="complete"] {
  border-color: rgba(133, 202, 174, .40);
  color: #c4e7d8;
  background: rgba(133, 202, 174, .09);
}
.showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="oneshot"] {
  border-color: rgba(150, 190, 226, .40);
  color: #cde0f3;
  background: rgba(150, 190, 226, .09);
}
.showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="hiatus"] {
  border-color: rgba(222, 160, 120, .42);
  color: #f0cdb2;
  background: rgba(222, 160, 120, .09);
}
.showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="canceled"],
.showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="cancelled"] {
  border-color: rgba(214, 130, 130, .40);
  color: #eebcbc;
  background: rgba(214, 130, 130, .09);
}
.showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__rating {
  border-color: rgba(227, 237, 238, .22);
  color: #cdd7d6;
  background: rgba(227, 237, 238, .055);
}

/* Compact solid-gold CTA. A visual part of the single Fictioneer story link,
   not a nested button/anchor (which would be invalid interactive markup). */
.showcase.mtl-premium-showcase .mtl-premium__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  width: max-content;
  max-width: 100%;
  min-height: 48px;
  margin-top: auto;
  padding: 0 0 0 20px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 238, 205, .75);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--mtl-gold-hi) 0%, #e9c88f 48%, var(--mtl-gold-lo) 100%);
  box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .55);
  color: #151d23;
  font: 750 13.5px/1.2 var(--mtl-sans);
  letter-spacing: .01em;
  transition: box-shadow .25s ease, transform .25s var(--mtl-ease), filter .25s ease;
}
.showcase.mtl-premium-showcase .mtl-premium__cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: transform .7s var(--mtl-ease);
}
.showcase.mtl-premium-showcase .mtl-premium__cta-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-left: 1px solid rgba(21, 29, 35, .17);
}
.showcase.mtl-premium-showcase .mtl-premium__cta-icon svg {
  display: block;
  width: 19px;
  height: 19px;
  transition: transform .3s var(--mtl-ease);
}
@media (hover: hover) {
  .showcase.mtl-premium-showcase .showcase__list-item-link:hover .showcase__image { transform: scale(1.055); }
  .showcase.mtl-premium-showcase .showcase__list-item-link:hover .mtl-premium__cta {
    filter: brightness(1.05) saturate(1.05);
    box-shadow: 0 16px 30px -8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
    transform: translateY(-2px);
  }
  .showcase.mtl-premium-showcase .showcase__list-item-link:hover .mtl-premium__cta::after { transform: translateX(520%) skewX(-18deg); }
  .showcase.mtl-premium-showcase .showcase__list-item-link:hover .mtl-premium__cta-icon svg { transform: translateX(4px); }
}
.showcase.mtl-premium-showcase .showcase__list-item-link:active .mtl-premium__cta { transform: translateY(0) scale(.985); }

/* ---------- Floating glass controls, INSIDE the artwork ---------- */
.showcase.mtl-premium-showcase .splide__arrows {
  position: absolute;
  inset: auto var(--mtl-edge-x) var(--mtl-edge-y) auto;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  height: auto;
  padding: var(--mtl-ctl-pad);
  border: 1px solid rgba(246, 230, 198, .30);
  border-radius: 14px;
  background: rgba(9, 15, 20, .66);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .5);
}
.showcase.mtl-premium-showcase .splide__arrow {
  position: relative;
  inset: auto;
  display: grid;
  place-items: center;
  flex: 0 0 var(--mtl-ctl);
  width: var(--mtl-ctl);
  height: var(--mtl-ctl);
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  color: var(--mtl-gold);
  cursor: pointer;
  opacity: 1;
  transition: background .2s ease, transform .2s var(--mtl-ease);
}
.showcase.mtl-premium-showcase .splide__arrow--prev { left: auto; right: auto; transform: scaleX(-1); }
.showcase.mtl-premium-showcase .splide__arrow--next { left: auto; right: auto; transform: none; }
.showcase.mtl-premium-showcase .splide__arrow svg { width: 15px; height: 15px; fill: var(--mtl-gold); }
@media (hover: hover) {
  .showcase.mtl-premium-showcase .splide__arrow:hover { background: rgba(232, 196, 138, .22); }
}
.showcase.mtl-premium-showcase .splide__arrow--prev:active { transform: scaleX(-1) scale(.92); }
.showcase.mtl-premium-showcase .splide__arrow--next:active { transform: scale(.92); }
.showcase.mtl-premium-showcase .splide__arrow:focus-visible,
.showcase.mtl-premium-showcase .mtl-premium__autoplay:focus-visible { outline: 2px solid var(--mtl-gold); outline-offset: 3px; }

/* Fictioneer's Splide binds the pause/play toggle automatically. It sits beside the
   arrows (same height, same glass), never over the reading panel. */
.showcase.mtl-premium-showcase .mtl-premium__autoplay {
  position: absolute;
  z-index: 12;
  inset: auto calc(var(--mtl-edge-x) + var(--mtl-bar-w) + 8px) var(--mtl-edge-y) auto;
  display: grid;
  place-items: center;
  width: var(--mtl-bar-h);
  height: var(--mtl-bar-h);
  padding: 0;
  margin: 0;
  border: 1px solid rgba(246, 230, 198, .30);
  border-radius: 14px;
  background: rgba(9, 15, 20, .66);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .5);
  color: var(--mtl-gold);
  cursor: pointer;
  transition: background .2s ease;
}
@media (hover: hover) {
  .showcase.mtl-premium-showcase .mtl-premium__autoplay:hover { background: rgba(40, 52, 60, .78); }
}
.showcase.mtl-premium-showcase .mtl-premium__autoplay::before {
  content: "";
  width: 12px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.showcase.mtl-premium-showcase .mtl-premium__autoplay.is-active::before {
  width: 12px;
  height: 14px;
  clip-path: polygon(0 0, 33% 0, 33% 100%, 0 100%, 0 0, 67% 0, 100% 0, 100% 100%, 67% 100%, 67% 0);
}
.showcase.mtl-premium-showcase .mtl-premium__autoplay span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}
.showcase.mtl-premium-showcase:not(.is-initialized) .mtl-premium__autoplay,
.showcase.mtl-premium-showcase:not(.is-overflow) .splide__arrows,
.showcase.mtl-premium-showcase:not(.is-overflow) .mtl-premium__autoplay { display: none; }
.showcase.mtl-premium-showcase .splide__pagination { display: none !important; }

/* Mobile autoplay is disabled in the Splide options (viewport < 768px), so the
   pause control is not needed there. */
@media (max-width: 767px) {
  .showcase.mtl-premium-showcase .mtl-premium__autoplay { display: none !important; }
}

/* Unusually long titles stay readable without escaping the fixed-height panel. */
@container mtl (min-width: 768px) {
  .showcase.mtl-premium-showcase .showcase__list-item.mtl-premium--long-title .mtl-premium__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    font-size: clamp(26px, 3.1cqi, 35px);
    line-height: 1.09;
  }
  .showcase.mtl-premium-showcase .showcase__list-item.mtl-premium--long-title .mtl-premium__description { -webkit-line-clamp: 2; line-clamp: 2; }
  .showcase.mtl-premium-showcase .showcase__list-item.mtl-premium--extra-long .mtl-premium__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    font-size: clamp(22px, 2.5cqi, 29px);
    line-height: 1.08;
  }
  .showcase.mtl-premium-showcase .showcase__list-item.mtl-premium--extra-long .mtl-premium__description { display: none; }
}

/* ---------- Tablet / narrow content areas ---------- */
@container mtl (min-width: 768px) and (max-width: 1100px) {
  .showcase.mtl-premium-showcase .showcase__list-item { height: clamp(410px, 47cqi, 470px) !important; }
  .showcase.mtl-premium-showcase .showcase__list-item-figure { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
  .showcase.mtl-premium-showcase .showcase__list-item-figure::before { inset: 0 0 0 40%; }
  .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption) {
    padding: 36px clamp(26px, 4cqi, 40px) 34px !important;
    gap: 13px;
  }
  .showcase.mtl-premium-showcase .mtl-premium__title { font-size: clamp(26px, 3.5cqi, 34px); }
  .showcase.mtl-premium-showcase .mtl-premium__description { -webkit-line-clamp: 2; line-clamp: 2; font-size: 14px; }
  .showcase.mtl-premium-showcase .mtl-premium__art-stamp { top: 26px; right: 26px; }
  .showcase.mtl-premium-showcase .splide__arrows,
  .showcase.mtl-premium-showcase .mtl-premium__autoplay { --mtl-edge-x: 26px; --mtl-edge-y: 26px; }
}

/* ---------- Mobile: art-forward story card ----------
   Artwork on top, fading into the reading panel; the title rises into the fade.
   Touch targets are 44px. */
@container mtl (max-width: 767px) {
  .showcase.mtl-premium-showcase .splide__track { --mtl-radius: 22px; }
  .showcase.mtl-premium-showcase .showcase__list-item,
  .showcase.mtl-premium-showcase .splide__arrows,
  .showcase.mtl-premium-showcase .mtl-premium__autoplay { --mtl-art-h: clamp(176px, calc((100cqi - 4px) * .5625), 360px); }
  .showcase.mtl-premium-showcase .showcase__list-item {
    height: auto !important;
    min-height: 0;
    box-shadow: 0 16px 34px -20px rgba(4, 9, 13, .6), 0 2px 6px rgba(4, 9, 13, .14);
  }
  .showcase.mtl-premium-showcase .showcase__list-item-figure {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--mtl-art-h) auto;
    height: 100%;
    min-height: 0;
    background: var(--mtl-ink);
  }
  .showcase.mtl-premium-showcase .showcase__image,
  .showcase.mtl-premium-showcase .mtl-premium__art {
    grid-column: 1;
    grid-row: 1;
  }
  .showcase.mtl-premium-showcase .showcase__image {
    object-position: center 35%;
    height: 100%;
    width: 100%;
  }
  .showcase.mtl-premium-showcase .mtl-premium__art .showcase__image { object-position: center; }
  .showcase.mtl-premium-showcase .showcase__list-item-figure::before {
    inset: 0 0 auto;
    height: calc(var(--mtl-art-h) + 2px);
    background: linear-gradient(180deg,
      rgba(7, 12, 16, .34) 0%, rgba(7, 12, 16, 0) 22%,
      rgba(13, 20, 25, 0) 80%, var(--mtl-ink) 100%);
  }
  .showcase.mtl-premium-showcase .mtl-premium__art-stamp {
    top: 12px;
    right: 12px;
    gap: 6px;
    padding: 6px 11px 6px 10px;
    font-size: 9px;
  }
  .showcase.mtl-premium-showcase .mtl-premium__art-stamp > span { display: none; }
  .showcase.mtl-premium-showcase .mtl-premium__art-stamp strong { font-size: 17px; }
  .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption) {
    grid-column: 1;
    grid-row: 2;
    gap: 14px;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    margin-top: -30px;
    padding: 0 clamp(20px, 6.2cqi, 32px) 26px !important;
    background:
      linear-gradient(180deg, rgba(13, 20, 25, 0) 0, var(--mtl-ink) 30px),
      radial-gradient(ellipse 90% 45% at 100% 100%, rgba(214, 172, 104, .10), transparent 72%) !important;
  }
  .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption)::before { width: 38px; margin-bottom: 2px; }
  .showcase.mtl-premium-showcase .mtl-premium__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    font-size: clamp(22px, 6.2cqi, 30px);
    line-height: 1.14;
    letter-spacing: -.036em;
  }
  .showcase.mtl-premium-showcase .mtl-premium__description {
    font-size: 13.5px;
    line-height: 1.6;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    color: #c0cbca;
    max-width: none;
  }
  .showcase.mtl-premium-showcase .mtl-premium__meta { gap: 7px; }
  .showcase.mtl-premium-showcase .mtl-premium__meta > span { min-height: 26px; padding: 4px 10px; font-size: 10.5px; }
  .showcase.mtl-premium-showcase .mtl-premium__cta { min-height: 50px; margin-top: auto; padding-left: 20px; font-size: 14px; }
  .showcase.mtl-premium-showcase .mtl-premium__cta-icon { flex-basis: 48px; width: 48px; height: 48px; }
  .showcase.mtl-premium-showcase .splide__arrows,
  .showcase.mtl-premium-showcase .mtl-premium__autoplay { --mtl-ctl: 44px; --mtl-edge-x: calc(clamp(20px, 6.2cqi, 32px) - 3px); }
  .showcase.mtl-premium-showcase .splide__arrows {
    inset: auto var(--mtl-edge-x) 28px auto;
    border-radius: 15px;
  }
  .showcase.mtl-premium-showcase .mtl-premium__autoplay {
    inset: auto calc(var(--mtl-edge-x) + var(--mtl-bar-w) + 8px) 28px auto;
    border-radius: 15px;
  }
}

@media (max-width: 359px) {
  /* Keep 44px navigation touch targets; recover space from gaps/padding instead. */
  .showcase.mtl-premium-showcase { --mtl-ctl-pad: 2px; }
  .showcase.mtl-premium-showcase .splide__arrows { gap: 0; }
  .showcase.mtl-premium-showcase .mtl-premium__cta { padding-left: 15px; font-size: 13px; gap: 8px; }
  .showcase.mtl-premium-showcase .mtl-premium__cta-icon { flex-basis: 42px; width: 42px; }
  .showcase.mtl-premium-showcase .showcase__list-item,
  .showcase.mtl-premium-showcase .splide__arrows,
  .showcase.mtl-premium-showcase .mtl-premium__autoplay { --mtl-art-h: 176px; }
}

/* ---------- Motion, contrast and print preferences ---------- */
@keyframes mtl-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase.mtl-premium-showcase *, .showcase.mtl-premium-showcase *::before, .showcase.mtl-premium-showcase *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .showcase.mtl-premium-showcase .showcase__list-item-link:hover .showcase__image { transform: none; }
}
@media (forced-colors: active) {
  .showcase.mtl-premium-showcase .showcase__list-item { border-color: CanvasText; }
  .showcase.mtl-premium-showcase .mtl-premium__cta,
  .showcase.mtl-premium-showcase .splide__arrows,
  .showcase.mtl-premium-showcase .mtl-premium__autoplay { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .showcase.mtl-premium-showcase .splide__arrow svg { fill: ButtonText; }
}

/* Fallback for browsers without container queries: viewport breakpoints. */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .showcase.mtl-premium-showcase .showcase__list-item.mtl-premium--long-title .mtl-premium__title {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      line-clamp: 5;
      font-size: clamp(26px, 3.1vw, 35px);
      line-height: 1.09;
    }
    .showcase.mtl-premium-showcase .showcase__list-item.mtl-premium--long-title .mtl-premium__description { -webkit-line-clamp: 2; line-clamp: 2; }
    .showcase.mtl-premium-showcase .showcase__list-item.mtl-premium--extra-long .mtl-premium__title {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      line-clamp: 5;
      font-size: clamp(22px, 2.5vw, 29px);
      line-height: 1.08;
    }
    .showcase.mtl-premium-showcase .showcase__list-item.mtl-premium--extra-long .mtl-premium__description { display: none; }
  }
  @media (min-width: 768px) and (max-width: 1100px) {
    .showcase.mtl-premium-showcase .showcase__list-item { height: clamp(410px, 47vw, 470px) !important; }
    .showcase.mtl-premium-showcase .showcase__list-item-figure { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
    .showcase.mtl-premium-showcase .showcase__list-item-figure::before { inset: 0 0 0 40%; }
    .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption) {
      padding: 36px clamp(26px, 4vw, 40px) 34px !important;
      gap: 13px;
    }
    .showcase.mtl-premium-showcase .mtl-premium__title { font-size: clamp(26px, 3.5vw, 34px); }
    .showcase.mtl-premium-showcase .mtl-premium__description { -webkit-line-clamp: 2; line-clamp: 2; font-size: 14px; }
    .showcase.mtl-premium-showcase .mtl-premium__art-stamp { top: 26px; right: 26px; }
    .showcase.mtl-premium-showcase .splide__arrows,
    .showcase.mtl-premium-showcase .mtl-premium__autoplay { --mtl-edge-x: 26px; --mtl-edge-y: 26px; }
  }
  @media (max-width: 767px) {
    .showcase.mtl-premium-showcase .splide__track { --mtl-radius: 22px; }
    .showcase.mtl-premium-showcase .showcase__list-item,
    .showcase.mtl-premium-showcase .splide__arrows,
    .showcase.mtl-premium-showcase .mtl-premium__autoplay { --mtl-art-h: clamp(176px, calc((100vw - 4px) * .5625), 360px); }
    .showcase.mtl-premium-showcase .showcase__list-item {
      height: auto !important;
      min-height: 0;
      box-shadow: 0 16px 34px -20px rgba(4, 9, 13, .6), 0 2px 6px rgba(4, 9, 13, .14);
    }
    .showcase.mtl-premium-showcase .showcase__list-item-figure {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--mtl-art-h) auto;
      height: 100%;
      min-height: 0;
      background: var(--mtl-ink);
    }
    .showcase.mtl-premium-showcase .showcase__image,
    .showcase.mtl-premium-showcase .mtl-premium__art {
      grid-column: 1;
      grid-row: 1;
    }
    .showcase.mtl-premium-showcase .showcase__image {
      object-position: center 35%;
      height: 100%;
      width: 100%;
    }
    .showcase.mtl-premium-showcase .mtl-premium__art .showcase__image { object-position: center; }
    .showcase.mtl-premium-showcase .showcase__list-item-figure::before {
      inset: 0 0 auto;
      height: calc(var(--mtl-art-h) + 2px);
      background: linear-gradient(180deg,
        rgba(7, 12, 16, .34) 0%, rgba(7, 12, 16, 0) 22%,
        rgba(13, 20, 25, 0) 80%, var(--mtl-ink) 100%);
    }
    .showcase.mtl-premium-showcase .mtl-premium__art-stamp {
      top: 12px;
      right: 12px;
      gap: 6px;
      padding: 6px 11px 6px 10px;
      font-size: 9px;
    }
    .showcase.mtl-premium-showcase .mtl-premium__art-stamp > span { display: none; }
    .showcase.mtl-premium-showcase .mtl-premium__art-stamp strong { font-size: 17px; }
    .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption) {
      grid-column: 1;
      grid-row: 2;
      gap: 14px;
      width: 100%;
      height: auto;
      min-height: 0;
      overflow: visible;
      margin-top: -30px;
      padding: 0 clamp(20px, 6.2vw, 32px) 26px !important;
      background:
        linear-gradient(180deg, rgba(13, 20, 25, 0) 0, var(--mtl-ink) 30px),
        radial-gradient(ellipse 90% 45% at 100% 100%, rgba(214, 172, 104, .10), transparent 72%) !important;
    }
    .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption)::before { width: 38px; margin-bottom: 2px; }
    .showcase.mtl-premium-showcase .mtl-premium__title {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      font-size: clamp(22px, 6.2vw, 30px);
      line-height: 1.14;
      letter-spacing: -.036em;
    }
    .showcase.mtl-premium-showcase .mtl-premium__description {
      font-size: 13.5px;
      line-height: 1.6;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      color: #c0cbca;
      max-width: none;
    }
    .showcase.mtl-premium-showcase .mtl-premium__meta { gap: 7px; }
    .showcase.mtl-premium-showcase .mtl-premium__meta > span { min-height: 26px; padding: 4px 10px; font-size: 10.5px; }
    .showcase.mtl-premium-showcase .mtl-premium__cta { min-height: 50px; margin-top: auto; padding-left: 20px; font-size: 14px; }
    .showcase.mtl-premium-showcase .mtl-premium__cta-icon { flex-basis: 48px; width: 48px; height: 48px; }
    .showcase.mtl-premium-showcase .splide__arrows,
    .showcase.mtl-premium-showcase .mtl-premium__autoplay { --mtl-ctl: 44px; --mtl-edge-x: calc(clamp(20px, 6.2vw, 32px) - 3px); }
    .showcase.mtl-premium-showcase .splide__arrows {
      inset: auto var(--mtl-edge-x) 28px auto;
      border-radius: 15px;
    }
    .showcase.mtl-premium-showcase .mtl-premium__autoplay {
      inset: auto calc(var(--mtl-edge-x) + var(--mtl-bar-w) + 8px) 28px auto;
      border-radius: 15px;
    }
  }
}

/* ---------- Fictioneer light mode: warm editorial paper + gilt ----------
   The reading surface becomes genuinely light while artwork overlays remain
   dark glass where they sit directly on unpredictable cover imagery. */
:root[data-mode="light"] .showcase.mtl-premium-showcase {
  --mtl-ink: #f7f3ec;
  --mtl-ink-2: #e8e0d4;
  --mtl-paper: #1c2830;
  --mtl-mist: #617077;
  --mtl-gold: #98651f;
  --mtl-gold-hi: #c08b3a;
  --mtl-gold-lo: #7f5318;
  color: var(--mtl-paper);
  color-scheme: light;
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item {
  background:
    linear-gradient(var(--mtl-ink), var(--mtl-ink)) padding-box,
    linear-gradient(150deg, rgba(164, 112, 39, .52), rgba(190, 145, 78, .18) 34%, rgba(190, 145, 78, .09) 62%, rgba(137, 92, 31, .34)) border-box;
  box-shadow: 0 24px 48px -27px rgba(49, 42, 31, .34), 0 3px 9px rgba(49, 42, 31, .10);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item-figure {
  background: var(--mtl-ink);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__image._no-cover {
  background:
    radial-gradient(circle at 68% 24%, rgba(194, 145, 71, .34), transparent 39%),
    linear-gradient(145deg, #eee6d9, #ccd5d3 44%, #aebcbd);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__art {
  background: var(--mtl-ink-2);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__backdrop {
  filter: blur(26px) saturate(1.18) brightness(.76);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item-figure::before {
  background:
    linear-gradient(90deg, var(--mtl-ink) 0, rgba(247, 243, 236, .92) 11%, rgba(247, 243, 236, .18) 44%, rgba(247, 243, 236, .04) 100%),
    linear-gradient(0deg, rgba(35, 40, 42, .16), transparent 38%, rgba(255, 255, 255, .12));
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption) {
  background:
    radial-gradient(ellipse 82% 58% at 0% 0%, rgba(191, 139, 57, .13), transparent 72%),
    radial-gradient(ellipse 72% 42% at 18% 100%, rgba(85, 125, 139, .08), transparent 75%) !important;
  color: var(--mtl-paper) !important;
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption)::before {
  box-shadow: 0 0 13px rgba(150, 99, 29, .20);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__title {
  color: var(--mtl-paper);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__description {
  color: var(--mtl-mist);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__meta > span {
  border-color: rgba(154, 103, 31, .28);
  color: #6f4a18;
  background: rgba(185, 132, 54, .10);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="completed"],
:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="complete"] {
  border-color: rgba(55, 111, 87, .28);
  color: #356b55;
  background: rgba(75, 137, 111, .10);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="oneshot"] {
  border-color: rgba(61, 102, 138, .28);
  color: #3d668a;
  background: rgba(76, 119, 157, .10);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="hiatus"] {
  border-color: rgba(139, 91, 50, .30);
  color: #85552e;
  background: rgba(174, 112, 60, .10);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="canceled"],
:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__status[data-status="cancelled"] {
  border-color: rgba(138, 71, 71, .28);
  color: #874747;
  background: rgba(174, 87, 87, .09);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__meta .mtl-premium__rating {
  border-color: rgba(75, 91, 100, .22);
  color: #4e5d65;
  background: rgba(75, 91, 100, .07);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__cta {
  border-color: rgba(144, 95, 29, .42);
  background: linear-gradient(180deg, #f2d9a9 0%, #dfba76 48%, #c89749 100%);
  box-shadow: 0 11px 24px -10px rgba(83, 58, 24, .34), inset 0 1px 0 rgba(255, 255, 255, .68);
  color: #1d2529;
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__art-stamp,
:root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrows,
:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__autoplay {
  border-color: rgba(255, 243, 216, .34);
  background: rgba(10, 16, 20, .70);
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__art-stamp {
  color: #f3d69e;
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__art-stamp i {
  color: #ded4c3;
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrow,
:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__autoplay {
  color: #efcb8b;
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrow svg {
  fill: #efcb8b;
}

:root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrow:focus-visible,
:root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__autoplay:focus-visible {
  outline-color: #f2d39a;
}

@media (hover: hover) {
  :root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item-link:hover .mtl-premium__cta {
    box-shadow: 0 15px 28px -11px rgba(83, 58, 24, .40), inset 0 1px 0 rgba(255, 255, 255, .75);
  }
  :root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrow:hover {
    background: rgba(239, 203, 139, .20);
  }
  :root[data-mode="light"] .showcase.mtl-premium-showcase .mtl-premium__autoplay:hover {
    background: rgba(26, 35, 40, .82);
  }
}

/* In the stacked mobile card the controls sit over the reading surface, not
   the artwork, so they switch to light frosted controls as well. */
@container mtl (max-width: 767px) {
  :root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item {
    box-shadow: 0 17px 36px -22px rgba(58, 48, 34, .30), 0 2px 7px rgba(58, 48, 34, .09);
  }
  :root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item-figure::before {
    background: linear-gradient(180deg,
      rgba(8, 13, 16, .30) 0%, rgba(8, 13, 16, 0) 22%,
      rgba(247, 243, 236, 0) 80%, var(--mtl-ink) 100%);
  }
  :root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption) {
    background:
      linear-gradient(180deg, rgba(247, 243, 236, 0) 0, var(--mtl-ink) 30px),
      radial-gradient(ellipse 90% 45% at 100% 100%, rgba(185, 132, 54, .10), transparent 72%) !important;
  }
  :root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrows {
    border-color: rgba(113, 82, 39, .18);
    background: rgba(255, 252, 246, .88);
    box-shadow: 0 10px 24px -12px rgba(54, 45, 33, .30);
  }
  :root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrow {
    background: rgba(147, 103, 39, .07);
    color: var(--mtl-gold);
  }
  :root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrow svg {
    fill: var(--mtl-gold);
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    :root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item {
      box-shadow: 0 17px 36px -22px rgba(58, 48, 34, .30), 0 2px 7px rgba(58, 48, 34, .09);
    }
    :root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item-figure::before {
      background: linear-gradient(180deg,
        rgba(8, 13, 16, .30) 0%, rgba(8, 13, 16, 0) 22%,
        rgba(247, 243, 236, 0) 80%, var(--mtl-ink) 100%);
    }
    :root[data-mode="light"] .showcase.mtl-premium-showcase .showcase__list-item-figcaption:is(figcaption) {
      background:
        linear-gradient(180deg, rgba(247, 243, 236, 0) 0, var(--mtl-ink) 30px),
        radial-gradient(ellipse 90% 45% at 100% 100%, rgba(185, 132, 54, .10), transparent 72%) !important;
    }
    :root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrows {
      border-color: rgba(113, 82, 39, .18);
      background: rgba(255, 252, 246, .88);
      box-shadow: 0 10px 24px -12px rgba(54, 45, 33, .30);
    }
    :root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrow {
      background: rgba(147, 103, 39, .07);
      color: var(--mtl-gold);
    }
    :root[data-mode="light"] .showcase.mtl-premium-showcase .splide__arrow svg {
      fill: var(--mtl-gold);
    }
  }
}