/*!
 * Plinth — an Omeka Classic theme by RefBytes, built on the Theme Engine.
 *
 * A gallery wall: white space, works shown whole at their own shape, and
 * wall labels beside them. The engine's stylesheets (engine.css and
 * classic.css) style every page from the --v-* design tokens. Plinth's
 * design goes below, in the "theme" layer: after the engine's layers, so it
 * wins over the engine's rules (whatever their specificity), while Omeka
 * core CSS, plugin CSS and an admin's custom CSS still win over both.
 *
 * Plinth's own settings arrive as attributes and body classes:
 * - Header layout: .v-header[data-layout=rail|bar|overlay], and
 *   body.v-header-*. A side rail, a top bar, or a bar floating on the home
 *   page banner. Below 64em every layout is a top bar with a menu button.
 * - Grids of works: body.pl-grid-masonry|rows|even. plinth.js sets each
 *   card's shape (--pl-ar) and the staggered spans; without it, staggered
 *   grids are plain rows of cards and rows of equal height use squares.
 * - How works are hung: body.pl-art-hung|mat|frame|flat, for the images of
 *   works in grids, on item pages, on the home page and in exhibits.
 *
 * The same design as Plinth for Omeka S, on Classic's pages: the item page
 * puts the work and its wall label side by side, and the home page, Exhibit
 * Builder and Simple Pages (with their content classes) get the gallery
 * wall too (see "Omeka Classic pages" at the end).
 */
@layer theme {
    /* ------------------------------------------------------------------
       Plinth's own tokens
       ------------------------------------------------------------------ */
    :root {
        --pl-rail-w: clamp(16rem, 18vw, 19rem);
        /* The wall behind a work, the mat around a print, a frame. */
        --pl-wall: var(--v-surface-sunken);
        --pl-mat: color-mix(in srgb, #f8f6f1 84%, var(--v-bg));
        --pl-mat-edge: color-mix(in srgb, #000 12%, var(--pl-mat));
        --pl-frame: #1f1d1b;
        --pl-hang: 0 1px 2px rgb(0 0 0 / 0.12), 0 16px 30px -14px rgb(0 0 0 / 0.42);
        --pl-row-h: calc(var(--v-grid-min) * 0.85);
        --pl-gap-x: var(--v-space-l);
        --pl-gap-y: var(--v-space-xl);
    }
    .v-preset-salon { --pl-frame: #3b2a1e; }

    /* ------------------------------------------------------------------
       Type: titles in the heading font, labels small in the body font
       ------------------------------------------------------------------ */
    .v-page-title { font-size: var(--v-step-6); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
    .v-page__header { margin-block: var(--v-space-l) var(--v-space-m); }
    .v-kicker {
        font-family: var(--v-font-body);
        font-size: var(--v-step-n2);
        font-weight: 600;
        letter-spacing: 0.14em;
        color: var(--v-accent-text);
    }
    /* Section headings: the home page's sections and the headings of page
       and exhibit text (a heading on its own in an exhibit block). */
    .v-preview__heading, .v-subnav__heading, .v-browse__subheading,
    :is(.v-prose, .v-home__intro) > h2,
    .v-exhibit-text > :is(h2, h3):only-child {
        font-size: var(--v-step-3);
        line-height: 1.1;
    }

    /* ------------------------------------------------------------------
       Header: every layout
       ------------------------------------------------------------------ */
    .v-brand__title { font-size: var(--v-step-2); line-height: 1.05; letter-spacing: -0.005em; }
    .v-nav a, .v-nav li > span { font-weight: 500; }
    .v-header__inner { padding-block: var(--v-space-s); }

    /* Top bar (and the bar over a hero): name left, menu right. */
    @media (min-width: 64em) {
        .v-header:is([data-layout=bar], [data-layout=overlay]) .v-header__inner {
            grid-template-columns: auto minmax(0, 1fr) auto auto;
            grid-template-areas: "brand nav search tools";
        }
        .v-header:is([data-layout=bar], [data-layout=overlay]) .v-header__inner:has(.v-search[data-search-mode=toggle]) {
            grid-template-columns: auto minmax(0, 1fr) auto;
            grid-template-areas: "brand nav tools" "search search search";
        }
        .v-header:is([data-layout=bar], [data-layout=overlay]) .v-nav > ul { justify-content: flex-end; }
        /* Long menus get their own row on mid-size screens. */
        @media (max-width: 89.99em) {
            .v-header:is([data-layout=bar], [data-layout=overlay]) .v-header__inner:has(.v-nav > ul > li:nth-child(6)) {
                grid-template-columns: minmax(0, 1fr) auto auto;
                grid-template-areas: "brand search tools" "nav nav nav";
            }
            .v-header:is([data-layout=bar], [data-layout=overlay]) .v-header__inner:has(.v-nav > ul > li:nth-child(6)):has(.v-search[data-search-mode=toggle]) {
                grid-template-areas: "brand tools tools" "search search search" "nav nav nav";
            }
            .v-header:is([data-layout=bar], [data-layout=overlay]) .v-header__inner:has(.v-nav > ul > li:nth-child(6)) .v-nav > ul {
                justify-content: flex-start;
                margin-inline-start: -0.6em;
            }
        }
    }

    /* ------------------------------------------------------------------
       Header: side rail (wide screens)
       The page becomes two columns: the rail, sticky and as tall as the
       window, and the page itself. Omeka's admin bar (for logged-in users)
       and the announcement bar stay full width above both.
       ------------------------------------------------------------------ */
    @media (min-width: 64em) {
        body.v-header-rail {
            display: grid;
            grid-template-columns: var(--pl-rail-w) minmax(0, 1fr);
            grid-template-rows: auto auto 1fr auto;
            grid-template-areas: "userbar userbar" "topbar topbar" "rail main" "rail footer";
            /* Nothing sits above the page, so nothing needs room under a
               sticky header (the engine measures the header otherwise). */
            --v-sticky-offset: 0px;
        }
        html:has(> body.v-header-rail) { scroll-padding-block-start: var(--v-space-s); }
        body.v-header-rail > * { grid-column: 2; }
        body.v-header-rail > #admin-bar { grid-area: userbar; }
        body.v-header-rail > .v-topbar { grid-area: topbar; }
        body.v-header-rail > .v-main { grid-area: main; min-width: 0; }
        body.v-header-rail > .v-footer { grid-area: footer; min-width: 0; }
        body.v-header-rail > .v-header {
            grid-area: rail;
            position: sticky;
            inset-block-start: 0;
            align-self: start;
            height: 100vh;
            height: 100dvh;
            overflow-y: auto;
            overscroll-behavior: contain;
            border-block-end: 0;
            border-inline-end: 1px solid var(--v-header-border);
            box-shadow: none;
        }
        .v-header[data-layout=rail] .v-header__inner {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto 1fr auto auto;
            grid-template-areas: "brand" "nav" "." "search" "tools";
            align-items: start;
            min-height: 100%;
            max-width: none;
            padding: var(--v-space-l) 1.25rem var(--v-space-m);
            row-gap: var(--v-space-l);
        }
        .v-header[data-layout=rail] .v-brand { flex-direction: column; align-items: flex-start; row-gap: var(--v-space-2xs); }
        .v-header[data-layout=rail] .v-brand__link { flex-direction: column; align-items: flex-start; }
        .v-header[data-layout=rail] .v-brand__title { font-size: var(--v-step-3); line-height: 1; }
        .v-header[data-layout=rail] .v-brand__logo { max-width: 100%; }
        .v-header[data-layout=rail] .v-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
        .v-header[data-layout=rail] .v-nav a,
        .v-header[data-layout=rail] .v-nav li > span {
            position: relative;
            min-height: 2.5rem;
            padding-inline: 0;
            border-radius: 0;
        }
        .v-header[data-layout=rail] .v-nav a:hover { background: none; }
        /* The current page: a bar at the rail's edge, in the accent color. */
        .v-header[data-layout=rail] .v-nav :is(a[aria-current=page], li.active > a) { font-weight: 700; text-decoration: none; }
        .v-header[data-layout=rail] .v-nav :is(a[aria-current=page], li.active > a)::before {
            content: "";
            position: absolute;
            inset-block: 0.6em;
            inset-inline-start: -1.25rem;
            width: 3px;
            background: var(--v-header-accent);
        }
        /* Submenus open in place, under their item. */
        .v-header[data-layout=rail] .v-nav > ul > li.has-submenu { position: static; flex-wrap: wrap; }
        .v-header[data-layout=rail] .v-nav > ul > li > ul {
            position: static;
            min-width: 0;
            padding: 0 0 var(--v-space-2xs) var(--v-space-s);
            background: none;
            color: inherit;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            --v-header-hover: inherit;
        }
        .v-header[data-layout=rail] .v-nav li.has-submenu > a { flex: 1 1 0; }
        :root:not(.js) .v-header[data-layout=rail] .v-nav > ul > li > ul { display: block; }
        .v-header[data-layout=rail] .v-search[data-search-mode=field] { width: 100%; }
        /* The button sits inside the field, so the whole placeholder fits
           the rail's width. */
        .v-header[data-layout=rail] .v-search-form { position: relative; }
        .v-header[data-layout=rail] .v-search-form input[type=search] {
            font-size: var(--v-step-n1);
            padding-inline-end: 2.25rem;
            border-radius: var(--v-radius-button);
        }
        .v-header[data-layout=rail] .v-search-form__submit {
            position: absolute;
            inset-block: 1px;
            inset-inline-end: 1px;
            width: 2.25rem;
            padding: 0;
            border: 0;
            border-radius: var(--v-radius-button);
            background: transparent;
            color: var(--v-text);
        }
        .v-header[data-layout=rail] .v-search-form__submit:hover { background: var(--v-surface-alt); color: var(--v-text); }
        :root.js .v-header[data-layout=rail] .v-search.is-open { padding: 0; }
        .v-header[data-layout=rail] .v-header__tools { justify-content: flex-start; flex-wrap: wrap; gap: var(--v-space-2xs); }
        .v-header[data-layout=rail] .v-header__cta { margin-inline-start: 0; }
        /* The rail's tools sit at its foot: the light/dark panel opens upward. */
        .v-header[data-layout=rail] .v-scheme__panel {
            inset-block: auto calc(100% + var(--v-space-3xs));
            inset-inline: 0 auto;
        }
    }

    /* ------------------------------------------------------------------
       Header over the image
       On the home page, when it opens with its banner (the text over or
       below the image), the bar floats on the image: transparent, white text on a dark band that fades out below it
       (white stays above 4.5:1 over any image: the band is at least 58%
       black wherever there is text). Scrolled with a sticky header, or on
       any other page, it is a plain top bar. A flash message or a plugin's
       content above the banner keeps the plain bar.
       ------------------------------------------------------------------ */
    body.v-header-overlay:has(> .v-main > .v-home:first-child > .v-home__hero:first-child:is(.v-hero--overlay, .v-hero--below):not(.v-hero--plain)) > .v-header {
        margin-block-end: calc(-1 * var(--pl-header-h, 5.5rem));
    }
    body.v-header-overlay:has(> .v-main > .v-home:first-child > .v-home__hero:first-child:is(.v-hero--overlay, .v-hero--below):not(.v-hero--plain)) > .v-header:not(.is-stuck) {
        --v-header-bg: transparent;
        --v-header-text: #fff;
        --v-header-muted: #fff;
        --v-header-accent: #fff;
        --v-header-border: rgb(255 255 255 / 0.4);
        --v-header-hover: rgb(255 255 255 / 0.16);
        --v-focus: #fff;
        --v-focus-halo: #000;
        min-height: 5.5rem;
        background: linear-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.58));
        border-block-end-color: transparent;
    }
    body.v-header-overlay:has(> .v-main > .v-home:first-child > .v-home__hero:first-child:is(.v-hero--overlay, .v-hero--below):not(.v-hero--plain)) > .v-header:not(.is-stuck)::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        height: 5rem;
        background: linear-gradient(rgb(0 0 0 / 0.58), rgb(0 0 0 / 0));
        pointer-events: none;
    }
    /* A light logo (the dark-mode logo) reads on the band. */
    body.v-header-overlay:has(> .v-main > .v-home:first-child > .v-home__hero:first-child:is(.v-hero--overlay, .v-hero--below):not(.v-hero--plain)) > .v-header:not(.is-stuck) .v-brand__logo--light:has(+ .v-brand__logo--dark) { display: none; }
    body.v-header-overlay:has(> .v-main > .v-home:first-child > .v-home__hero:first-child:is(.v-hero--overlay, .v-hero--below):not(.v-hero--plain)) > .v-header:not(.is-stuck) .v-brand__logo--dark { display: block; }
    body.v-header-overlay > .v-main > .v-home:first-child > .v-home__hero.v-hero--overlay:first-child:not(.v-hero--plain) {
        min-height: clamp(30rem, 88vh, 60rem);
    }
    body.v-header-overlay > .v-main > .v-home:first-child > .v-home__hero.v-hero--below:first-child:not(.v-hero--plain) .v-hero__image {
        height: clamp(24rem, 62vh, 42rem);
    }

    /* ------------------------------------------------------------------
       Hero banner: the image full bleed, its words on a label
       (the home page banner with its text over the image, and v-hero in
       page and exhibit text; a banner without a picture is a band of wall
       with its label. An exhibit's cover is a work: see Exhibits.)
       ------------------------------------------------------------------ */
    .v-hero:not(.v-hero--split, .v-hero--below) {
        min-height: clamp(26rem, 78vh, 52rem);
        background: var(--pl-wall);
        color: var(--v-text);
        --v-heading: inherit;
        --v-focus: inherit;
        --v-focus-halo: inherit;
    }
    .v-hero:not(.v-hero--split, .v-hero--below)::before { display: none; }
    .v-hero.v-hero--plain { min-height: 0; padding-block: var(--v-space-xl) 0; }
    /* Page and exhibit text style images: not a banner's. */
    .v-hero > .v-hero__image { height: 100%; max-width: none; border-radius: 0; }
    .v-hero:not(.v-hero--split, .v-hero--below) .v-hero__content {
        width: auto;
        max-width: min(34rem, 100% - 2 * var(--v-gutter));
        margin: 0 auto var(--v-space-l) var(--v-bleed);
        padding: var(--v-space-m);
        background: var(--v-bg);
        color: var(--v-text);
        --v-flow-space: var(--v-space-2xs);
    }
    .v-hero__content > * { margin-block-end: 0; }
    .v-hero__content > * + * { margin-block-start: var(--v-space-2xs); }
    .v-hero__title { font-size: var(--v-step-4); line-height: 1.04; max-width: none; color: var(--v-heading); }
    .v-hero:not(.v-hero--split, .v-hero--below) :is(.v-hero__text, .v-hero__content > p:not([class])) { font-size: var(--v-step-0); max-width: none; color: var(--v-text-muted); }
    .v-hero__content > .v-hero__text:first-of-type, .v-hero__title + p:not([class]) { margin-block-start: var(--v-space-3xs); }
    .v-hero .v-hero__text > * + * { margin-block-start: 0; }
    .v-hero .v-kicker { color: var(--v-accent-text); opacity: 1; }
    .v-hero__credit { color: var(--v-text-muted); }
    /* A link on its own line under a banner's words is its button. */
    .v-hero__content > p:not([class]):has(> a:only-child) { margin-block-start: var(--v-space-s); }
    .v-hero__content > p:not([class]) > a:only-child {
        display: inline-flex;
        align-items: center;
        min-height: var(--v-touch);
        padding: 0.5em 1.15em;
        border: 2px solid var(--v-primary);
        border-radius: var(--v-radius-button);
        font-weight: 600;
        text-decoration: none;
    }
    .v-hero .v-button, .v-hero__content > p:not([class]) > a:only-child { background: var(--v-primary); border-color: var(--v-primary); color: var(--v-on-primary); }
    .v-hero .v-button:hover, .v-hero__content > p:not([class]) > a:only-child:hover { background: var(--v-primary-hover); border-color: var(--v-primary-hover); color: var(--v-on-primary-hover); }
    .v-buttons-outline .v-hero .v-button { background: transparent; color: var(--v-primary-text); }

    /* ------------------------------------------------------------------
       Cards: the work, then its caption
       ------------------------------------------------------------------ */
    .v-card__body { padding: var(--v-space-xs) 0 0; gap: 0.2rem; }
    .v-card__title {
        font-family: var(--v-font-heading);
        font-weight: var(--v-heading-weight);
        font-size: var(--v-step-1);
        line-height: 1.15;
    }
    .v-card:hover .v-card__link { text-decoration-thickness: 1px; }

    /* List view: a catalogue. Each row a thumbnail on its wall, then the
       title, caption and a few lines of the description, rows parted by
       hairlines. */
    :is(.v-results[data-layout=list]:not([data-switchable]), :root:not([data-browse-layout=grid]) .v-results[data-switchable][data-layout=list], :root[data-browse-layout=list] .v-results[data-switchable]) {
        gap: 0;
        border-block-start: 1px solid var(--v-border);
    }
    :is(.v-results[data-layout=list]:not([data-switchable]), :root:not([data-browse-layout=grid]) .v-results[data-switchable][data-layout=list], :root[data-browse-layout=list] .v-results[data-switchable]) > .v-card {
        padding-block: var(--v-space-m);
        border-block-end: 1px solid var(--v-border);
    }
    :is(.v-results[data-layout=list]:not([data-switchable]), :root:not([data-browse-layout=grid]) .v-results[data-switchable][data-layout=list], :root[data-browse-layout=list] .v-results[data-switchable]) .v-card__media {
        flex-basis: clamp(6rem, 18%, 10rem);
        align-self: start;
        background: var(--pl-wall);
    }
    :is(.v-results[data-layout=list]:not([data-switchable]), :root:not([data-browse-layout=grid]) .v-results[data-switchable][data-layout=list], :root[data-browse-layout=list] .v-results[data-switchable]) .v-card__media:not(.v-card__media--empty) img {
        padding: 8%;
    }
    :is(.v-results[data-layout=list]:not([data-switchable]), :root:not([data-browse-layout=grid]) .v-results[data-switchable][data-layout=list], :root[data-browse-layout=list] .v-results[data-switchable]) .v-card__body {
        align-content: start;
        gap: var(--v-space-3xs);
        padding: 0 0 0 clamp(var(--v-space-s), 3vw, var(--v-space-xl));
    }
    :is(.v-results[data-layout=list]:not([data-switchable]), :root:not([data-browse-layout=grid]) .v-results[data-switchable][data-layout=list], :root[data-browse-layout=list] .v-results[data-switchable]) .v-card__text {
        max-width: var(--v-measure);
        margin-block-start: var(--v-space-2xs);
        font-size: var(--v-step-0);
        line-height: 1.55;
    }

    /* ------------------------------------------------------------------
       Grids of works
       Grid mode only: list mode (chosen in settings or by visitors) keeps
       the engine's rows. Featured-first lists keep their big first card.
       Card lists in page text (the engine's .v-results, whether a page's
       text or a block prints them) and exhibit galleries with uncropped
       images follow the same grid.
       ------------------------------------------------------------------ */
    :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]):not(.v-results--featured),
    .v-exhibit-gallery {
        gap: var(--pl-row-gap, var(--pl-gap-y)) var(--pl-gap-x);
        align-items: start;
    }
    :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]) :is(.v-card, .v-card__media) {
        overflow: visible;
    }

    /* Image cards (exhibitions, places): larger, three to a row. */
    .v-results--assets { --v-grid-min: 18rem; }

    /* Staggered columns: plinth.js turns the rows into 4px tracks and has
       each card span its own height (it reads --pl-masonry). */
    .pl-grid-masonry :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]):not(.v-results--featured),
    .pl-grid-masonry .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery {
        --pl-masonry: 1;
    }
    .pl-grid-masonry [data-pl-masonry] { grid-auto-rows: 4px; --pl-row-gap: 0px; }

    /* Rows of equal height: each card grows in proportion to its image's
       shape (--pl-ar, width over height), so a row's images share one
       height; the last row keeps its natural size. */
    .pl-grid-rows :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]):not(.v-results--featured),
    .pl-grid-rows .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery {
        display: flex;
        flex-wrap: wrap;
        gap: var(--pl-gap-y) var(--v-space-m);
    }
    .pl-grid-rows :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]):not(.v-results--featured)::after,
    .pl-grid-rows .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery::after {
        content: "";
        flex: 999 1 0;
    }
    .pl-grid-rows :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]):not(.v-results--featured) > .v-card,
    .pl-grid-rows .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery > li {
        flex: calc(var(--pl-ar, 1) * 100) 1 calc(var(--pl-ar, 1) * var(--pl-row-h));
        min-width: 0;
        max-width: 100%;
    }
    .pl-grid-rows :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]):not(.v-results--featured) .v-card__media:not(.v-card__media--empty),
    .pl-grid-rows .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery > li > a {
        aspect-ratio: var(--pl-ar, 1);
    }
    .pl-grid-rows .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery > li > a img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Even squares: every work whole, centered on a square of wall. */
    .pl-grid-even :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]) .v-card__media:not(.v-card__media--empty),
    .pl-grid-even .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery > li > a {
        position: relative;
        aspect-ratio: 1;
        background: var(--pl-wall);
    }
    .pl-grid-even :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]) .v-card__media:not(.v-card__media--empty) img,
    .pl-grid-even .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery > li > a img {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        max-width: 80%;
        max-height: 80%;
        margin: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }

    /* Works at their own shape (staggered and rows). */
    :is(.pl-grid-masonry, .pl-grid-rows) :is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]) .v-card__media img,
    .pl-grid-masonry .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery > li > a img {
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }

    /* ------------------------------------------------------------------
       How works are hung: grids (grid mode), the item page's work, the
       home page's featured exhibit, and works in exhibits and page text.
       Image cards (pictures of galleries, of the building) are
       photographs, not works: not hung.
       ------------------------------------------------------------------ */
    .pl-art-hung :is(:is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]):not(.v-results--assets) .v-card__media, .v-feature__media, .v-spotlight__media, .v-exhibit-figure) img,
    .pl-art-hung :is(.v-gallery__image, .v-exhibit__hero .v-hero__image) {
        box-shadow: var(--pl-hang);
    }
    .pl-art-mat :is(:is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]):not(.v-results--assets) .v-card__media, .v-feature__media, .v-spotlight__media, .v-exhibit-figure) img,
    .pl-art-mat :is(.v-gallery__image, .v-exhibit__hero .v-hero__image) {
        padding: clamp(0.5rem, 7%, 2.75rem);
        background: var(--pl-mat);
        border: 1px solid var(--pl-mat-edge);
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 10px 22px -14px rgb(0 0 0 / 0.35);
    }
    .pl-art-frame :is(:is(.v-results[data-layout=grid]:not([data-switchable]), :root:not([data-browse-layout=list]) .v-results[data-switchable][data-layout=grid], :root[data-browse-layout=grid] .v-results[data-switchable]):not(.v-results--assets) .v-card__media, .v-feature__media, .v-spotlight__media, .v-exhibit-figure) img,
    .pl-art-frame :is(.v-gallery__image, .v-exhibit__hero .v-hero__image) {
        padding: clamp(0.4rem, 5.5%, 2.25rem);
        background: var(--pl-mat);
        border: clamp(4px, 0.55vw, 9px) solid var(--pl-frame);
        box-shadow: var(--pl-hang);
    }
    :is(.pl-art-hung, .pl-art-mat, .pl-art-frame, .pl-art-flat) :is(.v-feature__media, .v-spotlight__media, .v-exhibit-figure) img { border-radius: 0; }
    .v-spotlight__media img { background: none; }

    /* ------------------------------------------------------------------
       Item pages: the work on its wall, the label beside it
       Classic's item page prints the work (with previous/next links) above
       the item's record and its panels. Plinth lays the page out as a grid
       instead: the work, its wall label and panels beside it, the full
       record under the work, then previous and next. On one column the
       label comes right after the work.
       ------------------------------------------------------------------ */
    .v-gallery__zoom {
        display: grid;
        place-items: center;
        padding: clamp(1.25rem, 5vw, 4.5rem);
        background: var(--pl-wall);
        border-radius: 0;
        overflow: visible;
    }
    .v-gallery__image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: min(72vh, 46rem);
        object-fit: fill;
    }
    .v-gallery__render { border-radius: 0; background: var(--pl-wall); }
    .v-gallery__caption { margin-block-start: var(--v-space-2xs); color: var(--v-text-muted); }
    .v-gallery__caption a { color: inherit; }

    .v-resource--item {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "work" "label" "values" "steps" "extra";
        align-items: start;
        width: 100%;
        max-width: calc(var(--v-container) + 2 * var(--v-gutter));
        margin-inline: auto;
        padding-inline: var(--v-gutter);
    }
    /* Without a wall label, the record comes before the panels. */
    .v-resource--item:not(:has(.v-wall-label)) { grid-template-areas: "head" "work" "values" "label" "steps" "extra"; }
    .v-resource--item > .v-container { max-width: none; margin-inline: 0; padding-inline: 0; min-width: 0; }
    .v-resource--item > .v-container:first-child { grid-area: head; }
    .v-resource--item > .v-resource__top, .v-resource--item > .v-resource__body { display: contents; }
    .v-resource--item > .v-resource__top > .v-gallery { grid-area: work; min-width: 0; margin-block-end: var(--v-space-l); }
    .v-resource--item > .v-resource__top > .v-prevnext { grid-area: steps; margin-block-start: var(--v-space-xl); }
    .v-resource--item > .v-resource__body > .v-resource__main { grid-area: values; min-width: 0; }
    .v-resource--item > .v-resource__body > .v-resource__sidebar { grid-area: label; min-width: 0; margin-block-end: var(--v-space-xl); }
    .v-resource--item:not(:has(.v-wall-label)) > .v-resource__body > .v-resource__sidebar { margin-block: var(--v-space-xl) 0; }
    .v-resource--item > .v-resource__extra { grid-area: extra; margin-block-start: var(--v-space-xl); }
    /* An artist's works: the whole width, after everything else. */
    .v-resource--item > .v-resource__bottom { grid-column: 1 / -1; min-width: 0; margin-block-start: var(--v-space-2xl); }
    .v-resource--item .v-resource__sidebar { position: static; max-width: var(--v-measure); }

    /* Side by side: wide screens (beside a side rail, from 80em). */
    @media (min-width: 64em) {
        body:not(.v-header-rail) .v-resource--item:has(> .v-resource__body[data-layout=sidebar-right]) {
            grid-template-columns: minmax(0, 1fr) minmax(17rem, 25rem);
            grid-template-rows: auto auto 1fr auto auto;
            grid-template-areas: "head head" "work label" "values label" "steps steps" "extra extra";
            column-gap: var(--v-space-2xl);
        }
        body:not(.v-header-rail) .v-resource--item:has(> .v-resource__body[data-layout=sidebar-left]) {
            grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr);
            grid-template-rows: auto auto 1fr auto auto;
            grid-template-areas: "head head" "label work" "label values" "steps steps" "extra extra";
            column-gap: var(--v-space-2xl);
        }
        body:not(.v-header-rail) .v-resource--item:has(> .v-resource__body:is([data-layout=sidebar-right], [data-layout=sidebar-left])) .v-resource__sidebar {
            max-width: none;
            margin-block-end: 0;
        }
        body:not(.v-header-rail) .v-resource--item:has(> .v-resource__body:is([data-layout=sidebar-right], [data-layout=sidebar-left])):has(.v-wall-label) .v-resource__sidebar { padding-block-start: var(--v-space-s); }
    }
    @media (min-width: 80em) {
        .v-resource--item:has(> .v-resource__body[data-layout=sidebar-right]) {
            grid-template-columns: minmax(0, 1fr) minmax(17rem, 25rem);
            grid-template-rows: auto auto 1fr auto auto;
            grid-template-areas: "head head" "work label" "values label" "steps steps" "extra extra";
            column-gap: var(--v-space-2xl);
        }
        .v-resource--item:has(> .v-resource__body[data-layout=sidebar-left]) {
            grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr);
            grid-template-rows: auto auto 1fr auto auto;
            grid-template-areas: "head head" "label work" "label values" "steps steps" "extra extra";
            column-gap: var(--v-space-2xl);
        }
        .v-resource--item:has(> .v-resource__body:is([data-layout=sidebar-right], [data-layout=sidebar-left])) .v-resource__sidebar {
            max-width: none;
            margin-block-end: 0;
        }
        .v-resource--item:has(> .v-resource__body:is([data-layout=sidebar-right], [data-layout=sidebar-left])):has(.v-wall-label) .v-resource__sidebar { padding-block-start: var(--v-space-s); }
    }

    /* With the work and its label side by side, the label is the title:
       the page's <h1> stays for screen readers and outlines. A person's
       label has no title line (it shows their dates), so the page title
       stays on an artist's page. */
    .v-resource--item:has(.v-gallery):has(.v-resource__sidebar .v-wall-label .v-wall-label__title) .v-resource__header {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .v-resource__sidebar { gap: var(--v-space-m); }
    /* The full record, under the work: compact, like a catalog entry. */
    .v-resource--item .v-resource__main .v-rblock--values .property { padding-block: var(--v-space-2xs); font-size: var(--v-step-n1); }
    .v-resource--item .v-resource__main .v-rblock--values .property dt { font-weight: 600; }
    @media (min-width: 40em) {
        .v-resource--item .v-resource__main .v-rblock--values .property { grid-template-columns: minmax(8rem, 22%) minmax(0, 1fr); }
    }

    /* Wall label */
    .v-wall-label { gap: 0.2rem; }
    .v-wall-label__creator { font-size: var(--v-step-0); font-weight: 600; }
    .v-wall-label__life { font-weight: 400; }
    .v-wall-label__title {
        font-family: var(--v-font-heading);
        font-weight: var(--v-heading-weight);
        font-size: var(--v-step-4);
        line-height: 1.04;
        color: var(--v-heading);
        text-wrap: balance;
    }
    .v-wall-label__creator + .v-wall-label__title { margin-block-start: var(--v-space-xs); }
    .v-wall-label__title + .v-wall-label__line { margin-block-start: var(--v-space-xs); }
    .v-wall-label__date { font-style: normal; }
    /* A person's or an organization's label: their dates, then the text. */
    .v-wall-label > .v-wall-label__life { font-size: var(--v-step-1); }
    .v-wall-label__text {
        margin-block-start: var(--v-space-s);
        padding-block-start: var(--v-space-s);
        font-size: var(--v-step-0);
        line-height: 1.65;
    }

    /* Sidebar panels: no boxes, a rule and a small title. */
    .v-panel {
        padding: var(--v-space-s) 0 0;
        background: none;
        border: 0;
        border-block-start: 1px solid var(--v-border);
        border-radius: 0;
    }
    .v-panel__title {
        font-family: var(--v-font-body);
        font-size: var(--v-step-n1);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .v-panel__title .v-icon { display: none; }

    /* ------------------------------------------------------------------
       Footer
       ------------------------------------------------------------------ */
    .v-footer__title { font-size: var(--v-step-3); line-height: 1.05; }
    .v-footer__column :is(h2, h3, h4) {
        font-family: var(--v-font-body);
        font-size: var(--v-step-n1);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* ==================================================================
       Omeka Classic pages
       ================================================================== */

    /* ------------------------------------------------------------------
       Home page: the banner, the welcome text, then the works
       ------------------------------------------------------------------ */
    .v-home__intro { max-width: none; font-size: var(--v-step-0); }
    .v-home__intro > :where(p, ul:not([class]), ol, blockquote, .v-lead) { max-width: var(--v-measure); }
    .v-home__intro > .v-lead, .v-home__intro > p:first-child { font-size: var(--v-step-1); }
    .v-home__intro > :is(h2, h3) { margin-block: var(--v-space-xl) var(--v-space-s); }
    .v-home__intro > :first-child { margin-block-start: 0; }
    .v-home__section { margin-block: var(--v-space-2xl) var(--v-space-3xl); }
    /* The featured exhibit's cover is a work: whole, on its wall. */
    .v-home__exhibits .v-spotlight__media {
        display: grid;
        place-items: center;
        padding: clamp(1.25rem, 4vw, 3.5rem);
        background: var(--pl-wall);
    }
    .v-home__exhibits .v-spotlight__media img { width: auto; max-width: 100%; max-height: 30rem; object-fit: contain; border-radius: 0; }
    .v-spotlight__title { font-size: var(--v-step-4); line-height: 1.04; }

    /* ------------------------------------------------------------------
       Card lists in page text
       Simple Pages carried over from Omeka S, the home page text and
       exhibit text print the engine's cards: ul.v-results (image cards,
       lists of works) and section.v-preview (a heading, a list, a "see
       more" link). The grid, the cards and how works hang come from the
       rules above and the engine; the rules here are page text's own.
       ------------------------------------------------------------------ */
    /* Lists and previews of their own in the text keep room around them
       (the engine already gives them the page's width). */
    :is(.v-prose, .v-exhibit-text, .v-home__intro) > :is(.v-preview, .v-results) { margin-block: var(--v-space-m) var(--v-space-xl); }
    /* A list of image cards on its own is larger, like the image cards of
       exhibitions and places: three to a row. */
    :is(.v-prose, .v-exhibit-text, .v-home__intro) > .v-results { --v-grid-min: 18rem; }
    /* Beside a section menu, page text is narrow: smaller cards keep
       three works to a row. */
    .v-page__content .v-preview > .v-results { --v-grid-min: 11rem; }

    /* ------------------------------------------------------------------
       Simple Pages and content classes
       A page whose text opens with a banner (v-hero) shows the banner in
       place of its title, like an Omeka S landing page: the title stays
       for screen readers.
       ------------------------------------------------------------------ */
    .v-simple-page:has(.v-prose > .v-hero:first-child) > .v-page__header {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .v-simple-page:has(.v-prose > .v-hero:first-child) > .v-page__crumbs { margin-block-end: var(--v-space-s); }
    .v-simple-page:not(:has(> .v-page__crumbs)) > .v-prose > .v-hero:first-child { margin-block-start: var(--v-space-m); }
    :is(.v-prose, .v-exhibit-text) > .v-hero { max-width: none; margin-block: 0 var(--v-space-xl); }
    :is(.v-prose, .v-exhibit-text) > .v-hero:not(:first-child) { margin-block-start: var(--v-space-xl); }

    /* A reading page: its title and text in one centered column. */
    .v-simple-page.v-page--reading:not(:has(> .v-prose > .v-hero:first-child)) > :is(.v-page__header, .v-prose) {
        width: min(100% - 2 * var(--v-gutter), var(--v-measure));
        max-width: none;
        margin-inline: auto;
        padding-inline: 0;
        font-size: var(--v-step-1);
    }

    .v-lead { line-height: 1.5; }
    :is(.v-prose, .v-exhibit-text) > .v-lead { margin-block: 0 var(--v-space-xl); font-size: var(--v-step-1); }
    .v-pullquote { margin-block: var(--v-space-xl); }
    .v-pullquote blockquote {
        font-size: var(--v-step-4);
        line-height: 1.12;
        letter-spacing: -0.005em;
        text-wrap: balance;
    }
    .v-pullquote blockquote > p:last-child:not(:first-child) {
        margin-block-start: var(--v-space-s);
        font-size: var(--v-step-n1);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--v-text-muted);
    }
    .v-callout { border-inline-start-width: 3px; border-radius: 0; }
    .v-card-box { border-radius: 0; box-shadow: none; }
    .v-columns > :is(h2, h3) { font-size: var(--v-step-2); }
    .v-columns > :is(h2, h3):first-child { margin-block-start: 0; }
    .v-divider--ornament {
        width: 4rem;
        height: 0;
        margin: var(--v-space-xl) auto;
        border-block-start: 1px solid var(--v-border-strong);
    }
    /* Pages in this section: titles in the heading font over a hairline. */
    .v-toc-cards > ul { gap: var(--v-space-m) var(--pl-gap-x); }
    .v-toc-cards > ul > li > a {
        padding: var(--v-space-s) 0 0;
        background: none;
        border: 0;
        border-block-start: 1px solid var(--v-border-strong);
        border-radius: 0;
        box-shadow: none;
        font-family: var(--v-font-heading);
        font-weight: var(--v-heading-weight);
        font-size: var(--v-step-2);
        line-height: 1.1;
        color: var(--v-heading);
    }
    .v-toc-cards > ul > li > a:hover { border-color: var(--v-accent); color: var(--v-heading); text-decoration-thickness: 1px; }

    /* ------------------------------------------------------------------
       Tags: words, not buttons; the most used ones larger
       ------------------------------------------------------------------ */
    .v-tag-cloud { gap: var(--v-space-2xs) var(--v-space-m); align-items: baseline; }
    .v-tag-cloud .v-chip {
        min-height: 0;
        padding: 0.1em 0;
        background: none;
        border: 0;
        border-radius: 0;
        color: var(--v-text);
        font-family: var(--v-font-heading);
        font-weight: var(--v-heading-weight);
        font-size: var(--v-step-1);
        line-height: 1.2;
        text-decoration: none;
    }
    .v-tag-cloud .v-chip[data-weight="2"] { font-size: var(--v-step-2); }
    .v-tag-cloud .v-chip[data-weight="3"] { font-size: var(--v-step-3); }
    .v-tag-cloud .v-chip[data-weight="4"] { font-size: var(--v-step-4); }
    .v-tag-cloud .v-chip:hover { color: var(--v-text); text-decoration: underline; text-decoration-thickness: 1px; }
    .v-tag-cloud .v-chip__count { margin-inline-start: 0.2em; font-family: var(--v-font-body); font-size: var(--v-step-n2); vertical-align: super; }

    /* ------------------------------------------------------------------
       Exhibits
       ------------------------------------------------------------------ */
    /* A page whose first block is a banner shows it in place of the page
       title (still there for screen readers). */
    .v-exhibit--page:has(.v-exhibit__blocks > .exhibit-block:first-child > .v-exhibit-text > .v-hero:first-child) > .v-page__header {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .v-exhibit--page:has(.v-exhibit__blocks > .exhibit-block:first-child > .v-exhibit-text > .v-hero:first-child) > .v-page__crumbs { margin-block-end: var(--v-space-s); }
    /* The cover: a work, whole on its wall, with the exhibit's label
       beside it (below it on narrow screens). */
    .v-hero.v-exhibit__hero {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-items: center;
        gap: var(--v-space-l);
        padding: clamp(2rem, 6vw, 5rem) var(--v-bleed);
    }
    .v-exhibit__hero > .v-hero__image {
        position: static;
        z-index: auto;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: min(64vh, 36rem);
        object-fit: contain;
    }
    .v-hero.v-exhibit__hero .v-hero__content { justify-self: stretch; max-width: 34rem; margin: 0; }
    @media (min-width: 48em) {
        .v-hero.v-exhibit__hero { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: var(--v-space-2xl); }
        .v-hero.v-exhibit__hero .v-hero__content { justify-self: start; }
    }
    .v-exhibit__intro .v-spotlight__media {
        display: grid;
        place-items: center;
        padding: clamp(1.25rem, 4vw, 3.5rem);
        background: var(--pl-wall);
    }
    .v-exhibit__intro .v-spotlight__media img { width: auto; max-width: 100%; max-height: 32rem; border-radius: 0; }
    /* Contents: each page's title in the heading font over a hairline. */
    .v-exhibit__contents .v-subnav__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
        gap: var(--v-space-m) var(--pl-gap-x);
    }
    .v-exhibit__contents .v-subnav__list li { margin: 0; }
    .v-exhibit__contents .v-subnav__list a {
        display: block;
        height: 100%;
        padding: var(--v-space-s) 0 0;
        border: 0;
        border-block-start: 1px solid var(--v-border-strong);
        border-radius: 0;
        background: none;
        box-shadow: none;
        font-family: var(--v-font-heading);
        font-weight: var(--v-heading-weight);
        font-size: var(--v-step-2);
        line-height: 1.1;
        color: var(--v-heading);
        text-decoration: none;
    }
    .v-exhibit__contents .v-subnav__list a::before { display: block; margin-block-end: var(--v-space-3xs); font-family: var(--v-font-body); font-size: var(--v-step-n1); }
    .v-exhibit__contents .v-subnav__list a:hover { border-color: var(--v-accent); text-decoration: underline; text-decoration-thickness: 1px; }

    /* Works in exhibit blocks: whole and hung, the page their wall. */
    .v-exhibit-figure img { border-radius: 0; }
    .v-exhibit-figure .item-file img { width: auto; max-width: 100%; max-height: min(72vh, 40rem); }
    .v-exhibit-figure :is(.slide-meta, .exhibit-item-caption) { color: var(--v-text-muted); }
    .v-exhibit-block--file-text .v-exhibit-text > :is(h2, h3):first-child { font-size: var(--v-step-3); line-height: 1.1; }
    .v-exhibit-block--file-text .v-exhibit-text > :is(h2, h3):first-child a { color: inherit; text-decoration-thickness: 1px; }
    @media (min-width: 40em) {
        .v-exhibit-block--file-text .v-exhibit-media,
        .v-exhibit-block--file:has(.v-exhibit-text) .v-exhibit-media { width: min(50%, 34rem); margin-block-end: var(--v-space-m); }
        /* The text is a column of its own beside the work, like a label
           (its paragraphs keep their reading width from there, not from
           under the work). */
        .v-exhibit-block:is(.v-exhibit-block--file-text, .v-exhibit-block--file) > .v-exhibit-text { display: flow-root; }
    }
    /* Gallery: a heading on its own is the gallery's title, above it. */
    .v-exhibit-block--gallery:has(> .v-exhibit-text > :is(h2, h3, h4):only-child) { display: flex; flex-direction: column; }
    .v-exhibit-block--gallery > .v-exhibit-text:has(> :is(h2, h3, h4):only-child) { order: -1; margin-block-end: var(--v-space-m); }
    /* Square thumbnails: an even wall of works, hung. */
    .v-exhibit-block--gallery[data-size=square_thumbnail] .v-exhibit-gallery {
        --pl-gap-x: var(--v-space-m);
        --pl-gap-y: var(--v-space-m);
        grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
    }
    .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery { grid-template-columns: repeat(auto-fill, minmax(min(var(--v-grid-min), 100%), 1fr)); }
    .v-exhibit-gallery a { border-radius: 0; }
    .v-exhibit-block--gallery:not([data-size=square_thumbnail]) .v-exhibit-gallery img { background: none; }
    /* Carousel: the works on the page, their titles under them. */
    .layout-carousel .jcarousel-wrapper { border: 0; border-radius: 0; background: none; }
    .layout-carousel .jcarousel-wrapper.text-float .slide-meta {
        background: none;
        color: var(--v-text);
        font-family: var(--v-font-heading);
        font-weight: var(--v-heading-weight);
        font-size: var(--v-step-1);
        line-height: 1.15;
    }
    .layout-carousel .jcarousel-wrapper.text-float .slide-meta a { color: inherit; text-decoration: none; }
    .layout-carousel .jcarousel-wrapper.text-float .slide-meta a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
}

@layer theme {
    /* Ornament divider: a short hairline, centered, with room around it. */
    .v-divider--ornament { display: flex; justify-content: center; margin-block: var(--v-space-xl); }
    .v-divider--ornament span { display: block; width: 3rem; border-block-start: 1px solid var(--v-border-strong); }
}