/* ISOLELE page-level finish layer.  All selectors are scoped by the route stored on #app. */

#app[data-route] > main {
  min-height: 100vh;
  background: var(--isolele-bg, #fff) !important;
  color: var(--isolele-text, #1a1a1a);
  transition: background-color .8s ease, color .8s ease;
}

#app[data-route$="/characters"] > main,
#app[data-route$="/comics"] > main,
#app[data-route$="/games"] > main,
#app[data-route$="/books/zaiire"] > main,
#app[data-route$="/privacy"] > main,
#app[data-route$="/careers"] > main,
#app[data-route$="/contact"] > main {
  padding-top: clamp(4.5rem, 7vw, 6.5rem);
}

#app[data-route$="/characters"] main section,
#app[data-route$="/comics"] main section,
#app[data-route$="/games"] main section,
#app[data-route$="/books/zaiire"] main section,
#app[data-route$="/privacy"] main section,
#app[data-route$="/careers"] main section,
#app[data-route$="/contact"] main section {
  scroll-margin-top: 5rem;
}

#app[data-route$="/characters"] h1,
#app[data-route$="/characters"] h2,
#app[data-route$="/characters"] h3,
#app[data-route$="/comics"] h1,
#app[data-route$="/comics"] h2,
#app[data-route$="/comics"] h3,
#app[data-route$="/games"] h1,
#app[data-route$="/games"] h2,
#app[data-route$="/games"] h3,
#app[data-route$="/books/zaiire"] h1,
#app[data-route$="/books/zaiire"] h2,
#app[data-route$="/books/zaiire"] h3 {
  text-wrap: balance;
  letter-spacing: .02em;
}

#app[data-route$="/characters"] article,
#app[data-route$="/comics"] article,
#app[data-route$="/games"] article,
#app[data-route$="/books/zaiire"] article {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

#app[data-route$="/characters"] article:hover,
#app[data-route$="/comics"] article:hover,
#app[data-route$="/games"] article:hover,
#app[data-route$="/books/zaiire"] article:hover {
  transform: translateY(-4px);
}

#app[data-route$="/characters"] button,
#app[data-route$="/comics"] button,
#app[data-route$="/games"] button,
#app[data-route$="/books/zaiire"] button,
#app[data-route$="/privacy"] button,
#app[data-route$="/careers"] button,
#app[data-route$="/contact"] button {
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

#app[data-route$="/characters"] button:focus-visible,
#app[data-route$="/comics"] button:focus-visible,
#app[data-route$="/games"] button:focus-visible,
#app[data-route$="/books/zaiire"] button:focus-visible,
#app[data-route$="/privacy"] button:focus-visible,
#app[data-route$="/careers"] button:focus-visible,
#app[data-route$="/contact"] button:focus-visible {
  outline: 2px solid var(--isolele-accent, #b8860b);
  outline-offset: 3px;
}

#app[data-route$="/privacy"] section,
#app[data-route$="/careers"] section,
#app[data-route$="/contact"] section {
  max-width: 72rem;
  margin-inline: auto;
}

@media (max-width: 1023px) {
  #app[data-route] > main {
    padding-bottom: 6.5rem;
  }

  #app[data-route$="/characters"] article,
  #app[data-route$="/comics"] article,
  #app[data-route$="/games"] article,
  #app[data-route$="/books/zaiire"] article {
    transform: none !important;
  }

  #app[data-route$="/characters"] article:active,
  #app[data-route$="/comics"] article:active,
  #app[data-route$="/games"] article:active,
  #app[data-route$="/books/zaiire"] article:active {
    transform: scale(.985) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-route] *, #app[data-route] *::before, #app[data-route] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* Final interaction and institutional-page finish layer. */
.home-news-history-button {
  margin-left: .75rem;
  border-color: var(--isolele-accent, #b8860b);
  color: var(--isolele-accent, #b8860b);
  background: transparent;
}
.home-news-history-button:hover,
.home-news-history-button:focus-visible {
  color: var(--isolele-bg, #fff);
  background: var(--isolele-accent, #b8860b);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(184, 134, 11, .2);
}
.news-home-card-changing {
  animation: home-news-card-fade .65s ease both;
}
@keyframes home-news-card-fade {
  from { opacity: .25; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#app[data-route$="/careers"] > main,
#app[data-route$="/privacy"] > main,
#app[data-route$="/contact"] > main {
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--isolele-accent, #b8860b) 10%, transparent), transparent 30rem),
    var(--isolele-bg, #fff) !important;
}
#app[data-route$="/careers"] main section,
#app[data-route$="/privacy"] main section,
#app[data-route$="/contact"] main section {
  width: min(100% - 2rem, 72rem);
  padding: clamp(2rem, 5vw, 4.75rem) clamp(1.25rem, 4vw, 4rem);
  border: 1px solid color-mix(in srgb, var(--isolele-accent, #b8860b) 28%, transparent);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--isolele-bg, #fff) 92%, var(--isolele-accent, #b8860b));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .08);
}
#app[data-route$="/careers"] main section > div:first-child,
#app[data-route$="/privacy"] main section > div:first-child,
#app[data-route$="/contact"] main section > div:first-child {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
#app[data-route$="/careers"] main h1,
#app[data-route$="/privacy"] main h1,
#app[data-route$="/contact"] main h1 {
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
#app[data-route$="/careers"] main h2,
#app[data-route$="/privacy"] main h2,
#app[data-route$="/contact"] main h2 {
  margin-top: 2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--isolele-accent, #b8860b) 34%, transparent);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  letter-spacing: .02em;
}
#app[data-route$="/careers"] main h3,
#app[data-route$="/privacy"] main h3,
#app[data-route$="/contact"] main h3 {
  margin-top: 1.35rem;
  color: var(--isolele-accent, #b8860b);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
#app[data-route$="/careers"] main p,
#app[data-route$="/privacy"] main p,
#app[data-route$="/contact"] main p,
#app[data-route$="/careers"] main li,
#app[data-route$="/privacy"] main li,
#app[data-route$="/contact"] main li {
  color: var(--isolele-text-secondary, #5b5b5b);
  line-height: 1.8;
}
#app[data-route$="/careers"] main .space-y-8 > div:has(h2),
#app[data-route$="/careers"] main .space-y-8 > div:has(h3),
#app[data-route$="/privacy"] main .space-y-8 > div:has(h2),
#app[data-route$="/contact"] main .space-y-8 > div:has(h2) {
  margin-top: 1.5rem;
  padding: 1.25rem clamp(1rem, 2vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--isolele-accent, #b8860b) 20%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--isolele-bg, #fff) 96%, var(--isolele-accent, #b8860b));
}
#app[data-route$="/careers"] main ul,
#app[data-route$="/privacy"] main ul,
#app[data-route$="/contact"] main ul {
  display: grid;
  gap: .65rem;
  margin-top: .9rem;
  padding-left: 1.2rem;
}
#app[data-route$="/careers"] main li::marker,
#app[data-route$="/privacy"] main li::marker,
#app[data-route$="/contact"] main li::marker {
  color: var(--isolele-accent, #b8860b);
}
#app[data-route$="/careers"] main a[href^="mailto:"],
#app[data-route$="/contact"] main a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .7rem;
  padding: .8rem 1.1rem;
  border: 1px solid var(--isolele-accent, #b8860b);
  border-radius: 999px;
  color: var(--isolele-accent, #b8860b);
  font-weight: 800;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
#app[data-route$="/careers"] main a[href^="mailto:"]:hover,
#app[data-route$="/contact"] main a[href^="mailto:"]:hover {
  color: var(--isolele-bg, #fff);
  background: var(--isolele-accent, #b8860b);
  transform: translateY(-2px);
}
#app[data-route$="/privacy"] main strong,
#app[data-route$="/careers"] main strong,
#app[data-route$="/contact"] main strong {
  color: var(--isolele-text, #1a1a1a);
}

.article-detail-page {
  min-height: 100vh;
}
.article-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  max-width: 78rem !important;
  margin-inline: auto !important;
  padding: clamp(2rem, 7vw, 7rem) clamp(1rem, 4vw, 4rem) !important;
}
.article-detail-media img {
  display: block;
  width: 100%;
  min-height: 28rem;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
}
.article-detail-kicker {
  color: var(--isolele-accent, #b8860b) !important;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.article-detail-copy h1 {
  margin-top: .8rem;
}
.article-detail-lead {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.65 !important;
}
.article-detail-copy time {
  display: block;
  margin-top: 1.25rem;
  color: var(--isolele-accent, #b8860b);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.article-detail-body {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--isolele-accent, #b8860b) 28%, transparent);
}
.article-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
@media (max-width: 760px) {
  .home-news-history-button { display: block; margin: .75rem 0 0; width: 100%; }
  #app[data-route$="/careers"] main section,
  #app[data-route$="/privacy"] main section,
  #app[data-route$="/contact"] main section { width: min(100% - 1rem, 72rem); border-radius: 1rem; }
  .article-detail-shell { grid-template-columns: 1fr; }
  .article-detail-media img { min-height: 16rem; }
}


/* Homepage section fidelity and responsive grid pass */
.home-section-visible { opacity: 1 !important; visibility: visible !important; }
.home-section-visible > *, .home-section-visible [style*="opacity:0"], .home-section-visible [style*="opacity: 0"] { opacity: 1 !important; visibility: visible !important; }
.home-latest-news-section { position: relative; display: block !important; min-height: 420px; z-index: 2; }
.home-latest-news-section h2, .home-latest-news-section a[href$="/news"], .home-news-button-visible { opacity: 1 !important; visibility: visible !important; }
.home-news-button-visible { display: inline-flex !important; position: relative; z-index: 3; }
.home-products-section .home-product-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); align-items: stretch; }
.home-shango-product { min-height: 100%; background: var(--isolele-bg, #fff); border-color: color-mix(in srgb, var(--isolele-accent, #b8860b) 35%, transparent); transition: transform .35s ease, box-shadow .35s ease; }
.home-shango-product:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(0,0,0,.16); }
.home-product-image { aspect-ratio: 3 / 4; overflow: hidden; background: #071b40; }
.home-product-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.home-product-copy { padding: 1.15rem; color: var(--isolele-text, #222); }
.home-product-kicker { color: var(--isolele-accent, #b8860b); font-size: .68rem; letter-spacing: .16em; font-weight: 800; }
.home-product-copy h3 { margin: .4rem 0; font-weight: 900; letter-spacing: .06em; }
.home-product-copy span { display: inline-block; margin-top: .9rem; color: var(--isolele-accent, #b8860b); font-weight: 800; font-size: .75rem; letter-spacing: .1em; }
.home-universe-section img { display: block; width: 100%; max-height: 720px; object-fit: cover; object-position: center; }
.home-chosen-rail { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; padding: .5rem .25rem 1.25rem; }
.home-shango-chosen { width: clamp(210px, 24vw, 300px); min-width: clamp(210px, 24vw, 300px); scroll-snap-align: start; border-radius: 1rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--isolele-accent, #b8860b) 40%, transparent); background: var(--isolele-bg, #fff); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.home-shango-chosen img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.home-shango-chosen div { padding: .9rem; color: var(--isolele-text, #222); }
.home-shango-chosen p { margin: 0; font-weight: 900; letter-spacing: .06em; }
.home-shango-chosen span { display: block; margin-top: .25rem; font-size: .72rem; color: var(--isolele-accent, #b8860b); letter-spacing: .08em; }
.home-collection-cta, .home-join-cta { position: relative; z-index: 3; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
.home-join-section img { width: 100%; object-fit: cover; }
@media (max-width: 1100px) { .home-products-section .home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .home-products-section .home-product-grid { grid-template-columns: 1fr; } .home-shango-chosen { width: 76vw; min-width: 76vw; } .home-universe-section img { max-height: 520px; object-fit: cover; } .home-latest-news-section { min-height: 520px; } }


/* File:// fidelity fix: the original Tailwind aspect utilities are not generated in this standalone build. */
.home-products-section .home-product-grid > a > .relative[class*="aspect-"] {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  min-height: 0;
  overflow: hidden;
  background: var(--isolele-bg-secondary, #071b40);
}
.home-products-section .home-product-grid > a > .relative[class*="aspect-"] > img[data-nimg="fill"] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.home-universe-section .relative[class*="aspect-"] > img[data-nimg="fill"],
.home-collection-section .relative[class*="aspect-"] > img[data-nimg="fill"],
.home-join-section .relative[class*="aspect-"] > img[data-nimg="fill"] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-universe-section .relative[class*="aspect-"] { position: relative; aspect-ratio: 16 / 9; min-height: clamp(280px, 45vw, 680px); overflow: hidden; }
.home-collection-section .relative[class*="aspect-"] { position: relative; aspect-ratio: 16 / 9; min-height: clamp(240px, 36vw, 560px); overflow: hidden; }
.home-join-section .relative[class*="aspect-"] { position: relative; aspect-ratio: 16 / 9; min-height: clamp(240px, 36vw, 560px); overflow: hidden; }
@media (max-width: 1100px) {
  .home-products-section .home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-products-section .home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .home-products-section .home-product-grid > a > .relative[class*="aspect-"] { aspect-ratio: 3 / 4; }
  .home-universe-section .relative[class*="aspect-"] { min-height: 300px; }
}

/* Branded CTA treatment for the hero and home cards. */
#app main[data-home-complete] #hero a button,
.home-products-section a span,
.home-collection-cta,
.home-join-cta,
.home-latest-news-section a[href$="/news"] {
  border: 1px solid color-mix(in srgb, var(--isolele-accent, #d4af37) 72%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--isolele-accent, #d4af37), var(--isolele-accent-secondary, #8f6b1d));
  color: #101010;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--isolele-accent, #d4af37) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.38);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#app main[data-home-complete] #hero a button:hover,
.home-products-section a:hover span,
.home-collection-cta:hover,
.home-join-cta:hover,
.home-latest-news-section a[href$="/news"]:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--isolele-accent, #d4af37) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.46);
}
.home-products-section a span { padding: .65rem 1rem; }
@media (max-width: 640px) {
  #app main[data-home-complete] #hero a button { min-height: 46px; padding: 12px 20px; font-size: 11px; }
}


/* Product and narrative media containers: preserve the original visual frame under file://. */
.home-products-section .home-product-grid > a {
  display: block;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 1rem;
}
.home-products-section .home-product-grid > a > .relative[class*="aspect-"] {
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: clamp(260px, 26vw, 420px);
}
.home-products-section .home-product-grid > a > .relative[class*="aspect-"] img[data-nimg="fill"] {
  opacity: 1 !important;
  visibility: visible !important;
}
.home-universe-section .relative[class*="aspect-"],
.home-collection-section .relative[class*="aspect-"],
.home-join-section .relative[class*="aspect-"] {
  height: auto !important;
}
.home-universe-section .relative[class*="aspect-"] > img[data-nimg="fill"],
.home-collection-section .relative[class*="aspect-"] > img[data-nimg="fill"],
.home-join-section .relative[class*="aspect-"] > img[data-nimg="fill"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Match the compact gold-outline controls used on the KUFU detail page. */
.game-detail-page a[href*="/comics"],
.game-detail-page a[href*="/games"],
.game-detail-page button,
[data-page="kufu-game"] a,
[data-page="kufu-game"] button {
  border-radius: .35rem;
  font-weight: 800;
  letter-spacing: .03em;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.game-detail-page a[href*="/comics"]:hover,
.game-detail-page a[href*="/games"]:hover,
.game-detail-page button:hover,
[data-page="kufu-game"] a:hover,
[data-page="kufu-game"] button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

/* Final file:// correction: the original cards wrap the aspect frame inside a group div. */
.home-products-section .home-product-grid > a .relative[class*="aspect-"] {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: clamp(260px, 26vw, 420px) !important;
  min-height: clamp(260px, 26vw, 420px) !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background: var(--isolele-bg-secondary, #071b40) !important;
}
.home-products-section .home-product-grid > a .relative[class*="aspect-"] > img,
.home-products-section .home-product-grid > a .relative[class*="aspect-"] > img[data-nimg="fill"] {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.home-narrative-section .relative[class*="aspect-"] {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: clamp(260px, 42vw, 620px) !important;
  min-height: 260px !important;
  overflow: hidden !important;
}
.home-narrative-section .relative[class*="aspect-"] > img,
.home-narrative-section .relative[class*="aspect-"] > img[data-nimg="fill"] {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.home-narrative-section img:not([data-nimg="fill"]) {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 260px;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 640px) {
  .home-products-section .home-product-grid > a .relative[class*="aspect-"] {
    height: clamp(220px, 58vw, 360px) !important;
    min-height: clamp(220px, 58vw, 360px) !important;
  }
  .home-narrative-section .relative[class*="aspect-"] {
    height: clamp(240px, 72vw, 420px) !important;
  }
}


/* Reference-capture correction: THE CHOSEN ONES is the character grid, not the products grid. */
.home-character-grid-section .home-character-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(.85rem, 1.7vw, 1.5rem) !important;
  width: 100% !important;
  align-items: start !important;
}
.home-character-grid-section .home-character-grid > * {
  min-width: 0 !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: clamp(.8rem, 1.5vw, 1.25rem) !important;
}
.home-character-grid-section .home-character-grid > * > img[data-nimg="fill"],
.home-character-grid-section .home-character-grid > * > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 0 !important;
}
.home-character-grid-section .home-character-grid-cta {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: .85rem 1.45rem !important;
  border: 1px solid var(--isolele-accent, #b8860b) !important;
  border-radius: .35rem !important;
  background: var(--isolele-accent, #b8860b) !important;
  color: #fff !important;
  font-size: .75rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--isolele-accent, #b8860b) 22%, transparent) !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}
.home-character-grid-section .home-character-grid-cta:hover,
.home-character-grid-section .home-character-grid-cta:focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--isolele-accent, #b8860b) 30%, transparent) !important;
}

/* The first Chosen Ones area is an auto-moving, touch-draggable book rail. */
.home-chosen-ones-section .home-chosen-rail > .group {
  width: clamp(280px, 27vw, 390px) !important;
  min-width: clamp(280px, 27vw, 390px) !important;
  scroll-snap-align: start;
}
.home-chosen-ones-section .home-chosen-rail > .group h3 {
  color: var(--isolele-text, #1a1a1a) !important;
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  line-height: 1.08 !important;
}
.home-chosen-ones-section .home-chosen-rail > .group p {
  color: var(--isolele-accent, #f6b800) !important;
  min-height: 2.6em;
  font-size: clamp(.9rem, 1.5vw, 1.05rem) !important;
  line-height: 1.35 !important;
}
.home-chosen-ones-section .home-chosen-rail > .group span {
  color: var(--isolele-accent-secondary, #b8860b) !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.home-chosen-ones-section .home-chosen-rail > .group .relative.h-96 {
  height: clamp(380px, 43vw, 560px) !important;
}

/* Large narrative card from THE ISOLELE UNIVERSE / The Lion Has Learned to Write. */
.home-universe-section > .max-w-7xl > .grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2rem !important;
}
.home-universe-section > .max-w-7xl > .grid > .group {
  min-width: 0 !important;
  min-height: clamp(620px, 72vw, 980px) !important;
  aspect-ratio: 4 / 5 !important;
}
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full {
  min-height: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  position: relative !important;
}
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > .absolute.inset-0 {
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  background-size: cover !important;
  background-position: center !important;
}
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > .absolute.bottom-0 {
  padding: 1.1rem !important;
  gap: .9rem !important;
}
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > .absolute.bottom-0 .relative.z-10 > div {
  padding: clamp(1.25rem, 3vw, 2.5rem) !important;
  border-radius: 1.25rem !important;
  background: rgba(245, 240, 232, .9) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-universe-section > .max-w-7xl > .grid > .group h3 {
  color: #000 !important;
  font-size: clamp(1.55rem, 4vw, 3rem) !important;
  line-height: 1.08 !important;
}
.home-universe-section > .max-w-7xl > .grid > .group p {
  color: #000 !important;
  font-size: clamp(.95rem, 1.7vw, 1.3rem) !important;
  line-height: 1.55 !important;
}
.home-universe-section > .max-w-7xl > .grid > .group span[role="button"] { display: none !important; }
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > a.relative.z-10 {
  display: block !important;
  width: 100% !important;
  margin-top: 0 !important;
}
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > a.relative.z-10 button {
  display: flex !important;
  width: 100% !important;
  min-height: 72px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .75rem !important;
  border: 0 !important;
  border-radius: 1rem !important;
  background: #b8860b !important;
  color: #fff !important;
  font-size: clamp(1rem, 2.1vw, 1.45rem) !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  box-shadow: 0 10px 24px rgba(184,134,11,.24) !important;
}
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > a.relative.z-10 button:hover,
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > a.relative.z-10 button:focus-visible {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) !important;
}
@media (min-width: 900px) {
  .home-universe-section > .max-w-7xl > .grid > .group {
    min-height: clamp(560px, 58vw, 820px) !important;
    aspect-ratio: 16 / 9 !important;
  }
}
@media (max-width: 767px) {
  .home-character-grid-section .home-character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }
  .home-character-grid-section .home-character-grid-cta {
    width: 100% !important;
  }
  .home-chosen-ones-section .home-chosen-rail > .group {
    width: clamp(270px, 63vw, 480px) !important;
    min-width: clamp(270px, 63vw, 480px) !important;
  }
  .home-chosen-ones-section .home-chosen-rail > .group .relative.h-96 {
    height: clamp(350px, 82vw, 540px) !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group {
    min-height: clamp(620px, 118vw, 980px) !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > .absolute.bottom-0 {
    padding: .65rem !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > a.relative.z-10 button {
    min-height: 64px !important;
    font-size: 1rem !important;
  }
}


/* Keep product layout independent from THE CHOSEN ONES: original products are 3-up on desktop and stacked on mobile. */
.home-products-section .home-product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2rem !important;
}
@media (max-width: 767px) {
  .home-products-section .home-product-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}
.home-character-grid-section h2 {
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
  line-height: .98 !important;
  letter-spacing: .04em !important;
  margin-bottom: 1rem !important;
}
.home-character-grid-section > .max-w-7xl > p,
.home-character-grid-section > .max-w-7xl > .text-base {
  font-size: clamp(1rem, 1.7vw, 1.25rem) !important;
  color: var(--isolele-text-secondary, #4a4a4a) !important;
}
@media (max-width: 767px) {
  .home-universe-section > .max-w-7xl > .grid > .group {
    min-height: clamp(360px, 94vw, 620px) !important;
    aspect-ratio: 1 / 1.04 !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > .absolute.bottom-0 {
    padding: .8rem !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > .absolute.bottom-0 .relative.z-10 > div {
    padding: 1rem !important;
    border-radius: .85rem !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group h3 {
    font-size: clamp(1.2rem, 5.2vw, 1.8rem) !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group p {
    font-size: clamp(.78rem, 3.6vw, 1rem) !important;
    line-height: 1.42 !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > a.relative.z-10 button {
    min-height: 48px !important;
    border-radius: .75rem !important;
    font-size: clamp(.82rem, 3.5vw, 1rem) !important;
  }
}


/* Reference capture alignment: THE CHOSEN ONES is the character grid, not the products grid. */
#app main .char-grid,
#app main .home-character-grid-section .home-character-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(.75rem, 2vw, 1.25rem) !important;
}
@media (min-width: 768px) {
  #app main .char-grid,
  #app main .home-character-grid-section .home-character-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.75rem) !important;
  }
}
#app main .char-grid .char-card,
#app main .home-character-grid-section .home-character-grid > * {
  min-width: 0 !important;
  border-color: color-mix(in srgb, var(--isolele-accent, #b8860b) 22%, transparent) !important;
}
#app main .char-grid .char-card img,
#app main .home-character-grid-section .home-character-grid img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
}

/* The book rail has coloured titles and a clean image edge, not an extra accent frame. */
.home-chosen-ones-section .home-chosen-rail > .group,
.home-chosen-ones-section .home-chosen-rail > .home-shango-chosen {
  border: 0 !important;
  box-shadow: none !important;
}
.home-chosen-ones-section .home-chosen-rail > .group h3,
.home-chosen-ones-section .home-chosen-rail > .group p,
.home-chosen-ones-section .home-chosen-rail > .group span {
  border: 0 !important;
  text-shadow: none !important;
}

/* Narrative capture: broad framed artwork with a translucent copy panel and a full gold CTA. */
.home-universe-section > .max-w-7xl > .grid > .group {
  border: 1px solid color-mix(in srgb, var(--isolele-accent, #b8860b) 55%, transparent) !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
}
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > .absolute.bottom-0 .relative.z-10 > div h3 {
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}
.home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > a.relative.z-10 button {
  border: 0 !important;
  text-transform: uppercase !important;
}

/* Keep the products section independent: three cards on desktop, one stacked card on mobile. */
.home-products-section .home-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 767px) {
  .home-products-section .home-product-grid {
    grid-template-columns: 1fr !important;
  }
}
/* The existing pointer rail engine supplies pause, drag/swipe and automatic resume. */
.home-chosen-ones-section .home-chosen-rail {
  touch-action: pan-x;
  cursor: grab;
}
.home-chosen-ones-section .home-chosen-rail.is-dragging {
  cursor: grabbing;
}
@media (max-width: 767px) {
  .home-universe-section > .max-w-7xl > .grid > .group {
    min-height: clamp(620px, 150vw, 980px) !important;
  }
}


/* Characters route uses the original utility grid markup, so override that exact container. */
#app[data-page="en-characters"] main > section:nth-of-type(2) > .grid,
#app[data-page="fr-characters"] main > section:nth-of-type(2) > .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(.75rem, 2vw, 1.25rem) !important;
}
@media (min-width: 768px) {
  #app[data-page="en-characters"] main > section:nth-of-type(2) > .grid,
  #app[data-page="fr-characters"] main > section:nth-of-type(2) > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.75rem) !important;
  }
}
#app[data-page="en-characters"] main > section:nth-of-type(2) > .grid > article,
#app[data-page="fr-characters"] main > section:nth-of-type(2) > .grid > article {
  min-width: 0 !important;
}
#app[data-page="en-characters"] main > section:nth-of-type(2) > .grid > article img,
#app[data-page="fr-characters"] main > section:nth-of-type(2) > .grid > article img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
}


/* Final route-specific selector: the Characters registry wraps both sections in .min-h-screen. */
#app[data-page="en-characters"] main > .min-h-screen > section:nth-of-type(2) > .grid,
#app[data-page="fr-characters"] main > .min-h-screen > section:nth-of-type(2) > .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(.75rem, 2vw, 1.25rem) !important;
}
@media (min-width: 768px) {
  #app[data-page="en-characters"] main > .min-h-screen > section:nth-of-type(2) > .grid,
  #app[data-page="fr-characters"] main > .min-h-screen > section:nth-of-type(2) > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.75rem) !important;
  }
}


/* Final fidelity pass for KUFU, JOIN, bilingual controls and desktop navigation. */
@media (min-width: 1024px) {
  #app > header.fixed > div[class*="grid-cols-[auto_1fr_auto]"] > nav {
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
  }
}

/* The home JOIN/THE LEGENDS CREW artwork is part of the page, not the institutional footer. */
.home-join-section .relative[class*="aspect-"] {
  min-height: clamp(300px, 42vw, 620px) !important;
  height: clamp(300px, 42vw, 620px) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.home-join-section .relative[class*="aspect-"] > img,
.home-join-section img[src*="18_legends-crew"] {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Keep all hero/product actions legible in French and across every theme. */
#app main[data-home-complete] #hero a button,
#app main[data-home-complete] #hero a span,
#app main[data-home-complete] .home-hero-actions a,
.home-products-section a span,
.home-chosen-ones-section a span,
.home-collection-cta,
.home-join-cta,
.home-latest-news-section a[href$="/news"] {
  opacity: 1 !important;
  visibility: visible !important;
  color: #101010 !important;
  text-shadow: none !important;
}
#app[data-theme="nuit-royale"] main[data-home-complete] #hero a button,
#app[data-theme="cosmos"] main[data-home-complete] #hero a button,
#app[data-theme="kongo"] main[data-home-complete] #hero a button,
#app[data-theme="sang-de-roi"] main[data-home-complete] #hero a button,
#app[data-theme="terre-rouge"] main[data-home-complete] #hero a button {
  color: #101010 !important;
}

/* KUFU Ludo uses the verified board asset as a full hero image, with a contained mobile frame. */
#app.kufu-page main img[alt="KUFU Ludo cover"],
#app.kufu-page main img[alt="KUFU Ludo board"] {
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center center !important;
}
#app.kufu-page main img[alt="KUFU Ludo cover"] {
  width: 100% !important;
  height: 100% !important;
}
#app.kufu-page main .relative[style*="aspect-ratio:16/9"] {
  min-height: 0 !important;
  overflow: hidden !important;
}
#app.kufu-page main a[href*="kufu-game"],
#app.kufu-page main a[href*="comics"] {
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 640px) {
  #app.kufu-page main .relative[style*="aspect-ratio:16/9"] {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
  }
  #app.kufu-page main img[alt="KUFU Ludo cover"] {
    object-position: center center !important;
  }
}

/* Do not let the narrative card exceed the real viewport on narrow phones. */
@media (max-width: 640px) {
  .home-universe-section,
  .home-universe-section > .max-w-7xl,
  .home-universe-section > .max-w-7xl > .grid,
  .home-universe-section > .max-w-7xl > .grid > .group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group {
    min-height: min(150vw, 760px) !important;
    aspect-ratio: 4 / 5 !important;
  }
  .home-universe-section > .max-w-7xl > .grid > .group > .relative.h-full > .absolute.bottom-0 {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
}

/* The book rail is a clean, borderless horizontal marquee with touch scrolling. */
.home-chosen-ones-section .home-chosen-rail {
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
}
.home-chosen-ones-section .home-chosen-rail > .group,
.home-chosen-ones-section .home-chosen-rail > .group > .relative,
.home-chosen-ones-section .home-chosen-rail > .group img {
  border-width: 0 !important;
  outline: 0 !important;
}

/* History rows must look like links and remain clickable above the popup layer. */
.news-history-item,
.news-history-item * {
  cursor: pointer !important;
}
.news-history-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  color: var(--isolele-accent, #b8860b) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Final correction pass: dock desktop navigation to the right while preserving the mobile header. */
@media (min-width: 1024px) {
  #app > header:not(.home-mobile-header) > div {
    grid-template-columns: auto auto auto !important;
  }
  #app > header:not(.home-mobile-header) > div > nav {
    justify-self: end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  #app > header:not(.home-mobile-header) > div > nav + div {
    justify-self: end !important;
  }
}

/* Keep every chosen card as a real horizontal item so the continuous rail has measurable overflow. */
.home-chosen-ones-section .home-chosen-rail {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
}
.home-chosen-ones-section .home-chosen-rail > * {
  flex: 0 0 auto !important;
  min-width: clamp(238px, 25vw, 340px) !important;
}
.home-chosen-ones-section .home-chosen-rail > .home-shango-chosen {
  min-width: clamp(238px, 25vw, 340px) !important;
}

/* The mobile narrative card must clip its overlay inside the viewport, never outside it. */
@media (max-width: 640px) {
  .home-universe-section,
  .home-universe-section > .max-w-7xl,
  .home-universe-section > .max-w-7xl > .grid,
  .home-universe-section > .max-w-7xl > .grid > * {
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .home-universe-section img {
    max-width: 100% !important;
  }
}

/* Match the public KUFU composition: board image full-frame, with a contained readable hero panel. */
#app.kufu-page main > section:first-child {
  position: relative !important;
  overflow: hidden !important;
  background-image: url("../../public/IMG-20260304-WA0012-XSCUSyYtBnqRoFkU9Ubd5qRihh3IXm.jpg") !important;
  background-position: center top !important;
  background-size: cover !important;
}
#app.kufu-page main > section:first-child img[alt="KUFU Ludo cover"],
#app.kufu-page main > section:first-child img[alt="KUFU Ludo board"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center center !important;
}
#app.kufu-page main img[alt="KUFU Ludo cover"] + div,
#app.kufu-page main img[alt="KUFU Ludo board"] + div {
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 640px) {
  #app.kufu-page main > section:first-child {
    background-position: 50% top !important;
  }
}

/* JOIN artwork fallback: the section contains one artwork even if the original alt/src query changes. */
.home-join-section img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.home-join-section .home-join-media {
  overflow: hidden !important;
}

/* Archive links remain above popup layers and behave as real navigation controls. */
.news-history-overlay .news-history-item {
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}
.news-history-overlay .news-history-link {
  pointer-events: none !important;
}

/* Highest-specificity CTA contrast fix: French and light themes must never render invisible hero labels. */
#app main[data-home-complete] #hero .relative.z-10 a button,
#app main[data-home-complete] #hero .relative.z-10 a span {
  opacity: 1 !important;
  visibility: visible !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010 !important;
  text-shadow: none !important;
}
#app main[data-home-complete] #hero .relative.z-10 a button {
  background-color: var(--isolele-accent, #f6b800) !important;
  border-color: var(--isolele-accent, #f6b800) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--isolele-accent, #f6b800) 24%, transparent) !important;
}
#app main[data-home-complete] #hero.hero-slide-shango .relative.z-10 a button {
  background: #2f8cff !important;
  border-color: #2f8cff !important;
  color: #ffd84d !important;
  -webkit-text-fill-color: #ffd84d !important;
}
@supports not (color: color-mix(in srgb, black, white)) {
  #app main[data-home-complete] #hero .relative.z-10 a button {
    background-color: #f6b800 !important;
    border-color: #f6b800 !important;
    box-shadow: 0 8px 24px rgba(246,184,0,.24) !important;
  }
}

/* Ensure the rail starts moving after the browser has laid out its image cards. */
@media (prefers-reduced-motion: no-preference) {
  .home-chosen-ones-section .home-chosen-rail {
    scroll-behavior: auto !important;
  }
}

/* KUFU purchase panel: the public desktop/tablet layout keeps the cover beside the copy. */
@media (min-width: 768px) {
  #app.kufu-page main > .min-h-screen > section.relative.z-10 > .rounded-2xl > .flex.flex-col.items-start.gap-6.md\:flex-row {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 20px !important;
  }
  #app.kufu-page main > .min-h-screen > section.relative.z-10 > .rounded-2xl > .flex.flex-col.items-start.gap-6.md\:flex-row > .relative.h-\[140px\].w-\[140px\] {
    width: 96px !important;
    height: 96px !important;
  }
  #app.kufu-page main > .min-h-screen > section.relative.z-10 > .rounded-2xl > .flex.flex-col.items-start.gap-6.md\:flex-row > :last-child {
    min-width: 0 !important;
  }
}
@media (min-width: 1100px) {
  #app.kufu-page main > .min-h-screen > section.relative.z-10 > .rounded-2xl > .flex.flex-col.items-start.gap-6.md\:flex-row {
    grid-template-columns: 140px minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  #app.kufu-page main > .min-h-screen > section.relative.z-10 > .rounded-2xl > .flex.flex-col.items-start.gap-6.md\:flex-row > .relative.h-\[140px\].w-\[140px\] {
    width: 140px !important;
    height: 140px !important;
  }
}


/* Book detail fidelity pass: use the selected title artwork as the visual frame. */
#app[data-route*="/comics/"] main.book-detail-page {
  min-height: 100vh;
  background: var(--isolele-bg, #fff) !important;
  color: var(--isolele-text, #171717);
}
#app[data-route*="/comics/"] main.book-detail-page img.book-detail-background {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#app[data-route*="/comics/"] main.book-detail-page img[alt$=" background"] {
  filter: saturate(1.04) contrast(1.02);
}
#app[data-route*="/comics/"] main.book-detail-page img[alt="MOKELE"] {
  object-fit: cover !important;
  object-position: center center !important;
}
#app[data-route*="/comics/"] main.book-detail-page a[href*="buy.stripe.com"],
#app[data-route*="/comics/"] main.book-detail-page a[href$="/comics"] {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  padding: .78rem 1.25rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #111 !important;
  background: var(--isolele-accent, #f6b800) !important;
  border: 1px solid var(--isolele-accent, #f6b800) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--isolele-accent, #f6b800) 22%, transparent);
}
#app[data-route*="/comics/"] main.book-detail-page a[href*="buy.stripe.com"]:hover,
#app[data-route*="/comics/"] main.book-detail-page a[href$="/comics"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
#app.kufu-page main.kufu-board-detail-page {
  min-height: 100vh;
}
#app.kufu-page main.kufu-board-detail-page img.kufu-board-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#app.kufu-page main.kufu-board-detail-page [class*="aspect-"] {
  overflow: hidden;
}
#app.kufu-page main.kufu-board-detail-page a,
#app.kufu-page main.kufu-board-detail-page button {
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 760px) {
  #app[data-route*="/comics/"] main.book-detail-page img.book-detail-background {
    min-height: 18rem !important;
  }
  #app[data-route*="/comics/"] main.book-detail-page a[href*="buy.stripe.com"],
  #app[data-route*="/comics/"] main.book-detail-page a[href$="/comics"] {
    width: 100%;
  }
  #app.kufu-page main.kufu-board-detail-page img.kufu-board-image {
    min-height: 14rem !important;
  }
}
@supports not (color: color-mix(in srgb, black, white)) {
  #app[data-route*="/comics/"] main.book-detail-page a[href*="buy.stripe.com"],
  #app[data-route*="/comics/"] main.book-detail-page a[href$="/comics"] {
    box-shadow: 0 12px 28px rgba(184, 134, 11, .22);
  }
}

/* French route safety net: translated labels must never inherit hidden/transparent states. */
html[lang="fr"] #app a,
html[lang="fr"] #app button,
#app[data-route^="/fr"] a,
#app[data-route^="/fr"] button {
  -webkit-text-fill-color: currentColor;
}
html[lang="fr"] #app main[data-home-complete] #hero a button,
#app[data-route^="/fr"] main[data-home-complete] #hero a button {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #101010 !important;
  -webkit-text-fill-color: #101010 !important;
}
html[lang="fr"] #app main[data-home-complete] #hero a button::first-letter,
#app[data-route^="/fr"] main[data-home-complete] #hero a button::first-letter {
  color: inherit;
}
#app main[data-home-complete] #hero.hero-slide-shango a button {
  color: #ffd84d !important;
  -webkit-text-fill-color: #ffd84d !important;
}