:root {
  --bg: #080711;
  --bg-soft: #12101f;
  --card: rgba(255, 255, 255, 0.075);
  --card-strong: rgba(255, 255, 255, 0.12);
  --text: #fff7ff;
  --muted: #c8b7d8;
  --accent: #ff7add;
  --accent-2: #8b5cff;
  --danger: #ff5f7a;
  --border: rgba(255, 255, 255, 0.16);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 122, 221, 0.22), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(139, 92, 255, 0.2), transparent 30rem),
    var(--bg);
}

body.no-scroll {
  overflow: hidden;
}

button {
  font: inherit;
}

.page-shell {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 52px 0 70px;
}

.hero {
  text-align: center;
  margin-bottom: 34px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-size: clamp(2.3rem, 7vw, 5.3rem);
  line-height: 0.95;
  text-shadow: 0 0 32px rgba(255, 122, 221, 0.35);
}

.subtitle {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.oc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  align-items: start;
  padding: 10px 0 30px;
}

.oc-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 14px;
  background: linear-gradient(145deg, var(--card), rgba(255, 255, 255, 0.035));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  color: var(--text);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.oc-card:hover,
.oc-card:focus-visible {
  transform: scale(1.08) translateY(-8px);
  z-index: 10;
  border-color: rgba(255, 122, 221, 0.75);
  background: linear-gradient(145deg, var(--card-strong), rgba(255, 122, 221, 0.08));
  box-shadow:
    0 30px 75px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(255, 122, 221, 0.35);
  outline: none;
}

.oc-name {
  margin: 0 0 12px;
  text-align: center;
  font-size: 1.22rem;
  font-weight: 800;
}

.thumbnail-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 5;
  background: rgba(255, 255, 255, 0.08);
}

.thumbnail-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.thumbnail-wrap::after,
.art-image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 50px 22px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 24px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 2, 8, 0.74);
  backdrop-filter: blur(16px);
  z-index: 100;
}

.modal-backdrop.hidden {
  display: none;
}

.oc-modal {
  position: relative;
  width: min(1100px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(255, 122, 221, 0.16), transparent 24rem),
    radial-gradient(circle at bottom right, rgba(139, 92, 255, 0.16), transparent 24rem),
    rgba(13, 11, 24, 0.97);
  box-shadow: var(--shadow);
}

.close-button {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
  z-index: 3;
}

.close-button:hover {
  transform: scale(1.08);
  border-color: rgba(255, 122, 221, 0.65);
  background: rgba(255, 122, 221, 0.14);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  padding: 30px 78px 20px 30px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 0.95;
}

.tab-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tab-button {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  font-weight: 800;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.tab-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 122, 221, 0.65);
}

.tab-button.active {
  border-color: rgba(255, 122, 221, 0.85);
  background: linear-gradient(135deg, rgba(255, 122, 221, 0.35), rgba(139, 92, 255, 0.28));
}

.modal-panel {
  overflow: auto;
  padding: 26px 30px 34px;
}

.modal-panel.hidden {
  display: none;
}

.art-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}

.art-image-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  aspect-ratio: 1 / 1;
}

.art-image-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.lore-panel {
  color: var(--text);
  line-height: 1.75;
  font-size: 1.02rem;
}

.lore-card {
  max-width: 850px;
  min-height: 320px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.065);
}

.lore-card h1,
.lore-card h2,
.lore-card h3 {
  margin-top: 0;
}

.lore-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .page-shell {
    width: min(100% - 22px, 1200px);
    padding-top: 34px;
  }

  .oc-gallery {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 14px;
  }

  .oc-card {
    border-radius: 18px;
    padding: 10px;
  }

  .oc-card:hover,
  .oc-card:focus-visible {
    transform: scale(1.035) translateY(-4px);
  }

  .oc-name {
    font-size: 1rem;
  }

  .modal-backdrop {
    padding: 10px;
  }

  .oc-modal {
    max-height: calc(100vh - 20px);
    border-radius: 22px;
  }

  .modal-header {
    display: block;
    padding: 24px 62px 18px 18px;
  }

  .tab-row {
    margin-top: 18px;
  }

  .modal-panel {
    padding: 18px;
  }

  .art-panel {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 12px;
  }
}

/* Large artwork viewer */
.image-lightbox {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 56px 22px 22px;
  background: rgba(2, 1, 7, 0.88);
  backdrop-filter: blur(18px);
  z-index: 200;
}

.image-lightbox.hidden {
  display: none;
}

.image-lightbox img {
  max-width: min(100%, 1200px);
  max-height: calc(100vh - 90px);
  display: block;
  object-fit: contain;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.65),
    0 0 42px rgba(255, 122, 221, 0.22);
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font-size: 2.2rem;
  line-height: 1;
  z-index: 210;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

.lightbox-close:hover {
  transform: scale(1.08);
  border-color: rgba(255, 122, 221, 0.75);
  background: rgba(255, 122, 221, 0.18);
}

.art-image-card {
  cursor: zoom-in;
}

@media (max-width: 720px) {
  .image-lightbox {
    padding: 70px 10px 14px;
  }

  .image-lightbox img {
    max-height: calc(100vh - 94px);
    border-radius: 16px;
  }

  .lightbox-close {
    top: 14px;
    right: 14px;
  }
}

.category-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 28px;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.075);
  cursor: pointer;
  font-weight: 800;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.category-chip:hover,
.category-chip:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 122, 221, 0.72);
  box-shadow: 0 0 24px rgba(255, 122, 221, 0.22);
  outline: none;
}

.category-chip.active {
  border-color: rgba(255, 122, 221, 0.9);
  background: linear-gradient(135deg, rgba(255, 122, 221, 0.35), rgba(139, 92, 255, 0.28));
}

.category-count {
  color: var(--muted);
  font-size: 0.88rem;
}

.category-x {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 1rem;
  line-height: 1;
}

.oc-card-category-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.oc-card-category {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.74rem;
  font-weight: 700;
}

.ties-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 30px 0;
}

.ties-panel.hidden {
  display: none;
}

.ties-label {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tie-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 13px 8px 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.075);
  cursor: pointer;
  font-weight: 800;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.tie-button:hover,
.tie-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 122, 221, 0.72);
  box-shadow: 0 0 24px rgba(255, 122, 221, 0.22);
  outline: none;
}

.tie-thumb {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 720px) {
  .ties-panel {
    padding: 14px 18px 0;
  }
}

.tie-text {
  display: grid;
  gap: 1px;
  text-align: left;
}

.tie-name {
  font-weight: 900;
}

.tie-relation {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

/* NSFW / mature content warning */
.nsfw-warning-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 2, 8, 0.88);
  backdrop-filter: blur(18px);
  z-index: 999;
}

.nsfw-warning-backdrop.hidden {
  display: none;
}

.nsfw-warning-box {
  width: min(620px, 100%);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 30px;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 122, 221, 0.18), transparent 24rem),
    radial-gradient(circle at bottom right, rgba(139, 92, 255, 0.16), transparent 24rem),
    rgba(13, 11, 24, 0.98);
  box-shadow: var(--shadow);
}

.nsfw-warning-box h2 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 0.95;
}

.nsfw-warning-box p {
  color: var(--muted);
  line-height: 1.65;
  font-size: 1.02rem;
}

.nsfw-warning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.nsfw-accept-button,
.nsfw-leave-button {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.nsfw-accept-button {
  border-color: rgba(255, 122, 221, 0.85);
  background: linear-gradient(135deg, rgba(255, 122, 221, 0.38), rgba(139, 92, 255, 0.3));
}

.nsfw-leave-button {
  background: rgba(255, 255, 255, 0.075);
}

.nsfw-accept-button:hover,
.nsfw-leave-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 122, 221, 0.8);
  box-shadow: 0 0 24px rgba(255, 122, 221, 0.22);
}

@media (max-width: 720px) {
  .nsfw-warning-box {
    padding: 22px;
    border-radius: 22px;
  }

  .nsfw-warning-actions {
    display: grid;
  }
}\n\n.oc-card-category.active-category-match {
  color: var(--text);
  border-color: rgba(255, 122, 221, 0.95);
  background: linear-gradient(135deg, rgba(255, 122, 221, 0.42), rgba(139, 92, 255, 0.34));
  box-shadow:
    0 0 18px rgba(255, 122, 221, 0.42),
    inset 0 0 12px rgba(255, 255, 255, 0.08);
  animation: categoryPulse 1.9s ease-in-out infinite;
}

@keyframes categoryPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.06);
    filter: brightness(1.22);
  }
}\n

/* Active category filter highlight */
.oc-card.active-category-card {
  border-color: rgba(255, 122, 221, 0.98);
  box-shadow:
    0 22px 65px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(255, 122, 221, 0.45),
    inset 0 0 22px rgba(255, 122, 221, 0.08);
}


.oc-card-category.active-category-match {
  color: var(--text);
  border-color: rgba(255, 122, 221, 0.98);
  background: linear-gradient(135deg, rgba(255, 122, 221, 0.58), rgba(139, 92, 255, 0.45));
  box-shadow:
    0 0 18px rgba(255, 122, 221, 0.58),
    inset 0 0 12px rgba(255, 255, 255, 0.1);
  animation: categoryPulse 1.9s ease-in-out infinite;
}

@keyframes categoryPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.06);
    filter: brightness(1.25);
  }
}

.search-section {
  width: min(560px, 100%);
  margin: 0 auto 22px;
  display: grid;
  gap: 8px;
}

.search-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.oc-search-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 13px 18px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
  font: inherit;
  font-weight: 800;
  outline: none;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.oc-search-input::placeholder {
  color: rgba(200, 183, 216, 0.72);
}

.oc-search-input:focus {
  border-color: rgba(255, 122, 221, 0.85);
  background: rgba(255, 255, 255, 0.105);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(255, 122, 221, 0.24);
}

/* Bold */
.visual-lore-editor strong,
.visual-lore-editor b,
.visual-lore-editor p strong,
.visual-lore-editor p b,
.visual-lore-editor li strong,
.visual-lore-editor li b,
.lore-content strong,
.lore-content b,
.lore-content p strong,
.lore-content p b,
.lore-content li strong,
.lore-content li b {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
  font-style: inherit !important;
}

/* Italic */
.visual-lore-editor em,
.visual-lore-editor i,
.visual-lore-editor p em,
.visual-lore-editor p i,
.visual-lore-editor li em,
.visual-lore-editor li i,
.lore-content em,
.lore-content i,
.lore-content p em,
.lore-content p i,
.lore-content li em,
.lore-content li i {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: inherit !important;
  font-style: italic !important;
}

/* Bold + Italic */
.visual-lore-editor strong em,
.visual-lore-editor em strong,
.visual-lore-editor b i,
.visual-lore-editor i b,
.visual-lore-editor strong i,
.visual-lore-editor i strong,
.visual-lore-editor b em,
.visual-lore-editor em b,
.lore-content strong em,
.lore-content em strong,
.lore-content b i,
.lore-content i b,
.lore-content strong i,
.lore-content i strong,
.lore-content b em,
.lore-content em b {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
}

/* Underline */
.visual-lore-editor u,
.lore-content u {
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.11em !important;
  text-underline-offset: 0.16em !important;
}

/* Strike Through */
.visual-lore-editor s,
.visual-lore-editor strike,
.visual-lore-editor del,
.lore-content s,
.lore-content strike,
.lore-content del {
  text-decoration-line: line-through !important;
  text-decoration-thickness: 0.11em !important;
}

/* Italic */
.lore-content em,
.lore-content i,
.lore-content em *,
.lore-content i * {
  font-style: italic !important;
}

/* Bold */
.lore-content strong,
.lore-content b,
.lore-content strong *,
.lore-content b * {
  font-weight: 900 !important;
}

/* Underline */
.lore-content u,
.lore-content u * {
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.075em !important;
  text-underline-offset: 0.18em !important;
}

/* Strike */
.lore-content s,
.lore-content strike,
.lore-content del,
.lore-content s *,
.lore-content strike *,
.lore-content del * {
  text-decoration-line: line-through !important;
  text-decoration-thickness: 0.075em !important;
}

/* Underline + strike together */
.lore-content u s,
.lore-content s u,
.lore-content u strike,
.lore-content strike u,
.lore-content u del,
.lore-content del u {
  text-decoration-line: underline line-through !important;
}

/* Heading */
.lore-content h2,
.lore-content h2 * {
  font-size: 1.55rem !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

/* Italic inside heading */
.lore-content h2 em,
.lore-content h2 i,
.lore-content h2 em *,
.lore-content h2 i * {
  font-style: italic !important;
}

/* Covers the current lore renderer and likely future names too */
.lore-content,
.lore-panel,
.oc-lore,
#loreContent,
#modalLore,
#ocLore,
#lorePanel {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: 1.18rem !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Base text */
.lore-content p,
.lore-content li,
.lore-content span,
.lore-panel p,
.lore-panel li,
.lore-panel span,
.oc-lore p,
.oc-lore li,
.oc-lore span,
#loreContent p,
#loreContent li,
#loreContent span,
#modalLore p,
#modalLore li,
#modalLore span,
#ocLore p,
#ocLore li,
#ocLore span,
#lorePanel p,
#lorePanel li,
#lorePanel span {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Bold */
.lore-content strong,
.lore-content b,
.lore-panel strong,
.lore-panel b,
.oc-lore strong,
.oc-lore b,
#loreContent strong,
#loreContent b,
#modalLore strong,
#modalLore b,
#ocLore strong,
#ocLore b,
#lorePanel strong,
#lorePanel b {
  font-weight: 900 !important;
}

/* Italic */
.lore-content em,
.lore-content i,
.lore-panel em,
.lore-panel i,
.oc-lore em,
.oc-lore i,
#loreContent em,
#loreContent i,
#modalLore em,
#modalLore i,
#ocLore em,
#ocLore i,
#lorePanel em,
#lorePanel i {
  font-style: italic !important;
}

/* Underline */
.lore-content u,
.lore-panel u,
.oc-lore u,
#loreContent u,
#modalLore u,
#ocLore u,
#lorePanel u {
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.075em !important;
  text-underline-offset: 0.18em !important;
}

/* Strike */
.lore-content s,
.lore-content strike,
.lore-content del,
.lore-panel s,
.lore-panel strike,
.lore-panel del,
.oc-lore s,
.oc-lore strike,
.oc-lore del,
#loreContent s,
#loreContent strike,
#loreContent del,
#modalLore s,
#modalLore strike,
#modalLore del,
#ocLore s,
#ocLore strike,
#ocLore del,
#lorePanel s,
#lorePanel strike,
#lorePanel del {
  text-decoration-line: line-through !important;
  text-decoration-thickness: 0.075em !important;
}

/* Underline + strike */
.lore-content u s,
.lore-content s u,
.lore-content u strike,
.lore-content strike u,
.lore-panel u s,
.lore-panel s u,
.lore-panel u strike,
.lore-panel strike u,
.oc-lore u s,
.oc-lore s u,
.oc-lore u strike,
.oc-lore strike u,
#loreContent u s,
#loreContent s u,
#modalLore u s,
#modalLore s u,
#ocLore u s,
#ocLore s u,
#lorePanel u s,
#lorePanel s u {
  text-decoration-line: underline line-through !important;
}

/* Headings */
.lore-content h2,
.lore-panel h2,
.oc-lore h2,
#loreContent h2,
#modalLore h2,
#ocLore h2,
#lorePanel h2 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: 1.75rem !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

/* Italic inside heading */
.lore-content h2 em,
.lore-content h2 i,
.lore-panel h2 em,
.lore-panel h2 i,
.oc-lore h2 em,
.oc-lore h2 i,
#loreContent h2 em,
#loreContent h2 i,
#modalLore h2 em,
#modalLore h2 i,
#ocLore h2 em,
#ocLore h2 i,
#lorePanel h2 em,
#lorePanel h2 i {
  font-style: italic !important;
}

/* Public lore container */
.lore-content,
.lore-content * {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.lore-content {
  font-size: 1.18rem !important;
  line-height: 1.65 !important;
}

/* Paragraph/list spacing like editor */
.lore-content p {
  margin: 0 0 1em !important;
}

.lore-content li {
  margin: 0.35em 0 !important;
}

/* Bold: only weight */
.lore-content strong,
.lore-content b {
  font-weight: 900 !important;
}

/* Italic: only slant */
.lore-content em,
.lore-content i {
  font-style: italic !important;
}

/* Underline: only underline */
.lore-content u {
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.075em !important;
  text-underline-offset: 0.18em !important;
}

/* Strike: only strike */
.lore-content s,
.lore-content strike,
.lore-content del {
  text-decoration-line: line-through !important;
  text-decoration-thickness: 0.075em !important;
}

/* Bold + italic in every common nesting order */
.lore-content strong em,
.lore-content em strong,
.lore-content strong i,
.lore-content i strong,
.lore-content b em,
.lore-content em b,
.lore-content b i,
.lore-content i b {
  font-weight: 900 !important;
  font-style: italic !important;
}

/* Bold + underline */
.lore-content strong u,
.lore-content u strong,
.lore-content b u,
.lore-content u b {
  font-weight: 900 !important;
  text-decoration-line: underline !important;
}

/* Bold + strike */
.lore-content strong s,
.lore-content s strong,
.lore-content strong strike,
.lore-content strike strong,
.lore-content strong del,
.lore-content del strong,
.lore-content b s,
.lore-content s b,
.lore-content b strike,
.lore-content strike b,
.lore-content b del,
.lore-content del b {
  font-weight: 900 !important;
  text-decoration-line: line-through !important;
}

/* Italic + underline */
.lore-content em u,
.lore-content u em,
.lore-content i u,
.lore-content u i {
  font-style: italic !important;
  font-weight: 400 !important;
  text-decoration-line: underline !important;
}

/* Italic + strike */
.lore-content em s,
.lore-content s em,
.lore-content em strike,
.lore-content strike em,
.lore-content em del,
.lore-content del em,
.lore-content i s,
.lore-content s i,
.lore-content i strike,
.lore-content strike i,
.lore-content i del,
.lore-content del i {
  font-style: italic !important;
  font-weight: 400 !important;
  text-decoration-line: line-through !important;
}

/* Bold + italic + underline */
.lore-content strong em u,
.lore-content strong u em,
.lore-content em strong u,
.lore-content em u strong,
.lore-content u strong em,
.lore-content u em strong,
.lore-content b i u,
.lore-content b u i,
.lore-content i b u,
.lore-content i u b,
.lore-content u b i,
.lore-content u i b {
  font-weight: 900 !important;
  font-style: italic !important;
  text-decoration-line: underline !important;
}

/* Bold + italic + strike */
.lore-content strong em s,
.lore-content strong s em,
.lore-content em strong s,
.lore-content em s strong,
.lore-content s strong em,
.lore-content s em strong,
.lore-content strong em strike,
.lore-content strong strike em,
.lore-content em strong strike,
.lore-content em strike strong,
.lore-content strike strong em,
.lore-content strike em strong,
.lore-content b i s,
.lore-content b s i,
.lore-content i b s,
.lore-content i s b,
.lore-content s b i,
.lore-content s i b {
  font-weight: 900 !important;
  font-style: italic !important;
  text-decoration-line: line-through !important;
}

/* Bold + italic + underline + strike */
.lore-content strong em u s,
.lore-content strong em s u,
.lore-content strong u em s,
.lore-content strong u s em,
.lore-content strong s em u,
.lore-content strong s u em,
.lore-content em strong u s,
.lore-content em strong s u,
.lore-content em u strong s,
.lore-content em u s strong,
.lore-content em s strong u,
.lore-content em s u strong,
.lore-content u strong em s,
.lore-content u strong s em,
.lore-content u em strong s,
.lore-content u em s strong,
.lore-content u s strong em,
.lore-content u s em strong,
.lore-content s strong em u,
.lore-content s strong u em,
.lore-content s em strong u,
.lore-content s em u strong,
.lore-content s u strong em,
.lore-content s u em strong {
  font-weight: 900 !important;
  font-style: italic !important;
  text-decoration-line: underline line-through !important;
}

/* Underline + strike together */
.lore-content u s,
.lore-content s u,
.lore-content u strike,
.lore-content strike u,
.lore-content u del,
.lore-content del u {
  text-decoration-line: underline line-through !important;
}

/* Headings */
.lore-content h2,
.lore-content h2 * {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: 1.75rem !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
}

.lore-content h2 em,
.lore-content h2 i {
  font-style: italic !important;
}

/* Public lore container */
.lore-content,
.lore-content * {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.lore-content {
  font-size: 1.18rem !important;
  line-height: 1.65 !important;
}

/* Paragraph/list spacing like editor */
.lore-content p {
  margin: 0 0 1em !important;
}

.lore-content li {
  margin: 0.35em 0 !important;
}

/* Bold: only weight */
.lore-content strong,
.lore-content b {
  font-weight: 900 !important;
}

/* Italic: only slant */
.lore-content em,
.lore-content i {
  font-style: italic !important;
}

/* Underline: only underline */
.lore-content u {
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.075em !important;
  text-underline-offset: 0.18em !important;
}

/* Strike: only strike */
.lore-content s,
.lore-content strike,
.lore-content del {
  text-decoration-line: line-through !important;
  text-decoration-thickness: 0.075em !important;
}

/* Bold + italic in every common nesting order */
.lore-content strong em,
.lore-content em strong,
.lore-content strong i,
.lore-content i strong,
.lore-content b em,
.lore-content em b,
.lore-content b i,
.lore-content i b {
  font-weight: 900 !important;
  font-style: italic !important;
}

/* Bold + underline */
.lore-content strong u,
.lore-content u strong,
.lore-content b u,
.lore-content u b {
  font-weight: 900 !important;
  text-decoration-line: underline !important;
}

/* Bold + strike */
.lore-content strong s,
.lore-content s strong,
.lore-content strong strike,
.lore-content strike strong,
.lore-content strong del,
.lore-content del strong,
.lore-content b s,
.lore-content s b,
.lore-content b strike,
.lore-content strike b,
.lore-content b del,
.lore-content del b {
  font-weight: 900 !important;
  text-decoration-line: line-through !important;
}

/* Italic + underline */
.lore-content em u,
.lore-content u em,
.lore-content i u,
.lore-content u i {
  font-style: italic !important;
  font-weight: 400 !important;
  text-decoration-line: underline !important;
}

/* Italic + strike */
.lore-content em s,
.lore-content s em,
.lore-content em strike,
.lore-content strike em,
.lore-content em del,
.lore-content del em,
.lore-content i s,
.lore-content s i,
.lore-content i strike,
.lore-content strike i,
.lore-content i del,
.lore-content del i {
  font-style: italic !important;
  font-weight: 400 !important;
  text-decoration-line: line-through !important;
}

/* Bold + italic + underline */
.lore-content strong em u,
.lore-content strong u em,
.lore-content em strong u,
.lore-content em u strong,
.lore-content u strong em,
.lore-content u em strong,
.lore-content b i u,
.lore-content b u i,
.lore-content i b u,
.lore-content i u b,
.lore-content u b i,
.lore-content u i b {
  font-weight: 900 !important;
  font-style: italic !important;
  text-decoration-line: underline !important;
}

/* Bold + italic + strike */
.lore-content strong em s,
.lore-content strong s em,
.lore-content em strong s,
.lore-content em s strong,
.lore-content s strong em,
.lore-content s em strong,
.lore-content strong em strike,
.lore-content strong strike em,
.lore-content em strong strike,
.lore-content em strike strong,
.lore-content strike strong em,
.lore-content strike em strong,
.lore-content b i s,
.lore-content b s i,
.lore-content i b s,
.lore-content i s b,
.lore-content s b i,
.lore-content s i b {
  font-weight: 900 !important;
  font-style: italic !important;
  text-decoration-line: line-through !important;
}

/* Bold + italic + underline + strike */
.lore-content strong em u s,
.lore-content strong em s u,
.lore-content strong u em s,
.lore-content strong u s em,
.lore-content strong s em u,
.lore-content strong s u em,
.lore-content em strong u s,
.lore-content em strong s u,
.lore-content em u strong s,
.lore-content em u s strong,
.lore-content em s strong u,
.lore-content em s u strong,
.lore-content u strong em s,
.lore-content u strong s em,
.lore-content u em strong s,
.lore-content u em s strong,
.lore-content u s strong em,
.lore-content u s em strong,
.lore-content s strong em u,
.lore-content s strong u em,
.lore-content s em strong u,
.lore-content s em u strong,
.lore-content s u strong em,
.lore-content s u em strong {
  font-weight: 900 !important;
  font-style: italic !important;
  text-decoration-line: underline line-through !important;
}

/* Underline + strike together */
.lore-content u s,
.lore-content s u,
.lore-content u strike,
.lore-content strike u,
.lore-content u del,
.lore-content del u {
  text-decoration-line: underline line-through !important;
}

/* Headings */
.lore-content h2,
.lore-content h2 * {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: 1.75rem !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
}

.lore-content h2 em,
.lore-content h2 i {
  font-style: italic !important;
}

/* PUBLIC LORE CARD FORMAT FINAL
   The public page renders lore inside .lore-card, not .lore-content.
   Match admin editor formatting exactly. */

.lore-panel {
  color: var(--text) !important;
  font-size: 1.18rem !important;
  line-height: 1.65 !important;
}

.lore-card,
.lore-card p,
.lore-card li {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: 1.18rem !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.lore-card p {
  margin: 0 0 1em !important;
}

.lore-card li {
  margin: 0.35em 0 !important;
}

/* Bold */
.lore-card strong,
.lore-card b,
.lore-card strong *,
.lore-card b * {
  font-weight: 900 !important;
}

/* Italic */
.lore-card em,
.lore-card i,
.lore-card em *,
.lore-card i * {
  font-style: italic !important;
}

/* Underline */
.lore-card u,
.lore-card u * {
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.075em !important;
  text-underline-offset: 0.18em !important;
}

/* Strike */
.lore-card s,
.lore-card strike,
.lore-card del,
.lore-card s *,
.lore-card strike *,
.lore-card del * {
  text-decoration-line: line-through !important;
  text-decoration-thickness: 0.075em !important;
}

/* Underline + strike */
.lore-card u s,
.lore-card s u,
.lore-card u strike,
.lore-card strike u,
.lore-card u del,
.lore-card del u {
  text-decoration-line: underline line-through !important;
}

/* Headings */
.lore-card h2,
.lore-card h2 * {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: 1.75rem !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
}

.lore-card h2 em,
.lore-card h2 i {
  font-style: italic !important;
}

/* PUBLIC TIES PANEL POLISH */

#tiesPanel.ties-panel-polished:not(.hidden) {
  padding: 14px 30px 18px;
  border-bottom: 1px solid var(--border);
}

#tiesPanel.ties-panel-polished:not(.hidden) > *:last-child {
  margin-bottom: 0 !important;
}

#artPanel,
#lorePanel {
  padding-top: 22px;
}

@media (max-width: 720px) {
  #tiesPanel.ties-panel-polished:not(.hidden) {
    padding: 12px 18px 16px;
  }

  #artPanel,
  #lorePanel {
    padding-top: 18px;
  }
}

/* BIGGER ART LORE TABS */

.oc-modal .tab-row {
  gap: 14px;
}

.oc-modal .tab-button {
  min-width: 132px;
  min-height: 58px;
  padding: 14px 28px;
  font-size: 1.12rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  box-shadow: 0 0 18px rgba(255, 122, 221, 0.08);
}

.oc-modal .tab-button.active {
  box-shadow:
    0 0 0 1px rgba(255, 122, 221, 0.35),
    0 0 28px rgba(255, 122, 221, 0.22);
}

@media (max-width: 720px) {
  .oc-modal .tab-button {
    min-width: 112px;
    min-height: 52px;
    padding: 12px 22px;
    font-size: 1rem;
  }
}

/* STYLIZED PUBLIC MODAL SCROLLBARS */

/* Firefox */
.oc-modal,
.modal-panel,
.lore-panel,
.art-panel,
.lore-card {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 122, 221, 0.65) rgba(255, 255, 255, 0.06);
}

/* Chrome / Edge / Opera */
.oc-modal::-webkit-scrollbar,
.modal-panel::-webkit-scrollbar,
.lore-panel::-webkit-scrollbar,
.art-panel::-webkit-scrollbar,
.lore-card::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.oc-modal::-webkit-scrollbar-track,
.modal-panel::-webkit-scrollbar-track,
.lore-panel::-webkit-scrollbar-track,
.art-panel::-webkit-scrollbar-track,
.lore-card::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.045);
  border-radius: 999px;
  margin: 10px;
}

.oc-modal::-webkit-scrollbar-thumb,
.modal-panel::-webkit-scrollbar-thumb,
.lore-panel::-webkit-scrollbar-thumb,
.art-panel::-webkit-scrollbar-thumb,
.lore-card::-webkit-scrollbar-thumb {
  border: 3px solid rgba(20, 16, 32, 0.95);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 122, 221, 0.95), rgba(139, 92, 255, 0.82));
  box-shadow: 0 0 14px rgba(255, 122, 221, 0.28);
}

.oc-modal::-webkit-scrollbar-thumb:hover,
.modal-panel::-webkit-scrollbar-thumb:hover,
.lore-panel::-webkit-scrollbar-thumb:hover,
.art-panel::-webkit-scrollbar-thumb:hover,
.lore-card::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(255, 174, 235, 1), rgba(170, 132, 255, 0.95));
}

.oc-modal::-webkit-scrollbar-corner,
.modal-panel::-webkit-scrollbar-corner,
.lore-panel::-webkit-scrollbar-corner,
.art-panel::-webkit-scrollbar-corner,
.lore-card::-webkit-scrollbar-corner {
  background: transparent;
}

/* PUBLIC LIGHTBOX CAROUSEL ALT NAV */

.image-lightbox {
  overflow: hidden;
}

.image-lightbox img {
  transition:
    transform 220ms ease,
    opacity 220ms ease,
    filter 220ms ease;
}

.image-lightbox.lightbox-slide-left img {
  animation: lightboxRotateFromLeft 240ms ease both;
}

.image-lightbox.lightbox-slide-right img {
  animation: lightboxRotateFromRight 240ms ease both;
}

.image-lightbox.lightbox-slide-up img {
  animation: lightboxRotateFromTop 240ms ease both;
}

.image-lightbox.lightbox-slide-down img {
  animation: lightboxRotateFromBottom 240ms ease both;
}

@keyframes lightboxRotateFromLeft {
  from {
    opacity: 0.45;
    transform: perspective(900px) rotateY(-16deg) translateX(-48px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateY(0deg) translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes lightboxRotateFromRight {
  from {
    opacity: 0.45;
    transform: perspective(900px) rotateY(16deg) translateX(48px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateY(0deg) translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes lightboxRotateFromTop {
  from {
    opacity: 0.45;
    transform: perspective(900px) rotateX(14deg) translateY(-42px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes lightboxRotateFromBottom {
  from {
    opacity: 0.45;
    transform: perspective(900px) rotateX(-14deg) translateY(42px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
    filter: blur(0);
  }
}

.lightbox-nav-zone {
  position: fixed;
  z-index: 205;
  display: grid;
  place-items: center;
  border: 0;
  color: rgba(255, 241, 252, 0.92);
  background: transparent;
  cursor: pointer;
  opacity: 0.34;
  transition:
    opacity 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.lightbox-nav-zone.hidden {
  display: none !important;
}

.lightbox-nav-zone span {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 70px !important;
  height: 70px !important;
  border: 1.5px solid rgba(255, 122, 221, 0.72) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  color: transparent !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    background 160ms ease,
    border-color 160ms ease !important;
}

.lightbox-nav-zone:hover,
.lightbox-nav-zone:focus-visible {
  opacity: 1;
  background: rgba(255, 122, 221, 0.08);
}

.lightbox-nav-left,
.lightbox-nav-right {
  top: 56px;
  bottom: 22px;
  width: min(18vw, 220px);
}

.lightbox-nav-left {
  left: 0;
}

.lightbox-nav-right {
  right: 0;
}

.lightbox-nav-left:hover span {
  transform: translateX(-6px);
}

.lightbox-nav-right:hover span {
  transform: translateX(6px);
}

.lightbox-nav-up,
.lightbox-nav-down {
  left: 22px;
  right: 22px;
  height: min(16vh, 150px);
}

.lightbox-nav-up {
  top: 0;
}

.lightbox-nav-down {
  bottom: 0;
}

.lightbox-nav-up span,
.lightbox-nav-down span { transform: none !important; }

.lightbox-nav-up:hover span {
  transform: translateY(-5px);
}

.lightbox-nav-down:hover span {
  transform: translateY(5px);
}

.art-image-card.has-alt-versions::after {
  content: "↕";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 122, 221, 0.68);
  border-radius: 999px;
  color: var(--text);
  background: rgba(20, 16, 32, 0.78);
  box-shadow: 0 0 16px rgba(255, 122, 221, 0.18);
  font-weight: 900;
}

.alt-version-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  border: 1px solid rgba(255, 122, 221, 0.68);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--text);
  background: rgba(20, 16, 32, 0.78);
  font-weight: 900;
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .lightbox-nav-left,
  .lightbox-nav-right {
    width: 86px;
  }

  .lightbox-nav-zone span {
    width: 46px;
    height: 46px;
    font-size: 2.35rem;
  }

  .lightbox-nav-up,
  .lightbox-nav-down {
    height: 90px;
  }
}

/* LIGHTBOX NAV NEAR IMAGE VISUAL REWORK */

.image-lightbox img,
#lightboxImage {
  max-width: min(68vw, 980px) !important;
  max-height: min(72vh, 980px) !important;
  object-fit: contain !important;
}

.lightbox-nav-zone {
  position: fixed !important;
  z-index: 205 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  padding: 0 !important;
  color: rgba(255, 245, 252, 0.98) !important;
  background: transparent !important;
  cursor: pointer !important;
  opacity: 1 !important;
  overflow: hidden !important;
  transition:
    transform 160ms ease,
    opacity 160ms ease,
    filter 160ms ease !important;
}

.lightbox-nav-zone.hidden {
  display: none !important;
}

.lightbox-nav-zone span {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 70px !important;
  height: 70px !important;
  border: 1px solid rgba(255, 122, 221, 0.9) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 185, 239, 0.35), transparent 48%),
    linear-gradient(180deg, rgba(255, 122, 221, 0.92), rgba(139, 92, 255, 0.86)) !important;
  box-shadow:
    0 0 18px rgba(255, 122, 221, 0.24),
    0 0 38px rgba(255, 122, 221, 0.08),
    inset 0 0 14px rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 3.6rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.22) !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease !important;
}

/* soft glow/gradient that fades outward from the image */
.lightbox-nav-left::before,
.lightbox-nav-right::before,
.lightbox-nav-up::before,
.lightbox-nav-down::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 160ms ease !important;
}

.lightbox-nav-left::before {
  background:
    linear-gradient(
      to left,
      rgba(255, 122, 221, 0.16) 0%,
      rgba(255, 122, 221, 0.10) 24%,
      rgba(255, 122, 221, 0.05) 48%,
      rgba(255, 122, 221, 0.015) 76%,
      transparent 100%
    ) !important;
}

.lightbox-nav-right::before {
  background:
    linear-gradient(
      to right,
      rgba(255, 122, 221, 0.16) 0%,
      rgba(255, 122, 221, 0.10) 24%,
      rgba(255, 122, 221, 0.05) 48%,
      rgba(255, 122, 221, 0.015) 76%,
      transparent 100%
    ) !important;
}

.lightbox-nav-up::before {
  background:
    linear-gradient(
      to top,
      rgba(255, 122, 221, 0.15) 0%,
      rgba(255, 122, 221, 0.09) 24%,
      rgba(255, 122, 221, 0.05) 48%,
      rgba(255, 122, 221, 0.015) 76%,
      transparent 100%
    ) !important;
}

.lightbox-nav-down::before {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 122, 221, 0.15) 0%,
      rgba(255, 122, 221, 0.09) 24%,
      rgba(255, 122, 221, 0.05) 48%,
      rgba(255, 122, 221, 0.015) 76%,
      transparent 100%
    ) !important;
}

.lightbox-nav-zone:hover::before,
.lightbox-nav-zone:focus-visible::before {
  opacity: 1 !important;
}

.lightbox-nav-zone:hover span,
.lightbox-nav-zone:focus-visible span {
  transform: scale(1.04) !important;
  filter: brightness(1.03) !important;
  border-color: rgba(255, 122, 221, 0.88) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 185, 239, 0.25), transparent 50%),
    linear-gradient(180deg, rgba(255, 122, 221, 0.78), rgba(139, 92, 255, 0.74)) !important;
  box-shadow:
    0 0 18px rgba(255, 122, 221, 0.24),
    0 0 40px rgba(255, 122, 221, 0.09),
    inset 0 0 12px rgba(255, 255, 255, 0.12) !important;
}

.lightbox-nav-left span { transform: none !important; }

.lightbox-nav-right span { transform: none !important; }

.lightbox-nav-up span { transform: none !important; }

.lightbox-nav-down span {
  transform: translateY(2px);
  font-size: 2.85rem !important;
}

@media (max-width: 720px) {
  .image-lightbox img,
  #lightboxImage {
    max-width: min(78vw, 980px) !important;
    max-height: min(62vh, 980px) !important;
  }

  .lightbox-nav-zone span {
    width: 56px !important;
    height: 56px !important;
    font-size: 2.7rem !important;
  }

  .lightbox-nav-up span,
  .lightbox-nav-down span {
    font-size: 2.15rem !important;
  }
}

/* LIGHTBOX NAV SYMBOL CENTER FIX */

.lightbox-nav-zone span::before {
  display: block !important;
  color: rgba(255, 246, 252, 0.96) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.10) !important;
}

.lightbox-nav-left span::before {
  content: "‹" !important;
  font-size: 3.45rem !important;
  transform: translate(-1px, -2px) !important;
}

.lightbox-nav-right span::before {
  content: "›" !important;
  font-size: 3.45rem !important;
  transform: translate(1px, -2px) !important;
}

.lightbox-nav-up span::before {
  content: "⌃" !important;
  font-size: 2.45rem !important;
  transform: translate(0, -1px) !important;
}

.lightbox-nav-down span::before {
  content: "⌄" !important;
  font-size: 2.45rem !important;
  transform: translate(0, -3px) !important;
}

@media (max-width: 720px) {
  .lightbox-nav-zone span {
    width: 56px !important;
    height: 56px !important;
  }

  .lightbox-nav-left span::before,
  .lightbox-nav-right span::before {
    font-size: 2.7rem !important;
  }

  .lightbox-nav-up span::before,
  .lightbox-nav-down span::before {
    font-size: 2rem !important;
  }
}

/* LIGHTBOX OUTLINE ONLY FINAL OVERRIDE */

/* Default button circle: outline only, no fill */
.image-lightbox .lightbox-nav-zone span {
  position: relative !important;
  z-index: 2 !important;
  width: 70px !important;
  height: 70px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(255, 122, 221, 0.72) !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

/* Remove old constant gradient bands */
.image-lightbox .lightbox-nav-zone::before {
  opacity: 0 !important;
  transition: opacity 160ms ease !important;
}

/* Hover/focus: only then show fill + gradient band */
.image-lightbox .lightbox-nav-zone:hover::before,
.image-lightbox .lightbox-nav-zone:focus-visible::before {
  opacity: 1 !important;
}

.image-lightbox .lightbox-nav-zone:hover span,
.image-lightbox .lightbox-nav-zone:focus-visible span {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 185, 239, 0.22), transparent 52%),
    linear-gradient(180deg, rgba(255, 122, 221, 0.68), rgba(139, 92, 255, 0.66)) !important;
  border-color: rgba(255, 122, 221, 0.9) !important;
  box-shadow:
    0 0 18px rgba(255, 122, 221, 0.22),
    0 0 36px rgba(255, 122, 221, 0.08),
    inset 0 0 12px rgba(255, 255, 255, 0.10) !important;
}

/* Use pseudo symbols only, centered cleanly */
.image-lightbox .lightbox-nav-zone span::before {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255, 246, 252, 0.96) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  transform: none !important;
}

/* Left / right */
.image-lightbox .lightbox-nav-left span::before {
  content: "‹" !important;
  font-size: 3.5rem !important;
  padding-bottom: 0.08em !important;
  padding-right: 0.04em !important;
}

.image-lightbox .lightbox-nav-right span::before {
  content: "›" !important;
  font-size: 3.5rem !important;
  padding-bottom: 0.08em !important;
  padding-left: 0.04em !important;
}

/* Up / down: use filled triangle symbols so they center better than ⌃ / ⌄ */
.image-lightbox .lightbox-nav-up span::before {
  content: "▲" !important;
  font-size: 2.15rem !important;
  padding-bottom: 0.02em !important;
}

.image-lightbox .lightbox-nav-down span::before {
  content: "▼" !important;
  font-size: 2.15rem !important;
  padding-top: 0.02em !important;
}

/* Prevent older directional transform rules from offsetting the circles */
.image-lightbox .lightbox-nav-left span,
.image-lightbox .lightbox-nav-right span,
.image-lightbox .lightbox-nav-up span,
.image-lightbox .lightbox-nav-down span {
  transform: none !important;
}

.image-lightbox .lightbox-nav-zone:hover span,
.image-lightbox .lightbox-nav-zone:focus-visible span {
  transform: scale(1.04) !important;
}

/* Dimmer hover gradient bands */
.image-lightbox .lightbox-nav-left::before {
  background: linear-gradient(to left, rgba(255,122,221,0.12), rgba(255,122,221,0.055), transparent) !important;
}

.image-lightbox .lightbox-nav-right::before {
  background: linear-gradient(to right, rgba(255,122,221,0.12), rgba(255,122,221,0.055), transparent) !important;
}

.image-lightbox .lightbox-nav-up::before {
  background: linear-gradient(to top, rgba(255,122,221,0.11), rgba(255,122,221,0.05), transparent) !important;
}

.image-lightbox .lightbox-nav-down::before {
  background: linear-gradient(to bottom, rgba(255,122,221,0.11), rgba(255,122,221,0.05), transparent) !important;
}

@media (max-width: 720px) {
  .image-lightbox .lightbox-nav-zone span {
    width: 56px !important;
    height: 56px !important;
  }

  .image-lightbox .lightbox-nav-left span::before,
  .image-lightbox .lightbox-nav-right span::before {
    font-size: 2.75rem !important;
  }

  .image-lightbox .lightbox-nav-up span::before,
  .image-lightbox .lightbox-nav-down span::before {
    font-size: 1.75rem !important;
  }
}

/* LIGHTBOX SYMBOL MICRO NUDGE */

/* Re-center left/right a touch better */
.image-lightbox .lightbox-nav-left span::before {
  padding: 0 !important;
  transform: translate(-1px, -1px) !important;
}

.image-lightbox .lightbox-nav-right span::before {
  padding: 0 !important;
  transform: translate(1px, -1px) !important;
}

/* Lift the top arrow slightly */
.image-lightbox .lightbox-nav-up span::before {
  padding: 0 !important;
  transform: translateY(-3px) !important;
}

/* Keep bottom stable unless we need a later tweak */
.image-lightbox .lightbox-nav-down span::before {
  padding: 0 !important;
  transform: translateY(1px) !important;
}

/* LIGHTBOX SIDE ARROW LIFT */

.image-lightbox .lightbox-nav-left span::before {
  transform: translate(-1px, -5px) !important;
}

.image-lightbox .lightbox-nav-right span::before {
  transform: translate(1px, -5px) !important;
}

/* PUBLIC LIGHTBOX IMAGE CONTEXT CARD */

.lightbox-context-card {
  position: fixed;
  z-index: 206;
  max-width: 320px;
  border: 1px solid rgba(255, 122, 221, 0.45);
  border-radius: 22px;
  padding: 16px 18px;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 122, 221, 0.12), transparent 12rem),
    rgba(20, 16, 32, 0.74);
  box-shadow:
    0 0 24px rgba(255, 122, 221, 0.12),
    0 22px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
  pointer-events: none;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.lightbox-context-card.hidden {
  display: none !important;
}

.lightbox-context-card.fade-out {
  opacity: 0;
  transform: translateX(14px);
}

.lightbox-context-card.fade-in {
  animation: lightboxContextFadeIn 210ms ease both;
}

@keyframes lightboxContextFadeIn {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.lightbox-context-label {
  display: inline-grid;
  place-items: center;
  margin: 0 0 10px;
  border: 1px solid rgba(255, 122, 221, 0.62);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 122, 221, 0.12);
  color: var(--text);
  font-weight: 950;
  line-height: 1.1;
}

.lightbox-context-text {
  margin: 0;
  color: rgba(245, 235, 250, 0.92);
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.45;
}

.lightbox-variant-badge {
  position: fixed;
  z-index: 207;
  transform: translateX(-50%);
  pointer-events: none;
  border: 1px solid rgba(255, 122, 221, 0.62);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255, 122, 221, 0.28), rgba(139, 92, 255, 0.22)),
    rgba(20, 16, 32, 0.78);
  box-shadow: 0 0 20px rgba(255, 122, 221, 0.14);
  backdrop-filter: blur(12px);
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1;
}

.lightbox-variant-badge.hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .lightbox-context-card {
    max-width: none;
  }
}


/* PUBLIC LIGHTBOX ARTIST CREDIT */

.lightbox-artist-credit {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 122, 221, 0.28);
  display: grid;
  gap: 5px;
}

.lightbox-artist-credit span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lightbox-artist-credit a,
.lightbox-artist-credit strong {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.25;
}

.lightbox-artist-credit a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 122, 221, 0.55);
  width: fit-content;
}

.lightbox-artist-credit a:hover {
  color: rgba(255, 174, 235, 1);
  border-bottom-color: rgba(255, 174, 235, 0.95);
}


/* PUBLIC CONTEXT CARD CLICK SAFE */

.lightbox-context-card {
  pointer-events: auto !important;
}

.lightbox-context-card a,
.lightbox-context-card button {
  pointer-events: auto !important;
}

.lightbox-variant-badge {
  pointer-events: none !important;
}


/* PUBLIC ARTIST CREDIT LINE ONLY WITH CONTEXT */

.lightbox-context-card .lightbox-artist-credit:first-child,
.lightbox-context-card .lightbox-context-label + .lightbox-artist-credit {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.lightbox-context-card .lightbox-context-text + .lightbox-artist-credit {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 122, 221, 0.28) !important;
}


/* PUBLIC OC MODAL HEADER AND NAV ARROWS */

#ocModal .modal-header .eyebrow {
  display: none !important;
}

#modalOcName {
  font-size: clamp(2.6rem, 5.2vw, 5.1rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  margin: 0 !important;
}

.oc-modal-nav {
  position: fixed;
  z-index: 155;
  top: 50%;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 122, 221, 0.78);
  border-radius: 999px;
  color: rgba(255, 245, 252, 0.95);
  background:
    radial-gradient(circle at center, rgba(255, 122, 221, 0.08), transparent 68%),
    rgba(8, 6, 14, 0.28);
  box-shadow:
    0 0 22px rgba(255, 122, 221, 0.12),
    0 18px 58px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.oc-modal-nav:hover,
.oc-modal-nav:focus-visible {
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(255, 168, 235, 0.95);
  background:
    radial-gradient(circle at center, rgba(255, 122, 221, 0.24), rgba(139, 92, 255, 0.13)),
    rgba(24, 14, 34, 0.56);
  box-shadow:
    0 0 34px rgba(255, 122, 221, 0.25),
    0 18px 58px rgba(0, 0, 0, 0.4);
}

.oc-modal-nav span {
  display: block;
  transform: translateY(-2px);
  font-size: 4.1rem;
  font-weight: 950;
  line-height: 0.7;
}

.oc-modal-nav-prev {
  left: max(22px, calc((100vw - min(1180px, 88vw)) / 2 - 94px));
}

.oc-modal-nav-next {
  right: max(22px, calc((100vw - min(1180px, 88vw)) / 2 - 94px));
}

.oc-modal-nav.hidden {
  display: none !important;
}

@media (max-width: 980px) {
  .oc-modal-nav {
    width: 58px;
    height: 58px;
  }

  .oc-modal-nav span {
    font-size: 3.3rem;
  }

  .oc-modal-nav-prev {
    left: 14px;
  }

  .oc-modal-nav-next {
    right: 14px;
  }
}

@media (max-width: 640px) {
  #modalOcName {
    font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
  }

  .oc-modal-nav {
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .oc-modal-nav:hover,
  .oc-modal-nav:focus-visible {
    transform: scale(1.06);
  }
}


/* PUBLIC OC PRIORITY GLOWS */

.priority-sona,
.priority-main {
  position: relative;
  isolation: isolate;
}

.priority-sona::before,
.priority-main::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.9;
}

.priority-sona {
  border-color: rgba(255, 135, 224, 0.9) !important;
  box-shadow:
    0 0 0 1px rgba(255, 135, 224, 0.55),
    0 0 24px rgba(255, 105, 215, 0.38),
    0 0 62px rgba(255, 196, 92, 0.18),
    0 22px 70px rgba(0, 0, 0, 0.28) !important;
}

.priority-sona::before {
  background:
    radial-gradient(circle at top left, rgba(255, 135, 224, 0.48), transparent 52%),
    radial-gradient(circle at bottom right, rgba(255, 196, 92, 0.34), transparent 55%);
  filter: blur(12px);
}

.priority-main {
  border-color: rgba(132, 178, 255, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(132, 178, 255, 0.36),
    0 0 20px rgba(132, 178, 255, 0.22),
    0 0 48px rgba(139, 92, 255, 0.13),
    0 22px 70px rgba(0, 0, 0, 0.24) !important;
}

.priority-main::before {
  background:
    radial-gradient(circle at top left, rgba(132, 178, 255, 0.32), transparent 54%),
    radial-gradient(circle at bottom right, rgba(139, 92, 255, 0.22), transparent 58%);
  filter: blur(10px);
}

.priority-sona:hover {
  box-shadow:
    0 0 0 1px rgba(255, 160, 235, 0.78),
    0 0 34px rgba(255, 105, 215, 0.52),
    0 0 86px rgba(255, 196, 92, 0.24),
    0 26px 80px rgba(0, 0, 0, 0.34) !important;
}

.priority-main:hover {
  box-shadow:
    0 0 0 1px rgba(158, 198, 255, 0.58),
    0 0 28px rgba(132, 178, 255, 0.34),
    0 0 68px rgba(139, 92, 255, 0.18),
    0 26px 80px rgba(0, 0, 0, 0.3) !important;
}



/* PUBLIC MANUAL FAMILY TREE TAB */

#publicFamilyTreeTab.hidden {
  display: none !important;
}

.public-family-tree-wrap {
  overflow: auto;
  border: 1px solid rgba(255, 122, 221, 0.28);
  border-radius: 24px;
  min-height: 460px;
  background:
    radial-gradient(circle at top left, rgba(255, 122, 221, 0.1), transparent 18rem),
    rgba(8, 6, 14, 0.24);
}

.public-family-tree-canvas {
  position: relative;
  min-width: 900px;
  min-height: 540px;
}

.public-family-tree-svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.public-family-tree-line {
  fill: none;
  stroke: rgba(255, 122, 221, 0.82);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 8px rgba(255, 122, 221, 0.36))
    drop-shadow(0 0 18px rgba(255, 122, 221, 0.16));
}

.public-family-tree-node {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 38px minmax(74px, 1fr);
  align-items: center;
  gap: 9px;
  width: 144px;
  min-height: 60px;
  border: 1px solid rgba(255, 122, 221, 0.42);
  border-radius: 17px;
  padding: 8px;
  color: var(--text);
  background: rgba(25, 19, 34, 0.94);
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.public-family-tree-node img {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  object-fit: cover;
}

.public-family-tree-node:hover {
  border-color: rgba(255, 122, 221, 0.82);
  background: rgba(255, 122, 221, 0.12);
  box-shadow: 0 0 22px rgba(255, 122, 221, 0.18);
}

.family-hidden-from-links {
  display: none !important;
}


/* PUBLIC FAMILY TREE PANEL SIZE FIX */

#publicFamilyTreeTab.hidden,
#publicFamilyTreePanel.hidden {
  display: none !important;
}

#publicFamilyTreePanel {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
  padding: clamp(18px, 3vw, 34px) !important;
}

#publicFamilyTreePanel.hidden {
  display: none !important;
}

#publicFamilyTreePanel .public-family-tree-wrap {
  width: 100% !important;
  min-height: 560px !important;
  max-height: min(72vh, 760px) !important;
  overflow: auto !important;
}

#publicFamilyTreePanel .public-family-tree-canvas {
  min-width: 1100px !important;
  min-height: 680px !important;
}

#publicFamilyTreePanel .public-family-tree-node {
  width: 158px !important;
  min-height: 64px !important;
}

#publicFamilyTreePanel .public-family-tree-node img {
  width: 42px !important;
  height: 42px !important;
}




/* PUBLIC FAMILY TREE SCALING DISABLED */

#publicFamilyTreePanel {
  overflow: visible !important;
}

#publicFamilyTreePanel .public-family-tree-wrap {
  overflow: hidden !important;
  width: 100% !important;
  min-height: 560px !important;
  max-height: none !important;
  scrollbar-width: none !important;
}

#publicFamilyTreePanel .public-family-tree-wrap::-webkit-scrollbar {
  display: none !important;
}

#publicFamilyTreePanel .public-family-tree-canvas {
  transform: none !important;
  transform-origin: top left !important;
  margin: 0 auto !important;
}

#publicFamilyTreePanel .public-family-tree-node {
  transform: none !important;
}


/* PUBLIC FAMILY TREE NODE LABELS AND ARROWS */

.public-family-tree-node-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.public-family-tree-node-text strong {
  overflow: hidden;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-family-tree-node-text small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-modal-nav:not(.hidden) {
  display: grid !important;
}


/*
  Fixes modal art galleries where multiple images in the same column
  visually touch/overlap instead of having proper breathing room.
*/

#artPanel,
#modalArtPanel,
.modal-art-panel {
  overflow-x: hidden !important;
}

#artPanel .art-grid,
#artPanel .gallery-grid,
#artPanel .modal-gallery,
#artPanel .oc-gallery,
#modalArtPanel .art-grid,
#modalArtPanel .gallery-grid,
#modalArtPanel .modal-gallery,
#modalArtPanel .oc-gallery,
.modal-art-panel .art-grid,
.modal-art-panel .gallery-grid,
.modal-art-panel .modal-gallery,
.modal-art-panel .oc-gallery {
  gap: 28px !important;
  row-gap: 28px !important;
  column-gap: 28px !important;
}

/* If the gallery uses masonry/CSS columns, this is the important part. */
#artPanel .art-card,
#artPanel .gallery-item,
#artPanel .gallery-card,
#artPanel .image-card,
#artPanel .art-tile,
#artPanel figure,
#modalArtPanel .art-card,
#modalArtPanel .gallery-item,
#modalArtPanel .gallery-card,
#modalArtPanel .image-card,
#modalArtPanel .art-tile,
#modalArtPanel figure,
.modal-art-panel .art-card,
.modal-art-panel .gallery-item,
.modal-art-panel .gallery-card,
.modal-art-panel .image-card,
.modal-art-panel .art-tile,
.modal-art-panel figure {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  margin-bottom: 28px !important;
}

/* Prevent inner images from escaping their card and visually eating the gap. */
#artPanel img,
#modalArtPanel img,
.modal-art-panel img {
  display: block !important;
  max-width: 100% !important;
}

/* Last item in a column/card stack does not need extra bottom padding. */
#artPanel .art-card:last-child,
#artPanel .gallery-item:last-child,
#artPanel .gallery-card:last-child,
#artPanel .image-card:last-child,
#artPanel .art-tile:last-child,
#artPanel figure:last-child,
#modalArtPanel .art-card:last-child,
#modalArtPanel .gallery-item:last-child,
#modalArtPanel .gallery-card:last-child,
#modalArtPanel .image-card:last-child,
#modalArtPanel .art-tile:last-child,
#modalArtPanel figure:last-child {
  margin-bottom: 0 !important;
}


/*
  The gallery columns/cards can contain several stacked images:
  main image + alt versions. The old spacing fix only spaced the outer
  columns, not the stacked images inside them.
*/

#artPanel .gallery-card,
#artPanel .art-card,
#artPanel .image-card,
#artPanel .art-tile,
#artPanel .gallery-item,
#artPanel figure,
#modalArtPanel .gallery-card,
#modalArtPanel .art-card,
#modalArtPanel .image-card,
#modalArtPanel .art-tile,
#modalArtPanel .gallery-item,
#modalArtPanel figure,
.modal-art-panel .gallery-card,
.modal-art-panel .art-card,
.modal-art-panel .image-card,
.modal-art-panel .art-tile,
.modal-art-panel .gallery-item,
.modal-art-panel figure {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Handles wrappers around each image, not just raw img tags. */
#artPanel .gallery-card > *,
#artPanel .art-card > *,
#artPanel .image-card > *,
#artPanel .art-tile > *,
#artPanel .gallery-item > *,
#artPanel figure > *,
#modalArtPanel .gallery-card > *,
#modalArtPanel .art-card > *,
#modalArtPanel .image-card > *,
#modalArtPanel .art-tile > *,
#modalArtPanel .gallery-item > *,
#modalArtPanel figure > *,
.modal-art-panel .gallery-card > *,
.modal-art-panel .art-card > *,
.modal-art-panel .image-card > *,
.modal-art-panel .art-tile > *,
.modal-art-panel .gallery-item > *,
.modal-art-panel figure > * {
  flex: 0 0 auto !important;
}

/* Extra fallback: if the images/buttons are direct siblings, force margin too. */
#artPanel .gallery-card > * + *,
#artPanel .art-card > * + *,
#artPanel .image-card > * + *,
#artPanel .art-tile > * + *,
#artPanel .gallery-item > * + *,
#artPanel figure > * + *,
#modalArtPanel .gallery-card > * + *,
#modalArtPanel .art-card > * + *,
#modalArtPanel .image-card > * + *,
#modalArtPanel .art-tile > * + *,
#modalArtPanel .gallery-item > * + *,
#modalArtPanel figure > * + *,
.modal-art-panel .gallery-card > * + *,
.modal-art-panel .art-card > * + *,
.modal-art-panel .image-card > * + *,
.modal-art-panel .art-tile > * + *,
.modal-art-panel .gallery-item > * + *,
.modal-art-panel figure > * + * {
  margin-top: 22px !important;
}

/* Keep each actual image nicely rounded as its own tile. */
#artPanel .gallery-card img,
#artPanel .art-card img,
#artPanel .image-card img,
#artPanel .art-tile img,
#artPanel .gallery-item img,
#artPanel figure img,
#modalArtPanel .gallery-card img,
#modalArtPanel .art-card img,
#modalArtPanel .image-card img,
#modalArtPanel .art-tile img,
#modalArtPanel .gallery-item img,
#modalArtPanel figure img,
.modal-art-panel .gallery-card img,
.modal-art-panel .art-card img,
.modal-art-panel .image-card img,
.modal-art-panel .art-tile img,
.modal-art-panel .gallery-item img,
.modal-art-panel figure img {
  border-radius: 18px !important;
  display: block !important;
}

/* If the actual clickable image buttons have their own wrapper class, space those too. */
#artPanel button + button,
#artPanel .art-image + .art-image,
#artPanel .gallery-image + .gallery-image,
#artPanel .image-button + .image-button,
#artPanel .alt-image + .alt-image,
#modalArtPanel button + button,
#modalArtPanel .art-image + .art-image,
#modalArtPanel .gallery-image + .gallery-image,
#modalArtPanel .image-button + .image-button,
#modalArtPanel .alt-image + .alt-image,
.modal-art-panel button + button,
.modal-art-panel .art-image + .art-image,
.modal-art-panel .gallery-image + .gallery-image,
.modal-art-panel .image-button + .image-button,
.modal-art-panel .alt-image + .alt-image {
  margin-top: 22px !important;
}


/* PUBLIC ART GALLERY V2 ISOLATED GRID */

/*
  Fresh isolated public art gallery.
  Does not use .art-image-card, so old gallery CSS cannot stack/overlap it.
*/

#artPanel.public-art-panel-v2 {
  display: block !important;
  padding: 22px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  columns: initial !important;
  column-count: initial !important;
}

#artPanel.public-art-panel-v2.hidden {
  display: none !important;
}

#artPanel.public-art-panel-v2 > .empty-state {
  width: 100% !important;
}

#artPanel.public-art-panel-v2 > .public-art-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 22px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
}

#artPanel.public-art-panel-v2 .public-art-card-v2 {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  overflow: hidden !important;
  position: relative !important;
  contain: layout paint !important;
  isolation: isolate !important;
  cursor: pointer !important;
  text-align: inherit !important;
  font: inherit !important;
  color: inherit !important;
}

#artPanel.public-art-panel-v2 .public-art-card-v2 img {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
}

#artPanel.public-art-panel-v2 .public-art-card-v2:hover,
#artPanel.public-art-panel-v2 .public-art-card-v2:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 122, 221, 0.72) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.36),
    0 0 30px rgba(255, 122, 221, 0.16) !important;
}

#artPanel.public-art-panel-v2 .public-art-alt-badge-v2 {
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 122, 221, 0.65) !important;
  border-radius: 999px !important;
  background: rgba(28, 24, 36, 0.84) !important;
  color: var(--text) !important;
  font-weight: 950 !important;
  pointer-events: none !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
}

/* Extra safety: old gallery classes must not style the v2 grid. */
#artPanel.public-art-panel-v2 .public-art-grid-v2 .art-image-card,
#artPanel.public-art-panel-v2 .public-art-grid-v2 .gallery-card,
#artPanel.public-art-panel-v2 .public-art-grid-v2 .art-card {
  all: unset !important;
}

@media (max-width: 900px) {
  #artPanel.public-art-panel-v2 {
    padding: 20px !important;
  }

  #artPanel.public-art-panel-v2 > .public-art-grid-v2 {
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 560px) {
  #artPanel.public-art-panel-v2 {
    padding: 14px !important;
  }

  #artPanel.public-art-panel-v2 > .public-art-grid-v2 {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important;
    gap: 14px !important;
  }
}


/* PUBLIC ART GALLERY V2 TIGHT SPACING */

#artPanel.public-art-panel-v2 {
  padding: 22px !important;
}

#artPanel.public-art-panel-v2 > .public-art-grid-v2 {
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important;
  gap: 22px !important;
}

@media (max-width: 900px) {
  #artPanel.public-art-panel-v2 {
    padding: 16px !important;
  }

  #artPanel.public-art-panel-v2 > .public-art-grid-v2 {
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 560px) {
  #artPanel.public-art-panel-v2 {
    padding: 12px !important;
  }

  #artPanel.public-art-panel-v2 > .public-art-grid-v2 {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
    gap: 12px !important;
  }
}


/* PUBLIC ART GALLERY V2 FOUR PER ROW */

#artPanel.public-art-panel-v2 {
  padding: 22px !important;
}

#artPanel.public-art-panel-v2 > .public-art-grid-v2 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

/* Medium screens can drop to 3. */
@media (max-width: 1100px) {
  #artPanel.public-art-panel-v2 > .public-art-grid-v2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

/* Small screens can drop to 2. */
@media (max-width: 760px) {
  #artPanel.public-art-panel-v2 {
    padding: 14px !important;
  }

  #artPanel.public-art-panel-v2 > .public-art-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* Tiny mobile can use 1 if needed. */
@media (max-width: 420px) {
  #artPanel.public-art-panel-v2 > .public-art-grid-v2 {
    grid-template-columns: 1fr !important;
  }
}


/* PUBLIC IMAGE RIGHT CLICK PROTECTION V2 */

#ocGallery img,
#ocModal img,
#imageLightbox img,
#artPanel img,
.public-art-card-v2,
.public-art-card-v2 img,
.public-art-grid-v2 img,
.art-image-card img,
.thumbnail-wrap img,
.tie-thumb,
.public-family-tree-node img,
#lightboxImage {
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}


/* PUBLIC ART REFERENCE IMAGE */

#artPanel.public-art-panel-v2 .public-art-reference-v2 {
  border-color: rgba(255, 207, 87, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(255, 207, 87, 0.28),
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(255, 207, 87, 0.18) !important;
}

#artPanel.public-art-panel-v2 .public-art-reference-badge-v2 {
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  z-index: 6 !important;
  display: grid !important;
  place-items: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 226, 143, 0.9) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255, 209, 92, 0.96), rgba(255, 151, 58, 0.88)) !important;
  color: rgba(35, 24, 8, 0.98) !important;
  font-size: 0.78rem !important;
  font-weight: 1000 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38) !important;
}

/* Move the alt badge down if the card is also the reference image. */
#artPanel.public-art-panel-v2 .public-art-reference-v2 .public-art-alt-badge-v2 {
  top: 58px !important;
}


/* PUBLIC THUMBNAIL LOADING STATES */

#lightboxImage.lightbox-loading-full {
  filter: blur(0.4px) saturate(0.96);
}

#lightboxImage.lightbox-full-loaded {
  filter: none;
}






/* PUBLIC CATEGORY SHOW MORE */

.public-category-hidden {
  display: none !important;
}

.public-category-show-more-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 122, 221, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(30, 24, 40, 0.72) !important;
  color: var(--text, #fff) !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.public-category-show-more-toggle:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 122, 221, 0.78) !important;
  background: rgba(255, 122, 221, 0.16) !important;
}

.public-category-show-more-toggle.is-expanded {
  border-color: rgba(255, 207, 87, 0.72) !important;
  background: rgba(255, 207, 87, 0.14) !important;
}

.public-story-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}