/* ============================================================================
   TERREH'S TALES — COMPLETE UNIFIED STYLESHEET (v20, 8 NOV 2026)

   ONE FILE: uses the full working campaign/homepage stylesheet recovered from
   8 November, followed by the v20 visual refinements below.

   OFFLINE OBISIDIAN: .obsidian/snippets/terrehs-tales.css (enable in Appearance)
   OBSIDIAN PUBLISH: vault root /publish.css (publish this file)

   IMPORTANT: Keep your existing Markdown callouts, including
     tt-campaign-status, tt-campaign-updates, tt-campaign-focus,
     tt-campaign-recap, tt-campaign-cast, tt-campaign-party,
     tt-campaign-npcs, and tt-latest-updates.
   Do NOT replace the pages with an HTML-based dashboard snippet.

   Existing campaign content, image styling, home page, hero/companion grids,
   world palettes, publish sidebar adjustments and wide layouts are preserved.
   CSS files are complete, NOT patches. Do not append to another CSS file.
   ============================================================================ */

/* ============================================================================
   TERREH'S TALES — consolidated stylesheet (November 2026)
   Use as publish.css in the vault root for Obsidian Publish.
   Use as .obsidian/snippets/terrehs-tales.css for local Reading view.

   Home page requires the cssclasses property: terrehs-home
   Campaign entries: artwork embed, icon embed, bold internal link, italic summary.

   The eight campaign themes follow the LINK, never the card's list position.
   The Week the Republic Fell deliberately matches "Republic", so its artwork
   and icon files may still contain the previous name ("Died").

   Campaign fonts: IM Fell English SC (Call From the Deep), Almendra SC
   (Curse of the Usurper), Pirata One (Throne of Thorns), Marcellus SC
   (Odyssey and Thylean Heroes), Cinzel Decorative (Wrath of the Righteous),
   and Oxanium (Zephyr's Veil).
   Nodesto declarations remain available for optional future homebrew headings.
   Star Jedi must be loaded separately: Local Fonts in Obsidian; a licensed,
   publicly accessible @font-face source is needed on Obsidian Publish.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Almendra+SC&family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English+SC&family=Marcellus+SC&family=News+Cycle:wght@400;700&family=Oxanium:wght@600;700&family=Pirata+One&family=Squada+One&display=swap");

/* 01. FONTS ---------------------------------------------------------------- */
/* Solbera Bookinsanity: regular and true italic for campaign card summaries.
   Source: https://github.com/jonathonf/solbera-dnd-fonts (CC BY-SA 4.0). */
@font-face {
  font-family: "Bookinsanity";
  src: url("https://cdn.jsdelivr.net/gh/jonathonf/solbera-dnd-fonts@master/Bookinsanity/Bookinsanity.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bookinsanity";
  src: url("https://cdn.jsdelivr.net/gh/jonathonf/solbera-dnd-fonts@master/Bookinsanity/Bookinsanity%20Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nodesto";
  src: url("https://cdn.jsdelivr.net/gh/jonathonf/solbera-dnd-fonts@master/Nodesto%20Caps%20Condensed/Nodesto%20Caps%20Condensed.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Optional variant for future page headings and homebrew materials. */
@font-face {
  font-family: "Nodesto";
  src: url("https://cdn.jsdelivr.net/gh/jonathonf/solbera-dnd-fonts@master/Nodesto%20Caps%20Condensed/Nodesto%20Caps%20Condensed%20Bold%20Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Solbera's CC BY-SA 4.0 recreation of the 2014 D&D heading face.
   Source and licence: https://github.com/jonathonf/solbera-dnd-fonts */
@font-face {
  font-family: "Mr Eaves Small Caps";
  src: url("https://cdn.jsdelivr.net/gh/jonathonf/solbera-dnd-fonts@master/Mr%20Eaves/Mr%20Eaves%20Small%20Caps.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Do NOT add a made-up URL for Star Jedi here. Your Local Fonts plugin makes
   "Star Jedi" available in Obsidian. Publish will need its own licensed URL. */

/* 02. SITE COLOURS AND CHROME ---------------------------------------------- */
.theme-dark {
  --background-primary: #0b1727;
  --background-secondary: #111f31;
  --background-secondary-alt: #15243a;
  --text-normal: #eee9df;
  --text-muted: #bac4cf;
  --text-faint: #8e9eae;
  --text-accent: #e1b96e;
  --text-accent-hover: #f0d5a0;
  --interactive-accent: #c79b57;
  --color-accent: #d7ae69;
  --background-modifier-border: #4e4650;
  --h1-color: #f0d6a3;
  --h2-color: #e3bd7b;
  --h3-color: #f1dfbb;
  --link-color: #e5bd7a;
  --link-color-hover: #f8dba4;
}

.published-container {
  --page-width: 1040px;
  --page-title-font: Georgia, "Palatino Linotype", serif;
  --font-text: "Segoe UI", Arial, sans-serif;
  --font-interface: "Segoe UI", Arial, sans-serif;
  background-color: #0b1727;
}

.site-body-left-column {
  background: linear-gradient(180deg, #0c1728, #101f34 70%, #0b1727);
  border-right: 1px solid rgba(214, 173, 102, .25);
}

.site-body-left-column-site-name {
  font-family: Georgia, "Palatino Linotype", serif;
  font-variant: small-caps;
  letter-spacing: .075em;
  color: #e5c587;
}

.tree-item-self:hover,
.tree-item-self.is-clickable:hover { color: #f0cf96; }

.markdown-rendered a.internal-link,
.markdown-rendered a.external-link { text-underline-offset: .16em; }

/* 03. HOMEPAGE INTRO ------------------------------------------------------- */
/* The home is wider than normal reading notes, but its welcome panel stays
   deliberately compact. This affects ONLY the page with terrehs-home. */
.terrehs-home { --file-line-width: 1440px; }
.published-container:has(.terrehs-home) { --page-width: 1440px; }

.terrehs-home h1:first-of-type {
  font-family: Georgia, "Palatino Linotype", serif;
  font-size: clamp(2.3rem, 4.5vw, 3.8rem);
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: .06em;
  line-height: 1.12;
  text-align: center;
  color: #f6ddb0;
  padding: 1.2rem .75rem .45rem;
  margin: .5rem auto 0;
  max-width: 1050px;
  border: 0;
  border-radius: 0;
  background: none;
  text-shadow: 0 3px 17px rgba(0, 0, 0, .45);
  box-shadow: none;
}

.terrehs-home .callout[data-callout^="tt-"] {
  margin: 1.5rem 0;
  --callout-color: 215, 174, 105;
  --callout-icon: none;
}

.terrehs-home .callout[data-callout^="tt-"] .callout-icon { display: none; }

.terrehs-home .callout[data-callout="tt-intro"] {
  box-sizing: border-box;
  width: min(100%, 960px);
  max-width: 960px;
  margin: .8rem auto 2.1rem;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.2rem, 3vw, 2.7rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(198, 144, 67, .12), transparent 66%),
    linear-gradient(140deg, #101e30, #14283d 58%, #101e30);
  border: 1px solid rgba(218, 174, 101, .42);
  border-radius: 15px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .13);
  text-align: center;
}

.terrehs-home .callout[data-callout="tt-intro"] .callout-title {
  display: block;
  font-family: Georgia, "Palatino Linotype", serif;
  font-style: italic;
  font-size: clamp(1.22rem, 2.1vw, 1.65rem);
  font-weight: normal;
  line-height: 1.3;
  color: #f1d6a5;
  margin-bottom: .45rem;
}

.terrehs-home .callout[data-callout="tt-intro"] .callout-content {
  color: #d7dfe8;
  max-width: 63ch;
  margin-inline: auto;
  font-size: 1.03rem;
  line-height: 1.55;
}
.terrehs-home .callout[data-callout="tt-intro"] .callout-content p {
  margin: .4rem 0 0;
}

/* 04. SECTION HEADINGS AND TWO-CARD HOMEBREW GRID ---------------------- */
.terrehs-home .callout[data-callout="tt-campaigns"],
.terrehs-home .callout[data-callout="tt-homebrew"] {
  border: none;
  background: transparent;
  padding: 1.25rem 0;
}

.terrehs-home .callout[data-callout="tt-campaigns"] > .callout-title,
.terrehs-home .callout[data-callout="tt-homebrew"] > .callout-title {
  justify-content: center;
  font-family: Georgia, "Palatino Linotype", serif;
  font-variant: small-caps;
  letter-spacing: .06em;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: normal;
  color: #e8bd78;
  text-align: center;
}

.terrehs-home .callout[data-callout="tt-campaigns"] > .callout-content > p,
.terrehs-home .callout[data-callout="tt-homebrew"] > .callout-content > p {
  text-align: center;
  color: #c7d0d9;
}

/* Limit the parchment panel to a comfortable reading width. */
.terrehs-home .callout[data-callout="tt-homebrew"] {
  box-sizing: border-box;
  max-width: 1240px;
  margin: 2rem auto;
}

/* 2014 D&D-inspired typography: Nodesto / Mr Eaves Small Caps / Bookinsanity. */
.terrehs-home .callout[data-callout="tt-homebrew"] {
  --link-unresolved-opacity: 1;
  background: linear-gradient(145deg, #e4d0a9, #f1dfbe 55%, #cbb58b);
  border: 1px solid #8e7045;
  border-radius: 13px;
  padding: clamp(1.2rem, 3vw, 2.5rem);
  color: #2a241e;
}

.terrehs-home .callout[data-callout="tt-homebrew"] > .callout-title {
  font-family: "Nodesto", Georgia, serif;
  font-variant: normal;
  font-size: clamp(2.05rem, 3.6vw, 2.85rem);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.15;
  color: #34271d;
}

.terrehs-home .callout[data-callout="tt-homebrew"] > .callout-content > p {
  font-family: "Bookinsanity", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.45;
  max-width: 68ch;
  margin-inline: auto;
  color: #34271d;
}

/* Only the TWO top-level items are parchment cards. */
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.15rem;
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
}

.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li {
  --tt-hb-icon: "✧";
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 1.4rem 1.2rem 1.55rem;
  list-style: none;
  border: 1px solid #b09a77;
  border-radius: 12px;
  background: rgba(255, 250, 238, .70);
  box-shadow: 0 4px 13px rgba(63, 42, 23, .08);
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child { --tt-hb-icon: "♜"; }
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:last-child { --tt-hb-icon: "⚙"; }

.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li::before {
  content: var(--tt-hb-icon);
  display: block;
  height: 2.2rem;
  margin: 0 auto .35rem;
  color: #87643a;
  font: 400 2rem/1.1 Georgia, serif;
}

.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:is(:hover, :focus-within) {
  transform: translateY(-3px);
  border-color: #806037;
  background: rgba(255, 250, 238, .90);
}

/* Top-level card titles: larger again now that the cards are wider. */
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li > p { margin: 0; }
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li > strong,
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li > p > strong {
  display: flex;
  min-height: 2.6rem;
  align-items: center;
  justify-content: center;
}

.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li > strong a.internal-link,
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li > p > strong a.internal-link {
  color: #392719 !important;
  opacity: 1 !important;
  font-family: "Mr Eaves Small Caps", Georgia, serif;
  font-size: clamp(1.35rem, 2.5vw, 1.6rem);
  font-weight: 400;
  font-variant: normal;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  white-space: normal;
  text-wrap: balance;
}

/* Shared inner list frame: use a divider under each main card title. */
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li > ul {
  list-style: none;
  margin: .55rem 0 0;
  padding: .65rem 0 0;
  border-top: 1px solid #d4c2a3;
}

/* The FIRST card contains two grouped sections, not two smaller cards. */
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li {
  list-style: none;
  margin: 0;
  padding: .15rem 0 .5rem;
  border: none;
  background: none;
  box-shadow: none;
}
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li + li {
  border-top: 1px solid #e1d2b8;
  padding-top: .8rem;
  margin-top: .45rem;
}
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li > p {
  margin: 0 !important;
  padding: 0;
}
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li > strong,
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li > p > strong {
  display: block;
  color: #77543b;
  font-family: "Mr Eaves Small Caps", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.25;
  margin-bottom: .28rem;
}

/* The second inner heading links to the existing Customising directory. */
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li > p > strong a.internal-link,
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li > strong a.internal-link {
  font: inherit;
  color: #77543b !important;
  opacity: 1 !important;
  text-decoration: none;
}

/* Links in Creating / Customising groups and in the New Systems list. */
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li > ul > li,
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:last-child > ul > li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content li > p {
  margin-top: 0;
  margin-bottom: 0;
}

.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:first-child > ul > li > ul > li a.internal-link,
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:last-child > ul > li a.internal-link {
  display: block;
  padding: .19rem .1rem;
  color: #60432b !important;
  opacity: 1 !important;
  font-family: "Bookinsanity", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  font-variant: normal;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: color .18s ease, text-decoration-color .18s ease;
}

/* Spread the six system links down the taller card so it feels balanced
   alongside the two grouped sections in Character Options. */
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:last-child {
  display: flex;
  flex-direction: column;
}
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:last-child > ul {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-evenly;
  gap: .22rem;
}

/* Keep the longest system name together while there is enough room. */
.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:last-child a.internal-link:is(
  [data-href*="Advanced Weapon Mastery" i],
  [href*="Advanced" i]
) { white-space: nowrap; }

.terrehs-home .callout[data-callout="tt-homebrew"] .callout-content a.internal-link:is(:hover, :focus-visible) {
  color: #7a4328 !important;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.terrehs-home .callout[data-callout="tt-homebrew"] .list-bullet { display: none !important; }
.terrehs-home .callout[data-callout="tt-homebrew"] li::marker { content: ""; }

/* 05. CAMPAIGN GRID: FOUR COLUMNS, TWO ROWS ON DESKTOP --------------------
   All eight campaign cards stay visible; no carousel or horizontal scrollbar.
   Tablet: two columns. Phone: one column. The card themes still follow links. */
.terrehs-home .callout[data-callout="tt-campaigns"] {
  max-width: 1420px;
  margin: 1.5rem auto 2.2rem;
}
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  column-gap: 1.1rem;
  row-gap: 1.25rem;
  list-style: none !important;
  margin: 1.4rem 0;
  padding: .45rem .2rem .65rem;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  scroll-snap-type: none;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li {
  /* Change individual campaign aesthetics in section 08 below. */
  --tt-card-bg: #172d40;
  --tt-art-top: #3c627e;
  --tt-card-border: rgba(222, 179, 111, .65);
  --tt-title-color: #f4d49b;
  --tt-title-font: Georgia, "Palatino Linotype", serif;
  --tt-title-size: 1rem;
  --tt-title-weight: 700;
  --tt-title-style: normal;
  --tt-title-spacing: 0;
  --tt-title-white-space: nowrap;
  --tt-title-text-wrap: nowrap;
  --tt-icon-opacity: .78;
  --tt-content-hover-opacity: .90;
  --tt-fallback-icon: "✦";
  --tt-icon-colour: #f0ca8b;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex: initial;
  width: auto;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: none;
  min-height: 0;
  height: auto;
  overflow: hidden;
  scroll-snap-align: none;
  list-style: none !important;
  margin: 0;
  padding: 228px 1rem 20px;
  border: 1px solid var(--tt-card-border);
  border-radius: 12px;
  background: var(--tt-card-bg);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .2);
  text-align: center;
  transition: transform .18s ease, border-color .18s ease;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:hover {
  transform: translateY(-3px);
  border-color: #efc988;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li::marker { content: ""; }
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li > .list-bullet,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li > .list-bullet::after { display: none !important; }

/* Decorative artwork fallback, visible when no image has been embedded. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 224px;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 20%, var(--tt-art-top), transparent 76%),
    linear-gradient(180deg, var(--tt-card-bg) 15%, transparent 60%, var(--tt-card-bg));
  pointer-events: none;
}

/* 06. CAMPAIGN IMAGES AND ICONS ------------------------------------------- */
/* Default embedded image styling is for the artwork. The icon rules below
   override it using the file path. This works with Obsidian's image embeds. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li .image-embed {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 224px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.55) 57%, rgba(0,0,0,.16) 74%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.55) 57%, rgba(0,0,0,.16) 74%, transparent 90%);
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li .image-embed img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center 38%;
  border: 0;
  border-radius: 0;
  user-select: none;
}

/* Detect an SVG or any file in Assets/Campaign Icons (SVG/PNG/etc.).
   These rules MUST follow the default artwork image rules above. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li .image-embed:is(
  [src*="Campaign Icons" i],
  [src*="Campaign%20Icons" i],
  [src*=".svg" i],
  :has(img[src*="Campaign Icons" i]),
  :has(img[src*="Campaign%20Icons" i]),
  :has(img[src*=".svg" i])
) {
  top: 178px;
  left: 50%;
  width: 38px;
  height: 38px;
  z-index: 3;
  overflow: visible;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.55));
  -webkit-mask-image: none;
  mask-image: none;
  opacity: var(--tt-icon-opacity);
  transition: opacity .18s ease;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li .image-embed:is(
  [src*="Campaign Icons" i],
  [src*="Campaign%20Icons" i],
  [src*=".svg" i],
  :has(img[src*="Campaign Icons" i]),
  :has(img[src*="Campaign%20Icons" i]),
  :has(img[src*=".svg" i])
) img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}

/* Placeholder icon ONLY for cards lacking an uploaded SVG/PNG icon. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li::after {
  content: var(--tt-fallback-icon);
  position: absolute;
  z-index: 2;
  top: 178px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--tt-icon-colour);
  font: 700 2rem/1 Georgia, serif;
  text-shadow: 0 3px 8px rgba(0,0,0,.65);
  opacity: var(--tt-icon-opacity);
  pointer-events: none;
  transition: opacity .18s ease;
}

/* No nested :has(): nested :has() caused older placeholder rules to fail. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(.image-embed[src*="Campaign Icons" i])::after,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(.image-embed[src*="Campaign%20Icons" i])::after,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(.image-embed[src*=".svg" i])::after,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(.image-embed img[src*="Campaign Icons" i])::after,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(.image-embed img[src*="Campaign%20Icons" i])::after,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(.image-embed img[src*=".svg" i])::after,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(.image-embed[alt*="Campaign Icons" i])::after,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(.image-embed img[alt*="Campaign Icons" i])::after {
  display: none;
  content: none;
}

/* 07. CARD TEXT, CARD-WIDE LINKS AND HOVER --------------------------------
   All eight title links use a 1rem nominal font size, with no font-size-adjust.
   Different typefaces may still appear optically different despite equal CSS sizes. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li > p,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li > div > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0 !important;
  padding: 0;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li br { display: none; }

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li strong {
  position: static;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 2rem;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  text-align: center;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li strong a.internal-link {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--tt-title-font) !important;
  font-size: var(--tt-title-size) !important;
  font-size-adjust: none !important;
  font-weight: var(--tt-title-weight) !important;
  font-style: var(--tt-title-style) !important;
  font-variant: normal !important;
  letter-spacing: var(--tt-title-spacing) !important;
  line-height: 1.15;
  text-transform: none !important;
  white-space: var(--tt-title-white-space) !important;
  text-wrap: var(--tt-title-text-wrap);
  overflow-wrap: normal;
  word-break: normal;
  color: var(--tt-title-color) !important;
  text-decoration: none;
  text-align: center;
  transition: opacity .18s ease;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li strong a.internal-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li em {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  width: 100%;
  max-width: none; /* Use all the space between the card's side padding. */
  min-height: 0;
  margin: 0;
  padding: 0;
  font-size: .9rem;
  font-style: italic;
  line-height: 1.4;
  color: #cbd5df;
  text-align: justify; /* Fill the width rather than centring every line. */
  text-align-last: left; /* Avoid stretching a short final line. */
  text-wrap: wrap;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Bookinsanity description font for six specified campaigns ONLY.
   The Throne of Thorns (News Cycle) and The Week the Republic Fell (Squada One)
   have their own description fonts. Campaign title fonts remain unchanged. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(
  a.internal-link:is(
    [data-href*="Deep" i], [href*="Deep" i],
    [data-href*="Usurper" i], [href*="Usurper" i],
    [data-href*="Odyssey" i], [href*="Odyssey" i],
    [data-href*="Thylean" i], [href*="Thylean" i],
    [data-href*="Righteous" i], [href*="Righteous" i],
    [data-href*="Zephyr" i], [href*="Zephyr" i]
  )
) em {
  font-family: "Bookinsanity", Georgia, serif;
  font-weight: 400;
  font-style: italic;
}

/* The Week the Republic Fell: Star Wars-inspired Squada One description.
   Squada One has a regular upright face, not a true italic. */
.terrehs-home .callout[data-callout="tt-campaigns"]
.callout-content > ul > li:has(
  a.internal-link:is([data-href*="Republic" i], [href*="Republic" i])
) em {
  font-family: "Squada One", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* The Throne of Thorns / Symbaroum: News Cycle description.
   News Cycle is an upright font, so avoid simulated italic. */
.terrehs-home .callout[data-callout="tt-campaigns"]
.callout-content > ul > li:has(
  a.internal-link:is([data-href*="Throne" i], [href*="Throne" i])
) em {
  font-family: "News Cycle", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:focus-within {
  outline: 2px solid #ffdb97;
  outline-offset: 2px;
}

.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:is(:hover, :focus-within) strong a.internal-link,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:is(:hover, :focus-within)::after,
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:is(:hover, :focus-within) .image-embed:is(
  [src*="Campaign Icons" i],
  [src*="Campaign%20Icons" i],
  [src*=".svg" i],
  :has(img[src*="Campaign Icons" i]),
  :has(img[src*="Campaign%20Icons" i]),
  :has(img[src*=".svg" i])
) { opacity: var(--tt-content-hover-opacity); }

/* 08. CAMPAIGN THEMES — MATCH THE NOTE LINK, NOT THE CAROUSEL ORDER --------
   Use distinct portions of the destination URL or Obsidian data-href.
   Changing a card's position will not change its colours or font.
   ------------------------------------------------------------------------ */

/* Call From the Deep: abyssal teal, lavender title; IM Fell English SC. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(a.internal-link:is([data-href*="Deep" i], [href*="Deep" i])) {
  --tt-card-bg: #102b33;
  --tt-art-top: #356b75;
  --tt-card-border: #70b8b2;
  --tt-title-color: #dad0f6;
  --tt-title-font: "IM Fell English SC", Georgia, serif;
  --tt-title-weight: 400;
  --tt-title-style: normal;
  --tt-fallback-icon: "◈";
  --tt-icon-colour: #cdbcf7;
}

/* Curse of the Usurper: plum; Almendra SC. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(a.internal-link:is([data-href*="Usurper" i], [href*="Usurper" i])) {
  --tt-card-bg: #281a28;
  --tt-art-top: #7c3a47;
  --tt-title-color: #f4d49b;
  --tt-title-font: "Almendra SC", Georgia, serif;
  --tt-title-weight: 400;
  --tt-title-style: normal;
  --tt-fallback-icon: "♛";
}

/* Odyssey of the Dragonlords: Aegean blue; classical Marcellus SC. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(a.internal-link:is([data-href*="Odyssey" i], [href*="Odyssey" i])) {
  --tt-card-bg: #142d43;
  --tt-art-top: #396e94;
  --tt-title-color: #f4d49b;
  --tt-title-font: "Marcellus SC", Georgia, serif;
  --tt-title-size: 1rem;
  --tt-title-weight: 400;
  --tt-title-style: normal;
  --tt-title-spacing: 0;
  --tt-fallback-icon: "⚜";
}

/* The Throne of Thorns: forest green; Pirata One. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(a.internal-link:is([data-href*="Throne" i], [href*="Throne" i])) {
  --tt-card-bg: #172a22;
  --tt-art-top: #3a6752;
  --tt-title-color: #f4d49b;
  --tt-title-font: "Pirata One", Georgia, serif;
  --tt-title-weight: 400;
  --tt-title-style: normal;
  --tt-fallback-icon: "❧";
}

/* The Week the Republic Fell: charcoal and yellow; Star Jedi locally.
   "Republic" deliberately works even if old artwork files say "Died". */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(a.internal-link:is([data-href*="Republic" i], [href*="Republic" i])) {
  --tt-card-bg: #121821;
  --tt-art-top: #34455e;
  --tt-card-border: #d5bb59;
  --tt-title-color: #f5d56b;
  --tt-title-font: "Star Jedi", "Arial Black", Arial, sans-serif;
  --tt-title-weight: 400;
  --tt-title-style: normal;
  --tt-fallback-icon: "✦";
  --tt-icon-colour: #f5d56b;
}

/* Thylean Heroes: same Aegean blue and Marcellus SC as Odyssey.
   Keep this AFTER Odyssey, in case the link URL contains the Odyssey folder. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(a.internal-link:is([data-href*="Thylean" i], [href*="Thylean" i])) {
  --tt-card-bg: #142d43;
  --tt-art-top: #396e94;
  --tt-card-border: rgba(222, 179, 111, .65);
  --tt-title-color: #f4d49b;
  --tt-title-font: "Marcellus SC", Georgia, serif;
  --tt-title-size: 1rem;
  --tt-title-weight: 400;
  --tt-title-style: normal;
  --tt-title-spacing: 0;
  --tt-fallback-icon: "⚜";
  --tt-icon-colour: #f2ce90;
}

/* Wrath of the Righteous: infernal crimson; Cinzel Decorative. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(a.internal-link:is([data-href*="Righteous" i], [href*="Righteous" i])) {
  --tt-card-bg: #28151b;
  --tt-art-top: #823137;
  --tt-card-border: #d46a57;
  --tt-title-color: #f4c2a3;
  --tt-title-font: "Cinzel Decorative", Georgia, serif;
  --tt-title-size: 1rem;
  --tt-title-weight: 700;
  --tt-title-style: normal;
  --tt-title-spacing: -.02em;
  --tt-fallback-icon: "✠";
  --tt-icon-colour: #f4b08d;
}

/* Zephyr's Veil: post-apocalyptic arcanomagic; angular Oxanium. */
.terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li:has(a.internal-link:is([data-href*="Zephyr" i], [href*="Zephyr" i])) {
  --tt-card-bg: #3c2b22;
  --tt-art-top: #916d42;
  --tt-card-border: #d9b26e;
  --tt-title-color: #e1b07e;
  --tt-title-font: "Oxanium", Arial, sans-serif;
  --tt-title-size: 1rem;
  --tt-title-weight: 700;
  --tt-title-style: normal;
  --tt-title-spacing: 0;
  --tt-fallback-icon: "✺";
  --tt-icon-colour: #e1b07e;
}

/* 09. LEGACY CAROUSEL CONTROLS: NOT USED WITH FOUR-COLUMN GRID ------------- */
.terrehs-home .tt-carousel-controls { display: none !important; }
.terrehs-home .callout[data-callout="tt-campaigns"] > .callout-title {
  position: relative;
  min-height: 2.8rem;
}

.terrehs-home .tt-carousel-controls {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  gap: .45rem;
  z-index: 6;
}

.terrehs-home .tt-carousel-controls button {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid #bd975c;
  border-radius: 50%;
  background: #17263c;
  color: #f0d39b;
  font: 700 1.55rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.terrehs-home .tt-carousel-controls button:disabled { opacity: .3; cursor: default; }
.terrehs-home .tt-carousel-controls button:not(:disabled):hover {
  background: #304966;
  border-color: #f0d39b;
}
.terrehs-home .tt-carousel-controls button:focus-visible {
  outline: 2px solid #f0d39b;
  outline-offset: 2px;
}

/* 10. FOOTER AND RESPONSIVENESS ------------------------------------------- */
.terrehs-home .callout[data-callout="tt-footer"] {
  margin-top: 2.5rem;
  text-align: center;
  border: 0;
  border-top: 1px solid rgba(224, 178, 107, .4);
  background: transparent;
  padding: 1.6rem .75rem;
}

.terrehs-home .callout[data-callout="tt-footer"] .callout-title {
  justify-content: center;
  font-family: Georgia, "Palatino Linotype", serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: normal;
  color: #f0cd91;
}
.terrehs-home .callout[data-callout="tt-footer"] .callout-content { color: #adb8c5; }

@media (max-width: 760px) {
  .terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li > strong a.internal-link,
  .terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li > p > strong a.internal-link {
    font-size: 1.5rem;
  }
}

@media (max-width: 420px) {
  /* Avoid text clipping on very narrow phone screens. */
  .terrehs-home .callout[data-callout="tt-homebrew"] .callout-content > ul > li:last-child a.internal-link:is(
    [data-href*="Advanced Weapon Mastery" i], [href*="Advanced" i]
  ) { white-space: normal; }
}

@media (max-width: 1199px) {
  .terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li strong a.internal-link {
    white-space: normal !important;
    text-wrap: balance !important;
  }
  .terrehs-home .callout[data-callout="tt-intro"] {
    margin-top: .6rem;
  }
}

@media (max-width: 560px) {
  .terrehs-home h1:first-of-type { letter-spacing: .035em; }
}

@media (max-width: 390px) {
  /* Allow the longest titles to wrap if the card is genuinely narrow. */
  .terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li strong a.internal-link {
    white-space: normal !important;
    text-wrap: balance !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul { scroll-behavior: auto; }
  .terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li,
  .terrehs-home .callout[data-callout="tt-homebrew"] li,
  .terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li strong a.internal-link,
  .terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li::after,
  .terrehs-home .callout[data-callout="tt-campaigns"] .callout-content > ul > li .image-embed {
    transition: none;
  }
}


/* ============================================================================
   11. CAMPAIGN LANDING PAGES - DASHBOARD-FIRST DESIGN
   Applied ONLY to notes with cssclasses: [tt-campaign-page, tt-odyssey].
   Designed for the same Markdown in local Obsidian Reading view and Publish.
   All colours/typefaces can be changed for other campaigns via variables.
   ============================================================================ */

.tt-campaign-page {
  --tt-world-bg: #10283b;
  --tt-world-surface: #142e43;
  --tt-world-surface-raised: #19374e;
  --tt-world-accent: #f4d49b;
  --tt-world-text: #dbe4ec;
  --tt-world-muted: #aebfcb;
  --tt-world-border: rgba(230, 194, 128, .34);
  --tt-world-heading-font: "Marcellus SC", Georgia, serif;
}

.tt-campaign-page.tt-odyssey {
  --tt-world-bg: #10283b;
  --tt-world-surface: #142e43;
  --tt-world-surface-raised: #19374e;
  --tt-world-accent: #f4d49b;
}

/* The hero contains the title; hide the automatic duplicate inline title. */
.tt-campaign-page .inline-title { display: none; }

.tt-campaign-page .callout[data-callout^="tt-campaign-"] {
  --callout-color: 231, 191, 127;
  --callout-icon: none;
  background: transparent;
  border: 0;
  margin: 1.35rem 0;
  padding: 0;
  color: var(--tt-world-text);
}

.tt-campaign-page .callout[data-callout^="tt-campaign-"] > .callout-title {
  color: var(--tt-world-accent);
  font-family: var(--tt-world-heading-font);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  letter-spacing: .015em;
  margin: 0 0 .7rem;
  padding: 0;
}

.tt-campaign-page .callout[data-callout^="tt-campaign-"] > .callout-title .callout-icon {
  display: none;
}

.tt-campaign-page .callout[data-callout^="tt-campaign-"] > .callout-content {
  color: var(--tt-world-text);
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Hero: reuses the existing Odyssey artwork (not new/generated artwork). */
.tt-campaign-page .callout[data-callout="tt-campaign-hero"] {
  position: relative;
  isolation: isolate;
  min-height: clamp(255px, 29vw, 350px);
  padding: clamp(175px, 22vw, 260px) clamp(1rem, 3vw, 2rem) 1.25rem;
  border: 1px solid var(--tt-world-border);
  border-radius: 13px;
  background: linear-gradient(180deg, #183d56 0%, #132b3e 54%, #0a1928 100%);
  overflow: hidden;
}

.tt-campaign-page .callout[data-callout="tt-campaign-hero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(4,15,27,.02), rgba(7,21,35,.12) 35%, rgba(7,19,31,.94) 90%);
  pointer-events: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-hero"] > .callout-title {
  position: relative;
  z-index: 2;
  margin: 0 0 .35rem;
  font-size: clamp(1.65rem, 4vw, 3rem);
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
}

.tt-campaign-page .callout[data-callout="tt-campaign-hero"] > .callout-content {
  position: static;
  z-index: auto;
}

.tt-campaign-page .callout[data-callout="tt-campaign-hero"] .image-embed {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-hero"] .image-embed img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center 42%;
  border: 0;
}

.tt-campaign-page .callout[data-callout="tt-campaign-hero"] > .callout-content > p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 720px;
  color: #e1eaf1;
  text-shadow: 0 2px 9px rgba(0,0,0,.75);
}

.tt-campaign-page .callout[data-callout="tt-campaign-hero"] > .callout-content em {
  font-style: normal;
  font-size: 1rem;
}

/* Campaign Status is a separate embedded note to keep weekly edits simple. */
.tt-campaign-page .markdown-embed:has(.callout[data-callout="tt-campaign-status"]) {
  width: 100%;
  max-width: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 1.1rem 0 1.7rem;
}

.tt-campaign-page .markdown-embed:has(.callout[data-callout="tt-campaign-status"]) .markdown-embed-title,
.tt-campaign-page .markdown-embed:has(.callout[data-callout="tt-campaign-status"]) .markdown-embed-link {
  display: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-status"] > .callout-content > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-status"] > .callout-content > ul > li {
  margin: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--tt-world-border);
  border-radius: 10px;
  background: var(--tt-world-surface);
  list-style: none;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.tt-campaign-page .callout[data-callout="tt-campaign-status"] > .callout-content > ul > li strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--tt-world-muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.tt-campaign-page .callout[data-callout="tt-campaign-status"] > .callout-content > ul > li em {
  color: var(--tt-world-text);
  font-style: normal;
}

/* Objectives and the party share the row; each gets its own panel. */
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li {
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--tt-world-border);
  border-radius: 10px;
  background: var(--tt-world-surface);
  list-style: none;
  min-width: 0;
}

.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li > strong,
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li > p > strong {
  display: block;
  margin: 0 0 .65rem;
  color: var(--tt-world-accent);
  font-family: var(--tt-world-heading-font);
  font-size: 1.1rem;
  font-weight: 400;
}

.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li:first-child > ul > li {
  margin: 0;
  padding: .4rem 0;
  border-bottom: 1px solid rgba(220,195,145,.16);
  list-style: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li:first-child > ul > li:last-child {
  border-bottom: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li:last-child > ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li:last-child > ul > li {
  list-style: none;
  padding: .35rem .6rem;
  margin: 0;
  border: 1px solid rgba(229,193,130,.3);
  border-radius: 6px;
  background: var(--tt-world-surface-raised);
  font-size: .88rem;
}

.tt-campaign-page .callout[data-callout="tt-campaign-focus"] .list-bullet,
.tt-campaign-page .callout[data-callout="tt-campaign-status"] .list-bullet {
  display: none !important;
}

.tt-campaign-page .callout[data-callout="tt-campaign-recap"] {
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--tt-world-border);
  border-left: 3px solid var(--tt-world-accent);
  border-radius: 10px;
  background: var(--tt-world-surface);
}
.tt-campaign-page .callout[data-callout="tt-campaign-recap"] > .callout-title {
  margin-bottom: .5rem;
  font-size: 1.15rem;
}
.tt-campaign-page .callout[data-callout="tt-campaign-recap"] .callout-content p {
  margin: .35rem 0;
  color: var(--tt-world-text);
}

/* In-character categories and out-of-character resources: link-based panels. */
.tt-campaign-page .callout[data-callout="tt-campaign-ic"],
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"] {
  margin-top: 2.2rem;
}

.tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > p,
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"] > .callout-content > p {
  color: var(--tt-world-muted);
  margin: 0 0 .8rem;
}

.tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > ul,
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"] > .callout-content > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  list-style: none;
  margin: .6rem 0;
  padding: 0;
}

.tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > ul > li,
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"] > .callout-content > ul > li {
  min-width: 0;
  margin: 0;
  padding: 1.1rem 1.2rem;
  background: var(--tt-world-surface);
  border: 1px solid var(--tt-world-border);
  border-radius: 10px;
  list-style: none;
  transition: background .16s ease, border-color .16s ease;
}

.tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > ul > li:is(:hover, :focus-within),
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"] > .callout-content > ul > li:is(:hover, :focus-within) {
  background: var(--tt-world-surface-raised);
  border-color: var(--tt-world-accent);
}

.tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > ul > li > strong,
.tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > ul > li > p > strong {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--tt-world-heading-font);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--tt-world-accent);
}

.tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > ul > li > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .38rem .85rem;
}

.tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > ul > li > ul > li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-ic"] .list-bullet,
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"] .list-bullet {
  display: none !important;
}

.tt-campaign-page .callout[data-callout="tt-campaign-ooc"] > .callout-content > ul > li {
  padding: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"] > .callout-content > ul > li > p {
  margin: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"] > .callout-content > ul > li a.internal-link {
  display: block;
  padding: 1.05rem 1.15rem;
  font-family: var(--tt-world-heading-font);
  font-size: 1.1rem;
  text-decoration: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-media"] {
  margin-top: 2.3rem;
  border-top: 1px solid var(--tt-world-border);
  padding-top: 1.15rem;
}
.tt-campaign-page .callout[data-callout="tt-campaign-media"] > .callout-content > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: .7rem 0;
  padding: 0;
  list-style: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-media"] > .callout-content > ul > li {
  margin: 0;
  padding: 1rem;
  background: var(--tt-world-surface);
  border: 1px solid var(--tt-world-border);
  border-radius: 10px;
  list-style: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-media"] > .callout-content > ul > li strong {
  color: var(--tt-world-accent);
}
.tt-campaign-page .callout[data-callout="tt-campaign-media"] .list-bullet { display: none !important; }

.tt-campaign-page a.internal-link,
.tt-campaign-page a.external-link { color: var(--tt-world-accent); }
.tt-campaign-page a:is(:hover, :focus-visible) { color: #ffe0a2; }

@media (max-width: 740px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul,
  .tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > ul,
  .tt-campaign-page .callout[data-callout="tt-campaign-ooc"] > .callout-content > ul,
  .tt-campaign-page .callout[data-callout="tt-campaign-media"] > .callout-content > ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-status"] > .callout-content > ul {
    grid-template-columns: 1fr;
  }
  .tt-campaign-page .callout[data-callout="tt-campaign-hero"] {
    padding-top: 165px;
    min-height: 265px;
  }
  .tt-campaign-page .callout[data-callout="tt-campaign-hero"] > .callout-title {
    font-size: 1.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-campaign-page .callout[data-callout="tt-campaign-ic"] > .callout-content > ul > li,
  .tt-campaign-page .callout[data-callout="tt-campaign-ooc"] > .callout-content > ul > li {
    transition: none;
  }
}

/* ============================================================================
   ODYSSEY LANDING PAGE - WORLD MAP, CAMPAIGN DESCRIPTION, PORTRAIT ROSTER
   The status stays directly under the hero; the party uses its own full row.
   Does not affect the homepage, Homebrew cards or other campaign themes.
   ============================================================================ */

/* The width class is separate from the visual theme, for reuse elsewhere. */
.tt-campaign-page.tt-wide { --file-line-width: 1150px; }

/* A five-portrait strip under the dashboard. */
.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > p,
.tt-campaign-page .callout[data-callout="tt-campaign-about"] > .callout-content > p,
.tt-campaign-page .callout[data-callout="tt-campaign-map"] > .callout-content > p {
  color: var(--tt-world-text);
  line-height: 1.65;
}

.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > p {
  margin: 0 0 1rem;
  color: var(--tt-world-muted);
}

.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: .6rem .6rem .85rem;
  border: 1px solid var(--tt-world-border);
  border-radius: 11px;
  background: var(--tt-world-surface);
  list-style: none;
  text-align: center;
}

/* Visible portrait placeholder, replaced automatically when an image is added. */
.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li::before {
  content: "Portrait to add";
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 7px;
  border: 1px dashed rgba(224,192,139,.38);
  background: linear-gradient(160deg, #29455b, #152c3d 55%, #0c1c2d);
  color: #b6c3cb;
  font: italic .76rem/1.25 Georgia, serif;
}
.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li:has(.image-embed)::before {
  display: none;
}

.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .32rem;
  margin: .55rem 0 0;
  line-height: 1.3;
}
.tt-campaign-page .callout[data-callout="tt-campaign-party"] .image-embed {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 7px;
  margin: 0 0 .25rem;
  background: var(--tt-world-surface-raised);
}
.tt-campaign-page .callout[data-callout="tt-campaign-party"] .image-embed img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center 25%;
}
.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li strong {
  display: block;
  font: 400 1.04rem/1.25 var(--tt-world-heading-font);
  margin: .15rem 0 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li strong a.internal-link {
  color: var(--tt-world-accent);
  text-decoration: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li strong a.internal-link:hover {
  text-decoration: underline;
  text-underline-offset: .15em;
}
.tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li em {
  display: block;
  font: italic .85rem/1.35 Georgia, "Palatino Linotype", serif;
  color: var(--tt-world-muted);
}
.tt-campaign-page .callout[data-callout="tt-campaign-party"] .list-bullet {
  display: none !important;
}

/* Campaign introduction, intentionally separate from the live status. */
.tt-campaign-page .callout[data-callout="tt-campaign-about"] {
  padding: 1.15rem clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--tt-world-border);
  border-radius: 11px;
  background: linear-gradient(120deg, var(--tt-world-surface), #11293b);
}
.tt-campaign-page .callout[data-callout="tt-campaign-about"] > .callout-content > p {
  max-width: 85ch;
  margin: 0 0 .9rem;
  font-size: .98rem;
}
.tt-campaign-page .callout[data-callout="tt-campaign-about"] > .callout-content > p:last-child { margin-bottom: 0; }

/* Full-width player-safe map. Never crop geographic labels or coastlines. */
.tt-campaign-page .callout[data-callout="tt-campaign-map"] {
  padding: 1.15rem clamp(.85rem, 2vw, 1.4rem);
  border: 1px solid var(--tt-world-border);
  border-radius: 11px;
  background: var(--tt-world-surface);
}
.tt-campaign-page .callout[data-callout="tt-campaign-map"] > .callout-content::before {
  content: "World map image to be added";
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 215px;
  aspect-ratio: 2.4 / 1;
  border-radius: 9px;
  border: 1px dashed rgba(224,192,139,.4);
  background:
    radial-gradient(ellipse at 50% 52%, rgba(195,155,95,.12), transparent 55%),
    repeating-linear-gradient(25deg, transparent, transparent 28px, rgba(204,172,114,.06) 30px),
    #0b2133;
  color: #c5b18b;
  font: italic clamp(.9rem, 1.4vw, 1.1rem)/1.4 Georgia, serif;
  text-align: center;
}
.tt-campaign-page .callout[data-callout="tt-campaign-map"]:has(.image-embed) > .callout-content::before { display: none; }
.tt-campaign-page .callout[data-callout="tt-campaign-map"] .image-embed {
  display: block;
  width: 100%;
  margin: .8rem 0;
  text-align: center;
}
.tt-campaign-page .callout[data-callout="tt-campaign-map"] .image-embed img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 600px;
  object-fit: contain;
  margin-inline: auto;
  border-radius: 8px;
}
.tt-campaign-page .callout[data-callout="tt-campaign-map"] > .callout-content > p {
  margin: .65rem 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-map"] > .callout-content > p:last-child {
  margin-bottom: 0;
}

/* The objectives list is now the only content in Currently in Play. */
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
  padding: .8rem 1.2rem;
  border: 1px solid var(--tt-world-border);
  border-radius: 10px;
  background: var(--tt-world-surface);
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li {
  padding: .3rem 0;
  border: 0;
  background: transparent;
  line-height: 1.5;
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > ul > li + li {
  border-top: 1px solid rgba(220,195,145,.16);
}

@media (max-width: 1050px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 390px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-party"] > .callout-content > ul {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   ODYSSEY: COMPACT ABOUT + SOUNDS & VISIONS, AND NO MAP SCROLLBAR
   The parent callout contains two nested callouts in the Markdown.
   Only campaign landing pages are affected; the homepage remains untouched.
   ============================================================================ */

/* One visual row, without a redundant extra "Campaign Overview" heading. */
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] {
  margin: 1.6rem 0 1.4rem;
  min-width: 0;
  max-width: 100%;
}
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] > .callout-title {
  display: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] > .callout-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] > .callout-content > .callout {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 1.2rem clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--tt-world-border);
  border-radius: 12px;
  background: var(--tt-world-surface);
}

/* The story panel grows larger; the media panel stays substantial and visible. */
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] > .callout-content > .callout[data-callout="tt-campaign-about"] {
  flex: 1.55 1 490px;
  background: linear-gradient(120deg, var(--tt-world-surface), #11293b);
}
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] > .callout-content > .callout[data-callout="tt-campaign-media"] {
  flex: 1 1 290px;
  border-top: 1px solid var(--tt-world-border);
  padding-top: 1.2rem;
}
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] .callout[data-callout="tt-campaign-about"] > .callout-content > p {
  max-width: none;
  margin: 0 0 .8rem;
  font-size: .96rem;
  line-height: 1.6;
}

/* Display soundtrack / moodboard as clearly separated, stacked destinations. */
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] .callout[data-callout="tt-campaign-media"] > .callout-content > p {
  margin: .15rem 0 .9rem;
  color: var(--tt-world-muted);
  line-height: 1.5;
}
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] .callout[data-callout="tt-campaign-media"] > .callout-content > ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .7rem;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] .callout[data-callout="tt-campaign-media"] > .callout-content > ul > li {
  min-width: 0;
  margin: 0;
  padding: .9rem 1rem;
  background: var(--tt-world-surface-raised);
  border: 1px solid var(--tt-world-border);
  border-radius: 9px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tt-campaign-page .callout[data-callout="tt-campaign-overview"] .callout[data-callout="tt-campaign-media"] > .callout-content > ul > li strong {
  display: block;
  color: var(--tt-world-accent);
  font-family: var(--tt-world-heading-font);
  font-size: 1.08rem;
  font-weight: 400;
  margin-bottom: .2rem;
}

/* Prevent the map placeholder's border from making it 2px too wide.
   Also contain the real map image at any reading width without cropping. */
.tt-campaign-page .callout[data-callout="tt-campaign-map"],
.tt-campaign-page .callout[data-callout="tt-campaign-map"] > .callout-content {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.tt-campaign-page .callout[data-callout="tt-campaign-map"] > .callout-content {
  overflow-x: clip;
}
.tt-campaign-page .callout[data-callout="tt-campaign-map"] > .callout-content::before {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.tt-campaign-page .callout[data-callout="tt-campaign-map"] .image-embed,
.tt-campaign-page .callout[data-callout="tt-campaign-map"] .internal-embed {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.tt-campaign-page .callout[data-callout="tt-campaign-map"] .image-embed img,
.tt-campaign-page .callout[data-callout="tt-campaign-map"] img {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

@media (max-width: 720px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-overview"] > .callout-content > .callout {
    flex-basis: 100%;
  }
}


/* ==========================================================================
   ODYSSEY: HEROES (75%) + PARTY NPCS (25%)
   A single nested callout row. The five PC cards retain the existing
   portrait styling; nine NPC tiles use square portraits and compact labels.
   No NPC names or artwork are invented: replace the placeholders in Markdown.
   ========================================================================== */

/* The invisible wrapper supplies the two-column layout, not an extra box. */
.tt-campaign-page .callout[data-callout="tt-campaign-cast"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 1.45rem 0;
  padding: 0;
  background: none;
  border: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"] > .callout-title {
  display: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"] > .callout-content {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 1rem;
  min-width: 0;
  padding: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"] > .callout-content > .callout {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--tt-world-border);
  border-radius: 12px;
  background: var(--tt-world-surface);
}

/* Keep the five PC portraits in one row in the larger column. */
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
> .callout-content > .callout[data-callout="tt-campaign-party"]
> .callout-content > ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] > .callout-content > ul > li {
  padding: .35rem .3rem .6rem;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] > .callout-content > ul > li strong {
  font-size: clamp(.78rem, 1.1vw, 1.02rem);
  overflow-wrap: anywhere;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] > .callout-content > ul > li em {
  font-size: .74rem;
  line-height: 1.25;
}

/* Let the left hero gallery fill the height established by the 3x3 NPC grid.
   Portraits grow with their cards; names and epic paths stay beneath them. */
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
> .callout-content > .callout {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
> .callout-content > .callout > .callout-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
> .callout-content > .callout[data-callout="tt-campaign-party"]
> .callout-content > ul {
  flex: 1 1 auto;
  grid-auto-rows: minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] > .callout-content > ul > li {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] > .callout-content > ul > li > p {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}
/* With a real portrait embed, let its paragraph grow too. Without an image,
   only the placeholder grows, so names remain directly below it. */
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] > .callout-content > ul > li:has(.image-embed) > p {
  flex: 1 1 auto;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] > .callout-content > ul > li::before,
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] .image-embed {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 235px;
  height: auto;
  aspect-ratio: auto;
  margin-left: auto;
  margin-right: auto;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] .image-embed img {
  height: 100% !important;
  object-fit: cover;
}
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
.callout[data-callout="tt-campaign-party"] > .callout-content > p {
  margin-bottom: .65rem;
}
/* Below the side-by-side breakpoint, the gallery returns to natural portrait sizes. */
@media (max-width: 1020px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-cast"]
  .callout[data-callout="tt-campaign-party"] > .callout-content > ul {
    flex: 0 1 auto;
  }
  .tt-campaign-page .callout[data-callout="tt-campaign-cast"]
  .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li::before,
  .tt-campaign-page .callout[data-callout="tt-campaign-cast"]
  .callout[data-callout="tt-campaign-party"] .image-embed {
    flex: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}

/* NPC section: 3 columns x 3 rows, images square and labels underneath. */
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-title {
  font-size: clamp(1.1rem, 1.65vw, 1.4rem);
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > p {
  margin: 0 0 .75rem;
  color: var(--tt-world-muted);
  font-size: .79rem;
  line-height: 1.4;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: .24rem .2rem .35rem;
  border: 1px solid rgba(230, 194, 128, .25);
  border-radius: 8px;
  background: var(--tt-world-surface-raised);
  text-align: center;
  list-style: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul > li::before {
  content: "✦";
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px dashed rgba(224, 192, 139, .35);
  border-radius: 6px;
  color: rgba(244, 212, 155, .55);
  background: linear-gradient(140deg, #29455b, #102739);
  font: 400 1.25rem/1 Georgia, serif;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul > li:has(.image-embed)::before {
  display: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul > li > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  width: 100%;
  margin: .3rem 0 0;
  line-height: 1.15;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] .image-embed {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #203b51;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] .image-embed img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center 25%;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul > li strong {
  display: block;
  width: 100%;
  margin-top: .3rem;
  font: 400 .73rem/1.2 var(--tt-world-heading-font);
  color: var(--tt-world-accent);
  overflow-wrap: anywhere;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul > li strong a.internal-link {
  color: var(--tt-world-accent);
  text-decoration: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul > li strong a.internal-link:hover {
  text-decoration: underline;
  text-underline-offset: .14em;
}
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"] .list-bullet {
  display: none !important;
}

/* Responsive: stack panels before the NPCs or hero portraits get too small. */
@media (max-width: 1020px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-cast"] > .callout-content {
    grid-template-columns: minmax(0, 1fr);
  }
  .tt-campaign-page .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul {
    max-width: 500px;
    margin-inline: auto;
  }
}
@media (max-width: 700px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-cast"]
  > .callout-content > .callout[data-callout="tt-campaign-party"]
  > .callout-content > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 440px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-cast"]
  > .callout-content > .callout[data-callout="tt-campaign-party"]
  > .callout-content > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tt-campaign-page .callout[data-callout="tt-campaign-cast"] > .callout-content > .callout {
    padding: .8rem;
  }
}


/* ===========================================================================
   ODYSSEY QUEST JOURNAL - SHARED CURRENT OBJECTIVES
   The status note transcludes Quest Journal#Current Objectives. Keep the
   dashboard embed compact and style the full journal as a readable article.
   This block is scoped to campaign pages / quest journal pages only.
   =========================================================================== */
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] {
  padding: 1rem 1.2rem;
  border: 1px solid var(--tt-world-border);
  border-radius: 10px;
  background: var(--tt-world-surface);
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-title {
  margin-bottom: .55rem;
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] .markdown-embed,
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] .internal-embed {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] .markdown-embed-title,
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] .markdown-embed-link,
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] .markdown-embed-content h2:first-child {
  display: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] .markdown-embed-content {
  max-height: none;
  overflow: visible;
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] .markdown-embed-content ul {
  display: block;
  margin: .35rem 0 .65rem;
  padding-left: 1.2rem;
  list-style: disc;
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] .markdown-embed-content li {
  display: list-item;
  margin: .2rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tt-world-text);
  list-style: disc;
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] > .callout-content > p:last-child {
  margin: .55rem 0 0;
  font-size: .9rem;
}
.tt-quest-journal .inline-title { display: none; }
.tt-quest-journal h1,
.tt-quest-journal h2,
.tt-quest-journal h3 {
  font-family: "Marcellus SC", Georgia, serif;
  color: #f4d49b;
}
.tt-quest-journal h2 {
  margin-top: 2rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(230,194,128,.34);
}
.tt-quest-journal a.internal-link { color: #f4d49b; }


/* ===========================================================================
   ODYSSEY DASHBOARD - TWO-UP OBJECTIVES AND SESSION RECAP
   The Campaign Status note uses a nested [!tt-campaign-updates] callout.
   This creates a reliable grid both locally and in Obsidian Publish.
   =========================================================================== */
.tt-campaign-page .callout[data-callout="tt-campaign-updates"] {
  margin: 1rem 0 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.tt-campaign-page .callout[data-callout="tt-campaign-updates"] > .callout-title {
  display: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-updates"] > .callout-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
  padding: 0;
  min-width: 0;
}
.tt-campaign-page .callout[data-callout="tt-campaign-updates"]
> .callout-content > .callout {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--tt-world-border);
  border-radius: 10px;
  background: var(--tt-world-surface);
}
.tt-campaign-page .callout[data-callout="tt-campaign-updates"]
> .callout-content > .callout[data-callout="tt-campaign-recap"] {
  border-left: 3px solid var(--tt-world-accent);
}
.tt-campaign-page .callout[data-callout="tt-campaign-updates"]
> .callout-content > .callout > .callout-content {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 820px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-updates"] > .callout-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===========================================================================
   TERREH'S TALES - PUBLISH FINISHING PASS (2026-11-08)
   Source: earlier site styling + the recent breadcrumb/banner/footer and
   Symbaroum adjustments. Keep these overrides after campaign component rules.
   =========================================================================== */

/* Per-note widths: separate structural sizing from the visual campaign theme. */
.tt-wide { --file-line-width: 1150px; }
.tt-medium { --file-line-width: 950px; }
.tt-standard { --file-line-width: 750px; }
.published-container:has(.tt-campaign-page.tt-wide) { --page-width: 1150px; }
.published-container:has(.tt-medium) { --page-width: 950px; }
.published-container:has(.tt-standard) { --page-width: 750px; }

/* Plain, shared breadcrumb: no coloured strip between navigation and banner. */
.tt-campaign-page .callout[data-callout="tt-breadcrumb"] {
  margin: 0 0 .7rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tt-campaign-page .callout[data-callout="tt-breadcrumb"] > .callout-title {
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #acbbc7 !important;
  font: 400 .8rem/1.45 "Segoe UI", Arial, sans-serif !important;
}
.tt-campaign-page .callout[data-callout="tt-breadcrumb"] .callout-icon {
  display: none !important;
}
.tt-campaign-page .callout[data-callout="tt-breadcrumb"] a.internal-link {
  color: #d5ad70 !important;
  text-decoration: none !important;
}
.tt-campaign-page .callout[data-callout="tt-breadcrumb"] a.internal-link:hover {
  color: #f4d49b !important;
  text-decoration: underline !important;
}

/* Compact cinematic hero and correct image/overlay/text stacking. */
.tt-campaign-page .callout[data-callout="tt-campaign-hero"] {
  box-sizing: border-box;
  position: relative !important;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: clamp(220px, 22vw, 280px);
  min-height: 0 !important;
  padding: 1rem clamp(1rem, 3vw, 2rem) 1.25rem !important;
  overflow: hidden;
}
.tt-campaign-page .callout[data-callout="tt-campaign-hero"] > .callout-content {
  position: static !important;
}
.tt-campaign-page .callout[data-callout="tt-campaign-hero"] > .callout-content > p:has(.image-embed) {
  position: static !important;
  z-index: auto !important;
  margin: 0 !important;
  max-width: none !important;
}
.tt-campaign-page .callout[data-callout="tt-campaign-hero"] .image-embed {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tt-campaign-page .callout[data-callout="tt-campaign-hero"] .image-embed img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 25%;
}
.tt-campaign-page .callout[data-callout="tt-campaign-hero"]::before {
  z-index: 1 !important;
  pointer-events: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-hero"] > .callout-title,
.tt-campaign-page .callout[data-callout="tt-campaign-hero"] > .callout-content > p:not(:has(.image-embed)) {
  position: relative !important;
  z-index: 2 !important;
}
@media (max-width: 600px) {
  .tt-campaign-page .callout[data-callout="tt-campaign-hero"] {
    height: 220px;
    min-height: 0 !important;
    padding: 1rem 1rem 1rem !important;
  }
}

/* Small closing signature; caption differs from one campaign to another. */
.tt-campaign-page .callout[data-callout="tt-campaign-footer"] {
  margin: 2.8rem auto .9rem;
  padding: 1.4rem 1rem;
  border: 0;
  border-top: 1px solid var(--tt-world-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.tt-campaign-page .callout[data-callout="tt-campaign-footer"] > .callout-title {
  display: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-footer"] > .callout-content > p:first-child {
  margin: 0 0 .9rem;
  font: italic 1.08rem/1.5 Georgia, serif;
  color: var(--tt-world-accent);
}
.tt-campaign-page .callout[data-callout="tt-campaign-footer"] a.internal-link {
  color: var(--tt-world-accent);
  text-decoration: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-footer"] a.internal-link:hover {
  text-decoration: underline;
}

/* THRONE OF THORNS: darker Davokar palette, no leftover Odyssey blue. */
.tt-campaign-page.tt-throne {
  --tt-world-bg: #101813;
  --tt-world-surface: #1b2921;
  --tt-world-surface-raised: #26392c;
  --tt-world-accent: #d8c08f;
  --tt-world-text: #e0e5dc;
  --tt-world-muted: #b8c4b5;
  --tt-world-border: rgba(165, 171, 134, .35);
  --tt-world-heading-font: "Pirata One", Georgia, serif;
}
.published-container:has(.tt-campaign-page.tt-throne) .site-body-center-column,
.published-container:has(.tt-campaign-page.tt-throne) .publish-renderer,
.published-container:has(.tt-campaign-page.tt-throne) .markdown-preview-view {
  background-color: #101813 !important;
}
.tt-campaign-page.tt-throne .callout[data-callout="tt-campaign-hero"] {
  background: linear-gradient(160deg, #304b38, #101c18);
}
.tt-campaign-page.tt-throne .callout[data-callout="tt-campaign-hero"]::before {
  background: linear-gradient(to bottom, rgba(5,12,9,.10) 0%, rgba(6,15,10,.28) 44%, rgba(5,13,10,.92) 100%);
}
.tt-campaign-page.tt-throne .callout[data-callout="tt-campaign-hero"] .image-embed img {
  object-position: center 35%;
}
.tt-campaign-page.tt-throne .callout[data-callout="tt-campaign-about"],
.tt-campaign-page.tt-throne .callout[data-callout="tt-campaign-overview"]
  > .callout-content > .callout[data-callout="tt-campaign-about"] {
  background: #1b2921 !important;
  background-image: none !important;
}
.tt-campaign-page.tt-throne .callout[data-callout="tt-campaign-overview"] > .callout-content {
  align-items: flex-start;
}
.tt-campaign-page.tt-throne .callout[data-callout="tt-campaign-map"] > .callout-content::before {
  background: radial-gradient(ellipse at center, rgba(123,153,111,.16), transparent 65%),
    repeating-linear-gradient(30deg, transparent, transparent 31px, rgba(199,177,125,.04) 32px),
    #12221b;
  color: #c8c9a4;
}
.tt-campaign-page.tt-throne .callout[data-callout="tt-campaign-party"] > .callout-content > ul > li::before,
.tt-campaign-page.tt-throne .callout[data-callout="tt-campaign-npcs"] > .callout-content > ul > li::before {
  background: linear-gradient(160deg, #2a473a, #172820 65%, #101b17);
  border-color: rgba(170,189,155,.35);
}
.tt-quest-journal.tt-throne h1,
.tt-quest-journal.tt-throne h2,
.tt-quest-journal.tt-throne h3 {
  font-family: "Pirata One", Georgia, serif;
  color: #d8c08f;
}
.tt-quest-journal.tt-throne h2 { border-bottom-color: rgba(170,189,155,.4); }
.tt-quest-journal.tt-throne a.internal-link { color: #d8c08f; }

/* ===========================================================================
   PUBLISH GRAPH: HIDE ONLY ON THE TERREH'S TALES HOME PAGE.
   Graph visibility (not graph data filtering) is controlled here. Keep
   Publish Site Options > Components > Show graph view turned ON so it still
   appears on your campaign/NPC/lore pages.
   The home note must have cssclasses: [terrehs-home].
   =========================================================================== */
:is(.published-container.terrehs-home,
    .published-container:has(.terrehs-home)) .graph-view-outer {
  display: none !important;
}

/* ========================================================================
   TERREH'S TALES - OBSIDIAN PUBLISH CONTRAST REPAIR (2026-11-08)
   The site uses a dark design regardless of a visitor's Publish light/dark
   preference. Setting colours only under .theme-dark left light-theme text
   almost black on the dark page background.
   ======================================================================== */
.published-container,
.published-container.theme-light,
.published-container.theme-dark,
.published-container .theme-light,
.published-container .theme-dark {
  --background-primary: #0b1727;
  --background-secondary: #111f31;
  --background-secondary-alt: #15243a;
  --text-normal: #eee9df;
  --text-muted: #bac4cf;
  --text-faint: #8e9eae;
  --text-accent: #e1b96e;
  --text-accent-hover: #f0d5a0;
  --link-color: #e5bd7a;
  --link-color-hover: #f8dba4;
  --interactive-accent: #c79b57;
  --color-accent: #d7ae69;
  --h1-color: #f0d6a3;
  --h2-color: #e3bd7b;
  --h3-color: #f1dfbb;
  --page-title-color: #f0d6a3;
  --site-name-color: #e5c587;
  --nav-collapse-icon-color: #b7c5d1;
  --nav-collapse-icon-color-hover: #f0d39b;
  --nav-parent-item-color: #d8e0e6;
  --nav-parent-item-color-active: #f0d39b;
  --nav-item-color: #c6d0d9;
  --nav-item-color-hover: #f0d39b;
  --nav-item-color-active: #f0d39b;
  --component-title-color: #f0d6a3;
  color: #eee9df;
}

/* Avoid the default light-mode page text against our forced navy background. */
.published-container .site-body-center-column,
.published-container .site-body-right-column {
  background-color: #0b1727;
  color: #eee9df;
}
.published-container .markdown-preview-view,
.published-container .markdown-rendered,
.published-container .publish-renderer {
  color: #eee9df;
}
.published-container .page-header,
.published-container .page-header h1,
.published-container .page-title {
  color: #f0d6a3;
}
.published-container .site-body-left-column .tree-item-self {
  color: #c6d0d9;
}
.published-container .site-body-left-column .tree-item-self:is(:hover, .is-active) {
  color: #f0d39b;
}

/* Home has its own elegant tt-intro title; don't display a duplicate 'Home'. */
.published-container:has(.terrehs-home) .page-header {
  display: none !important;
}

/* Keep campaign artwork bright. The existing parent mask still supplies the
   intended graduated fade into the card's dark lower half. */
.published-container .terrehs-home
.callout[data-callout="tt-campaigns"] .image-embed img {
  opacity: 1 !important;
  filter: none !important;
}

/* Ensure bespoke page backgrounds still override site-wide defaults. */
.published-container:has(.tt-campaign-page.tt-throne) .site-body-center-column,
.published-container:has(.tt-campaign-page.tt-throne) .publish-renderer,
.published-container:has(.tt-campaign-page.tt-throne) .markdown-preview-view {
  background-color: #101813 !important;
}

/* ============================================================================
   TERREH'S TALES — BALANCED WIDE-SCREEN HOMEPAGE (November 2026)
   On wide monitors: navigation 300px, campaign grid at most 1560px,
   parchment Homebrew at most 1200px, welcome remains 960px.
   Other pages, laptop and mobile layouts are not affected.
   ============================================================================ */

/* The homepage's bespoke welcome panel replaces Publish's automatic heading. */
.published-container:has(.terrehs-home) .page-header,
.published-container:has(.terrehs-home) .inline-title {
  display: none !important;
}

/* Hide the site's graph/right column on Home only, not within campaign pages. */
.published-container:has(.terrehs-home) .site-body-right-column,
.published-container:has(.terrehs-home) .graph-view-outer {
  display: none !important;
}

@media screen and (min-width: 1450px) {
  /* 50% wider than the former 200px sidebar; avoids wrapping the site name. */
  .published-container:has(.terrehs-home) {
    --sidebar-left-width: 300px !important;
    --page-width: calc(100vw - 348px) !important;
    --page-padding: 24px;
  }

  .published-container:has(.terrehs-home) .site-body-left-column {
    box-sizing: border-box !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
  }
  .published-container:has(.terrehs-home) .site-body-left-column-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Let the renderer use the remainder of the screen. */
  .published-container:has(.terrehs-home) .site-body-center-column {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: calc(100% - 300px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .published-container:has(.terrehs-home) .publish-renderer,
  .published-container:has(.terrehs-home) .publish-renderer > .markdown-preview-view {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .published-container:has(.terrehs-home)
  .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  /* Avoid the oversized, landscape-shaped campaign cards at 2K and 4K. */
  .published-container:has(.terrehs-home)
  .callout[data-callout="tt-campaigns"] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1560px !important;
    margin-inline: auto !important;
  }

  /* The parchment compendium reads better at a book-like width. */
  .published-container:has(.terrehs-home)
  .callout[data-callout="tt-homebrew"] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-inline: auto !important;
  }
}

/* ============================================================================
   TERREH'S TALES | CAMPAIGN PUBLISH REFINEMENTS | 2026-11-08
   Applies to Odyssey of the Dragonlords and The Throne of Thorns landing
   pages only. Works with the existing tt-campaign-page / tt-odyssey / tt-throne
   note cssclasses; does not change the homepage or other published notes.
   ============================================================================ */

/* 1. The banner already contains the page title; hide Publish's duplicate. */
.published-container:has(.tt-campaign-page:is(.tt-odyssey, .tt-throne)) .page-header,
.published-container:has(.tt-campaign-page:is(.tt-odyssey, .tt-throne)) .inline-title {
  display: none !important;
}

/* 2. Remove only the built-in graph on these landing pages.
   Other graph components (e.g. on People pages) remain available. */
.published-container:has(.tt-campaign-page:is(.tt-odyssey, .tt-throne)) .graph-view-outer {
  display: none !important;
}

/* 3. Campaign-aware site navigation. These colours are intentionally applied
   to the Publish sidebar, which sits OUTSIDE the Markdown note itself. */
.published-container:has(.tt-odyssey) {
  --site-name-color: #f4d49b;
  --nav-item-color: #cad7e0;
  --nav-parent-item-color: #e0e8ed;
  --nav-item-color-hover: #f4d49b;
  --nav-item-color-active: #f4d49b;
  --nav-collapse-icon-color: #b1c4d0;
}
.published-container:has(.tt-odyssey) .site-body-left-column {
  background: linear-gradient(180deg, #10283b 0%, #0b1b2a 100%) !important;
  border-right: 1px solid rgba(230, 194, 128, .28);
}
.published-container:has(.tt-odyssey) .site-body-left-column-site-name {
  color: #f4d49b !important;
}
.published-container:has(.tt-odyssey) .site-body-left-column .tree-item-self {
  color: #cad7e0;
}
.published-container:has(.tt-odyssey) .site-body-left-column .tree-item-self:is(:hover, .is-active) {
  color: #f4d49b;
}

.published-container:has(.tt-throne) {
  --site-name-color: #d8c08f;
  --nav-item-color: #c6d0c2;
  --nav-parent-item-color: #e0e4d8;
  --nav-item-color-hover: #e7d5aa;
  --nav-item-color-active: #e7d5aa;
  --nav-collapse-icon-color: #aaba9f;
}
.published-container:has(.tt-throne) .site-body-left-column {
  background: linear-gradient(180deg, #1b2921 0%, #101813 100%) !important;
  border-right: 1px solid rgba(165, 171, 134, .36);
}
.published-container:has(.tt-throne) .site-body-left-column-site-name {
  color: #d8c08f !important;
}
.published-container:has(.tt-throne) .site-body-left-column .tree-item-self {
  color: #c6d0c2;
}
.published-container:has(.tt-throne) .site-body-left-column .tree-item-self:is(:hover, .is-active) {
  color: #e7d5aa;
}

/* 4. Throne of Thorns nested Quest Journal section embed.
   Publish wraps a section transclusion in nested containers. The original
   local-style rules didn't reset every Publish wrapper, leaving a nearly
   black rectangle around the current-objectives list. */
.published-container:has(.tt-campaign-page.tt-throne)
.callout[data-callout="tt-campaign-focus"] :is(
  .internal-embed,
  .markdown-embed,
  .markdown-embed-content,
  .markdown-embed-content > .markdown-preview-view,
  .markdown-embed-content .markdown-preview-sizer,
  .markdown-embed-content .markdown-rendered,
  .markdown-embed-content section,
  .markdown-embed-content blockquote,
  .markdown-embed-content ul,
  .markdown-embed-content li
) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.published-container:has(.tt-campaign-page.tt-throne)
.callout[data-callout="tt-campaign-focus"] :is(.internal-embed, .markdown-embed, .markdown-embed-content) {
  border: 0 !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.published-container:has(.tt-campaign-page.tt-throne)
.callout[data-callout="tt-campaign-focus"] .markdown-embed-content ul {
  margin: .25rem 0 .7rem !important;
  padding-left: 1.3rem !important;
  list-style: disc !important;
}
.published-container:has(.tt-campaign-page.tt-throne)
.callout[data-callout="tt-campaign-focus"] .markdown-embed-content li {
  display: list-item !important;
  color: #e0e5dc !important;
  border: 0 !important;
  padding: 0 !important;
  margin: .2rem 0 !important;
  list-style: disc !important;
}
.published-container:has(.tt-campaign-page.tt-throne)
.callout[data-callout="tt-campaign-focus"] .markdown-embed-title {
  display: none !important;
}


/* ================================================================
   TERREH'S TALES | CAMPAIGN LAYOUT + AUTOMATED UPDATES
   2026-11-08
   Landing page only: Odyssey / Throne of Thorns.
   ================================================================ */

/* Solid, contrasting campaign sidebars. No sidebar gradients. */
.published-container:has(.tt-campaign-page.tt-throne) .site-body-left-column {
  background: #1b2921 !important;
  background-image: none !important;
  border-right: 1px solid rgba(165,171,134,.34) !important;
}
.published-container:has(.tt-campaign-page.tt-odyssey) .site-body-left-column {
  background: #142d43 !important;
  background-image: none !important;
  border-right: 1px solid rgba(244,212,155,.30) !important;
}

/* Let campaign pages fill the space available, as the home page does. */
@media screen and (min-width: 1450px) {
  .published-container:has(.tt-campaign-page:is(.tt-throne,.tt-odyssey)) {
    --sidebar-left-width: 300px !important;
    --page-width: calc(100vw - 348px) !important;
    --page-padding: 24px;
  }
  .published-container:has(.tt-campaign-page:is(.tt-throne,.tt-odyssey)) .site-body-left-column {
    box-sizing: border-box !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
  }
  .published-container:has(.tt-campaign-page:is(.tt-throne,.tt-odyssey)) .site-body-left-column-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .published-container:has(.tt-campaign-page:is(.tt-throne,.tt-odyssey)) .site-body-center-column {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: calc(100% - 300px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .published-container:has(.tt-campaign-page:is(.tt-throne,.tt-odyssey)) .publish-renderer,
  .published-container:has(.tt-campaign-page:is(.tt-throne,.tt-odyssey)) .publish-renderer > .markdown-preview-view {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .published-container:has(.tt-campaign-page:is(.tt-throne,.tt-odyssey))
  .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }
  .published-container:has(.tt-campaign-page:is(.tt-throne,.tt-odyssey)) .tt-campaign-page.tt-wide {
    --file-line-width: 1800px !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* ===============================================================
   TERREH'S TALES | LATEST UPDATES (distinct from STATUS dashboard)
   The [!tt-campaign-updates] callout is RESERVED for the two-column
   Current Objectives / Previously On dashboard grid. Do not reuse it.
   =============================================================== */
.tt-campaign-page .callout[data-callout="tt-latest-updates"] {
  --callout-color: 225, 194, 139;
  --callout-icon: lucide-history;
  box-sizing: border-box;
  margin: 1.5rem 0 2rem !important;
  padding: 1.15rem 1.35rem !important;
  border: 1px solid var(--tt-world-border, rgba(225,194,139,.32)) !important;
  border-radius: 10px !important;
  background: var(--tt-world-surface, #142e43) !important;
  background-image: none !important;
}
.tt-campaign-page .callout[data-callout="tt-latest-updates"] > .callout-title {
  display: flex !important;
  align-items: center;
  margin: 0 0 .8rem !important;
  color: var(--tt-world-accent, #e3c690) !important;
  font-family: var(--tt-world-heading-font, Georgia, serif);
  font-size: 1.4rem !important;
  font-weight: 600;
}
.tt-campaign-page .callout[data-callout="tt-latest-updates"] > .callout-content {
  display: block !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.tt-campaign-page .callout[data-callout="tt-latest-updates"] :is(
  .internal-embed, .markdown-embed, .markdown-embed-content
) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
}
.tt-campaign-page .callout[data-callout="tt-latest-updates"] :is(
  .markdown-embed-title, .markdown-embed-link
) { display: none !important; }
.tt-campaign-page .callout[data-callout="tt-latest-updates"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.tt-campaign-page .callout[data-callout="tt-latest-updates"] th,
.tt-campaign-page .callout[data-callout="tt-latest-updates"] td {
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--tt-world-border, rgba(225,194,139,.22));
}
.tt-campaign-page .callout[data-callout="tt-latest-updates"] a.internal-link {
  color: var(--tt-world-accent, #e3c690) !important;
}
@media (max-width: 600px) {
  .tt-campaign-page .callout[data-callout="tt-latest-updates"] {
    padding: .85rem !important;
  }
  .tt-campaign-page .callout[data-callout="tt-latest-updates"] th,
  .tt-campaign-page .callout[data-callout="tt-latest-updates"] td {
    padding: .35rem .2rem;
    font-size: .8rem;
  }
}

/* ============================================================================
   V20 — CAMPAIGN DASHBOARD & ACTIVITY FEEDS
   VISUAL ONLY. These selectors match the EXISTING Obsidian Markdown callouts.
   Works in local Obsidian Reading View and on Obsidian Publish.
   ============================================================================ */

/* The visual system is shared, but each campaign has its own palette. */
.tt-campaign-page.tt-odyssey {
  --tt-v20-heading: #f4d49b;
  --tt-v20-meta-heading: #e0c491;
  --tt-v20-link: #b8d9eb;
  --tt-v20-link-hover: #f6dcaa;
  --tt-v20-rule: rgba(224, 197, 142, .24);
  --tt-v20-soft-border: rgba(229, 194, 133, .50);
  --tt-v20-feed-muted: #b2c5d2;
  --tt-v20-feed-hover: rgba(236, 198, 122, .055);
}
.tt-campaign-page.tt-throne {
  --tt-v20-heading: #e7cf99;
  --tt-v20-meta-heading: #d7c69b;
  --tt-v20-link: #bdd8ba;
  --tt-v20-link-hover: #f1dcad;
  --tt-v20-rule: rgba(169, 190, 157, .23);
  --tt-v20-soft-border: rgba(205, 186, 138, .49);
  --tt-v20-feed-muted: #b5c5b3;
  --tt-v20-feed-hover: rgba(204, 183, 130, .05);
}

/* 20.1 — Small Current Location / In-Game Date / Current Session tiles.
   A modest gold rail and small underline provide a common motif, not a thick
   gold stripe on every box. The 3-column layout is left to the base CSS. */
.tt-campaign-page .callout[data-callout="tt-campaign-status"]
> .callout-content > ul > li {
  border-left: 2px solid var(--tt-v20-soft-border, rgba(229,194,133,.50));
  padding: .98rem 1.05rem 1.02rem;
}
.tt-campaign-page .callout[data-callout="tt-campaign-status"]
> .callout-content > ul > li strong {
  color: var(--tt-v20-meta-heading, #dfc592);
  font-family: var(--tt-world-heading-font, Georgia, serif);
  font-variant: small-caps;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .035em;
  text-transform: none;
  margin: 0 0 .65rem;
}
.tt-campaign-page .callout[data-callout="tt-campaign-status"]
> .callout-content > ul > li strong::after {
  content: "";
  display: block;
  width: 2.3rem;
  height: 1px;
  margin: .45rem 0 0;
  background: var(--tt-v20-soft-border, rgba(229,194,133,.50));
}
.tt-campaign-page .callout[data-callout="tt-campaign-status"]
> .callout-content > ul > li em {
  color: var(--tt-world-text);
  line-height: 1.5;
}

/* 20.2 — Larger panels: retain the already-working TWO-column layout.
   This includes Current Objectives and Previously on Odyssey / Davokar. */
.tt-campaign-page .callout[data-callout="tt-campaign-updates"]
> .callout-content > :is(
  .callout[data-callout="tt-campaign-focus"],
  .callout[data-callout="tt-campaign-recap"]
) {
  border-left: 3px solid var(--tt-v20-soft-border, rgba(229,194,133,.5));
  background: var(--tt-world-surface);
}
.tt-campaign-page .callout[data-callout="tt-campaign-updates"]
> .callout-content > .callout[data-callout="tt-campaign-recap"] {
  border-left-color: var(--tt-world-accent);
}

/* The standalone status callouts (if used outside the two-column wrapper)
   receive the same treatment without disturbing their grid. */
.tt-campaign-page .callout[data-callout="tt-campaign-recap"] {
  border-left: 3px solid var(--tt-world-accent);
}
.tt-campaign-page .callout[data-callout="tt-campaign-focus"] {
  border-left: 3px solid var(--tt-v20-soft-border, rgba(229,194,133,.5));
}

/* 20.3 — SAME ornamental heading on Objectives, Recap and Allies.
   Earlier CSS reduced Recap to 1.15rem, making it look unlike Objectives. */
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-focus"],
  .callout[data-callout="tt-campaign-recap"],
  .callout[data-callout="tt-campaign-npcs"]
) > .callout-title {
  color: var(--tt-v20-heading, var(--tt-world-accent)) !important;
  font-family: var(--tt-world-heading-font, Georgia, serif) !important;
  font-variant: small-caps;
  font-size: clamp(1.38rem, 1.14rem + .46vw, 1.65rem) !important;
  font-weight: 500 !important;
  line-height: 1.28;
  letter-spacing: .012em;
  margin: 0 0 .8rem !important;
  padding: 0;
}

/* Preserve the 75% Heroes / 25% Allies columns, character portraits and 3x3
   NPC tiles; decorate the two real panels, not the invisible cast wrapper. */
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
> .callout-content > :is(
  .callout[data-callout="tt-campaign-party"],
  .callout[data-callout="tt-campaign-npcs"]
) {
  border-left: 3px solid var(--tt-v20-soft-border, rgba(229,194,133,.5));
}

/* 20.4 — Links are clearly interactive, not confused with gold headings.
   Odyssey = sea-glass blue; Throne = soft sage. Hover = campaign gold.
   The activity feed article links retain their own separate gold accent. */
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-status"],
  .callout[data-callout="tt-campaign-focus"],
  .callout[data-callout="tt-campaign-recap"],
  .callout[data-callout="tt-campaign-about"],
  .callout[data-callout="tt-campaign-media"],
  .callout[data-callout="tt-campaign-ic"],
  .callout[data-callout="tt-campaign-ooc"]
) :is(a.internal-link, a.external-link, .external-link) {
  color: var(--tt-v20-link, #b8d9eb) !important;
  text-underline-offset: .16em;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-status"],
  .callout[data-callout="tt-campaign-focus"],
  .callout[data-callout="tt-campaign-recap"],
  .callout[data-callout="tt-campaign-about"],
  .callout[data-callout="tt-campaign-media"],
  .callout[data-callout="tt-campaign-ic"],
  .callout[data-callout="tt-campaign-ooc"]
) :is(a.internal-link, a.external-link, .external-link):is(:hover, :focus-visible) {
  color: var(--tt-v20-link-hover, #f4d49b) !important;
  text-decoration: underline;
}

/* 20.5 — Latest Updates, both old and new callout naming conventions.
   Does not touch [!tt-campaign-updates], which is the status grid. */
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) {
  --callout-icon: lucide-history;
  background: var(--tt-world-surface) !important;
  background-image: none !important;
  border: 1px solid var(--tt-world-border) !important;
  border-radius: 11px;
  padding: 1.1rem 1.3rem !important;
  box-sizing: border-box;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) > .callout-title {
  color: var(--tt-v20-heading, var(--tt-world-accent)) !important;
  font-family: var(--tt-world-heading-font, Georgia, serif);
  font-variant: small-caps;
  font-weight: 600;
  font-size: 1.3rem !important;
  margin-bottom: .85rem !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) :is(.markdown-embed, .internal-embed, .markdown-embed-content) {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  min-width: 0;
  max-width: 100%;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) :is(.markdown-embed-title, .markdown-embed-link, .file-embed-link) {
  display: none !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) table {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  background: transparent !important;
  margin: 0 !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) :is(th, td) {
  border: 0;
  background: transparent !important;
  padding: .66rem .7rem;
  border-bottom: 1px solid var(--tt-v20-rule, rgba(224,197,142,.24));
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) th {
  color: var(--tt-world-muted);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .09em;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) tbody tr:last-child td {
  border-bottom: 0;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) :is(th:last-child, td:last-child) {
  width: 152px;
  text-align: right !important;
  white-space: nowrap;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) td:last-child {
  color: var(--tt-v20-feed-muted, #b2c5d2);
  font-size: .9rem;
  font-style: italic;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) td:first-child a {
  color: var(--tt-v20-heading, var(--tt-world-accent)) !important;
  font-weight: 600;
  text-decoration: none;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) td:first-child a:hover {
  text-decoration: underline;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) tbody tr:hover td {
  background: var(--tt-v20-feed-hover, rgba(236,198,122,.05)) !important;
}

/* 20.6 — Publish-only campaign-specific SOLID navigation.
   Only the sidebar background is changed. Do not override working widths.
   No effect inside the local Obsidian editor. */
.published-container:has(.tt-campaign-page.tt-odyssey) .site-body-left-column {
  background: #142d43 !important;
  background-image: none !important;
}
.published-container:has(.tt-campaign-page.tt-throne) .site-body-left-column {
  background: #1b2921 !important;
  background-image: none !important;
}

/* 20.7 — Small-screen adjustments. Do not disrupt the existing hero/cast
   breakpoints or the main two-column dashboard grid rules in the base CSS. */
@media (max-width: 620px) {
  .tt-campaign-page :is(
    .callout[data-callout="tt-latest-updates"],
    .callout[data-callout="thylea-updates"],
    .callout[data-callout="davokar-updates"]
  ) { padding: .85rem !important; }
  .tt-campaign-page :is(
    .callout[data-callout="tt-latest-updates"],
    .callout[data-callout="thylea-updates"],
    .callout[data-callout="davokar-updates"]
  ) :is(th,td) { padding: .52rem .35rem; }
  .tt-campaign-page :is(
    .callout[data-callout="tt-latest-updates"],
    .callout[data-callout="thylea-updates"],
    .callout[data-callout="davokar-updates"]
  ) :is(th:last-child, td:last-child) { width: 105px; font-size: .78rem; }
}

/* ============================================================================
   TERREH'S TALES V21 — NOVEMBER 2026: MATCHED CAMPAIGN PANELS & LINKS

   COMPLETE STYLESHEET: this section is already part of terrehs-tales.css and
   publish.css. Do NOT append a second copy, and do NOT replace the existing
   campaign Markdown callouts with HTML.

   Works with: tt-campaign-page + tt-odyssey / tt-throne on campaign notes.
   Keeps existing dashboard, party portraits, 3x3 NPCs, campaign carousel,
   site navigation and responsive breakpoints unchanged.
   ============================================================================ */

/* Shared ornament colours. Keep Thylea sea-blue and Davokar forest-green. */
.tt-campaign-page.tt-odyssey {
  --tt-v21-rail: #e8c783;
  --tt-v21-heading: #f4d49b;
  --tt-v21-link: #b8d9eb;
  --tt-v21-link-hover: #f3d398;
  --tt-v21-feed-bg: #142e42;
  --tt-v21-feed-border: #385369;
  --tt-v21-feed-muted: #b4c4d0;
  --tt-v21-feed-rule: rgba(160, 186, 204, .17);
  --tt-v21-feed-hover: rgba(245, 200, 120, .055);
}
.tt-campaign-page.tt-throne {
  --tt-v21-rail: #d7bd82;
  --tt-v21-heading: #e7cf99;
  --tt-v21-link: #bdd8ba;
  --tt-v21-link-hover: #f1dcad;
  --tt-v21-feed-bg: #172c25;
  --tt-v21-feed-border: #45614c;
  --tt-v21-feed-muted: #b5c5b3;
  --tt-v21-feed-rule: rgba(171, 194, 170, .17);
  --tt-v21-feed-hover: rgba(215, 189, 130, .055);
}

/* 21.1 — ONE section-title system: equivalent font, size, weight and spacing
   across Objectives, Previously On, Party, Allies, About, Sounds & Visions,
   Map, Explore Thylea / Davokar and At the Table.
   Intentionally does not change the enormous hero banner, hidden wrapper
   headings, or the title of the actual campaign page. */
.tt-campaign-page .callout:is(
  [data-callout="tt-campaign-focus"],
  [data-callout="tt-campaign-recap"],
  [data-callout="tt-campaign-party"],
  [data-callout="tt-campaign-npcs"],
  [data-callout="tt-campaign-about"],
  [data-callout="tt-campaign-media"],
  [data-callout="tt-campaign-map"],
  [data-callout="tt-campaign-ic"],
  [data-callout="tt-campaign-ooc"]
) > .callout-title {
  color: var(--tt-v21-heading, var(--tt-world-accent)) !important;
  font-family: var(--tt-world-heading-font, Georgia, serif) !important;
  font-variant: small-caps !important;
  font-size: clamp(1.34rem, 1.14rem + .46vw, 1.65rem) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: .014em !important;
  margin: 0 0 .85rem !important;
  padding: 0 !important;
}
.tt-campaign-page .callout:is(
  [data-callout="tt-campaign-focus"],
  [data-callout="tt-campaign-recap"],
  [data-callout="tt-campaign-party"],
  [data-callout="tt-campaign-npcs"],
  [data-callout="tt-campaign-about"],
  [data-callout="tt-campaign-media"],
  [data-callout="tt-campaign-map"],
  [data-callout="tt-campaign-ic"],
  [data-callout="tt-campaign-ooc"]
) > .callout-title > .callout-title-inner {
  color: inherit !important;
  font: inherit !important;
  font-variant: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

/* The two side-by-side dashboard panels are visually equal. Previously On
   no longer has a heavier or brighter rail than Current Objectives. */
.tt-campaign-page .callout[data-callout="tt-campaign-updates"]
> .callout-content > :is(
  .callout[data-callout="tt-campaign-focus"],
  .callout[data-callout="tt-campaign-recap"]
),
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-focus"],
  .callout[data-callout="tt-campaign-recap"]
) {
  border-left: 3px solid var(--tt-v21-rail, #e8c783) !important;
}

/* 21.2 — Gold rails for the real feature boxes. Avoid colouring layout-only
   wrappers like tt-campaign-updates and tt-campaign-overview. */
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-about"],
  .callout[data-callout="tt-campaign-media"],
  .callout[data-callout="tt-campaign-map"]
),
.tt-campaign-page .callout[data-callout="tt-campaign-cast"]
> .callout-content > :is(
  .callout[data-callout="tt-campaign-party"],
  .callout[data-callout="tt-campaign-npcs"]
) {
  border-left: 3px solid var(--tt-v21-rail, #e8c783) !important;
}

/* 21.3 — Actual in-character and out-of-character navigation cards.
   These are Markdown list items, not separate callouts. Keep the 2-column
   card grid and the responsive 1-column layout unchanged. */
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-ic"],
  .callout[data-callout="tt-campaign-ooc"]
) > .callout-content > ul > li {
  border-left: 3px solid var(--tt-v21-rail, #e8c783) !important;
}

/* World & History, People & Powers, Adventures & Discoveries, The Archives. */
.tt-campaign-page .callout[data-callout="tt-campaign-ic"]
> .callout-content > ul > li > strong,
.tt-campaign-page .callout[data-callout="tt-campaign-ic"]
> .callout-content > ul > li > p > strong {
  display: block;
  margin: 0 0 .55rem;
  color: var(--tt-v21-heading, var(--tt-world-accent)) !important;
  font-family: var(--tt-world-heading-font, Georgia, serif) !important;
  font-size: clamp(1.09rem, .98rem + .3vw, 1.28rem) !important;
  font-variant: small-caps;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .014em;
}

/* Player's Guide, Campaign Homebrew, House Rules, Session Recaps are
   clickable link tiles. Link text is sea-glass/sage rather than title-gold. */
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"]
> .callout-content > ul > li a.internal-link {
  color: var(--tt-v21-link, #b8d9eb) !important;
  font-family: var(--tt-world-heading-font, Georgia, serif);
  font-variant: small-caps;
  font-size: clamp(1.08rem, .99rem + .2vw, 1.24rem);
  font-weight: 500;
  letter-spacing: .013em;
  text-decoration: none;
}
.tt-campaign-page .callout[data-callout="tt-campaign-ooc"]
> .callout-content > ul > li a.internal-link:is(:hover, :focus-visible) {
  color: var(--tt-v21-link-hover, #f4d49b) !important;
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* 21.4 — Mini-cards: portraits, NPCs, Spotify and Pinterest.
   Do not alter grid sizes, images, aspect ratios or existing backgrounds. */
.tt-campaign-page .callout[data-callout="tt-campaign-party"]
> .callout-content > ul > li,
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"]
> .callout-content > ul > li,
.tt-campaign-page .callout[data-callout="tt-campaign-media"]
> .callout-content > ul > li {
  border-left: 3px solid var(--tt-v21-rail, #e8c783) !important;
}

/* Spotify / Pinterest card labels should look intentional but remain smaller
   than section headings. Thylea labels and Davokar labels share the layout. */
.tt-campaign-page .callout[data-callout="tt-campaign-media"]
> .callout-content > ul > li strong {
  color: var(--tt-v21-heading, var(--tt-world-accent)) !important;
  font-family: var(--tt-world-heading-font, Georgia, serif);
  font-variant: small-caps;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .01em;
}

/* Keep actual page links visually separate from decorative card titles. */
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-ic"],
  .callout[data-callout="tt-campaign-media"],
  .callout[data-callout="tt-campaign-about"],
  .callout[data-callout="tt-campaign-map"],
  .callout[data-callout="tt-campaign-recap"],
  .callout[data-callout="tt-campaign-focus"]
) a:is(.internal-link, .external-link) {
  color: var(--tt-v21-link, #b8d9eb) !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-ic"],
  .callout[data-callout="tt-campaign-media"],
  .callout[data-callout="tt-campaign-about"],
  .callout[data-callout="tt-campaign-map"],
  .callout[data-callout="tt-campaign-recap"],
  .callout[data-callout="tt-campaign-focus"]
) a:is(.internal-link, .external-link):is(:hover, :focus-visible) {
  color: var(--tt-v21-link-hover, #f4d49b) !important;
}

/* Character names that are links now also read as links rather than headings.
   Unlinked character names remain campaign-gold. */
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-party"],
  .callout[data-callout="tt-campaign-npcs"]
) > .callout-content > ul > li strong a.internal-link {
  color: var(--tt-v21-link, #b8d9eb) !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-campaign-party"],
  .callout[data-callout="tt-campaign-npcs"]
) > .callout-content > ul > li strong a.internal-link:hover {
  color: var(--tt-v21-link-hover, #f4d49b) !important;
}

/* 21.5 — Restore polished Latest from Thylea/Davokar activity feed.
   The classed generic callout and named callouts are both supported,
   including embedded/serialized Markdown tables with the Article column. */
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) {
  --tt-v21-feed-bg: #142e42;
  --tt-v21-feed-border: #385369;
  --tt-v21-feed-muted: #b4c4d0;
  --tt-v21-feed-rule: rgba(160,186,204,.17);
  --tt-v21-feed-hover: rgba(245,200,120,.055);
  --tt-v21-rail: #e8c783;
  --tt-v21-heading: #f4d49b;
  --callout-icon: lucide-history;
  --callout-color: 242,197,124;
  box-sizing: border-box;
  background: var(--tt-v21-feed-bg) !important;
  background-image: none !important;
  border: 1px solid var(--tt-v21-feed-border) !important;
  border-left: 3px solid var(--tt-v21-rail) !important;
  border-radius: 11px;
  padding: 1.1rem 1.3rem !important;
  margin-block: 1.35rem;
}
:is(
  .tt-campaign-page.tt-throne .callout[data-callout="tt-latest-updates"],
  .tt-throne .callout[data-callout="davokar-updates"],
  .callout[data-callout="davokar-updates"]
) {
  --tt-v21-feed-bg: #172c25;
  --tt-v21-feed-border: #45614c;
  --tt-v21-feed-muted: #b5c5b3;
  --tt-v21-feed-rule: rgba(171,194,170,.17);
  --tt-v21-feed-hover: rgba(215,189,130,.055);
  --tt-v21-rail: #d7bd82;
  --tt-v21-heading: #e7cf99;
  --callout-color: 215,189,130;
  --callout-icon: lucide-trees;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) > .callout-title {
  color: var(--tt-v21-heading) !important;
  font-family: var(--tt-world-heading-font, Georgia, serif) !important;
  font-variant: small-caps;
  font-size: 1.27rem !important;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0 0 .9rem !important;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) :is(
  .markdown-embed-title,
  .markdown-embed-link,
  .file-embed-link,
  .markdown-embed .page-header,
  .markdown-embed .mod-header
) {
  display: none !important;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) :is(.markdown-embed, .internal-embed, .markdown-embed-content) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) .markdown-embed-content .markdown-preview-view {
  padding: 0 !important;
  margin: 0 !important;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse;
  table-layout: auto;
  background: transparent !important;
  margin: 0 !important;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) th {
  color: var(--tt-v21-feed-muted) !important;
  background: transparent !important;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .63rem .7rem;
  border: 0;
  border-bottom: 1px solid var(--tt-v21-feed-border);
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) td {
  background: transparent !important;
  padding: .63rem .7rem;
  border: 0;
  border-bottom: 1px solid var(--tt-v21-feed-rule);
  vertical-align: middle;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) tbody tr:last-child td { border-bottom: 0; }
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) :is(th:last-child, td:last-child) {
  width: 152px;
  text-align: right !important;
  white-space: nowrap;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) td:last-child {
  color: var(--tt-v21-feed-muted) !important;
  font-style: italic;
  font-size: .89rem;
  font-weight: 400;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) td:first-child a {
  color: var(--tt-v21-heading, #f4d49b) !important;
  text-decoration: none !important;
  font-weight: 600;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) td:first-child a:is(:hover, :focus-visible) {
  text-decoration: underline !important;
  text-underline-offset: .18em;
}
:is(
  .tt-campaign-page .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"]
) tbody tr:hover td {
  background: var(--tt-v21-feed-hover) !important;
}

/* Keep long article names readable on mobile without shrinking other cards. */
@media (max-width: 620px) {
  :is(
    .tt-campaign-page .callout[data-callout="tt-latest-updates"],
    .callout[data-callout="thylea-updates"],
    .callout[data-callout="davokar-updates"]
  ) { padding: .85rem !important; }
  :is(
    .tt-campaign-page .callout[data-callout="tt-latest-updates"],
    .callout[data-callout="thylea-updates"],
    .callout[data-callout="davokar-updates"]
  ) :is(th, td) { padding: .5rem .35rem; }
  :is(
    .tt-campaign-page .callout[data-callout="tt-latest-updates"],
    .callout[data-callout="thylea-updates"],
    .callout[data-callout="davokar-updates"]
  ) :is(th:last-child, td:last-child) {
    width: 104px;
    font-size: .78rem;
  }
}


/* ============================================================================
   TERREH'S TALES V22 — LATEST UPDATES ACTIVITY FEEDS (OBSIDIAN + PUBLISH)

   The actual Latest Updates embeds were rendered inside an ordinary/default
   callout, not always a [!tt-latest-updates] callout. Prior CSS therefore
   did not match, leaving a default blue title and a narrow table.

   The :has(.markdown-embed table) fallback matches the visible *embedded
   Markdown table*, regardless of the callout type. It is scoped to campaign
   landing pages so other tables, cards, and quest trackers are not changed.

   This is part of the COMPLETE terrehs-tales.css / publish.css files.
   It is not an additional snippet to install separately.
   ============================================================================ */

/* Capture all three named callout types AND default callouts containing a
   Markdown note embed with a table. Keep tt-campaign-updates (dashboard grid)
   untouched; only a table inside an actual markdown-embed can trigger it. */
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) {
  --tt-feed-panel: #142e42;
  --tt-feed-stroke: #3a556a;
  --tt-feed-gold: #f1cb8a;
  --tt-feed-muted: #b0c0cc;
  --tt-feed-divider: rgba(169, 190, 204, .19);
  --tt-feed-rowhover: rgba(241, 203, 138, .06);
  --callout-color: 241, 203, 138;
  --callout-icon: lucide-history;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  color: #e9edf2 !important;
  background: var(--tt-feed-panel) !important;
  background-image: none !important;
  border: 1px solid var(--tt-feed-stroke) !important;
  border-left: 3px solid var(--tt-feed-gold) !important;
  border-radius: 11px !important;
  margin: 1.5rem 0 !important;
  padding: 1.1rem 1.3rem !important;
  box-shadow: none !important;
}

/* Forest version. Note-specific classes are on the same .markdown-preview-view
   in the local app, and on the rendered page for Publish. */
.tt-campaign-page.tt-throne :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) {
  --tt-feed-panel: #172c25;
  --tt-feed-stroke: #45614c;
  --tt-feed-gold: #dfc58f;
  --tt-feed-muted: #b2c1b0;
  --tt-feed-divider: rgba(171, 194, 170, .20);
  --tt-feed-rowhover: rgba(223, 197, 143, .06);
  --callout-color: 223, 197, 143;
  --callout-icon: lucide-trees;
}

/* Force a proper gold heading even for built-in [!note]/[!edit] callouts. */
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) > .callout-title {
  display: flex !important;
  align-items: center !important;
  color: var(--tt-feed-gold) !important;
  background: none !important;
  font-family: var(--tt-world-heading-font, Georgia, serif) !important;
  font-variant: small-caps !important;
  font-size: clamp(1.25rem, 1.1rem + .38vw, 1.55rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: .014em !important;
  padding: 0 !important;
  margin: 0 0 .85rem !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) > .callout-title :is(.callout-title-inner, .callout-icon, .svg-icon) {
  color: var(--tt-feed-gold) !important;
  stroke: currentColor;
}

/* Most of the wasted space came from the embedded note's default 300px
   preview sizing and the inherited readable-line-length constraints.  */
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) > .callout-content {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) > .callout-content > p {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) :is(
  .internal-embed,
  .markdown-embed,
  .markdown-embed-content,
  .markdown-embed .markdown-preview-view,
  .markdown-embed .markdown-preview-sizer,
  .markdown-embed .markdown-preview-section,
  .markdown-embed .el-table,
  .markdown-embed .table-wrapper
) {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The actual "Latest Updates" label and top-right chain icon belong to the
   embed, not the feed. Hide them; leave the real feed heading in place. */
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) :is(
  .markdown-embed-title,
  .markdown-embed-link,
  .file-embed-link,
  .markdown-embed .page-header,
  .markdown-embed .inline-title,
  .markdown-embed .mod-header
) { display: none !important; }

/* Let serialized Article / Date Edited rows expand across the whole callout. */
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) table {
  display: table !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  font-size: .93rem;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) table :is(th, td) {
  background: transparent !important;
  color: #e9edf2;
  box-sizing: border-box !important;
  border: none !important;
  border-bottom: 1px solid var(--tt-feed-divider) !important;
  padding: .65rem .7rem !important;
  vertical-align: middle;
  overflow-wrap: anywhere;
  text-align: left;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) table th {
  color: var(--tt-feed-muted) !important;
  font-size: .75rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) table :is(th:last-child, td:last-child) {
  width: 160px !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow-wrap: normal;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) table td:last-child {
  color: var(--tt-feed-muted) !important;
  font-size: .88rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) table td:first-child a {
  color: var(--tt-feed-gold) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) table td:first-child a:is(:hover, :focus-visible) {
  text-decoration: underline !important;
  text-underline-offset: .18em;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) table tbody tr:last-child td {
  border-bottom: 0 !important;
}
.tt-campaign-page :is(
  .callout[data-callout="tt-latest-updates"],
  .callout[data-callout="thylea-updates"],
  .callout[data-callout="davokar-updates"],
  .callout:has(.markdown-embed table)
) table tbody tr:hover td {
  background: var(--tt-feed-rowhover) !important;
}

@media (max-width: 620px) {
  .tt-campaign-page :is(
    .callout[data-callout="tt-latest-updates"],
    .callout[data-callout="thylea-updates"],
    .callout[data-callout="davokar-updates"],
    .callout:has(.markdown-embed table)
  ) { padding: .85rem !important; }
  .tt-campaign-page :is(
    .callout[data-callout="tt-latest-updates"],
    .callout[data-callout="thylea-updates"],
    .callout[data-callout="davokar-updates"],
    .callout:has(.markdown-embed table)
  ) table :is(th,td) { padding: .48rem .3rem !important; }
  .tt-campaign-page :is(
    .callout[data-callout="tt-latest-updates"],
    .callout[data-callout="thylea-updates"],
    .callout[data-callout="davokar-updates"],
    .callout:has(.markdown-embed table)
  ) table :is(th:last-child,td:last-child) { width: 112px !important; font-size: .77rem !important; }
}


/* ============================================================================
   TERREH'S TALES V23 — MATCHED STATUS RAILS & DARKER PORTRAIT / RESOURCE CARDS
   Full consolidated stylesheet. Applies in Obsidian and Obsidian Publish.
   Keeps the existing grids, portrait sizes and Latest Updates styling.
   ============================================================================ */

/* Campaign-specific surfaces: Aegean blue or Davokar forest green. */
.tt-campaign-page.tt-odyssey {
  --tt-v23-rail: #e8c783;
  --tt-v23-status-surface: #142e43;
  --tt-v23-card-surface: #102637;
  --tt-v23-portrait-top: #183549;
  --tt-v23-portrait-bottom: #0b1e2d;
}
.tt-campaign-page.tt-throne {
  --tt-v23-rail: #d7bd82;
  --tt-v23-status-surface: #1b3027;
  --tt-v23-card-surface: #13251d;
  --tt-v23-portrait-top: #243e32;
  --tt-v23-portrait-bottom: #0e1f18;
}

/* Three status tiles: the same substantial left accent as Objectives and
   Previously On, without making the entire tile border gold. */
.tt-campaign-page .callout[data-callout="tt-campaign-status"]
> .callout-content > ul > li {
  background: var(--tt-v23-status-surface, #142e43) !important;
  background-image: none !important;
  border-left: 3px solid var(--tt-v23-rail, #e8c783) !important;
}

/* Five hero cards + all nine NPC cards + the Spotify and Pinterest tiles.
   Only change the surface colour, not their established dimensions or grid. */
.tt-campaign-page .callout[data-callout="tt-campaign-party"]
> .callout-content > ul > li,
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"]
> .callout-content > ul > li,
.tt-campaign-page .callout[data-callout="tt-campaign-media"]
> .callout-content > ul > li,
.tt-campaign-page .callout[data-callout="tt-campaign-overview"]
.callout[data-callout="tt-campaign-media"]
> .callout-content > ul > li {
  background: var(--tt-v23-card-surface, #102637) !important;
  background-image: none !important;
  border-left: 3px solid var(--tt-v23-rail, #e8c783) !important;
}

/* Empty portrait wells: darken the placeholder gradients to match the
   cards. Real portrait images remain untouched. */
.tt-campaign-page .callout[data-callout="tt-campaign-party"]
> .callout-content > ul > li::before,
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"]
> .callout-content > ul > li::before {
  background: linear-gradient(
    165deg,
    var(--tt-v23-portrait-top, #183549),
    var(--tt-v23-portrait-bottom, #0b1e2d)
  ) !important;
}

/* On hover, add only a very subtle lift in brightness; keep gold rails. */
.tt-campaign-page .callout[data-callout="tt-campaign-party"]
> .callout-content > ul > li:hover,
.tt-campaign-page .callout[data-callout="tt-campaign-npcs"]
> .callout-content > ul > li:hover,
.tt-campaign-page .callout[data-callout="tt-campaign-media"]
> .callout-content > ul > li:hover {
  filter: brightness(1.055);
}