/* ══════════════════════════════════════
   Section landing page — filtered listing
   See: docs/claude-conversations/2026-05-02-04-section-landing-filters-brief.md
   ══════════════════════════════════════ */

.slnt-section-listing {
  max-width: 1200px;
  margin: 0 auto;
  /*padding: 0 var(--content-pad, 2rem);*/
}

@media (max-width: 799px) {
  .slnt-section-listing {
    padding: 0 var(--content-pad-mobile, 1.2rem);
  }
}

/* Section colour vars — set via data-section by the paragraph preprocess. */
.slnt-section-listing[data-section="culture"] {
  --section-color: #7C3AED;
  --section-color-pale: #f3e8ff;
}
.slnt-section-listing[data-section="sectors"] {
  --section-color: #2563EB;
  --section-color-pale: #dbeafe;
}
.slnt-section-listing[data-section="living"] {
  --section-color: #059669;
  --section-color-pale: #d1fae5;
}
.slnt-section-listing[data-section="about"] {
  --section-color: #475569;
  --section-color-pale: #f1f5f9;
}
.slnt-section-listing[data-section="explore"] {
  --section-color: #D97706;
  --section-color-pale: #fef3c7;
}

/* ── Editor-supplied heading per listing ── */
.slnt-listing__heading {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--solent-blue, #2c4f6e);
  margin: 2rem 0 0.5rem 0;
}

/* ── Layout: sidebar + content (desktop) ── */
.slnt-section-listing__layout {
  display: block;
}

@media (min-width: 800px) {
  .slnt-section-listing--has-sidebar .slnt-section-listing__layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
  }

  .slnt-section-listing__sidebar {
    position: sticky;
    top: 1rem;
    align-self: start;
  }

  /* When multiple primary-topic listings appear on the same page, only
     the first one renders its sidebar; the rest go full-width. */
  .slnt-section-listing--has-sidebar
    ~ .slnt-section-listing--has-sidebar
    .slnt-section-listing__layout {
    grid-template-columns: 1fr;
  }
  .slnt-section-listing--has-sidebar
    ~ .slnt-section-listing--has-sidebar
    .slnt-section-listing__sidebar {
    display: none;
  }
}

/* ── Filter sidebar ── */
.slnt-filter-section {
  margin-bottom: 1.5rem;
}

.slnt-filter-section__title {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 0.5rem;
}

/* Layout / typography — no overrides to fight here. */
.slnt-filter-item {
  display: block;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.15rem;
  border-radius: 4px;
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

/* Colour rules are scoped to .slnt-section-listing (the view_display
   paragraph wrapper) AND .slnt-section-filter (the page-level filter
   paragraph wrapper) to outrank .layout-content a (0,1,1) and
   .layout-content a:hover (0,2,1) from fonts.css without resorting to
   !important.

   Default — no background, solent-blue text. */
.slnt-section-listing .slnt-filter-item,
.slnt-section-filter .slnt-filter-item {
  color: var(--solent-blue, #2c4f6e);
  font-weight: 500;
  text-decoration: none;
}

/* Active — magenta-dark background, white text. */
.slnt-section-listing .slnt-filter-item.is-active,
.slnt-section-filter .slnt-filter-item.is-active {
  background-color: var(--magenta-dark, #a30065);
  color: #fff;
  font-weight: 600;
}

/* Hover on a non-active item — solent-blue background, soft-pink
   text. Listed after .is-active so equal-specificity ties resolve
   in this rule's favour for idle hover, while the more-specific
   .is-active:hover below wins on active hover. */
.slnt-section-listing .slnt-filter-item:hover,
.slnt-section-filter .slnt-filter-item:hover {
  background-color: var(--solent-blue, #2c4f6e);
  color: #f5b0d8;
  text-decoration: none;
}

/* Hover on the active item — solent-blue background, white text. */
.slnt-section-listing .slnt-filter-item.is-active:hover,
.slnt-section-filter .slnt-filter-item.is-active:hover {
  background-color: var(--solent-blue, #2c4f6e);
  color: #fff;
}

/* ── Expanded sub-topics (field_show_subterms on section_filter) ── */

/* The wrapper holding a parent option's children. Indented from the
   parent, slightly tighter spacing to mark the hierarchy visually. */
.slnt-filter-children {
  margin: 0.1rem 0 0.4rem 0.75rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--warm-grey, #f5f3f0);
}

/* Child item — slightly smaller font + tighter padding than the
   top-level options, so the visual hierarchy reads at a glance. */
.slnt-filter-item--child {
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
}

/* "All in <Section>" — italic to mark it as the parent-scope shortcut
   rather than a real sub-term. Same magenta-dark active fill. */
.slnt-filter-item--all-in {
  font-style: italic;
}

/* Parent option with an active descendant — magenta-dark text +
   underline, no fill. Reads as "this is the section your active
   leaf belongs to" without competing with the active leaf's
   magenta-dark fill below it. */
.slnt-section-filter .slnt-filter-item.is-branch-active:not(.is-active) {
  color: var(--magenta-dark, #a30065);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Hover on a branch-active parent — same solent-blue + soft-pink as
   any non-active hover. Specificity is bumped above the default
   :hover rule by adding the .is-branch-active + :not(.is-active)
   compound. */
.slnt-section-filter .slnt-filter-item.is-branch-active:not(.is-active):hover {
  background-color: var(--solent-blue, #2c4f6e);
  color: #f5b0d8;
  text-decoration: none;
}

/* ══════════════════════════════════════
   Mobile filter bar + slide-up panel
   ══════════════════════════════════════ */

.slnt-filter-bar {
  display: none;
}

.slnt-filter-overlay {
  display: none;
}

.slnt-filter-panel {
  display: none;
}

@media (max-width: 799px) {
  /* Hide the desktop sidebar; mobile uses the bar+panel pattern. */
  .slnt-section-listing__sidebar {
    display: none;
  }

  /* Sticky bar — sits below the main nav. */
  .slnt-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.6rem var(--content-pad-mobile, 1.2rem);
    margin: 0 calc(-1 * var(--content-pad-mobile, 1.2rem)) 0.8rem;
    position: sticky;
    top: 38px;
    z-index: 9;
  }

  .slnt-filter-bar__status {
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    font-size: 0.78rem;
    color: var(--text-mid, #444);
  }

  .slnt-filter-bar__status strong {
    color: var(--section-color, #475569);
    font-weight: 700;
  }

  .slnt-filter-bar__button {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: var(--solent-blue, #2c4f6e);
    color: white;
    border: none;
    padding: 0.4em 1em;
    border-radius: 4px;
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
  }

  /* Hide bar in subsequent listings — only the first listing's bar shows. */
  .slnt-section-listing--has-sidebar
    ~ .slnt-section-listing--has-sidebar
    .slnt-filter-bar,
  .slnt-section-listing--has-sidebar
    ~ .slnt-section-listing--has-sidebar
    .slnt-filter-overlay,
  .slnt-section-listing--has-sidebar
    ~ .slnt-section-listing--has-sidebar
    .slnt-filter-panel {
    display: none !important;
  }

  /* Overlay */
  .slnt-filter-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .slnt-filter-overlay.is-open {
    opacity: 1;
    pointer-events: all;
  }

  /* Slide-up panel */
  .slnt-filter-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    z-index: 101;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }
  .slnt-filter-panel.is-open {
    transform: translateY(0);
  }

  .slnt-filter-panel__handle {
    padding: 0.8rem 0 0.3rem;
    text-align: center;
    flex-shrink: 0;
  }
  .slnt-filter-panel__handle-bar {
    display: inline-block;
    width: 36px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
  }

  .slnt-filter-panel__header {
    padding: 0.3rem 1.2rem 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
  }
  .slnt-filter-panel__title {
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--solent-blue, #2c4f6e);
  }
  .slnt-filter-panel__clear {
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    font-size: 0.78rem;
    color: var(--section-color, #475569);
    font-weight: 600;
    text-decoration: none;
  }

  .slnt-filter-panel__body {
    padding: 1rem 1.2rem 1.6rem;
    overflow-y: auto;
    flex: 1 1 auto;
  }

  /* Lock background scroll when the panel is open. */
  body.slnt-filter-panel-open {
    overflow: hidden;
  }
}

/* ══════════════════════════════════════
   Section Filter paragraph — page-level
   sidebar layout via :has()
   See: docs/claude-conversations/2026-05-13-section-listing-enhancements-brief.md
   ══════════════════════════════════════ */

/* Section-colour vars on the paragraph element itself, so the panel
   "Clear" link and mobile-bar active label can pick them up. */
.paragraph--type--section-filter[data-section="culture"] { --section-color: #7C3AED; }
.paragraph--type--section-filter[data-section="sectors"] { --section-color: #2563EB; }
.paragraph--type--section-filter[data-section="living"]  { --section-color: #059669; }
.paragraph--type--section-filter[data-section="about"]   { --section-color: #475569; }
.paragraph--type--section-filter[data-section="explore"] { --section-color: #D97706; }

@media (min-width: 800px) {
  /* Apply the 220px sidebar + 1fr content grid to the IMMEDIATE
     paragraph container of the section_filter — i.e. the inner
     field_content_component on the enclosure (or, when the editor
     places the filter at the top level of the composite page, the
     outer field). Scoping `:has()` to a direct grandchild path
     (`> .field__item > .paragraph--type--section-filter`) stops the
     grid bleeding outwards to an enclosing field_content_component
     and breaking sibling paragraphs like hero_with_art_style.

     The width container — `max(var(--align-floor), calc((100% - 1200px) / 2 ...))`
     padding — is supplied by the enclosure paragraph, so the grid
     itself needs no max-width / centering. */
  .field--name-field-content-component:has(> .field__item > .paragraph--type--section-filter) {
    display: grid;
    grid-template-columns: 220px 1fr;
    column-gap: 2rem;
    row-gap: 1.5rem;
  }

  /* Default placement inside the grid: every field__item spans both
     columns. The section_filter's field__item and post-filter siblings
     override below. */
  .field--name-field-content-component:has(> .field__item > .paragraph--type--section-filter)
    > .field__item {
    grid-column: 1 / -1;
  }

  /* The field__item containing the section_filter occupies column 1.
     Grid auto-placement keeps it in the same row as the following
     listing (column 2), so the filter and listing line up at the top.
     The grid row's height is whatever the listing needs; `align-self:
     start` keeps the filter pinned to the top of that cell, and
     `position: sticky` keeps it visible as the user scrolls down the
     listing column.

     The selector duplicates the parent `:has()` clause so its
     specificity beats the default `grid-column: 1 / -1` rule above
     (both rules name the same parent class — without this, the
     default's :has() argument gives it the higher specificity and
     wins). */
  .field--name-field-content-component:has(> .field__item > .paragraph--type--section-filter)
    > .field__item:has(> .paragraph--type--section-filter) {
    grid-column: 1;
    position: sticky;
    top: 1rem;
    align-self: start;
  }

  /* field__items AFTER the section_filter's field__item sit in column 2. */
  .field--name-field-content-component:has(> .field__item > .paragraph--type--section-filter)
    > .field__item:has(> .paragraph--type--section-filter)
    ~ .field__item {
    grid-column: 2;
  }

  /* Hide the mobile bar / panel on desktop. */
  .paragraph--type--section-filter .slnt-filter-bar {
    display: none;
  }
}

/* Mobile — sidebar collapses; bar + panel handle the filter. */
@media (max-width: 799px) {
  .paragraph--type--section-filter .slnt-section-filter__sidebar {
    display: none;
  }

  /* The bar + panel CSS is inherited from the shared .slnt-filter-bar /
     .slnt-filter-panel rules above — they target the same class names
     used by the legacy per-paragraph filter. */
}

/* ══════════════════════════════════════
   Per-listing filter suppression
   When a section_filter paragraph is on the page, individual view_display
   paragraphs do not render their own filter UI (the preprocess sets
   filter_has_options to FALSE so the markup is not emitted). The CSS
   below is a belt-and-braces safety net for templates that may still
   emit the inner sidebar/bar.
   ══════════════════════════════════════ */
.field--name-field-content-component:has(> .field__item > .paragraph--type--section-filter)
  .slnt-section-listing__sidebar,
.field--name-field-content-component:has(> .field__item > .paragraph--type--section-filter)
  .slnt-section-listing .slnt-filter-bar,
.field--name-field-content-component:has(> .field__item > .paragraph--type--section-filter)
  .slnt-section-listing .slnt-filter-overlay,
.field--name-field-content-component:has(> .field__item > .paragraph--type--section-filter)
  .slnt-section-listing .slnt-filter-panel {
  display: none !important;
}

/* When the section_filter is present, view_display listings drop their
   internal grid (no sidebar to lay out alongside). */
@media (min-width: 800px) {
  .field--name-field-content-component:has(> .field__item > .paragraph--type--section-filter)
    .slnt-section-listing--has-sidebar .slnt-section-listing__layout {
    display: block;
  }
}

/* ══════════════════════════════════════
   Date filter pills (events listing exposed form)
   Drupal renders the grouped radio set as a <fieldset> with a <legend>
   for the filter label and a <div> per option containing the
   <input type="radio"> + <label.option>. We hide the radio visually
   (still keyboard- and screen-reader-accessible), then style the
   adjacent label as a pill button. Auto-submit on change is handled
   by js/date-filter.js so users don't have to find Apply on mobile.
   ══════════════════════════════════════ */

/* The whole exposed form: pills sit inline with the legend. The form
   only contains the fieldset + Apply button, so flexing the form
   itself gives us the row layout. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}

/* Remove the default fieldset chrome and lay legend + options inline. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  min-width: 0;
}

/* "when" legend — visually hidden because the pills speak for
   themselves; kept in the DOM so screen readers announce the filter
   group as "when" before each radio. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The .fieldset-wrapper and its inner radio-container div together
   hold the options. Flatten them so the radio items lay out in a
   single flex row. `display: contents` removes them from layout
   without losing their children. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] fieldset .fieldset-wrapper,
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] fieldset .fieldset-wrapper > div {
  display: contents;
}

/* Each radio + label pair lives in a .form-type-radio wrapper. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] .form-type-radio {
  margin: 0;
  padding: 0;
}

/* Visually hide the native radio but keep it focusable so keyboard
   and screen-reader users still get standard radio semantics. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] .form-type-radio input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pill — the visible label adjacent to the hidden radio. Matches the
   .slnt-filter-item padding / font-size / radius / colour states
   used by the topic filter so the two filter rows look like the same
   component. The topic items don't have a border (they rely on the
   sidebar's vertical whitespace), but date pills sit on a
   horizontal row so a solent-blue outline keeps them legible at rest. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] .form-type-radio label.option {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--solent-blue, #2c4f6e);
  border-radius: 4px;
  background: transparent;
  color: var(--solent-blue, #2c4f6e);
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
  user-select: none;
}

/* Hover on a non-checked pill — solent-blue fill, soft-pink text.
   Same as .slnt-filter-item:hover. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"]
  .form-type-radio input[type="radio"]:not(:checked) + label.option:hover {
  background-color: var(--solent-blue, #2c4f6e);
  border-color: var(--solent-blue, #2c4f6e);
  color: #f5b0d8;
}

/* Checked pill — magenta-dark fill + border, white text, matching
   .slnt-filter-item.is-active. Border-color shifts with the fill so
   total height stays the same as inactive pills. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"]
  .form-type-radio input[type="radio"]:checked + label.option {
  background-color: var(--magenta-dark, #a30065);
  border-color: var(--magenta-dark, #a30065);
  color: #fff;
  font-weight: 600;
}

/* Hover on the checked pill — solent-blue fill, white text. Same as
   .slnt-filter-item.is-active:hover (the more specific rule below
   .slnt-filter-item:hover in the topic-filter block above). */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"]
  .form-type-radio input[type="radio"]:checked + label.option:hover {
  background-color: var(--solent-blue, #2c4f6e);
  border-color: var(--solent-blue, #2c4f6e);
  color: #fff;
}

/* Keyboard focus ring on the hidden radio: visualise on the adjacent
   label so keyboard users can see which pill is focused. */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"]
  .form-type-radio input[type="radio"]:focus-visible + label.option {
  outline: 2px solid var(--magenta-dark, #a30065);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Apply submit button — auto-submit JS hides it (the JS-disabled
   fallback keeps the button visible so the form still works). */
.views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] .form-actions {
  margin: 0;
}

html.js-auto-submit .views-exposed-form[data-drupal-selector^="views-exposed-form-events-listing-"] .form-actions {
  display: none;
}

/* ══════════════════════════════════════
   Primary + Related composition (view_display_primary_and_related)
   Two views render back-to-back, each with its own exposed filter
   form and its own empty-area message. The filter still applies to
   both (they read the same ?date_filter_id= from the URL) — we just
   don't need the user to see the form (or "no results" message)
   twice.
   ══════════════════════════════════════ */

/* Hide the related side's exposed filter form — one form for both views. */
.slnt-composition__related .views-exposed-form {
  display: none;
}

/* Hide the related side's empty-area message — the primary side's
   message represents the "nothing matches" state for the whole
   composition. */
.slnt-composition__related .slnt-view-empty {
  display: none;
}

/* When the related side has results but the primary side is empty,
   also hide the primary side's empty message — saying "no events
   match" above a list of related results would mislead. */
.slnt-composition__primary:has(~ .slnt-composition__related .views-row) .slnt-view-empty {
  display: none;
}

/* ══════════════════════════════════════
   Topic kickers on teaser content
   "in" kicker — content is within the current section (ABOVE title)
   "from" kicker — content from another section, via related_topics (BELOW title)
   See: docs/claude-conversations/2026-05-17-term-display-in-kicker-brief.md
   ══════════════════════════════════════ */

/* Shared typography for both kicker types. ~75% of the event-teaser
   title size (1.25rem → ~0.95rem) so the kicker reads as adjacent to
   the title rather than as a small caption. Applies to prefix word,
   term text, and separator alike so the whole kicker is one
   consistent type size. */
.slnt-teaser__in-kicker,
.slnt-teaser__from-kicker {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Both kickers now sit BELOW the title (same DOM position; mutually
   exclusive per item). Zero block margins so the gap to neighbouring
   elements is controlled by the parent container.

   Exception: when the parent is .slnt-event-teaser__text — a flex
   column with gap: 0.55rem between every child — the kicker absorbs
   that 0.55rem as space above it. Pulled back with a negative
   margin-top in the override below. */
.slnt-teaser__in-kicker,
.slnt-teaser__from-kicker {
  margin: 0;
}

/* Negate the parent flex gap so the kicker sits flush under the
   title in event teasers. Scoped to .slnt-event-teaser__text so the
   negative margin only fires where there's a real positive gap to
   cancel (article / link / org teasers don't have flex gaps). */
.slnt-event-teaser__text > .slnt-teaser__in-kicker,
.slnt-event-teaser__text > .slnt-teaser__from-kicker {
  margin-top: -0.55rem;
}

/* Prefix words ("in", "from") — lowercase, charcoal, regular weight.
   Do NOT take the section colour. */
.slnt-teaser__in-prefix,
.slnt-teaser__from-prefix {
  color: var(--text, #1a1a1a);
  margin-right: 0.2em;
  font-weight: 400;
  text-transform: none;
}

/* Term text (linked AND plain) — uppercase, in section colour
   set inline from the helper. */
a.slnt-teaser__in-term,
.slnt-teaser__in-term--plain,
a.slnt-teaser__from-term,
.slnt-teaser__from-term--plain {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

a.slnt-teaser__in-term,
a.slnt-teaser__from-term {
  text-decoration: none;
  transition: text-decoration 0.15s;
}

a.slnt-teaser__in-term:hover,
a.slnt-teaser__from-term:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

.slnt-teaser__in-term--plain,
.slnt-teaser__from-term--plain {
  cursor: default;
}

/* Separator between chained terms (e.g. "STAGE / THEATRE SCHOOL"
   or "SECTORS / ARTS"). Charcoal, regular weight — doesn't compete
   with the coloured term text. Inherits the kicker's font-size. */
.slnt-teaser__in-separator,
.slnt-teaser__from-separator {
  color: var(--text, #1a1a1a);
  font-weight: 400;
  text-transform: none;
}