body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

:focus-visible {
    outline: 3px solid var(--focus-ring, var(--color-focus));
    outline-offset: 3px;
}

/* Dark surfaces: focus ring, eyebrow and muted text switch to colours that keep AA contrast. */
.skip-link,
.section--dark,
.path-card--dark,
.action-section,
.content-hero,
.content-card--dark,
.legal-meta,
.exhibitor-hero,
.directory-hero,
.profile-hero,
.register-hero,
.event-reminder,
.hero__media,
.blog-status,
.programme-status,
.visitor-status,
.ops-metric,
.footer,
.cookie-banner {
    --focus-ring: var(--color-lime);
    --eyebrow-color: var(--color-magenta-on-dark);
    --muted-color: var(--color-muted-on-dark);
}

/* Screen-reader-only text. */
.sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Long German compounds must wrap instead of overflowing narrow screens. */
h1,
h2,
h3 {
    hyphens: auto;
    overflow-wrap: break-word;
}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

/* Accessibility: skip-to-content link (WCAG 2.4.1 Bypass Blocks) */
.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--color-ink);
    color: var(--color-paper);
    border-radius: 0 0 6px 6px;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
}

.container {
    width: min(var(--container), calc(100% - 32px));
    margin-inline: auto;
}

.eyebrow {
    color: var(--eyebrow-color, var(--color-magenta));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.eyebrow--light {
    color: var(--color-lime);
}

.section {
    padding: clamp(64px, 8vw, 112px) 0;
}

.section--light {
    background: var(--color-paper);
}

.section--cream {
    background: var(--color-soft);
}

.section--dark {
    background: var(--color-ink);
    color: var(--color-white);
}

.section__header {
    max-width: 760px;
    margin-bottom: 32px;
}

.section__title {
    margin-top: 10px;
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.section__title--light {
    color: var(--color-white);
}

.section__lead {
    margin-top: 18px;
    color: var(--muted-color, var(--color-muted));
    font-size: 1.08rem;
}

.section__lead--light {
    color: rgba(255, 255, 255, 0.78);
}

.section__body {
    color: var(--color-ink-2);
    font-size: 1.08rem;
}

.section__split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 7vw, 92px);
    align-items: start;
}

/* E2E P2a (E16): section titles with --fit-em (Renderer::fitEm, set in the template) shrink until
   their longest word fits the column instead of breaking inside it; see hero.css. */
@supports (width: 1cqi) {
    .section__header {
        container-type: inline-size;
    }

    .section__header .section__title {
        font-size: clamp(1.25rem, 100cqi / var(--fit-em, 0.01), clamp(2rem, 5vw, 4.2rem));
    }
}