/* Heritage Enriching Programs world: the accent the shared sheet reads (assets/css/ds/world.css). The rangoli sits right of centre on wide screens
   and low on phones, so the veil darkens the left on wide screens and the top on narrow ones. Tokens only. */
.world--heritage-enriching-programs { --world-accent: var(--ds-accent); }
.world--heritage-enriching-programs .world__title { max-inline-size: 14ch; }
.world--heritage-enriching-programs .world__lede { max-inline-size: 34rem; }
.world--heritage-enriching-programs.is-live .world__veil { background: linear-gradient(to bottom, color-mix(in srgb, var(--ds-overlay-surface) 82%, transparent), color-mix(in srgb, var(--ds-overlay-surface) 40%, transparent) 45%, transparent 62%), linear-gradient(to top, color-mix(in srgb, var(--ds-overlay-surface) 70%, transparent), transparent 30%); }
@media (min-width: 48rem) {
  .world--heritage-enriching-programs.is-live .world__veil { background: linear-gradient(to right, color-mix(in srgb, var(--ds-overlay-surface) 78%, transparent), color-mix(in srgb, var(--ds-overlay-surface) 30%, transparent) 42%, transparent 58%), linear-gradient(to top, color-mix(in srgb, var(--ds-overlay-surface) 55%, transparent), transparent 35%); }
}
/* without the scene the still is a dense, finished rangoli under the text: a deeper veil keeps the words readable, the lower rings stay clear */
.world--heritage-enriching-programs:not(.is-live) .world__veil { background: linear-gradient(to bottom, color-mix(in srgb, var(--ds-overlay-surface) 90%, transparent), color-mix(in srgb, var(--ds-overlay-surface) 80%, transparent) 55%, color-mix(in srgb, var(--ds-overlay-surface) 30%, transparent) 80%, transparent); }
@media (max-width: 47.99rem) { /* phones: the still sits in the lower part of the stage, so the whole rangoli shows below the words */
  .world--heritage-enriching-programs:not(.is-live) .world__still { align-self: end; block-size: 72%; }
}