/* ============================================
   Heroic Lands — Style
   Dark fantasy / manuscript aesthetic
   ============================================ */

:root {
  --bg:            #0f1923;
  --bg-deeper:     #0a1219;
  --bg-card:       #15202d;
  --bg-card-hover: #1a2836;
  --surface:       #1c2b3a;
  --border:        #2a3d52;
  --border-light:  #354d66;

  --text:          #c8d6e0;
  --text-muted:    #7e96aa;
  --text-dim:      #4a6478;

  --accent:        #3b8eea;
  --accent-hover:  #5aa3f0;
  --accent-dim:    #2a6bb8;
  --gold:          #c9a84c;
  --gold-dim:      #a08338;

  --font-display:  'Cinzel', 'Georgia', serif;
  --font-body:     'Lora', 'Georgia', serif;
  --font-mono:     'JetBrains Mono', monospace;

  --content-width: 100%;
  --content-narrow: 100%;
}

/* ---- Reset ---- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
  color: var(--accent-hover);
}

/* Inline body links get a subtle underline on hover so they feel
   tactile without competing with headings or navigation. Links
   inside utility contexts (cards, nav, TOC) opt out via more
   specific rules elsewhere. */
.single-body a {
  border-bottom: 1px solid transparent;
}

.single-body a:hover {
  border-bottom-color: var(--accent-dim);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Header ---- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-deeper);
}

.header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-title {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 0.75rem;
}

.site-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.title-main {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.title-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.site-nav {
  display: flex;
  gap: 2rem;
}

.nav-link {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Dropdown navigation */
.nav-dropdown {
  position: relative;
}

.dropdown-arrow {
  margin-left: 0.3rem;
  transition: transform 0.2s;
}

.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--bg-deeper);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.nav-dropdown:hover .dropdown-menu {
  display: block;
}

/* Bridge the margin-top gap between the trigger and the menu so the pointer
   stays within .nav-dropdown while travelling to it (otherwise :hover drops in
   the gap and the menu closes before an item can be clicked). */
.dropdown-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
}

.dropdown-item {
  display: block;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.2s, background 0.2s;
}

.dropdown-item:hover {
  color: var(--text);
  background: var(--surface);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-muted);
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Hero ---- */

.hero {
  background:
    linear-gradient(to bottom, rgba(15, 25, 35, 0.4), var(--bg)),
    var(--bg-deeper);
  border-bottom: 1px solid var(--border);
  padding: 5rem 2rem 4rem;
  text-align: center;
}

.hero-inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  line-height: 1.15;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 auto;
}

/* If you add a hero background image, use this class on .hero */
.hero-with-image {
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-with-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 25, 35, 0.6),
    var(--bg)
  );
}

.hero-with-image .hero-inner {
  position: relative;
  z-index: 1;
}

/* ---- Home Cards ---- */

.home-sections {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.home-card {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.home-card:hover {
  /* Subtle hover — no background since cards are transparent */
}

.home-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.home-card h2 a {
  color: var(--text);
}

.home-card h2 a:hover {
  color: var(--accent);
}

.home-card > p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
  line-height: 1.65;
}

.home-card .card-image {
  width: 240px;
  height: 240px;
  object-fit: contain;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  border: none;
}

.card-link {
  display: block;
  font-size: 0.9rem;
  padding: 0.3rem 0;
  color: var(--accent);
  border-top: 1px solid var(--border);
}

.card-link:first-of-type {
  margin-top: auto;
  padding-top: 0.75rem;
}

.card-link:hover {
  color: var(--accent-hover);
}

.card-button {
  display: inline-block;
  margin-top: auto;
  padding: 0.65rem 2rem;
  background: var(--accent);
  color: #fff;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.2s;
  text-align: center;
}

.card-button:hover {
  background: var(--accent-hover);
  color: #fff;
}

/* ---- Section List Pages ---- */

.section-header {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 3rem 2rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.section-header h1 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.section-description {
  color: var(--text-muted);
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

.content-list {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 1rem 2rem 4rem;
}

.list-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.list-item h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}

.list-item h2 a {
  color: var(--text);
}

.list-item h2 a:hover {
  color: var(--accent);
}

.item-description {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.35rem;
}

.item-tags {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
}

a.tag:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* ---- Single Page ---- */

.single {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 2rem;
}

.single-header {
  padding: 3rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.single-header h1 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.single-description {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

.single-date {
  display: block;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

.single-tags {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ---- Blog meta ---- */

.blog-meta {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.blog-series {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  background: var(--bg-card);
}

.blog-series-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.blog-series-name {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.blog-meta .single-date {
  margin-top: 0.5rem;
}

/* ---- Blog list (section index) ----

   Selectors use `.single-content .blog-list` (two classes) so they
   outrank the generic `.single-content ul` rule further down, which
   would otherwise re-impose default bullets and a 1.5rem left margin. */

.single-content .blog-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.single-content .blog-list-item {
  padding: 1.5rem 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.single-content .blog-list-item:first-child {
  padding-top: 0.5rem;
}

.single-content .blog-list-item:last-child {
  border-bottom: none;
}

.single-content .blog-list-date {
  display: block;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.single-content .blog-list-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  display: inline-block;
  border-bottom: 1px solid transparent;
}

.single-content .blog-list-title:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
}

.single-content .blog-list-desc {
  color: var(--text-muted);
  font-style: italic;
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---- Article Content ---- */

.single-content {
  padding-bottom: 3rem;
}

.single-content h1 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 2.5rem 0 1rem;
  color: var(--accent);
}

.single-content h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--accent-dim);
  color: var(--text);
}

.single-content h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 2rem 0 0.6rem;
  color: var(--accent);
}

.single-content h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.5rem 0 0.5rem;
  color: var(--text-muted);
}

.single-content p {
  margin-bottom: 1.25rem;
}

.single-content ul,
.single-content ol {
  margin: 0 0 1.25rem 1.5rem;
}

.single-content li {
  margin-bottom: 0.35rem;
}

.single-content blockquote {
  border-left: 3px solid var(--gold-dim);
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  background: var(--bg-card);
  color: var(--text-muted);
  font-style: italic;
}

.single-content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  border: 1px solid var(--border);
}

.single-content pre {
  background: var(--bg-deeper);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.single-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.single-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.single-content th,
.single-content td {
  text-align: left;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
}

.single-content th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid var(--border-light);
}

.single-content img {
  border-radius: 4px;
  border: 1px solid var(--border);
  margin: 1.5rem 0;
}

/* Ornamental horizontal rule: thin line flanking a centered gold
   diamond. Uses gradients on ::before/::after to keep the markup
   clean (authors just write `---` in markdown). */
.single-content hr,
.single-body hr {
  position: relative;
  border: none;
  height: 1px;
  margin: 3rem 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border) 20%,
    var(--border-light) 50%,
    var(--border) 80%,
    transparent 100%
  );
  overflow: visible;
}

.single-content hr::after,
.single-body hr::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--gold-dim);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 3px var(--bg);
}


/* ---- External URL shortcode ---- */

.exturl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.exturl-text {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface);
  padding: 0.15em 0.5em;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  word-break: break-all;
}

.exturl-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.3em;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.exturl-copy:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.exturl-copy .exturl-check {
  display: none;
}

.exturl-copy.copied .exturl-icon {
  display: none;
}

.exturl-copy.copied .exturl-check {
  display: block;
  color: #4caf50;
}

/* ---- Banners ---- */

.banner {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem 2rem;
  border-radius: 4px;
  margin-bottom: 2rem;
}

.banner-coming-soon {
  background: linear-gradient(135deg, #1a2a3a, #2a3d52);
  border: 2px solid var(--gold-dim);
  color: var(--gold);
}

/* ---- Prev/Next Navigation ---- */

.single-nav {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.nav-prev,
.nav-next {
  color: var(--text-muted);
}

.nav-prev:hover,
.nav-next:hover {
  color: var(--accent);
}

/* ---- Footer ---- */

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  background: var(--bg-deeper);
}

.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-text {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer-text a {
  color: var(--text);
}

.footer-text a:hover {
  color: var(--accent);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-links a:hover {
  color: var(--accent);
}

.cc-badge {
  height: 1.75rem;
  display: inline-block;
  vertical-align: middle;
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }

  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-deeper);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 1rem 2rem;
    gap: 0.5rem;
  }

  .site-nav.open {
    display: flex;
  }

  .dropdown-menu {
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 1rem;
    margin-top: 0;
  }

  .nav-dropdown:hover .dropdown-menu {
    display: none;
  }

  .site-nav.open .nav-dropdown .dropdown-menu {
    display: block;
  }

  .header-inner {
    position: relative;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero {
    padding: 3rem 1.5rem 2.5rem;
  }

  .home-sections {
    padding: 2rem 1.5rem 3rem;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .single-header h1 {
    font-size: 1.8rem;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ---- Breadcrumbs ---- */

.breadcrumbs {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 1rem 2rem 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.breadcrumbs li + li::before {
  content: "›";
  color: var(--text-dim);
  font-size: 1em;
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumbs a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--text);
}

/* ---- Single Meta (date + tags under breadcrumbs) ---- */

.single-meta {
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.single-meta .single-date {
  margin-top: 0;
}

.single-meta .single-tags {
  margin-top: 0.5rem;
}

/* ---- Single Page with Sidebar (two-column layout) ---- */

.single.single-with-sidebar {
  display: grid;
  /* Sidebar capped at 1/3 of the viewport so prose stays readable on wide
     screens, but never narrower than 330px or wider than 470px. */
  grid-template-columns: minmax(0, 1fr) clamp(330px, 33vw, 470px);
  gap: 3rem;
  align-items: start;
  padding-top: 2rem;
}

.single.single-with-sidebar .single-content {
  min-width: 0;
}

@media (max-width: 960px) {
  .single.single-with-sidebar {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---- Info Sidebar ---- */

.info-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.5rem 1.5rem 1.75rem;
  align-self: start;
  position: sticky;
  top: 2rem;
  font-family: var(--font-body);
  font-size: 1rem;
}

/* "Character Profile" header band */
.info-sidebar-title {
  margin: 0 0 1rem;
  padding: 0.5rem 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.info-sidebar-title h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.04em;
}

/* Compact label/value list at the top of the profile */
.info-profile-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0 0 1rem;
  align-items: baseline;
}

.info-profile-grid dt {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 0.1rem;
}

.info-profile-grid dd {
  color: var(--text);
  margin: 0;
  line-height: 1.35;
  min-width: 0;
}

.info-profile-grid .info-sub {
  color: var(--text-muted);
  font-size: 0.85em;
  font-style: italic;
}

.info-faith-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.info-faith-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.info-faith-name {
  color: var(--text);
  line-height: 1.3;
}

.info-faith-pantheon {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
}

/* Composed appearance sentence */
.info-appearance {
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.45;
  font-size: 0.88rem;
}

.info-label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.3rem;
}

/* ---- Sections (Attributes, Skills) ---- */

.info-section + .info-section {
  margin-top: 1.25rem;
}

.info-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}

/* Attributes — auto-fit grid of inline label/value pairs */
.info-attrs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 0.35rem 0.85rem;
}

.info-attr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem;
}

.attr-label {
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--text);
}

.attr-value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text);
}

.info-missing {
  color: var(--text-muted);
}

/* Skills — one paragraph per category, small-caps inline list */
.info-skill-line {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}

.info-skill-line:last-child {
  margin-bottom: 0;
}

.skill-cat {
  font-weight: 700;
  color: var(--text);
  margin-right: 0.25rem;
}

.skill-entries {
  font-variant: small-caps;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.skill-entry em {
  font-style: normal;
  font-weight: 600;
  font-variant: normal;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Spells / Arcane Talents — stacked list, one ability per line */
.info-mystical-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-mystical-item {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 0.3rem;
}

.info-mystical-item:last-child {
  margin-bottom: 0;
}

.mystical-domain {
  color: var(--text-muted);
  font-style: italic;
}

.mystical-sep {
  color: var(--text-muted);
}

.mystical-name {
  font-weight: 600;
  color: var(--text);
}

.info-mystical-item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}

.info-mystical-item a:hover {
  color: var(--accent, var(--text));
  border-bottom-style: solid;
}

/* Equipment — one paragraph per subgroup (Weapons, Armor, …), mirrors Skills */
.info-gear-line {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}

.info-gear-line:last-child {
  margin-bottom: 0;
}

.gear-cat {
  font-weight: 700;
  color: var(--text);
  margin-right: 0.25rem;
}

.gear-entries {
  color: var(--text-muted);
}

.gear-entry {
  color: var(--text);
}

.info-gear-line a.gear-entry {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}

.info-gear-line a.gear-entry:hover {
  color: var(--accent, var(--text));
  border-bottom-style: solid;
}

/* ---- Gear sidebar: armor protection B/E/P/F tiles, locations, traits,
       weapon strike-mode blocks ---- */

.info-protection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
  gap: 0.4rem;
}

.info-prot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.25rem;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 0.25rem;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.02));
}

.prot-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  line-height: 1;
}

.prot-value {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.2;
  margin-top: 0.15rem;
}

.info-loc-list,
.info-trait-list,
.info-impact {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}

.info-trait-list {
  font-variant: small-caps;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.info-impact {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.strike-mode-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  margin-top: 0.25rem;
}

.strike-mode-table th,
.strike-mode-table td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  white-space: nowrap;
}

.strike-mode-table th:first-child,
.strike-mode-table td:first-child {
  padding-left: 0;
}

.strike-mode-table th:last-child,
.strike-mode-table td:last-child {
  padding-right: 0;
}

.strike-mode-table th {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.2));
}

.strike-mode-table tbody tr:last-child td {
  border-bottom: 0;
}

.strike-mode-table td:first-child {
  font-weight: 600;
}

@media (max-width: 960px) {
  .info-sidebar {
    position: static;
  }
}

/* ---- Sidebar image (fills the top of the info sidebar) ---- */

.info-portrait-link {
  display: block;
  width: calc(100% + 3rem);
  /* Negative margins cancel the aside's 1.5rem padding on top/left/right
     so the image bleeds edge-to-edge with the card. */
  margin: -1.5rem -1.5rem 1.25rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden; /* clip the image to the rounded corners */
}

.info-portrait {
  display: block;
  /* Width fills the link (which fills the bleed), height follows the image's
     natural aspect ratio so nothing is stretched or cropped. */
  width: 100%;
  height: auto;
}

/* ---- Auto-listing (taxonomy, term, and auto-section index pages) ---- */

.page-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.page-list-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.page-list-item:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover, var(--bg-card));
}

.page-list-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  flex: 0 0 auto;
}

.page-list-title:hover {
  color: var(--accent-hover);
}

.page-list-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
  flex: 1 1 auto;
}

.page-list-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
}

.page-list-empty {
  color: var(--text-muted);
  font-style: italic;
  margin: 1.5rem 0 0;
}

/* ---- Table of contents (right rail) ---- */

/* Applied by single.html when the page has more than 3 H2s and is
   not already using the info-sidebar (character/creature profiles).
   Mirrors `.single-with-sidebar` but with a narrower rail. */
.single.single-with-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 260px);
  gap: 3rem;
  align-items: start;
  padding-top: 2rem;
}

.single.single-with-toc .single-content {
  min-width: 0;
}

@media (max-width: 960px) {
  .single.single-with-toc {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.toc {
  align-self: start;
  position: sticky;
  top: 2rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  /* Cap height to the viewport so long TOCs scroll independently. */
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.toc-inner {
  border-left: 1px solid var(--border);
  padding: 0.25rem 0 0.25rem 1rem;
}

.toc-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.toc ul,
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc li {
  margin: 0.25rem 0;
  line-height: 1.35;
}

.toc a {
  color: var(--text-muted);
  border-bottom: none;
  display: block;
  padding: 0.1rem 0;
}

.toc a:hover {
  color: var(--accent);
}

/* Nested items (h3 under h2) indent and shrink. */
.toc ul ul,
.toc ol ol {
  margin-left: 0.75rem;
  margin-top: 0.15rem;
  border-left: 1px solid var(--border);
  padding-left: 0.6rem;
}

.toc ul ul a,
.toc ol ol a {
  font-size: 0.82rem;
  color: var(--text-dim);
}

@media (max-width: 960px) {
  .toc {
    position: static;
    max-height: none;
    margin-top: 2rem;
  }

  .toc-inner {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 1rem 0 0;
  }
}

/* ---- Geographic infoboxes (in-flow, floated) ----

   Polities, regions, and continents each get a compact profile card
   floated to the left at the start of their content column. Prose
   wraps around it, and the right column stays free for the TOC. The
   card scrolls away with the page rather than sticking to the
   viewport. Inherits the visual style of .info-sidebar so the card
   matches other profile blocks, then overrides the sidebar's sticky
   positioning and size. All three share .geo-infobox; per-type hook
   classes (.polity-infobox, etc.) are available for future tweaks. */

.geo-infobox,
.polity-infobox,
.region-infobox,
.continent-infobox,
.settlement-infobox {
  float: left;
  width: 19rem;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 1.75rem 1rem 0;
  /* Undo the sticky/grid behavior inherited from .info-sidebar. */
  position: static;
  top: auto;
  align-self: auto;
  font-size: 0.95rem;
}

/* Tighten the profile grid a touch inside the floated card — the
   right-rail version has more room to breathe than a 19rem float. */
.geo-infobox .info-profile-grid {
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.6rem;
  margin-bottom: 0;
}

.geo-infobox .info-profile-grid dd {
  word-break: normal;
  overflow-wrap: anywhere;
}

.geo-infobox .info-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  line-height: 1.35;
}

/* Stack the infobox above the prose on narrow viewports. */
@media (max-width: 720px) {
  .geo-infobox,
  .polity-infobox,
  .region-infobox,
  .continent-infobox {
    float: none;
    width: 100%;
    margin: 0 0 1.25rem 0;
  }
}

/* ---- Cartouches ----

   Named-entity SVGs rendered as ornamental accents on culture-flavored
   pages (Ta'Kheperu, Kemetian gods, the Per-Aá). The default mode is a
   centered block figure. Modifiers:
     .cartouche-left / .cartouche-right — float so prose wraps around.
     .cartouche-inline                  — shrink and flow with text,
                                          useful when the cartouche IS
                                          the name being referenced. */

/* Jsesh-exported cartouches in vertical orientation are tall ovals
   (~1:2 wide:tall). Size them by HEIGHT — width derives from the
   SVG's aspect ratio. Per-call override comes from the shortcode's
   `height` parameter, which sets an inline style on the <img>. */

.cartouche {
  --cartouche-h: 10rem;
  display: block;
  margin: 1.5rem auto;
  text-align: center;
  line-height: 0;          /* avoid extra strut under the <img> */
  /* Limestone-panel treatment: a warm radial gradient backdrop with
     an inset shadow suggests a plastered stone surface; the subtle
     outer shadow lifts the panel off the page like a framed relief.
     This is the single biggest visual shift from "SVG on white" to
     "cartouche carved into a wall." */
  background:
    radial-gradient(ellipse at 28% 22%, #f2e4c2 0%, #d9c29a 55%, #bda77c 100%);
  padding: 0.5em 1em;
  border-radius: 0.25rem;
  box-shadow:
    inset 0 0 0.35rem rgba(101, 64, 27, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

.cartouche img {
  display: inline-block;
  height: var(--cartouche-h);
  width: auto;
  max-width: 100%;         /* stay inside a narrow column */
  /* Override the .single-content img frame — cartouches are already a
     self-contained shape and don't need an additional border or the
     1.5rem vertical margin that body photos get. */
  border: none;
  border-radius: 0;
  margin: 0;
  /* Shift the Jsesh pure-black ink toward a warm aged-charcoal brown
     so it reads as oxidized paint rather than printer toner, and
     apply a tiny blur + contrast bump to soften sharp rectangular
     edges (plural strokes) without visibly degrading the more
     complex glyphs (the L1 scarab hides behind its own detail). */
  filter:
    sepia(0.7) hue-rotate(-12deg) saturate(1.25) brightness(0.55)
    blur(0.3px) contrast(1.15);
}

.cartouche figcaption {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  line-height: 1.3;
}

.cartouche-left {
  --cartouche-h: 7rem;
  float: left;
  margin: 0.25rem 1.5rem 0.5rem 0;
}

.cartouche-right {
  --cartouche-h: 7rem;
  float: right;
  margin: 0.25rem 0 0.5rem 1.5rem;
}

/* Inline variant: scales to line-height so the cartouche sits on the
   baseline next to adjacent text. Height is driven by em units so it
   tracks the font size of the surrounding prose. */
.cartouche-inline {
  display: inline-block;
  vertical-align: -0.55em;
  margin: 0 0.18em;
  line-height: 1;
}

.cartouche-inline img {
  display: inline-block;
  width: auto;
  height: 2.6em;
  vertical-align: -1em;
}

@media (max-width: 720px) {
  .cartouche {
    --cartouche-h: 8rem;
  }
  .cartouche-left,
  .cartouche-right {
    --cartouche-h: 6rem;
    float: none;
    margin: 1rem auto;
  }
}

/* ---- Glyphs ----

   Small hieroglyphic clusters (Kemetían deity names, etc.) fetched
   from https://cdn.heroiclands.org/icons/<slug>.svg via the glyph
   shortcode. Smaller and lighter than cartouches — these represent
   words, not royal seals, so they live inline with text or inside a
   compact stone tablet for catalog use. The .glyph family shares
   the warm-ink filter with cartouches so both read as members of
   the same writing system. */

.glyph {
  display: inline-block;
  vertical-align: -0.35em;
  line-height: 0;
}

.glyph img {
  display: inline-block;
  height: 1.8em;           /* scales with surrounding text by default */
  width: auto;
  max-width: 100%;
  /* Override the .single-content img body-photo frame — glyphs are
     graphic marks, not photos, and don't need the border/margin. */
  border: none;
  border-radius: 0;
  margin: 0;
  /* Warm-aged-charcoal ink tone + bolder strokes. The four stacked
     0.5px drop-shadows in cardinal directions effectively thicken
     every dark pixel in the glyph by ~1px, simulating a heavier
     chisel cut without touching the source SVGs. Brightness and
     contrast are pushed harder than on cartouches since glyphs
     display small and need to stay legible. */
  filter:
    sepia(0.8) hue-rotate(-12deg) saturate(1.3)
    brightness(0.35) contrast(1.5)
    drop-shadow(0.5px 0 0 #3d2818)
    drop-shadow(-0.5px 0 0 #3d2818)
    drop-shadow(0 0.5px 0 #3d2818)
    drop-shadow(0 -0.5px 0 #3d2818);
}

/* Size variants */
.glyph-inline img { height: 1.4em; }

.glyph-block {
  display: block;
  text-align: center;
  margin: 1rem auto;
  vertical-align: baseline;
}
.glyph-block img { height: 3rem; }

/* Stone-tablet frame — for catalog layouts (pantheon table, lists of
   deities) where visual parallelism across a column matters more than
   showing each glyph at its intrinsic width. Tablet dimensions
   accommodate up to ~7 signs horizontally; longer glyphs scale down,
   shorter ones scale up to the tablet's interior bounds via
   object-fit: contain. */
.glyph-tablet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 4rem;
  padding: 3px 5px;        /* tight but keeps glyph off the rounded
                              corners — 3px top/bottom, 5px left/right */
  vertical-align: middle;
  background:
    radial-gradient(ellipse at 28% 22%, #f2e4c2 0%, #d9c29a 55%, #bda77c 100%);
  border-radius: 0.2rem;
  box-shadow:
    inset 0 0 0.25rem rgba(101, 64, 27, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.15);
  line-height: 0;
  box-sizing: border-box;
}

/* object-fit: contain scales the glyph up to the largest size that
   preserves aspect ratio within the tablet's interior — the key
   difference from max-width/max-height, which cap but don't grow. */
.glyph-tablet img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 720px) {
  .glyph-tablet {
    width: 8rem;
    height: 3.25rem;
  }
}

/* Faith infobox icons. Independent — a faith page can have either,
   both, or neither.
   - .faith-portrait (img field) sits ABOVE the "Faith Profile"
     title at the top of the card. Constrained to 150×150 max,
     centered within the card's padding.
   - .faith-glyph (glyph field) sits BELOW the title's dividing
     line, using the same limestone tablet as the pantheon table. */

.faith-portrait {
  display: flex;
  justify-content: center;
  margin: 0 0 1rem;
  line-height: 0;
}

.faith-portrait img {
  display: block;
  max-width: 150px;
  max-height: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: none;
  border-radius: 0.25rem;
  margin: 0;
}

.faith-glyph {
  display: flex;
  justify-content: center;
  margin: 0 0 0.8rem;
}

/* ---- Related section (bottom of article) ----

   Rendered as a bordered, tinted card. Each row is one content type,
   with its label on the left and the links flowed horizontally on
   the right separated by a middle dot. The <dl>/<dt>/<dd> markup
   keeps the label-to-values relationship semantic. */

.related {
  margin: 3rem 0 1rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.related-heading {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.related-rows {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.related-row {
  display: grid;
  /* Label column sizes to content (up to a cap); links get the rest. */
  grid-template-columns: minmax(7rem, max-content) 1fr;
  column-gap: 0.85rem;
  align-items: baseline;
  font-size: 0.94rem;
  line-height: 1.5;
}

.related-row-label {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin: 0;
}

.related-row-label::after {
  content: ":";
  color: var(--text-dim);
  margin-left: 0.05rem;
}

.related-row-links {
  margin: 0;
  color: var(--text);
}

.related-row-links a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
}

.related-row-links a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-dim);
}

.related-sep {
  color: var(--text-dim);
  margin: 0 0.15rem;
  user-select: none;
}

@media (max-width: 640px) {
  .related {
    padding: 1.25rem 1.25rem;
  }

  .related-row {
    grid-template-columns: 1fr;
    row-gap: 0.15rem;
  }
}