/*
TARIN CHRONICLE — Obsidian Publish
Clean dark-editorial fantasy styling for:
- Lineage of the Veiled Kin
- The Rose of Igoda

Design principles:
- Clean sans-serif body for long-form reading
- Serif display headings for atmosphere
- Charcoal / ivory foundation
- Antique brass as the main accent
- Muted moss for links and secondary emphasis
- Restrained oxide for warnings / unresolved material
- Minimal vertical spacing
- No faux parchment, glow effects, jewel-tone clutter, or purple
*/

:root,
body.theme-dark,
.published-container {
  /* Core */
  --tarin-bg: #141714;
  --tarin-bg-deep: #101210;
  --tarin-panel: #1b1f1b;
  --tarin-panel-raised: #20251f;
  --tarin-sidebar: #121512;
  --tarin-border: #343a33;
  --tarin-border-soft: #292e29;

  /* Text */
  --tarin-text: #e8e2d7;
  --tarin-text-soft: #c9c2b6;
  --tarin-muted: #9d988f;
  --tarin-faint: #77736c;

  /* Accents */
  --tarin-brass: #c1a15e;
  --tarin-brass-soft: #9c824e;
  --tarin-brass-dim: #6f5c39;
  --tarin-moss: #82917c;
  --tarin-moss-bright: #a6b39f;
  --tarin-oxide: #8e5c50;
  --tarin-oxide-bright: #b47a6d;

  /* Obsidian variable remaps */
  --background-primary: var(--tarin-bg);
  --background-primary-alt: var(--tarin-bg-deep);
  --background-secondary: var(--tarin-sidebar);
  --background-secondary-alt: var(--tarin-panel);
  --background-modifier-border: var(--tarin-border);
  --background-modifier-hover: rgba(193, 161, 94, 0.07);
  --background-modifier-active-hover: rgba(193, 161, 94, 0.11);

  --text-normal: var(--tarin-text);
  --text-muted: var(--tarin-muted);
  --text-faint: var(--tarin-faint);
  --text-on-accent: #11130f;
  --text-selection: rgba(130, 145, 124, 0.26);

  --text-accent: var(--tarin-moss-bright);
  --text-accent-hover: #c3cec0;
  --link-color: var(--tarin-moss-bright);
  --link-color-hover: #cad5c7;
  --link-external-color: #c6aa73;
  --link-external-color-hover: #e0c58d;

  --interactive-accent: var(--tarin-brass);
  --interactive-accent-hover: #d2b472;

  --blockquote-border-color: var(--tarin-brass-soft);
  --table-border-color: var(--tarin-border);
  --table-header-background: #222720;
  --table-row-alt-background: rgba(255,255,255,0.018);
  --code-background: #0f110f;
  --code-normal: #ddd5c8;

  --graph-line: #4a5049;
  --graph-node: #8a9b83;
  --graph-node-focused: var(--tarin-brass);
  --graph-node-tag: #aa8258;
  --graph-node-attachment: #8d8172;

  --font-interface-theme: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text-theme: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-monospace-theme: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --file-line-width: 900px;
  --line-height-normal: 1.58;
  --line-height-tight: 1.26;
  --radius-s: 4px;
  --radius-m: 7px;
  --radius-l: 10px;
}

/* -------------------------------------------------------------------------- */
/* Global frame                                                               */
/* -------------------------------------------------------------------------- */

html,
body {
  background: var(--tarin-bg);
}

body {
  color: var(--tarin-text);
  font-family: var(--font-text-theme);
  background-image:
    radial-gradient(circle at 50% -16%, rgba(193,161,94,0.045), transparent 34rem),
    linear-gradient(180deg, rgba(255,255,255,0.008), transparent 30rem);
}

.site-header {
  background: rgba(18, 21, 18, 0.94);
  border-bottom: 1px solid var(--tarin-border-soft);
  backdrop-filter: blur(10px);
}

.site-body-left-column,
.site-body-right-column {
  background: var(--tarin-sidebar);
}

.site-body-left-column {
  border-right: 1px solid var(--tarin-border-soft);
}

.site-body-right-column {
  border-left: 1px solid var(--tarin-border-soft);
}

.site-body-center-column {
  background: transparent;
}

/* -------------------------------------------------------------------------- */
/* Site title + navigation                                                    */
/* -------------------------------------------------------------------------- */

.site-body-left-column-site-name {
  color: var(--tarin-text) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-transform: uppercase;
  padding-bottom: 0.72rem;
}

.site-body-left-column-site-name::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-top: 0.62rem;
  background: var(--tarin-brass);
}

.site-body-left-column-site-name:hover {
  color: var(--tarin-brass) !important;
}

.nav-view-outer,
.tree-item,
.tree-item-self,
.search-view-container {
  font-family: var(--font-interface-theme);
}

.tree-item-self {
  color: var(--tarin-text-soft);
  border-radius: 4px;
  margin-block: 1px;
  padding-block: 3px;
  transition: background-color 120ms ease, color 120ms ease;
}

.tree-item-self:hover {
  color: var(--tarin-text);
  background: rgba(193,161,94,0.055);
}

.tree-item-self.mod-active,
.tree-item-self.is-active,
.tree-item-self[data-active="true"] {
  color: var(--tarin-text);
  background: rgba(193,161,94,0.075);
  box-shadow: inset 2px 0 0 var(--tarin-brass);
}

.tree-item-self[data-path="Lineage of the Veiled Kin"],
.tree-item-self[data-path="The Rose of Igoda"] {
  color: var(--tarin-brass);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  margin-top: 0.5rem;
}

.tree-item-self[data-path="START HERE"],
.tree-item-self[data-path="START HERE.md"] {
  color: var(--tarin-text);
  font-weight: 700;
  margin-top: 0.55rem;
}

.search-view-container input,
.site-body-left-column input[type="search"] {
  background: #171a17;
  border: 1px solid var(--tarin-border);
  border-radius: 5px;
  color: var(--tarin-text);
  box-shadow: none;
}

.search-view-container input:focus,
.site-body-left-column input[type="search"]:focus {
  border-color: var(--tarin-brass-soft);
  box-shadow: 0 0 0 1px rgba(193,161,94,0.12);
}

/* -------------------------------------------------------------------------- */
/* Reading typography                                                         */
/* -------------------------------------------------------------------------- */

.site-body-center-column .markdown-preview-view,
.site-body-center-column .markdown-rendered {
  color: var(--tarin-text);
  font-family: var(--font-text-theme);
  font-size: 16.75px;
  line-height: 1.58;
}

.markdown-rendered p,
.markdown-preview-view p {
  margin-block: 0.58em; /* intentionally compact: "Stop Vertical Spacing" */
}

.markdown-rendered li,
.markdown-preview-view li {
  margin-block: 0.18em;
}

.page-header,
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.24;
  text-wrap: balance;
}

.page-header,
.markdown-rendered h1,
.markdown-preview-view h1 {
  color: var(--tarin-text);
  font-size: clamp(2.05rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0.2rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  position: relative;
}

.page-header::after,
.markdown-rendered h1::after,
.markdown-preview-view h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 30rem);
  height: 2px;
  background: linear-gradient(90deg, var(--tarin-brass), var(--tarin-brass-dim), transparent 82%);
}

.markdown-rendered h2,
.markdown-preview-view h2 {
  color: var(--tarin-brass);
  font-size: 1.48rem;
  font-weight: 700;
  margin-top: 1.72rem;
  margin-bottom: 0.48rem;
  padding-bottom: 0.22rem;
  border-bottom: 1px solid var(--tarin-border-soft);
}

.markdown-rendered h3,
.markdown-preview-view h3 {
  color: #ddd5c8;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 1.28rem;
  margin-bottom: 0.3rem;
}

.markdown-rendered h3::before,
.markdown-preview-view h3::before {
  content: "";
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--tarin-brass-soft);
  vertical-align: 0.12em;
}

.markdown-rendered h4,
.markdown-preview-view h4 {
  color: var(--tarin-text-soft);
  font-size: 1.04rem;
  font-weight: 700;
  margin-top: 1.02rem;
  margin-bottom: 0.22rem;
}

.markdown-rendered strong,
.markdown-preview-view strong {
  color: inherit;
  font-weight: 700;
}

.markdown-rendered em,
.markdown-preview-view em {
  color: #d6cfc3;
}

/* Metadata immediately below title */
.markdown-rendered h1 + p,
.markdown-preview-view h1 + p {
  color: var(--tarin-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* -------------------------------------------------------------------------- */
/* Links                                                                      */
/* -------------------------------------------------------------------------- */

.markdown-rendered a,
.markdown-preview-view a {
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

.markdown-rendered a.internal-link,
.markdown-preview-view a.internal-link {
  color: var(--tarin-moss-bright);
  font-weight: 600;
  text-decoration-color: rgba(166,179,159,0.34);
}

.markdown-rendered a.internal-link:hover,
.markdown-preview-view a.internal-link:hover {
  color: #c7d1c4;
  text-decoration-color: currentColor;
}

.markdown-rendered a.external-link,
.markdown-preview-view a.external-link {
  color: #c8ad77;
}

/* -------------------------------------------------------------------------- */
/* Callouts / dropdowns                                                       */
/* -------------------------------------------------------------------------- */

.callout {
  background: var(--tarin-panel);
  border: 1px solid var(--tarin-border);
  border-radius: 7px;
  box-shadow: none;
  margin-block: 0.82rem;
}

.callout-title {
  color: var(--tarin-text);
  font-family: var(--font-interface-theme);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.callout-content {
  color: var(--tarin-text-soft);
  font-family: var(--font-interface-theme);
  font-size: 0.965rem;
  line-height: 1.52;
  padding-top: 0.18rem;
}

.callout-content p,
.callout-content ul,
.callout-content ol {
  margin-block: 0.38rem;
}

/* TL;DR */
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"] {
  border-left: 3px solid var(--tarin-moss);
}

.callout[data-callout="abstract"] .callout-title,
.callout[data-callout="summary"] .callout-title,
.callout[data-callout="tldr"] .callout-title {
  color: var(--tarin-moss-bright);
}

/* Memorable Moments */
.callout[data-callout="star"] {
  border-left: 3px solid var(--tarin-brass);
}

.callout[data-callout="star"] .callout-title {
  color: #d6bb80;
}

/* Session End State */
.callout[data-callout="success"] {
  border-left: 3px solid #71856d;
}

.callout[data-callout="success"] .callout-title {
  color: #9faf9a;
}

/* Questions / warnings / unresolved material */
.callout[data-callout="question"],
.callout[data-callout="warning"],
.callout[data-callout="danger"] {
  border-left: 3px solid var(--tarin-oxide);
}

.callout[data-callout="question"] .callout-title,
.callout[data-callout="warning"] .callout-title,
.callout[data-callout="danger"] .callout-title {
  color: var(--tarin-oxide-bright);
}

/* Supporting/meta notes */
.callout[data-callout="note"],
.callout[data-callout="info"] {
  border-left: 3px solid #68716a;
}

/* -------------------------------------------------------------------------- */
/* Images                                                                     */
/* -------------------------------------------------------------------------- */

.markdown-rendered .image-embed,
.markdown-preview-view .image-embed,
.markdown-rendered p > img:only-child,
.markdown-preview-view p > img:only-child {
  display: block;
  text-align: center;
  margin: 1rem auto;
}

.markdown-rendered img:not(.emoji),
.markdown-preview-view img:not(.emoji),
.markdown-rendered .image-embed img,
.markdown-preview-view .image-embed img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  max-height: 82vh;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--tarin-border);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}

/* -------------------------------------------------------------------------- */
/* Quotes, rules, tables, code                                                */
/* -------------------------------------------------------------------------- */

.markdown-rendered blockquote,
.markdown-preview-view blockquote {
  color: var(--tarin-text-soft);
  background: rgba(193,161,94,0.035);
  border-left: 3px solid var(--tarin-brass-soft);
  border-radius: 0 5px 5px 0;
  font-style: italic;
  margin-block: 0.8rem;
  padding: 0.48rem 0.9rem;
}

.markdown-rendered hr,
.markdown-preview-view hr {
  border: 0;
  height: 1px;
  width: 78%;
  margin: 1.3rem auto;
  background: linear-gradient(90deg, transparent, var(--tarin-border), transparent);
}

.markdown-rendered table,
.markdown-preview-view table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--tarin-border);
  border-radius: 6px;
  overflow: hidden;
  margin: 0.9rem 0;
}

.markdown-rendered th,
.markdown-preview-view th {
  background: var(--table-header-background);
  color: var(--tarin-text);
  font-family: var(--font-interface-theme);
  font-size: 0.9rem;
  font-weight: 700;
}

.markdown-rendered th,
.markdown-rendered td,
.markdown-preview-view th,
.markdown-preview-view td {
  border-color: var(--tarin-border);
  padding: 0.5rem 0.62rem;
}

.markdown-rendered tbody tr:nth-child(even),
.markdown-preview-view tbody tr:nth-child(even) {
  background: var(--table-row-alt-background);
}

.markdown-rendered pre,
.markdown-preview-view pre {
  background: var(--code-background);
  border: 1px solid var(--tarin-border);
  border-radius: 6px;
}

.markdown-rendered code,
.markdown-preview-view code {
  color: var(--code-normal);
}

/* -------------------------------------------------------------------------- */
/* Right rail / graph / page outline                                          */
/* -------------------------------------------------------------------------- */

.published-section-header {
  color: var(--tarin-brass);
  font-family: var(--font-interface-theme);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.graph-view-container {
  background: #161916;
  border: 1px solid var(--tarin-border);
  border-radius: 6px;
  overflow: hidden;
}

.outline-view-outer .tree-item-self {
  color: var(--tarin-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.outline-view-outer .tree-item-self:hover {
  color: var(--tarin-text);
}

.site-footer {
  border-top: 1px solid var(--tarin-border-soft);
  color: var(--tarin-faint);
}

/* -------------------------------------------------------------------------- */
/* Scrollbar                                                                  */
/* -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--tarin-bg-deep);
}

::-webkit-scrollbar-thumb {
  background: #353b35;
  border-radius: 20px;
  border: 2px solid var(--tarin-bg-deep);
}

::-webkit-scrollbar-thumb:hover {
  background: #454d45;
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 750px) {
  .site-body-center-column .markdown-preview-view,
  .site-body-center-column .markdown-rendered {
    font-size: 16px;
    line-height: 1.56;
  }

  .page-header,
  .markdown-rendered h1,
  .markdown-preview-view h1 {
    font-size: 2rem;
  }

  .markdown-rendered h2,
  .markdown-preview-view h2 {
    font-size: 1.34rem;
  }

  .markdown-rendered h3,
  .markdown-preview-view h3 {
    font-size: 1.12rem;
  }

  .markdown-rendered table,
  .markdown-preview-view table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .markdown-rendered img:not(.emoji),
  .markdown-preview-view img:not(.emoji) {
    max-height: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Accessibility                                                              */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* Public navigation cleanup: internal/archive folders should never clutter the reader sidebar. */
.tree-item-self[data-path*="99 - DNP - DO NOT PUBLISH"],
.tree-item-self[data-path*="99 - Attachments"],
.tree-item-self[data-path*="90 - Templates"] { display: none !important; }

/* Give numbered top-level archive folders a restrained editorial hierarchy. */
.site-body-left-column .tree-item-self[data-path*="/00 - "],
.site-body-left-column .tree-item-self[data-path*="/01 - "],
.site-body-left-column .tree-item-self[data-path*="/02 - "],
.site-body-left-column .tree-item-self[data-path*="/03 - "],
.site-body-left-column .tree-item-self[data-path*="/04 - "],
.site-body-left-column .tree-item-self[data-path*="/05 - "],
.site-body-left-column .tree-item-self[data-path*="/06 - "],
.site-body-left-column .tree-item-self[data-path*="/07 - "],
.site-body-left-column .tree-item-self[data-path*="/08 - "],
.site-body-left-column .tree-item-self[data-path*="/09 - "],
.site-body-left-column .tree-item-self[data-path*="/10 - "],
.site-body-left-column .tree-item-self[data-path*="/11 - "],
.site-body-left-column .tree-item-self[data-path*="/12 - "],
.site-body-left-column .tree-item-self[data-path*="/13 - "],
.site-body-left-column .tree-item-self[data-path*="/14 - "],
.site-body-left-column .tree-item-self[data-path*="/15 - "] { font-weight: 600; }

/* ========================================================================== */
/* SESSION 09 CINEMATIC PUBLISH TEST — V2                                    */
/* Scoped to cssclasses: session-showcase-v2. Remove this block to revert.    */
/* ========================================================================== */

.session-showcase-v2 {
  --showcase-wide: 1120px;
  --showcase-reading: 780px;
  --showcase-ink: #eee7dc;
  --showcase-panel: #181c18;
  --showcase-panel-2: #20261f;
  --showcase-gold: #c9aa68;
  --showcase-line: rgba(201,170,104,.33);
  --file-line-width: var(--showcase-wide);
}

/* Let the page breathe like an editorial feature, not a note pane. */
.session-showcase-v2 .markdown-preview-sizer,
.session-showcase-v2.markdown-preview-view .markdown-preview-sizer {
  max-width: var(--showcase-wide) !important;
  padding-top: 1.2rem !important;
  padding-bottom: 6rem !important;
}

/* Hero -------------------------------------------------------------------- */
.session-showcase-v2 .callout[data-callout="sessionhero"] {
  position: relative;
  overflow: hidden;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid rgba(201,170,104,.38);
  border-radius: 14px;
  background: #0c0f0d;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.session-showcase-v2 .callout[data-callout="sessionhero"] > .callout-title {
  position: absolute;
  z-index: 5;
  top: 1.1rem;
  left: 1.25rem;
  padding: .38rem .62rem;
  color: #efe5d1;
  background: rgba(10,12,10,.72);
  border: 1px solid rgba(239,229,209,.22);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-family: var(--font-interface-theme);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.session-showcase-v2 .callout[data-callout="sessionhero"] .callout-icon {
  display: none;
}

.session-showcase-v2 .callout[data-callout="sessionhero"] .callout-content {
  position: relative;
  padding: 0 !important;
}

.session-showcase-v2 .callout[data-callout="sessionhero"] .callout-content::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,8,.02) 24%, rgba(8,10,8,.25) 48%, rgba(8,10,8,.95) 88%);
}

.session-showcase-v2 .callout[data-callout="sessionhero"] .image-embed,
.session-showcase-v2 .callout[data-callout="sessionhero"] p:first-child {
  display: block;
  margin: 0 !important;
  width: 100%;
}

.session-showcase-v2 .callout[data-callout="sessionhero"] img {
  width: 100% !important;
  max-width: none !important;
  height: clamp(390px, 55vw, 660px) !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover !important;
  object-position: center 48%;
  filter: saturate(.88) contrast(1.04) brightness(.86);
}

.session-showcase-v2 .callout[data-callout="sessionhero"] h1,
.session-showcase-v2 .callout[data-callout="sessionhero"] .callout-content > p:not(:first-child) {
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin-left: clamp(1.25rem, 4vw, 3.7rem) !important;
  margin-right: clamp(1.25rem, 4vw, 3.7rem) !important;
}

.session-showcase-v2 .callout[data-callout="sessionhero"] h1 {
  margin-top: -8.5rem !important;
  margin-bottom: .55rem !important;
  padding: 0 !important;
  color: #f4eee4 !important;
  border: 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.25rem, 5.3vw, 4.9rem) !important;
  line-height: .98 !important;
  letter-spacing: -.035em;
  text-shadow: 0 3px 22px rgba(0,0,0,.72);
}

.session-showcase-v2 .callout[data-callout="sessionhero"] .callout-content > p:nth-last-child(2) {
  margin-bottom: .15rem !important;
  color: var(--showcase-gold);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.session-showcase-v2 .callout[data-callout="sessionhero"] .callout-content > p:last-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 2.3rem;
  color: #ded5c7;
  font-size: 1rem;
}

/* Navigation strip --------------------------------------------------------- */
.session-showcase-v2 .callout[data-callout="sessionnav"] {
  margin: 1rem 0 2.4rem;
  padding: .78rem 1rem;
  border: 1px solid var(--showcase-line);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(201,170,104,.08), rgba(255,255,255,.015));
  box-shadow: none;
}

.session-showcase-v2 .callout[data-callout="sessionnav"] .callout-icon { display: none; }
.session-showcase-v2 .callout[data-callout="sessionnav"] .callout-title {
  color: var(--showcase-gold);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.session-showcase-v2 .callout[data-callout="sessionnav"] .callout-content {
  color: var(--tarin-text-soft);
  font-size: .9rem;
}
.session-showcase-v2 .callout[data-callout="sessionnav"] .callout-content p { margin: .25rem 0 0; }

/* Summary panels become a visual briefing board. -------------------------- */
.session-showcase-v2 .callout[data-callout="abstract"],
.session-showcase-v2 .callout[data-callout="star"],
.session-showcase-v2 .callout[data-callout="success"],
.session-showcase-v2 .callout[data-callout="question"] {
  margin: 1.5rem 0 2.8rem;
  border: 1px solid var(--tarin-border);
  border-left: 0;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.009));
  box-shadow: 0 16px 36px rgba(0,0,0,.16);
}

.session-showcase-v2 .callout[data-callout="abstract"] > .callout-title,
.session-showcase-v2 .callout[data-callout="star"] > .callout-title,
.session-showcase-v2 .callout[data-callout="success"] > .callout-title,
.session-showcase-v2 .callout[data-callout="question"] > .callout-title {
  padding: .88rem 1rem .78rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--showcase-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  font-weight: 700;
}

.session-showcase-v2 .callout[data-callout="abstract"] .callout-content,
.session-showcase-v2 .callout[data-callout="star"] .callout-content,
.session-showcase-v2 .callout[data-callout="success"] .callout-content,
.session-showcase-v2 .callout[data-callout="question"] .callout-content {
  padding: .95rem 1rem 1rem;
}

.session-showcase-v2 .callout[data-callout="abstract"] ul,
.session-showcase-v2 .callout[data-callout="star"] ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.session-showcase-v2 .callout[data-callout="abstract"] li,
.session-showcase-v2 .callout[data-callout="star"] li {
  margin: 0;
  padding: .82rem .9rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(0,0,0,.16);
  color: var(--tarin-text-soft);
  line-height: 1.48;
}

.session-showcase-v2 .callout[data-callout="abstract"] li::marker,
.session-showcase-v2 .callout[data-callout="star"] li::marker { content: ""; }

/* Chronicle architecture -------------------------------------------------- */
.session-showcase-v2 h2 {
  width: min(100%, var(--showcase-wide));
  margin: 4.1rem auto 1.9rem !important;
  padding: 1.05rem 1.25rem .95rem !important;
  border-top: 1px solid var(--showcase-line) !important;
  border-bottom: 1px solid var(--showcase-line) !important;
  border-left: 0 !important;
  background: linear-gradient(90deg, rgba(201,170,104,.09), rgba(201,170,104,.025) 52%, transparent);
  color: #efe7d9 !important;
  font-size: clamp(1.35rem, 2.6vw, 2rem) !important;
  letter-spacing: .015em;
}

.session-showcase-v2 h2[data-heading^="ACT"] {
  margin-top: 5.7rem !important;
  padding: 2rem 1.3rem 1.85rem !important;
  background:
    linear-gradient(90deg, rgba(201,170,104,.16), rgba(201,170,104,.035) 64%, transparent),
    #151915;
  border-top: 1px solid rgba(201,170,104,.55) !important;
  border-bottom: 1px solid rgba(201,170,104,.28) !important;
  color: var(--showcase-gold) !important;
  font-family: var(--font-interface-theme) !important;
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  font-weight: 850 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
}

.session-showcase-v2 h3 {
  max-width: var(--showcase-reading);
  margin: 2.55rem auto .85rem !important;
  padding: 0 0 .56rem !important;
  border-bottom: 1px solid rgba(201,170,104,.18) !important;
  color: #e9dfd0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
}

.session-showcase-v2 h3::before {
  content: "◆";
  display: inline-block;
  margin-right: .62rem;
  color: var(--showcase-gold);
  font-family: var(--font-interface-theme);
  font-size: .52em;
  vertical-align: .18em;
}

/* Editorial reading width. Images deliberately break wider than prose. */
.session-showcase-v2 .el-p:not(:has(.image-embed)),
.session-showcase-v2 .el-ul:not(.callout-content .el-ul),
.session-showcase-v2 .el-ol:not(.callout-content .el-ol),
.session-showcase-v2 .el-blockquote:not(:has(.callout)),
.session-showcase-v2 .markdown-preview-sizer > p:not(:has(.image-embed)) {
  max-width: var(--showcase-reading);
  margin-left: auto;
  margin-right: auto;
}

.session-showcase-v2 .el-p:has(.image-embed),
.session-showcase-v2 .markdown-preview-sizer > p:has(.image-embed) {
  width: 100%;
  max-width: var(--showcase-wide);
  margin: 1.65rem auto 2.8rem !important;
}

.session-showcase-v2 img[width="780"],
.session-showcase-v2 .image-embed img[width="780"] {
  width: 100% !important;
  max-width: 1080px !important;
  max-height: 76vh !important;
  border: 1px solid rgba(201,170,104,.28) !important;
  border-radius: 11px !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.32) !important;
}

.session-showcase-v2 .el-p:has(img[width="780"])::after,
.session-showcase-v2 .markdown-preview-sizer > p:has(img[width="780"])::after {
  content: "";
  display: block;
  width: 58%;
  height: 1px;
  margin: 1.2rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(201,170,104,.26), transparent);
}

/* End-state reads as the closing tactical dashboard. */
.session-showcase-v2 .callout[data-callout="success"] {
  border-color: rgba(130,145,124,.45);
  background: linear-gradient(145deg, rgba(130,145,124,.10), rgba(255,255,255,.01));
}

.session-showcase-v2 .callout[data-callout="success"] li {
  padding: .32rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.session-showcase-v2 .callout[data-callout="success"] li:last-child { border-bottom: 0; }

/* Reduce the "Obsidian note" feel on this one page. */
.session-showcase-v2 .metadata-container { display: none !important; }
.session-showcase-v2 hr { width: 100%; opacity: .7; }

@media (max-width: 900px) {
  .session-showcase-v2 { --showcase-reading: 100%; }
  .session-showcase-v2 .callout[data-callout="abstract"] ul,
  .session-showcase-v2 .callout[data-callout="star"] ul { grid-template-columns: 1fr; }
  .session-showcase-v2 .callout[data-callout="sessionhero"] h1 { margin-top: -6.8rem !important; }
}

@media (max-width: 650px) {
  .session-showcase-v2 .markdown-preview-sizer { padding-inline: .65rem !important; }
  .session-showcase-v2 .callout[data-callout="sessionhero"] img { height: 440px !important; }
  .session-showcase-v2 .callout[data-callout="sessionhero"] h1 {
    margin-top: -8.2rem !important;
    font-size: 2.4rem !important;
  }
  .session-showcase-v2 .callout[data-callout="sessionhero"] .callout-content > p:last-child {
    font-size: .88rem;
  }
  .session-showcase-v2 h2 { margin-top: 3.2rem !important; }
}



/* ========================================================================== */
/* SESSION PUBLISH TEST V3 — cleaner editorial session layout                 */
/* Scoped to cssclasses: session-showcase-v3                                  */
/* ========================================================================== */

/* Session pages do not need the Publish graph / page outline rail. */
body:has(.session-showcase-v3) .site-body-right-column,
.published-container:has(.session-showcase-v3) .site-body-right-column {
  display: none !important;
}

body:has(.session-showcase-v3) .site-body-center-column,
.published-container:has(.session-showcase-v3) .site-body-center-column {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

.session-showcase-v3 {
  --s3-content: 980px;
  --s3-gold: var(--tarin-brass);
  --s3-line: rgba(193,161,94,.28);
  --s3-panel: rgba(255,255,255,.018);
  --s3-panel-strong: rgba(193,161,94,.065);
  font-family: var(--font-text-theme) !important;
}

.session-showcase-v3 .markdown-preview-sizer,
.session-showcase-v3 .markdown-rendered {
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-inline: clamp(1.1rem, 3vw, 2.4rem) !important;
}

/* No metadata / default page title above the custom hero. */
.session-showcase-v3 .metadata-container,
.session-showcase-v3 .page-header {
  display: none !important;
}

/* Clean sans-serif type throughout this test page. */
.session-showcase-v3 h1,
.session-showcase-v3 h2,
.session-showcase-v3 h3,
.session-showcase-v3 h4,
.session-showcase-v3 h5,
.session-showcase-v3 h6,
.session-showcase-v3 .callout-title {
  font-family: var(--font-interface-theme) !important;
}

/* Hero -------------------------------------------------------------------- */
.session-showcase-v3 .callout[data-callout="sessionhero"] {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1120px;
  margin: .5rem auto 1rem !important;
  padding: 0 !important;
  border: 1px solid var(--s3-line) !important;
  border-radius: 12px !important;
  background: #0d100d !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}

.session-showcase-v3 .callout[data-callout="sessionhero"] > .callout-title {
  position: absolute;
  z-index: 4;
  top: 1.15rem;
  left: 1.25rem;
  width: auto;
  padding: .45rem .7rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(12,14,12,.78);
  color: #e7e0d5;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.session-showcase-v3 .callout[data-callout="sessionhero"] .callout-icon { display:none !important; }
.session-showcase-v3 .callout[data-callout="sessionhero"] .callout-content { padding:0 !important; position:relative; }
.session-showcase-v3 .callout[data-callout="sessionhero"] .callout-content::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, transparent 35%, rgba(8,10,8,.28) 58%, rgba(8,10,8,.96) 92%);
}
.session-showcase-v3 .callout[data-callout="sessionhero"] .image-embed,
.session-showcase-v3 .callout[data-callout="sessionhero"] .callout-content > p:first-child {
  display:block;
  width:100%;
  margin:0 !important;
}
.session-showcase-v3 .callout[data-callout="sessionhero"] img {
  display:block;
  width:100% !important;
  max-width:none !important;
  height:clamp(410px, 48vw, 620px) !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  object-fit:cover !important;
  object-position:center 48%;
  filter:saturate(.9) contrast(1.03) brightness(.87);
}
.session-showcase-v3 .callout[data-callout="sessionhero"] h1,
.session-showcase-v3 .callout[data-callout="sessionhero"] .callout-content > p:not(:first-child) {
  position:relative;
  z-index:3;
  margin-left:clamp(1.35rem, 4vw, 3rem) !important;
  margin-right:clamp(1.35rem, 4vw, 3rem) !important;
}
.session-showcase-v3 .callout[data-callout="sessionhero"] h1 {
  max-width:900px;
  margin-top:-8rem !important;
  margin-bottom:.65rem !important;
  padding:0 !important;
  border:0 !important;
  color:#f1ece3 !important;
  font-size:clamp(2.45rem, 5vw, 4.55rem) !important;
  font-weight:850 !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
  text-shadow:0 3px 24px rgba(0,0,0,.7);
}
.session-showcase-v3 .callout[data-callout="sessionhero"] .callout-content > p:nth-last-child(2) {
  margin-bottom:.2rem !important;
  color:#e2c57f;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.session-showcase-v3 .callout[data-callout="sessionhero"] .callout-content > p:last-child {
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-bottom:2rem;
  color:#d8d1c6;
  font-size:.96rem;
}

/* Session navigation ------------------------------------------------------ */
.session-showcase-v3 .callout[data-callout="sessionnav"] {
  width:100%;
  max-width:var(--s3-content);
  margin:0 auto 2rem !important;
  padding:.72rem .9rem !important;
  border:1px solid var(--tarin-border) !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.012) !important;
  box-shadow:none !important;
}
.session-showcase-v3 .callout[data-callout="sessionnav"] .callout-icon {display:none !important;}
.session-showcase-v3 .callout[data-callout="sessionnav"] .callout-title {
  color:var(--s3-gold) !important;
  font-size:.64rem !important;
  font-weight:800 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase;
}
.session-showcase-v3 .callout[data-callout="sessionnav"] .callout-content {
  color:var(--tarin-text-soft);
  font-size:.9rem;
}
.session-showcase-v3 .callout[data-callout="sessionnav"] .callout-content p {margin:.2rem 0 0 !important;}

/* Summary blocks ---------------------------------------------------------- */
.session-showcase-v3 .callout[data-callout="abstract"],
.session-showcase-v3 .callout[data-callout="star"],
.session-showcase-v3 .callout[data-callout="success"],
.session-showcase-v3 .callout[data-callout="question"] {
  width:100%;
  max-width:var(--s3-content);
  margin:1.25rem auto 2.6rem !important;
  border:1px solid var(--tarin-border) !important;
  border-radius:9px !important;
  background:var(--s3-panel) !important;
  box-shadow:none !important;
}
.session-showcase-v3 .callout[data-callout="abstract"] > .callout-title,
.session-showcase-v3 .callout[data-callout="star"] > .callout-title,
.session-showcase-v3 .callout[data-callout="success"] > .callout-title,
.session-showcase-v3 .callout[data-callout="question"] > .callout-title {
  padding:.82rem 1rem .72rem !important;
  border-bottom:1px solid rgba(255,255,255,.065);
  color:#e8e1d6 !important;
  font-size:1rem !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
}
.session-showcase-v3 .callout[data-callout="abstract"] .callout-content,
.session-showcase-v3 .callout[data-callout="star"] .callout-content,
.session-showcase-v3 .callout[data-callout="success"] .callout-content,
.session-showcase-v3 .callout[data-callout="question"] .callout-content {
  padding:.65rem 1rem .9rem !important;
}

/* TL;DR is deliberately linear and numbered, not a two-column card grid. */
.session-showcase-v3 .callout[data-callout="abstract"] ul {
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  counter-reset:s3-summary;
}
.session-showcase-v3 .callout[data-callout="abstract"] li {
  counter-increment:s3-summary;
  position:relative;
  margin:0 !important;
  padding:.78rem .15rem .78rem 3.15rem !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--tarin-text-soft) !important;
  line-height:1.52;
}
.session-showcase-v3 .callout[data-callout="abstract"] li:last-child {border-bottom:0 !important;}
.session-showcase-v3 .callout[data-callout="abstract"] li::before {
  content:counter(s3-summary, decimal-leading-zero);
  position:absolute;
  left:.1rem;
  top:.83rem;
  min-width:2.1rem;
  color:var(--s3-gold);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.08em;
}

/* Memorable moments: one ordered reading column, no zig-zag card layout. */
.session-showcase-v3 .callout[data-callout="star"] ul {
  display:block !important;
  margin:0 !important;
  padding-left:1.2rem !important;
}
.session-showcase-v3 .callout[data-callout="star"] li {
  margin:.38rem 0 !important;
  padding:.28rem 0 .45rem .2rem !important;
  border:0 !important;
  background:transparent !important;
  color:var(--tarin-text-soft) !important;
  line-height:1.5;
}

/* Story structure --------------------------------------------------------- */
.session-showcase-v3 h2[data-heading^="ACT"] {
  width:100%;
  max-width:var(--s3-content);
  margin:5rem auto 2rem !important;
  padding:1.2rem 0 .9rem !important;
  border:0 !important;
  border-top:2px solid var(--s3-gold) !important;
  border-bottom:1px solid var(--s3-line) !important;
  background:transparent !important;
  color:var(--s3-gold) !important;
  font-size:1rem !important;
  font-weight:900 !important;
  letter-spacing:.19em !important;
  text-transform:uppercase;
}

.session-showcase-v3 h3 {
  width:100%;
  max-width:var(--s3-content);
  margin:2.7rem auto .9rem !important;
  padding:0 0 .55rem !important;
  border:0 !important;
  border-bottom:1px solid rgba(193,161,94,.17) !important;
  color:#eae4da !important;
  font-size:1.38rem !important;
  font-weight:800 !important;
  letter-spacing:-.015em !important;
}
.session-showcase-v3 h3::before {
  content:"" !important;
  display:none !important;
}

/* One alignment system for story text, headings and images. */
.session-showcase-v3 .markdown-preview-sizer > p,
.session-showcase-v3 .markdown-preview-sizer > ul,
.session-showcase-v3 .markdown-preview-sizer > ol,
.session-showcase-v3 .markdown-preview-sizer > blockquote:not(:has(.callout)),
.session-showcase-v3 .el-p,
.session-showcase-v3 .el-ul,
.session-showcase-v3 .el-ol,
.session-showcase-v3 .el-blockquote:not(:has(.callout)) {
  width:100%;
  max-width:var(--s3-content);
  margin-left:auto !important;
  margin-right:auto !important;
}

.session-showcase-v3 .markdown-preview-sizer > p:not(:has(.image-embed)),
.session-showcase-v3 .el-p:not(:has(.image-embed)) {
  font-size:1.06rem;
  line-height:1.68;
}

/* Every normal session image uses the same column width. */
.session-showcase-v3 .markdown-preview-sizer > p:has(.image-embed),
.session-showcase-v3 .el-p:has(.image-embed) {
  width:100% !important;
  max-width:var(--s3-content) !important;
  margin:1.35rem auto 2.25rem !important;
}
.session-showcase-v3 .markdown-preview-sizer > p:has(.image-embed) .image-embed,
.session-showcase-v3 .el-p:has(.image-embed) .image-embed {
  display:block;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.session-showcase-v3 .markdown-preview-sizer > p:has(.image-embed) img,
.session-showcase-v3 .el-p:has(.image-embed) img {
  display:block;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  border:1px solid rgba(193,161,94,.23) !important;
  border-radius:8px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.2) !important;
  object-fit:contain !important;
}

/* Keep compact closing/support callouts without duplicate section headers. */
.session-showcase-v3 .callout[data-callout="question"],
.session-showcase-v3 .callout[data-callout="success"] {
  margin-top:3.1rem !important;
}
.session-showcase-v3 .callout[data-callout="success"] {
  border-color:rgba(130,145,124,.42) !important;
  background:rgba(130,145,124,.045) !important;
}

.session-showcase-v3 hr {
  width:100%;
  max-width:var(--s3-content);
  margin:2.5rem auto !important;
  border-color:rgba(193,161,94,.2) !important;
}

@media (max-width: 760px) {
  .session-showcase-v3 .markdown-preview-sizer,
  .session-showcase-v3 .markdown-rendered {
    padding-inline:.65rem !important;
  }
  .session-showcase-v3 .callout[data-callout="sessionhero"] img {
    height:430px !important;
  }
  .session-showcase-v3 .callout[data-callout="sessionhero"] h1 {
    margin-top:-7.2rem !important;
    font-size:2.3rem !important;
  }
  .session-showcase-v3 h2[data-heading^="ACT"] { margin-top:3.8rem !important; }
}

/* ========================================================================== */
/* SESSION PUBLISH TEST V4 — premium campaign journal                         */
/* Scoped to cssclasses: session-showcase-v4                                  */
/* ========================================================================== */

/* A richer ink/ocean canvas, without falling back to pure black. */
body:has(.session-showcase-v4) {
  --s4-bg: #0d171b;
  --s4-bg-deep: #091216;
  --s4-surface: #132127;
  --s4-surface-raised: #17282f;
  --s4-surface-soft: rgba(25, 42, 49, .72);
  --s4-cream: #eeeae1;
  --s4-copy: #d9d8d1;
  --s4-muted: #a9b1ae;
  --s4-gold: #d3aa5a;
  --s4-gold-soft: rgba(211, 170, 90, .28);
  --s4-sea: #8eafb0;
  --s4-sea-soft: rgba(142, 175, 176, .18);
  --s4-line: rgba(211, 170, 90, .23);
  background: var(--s4-bg-deep) !important;
}

body:has(.session-showcase-v4) .site-body-right-column,
.published-container:has(.session-showcase-v4) .site-body-right-column {
  display: none !important;
}

body:has(.session-showcase-v4) .site-body-left-column {
  background:
    linear-gradient(180deg, rgba(142,175,176,.035), transparent 22rem),
    #091115 !important;
  border-right: 1px solid rgba(142,175,176,.13) !important;
}

body:has(.session-showcase-v4) .site-body-center-column,
.published-container:has(.session-showcase-v4) .site-body-center-column {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  background:
    radial-gradient(circle at 12% -8%, rgba(211,170,90,.10), transparent 31rem),
    radial-gradient(circle at 88% 8%, rgba(85,129,139,.11), transparent 34rem),
    linear-gradient(180deg, #101c21 0%, #0d171b 36rem, #0c1519 100%) !important;
}

/* Bring the public navigation into the same visual language for this page. */
body:has(.session-showcase-v4) .site-body-left-column-site-name,
body:has(.session-showcase-v4) .tree-item-self[data-path="Lineage of the Veiled Kin"],
body:has(.session-showcase-v4) .tree-item-self[data-path="The Rose of Igoda"] {
  font-family: var(--font-interface-theme) !important;
}

body:has(.session-showcase-v4) .site-body-left-column-site-name {
  color: var(--s4-cream) !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

body:has(.session-showcase-v4) .site-body-left-column-site-name::after {
  background: linear-gradient(90deg, var(--s4-gold), rgba(211,170,90,.22)) !important;
}

body:has(.session-showcase-v4) .tree-item-self.mod-active,
body:has(.session-showcase-v4) .tree-item-self.is-active,
body:has(.session-showcase-v4) .tree-item-self[data-active="true"] {
  background: linear-gradient(90deg, rgba(211,170,90,.12), rgba(142,175,176,.025)) !important;
  box-shadow: inset 2px 0 0 var(--s4-gold) !important;
}

.session-showcase-v4 {
  --s4-reading: 920px;
  --s4-wide: 1060px;
  --s4-hero: 1140px;
  color: var(--s4-copy) !important;
  font-family: var(--font-text-theme) !important;
}

/* The important V4 change: the page hugs the navigation rather than floating
   in the middle of a huge empty canvas. */
.session-showcase-v4 .markdown-preview-sizer,
.session-showcase-v4 .markdown-rendered {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: clamp(.45rem, 1vw, 1rem) !important;
  margin-right: auto !important;
  padding-left: clamp(.85rem, 1.8vw, 1.65rem) !important;
  padding-right: clamp(2rem, 6vw, 5.5rem) !important;
}

.session-showcase-v4 .metadata-container,
.session-showcase-v4 .page-header {
  display: none !important;
}

.session-showcase-v4 h1,
.session-showcase-v4 h2,
.session-showcase-v4 h3,
.session-showcase-v4 h4,
.session-showcase-v4 h5,
.session-showcase-v4 h6,
.session-showcase-v4 .callout-title {
  font-family: var(--font-interface-theme) !important;
}

.session-showcase-v4 a.internal-link {
  color: #a9c2bd !important;
  text-decoration-color: rgba(169,194,189,.25) !important;
  text-underline-offset: .15em;
}
.session-showcase-v4 a.internal-link:hover {
  color: #c8dad6 !important;
  text-decoration-color: rgba(211,170,90,.65) !important;
}

/* HERO -------------------------------------------------------------------- */
.session-showcase-v4 .callout[data-callout="sessionhero"] {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: var(--s4-hero);
  margin: .65rem 0 1.15rem !important;
  padding: 0 !important;
  border: 1px solid rgba(211,170,90,.38) !important;
  border-radius: 14px !important;
  background: #091114 !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.33),
    0 0 0 1px rgba(255,255,255,.018) inset !important;
}

.session-showcase-v4 .callout[data-callout="sessionhero"] > .callout-title {
  position: absolute;
  z-index: 5;
  top: 1.2rem;
  left: 1.25rem;
  width: auto;
  padding: .48rem .76rem;
  border: 1px solid rgba(231,222,203,.18);
  border-radius: 999px;
  background: rgba(7,13,16,.73);
  color: #eee9df;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

.session-showcase-v4 .callout[data-callout="sessionhero"] .callout-icon { display:none !important; }
.session-showcase-v4 .callout[data-callout="sessionhero"] .callout-content {
  position:relative;
  padding:0 !important;
}

.session-showcase-v4 .callout[data-callout="sessionhero"] .callout-content::before {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,11,14,.12), transparent 50%),
    linear-gradient(180deg, transparent 28%, rgba(8,16,19,.2) 51%, rgba(8,15,18,.97) 91%);
}

.session-showcase-v4 .callout[data-callout="sessionhero"] .callout-content::after {
  content:"";
  position:absolute;
  z-index:3;
  left:clamp(1.35rem, 4vw, 3rem);
  bottom:1.65rem;
  width:clamp(4rem, 10vw, 8rem);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--s4-gold), rgba(211,170,90,.12));
  pointer-events:none;
}

.session-showcase-v4 .callout[data-callout="sessionhero"] .image-embed,
.session-showcase-v4 .callout[data-callout="sessionhero"] .callout-content > p:first-child {
  display:block;
  width:100%;
  margin:0 !important;
}

.session-showcase-v4 .callout[data-callout="sessionhero"] img {
  display:block;
  width:100% !important;
  max-width:none !important;
  height:clamp(430px, 49vw, 650px) !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  object-fit:cover !important;
  object-position:center 48%;
  filter:saturate(.92) contrast(1.04) brightness(.88);
}

.session-showcase-v4 .callout[data-callout="sessionhero"] h1,
.session-showcase-v4 .callout[data-callout="sessionhero"] .callout-content > p:not(:first-child) {
  position:relative;
  z-index:4;
  max-width:920px;
  margin-left:clamp(1.35rem, 4vw, 3rem) !important;
  margin-right:clamp(1.35rem, 4vw, 3rem) !important;
}

.session-showcase-v4 .callout[data-callout="sessionhero"] h1 {
  margin-top:-8.5rem !important;
  margin-bottom:.66rem !important;
  padding:0 !important;
  border:0 !important;
  color:#f2eee5 !important;
  font-size:clamp(2.55rem, 5.1vw, 4.75rem) !important;
  font-weight:900 !important;
  line-height:.96 !important;
  letter-spacing:-.05em !important;
  text-shadow:0 4px 28px rgba(0,0,0,.7);
}

.session-showcase-v4 .callout[data-callout="sessionhero"] .callout-content > p:nth-last-child(2) {
  margin-bottom:.2rem !important;
  color:#e5c777;
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.session-showcase-v4 .callout[data-callout="sessionhero"] .callout-content > p:last-child {
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-bottom:2.4rem;
  color:#d4d7d2;
  font-size:.96rem;
}

/* NAVIGATION --------------------------------------------------------------- */
.session-showcase-v4 .callout[data-callout="sessionnav"] {
  width:100%;
  max-width:var(--s4-wide);
  margin:0 0 2.45rem !important;
  padding:.78rem 1rem .82rem 1.1rem !important;
  border:1px solid rgba(142,175,176,.15) !important;
  border-left:3px solid var(--s4-gold) !important;
  border-radius:8px !important;
  background:
    linear-gradient(90deg, rgba(211,170,90,.07), transparent 38%),
    rgba(19,33,39,.76) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.12) !important;
}
.session-showcase-v4 .callout[data-callout="sessionnav"] .callout-icon {display:none !important;}
.session-showcase-v4 .callout[data-callout="sessionnav"] .callout-title {
  color:var(--s4-gold) !important;
  font-size:.62rem !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
}
.session-showcase-v4 .callout[data-callout="sessionnav"] .callout-content {
  color:#cbd0cc !important;
  font-size:.91rem;
}
.session-showcase-v4 .callout[data-callout="sessionnav"] .callout-content p {margin:.22rem 0 0 !important;}

/* SUMMARY / SUPPORT PANELS ------------------------------------------------ */
.session-showcase-v4 .callout[data-callout="abstract"],
.session-showcase-v4 .callout[data-callout="star"],
.session-showcase-v4 .callout[data-callout="success"],
.session-showcase-v4 .callout[data-callout="question"] {
  width:100%;
  max-width:var(--s4-wide);
  margin:1.35rem 0 3rem !important;
  border:1px solid rgba(142,175,176,.16) !important;
  border-radius:11px !important;
  background:
    linear-gradient(145deg, rgba(142,175,176,.045), transparent 62%),
    rgba(18,32,38,.82) !important;
  box-shadow:
    0 20px 52px rgba(0,0,0,.16),
    inset 0 1px rgba(255,255,255,.018) !important;
}

.session-showcase-v4 .callout[data-callout="abstract"] > .callout-title,
.session-showcase-v4 .callout[data-callout="star"] > .callout-title,
.session-showcase-v4 .callout[data-callout="success"] > .callout-title,
.session-showcase-v4 .callout[data-callout="question"] > .callout-title {
  padding:.9rem 1.05rem .82rem !important;
  border-bottom:1px solid rgba(142,175,176,.13);
  color:#efeae1 !important;
  font-size:.98rem !important;
  font-weight:900 !important;
  letter-spacing:.025em !important;
}

.session-showcase-v4 .callout[data-callout="abstract"] .callout-content,
.session-showcase-v4 .callout[data-callout="star"] .callout-content,
.session-showcase-v4 .callout[data-callout="success"] .callout-content,
.session-showcase-v4 .callout[data-callout="question"] .callout-content {
  padding:.78rem 1.05rem 1.05rem !important;
}

/* TL;DR as an unmistakably ordered vertical route, not just bullets. */
.session-showcase-v4 .callout[data-callout="abstract"] ul {
  position:relative;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  counter-reset:s4-summary;
}
.session-showcase-v4 .callout[data-callout="abstract"] ul::before {
  content:"";
  position:absolute;
  left:1.08rem;
  top:1.25rem;
  bottom:1.25rem;
  width:1px;
  background:linear-gradient(180deg, rgba(211,170,90,.5), rgba(142,175,176,.18));
}
.session-showcase-v4 .callout[data-callout="abstract"] li {
  counter-increment:s4-summary;
  position:relative;
  margin:0 !important;
  padding:.9rem .35rem .95rem 3.75rem !important;
  border:0 !important;
  border-bottom:1px solid rgba(142,175,176,.09) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#d5d8d3 !important;
  line-height:1.55;
}
.session-showcase-v4 .callout[data-callout="abstract"] li:last-child {border-bottom:0 !important;}
.session-showcase-v4 .callout[data-callout="abstract"] li::before {
  content:counter(s4-summary, decimal-leading-zero);
  position:absolute;
  z-index:2;
  left:0;
  top:.72rem;
  display:grid;
  place-items:center;
  width:2.18rem;
  height:2.18rem;
  border:1px solid rgba(211,170,90,.52);
  border-radius:50%;
  background:#101c21;
  color:#e3bf72;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:0 0 0 5px rgba(16,28,33,.86);
}

/* Memorable moments get their own visual rhythm without changing order. */
.session-showcase-v4 .callout[data-callout="star"] ul {
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.session-showcase-v4 .callout[data-callout="star"] li {
  position:relative;
  margin:.42rem 0 !important;
  padding:.7rem .75rem .74rem 2.25rem !important;
  border:1px solid rgba(142,175,176,.09) !important;
  border-radius:7px !important;
  background:rgba(7,14,17,.22) !important;
  color:#d5d8d3 !important;
  line-height:1.5;
}
.session-showcase-v4 .callout[data-callout="star"] li::before {
  content:"✦";
  position:absolute;
  left:.78rem;
  top:.68rem;
  color:var(--s4-gold);
  font-size:.85rem;
}

/* ACT BREAKS -------------------------------------------------------------- */
.session-showcase-v4 h2[data-heading^="ACT"] {
  width:100%;
  max-width:var(--s4-wide);
  margin:5.8rem 0 2.7rem !important;
  padding:1.35rem 1.45rem 1.25rem !important;
  border:1px solid rgba(211,170,90,.22) !important;
  border-left:4px solid var(--s4-gold) !important;
  border-radius:9px !important;
  background:
    linear-gradient(90deg, rgba(211,170,90,.11), rgba(142,175,176,.03) 56%, transparent),
    rgba(16,29,34,.78) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.13) !important;
  color:#e2bd6d !important;
  font-size:1.02rem !important;
  font-weight:950 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase;
}

.session-showcase-v4 h2[data-heading^="ACT"]::after {
  content:"";
  display:block;
  width:6.2rem;
  height:2px;
  margin-top:.72rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(142,175,176,.65), transparent);
}

/* SCENE HEADINGS ---------------------------------------------------------- */
.session-showcase-v4 h3 {
  width:100%;
  max-width:var(--s4-reading);
  margin:3.15rem 0 1.25rem !important;
  padding:.62rem .85rem .64rem .95rem !important;
  border:0 !important;
  border-left:3px solid rgba(211,170,90,.82) !important;
  border-radius:0 6px 6px 0 !important;
  background:linear-gradient(90deg, rgba(211,170,90,.07), rgba(142,175,176,.018) 58%, transparent) !important;
  color:#eeeae2 !important;
  font-size:1.35rem !important;
  font-weight:850 !important;
  letter-spacing:-.018em !important;
  line-height:1.25 !important;
}
.session-showcase-v4 h3::before {display:none !important; content:"" !important;}

/* READING COLUMN ---------------------------------------------------------- */
.session-showcase-v4 .markdown-preview-sizer > p,
.session-showcase-v4 .markdown-preview-sizer > ul,
.session-showcase-v4 .markdown-preview-sizer > ol,
.session-showcase-v4 .markdown-preview-sizer > blockquote:not(:has(.callout)),
.session-showcase-v4 .el-p,
.session-showcase-v4 .el-ul,
.session-showcase-v4 .el-ol,
.session-showcase-v4 .el-blockquote:not(:has(.callout)) {
  width:100%;
  max-width:var(--s4-reading);
  margin-left:0 !important;
  margin-right:auto !important;
}

.session-showcase-v4 .markdown-preview-sizer > p:not(:has(.image-embed)),
.session-showcase-v4 .el-p:not(:has(.image-embed)) {
  color:var(--s4-copy) !important;
  font-size:1.045rem;
  line-height:1.72;
  margin-top:.72em !important;
  margin-bottom:.72em !important;
}

/* IMAGES ------------------------------------------------------------------ */
/* Same left edge as the prose, consistently wider to the right, with much
   more breathing room before and after each visual. */
.session-showcase-v4 .markdown-preview-sizer > p:has(.image-embed),
.session-showcase-v4 .el-p:has(.image-embed) {
  box-sizing:border-box;
  width:100% !important;
  max-width:var(--s4-wide) !important;
  margin:2.55rem 0 3.65rem !important;
  padding:6px !important;
  border:1px solid rgba(211,170,90,.25) !important;
  border-radius:11px !important;
  background:linear-gradient(145deg, rgba(211,170,90,.055), rgba(142,175,176,.035)) !important;
  box-shadow:
    0 24px 62px rgba(0,0,0,.27),
    inset 0 1px rgba(255,255,255,.02) !important;
}
.session-showcase-v4 .markdown-preview-sizer > p:has(.image-embed) .image-embed,
.session-showcase-v4 .el-p:has(.image-embed) .image-embed {
  display:block;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.session-showcase-v4 .markdown-preview-sizer > p:has(.image-embed) img,
.session-showcase-v4 .el-p:has(.image-embed) img {
  display:block;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:7px !important;
  box-shadow:none !important;
  object-fit:contain !important;
}

/* Extra air where a paragraph runs directly into an image in the markdown. */
.session-showcase-v4 .markdown-preview-sizer > p:not(:has(.image-embed)):has(+ p .image-embed),
.session-showcase-v4 .el-p:not(:has(.image-embed)):has(+ .el-p .image-embed) {
  margin-bottom:1.25rem !important;
}

/* CLOSING / THEORY PANELS ------------------------------------------------- */
.session-showcase-v4 .callout[data-callout="question"],
.session-showcase-v4 .callout[data-callout="success"] {
  margin-top:3.8rem !important;
}
.session-showcase-v4 .callout[data-callout="question"] {
  border-left:3px solid rgba(142,175,176,.55) !important;
}
.session-showcase-v4 .callout[data-callout="success"] {
  border-left:3px solid rgba(137,166,125,.7) !important;
  background:
    linear-gradient(145deg, rgba(137,166,125,.08), transparent 62%),
    rgba(18,32,38,.84) !important;
}

.session-showcase-v4 hr {
  width:100%;
  max-width:var(--s4-wide);
  height:1px !important;
  margin:3.2rem 0 !important;
  border:0 !important;
  background:linear-gradient(90deg, rgba(211,170,90,.46), rgba(142,175,176,.22), transparent) !important;
  opacity:1 !important;
}

@media (max-width: 900px) {
  .session-showcase-v4 {
    --s4-reading: 100%;
    --s4-wide: 100%;
    --s4-hero: 100%;
  }
  .session-showcase-v4 .markdown-preview-sizer,
  .session-showcase-v4 .markdown-rendered {
    margin-left:0 !important;
    padding-inline:.85rem !important;
  }
}

@media (max-width: 650px) {
  .session-showcase-v4 .callout[data-callout="sessionhero"] img {
    height:450px !important;
  }
  .session-showcase-v4 .callout[data-callout="sessionhero"] h1 {
    margin-top:-8rem !important;
    font-size:2.35rem !important;
  }
  .session-showcase-v4 .callout[data-callout="sessionhero"] .callout-content::after {
    bottom:1.35rem;
  }
  .session-showcase-v4 h2[data-heading^="ACT"] {
    margin-top:4.4rem !important;
    letter-spacing:.14em !important;
  }
  .session-showcase-v4 h3 {
    margin-top:2.55rem !important;
    font-size:1.22rem !important;
  }
  .session-showcase-v4 .markdown-preview-sizer > p:has(.image-embed),
  .session-showcase-v4 .el-p:has(.image-embed) {
    margin:2.1rem 0 3rem !important;
    padding:4px !important;
  }
}


/* ========================================================================== */
/* SESSION PUBLISH TEST V5 — editorial fantasy wiki                           */
/* Scoped to cssclasses: session-showcase-v5                                  */
/* Design system: warm graphite / parchment / antique gold.                   */
/* ========================================================================== */

body:has(.session-showcase-v5) {
  --v5-page: #171814;
  --v5-page-deep: #10110f;
  --v5-panel: #1d1e1a;
  --v5-panel-2: #22231e;
  --v5-ink: #ddd8ce;
  --v5-cream: #f0ebe0;
  --v5-muted: #aaa59a;
  --v5-gold: #c6a15b;
  --v5-gold-2: #dfbe79;
  --v5-sage: #aebda5;
  --v5-rule: rgba(198,161,91,.26);
  --v5-rule-soft: rgba(240,235,224,.09);
  background: var(--v5-page-deep) !important;
}

/* Session pages are long-form reading pages. Remove the redundant right rail. */
body:has(.session-showcase-v5) .site-body-right-column,
.published-container:has(.session-showcase-v5) .site-body-right-column {
  display: none !important;
}

body:has(.session-showcase-v5) .site-body-left-column {
  background:
    radial-gradient(circle at 35% 0%, rgba(198,161,91,.055), transparent 22rem),
    #10110f !important;
  border-right: 1px solid rgba(240,235,224,.08) !important;
}

body:has(.session-showcase-v5) .site-body-center-column,
.published-container:has(.session-showcase-v5) .site-body-center-column {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  background:
    radial-gradient(circle at 12% -4%, rgba(198,161,91,.085), transparent 30rem),
    radial-gradient(circle at 78% 8%, rgba(174,189,165,.035), transparent 32rem),
    linear-gradient(180deg, #1b1c18 0%, #171814 38rem, #151612 100%) !important;
}

body:has(.session-showcase-v5) .site-body-left-column-site-name {
  color: var(--v5-cream) !important;
  font-family: var(--font-interface-theme) !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
}
body:has(.session-showcase-v5) .site-body-left-column-site-name::after {
  background: linear-gradient(90deg, var(--v5-gold), rgba(198,161,91,.18)) !important;
}
body:has(.session-showcase-v5) .tree-item-self.mod-active,
body:has(.session-showcase-v5) .tree-item-self.is-active,
body:has(.session-showcase-v5) .tree-item-self[data-active="true"] {
  background: linear-gradient(90deg, rgba(198,161,91,.11), transparent 88%) !important;
  box-shadow: inset 2px 0 0 var(--v5-gold) !important;
}

.session-showcase-v5 {
  --v5-prose: 780px;
  --v5-media: 980px;
  --v5-hero: 1060px;
  color: var(--v5-ink) !important;
  font-family: var(--font-text-theme) !important;
}

/* Deliberately left-biased editorial layout. Text stays readable; media gets
   more room to the right, but all content shares one left edge. */
.session-showcase-v5 .markdown-preview-sizer,
.session-showcase-v5 .markdown-rendered {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 20px 48px 72px 12px !important;
}

.session-showcase-v5 .metadata-container,
.session-showcase-v5 .page-header { display:none !important; }

.session-showcase-v5 h1,
.session-showcase-v5 h2,
.session-showcase-v5 h3,
.session-showcase-v5 h4,
.session-showcase-v5 h5,
.session-showcase-v5 h6,
.session-showcase-v5 .callout-title {
  font-family: var(--font-interface-theme) !important;
}

.session-showcase-v5 a.internal-link {
  color: var(--v5-sage) !important;
  text-decoration-color: rgba(174,189,165,.28) !important;
  text-underline-offset: .16em;
  text-decoration-thickness: 1px;
}
.session-showcase-v5 a.internal-link:hover {
  color: #d4decf !important;
  text-decoration-color: var(--v5-gold) !important;
}

/* HERO -------------------------------------------------------------------- */
.session-showcase-v5 .callout[data-callout="sessionhero"] {
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:var(--v5-hero);
  margin:0 0 16px !important;
  padding:0 !important;
  border:1px solid rgba(198,161,91,.34) !important;
  border-radius:12px !important;
  background:#0f100e !important;
  box-shadow:0 20px 46px rgba(0,0,0,.28) !important;
}
.session-showcase-v5 .callout[data-callout="sessionhero"] > .callout-title {
  position:absolute;
  z-index:5;
  top:16px;
  left:18px;
  width:auto;
  padding:7px 11px;
  border:1px solid rgba(240,235,224,.17);
  border-radius:999px;
  background:rgba(12,13,11,.74);
  color:#eee9df;
  font-size:11px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.session-showcase-v5 .callout[data-callout="sessionhero"] .callout-icon {display:none !important;}
.session-showcase-v5 .callout[data-callout="sessionhero"] .callout-content {
  position:relative;
  padding:0 !important;
}
.session-showcase-v5 .callout[data-callout="sessionhero"] .callout-content::before {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 35%, rgba(13,14,12,.12) 54%, rgba(13,14,12,.96) 92%);
}
.session-showcase-v5 .callout[data-callout="sessionhero"] .image-embed,
.session-showcase-v5 .callout[data-callout="sessionhero"] .callout-content > p:first-child {
  display:block;
  width:100%;
  margin:0 !important;
}
.session-showcase-v5 .callout[data-callout="sessionhero"] img {
  display:block;
  width:100% !important;
  max-width:none !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:center 48%;
  filter:saturate(.9) contrast(1.035) brightness(.89);
}
.session-showcase-v5 .callout[data-callout="sessionhero"] h1,
.session-showcase-v5 .callout[data-callout="sessionhero"] .callout-content > p:not(:first-child) {
  position:relative;
  z-index:4;
  max-width:900px;
  margin-left:clamp(20px,4vw,44px) !important;
  margin-right:clamp(20px,4vw,44px) !important;
}
.session-showcase-v5 .callout[data-callout="sessionhero"] h1 {
  margin-top:-118px !important;
  margin-bottom:8px !important;
  padding:0 !important;
  border:0 !important;
  color:var(--v5-cream) !important;
  font-size:clamp(42px,5vw,68px) !important;
  font-weight:900 !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
  text-shadow:0 4px 24px rgba(0,0,0,.72);
}
.session-showcase-v5 .callout[data-callout="sessionhero"] .callout-content > p:nth-last-child(2) {
  margin-bottom:3px !important;
  color:var(--v5-gold-2);
  font-size:12px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.session-showcase-v5 .callout[data-callout="sessionhero"] .callout-content > p:last-child {
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-bottom:28px;
  color:#d6d1c6;
  font-size:15px;
}

/* SESSION NAV ------------------------------------------------------------- */
.session-showcase-v5 .callout[data-callout="sessionnav"] {
  width:100%;
  max-width:var(--v5-media);
  margin:0 0 24px !important;
  padding:10px 14px !important;
  border:1px solid var(--v5-rule-soft) !important;
  border-left:3px solid var(--v5-gold) !important;
  border-radius:7px !important;
  background:rgba(30,31,27,.72) !important;
  box-shadow:none !important;
}
.session-showcase-v5 .callout[data-callout="sessionnav"] .callout-icon {display:none !important;}
.session-showcase-v5 .callout[data-callout="sessionnav"] .callout-title {
  color:var(--v5-gold) !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
}
.session-showcase-v5 .callout[data-callout="sessionnav"] .callout-content {
  color:#cbc7bd !important;
  font-size:14px;
}
.session-showcase-v5 .callout[data-callout="sessionnav"] .callout-content p {margin:3px 0 0 !important;}

/* TLDR / MOMENTS / END PANELS -------------------------------------------- */
.session-showcase-v5 .callout[data-callout="abstract"],
.session-showcase-v5 .callout[data-callout="star"],
.session-showcase-v5 .callout[data-callout="success"],
.session-showcase-v5 .callout[data-callout="question"] {
  width:100%;
  max-width:var(--v5-media);
  margin:20px 0 32px !important;
  border:1px solid var(--v5-rule-soft) !important;
  border-radius:9px !important;
  background:rgba(30,31,27,.78) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.10) !important;
}
.session-showcase-v5 .callout[data-callout="abstract"] > .callout-title,
.session-showcase-v5 .callout[data-callout="star"] > .callout-title,
.session-showcase-v5 .callout[data-callout="success"] > .callout-title,
.session-showcase-v5 .callout[data-callout="question"] > .callout-title {
  padding:12px 16px 9px !important;
  border-bottom:1px solid var(--v5-rule-soft);
  color:var(--v5-cream) !important;
  font-size:15px !important;
  font-weight:850 !important;
}
.session-showcase-v5 .callout[data-callout="abstract"] .callout-content,
.session-showcase-v5 .callout[data-callout="star"] .callout-content,
.session-showcase-v5 .callout[data-callout="success"] .callout-content,
.session-showcase-v5 .callout[data-callout="question"] .callout-content {
  padding:4px 16px 14px !important;
}

/* Ordered summary: one vertical reading path, compact enough for a long list. */
.session-showcase-v5 .callout[data-callout="abstract"] ul {
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  counter-reset:v5-summary;
}
.session-showcase-v5 .callout[data-callout="abstract"] li {
  counter-increment:v5-summary;
  position:relative;
  margin:0 !important;
  padding:11px 8px 11px 43px !important;
  border-bottom:1px solid rgba(240,235,224,.065) !important;
  color:#d7d3c9 !important;
  line-height:1.52;
}
.session-showcase-v5 .callout[data-callout="abstract"] li:last-child {border-bottom:0 !important;}
.session-showcase-v5 .callout[data-callout="abstract"] li::before {
  content:counter(v5-summary, decimal-leading-zero);
  position:absolute;
  left:4px;
  top:12px;
  color:var(--v5-gold-2);
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
}

.session-showcase-v5 .callout[data-callout="star"] ul {
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.session-showcase-v5 .callout[data-callout="star"] li {
  position:relative;
  margin:0 !important;
  padding:10px 8px 10px 28px !important;
  border-bottom:1px solid rgba(240,235,224,.06) !important;
  color:#d7d3c9 !important;
  line-height:1.5;
}
.session-showcase-v5 .callout[data-callout="star"] li:last-child {border-bottom:0 !important;}
.session-showcase-v5 .callout[data-callout="star"] li::before {
  content:"✦";
  position:absolute;
  left:4px;
  top:10px;
  color:var(--v5-gold);
  font-size:12px;
}

/* ACT BREAKS: recognisable chapter markers without consuming half a screen. */
.session-showcase-v5 h2[data-heading^="ACT"] {
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:var(--v5-media);
  margin:48px 0 22px !important;
  padding:13px 18px 12px !important;
  border:0 !important;
  border-top:1px solid rgba(198,161,91,.38) !important;
  border-bottom:1px solid rgba(198,161,91,.26) !important;
  border-left:3px solid var(--v5-gold) !important;
  border-radius:0 !important;
  background:linear-gradient(90deg, rgba(198,161,91,.08), rgba(198,161,91,.015) 58%, transparent) !important;
  color:var(--v5-gold-2) !important;
  font-size:14px !important;
  font-weight:950 !important;
  letter-spacing:.18em !important;
  line-height:1.2 !important;
  text-transform:uppercase;
}
.session-showcase-v5 h2[data-heading^="ACT"]::after {
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:120px;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(174,189,165,.025));
  pointer-events:none;
}

/* SCENE HEADINGS: strong enough to scan, quiet enough not to become cards. */
.session-showcase-v5 h3 {
  width:100%;
  max-width:var(--v5-prose);
  margin:32px 0 11px !important;
  padding:2px 0 3px 12px !important;
  border:0 !important;
  border-left:3px solid rgba(198,161,91,.8) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--v5-cream) !important;
  font-size:23px !important;
  font-weight:850 !important;
  letter-spacing:-.018em !important;
  line-height:1.24 !important;
}
.session-showcase-v5 h3::before {display:none !important; content:"" !important;}

/* LONG-FORM PROSE --------------------------------------------------------- */
.session-showcase-v5 .markdown-preview-sizer > p,
.session-showcase-v5 .markdown-preview-sizer > ul,
.session-showcase-v5 .markdown-preview-sizer > ol,
.session-showcase-v5 .markdown-preview-sizer > blockquote:not(:has(.callout)),
.session-showcase-v5 .el-p,
.session-showcase-v5 .el-ul,
.session-showcase-v5 .el-ol,
.session-showcase-v5 .el-blockquote:not(:has(.callout)) {
  box-sizing:border-box;
  width:100%;
  max-width:var(--v5-prose);
  margin-left:0 !important;
  margin-right:auto !important;
}
.session-showcase-v5 .markdown-preview-sizer > p:not(:has(.image-embed)),
.session-showcase-v5 .el-p:not(:has(.image-embed)) {
  color:var(--v5-ink) !important;
  font-size:17px !important;
  line-height:1.62 !important;
  margin-top:9px !important;
  margin-bottom:9px !important;
}

/* SESSION IMAGERY --------------------------------------------------------- */
/* Every narrative image gets one exact frame size. Source images are all
   close to 16:9, so object-fit: cover only trims a few pixels where needed. */
.session-showcase-v5 .markdown-preview-sizer > p:has(.image-embed),
.session-showcase-v5 .markdown-preview-sizer > .el-p:has(.image-embed),
.session-showcase-v5 .markdown-preview-sizer > .el-embed:has(.image-embed),
.session-showcase-v5 .el-p:has(.image-embed) {
  box-sizing:border-box;
  width:100% !important;
  max-width:var(--v5-media) !important;
  margin:22px 0 28px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(198,161,91,.25) !important;
  border-radius:10px !important;
  background:#11120f !important;
  box-shadow:0 14px 32px rgba(0,0,0,.20) !important;
}
.session-showcase-v5 .markdown-preview-sizer > p:has(.image-embed) .image-embed,
.session-showcase-v5 .markdown-preview-sizer > .el-p:has(.image-embed) .image-embed,
.session-showcase-v5 .markdown-preview-sizer > .el-embed:has(.image-embed) .image-embed,
.session-showcase-v5 .el-p:has(.image-embed) .image-embed {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.session-showcase-v5 .markdown-preview-sizer > p:has(.image-embed) img,
.session-showcase-v5 .markdown-preview-sizer > .el-p:has(.image-embed) img,
.session-showcase-v5 .markdown-preview-sizer > .el-embed:has(.image-embed) img,
.session-showcase-v5 .el-p:has(.image-embed) img {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:center center;
  box-shadow:none !important;
}

/* End-state/theory panels get semantic accents but no giant top gap. */
.session-showcase-v5 .callout[data-callout="question"] {border-left:3px solid #8f9f98 !important;}
.session-showcase-v5 .callout[data-callout="success"] {
  border-left:3px solid #8fa477 !important;
  background:linear-gradient(90deg, rgba(143,164,119,.055), transparent 55%), rgba(30,31,27,.78) !important;
}

.session-showcase-v5 hr {
  width:100%;
  max-width:var(--v5-media);
  height:1px !important;
  margin:32px 0 !important;
  border:0 !important;
  background:linear-gradient(90deg, rgba(198,161,91,.4), rgba(240,235,224,.08), transparent) !important;
  opacity:1 !important;
}

@media (max-width:900px) {
  .session-showcase-v5 {--v5-prose:100%;--v5-media:100%;--v5-hero:100%;}
  .session-showcase-v5 .markdown-preview-sizer,
  .session-showcase-v5 .markdown-rendered {
    padding:14px 16px 56px !important;
  }
}
@media (max-width:650px) {
  .session-showcase-v5 .callout[data-callout="sessionhero"] h1 {
    margin-top:-88px !important;
    font-size:38px !important;
  }
  .session-showcase-v5 .callout[data-callout="sessionhero"] .callout-content > p:last-child {
    padding-bottom:20px;
  }
  .session-showcase-v5 h2[data-heading^="ACT"] {margin-top:38px !important;}
  .session-showcase-v5 h3 {margin-top:28px !important;font-size:21px !important;}
  .session-showcase-v5 .markdown-preview-sizer > p:has(.image-embed),
  .session-showcase-v5 .el-p:has(.image-embed) {margin:18px 0 22px !important;}
}

/* ========================================================================== */
/* SESSION PUBLISH TEST V6 — cinematic campaign journal                       */
/* Scoped to cssclasses: session-showcase-v6                                  */
/* Concept: midnight-sea editorial shell, act-colour storytelling, sticky     */
/* chapter rail, numbered scene system, consistent 16:9 media, restrained     */
/* texture and depth.                                                          */
/* ========================================================================== */

body:has(.session-showcase-v6) {
  --v6-shell: #071116;
  --v6-page: #0b171d;
  --v6-page-2: #0f1d23;
  --v6-panel: #132228;
  --v6-panel-2: #17282e;
  --v6-ink: #eee9df;
  --v6-ink-soft: #d0cbc2;
  --v6-muted: #929e9f;
  --v6-gold: #d3ad62;
  --v6-gold-bright: #e8c77f;
  --v6-sea: #76a9aa;
  --v6-rose: #b96f7a;
  --v6-rule: rgba(232,199,127,.18);
  --v6-rule-soft: rgba(238,233,223,.075);
  background: var(--v6-shell) !important;
}

body:has(.session-showcase-v6) .site-body-right-column,
.published-container:has(.session-showcase-v6) .site-body-right-column {
  display: none !important;
}

body:has(.session-showcase-v6) .site-body-left-column {
  background:
    radial-gradient(circle at 22% 0%, rgba(211,173,98,.075), transparent 21rem),
    linear-gradient(180deg, #071014 0%, #081216 100%) !important;
  border-right: 1px solid rgba(232,199,127,.12) !important;
}

body:has(.session-showcase-v6) .site-body-center-column,
.published-container:has(.session-showcase-v6) .site-body-center-column {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  background:
    radial-gradient(circle at 10% -2%, rgba(118,169,170,.105), transparent 29rem),
    radial-gradient(circle at 82% 7%, rgba(185,111,122,.055), transparent 34rem),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.012) 32px),
    linear-gradient(180deg, #0d1a20 0%, #0a151a 42rem, #081217 100%) !important;
}

body:has(.session-showcase-v6) .site-body-left-column-site-name {
  color: var(--v6-ink) !important;
  font-family: var(--font-interface-theme) !important;
  font-weight: 950 !important;
  letter-spacing: .15em !important;
}
body:has(.session-showcase-v6) .site-body-left-column-site-name::after {
  width: 4rem !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--v6-gold), var(--v6-rose), transparent) !important;
}
body:has(.session-showcase-v6) .tree-item-self.mod-active,
body:has(.session-showcase-v6) .tree-item-self.is-active,
body:has(.session-showcase-v6) .tree-item-self[data-active="true"] {
  background: linear-gradient(90deg, rgba(211,173,98,.12), rgba(118,169,170,.04), transparent 90%) !important;
  box-shadow: inset 2px 0 0 var(--v6-gold) !important;
}

.session-showcase-v6 {
  --v6-prose: 790px;
  --v6-media: 1020px;
  --v6-hero: 1080px;
  --v6-scene-accent: var(--v6-gold);
  color: var(--v6-ink) !important;
  font-family: var(--font-text-theme) !important;
}

/* Left-biased feature-page composition. */
.session-showcase-v6 .markdown-preview-sizer,
.session-showcase-v6 .markdown-rendered {
  position: relative;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1160px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 18px 50px 78px 8px !important;
  counter-reset: v6-scene;
}

/* Very subtle "chart paper" texture: visible in the empty margins, invisible
   under text. This is CSS-only, so there are no external assets to maintain. */
.session-showcase-v6 .markdown-preview-sizer::before,
.session-showcase-v6 .markdown-rendered::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    radial-gradient(circle at 12% 12%, rgba(232,199,127,.20) 0 1px, transparent 1.2px),
    radial-gradient(circle at 66% 42%, rgba(118,169,170,.16) 0 1px, transparent 1.2px);
  background-size: 44px 44px, 67px 67px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.65), transparent 72%);
}
.session-showcase-v6 .markdown-preview-sizer > *,
.session-showcase-v6 .markdown-rendered > * {
  position: relative;
  z-index: 1;
}

.session-showcase-v6 .metadata-container,
.session-showcase-v6 .page-header { display: none !important; }

.session-showcase-v6 h1,
.session-showcase-v6 h2,
.session-showcase-v6 h3,
.session-showcase-v6 h4,
.session-showcase-v6 h5,
.session-showcase-v6 h6,
.session-showcase-v6 .callout-title {
  font-family: var(--font-interface-theme) !important;
}

.session-showcase-v6 a.internal-link {
  color: #a7c3bd !important;
  text-decoration-color: rgba(167,195,189,.30) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: .17em;
}
.session-showcase-v6 a.internal-link:hover {
  color: #d7ebe5 !important;
  text-decoration-color: var(--v6-gold) !important;
}

/* HERO -------------------------------------------------------------------- */
.session-showcase-v6 .callout[data-callout="sessionhero"] {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: var(--v6-hero);
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 1px solid rgba(232,199,127,.32) !important;
  border-radius: 14px !important;
  background: #050b0e !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.38), 0 0 0 1px rgba(118,169,170,.045) !important;
}
.session-showcase-v6 .callout[data-callout="sessionhero"]::after {
  content: "09";
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: -26px;
  color: rgba(238,233,223,.075);
  font-size: clamp(110px, 15vw, 205px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
}
.session-showcase-v6 .callout[data-callout="sessionhero"] > .callout-title {
  position: absolute;
  z-index: 7;
  top: 16px;
  left: 18px;
  width: auto;
  padding: 7px 12px;
  border: 1px solid rgba(232,199,127,.22);
  border-radius: 999px;
  background: rgba(5,11,14,.68);
  color: #f3eee5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.session-showcase-v6 .callout[data-callout="sessionhero"] .callout-icon { display: none !important; }
.session-showcase-v6 .callout[data-callout="sessionhero"] .callout-content {
  position: relative;
  padding: 0 !important;
}
.session-showcase-v6 .callout[data-callout="sessionhero"] .callout-content::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,10,13,.12), transparent 58%),
    linear-gradient(180deg, transparent 30%, rgba(5,11,14,.15) 50%, rgba(5,11,14,.97) 94%);
}
.session-showcase-v6 .callout[data-callout="sessionhero"] .image-embed,
.session-showcase-v6 .callout[data-callout="sessionhero"] .callout-content > p:first-child {
  display: block;
  width: 100%;
  margin: 0 !important;
}
.session-showcase-v6 .callout[data-callout="sessionhero"] img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 16/9 !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center 48%;
  filter: saturate(.95) contrast(1.06) brightness(.88);
}
.session-showcase-v6 .callout[data-callout="sessionhero"] h1,
.session-showcase-v6 .callout[data-callout="sessionhero"] .callout-content > p:not(:first-child) {
  position: relative;
  z-index: 6;
  max-width: 850px;
  margin-left: clamp(22px,4.2vw,50px) !important;
  margin-right: clamp(22px,4.2vw,50px) !important;
}
.session-showcase-v6 .callout[data-callout="sessionhero"] h1 {
  margin-top: -126px !important;
  margin-bottom: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #f6f0e5 !important;
  font-size: clamp(44px,5.1vw,72px) !important;
  font-weight: 950 !important;
  line-height: .96 !important;
  letter-spacing: -.052em !important;
  text-shadow: 0 5px 28px rgba(0,0,0,.76);
}
.session-showcase-v6 .callout[data-callout="sessionhero"] .callout-content > p:nth-last-child(2) {
  margin-bottom: 3px !important;
  color: var(--v6-gold-bright);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.session-showcase-v6 .callout[data-callout="sessionhero"] .callout-content > p:last-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 27px;
  color: #d2d4cf;
  font-size: 14.5px;
}

/* STICKY SESSION / CHAPTER RAIL ------------------------------------------ */
.session-showcase-v6 .callout[data-callout="sessionnav"] {
  position: sticky;
  top: 8px;
  z-index: 30;
  width: 100%;
  max-width: var(--v6-media);
  margin: 0 0 20px !important;
  padding: 9px 13px 8px !important;
  border: 1px solid rgba(232,199,127,.18) !important;
  border-left: 3px solid var(--v6-gold) !important;
  border-radius: 8px !important;
  background: rgba(10,21,26,.88) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(15px) saturate(1.2);
}
.session-showcase-v6 .callout[data-callout="sessionnav"] .callout-icon { display: none !important; }
.session-showcase-v6 .callout[data-callout="sessionnav"] .callout-title {
  color: var(--v6-gold) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}
.session-showcase-v6 .callout[data-callout="sessionnav"] .callout-content {
  color: #c9cfcc !important;
  font-size: 13px;
  line-height: 1.45;
}
.session-showcase-v6 .callout[data-callout="sessionnav"] .callout-content p {
  margin: 2px 0 !important;
}
.session-showcase-v6 .callout[data-callout="sessionnav"] .callout-content p:nth-child(2) {
  margin-top: 5px !important;
  padding-top: 5px;
  border-top: 1px solid rgba(238,233,223,.06);
  color: var(--v6-muted) !important;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .03em;
}

/* SUMMARY / HIGHLIGHTS ---------------------------------------------------- */
.session-showcase-v6 .callout[data-callout="abstract"],
.session-showcase-v6 .callout[data-callout="star"] {
  width: 100%;
  max-width: var(--v6-media);
  margin: 18px 0 24px !important;
  border: 1px solid rgba(238,233,223,.085) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(118,169,170,.05), transparent 38%),
    rgba(17,34,40,.80) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
}
.session-showcase-v6 .callout[data-callout="abstract"] > .callout-title,
.session-showcase-v6 .callout[data-callout="star"] > .callout-title {
  position: relative;
  padding: 14px 17px 11px 17px !important;
  border-bottom: 1px solid rgba(238,233,223,.07);
  color: #f1ece2 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}
.session-showcase-v6 .callout[data-callout="abstract"] > .callout-title::before,
.session-showcase-v6 .callout[data-callout="star"] > .callout-title::before {
  display: block;
  margin-bottom: 3px;
  color: var(--v6-gold);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.session-showcase-v6 .callout[data-callout="abstract"] > .callout-title::before { content: "SESSION IN BRIEF"; }
.session-showcase-v6 .callout[data-callout="star"] > .callout-title::before { content: "HIGHLIGHTS"; }
.session-showcase-v6 .callout[data-callout="abstract"] .callout-content,
.session-showcase-v6 .callout[data-callout="star"] .callout-content {
  padding: 5px 16px 14px !important;
}

/* TL;DR as a compact event rail. */
.session-showcase-v6 .callout[data-callout="abstract"] ul {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: v6-summary;
}
.session-showcase-v6 .callout[data-callout="abstract"] li {
  counter-increment: v6-summary;
  position: relative;
  margin: 0 !important;
  padding: 10px 8px 10px 52px !important;
  border-bottom: 1px solid rgba(238,233,223,.055) !important;
  color: #d6d9d4 !important;
  line-height: 1.5;
}
.session-showcase-v6 .callout[data-callout="abstract"] li:last-child { border-bottom: 0 !important; }
.session-showcase-v6 .callout[data-callout="abstract"] li::before {
  content: counter(v6-summary, decimal-leading-zero);
  position: absolute;
  left: 4px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border: 1px solid rgba(211,173,98,.34);
  border-radius: 999px;
  background: rgba(7,17,22,.82);
  color: var(--v6-gold-bright);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
}
.session-showcase-v6 .callout[data-callout="abstract"] li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 34px;
  bottom: -1px;
  width: 1px;
  background: linear-gradient(180deg, rgba(211,173,98,.30), rgba(118,169,170,.10));
}

/* Memorable Moments: row-major cards. Visual variety without breaking order. */
.session-showcase-v6 .callout[data-callout="star"] ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px !important;
  margin: 0 !important;
  padding: 4px 0 1px !important;
  list-style: none !important;
}
.session-showcase-v6 .callout[data-callout="star"] li {
  position: relative;
  min-width: 0;
  margin: 0 !important;
  padding: 11px 12px 11px 14px !important;
  border: 1px solid rgba(238,233,223,.065) !important;
  border-radius: 8px !important;
  background: rgba(6,15,19,.38) !important;
  color: #d6d8d2 !important;
  line-height: 1.45;
}
.session-showcase-v6 .callout[data-callout="star"] li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--v6-gold), var(--v6-rose));
}

/* ACT BREAKS -------------------------------------------------------------- */
.session-showcase-v6 h2[data-heading^="ACT"] {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: var(--v6-media);
  min-height: 72px;
  margin: 38px 0 18px !important;
  padding: 17px 22px 15px 76px !important;
  border: 1px solid rgba(238,233,223,.07) !important;
  border-radius: 10px !important;
  background: linear-gradient(110deg, rgba(211,173,98,.09), rgba(17,34,40,.92) 45%, rgba(17,34,40,.72)) !important;
  color: var(--v6-gold-bright) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: .17em !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
  box-shadow: inset 3px 0 0 var(--v6-gold), 0 10px 24px rgba(0,0,0,.12);
}
.session-showcase-v6 h2[data-heading^="ACT"]::before {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-52%);
  color: rgba(238,233,223,.14);
  font-size: 44px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.07em;
}
.session-showcase-v6 h2[data-heading^="ACT I"]::before { content: "I"; }
.session-showcase-v6 h2[data-heading^="ACT II"]::before { content: "II"; }
.session-showcase-v6 h2[data-heading^="ACT III"]::before { content: "III"; }
.session-showcase-v6 h2[data-heading^="ACT I"] {
  --v6-act: var(--v6-gold);
  box-shadow: inset 3px 0 0 var(--v6-gold), 0 10px 24px rgba(0,0,0,.12);
}
.session-showcase-v6 h2[data-heading^="ACT II"] {
  color: #9fc7c6 !important;
  background: linear-gradient(110deg, rgba(118,169,170,.10), rgba(17,34,40,.92) 45%, rgba(17,34,40,.72)) !important;
  box-shadow: inset 3px 0 0 var(--v6-sea), 0 10px 24px rgba(0,0,0,.12);
}
.session-showcase-v6 h2[data-heading^="ACT III"] {
  color: #d9939c !important;
  background: linear-gradient(110deg, rgba(185,111,122,.11), rgba(17,34,40,.92) 45%, rgba(17,34,40,.72)) !important;
  box-shadow: inset 3px 0 0 var(--v6-rose), 0 10px 24px rgba(0,0,0,.12);
}

/* Every scene receives an automatic global scene number. The accent changes
   after each act marker via subsequent-sibling cascade. */
.session-showcase-v6 h3 {
  counter-increment: v6-scene;
  --v6-scene-accent: var(--v6-gold);
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--v6-prose);
  margin: 25px 0 9px !important;
  padding: 3px 0 7px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(238,233,223,.07) !important;
  background: transparent !important;
  color: #f0ece4 !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  letter-spacing: -.018em !important;
  line-height: 1.22 !important;
}
.session-showcase-v6 h3::before {
  content: counter(v6-scene, decimal-leading-zero) !important;
  display: grid !important;
  place-items: center;
  width: 34px;
  height: 25px;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--v6-scene-accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--v6-scene-accent) 8%, transparent);
  color: var(--v6-scene-accent) !important;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .06em;
  vertical-align: 0;
}
.session-showcase-v6 h2[data-heading^="ACT I"] ~ h3 { --v6-scene-accent: var(--v6-gold); }
.session-showcase-v6 h2[data-heading^="ACT II"] ~ h3 { --v6-scene-accent: var(--v6-sea); }
.session-showcase-v6 h2[data-heading^="ACT III"] ~ h3 { --v6-scene-accent: var(--v6-rose); }

/* LONG-FORM PROSE --------------------------------------------------------- */
.session-showcase-v6 .markdown-preview-sizer > p,
.session-showcase-v6 .markdown-preview-sizer > ul,
.session-showcase-v6 .markdown-preview-sizer > ol,
.session-showcase-v6 .markdown-preview-sizer > blockquote:not(:has(.callout)),
.session-showcase-v6 .el-p,
.session-showcase-v6 .el-ul,
.session-showcase-v6 .el-ol,
.session-showcase-v6 .el-blockquote:not(:has(.callout)) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--v6-prose);
  margin-left: 0 !important;
  margin-right: auto !important;
}
.session-showcase-v6 .markdown-preview-sizer > p:not(:has(.image-embed)),
.session-showcase-v6 .el-p:not(:has(.image-embed)) {
  color: var(--v6-ink-soft) !important;
  font-size: 17px !important;
  line-height: 1.61 !important;
  margin-top: 7px !important;
  margin-bottom: 7px !important;
}

/* MEDIA ------------------------------------------------------------------- */
/* All story images use the same requested embed width in Markdown AND the
   same CSS frame. Accent follows the current act. */
.session-showcase-v6 .markdown-preview-sizer > p:has(.image-embed),
.session-showcase-v6 .markdown-preview-sizer > .el-p:has(.image-embed),
.session-showcase-v6 .markdown-preview-sizer > .el-embed:has(.image-embed),
.session-showcase-v6 .el-p:has(.image-embed) {
  --v6-media-accent: var(--v6-gold);
  position: relative;
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--v6-media) !important;
  aspect-ratio: 16/9 !important;
  margin: 18px 0 23px !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--v6-media-accent) 34%, transparent) !important;
  border-radius: 11px !important;
  background: rgba(5,11,14,.90) !important;
  box-shadow: 0 15px 34px rgba(0,0,0,.25) !important;
}
.session-showcase-v6 h2[data-heading^="ACT I"] ~ p:has(.image-embed),
.session-showcase-v6 h2[data-heading^="ACT I"] ~ .el-p:has(.image-embed) { --v6-media-accent: var(--v6-gold); }
.session-showcase-v6 h2[data-heading^="ACT II"] ~ p:has(.image-embed),
.session-showcase-v6 h2[data-heading^="ACT II"] ~ .el-p:has(.image-embed) { --v6-media-accent: var(--v6-sea); }
.session-showcase-v6 h2[data-heading^="ACT III"] ~ p:has(.image-embed),
.session-showcase-v6 h2[data-heading^="ACT III"] ~ .el-p:has(.image-embed) { --v6-media-accent: var(--v6-rose); }
.session-showcase-v6 .markdown-preview-sizer > p:has(.image-embed)::before,
.session-showcase-v6 .el-p:has(.image-embed)::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 13px;
  top: 13px;
  width: 26px;
  height: 26px;
  border-left: 2px solid var(--v6-media-accent);
  border-top: 2px solid var(--v6-media-accent);
  opacity: .80;
  pointer-events: none;
}
.session-showcase-v6 .markdown-preview-sizer > p:has(.image-embed)::after,
.session-showcase-v6 .el-p:has(.image-embed)::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 13px;
  bottom: 13px;
  width: 26px;
  height: 26px;
  border-right: 2px solid var(--v6-media-accent);
  border-bottom: 2px solid var(--v6-media-accent);
  opacity: .70;
  pointer-events: none;
}
.session-showcase-v6 .markdown-preview-sizer > p:has(.image-embed) .image-embed,
.session-showcase-v6 .markdown-preview-sizer > .el-p:has(.image-embed) .image-embed,
.session-showcase-v6 .markdown-preview-sizer > .el-embed:has(.image-embed) .image-embed,
.session-showcase-v6 .el-p:has(.image-embed) .image-embed {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 7px !important;
}
.session-showcase-v6 .markdown-preview-sizer > p:has(.image-embed) img,
.session-showcase-v6 .markdown-preview-sizer > .el-p:has(.image-embed) img,
.session-showcase-v6 .markdown-preview-sizer > .el-embed:has(.image-embed) img,
.session-showcase-v6 .el-p:has(.image-embed) img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  aspect-ratio: 16/9 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  object-fit: cover !important;
  object-position: center center;
  box-shadow: none !important;
}

/* END STATE / THEORY ------------------------------------------------------ */
.session-showcase-v6 .callout[data-callout="success"],
.session-showcase-v6 .callout[data-callout="question"] {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: var(--v6-media);
  margin: 20px 0 22px !important;
  border: 1px solid rgba(238,233,223,.08) !important;
  border-radius: 11px !important;
  background: rgba(17,34,40,.82) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
}
.session-showcase-v6 .callout[data-callout="success"] {
  border-left: 3px solid var(--v6-rose) !important;
  background: linear-gradient(100deg, rgba(185,111,122,.09), transparent 46%), rgba(17,34,40,.84) !important;
}
.session-showcase-v6 .callout[data-callout="success"]::after {
  content: "TO BE CONTINUED";
  position: absolute;
  right: 14px;
  bottom: -5px;
  color: rgba(238,233,223,.035);
  font-size: 34px;
  font-weight: 950;
  letter-spacing: .02em;
  pointer-events: none;
}
.session-showcase-v6 .callout[data-callout="question"] {
  border-left: 3px solid var(--v6-sea) !important;
}
.session-showcase-v6 .callout[data-callout="success"] > .callout-title,
.session-showcase-v6 .callout[data-callout="question"] > .callout-title {
  padding: 12px 15px 8px !important;
  border-bottom: 1px solid rgba(238,233,223,.06);
  color: #eee9df !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
.session-showcase-v6 .callout[data-callout="success"] .callout-content,
.session-showcase-v6 .callout[data-callout="question"] .callout-content {
  padding: 4px 15px 13px !important;
}

.session-showcase-v6 hr {
  width: 100%;
  max-width: var(--v6-media);
  height: 1px !important;
  margin: 26px 0 !important;
  border: 0 !important;
  background: linear-gradient(90deg, rgba(211,173,98,.48), rgba(118,169,170,.20), rgba(185,111,122,.14), transparent) !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .session-showcase-v6 { --v6-prose: 100%; --v6-media: 100%; --v6-hero: 100%; }
  .session-showcase-v6 .markdown-preview-sizer,
  .session-showcase-v6 .markdown-rendered {
    padding: 12px 14px 58px !important;
  }
  .session-showcase-v6 .callout[data-callout="star"] ul { grid-template-columns: 1fr; }
  .session-showcase-v6 .callout[data-callout="sessionnav"] { top: 4px; }
}

@media (max-width: 650px) {
  .session-showcase-v6 .callout[data-callout="sessionhero"] h1 {
    margin-top: -91px !important;
    font-size: 39px !important;
  }
  .session-showcase-v6 .callout[data-callout="sessionhero"]::after {
    font-size: 108px;
    right: 13px;
    bottom: -9px;
  }
  .session-showcase-v6 h2[data-heading^="ACT"] {
    min-height: 62px;
    margin-top: 31px !important;
    padding: 14px 15px 13px 62px !important;
    font-size: 12px !important;
  }
  .session-showcase-v6 h2[data-heading^="ACT"]::before {
    left: 13px;
    font-size: 35px;
  }
  .session-showcase-v6 h3 {
    grid-template-columns: 34px minmax(0,1fr);
    gap: 9px;
    margin-top: 22px !important;
    font-size: 19px !important;
  }
  .session-showcase-v6 h3::before { width: 30px; }
  .session-showcase-v6 .markdown-preview-sizer > p:has(.image-embed),
  .session-showcase-v6 .el-p:has(.image-embed) { margin: 15px 0 19px !important; }
}


/* ========================================================================== */
/* SESSION PUBLISH TEST V7 — centred editorial composition                     */
/* Adds to V6; scoped by additional cssclass: session-showcase-v7              */
/* ========================================================================== */

/* Centre the designed page inside the usable Publish column. This moves the
   composition away from the hard-left V6 treatment without centring the copy. */
.session-showcase-v7 .markdown-preview-sizer,
.session-showcase-v7 .markdown-rendered {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 34px !important;
  padding-right: 34px !important;
}

/* Hero and wide editorial components sit on the central visual axis. */
.session-showcase-v7 .callout[data-callout="sessionhero"] {
  margin-left: auto !important;
  margin-right: auto !important;
}
.session-showcase-v7 .callout[data-callout="sessionnav"],
.session-showcase-v7 .callout[data-callout="abstract"],
.session-showcase-v7 .callout[data-callout="star"],
.session-showcase-v7 h2[data-heading^="ACT"],
.session-showcase-v7 .callout[data-callout="success"],
.session-showcase-v7 .callout[data-callout="question"],
.session-showcase-v7 hr {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The reading column is centred as a block, while all actual text remains
   conventionally left aligned. This gives the page balance without making it
   look like a centred invitation/menu. */
.session-showcase-v7 .markdown-preview-sizer > p,
.session-showcase-v7 .markdown-preview-sizer > ul,
.session-showcase-v7 .markdown-preview-sizer > ol,
.session-showcase-v7 .markdown-preview-sizer > blockquote:not(:has(.callout)),
.session-showcase-v7 .el-p,
.session-showcase-v7 .el-ul,
.session-showcase-v7 .el-ol,
.session-showcase-v7 .el-blockquote:not(:has(.callout)),
.session-showcase-v7 h3 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Narrative media is centred independently at the wider visual width. */
.session-showcase-v7 .markdown-preview-sizer > p:has(.image-embed),
.session-showcase-v7 .markdown-preview-sizer > .el-p:has(.image-embed),
.session-showcase-v7 .markdown-preview-sizer > .el-embed:has(.image-embed),
.session-showcase-v7 .el-p:has(.image-embed) {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  .session-showcase-v7 .markdown-preview-sizer,
  .session-showcase-v7 .markdown-rendered {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ========================================================================== */
/* SESSION PUBLISH TEST V8 — editorial refinement + responsive repair         */
/* Adds to V6/V7; scoped by additional cssclass: session-showcase-v8          */
/* Goals:                                                                     */
/* - Fix linked H3 headings at browser zoom / narrower viewports               */
/* - Align prose and story imagery to one deliberate reading rail              */
/* - Keep wide hero/summary areas for hierarchy, not arbitrary media bleed     */
/* - Add high-value editorial flourishes: gutter scene markers, pull quotes,   */
/*   chapter metadata, progress indicator and a true page footer               */
/* ========================================================================== */

.session-showcase-v8 {
  --v8-prose: 860px;
  --v8-media: 860px;
  --v8-wide: 1040px;
  --v8-hero: 1100px;
}

/* A slightly tighter, balanced canvas. */
.session-showcase-v8 .markdown-preview-sizer,
.session-showcase-v8 .markdown-rendered {
  max-width: 1180px !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* Hero keeps its cinematic scale. */
.session-showcase-v8 .callout[data-callout="sessionhero"] {
  max-width: var(--v8-hero) !important;
}

/* Summary / wayfinding elements are allowed to be wider than reading copy. */
.session-showcase-v8 .callout[data-callout="sessionnav"],
.session-showcase-v8 .callout[data-callout="abstract"],
.session-showcase-v8 .callout[data-callout="star"],
.session-showcase-v8 h2[data-heading^="ACT"],
.session-showcase-v8 .callout[data-callout="sessionfooter"] {
  width: 100% !important;
  max-width: var(--v8-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The actual reading rail: prose, scene headings and normal story imagery all
   share the same width. This removes the accidental "big image / small copy"
   look while leaving the hero and summary dashboard intentionally wider. */
.session-showcase-v8 .markdown-preview-sizer > p,
.session-showcase-v8 .markdown-preview-sizer > ul,
.session-showcase-v8 .markdown-preview-sizer > ol,
.session-showcase-v8 .markdown-preview-sizer > blockquote:not(:has(.callout)),
.session-showcase-v8 .el-p,
.session-showcase-v8 .el-ul,
.session-showcase-v8 .el-ol,
.session-showcase-v8 .el-blockquote:not(:has(.callout)),
.session-showcase-v8 h3,
.session-showcase-v8 hr {
  width: 100% !important;
  max-width: var(--v8-prose) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.session-showcase-v8 .markdown-preview-sizer > p:not(:has(.image-embed)),
.session-showcase-v8 .el-p:not(:has(.image-embed)) {
  font-size: 17.5px !important;
  line-height: 1.64 !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* -------------------------------------------------------------------------- */
/* Scene headings — V7's grid split plain text and linked text into separate   */
/* grid items. At zoom, the link could fall into the 40px number column and    */
/* wrap one word per line. V8 uses normal inline heading flow and floats the   */
/* number into a dedicated gutter instead.                                    */
/* -------------------------------------------------------------------------- */
.session-showcase-v8 h3 {
  counter-increment: v6-scene;
  --v6-scene-accent: var(--v6-gold);
  display: block !important;
  position: relative !important;
  box-sizing: border-box;
  min-width: 0 !important;
  margin-top: 27px !important;
  margin-bottom: 11px !important;
  padding: 4px 0 9px !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(238,233,223,.075) !important;
  font-size: 21px !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.session-showcase-v8 h3::before {
  content: counter(v6-scene, decimal-leading-zero) !important;
  position: absolute !important;
  left: -52px !important;
  top: 2px !important;
  display: grid !important;
  place-items: center;
  width: 36px !important;
  height: 27px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--v6-scene-accent) 52%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--v6-scene-accent) 9%, #081217) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  color: var(--v6-scene-accent) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
}
.session-showcase-v8 h3 a,
.session-showcase-v8 h3 a.internal-link {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Normal story media uses the exact reading width. Consistent 16:9 crop stays,
   but there is no arbitrary 25% bleed beyond the text anymore. */
.session-showcase-v8 .markdown-preview-sizer > p:has(.image-embed),
.session-showcase-v8 .markdown-preview-sizer > .el-p:has(.image-embed),
.session-showcase-v8 .markdown-preview-sizer > .el-embed:has(.image-embed),
.session-showcase-v8 .el-p:has(.image-embed) {
  width: 100% !important;
  max-width: var(--v8-media) !important;
  margin: 20px auto 24px !important;
  border-radius: 10px !important;
  box-shadow: 0 13px 30px rgba(0,0,0,.22) !important;
}

/* Chapter slates get a small second line of context without making the bars
   taller. Useful at a glance, but intentionally quieter than the Act title. */
.session-showcase-v8 h2[data-heading^="ACT"] {
  min-height: 66px !important;
  margin-top: 42px !important;
  margin-bottom: 20px !important;
  padding-top: 15px !important;
  padding-bottom: 14px !important;
}
.session-showcase-v8 h2[data-heading^="ACT"]::after {
  position: absolute;
  right: 19px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(238,233,223,.42);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.session-showcase-v8 h2[data-heading^="ACT I"]::after { content: "BERRAN · FINAL LOADING"; }
.session-showcase-v8 h2[data-heading^="ACT II"]::after { content: "AT SEA · FIRST VOYAGE"; }
.session-showcase-v8 h2[data-heading^="ACT III"]::after { content: "STORM · SECOND EVENING"; }

/* One editorial drop-cap at the start of each Act. It creates chapter identity
   without turning every scene into a gimmick. */
.session-showcase-v8 h2[data-heading^="ACT"] + h3 + p::first-letter,
.session-showcase-v8 h2[data-heading^="ACT"] + .el-h3 + .el-p p::first-letter {
  float: left;
  margin: .08em .10em 0 0;
  color: var(--v6-gold-bright);
  font-size: 3.0em;
  font-weight: 950;
  line-height: .82;
}
.session-showcase-v8 h2[data-heading^="ACT II"] + h3 + p::first-letter,
.session-showcase-v8 h2[data-heading^="ACT II"] + .el-h3 + .el-p p::first-letter { color: #9fc7c6; }
.session-showcase-v8 h2[data-heading^="ACT III"] + h3 + p::first-letter,
.session-showcase-v8 h2[data-heading^="ACT III"] + .el-h3 + .el-p p::first-letter { color: #d9939c; }

/* -------------------------------------------------------------------------- */
/* Pull quotes: only two in the whole article. Large enough to act as true     */
/* editorial landmarks, sparse enough that they retain impact.                */
/* -------------------------------------------------------------------------- */
.session-showcase-v8 .callout[data-callout="pullquote"] {
  position: relative;
  width: 100%;
  max-width: var(--v8-prose);
  margin: 28px auto 30px !important;
  padding: 19px 24px 20px 28px !important;
  overflow: hidden;
  border: 0 !important;
  border-left: 3px solid var(--v6-gold) !important;
  border-radius: 0 10px 10px 0 !important;
  background:
    linear-gradient(100deg, rgba(211,173,98,.105), rgba(118,169,170,.025) 54%, transparent),
    rgba(12,27,33,.62) !important;
  box-shadow: none !important;
}
.session-showcase-v8 .callout[data-callout="pullquote"]::after {
  content: "“";
  position: absolute;
  right: 18px;
  top: -17px;
  color: rgba(232,199,127,.09);
  font-size: 108px;
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.session-showcase-v8 .callout[data-callout="pullquote"] .callout-icon { display: none !important; }
.session-showcase-v8 .callout[data-callout="pullquote"] .callout-title {
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: var(--v6-gold) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase;
}
.session-showcase-v8 .callout[data-callout="pullquote"] .callout-content {
  position: relative;
  z-index: 1;
  padding: 0 !important;
  color: #f2eee7 !important;
  font-size: clamp(22px,2vw,29px) !important;
  font-weight: 780 !important;
  line-height: 1.28 !important;
  letter-spacing: -.025em;
}
.session-showcase-v8 .callout[data-callout="pullquote"] .callout-content p { margin: 0 !important; }

/* End-state panels belong to the reading rail rather than becoming giant
   dashboard slabs. */
.session-showcase-v8 .callout[data-callout="success"],
.session-showcase-v8 .callout[data-callout="question"] {
  max-width: var(--v8-prose) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* A real editorial footer instead of repeating the compact top nav. */
.session-showcase-v8 .callout[data-callout="sessionfooter"] {
  margin-top: 34px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  border: 1px solid rgba(238,233,223,.08) !important;
  border-top: 2px solid rgba(211,173,98,.55) !important;
  border-radius: 12px !important;
  background: linear-gradient(120deg, rgba(211,173,98,.055), rgba(118,169,170,.025) 50%, rgba(185,111,122,.035)), rgba(12,27,33,.72) !important;
  box-shadow: 0 15px 34px rgba(0,0,0,.16) !important;
}
.session-showcase-v8 .callout[data-callout="sessionfooter"] .callout-icon { display: none !important; }
.session-showcase-v8 .callout[data-callout="sessionfooter"] .callout-title {
  padding: 13px 16px 10px !important;
  border-bottom: 1px solid rgba(238,233,223,.07);
  color: var(--v6-gold) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase;
}
.session-showcase-v8 .callout[data-callout="sessionfooter"] .callout-content {
  padding: 12px !important;
}
.session-showcase-v8 .callout[data-callout="sessionfooter"] ul {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.session-showcase-v8 .callout[data-callout="sessionfooter"] li {
  min-width: 0;
  margin: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(238,233,223,.065) !important;
  border-radius: 8px !important;
  background: rgba(5,13,17,.42) !important;
  color: var(--v6-muted) !important;
  font-size: 11px;
  line-height: 1.45;
}
.session-showcase-v8 .callout[data-callout="sessionfooter"] li strong {
  display: block;
  margin-bottom: 4px;
  color: rgba(238,233,223,.62);
  font-size: 9px;
  letter-spacing: .11em;
}
.session-showcase-v8 .callout[data-callout="sessionfooter"] li a {
  color: #e7e4dc !important;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none !important;
}
.session-showcase-v8 .callout[data-callout="sessionfooter"] li:hover {
  border-color: rgba(211,173,98,.24) !important;
  background: rgba(211,173,98,.05) !important;
}

/* Progressive enhancement: modern browsers get a thin reading-progress line.
   Unsupported browsers simply ignore it; no JS and no custom domain required. */
@supports (animation-timeline: scroll()) {
  .published-container:has(.session-showcase-v8)::after {
    content: "";
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--v6-gold), var(--v6-sea), var(--v6-rose));
    box-shadow: 0 0 12px rgba(211,173,98,.22);
    animation: v8-reading-progress linear both;
    animation-timeline: scroll(root block);
    pointer-events: none;
  }
  @keyframes v8-reading-progress { to { transform: scaleX(1); } }
}

/* Responsive / browser-zoom repair. Browser zoom effectively reduces the CSS
   viewport, so this intermediate breakpoint matters just as much as mobile. */
@media (max-width: 1180px) {
  .session-showcase-v8 {
    --v8-prose: min(820px, calc(100vw - 390px));
    --v8-media: var(--v8-prose);
    --v8-wide: min(940px, calc(100vw - 370px));
    --v8-hero: var(--v8-wide);
  }
  .session-showcase-v8 h3 {
    padding-left: 48px !important;
  }
  .session-showcase-v8 h3::before {
    left: 0 !important;
  }
  .session-showcase-v8 h2[data-heading^="ACT"]::after {
    display: none;
  }
}

@media (max-width: 900px) {
  .session-showcase-v8 {
    --v8-prose: 100%;
    --v8-media: 100%;
    --v8-wide: 100%;
    --v8-hero: 100%;
  }
  .session-showcase-v8 .markdown-preview-sizer,
  .session-showcase-v8 .markdown-rendered {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .session-showcase-v8 .callout[data-callout="sessionfooter"] ul {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================================== */
/* TARIN PUBLISH JS V1 / SESSION TEST V9                                      */
/* Custom-domain progressive enhancements. Scoped to session-showcase-v9.     */
/* ========================================================================== */

.session-showcase-v9 {
  --tarin-gold: #d8b268;
  --tarin-gold-bright: #efcd83;
  --tarin-sea: #79adb0;
  --tarin-rose: #c67a87;
  --tarin-panel: rgba(9, 22, 28, .86);
  --tarin-panel-deep: rgba(5, 14, 18, .94);
  --tarin-line: rgba(236, 231, 221, .10);
  --tarin-active: var(--tarin-gold);
}
.session-showcase-v9[data-tarin-act="2"] { --tarin-active: var(--tarin-sea); }
.session-showcase-v9[data-tarin-act="3"] { --tarin-active: var(--tarin-rose); }

/* V8 had a CSS-only page-top progress line. V9 moves progress into the live HUD. */
.published-container:has(.session-showcase-v9)::after { display: none !important; }

/* The fallback Markdown nav remains if JS fails. Hide it only after JS is live. */
.session-showcase-v9.tarin-js-ready .callout[data-callout="sessionnav"] { display: none !important; }

/* Sticky session HUD ------------------------------------------------------ */
.session-showcase-v9 .tarin-session-hud {
  position: sticky;
  z-index: 65;
  top: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--v8-wide, 1040px);
  margin: 12px auto 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tarin-active) 22%, rgba(238,233,223,.08));
  border-radius: 12px;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--tarin-active) 8%, transparent), transparent 42%),
    rgba(7,18,23,.93);
  box-shadow: 0 12px 35px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.025) inset;
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  transition: border-color .24s ease, background .24s ease, box-shadow .24s ease;
}
.session-showcase-v9 .tarin-hud-progress {
  height: 2px;
  background: rgba(255,255,255,.035);
  overflow: hidden;
}
.session-showcase-v9 .tarin-hud-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--tarin-active), color-mix(in srgb, var(--tarin-active) 52%, #fff));
  box-shadow: 0 0 12px color-mix(in srgb, var(--tarin-active) 42%, transparent);
  transition: transform .08s linear, background .24s ease;
}
.session-showcase-v9 .tarin-hud-main {
  display: grid;
  grid-template-columns: auto minmax(250px,1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 10px 9px 12px;
}
.session-showcase-v9 .tarin-hud-left,
.session-showcase-v9 .tarin-hud-jumps,
.session-showcase-v9 .tarin-hud-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.session-showcase-v9 .tarin-hud-link,
.session-showcase-v9 .tarin-hud-jump,
.session-showcase-v9 .tarin-hud-action {
  box-sizing: border-box;
  min-height: 34px;
  border: 1px solid rgba(238,233,223,.075) !important;
  border-radius: 8px;
  background: rgba(3,10,13,.42) !important;
  color: rgba(238,233,223,.70) !important;
  text-decoration: none !important;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .035em;
  cursor: pointer;
  transition: transform .16s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.session-showcase-v9 .tarin-hud-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}
.session-showcase-v9 .tarin-hud-link:hover,
.session-showcase-v9 .tarin-hud-jump:hover,
.session-showcase-v9 .tarin-hud-action:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--tarin-active) 40%, transparent) !important;
  background: color-mix(in srgb, var(--tarin-active) 7%, rgba(3,10,13,.54)) !important;
  color: #f1eee7 !important;
}
.session-showcase-v9 .tarin-hud-current {
  min-width: 0;
  padding: 4px 9px 4px 12px;
  border: 0;
  border-left: 2px solid var(--tarin-active);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color .24s ease;
}
.session-showcase-v9 .tarin-hud-current span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-showcase-v9 .tarin-hud-eyebrow {
  margin-bottom: 2px;
  color: var(--tarin-active);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .19em;
  transition: color .24s ease;
}
.session-showcase-v9 .tarin-hud-act {
  color: #f0ece4;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .055em;
}
.session-showcase-v9 .tarin-hud-scene {
  margin-top: 1px;
  color: rgba(238,233,223,.54);
  font-size: 10px;
  font-weight: 650;
}
.session-showcase-v9 .tarin-hud-jump {
  display: grid;
  place-items: center;
  min-width: 34px;
  padding: 0 8px;
}
.session-showcase-v9 .tarin-hud-jump.is-active {
  border-color: color-mix(in srgb, var(--tarin-active) 58%, transparent) !important;
  background: color-mix(in srgb, var(--tarin-active) 13%, rgba(3,10,13,.7)) !important;
  color: var(--tarin-active) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tarin-active) 8%, transparent) inset;
}
.session-showcase-v9 .tarin-hud-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}
.session-showcase-v9 .tarin-hud-action svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.session-showcase-v9 .tarin-hud-action[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--tarin-active) 55%, transparent) !important;
  color: var(--tarin-active) !important;
  background: color-mix(in srgb, var(--tarin-active) 12%, rgba(3,10,13,.70)) !important;
}
.session-showcase-v9 .tarin-hud-resume {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 7px 13px;
  border-top: 1px solid rgba(238,233,223,.055);
  background: color-mix(in srgb, var(--tarin-active) 5%, rgba(3,11,15,.66));
  color: rgba(238,233,223,.58);
  font-size: 10px;
}
.session-showcase-v9 .tarin-hud-resume[hidden] { display: none !important; }
.session-showcase-v9 .tarin-hud-resume-button,
.session-showcase-v9 .tarin-hud-resume-dismiss {
  border: 0;
  background: transparent;
  color: var(--tarin-active);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.session-showcase-v9 .tarin-hud-resume-dismiss { color: rgba(238,233,223,.40); font-size: 18px; line-height: 1; }

/* Current scene gets a quiet live marker — useful, not nightclub lighting. */
.session-showcase-v9 h2[data-heading^="ACT"],
.session-showcase-v9 h3 { scroll-margin-top: 108px; }
.session-showcase-v9 h3.tarin-section-active {
  border-bottom-color: color-mix(in srgb, var(--tarin-active) 24%, rgba(238,233,223,.07)) !important;
}
.session-showcase-v9 h3.tarin-section-active::before {
  border-color: color-mix(in srgb, var(--tarin-active) 72%, transparent) !important;
  background: color-mix(in srgb, var(--tarin-active) 13%, #071116) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--tarin-active) 12%, transparent);
}

/* Clickable story art ----------------------------------------------------- */
.session-showcase-v9 img.tarin-lightboxable {
  cursor: zoom-in !important;
  transition: filter .20s ease, transform .20s ease;
}
.session-showcase-v9 p:has(img.tarin-lightboxable):hover img,
.session-showcase-v9 .el-p:has(img.tarin-lightboxable):hover img {
  filter: brightness(1.045) saturate(1.025);
  transform: scale(1.003);
}
.session-showcase-v9 p:has(img.tarin-lightboxable)::after,
.session-showcase-v9 .el-p:has(img.tarin-lightboxable)::after {
  content: "EXPAND";
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 3;
  padding: 5px 7px 4px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 5px;
  background: rgba(3,9,12,.66);
  color: rgba(255,255,255,.70);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .15em;
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.session-showcase-v9 p:has(img.tarin-lightboxable):hover::after,
.session-showcase-v9 .el-p:has(img.tarin-lightboxable):hover::after { opacity: 1; transform: none; }

/* Native <dialog> lightbox ------------------------------------------------ */
html.tarin-lightbox-open { overflow: hidden; }
.tarin-lightbox {
  width: min(95vw, 1500px);
  max-width: none;
  height: min(94vh, 980px);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(235,228,214,.13);
  border-radius: 14px;
  background: #061015;
  color: #ede9e0;
  box-shadow: 0 30px 90px rgba(0,0,0,.70);
}
.tarin-lightbox::backdrop {
  background: rgba(0, 5, 8, .88);
  backdrop-filter: blur(13px) saturate(.72);
  -webkit-backdrop-filter: blur(13px) saturate(.72);
}
.tarin-lightbox-shell { display: grid; grid-template-rows: auto minmax(0,1fr) auto; height: 100%; }
.tarin-lightbox-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid rgba(235,228,214,.075);
  background: linear-gradient(90deg, rgba(216,178,104,.055), transparent 42%);
}
.tarin-lightbox-kicker { display:block; color:#cfae6d; font-size:7px; font-weight:950; letter-spacing:.19em; }
.tarin-lightbox-caption { margin-top:2px; color:#eee9df; font-size:13px; font-weight:850; }
.tarin-lightbox-count { color:rgba(238,233,223,.46); font-size:10px; font-weight:800; letter-spacing:.08em; }
.tarin-lightbox-close {
  display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(238,233,223,.10); border-radius:8px;
  background:rgba(255,255,255,.025); color:rgba(238,233,223,.72); font-size:24px; line-height:1; cursor:pointer;
}
.tarin-lightbox-stage { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center; min-height:0; padding:12px; }
.tarin-lightbox-stage figure { display:grid; grid-template-rows:minmax(0,1fr) auto; place-items:center; min-width:0; min-height:0; width:100%; height:100%; margin:0; }
.tarin-lightbox-stage img {
  display:block; max-width:100%; max-height:calc(94vh - 135px); width:auto; height:auto; object-fit:contain; border-radius:7px;
  box-shadow:0 18px 60px rgba(0,0,0,.50); user-select:none; -webkit-user-drag:none;
}
.tarin-lightbox-stage figcaption { min-height:18px; margin-top:8px; color:rgba(238,233,223,.42); font-size:10px; text-align:center; }
.tarin-lightbox-nav {
  display:grid; place-items:center; width:42px; height:58px; border:1px solid rgba(238,233,223,.09); border-radius:9px;
  background:rgba(1,7,10,.48); color:rgba(238,233,223,.68); font-size:36px; line-height:1; cursor:pointer; transition:.16s ease;
}
.tarin-lightbox-nav:hover { border-color:rgba(216,178,104,.34); color:#efcd83; background:rgba(216,178,104,.055); }
.tarin-lightbox-footer { display:flex; justify-content:center; gap:18px; padding:8px 12px 10px; border-top:1px solid rgba(235,228,214,.055); color:rgba(238,233,223,.28); font-size:8px; letter-spacing:.08em; text-transform:uppercase; }

/* Cinematic / focus reading mode ----------------------------------------- */
@media (min-width: 901px) {
  body.tarin-cinematic .site-body-left-column,
  body.tarin-cinematic .site-body-right-column {
    display: none !important;
  }
  body.tarin-cinematic .site-body-center-column,
  body.tarin-cinematic .publish-renderer,
  body.tarin-cinematic .render-container,
  body.tarin-cinematic .render-container-inner {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }
  body.tarin-cinematic .session-showcase-v9 {
    --v8-prose: 900px;
    --v8-media: 900px;
    --v8-wide: 1120px;
    --v8-hero: 1240px;
  }
  body.tarin-cinematic .session-showcase-v9 .markdown-preview-sizer,
  body.tarin-cinematic .session-showcase-v9 .markdown-rendered { max-width: 1320px !important; }
  body.tarin-cinematic .session-showcase-v9 .callout[data-callout="sessionhero"] {
    box-shadow: 0 24px 70px rgba(0,0,0,.36) !important;
  }
}

/* Restrained one-time reveals -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .session-showcase-v9 .tarin-reveal {
    opacity: 0;
    transform: translateY(10px);
    filter: saturate(.92);
  }
  .session-showcase-v9 .tarin-reveal-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity .42s cubic-bezier(.2,.75,.2,1), transform .42s cubic-bezier(.2,.75,.2,1), filter .42s ease;
  }
}

/* Responsive HUD + lightbox ---------------------------------------------- */
@media (max-width: 1180px) {
  .session-showcase-v9 .tarin-hud-main { grid-template-columns: auto minmax(180px,1fr) auto; }
  .session-showcase-v9 .tarin-hud-left .tarin-hud-archive { display:none; }
  .session-showcase-v9 .tarin-hud-actions { grid-column: 3; }
  .session-showcase-v9 .tarin-hud-jumps { grid-row: 2; grid-column: 1 / -1; justify-content: center; padding-top: 2px; }
}
@media (max-width: 900px) {
  .session-showcase-v9 .tarin-session-hud { top: 4px; margin-top: 8px; border-radius: 10px; }
  .session-showcase-v9 .tarin-hud-main { grid-template-columns: auto minmax(0,1fr) auto; gap:7px; min-height:54px; padding:7px 7px 8px; }
  .session-showcase-v9 .tarin-hud-prev span:last-child { display:none; }
  .session-showcase-v9 .tarin-hud-link { min-width:34px; justify-content:center; padding:0 8px; }
  .session-showcase-v9 .tarin-hud-act { font-size:10px; }
  .session-showcase-v9 .tarin-hud-scene { font-size:9px; }
  .session-showcase-v9 .tarin-hud-actions span { display:none; }
  .session-showcase-v9 .tarin-hud-action { width:34px; justify-content:center; padding:0; }
  .session-showcase-v9 .tarin-hud-jumps { display:none; }
  .session-showcase-v9 .tarin-hud-resume { grid-template-columns:minmax(0,1fr) auto auto; }
  .tarin-lightbox { width: 98vw; height: 94vh; border-radius:10px; }
  .tarin-lightbox-stage { grid-template-columns:38px minmax(0,1fr) 38px; padding:7px; }
  .tarin-lightbox-nav { width:34px; height:52px; font-size:30px; }
  .tarin-lightbox-caption { font-size:11px; }
}
@media (max-width: 560px) {
  .tarin-lightbox-header { grid-template-columns:minmax(0,1fr) auto; }
  .tarin-lightbox-count { display:none; }
  .tarin-lightbox-stage { grid-template-columns:1fr; }
  .tarin-lightbox-nav { position:absolute; z-index:2; top:50%; transform:translateY(-50%); background:rgba(1,7,10,.66); }
  .tarin-lightbox-prev { left:7px; }
  .tarin-lightbox-next { right:7px; }
  .tarin-lightbox-footer { display:none; }
}

/* ========================================================================== */
/* TARIN PUBLISH V10 — Director's Cut / Theme Lab / Collapsible Acts          */
/* Scoped to the V10 test note.                                               */
/* ========================================================================== */

body.tarin-session-enhanced {
  --t-bg: #071318;
  --t-bg-deep: #040b0e;
  --t-surface: #0c1b21;
  --t-surface-2: #10232a;
  --t-text: #eee9df;
  --t-muted: #9ba8a4;
  --t-a1: #d9b66c;
  --t-a2: #73aeb0;
  --t-a3: #c57786;
  --t-link: #9dbab4;
  --t-border: rgba(231,225,211,.11);
  --t-ambient: var(--t-a1);
  background: var(--t-bg-deep) !important;
}
body.tarin-session-enhanced[data-tarin-theme="midnight-gold"] {
  --t-bg: #0a0e13;
  --t-bg-deep: #05070a;
  --t-surface: #11171e;
  --t-surface-2: #171f28;
  --t-text: #f0ece3;
  --t-muted: #9ba5b2;
  --t-a1: #d5ae5f;
  --t-a2: #91a3b8;
  --t-a3: #b77969;
  --t-link: #b8c4ce;
  --t-border: rgba(227,218,198,.105);
}
body.tarin-session-enhanced[data-tarin-theme="ember-iron"] {
  --t-bg: #130e0c;
  --t-bg-deep: #090605;
  --t-surface: #1b1310;
  --t-surface-2: #241815;
  --t-text: #f0e8dc;
  --t-muted: #ad9b90;
  --t-a1: #d8aa5b;
  --t-a2: #bc7251;
  --t-a3: #9e5158;
  --t-link: #c79e81;
  --t-border: rgba(229,210,188,.11);
}
body.tarin-session-enhanced[data-tarin-theme="arcane-night"] {
  --t-bg: #100d1a;
  --t-bg-deep: #07050d;
  --t-surface: #181326;
  --t-surface-2: #211a31;
  --t-text: #efebf4;
  --t-muted: #a59cae;
  --t-a1: #c8a45d;
  --t-a2: #5caabd;
  --t-a3: #8a74ce;
  --t-link: #aaa1d9;
  --t-border: rgba(228,219,239,.11);
}
body.tarin-session-enhanced[data-tarin-act="1"] { --t-ambient: var(--t-a1); }
body.tarin-session-enhanced[data-tarin-act="2"] { --t-ambient: var(--t-a2); }
body.tarin-session-enhanced[data-tarin-act="3"] { --t-ambient: var(--t-a3); }

body.tarin-session-enhanced .published-container {
  background:
    radial-gradient(900px 520px at 70% 2%, color-mix(in srgb, var(--t-ambient) 11%, transparent), transparent 66%),
    radial-gradient(680px 480px at 28% 75%, color-mix(in srgb, var(--t-a2) 4%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--t-bg) 96%, #000), var(--t-bg-deep)) !important;
  transition: background .65s ease;
}
body.tarin-session-enhanced .site-body-left-column {
  background: color-mix(in srgb, var(--t-bg-deep) 95%, var(--t-ambient) 5%) !important;
  border-right-color: color-mix(in srgb, var(--t-ambient) 12%, var(--t-border)) !important;
  transition: background .55s ease, border-color .55s ease;
}
body.tarin-session-enhanced .site-body-left-column .site-body-left-column-site-name,
body.tarin-session-enhanced .site-body-left-column .site-body-left-column-site-logo { color: var(--t-text) !important; }
body.tarin-session-enhanced .site-body-left-column a:hover { color: color-mix(in srgb, var(--t-ambient) 72%, var(--t-text)) !important; }

.session-showcase-v10 {
  --tarin-gold: var(--t-a1);
  --tarin-gold-bright: color-mix(in srgb, var(--t-a1) 76%, #fff);
  --tarin-sea: var(--t-a2);
  --tarin-rose: var(--t-a3);
  --tarin-panel: color-mix(in srgb, var(--t-surface) 88%, transparent);
  --tarin-panel-deep: color-mix(in srgb, var(--t-bg-deep) 94%, transparent);
  --tarin-line: var(--t-border);
  --tarin-active: var(--t-a1);
  color: var(--t-text) !important;
}
.session-showcase-v10[data-tarin-act="2"] { --tarin-active: var(--t-a2); }
.session-showcase-v10[data-tarin-act="3"] { --tarin-active: var(--t-a3); }
.session-showcase-v10 a { color: var(--t-link) !important; }
.session-showcase-v10 a:hover { color: color-mix(in srgb, var(--tarin-active) 70%, var(--t-text)) !important; }

/* Hero gains a tiny campaign-colour lift without becoming a neon billboard. */
.session-showcase-v10 .callout[data-callout="sessionhero"] {
  border-color: color-mix(in srgb, var(--t-a1) 25%, var(--t-border)) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,.30), 0 0 0 1px color-mix(in srgb, var(--t-a1) 5%, transparent) inset !important;
}
.session-showcase-v10 .callout[data-callout="sessionhero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--t-a2) 6%, transparent), transparent 36%, color-mix(in srgb, var(--t-a3) 6%, transparent));
  mix-blend-mode: screen;
}

/* HUD redesign: current scene is readable; act links are real anchors. */
.session-showcase-v10 .tarin-session-hud {
  overflow: visible;
  border-color: color-mix(in srgb, var(--tarin-active) 27%, var(--t-border)) !important;
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--tarin-active) 8%, transparent), transparent 44%),
    color-mix(in srgb, var(--t-bg-deep) 91%, transparent) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.025) inset;
  transition: border-color .4s ease, background .4s ease;
}
.session-showcase-v10 .tarin-hud-main {
  grid-template-columns: auto minmax(260px, 1fr) auto auto !important;
  gap: 9px !important;
}
.session-showcase-v10 .tarin-hud-current {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 2px !important;
  min-width: 0;
  padding: 5px 12px 5px 14px !important;
  border-left: 2px solid var(--tarin-active) !important;
  border-radius: 5px !important;
  text-align: left;
  cursor: pointer;
}
.session-showcase-v10 .tarin-hud-context {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.session-showcase-v10 .tarin-hud-context strong {
  flex: 0 0 auto;
  color: var(--tarin-active);
  font-size: 7px;
  line-height: 1;
  letter-spacing: .17em;
  font-weight: 950;
}
.session-showcase-v10 .tarin-hud-act {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(242,237,227,.72) !important;
  font-size: 8px !important;
  letter-spacing: .075em !important;
  font-weight: 850 !important;
}
.session-showcase-v10 .tarin-hud-scene {
  color: var(--t-text) !important;
  font-size: 10px !important;
  line-height: 1.15;
  font-weight: 900 !important;
}
.session-showcase-v10 .tarin-hud-jump {
  display: grid !important;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 9px !important;
  text-decoration: none !important;
}
.session-showcase-v10 .tarin-hud-roman { font-size: 10px; font-weight: 950; }
.session-showcase-v10 .tarin-hud-jump-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  font-size: 7px;
  letter-spacing: .08em;
  font-weight: 900;
  transition: max-width .22s ease, opacity .22s ease;
}
.session-showcase-v10 .tarin-hud-jump:hover .tarin-hud-jump-label,
.session-showcase-v10 .tarin-hud-jump.is-active .tarin-hud-jump-label { max-width: 86px; opacity: .72; }
.session-showcase-v10 .tarin-hud-actions { gap: 5px !important; }
.session-showcase-v10 .tarin-hud-action[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--tarin-active) 52%, transparent) !important;
  color: var(--tarin-active) !important;
  background: color-mix(in srgb, var(--tarin-active) 12%, var(--t-bg-deep)) !important;
}

/* Scene index + theme studio panels. */
.session-showcase-v10 .tarin-hud-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: min(68vh, 650px);
  overflow: auto;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--tarin-active) 28%, var(--t-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--t-bg-deep) 96%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.50);
  backdrop-filter: blur(20px) saturate(.88);
  -webkit-backdrop-filter: blur(20px) saturate(.88);
}
.session-showcase-v10 .tarin-hud-panel[hidden] { display: none !important; }
.session-showcase-v10 .tarin-panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid var(--t-border);
}
.session-showcase-v10 .tarin-panel-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--tarin-active);
  font-size: 7px;
  letter-spacing: .18em;
  font-weight: 950;
}
.session-showcase-v10 .tarin-panel-heading strong { color: var(--t-text); font-size: 14px; }
.session-showcase-v10 .tarin-panel-note { color: var(--t-muted); font-size: 8px; }
.session-showcase-v10 .tarin-panel-tools { display:flex; gap:6px; }
.session-showcase-v10 .tarin-panel-tools button {
  border: 1px solid var(--t-border);
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(255,255,255,.025);
  color: var(--t-muted);
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}
.session-showcase-v10 .tarin-panel-tools button:hover { color: var(--tarin-active); border-color: color-mix(in srgb, var(--tarin-active) 34%, transparent); }
.session-showcase-v10 .tarin-scene-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  padding-top: 12px;
}
.session-showcase-v10 .tarin-scene-group {
  border: 1px solid var(--t-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--t-surface) 65%, transparent);
  overflow: hidden;
}
.session-showcase-v10 .tarin-scene-group > header {
  display:flex;
  align-items:center;
  gap:8px;
  padding: 9px 10px;
  border-bottom:1px solid var(--t-border);
  background: color-mix(in srgb, var(--tarin-active) 5%, transparent);
}
.session-showcase-v10 .tarin-scene-group > header span { color: var(--tarin-active); font-size:9px; font-weight:950; }
.session-showcase-v10 .tarin-scene-group > header strong { color:var(--t-text); font-size:9px; letter-spacing:.06em; }
.session-showcase-v10 .tarin-scene-group > div { padding:5px; }
.session-showcase-v10 .tarin-scene-group a {
  display:grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap:7px;
  align-items:start;
  padding:7px 7px;
  border-radius:5px;
  text-decoration:none !important;
}
.session-showcase-v10 .tarin-scene-group a:hover { background: color-mix(in srgb, var(--tarin-active) 7%, transparent); }
.session-showcase-v10 .tarin-scene-group a span { color:var(--tarin-active); font-size:7px; font-weight:950; }
.session-showcase-v10 .tarin-scene-group a strong { color:rgba(241,236,226,.73); font-size:9px; font-weight:750; line-height:1.25; }

.session-showcase-v10 .tarin-theme-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  padding-top:12px;
}
.session-showcase-v10 .tarin-theme-choice {
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:"swatches check" "name check";
  gap:8px 10px;
  min-width:0;
  padding:10px;
  border:1px solid var(--t-border);
  border-radius:8px;
  background:rgba(255,255,255,.02);
  color:var(--t-text);
  text-align:left;
  cursor:pointer;
}
.session-showcase-v10 .tarin-theme-choice:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--tarin-active) 38%,transparent); }
.session-showcase-v10 .tarin-theme-choice.is-selected { border-color:color-mix(in srgb,var(--tarin-active) 62%,transparent); background:color-mix(in srgb,var(--tarin-active) 7%,transparent); }
.session-showcase-v10 .tarin-theme-swatches { grid-area:swatches; display:flex; height:18px; border-radius:4px; overflow:hidden; border:1px solid rgba(255,255,255,.07); }
.session-showcase-v10 .tarin-theme-swatches i { flex:1; background:var(--swatch); }
.session-showcase-v10 .tarin-theme-name { grid-area:name; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.session-showcase-v10 .tarin-theme-name strong { font-size:9px; }
.session-showcase-v10 .tarin-theme-name small { color:var(--t-muted); font-size:7px; }
.session-showcase-v10 .tarin-theme-check { grid-area:check; align-self:center; color:var(--tarin-active); opacity:0; font-weight:950; }
.session-showcase-v10 .tarin-theme-choice.is-selected .tarin-theme-check { opacity:1; }

/* Collapsible acts. Content is still plain HTML/Markdown when JS is absent. */
.session-showcase-v10 h2[data-heading^="ACT"] { position:relative !important; padding-right:96px !important; }
.session-showcase-v10 .tarin-act-collapse {
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:28px;
  padding:0 8px;
  border:1px solid color-mix(in srgb,var(--tarin-active) 22%,var(--t-border));
  border-radius:6px;
  background:rgba(0,0,0,.15);
  color:rgba(241,236,226,.52);
  font-size:7px;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
}
.session-showcase-v10 .tarin-act-collapse:hover { color:var(--tarin-active); border-color:color-mix(in srgb,var(--tarin-active) 45%,transparent); }
.session-showcase-v10 .tarin-act-collapse span:first-child { font-size:13px; line-height:1; }
.session-showcase-v10 .tarin-act-is-hidden { display:none !important; }
.session-showcase-v10 .tarin-act-collapsed-note {
  display:block;
  width:min(var(--v8-prose,860px),100%);
  margin:9px auto 30px !important;
  padding:9px 12px;
  border:1px dashed color-mix(in srgb,var(--tarin-active) 26%,var(--t-border));
  border-radius:7px;
  background:color-mix(in srgb,var(--tarin-active) 4%,transparent);
  color:var(--t-muted);
  font-size:9px;
  text-align:left;
  cursor:pointer;
}
.session-showcase-v10 .tarin-act-collapsed-note[hidden] { display:none !important; }
.session-showcase-v10 .tarin-act-collapsed-note:hover { color:var(--tarin-active); }

/* New This Session: linked chips + spellcraft record cards. */
.session-showcase-v10 .callout[data-callout="newthissession"] {
  max-width: var(--v8-wide,1040px) !important;
  margin: 42px auto 24px !important;
  padding: 0 !important;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--tarin-active) 24%,var(--t-border)) !important;
  border-radius:10px !important;
  background:
    linear-gradient(120deg,color-mix(in srgb,var(--tarin-active) 7%,transparent),transparent 38%),
    color-mix(in srgb,var(--t-surface) 82%,transparent) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.13);
}
.session-showcase-v10 .callout[data-callout="newthissession"] > .callout-title {
  padding:13px 16px !important;
  border-bottom:1px solid var(--t-border);
  background:rgba(0,0,0,.10);
  color:var(--t-text) !important;
  font-size:13px !important;
  font-weight:950 !important;
  letter-spacing:.03em;
}
.session-showcase-v10 .callout[data-callout="newthissession"] .callout-icon { color:var(--tarin-active) !important; }
.session-showcase-v10 .callout[data-callout="newthissession"] .callout-content { padding:14px 16px 16px !important; }
.session-showcase-v10 .callout[data-callout="newthissession"] .tarin-chip-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 12px !important;
}
.session-showcase-v10 .callout[data-callout="newthissession"] .tarin-chip-row > strong {
  flex:0 0 100%;
  color:var(--tarin-active);
  font-size:7px;
  letter-spacing:.16em;
  font-weight:950;
}
.session-showcase-v10 .callout[data-callout="newthissession"] .tarin-chip-row a {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 8px;
  border:1px solid var(--t-border);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:color-mix(in srgb,var(--t-link) 78%,var(--t-text)) !important;
  text-decoration:none !important;
  font-size:9px;
  font-weight:800;
}
.session-showcase-v10 .callout[data-callout="newthissession"] .tarin-chip-row a:hover { border-color:color-mix(in srgb,var(--tarin-active) 38%,transparent); color:var(--tarin-active) !important; }
.session-showcase-v10 .callout[data-callout="newthissession"] .tarin-spellcraft-label {
  margin:14px 0 7px !important;
  color:var(--tarin-active);
  font-size:7px;
  letter-spacing:.16em;
  font-weight:950;
}
.session-showcase-v10 .callout[data-callout="newthissession"] ul {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.session-showcase-v10 .callout[data-callout="newthissession"] .tarin-spellcraft-card {
  position:relative;
  margin:0 !important;
  padding:10px 11px 11px !important;
  border:1px solid var(--t-border);
  border-top:2px solid color-mix(in srgb,var(--tarin-active) 56%,transparent);
  border-radius:7px;
  background:color-mix(in srgb,var(--t-bg-deep) 50%,transparent);
  color:rgba(240,235,225,.70);
  font-size:9px;
  line-height:1.45;
}
.session-showcase-v10 .callout[data-callout="newthissession"] .tarin-spellcraft-card strong { color:var(--t-text); }

/* Give end-state material its own quieter landing zone. */
.session-showcase-v10 .callout[data-callout="question"],
.session-showcase-v10 .callout[data-callout="success"] {
  background: color-mix(in srgb,var(--t-surface) 72%,transparent) !important;
  border-color: var(--t-border) !important;
}

/* Focus mode becomes genuinely cinematic rather than just wider. */
@media (min-width:901px) {
  body.tarin-cinematic .published-container {
    background:
      radial-gradient(1050px 680px at 50% 0%, color-mix(in srgb,var(--t-ambient) 14%,transparent), transparent 68%),
      var(--t-bg-deep) !important;
  }
  body.tarin-cinematic .session-showcase-v10 .tarin-session-hud { max-width:1180px !important; }
  body.tarin-cinematic .session-showcase-v10 .callout[data-callout="sessionhero"] { transform:translateZ(0); }
}

@media (max-width:1180px) {
  .session-showcase-v10 .tarin-hud-main { grid-template-columns:auto minmax(210px,1fr) auto !important; }
  .session-showcase-v10 .tarin-hud-actions { grid-column:3; }
  .session-showcase-v10 .tarin-hud-jumps { grid-row:2; grid-column:1 / -1; justify-content:center; }
  .session-showcase-v10 .tarin-hud-jump-label { max-width:82px; opacity:.58; }
  .session-showcase-v10 .tarin-scene-groups { grid-template-columns:1fr 1fr; }
  .session-showcase-v10 .tarin-theme-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .session-showcase-v10 .tarin-hud-main { grid-template-columns:auto minmax(0,1fr) auto !important; }
  .session-showcase-v10 .tarin-hud-jumps { display:flex !important; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  .session-showcase-v10 .tarin-hud-jumps::-webkit-scrollbar { display:none; }
  .session-showcase-v10 .tarin-hud-jump-label { display:none; }
  .session-showcase-v10 .tarin-hud-actions { grid-row:1; grid-column:3; }
  .session-showcase-v10 .tarin-hud-action span { display:none !important; }
  .session-showcase-v10 .tarin-hud-context strong { display:none; }
  .session-showcase-v10 .tarin-hud-panel { position:fixed; left:10px; right:10px; top:70px; width:auto; max-height:calc(100vh - 90px); }
  .session-showcase-v10 .tarin-scene-groups { grid-template-columns:1fr; }
  .session-showcase-v10 .callout[data-callout="newthissession"] ul { grid-template-columns:1fr; }
  .session-showcase-v10 .tarin-act-collapse span:last-child { display:none; }
  .session-showcase-v10 h2[data-heading^="ACT"] { padding-right:50px !important; }
}
@media (max-width:560px) {
  .session-showcase-v10 .tarin-theme-grid { grid-template-columns:1fr; }
  .session-showcase-v10 .tarin-panel-heading { align-items:flex-start; flex-direction:column; }
  .session-showcase-v10 .tarin-panel-tools { width:100%; }
  .session-showcase-v10 .tarin-panel-tools button { flex:1; }
}

/* ========================================================================== */
/* TARIN PUBLISH V11 — READER'S CUT                                            */
/* Native collapsible acts, off-canvas world navigation, full-width reader.    */
/* ========================================================================== */

body.tarin-v11-session {
  --v11-bg: #071419;
  --v11-bg-deep: #040b0e;
  --v11-panel: #0d1c22;
  --v11-panel-2: #11252c;
  --v11-text: #f1ece2;
  --v11-soft: #c9c6be;
  --v11-muted: #8f9d9b;
  --v11-gold: #d7b86b;
  --v11-sea: #72aeb0;
  --v11-rose: #c97c8b;
  --v11-link: #a8c7c0;
  --v11-line: rgba(238,233,223,.11);
  --v11-active: var(--v11-gold);
  background: var(--v11-bg-deep) !important;
}
body.tarin-v11-session[data-tarin-theme="midnight"] {
  --v11-bg:#0a0e13; --v11-bg-deep:#05070a; --v11-panel:#11171e; --v11-panel-2:#17202a;
  --v11-text:#f2eee6; --v11-soft:#c8c5bf; --v11-muted:#98a4b1; --v11-gold:#d0aa5d; --v11-sea:#aab8c5; --v11-rose:#9b7770; --v11-link:#c2ccd4;
}
body.tarin-v11-session[data-tarin-theme="ember"] {
  --v11-bg:#140e0c; --v11-bg-deep:#080504; --v11-panel:#1d1411; --v11-panel-2:#271a16;
  --v11-text:#f3e9dd; --v11-soft:#d1c2b6; --v11-muted:#aa958b; --v11-gold:#d49c55; --v11-sea:#b76a4e; --v11-rose:#98505a; --v11-link:#d0aa8c;
}
body.tarin-v11-session[data-tarin-theme="arcane"] {
  --v11-bg:#100d1b; --v11-bg-deep:#07050e; --v11-panel:#181326; --v11-panel-2:#211a32;
  --v11-text:#f2edf5; --v11-soft:#cbc5d1; --v11-muted:#a49bad; --v11-gold:#c7a45d; --v11-sea:#5ea9bd; --v11-rose:#8c75d0; --v11-link:#b7afe0;
}
body.tarin-v11-session[data-tarin-act="2"] { --v11-active: var(--v11-sea); }
body.tarin-v11-session[data-tarin-act="3"] { --v11-active: var(--v11-rose); }

body.tarin-v11-session .published-container {
  min-height:100vh;
  background:
    radial-gradient(900px 600px at 78% 8%, color-mix(in srgb, var(--v11-active) 9%, transparent), transparent 68%),
    radial-gradient(740px 520px at 18% 72%, color-mix(in srgb, var(--v11-sea) 4%, transparent), transparent 73%),
    linear-gradient(180deg, color-mix(in srgb, var(--v11-bg) 97%, #000), var(--v11-bg-deep)) !important;
  transition: background .55s ease;
}

/* Session pages become reader-first: the world tree is now an off-canvas drawer. */
@media (min-width: 901px) {
  body.tarin-v11-session .site-body-left-column {
    position: fixed !important;
    z-index: 500 !important;
    inset: 0 auto 0 0 !important;
    width: min(370px, 86vw) !important;
    max-width: none !important;
    transform: translateX(calc(-100% - 16px));
    transition: transform .26s cubic-bezier(.2,.75,.2,1), box-shadow .26s ease !important;
    background: color-mix(in srgb, var(--v11-bg-deep) 97%, var(--v11-active) 3%) !important;
    border-right: 1px solid color-mix(in srgb, var(--v11-active) 20%, transparent) !important;
    box-shadow: 20px 0 70px rgba(0,0,0,0);
  }
  body.tarin-v11-session.tarin-world-open .site-body-left-column {
    transform: translateX(0);
    box-shadow: 20px 0 70px rgba(0,0,0,.52);
  }
  body.tarin-v11-session .site-body-right-column { display:none !important; }
  body.tarin-v11-session .site-body-center-column,
  body.tarin-v11-session .publish-renderer,
  body.tarin-v11-session .render-container,
  body.tarin-v11-session .render-container-inner {
    width:100% !important;
    max-width:none !important;
    flex:1 1 100% !important;
    margin-left:0 !important;
  }
}
.tarin-world-backdrop {
  display:none;
  position:fixed;
  z-index:490;
  inset:0;
  border:0;
  background:rgba(2,7,9,.68);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  cursor:default;
}
body.tarin-world-open .tarin-world-backdrop { display:block; }

.session-showcase-v11 {
  --v8-prose: 900px;
  --v8-media: 900px;
  --v8-wide: 1120px;
  --v8-hero: 1260px;
  color:var(--v11-text) !important;
}
.session-showcase-v11 .markdown-preview-sizer,
.session-showcase-v11 .markdown-rendered {
  width:100% !important;
  max-width:1360px !important;
  margin-inline:auto !important;
  padding-left:clamp(18px,3.2vw,46px) !important;
  padding-right:clamp(18px,3.2vw,46px) !important;
}
.session-showcase-v11 a { color:var(--v11-link) !important; }
.session-showcase-v11 .callout[data-callout="sessionnav"] { display:none !important; }
.session-showcase-v11 .markdown-preview-sizer > p:not(:has(.image-embed)),
.session-showcase-v11 .el-p:not(:has(.image-embed)) {
  max-width:900px !important;
  font-size:18.5px !important;
  line-height:1.68 !important;
  margin-top:9px !important;
  margin-bottom:9px !important;
  color:var(--v11-text) !important;
}
.session-showcase-v11 h3 {
  max-width:900px !important;
  margin-top:32px !important;
  margin-bottom:13px !important;
  font-size:24px !important;
  line-height:1.25 !important;
}
.session-showcase-v11 h3::before {
  left:-58px !important;
  width:39px !important;
  height:29px !important;
  font-size:9.5px !important;
  border-color:color-mix(in srgb, var(--v11-active) 54%, transparent) !important;
  color:var(--v11-active) !important;
  background:color-mix(in srgb, var(--v11-active) 8%, var(--v11-bg-deep)) !important;
}
.session-showcase-v11 .markdown-preview-sizer > p:has(.image-embed),
.session-showcase-v11 .markdown-preview-sizer > .el-p:has(.image-embed),
.session-showcase-v11 .el-p:has(.image-embed) {
  width:100% !important;
  max-width:900px !important;
  margin:26px auto 30px !important;
  border:0 !important;
  border-radius:11px !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28) !important;
}
.session-showcase-v11 .markdown-preview-sizer > p:has(.image-embed) img,
.session-showcase-v11 .el-p:has(.image-embed) img {
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  border-radius:11px !important;
}
.session-showcase-v11 .callout[data-callout="sessionhero"] {
  max-width:1260px !important;
  border-color:color-mix(in srgb, var(--v11-gold) 32%, transparent) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.38) !important;
}

/* Reader bar: deliberately simpler than V10. */
.session-showcase-v11 .tarin-readerbar {
  position:sticky;
  z-index:180;
  top:8px;
  width:100%;
  max-width:1120px;
  margin:14px auto 24px;
  border:1px solid color-mix(in srgb, var(--v11-active) 26%, var(--v11-line));
  border-radius:14px;
  background:color-mix(in srgb, var(--v11-bg-deep) 91%, transparent);
  box-shadow:0 18px 50px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.035) inset;
  backdrop-filter:blur(18px) saturate(.9);
  -webkit-backdrop-filter:blur(18px) saturate(.9);
  overflow:visible;
  transition:border-color .35s ease, background .35s ease;
}
.tarin-readerbar-progress { height:2px; overflow:hidden; border-radius:14px 14px 0 0; background:rgba(255,255,255,.025); }
.tarin-readerbar-progress i { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,var(--v11-gold),var(--v11-sea),var(--v11-rose)); box-shadow:0 0 12px color-mix(in srgb,var(--v11-active) 35%,transparent); }
.tarin-readerbar-row {
  display:grid;
  grid-template-columns:auto minmax(240px,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:62px;
  padding:8px 10px;
}
.tarin-readerbar-left,.tarin-readerbar-right { display:flex; gap:7px; align-items:center; }
.tarin-reader-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:0 13px;
  border:1px solid var(--v11-line);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:var(--v11-soft);
  font-size:11px;
  font-weight:820;
  cursor:pointer;
  transition:.16s ease;
}
.tarin-reader-btn:hover,.tarin-reader-btn.is-open {
  border-color:color-mix(in srgb,var(--v11-active) 52%,transparent);
  background:color-mix(in srgb,var(--v11-active) 10%,transparent);
  color:var(--v11-text);
  transform:translateY(-1px);
}
.tarin-btn-icon { color:var(--v11-active); font-size:15px; }
.tarin-now-reading {
  min-width:0;
  padding:8px 15px 9px;
  border:0;
  border-left:2px solid var(--v11-active);
  border-radius:7px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--v11-active) 7%,transparent),transparent 65%);
  color:var(--v11-text);
  text-align:left;
  cursor:pointer;
}
.tarin-now-kicker { display:block; margin-bottom:3px; color:var(--v11-muted); font-size:8px; font-weight:900; letter-spacing:.15em; }
.tarin-now-kicker b { color:var(--v11-active); }
.tarin-now-reading strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.2; }
.tarin-act-segments { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 10px 9px; }
.tarin-act-segments a { display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; text-decoration:none !important; color:var(--v11-muted) !important; font-size:8px; font-weight:900; }
.tarin-act-segments a span { display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--v11-line); border-radius:999px; }
.tarin-act-segments a i { height:2px; border-radius:999px; background:rgba(255,255,255,.055); overflow:hidden; }
.tarin-act-segments a.is-active { color:var(--v11-active) !important; }
.tarin-act-segments a.is-active span { border-color:color-mix(in srgb,var(--v11-active) 55%,transparent); background:color-mix(in srgb,var(--v11-active) 10%,transparent); }
.tarin-act-segments a.is-active i { background:linear-gradient(90deg,var(--v11-active),color-mix(in srgb,var(--v11-active) 15%,transparent)); }

/* The three Acts are genuine HTML details elements, so collapse works even if
   our click-handler code does nothing. */
.session-showcase-v11 .tarin-act-details {
  width:100%;
  max-width:1120px;
  margin:38px auto 26px;
  border:1px solid color-mix(in srgb,var(--v11-active) 18%,var(--v11-line));
  border-left:3px solid var(--v11-active);
  border-radius:13px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--v11-active) 6%,transparent),transparent 38%),color-mix(in srgb,var(--v11-panel) 78%,transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.13);
  overflow:hidden;
}
.session-showcase-v11 .tarin-act-summary {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  min-height:76px;
  padding:10px 18px 10px 14px;
  list-style:none;
  cursor:pointer;
  user-select:none;
}
.session-showcase-v11 .tarin-act-summary::-webkit-details-marker { display:none; }
.tarin-act-roman { display:grid; place-items:center; width:38px; height:38px; border:1px solid color-mix(in srgb,var(--v11-active) 48%,transparent); border-radius:9px; color:var(--v11-active); font-size:16px; font-weight:950; }
.tarin-act-title { display:flex; flex-direction:column; min-width:0; }
.tarin-act-title small { color:var(--v11-active); font-size:8px; font-weight:950; letter-spacing:.18em; }
.tarin-act-title strong { margin-top:2px; color:var(--v11-text); font-size:18px; line-height:1.15; letter-spacing:.02em; }
.tarin-act-meta { color:var(--v11-muted); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.tarin-act-toggle { display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--v11-line); border-radius:8px; color:var(--v11-muted); font-size:9px; font-weight:850; }
.tarin-act-toggle b { color:var(--v11-active); font-size:14px; transition:transform .2s ease; }
.tarin-act-details[open] .closed-word { display:none; }
.tarin-act-details:not([open]) .open-word { display:none; }
.tarin-act-details:not([open]) .tarin-act-toggle b { transform:rotate(-90deg); }
.tarin-act-details:not([open]) { margin-bottom:16px; }
.tarin-act-body { padding:8px 0 24px; }
.tarin-act-body > *:first-child { margin-top:8px !important; }

/* Pop-over panels */
.tarin-reader-panel {
  position:absolute;
  z-index:220;
  top:calc(100% + 10px);
  left:0;
  right:0;
  width:100%;
  max-height:min(72vh,720px);
  overflow:auto;
  padding:18px;
  border:1px solid color-mix(in srgb,var(--v11-active) 24%,var(--v11-line));
  border-radius:14px;
  background:color-mix(in srgb,var(--v11-bg-deep) 97%,transparent);
  box-shadow:0 28px 80px rgba(0,0,0,.56);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.tarin-reader-panel[hidden] { display:none !important; }
.tarin-reader-panel > header { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:0 2px 14px; border-bottom:1px solid var(--v11-line); }
.tarin-reader-panel header small { display:block; color:var(--v11-active); font-size:8px; font-weight:950; letter-spacing:.18em; }
.tarin-reader-panel header strong { display:block; margin-top:3px; color:var(--v11-text); font-size:18px; }
.tarin-reader-panel header > span { color:var(--v11-muted); font-size:10px; }
.tarin-chapter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-top:14px; }
.tarin-chapter-grid section { min-width:0; padding:12px; border:1px solid var(--v11-line); border-radius:10px; background:rgba(255,255,255,.018); }
.tarin-chapter-grid h4 { display:flex; align-items:center; gap:8px; margin:0 0 10px; color:var(--v11-text); font-size:12px; }
.tarin-chapter-grid h4 > span { display:grid; place-items:center; width:25px; height:25px; border:1px solid color-mix(in srgb,var(--v11-active) 35%,var(--v11-line)); border-radius:999px; color:var(--v11-active); font-size:9px; }
.tarin-chapter-grid section > div { display:grid; gap:3px; }
.tarin-chapter-grid a { display:grid; grid-template-columns:28px minmax(0,1fr); gap:7px; align-items:start; padding:7px 8px; border-radius:7px; color:var(--v11-soft) !important; text-decoration:none !important; font-size:10px; line-height:1.25; }
.tarin-chapter-grid a small { color:var(--v11-muted); font-size:8px; padding-top:1px; }
.tarin-chapter-grid a:hover,.tarin-chapter-grid a.is-active { background:color-mix(in srgb,var(--v11-active) 9%,transparent); color:var(--v11-text) !important; }

.tarin-gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; padding-top:14px; }
.tarin-gallery-grid button { overflow:hidden; padding:0; border:1px solid var(--v11-line); border-radius:10px; background:rgba(255,255,255,.018); color:var(--v11-soft); text-align:left; cursor:pointer; }
.tarin-gallery-grid button:hover { border-color:color-mix(in srgb,var(--v11-active) 44%,transparent); transform:translateY(-2px); }
.tarin-gallery-grid img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.tarin-gallery-grid button > span { display:grid; grid-template-columns:auto 1fr; gap:7px; padding:8px 9px 10px; font-size:9.5px; line-height:1.25; }
.tarin-gallery-grid button small { color:var(--v11-active); font-size:8px; }

.tarin-mood-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding-top:14px; }
.tarin-mood-choice { display:grid; gap:6px; padding:11px; border:1px solid var(--v11-line); border-radius:10px; background:rgba(255,255,255,.018); color:var(--v11-soft); text-align:left; cursor:pointer; }
.tarin-mood-choice.is-active { border-color:color-mix(in srgb,var(--v11-active) 52%,transparent); background:color-mix(in srgb,var(--v11-active) 8%,transparent); }
.tarin-swatches { display:grid; grid-template-columns:repeat(4,1fr); height:12px; overflow:hidden; border-radius:4px; }
.tarin-swatches i { display:block; }
.tarin-mood-choice strong { color:var(--v11-text); font-size:12px; }
.tarin-mood-choice small { color:var(--v11-muted); font-size:9px; }

/* Quotes are intentionally larger than body copy: true editorial landmarks. */
.session-showcase-v11 .callout[data-callout="pullquote"] {
  max-width:980px !important;
  margin:34px auto 36px !important;
  padding:26px 34px 28px 38px !important;
  border-left:4px solid var(--v11-active) !important;
  background:linear-gradient(100deg,color-mix(in srgb,var(--v11-active) 10%,transparent),transparent 72%),color-mix(in srgb,var(--v11-panel) 70%,transparent) !important;
}
.session-showcase-v11 .callout[data-callout="pullquote"] .callout-content { font-size:clamp(27px,2.5vw,36px) !important; line-height:1.25 !important; }
.session-showcase-v11 .callout[data-callout="pullquote"] .callout-title { font-size:10px !important; color:var(--v11-active) !important; }

/* New This Session is now a substantial codex panel rather than micro text. */
.session-showcase-v11 .callout[data-callout="newthissession"] {
  max-width:1040px !important;
  margin:42px auto 30px !important;
  padding:0 !important;
  border:1px solid color-mix(in srgb,var(--v11-gold) 24%,var(--v11-line)) !important;
  border-top:3px solid var(--v11-gold) !important;
  border-radius:14px !important;
  background:linear-gradient(130deg,rgba(215,184,107,.055),rgba(114,174,176,.025) 56%,rgba(201,124,139,.03)),color-mix(in srgb,var(--v11-panel) 78%,transparent) !important;
  box-shadow:0 20px 54px rgba(0,0,0,.18) !important;
}
.session-showcase-v11 .callout[data-callout="newthissession"] > .callout-title { padding:18px 22px 14px !important; border-bottom:1px solid var(--v11-line); color:var(--v11-text) !important; font-size:17px !important; font-weight:900 !important; }
.session-showcase-v11 .callout[data-callout="newthissession"] .callout-content { padding:18px 22px 22px !important; }
.session-showcase-v11 .tarin-v11-chip-row { margin:0 0 17px !important; color:var(--v11-muted) !important; font-size:11px !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.session-showcase-v11 .tarin-v11-chip-row strong { display:block; margin-bottom:9px; color:var(--v11-gold); font-size:9px; letter-spacing:.18em; }
.session-showcase-v11 .tarin-v11-chip-row a { display:inline-flex; align-items:center; min-height:34px; margin:0 5px 5px 0; padding:0 12px; border:1px solid var(--v11-line); border-radius:999px; background:rgba(255,255,255,.025); color:var(--v11-text) !important; font-size:11px; font-weight:780; text-decoration:none !important; }
.session-showcase-v11 .tarin-v11-spell-label { margin:22px 0 10px !important; color:var(--v11-gold) !important; font-size:9px !important; font-weight:950 !important; letter-spacing:.19em !important; text-transform:uppercase; }
.session-showcase-v11 .callout[data-callout="newthissession"] ul { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px !important; margin:0 !important; padding:0 !important; list-style:none !important; }
.session-showcase-v11 .tarin-v11-spell-card { min-width:0; margin:0 !important; padding:15px 16px 17px !important; border:1px solid var(--v11-line) !important; border-top:2px solid color-mix(in srgb,var(--v11-gold) 72%,transparent) !important; border-radius:10px !important; background:color-mix(in srgb,var(--v11-bg-deep) 52%,transparent) !important; color:var(--v11-soft) !important; font-size:12px !important; line-height:1.52 !important; }
.session-showcase-v11 .tarin-v11-spell-card strong { color:var(--v11-text) !important; font-size:13px; }

/* Larger end-state panels to match the now-roomier reader. */
.session-showcase-v11 .callout[data-callout="success"],
.session-showcase-v11 .callout[data-callout="question"] { max-width:900px !important; font-size:15.5px !important; }

/* Full screen art viewer */
.tarin-v11-clickable { cursor:zoom-in !important; }
.tarin-v11-lightbox { width:min(96vw,1500px); height:min(94vh,1000px); margin:auto; padding:0; overflow:hidden; border:1px solid var(--v11-line); border-radius:15px; background:#04090c; color:#f1ece2; box-shadow:0 35px 110px rgba(0,0,0,.78); }
.tarin-v11-lightbox::backdrop { background:rgba(1,5,7,.90); backdrop-filter:blur(12px) saturate(.7); }
.tarin-v11-lightbox-shell { display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; }
.tarin-v11-lightbox header { display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:10px 12px 10px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.tarin-v11-lightbox header small { display:block; color:#d7b86b; font-size:8px; font-weight:950; letter-spacing:.18em; }
.tarin-v11-lightbox header strong { display:block; margin-top:2px; font-size:14px; }
.tarin-v11-lightbox .lb-count { color:rgba(255,255,255,.45); font-size:10px; }
.tarin-v11-lightbox button { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.025); color:#eee9df; cursor:pointer; }
.tarin-v11-lightbox .lb-close { width:36px; height:36px; border-radius:8px; font-size:23px; }
.tarin-v11-lightbox main { display:grid; grid-template-columns:54px minmax(0,1fr) 54px; align-items:center; min-height:0; padding:12px; }
.tarin-v11-lightbox main img { display:block; max-width:100%; max-height:calc(94vh - 84px); width:auto; height:auto; margin:auto; object-fit:contain; border-radius:9px; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.tarin-v11-lightbox .lb-prev,.tarin-v11-lightbox .lb-next { width:44px; height:62px; border-radius:9px; font-size:34px; }

.tarin-back-top { position:fixed; z-index:180; right:18px; bottom:18px; display:flex; align-items:center; gap:6px; min-height:38px; padding:0 12px; border:1px solid var(--v11-line); border-radius:999px; background:color-mix(in srgb,var(--v11-bg-deep) 92%,transparent); color:var(--v11-soft); font-size:10px; font-weight:850; opacity:0; transform:translateY(8px); pointer-events:none; transition:.18s ease; backdrop-filter:blur(12px); }
.tarin-back-top.is-visible { opacity:1; transform:none; pointer-events:auto; }

@media (prefers-reduced-motion:no-preference) {
  .session-showcase-v11 .tarin-act-details,
  .session-showcase-v11 .callout[data-callout="pullquote"],
  .session-showcase-v11 .callout[data-callout="newthissession"] { transition:border-color .35s ease, background .35s ease, box-shadow .35s ease; }
}

@media (max-width:1100px) {
  .session-showcase-v11 { --v8-prose:min(900px,calc(100vw - 54px)); --v8-media:var(--v8-prose); --v8-wide:min(1040px,calc(100vw - 40px)); --v8-hero:var(--v8-wide); }
  .session-showcase-v11 h3 { padding-left:52px !important; }
  .session-showcase-v11 h3::before { left:0 !important; }
  .tarin-readerbar-row { grid-template-columns:auto minmax(0,1fr) auto; }
  .tarin-reader-btn span:last-child { display:none; }
  .tarin-reader-btn { width:42px; padding:0; }
  .tarin-chapter-grid { grid-template-columns:1fr 1fr; }
  .tarin-gallery-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px) {
  body.tarin-v11-session .site-body-left-column {
    position:fixed !important; z-index:500 !important; inset:0 auto 0 0 !important; width:min(360px,88vw) !important;
    transform:translateX(calc(-100% - 12px)); transition:transform .24s ease !important;
  }
  body.tarin-v11-session.tarin-world-open .site-body-left-column { transform:translateX(0); }
  body.tarin-v11-session .site-body-right-column { display:none !important; }
  .session-showcase-v11 .markdown-preview-sizer,.session-showcase-v11 .markdown-rendered { padding-inline:14px !important; }
  .session-showcase-v11 .markdown-preview-sizer > p:not(:has(.image-embed)),.session-showcase-v11 .el-p:not(:has(.image-embed)) { font-size:17px !important; line-height:1.62 !important; }
  .session-showcase-v11 .tarin-readerbar { top:4px; margin-top:8px; }
  .tarin-readerbar-row { min-height:56px; padding:6px; gap:6px; }
  .tarin-readerbar-right { gap:4px; }
  .tarin-reader-btn { width:36px; min-height:36px; }
  .tarin-now-reading { padding:6px 10px; }
  .tarin-now-reading strong { font-size:12px; }
  .tarin-now-kicker { font-size:7px; }
  .tarin-act-segments { padding:0 7px 7px; }
  .session-showcase-v11 .tarin-act-details { margin-top:26px; }
  .session-showcase-v11 .tarin-act-summary { grid-template-columns:36px 1fr auto; min-height:66px; padding:8px 10px; }
  .tarin-act-meta { display:none; }
  .tarin-act-toggle .open-word,.tarin-act-toggle .closed-word { display:none !important; }
  .tarin-act-toggle { padding:6px; }
  .tarin-act-title strong { font-size:15px; }
  .tarin-reader-panel { position:fixed; left:8px; right:8px; top:72px; width:auto; max-height:calc(100vh - 86px); }
  .tarin-chapter-grid,.tarin-gallery-grid,.tarin-mood-grid { grid-template-columns:1fr; }
  .tarin-reader-panel > header > span { display:none; }
  .session-showcase-v11 .callout[data-callout="newthissession"] ul { grid-template-columns:1fr !important; }
  .tarin-v11-lightbox { width:98vw; height:94vh; }
  .tarin-v11-lightbox main { grid-template-columns:40px 1fr 40px; padding:8px; }
  .tarin-v11-lightbox .lb-prev,.tarin-v11-lightbox .lb-next { width:34px; height:52px; }
}

/* ========================================================================== */
/* TARIN PUBLISH V12 — INK & BRASS                                            */
/* Reader-first session design: edge world drawer, native collapsible acts,   */
/* quiet long-form typography, dynamic act atmosphere, larger session codex.  */
/* ========================================================================== */

body:has(.session-showcase-v12),
body.tarin-v12-session {
  --v12-bg: #0b0e10;
  --v12-bg-2: #101416;
  --v12-surface: #151a1d;
  --v12-surface-2: #1b2023;
  --v12-surface-warm: #191512;
  --v12-text: #eee9e0;
  --v12-soft: #c9c3ba;
  --v12-muted: #98978f;
  --v12-gold: #d1aa5a;
  --v12-sea: #739ca0;
  --v12-rose: #b66f7d;
  --v12-link: #9ebcb3;
  --v12-line: rgba(238,233,224,.12);
  --v12-line-strong: rgba(209,170,90,.30);
  --v12-act: var(--v12-gold);
  --v12-prose: min(880px, calc(100vw - 72px));
  --v12-media: min(920px, calc(100vw - 64px));
  --v12-wide: min(1060px, calc(100vw - 54px));
  --v12-hero: min(1240px, calc(100vw - 48px));
  background: var(--v12-bg) !important;
}

body.tarin-v12-session[data-tarin-act="2"] { --v12-act: var(--v12-sea); }
body.tarin-v12-session[data-tarin-act="3"] { --v12-act: var(--v12-rose); }

/* Take control of the Publish shell on this session page. */
body:has(.session-showcase-v12) .site-body-right-column,
body.tarin-v12-session .site-body-right-column { display:none !important; }

body:has(.session-showcase-v12) .site-body-center-column,
body.tarin-v12-session .site-body-center-column {
  flex:1 1 auto !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

body:has(.session-showcase-v12) .published-container,
body.tarin-v12-session .published-container {
  min-height:100vh;
  background:
    radial-gradient(980px 660px at 72% 3%, color-mix(in srgb,var(--v12-act) 9%,transparent), transparent 68%),
    radial-gradient(760px 580px at 18% 72%, rgba(255,255,255,.018), transparent 74%),
    linear-gradient(180deg, #0f1315 0%, var(--v12-bg) 48%, #080a0c 100%) !important;
  transition:background .55s ease;
}

/* The world tree is a true off-canvas drawer. :has() makes the closed state   */
/* work even before publish.js has finished initialising.                      */
@media (min-width: 901px) {
  body:has(.session-showcase-v12) .site-body-left-column,
  body.tarin-v12-session .site-body-left-column {
    position:fixed !important;
    z-index:720 !important;
    inset:0 auto 0 0 !important;
    width:min(390px,86vw) !important;
    max-width:none !important;
    height:100vh !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    transform:translateX(calc(-100% - 18px)) !important;
    visibility:hidden !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,#0b0e10,#101416) !important;
    border-right:1px solid color-mix(in srgb,var(--v12-gold) 22%,transparent) !important;
    box-shadow:24px 0 80px rgba(0,0,0,0) !important;
    transition:transform .27s cubic-bezier(.2,.75,.2,1), box-shadow .27s ease, visibility 0s linear .27s !important;
  }
  body.tarin-v12-session.tarin-world-open .site-body-left-column {
    transform:translateX(0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
    box-shadow:24px 0 80px rgba(0,0,0,.62) !important;
    transition-delay:0s !important;
  }
}

.session-showcase-v12 {
  color:var(--v12-text) !important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:18.5px !important;
  line-height:1.7 !important;
  counter-reset:tarin-scene;
}

.session-showcase-v12 .markdown-preview-sizer,
.session-showcase-v12 .markdown-rendered {
  width:100% !important;
  max-width:none !important;
  padding-inline:22px !important;
  color:var(--v12-text) !important;
  font-family:inherit !important;
}

.session-showcase-v12 a {
  color:var(--v12-link) !important;
  text-decoration-color:color-mix(in srgb,var(--v12-link) 46%,transparent) !important;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.session-showcase-v12 a:hover { color:#c4d7d1 !important; text-decoration-color:currentColor !important; }

.session-showcase-v12 .callout[data-callout="sessionnav"] { display:none !important; }

/* Body copy: calm, roomy, strongly legible. */
.session-showcase-v12 .markdown-preview-sizer > p:not(:has(.image-embed)),
.session-showcase-v12 .el-p:not(:has(.image-embed)),
.session-showcase-v12 .tarin-act-body > p:not(:has(.image-embed)) {
  width:var(--v12-prose) !important;
  max-width:var(--v12-prose) !important;
  margin:0 auto 1.02em !important;
  color:var(--v12-text) !important;
  font-size:18.5px !important;
  line-height:1.72 !important;
  letter-spacing:.002em;
}

/* Hero: wide visual hit, then the narrative quietens down. */
.session-showcase-v12 .callout[data-callout="sessionhero"] {
  width:var(--v12-hero) !important;
  max-width:var(--v12-hero) !important;
  margin:20px auto 34px !important;
  padding:0 !important;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--v12-gold) 35%,transparent) !important;
  border-radius:17px !important;
  background:#07090a !important;
  box-shadow:0 30px 85px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.018) inset !important;
}
.session-showcase-v12 .callout[data-callout="sessionhero"] .callout-title { display:none !important; }
.session-showcase-v12 .callout[data-callout="sessionhero"] .callout-content { padding:0 !important; }
.session-showcase-v12 .callout[data-callout="sessionhero"] .callout-content > p { margin:0 !important; max-width:none !important; width:auto !important; }
.session-showcase-v12 .callout[data-callout="sessionhero"] .callout-content > p:first-child {
  position:absolute; z-index:2; top:18px; left:20px; padding:7px 11px !important;
  border:1px solid rgba(255,255,255,.15); border-radius:999px;
  background:rgba(7,9,10,.72); backdrop-filter:blur(10px);
  color:#e9dfc8 !important; font-size:10px !important; font-weight:850; letter-spacing:.16em; text-transform:uppercase;
}
.session-showcase-v12 .callout[data-callout="sessionhero"] .image-embed { display:block !important; width:100% !important; }
.session-showcase-v12 .callout[data-callout="sessionhero"] img {
  display:block !important; width:100% !important; max-width:none !important; height:auto !important; margin:0 !important;
  aspect-ratio:16/9; object-fit:cover; object-position:center 42%; filter:saturate(.92) contrast(1.02) brightness(.88);
}
.session-showcase-v12 .callout[data-callout="sessionhero"] h1 {
  margin:-155px 0 0 !important; padding:60px 48px 8px !important; position:relative; z-index:2;
  background:linear-gradient(180deg,transparent 0%,rgba(5,7,8,.72) 34%,rgba(5,7,8,.98) 76%);
  color:#f4efe6 !important; font-size:clamp(42px,5.3vw,76px) !important; line-height:.95 !important; letter-spacing:-.045em !important; font-weight:900 !important;
  text-wrap:balance;
}
.session-showcase-v12 .callout[data-callout="sessionhero"] h1 + p,
.session-showcase-v12 .callout[data-callout="sessionhero"] h1 + p + p {
  position:relative; z-index:2; margin:0 !important; padding:0 48px !important; background:#050708 !important;
  color:var(--v12-soft) !important; font-size:13px !important; line-height:1.5 !important;
}
.session-showcase-v12 .callout[data-callout="sessionhero"] h1 + p { padding-top:8px !important; font-weight:800; letter-spacing:.025em; }
.session-showcase-v12 .callout[data-callout="sessionhero"] h1 + p + p { padding-bottom:25px !important; }

/* Session in brief — one strong information panel, not a dashboard. */
.session-showcase-v12 .callout[data-callout="abstract"],
.session-showcase-v12 .callout[data-callout="star"] {
  width:var(--v12-wide) !important; max-width:var(--v12-wide) !important; margin:26px auto 34px !important;
  border:1px solid var(--v12-line) !important; border-radius:14px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.022),rgba(255,255,255,.008)),var(--v12-surface) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.18) !important;
}
.session-showcase-v12 .callout[data-callout="abstract"] { border-top:2px solid color-mix(in srgb,var(--v12-gold) 75%,transparent) !important; }
.session-showcase-v12 .callout[data-callout="star"] { border-top:2px solid color-mix(in srgb,var(--v12-sea) 68%,transparent) !important; }
.session-showcase-v12 .callout[data-callout="abstract"] > .callout-title,
.session-showcase-v12 .callout[data-callout="star"] > .callout-title {
  min-height:58px; padding:15px 20px !important; border-bottom:1px solid var(--v12-line);
  color:#f0ebe2 !important; font-size:18px !important; font-weight:850 !important;
}
.session-showcase-v12 .callout[data-callout="abstract"] .callout-content,
.session-showcase-v12 .callout[data-callout="star"] .callout-content { padding:7px 20px 16px !important; }
.session-showcase-v12 .callout[data-callout="abstract"] ul { margin:0 !important; padding:0 !important; list-style:none !important; counter-reset:v12brief; }
.session-showcase-v12 .callout[data-callout="abstract"] li {
  counter-increment:v12brief; position:relative; margin:0 !important; padding:13px 10px 13px 52px !important;
  border-bottom:1px solid rgba(255,255,255,.055); color:var(--v12-soft); font-size:15.5px; line-height:1.58;
}
.session-showcase-v12 .callout[data-callout="abstract"] li:last-child { border-bottom:0; }
.session-showcase-v12 .callout[data-callout="abstract"] li::before {
  content:counter(v12brief,decimal-leading-zero); position:absolute; left:7px; top:13px;
  width:29px; height:29px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--v12-gold) 52%,transparent); border-radius:999px;
  color:var(--v12-gold); font-size:9px; font-weight:900; letter-spacing:.04em;
}
.session-showcase-v12 .callout[data-callout="star"] ul { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px !important; margin:5px 0 0 !important; padding:0 !important; list-style:none !important; }
.session-showcase-v12 .callout[data-callout="star"] li {
  margin:0 !important; padding:14px 15px !important; border:1px solid rgba(255,255,255,.065); border-left:2px solid color-mix(in srgb,var(--v12-sea) 70%,transparent); border-radius:9px;
  background:rgba(0,0,0,.13); color:var(--v12-soft); font-size:14.5px; line-height:1.55;
}

/* Acts: native details. Entire bar is the control; nothing overlays the title. */
.session-showcase-v12 .tarin-act-details {
  width:var(--v12-wide); max-width:var(--v12-wide); margin:52px auto 0 !important; border:0 !important; background:transparent !important;
}
.session-showcase-v12 .tarin-act-summary {
  position:relative; display:grid !important; grid-template-columns:58px minmax(0,1fr) auto 34px; align-items:center; gap:13px;
  min-height:82px; padding:10px 17px 10px 10px !important; cursor:pointer; list-style:none;
  border-top:1px solid color-mix(in srgb,var(--v12-act) 62%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--v12-act) 25%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--v12-act) 7%,transparent),transparent 68%);
  color:var(--v12-text);
}
.session-showcase-v12 .tarin-act-summary::-webkit-details-marker { display:none; }
.session-showcase-v12 .tarin-act-roman {
  display:grid; place-items:center; width:44px; height:44px; border:1px solid color-mix(in srgb,var(--v12-act) 54%,transparent); border-radius:50%; color:var(--v12-act); font-size:15px; font-weight:900;
}
.session-showcase-v12 .tarin-act-title { min-width:0; }
.session-showcase-v12 .tarin-act-title small { display:block; margin-bottom:2px; color:var(--v12-act); font-size:9px; font-weight:900; letter-spacing:.20em; }
.session-showcase-v12 .tarin-act-title strong { display:block; color:#f1ece3; font-size:22px; line-height:1.15; letter-spacing:.04em; font-weight:850; }
.session-showcase-v12 .tarin-act-meta { color:var(--v12-muted); font-size:10px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; white-space:nowrap; }
.session-showcase-v12 .tarin-act-chevron { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--v12-line); border-radius:50%; color:var(--v12-act); font-size:18px; transition:transform .2s ease,background .2s ease; }
.session-showcase-v12 .tarin-act-details:not([open]) .tarin-act-chevron { transform:rotate(-90deg); }
.session-showcase-v12 .tarin-act-summary:hover { background:linear-gradient(90deg,color-mix(in srgb,var(--v12-act) 12%,transparent),transparent 72%); }
.session-showcase-v12 .tarin-act-body { padding-top:33px; }

/* Scene headings — strong landmarks, one reading axis. */
.session-showcase-v12 h3 {
  counter-increment:tarin-scene; position:relative; width:var(--v12-prose) !important; max-width:var(--v12-prose) !important;
  margin:38px auto 24px !important; padding:0 0 13px 58px !important;
  border-bottom:1px solid rgba(238,233,224,.095); color:#f2ede5 !important; font-size:25px !important; line-height:1.22 !important; font-weight:830 !important; letter-spacing:-.018em;
}
.session-showcase-v12 h3::before {
  content:counter(tarin-scene,decimal-leading-zero); position:absolute; left:0; top:-2px; width:38px; height:29px; display:grid; place-items:center;
  border:1px solid color-mix(in srgb,var(--v12-act) 62%,transparent); border-radius:999px; color:var(--v12-act); background:color-mix(in srgb,var(--v12-bg) 82%,transparent); font-size:9px; font-weight:900;
}
.session-showcase-v12 h3 a { color:inherit !important; text-decoration:none !important; }

/* Narrative images: only subtly wider than prose, never arbitrary widths. */
.session-showcase-v12 .markdown-preview-sizer > p:has(.image-embed),
.session-showcase-v12 .markdown-preview-sizer > .el-p:has(.image-embed),
.session-showcase-v12 .el-p:has(.image-embed),
.session-showcase-v12 .tarin-act-body > p:has(.image-embed) {
  width:var(--v12-media) !important; max-width:var(--v12-media) !important; margin:30px auto 34px !important; padding:0 !important;
}
.session-showcase-v12 p:has(.image-embed) .image-embed,
.session-showcase-v12 p:has(.image-embed) .internal-embed { display:block !important; width:100% !important; }
.session-showcase-v12 p:has(.image-embed) img {
  display:block !important; width:100% !important; max-width:none !important; height:auto !important; margin:0 !important;
  border:1px solid rgba(238,233,224,.11); border-radius:11px; box-shadow:0 22px 58px rgba(0,0,0,.30);
  cursor:zoom-in;
}

/* Pull quotes are allowed to break the prose rail — an intentional loud moment. */
.session-showcase-v12 .callout[data-callout="pullquote"] {
  width:min(980px,calc(100vw - 58px)) !important; max-width:980px !important; margin:50px auto !important; padding:0 !important;
  border:0 !important; border-left:4px solid var(--v12-act) !important; border-radius:0 !important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--v12-act) 10%,transparent),transparent 72%) !important;
  box-shadow:none !important;
}
.session-showcase-v12 .callout[data-callout="pullquote"] .callout-title { padding:15px 25px 0 !important; color:var(--v12-act) !important; font-size:9px !important; font-weight:950 !important; letter-spacing:.20em !important; text-transform:uppercase; }
.session-showcase-v12 .callout[data-callout="pullquote"] .callout-content { position:relative; padding:8px 28px 22px 62px !important; color:#f2eee7 !important; font-size:clamp(29px,2.5vw,39px) !important; line-height:1.22 !important; font-weight:650; letter-spacing:-.025em; }
.session-showcase-v12 .callout[data-callout="pullquote"] .callout-content::before { content:'“'; position:absolute; left:19px; top:-7px; color:color-mix(in srgb,var(--v12-act) 74%,transparent); font-size:72px; line-height:1; font-family:Georgia,serif; }

/* NEW THIS SESSION — deliberately large, not tiny metadata. */
.session-showcase-v12 .callout[data-callout="newthissession"] {
  width:var(--v12-wide) !important; max-width:var(--v12-wide) !important; margin:62px auto 38px !important;
  border:1px solid color-mix(in srgb,var(--v12-gold) 32%,var(--v12-line)) !important; border-top:3px solid var(--v12-gold) !important; border-radius:15px !important;
  background:linear-gradient(135deg,rgba(209,170,90,.07),transparent 45%),var(--v12-surface-warm) !important;
  box-shadow:0 24px 65px rgba(0,0,0,.24) !important;
}
.session-showcase-v12 .callout[data-callout="newthissession"] > .callout-title {
  padding:20px 26px 17px !important; border-bottom:1px solid rgba(209,170,90,.16); color:#f2ece1 !important; font-size:22px !important; font-weight:900 !important; letter-spacing:-.01em;
}
.session-showcase-v12 .callout[data-callout="newthissession"] .callout-content { padding:24px 26px 28px !important; }
.session-showcase-v12 .tarin-codex-overview { display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 24px; padding:0 0 18px; border-bottom:1px solid rgba(255,255,255,.07); color:var(--v12-muted); font-size:11px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.session-showcase-v12 .tarin-codex-overview b { color:var(--v12-gold); font-size:18px; letter-spacing:-.02em; margin-right:4px; }
.session-showcase-v12 .tarin-codex-groups { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px; }
.session-showcase-v12 .tarin-codex-group { min-width:0; padding:18px 19px; border:1px solid rgba(255,255,255,.075); border-radius:11px; background:rgba(0,0,0,.13); }
.session-showcase-v12 .tarin-codex-group h4 { margin:0 0 12px !important; color:var(--v12-gold) !important; font-size:11px !important; font-weight:950 !important; letter-spacing:.18em !important; text-transform:uppercase; }
.session-showcase-v12 .tarin-codex-chips { display:flex; flex-wrap:wrap; gap:8px; }
.session-showcase-v12 .tarin-codex-chips a { display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid rgba(238,233,224,.13); border-radius:999px; background:rgba(255,255,255,.025); color:#eee8de !important; font-size:13px; font-weight:800; text-decoration:none !important; }
.session-showcase-v12 .tarin-codex-chips a:hover { border-color:color-mix(in srgb,var(--v12-gold) 55%,transparent); background:rgba(209,170,90,.07); }
.session-showcase-v12 .tarin-spellcraft-title { display:flex; align-items:center; gap:10px; margin:7px 0 12px !important; color:var(--v12-gold) !important; font-size:12px !important; font-weight:950 !important; letter-spacing:.18em !important; text-transform:uppercase; }
.session-showcase-v12 .tarin-spellcraft-title::after { content:''; height:1px; flex:1; background:rgba(209,170,90,.16); }
.session-showcase-v12 .tarin-spell-list { display:grid; gap:10px; margin:0 !important; padding:0 !important; list-style:none !important; }
.session-showcase-v12 .tarin-spell-card { display:grid; grid-template-columns:minmax(190px,260px) minmax(0,1fr); gap:20px; align-items:start; margin:0 !important; padding:17px 19px !important; border:1px solid rgba(255,255,255,.075); border-left:3px solid color-mix(in srgb,var(--v12-gold) 74%,transparent); border-radius:10px; background:#11100f; color:var(--v12-soft); font-size:15px; line-height:1.6; }
.session-showcase-v12 .tarin-spell-card .tarin-spell-name { color:#f0ebe3; font-size:16px; font-weight:850; line-height:1.3; }
.session-showcase-v12 .tarin-spell-card .tarin-spell-desc { color:var(--v12-soft); }

/* End-state panels stay readable and secondary. */
.session-showcase-v12 .callout[data-callout="question"],
.session-showcase-v12 .callout[data-callout="success"] {
  width:var(--v12-prose) !important; max-width:var(--v12-prose) !important; margin:24px auto !important;
  border:1px solid var(--v12-line) !important; border-left:3px solid var(--v12-sea) !important; border-radius:11px !important;
  background:var(--v12-surface) !important; font-size:15.5px !important; line-height:1.62 !important;
}
.session-showcase-v12 .callout[data-callout="success"] { border-left-color:var(--v12-rose) !important; }
.session-showcase-v12 .callout[data-callout="question"] > .callout-title,
.session-showcase-v12 .callout[data-callout="success"] > .callout-title { padding:13px 16px !important; border-bottom:1px solid var(--v12-line); font-size:15px !important; }
.session-showcase-v12 .callout[data-callout="question"] .callout-content,
.session-showcase-v12 .callout[data-callout="success"] .callout-content { padding:13px 18px 16px !important; }

.session-showcase-v12 .callout[data-callout="sessionfooter"] {
  width:var(--v12-wide) !important; max-width:var(--v12-wide) !important; margin:48px auto 70px !important; border:0 !important; border-top:1px solid rgba(209,170,90,.26) !important; border-radius:0 !important; background:transparent !important;
}
.session-showcase-v12 .callout[data-callout="sessionfooter"] .callout-title { padding:18px 0 10px !important; color:var(--v12-gold) !important; font-size:10px !important; letter-spacing:.18em; }
.session-showcase-v12 .callout[data-callout="sessionfooter"] ul { display:grid !important; grid-template-columns:repeat(3,1fr); gap:10px !important; margin:0 !important; padding:0 !important; list-style:none !important; }
.session-showcase-v12 .callout[data-callout="sessionfooter"] li { margin:0 !important; padding:14px 16px !important; border:1px solid var(--v12-line); border-radius:10px; background:rgba(255,255,255,.018); }

/* Persistent edge control for the world navigation. */
.tarin-world-tab {
  position:fixed; z-index:820; left:0; top:50%; transform:translateY(-50%);
  width:48px; min-height:132px; padding:13px 0 11px; border:1px solid color-mix(in srgb,var(--v12-gold) 45%,transparent); border-left:0; border-radius:0 12px 12px 0;
  background:linear-gradient(180deg,#171817,#0e1112); color:#efe8dc; box-shadow:8px 12px 32px rgba(0,0,0,.34); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; transition:left .27s cubic-bezier(.2,.75,.2,1),background .2s ease,border-color .2s ease;
}
.tarin-world-tab:hover { background:#1b1c1b; border-color:var(--v12-gold); }
.tarin-world-tab .tarin-world-label { writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; font-weight:950; letter-spacing:.20em; }
.tarin-world-tab .tarin-world-glyph { color:var(--v12-gold); font-size:16px; line-height:1; }
body.tarin-v12-session.tarin-world-open .tarin-world-tab { left:min(390px,86vw); }
body.tarin-v12-session.tarin-world-open .tarin-world-tab .tarin-world-glyph { transform:rotate(180deg); }
.tarin-world-backdrop { position:fixed; z-index:700; inset:0; border:0; background:rgba(0,0,0,.52); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .22s ease; }
body.tarin-v12-session.tarin-world-open .tarin-world-backdrop { opacity:1; pointer-events:auto; }

/* Unobtrusive reading progress: no dashboard required. */
.tarin-reading-progress { position:fixed; z-index:900; left:0; top:0; width:100%; height:3px; background:rgba(255,255,255,.025); pointer-events:none; }
.tarin-reading-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--v12-gold),var(--v12-act)); box-shadow:0 0 14px color-mix(in srgb,var(--v12-act) 55%,transparent); }

/* Lightbox */
.tarin-v12-clickable { cursor:zoom-in !important; }
.tarin-v12-lightbox { width:min(96vw,1540px); height:min(94vh,1030px); margin:auto; padding:0; overflow:hidden; border:1px solid rgba(238,233,224,.13); border-radius:15px; background:#050708; color:#f1ece2; box-shadow:0 35px 110px rgba(0,0,0,.80); }
.tarin-v12-lightbox::backdrop { background:rgba(1,3,4,.92); backdrop-filter:blur(12px) saturate(.72); }
.tarin-v12-lightbox-shell { display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; }
.tarin-v12-lightbox header { display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:11px 13px 11px 17px; border-bottom:1px solid rgba(255,255,255,.08); }
.tarin-v12-lightbox header small { display:block; color:var(--v12-gold); font-size:9px; font-weight:950; letter-spacing:.18em; }
.tarin-v12-lightbox header strong { display:block; margin-top:2px; font-size:15px; }
.tarin-v12-lightbox .lb-count { color:rgba(255,255,255,.46); font-size:11px; }
.tarin-v12-lightbox button { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.025); color:#eee9df; cursor:pointer; }
.tarin-v12-lightbox .lb-close { width:38px; height:38px; border-radius:9px; font-size:23px; }
.tarin-v12-lightbox main { display:grid; grid-template-columns:58px minmax(0,1fr) 58px; align-items:center; min-height:0; padding:13px; }
.tarin-v12-lightbox main img { display:block; max-width:100%; max-height:calc(94vh - 88px); width:auto; height:auto; margin:auto; object-fit:contain; border-radius:9px; box-shadow:0 24px 70px rgba(0,0,0,.52); }
.tarin-v12-lightbox .lb-prev,.tarin-v12-lightbox .lb-next { width:46px; height:66px; border-radius:9px; font-size:34px; }

.tarin-back-top { position:fixed; z-index:650; right:18px; bottom:18px; display:flex; align-items:center; gap:7px; min-height:40px; padding:0 13px; border:1px solid var(--v12-line); border-radius:999px; background:rgba(11,14,16,.88); color:var(--v12-soft); font-size:10px; font-weight:850; opacity:0; transform:translateY(8px); pointer-events:none; transition:.18s ease; backdrop-filter:blur(12px); }
.tarin-back-top.is-visible { opacity:1; transform:none; pointer-events:auto; }

@media (max-width: 1050px) {
  body:has(.session-showcase-v12),body.tarin-v12-session { --v12-prose:min(820px,calc(100vw - 52px)); --v12-media:var(--v12-prose); --v12-wide:min(900px,calc(100vw - 44px)); --v12-hero:var(--v12-wide); }
  .session-showcase-v12 .callout[data-callout="star"] ul { grid-template-columns:1fr !important; }
  .session-showcase-v12 .tarin-spell-card { grid-template-columns:210px minmax(0,1fr); }
}

@media (max-width: 900px) {
  body:has(.session-showcase-v12) .site-body-left-column,
  body.tarin-v12-session .site-body-left-column {
    position:fixed !important; z-index:720 !important; inset:0 auto 0 0 !important; width:min(360px,88vw) !important; height:100vh !important; overflow-y:auto !important;
    transform:translateX(calc(-100% - 14px)) !important; visibility:hidden !important; pointer-events:none !important; background:#0b0e10 !important; transition:transform .25s ease,visibility 0s linear .25s !important;
  }
  body.tarin-v12-session.tarin-world-open .site-body-left-column { transform:translateX(0) !important; visibility:visible !important; pointer-events:auto !important; transition-delay:0s !important; }
  body.tarin-v12-session.tarin-world-open .tarin-world-tab { left:min(360px,88vw); }
  .tarin-world-tab { width:42px; min-height:104px; }
  .session-showcase-v12 .markdown-preview-sizer,.session-showcase-v12 .markdown-rendered { padding-inline:12px !important; }
  .session-showcase-v12 .callout[data-callout="sessionhero"] h1 { margin-top:-120px !important; padding:48px 24px 8px !important; }
  .session-showcase-v12 .callout[data-callout="sessionhero"] h1 + p,.session-showcase-v12 .callout[data-callout="sessionhero"] h1 + p + p { padding-inline:24px !important; }
  .session-showcase-v12 .tarin-act-summary { grid-template-columns:48px minmax(0,1fr) 30px; }
  .session-showcase-v12 .tarin-act-meta { display:none; }
  .session-showcase-v12 .tarin-codex-groups { grid-template-columns:1fr; }
  .session-showcase-v12 .tarin-spell-card { grid-template-columns:1fr; gap:5px; }
  .session-showcase-v12 .callout[data-callout="sessionfooter"] ul { grid-template-columns:1fr; }
}

@media (max-width: 600px) {
  body:has(.session-showcase-v12),body.tarin-v12-session { --v12-prose:calc(100vw - 30px); --v12-media:var(--v12-prose); --v12-wide:var(--v12-prose); --v12-hero:calc(100vw - 18px); }
  .session-showcase-v12 { font-size:17px !important; }
  .session-showcase-v12 .markdown-preview-sizer > p:not(:has(.image-embed)),.session-showcase-v12 .el-p:not(:has(.image-embed)),.session-showcase-v12 .tarin-act-body > p:not(:has(.image-embed)) { font-size:17px !important; line-height:1.66 !important; }
  .session-showcase-v12 .callout[data-callout="sessionhero"] { margin-top:8px !important; border-radius:11px !important; }
  .session-showcase-v12 .callout[data-callout="sessionhero"] .callout-content > p:first-child { top:10px; left:10px; font-size:8px !important; }
  .session-showcase-v12 .callout[data-callout="sessionhero"] h1 { margin-top:-92px !important; padding:38px 15px 7px !important; font-size:clamp(34px,11vw,48px) !important; }
  .session-showcase-v12 .callout[data-callout="sessionhero"] h1 + p,.session-showcase-v12 .callout[data-callout="sessionhero"] h1 + p + p { padding-inline:15px !important; font-size:11px !important; }
  .session-showcase-v12 .tarin-act-summary { grid-template-columns:40px minmax(0,1fr) 28px; min-height:68px; padding:7px 8px !important; gap:8px; }
  .session-showcase-v12 .tarin-act-roman { width:34px; height:34px; font-size:12px; }
  .session-showcase-v12 .tarin-act-title strong { font-size:17px; }
  .session-showcase-v12 h3 { padding-left:48px !important; font-size:21px !important; }
  .session-showcase-v12 h3::before { width:33px; height:26px; }
  .session-showcase-v12 .callout[data-callout="newthissession"] > .callout-title { font-size:19px !important; padding:17px 17px 14px !important; }
  .session-showcase-v12 .callout[data-callout="newthissession"] .callout-content { padding:18px 17px 21px !important; }
  .session-showcase-v12 .tarin-spell-card { padding:15px !important; font-size:14px; }
  .tarin-v12-lightbox { width:98vw; height:94vh; }
  .tarin-v12-lightbox main { grid-template-columns:40px 1fr 40px; padding:8px; }
  .tarin-v12-lightbox .lb-prev,.tarin-v12-lightbox .lb-next { width:34px; height:52px; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.session-showcase-v12) *,body.tarin-v12-session * { scroll-behavior:auto !important; transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* V12 hero structure correction for Obsidian Publish's callout DOM. */
.session-showcase-v12 .metadata-container,
.session-showcase-v12 .page-header { display:none !important; }
.session-showcase-v12 .callout[data-callout="sessionhero"] { position:relative !important; }
.session-showcase-v12 .callout[data-callout="sessionhero"]::after {
  content:"09"; position:absolute; z-index:5; right:24px; bottom:-24px; pointer-events:none;
  color:rgba(238,233,224,.055); font-size:clamp(110px,14vw,195px); font-weight:950; line-height:1; letter-spacing:-.08em;
}
.session-showcase-v12 .callout[data-callout="sessionhero"] > .callout-title {
  display:flex !important; position:absolute !important; z-index:8; top:16px; left:18px; width:auto !important;
  padding:7px 12px !important; border:1px solid rgba(209,170,90,.25) !important; border-radius:999px !important;
  background:rgba(7,9,10,.70) !important; color:#f1eadc !important; font-size:10px !important; font-weight:900 !important; letter-spacing:.17em !important; text-transform:uppercase; backdrop-filter:blur(10px);
}
.session-showcase-v12 .callout[data-callout="sessionhero"] > .callout-title .callout-icon { display:none !important; }
.session-showcase-v12 .callout[data-callout="sessionhero"] .callout-content::before {
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 30%,rgba(5,7,8,.10) 50%,rgba(5,7,8,.97) 91%);
}
.session-showcase-v12 .callout[data-callout="sessionhero"] .callout-content > p:first-child { display:block !important; width:100% !important; margin:0 !important; padding:0 !important; }
.session-showcase-v12 .callout[data-callout="sessionhero"] h1,
.session-showcase-v12 .callout[data-callout="sessionhero"] .callout-content > p:not(:first-child) {
  position:relative; z-index:6; width:auto !important; max-width:900px !important; margin-left:clamp(22px,4.2vw,52px) !important; margin-right:clamp(22px,4.2vw,52px) !important;
}
.session-showcase-v12 .callout[data-callout="sessionhero"] h1 {
  margin-top:-132px !important; margin-bottom:8px !important; padding:0 !important; background:none !important;
}
.session-showcase-v12 .callout[data-callout="sessionhero"] .callout-content > p:nth-last-child(2) {
  margin-top:0 !important; margin-bottom:3px !important; padding:0 !important; background:none !important; color:var(--v12-gold) !important; font-size:11px !important; font-weight:900 !important; letter-spacing:.10em !important; text-transform:uppercase;
}
.session-showcase-v12 .callout[data-callout="sessionhero"] .callout-content > p:last-child {
  margin-top:0 !important; margin-bottom:0 !important; padding:0 0 24px !important; background:none !important; color:var(--v12-soft) !important; font-size:13px !important;
}