<!DOCTYPE html><html lang="en" data-astro-cid-sckkx6r4> <head><meta charset="UTF-8"><meta name="description" content="Visual gallery of The Covenant of Realms"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/png" href="/favicon.png"><title>Gallery - The Covenant of Realms</title><style>[data-astro-cid-sckkx6r4]{box-sizing:border-box}body{font-family:system-ui,sans-serif;line-height:1.6;color:#333;margin:0;padding:0;min-height:100vh}main[data-astro-cid-sckkx6r4]{padding:0;width:100%}.world-header[data-astro-cid-sckkx6r4]{border-bottom:2px solid #eee;padding-bottom:1rem;margin-bottom:2rem}.content-image[data-astro-cid-sckkx6r4]{max-width:100%;height:auto;border-radius:8px;margin:1rem 0}.taxonomy-context[data-astro-cid-sckkx6r4]{background:#f9f9f9;border-left:4px solid #ddd;padding:1rem;margin:1rem 0;font-style:italic}.entry-meta[data-astro-cid-sckkx6r4]{color:#666;font-size:.9em;border-top:1px solid #eee;padding-top:1rem;margin-top:2rem}
@media (max-width: 768px){.gallery-grid[data-astro-cid-sahthylw]{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}}@media (max-width: 480px){.gallery-grid[data-astro-cid-sahthylw]{grid-template-columns:1fr}}
</style></head> <body data-astro-cid-sckkx6r4> <main data-astro-cid-sckkx6r4> <div style="padding: 2rem; padding-bottom: 0;" data-astro-cid-sahthylw> <div class="world-header" data-astro-cid-sahthylw> <nav style="margin-bottom: 1rem;" data-astro-cid-sahthylw> <a href="/" style="color: #666; text-decoration: none;" data-astro-cid-sahthylw>Home</a> <span style="color: #ccc; margin: 0 0.5rem;" data-astro-cid-sahthylw>āŗ</span> <span style="color: #333;" data-astro-cid-sahthylw>Gallery</span> </nav> <h1 data-astro-cid-sahthylw>Gallery</h1> <p style="color: #666;" data-astro-cid-sahthylw>Visual exploration of The Covenant of Realms</p> </div> </div> <div style="padding: 2rem;" data-astro-cid-sahthylw> <div style="margin-bottom: 2rem;" data-astro-cid-sahthylw> <p style="color: #666; font-size: 0.9em;" data-astro-cid-sahthylw>
Showing 31 images across 10 categories
</p> </div> <section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Arcane Technologies (1)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/arcane-technologies/nullity-anchors.png" alt="Nullity Anchors" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/arcane-technologies/nullity-anchors.png","alt":"Nullity Anchors","title":"Nullity Anchors","category":"Arcane Technologies","description":"Nullity Anchors - Click to view entry","entryLink":"/taxonomies/arcane-technologies/entries/nullity-anchors","entryType":"entry"}, 0)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/arcane-technologies/entries/nullity-anchors" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Nullity Anchors <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Nullity Anchors - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Creatures & Monsters (1)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/creatures-&-monsters/null-touched-beasts.png" alt="Null Touched Beasts" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/creatures-&-monsters/null-touched-beasts.png","alt":"Null Touched Beasts","title":"Null Touched Beasts","category":"Creatures & Monsters","description":"Null Touched Beasts - Click to view entry","entryLink":"/taxonomies/creatures-&-monsters/entries/null-touched-beasts","entryType":"entry"}, 1)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/creatures-&-monsters/entries/null-touched-beasts" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Null Touched Beasts <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Null Touched Beasts - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> General (4)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/favicon.png" alt="Favicon" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/favicon.png","alt":"Favicon","title":"Favicon","category":"General","description":"Favicon from General"}, 2)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> Favicon </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Favicon from General </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/world-overview-atmosphere.png" alt="World Overview Atmosphere" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/world-overview-atmosphere.png","alt":"World Overview Atmosphere","title":"World Overview Atmosphere","category":"General","description":"World Overview Atmosphere - Click to view world overview","entryLink":"/","entryType":"overview"}, 3)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> World Overview Atmosphere <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š </span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> World Overview Atmosphere - Click to view world overview </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/world-overview-concept.png" alt="World Overview Concept" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/world-overview-concept.png","alt":"World Overview Concept","title":"World Overview Concept","category":"General","description":"World Overview Concept - Click to view world overview","entryLink":"/","entryType":"overview"}, 4)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> World Overview Concept <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š </span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> World Overview Concept - Click to view world overview </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/world-overview-header.png" alt="World Overview Header" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/world-overview-header.png","alt":"World Overview Header","title":"World Overview Header","category":"General","description":"World Overview Header - Click to view world overview","entryLink":"/","entryType":"overview"}, 5)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> World Overview Header <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>š </span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> World Overview Header - Click to view world overview </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Historical Events (3)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-events/the-autumn-equinox-manifestation.png" alt="The Autumn Equinox Manifestation" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-events/the-autumn-equinox-manifestation.png","alt":"The Autumn Equinox Manifestation","title":"The Autumn Equinox Manifestation","category":"Historical Events","description":"The Autumn Equinox Manifestation - Click to view entry","entryLink":"/taxonomies/historical-events/entries/the-autumn-equinox-manifestation","entryType":"entry"}, 6)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-events/entries/the-autumn-equinox-manifestation" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Autumn Equinox Manifestation <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Autumn Equinox Manifestation - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-events/the-meaning-wars.png" alt="The Meaning Wars" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-events/the-meaning-wars.png","alt":"The Meaning Wars","title":"The Meaning Wars","category":"Historical Events","description":"The Meaning Wars - Click to view entry","entryLink":"/taxonomies/historical-events/entries/the-meaning-wars","entryType":"entry"}, 7)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-events/entries/the-meaning-wars" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Meaning Wars <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Meaning Wars - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-events/the-treaty-of-five-currencies.png" alt="The Treaty Of Five Currencies" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-events/the-treaty-of-five-currencies.png","alt":"The Treaty Of Five Currencies","title":"The Treaty Of Five Currencies","category":"Historical Events","description":"The Treaty Of Five Currencies - Click to view entry","entryLink":"/taxonomies/historical-events/entries/the-treaty-of-five-currencies","entryType":"entry"}, 8)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-events/entries/the-treaty-of-five-currencies" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Treaty Of Five Currencies <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Treaty Of Five Currencies - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Historical Figures (8)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-figures/chancellor-of-weights-and-measures.png" alt="Chancellor Of Weights And Measures" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-figures/chancellor-of-weights-and-measures.png","alt":"Chancellor Of Weights And Measures","title":"Chancellor Of Weights And Measures","category":"Historical Figures","description":"Chancellor Of Weights And Measures - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/chancellor-of-weights-and-measures","entryType":"entry"}, 9)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-figures/entries/chancellor-of-weights-and-measures" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Chancellor Of Weights And Measures <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Chancellor Of Weights And Measures - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-figures/elderoak-shaelyn.png" alt="Elderoak Shaelyn" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-figures/elderoak-shaelyn.png","alt":"Elderoak Shaelyn","title":"Elderoak Shaelyn","category":"Historical Figures","description":"Elderoak Shaelyn - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/elderoak-shaelyn","entryType":"entry"}, 10)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-figures/entries/elderoak-shaelyn" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Elderoak Shaelyn <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Elderoak Shaelyn - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-figures/elena-voidtouched.png" alt="Elena Voidtouched" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-figures/elena-voidtouched.png","alt":"Elena Voidtouched","title":"Elena Voidtouched","category":"Historical Figures","description":"Elena Voidtouched - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/elena-voidtouched","entryType":"entry"}, 11)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-figures/entries/elena-voidtouched" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Elena Voidtouched <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Elena Voidtouched - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-figures/high-calculator-thorin-goldseeker.png" alt="High Calculator Thorin Goldseeker" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-figures/high-calculator-thorin-goldseeker.png","alt":"High Calculator Thorin Goldseeker","title":"High Calculator Thorin Goldseeker","category":"Historical Figures","description":"High Calculator Thorin Goldseeker - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/high-calculator-thorin-goldseeker","entryType":"entry"}, 12)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-figures/entries/high-calculator-thorin-goldseeker" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> High Calculator Thorin Goldseeker <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> High Calculator Thorin Goldseeker - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-figures/khan-gorthak-the-debt-keeper.png" alt="Khan Gorthak The Debt Keeper" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-figures/khan-gorthak-the-debt-keeper.png","alt":"Khan Gorthak The Debt Keeper","title":"Khan Gorthak The Debt Keeper","category":"Historical Figures","description":"Khan Gorthak The Debt Keeper - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/khan-gorthak-the-debt-keeper","entryType":"entry"}, 13)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-figures/entries/khan-gorthak-the-debt-keeper" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Khan Gorthak The Debt Keeper <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Khan Gorthak The Debt Keeper - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-figures/mayor-philosopher-marcus-brightblade.png" alt="Mayor Philosopher Marcus Brightblade" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-figures/mayor-philosopher-marcus-brightblade.png","alt":"Mayor Philosopher Marcus Brightblade","title":"Mayor Philosopher Marcus Brightblade","category":"Historical Figures","description":"Mayor Philosopher Marcus Brightblade - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/mayor-philosopher-marcus-brightblade","entryType":"entry"}, 14)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-figures/entries/mayor-philosopher-marcus-brightblade" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Mayor Philosopher Marcus Brightblade <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Mayor Philosopher Marcus Brightblade - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-figures/prophet-accountant-lysander.png" alt="Prophet Accountant Lysander" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-figures/prophet-accountant-lysander.png","alt":"Prophet Accountant Lysander","title":"Prophet Accountant Lysander","category":"Historical Figures","description":"Prophet Accountant Lysander - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/prophet-accountant-lysander","entryType":"entry"}, 15)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-figures/entries/prophet-accountant-lysander" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Prophet Accountant Lysander <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Prophet Accountant Lysander - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/historical-figures/treasurer-archmage-valeria-goldhand.png" alt="Treasurer Archmage Valeria Goldhand" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/historical-figures/treasurer-archmage-valeria-goldhand.png","alt":"Treasurer Archmage Valeria Goldhand","title":"Treasurer Archmage Valeria Goldhand","category":"Historical Figures","description":"Treasurer Archmage Valeria Goldhand - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/treasurer-archmage-valeria-goldhand","entryType":"entry"}, 16)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/historical-figures/entries/treasurer-archmage-valeria-goldhand" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Treasurer Archmage Valeria Goldhand <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Treasurer Archmage Valeria Goldhand - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Major Realms (5)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/major-realms/the-dwarven-holds-of-irondeep.png" alt="The Dwarven Holds Of Irondeep" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/major-realms/the-dwarven-holds-of-irondeep.png","alt":"The Dwarven Holds Of Irondeep","title":"The Dwarven Holds Of Irondeep","category":"Major Realms","description":"The Dwarven Holds Of Irondeep - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-dwarven-holds-of-irondeep","entryType":"entry"}, 17)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/major-realms/entries/the-dwarven-holds-of-irondeep" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Dwarven Holds Of Irondeep <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Dwarven Holds Of Irondeep - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/major-realms/the-free-cities-alliance.png" alt="The Free Cities Alliance" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/major-realms/the-free-cities-alliance.png","alt":"The Free Cities Alliance","title":"The Free Cities Alliance","category":"Major Realms","description":"The Free Cities Alliance - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-free-cities-alliance","entryType":"entry"}, 18)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/major-realms/entries/the-free-cities-alliance" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Free Cities Alliance <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Free Cities Alliance - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/major-realms/the-meridian-empire.png" alt="The Meridian Empire" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/major-realms/the-meridian-empire.png","alt":"The Meridian Empire","title":"The Meridian Empire","category":"Major Realms","description":"The Meridian Empire - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-meridian-empire","entryType":"entry"}, 19)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/major-realms/entries/the-meridian-empire" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Meridian Empire <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Meridian Empire - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/major-realms/the-orcish-khanates.png" alt="The Orcish Khanates" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/major-realms/the-orcish-khanates.png","alt":"The Orcish Khanates","title":"The Orcish Khanates","category":"Major Realms","description":"The Orcish Khanates - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-orcish-khanates","entryType":"entry"}, 20)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/major-realms/entries/the-orcish-khanates" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Orcish Khanates <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Orcish Khanates - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/major-realms/the-sylvan-confederacy.png" alt="The Sylvan Confederacy" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/major-realms/the-sylvan-confederacy.png","alt":"The Sylvan Confederacy","title":"The Sylvan Confederacy","category":"Major Realms","description":"The Sylvan Confederacy - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-sylvan-confederacy","entryType":"entry"}, 21)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/major-realms/entries/the-sylvan-confederacy" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Sylvan Confederacy <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Sylvan Confederacy - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Mystical Locations (1)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/mystical-locations/the-certainty-forge.png" alt="The Certainty Forge" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/mystical-locations/the-certainty-forge.png","alt":"The Certainty Forge","title":"The Certainty Forge","category":"Mystical Locations","description":"The Certainty Forge - Click to view entry","entryLink":"/taxonomies/mystical-locations/entries/the-certainty-forge","entryType":"entry"}, 22)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/mystical-locations/entries/the-certainty-forge" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Certainty Forge <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Certainty Forge - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Organizations & Guilds (4)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/organizations-&-guilds/fiscal-paladins.png" alt="Fiscal Paladins" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/organizations-&-guilds/fiscal-paladins.png","alt":"Fiscal Paladins","title":"Fiscal Paladins","category":"Organizations & Guilds","description":"Fiscal Paladins - Click to view entry","entryLink":"/taxonomies/organizations-&-guilds/entries/fiscal-paladins","entryType":"entry"}, 23)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/organizations-&-guilds/entries/fiscal-paladins" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Fiscal Paladins <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Fiscal Paladins - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/organizations-&-guilds/probability-pirates.png" alt="Probability Pirates" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/organizations-&-guilds/probability-pirates.png","alt":"Probability Pirates","title":"Probability Pirates","category":"Organizations & Guilds","description":"Probability Pirates - Click to view entry","entryLink":"/taxonomies/organizations-&-guilds/entries/probability-pirates","entryType":"entry"}, 24)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/organizations-&-guilds/entries/probability-pirates" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> Probability Pirates <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> Probability Pirates - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/organizations-&-guilds/the-grand-calculus-academy.png" alt="The Grand Calculus Academy" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/organizations-&-guilds/the-grand-calculus-academy.png","alt":"The Grand Calculus Academy","title":"The Grand Calculus Academy","category":"Organizations & Guilds","description":"The Grand Calculus Academy - Click to view entry","entryLink":"/taxonomies/organizations-&-guilds/entries/the-grand-calculus-academy","entryType":"entry"}, 25)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/organizations-&-guilds/entries/the-grand-calculus-academy" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Grand Calculus Academy <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Grand Calculus Academy - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/organizations-&-guilds/the-void-touched-syndicate.png" alt="The Void Touched Syndicate" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/organizations-&-guilds/the-void-touched-syndicate.png","alt":"The Void Touched Syndicate","title":"The Void Touched Syndicate","category":"Organizations & Guilds","description":"The Void Touched Syndicate - Click to view entry","entryLink":"/taxonomies/organizations-&-guilds/entries/the-void-touched-syndicate","entryType":"entry"}, 26)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/organizations-&-guilds/entries/the-void-touched-syndicate" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Void Touched Syndicate <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Void Touched Syndicate - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> The Nullity Incursions (2)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/the-nullity-incursions/the-goldport-collapse.png" alt="The Goldport Collapse" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/the-nullity-incursions/the-goldport-collapse.png","alt":"The Goldport Collapse","title":"The Goldport Collapse","category":"The Nullity Incursions","description":"The Goldport Collapse - Click to view entry","entryLink":"/taxonomies/the-nullity-incursions/entries/the-goldport-collapse","entryType":"entry"}, 27)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/the-nullity-incursions/entries/the-goldport-collapse" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Goldport Collapse <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Goldport Collapse - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/the-nullity-incursions/the-null-stone-mine-disaster.png" alt="The Null Stone Mine Disaster" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/the-nullity-incursions/the-null-stone-mine-disaster.png","alt":"The Null Stone Mine Disaster","title":"The Null Stone Mine Disaster","category":"The Nullity Incursions","description":"The Null Stone Mine Disaster - Click to view entry","entryLink":"/taxonomies/the-nullity-incursions/entries/the-null-stone-mine-disaster","entryType":"entry"}, 28)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/the-nullity-incursions/entries/the-null-stone-mine-disaster" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Null Stone Mine Disaster <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Null Stone Mine Disaster - Click to view entry </p> </div> </div> </div> </div> </section><section style="margin-bottom: 3rem;" data-astro-cid-sahthylw> <h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1.5rem;" data-astro-cid-sahthylw> Trade Routes & Markets (2)
</h2> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;" data-astro-cid-sahthylw> <div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/trade-routes-&-markets/the-probability-market.png" alt="The Probability Market" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/trade-routes-&-markets/the-probability-market.png","alt":"The Probability Market","title":"The Probability Market","category":"Trade Routes & Markets","description":"The Probability Market - Click to view entry","entryLink":"/taxonomies/trade-routes-&-markets/entries/the-probability-market","entryType":"entry"}, 29)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/trade-routes-&-markets/entries/the-probability-market" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Probability Market <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Probability Market - Click to view entry </p> </div> </div> </div><div style="position: relative;" data-astro-cid-sahthylw> <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.2)'; this.style.borderColor='#007acc';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.borderColor='#e0e0e0';" data-astro-cid-sahthylw> <div style="aspect-ratio: 16/9; overflow: hidden; position: relative;" data-astro-cid-sahthylw> <img src="/images/trade-routes-&-markets/the-silverflow-highway.png" alt="The Silverflow Highway" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.2s ease; cursor: pointer; filter: brightness(1);" onclick="openFullscreen({"src":"/images/trade-routes-&-markets/the-silverflow-highway.png","alt":"The Silverflow Highway","title":"The Silverflow Highway","category":"Trade Routes & Markets","description":"The Silverflow Highway - Click to view entry","entryLink":"/taxonomies/trade-routes-&-markets/entries/the-silverflow-highway","entryType":"entry"}, 30)" onmouseover="this.style.transform='scale(1.05)'; this.style.filter='brightness(1.1)';" onmouseout="this.style.transform='scale(1)'; this.style.filter='brightness(1)';" loading="lazy" data-astro-cid-sahthylw> <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';" data-astro-cid-sahthylw>
š Click to expand
</div> </div> <div style="padding: 1rem;" data-astro-cid-sahthylw> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #333;" data-astro-cid-sahthylw> <a href="/taxonomies/trade-routes-&-markets/entries/the-silverflow-highway" style="text-decoration: none; color: inherit;" data-astro-cid-sahthylw> The Silverflow Highway <span style="color: #007acc; font-size: 0.8em; margin-left: 0.5rem;" data-astro-cid-sahthylw>ā</span> </a> </h3> <p style="margin: 0; color: #666; font-size: 0.9em; line-height: 1.4;" data-astro-cid-sahthylw> The Silverflow Highway - Click to view entry </p> </div> </div> </div> </div> </section> </div> <div id="fullscreenModal" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.95); z-index: 1000; justify-content: center; align-items: center;" data-astro-cid-sahthylw> <div style="position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" data-astro-cid-sahthylw> <!-- Close button --> <button id="closeModal" style="position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 10px 15px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; z-index: 1001; transition: background 0.2s ease;" onmouseover="this.style.background='rgba(255,255,255,0.3)';" onmouseout="this.style.background='rgba(255,255,255,0.2)';" data-astro-cid-sahthylw>
ā
</button> <!-- Previous button --> <button id="prevButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 15px 20px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; z-index: 1001; transition: background 0.2s ease;" onmouseover="this.style.background='rgba(255,255,255,0.3)';" onmouseout="this.style.background='rgba(255,255,255,0.2)';" data-astro-cid-sahthylw>
ā¹
</button> <!-- Next button --> <button id="nextButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 15px 20px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; z-index: 1001; transition: background 0.2s ease;" onmouseover="this.style.background='rgba(255,255,255,0.3)';" onmouseout="this.style.background='rgba(255,255,255,0.2)';" data-astro-cid-sahthylw>
āŗ
</button> <!-- Image container with image-focused layout --> <div style="display: flex; align-items: center; max-width: 98vw; max-height: 95vh; gap: 1.5rem;" data-astro-cid-sahthylw> <!-- Compact description panel on left --> <div id="imageInfo" style="background: rgba(0,0,0,0.9); color: white; padding: 1.5rem; border-radius: 10px; width: 280px; flex-shrink: 0; backdrop-filter: blur(15px); box-shadow: 0 8px 25px rgba(0,0,0,0.6);" data-astro-cid-sahthylw> <h3 id="imageTitle" style="margin: 0 0 0.8rem 0; font-size: 1.2rem; color: #fff; line-height: 1.3;" data-astro-cid-sahthylw></h3> <p id="imageDescription" style="margin: 0 0 1rem 0; color: #ccc; font-size: 0.9rem; line-height: 1.4;" data-astro-cid-sahthylw></p> <div id="imageActions" style="margin-bottom: 1rem;" data-astro-cid-sahthylw></div> <div style="font-size: 0.8rem; color: #999; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 0.8rem;" data-astro-cid-sahthylw> <div style="margin-bottom: 0.4rem;" data-astro-cid-sahthylw><span id="imageCounter" data-astro-cid-sahthylw></span></div> <div style="font-size: 0.75rem;" data-astro-cid-sahthylw>ESC to close ā¢ ā ā navigate</div> </div> </div> <!-- Large image taking up most space --> <div style="flex: 1; display: flex; justify-content: center; align-items: center; height: 95vh;" data-astro-cid-sahthylw> <img id="fullscreenImage" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.7);" data-astro-cid-sahthylw> </div> </div> </div> </div> </main> </body></html> <script>(function(){const images = [{"src":"/images/arcane-technologies/nullity-anchors.png","alt":"Nullity Anchors","title":"Nullity Anchors","category":"Arcane Technologies","description":"Nullity Anchors - Click to view entry","entryLink":"/taxonomies/arcane-technologies/entries/nullity-anchors","entryType":"entry"},{"src":"/images/creatures-&-monsters/null-touched-beasts.png","alt":"Null Touched Beasts","title":"Null Touched Beasts","category":"Creatures & Monsters","description":"Null Touched Beasts - Click to view entry","entryLink":"/taxonomies/creatures-&-monsters/entries/null-touched-beasts","entryType":"entry"},{"src":"/images/favicon.png","alt":"Favicon","title":"Favicon","category":"General","description":"Favicon from General"},{"src":"/images/world-overview-atmosphere.png","alt":"World Overview Atmosphere","title":"World Overview Atmosphere","category":"General","description":"World Overview Atmosphere - Click to view world overview","entryLink":"/","entryType":"overview"},{"src":"/images/world-overview-concept.png","alt":"World Overview Concept","title":"World Overview Concept","category":"General","description":"World Overview Concept - Click to view world overview","entryLink":"/","entryType":"overview"},{"src":"/images/world-overview-header.png","alt":"World Overview Header","title":"World Overview Header","category":"General","description":"World Overview Header - Click to view world overview","entryLink":"/","entryType":"overview"},{"src":"/images/historical-events/the-autumn-equinox-manifestation.png","alt":"The Autumn Equinox Manifestation","title":"The Autumn Equinox Manifestation","category":"Historical Events","description":"The Autumn Equinox Manifestation - Click to view entry","entryLink":"/taxonomies/historical-events/entries/the-autumn-equinox-manifestation","entryType":"entry"},{"src":"/images/historical-events/the-meaning-wars.png","alt":"The Meaning Wars","title":"The Meaning Wars","category":"Historical Events","description":"The Meaning Wars - Click to view entry","entryLink":"/taxonomies/historical-events/entries/the-meaning-wars","entryType":"entry"},{"src":"/images/historical-events/the-treaty-of-five-currencies.png","alt":"The Treaty Of Five Currencies","title":"The Treaty Of Five Currencies","category":"Historical Events","description":"The Treaty Of Five Currencies - Click to view entry","entryLink":"/taxonomies/historical-events/entries/the-treaty-of-five-currencies","entryType":"entry"},{"src":"/images/historical-figures/chancellor-of-weights-and-measures.png","alt":"Chancellor Of Weights And Measures","title":"Chancellor Of Weights And Measures","category":"Historical Figures","description":"Chancellor Of Weights And Measures - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/chancellor-of-weights-and-measures","entryType":"entry"},{"src":"/images/historical-figures/elderoak-shaelyn.png","alt":"Elderoak Shaelyn","title":"Elderoak Shaelyn","category":"Historical Figures","description":"Elderoak Shaelyn - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/elderoak-shaelyn","entryType":"entry"},{"src":"/images/historical-figures/elena-voidtouched.png","alt":"Elena Voidtouched","title":"Elena Voidtouched","category":"Historical Figures","description":"Elena Voidtouched - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/elena-voidtouched","entryType":"entry"},{"src":"/images/historical-figures/high-calculator-thorin-goldseeker.png","alt":"High Calculator Thorin Goldseeker","title":"High Calculator Thorin Goldseeker","category":"Historical Figures","description":"High Calculator Thorin Goldseeker - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/high-calculator-thorin-goldseeker","entryType":"entry"},{"src":"/images/historical-figures/khan-gorthak-the-debt-keeper.png","alt":"Khan Gorthak The Debt Keeper","title":"Khan Gorthak The Debt Keeper","category":"Historical Figures","description":"Khan Gorthak The Debt Keeper - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/khan-gorthak-the-debt-keeper","entryType":"entry"},{"src":"/images/historical-figures/mayor-philosopher-marcus-brightblade.png","alt":"Mayor Philosopher Marcus Brightblade","title":"Mayor Philosopher Marcus Brightblade","category":"Historical Figures","description":"Mayor Philosopher Marcus Brightblade - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/mayor-philosopher-marcus-brightblade","entryType":"entry"},{"src":"/images/historical-figures/prophet-accountant-lysander.png","alt":"Prophet Accountant Lysander","title":"Prophet Accountant Lysander","category":"Historical Figures","description":"Prophet Accountant Lysander - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/prophet-accountant-lysander","entryType":"entry"},{"src":"/images/historical-figures/treasurer-archmage-valeria-goldhand.png","alt":"Treasurer Archmage Valeria Goldhand","title":"Treasurer Archmage Valeria Goldhand","category":"Historical Figures","description":"Treasurer Archmage Valeria Goldhand - Click to view entry","entryLink":"/taxonomies/historical-figures/entries/treasurer-archmage-valeria-goldhand","entryType":"entry"},{"src":"/images/major-realms/the-dwarven-holds-of-irondeep.png","alt":"The Dwarven Holds Of Irondeep","title":"The Dwarven Holds Of Irondeep","category":"Major Realms","description":"The Dwarven Holds Of Irondeep - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-dwarven-holds-of-irondeep","entryType":"entry"},{"src":"/images/major-realms/the-free-cities-alliance.png","alt":"The Free Cities Alliance","title":"The Free Cities Alliance","category":"Major Realms","description":"The Free Cities Alliance - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-free-cities-alliance","entryType":"entry"},{"src":"/images/major-realms/the-meridian-empire.png","alt":"The Meridian Empire","title":"The Meridian Empire","category":"Major Realms","description":"The Meridian Empire - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-meridian-empire","entryType":"entry"},{"src":"/images/major-realms/the-orcish-khanates.png","alt":"The Orcish Khanates","title":"The Orcish Khanates","category":"Major Realms","description":"The Orcish Khanates - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-orcish-khanates","entryType":"entry"},{"src":"/images/major-realms/the-sylvan-confederacy.png","alt":"The Sylvan Confederacy","title":"The Sylvan Confederacy","category":"Major Realms","description":"The Sylvan Confederacy - Click to view entry","entryLink":"/taxonomies/major-realms/entries/the-sylvan-confederacy","entryType":"entry"},{"src":"/images/mystical-locations/the-certainty-forge.png","alt":"The Certainty Forge","title":"The Certainty Forge","category":"Mystical Locations","description":"The Certainty Forge - Click to view entry","entryLink":"/taxonomies/mystical-locations/entries/the-certainty-forge","entryType":"entry"},{"src":"/images/organizations-&-guilds/fiscal-paladins.png","alt":"Fiscal Paladins","title":"Fiscal Paladins","category":"Organizations & Guilds","description":"Fiscal Paladins - Click to view entry","entryLink":"/taxonomies/organizations-&-guilds/entries/fiscal-paladins","entryType":"entry"},{"src":"/images/organizations-&-guilds/probability-pirates.png","alt":"Probability Pirates","title":"Probability Pirates","category":"Organizations & Guilds","description":"Probability Pirates - Click to view entry","entryLink":"/taxonomies/organizations-&-guilds/entries/probability-pirates","entryType":"entry"},{"src":"/images/organizations-&-guilds/the-grand-calculus-academy.png","alt":"The Grand Calculus Academy","title":"The Grand Calculus Academy","category":"Organizations & Guilds","description":"The Grand Calculus Academy - Click to view entry","entryLink":"/taxonomies/organizations-&-guilds/entries/the-grand-calculus-academy","entryType":"entry"},{"src":"/images/organizations-&-guilds/the-void-touched-syndicate.png","alt":"The Void Touched Syndicate","title":"The Void Touched Syndicate","category":"Organizations & Guilds","description":"The Void Touched Syndicate - Click to view entry","entryLink":"/taxonomies/organizations-&-guilds/entries/the-void-touched-syndicate","entryType":"entry"},{"src":"/images/the-nullity-incursions/the-goldport-collapse.png","alt":"The Goldport Collapse","title":"The Goldport Collapse","category":"The Nullity Incursions","description":"The Goldport Collapse - Click to view entry","entryLink":"/taxonomies/the-nullity-incursions/entries/the-goldport-collapse","entryType":"entry"},{"src":"/images/the-nullity-incursions/the-null-stone-mine-disaster.png","alt":"The Null Stone Mine Disaster","title":"The Null Stone Mine Disaster","category":"The Nullity Incursions","description":"The Null Stone Mine Disaster - Click to view entry","entryLink":"/taxonomies/the-nullity-incursions/entries/the-null-stone-mine-disaster","entryType":"entry"},{"src":"/images/trade-routes-&-markets/the-probability-market.png","alt":"The Probability Market","title":"The Probability Market","category":"Trade Routes & Markets","description":"The Probability Market - Click to view entry","entryLink":"/taxonomies/trade-routes-&-markets/entries/the-probability-market","entryType":"entry"},{"src":"/images/trade-routes-&-markets/the-silverflow-highway.png","alt":"The Silverflow Highway","title":"The Silverflow Highway","category":"Trade Routes & Markets","description":"The Silverflow Highway - Click to view entry","entryLink":"/taxonomies/trade-routes-&-markets/entries/the-silverflow-highway","entryType":"entry"}];
let currentImageIndex = 0;
let allImages = images;
function openFullscreen(image, index) {
currentImageIndex = index;
showFullscreenImage();
document.getElementById('fullscreenModal').style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function closeFullscreen() {
document.getElementById('fullscreenModal').style.display = 'none';
document.body.style.overflow = 'auto';
}
function showFullscreenImage() {
const image = allImages[currentImageIndex];
const modal = document.getElementById('fullscreenModal');
const img = document.getElementById('fullscreenImage');
const title = document.getElementById('imageTitle');
const description = document.getElementById('imageDescription');
const actions = document.getElementById('imageActions');
const counter = document.getElementById('imageCounter');
img.src = image.src;
img.alt = image.alt;
title.textContent = image.title;
description.textContent = image.description || '';
counter.textContent = `${currentImageIndex + 1} of ${allImages.length}`;
// Add source link if available
if (image.entryLink) {
actions.innerHTML = `
<a href="${image.entryLink}" style="color: #4CAF50; text-decoration: none; background: rgba(76,175,80,0.25); padding: 8px 14px; border-radius: 6px; border: 1px solid rgba(76,175,80,0.4); transition: all 0.2s ease; display: inline-block; font-weight: 500; font-size: 0.85rem;"
onmouseover="this.style.background='rgba(76,175,80,0.35)'; this.style.transform='translateY(-1px)'; this.style.boxShadow='0 3px 8px rgba(76,175,80,0.3)';"
onmouseout="this.style.background='rgba(76,175,80,0.25)'; this.style.transform='translateY(0)'; this.style.boxShadow='none';">
${image.entryType === 'entry' ? 'ā View Entry' : image.entryType === 'taxonomy' ? 'š View Taxonomy' : 'š View Overview'}
</a>
`;
} else {
actions.innerHTML = '';
}
// Update navigation button states
document.getElementById('prevButton').style.opacity = currentImageIndex > 0 ? '1' : '0.3';
document.getElementById('nextButton').style.opacity = currentImageIndex < allImages.length - 1 ? '1' : '0.3';
}
function nextImage() {
if (currentImageIndex < allImages.length - 1) {
currentImageIndex++;
showFullscreenImage();
}
}
function prevImage() {
if (currentImageIndex > 0) {
currentImageIndex--;
showFullscreenImage();
}
}
// Event listeners
document.getElementById('closeModal').addEventListener('click', closeFullscreen);
document.getElementById('nextButton').addEventListener('click', nextImage);
document.getElementById('prevButton').addEventListener('click', prevImage);
// Keyboard navigation
document.addEventListener('keydown', function(e) {
const modal = document.getElementById('fullscreenModal');
if (modal.style.display === 'flex') {
switch(e.key) {
case 'Escape':
closeFullscreen();
break;
case 'ArrowLeft':
prevImage();
break;
case 'ArrowRight':
nextImage();
break;
}
}
});
// Close on background click
document.getElementById('fullscreenModal').addEventListener('click', function(e) {
if (e.target === this) {
closeFullscreen();
}
});
// Make functions globally available
window.openFullscreen = openFullscreen;
})();</script>
