/* =================================================================
 * Shadowlore — main stylesheet
 * Sections:
 *   1. Font faces
 *   2. CSS custom properties (themes)
 *   3. Reset + base
 *   4. Layout primitives
 *   5. Header
 *   6. Hamburger button
 *   7. Drawer (right-slide) + overlay
 *   8. Theme toggle (dark/light)
 *   9. Reading progress bar
 *  10. Homepage hero (3-block grid)
 *  11. Category bar + Latest grid
 *  12. Card component
 *  13. Pills
 *  14. Single article — split hero, body prose, share
 *  15. Tags + author box + prev/next + related
 *  16. Archive / search / 404
 *  17. Pagination / search form / comments
 *  18. Footer
 *  19. Floating UI (theme toggle, scroll-to-top)
 *  20. Focus styles
 *  21. Breakpoints (768px, 1200px)
 * ============================================================== */


/* ----------------------------------------------------------------
 * 1. Local fonts
 *    Heaviest available manuka weight is 700 (manuka-bold.woff2).
 * -------------------------------------------------------------- */
@font-face {
  font-family: 'FK Roman';
  src: url('../../Fonts/font-fkroman/fkroman-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FK Roman';
  src: url('../../Fonts/font-fkroman/fkroman-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manuka';
  src: url('../../Fonts/font-manuka/manuka-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manuka';
  src: url('../../Fonts/font-manuka/manuka-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PolySans';
  src: url('../../Fonts/font-polysans/polysans-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PolySans';
  src: url('../../Fonts/font-polysans/polysans-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PolySans';
  src: url('../../Fonts/font-polysans/polysans-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}


/* ----------------------------------------------------------------
 * 2. CSS custom properties — themes
 * -------------------------------------------------------------- */
:root {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-alt: #1a1a1a;
  /* Mobile "Zone 2" body bg — a subtle warmer near-black that hints
     at the dark-red brand without becoming a different colour. */
  --color-article-bg: #100a0a;
  --color-border: #1e1e1e;
  --color-border-strong: #2a2a2a;
  --color-text: #d4d0c8;
  --color-text-strong: #f0ede6;
  --color-muted: #6b6b6b;
  --color-muted-dim: #3a3a3a;
  --color-accent: #8b0000;
  --color-accent-hover: #a80000;
  --color-code-text: #c9a94d;

  --font-body: 'FK Roman', Georgia, 'Times New Roman', serif;
  --font-display: 'Manuka', 'Georgia', serif;
  --font-ui: 'PolySans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weight 700 is the heaviest manuka file shipped in /Fonts/font-manuka/ */
  --font-display-weight-max: 700;

  --font-body-size: 19px;
  --reading-width: 740px;
  --hero-width: 1280px;
}

:root[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-alt: #1a1a1a;
  --color-article-bg: #100a0a;
  --color-border: #1e1e1e;
  --color-border-strong: #2a2a2a;
  --color-text: #d4d0c8;
  --color-text-strong: #f0ede6;
  --color-muted: #6b6b6b;
  --color-muted-dim: #3a3a3a;
}

:root[data-theme="light"] {
  --color-bg: #f5f2ee;
  --color-surface: #ffffff;
  --color-surface-alt: #ebe7e0;
  --color-article-bg: #ede8df;
  --color-border: #d9d4cb;
  --color-border-strong: #b8b1a5;
  --color-text: #1a1a1a;
  --color-text-strong: #0a0a0a;
  --color-muted: #6b6b6b;
  --color-muted-dim: #a8a39a;
  --color-code-text: #8a6d1a;
}


/* ----------------------------------------------------------------
 * 3. Reset + base
 * -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Disable scroll behind drawer without breaking iOS rendering */
html.is-drawer-open,
body.is-drawer-open {
  overflow: hidden;
  /* Prevent rubber-band scroll on iOS that can look like a zoom */
  overscroll-behavior: none;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

button {
  font: inherit;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text-strong);
  margin: 0 0 0.4em;
  line-height: 1.2;
  font-weight: 700;
}

::selection { background: var(--color-accent); color: #fff; }


/* ----------------------------------------------------------------
 * 4. Layout primitives
 * -------------------------------------------------------------- */
.shadowlore-main {
  min-height: 60vh;
  padding-bottom: 80px;
}

.shadowlore-eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}

.shadowlore-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 12px 16px;
  z-index: 10000;
  font-family: var(--font-ui);
  font-size: 13px;
}
.shadowlore-skip-link:focus { left: 8px; top: 8px; }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}

/* ----------------------------------------------------------------
 * .thumb-wrap — universal 1:1 thumbnail box
 * Every featured image in the theme renders inside one of these.
 * The img is absolutely positioned + cover-fitted so the box always
 * stays a perfect square regardless of source dimensions.
 * -------------------------------------------------------------- */
.thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.thumb-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keep the card hover-scale working */
  transition: transform 0.35s ease;
}
.thumb-wrap__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
}
:root[data-theme="light"] .thumb-wrap__placeholder {
  background: linear-gradient(135deg, #ebe7e0 0%, #d9d4cb 100%);
}


/* ----------------------------------------------------------------
 * 5. Header — logo left, nav center (desktop only), actions right
 *
 * Not sticky. No bottom border. No box-shadow. Background matches
 * the page so the header blends into the page like an editorial
 * masthead rather than a UI bar floating on top.
 * -------------------------------------------------------------- */
.shadowlore-header {
  position: static;
  background: var(--color-bg);
  border: 0;
  box-shadow: none;
}

.shadowlore-header__inner {
  /* Mobile baseline: 2-col, logo left, actions right */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  max-width: 1280px;
  margin: 0 auto;
}

.shadowlore-header__logo {
  display: flex;
  align-items: center;
  justify-self: start;
}
/* Bigger, more editorial logo */
.shadowlore-header__logo-img {
  width: 220px;
  height: auto;
  max-height: 56px;
  display: block;
}

/* Nav is hidden until 768px (see breakpoint section) */
.shadowlore-header__nav { display: none; }

.shadowlore-header__menu {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
}
.shadowlore-header__menu a {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}
.shadowlore-header__menu a:hover { color: var(--color-accent); }
.shadowlore-header__menu .current-menu-item > a { color: var(--color-accent); }

.shadowlore-header__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  justify-self: end;
}


/* ----------------------------------------------------------------
 * 6. Hamburger
 * -------------------------------------------------------------- */
.shadowlore-hamburger {
  width: 40px;
  height: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.shadowlore-hamburger:hover { background: var(--color-surface-alt); }

.shadowlore-hamburger__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.shadowlore-hamburger.is-open .shadowlore-hamburger__line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  background: var(--color-accent);
}
.shadowlore-hamburger.is-open .shadowlore-hamburger__line:nth-child(2) {
  opacity: 0;
}
.shadowlore-hamburger.is-open .shadowlore-hamburger__line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  background: var(--color-accent);
}


/* ----------------------------------------------------------------
 * 7. Drawer (RIGHT-side slide) + overlay
 * -------------------------------------------------------------- */
.shadowlore-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 300;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.shadowlore-overlay.is-visible { opacity: 1; }
/* While the drawer is open, eat all touch events on the overlay so
   the page underneath can't scroll/pinch-zoom. */
.shadowlore-overlay.is-visible { touch-action: none; }

.shadowlore-drawer {
  position: fixed;
  top: 0;
  right: 0;                       /* slide in from the RIGHT */
  left: auto;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  max-width: 420px;
  background: #0f0f0f;
  color: var(--color-text);
  z-index: 400;
  transform: translateX(100%);    /* start off-screen to the right */
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
:root[data-theme="light"] .shadowlore-drawer {
  background: #ffffff;
  color: var(--color-text);
}
.shadowlore-drawer.is-open {
  transform: translateX(0);
}

.shadowlore-drawer__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
}

.shadowlore-drawer__search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.shadowlore-drawer__search-input {
  flex: 1;
  width: 100%;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 44px 12px 14px;
  color: var(--color-text);
  font-family: var(--font-ui);
  /* 16px prevents iOS Safari auto-zoom when focused */
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.shadowlore-drawer__search-input::placeholder { color: var(--color-muted); }
.shadowlore-drawer__search-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.25);
}
.shadowlore-drawer__search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  border-radius: 6px;
}
.shadowlore-drawer__search-btn:hover { color: var(--color-accent); }

.shadowlore-drawer__close {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.shadowlore-drawer__close:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.shadowlore-drawer__nav { flex: 1; padding: 4px 0 32px; }
.shadowlore-drawer__list { width: 100%; }
.shadowlore-drawer__item + .shadowlore-drawer__item {
  border-top: 1px solid var(--color-border);
}
.shadowlore-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.25s ease, background-color 0.25s ease;
}
.shadowlore-drawer__link:hover {
  color: var(--color-accent);
  background: rgba(139, 0, 0, 0.05);
}
.shadowlore-drawer__name {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
}
.shadowlore-drawer__plus {
  color: var(--color-accent);
  transition: transform 0.3s ease;
  display: inline-flex;
}
.shadowlore-drawer__link:hover .shadowlore-drawer__plus {
  transform: rotate(45deg);
}


/* ----------------------------------------------------------------
 * 8. Theme toggle (header variant)
 * -------------------------------------------------------------- */
.shadowlore-theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-alt);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.shadowlore-theme-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.shadowlore-theme-toggle__icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
:root[data-theme="dark"]  .shadowlore-theme-toggle__icon--moon { opacity: 1; transform: rotate(0); }
:root[data-theme="dark"]  .shadowlore-theme-toggle__icon--sun  { opacity: 0; transform: rotate(-90deg); }
:root[data-theme="light"] .shadowlore-theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg); }
:root[data-theme="light"] .shadowlore-theme-toggle__icon--sun  { opacity: 1; transform: rotate(0); }


/* ----------------------------------------------------------------
 * 9. Reading progress bar
 * -------------------------------------------------------------- */
.shadowlore-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-border);
  z-index: 9999;
}
.shadowlore-progress__fill {
  width: 0;
  height: 100%;
  background: var(--color-accent);
  transition: width 0.05s linear;
}


/* ----------------------------------------------------------------
 * 10. Homepage hero — 3 equal 1:1 blocks in a row
 *
 * Mobile (< 768px):   1 column (each block is full-width, 1:1)
 * Tablet & up (≥768): 3 columns (repeat(3, 1fr)), each block 1:1
 *
 * The same container width is used by the homepage, header, footer
 * and Latest grid so everything aligns vertically across sections.
 * -------------------------------------------------------------- */
.shadowlore-home {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 0;
}

.shadowlore-hero {
  margin: 0 0 48px;
}

.shadowlore-hero--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.shadowlore-hero__block {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* The media element inherits aspect-ratio: 1/1 from .thumb-wrap,
   so each block is a perfect square regardless of column width. */
.shadowlore-hero__media {
  border-radius: 10px;
  background: var(--color-surface);
  transition: box-shadow 0.35s ease;
}
.shadowlore-hero__block:hover .shadowlore-hero__media {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.shadowlore-hero__block:hover .shadowlore-hero__media img {
  transform: scale(1.02);
}

.shadowlore-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 55%, transparent 100%);
  z-index: 1;
}

.shadowlore-hero__content {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  color: #fff;
  z-index: 2;
}

.shadowlore-hero__cats {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.shadowlore-hero__title {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  line-height: 1.2;
  margin: 0 0 8px;
  font-weight: 700;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shadowlore-hero__meta {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shadowlore-hero__dot { color: rgba(255, 255, 255, 0.4); }


/* ----------------------------------------------------------------
 * 11. Category bar + Latest grid
 * -------------------------------------------------------------- */
.shadowlore-catbar {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 36px;
  padding: 14px 0;
  overflow-x: auto;
}
.shadowlore-catbar__list {
  display: flex;
  gap: 24px;
  flex-wrap: nowrap;
  align-items: center;
}
.shadowlore-catbar__link {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.shadowlore-catbar__link:hover { color: var(--color-accent); }

.shadowlore-latest__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}
.shadowlore-latest__more {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shadowlore-latest__more:hover { color: var(--color-accent); }


/* ----------------------------------------------------------------
 * 12. Cards
 * -------------------------------------------------------------- */
.shadowlore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* ----------------------------------------------------------------
 * Cards — image with overlaid category + title + meta
 *
 * The CARD LINK is the 1:1 square (aspect-ratio set on it). The
 * image, gradient and body content all sit absolutely inside that
 * square. Height is derived from width, so the card stays square
 * at every breakpoint without any fixed pixel heights.
 * -------------------------------------------------------------- */
.shadowlore-card { background: transparent; }

.shadowlore-card__link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
}

/* Media fills the square link absolutely. Its own .thumb-wrap
   aspect-ratio is harmless here because position:absolute + inset:0
   determines size. */
.shadowlore-card__media {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-surface);
}
.shadowlore-card__link:hover .shadowlore-card__media img { transform: scale(1.04); }

/* Dark gradient that fades the image into the bottom so the title
   stays legible. Sits above the image, below the body content. */
.shadowlore-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 55%, transparent 100%);
  pointer-events: none;
}

.shadowlore-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.shadowlore-card__cat {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: #ffffff;
  border-radius: 3px;
  padding: 3px 8px;
  margin: 0 0 8px;
}

.shadowlore-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
  font-weight: 700;
  /* Always white, in keeping with image-overlay context */
  transition: color 0.25s ease;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Stay white on hover — the image scale is the hover affordance */
.shadowlore-card__link:hover .shadowlore-card__title { color: #ffffff; }

.shadowlore-card__meta {
  display: block;
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.shadowlore-card__meta span { vertical-align: baseline; }

/* Related cards (small variant) — slightly smaller title */
.shadowlore-card--small .shadowlore-card__title {
  font-size: 16px;
}


/* ----------------------------------------------------------------
 * 13. Pills
 * -------------------------------------------------------------- */
.shadowlore-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--color-accent);
  color: #ffffff;
  text-decoration: none;
}
.shadowlore-pill--solid:hover { background: var(--color-accent-hover); color: #fff; }


/* ----------------------------------------------------------------
 * 14. Single article — split hero
 *
 * Mobile (default): meta first, image below.
 * Desktop (>=768): 50/50 split, image left, meta right, ~500px tall.
 * -------------------------------------------------------------- */
.shadowlore-article {
  padding-top: 28px;
}

.shadowlore-article__hero {
  display: flex;
  flex-direction: column;
  max-width: var(--hero-width);
  margin: 0 auto 32px;
  padding: 0 20px;
  gap: 22px;
}

/* Mobile order: meta first, image second */
.shadowlore-article__hero-meta {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The media inherits the 1:1 box from .thumb-wrap. Border-radius
   here just rounds the bottom (mobile) / left edge (desktop). */
.shadowlore-article__hero-media {
  order: 2;
  border-radius: 8px;
  background: var(--color-surface);
}

.shadowlore-article__hero-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.shadowlore-article__hero-top    { display: flex; }
.shadowlore-article__hero-middle { display: flex; flex-direction: column; gap: 16px; }
.shadowlore-article__hero-bottom { display: flex; flex-direction: column; gap: 14px; }

.shadowlore-article__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  color: var(--color-text-strong);
  margin: 4px 0 6px;
  font-weight: 700;
}
.shadowlore-article__title--hero {
  /* Mobile clamp; the 768+ block bumps this up further. */
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: 1.08;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Sub-headline below the title. Capped to three lines so it never
   pushes the share row off the bottom of the column. */
.shadowlore-article__excerpt {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shadowlore-article__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-muted);
}
.shadowlore-article__author { color: var(--color-text); }
.shadowlore-article__sep    { color: var(--color-muted); }

/* ---------- Share row (icon-only circle buttons) ---------- */
.shadowlore-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.shadowlore-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.shadowlore-share__btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.shadowlore-share__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.shadowlore-share__copy.is-copied .shadowlore-share__tooltip { opacity: 1; }


/* ----------------------------------------------------------------
 * 15. Body prose
 * -------------------------------------------------------------- */
.shadowlore-article__body {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: 1.9;
  color: var(--color-text);
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 0 24px;
}

.shadowlore-article__body p { margin: 0 0 1.6em; }

.shadowlore-article__body h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--color-text-strong);
  margin: 2.2em 0 0.5em;
  line-height: 1.25;
  /* Clean heading — no border, no padding, no decoration */
  padding: 0;
  border: 0;
  background: transparent;
}
.shadowlore-article__body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-text);
  margin: 2em 0 0.5em;
}

.shadowlore-article__body blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.35rem;
  color: #c0bcb4;
  border-left: 3px solid var(--color-accent);
  padding: 16px 0 16px 28px;
  margin: 2.4em 0;
  background: var(--color-surface);
  border-radius: 0 8px 8px 0;
}
:root[data-theme="light"] .shadowlore-article__body blockquote { color: #2e2a25; }
.shadowlore-article__body blockquote p:last-child { margin-bottom: 0; }

.shadowlore-article__body code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--color-code-text);
}
.shadowlore-article__body pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-code-text);
  line-height: 1.6;
  margin: 1.8em 0;
}
.shadowlore-article__body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.shadowlore-article__body a {
  color: var(--color-accent);
  text-decoration: none;
}
.shadowlore-article__body a:hover {
  color: var(--color-accent-hover);
  text-decoration: none;
}

.shadowlore-article__body img,
.shadowlore-article__body figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.shadowlore-article__body ul,
.shadowlore-article__body ol {
  padding-left: 1.4em;
  margin: 0 0 1.6em;
}
.shadowlore-article__body ul { list-style: disc; }
.shadowlore-article__body ol { list-style: decimal; }
.shadowlore-article__body li { margin-bottom: 0.4em; }

/* ---- Zone 2 wrapper — mobile only gets a subtle distinct bg ----
   On desktop the wrapper is transparent and behaves like a plain
   div. On mobile we paint it with --color-article-bg so the body
   reading environment feels editorially separated from the hero
   block above. */
.shadowlore-article__zone2 { background: transparent; }
@media (max-width: 767px) {
  .shadowlore-article__zone2 {
    background: var(--color-article-bg);
    padding: 28px 0 8px;
    margin-top: 12px;
  }
}


/* ----------------------------------------------------------------
 * 16. Article footer pieces — tags / prev-next / related
 * Each centers itself to the reading column. (Author bio box has
 * its own constraints below — keeps the surface card flush with
 * the reading column rather than padded inside it.)
 * -------------------------------------------------------------- */
.shadowlore-tags,
.shadowlore-prevnext,
.shadowlore-related {
  max-width: var(--reading-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.shadowlore-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 36px auto 32px;
}
.shadowlore-tags__tag {
  font-family: var(--font-ui);
  font-size: 11px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  color: var(--color-muted);
  border-radius: 20px;
  padding: 4px 12px;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.shadowlore-tags__tag:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Author box — sits inside the same horizontal rail as
   .shadowlore-article__body so the left and right edges are
   flush with the article text above it. Both elements use
   max-width: var(--reading-width) and auto side margins, and
   both inherit `box-sizing: border-box` from the global reset,
   so their outer widths match exactly. */
.shadowlore-authorbox {
  display: block;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 24px;
  max-width: var(--reading-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
  margin-bottom: 48px;
}
.shadowlore-authorbox__name {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 8px;
}
.shadowlore-authorbox__bio {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-muted);
  margin: 0 0 14px;
  line-height: 1.6;
}
.shadowlore-authorbox__more {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-accent);
  display: inline-flex;
  gap: 6px;
  font-weight: 500;
}
.shadowlore-authorbox__more:hover { color: var(--color-accent-hover); }

/* Prev / Next — heaviest manuka weight (700) on titles */
.shadowlore-prevnext {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 28px;
  margin-bottom: 28px;
}
.shadowlore-prevnext__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.shadowlore-prevnext__card:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.shadowlore-prevnext__card--empty {
  border-color: transparent;
  pointer-events: none;
}
.shadowlore-prevnext__card--next { text-align: right; align-items: flex-end; }
.shadowlore-prevnext__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.shadowlore-prevnext__title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-text);
  line-height: 1.25;
  /* Heaviest manuka weight available in /Fonts/font-manuka/ */
  font-weight: var(--font-display-weight-max);
}

.shadowlore-related {
  margin-top: 40px;
}
.shadowlore-related__heading {
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.shadowlore-related__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}


/* ----------------------------------------------------------------
 * 17. Archive / search / 404
 * -------------------------------------------------------------- */
.shadowlore-archive {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 0;
}
.shadowlore-archive__head { margin-bottom: 32px; }
.shadowlore-archive__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-text-strong);
  margin: 8px 0;
}
.shadowlore-archive__desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-muted);
  max-width: 740px;
  margin: 0;
}

.shadowlore-empty {
  font-family: var(--font-body);
  color: var(--color-muted);
  font-size: 18px;
  padding: 48px 0;
  text-align: center;
}

/* ---- 404 (redesigned) ---- */
.shadowlore-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
.shadowlore-404__inner {
  max-width: 1100px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.shadowlore-404__big {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 10rem);
  line-height: 1;
  color: var(--color-accent);
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.shadowlore-404__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--color-text-strong);
  margin: 0 0 12px;
  font-weight: 700;
}
.shadowlore-404__lede {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-muted);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 auto 32px;
  max-width: 540px;
}
.shadowlore-404__cta {
  margin: 0 0 56px;
}
.shadowlore-404__home {
  display: inline-block;
  background: var(--color-accent);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 40px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.shadowlore-404__home:hover { background: var(--color-accent-hover); color: #fff; }

.shadowlore-404__shelf-label {
  text-align: left;
  margin: 0 0 18px;
}
.shadowlore-404__shelf {
  margin: 0;
}


/* ----------------------------------------------------------------
 * 18. Pagination, search form, comments
 * -------------------------------------------------------------- */
.shadowlore-pagination {
  margin: 56px 0 0;
  display: flex;
  justify-content: center;
}
.shadowlore-pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 13px;
}
.shadowlore-pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.shadowlore-pagination .page-numbers:hover,
.shadowlore-pagination .page-numbers.current {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.shadowlore-searchform {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  max-width: 540px;
}
.shadowlore-searchform__input {
  flex: 1;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 16px;
  outline: none;
}
.shadowlore-searchform__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.25);
}
.shadowlore-searchform__btn {
  background: var(--color-accent);
  color: #fff;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease;
}
.shadowlore-searchform__btn:hover { background: var(--color-accent-hover); }

/* ----------------------------------------------------------------
 * 19. Footer
 *
 * Mobile (< 768px):
 *   Centered editorial stack — logo, social, nav rows, copy.
 *
 * Desktop (>= 768px):
 *   Verge-style layout. Topbar puts the big logo on the far left
 *   and the social icons on the far right (space-between). Below
 *   that, two rows of pipe-separated nav links, then the copyright.
 *   Everything left-aligned. No top border. Background blends with
 *   the page.
 * -------------------------------------------------------------- */
.shadowlore-footer {
  background: var(--color-bg);
  border: 0;
  margin-top: 96px;
}
.shadowlore-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}

/* Topbar — mobile column / desktop row */
.shadowlore-footer__topbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
}

.shadowlore-footer__brand { display: flex; align-items: center; }
.shadowlore-footer__logo-img {
  width: 220px;
  height: auto;
  display: block;
}

.shadowlore-footer__social {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.shadowlore-footer__social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.shadowlore-footer__social-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.shadowlore-footer__nav { width: 100%; }
.shadowlore-footer__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-muted);
}
.shadowlore-footer__menu li {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
}
.shadowlore-footer__menu li + li::before {
  content: '|';
  color: var(--color-muted-dim);
  padding: 0 14px;
}
.shadowlore-footer__menu a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.shadowlore-footer__menu a:hover { color: var(--color-text); }

.shadowlore-footer__nav--secondary .shadowlore-footer__menu {
  font-size: 12px;
}
.shadowlore-footer__nav--secondary .shadowlore-footer__menu a {
  color: var(--color-muted-dim);
}
.shadowlore-footer__nav--secondary .shadowlore-footer__menu a:hover {
  color: var(--color-muted);
}

.shadowlore-footer__copy {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-muted-dim);
  margin: 12px 0 0;
}

/* ----- Desktop footer (≥ 768px): Verge-style left-aligned ----- */
@media (min-width: 768px) {
  .shadowlore-footer__inner {
    max-width: 1280px;
    align-items: stretch;
    text-align: left;
    gap: 22px;
    padding: 80px 32px 60px;
  }
  .shadowlore-footer__topbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
  }
  .shadowlore-footer__social {
    justify-content: flex-end;
  }
  .shadowlore-footer__menu { justify-content: flex-start; }
  .shadowlore-footer__copy { text-align: left; }
}

/* ----- Mobile (< 540px) — keep the centered stack tight ----- */
@media (max-width: 539px) {
  .shadowlore-footer__inner {
    padding: 60px 20px 40px;
    gap: 22px;
  }
  .shadowlore-footer__logo-img { width: 180px; }
  .shadowlore-footer__menu li + li::before { padding: 0 10px; }
}


/* ----------------------------------------------------------------
 * 20. Floating UI — scroll-to-top
 *
 * The dark/light toggle lives in the header on every page now.
 * The single article page no longer carries a floating toggle.
 *
 * Scroll-to-top is rendered globally in footer.php. It is hidden
 * by default (opacity 0 + pointer-events:none) and reveals once
 * the page is scrolled past 300px (.is-visible). 0.3s opacity
 * transition per spec.
 * -------------------------------------------------------------- */
.shadowlore-scrolltop {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.shadowlore-scrolltop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.shadowlore-scrolltop:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}


/* ----------------------------------------------------------------
 * 21. Focus styles
 * -------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.shadowlore-card__link:focus-visible,
.shadowlore-hero__block:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.shadowlore-drawer__search-input:focus-visible { outline: 0; }


/* ================================================================
 * 22. Breakpoints
 * ============================================================== */

/* ----- Tablet & up: 768px ----- */
@media (min-width: 768px) {
  .shadowlore-header__inner {
    grid-template-columns: 1fr auto 1fr;
    padding: 28px 32px;
  }
  .shadowlore-header__nav { display: block; }

  /* Hero — 3 equal squares from this breakpoint up */
  .shadowlore-hero--grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .shadowlore-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .shadowlore-related__list {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
  }
  .shadowlore-prevnext { grid-template-columns: 1fr 1fr; }

  /* ---- Article split hero (image left, meta right) ----
     The hero block is capped at 500px on desktop. align-items:
     stretch means both columns are exactly that height — the
     image fills via object-fit:cover, the meta column
     space-betweens its category tag and share row. */
  .shadowlore-article__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
    padding: 0 32px;
    margin-bottom: 56px;
    max-height: 500px;
  }
  .shadowlore-article__hero-media {
    order: 0;
    border-radius: 4px;
    align-self: stretch;
    max-height: 500px;
    overflow: hidden;
  }
  .shadowlore-article__hero-meta {
    order: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 0;
  }
  .shadowlore-article__title--hero {
    font-size: clamp(2.6rem, 4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  .shadowlore-article__hero-middle { gap: 18px; }
  .shadowlore-article__hero-bottom { gap: 18px; }

  /* Card titles room to breathe at 21px on tablet 2-up */
  .shadowlore-card__title { font-size: 21px; }
}

/* ----- Desktop: 1200px ----- */
@media (min-width: 1200px) {
  /* Latest grid — 3 columns, matching the hero above */
  .shadowlore-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* Article hero — share the same max-width as the rest of the
     site (1280) for vertical alignment across sections. */
  .shadowlore-article__hero {
    gap: 48px;
    padding: 0 32px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ----- Very small phones (< 540px) ----- */
@media (max-width: 539px) {
  .shadowlore-drawer { max-width: 100vw; }
  .shadowlore-drawer__name { font-size: 26px; }
  .shadowlore-hero__title { font-size: 1.7rem; }
  .shadowlore-hero__content { left: 20px; right: 20px; bottom: 20px; }
}

/* ================================================================
 * 23. Global content links (Fix 1)
 *
 * All links inside content areas — entry-content, page-content, or
 * any <article> — render as flat red, no underline, slightly
 * lighter red on hover. Elements that already carry their own
 * explicit color (pills, card titles, etc.) win via specificity.
 * ============================================================== */
.entry-content a,
.page-content a,
article a {
  color: var(--color-accent);
  text-decoration: none;
}
.entry-content a:hover,
.page-content a:hover,
article a:hover {
  color: var(--color-accent-hover);
  text-decoration: none;
}


/* ================================================================
 * 24. Default page template (page.php) (Fix 5)
 *
 * Title + content sit inside a single centred container so the
 * h1 is never flush against the viewport edge.
 * ============================================================== */
.shadowlore-page__inner {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.shadowlore-page__header { margin-bottom: 24px; }
.shadowlore-page__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  color: var(--color-text-strong);
  margin: 0;
  font-weight: 700;
}
.shadowlore-page__feature {
  border-radius: 8px;
  margin: 24px 0 32px;
}
.shadowlore-page__content {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: 1.9;
  color: var(--color-text);
}
.shadowlore-page__content p { margin: 0 0 1.4em; }
.shadowlore-page__content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text-strong);
  margin: 2.2em 0 0.5em;
}
.shadowlore-page__content h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 1.8em 0 0.5em;
}


/* ================================================================
 * 25. page-about.php (Fix 2)
 * ============================================================== */
.shadowlore-about__top { background: var(--color-bg); }
.shadowlore-about__top-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px 8px;
}
.shadowlore-about__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin: 0 0 18px;
}
.shadowlore-about__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1.02;
  color: var(--color-text-strong);
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.shadowlore-about__tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  color: var(--color-muted);
  margin: 0;
  max-width: 720px;
}
.shadowlore-about__rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  max-width: 1280px;
  margin: 40px auto;
  padding: 0;
}

.shadowlore-about__content {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.9;
  color: var(--color-text);
}
.shadowlore-about__content p { margin: 0 0 1.5em; }
.shadowlore-about__content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text-strong);
  margin: 2em 0 0.5em;
}
.shadowlore-about__content h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 1.8em 0 0.5em;
}
.shadowlore-about__content strong { color: var(--color-text-strong); }

/* Author card */
.shadowlore-about__author {
  display: block;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 32px;
  max-width: var(--reading-width);
  margin: 64px auto 80px;
}
.shadowlore-about__author-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin: 0 0 10px;
}
.shadowlore-about__author-name {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-text-strong);
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.1;
}
.shadowlore-about__author-bio {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.7;
}


/* ================================================================
 * 26. page-legal.php (Fix 3)
 * ============================================================== */
.shadowlore-legal__top { background: var(--color-bg); }
.shadowlore-legal__top-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 8px;
}
.shadowlore-legal__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin: 0 0 14px;
}
.shadowlore-legal__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--color-text-strong);
  margin: 0;
  font-weight: 700;
}
.shadowlore-legal__rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  max-width: 1280px;
  margin: 32px auto;
}

.shadowlore-legal__content {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 0 24px 80px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-text);
}
.shadowlore-legal__content p { margin: 0 0 1.3em; }
.shadowlore-legal__content h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-text-strong);
  font-weight: 700;
  margin: 2.5em 0 0.5em;
  padding: 0;
  border: 0;
}
.shadowlore-legal__content h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-muted);
  font-weight: 700;
  margin: 2em 0 0.5em;
}
.shadowlore-legal__content ul,
.shadowlore-legal__content ol {
  padding-left: 1.4em;
  margin: 0 0 1.4em;
}
.shadowlore-legal__content ul { list-style: disc; }
.shadowlore-legal__content ol { list-style: decimal; }
.shadowlore-legal__content li { margin-bottom: 0.4em; }


/* ================================================================
 * 27. page-contact.php (Fix 4)
 * ============================================================== */
.shadowlore-contact__top { background: var(--color-bg); }
.shadowlore-contact__top-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 8px;
}
.shadowlore-contact__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin: 0 0 14px;
}
.shadowlore-contact__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--color-text-strong);
  margin: 0;
  font-weight: 700;
}
.shadowlore-contact__rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  max-width: 1280px;
  margin: 32px auto;
}

.shadowlore-contact__grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.shadowlore-contact__left { font-family: var(--font-body); }
.shadowlore-contact__intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
}
.shadowlore-contact__intro p { margin: 0 0 1em; }
.shadowlore-contact__email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text);
}
.shadowlore-contact__email a {
  color: var(--color-text);
  text-decoration: none;
}
.shadowlore-contact__email a:hover { color: var(--color-accent); }
.shadowlore-contact__email svg { color: var(--color-muted); }

/* Right column — form */
.shadowlore-contact__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.shadowlore-contact__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shadowlore-contact__label-text {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.shadowlore-contact__form input[type="text"],
.shadowlore-contact__form input[type="email"],
.shadowlore-contact__form textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 16px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.2s ease;
}
.shadowlore-contact__form textarea {
  min-height: 140px;
  resize: vertical;
}
.shadowlore-contact__form input:focus,
.shadowlore-contact__form textarea:focus {
  border-color: var(--color-accent);
}
.shadowlore-contact__submit {
  width: 100%;
  margin-top: 8px;
  background: var(--color-accent);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  border-radius: 6px;
  padding: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.shadowlore-contact__submit:hover { background: var(--color-accent-hover); }

.shadowlore-contact__success,
.shadowlore-contact__error {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: 6px;
  margin: 0 0 16px;
}
.shadowlore-contact__success {
  color: #8bbf8e;
  background: rgba(139, 191, 142, 0.08);
  border: 1px solid rgba(139, 191, 142, 0.25);
}
.shadowlore-contact__error {
  color: #d9a0a0;
  background: rgba(139, 0, 0, 0.08);
  border: 1px solid rgba(139, 0, 0, 0.35);
}

/* Desktop: two-column layout */
@media (min-width: 768px) {
  .shadowlore-contact__grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}


/* ================================================================
 * 28. Ad slots
 *
 * Every ad slot is rendered through shadowlore_get_ad() which
 * outputs <div class="sl-ad-slot sl-ad-{slot} [extra]"> only when
 * the Customizer field is non-empty. An empty slot returns ''
 * and renders nothing — no min-height, no padding, no margin.
 * ============================================================== */
.sl-ad-slot {
  display: block;
  min-height: 0;
  overflow: hidden;
}
.sl-ad-slot:empty { display: none; }

/* ---- Header banner ---- */
.sl-ad-header-banner {
  width: 100%;
  max-width: 728px;
  margin: 0 auto;
  padding: 12px 0;
  text-align: center;
}

/* ---- Homepage feed (full-width grid item) ---- */
.sl-ad-feed-item {
  grid-column: 1 / -1;
}
.sl-ad-feed {
  text-align: center;
  padding: 24px 0;
}

/* ---- Inline before-H2 ---- */
.sl-ad-inline {
  text-align: center;
  margin: 32px 0;
}

/* ---- Below article ---- */
.sl-ad-below-article {
  text-align: center;
  margin: 48px 0;
  clear: both;
}

/* ---- Above related posts ---- */
.sl-ad-shadowlore_ad_above_related {
  text-align: center;
  margin-bottom: 40px;
}

/* ---- Sidebar ad ---- */
.sl-ad-sidebar {
  text-align: center;
  padding: 0;
}


/* ================================================================
 * 29. Article body + sticky sidebar layout
 *
 * Mobile / tablet (<1200px):
 *   .shadowlore-article__layout is a block. The body fills the
 *   reading column as before; the sidebar is display:none so the
 *   ad is never shown on small screens.
 *
 * Desktop (>=1200px):
 *   Two-column grid — reading column + 300px sidebar with a 48px
 *   gap. The sidebar position:sticky's to the top so the ad stays
 *   visible while the reader scrolls.
 * ============================================================== */
.shadowlore-article__layout {
  display: block;
}
.shadowlore-article__sidebar {
  display: none;
}

@media (min-width: 1200px) {
  .shadowlore-article__layout {
    display: grid;
    grid-template-columns: minmax(0, var(--reading-width)) 300px;
    gap: 48px;
    max-width: calc(var(--reading-width) + 300px + 48px);
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
  }
  /* Body no longer self-constrains — the grid cell handles it */
  .shadowlore-article__layout > .shadowlore-article__body {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .shadowlore-article__sidebar {
    display: block;
    position: sticky;
    top: 80px;
    align-self: start;
    min-width: 0;
  }
}


/* ================================================================
 * 30. Sidebar — numbered related posts list (desktop sidebar block)
 * ============================================================== */
.shadowlore-sidebar-related {
  display: block;
}
.shadowlore-sidebar-related__label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 16px;
}
.shadowlore-sidebar-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
}
.shadowlore-sidebar-related__item {
  border-bottom: 1px solid var(--color-border);
}
.shadowlore-sidebar-related__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.2s ease;
}
.shadowlore-sidebar-related__num {
  flex: 0 0 28px;
  min-width: 28px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-accent);
  font-weight: 700;
}
.shadowlore-sidebar-related__title {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-text);
  font-weight: 700;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shadowlore-sidebar-related__link:hover .shadowlore-sidebar-related__title {
  color: var(--color-accent);
}

/* Spacing between the related block and the sidebar ad below it */
.shadowlore-article__sidebar .shadowlore-sidebar-related + .sl-ad-slot {
  margin-top: 32px;
}


/* ================================================================
 * 31. Cookie consent banner — slim notification bar
 *
 * Outer (.shadowlore-cookie) only handles fixed positioning, the
 * dark surface, and the enter/leave transition (slide + fade).
 *
 * Inner (.shadowlore-cookie__inner) is a CSS Grid:
 *   Desktop : auto | 1fr | auto   (icon | text | buttons)
 *   Mobile  : auto | 1fr          (icon + text on row 1, buttons
 *                                   span both columns on row 2)
 *
 * Height is content-only — no flex-wrap or space-between tricks
 * that can create surprise vertical gaps.
 * ============================================================== */
.shadowlore-cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #111111;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);

  /* Hidden state — sits just off-screen and fully transparent. */
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.shadowlore-cookie.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.shadowlore-cookie[hidden] { display: none; }
:root[data-theme="light"] .shadowlore-cookie {
  background: var(--color-surface);
}

.shadowlore-cookie__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 20px;
}

.shadowlore-cookie__icon {
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.shadowlore-cookie__text {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-muted);
  margin: 0;
}
.shadowlore-cookie__text a {
  color: var(--color-accent);
  text-decoration: none;
}
.shadowlore-cookie__text a:hover { color: var(--color-accent-hover); }

.shadowlore-cookie__buttons {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.shadowlore-cookie__btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 8px 18px;
  cursor: pointer;
  border: 0;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.shadowlore-cookie__btn--accept {
  background: var(--color-accent);
  color: #ffffff;
}
.shadowlore-cookie__btn--accept:hover { background: var(--color-accent-hover); }
.shadowlore-cookie__btn--decline {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-muted);
}
.shadowlore-cookie__btn--decline:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* ----- Mobile: 2 rows — icon+text, then buttons full-width ----- */
@media (max-width: 640px) {
  .shadowlore-cookie__inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 10px;
    padding: 10px 14px 12px;
  }
  .shadowlore-cookie__text {
    font-size: 12.5px;
    line-height: 1.4;
  }
  .shadowlore-cookie__buttons {
    grid-column: 1 / -1;
  }
  .shadowlore-cookie__btn {
    flex: 1;
    padding: 10px 12px;
  }
}


/* ================================================================
 * 35. Subscribe form (article + shortcode)
 *
 * Dark surface card, centred logo at top, italic lede, two inputs
 * side-by-side on desktop / stacked on mobile, full-width red CTA,
 * inline message in italic muted text (green-tinted on success,
 * red-tinted on error).
 * ============================================================== */
.shadowlore-subscribe {
  box-sizing: border-box;
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 32px;
  max-width: var(--reading-width);
  margin: 48px auto;
}

.shadowlore-subscribe__header {
  text-align: center;
  margin: 0 0 22px;
}
.shadowlore-subscribe__logo {
  width: 160px;
  height: auto;
  display: block;
  margin: 0 auto 14px;
}
.shadowlore-subscribe__lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

.shadowlore-subscribe__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.shadowlore-subscribe__fields input[type="text"],
.shadowlore-subscribe__fields input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 16px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.shadowlore-subscribe__fields input::placeholder {
  color: var(--color-muted);
}
.shadowlore-subscribe__fields input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.18);
}

.shadowlore-subscribe__btn {
  width: 100%;
  background: var(--color-accent);
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  padding: 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.shadowlore-subscribe__btn:hover { background: var(--color-accent-hover); }
.shadowlore-subscribe__btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.shadowlore-subscribe__message {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
  text-align: center;
  margin: 14px 0 0;
  min-height: 1.2em;
}
.shadowlore-subscribe__message.is-success { color: #8bbf8e; }
.shadowlore-subscribe__message.is-error   { color: #d9a0a0; }

/* Desktop / wider tablets: side-by-side fields */
@media (min-width: 540px) {
  .shadowlore-subscribe--card .shadowlore-subscribe__fields {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ----- Popup variant — email-only, no card chrome ----- */
.shadowlore-subscribe--popup {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}
.shadowlore-subscribe--popup .shadowlore-subscribe__fields {
  grid-template-columns: 1fr;
  margin-bottom: 10px;
}

/* ================================================================
 * 36. Header subscribe button — pill on desktop, icon on mobile
 * ============================================================== */
.shadowlore-header__subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.shadowlore-header__subscribe:hover {
  background: var(--color-accent);
  color: #ffffff;
}
.shadowlore-header__subscribe-text { display: inline; }
.shadowlore-header__subscribe-icon { display: none; line-height: 0; }

/* Mobile — icon only, square button */
@media (max-width: 767px) {
  .shadowlore-header__subscribe {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
  }
  .shadowlore-header__subscribe-text { display: none; }
  .shadowlore-header__subscribe-icon { display: inline-flex; }
}


/* ================================================================
 * 37. Slide-up subscribe popup
 *
 * Mobile: full-width bar pinned to bottom.
 * Desktop (≥ 768px): right-aligned 400px card with top corners rounded.
 * Hidden / leaving state uses opacity + translateY for a gentle close.
 * ============================================================== */
.shadowlore-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  background: #111111;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
  color: var(--color-text);
  padding: 24px 24px 28px;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.shadowlore-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.shadowlore-popup[hidden] { display: none; }

.shadowlore-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.shadowlore-popup__close:hover {
  color: var(--color-accent);
  background: rgba(139, 0, 0, 0.1);
}

.shadowlore-popup__logo {
  display: block;
  margin: 0 auto 14px;
  width: 120px;
  height: auto;
}
.shadowlore-popup__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 0 0 6px;
  text-align: center;
}
.shadowlore-popup__sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--color-muted);
  text-align: center;
  margin: 0 0 16px;
  line-height: 1.5;
}

.shadowlore-popup__success {
  text-align: center;
  padding: 4px 0 8px;
}

/* Desktop — sit in the bottom-right corner */
@media (min-width: 768px) {
  .shadowlore-popup {
    left: auto;
    right: 24px;
    max-width: 400px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
  }
}


/* ================================================================
 * 39. Mobile breathing-room — every card listed by spec gets 16px
 *     side margins below 768px so nothing touches the viewport edge.
 *
 * For prevnext + related, swap their horizontal padding for the
 * margin so the visible offset stays exactly 16px (instead of 16 +
 * 24 doubled up).
 * ============================================================== */
@media (max-width: 767px) {
  .shadowlore-subscribe,
  .shadowlore-authorbox {
    margin-left: 16px;
    margin-right: 16px;
  }
  .shadowlore-prevnext,
  .shadowlore-related {
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 0;
    padding-right: 0;
  }
}


/* ================================================================
 * 32. Search results
 * ============================================================== */
.shadowlore-search .shadowlore-archive__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--color-text-strong);
  word-break: break-word;
}
.shadowlore-archive__count {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-muted);
  margin: 12px 0 0;
}

.shadowlore-search__empty {
  max-width: 540px;
  margin: 40px auto 0;
  text-align: center;
  padding: 24px 0 48px;
}
.shadowlore-search__empty-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 24px;
}


/* ================================================================
 * 33. Archive page header — match the editorial style
 * ============================================================== */
.shadowlore-archive__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--color-text-strong);
  margin: 8px 0 0;
}
.shadowlore-archive__desc {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  color: var(--color-muted);
  margin: 14px 0 0;
  max-width: 740px;
  line-height: 1.6;
}


/* ================================================================
 * 34. Pagination — pill buttons (archive, search, index)
 * ============================================================== */
.shadowlore-pagination .page-numbers {
  padding: 9px 16px;
  border: 1px solid var(--color-border);
  border-radius: 40px;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.shadowlore-pagination .page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.shadowlore-pagination .page-numbers.current {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #ffffff;
}