/* ============================================================
   SEP — Scholarly Entry Page
   Stanford-Encyclopedia-of-Philosophy-style layout for
   foundations/what-is-netism.html and similar entries.
   Loaded *after* site.css.
   ============================================================ */

.sep {
  background: var(--color-paper);
  color: var(--color-fg);
  --sep-rule: var(--color-ink-200);
  --sep-rule-soft: var(--color-ink-100);
  --sep-aside: var(--color-fg-muted);
}

/* ---------- HERO ---------- */

.sep-hero {
  border-bottom: 1px solid var(--sep-rule);
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 3vw, 3rem);
  background: var(--color-paper);
}
.sep-hero .container-prose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 78rem;
}
.sep-eyebrow-line {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-fg-faint);
  border-bottom: 1px solid var(--sep-rule-soft);
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}
.sep-eyebrow-line .crumb { margin: 0; padding: 0; border: 0; }
.sep-eyebrow-line .sep-stable {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--color-accent-text);
}
.sep-eyebrow-line .sep-stable::before {
  content: ''; width: 6px; height: 6px;
  background: var(--color-ember-500);
  border-radius: 50%;
}

.sep-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-page-title);
  font-weight: 500; line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--color-fg-strong);
  max-width: 22ch;
}
.sep-title em { font-style: italic; color: var(--color-ember-500); font-weight: 500; }

.sep-deck {
  margin: 0; max-width: 50rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1vw + 0.95rem, 1.5rem);
  line-height: 1.5;
  color: var(--color-fg-on-cream);
  font-style: italic;
  font-weight: 400;
}

.sep-pubmeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 2rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sep-rule-soft);
}
.sep-pubmeta dt {
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-fg-faint);
  margin-bottom: 0.25rem;
}
.sep-pubmeta dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem; color: var(--color-fg);
  line-height: 1.4;
}
.sep-pubmeta dd em {
  font-family: var(--font-display);
  font-style: italic;
}

/* ---------- BODY LAYOUT ---------- */

.sep-shell {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 78rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--space-container) clamp(4rem, 7vw, 6rem);
  align-items: start;
}
@media (max-width: 1000px) {
  .sep-shell { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---------- TOC (sticky) ---------- */

.sep-toc {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  align-self: start;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.45;
  border-left: 1px solid var(--sep-rule);
  padding-left: 1.25rem;
  max-height: calc(100vh - var(--header-h) - 3rem);
  overflow-y: auto;
}
@media (max-width: 1000px) {
  .sep-toc {
    position: static; max-height: none;
    border-left: 0;
    border-block: 1px solid var(--sep-rule);
    padding: 1.25rem 0;
  }
}
.sep-toc-label {
  display: block;
  margin: 0 0 0.85rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent-text);
}
.sep-toc ol {
  list-style: none; padding: 0; margin: 0;
  counter-reset: toc;
}
.sep-toc > ol > li {
  counter-increment: toc;
  margin-bottom: 0.55rem;
  position: relative;
  padding-left: 2rem;
}
.sep-toc > ol > li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 0.05rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-fg-faint);
}
.sep-toc a {
  color: var(--color-fg-strong);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease-out-quart), border-color 160ms var(--ease-out-quart);
}
.sep-toc a:hover { color: var(--color-accent-text); border-bottom-color: currentColor; }
.sep-toc li.active > a {
  color: var(--color-ember-500);
  border-bottom-color: currentColor;
}
.sep-toc ol ol {
  margin: 0.4rem 0 0.6rem 0;
  padding-left: 0.85rem;
  border-left: 1px solid var(--sep-rule-soft);
}
.sep-toc ol ol li {
  margin-bottom: 0.35rem;
  padding-left: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-fg-muted);
}
.sep-toc ol ol a { color: var(--color-fg-muted); }
.sep-toc ol ol a:hover { color: var(--color-accent-text); }

/* ---------- ARTICLE BODY ---------- */

.sep-article {
  max-width: 44rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--color-fg);
}

.sep-article > section { margin-bottom: clamp(2.75rem, 4vw, 3.75rem); }
.sep-article > section:last-child { margin-bottom: 0; }

/* Default h2 in SEP article: plain block heading.
   Auto-numbered via CSS counter when inside .sep-body (WP-rendered content). */
.sep-article h2 {
  display: block;
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--sep-rule);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.4vw + 1rem, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--color-fg-strong);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
/* Auto-counter for WP-rendered bodies (plain h2s with no sep-num span). */
.sep-body { counter-reset: sep-section; }
.sep-body h2 { counter-increment: sep-section; }
.sep-body h2::before {
  content: "§ " counter(sep-section, decimal-leading-zero);
  display: inline-block;
  min-width: 3.5rem;
  margin-right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-ember-500);
  vertical-align: 0.4em;
}
/* Legacy SEP pages with explicit <span class="sep-num"> still get the grid layout. */
.sep-article h2:has(.sep-num) {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: baseline;
  gap: 1.25rem;
}
.sep-article h2 .sep-num {
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-ember-500);
  align-self: baseline;
  padding-top: 0.35rem;
}

.sep-article h3 {
  margin: 2.25rem 0 0.85rem;
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-fg-strong);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.sep-article h3 .sep-subnum {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--color-fg-faint);
  margin-right: 0.55rem;
}

.sep-article p {
  margin: 0 0 1.15rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--color-fg);
}
.sep-article p.lede {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 0.7vw + 1rem, 1.4rem);
  line-height: 1.55;
  color: var(--color-fg-strong);
  margin-bottom: 1.75rem;
}
.sep-article p.lede::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  font-weight: 500;
  float: left;
  line-height: 0.86;
  padding: 0.05em 0.12em 0 0;
  color: var(--color-ember-500);
  font-style: normal;
}

/* Every entry's opening paragraph gets the lede treatment and drop cap, whether or not it carries the .lede class. */
.sep-article > section:first-of-type > p:first-of-type {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 0.7vw + 1rem, 1.4rem);
  line-height: 1.55;
  color: var(--color-fg-strong);
  margin-bottom: 1.75rem;
}
.sep-article > section:first-of-type > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  font-weight: 500;
  float: left;
  line-height: 0.86;
  padding: 0.05em 0.12em 0 0;
  color: var(--color-ember-500);
  font-style: normal;
}

.sep-article em { font-style: italic; }
.sep-article strong { font-weight: 600; color: var(--color-fg-strong); }

.sep-article a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.sep-article a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }

.sep-article blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--color-ember-500);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--color-fg-strong);
}
.sep-article blockquote p { font: inherit; margin-bottom: 0.6rem; }
.sep-article blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}

.sep-article ul, .sep-article ol {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
}
.sep-article li { margin-bottom: 0.55rem; line-height: 1.65; }

/* term-list */
.sep-glossary {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.75rem 1.5rem;
  margin: 1.25rem 0 2rem;
  padding: 0;
}
.sep-glossary dt {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 500;
  font-style: italic;
  color: var(--color-fg-strong);
  border-top: 1px solid var(--sep-rule);
  padding-top: 0.7rem;
}
.sep-glossary dd {
  margin: 0;
  border-top: 1px solid var(--sep-rule);
  padding-top: 0.7rem;
  color: var(--color-fg);
  line-height: 1.55;
}
.sep-glossary dd .pron {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted);
  margin-right: 0.4rem;
}

/* footnote refs + footnote list */
.sep-fn {
  font-family: var(--font-mono);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 1;
  color: var(--color-ember-500);
  text-decoration: none;
  padding: 0 0.15em;
}
.sep-fn:hover { color: var(--color-ember-600); text-decoration: underline; }

.sep-footnotes {
  border-top: 1px solid var(--sep-rule);
  padding-top: 1.5rem;
  margin-top: 3rem;
  font-size: 0.92rem;
  line-height: 1.6;
}
.sep-footnotes h2 {
  display: block;
  grid-template-columns: none;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent-text);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0.85rem;
}
.sep-footnotes ol { padding-left: 1.4rem; }
.sep-footnotes li { margin-bottom: 0.6rem; color: var(--color-fg-on-cream); }
.sep-footnotes li::marker { color: var(--color-ember-500); font-family: var(--font-mono); }

/* aside / margin notes (rendered in-flow but visually distinguished) */
.sep-aside {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--color-paper-deep);
  border-left: 2px solid var(--color-ink-300);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-fg-on-cream);
}
.sep-aside .label-eyebrow { margin-bottom: 0.4rem; color: var(--color-fg-faint); }
.sep-aside p:last-child { margin-bottom: 0; }

/* numbered principle/argument cards */
.sep-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0 2rem;
}
.sep-card {
  border: 1px solid var(--sep-rule);
  background: color-mix(in srgb, var(--color-paper-deep) 60%, white 40%);
  padding: 1.1rem 1.15rem;
}
.sep-card-num {
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-ember-500);
  margin-bottom: 0.45rem;
}
.sep-card h4 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 500;
  color: var(--color-fg-strong);
}
.sep-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-fg-on-cream);
}

/* small inline pull quote (not sidebar) */
.sep-article p.sep-pull,
.sep-pull {
  margin: 2rem 0;
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1.2vw + 1rem, 1.85rem);
  line-height: 1.3;
  color: var(--color-fg-strong);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.sep-pull::before, .sep-pull::after {
  display: block;
  width: 2.5rem; height: 1px;
  background: var(--color-ember-500);
  content: '';
  margin: 0.85rem 0;
}

/* ---------- BIBLIOGRAPHY / RELATED ---------- */

.sep-end {
  border-top: 1px solid var(--sep-rule);
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
}
.sep-end h2 {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: 0;
  grid-template-columns: none;
}
.sep-bib {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.7rem;
  font-size: 0.93rem; line-height: 1.55;
}
.sep-bib li {
  padding-left: 1.5rem;
  text-indent: -1.5rem;
  color: var(--color-fg);
}
.sep-bib li em { font-family: var(--font-display); font-style: italic; }

/* ─── Wikipedia-style numbered citations ──────────────────────────── */

/* Bibliography number prefix [1] [2] [3]... */
.sep-bib-cite {
  padding-left: 2.6rem;
  text-indent: -2.6rem;
}
.sep-bib-num {
  display: inline-block;
  width: 2.2rem;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-accent-text);
  text-indent: 0;
}
.sep-bib-cite:target {
  background: color-mix(in srgb, var(--color-ember-300) 18%, transparent);
  border-radius: 4px;
  transition: background 1.2s ease-out;
}

/* Inline superscript citation marker — appears next to the cited claim */
sup.cite-ref {
  font-size: 0.75em;
  line-height: 1;
  vertical-align: super;
  white-space: nowrap;
  margin-left: 0.05rem;
}
sup.cite-ref a {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-accent-text);
  text-decoration: none;
  padding: 0 0.1rem;
  border-radius: 2px;
}
sup.cite-ref a:hover,
sup.cite-ref a:focus {
  background: color-mix(in srgb, var(--color-ember-300) 22%, transparent);
  text-decoration: underline;
}

/* ─── Energy-center attribute blocks (12 Energy Centers entry) ──── */
.sep-center {
  margin: 2rem 0 2.4rem;
  padding: 1.4rem 1.6rem 1.5rem;
  border-left: 2px solid var(--sep-rule);
  background: color-mix(in srgb, var(--color-ember-300) 4%, transparent);
}
.sep-center__title {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 500;
  margin: 0 0 0.9rem;
  color: var(--color-fg);
}
.sep-center__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-accent-text);
  margin-right: 0.55rem;
  vertical-align: 0.18em;
}
.sep-center__attrs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.1rem; row-gap: 0.4rem;
  font-size: 0.88rem; line-height: 1.45;
  margin: 0 0 1.0rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--sep-rule);
  border-bottom: 1px solid var(--sep-rule);
}
.sep-center__attrs dt {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  align-self: center;
}
.sep-center__attrs dd {
  margin: 0;
  color: var(--color-fg);
}
.sep-center > p {
  margin: 0;
}

.sep-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--sep-rule);
}
.sep-related-grid a {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem 1.1rem 0;
  text-decoration: none;
  color: var(--color-fg-strong);
  border-bottom: 1px solid var(--sep-rule);
  border-right: 1px solid var(--sep-rule);
  transition: background 200ms var(--ease-out-quart);
}
.sep-related-grid a:last-child { border-right: 0; }
.sep-related-grid a:hover { background: color-mix(in srgb, var(--color-ember-300) 12%, transparent); }
.sep-related-grid .rel-cluster {
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-ember-500);
}
.sep-related-grid .rel-title {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-fg-strong);
}
.sep-related-grid .rel-desc {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-fg-on-cream);
}

/* tools strip — cite / print / share */
.sep-tools {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.85rem 0;
  border-top: 1px solid var(--sep-rule);
  border-bottom: 1px solid var(--sep-rule);
  margin-bottom: 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}
.sep-tools button {
  background: transparent; border: 0;
  font: inherit; color: var(--color-fg-strong);
  cursor: pointer; padding: 0.2rem 0;
  letter-spacing: inherit; text-transform: inherit;
}
.sep-tools button:hover { color: var(--color-accent-text); }
.sep-tools .sep-tools-spacer { flex: 1 1 auto; }
/* Animated Net hero background + scroll-reveal sections */
.sep-hero { position: relative; isolation: isolate; }
.sep-hero canvas[data-net-bg] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; opacity: 0.18; pointer-events: none;
}
.sep-article > section {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 0.9s cubic-bezier(0.2,0.8,0.2,1);
  will-change: opacity, transform;
}
.sep-article > section.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sep-article > section { opacity: 1; transform: none; transition: none; }
  .sep-hero canvas[data-net-bg] { display: none; }
}

/* ─── HERO REDESIGN: cinematic dark, Net as feature, not background ─── */
/* Locked to 548px tall across the whole site so every SEP hero reads
   the same and the explainer overlays inherit a known fixed canvas. */
.sep-hero {
  background: radial-gradient(ellipse at 70% 40%, #2a2018 0%, #1a1410 45%, #0d0a08 100%);
  color: #f7f3ec;
  padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 1.75rem);
  min-height: 548px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}
.sep-hero .container-prose { position: relative; z-index: 2; }
.sep-hero canvas[data-net-bg] {
  opacity: 0.7 !important;
  z-index: 0 !important;
  mix-blend-mode: screen;
}
.sep-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 80%);
  z-index: 1; pointer-events: none;
}
/* Full-bleed WebGL hero variants: a left-anchored scrim keeps the title and deck legible
   over the bright particle field while the right side stays fully open. */
.sep-hero[data-hero-variant='forgiveness-release']::before,
.sep-hero[data-hero-variant='balance-poise']::before,
.sep-hero[data-hero-variant='unity-weave']::before,
.sep-hero[data-hero-variant='source-field']::before,
.sep-hero[data-hero-variant='resonating-lattice']::before,
.sep-hero[data-hero-variant='detachment-openhand']::before,
.sep-hero[data-hero-variant='identity-shards']::before,
.sep-hero[data-hero-variant='consciousness-coherence']::before,
.sep-hero[data-hero-variant='purpose-path']::before,
.sep-hero[data-hero-variant='free-will-fork']::before,
.sep-hero[data-hero-variant='compassion-web']::before,
.sep-hero[data-hero-variant='sovereignty-core']::before,
.sep-hero[data-hero-variant='aether-substrate']::before,
.sep-hero[data-hero-variant='zero-point-jitter']::before,
.sep-hero[data-hero-variant='longitudinal-pulse']::before,
.sep-hero[data-hero-variant='behind-the-veil']::before,
.sep-hero[data-hero-variant='chaos-attractor']::before,
.sep-hero[data-hero-variant='neural-web']::before,
.sep-hero[data-hero-variant='entangled-pair']::before,
.sep-hero[data-hero-variant='morphic-field']::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,10,8,0.82) 0%, rgba(13,10,8,0.5) 36%, rgba(13,10,8,0) 66%);
}
.sep-hero .sep-eyebrow-line { border-bottom-color: rgba(247,243,236,0.12); }
.sep-hero .crumb { color: rgba(247,243,236,0.6); }
.sep-hero .crumb a { color: rgba(247,243,236,0.8); }
.sep-hero .crumb a:hover { color: #b87a1f; }
.sep-hero .crumb span[aria-hidden] { color: rgba(247,243,236,0.3); }
.sep-hero .sep-stable { color: #d49447; letter-spacing: 0.18em; }
.sep-hero .label-eyebrow { color: #d49447; }
.sep-hero .sep-title {
  color: #f7f3ec;
  font-size: var(--t-page-title);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.sep-hero .sep-title em { color: #d49447; font-style: italic; }
.sep-hero .sep-deck {
  color: rgba(247,243,236,0.82);
  font-size: clamp(1.15rem, 1.2vw + 0.6rem, 1.4rem);
  line-height: 1.55; max-width: 38rem;
}
.sep-hero .sep-pubmeta {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247,243,236,0.12);
}
.sep-hero .sep-pubmeta dt { color: rgba(247,243,236,0.5); }
.sep-hero .sep-pubmeta dd { color: rgba(247,243,236,0.95); }
.sep-hero .sep-pubmeta a { color: #d49447; }
.sep-hero .sep-pubmeta a:hover { color: #f7f3ec; }

/* Stronger active TOC indicator */
.sep-toc a.active,
.sep-toc li.active > a {
  color: #b87a1f !important;
  font-weight: 600;
}
.sep-toc > ol > li.active::before {
  color: #b87a1f !important;
  font-weight: 600;
}
.sep-toc > ol > li.active::after {
  content: ""; position: absolute;
  left: -1.27rem; top: 0.3rem; bottom: 0.3rem;
  width: 2px; background: #b87a1f;
  border-radius: 2px;
}



/* Share icons in sep-tools row, ember-toned */
.sep-share {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: 0.5rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--sep-rule, rgba(0,0,0,0.1));
  color: var(--color-ember-500, #b87a1f);
}
.sep-share-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: inherit;
}
.sep-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  padding: 0;
  line-height: 0;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  transition: color 0.2s ease, background 0.2s ease;
}
.sep-share a:hover {
  color: var(--color-ember-700, #8b5a14);
  background: rgba(184, 122, 31, 0.1);
}
.sep-share svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* Copy / Cite confirmation flash */
.sep-tools button.is-copied {
  color: var(--color-ember-500, #b87a1f);
  transition: color 0.2s ease;
}

/* ──────────────────────────────────────────────────────────────────────
   Audio player — modern, ember-themed, sits above the sep-tools row.
   Injected at runtime by BaseLayout.astro when an audio URL is mapped
   for the current page slug.
   ────────────────────────────────────────────────────────────────────── */
.sep-audio {
  position: relative;
  margin: 0 0 1.6rem 0;
  padding: 1.05rem 1.2rem 1.1rem 1.2rem;
  background:
    linear-gradient(135deg, rgba(212, 148, 71, 0.08) 0%, rgba(212, 148, 71, 0.02) 100%),
    rgba(20, 17, 13, 0.02);
  border: 1px solid color-mix(in srgb, var(--color-ember-500) 22%, transparent);
  border-radius: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "play main extras"
    "play track track";
  column-gap: 1rem;
  row-gap: 0.65rem;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sep-audio-play {
  grid-area: play;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-ember-500);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fffaf0;
  box-shadow:
    0 2px 14px color-mix(in srgb, var(--color-ember-500) 35%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 18%, transparent);
  transition: transform 200ms ease, box-shadow 200ms ease;
  flex-shrink: 0;
}

.sep-audio-play:hover {
  transform: scale(1.06);
  box-shadow:
    0 4px 22px color-mix(in srgb, var(--color-ember-500) 50%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 30%, transparent);
}

.sep-audio-play:active {
  transform: scale(0.98);
}

.sep-audio-play svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  /* Optical centering for the play triangle */
  margin-left: 2px;
}

.sep-audio.is-playing .sep-audio-play svg {
  margin-left: 0;
}

.sep-audio.is-playing .sep-audio-play {
  animation: sep-audio-pulse 2.6s ease-in-out infinite;
}

@keyframes sep-audio-pulse {
  0%, 100% {
    box-shadow:
      0 2px 14px color-mix(in srgb, var(--color-ember-500) 35%, transparent),
      inset 0 0 0 1px color-mix(in srgb, #ffffff 18%, transparent);
  }
  50% {
    box-shadow:
      0 2px 22px color-mix(in srgb, var(--color-ember-500) 70%, transparent),
      inset 0 0 0 1px color-mix(in srgb, #ffffff 30%, transparent);
  }
}

.sep-audio-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.sep-audio-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--color-ember-500);
  text-transform: uppercase;
}

.sep-audio-narrator {
  font-family: var(--font-prose, var(--font-serif, serif));
  font-size: 0.92rem;
  font-style: italic;
  color: color-mix(in srgb, currentColor 86%, transparent);
}

.sep-audio-narrator em {
  font-style: normal;
  color: color-mix(in srgb, currentColor 92%, transparent);
}

.sep-audio-extras {
  grid-area: extras;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sep-audio-speed,
.sep-audio-download {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-ember-500) 26%, transparent);
  color: color-mix(in srgb, var(--color-ember-500) 90%, transparent);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.sep-audio-speed:hover,
.sep-audio-download:hover {
  background: color-mix(in srgb, var(--color-ember-500) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-ember-500) 40%, transparent);
}

.sep-audio-download svg {
  width: 12px;
  height: 12px;
}

.sep-audio-track-row {
  grid-area: track;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.sep-audio-track {
  position: relative;
  flex: 1 1 auto;
  height: 5px;
  background: color-mix(in srgb, var(--color-ember-500) 14%, transparent);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: height 160ms ease;
}

.sep-audio-track:hover {
  height: 7px;
}

.sep-audio-track-buffer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: color-mix(in srgb, var(--color-ember-500) 22%, transparent);
  border-radius: 3px;
  width: 0%;
  pointer-events: none;
}

.sep-audio-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg,
    var(--color-ember-500) 0%,
    color-mix(in srgb, var(--color-ember-500) 88%, #f4c878) 100%);
  border-radius: 3px;
  width: 0%;
  transition: width 0.08s linear;
  pointer-events: none;
}

.sep-audio-track-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-ember-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ember-500) 18%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.sep-audio-track:hover .sep-audio-track-knob,
.sep-audio.is-scrubbing .sep-audio-track-knob {
  opacity: 1;
}

.sep-audio-time {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, currentColor 70%, transparent);
  white-space: nowrap;
  min-width: 5.5rem;
  text-align: right;
}

@media (max-width: 640px) {
  .sep-audio {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "play main"
      "track track"
      "extras extras";
    padding: 0.95rem 1rem;
    column-gap: 0.85rem;
    row-gap: 0.6rem;
  }
  .sep-audio-extras {
    justify-content: flex-end;
    padding-top: 0.1rem;
  }
  .sep-audio-play {
    width: 50px;
    height: 50px;
  }
  .sep-audio-narrator {
    font-size: 0.86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sep-audio.is-playing .sep-audio-play {
    animation: none;
  }
  .sep-audio-track-fill {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Interactive timeline (.sep-tl) — sits above sep-tools on the History page
   and any other entry that supplies an interactive_timeline list.
   Horizontal scroll strip, ember accents, click → smooth-scroll to section,
   scrollspy → active state.
   ────────────────────────────────────────────────────────────────────── */
.sep-tl {
  position: relative;
  margin: 0 0 1.4rem 0;
  padding: 1rem 0 1.1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--color-ember-500) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-ember-500) 18%, transparent);
  background: transparent;
}
.sep-tl-head {
  display: flex; align-items: baseline; gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0 0.25rem 0.7rem 0.25rem;
}
.sep-tl-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--color-ember-500);
  text-transform: uppercase;
}
.sep-tl-deck {
  font-family: var(--font-prose, var(--font-serif, serif));
  font-size: 0.92rem;
  line-height: 1.45;
  color: color-mix(in srgb, currentColor 78%, transparent);
  flex: 1 1 320px;
}
.sep-tl-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-ember-500) 70%, transparent);
  text-transform: uppercase;
  white-space: nowrap;
}
.sep-tl-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.55rem 0.5rem 0.55rem 0.5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-ember-500) 60%, transparent) transparent;
  cursor: grab;
}
.sep-tl-scroll.is-dragging { cursor: grabbing; user-select: none; }
.sep-tl-scroll::-webkit-scrollbar { height: 6px; }
.sep-tl-scroll::-webkit-scrollbar-track { background: transparent; }
.sep-tl-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-ember-500) 50%, transparent);
  border-radius: 3px;
}
.sep-tl-scroll:focus-visible {
  outline: 2px solid var(--color-ember-500);
  outline-offset: -2px;
}
.sep-tl-axis {
  position: absolute;
  left: 0.5rem; right: 0.5rem;
  top: calc(1.55rem + 38px); /* aligns with the dot row inside each event */
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0,
    color-mix(in srgb, var(--color-ember-500) 50%, transparent) 6%,
    color-mix(in srgb, var(--color-ember-500) 50%, transparent) 94%,
    transparent 100%);
  pointer-events: none;
}
.sep-tl-list {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}
.sep-tl-event {
  position: relative;
  flex: 0 0 auto;
  min-width: 130px;
  max-width: 170px;
  padding: 0 0.4rem;
  scroll-snap-align: center;
}
.sep-tl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.sep-tl-year {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-ember-500) 78%, transparent);
  height: 1.1rem; line-height: 1.1rem;
  white-space: nowrap;
}
.sep-tl-dot {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-ember-500) 65%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-ember-500) 14%, transparent),
    0 0 14px color-mix(in srgb, var(--color-ember-500) 40%, transparent);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  position: relative; z-index: 2;
}
.sep-tl-title {
  font-family: var(--font-prose, var(--font-serif, serif));
  font-size: 0.84rem;
  line-height: 1.25;
  color: color-mix(in srgb, currentColor 86%, transparent);
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Per-event description carrier — JS reads its innerHTML into the shared floater */
.sep-tl-desc-src { display: none; }

/* Single shared floating tooltip — fixed positioning escapes the scroll container's overflow */
.sep-tl-floater {
  position: fixed;
  top: 0; left: 0;
  width: max-content;
  max-width: 260px;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-prose, var(--font-serif, serif));
  font-size: 0.82rem;
  line-height: 1.45;
  color: #f4ead8;
  background: #14110d;
  border: 1px solid color-mix(in srgb, var(--color-ember-500) 45%, transparent);
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity 160ms ease;
  z-index: 100;
}
.sep-tl-floater.is-visible { opacity: 1; }
.sep-tl-floater::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: color-mix(in srgb, var(--color-ember-500) 45%, transparent);
  border-bottom: 0;
}
.sep-tl-floater em {
  color: var(--color-ember-500);
  font-style: italic;
}
.sep-tl-event:hover .sep-tl-dot,
.sep-tl-event:focus-within .sep-tl-dot,
.sep-tl-event.is-active .sep-tl-dot {
  background: var(--color-ember-500);
  transform: scale(1.18);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-ember-500) 22%, transparent),
    0 0 22px color-mix(in srgb, var(--color-ember-500) 75%, transparent);
}
.sep-tl-event:hover .sep-tl-year,
.sep-tl-event:focus-within .sep-tl-year,
.sep-tl-event.is-active .sep-tl-year {
  color: var(--color-ember-500);
}
.sep-tl-event:hover .sep-tl-title,
.sep-tl-event:focus-within .sep-tl-title,
.sep-tl-event.is-active .sep-tl-title {
  color: var(--color-fg, #f4ead8);
}
.sep-tl-btn:focus-visible {
  outline: 2px solid var(--color-ember-500);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Era tints — subtle background bands picked up via data-era */
.sep-tl-event[data-era="cataclysm"]    .sep-tl-dot { box-shadow: 0 0 0 3px color-mix(in srgb, #c44 22%, transparent), 0 0 14px color-mix(in srgb, #c44 40%, transparent); }
.sep-tl-event[data-era="zep-tepi"]     .sep-tl-dot { box-shadow: 0 0 0 3px color-mix(in srgb, #f4c878 24%, transparent), 0 0 14px color-mix(in srgb, #f4c878 50%, transparent); }
.sep-tl-event[data-era="now"]          .sep-tl-dot {
  background: var(--color-ember-500);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-ember-500) 28%, transparent),
    0 0 26px color-mix(in srgb, var(--color-ember-500) 80%, transparent);
}

/* Mobile: keep the strip but tighten widths */
@media (max-width: 640px) {
  .sep-tl { padding: 0.85rem 0 0.95rem 0; }
  .sep-tl-head { padding: 0 0.25rem 0.55rem 0.25rem; gap: 0.5rem; }
  .sep-tl-deck { font-size: 0.86rem; flex: 1 1 220px; }
  .sep-tl-hint { display: none; }
  .sep-tl-event { min-width: 116px; max-width: 140px; padding: 0 0.3rem; }
  .sep-tl-title { font-size: 0.78rem; }
  .sep-tl-year { font-size: 0.7rem; }
  .sep-tl-floater { font-size: 0.78rem; max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .sep-tl-dot { transition: none; }
  .sep-tl-floater { transition: none; }
  .sep-tl-scroll { scroll-behavior: auto; }
}

/* ──────────────────────────────────────────────────────────────────
 * FAQ items (used in /about/faq/ and any other Q&A page)
 * ────────────────────────────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid color-mix(in srgb, var(--color-fg, #2a2422) 14%, transparent);
  padding: 1.1rem 0 1.25rem 0;
}
.faq-item:first-child { padding-top: 0.4rem; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0.4rem; }

.faq-q {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.18rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-ember-500, #b4682a);
  margin: 0 0 0.6rem 0;
  letter-spacing: -0.005em;
}
.faq-a {
  font-size: 1rem;
  line-height: 1.62;
}
.faq-a p { margin: 0 0 0.7em 0; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--color-ember-500, #b4682a); text-decoration: underline; text-underline-offset: 2px; }
.faq-a a:hover { color: var(--color-ember-700, #8a4a18); }

@media (max-width: 640px) {
  .faq-q { font-size: 1.05rem; }
  .faq-a { font-size: 0.95rem; }
}

/* ──────────────────────────────────────────────────────────────────
 * Signup card (Mailchimp embed used in /practice/14-days/ and others)
 * ────────────────────────────────────────────────────────────────── */
.signup-card {
  margin: 1.6rem 0 1.8rem 0;
  padding: 1.6rem 1.6rem 1.4rem 1.6rem;
  background: color-mix(in srgb, var(--color-ember-500, #b4682a) 4%, var(--color-paper, #f7f3ec));
  border: 1px solid color-mix(in srgb, var(--color-ember-500, #b4682a) 22%, transparent);
  border-radius: 6px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-fg, #2a2422) 6%, transparent);
}
.signup-form { display: block; }
.signup-fields { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.1rem; }
.signup-label {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-fg, #2a2422);
  letter-spacing: -0.01em;
}
.signup-optional { font-weight: 400; color: color-mix(in srgb, var(--color-fg, #2a2422) 65%, transparent); font-size: 0.85em; }
.signup-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-fg, #2a2422);
  background: var(--color-paper, #f7f3ec);
  border: 1px solid color-mix(in srgb, var(--color-fg, #2a2422) 24%, transparent);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.signup-input:focus {
  outline: none;
  border-color: var(--color-ember-500, #b4682a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ember-500, #b4682a) 22%, transparent);
}
.signup-actions { margin: 0.4rem 0 0.85rem 0; }
.signup-button {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-paper, #f7f3ec);
  background: var(--color-ember-500, #b4682a);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}
.signup-button:hover { background: var(--color-ember-700, #8a4a18); }
.signup-button:active { transform: translateY(1px); }
.signup-fineprint {
  font-size: 0.86rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-fg, #2a2422) 72%, transparent);
  margin: 0;
}
@media (max-width: 640px) {
  .signup-card { padding: 1.2rem 1rem 1.05rem 1rem; }
  .signup-button { width: 100%; padding: 0.95rem 1rem; }
}

/* Article/template polish pass. */
.sep-page {
  background: #fffaf1;
}
.sep-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.6rem, 6vw, 6rem) clamp(2rem, 4vw, 4rem);
  background:
    radial-gradient(circle at 88% 10%, rgba(217, 148, 57, 0.18), transparent 22rem),
    linear-gradient(135deg, #150a05 0%, #20130b 45%, #233f59 100%);
  color: #fffaf1;
  border-bottom: 1px solid rgba(23, 17, 12, 0.18);
}
.sep-hero .crumb,
.sep-hero .sep-kicker,
.sep-hero .sep-pubmeta {
  color: rgba(255, 250, 241, 0.72);
}
.sep-hero .crumb a {
  color: #fffaf1;
}
.sep-title {
  max-width: 12ch;
  color: #fffaf1;
  letter-spacing: 0;
  line-height: 0.98;
}
/* Explainer heroes: keep titles on one line so every hero matches the What is Netism reference height. */
.sep-hero[data-hero-variant='maat-weave'] .sep-title,
.sep-hero[data-hero-variant='resonating-lattice'] .sep-title,
.sep-hero[data-hero-variant='soul-shards'] .sep-title,
.sep-hero[data-hero-variant='source-field'] .sep-title,
.sep-hero[data-hero-variant='cycles-spiral'] .sep-title,
.sep-hero[data-hero-variant='unity-weave'] .sep-title,
.sep-hero[data-hero-variant='balance-poise'] .sep-title,
.sep-hero[data-hero-variant='forgiveness-release'] .sep-title,
.sep-hero[data-hero-variant='detachment-openhand'] .sep-title,
.sep-hero[data-hero-variant='identity-shards'] .sep-title,
.sep-hero[data-hero-variant='consciousness-coherence'] .sep-title,
.sep-hero[data-hero-variant='purpose-path'] .sep-title,
.sep-hero[data-hero-variant='free-will-fork'] .sep-title,
.sep-hero[data-hero-variant='compassion-web'] .sep-title,
.sep-hero[data-hero-variant='sovereignty-core'] .sep-title,
.sep-hero[data-hero-variant='aether-substrate'] .sep-title,
.sep-hero[data-hero-variant='zero-point-jitter'] .sep-title,
.sep-hero[data-hero-variant='longitudinal-pulse'] .sep-title,
.sep-hero[data-hero-variant='behind-the-veil'] .sep-title,
.sep-hero[data-hero-variant='chaos-attractor'] .sep-title,
.sep-hero[data-hero-variant='neural-web'] .sep-title,
.sep-hero[data-hero-variant='entangled-pair'] .sep-title,
.sep-hero[data-hero-variant='morphic-field'] .sep-title {
  max-width: 24ch;
}
.sep-deck {
  max-width: 48rem;
  color: rgba(255, 250, 241, 0.82);
}
.sep-shell {
  max-width: 88rem;
  gap: clamp(2rem, 4vw, 4rem);
  background:
    linear-gradient(90deg, rgba(35, 63, 89, 0.06), transparent 32rem),
    #fffaf1;
}
.sep-toc {
  align-self: start;
  padding: 1.1rem 1rem;
  background: rgba(248, 241, 230, 0.78);
  border: 1px solid rgba(23, 17, 12, 0.12);
  border-radius: 8px;
}
.sep-toc a {
  color: #332a22;
}
.sep-toc a:hover {
  color: #233f59;
}
.sep-article {
  max-width: 50rem;
}
.sep-article p,
.sep-article li {
  color: #30271f;
}
.sep-article h2,
.sep-article h3 {
  color: #17110c;
  letter-spacing: 0;
}
.sep-article blockquote,
.sep-pull {
  border-left-color: #233f59;
  background: rgba(35, 63, 89, 0.06);
}
.sep-tools,
.sep-related,
.sep-center,
.sep-card,
.signup-card {
  border-radius: 8px;
  border-color: rgba(23, 17, 12, 0.14);
  background: rgba(255, 253, 248, 0.82);
  box-shadow: 0 18px 42px -36px rgba(23, 17, 12, 0.45);
}
.sep-card a,
.sep-related a,
.signup-button {
  color: #233f59;
}
.signup-button {
  background: #233f59;
  color: #fffaf1;
  border-radius: 6px;
}
.signup-button:hover {
  background: #172d43;
}

/* Mobile: the SEP explainer becomes a true fullscreen overlay so the site nav is covered and the
   player controls always sit within the viewport. On phones the explorer was sized to the hero's
   content height (which varies with deck length), pushing the controls off the bottom edge. */
@media (max-width: 640px) {
  .sep-hero.explorer-open .net-explorer-inline {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 4000 !important;
    background: #060507 !important;
  }
  .sep-hero.explorer-open .net-explorer-inline .net-test,
  .sep-hero.explorer-open .net-explorer-inline .net-test-canvas-wrap {
    height: 100vh !important;
    height: 100dvh !important;
  }
  /* the desktop "drag to orbit / scroll to zoom" hint is wrong on touch and collides with the
     player controls on phones — hide it. Also lift the caption clear of the controls row. */
  .sep-hero.explorer-open .net-explorer-inline .net-test-hint { display: none !important; }
  .sep-hero.explorer-open .net-explorer-inline .net-test-cap { bottom: 78px !important; }
  /* cover the site nav + the article behind the immersive explainer (no bleed-through) */
  body:has(.sep-hero.explorer-open) .site-header,
  body:has(.sep-hero.explorer-open) .sep-shell,
  body:has(.sep-hero.explorer-open) .related,
  body:has(.sep-hero.explorer-open) .sep-hero .container-prose { display: none !important; }
}