.mg-exhibitions {
    max-width: 60rem;
    margin: 0 auto;
}

.mg-exhibitions__header {
    text-align: center;
    margin-bottom: 2.25rem;
}

/* The sixth page heading, and the one that never had the shape: it was a bare
   h1 on browser defaults — 2em and bold — while the other five shared
   `clamp(1.6rem, 6vw, 3rem)` at 600. See the note by `.mg-entry__title` in
   style.css; change one of the six and change all of them. */
.mg-exhibitions__title {
    margin: 0 0 .3rem;
    font-size: clamp(1.6rem, 6vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
}

.mg-exhibitions__lede {
    margin: 0;
    color: var(--mg-ink-soft);
    font-style: italic;
}

/* Jump nav — plain scroll-to-section links, not filters. Nothing on this
   page is ever hidden; ".active" just tracks scroll position (see the
   IntersectionObserver in exhibitions.js), the way a table of contents
   highlights the section you're reading. */
.mg-ex-jump {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
    position: sticky;
    top: .75rem;
    z-index: 2;
}

.mg-ex-jump-link {
    font-family: var(--mg-fell);
    font-size: .9rem;
    letter-spacing: .04em;
    background: var(--mg-paper);
    border: 1px solid var(--mg-line);
    color: var(--mg-ink-soft);
    padding: .5rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.mg-ex-jump-link:hover {
    border-color: var(--mg-ink-soft);
}

.mg-ex-jump-link.active {
    background: var(--mg-ink);
    color: var(--mg-paper);
    border-color: var(--mg-ink);
}

.mg-ex-timeline {
    border-top: 1px solid var(--mg-line);
    border-bottom: 1px solid var(--mg-line);
    padding: 1rem 0 .9rem;
    margin-bottom: .5rem;
}

/* Not on a phone. The timeline is a horizontally scrolled ruler about a year
   and a half wide, read by dragging it sideways inside a vertically scrolling
   page — on a touch screen the two gestures fight, and what survives is a
   band of clipped pills. The card list below it already says everything the
   timeline does, in the order a phone reads. One rule covers both renderers:
   the archive's JS-built timeline and the single exhibition's `.mg-exhibit__
   timeline`, which share this class.

   The archive's lede goes with it — "Scroll the timeline to browse" is an
   instruction for a control that is no longer on the page. */
@media (max-width: 767px) {
    .mg-ex-timeline,
    .mg-exhibitions__lede {
        display: none;
    }

    /* The same phone treatment the other three archive headers get in
       style.css — ranged left, sized to the mark in the site header (the
       weight is 600 at every width, set on the base rule above). Here
       rather than there because this sheet is the only one that loads on
       this page. */
    .mg-exhibitions__header {
        text-align: left;
    }

    .mg-exhibitions__title {
        font-size: clamp(2rem, 12vw, 3rem);
        line-height: 1.2;
    }
}

.mg-ex-timeline__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.mg-ex-timeline__inner {
    position: relative;
}

.mg-ex-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--mg-line);
}

.mg-ex-month-label {
    position: absolute;
    top: 0;
    padding-left: .45rem;
    font-family: var(--mg-fell);
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--mg-ink-soft);
    white-space: nowrap;
}

.mg-ex-month-label.is-current {
    color: var(--mg-red);
}

.mg-ex-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--mg-red);
}

.mg-ex-today::after {
    content: 'Today';
    position: absolute;
    bottom: -1.3rem;
    left: .4rem;
    font-family: var(--mg-fell);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--mg-red);
    white-space: nowrap;
}

.mg-ex-pill {
    position: absolute;
    height: 2.1rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: 0 .85rem;
    font-family: var(--mg-fell);
    font-size: .86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border: 1px solid var(--mg-line);
    background: var(--mg-field);
    color: var(--mg-ink);
    transition: transform .15s ease, box-shadow .15s ease;
}

.mg-ex-pill:hover {
    transform: translateY(-1px);
}

.mg-ex-pill.is-current {
    background: var(--mg-ink);
    color: var(--mg-paper);
    border-color: var(--mg-ink);
}

.mg-ex-pill.is-past {
    opacity: .55;
}

.mg-ex-pill.is-active {
    box-shadow: 0 0 0 2px var(--mg-red);
    opacity: 1;
}

.mg-ex-section {
    margin-top: 2.5rem;
    scroll-margin-top: 3.5rem;
}

.mg-ex-section:first-child {
    margin-top: 0;
}

.mg-ex-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mg-line);
}

.mg-ex-section:first-child .mg-ex-section__head {
    padding-top: 0;
    border-top: none;
}

.mg-ex-section__title {
    margin: 0;
    font-size: 1.3rem;
    scroll-margin-top: 3.5rem;
}

.mg-ex-section__count {
    font-family: var(--mg-fell);
    color: var(--mg-ink-soft);
    font-size: .85rem;
}

.mg-ex-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mg-ex-card {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--mg-line);
    scroll-margin-top: 1.25rem;
    border-radius: 6px;
    transition: background-color .5s ease;
}

.mg-ex-card:last-child {
    border-bottom: none;
}

/* A quiet marker for whatever's on right now — the section the page opens
   scrolled to. */
#mg-ex-section-now .mg-ex-card {
    padding-left: .85rem;
    border-left: 2px solid var(--mg-red);
}

.mg-ex-card.is-highlighted {
    background-color: rgba(184, 31, 31, .1);
}

.mg-ex-card__swatch {
    width: 76px;
    height: 76px;
    border-radius: 4px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mg-serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--mg-paper);
    background-size: cover;
    background-position: center;
}

.mg-ex-card__swatch--1 { background-color: #8a6b52; }
.mg-ex-card__swatch--2 { background-color: #5c6e5a; }
.mg-ex-card__swatch--3 { background-color: #7a5468; }
.mg-ex-card__swatch--4 { background-color: #8f5a3f; }
.mg-ex-card__swatch--5 { background-color: #5f5a86; }
.mg-ex-card__swatch--6 { background-color: #4f6070; }

.mg-ex-card__title {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0 0 .2rem;
}

.mg-ex-card__dates {
    font-family: var(--mg-fell);
    font-size: .86rem;
    color: var(--mg-red);
    margin: 0 0 .15rem;
}

.mg-ex-card.is-past .mg-ex-card__dates {
    color: var(--mg-ink-soft);
}

.mg-ex-card__venue {
    color: var(--mg-ink-soft);
    font-size: .92rem;
    margin: 0 0 .5rem;
}

.mg-ex-card__excerpt {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 .5rem;
    max-width: 60ch;
}

.mg-ex-card__link {
    font-family: var(--mg-fell);
    font-size: .85rem;
    letter-spacing: .03em;
    color: var(--mg-ink);
    border-bottom: 1px solid var(--mg-ink);
    text-decoration: none;
    padding-bottom: 1px;
}

.mg-ex-card__link:hover {
    color: var(--mg-red);
    border-color: var(--mg-red);
}

.mg-ex-empty-note {
    color: var(--mg-ink-soft);
    font-style: italic;
    padding: 1rem 0;
}

@media (min-width: 48em) {
    .mg-ex-card {
        grid-template-columns: 104px 1fr;
    }

    .mg-ex-card__swatch {
        width: 104px;
        height: 104px;
        font-size: 1.6rem;
    }

    .mg-ex-card__title {
        font-size: 1.28rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mg-ex-timeline__scroll {
        scroll-behavior: auto;
    }

    .mg-ex-pill,
    .mg-ex-card {
        transition: none;
    }
}