/*!
 * Overprint — an Omeka S theme by RefBytes, built on the Theme Engine.
 *
 * A two-ink zine: a heavy condensed masthead, titles and pictures printed in
 * two inks that never quite line up, cards and photos taped to the page,
 * labels in a typewriter face. The engine's stylesheet (engine/css/engine.css)
 * styles every page from the --v-* design tokens. Overprint'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.
 *
 * The inks are the palette: the accent color is the first ink (the one that
 * slips, fluorescent pink by default), the primary color the second (the
 * dark parts of two-ink pictures, blue), and the text color the black key
 * plate. Text only ever uses the engine's contrast-checked colors; the inks
 * on their own draw shadows, tape, stickers and pictures, never small text.
 *
 * Overprint's own settings arrive as attributes and body classes:
 * - Header layout: .v-header[data-layout=masthead|bar|centered].
 * - Misregistration: body.op-mis-none|slight|loud (--op-mis, --op-pop).
 * - Paste-up: body.op-collage-tidy|taped|pasted (tape, crooked cards).
 * - Pictures in two inks: body.op-ink-none|banners|cards.
 * - Paper: body.op-paper-plain|grain.
 * - Labels: body.op-labels-mono|body (--op-font-label).
 */

/* Space Mono for labels, whatever the body and heading fonts are (the
   engine only loads the fonts chosen for those). Browsers download it only
   where a label uses it. */
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono/space-mono-normal-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono/space-mono-normal-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono/space-mono-normal-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono/space-mono-normal-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono/space-mono-italic-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono/space-mono-italic-400-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@layer theme {
    /* ------------------------------------------------------------------
       Overprint's own tokens
       ------------------------------------------------------------------ */
    :root {
        /* The inks: the accent slips (misregistration), the primary prints
           the dark parts of pictures, the text color is the key plate. */
        --op-ink-1: var(--v-accent);
        --op-ink-2: var(--v-primary);
        --op-key: var(--v-text);
        --op-rule: color-mix(in srgb, var(--v-primary) 40%, transparent);
        --op-line: 3px;
        /* Slight misregistration: how far the first ink slips behind
           titles (--op-mis) and behind buttons and cards (--op-pop). */
        --op-mis: 0.05em;
        --op-pop: 5px;
        /* Pasted: four slightly different angles, cycled through lists. */
        --op-tilt-1: -1.2deg;
        --op-tilt-2: 0.8deg;
        --op-tilt-3: -0.5deg;
        --op-tilt-4: 1.3deg;
        /* Masking tape, with torn ends. */
        --op-tape: rgb(255 222 74 / 0.58);
        --op-tape-edge: polygon(2% 0, 98% 7%, 100% 32%, 97% 55%, 100% 80%, 97% 100%, 3% 93%, 0 70%, 3% 46%, 0 20%);
        /* Two-ink pictures: the picture in gray, then the second ink laid
           over its dark parts (light pages) or its light parts (dark). */
        --op-blend: multiply;
        --op-ink-blend: lighten;
        --op-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
        --op-font-label: "Space Mono", var(--v-font-mono);
        /* Bricolage Grotesque's width axis for display type (other fonts
           ignore it). */
        --op-display-width: 78;
        /* The page's own colors, for things that sit on paper inside a
           colored section (cards keep them; see Sections). */
        --op-text: var(--v-text);
        --op-text-muted: var(--v-text-muted);
        --op-heading: var(--v-heading);
        --op-link: var(--v-link);
        --op-link-hover: var(--v-link-hover);
        --op-primary-text: var(--v-primary-text);
        --op-border: var(--v-border);
        --op-focus: var(--v-focus);
        --op-focus-halo: var(--v-focus-halo);
    }
    /* Dark mode, in the engine's three ways of being dark. */
    :root[data-scheme-mode=always], :root[data-color-scheme=dark] {
        --op-blend: screen;
        --op-ink-blend: multiply;
        --op-tape: rgb(236 226 196 / 0.4);
        --op-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    }
    @media (prefers-color-scheme: dark) {
        :root[data-scheme-mode=auto]:not([data-color-scheme=light]) {
            --op-blend: screen;
            --op-ink-blend: multiply;
            --op-tape: rgb(236 226 196 / 0.4);
            --op-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
        }
    }
    .op-mis-none { --op-mis: 0em; --op-pop: 0px; }
    .op-mis-loud { --op-mis: 0.09em; --op-pop: 8px; }
    .op-collage-tidy, .op-collage-taped { --op-tilt-1: 0deg; --op-tilt-2: 0deg; --op-tilt-3: 0deg; --op-tilt-4: 0deg; }
    .op-labels-body { --op-font-label: var(--v-font-body); }

    /* Paper */
    body.op-paper-grain { background-image: var(--op-grain); background-size: 180px 180px; }

    /* ------------------------------------------------------------------
       Type
       ------------------------------------------------------------------ */
    :where(h2, .v-h2) { font-size: var(--v-step-3); }
    :where(h3, .v-h3) { font-size: var(--v-step-2); }
    :where(h4) { font-size: var(--v-step-1); }
    :where(h1, h2, .v-h1, .v-h2) { line-height: 1; font-variation-settings: "wdth" var(--op-display-width); }
    /* Capitals set tight: the engine spaces them for wider faces. */
    .v-headings-upper :where(h1, h2, h3, .v-h1, .v-h2, .v-h3, .v-page-title) { letter-spacing: -0.005em; }
    .v-headings-upper :where(h3, .v-h3) { letter-spacing: 0.005em; }

    /* Display type: the masthead, page and hero titles, the footer's name,
       section headings. Narrow, heavy, and printed twice: the first ink
       slips out from behind the text. */
    :is(.v-page-title, .v-display-title, .v-resource__header h1, .v-browse__header h1, .v-error h1, .v-hero__title, .v-brand__title, .v-footer__title, .v-blocks .block-html > h2, .v-preview__heading, .v-rblock__heading, .v-browse__subheading, .v-search-results__group > h2) {
        font-variation-settings: "wdth" var(--op-display-width);
    }
    :is(.v-page-title, .v-display-title, .v-resource__header h1, .v-browse__header h1, .v-error h1, .v-hero__title, .v-footer__title) {
        line-height: 0.95;
        text-shadow: var(--op-mis) calc(var(--op-mis) * 0.7) 0 var(--op-ink-1);
    }
    .op-mis-none :is(.v-page-title, .v-display-title, .v-resource__header h1, .v-browse__header h1, .v-error h1, .v-hero__title, .v-brand__title, .v-footer__title) { text-shadow: none; }
    .v-page-title { font-size: clamp(var(--v-step-4), 6vw, var(--v-step-6)); }
    .v-page__header { margin-block: var(--v-space-l) var(--v-space-m); }

    /* Labels: the typewriter. */
    :is(.v-kicker, .v-card__meta, .v-breadcrumbs, .v-topbar, .v-brand__tagline, .v-panel__title, .v-gallery__caption, figcaption, .v-pagination, .v-prevnext__position, .v-prevnext__title, .v-post__meta, .page-date-time, .search-filters, .v-resource__parent, .v-count, .v-search-results__summary, .v-footer__bottom, .v-copy-status, .v-downloads__meta, .v-wall-label__life, .v-wall-label__number, .v-share__url, .v-spotlight__fields dt, .v-logos__caption, .v-link-cards__meta) {
        font-family: var(--op-font-label);
    }
    .v-kicker {
        display: inline-block;
        width: fit-content;
        padding: 0.2em 0.65em;
        background: var(--op-key);
        color: var(--v-bg);
        font-size: var(--v-step-n1);
        font-weight: 700;
        letter-spacing: 0.1em;
        rotate: var(--op-tilt-1);
    }
    .v-breadcrumbs { font-size: var(--v-step-n1); }
    .v-breadcrumbs li + li::before { content: "/" / ""; }

    mark { border-radius: 0; }

    /* ------------------------------------------------------------------
       Buttons: square, heavy, with the first ink printed a little off
       ------------------------------------------------------------------ */
    :where(button, input[type=submit], input[type=button], input[type=reset]), .button, .v-button {
        border-width: var(--op-line);
        border-radius: 0;
        font-family: var(--v-font-heading);
        font-weight: 800;
        font-variation-settings: "wdth" 88;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        box-shadow: var(--op-pop) var(--op-pop) 0 var(--op-ink-1);
        transition: translate 0.12s var(--v-ease), box-shadow 0.12s var(--v-ease), background-color 0.15s var(--v-ease), color 0.15s var(--v-ease);
    }
    :where(button, input[type=submit], input[type=button]):hover, .button:hover, .v-button:hover {
        translate: -1px -1px;
        box-shadow: calc(var(--op-pop) + 1px) calc(var(--op-pop) + 1px) 0 var(--op-ink-1);
    }
    :where(button, input[type=submit], input[type=button]):active, .button:active, .v-button:active {
        translate: var(--op-pop) var(--op-pop);
        box-shadow: 0 0 0 var(--op-ink-1);
    }
    .v-button--outline, .v-button.v-button--outline, .v-buttons-outline .v-button:not(.v-button--secondary) {
        box-shadow: var(--op-pop) var(--op-pop) 0 var(--op-ink-2);
    }
    .v-button--outline:hover, .v-button.v-button--outline:hover { box-shadow: calc(var(--op-pop) + 1px) calc(var(--op-pop) + 1px) 0 var(--op-ink-2); }
    .v-button--small { box-shadow: calc(var(--op-pop) * 0.6) calc(var(--op-pop) * 0.6) 0 var(--op-ink-2); }
    /* Quiet controls stay flat: icon buttons, menu toggles, the layout
       switch, the viewer, the search button, copy buttons. */
    :is(.v-icon-button, .v-menu-toggle, .submenu-toggle, .v-layout-switch button, .lightbox button, .v-search-form__submit, .v-nav__close, #advanced-search button, .v-scheme__panel button),
    :is(.v-icon-button, .v-menu-toggle, .submenu-toggle, .v-layout-switch button, .lightbox button, .v-search-form__submit, .v-nav__close, #advanced-search button, .v-scheme__panel button):is(:hover, :active) {
        box-shadow: none;
        translate: none;
    }
    :is(.v-icon-button, .v-menu-toggle, .submenu-toggle, .v-layout-switch button, .lightbox button, .v-nav__close) {
        font-variation-settings: normal;
    }

    /* ------------------------------------------------------------------
       Header: every layout
       ------------------------------------------------------------------ */
    .v-header {
        /* The name prints in the second ink on paper, in the header's own
           text color on a colored band. */
        --op-masthead-ink: var(--v-header-text);
        border-block-end: 4px solid var(--v-header-text);
    }
    .v-header:is([data-style=light], [data-style=surface]) { --op-masthead-ink: var(--v-primary-text); }
    .v-header.is-stuck { box-shadow: 0 6px 0 var(--op-ink-1); }
    .op-mis-none .v-header.is-stuck { box-shadow: var(--v-shadow-md); }
    .v-header__inner { padding-block: var(--v-space-s); }
    .v-brand__title {
        color: var(--op-masthead-ink);
        font-size: var(--v-step-3);
        line-height: 0.9;
        text-transform: uppercase;
        letter-spacing: -0.01em;
        text-shadow: calc(var(--op-mis) * 1.2) calc(var(--op-mis) * 0.85) 0 var(--op-ink-1);
    }
    .v-brand__tagline {
        color: var(--v-header-muted);
        font-size: var(--v-step-n1);
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    /* Icon buttons and the menu button: square, stamped. */
    .v-icon-button, .v-menu-toggle {
        border: var(--op-line) solid currentColor;
        border-radius: 0;
    }
    .v-icon-button:hover, .v-menu-toggle:hover, .v-icon-button[aria-expanded=true] { border-color: currentColor; }
    .v-menu-toggle { font-family: var(--v-font-heading); font-weight: 800; text-transform: uppercase; }
    .v-scheme__panel {
        border: var(--op-line) solid var(--op-key);
        border-radius: 0;
        box-shadow: var(--op-pop) var(--op-pop) 0 var(--op-ink-2);
    }
    .op-mis-none .v-scheme__panel { box-shadow: var(--v-shadow-md); }
    .v-scheme__panel label { border-radius: 0; }

    /* Search: a heavy field and a black button. */
    .v-search-form input[type=search] {
        border: var(--op-line) solid var(--op-key);
        border-inline-end: 0;
        border-radius: 0;
    }
    .v-search-form__submit {
        border: var(--op-line) solid var(--op-key);
        border-radius: 0;
        background: var(--op-key);
        color: var(--v-bg);
    }
    .v-search-form__submit:hover { background: var(--op-key); border-color: var(--op-key); color: var(--v-bg); }
    .v-header .v-search-form input[type=search] { border-color: var(--v-header-text); }
    /* Room for the whole placeholder ("Search the collection", 21
       characters) in any font, typewriter fonts included. */
    @media (min-width: 64em) {
        .v-search[data-search-mode=field] { width: max(16em, calc(22ch + 4.6rem)); }
    }
    .v-header :is(.v-search-form__submit, .v-search-form__submit:hover) {
        border-color: var(--v-header-text);
        background: var(--v-header-text);
        color: var(--v-header-bg);
    }

    /* Menu: stamped labels, the current page inked in the first ink. */
    @media (min-width: 64em) {
        .v-header .v-nav > ul { gap: var(--v-space-xs) var(--v-space-xs); }
        .v-header .v-nav > ul > li > :is(a, span) {
            min-height: 2.6rem;
            padding: 0.2em 0.8em;
            border: var(--op-line) solid currentColor;
            border-radius: 0;
            font-family: var(--v-font-heading);
            font-weight: 800;
            font-variation-settings: "wdth" 85;
            text-transform: uppercase;
            letter-spacing: 0.01em;
            line-height: 1.1;
        }
        .v-header .v-nav > ul > li:nth-child(4n + 1) > :is(a, span) { rotate: var(--op-tilt-1); }
        .v-header .v-nav > ul > li:nth-child(4n + 2) > :is(a, span) { rotate: var(--op-tilt-2); }
        .v-header .v-nav > ul > li:nth-child(4n + 3) > :is(a, span) { rotate: var(--op-tilt-3); }
        .v-header .v-nav > ul > li:nth-child(4n + 4) > :is(a, span) { rotate: var(--op-tilt-4); }
        .v-header .v-nav > ul > li > a:hover { background: var(--v-header-hover); text-decoration: none; }
        .v-header .v-nav > ul > li > :is(a[aria-current=page], a.active),
        .v-header .v-nav > ul > li.active > a:not([aria-current]) {
            background: var(--v-accent);
            color: var(--v-on-accent);
            border-color: var(--v-header-text);
            text-decoration: none;
        }
        .v-header .v-nav > ul > li.has-submenu { gap: 0.15rem; }
        /* Submenus: a card with the second ink under it. */
        .v-header:not([data-layout=minimal]) .v-nav > ul > li > ul {
            inset-block-start: calc(100% + 0.4rem);
            border: var(--op-line) solid var(--op-key);
            border-radius: 0;
            box-shadow: var(--op-pop) var(--op-pop) 0 var(--op-ink-2);
        }
        .op-mis-none .v-header:not([data-layout=minimal]) .v-nav > ul > li > ul { box-shadow: var(--v-shadow-md); }
        .v-header .v-nav li li a { border-radius: 0; font-weight: 600; }
        .v-header .v-nav li li a[aria-current=page] { text-decoration-color: var(--v-accent-text); }
    }
    /* The menu drawer on small screens: plain rows, capitals. */
    :root.js .v-nav.is-drawer {
        border-inline-start: var(--op-line) solid var(--op-key);
        box-shadow: calc(-1 * var(--op-pop)) 0 0 var(--op-ink-1);
    }
    :root.js .v-nav.is-drawer > ul > li > :is(a, span) {
        font-family: var(--v-font-heading);
        font-weight: 800;
        font-variation-settings: "wdth" 85;
        text-transform: uppercase;
        border-radius: 0;
    }
    :root.js .v-nav.is-drawer a[aria-current=page] {
        background: var(--v-accent);
        color: var(--v-on-accent);
        text-decoration: none;
    }

    /* Announcement bar: the issue line across the top. */
    .v-topbar {
        font-size: var(--v-step-n1);
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
    .v-topbar__inner { padding-block: 0.45rem; }

    /* ------------------------------------------------------------------
       Header: masthead
       The site's name set big like the cover of a zine, search and tools
       beside it, the menu below as a row of stamped labels. The name gets
       smaller the longer it is (overprint.js counts its letters).
       ------------------------------------------------------------------ */
    .v-header[data-layout=masthead] .v-brand { flex-direction: column; align-items: flex-start; row-gap: var(--v-space-xs); }
    .v-header[data-layout=masthead] .v-brand__link { min-height: 0; }
    .v-header[data-layout=masthead] .v-brand__title {
        font-size: clamp(2rem, min(10vw, calc(min(96rem, 120vw) / var(--op-brand-len, 16))), 6.5rem);
        line-height: 0.82;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }
    @media (min-width: 64em) {
        .v-header[data-layout=masthead] .v-header__inner {
            grid-template-columns: minmax(0, 1fr) auto auto;
            grid-template-areas: "brand search tools" "nav nav nav";
            align-items: end;
            row-gap: var(--v-space-m);
            padding-block: var(--v-space-l) var(--v-space-m);
        }
        .v-header[data-layout=masthead] .v-header__inner:has(.v-search[data-search-mode=toggle]) {
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas: "brand tools" "search search" "nav nav";
        }
        .v-header[data-layout=masthead] .v-nav > ul { margin-inline-start: 0.1rem; }
    }

    /* ------------------------------------------------------------------
       Header: bar (name on the left, menu on the right)
       ------------------------------------------------------------------ */
    @media (min-width: 64em) {
        .v-header[data-layout=bar] .v-header__inner {
            grid-template-columns: auto minmax(0, 1fr) auto auto;
            grid-template-areas: "brand nav search tools";
        }
        .v-header[data-layout=bar] .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[data-layout=bar] .v-nav > ul { justify-content: flex-end; }
        /* Stamped labels take room: five or more get a row of their own. */
        .v-header[data-layout=bar] .v-header__inner:has(.v-nav > ul > li:nth-child(5)) {
            grid-template-columns: minmax(0, 1fr) auto auto;
            grid-template-areas: "brand search tools" "nav nav nav";
            row-gap: var(--v-space-s);
        }
        .v-header[data-layout=bar] .v-header__inner:has(.v-nav > ul > li:nth-child(5)):has(.v-search[data-search-mode=toggle]) {
            grid-template-areas: "brand tools tools" "search search search" "nav nav nav";
        }
        .v-header[data-layout=bar] .v-header__inner:has(.v-nav > ul > li:nth-child(5)) .v-nav > ul { justify-content: flex-start; }
    }

    /* ------------------------------------------------------------------
       Header: centered (a newsletter's nameplate)
       ------------------------------------------------------------------ */
    .v-header[data-layout=centered] .v-brand__title { font-size: clamp(2rem, 5vw, var(--v-step-5)); }
    @media (min-width: 64em) {
        .v-header[data-layout=centered] .v-header__inner { row-gap: var(--v-space-s); padding-block-start: var(--v-space-m); }
        .v-header[data-layout=centered] .v-nav {
            padding-block-start: var(--v-space-s);
            border-block-start: 4px double var(--v-header-border);
        }
    }

    /* ------------------------------------------------------------------
       Hero banner: the words on the paper, the picture pasted beside them
       (two inks when the setting says so), a strip of tape across its top
       ------------------------------------------------------------------ */
    .v-hero {
        min-height: 0;
        overflow: visible;
        /* The picture's cell holds the picture, its ink and its tape, all
           from the top; the words are centered beside it. */
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "content" "image";
        gap: var(--v-space-xl);
        padding: var(--v-space-xl) var(--v-bleed) var(--v-space-2xl);
        background: transparent;
        color: var(--v-text);
        --v-heading: inherit;
        --v-focus: inherit;
        --v-focus-halo: inherit;
    }
    .section-contained > .v-hero, .v-hero:only-child:not(:where(.v-blocks > .page-layout-normal > .block > *)) { border-radius: 0; }
    .v-hero__content {
        grid-area: content;
        align-self: center;
        width: auto;
        margin: 0;
        padding: 0;
        --v-flow-space: var(--v-space-s);
    }
    .v-hero__title {
        max-width: 16ch;
        font-size: clamp(2.5rem, 5.4vw, 5.25rem);
        text-transform: var(--v-heading-case);
        letter-spacing: -0.01em;
        color: var(--v-heading);
    }
    .v-hero__text { max-width: 34ch; font-size: var(--v-step-1); color: var(--v-text); }
    .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); border-color: currentColor; }
    .v-hero__image {
        position: relative;
        inset: auto;
        z-index: 1;
        grid-area: image;
        height: auto;
        aspect-ratio: 4 / 3;
        rotate: var(--op-tilt-1);
        box-shadow: calc(var(--op-pop) * 2) calc(var(--op-pop) * 1.5) 0 var(--op-ink-1);
    }
    /* The engine's scrim becomes the tape. */
    .v-hero::before {
        position: relative;
        inset: auto;
        z-index: 2;
        grid-area: image;
        align-self: start;
        justify-self: center;
        width: clamp(6rem, 22%, 9rem);
        height: 1.9rem;
        translate: 0 -55%;
        rotate: -4deg;
        background: var(--op-tape);
        clip-path: var(--op-tape-edge);
        pointer-events: none;
    }
    .op-collage-tidy .v-hero::before { display: none; }
    /* In two inks the slipped ink is a drop shadow after the gray filter
       (a box shadow would turn gray with the picture). */
    :is(.op-ink-banners, .op-ink-cards) .v-hero__image {
        /* Paper under the picture: until it loads, the ink lands on paper
           and stays invisible instead of printing a solid block. */
        background-color: var(--v-bg);
        box-shadow: none;
        filter: grayscale(1) contrast(1.15) drop-shadow(calc(var(--op-pop) * 2) calc(var(--op-pop) * 1.5) 0 var(--op-ink-1));
        mix-blend-mode: var(--op-blend);
    }
    :is(.op-ink-banners, .op-ink-cards) .v-hero:not(.v-hero--plain)::after {
        content: "";
        z-index: 1;
        grid-area: image;
        width: 100%;
        aspect-ratio: 4 / 3;
        rotate: var(--op-tilt-1);
        background: var(--op-ink-2);
        mix-blend-mode: var(--op-ink-blend);
        pointer-events: none;
    }
    @media (min-width: 56em) {
        .v-hero:not(.v-hero--plain) {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
            grid-template-areas: "content image";
            gap: var(--v-space-2xl);
            padding-block: var(--v-space-2xl);
        }
    }

    /* ------------------------------------------------------------------
       Cards: pasted on the page, picture inset, a sticker for the kind
       ------------------------------------------------------------------ */
    .v-results { gap: var(--v-space-xl) var(--v-space-m); }
    :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-results--static) {
        align-items: start;
    }
    .v-card {
        padding: 0.6rem 0.6rem 0.2rem;
        background: var(--v-surface);
        border: 0;
        border-radius: 0;
        overflow: visible;
        box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 14px 24px -18px rgb(0 0 0 / 0.6);
        rotate: var(--op-tilt, 0deg);
        transition: rotate 0.2s var(--v-ease), translate 0.2s var(--v-ease), box-shadow 0.2s var(--v-ease);
    }
    .v-results > .v-card:nth-child(4n + 1) { --op-tilt: var(--op-tilt-1); --op-tape-tilt: -3deg; }
    .v-results > .v-card:nth-child(4n + 2) { --op-tilt: var(--op-tilt-2); --op-tape-tilt: 4deg; }
    .v-results > .v-card:nth-child(4n + 3) { --op-tilt: var(--op-tilt-3); --op-tape-tilt: -2deg; }
    .v-results > .v-card:nth-child(4n + 4) { --op-tilt: var(--op-tilt-4); --op-tape-tilt: 3deg; }
    .v-card:hover { rotate: 0deg; translate: 0 -3px; box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 20px 30px -18px rgb(0 0 0 / 0.6); }
    :is(.op-collage-taped, .op-collage-pasted) .v-card::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset-block-start: -0.7rem;
        inset-inline-start: calc(50% - 2.75rem);
        width: 5.5rem;
        height: 1.4rem;
        background: var(--op-tape);
        clip-path: var(--op-tape-edge);
        rotate: var(--op-tape-tilt, -3deg);
        pointer-events: none;
    }
    .v-card__media { border-radius: 0; background: var(--v-surface-sunken); }
    .v-card__media img { height: 100%; }
    .v-card__media--empty { color: var(--v-text-muted); }
    .v-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.75rem 0.2rem 0.65rem; }
    .v-card__title {
        font-family: var(--v-font-heading);
        font-weight: 700;
        font-size: var(--v-step-1);
        font-variation-settings: normal;
        line-height: 1.15;
        text-transform: none;
        letter-spacing: 0;
    }
    .v-card:hover .v-card__link { text-decoration-thickness: 2px; }
    .v-card__meta { font-size: var(--v-step-n1); letter-spacing: 0.02em; }
    /* The class goes first, as a sticker: FLYER, ZINE, PHOTO. */
    .v-card__meta:has(.v-card__class) {
        order: -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.6rem;
    }
    .v-card__class {
        padding: 0.05em 0.5em;
        border: 2px solid var(--v-text);
        color: var(--v-text);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .v-card__class + .v-card__sep { display: none; }
    .v-card__text { color: var(--v-text); }

    /* Pictures on cards in two inks: the original shows on hover and focus. */
    .op-ink-cards .v-card__media:not(.v-card__media--empty) {
        position: relative;
        isolation: isolate;
        background: var(--v-bg);
    }
    .op-ink-cards .v-card__media:not(.v-card__media--empty) img {
        filter: grayscale(1) contrast(1.15);
        mix-blend-mode: var(--op-blend);
        transition: filter 0.25s var(--v-ease);
    }
    .op-ink-cards .v-card__media:not(.v-card__media--empty)::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--op-ink-2);
        mix-blend-mode: var(--op-ink-blend);
        pointer-events: none;
        transition: opacity 0.25s var(--v-ease);
    }
    .op-ink-cards .v-card:is(:hover, :focus-within) .v-card__media img { filter: none; mix-blend-mode: normal; }
    .op-ink-cards .v-card:is(:hover, :focus-within) .v-card__media::after { opacity: 0; }

    /* List view: index cards in a stack, straight, the picture to the side. */
    :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: var(--v-space-s);
    }
    :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 {
        rotate: none;
        padding: 0.6rem;
        border-block-start: var(--op-line) solid var(--op-ink-1);
    }
    :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::before { display: none; }
    :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:hover { translate: none; }
    :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%, 9.5rem);
        align-self: start;
    }
    :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;
        padding: 0.2rem 0.4rem 0.2rem clamp(var(--v-space-s), 3vw, var(--v-space-l));
    }
    :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);
        font-size: var(--v-step-0);
        line-height: 1.5;
    }

    /* Image cards (asset blocks): pasted photographs. */
    .v-results--assets { --v-grid-min: 17rem; }

    /* ------------------------------------------------------------------
       Sections and blocks
       ------------------------------------------------------------------ */
    /* Colored bands carry a faint halftone screen and heavy rules. */
    :is(.section-primary, .section-secondary, .section-accent, .section-dark) {
        background-image: radial-gradient(color-mix(in srgb, var(--v-sec-fg) 9%, transparent) 1px, transparent 1.6px);
        background-size: 7px 7px;
    }
    .v-blocks > .page-layout-normal > .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained) {
        border-block: var(--op-line) solid var(--op-key);
    }
    /* Bands that follow each other share one rule (their gap is closed
       below, outside this layer). */
    .v-blocks > .page-layout-normal > .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained) + .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained) {
        border-block-start: 0;
    }
    .section-tint { background-color: var(--v-surface-alt); }
    .section-contained, .v-has-bg-color:not(:is(.section-full, .section-wide)) { border-radius: 0; }
    /* Cards on a colored band are paper: they keep the page's colors. */
    :is(.section-primary, .section-secondary, .section-accent, .section-dark) :is(.v-card, .v-card-box, .v-callout, .v-pullquote, .v-link-cards a, .v-toc-cards > ul > li > a) {
        --v-text: var(--op-text);
        --v-text-muted: var(--op-text-muted);
        --v-heading: var(--op-heading);
        --v-link: var(--op-link);
        --v-link-hover: var(--op-link-hover);
        --v-primary-text: var(--op-primary-text);
        --v-border: var(--op-border);
        --v-focus: var(--op-focus);
        --v-focus-halo: var(--op-focus-halo);
        color: var(--v-text);
    }
    .v-blocks .block-html > h2, .v-preview__heading { font-size: var(--v-step-3); }

    /* Lead paragraph */
    .v-lead { font-weight: 500; }

    /* Callout: an index card with the second ink under it. */
    .v-callout {
        padding: var(--v-space-m);
        border: var(--op-line) solid var(--op-key);
        border-radius: 0;
        background: var(--v-surface);
        box-shadow: calc(var(--op-pop) + 1px) calc(var(--op-pop) + 1px) 0 var(--op-ink-2);
    }
    .v-callout a { color: var(--v-link); }
    .op-mis-none .v-callout { box-shadow: none; }

    /* Card: a sheet taped to the page. */
    .v-card-box {
        position: relative;
        border: 0;
        border-radius: 0;
        box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 14px 24px -18px rgb(0 0 0 / 0.6);
        rotate: var(--op-tilt-3);
    }
    :is(.op-collage-taped, .op-collage-pasted) .v-card-box::before {
        content: "";
        position: absolute;
        inset-block-start: -0.7rem;
        inset-inline-start: calc(50% - 3rem);
        width: 6rem;
        height: 1.4rem;
        background: var(--op-tape);
        clip-path: var(--op-tape-edge);
        rotate: -2deg;
        pointer-events: none;
    }

    /* Pull quote: a clipping with a bar of the first ink down its side. */
    .v-pullquote {
        position: relative;
        padding: var(--v-space-m) var(--v-space-l);
        background: var(--v-surface);
        border-inline-start: 0.5rem solid var(--op-ink-1);
        box-shadow: 0 14px 24px -18px rgb(0 0 0 / 0.6);
        rotate: var(--op-tilt-3);
    }
    .v-pullquote blockquote {
        font-size: var(--v-step-2);
        font-weight: 600;
        line-height: 1.25;
        text-transform: none;
    }
    .v-pullquote blockquote > p:last-child:not(:first-child) { margin-block-start: var(--v-space-s); font-family: var(--op-font-label); }
    :is(.op-collage-taped, .op-collage-pasted) .v-pullquote::after {
        content: "";
        position: absolute;
        inset-block-start: -0.7rem;
        inset-inline-end: 2rem;
        width: 5rem;
        height: 1.3rem;
        background: var(--op-tape);
        clip-path: var(--op-tape-edge);
        rotate: 4deg;
        pointer-events: none;
    }

    /* Call to action: its links are buttons, the second one outlined. */
    .v-cta p > a {
        border-width: var(--op-line);
        border-radius: 0;
        font-family: var(--v-font-heading);
        font-weight: 800;
        font-variation-settings: "wdth" 88;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        box-shadow: var(--op-pop) var(--op-pop) 0 var(--op-ink-1);
        transition: translate 0.12s var(--v-ease), box-shadow 0.12s var(--v-ease), background-color 0.15s var(--v-ease), color 0.15s var(--v-ease);
    }
    .v-cta p > a:hover { translate: -1px -1px; box-shadow: calc(var(--op-pop) + 1px) calc(var(--op-pop) + 1px) 0 var(--op-ink-1); }
    .v-cta p > a + a { box-shadow: var(--op-pop) var(--op-pop) 0 var(--op-ink-2); }
    .v-cta p > a + a:hover { box-shadow: calc(var(--op-pop) + 1px) calc(var(--op-pop) + 1px) 0 var(--op-ink-2); }
    /* On a band of the second ink, both slip in the first. */
    .section-primary .v-cta p > a + a { box-shadow: var(--op-pop) var(--op-pop) 0 var(--op-ink-1); }

    /* Ornament divider: a dashed cut line with scissors. */
    .v-divider--ornament {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-block: var(--v-space-l);
        color: var(--v-text-muted);
    }
    .v-divider--ornament::before, .v-divider--ornament::after {
        content: "";
        flex: 1 1 auto;
        border-block-start: 2px dashed currentColor;
    }
    .v-divider--ornament span {
        flex: none;
        width: 1.6rem;
        height: 1.6rem;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* Link cards (pages, table of contents, section pages): stamped boxes. */
    :is(.v-link-cards a, .v-toc-cards > ul > li > a, .v-subnav a) {
        border: var(--op-line) solid var(--op-key);
        border-radius: 0;
        background: var(--v-surface);
        box-shadow: var(--op-pop) var(--op-pop) 0 var(--op-ink-2);
        font-family: var(--v-font-heading);
        font-weight: 800;
        font-variation-settings: "wdth" 85;
        text-transform: uppercase;
        transition: translate 0.15s var(--v-ease), box-shadow 0.15s var(--v-ease);
    }
    :is(.v-link-cards a, .v-toc-cards > ul > li > a, .v-subnav a):hover {
        translate: -2px -2px;
        border-color: var(--op-key);
        box-shadow: calc(var(--op-pop) + 2px) calc(var(--op-pop) + 2px) 0 var(--op-ink-2);
    }
    .v-link-cards__meta { text-transform: none; font-weight: 400; font-variation-settings: normal; }

    /* Features and spotlights: a pasted photograph with the first ink
       printed off its edge. */
    :is(.v-feature__media, .v-spotlight__media) img {
        border-radius: 0;
        box-shadow: calc(var(--op-pop) * 2) calc(var(--op-pop) * 1.5) 0 var(--op-ink-1);
        rotate: var(--op-tilt-2);
    }
    .v-spotlight__fields dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

    /* Gallery block: a contact sheet, frames numbered along the film. */
    .v-gallery__grid--block {
        counter-reset: op-frame;
        gap: var(--v-space-xs);
        padding: var(--v-space-s);
        background: #161514;
    }
    .v-gallery__grid--block > li { counter-increment: op-frame; }
    .v-gallery__grid--block img { border-radius: 0; background: #2a2826; }
    .v-gallery__grid--block > li::after {
        content: counter(op-frame, decimal-leading-zero) "A" / "";
        display: block;
        margin-block-start: 0.2rem;
        color: #f2a65a;
        font-family: var(--op-font-label);
        font-size: var(--v-step-n2);
        letter-spacing: 0.08em;
    }
    .v-gallery__grid--block :is(figcaption, .v-gallery__file) { color: #f3efe6; }
    .v-gallery__grid--block a { --v-focus: #fff; --v-focus-halo: #000; }

    .preview-block .resource-link img, .v-post__image img { border-radius: 0; }
    .v-logos img { filter: grayscale(1); }
    .v-logos a:is(:hover, :focus-visible) img { filter: none; }

    /* ------------------------------------------------------------------
       Browse pages, search, pagination
       ------------------------------------------------------------------ */
    .v-browse-controls { border-block: var(--op-line) solid var(--op-key); }
    .v-layout-switch { border: var(--op-line) solid var(--op-key); border-radius: 0; }
    .v-layout-switch button { border-radius: 0; font-family: var(--v-font-heading); font-weight: 700; }
    .v-layout-switch button + button { border-inline-start: var(--op-line) solid var(--op-key); }
    .v-browse > .v-pagination { border-block-start: var(--op-line) solid var(--op-key); }
    .v-pagination__step { font-family: var(--v-font-heading); font-weight: 800; text-transform: uppercase; }
    .search-filters .filter-value {
        border: 2px solid var(--op-key);
        border-radius: 0;
        background: var(--v-surface);
        font-family: var(--op-font-label);
    }
    .v-empty {
        border: 2px dashed var(--op-key);
        border-radius: 0;
        background: var(--v-surface);
        font-family: var(--op-font-label);
    }
    .v-page-results > li { border-block-end: 1px solid var(--op-rule); }

    /* Forms: square fields with a heavier edge. */
    :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=submit], [type=button], [type=reset], [type=image]), select, textarea) {
        border-width: 2px;
        border-radius: 0;
    }
    :where(fieldset) { border-width: 2px; border-radius: 0; }

    /* ------------------------------------------------------------------
       Item and media pages
       ------------------------------------------------------------------ */
    .v-resource__header { margin-block: var(--v-space-s) var(--v-space-l); }
    .v-resource__header h1 { font-size: clamp(var(--v-step-4), 4.8vw, var(--v-step-5)); }

    /* The picture: a print taped down on the page. */
    .v-gallery__zoom {
        padding: clamp(0.6rem, 1.4vw, 1rem);
        background: var(--v-surface);
        border-radius: 0;
        overflow: visible;
        box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 18px 32px -20px rgb(0 0 0 / 0.65);
        rotate: var(--op-tilt-3);
    }
    :is(.op-collage-taped, .op-collage-pasted) .v-gallery__zoom::before,
    :is(.op-collage-taped, .op-collage-pasted) .v-gallery__zoom::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset-block-start: -0.8rem;
        width: clamp(4.5rem, 16%, 7rem);
        height: 1.6rem;
        background: var(--op-tape);
        clip-path: var(--op-tape-edge);
        pointer-events: none;
    }
    :is(.op-collage-taped, .op-collage-pasted) .v-gallery__zoom::before { inset-inline-start: 8%; rotate: -5deg; }
    :is(.op-collage-taped, .op-collage-pasted) .v-gallery__zoom::after { inset-inline-end: 8%; rotate: 4deg; }
    .v-gallery__image { max-height: min(78vh, 52rem); }
    .v-gallery__zoom-label { border-radius: 0; font-family: var(--op-font-label); }
    .v-gallery__render { border-radius: 0; background: var(--v-surface); }
    .v-gallery__grid img { border-radius: 0; }
    .v-gallery__heading { font-size: var(--v-step-1); }

    /* The record: an index card, a rule of the first ink under its
       heading, ruled lines in the second ink, the second ink under it. */
    .v-rblock--values:has(> .v-rblock__heading) {
        padding: 0 var(--v-space-m) var(--v-space-2xs);
        background: var(--v-surface);
        border: var(--op-line) solid var(--op-key);
        box-shadow: calc(var(--op-pop) + 2px) calc(var(--op-pop) + 2px) 0 var(--op-ink-2);
    }
    .op-mis-none .v-rblock--values:has(> .v-rblock__heading) { box-shadow: none; }
    .v-rblock--values > .v-rblock__heading {
        margin: 0 calc(-1 * var(--v-space-m)) var(--v-space-3xs);
        padding: var(--v-space-s) var(--v-space-m) var(--v-space-xs);
        border-block-end: var(--op-line) solid var(--op-ink-1);
        font-family: var(--op-font-label);
        font-size: var(--v-step-n1);
        font-weight: 700;
        font-variation-settings: normal;
        line-height: 1.3;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-shadow: none;
    }
    .v-rblock--values .property,
    :is(.v-resource__main, .v-resource__top, .v-resource__bottom) .v-rblock--values .property {
        padding-block: 0.65rem 0.5rem;
        border-block-start: 0;
        border-block-end: 1px solid var(--op-rule);
    }
    .v-rblock--values .property:last-child { border-block-end: 0; }
    .v-rblock--values .property dt {
        font-family: var(--op-font-label);
        font-size: var(--v-step-n1);
        font-weight: 400;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--v-text-muted);
    }
    .v-rblock--values .property dt .field-term { display: none; }
    /* In the sidebar the record keeps two narrow columns. */
    .v-resource__sidebar .v-rblock--values > dl { padding: 0; background: none; border: 0; border-radius: 0; }
    .v-resource__sidebar .v-rblock--values .property {
        display: grid;
        grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr);
        gap: 0.15rem var(--v-space-s);
    }
    .v-resource__sidebar .v-rblock--values .property dt {
        grid-column: 1;
        margin: 0;
        padding-block-start: 0.2em;
        font-family: var(--op-font-label);
        font-size: var(--v-step-n1);
        font-weight: 400;
        color: var(--v-text-muted);
    }
    .v-resource__sidebar .v-rblock--values .property dd, .v-resource__sidebar .v-rblock--values .v-values-more { grid-column: 2; }
    .v-resource__sidebar .v-rblock--values .property dd + dd { margin-block-start: 0; }
    @media (min-width: 64em) {
        .v-resource__body[data-layout=sidebar-right] { grid-template-columns: minmax(0, 1fr) minmax(19rem, 27rem); gap: var(--v-space-2xl); }
        .v-resource__body[data-layout=sidebar-left] { grid-template-columns: minmax(19rem, 27rem) minmax(0, 1fr); gap: var(--v-space-2xl); }
    }
    .v-resource__sidebar { gap: var(--v-space-l); }
    .v-resource__bottom > .v-rblock + .v-rblock { margin-block-start: var(--v-space-xl); }

    /* Sidebar panels: coupons with a dashed edge. */
    .v-panel {
        padding: var(--v-space-s) var(--v-space-m) var(--v-space-m);
        background: var(--v-surface);
        border: 2px dashed var(--op-key);
        border-radius: 0;
    }
    .v-panel__title {
        font-size: var(--v-step-n1);
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-variation-settings: normal;
    }
    .v-panel__title .v-icon { color: var(--v-accent-text); }

    /* Subjects: stickers. */
    .v-chip {
        min-height: 2.25rem;
        padding: 0.2em 0.8em;
        border: 2px solid var(--op-key);
        border-radius: 0;
        background: var(--v-surface);
        color: var(--v-text);
        font-family: var(--op-font-label);
        font-weight: 700;
    }
    .v-chips > li:nth-child(3n + 1) .v-chip { background: var(--v-accent); color: var(--v-on-accent); }
    .v-chips > li:nth-child(4n + 1) .v-chip { rotate: var(--op-tilt-1); }
    .v-chips > li:nth-child(4n + 2) .v-chip { rotate: var(--op-tilt-2); }
    .v-chips > li:nth-child(4n + 3) .v-chip { rotate: var(--op-tilt-3); }
    .v-chips > li:nth-child(4n + 4) .v-chip { rotate: var(--op-tilt-4); }
    .v-chip:hover { color: inherit; text-decoration-thickness: 2px; }
    .v-chips > li:nth-child(3n + 1) .v-chip:hover { color: var(--v-on-accent); }

    /* Linked items and the rest of the bottom region. */
    .v-rblock__heading { font-size: var(--v-step-3); }
    /* Within linked items, each property is a small label over a rule of
       the first ink. */
    .v-linked__heading {
        width: fit-content;
        margin-block: var(--v-space-l) var(--v-space-s);
        padding-block-end: 0.2em;
        border-block-end: var(--op-line) solid var(--op-ink-1);
        font-family: var(--op-font-label);
        font-size: var(--v-step-n1);
        font-weight: 700;
        font-variation-settings: normal;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }
    .v-linked .v-results { margin-block-start: var(--v-space-l); }
    .v-prevnext { border-block: var(--op-line) solid var(--op-key); }
    .v-prevnext__dir { font-family: var(--v-font-heading); font-weight: 800; text-transform: uppercase; }
    .v-prevnext__link { border-radius: 0; }
    .v-prevnext__thumb img { border-radius: 0; }
    .v-citation__text { font-family: var(--op-font-label); }

    /* ------------------------------------------------------------------
       Footer: the back cover, in the key plate
       ------------------------------------------------------------------ */
    .v-footer { border-block-start: 0; }
    .v-footer__title {
        font-size: var(--v-step-4);
        text-transform: uppercase;
        letter-spacing: -0.01em;
    }
    .v-footer__column :is(h2, h3, h4) {
        font-size: var(--v-step-1);
        text-transform: uppercase;
        font-variation-settings: "wdth" 85;
    }
    .v-footer__bottom { letter-spacing: 0.02em; }
    .v-social a { border-width: 2px; border-radius: 0; }
    .v-back-to-top { font-family: var(--op-font-label); }
    .v-partners { background: var(--v-surface-alt); }

    /* ------------------------------------------------------------------
       The rest
       ------------------------------------------------------------------ */
    .v-error .v-kicker { font-size: var(--v-step-2); }
    .v-post { border-block-end: 2px dashed var(--v-border-strong); }
    .v-section-nav { border-radius: 0; border: var(--op-line) solid var(--op-key); background: var(--v-surface); }
    .v-section-nav a { border-radius: 0; }
    .v-section-nav a[aria-current=page] { background: var(--v-accent); color: var(--v-on-accent); box-shadow: none; }
    .v-page-steps__link { border: var(--op-line) solid var(--op-key); border-radius: 0; }
    .messages li { border-radius: 0; }
    .v-copy-status:not(:empty) { border-radius: 0; }
    .lightbox { border-radius: 0; }

    /* Forced colors: tape and printed-off shadows are decoration only. */
    @media (forced-colors: active) {
        .v-card::before, .v-card-box::before, .v-pullquote::after, .v-hero::before, .v-hero::after,
        .v-gallery__zoom::before, .v-gallery__zoom::after, .v-card__media::after { display: none; }
    }
}

/* Bands that follow each other touch. The engine spaces blocks with
   important margins in its content layer (core's unlayered block margins
   would win otherwise), and an important declaration in a later layer loses
   to one in an earlier layer: this one goes in an earlier engine layer. */
@layer engine.reset {
    .v-blocks > .page-layout-normal > .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained) + .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained) {
        margin-block-start: 0 !important;
    }
}