html,
body {
    margin: 0;
    padding: 0;
}
.mu-container {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(270deg, #54bdea, #dbb9ca);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;

    /* Center emblem + heading + main content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Keep layout centered even if content wraps */
    text-align: center;
    overflow: hidden;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@font-face {
    font-family: "Nimbus Sans";
    src: url("/ttf/NimbusSans.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "Nimbus Sans", sans-serif;
}

/* 3D-like painted spinning emblem (SVG is referenced via <img src="/img/96/emblem.svg">) */
.mu-emblem3d {
    width: min(100vw, 320px);
    aspect-ratio: 78 / 49;
    position: relative;

    transform-style: preserve-3d;
    transform: rotateY(0deg) rotateX(10deg);
    animation: muSpinY 3.6s linear infinite;

    /*overall depth + separation from background*/
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.2))
        drop-shadow(0 2px 0 rgba(255, 255, 255, 0.18));
}

/* Base heading sizing (mobile sizes are overridden in media queries below) */
h1 {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.1;
}

/* specular highlight overlay */
.mu-emblem3d::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    transform: translateZ(1px);
    /*background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.1) 18%,
        rgba(255, 255, 255, 0) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0.18) 100%
    );*/
    mix-blend-mode: overlay;
    opacity: 0.9;
    pointer-events: none;
}

.mu-emblem3d__img {
    width: 100%;
    height: 100%;
    display: block;

    /* Keep original SVG fill (black) and only add depth */
    filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.25))
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.2));

    transform: translateZ(10px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* optional: pause on hover for inspection */
.mu-emblem3d:hover {
    animation-play-state: paused;
}

@keyframes muSpinY {
    0% {
        transform: rotateY(0deg) rotateX(10deg);
    }
    100% {
        transform: rotateY(360deg) rotateX(10deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mu-emblem3d {
        animation: none;
        transform: rotateY(-18deg) rotateX(10deg);
    }
}

.main-content {
    width: min(100%, 960px);
    padding: 2rem 20%;

    /* keep the block itself centered, but allow rows to align cleanly */
    text-align: left;
}

.venue {
    display: flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    gap: 1rem;

    /* fixed column sizing for nicer alignment */
    font-variant-numeric: tabular-nums;
}

.venue span,
.venue a {
    text-transform: uppercase;
    color: black;
    font-size: normal;
    white-space: nowrap;
}

.venue img {
    margin-left: 0.5em;
    transform: translateY(0.25em);
    height: 1.5em;
    box-sizing: border-box;
}

.venue a {
    text-decoration: underline;
}

.venue .town {
    width: 20%;
}
.venue .date {
    width: 6%;
}
.venue .place {
    width: 15%;
}

@media (max-width: 1024px) {
    .mu-container {
        background-size: 400% 400%; /* Keep gradient size consistent */
        background-position: 50% 50%; /* Center gradient to look good on smaller screens */
    }

    h1 {
        font-size: 4.5em;
        margin-bottom: 1.5em;
    }

    .venue {
        flex-direction: column;
        margin-bottom: 5em;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0 4.25em;
    }

    .venue > * {
        font-size: 3em;
    }
}

@media (max-width: 768px) {
    .mu-container {
        background-size: 400% 400%; /* Keep gradient size consistent */
        background-position: 50% 50%; /* Center gradient to look good on smaller screens */
    }

    /* Bigger logo + heading on mobile */
    .mu-emblem3d {
        width: min(92vw, 420px);
    }

    .venue {
        flex-direction: column;
        margin-bottom: 1em;
        align-items: flex-start;
    }
}