.backstageWrap { max-width: 780px; margin: 0 auto; padding: 1.5rem 20px 6rem; font-family: var(--font-mono); text-align: center; }
        .backstageWrap h1 { color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; margin: 0 0 10px; }
        .backstageSub { color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; margin-bottom: 3rem; }

        .era { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; overflow: hidden; cursor: pointer; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
        .era:hover { border-color: var(--gold-dim); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,168,76,0.1); }
        .eraHeader { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; }
        .eraHeader .eraTitle { color: var(--heading); font-size: 1rem; font-weight: 700; }
        .eraHeader .eraDates { color: var(--gold); font-size: 0.75rem; margin-top: 2px; }
        .eraChevron { color: var(--text-muted); font-size: 0.8rem; transition: transform 0.25s ease, color 0.2s ease; flex-shrink: 0; margin-left: 12px; }
        /* The org an era belongs to, next to the date. Set in the org's own
           face, at the date's size, so it reads as part of the same line
           rather than as a badge stuck on -- these entries are still Lafter
           changelog, they just exist because of the tournament. */
        .eraDates { display: flex; align-items: baseline; gap: 7px; }
        .eraVersion { color: var(--heading); font-weight: 700; }
        .eraOrg {
            font-size: 0.78rem;
            color: var(--gold-dim);
            opacity: 0.9;
            padding-left: 7px;
            border-left: 1px solid var(--border);
            line-height: 1;
        }
        .era.open .eraOrg { color: var(--gold); }
        .era.open .eraChevron { transform: rotate(90deg); color: var(--gold); }
        .eraBody { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; padding: 0 22px; opacity: 0; }
        /* Was 900px, which silently cut the bottom off any era with more than
           about seven entries -- the September one lost its last bullet and
           nothing said so. Tall enough that no era reaches it; the transition
           still animates because a max-height is still what is animating. */
        .era.open .eraBody { max-height: 2400px; padding: 0 22px 20px; opacity: 1; }
        /* Grouped by the part of the platform each change touched. The list
           is still chronological -- it is a changelog -- but inside a release
           "what changed in Muster" is answerable by scanning for the heading
           rather than by reading all of it. */
        .eraGroup + .eraGroup { margin-top: 14px; }
        .eraGroupName {
            display: flex; align-items: center; gap: 9px;
            font-family: var(--font-mono);
            font-size: 0.58rem; font-weight: 600; letter-spacing: 1.6px;
            text-transform: uppercase;
            color: var(--gold-dim);
            padding: 8px 0 6px;
        }
        .eraGroupName::after {
            content: ''; flex: 1; height: 1px; background: var(--border);
        }
        .eraBody ul { margin: 0; padding: 0; list-style: none; }
        /* The first row of a group already has the group's rule above it. */
        .eraGroup li:first-child { border-top: none; }
        .eraBody li { font-size: 0.85rem; color: var(--text); padding: 8px 0; border-top: 1px solid var(--border); line-height: 1.6; }
        .eraBody li:first-child { border-top: none; }
        .eraBody li strong { color: var(--gold); }

        /* The chevron and the link to this era's own page, together at the
           right-hand end. */
        .eraTools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 12px; }
        .eraChevron { margin-left: 0; }
        .eraPermalink {
            color: var(--text-muted); text-decoration: none;
            font-size: 0.8rem; line-height: 1;
            opacity: 0; transition: opacity 0.2s ease, color 0.2s ease;
        }
        .era:hover .eraPermalink, .eraPermalink:focus-visible { opacity: 1; }
        .eraPermalink:hover, .eraPermalink:focus-visible { color: var(--gold); outline: none; }

        /* ===== One entry, on its own page =====
           Not a card: there is nothing beside it to be a card against, and the
           thing that opens and closes on the list is already open here. */
        .entryWrap { text-align: left; }
        .entryBack {
            display: inline-block;
            color: var(--text-muted); text-decoration: none;
            font-size: 0.75rem; letter-spacing: 0.04em;
            margin-bottom: 1.4rem;
        }
        .entryBack:hover { color: var(--gold); }
        .entryTitle {
            color: var(--heading); font-family: var(--font-head);
            font-size: 1.9rem; font-weight: 700;
            margin: 0 0 8px; line-height: 1.25;
        }
        .entryStamp {
            display: flex; align-items: baseline; gap: 7px;
            color: var(--gold); font-size: 0.78rem;
            margin-bottom: 2rem;
        }
        .entryBody { border-top: 1px solid var(--border); padding-top: 4px; }
        .entryBody ul { margin: 0; padding: 0; list-style: none; }
        .entryBody li { font-size: 0.85rem; color: var(--text); padding: 8px 0; border-top: 1px solid var(--border); line-height: 1.6; }
        .entryBody li:first-child { border-top: none; }
        .entryBody li strong { color: var(--gold); }

        /* What came before and after, for somebody who arrived on a link and
           has no list around them. */
        .entryNav {
            display: flex; justify-content: space-between; gap: 20px;
            margin-top: 2.5rem; padding-top: 1.2rem;
            border-top: 1px solid var(--border);
        }
        .entryNavLink {
            display: flex; flex-direction: column; gap: 4px;
            max-width: 46%;
            text-decoration: none;
        }
        .entryNavLink.isNext { text-align: right; margin-left: auto; }
        .entryNavWhen { color: var(--gold-dim); font-size: 0.7rem; letter-spacing: 0.04em; }
        .entryNavWhat { color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }
        .entryNavLink:hover .entryNavWhat { color: var(--text); }
        .entryNavLink:hover .entryNavWhen { color: var(--gold); }

        @media (max-width: 620px) {
            .entryNav { flex-direction: column; }
            .entryNavLink { max-width: none; }
            .entryNavLink.isNext { text-align: left; margin-left: 0; }
        }