/*!
 * Plinth — an Omeka S 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 stylesheet (engine/css/engine.css)
 * styles 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,
 * module 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 a hero
 *   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 and in image blocks.
 */
@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);
    }
    .v-rblock__heading, .v-preview__heading, .v-blocks .block-html > h2, .v-subnav__heading {
        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. The user bar 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 > #user-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 a landing page that opens with a hero banner, 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.
       ------------------------------------------------------------------ */
    body.v-header-overlay:has(> .v-main > .v-page--landing > .v-blocks > .page-layout-normal > .block:first-child > :is(.v-hero, .bst-hero)) > .v-header {
        margin-block-end: calc(-1 * var(--pl-header-h, 5.5rem));
    }
    body.v-header-overlay:has(> .v-main > .v-page--landing > .v-blocks > .page-layout-normal > .block:first-child > :is(.v-hero, .bst-hero)) > .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-page--landing > .v-blocks > .page-layout-normal > .block:first-child > :is(.v-hero, .bst-hero)) > .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-page--landing > .v-blocks > .page-layout-normal > .block:first-child > :is(.v-hero, .bst-hero)) > .v-header:not(.is-stuck) .v-brand__logo--light:has(+ .v-brand__logo--dark) { display: none; }
    body.v-header-overlay:has(> .v-main > .v-page--landing > .v-blocks > .page-layout-normal > .block:first-child > :is(.v-hero, .bst-hero)) > .v-header:not(.is-stuck) .v-brand__logo--dark { display: block; }
    body.v-header-overlay:has(> .v-main > .v-page--landing > .v-blocks > .page-layout-normal > .block:first-child > .v-hero) .v-hero {
        min-height: clamp(30rem, 88vh, 60rem);
    }
    body.v-header-overlay .v-main:has(> .v-page--landing > .v-blocks > .page-layout-normal > .block:first-child > :is(.v-hero, .bst-hero)) { padding-block-start: 0; }

    /* ------------------------------------------------------------------
       Hero banner: the image full bleed, its words on a label
       ------------------------------------------------------------------ */
    .v-hero {
        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::before { display: none; }
    .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__title { font-size: var(--v-step-4); line-height: 1.04; max-width: none; color: var(--v-heading); }
    .v-hero__text { font-size: var(--v-step-0); max-width: none; color: var(--v-text-muted); }
    .v-hero__text:first-of-type { margin-block-start: var(--v-space-3xs); }
    .v-hero .v-button { background: var(--v-primary); border-color: var(--v-primary); color: var(--v-on-primary); }
    .v-hero .v-button: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.
       ------------------------------------------------------------------ */
    :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) {
        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-masonry: 1;
    }
    .pl-grid-masonry .v-results[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) {
        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 {
        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 {
        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) {
        aspect-ratio: var(--pl-ar, 1);
    }

    /* 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) {
        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 {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        max-width: 80%;
        max-height: 80%;
        margin: auto;
    }

    /* 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 {
        height: auto;
    }

    /* ------------------------------------------------------------------
       How works are hung: grids (grid mode), the item page's work, and
       the item blocks. Image cards (asset blocks: installation views,
       pictures 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) img,
    .pl-art-hung .v-gallery__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) img,
    .pl-art-mat .v-gallery__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) img,
    .pl-art-frame .v-gallery__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) img { border-radius: 0; }
    .v-spotlight__media img { background: none; }

    /* ------------------------------------------------------------------
       Item pages: the work on its wall, the label beside it
       ------------------------------------------------------------------ */
    .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; }

    /* 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-resource__main .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;
    }
    /* Beside a rail, the page is narrow until 80em: the label goes under
       the work there. */
    @media (min-width: 64em) and (max-width: 79.99em) {
        body.v-header-rail .v-resource__body[data-layout] { grid-template-columns: minmax(0, 1fr); }
        body.v-header-rail .v-resource__body[data-layout=sidebar-left] .v-resource__sidebar { order: 0; }
        body.v-header-rail .v-resource__sidebar { position: static; max-width: var(--v-measure); }
    }
    @media (min-width: 64em) {
        .v-resource__body[data-layout=sidebar-right] { grid-template-columns: minmax(0, 1fr) minmax(17rem, 25rem); gap: var(--v-space-2xl); }
        .v-resource__body[data-layout=sidebar-left] { grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr); gap: var(--v-space-2xl); }
        .v-resource__body:has(.v-wall-label) .v-resource__sidebar { padding-block-start: var(--v-space-s); }
    }
    /* No work to show (an artist, say): the sidebar is the page. */
    .v-resource__body:has(> .v-resource__main:empty) { grid-template-columns: minmax(0, 1fr); }
    .v-resource__body:has(> .v-resource__main:empty) > .v-resource__main { display: none; }
    .v-resource__body:has(> .v-resource__main:empty) > .v-resource__sidebar { position: static; max-width: var(--v-measure); }
    .v-resource__sidebar { gap: var(--v-space-m); }
    .v-resource__bottom > .v-rblock + .v-rblock { margin-block-start: var(--v-space-xl); }
    .v-linked__heading { font-size: var(--v-step-1); margin-block: var(--v-space-m) var(--v-space-s); }
    /* The full record, below the label: compact, like a catalog entry. */
    .v-resource__bottom .v-rblock--values .property { padding-block: var(--v-space-2xs); font-size: var(--v-step-n1); }
    .v-resource__bottom .v-rblock--values .property dt { font-weight: 600; }
    @media (min-width: 40em) {
        .v-resource__bottom .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;
    }
}