/* Concept ribbon. Colours from assets/css/tokens.css (--ribbon-*). */
.epe-ribbon {
    position: relative; z-index: 1000;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px;
    padding: 8px 16px;
    background: var(--ribbon-bg); color: var(--ribbon-muted);
    border-bottom: 1px solid var(--ribbon-rule);
    font: var(--ribbon-weight) var(--ribbon-size)/var(--ribbon-leading) var(--ribbon-font);
    letter-spacing: var(--ribbon-track); text-transform: uppercase; text-align: center;
}
.epe-ribbon-link { color: var(--ribbon-text); text-underline-offset: 3px; }
.epe-ribbon-link:focus-visible { outline: 2px solid var(--ribbon-text); outline-offset: 2px; }
.epe-ribbon-short { display: none; }
/* Phones: one line, the short words. The long text stays the landmark's accessible name. */
@media (max-width: 639px) {
    .epe-ribbon { flex-wrap: nowrap; gap: 14px; padding: 7px 14px; white-space: nowrap; }
    .epe-ribbon-long { display: none; }
    .epe-ribbon-short { display: inline; }
    .epe-ribbon-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .epe-ribbon-link { flex: none; }
}