/*
 * Components.
 *
 * Brand-neutral UI primitives that read from brand tokens. Adding a new
 * brand does not require touching this file — override the semantic tokens
 * in /assets/css/brands/*.css and every component adapts automatically.
 *
 * Components included:
 *   - Container / layout
 *   - Buttons (primary, secondary, ghost)
 *   - Cards
 *   - Form fields
 *   - Footer columns
 *   - Brand switcher (header)
 *   - Callout boxes
 */

/* ---- Container. ---- */
.sss-container {
  width: 100%;
  max-width: var(--sss-container-xl);
  margin-inline: auto;
  padding-inline: var(--sss-space-6);
}
@media (min-width: 48rem) {
  .sss-container { padding-inline: var(--sss-space-8); }
}

/* ---- Buttons. Base + variants. ---- */
.sss-btn,
.sss-btn:any-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sss-space-2);
  min-height: var(--sss-tap-target);
  padding: var(--sss-space-3) var(--sss-space-6);
  font-family: var(--sss-font-body);
  font-size: var(--sss-step-0);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--sss-radius-md);
  cursor: pointer;
  transition:
    background-color var(--sss-motion-base) var(--sss-ease),
    color var(--sss-motion-base) var(--sss-ease),
    border-color var(--sss-motion-base) var(--sss-ease),
    transform var(--sss-motion-fast) var(--sss-ease);
}

.sss-btn:hover { transform: translateY(-1px); }
.sss-btn:active { transform: translateY(0); }

.sss-btn--primary,
.sss-btn--primary:any-link {
  background: var(--sss-accent);
  color: var(--sss-bg-alt, #ffffff);
  border-color: var(--sss-accent);
}
.sss-btn--primary:hover,
.sss-btn--primary:focus-visible {
  background: var(--sss-text);
  border-color: var(--sss-text);
  color: var(--sss-bg);
}

.sss-btn--secondary,
.sss-btn--secondary:any-link {
  background: transparent;
  color: var(--sss-text);
  border-color: var(--sss-text);
}
.sss-btn--secondary:hover,
.sss-btn--secondary:focus-visible {
  background: var(--sss-text);
  color: var(--sss-bg);
}

.sss-btn--ghost,
.sss-btn--ghost:any-link {
  background: transparent;
  color: var(--sss-link);
  border-color: transparent;
  padding-inline: var(--sss-space-3);
}
.sss-btn--ghost:hover,
.sss-btn--ghost:focus-visible {
  background: var(--sss-bg-surface);
  color: var(--sss-link-hover);
}

/* ---- Ensure theme / plugin buttons (WP core, Elementor, CF7, WPForms) inherit
   accessible minimums even when we don't author them. ---- */
.wp-block-button__link,
.elementor-button,
.wpforms-submit,
.wpcf7-submit,
input[type="submit"],
button[type="submit"] {
  min-height: var(--sss-tap-target);
  font-weight: 700;
  font-size: max(1rem, 16px);
}

/* ---- Cards. ---- */
.sss-card {
  background: var(--sss-bg-alt);
  color: var(--sss-text);
  border: 1px solid var(--sss-border);
  border-radius: var(--sss-radius-lg);
  padding: var(--sss-space-6);
  box-shadow: var(--sss-shadow-sm);
  transition: box-shadow var(--sss-motion-base) var(--sss-ease),
              transform var(--sss-motion-base) var(--sss-ease);
}
.sss-card:hover {
  box-shadow: var(--sss-shadow-md);
}
.sss-card__title {
  font-size: var(--sss-step-2);
  margin-bottom: var(--sss-space-2);
}
.sss-card__meta {
  font-size: var(--sss-step--1);
  color: var(--sss-text-mute);
  margin-bottom: var(--sss-space-3);
}
.sss-card__body {
  color: var(--sss-text-soft);
}

/* ---- Form fields. Ensure label contrast + tap target meet AA. ---- */
.sss-field {
  display: flex;
  flex-direction: column;
  gap: var(--sss-space-2);
  margin-bottom: var(--sss-space-5);
}
.sss-field label {
  font-weight: 600;
  color: var(--sss-text);
  font-size: var(--sss-step-0);
}
.sss-field input[type="text"],
.sss-field input[type="email"],
.sss-field input[type="url"],
.sss-field input[type="tel"],
.sss-field input[type="number"],
.sss-field textarea,
.sss-field select {
  min-height: var(--sss-tap-target);
  padding: var(--sss-space-3) var(--sss-space-4);
  font-family: var(--sss-font-body);
  font-size: var(--sss-step-0);
  color: var(--sss-text);
  background: var(--sss-bg-alt);
  border: 1px solid var(--sss-border);
  border-radius: var(--sss-radius-md);
}
.sss-field textarea { min-height: calc(var(--sss-tap-target) * 3); }
.sss-field input:focus,
.sss-field textarea:focus,
.sss-field select:focus {
  border-color: var(--sss-accent);
}
.sss-field small {
  color: var(--sss-text-mute);
  font-size: var(--sss-step--1);
}
.sss-field__error {
  color: var(--sss-coral-text, #9b2e1a);
  font-size: var(--sss-step--1);
}

/* ---- Footer columns. ---- */
.sss-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sss-space-8);
  padding-block: var(--sss-space-12);
}
.sss-footer-cols h3 {
  font-size: var(--sss-step-1);
  margin-bottom: var(--sss-space-3);
}

/* ---- Brand switcher (header). Small pill row for jumping between brands. ---- */
.sss-brand-switcher {
  display: inline-flex;
  gap: var(--sss-space-2);
  padding: var(--sss-space-1);
  background: var(--sss-bg-surface);
  border: 1px solid var(--sss-border);
  border-radius: var(--sss-radius-pill);
}
.sss-brand-switcher a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--sss-space-1) var(--sss-space-4);
  border-radius: var(--sss-radius-pill);
  font-size: var(--sss-step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--sss-text-soft);
}
.sss-brand-switcher a[aria-current="page"],
.sss-brand-switcher a.is-current {
  background: var(--sss-accent);
  color: var(--sss-bg-alt, #ffffff);
}

/* ==============================================================
   Page layouts — mobile-first, stack → side-by-side at 48rem+
   ============================================================== */

/* Two-column layout used by page-contact, page-submit-tip. */
.sss-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sss-space-8);
}
@media (min-width: 48rem) {
  .sss-page__grid {
    grid-template-columns: 1fr minmax(16rem, 22rem);
    gap: var(--sss-space-12);
  }
}

/* Page header spacing. */
.sss-page__header {
  margin-bottom: var(--sss-space-8);
}
.sss-page__title {
  margin-bottom: var(--sss-space-3);
}
.sss-page__lede {
  font-size: var(--sss-step-1);
  color: var(--sss-text-soft);
  max-width: 55ch;
}

/* Card grid used by archive-episode, archive-guide. */
.sss-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sss-space-6);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sss-space-8);
}
@media (min-width: 36rem) {
  .sss-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .sss-card-grid { grid-template-columns: repeat(3, 1fr); }
}
.sss-card-grid__item { list-style: none; }

/* Card media slot (thumbnail). */
.sss-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--sss-radius-md) var(--sss-radius-md) 0 0;
  margin: calc(var(--sss-space-6) * -1);
  margin-bottom: var(--sss-space-4);
}
.sss-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Action-guide: sticky TOC + content layout. */
.sss-page__layout--toc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sss-space-8);
}
@media (min-width: 48rem) {
  .sss-page__layout--toc {
    grid-template-columns: minmax(12rem, 16rem) 1fr;
    gap: var(--sss-space-12);
    align-items: start;
  }
  .sss-page__toc {
    position: sticky;
    top: var(--sss-space-16);
  }
}

/* TOC internals. */
.sss-toc__disclosure {
  border: 1px solid var(--sss-border);
  border-radius: var(--sss-radius-md);
  padding: var(--sss-space-4);
}
.sss-toc__title {
  font-size: var(--sss-step-0);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.sss-toc__title::-webkit-details-marker { display: none; }
.sss-toc__title::marker { content: ""; }
.sss-toc__list {
  margin: var(--sss-space-3) 0 0;
  padding-left: var(--sss-space-4);
  font-size: var(--sss-step--1);
  line-height: var(--sss-line-loose);
}
.sss-toc__item { margin-bottom: var(--sss-space-1); }
.sss-toc__item--h3 { padding-left: var(--sss-space-4); }
.sss-toc__list a {
  color: var(--sss-text-soft);
  text-decoration: none;
}
.sss-toc__list a:hover,
.sss-toc__list a:focus-visible {
  color: var(--sss-link);
  text-decoration: underline;
}

/* Prose container (for long-form guide content). */
.sss-prose > * + * {
  margin-top: var(--sss-space-4);
}
.sss-prose h2 {
  margin-top: var(--sss-space-12);
  padding-top: var(--sss-space-4);
  border-top: 1px solid var(--sss-border);
}
.sss-prose h3 {
  margin-top: var(--sss-space-8);
}

/* Filter pills (guide archive series filter). */
.sss-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sss-space-2);
  margin-top: var(--sss-space-4);
}
.sss-filter-pills__item {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--sss-space-1) var(--sss-space-4);
  border: 1px solid var(--sss-border);
  border-radius: var(--sss-radius-pill);
  font-size: var(--sss-step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--sss-text-soft);
  background: transparent;
  transition: background var(--sss-motion-fast) var(--sss-ease),
              color var(--sss-motion-fast) var(--sss-ease);
}
.sss-filter-pills__item:hover {
  background: var(--sss-bg-surface);
  color: var(--sss-text);
}
.sss-filter-pills__item.is-current,
.sss-filter-pills__item[aria-current="page"] {
  background: var(--sss-accent);
  color: var(--sss-bg-alt, #ffffff);
  border-color: var(--sss-accent);
}

/* Pagination. */
.sss-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sss-space-2);
  padding-block: var(--sss-space-8);
}
.sss-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sss-tap-target);
  min-height: var(--sss-tap-target);
  padding: var(--sss-space-1) var(--sss-space-3);
  border: 1px solid var(--sss-border);
  border-radius: var(--sss-radius-md);
  font-size: var(--sss-step--1);
  text-decoration: none;
  color: var(--sss-text-soft);
}
.sss-pagination .page-numbers.current,
.sss-pagination .page-numbers:hover {
  background: var(--sss-accent);
  color: var(--sss-bg-alt, #ffffff);
  border-color: var(--sss-accent);
}

/* Empty state. */
.sss-empty {
  text-align: center;
  color: var(--sss-text-mute);
  padding: var(--sss-space-16) var(--sss-space-4);
  font-size: var(--sss-step-1);
}

/* Contact list (dl in page-contact sidebar). */
.sss-contact-list {
  margin: 0;
}
.sss-contact-list dt {
  font-weight: 700;
  font-size: var(--sss-step--1);
  color: var(--sss-text-mute);
  text-transform: uppercase;
  letter-spacing: var(--sss-tracking-wide);
  margin-top: var(--sss-space-4);
}
.sss-contact-list dt:first-child { margin-top: 0; }
.sss-contact-list dd {
  margin-left: 0;
  margin-bottom: var(--sss-space-2);
}

/* Brand switcher responsive: scroll on small screens. */
@media (max-width: 30rem) {
  .sss-brand-switcher {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .sss-brand-switcher::-webkit-scrollbar { display: none; }
}

/* ---- Callouts (used in action guides, series landing). ---- */
.sss-callout {
  padding: var(--sss-space-5) var(--sss-space-6);
  border-left: 4px solid var(--sss-accent);
  background: var(--sss-bg-surface);
  border-radius: 0 var(--sss-radius-md) var(--sss-radius-md) 0;
  margin-block: var(--sss-space-6);
}
.sss-callout--warn { border-left-color: var(--sss-coral-text, #9b2e1a); }
.sss-callout--info { border-left-color: var(--sss-sky, #2563a0); }
.sss-callout__title {
  font-size: var(--sss-step-1);
  margin-bottom: var(--sss-space-2);
}

/* ---- Series taxonomy archive: featured episode + season picker ---- */

.sss-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.sss-page--series .sss-page__eyebrow {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: var(--sss-step--1, 0.875rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sss-color-text-muted, #3a4a5a);
  margin: 0 0 var(--sss-space-2);
}

.sss-featured-ep {
  margin: var(--sss-space-8) 0;
}
.sss-featured-ep__eyebrow {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: var(--sss-step--1, 0.875rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sss-color-text-muted, #3a4a5a);
  margin: 0 0 var(--sss-space-3);
}
.sss-featured-ep__card {
  display: grid;
  gap: var(--sss-space-6);
  grid-template-columns: 1fr;
  align-items: start;
  border: 2px solid var(--sss-color-border, #d6dee6);
  border-radius: var(--sss-radius-lg, 8px);
  background: var(--sss-color-surface, #fff);
  overflow: hidden;
}
@media (min-width: 48rem) {
  .sss-featured-ep__card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.sss-featured-ep__media {
  display: block;
  background: var(--sss-color-surface-alt, #f2f4f7);
}
.sss-featured-ep__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16/9;
}
.sss-featured-ep__body {
  padding: var(--sss-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--sss-space-3);
}
.sss-featured-ep__title {
  font-size: var(--sss-step-3, 1.5rem);
  line-height: 1.25;
  margin: 0;
  color: var(--sss-color-text, #0d1b26);
}
.sss-featured-ep__title a {
  color: inherit;
  text-decoration: none;
}
.sss-featured-ep__title a:hover,
.sss-featured-ep__title a:focus-visible {
  text-decoration: underline;
}
.sss-featured-ep__meta {
  font-size: var(--sss-step--1, 0.875rem);
  color: var(--sss-color-text-muted, #3a4a5a);
  margin: 0;
}
.sss-featured-ep__description {
  font-size: var(--sss-step-0, 1rem);
  line-height: 1.6;
  color: var(--sss-color-text, #0d1b26);
  margin: 0;
}
.sss-featured-ep__cta { margin-top: var(--sss-space-2); }

/* Season picker */
.sss-season-list { margin-top: var(--sss-space-8); }
.sss-season-list__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sss-space-4);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sss-space-5);
}
.sss-season-list__title {
  font-size: var(--sss-step-2, 1.25rem);
  margin: 0;
  color: var(--sss-color-text, #0d1b26);
}
.sss-season-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--sss-space-2);
}
.sss-season-picker__label {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: var(--sss-step--1, 0.875rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sss-color-text-muted, #3a4a5a);
}
.sss-season-picker__select {
  min-height: var(--sss-tap-target, 44px);
  padding: var(--sss-space-2) var(--sss-space-4);
  font-family: var(--sss-font-body, inherit);
  font-size: var(--sss-step-0, 1rem);
  color: var(--sss-color-text, #0d1b26);
  background: var(--sss-color-surface, #fff);
  border: 2px solid var(--sss-color-border, #4a5a6a);
  border-radius: var(--sss-radius-md, 6px);
  cursor: pointer;
}
.sss-season-picker__select:focus-visible {
  outline: 3px solid var(--sss-color-focus, #0057a8);
  outline-offset: 2px;
}
.sss-season-picker__static { margin: 0; }

/* Parent theme (skrn-progression) chrome suppression.
   IMPORTANT: #sidebar-bg wraps our <main>, so we can't hide it. We
   hide ONLY its chrome children and neutralize its layout constraints. */
body.tax-video-category #videohead-pro,
body.tax-video-category #sidebar-nav-pro,
body.tax-video-category #skrn-mobile-video-search-header,
body.tax-video-category #main-nav-mobile,
body.tax-video-category .advanced-searchform-video-header,
body.tax-video-category .skrn-video-search-columns,
body.tax-video-category .skrn-archive-filter,
body.tax-video-category .column-search-header,
body.tax-episode-season #videohead-pro,
body.tax-episode-season #sidebar-nav-pro,
body.tax-episode-season #skrn-mobile-video-search-header,
body.tax-episode-season #main-nav-mobile,
body.tax-episode-season .advanced-searchform-video-header,
body.tax-episode-season .skrn-video-search-columns,
body.tax-episode-season .skrn-archive-filter,
body.tax-episode-season .column-search-header,
body.page-template-page-dais-hub,
body.page-template-page-contact #videohead-pro,
body.page-template-page-dais-hub,
body.page-template-page-contact #sidebar-nav-pro,
body.page-template-page-dais-hub,
body.page-template-page-contact #skrn-mobile-video-search-header,
body.page-template-page-dais-hub,
body.page-template-page-contact #main-nav-mobile,
body.page-template-page-dais-hub,
body.page-template-page-contact .advanced-searchform-video-header,
body.page-template-page-dais-hub,
body.page-template-page-contact .skrn-video-search-columns,
body.page-template-page-dais-hub,
body.page-template-page-contact .skrn-archive-filter {
  display: none !important;
}

/* Reset #sidebar-bg so its child main can span full width. */
body.tax-video-category #sidebar-bg,
body.tax-episode-season #sidebar-bg,
body.page-template-page-dais-hub,
body.page-template-page-contact #sidebar-bg {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  float: none !important;
}
body.tax-video-category,
body.tax-episode-season,
body.page-template-page-dais-hub,
body.page-template-page-contact {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
body.tax-video-category #page-pro,
body.tax-episode-season #page-pro,
body.page-template-page-dais-hub,
body.page-template-page-contact #page-pro,
body.tax-video-category .content-pro,
body.tax-episode-season .content-pro,
body.page-template-page-dais-hub,
body.page-template-page-contact .content-pro {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ================================================================
   Series taxonomy archive — /media-category/{term}/
   Dark-aware; reads brand tokens so Dais (dark), Map (earth),
   Import Economy (light) all adapt without per-brand markup.
   ================================================================ */

.sss-series {
  color: var(--sss-color-text, #0d1b26);
  background: var(--sss-color-bg, #fff);
}
.sss-series__wrap {
  max-width: 54rem;
  margin-inline: auto;
  padding-inline: var(--sss-space-6);
}
@media (min-width: 48rem) {
  .sss-series__wrap { padding-inline: var(--sss-space-8); }
}

/* Hero ---------------------------------------------------------- */
.sss-series__hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--sss-color-bg-inverse, #0f1a26);
  isolation: isolate;
}
.sss-series__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: .5;
  z-index: 0;
}
.sss-series__hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.45) 55%,
    var(--sss-color-bg-inverse, #0f1a26) 95%
  );
}
.sss-series__hero-inner {
  position: relative;
  z-index: 2;
  max-width: 54rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sss-space-6) var(--sss-space-10);
  color: var(--sss-color-text-inverse, #fff);
}
@media (min-width: 48rem) {
  .sss-series__hero-inner { padding-inline: var(--sss-space-8); }
}

.sss-series__eyebrow {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sss-color-accent-inverse, #c8e0d0);
  margin: 0 0 var(--sss-space-3);
}
.sss-series__title {
  font-family: var(--sss-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
  margin: 0 0 var(--sss-space-4);
}
.sss-series__tagline {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 36rem;
  margin: 0 0 var(--sss-space-6);
}

.sss-series__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sss-space-6);
  margin: 0 0 var(--sss-space-6);
  padding: 0;
}
.sss-series__meta-item { margin: 0; }
.sss-series__meta-item dt {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 0;
}
.sss-series__meta-item dd {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,.92);
}

.sss-series__hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sss-space-3);
}
.sss-series__hero .sss-btn--primary {
  background: var(--sss-color-text-inverse, #fff);
  color: var(--sss-color-bg-inverse, #0f1a26);
  border-color: var(--sss-color-text-inverse, #fff);
}
.sss-series__hero .sss-btn--primary:hover,
.sss-series__hero .sss-btn--primary:focus-visible {
  opacity: .9;
}
.sss-series__hero .sss-btn--ghost {
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.35);
  background: transparent;
}
.sss-series__hero .sss-btn--ghost:hover,
.sss-series__hero .sss-btn--ghost:focus-visible {
  border-color: #fff;
  color: #fff;
}

/* Intro (term description long-form) ---------------------------- */
.sss-series__intro {
  padding: var(--sss-space-10) 0 var(--sss-space-6);
}
.sss-series__intro-body {
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sss-color-text, #0d1b26);
}
.sss-series__intro-body p + p { margin-top: var(--sss-space-3); }

/* Episodes ------------------------------------------------------ */
.sss-series__episodes {
  padding: var(--sss-space-8) 0 var(--sss-space-10);
}
.sss-series__episodes-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sss-space-4);
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sss-space-6);
}
.sss-series__section-title {
  font-family: var(--sss-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  margin: 0;
}

.sss-series__season {
  display: inline-flex;
  align-items: center;
  gap: var(--sss-space-2);
}
.sss-series__season-label {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sss-color-text-muted, #4a5a6a);
}
.sss-series__season-select {
  min-height: 44px;
  padding: 0 var(--sss-space-4);
  font: inherit;
  font-size: 0.95rem;
  color: var(--sss-color-text, #0d1b26);
  background: var(--sss-color-surface, #fff);
  border: 2px solid var(--sss-color-border, #4a5a6a);
  border-radius: var(--sss-radius-md, 6px);
  cursor: pointer;
}
.sss-series__season-select:focus-visible {
  outline: 3px solid var(--sss-color-focus, #0057a8);
  outline-offset: 2px;
}
.sss-series__season-static { margin: 0; }

.sss-ep-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sss-space-2);
}
.sss-ep-rows__item { margin: 0; }

.sss-ep-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0;
  min-height: 72px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--sss-color-border-muted, rgba(0,0,0,.1));
  border-radius: var(--sss-radius-md, 6px);
  background: var(--sss-color-surface, #fff);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.sss-ep-row:hover,
.sss-ep-row:focus-visible {
  border-color: var(--sss-color-accent, #2d5c3f);
  background: var(--sss-color-surface-alt, rgba(0,0,0,.02));
}
.sss-ep-row:focus-visible {
  outline: 3px solid var(--sss-color-focus, #0057a8);
  outline-offset: 2px;
}

.sss-ep-row__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sss-color-surface-alt, #0d1a28);
}
.sss-ep-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .82;
  transition: opacity .25s ease;
}
.sss-ep-row:hover .sss-ep-row__thumb img { opacity: 1; }
.sss-ep-row__thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.05);
}
.sss-ep-row__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .18s ease;
}
.sss-ep-row:hover .sss-ep-row__play,
.sss-ep-row:focus-visible .sss-ep-row__play { opacity: 1; }
.sss-ep-row__play-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  padding-left: 2px;
}

.sss-ep-row__body {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
}
.sss-ep-row__num {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sss-color-accent, #2d5c3f);
}
.sss-ep-row__title {
  /* Match .sss-hub__card-title family/weight (body font + bold) so the list
     titles read consistently with the card titles above. Size stays at 1rem. */
  font-family: var(--sss-font-body, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--sss-color-text, #0d1b26);
}
.sss-ep-row__meta {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: 0.7rem;
  color: var(--sss-color-text-muted, #4a5a6a);
}

@media (max-width: 30rem) {
  .sss-ep-row { grid-template-columns: 72px 1fr; min-height: 64px; }
  .sss-ep-row__body { padding: 0.6rem 0.85rem; }
}

.sss-series__empty {
  padding: var(--sss-space-8) 0;
  text-align: center;
  color: var(--sss-color-text-muted, #4a5a6a);
}

/* Episode category filter --------------------------------------- */
.sss-ep-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sss-space-2);
  margin: 0 0 var(--sss-space-5);
}
.sss-ep-filter__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--sss-tap-target, 44px);
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sss-color-text, #0d1b26);
  background: var(--sss-color-surface, #fff);
  border: 2px solid var(--sss-color-border, #4a5a6a);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sss-ep-filter__pill:hover { border-color: var(--sss-color-accent, #2d5c3f); }
.sss-ep-filter__pill:focus-visible {
  outline: 3px solid var(--sss-color-focus, #0057a8);
  outline-offset: 2px;
}
.sss-ep-filter__pill.is-active,
.sss-ep-filter__pill[aria-pressed="true"] {
  background: var(--sss-color-accent, #2d5c3f);
  color: var(--sss-color-text-inverse, #fff);
  border-color: var(--sss-color-accent, #2d5c3f);
}
.sss-ep-filter__count {
  font-weight: 500;
  opacity: .75;
  font-size: 0.85em;
}
body.brand--the-dais .sss-ep-filter__pill {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.25);
}
body.brand--the-dais .sss-ep-filter__pill.is-active,
body.brand--the-dais .sss-ep-filter__pill[aria-pressed="true"] {
  background: #c8e0d0;
  color: #0f1a26;
  border-color: #c8e0d0;
}

/* Dais prev/next breadcrumbs ------------------------------------ */
.sss-dais-breadcrumbs {
  padding: var(--sss-space-10) var(--sss-space-6) var(--sss-space-12);
  background: var(--sss-color-surface-alt, rgba(0,0,0,.02));
  border-top: 1px solid var(--sss-color-border-muted, rgba(0,0,0,.08));
}
.sss-dais-breadcrumbs__inner {
  max-width: 54rem;
  margin: 0 auto;
  display: grid;
  gap: var(--sss-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 42rem) {
  .sss-dais-breadcrumbs__inner {
    grid-template-columns: 1fr 1fr;
  }
  .sss-dais-breadcrumbs__link--next,
  .sss-dais-breadcrumbs__link--supplemental {
    text-align: right;
  }
  .sss-dais-breadcrumbs__link--supplemental {
    grid-column: 2;
  }
}
.sss-dais-breadcrumbs__link {
  display: block;
  padding: var(--sss-space-4) var(--sss-space-5);
  text-decoration: none;
  color: var(--sss-color-text, #0d1b26);
  background: var(--sss-color-surface, #fff);
  border: 1px solid var(--sss-color-border-muted, rgba(0,0,0,.1));
  border-radius: var(--sss-radius-md, 6px);
  transition: border-color .18s ease, transform .18s ease;
  min-height: var(--sss-tap-target, 44px);
}
.sss-dais-breadcrumbs__link:hover,
.sss-dais-breadcrumbs__link:focus-visible {
  border-color: var(--sss-color-accent, #2d5c3f);
  transform: translateY(-1px);
}
.sss-dais-breadcrumbs__link:focus-visible {
  outline: 3px solid var(--sss-color-focus, #0057a8);
  outline-offset: 2px;
}
.sss-dais-breadcrumbs__eyebrow {
  display: block;
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sss-color-text-muted, #4a5a6a);
  margin-bottom: 0.25rem;
}
.sss-dais-breadcrumbs__label {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
body.brand--the-dais .sss-dais-breadcrumbs {
  background: rgba(255,255,255,.02);
  border-top-color: rgba(255,255,255,.08);
}
body.brand--the-dais .sss-dais-breadcrumbs__link {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.92);
}
body.brand--the-dais .sss-dais-breadcrumbs__link:hover,
body.brand--the-dais .sss-dais-breadcrumbs__link:focus-visible {
  border-color: rgba(255,255,255,.35);
}
body.brand--the-dais .sss-dais-breadcrumbs__eyebrow { color: rgba(255,255,255,.55); }
body.brand--the-dais .sss-dais-breadcrumbs__label { color: rgba(255,255,255,.95); }

/* Per-category footer (sss_render_category_footer) ---------------
   ADA: body text runs at 1rem (≥16px), line-height 1.7, color tuned
   for ≥4.5:1 contrast on both the light surface and the Dais dark
   background. Links are underlined + bold so they stay distinguishable
   without relying on color alone. Lives inside .sss-series__wrap so it
   sits in the same content column as the rest of the page. */
.sss-cat-footer {
  /* Full-bleed strip — break out of the parent-theme content column so the
     footer runs wider than the episode body above it. Inner caps at 68rem
     and is centered. Padding is deliberately compact (!important guards
     against parent theme's .entry-content padding inflating this element
     back to a 3-inch block). */
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 1.5rem 1rem !important;
  background: var(--sss-color-surface-alt, rgba(0,0,0,.02));
  border-top: 1px solid var(--sss-color-border-muted, rgba(0,0,0,.08));
  box-sizing: border-box;
}
.sss-cat-footer *,
.sss-cat-footer *::before,
.sss-cat-footer *::after {
  box-sizing: border-box;
}
/* Neutralize parent-theme paragraph margins that would re-inflate the footer. */
.sss-cat-footer p { margin-top: 0 !important; }
.sss-cat-footer__inner {
  /* Footer now renders at wp_footer (body-level), so we have the full
     viewport to work with. Cap at ~85rem / 1360px for comfortable
     reading; was 68rem when constrained inside the_content column.
     !important on typography + color because Elementor HTML widgets
     embed full inline HTML documents whose unscoped `body`/`p`/`a`
     rules otherwise pollute the footer. */
  max-width: 85rem !important;
  margin: 0 auto !important;
  padding-inline: var(--sss-space-6) !important;
  font-family: var(--sss-font-body, system-ui, -apple-system, Segoe UI, Roboto, sans-serif) !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  color: var(--sss-color-text, #1a2535) !important;
  text-align: center !important;
}
.sss-cat-footer__paragraph {
  /* Centered comfortable reading column. margin: 0 auto keeps the block
     centered inside the wider footer container. */
  margin: 0 auto 0.5rem !important;
  max-width: 72ch !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  color: var(--sss-color-text, #1a2535) !important;
  text-align: center !important;
}
.sss-cat-footer__paragraph:last-child { margin-bottom: 0 !important; }

.sss-cat-footer__meta {
  margin: 0 0 0.5rem !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
  color: var(--sss-color-text-muted, #3a4a5a) !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  align-items: baseline;
  justify-content: center;
}
.sss-cat-footer__item { display: inline; }
.sss-cat-footer__sep { color: var(--sss-color-border, #4a5a6a); padding: 0 0.15rem; }

.sss-cat-footer__link {
  /* Inherits the brand's semantic link color — on the parent SSS brand this
     resolves to the accent blue; on .brand--the-dais it's sage-light.
     !important here defends against Elementor HTML widgets whose embedded
     mockups set their own `a { color: ... }` rules globally. */
  color: var(--sss-link, #0057a8) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 600 !important;
  padding: 0.1rem 0.1rem;
  border-radius: 2px;
}
.sss-cat-footer__link:hover,
.sss-cat-footer__link:focus-visible { color: var(--sss-link-hover, #0057a8); }
.sss-cat-footer__link:hover { text-decoration-thickness: 2px; }
.sss-cat-footer__link:focus-visible {
  outline: 3px solid var(--sss-link, #0057a8);
  outline-offset: 2px;
}

.sss-cat-footer__copy {
  /* Dead-centered copyright — block, full width, auto margins,
     text-align center, and all of it !important to outrank any
     embedded mockup CSS. A thin top rule visually sets it off. */
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.25rem auto 0 !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--sss-color-border-muted, rgba(0,0,0,.08)) !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
  color: var(--sss-color-text-muted, #3a4a5a) !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  float: none !important;
}
.sss-cat-footer__copy:last-child { margin-bottom: 0 !important; }
body.brand--the-dais .sss-cat-footer__copy {
  border-top-color: rgba(255,255,255,.12) !important;
}

/* Episode prev/next inside the category footer.
   Contrast on the light surface uses normal body colors (already AA).
   On the Dais dark body: see override block below — everything set to
   ≥ 7:1 (AAA). Tap targets ≥ 44px. */
.sss-cat-footer__epnav {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0 0.75rem !important;
  margin: 0 0 0.75rem !important;
  border-bottom: 1px solid var(--sss-color-border-muted, rgba(0,0,0,.08));
  text-align: left;
}
.sss-cat-footer__epnav-link {
  display: block;
  min-height: 44px;
  padding: var(--sss-space-1) 0;
  text-decoration: none;
  color: var(--sss-color-text, #1a2535);
  border-radius: 2px;
  text-align: left;
}
.sss-cat-footer__epnav-link--next { text-align: right; }
.sss-cat-footer__epnav-link:hover .sss-cat-footer__epnav-title,
.sss-cat-footer__epnav-link:focus-visible .sss-cat-footer__epnav-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sss-cat-footer__epnav-link:focus-visible {
  outline: 3px solid var(--sss-color-focus, #0057a8);
  outline-offset: 3px;
}
.sss-cat-footer__epnav-dir {
  display: block;
  font-family: var(--sss-font-mono, 'DM Mono', monospace) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--sss-color-text-muted, #3a4a5a) !important;
  margin-bottom: 0.25rem !important;
}
.sss-cat-footer__epnav-title {
  display: block;
  font-family: var(--sss-font-body, system-ui, sans-serif) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--sss-link, #0057a8) !important;
}
@media (max-width: 32rem) {
  .sss-cat-footer__epnav { grid-template-columns: 1fr; gap: var(--sss-space-3); }
  .sss-cat-footer__epnav-link--next { text-align: left; }
}

/* Dais dark-body adaptation --- contrast-checked: ------------------
   white @ .88 on #1a2535 ≈ 12:1 (AAA normal + large)
   #9ec5e8 on #1a2535    ≈ 7.3:1 (AAA normal) — link color */
body.brand--the-dais .sss-cat-footer {
  background: rgba(255,255,255,.03);
  border-top-color: rgba(255,255,255,.08);
}
body.brand--the-dais .sss-cat-footer__inner,
body.brand--the-dais .sss-cat-footer__paragraph { color: rgba(255,255,255,.88); }
body.brand--the-dais .sss-cat-footer__meta,
body.brand--the-dais .sss-cat-footer__copy { color: rgba(255,255,255,.75); }
body.brand--the-dais .sss-cat-footer__sep { color: rgba(255,255,255,.35); }
/* On the Dais dark body the semantic --sss-link is already sage-light
   (#c8e0d0 ≈ 9.8:1 AAA) via brands/the-dais.css, so we don't need to
   override colors here — just the structural bits (border-bottom, muted
   eyebrow on dark). */
body.brand--the-dais .sss-cat-footer__epnav { border-bottom-color: rgba(255,255,255,.15); }
body.brand--the-dais .sss-cat-footer__epnav-dir { color: rgba(255,255,255,.75); }

/* Dais brand override — dark body beyond the hero ---------------- */
body.brand--the-dais .sss-series {
  background: var(--sss-color-bg, #1a2535);
  color: var(--sss-color-text, #f5f7fa);
}
body.brand--the-dais .sss-ep-row {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}
body.brand--the-dais .sss-ep-row:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.25);
}
body.brand--the-dais .sss-ep-row__title { color: rgba(255,255,255,.95); }
body.brand--the-dais .sss-ep-row__meta  { color: rgba(255,255,255,.55); }
body.brand--the-dais .sss-ep-row__num   { color: #c8e0d0; }
body.brand--the-dais .sss-series__section-title { color: rgba(255,255,255,.95); }
body.brand--the-dais .sss-series__season-label { color: rgba(255,255,255,.6); }
body.brand--the-dais .sss-series__season-select {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.25);
}
body.brand--the-dais .sss-series__intro-body { color: rgba(255,255,255,.78); }

/* Hub: sub-series + season cards ------------------------------- */
.sss-hub__section { padding: var(--sss-space-8) 0; }
.sss-hub__grid {
  list-style: none;
  padding: 0;
  margin: var(--sss-space-6) 0 0;
  display: grid;
  gap: var(--sss-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 36rem) { .sss-hub__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .sss-hub__grid { grid-template-columns: repeat(3, 1fr); } }

.sss-hub__grid-item { margin: 0; }

.sss-hub__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--sss-color-border-muted, rgba(0,0,0,.1));
  border-radius: var(--sss-radius-lg, 8px);
  background: var(--sss-color-surface, #fff);
  transition: border-color .18s ease, transform .18s ease;
  height: 100%;
}
.sss-hub__card:hover {
  border-color: var(--sss-color-accent, #2d5c3f);
  transform: translateY(-2px);
}
.sss-hub__card:focus-visible {
  outline: 3px solid var(--sss-color-focus, #0057a8);
  outline-offset: 2px;
}
.sss-hub__card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--sss-color-surface-alt, #0d1a28);
  overflow: hidden;
}
.sss-hub__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sss-hub__card-body {
  padding: var(--sss-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sss-space-2);
}
.sss-hub__card-kicker {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sss-color-accent, #2d5c3f);
}
.sss-hub__card-title {
  /* Same family as .sss-hub__card-desc (inherits --sss-font-body), but larger
     and bold. Requested for legibility; the Playfair serif was too light. */
  font-family: var(--sss-font-body, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--sss-color-text, #0d1b26);
}
.sss-hub__card-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--sss-color-text-muted, #4a5a6a);
}

body.brand--the-dais .sss-hub__card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
body.brand--the-dais .sss-hub__card:hover { border-color: rgba(255,255,255,.25); }
body.brand--the-dais .sss-hub__card-title { color: rgba(255,255,255,.95); }
body.brand--the-dais .sss-hub__card-desc  { color: rgba(255,255,255,.62); }
body.brand--the-dais .sss-hub__card-kicker { color: #c8e0d0; }

/* Contact page ------------------------------------------------- */
.sss-contact { background: var(--sss-color-bg, #fff); color: var(--sss-color-text, #0d1b26); }
.sss-contact__inner {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0 var(--sss-space-6);
}
@media (min-width: 48rem) {
  .sss-contact__inner { padding: 0 var(--sss-space-8); }
}
.sss-contact__hero { padding: var(--sss-space-10) 0 var(--sss-space-6); }
.sss-contact__lede {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  max-width: 36rem;
  color: var(--sss-color-text-muted, #3a4a5a);
  margin-top: var(--sss-space-4);
}
.sss-contact__actions { padding: var(--sss-space-6) 0 var(--sss-space-10); }

.sss-contact__cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sss-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .sss-contact__cards { grid-template-columns: 1fr 1fr; }
}

.sss-contact__card {
  padding: var(--sss-space-6);
  border: 1px solid var(--sss-color-border-muted, rgba(0,0,0,.1));
  border-radius: var(--sss-radius-lg, 8px);
  background: var(--sss-color-surface, #fff);
  display: flex;
  flex-direction: column;
  gap: var(--sss-space-3);
}
.sss-contact__card-title {
  font-family: var(--sss-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}
.sss-contact__card-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sss-color-text-muted, #3a4a5a);
}
.sss-contact__card-addr { margin: 0; }
.sss-contact__email {
  font-family: var(--sss-font-mono, 'DM Mono', monospace);
  font-size: 1rem;
  color: var(--sss-color-accent, #2d5c3f);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}
.sss-contact__email:hover,
.sss-contact__email:focus-visible { color: var(--sss-color-text, #0d1b26); }
.sss-contact__card-cta { margin: auto 0 0; }

.sss-contact__body {
  margin-top: var(--sss-space-8);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 42rem;
}
.sss-contact__body p + p { margin-top: var(--sss-space-3); }

/* Dais-dark adaptation */
body.brand--the-dais .sss-contact { background: var(--sss-color-bg, #1a2535); color: #f5f7fa; }
body.brand--the-dais .sss-contact__card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
body.brand--the-dais .sss-contact__card-desc,
body.brand--the-dais .sss-contact__lede { color: rgba(255,255,255,.72); }
body.brand--the-dais .sss-contact__email { color: #c8e0d0; }
body.brand--the-dais .sss-contact__email:hover,
body.brand--the-dais .sss-contact__email:focus-visible { color: #fff; }