/* Site-specific readability layer over the unmodified site-template2 page. */
html.dark {
  --background: 210 38% 10%;
  --foreground: 203 55% 94%;
  --card: 210 30% 14%;
  --muted-foreground: 207 25% 78%;
  --border: 210 24% 28%;
  --nav-theme: 190 85% 65%;
  --nav-theme-light: 190 55% 78%;
}
html:not(.dark) {
  --background: 197 54% 97%;
  --foreground: 205 43% 15%;
  --card: 0 0% 100%;
  --muted-foreground: 209 24% 34%;
  --border: 200 24% 78%;
  --nav-theme: 190 80% 42%;
  --nav-theme-light: 191 100% 24%;
}
.article-body p { line-height: 1.78; }
.article-body h2 { line-height: 1.2; margin-top: 2rem; }
.article-body h3, .article-body h4 { line-height: 1.35; }
.article-body table { font-size: 0.97rem; line-height: 1.6; }
.article-body th, .article-body td { vertical-align: top; }
.article-body figure img[src$="-form.png"] { height: auto; width: auto; max-height: 480px; max-width: 100%; margin: 0 auto; object-fit: contain; }
.article-body figure:has(img[src$="-form.png"]) { padding: 1.5rem; background: radial-gradient(ellipse at 50% 60%, hsl(var(--nav-theme) / 0.12), transparent 70%); }
.article-body a, .source-panel a { text-underline-offset: 3px; }
.article-body .evidence-links { display: none; }
.bg-blue-500 { background-color: #1d4ed8; }
.brand > div, [class*="bg-[hsl(var(--nav-theme))]"][class*="text-white"] { color: #0b2334; }
.ref-preview-notice { position: relative; }
@media (min-width: 768px) and (max-width: 1199px) {
  .site-header .hidden.md\:flex { display: none !important; }
  .site-header .md\:hidden:not([hidden]) { display: block !important; }
}
@media (max-width: 600px) {
  .article-body p { line-height: 1.72; }
  .article-body h2 { font-size: 1.6rem; }
  .article-body th, .article-body td { min-width: 7rem; }
}

/* Complete guide portal: preserve the template layout, with Aniimo artwork. */
.home-page h1, .home-page h2, .category-page h1, .hub-page h1 {
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  letter-spacing: -0.035em;
}
.home-page [data-home-module] { scroll-margin-top: 110px; }
.home-page [data-home-module="hero"] { border-bottom: 1px solid hsl(var(--border)); }
.home-page [data-home-module="hero"] > .container { position: relative; }
.home-page [data-home-module="hero"] h1 { max-width: 850px; margin-left: auto; margin-right: auto; }
.home-page [data-home-module="hero"] > .container > .grid > div { background: hsl(var(--card) / 0.85); }
.home-page [data-home-module="hero"] > .container > .grid .text-2xl { font-size: 1.65rem; }
.home-page #creature-dex .grid > div { position: relative; padding-top: 215px; overflow: hidden; }
.home-page #creature-dex .grid > div::before {
  content: ""; position: absolute; top: 18px; left: 18px; right: 18px; height: 180px;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  pointer-events: none;
}
.home-page #creature-dex .grid > div:has(a[href="/articles/sherro/"])::before { background-image: url("/images/sherro-thunderstorm-form.png"); }
.home-page #creature-dex .grid > div:has(a[href="/articles/thornblade/"])::before { background-image: url("/images/thornblade-basic-form.png"); }
.home-page #creature-dex .grid > div:has(a[href="/articles/irisalis/"])::before { background-image: url("/images/irisalis-prismana-form.png"); }
.home-page #creature-dex .grid > div:has(a[href="/articles/susuta/"])::before { background-image: url("/images/susuta-nighttime-form.png"); }
.home-page #creature-dex .grid > div:has(a[href="/articles/ignitis/"])::before { background-image: url("/images/ignitis-prismana-form.png"); }
.home-page #creature-dex .grid > div:has(a[href="/articles/dreaple/"])::before { background-image: url("/images/dreaple-basic-form.png"); }
.home-page #creature-dex .grid > div:has(a[href="/articles/scorchhowl/"])::before { background-image: url("/images/scorchhowl-prismana-form.png"); }
.article-card img[src$="-form.png"] { object-fit: contain; padding: 10px; background: hsl(var(--nav-theme) / 0.08); }
.category-page .article-card, .search-page .article-card { height: 100%; }
.home-page [data-home-module="resources"] p { line-height: 1.6; }
.home-page #all-topics .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-page .scroll-reveal > p { line-height: 1.75; }
#mobile-navigation { max-height: calc(100dvh - 95px); overflow-y: auto; }
@media (min-width: 1200px) {
  .site-header .hidden.md\:flex { gap: 14px; }
  .site-header .hidden.md\:flex > * + * { margin-left: 0; }
  .home-page [data-home-module="hero"] > .container > .text-center {
    text-align: left; width: 65%; min-height: 380px; position: relative; z-index: 1;
  }
  .home-page [data-home-module="hero"] > .container::before {
    content: ""; position: absolute; width: 32%; height: 400px; right: 0; top: -25px;
    background: url("/images/irisalis-prismana-form.png") center / contain no-repeat;
    pointer-events: none;
  }
  .home-page [data-home-module="hero"] .text-center > p { margin-left: 0; margin-right: 0; font-size: 1.25rem; line-height: 1.8; }
  .home-page [data-home-module="hero"] .text-center > .flex { justify-content: flex-start; }
  .home-page [data-home-module="hero"] h1 { font-size: 4.5rem; }
}
@media (min-width: 768px) {
  .home-page #all-topics .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .home-page #all-topics .grid { grid-template-columns: 1fr; }
  .home-page [data-home-module="resources"] .grid { gap: 12px; }
  .home-page [data-home-module="resources"] button { padding: 16px; }
  .home-page [data-home-module="resources"] button p { font-size: 0.82rem; }
  .home-page #creature-dex .grid > div { padding-top: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page *, .category-page *, .hub-page * { scroll-behavior: auto !important; animation: none !important; }
}

/* The source template's slate text is tuned for dark pages. */
html:not(.dark) .article-body p,
html:not(.dark) .article-body li,
html:not(.dark) .article-body .text-slate-300 { color: hsl(var(--foreground)); }
html:not(.dark) .article-body table tbody { background: #ffffff; }
html:not(.dark) .article-body table td { color: #163047; }
html:not(.dark) .article-body a { color: #075985 !important; }
html:not(.dark) .article-body a:hover { color: #0c4a6e !important; }
html:not(.dark) .category-page .text-green-400 { color: #166534; }
.home-page [data-home-module="hero"] .text-center > .flex a { color: hsl(var(--foreground)); }

/* Generated crystal companion avatar: keep the same navigation footprint. */
.brand img { border-radius: 10px; object-fit: cover; }