/* ===========================================================
   SoulfulSync — Content surfaces Full Canvas 3.6.0
   Single / archive / search / 404 / social polish
=========================================================== */

.ss-single,
.ss-archive,
.ss-search,
.ss-404 {
  background:
    radial-gradient(1000px 480px at 10% 0%, rgba(110, 92, 230, 0.08), transparent 58%),
    var(--ss-bg, #f7f5ff);
  color: var(--ss-ink, #1a1528);
  min-height: calc(100svh - 72px);
  padding-bottom: var(--ss-canvas-section-y, 72px);
}

html[data-theme="dark"] .ss-single,
html[data-theme="dark"] .ss-archive,
html[data-theme="dark"] .ss-search,
html[data-theme="dark"] .ss-404 {
  background:
    radial-gradient(1000px 480px at 10% 0%, rgba(110, 92, 230, 0.2), transparent 58%),
    var(--ss-bg, #0e0c16);
}

.ss-single .ss-hero,
.ss-archive .ss-hero,
.ss-social .ss-hero {
  text-align: center;
}

.ss-single .ss-content,
.ss-archive .ss-grid,
.ss-search .ss-grid {
  width: min(100%, var(--ss-canvas-max, 1280px)) !important;
  max-width: var(--ss-canvas-max, 1280px) !important;
  margin-inline: auto;
  padding-inline: var(--ss-canvas-pad, 24px);
  box-sizing: border-box;
}

.ss-single .ss-content {
  max-width: 820px !important;
}

.ss-404 {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--ss-canvas-section-y, 72px) var(--ss-canvas-pad, 24px);
}

.ss-social {
  background:
    radial-gradient(1000px 480px at 12% 0%, rgba(110, 92, 230, 0.1), transparent 58%),
    var(--ss-bg, #f7f5ff);
  min-height: calc(100svh - 72px);
}

html[data-theme="dark"] .ss-social {
  background:
    radial-gradient(1000px 480px at 12% 0%, rgba(110, 92, 230, 0.22), transparent 58%),
    var(--ss-bg, #0e0c16);
}