/*
 * Site-wide typography/visual design pass (see SPEC.md "Site-wide
 * typography/styling pass — deferred to post-rebuild") — now underway,
 * started once all six page types were functionally complete.
 */

/* --color-accent was originally a placeholder (Anthropic's own brand
   orange, left in unintentionally). Client reviewed it against the legacy
   site's actual brand orange (#f60, used for logo/nav hover + current-nav
   state) and confirmed this softer, more muted terracotta as the
   intentional choice going forward — not a leftover. */
/* --color-divider: the one hairline-separator gray used for every plain
   divider line (header rule, info-page section dividers, work pager
   border, mobile nav border) — previously split across #cccccc/#e5e5e5
   with no deliberate reason for the two shades, just drift between
   components added at different times (branding consistency pass). */
/* --color-link: the base link color (see the `a{}` rule below). All three
   variables here are the *defaults* — base.html.twig overrides them with an
   inline <style> block reading from Settings (SPEC.md "Design tokens
   panel"), so a CMS edit changes these site-wide without touching this
   file. Kept here too (not just in the DB) so the site still renders
   correctly before that override runs, and so these values stay the
   single source of truth for what "default" means. */
:root {
    --color-link: #666666;
    --color-accent: #d97757;
    --color-divider: #cccccc;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Sticky footer: .site-main grows to fill any leftover viewport height on
   short pages, pushing .site-footer down to the bottom edge instead of it
   sitting right under the content with a band of plain white page below
   it. On tall pages this has no effect — .site-main is already taller
   than the viewport, so there's no leftover space to fill. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    line-height: 1.5;
    background: #fff;
}

/* Standardized link color (SPEC.md "Site-wide link standardization") — a
   deliberate exception to the site's earlier "inherit, distinguish only on
   hover" approach: gray at rest so a link reads as a link instead of blending
   into surrounding body text, underline still reserved for hover/focus. The
   site-logo and site-nav (top header) are explicitly excluded per client
   request and keep their own black color rules further down this file,
   which win here on specificity alone — no !important needed. */
a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* "Underline + color" hover mode (Settings.linkHoverStyle, SPEC.md "Design
   tokens panel") — opted into via a class on .site-main rather than body,
   since the site-logo/site-nav exclusion above only works by winning on
   selector specificity; scoping to .site-main means this rule structurally
   can't reach the header at all (it's a sibling of .site-main, not a
   descendant), so no extra override rules are needed to protect it. */
.site-main.link-hover-color a:hover {
    color: var(--color-accent);
}

/* Baseline accessibility pass (SPEC.md) — previously no outline/:focus
   rules existed at all site-wide, meaning keyboard focus relied entirely
   on each browser's own inconsistent default. :focus-visible (not
   :focus) so the ring shows for keyboard navigation without also
   appearing on every mouse click. Solid black keeps it consistent with
   the site's existing "black, never color-only" convention for
   interactive states (see the underline-based hover/current-state
   pattern used throughout). Offset so the ring doesn't collide with
   underlines on links or sit flush against small tap targets. */
:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* .skip-link is white-on-black — a black ring on its own black background
   would be invisible. Only affects it while actually focused, which is
   the only time it's ever visible at all. */
.skip-link:focus-visible {
    outline-color: #fff;
}

img {
    max-width: 100%;
    display: block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Off-screen (not display:none, so it stays keyboard-reachable) until a
   keyboard user tabs to it, then snaps into view at the top-left. */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    z-index: 1000;
    background: #000;
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    text-decoration: none;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Header */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 0.9rem;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
}

/* The rule is inset to line up exactly with the logo's left edge and the
   nav's right edge (the padded content), rather than spanning the full
   header box edge-to-edge like a plain border-bottom would. */
.site-header::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 0;
    border-bottom: 1.5px solid var(--color-divider);
}

.site-logo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.23rem;
    font-weight: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
}

.site-logo span {
    color: var(--color-accent);
}

.site-logo:hover {
    text-decoration: none;
}

.site-logo:hover span {
    color: #000;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.nav-instagram {
    display: inline-flex;
    align-items: center;
}

.site-nav a {
    font-size: 0.85rem;
    font-weight: normal;
    letter-spacing: 0.06em;
    color: #000;
    text-decoration: none;
}

.site-nav a:hover {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.site-nav a.is-current {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

@media (max-width: 640px) {
    .nav-toggle {
        display: block;
    }

    .site-nav {
        display: none;
        flex-direction: column;
        gap: 0.75rem;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 1rem 1.5rem 1.5rem;
        border-bottom: 1px solid var(--color-divider);
    }

    .site-nav.is-open {
        display: flex;
    }
}

/* Main content */

.site-main {
    flex: 1 0 auto;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    width: 100%;
}

.empty-state {
    color: #000;
}

/* Exhibition list (homepage) */

.exhibition-list {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    display: grid;
    gap: 2.5rem;
}

.exhibition-item {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
    align-items: start;
}

.exhibition-thumb {
    display: block;
}

/* Natural aspect ratio, not cropped to a forced square — unlike the grid
   thumbnails elsewhere (Artist/Work/Browse), which are deliberately
   cropped square for a uniform grid. Exhibition images vary widely in
   shape (installation shots, single works, etc.), so forcing a crop here
   was cutting off real content rather than just reframing it. */
.exhibition-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

/* Shared "no image" placeholder — used both standalone (Exhibition cards,
   where aspect-ratio alone drives its square shape) and inside a
   fixed-aspect-ratio parent (.artist-grid .thumb, where width/height: 100%
   fill that parent instead). Previously declared twice, once per context,
   with the two split blocks happening to merge into exactly this same
   combined ruleset by cascade accident — consolidated into one declaration
   so a future edit to one context can't silently miss the other. */
.thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: #f2f2f2;
}

.exhibition-meta {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    line-height: 1.2;
}

.exhibition-title {
    font-size: 0.935rem;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.03em;
}

.exhibition-artist {
    font-size: 0.8075rem;
    font-weight: normal;
}

.exhibition-dates {
    font-size: 0.75rem;
    color: #000;
    margin: 0;
}

/* On the Exhibition detail page specifically, dates should read at the same
   size as the artist-name line above them (client request, 2026-08-18) —
   0.8rem, matching .work-meta p. This used to happen only by accident:
   .work-meta p's higher selector specificity was silently overriding the
   0.75rem above without anyone intending it, so a later unrelated edit to
   .work-meta p's font-size could have shrunk or grown these dates with no
   obvious connection. Making the override explicit and scoped to just this
   page keeps the Homepage/Exhibitions-list card usages (where 0.75rem is
   still correct) unaffected. */
.exhibition-detail-text .exhibition-dates {
    font-size: 0.8rem;
}

/* Excerpt of the exhibition's own body copy (see .rich-content /
   .work-description on the detail page) — sized to match that same running
   text, since this is a preview of it. */
.exhibition-excerpt {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #000;
    margin: 0.5rem 0 0;
}

.exhibition-excerpt a {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .exhibition-item {
        grid-template-columns: 1fr;
    }
}

/* Artist list */

.artist-list-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.gallery-view-toggle {
    display: flex;
    gap: 0.5rem;
}

.view-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: #000;
}

.view-btn[aria-pressed="true"] {
    color: #000;
    border-color: #999;
}

.artist-gallery {
    margin-bottom: 2.5rem;
}

/* Grid view (default): thumbnails + names. object-fit: cover is required
   here — see SPEC.md "Additional technical SEO" item 5, the root-caused
   image-blur bug (fixed-box thumbnails with no object-fit stretch
   non-square images). Applying it now, ready for when real images land. */
.artist-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.artist-grid .thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f2f2f2;
}

.artist-grid .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist-grid-name {
    margin: 0.5rem 0 0;
    font-size: 0.765rem;
}

.artist-text-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    gap: 2rem;
}

.artist-text-list li {
    padding: 0.2rem 0;
    break-inside: avoid;
}

.artist-gallery.is-list-view .artist-grid {
    display: none;
}

.artist-gallery.is-list-view .artist-text-list {
    display: block;
}

@media (max-width: 900px) {
    .artist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .artist-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .artist-text-list {
        columns: 1;
    }
}

/* Fixed at 3 columns (larger images) instead of the 4-column default the
   shared .artist-grid uses elsewhere — used on the homepage's "Recently
   Available" grid and the Browse grid. */
.work-grid-3col {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
    .work-grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Single column — the "Selected Work" sidebar on the Artist Info page
   (.work-related-sidebar below), stacked works instead of a grid. No
   separate mobile override needed, unlike work-grid-3col — it's already
   one column. */
.work-grid-1col {
    grid-template-columns: 1fr;
}

/* Artist detail / info */

.artist-name-heading {
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

/* Matches the artist-name heading's look (large, mixed case, bold, no
   letter-spacing) — the standard section-heading style used across the
   site (Artists, Home). */
.artist-group-heading {
    font-size: 1.05rem;
    font-weight: bold;
    letter-spacing: normal;
    text-transform: none;
    margin: 0 0 1.5rem;
}

.artist-heading-row {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.work-meta .artist-heading-row {
    margin-bottom: 0.16rem;
}

.artist-heading-row .artist-name-heading {
    margin-bottom: 0;
}

/* Artist Work/Info pages only (via _tabs.html.twig) — tabs stack under the
   name instead of sitting beside it. Work detail page keeps its own
   separate, unmodified .artist-heading-row markup/layout. */
.artist-page-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.artist-tabs {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.artist-heading-row .artist-tabs {
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 0;
}

.artist-tabs a {
    font-size: 0.75rem;
    font-weight: normal;
    letter-spacing: 0.06em;
}

.artist-tabs a.is-active {
    color: #000;
    font-weight: normal;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.work-grid {
    margin-bottom: 0;
}

.artist-info h2,
.info-contact h2,
.info-overview h2,
.work-related h2,
.exhibition-images h2 {
    font-size: 1rem;
    letter-spacing: normal;
    margin: 2rem 0 0.75rem;
}

.artist-info h2:first-child,
.info-contact h2:first-child,
.info-overview h2:first-child,
.exhibition-images h2:first-child {
    margin-top: 0;
}

/* "More by {artist}" section on the Work detail page. */
.work-related {
    clear: both;
    margin-top: 3rem;
}

/* Artist Info page — Bio/Exhibitions/Press etc. in the left 70%, "Selected
   Work" sidebar in the right 30% (narrower column keeps the sidebar
   images from reading oversized next to the running text), same 720px
   stack breakpoint as .info-columns on the Info page. Gap widened from
   3rem (2026-08-18, client feedback) — the dense exhibition-history text
   running right up to the sidebar read as too tight at that width, even
   though 3rem reads fine on the sparser Exhibition/Info pages using the
   same pattern; left those alone since only this page was flagged. */
.artist-info-columns {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 5rem;
    align-items: start;
}

@media (max-width: 720px) {
    .artist-info-columns {
        grid-template-columns: 1fr;
    }
}

/* Sidebar variant of "Selected Work" — sits beside the bio instead of
   below it, so no top margin (starts level with "Bio"), and its heading
   skips the 2rem top margin .work-related h2 normally gets since it's the
   first thing in this column, not a section further down the page. */
.work-related-sidebar {
    margin-top: 0;
}

.work-related-sidebar .work-related-heading {
    margin-top: 0;
}

/* Dividers between the 4 info-sidebar sections (Gallery, Lightwell
   Gallery, Contact, Subscribe) — not applied to the Artist bio page,
   which shares the same heading font styling above but isn't divided
   into discrete sections the same way. Subscribe's heading always gets
   one (it's a separate content block from the other 3, so it's always
   ":first-child" of its own wrapper, but never the first section on the
   page) — only Gallery, the page's actual first section, is exempt. */
.info-contact h2:not(:first-child) {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-divider);
}

/* MailChimp's own stylesheet (see the note on the form rule below) also
   sets font-size/margin/padding on its own h2, and wins ties on all of
   them the same way it won the form's margin-left — hence !important on
   every property here, not just the divider ones. No margin-top (unlike
   the .info-contact rule above) since .info-sidebar's own flex gap
   (2.5rem, between the separate .info-contact and .info-mailing-list
   blocks) already provides the space above this one; adding margin-top
   too was stacking on top of that gap and pushing the rule too far down. */
#mc_embed_signup h2 {
    font-size: 1rem !important;
    letter-spacing: normal !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid var(--color-divider) !important;
}

/* MailChimp's own embed CSS (loaded via a <link> inside the raw content
   itself, so it lands later in the cascade than app.css) puts a stray
   20px left margin on the form, knocking "Subscribe" and its fields out
   of alignment with the other sidebar sections above it, and a stray
   20px top margin, which was stacking on top of .info-sidebar's flex gap
   and making the space before "Subscribe" taller than the space before
   the other section dividers — needs !important for the same reason the
   font-family override above does. */
#mc_embed_signup form {
    margin-left: 0 !important;
    margin-top: 0 !important;
}

.rich-content {
    max-width: 680px;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Real bug found live (2026-08-18, client report — "columns too close
   together" on James Woodfill's Artist Info page, isolated to specifically
   the Solo/Group Exhibitions text, not the Bio above it). Root cause
   wasn't the column gap (already confirmed correct via computed styles) —
   it was a legacy WYSIWYG paste artifact baked into the migrated content
   itself: some paragraphs carry an inline `margin-right`/`margin-left` as
   negative as -49.5pt (likely leftover from an original Word/Google Docs
   paste), which pulls that paragraph past `.rich-content`'s own 680px
   max-width and right up against the "Selected Work" sidebar regardless
   of how wide the column gap is set. Found in 2 of 184 Artist records (26
   occurrences total) when checked directly against the database — rare
   today, but exactly the kind of artifact that can reappear the next time
   someone pastes content from Word/Docs into the CMS, so this is a
   standing defensive rule (needs !important to beat the inline style),
   not a one-off content edit for just these two records.
*/
.rich-content p {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Baseline accessibility pass (SPEC.md) — links embedded in rich-text body
   content (bios, press, exhibition entries) previously inherited the
   global a{} rule (color: inherit, underline only on hover), making them
   visually identical to surrounding plain text at rest — a real WCAG
   1.4.1 "Use of Color" gap, confirmed live (the "(details)" links on an
   Artist Info page's exhibition list, among others), originally fixed
   with a permanent (not just hover) underline here.
   2026-08-18 site-wide link color pass: that permanent underline is no
   longer needed to satisfy 1.4.1 now that links are gray (#666) against
   black body text — ~3.66:1 contrast, above the 3:1 WCAG allows as an
   alternative to underlining when combined with a hover/focus state
   change (already true here: a:hover underlines, :focus-visible outlines).
   Removed so these links follow the same hover-only underline as
   everything else instead of being a special case. */

/* Solo/Group Exhibitions, Projects, Press, Honors & Awards on the Artist
   Info page — each entry is its own <p>, so this tightens both the gap
   between entries and the wrap line-height within a single entry. */
.artist-entry-list p {
    margin: 0 0 0.5em;
    line-height: 1.5;
}

/* Space above the social-links row so it doesn't butt up against the bio
   directly above it — .rich-content sets no margin of its own, so with
   no spacing here the two blocks render flush against each other. */
.artist-links {
    margin-top: 1.5em;
}

/* Work detail */

.work-detail {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}

.work-image {
    grid-row: 1 / 3;
}

.work-image-placeholder {
    aspect-ratio: 4 / 5;
    background: #f2f2f2;
}

/* Unlike the grid thumbnails (object-fit: cover, deliberately cropped to
   fill a square), the main Work image shows the artwork at its natural
   aspect ratio — cropping the hero display of the piece itself would be a
   real content problem, not just a styling one. */
.work-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Click-to-expand — only wired up for images above MediaAsset::
   ZOOM_MIN_LONG_SIDE (see the Twig conditional and lightbox_controller.js);
   smaller migrated photos don't get this cursor or the overlay markup at all.
   Work detail and Exhibition/Project detail only — list-page thumbnails
   (exhibition-thumb) link straight to the detail page instead. */
.work-image img.is-zoomable {
    cursor: zoom-in;
}

/* Exhibition detail hero (2026-08-18 refinement) — Main Image, full width
   of the left column, above the title. Same uncropped/natural-aspect-ratio
   treatment as .work-image, just scoped to this column instead of a fixed
   sidebar width. */
.exhibition-hero-image {
    margin-bottom: 1.5rem;
}

.exhibition-hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

.exhibition-hero-image img.is-zoomable {
    cursor: zoom-in;
}

/* Exhibition detail — restructured to match the Artist Info page's
   two-column pattern: title/artist/date/text in the left 65%, up to 3
   uncropped, clickable images stacked in the right 35%. Same 720px stack
   breakpoint as .artist-info-columns/.info-columns elsewhere. */
.exhibition-detail-columns {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 720px) {
    .exhibition-detail-columns {
        grid-template-columns: 1fr;
    }
}

.exhibition-images-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Deliberately no object-fit: cover here, unlike the square grid
   thumbnails elsewhere — client request: these images show at their
   natural aspect ratio, never cropped, same reasoning as the main Work/
   Exhibition hero image. */
.exhibition-images-list img {
    display: block;
    width: 100%;
    height: auto;
}

.exhibition-images-list img.is-zoomable {
    cursor: zoom-in;
}

/* "(View All)" in the "Exhibition Images" heading — a <button>, not an
   <a>, since it doesn't navigate anywhere (opens the lightbox via JS,
   same as clicking a thumbnail) — styled to read as an inline text link
   anyway, matching the site's standard link treatment (gray at rest,
   underline only on hover) since plain buttons don't inherit the a{}
   rules. */
.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #666666;
    text-decoration: none;
    cursor: pointer;
}

.link-button:hover {
    text-decoration: underline;
}

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: rgba(0, 0, 0, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.lightbox-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-out;
}

.lightbox-close {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

/* Older exhibitions with a legacy multi-image gallery — see
   Exhibition::getGalleryImages(). */
.lightbox-prev,
.lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-prev {
    left: 1rem;
}

.lightbox-next {
    right: 1rem;
}

@media (max-width: 640px) {
    .lightbox-overlay {
        padding: 3rem 1rem;
    }

    .lightbox-prev {
        left: 0.25rem;
    }

    .lightbox-next {
        right: 0.25rem;
    }
}

.work-meta .artist-name-heading {
    font-size: 0.935rem;
    font-weight: normal;
    line-height: 1.2;
    margin: 0 0 0.16rem;
}

/* Exhibition detail page reuses .artist-name-heading for the exhibition's
   own title (not an artist name) — italicized to match how work titles
   read elsewhere, distinct from the shared base rule above. */
.exhibition-title-heading {
    font-style: italic;
}

.work-title-heading {
    font-size: 0.935rem;
    font-style: italic;
    font-weight: normal;
    line-height: 1.04;
    margin: 0 0 0.24rem;
}

.work-title-heading .work-title {
    font-weight: normal;
}

.work-title-heading .work-year {
    font-weight: normal;
    font-style: normal;
}

.work-meta p {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #000;
}

.work-description {
    font-size: 0.8075rem;
    line-height: 1.36;
    margin-bottom: 0.5rem;
}

/* Artist's free-text statement about the work (Work::$additionalInformation)
   — real body copy, not a spec-sheet line, so it needs its own rule to beat
   the compact .work-meta p below rather than inheriting its tight
   margin. Deliberately kept as one running block (no white-space:
   pre-line) — client confirmed the blank lines some source text has
   shouldn't become visible paragraph breaks here. Line-height matches
   .work-meta p (the dimensions/edition line just above it) per client
   request — same rhythm, just a larger font size for a longer block of
   reading text. */
.work-meta .work-other {
    margin-top: 1.25rem;
    font-size: 0.8075rem;
    line-height: 1.4;
}

/* Reversed 2026-08-18 (client request, "prepare to revert if I don't like
   it") — was black bg/white text at rest, inverting to white/black on
   hover; now white/black at rest, inverting to black/white on hover. */
.work-contact .button {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.45rem 1.1rem;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: normal;
    letter-spacing: 0.06em;
}

.work-contact .button:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
}

.work-pager {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 1rem;
    border-top: 1px solid var(--color-divider);
}

/* Inside .work-meta (the Work detail page), the pager sits right under the
   Inquire button instead of at the bottom of the grid — no separating
   line, same gap as above the button, no caps, matches the dimensions
   text size. Browse's pagination keeps the styling above unchanged. */
.work-meta .work-pager {
    grid-column: auto;
    justify-content: flex-start;
    gap: 1.5rem;
    font-size: 0.765rem;
    letter-spacing: normal;
    text-transform: none;
    margin-top: 2rem;
    padding-top: 0;
    border-top: none;
}

@media (max-width: 720px) {
    .work-detail {
        grid-template-columns: 1fr;
    }

    .work-image {
        grid-row: auto;
    }

    .work-pager {
        grid-column: 1;
    }
}

/* Info page */

.info-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: start;
}

.info-overview .rich-content {
    max-width: none;
}

.info-overview p {
    margin: 0 0 1.25rem;
}

.info-installations img {
    display: block;
    width: 100%;
    height: auto;
}

.info-installations p {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #000;
}

.info-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* A flex item's own contents form a new formatting context, so this
   paragraph's margin-bottom doesn't collapse away the way it would in
   normal flow (like the margins the other, in-flow dividers rely on) —
   it was stacking on top of the flex gap above, making the space before
   the Subscribe divider taller than the space before the other dividers.
   Zeroing it here lets the flex gap alone match that same 1.25rem. */
.info-contact p:last-child {
    margin-bottom: 0;
}

.info-contact p {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.info-mailing-list {
    font-size: 0.9rem;
}

/* Baseline font/spacing match for the MailChimp embed (SPEC.md: "gets a
   reasonable baseline match now... full polish happens in the later
   deferred pass"). The embed's own width fix is applied directly in its
   stored content, not here. */
#mc_embed_signup {
    font-family: inherit !important;
}

/* Found via real-device iOS Safari testing (not reproducible in Chromium
   emulation): the embed's own inline <style> block sets a 14px base font,
   inherited by these inputs. Below 16px, iOS Safari auto-zooms the whole
   page on focus — jarring on a form a visitor is about to type into. */
#mc_embed_signup input[type="email"],
#mc_embed_signup input[type="text"] {
    font-size: 16px !important;
}

/* Baseline accessibility pass (SPEC.md) — the embed's own required-field
   asterisk color (a light red-orange) measured 3.48:1 against white,
   short of the 4.5:1 WCAG AA needs for text this size. Same !important
   override convention as the two rules above, for the same reason (the
   embed's own inline <style> block loads later in the cascade). Black
   also matches the site's own "no color-only indicators" convention. */
#mc_embed_signup .asterisk {
    color: #000 !important;
}

@media (max-width: 720px) {
    .info-columns {
        grid-template-columns: 1fr;
    }
}

/* Footer */

.site-footer {
    flex-shrink: 0;
    width: 100%;
    background: #000;
    color: #fff;
}

.site-footer-inner {
    display: flex;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
    font-size: 0.6375rem;
}

.footer-copyright {
    margin: 0;
    text-align: left;
}