/*
 *  Copyright (c)  1999-2022
 *  Cal Holman - All Rights Reserved
 *  calvin@holview.com
 */

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

/* ?????????????????????????????????????????????????
   DESIGN TOKENS
   Single source of truth ? change here, updates everywhere
????????????????????????????????????????????????? */
:root {
    --bg:            #faf9f7;   /* warm off-white page background      */
    --bg-hover:      #f0ede8;   /* card/row hover state                */
    --bg-inset:      #f3f0eb;   /* inset surfaces, essay background    */
    --text-primary:  #2a2520;   /* warm near-black                     */
    --text-secondary:#6a5f55;   /* body copy, descriptions             */
    --text-muted:    #a09080;   /* eyebrows, meta, labels              */
    --border:        rgba(42, 37, 32, 0.12); /* hairline dividers      */
    --border-accent: rgba(42, 37, 32, 0.22); /* slightly stronger rule */
    --serif:         'Cormorant Garamond', Georgia, serif;
    --sans:          'Helvetica Neue', Helvetica, Arial, sans-serif;
    --serif-weight:   600;
    --transition:    0.25s ease;
}

/* ?????????????????????????????????????????????????
   RESET & BASE
????????????????????????????????????????????????? */

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--sans) ;
    background: var(--bg);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: none;
}



.details {
    padding: 20px;
    background-color: #252525;
    font-size: 100%;
    line-height: 150%;
}

h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    font-style: normal;
}
h2 {
 line-height: 1.5;
 }

h3 {
    font-size: 110%;
}

h4 {
    font-size: 90%;
    padding: 2px;
    border: medium;
}

.Heading {
    font-family: var(--serif);
    font-size: 22px;
    font-weight : normal;
    color : #2a2520;
}


.HeadingSub {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: normal;
    color : #6a5f55;
}

.Lables{
    color : #a09080
}



.Content {
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    font-style: normal;
    text-align: left;
} /* For all text */

.SmallText{
    font-family: Helvetica Neue, sans-serif;
    font-size: 10px;
    color: #000000;
}  /* Used on the guest book page */


.FormErrorText{
    font-family: Helvetica Neue, sans-serif;
    font-size: 12px;
    color: red;
}  /* Used on the guest book page */

.quote-attribution {
    padding-left: 16px;
    font-family: var(--sans);
    font-size: 9px;
    font-style: normal;
    color: #a09080;
    letter-spacing: 0.02em;
    text-align: right;
}

.quote-attribution::before {
    content: "- ";
}

.back-to-top {
    position: fixed;
    bottom: 1rem;
    right: 0;

    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;

    background: var(--bg-inset);
    color: black;
    font-size: 10px;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .25s ease;
    z-index: 1000;
}

.back-to-top.show {
    opacity: .9;
    visibility: visible;
    pointer-events: auto;
}

.back-to-top:hover {
    opacity: 5;
}

/* commomn attribute */

.card-title,
.page-title,
.era-name,
.era-heading,
.era-sub-heading,
.show-title,
.show-hero-title,
.show-minor-title,
.show-paintings-count,
.show-cta-heading {
    font-family: var(--serif);
    font-style: italic;
    font-weight: var(--serif-weight);
}

.era-pull-quote,
.era-pull,
.show-pull {
    font-family: var(--serif);
    font-weight: var(--serif-weight);
    font-style: italic;
    color: var(--text-primary);
    border-left: 2px solid var(--border-accent);
}

.card-desc,
.era-body-text,
.era-essay-text,
.show-essay-text,
.show-desc,
.show-minor-desc,
.show-cta-text,
.page-intro {
    font-family: var(--sans);
    color: var(--text-secondary);
}

.label-caps {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Menu classes */

#topheader,
.navbar {
    position: relative;
    z-index: 2000;
}

.card {
    background: #faf9f7;
    padding: 32px 28px;
    border: 0.5px solid rgba(42,37,32,0.12);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.card:hover {
    background: #f0ede8;
}

.card-img {
    width: 100%;
    aspect-ratio: 3 / 2;      /* landscape frame */
    object-fit: contain;       /* whole image, no cropping */
    object-position: center;
    background-color: #f0ede8; /* warm cream fills the side gaps */
    display: block;
    border-radius: 2px;
    margin-bottom: 20px;
}

.card-eyebrow {
    font-family: var(--sans) ;
    font-size: 9px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #a09080;
    margin-bottom: 8px;
}

.card-title {
    font-size: 22px;
    color: #2a2520;
    margin-bottom: 12px;
}

.card-desc {
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.card-arrow {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a09080;
    transition: color 0.2s ease;
}
.card-arrow::after {
    content: ' \2192';   /* unicode right arrow as fallback */
}
.card:hover .card-arrow {
    color: #2a2520;
}

.quote-container {
    position: relative;
    min-height: 100px; /* Prevents layout layout shifts if quotes vary in length */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
}

.quote {
    position: absolute;
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* Controls the fade speed */
    width: 100%;
}

.quote.active {
    opacity: 1;
}



/* end card css */


/* ?????????????????????????????????????????
   Navbar base
????????????????????????????????????????? */

.navbar .dropdown-menu {
    z-index: 2100;
}

.navbar-light .navbar-nav .nav-link {
    color: #a09080;
    text-transform: uppercase;
}

.bh-navbar-brand {
    color: #a09080;
    font-family: Helvetica Neue, sans-serif;
    font-size: 16px;
    margin: 5px;
}


/* Logo */

.my-logo {
    display: flex;
    align-items: center;
    align-self: center;
    height: auto;
    line-height: 0;
}

.my-logo img {
    max-width: clamp(140px, 24vw, 320px);
    height: auto;
    display: block;
}

/* desktop */
.catalogue-short {
    display:none;
}


/* phone */
@media (max-width:670.98px) {

    .catalogue-full {
        display:none;
    }

    .catalogue-short {
        display:inline;
    }

}
/* Desktop */

/* ?????????????????????????????????????????
   Mobile navigation drawer
????????????????????????????????????????? */

@media (max-width: 575.98px) {

    /* Navbar becomes the positioning context */
    .navbar {
        position: relative;
    }


    .navbar-toggler {
        margin-top: 15px;
        padding: .25rem .5rem;
    }

    /* Drawer during opening and when open */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        transition: none !important;

        position: absolute;
        top: 100%;
        right: 0;
        left: auto;

        width: 220px;
        padding: 1rem 1.25rem;

        background: var(--bg);
        box-shadow: 0 8px 20px rgba(0,0,0,.12);

        z-index: 2000;
    }

    .navbar-nav {
        margin: 0;
        padding: 0;
        transform: none;

        align-items: flex-end;
        text-align: right;
    }

    .navbar-nav .nav-link {
        display: block;
        width: auto;
        padding: .45rem 0;
        line-height: 1.3;
    }

    /* Slightly smaller branding on phones */
    .my-logo {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .my-logo img {
        max-width: 180px;
    }

    .bh-navbar-brand {
        font-size: 15px;
    }
}


@media (max-width:575.98px) {

    .my-logo {
        padding-top:4px;
        padding-bottom:4px;
    }
    .bh-navbar-brand {
        font-size:15px;
    }

    .my-logo img {
        max-width:180px;
    }

}


/* Menu classes */



/* footer classes */
/* ?????????????????????????????????????????????????
   FOOTER  (shared across all pages)
????????????????????????????????????????????????? */
.footer {
    border-top: 0.5px solid var(--border);
    padding: 28px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.footer-links {
    display: flex;
    gap: 28px;
    align-items: center;

}

.footer-link {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--transition);
}

.footer-link:hover {
    color: var(--text-primary);
}


.copyright {
    font-family: Helvetica Neue, sans-serif;
    font-size: clamp(0.70rem, 1.3vw, 0.85rem);
    line-height: 1.2;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align:center;
    color : #6a5f55;
    margin-top:15px;
    margin-bottom:0;
}

.copyright a {
    color: black;
}

.mobile-label {
    display:none;
}


@media (max-width: 575.98px) {
    .desktop-label {
        display:none;
    }

    .mobile-label {
        display:inline;
    }

    .copyright {
        font-size:0.72rem;
        line-height: 1.15;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .footer {
        flex-direction:column;
        align-items:center;
        gap:0.4rem;
    }

    .footer-social {
        margin-bottom: 0.15rem;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;          /* was 0.5rem */
    }

    .footer-link {
        line-height: 1.2;
        padding: 0.1rem 0;
    }
}
.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: 500;
    color: #888888; /* Low contrast gray text by default */
    transition: color 0.3s ease;
}

.instagram-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

    /* Forces the colorful icon wrapper to be muted gray and slightly faded */
    filter: grayscale(100%) brightness(0.9);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.instagram-icon {
    display: block;
}

/* Rollover state */
.instagram-link:hover {
    color: #d6249f; /* Text shifts to Instagram purple-pink on hover */
}

.instagram-link:hover .instagram-icon-wrapper {
    filter: grayscale(0%) brightness(1); /* Snaps the gradient back to full color */
    opacity: 1; /* Brings opacity to full strength */
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

.footer-legal-links a {
    font-family: var(--sans);
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.footer-legal-links a:hover {
    color: var(--text-primary);
}

.footer-legal-dot {
    font-size: 5px;
    color: var(--text-muted);
    line-height: 1;
}

/* end footer classes */




/* used on gallery pages */


.mytable {
    display: table;
    width: 100%; /* or any desired width */
    border-collapse: collapse; /* Optional: removes extra space between cells */
}

.myrow {
    display: table-row;
}

.mycell {
    display: table-cell;
    padding: 0;
    border: 1px solid #ddd;
}

/* used on gallery display */
.title_text {
    font-size:20px;
    width:100%;
    border-style: outset;
    border-width: 5px;
    border-collapse: separate;
    border-spacing: 7px;
}
/* end used on gallery pages */




/* ?????????????????????????????????????????????????
   ERA ACCORDION
????????????????????????????????????????????????? */
.era-years {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    min-width: 96px;
}

.era-name {
    font-size: 26px;
    color: var(--text-secondary);
    transition: color var(--transition);
}

.era-subtitle {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}


.era-teaser {
    display: flex;
    gap: 5px;
}

.era-teaser-img {
    width: 48px;
    height: 36px;
    border-radius: 2px;
    object-fit: cover;
    opacity: 0.65;
    transition: opacity var(--transition);
}

/* ?? Essay column ?? */


.era-pull-quote {
    font-size: 16px;
    line-height: 1.65;
    padding-left: 16px;
    margin-bottom: 18px;
}

.era-essay-text {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.era-essay-text p + p {
    margin-top: 12px;
}




/*
  Painting grid:
  auto-fill with minmax so it reflows at any width.
  On a typical desktop the 1fr essay column is ~240px
  and the gallery column fills the rest (~600-700px),
  giving roughly 4 paintings per row.
*/
.era-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

/* Each painting is a link to its Catalogue Raisonné record */
.era-painting {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.era-painting-img {
    transition: opacity var(--transition);
    padding: 10px 10px 5px 10px;
    cursor: pointer;
}

.era-painting:hover .era-painting-img {
    opacity: 0.82;
}

.era-painting-info {
    padding: 0 10px 0 10px;
}

.era-painting-title {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-primary);
    line-height: 1.35;
}

.era-painting-meta {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}


/* ?????????????????????????????????????????????????
   PAGE HEADER
   Reusable pattern for all interior pages
????????????????????????????????????????????????? */
.page-header {
    padding: 56px 48px 40px;
    border-bottom: 0.5px solid var(--border);
}

.page-eyebrow {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.page-title {
    font-family: var(--serif);
    font-size: 42px;
    font-weight: var(--serif-weight);
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 16px;
}

.page-intro {
    font-size: 14px;
    line-height: 1.8;
}



.accordion-button,
.accordion-button:not(.collapsed),
.accordion-body {
    background: var(--bg);
    color: var(--text-primary);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button::after {
    transform: scale(.7);
    opacity: .6;
}

.accordion-button {
    padding: .8rem 0;
}

.accordion-body {
    padding: 1rem 0 3rem 0;
}

.accordion-item {
    border-left: none;
    border-right: none;
    padding: 0 20px 0 20px;
    background: var(--bg);
    border-bottom: 0.5px solid var(--border);
}


@media (max-width: 576px) { .era-third { display: none; } }


/*
     life.html ? page-specific styles only.
     All tokens, nav, footer, page-header, card
     classes live in styles.css.
   */

/* ??????????????????????????????????????????????
   DESKTOP LAYOUT
   Two columns: sticky left timeline + scrollable
   right content. Shown only on md and up via
   Bootstrap d-none d-md-flex.
?????????????????????????????????????????????? */

.life-outer {
    border-top: 0.5px solid var(--border);
}

/* ?? Left: sticky timeline column ?????????????? */
.timeline-col {
    /*
      sticky: col stays fixed in the viewport while
      the right panel scrolls past it.
      top value = height of your navbar.
      Adjust if your navbar is taller or shorter.
    */
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 0.5px solid var(--border);
    padding: 40px 0 40px 40px;

    /* hide scrollbar ? col can scroll but invisibly */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.timeline-col::-webkit-scrollbar { display: none; }


/* ?? Spine: the vertical line + animated progress ?? */
.spine-wrap {
    position: relative;
    padding-left: 24px;
}

/* Full-height faint track */
.spine-wrap::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--border);
}

@media (max-width: 767.98px) {

    .spine-wrap::before {
        display: block;
        left: 0;
        right: 0;
        top: 4px;
        bottom: auto;
        width: auto;
        height: 1px;
    }

    .spine-wrap {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        padding-left: 0;
    }

    .timeline-col {
        position: sticky;
        top: 0;
        z-index: 100;
        width: 100%;
        height: auto;
        padding: 1rem;
        border-right: none;
        border-bottom: 0.5px solid var(--border);
        background: var(--bg);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .timeline-col::-webkit-scrollbar {
        display: none;
    }

    .era-section {
        padding: 2rem 1rem;
        scroll-margin-top: 190px;
    }

}

/* Animated progress line ? height set by JS */
.spine-progress {
    position: absolute;
    left: 4px;
    top: 8px;
    width: 1px;
    height: 0%;
    background: var(--text-primary);
    transition: height 0.2s ease;
    pointer-events: none;
}


@media (max-width: 767.98px) {

    .spine-wrap::before {
        display: none;
    }

    .spine-progress {
        display: none;
    }

}
/* ?? Individual timeline entry ?????????????????? */
.tl-entry {
    position: relative;
    padding: 0 20px 32px 18px;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.tl-entry:last-child { padding-bottom: 0; }

.tl-dot {
    position: absolute;
    left: -4px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(42,37,32,0.18);
    border: 1.5px solid var(--bg);
    transition: background var(--transition), transform var(--transition);
    z-index: 1;
}
.tl-entry.active .tl-dot {
    background: var(--text-primary);
    transform: scale(1.3);
}

.tl-year {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
    transition: color var(--transition);
}

.tl-title {
    font-family: var(--serif);
    font-size: 14px;
    font-style: italic;
    font-weight: var(--serif-weight);
    line-height: 1.3;
    color: var(--text-muted);
    transition: color var(--transition);
}

.tl-short-title {
    display: none;
}

.tl-entry.active .tl-year,
.tl-entry.active .tl-title {
    color: var(--text-primary);
}

@media (max-width: 767.98px) {

    .tl-entry {
        flex: 1;
        min-width: 0;
        padding: 0;
    }

    .tl-dot {

        position: static;
        margin: 0 auto 0.5rem;
        display: block;
    }

    .tl-year {
        display: none;
        text-align: center;
    }

    .tl-title {
        display: none;
        text-align: center;
    }

    .tl-short-title {
        display: block;
        text-align: center;
        font-family: var(--sans);
        font-size: 9px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-top: 2px;
    }
}

/* ?? Right: scrollable content column ?????????? */
.content-col {
    /*
      This column scrolls normally with the page ?
      no special overflow needed. The left col is
      what's sticky.
    */
    padding: 0;
}

/* Each era is a full content block separated by a hairline */
.era-section {
    padding: 48px 48px 56px;
    border-bottom: 0.5px solid var(--border);
    /*
      scroll-margin-top: leaves breathing room when
      a section is jumped to programmatically.
      Set to navbar height + a little extra.
    */
    scroll-margin-top: -50px;
}
.era-section:last-child { border-bottom: none; }

@media (max-width: 767.98px) {

    .era-section {
        padding: 2rem 1rem;
        scroll-margin-top: 50px;
    }
}

.life-hero-photo {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.life-photo {
    width: 100%;
    height: auto;
    border-radius: 3px;
    margin-bottom: 10px;
    background: var(--bg-inset);
}

.life-painting {
    display: flex;
    flex-direction: column;
}

.life-painting-img {
    height: 220px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.era-period {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    margin-top: 8px;
}

.era-heading {
    font-size: 30px;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 20px;
}

.era-sub-heading {
    font-size: 20px;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 20px;
}

.era-body-text {
    font-size: 13px;
    line-height: 1.9;
}

.era-body-text p + p { margin-top: 14px; }

.era-pull {
    font-size: 16px;
    line-height: 1.65;
    padding-left: 18px;
    margin: 22px 0;
}

/* ?? Second photo: optional inline image ??????? */
.era-photo-inline {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    margin: 24px 0;
    background: var(--bg-inset);
}

.era-photo-caption {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-top: -16px;
    margin-bottom: 20px;
    font-style: italic;
}

.era-facts {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    padding: 0.75rem 0;
    margin: 1.5rem 0 2rem;

    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: var(--text-muted);
}

/*
  show-nogales-2024.html ? individual show page.
  Same template reused for every major show ?
  only the content changes.
*/

/* ?? Back link ??????????????????????????????????? */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    padding: 20px 0 0;
    transition: color var(--transition);
}
.back-link:hover { color: var(--text-primary); }
.back-arrow { font-size: 14px; }

/* ?? Show hero ???????????????????????????????????? */
.show-hero {
    position: relative;
    width: 100%;
    /*
      Full-bleed hero image ? either the show poster
      or an opening night photograph.
      Adjust height to suit your image proportions.
    */
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--bg-inset);
    margin-bottom: 0;
}

.show-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    display: block;
}

.show-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            transparent 40%,
            rgba(20,15,10,0.65) 100%
    );
}

.show-hero-caption {
    position: absolute;
    bottom: 28px;
    left: 48px;
    right: 48px;
}

.show-hero-venue {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(250,245,235,0.7);
    margin-bottom: 6px;
}

.show-hero-title {
    font-size: 40px;
    color: rgba(250,245,235,0.95);
    line-height: 1.1;
}

/* ?? Show metadata bar ???????????????????????????? */
.show-meta-bar {
    border-bottom: 0.5px solid var(--border);
    padding: 24px 0;
}


.meta-item-value {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ?? Essay ???????????????????????????????????????? */
.show-essay {
    padding: 48px 0 40px;
    border-bottom: 0.5px solid var(--border);
}

.show-essay-text {
    font-size: 14px;
    line-height: 1.9;
}

.show-essay-text p + p { margin-top: 14px; }

.show-pull {
    font-family: var(--serif);
    font-size: 19px;
    font-style: italic;
    line-height: 1.65;
    color: var(--text-primary);
    border-left: 2px solid var(--border-accent);
    padding-left: 20px;
    margin: 28px 0;
}

/* ?? Opening photos ??????????????????????????????? */
.show-photos {
    padding: 40px 0;
    border-bottom: 0.5px solid var(--border);
}


/*
  Horizontal scroll gallery for opening night photos.
  On mobile this scrolls horizontally without breaking layout.
*/
.photo-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.photo-scroll-item {
    flex-shrink: 0;
    width: 280px;
    height: 200px;
    border-radius: 3px;
    object-fit: cover;
    background: var(--bg-inset);
    display: block;
}

.photo-scroll-caption {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 8px;
    font-style: italic;
}

/* ?? Paintings in the show ???????????????????????? */
.show-paintings {
    padding: 40px 0 60px;
}



.show-paintings-count {
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 24px;
}

/*
  Painting grid ? same pattern as era grid on work.html.
  auto-fill so it reflows at any column width.
*/
.painting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

/* Each painting links to its Catalogue Raisonné record */
.painting-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.painting-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    transition: opacity var(--transition);
    background: var(--bg-inset);
}

.painting-item:hover .painting-img { opacity: 0.82; }

.painting-info { padding: 7px 0 0; }

.painting-title {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-primary);
    line-height: 1.3;
}

.painting-meta {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ?? Inquire CTA ?????????????????????????????????? */
.show-cta {
    background: var(--bg-inset);
    border-radius: 4px;
    padding: 32px 36px;
    margin-top: 40px;
}

.show-cta-heading {
    font-size: 22px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.show-cta-text {
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.show-cta-link {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-primary);
    border: 0.5px solid var(--text-primary);
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.show-cta-link:hover {
    background: var(--text-primary);
    color: var(--bg);
}


/* end of single slow */


/* ?? Shows Section label ???????????????????????????????? */
.shows-section-label {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 40px 0 16px;
    border-bottom: 0.5px solid var(--border);
}

/* ????????????????????????????????????????????????
   MAJOR SHOW CARD
   Links to its own dedicated show page.
???????????????????????????????????????????????? */
.show-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-bottom: 0.5px solid var(--border);
    padding: 32px 0;
    transition: background var(--transition);
}
.show-card:hover { background: var(--bg-hover); }
.show-card:hover .show-arrow { color: var(--text-primary); }

.show-poster {
    width: 100%;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    background: var(--bg-inset);
}

.show-venue {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.show-title {
    font-size: 22px;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 8px;
}

.show-dates {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
    letter-spacing: 0.06em;
}

.show-desc {
    font-size: 13px;
    line-height: 1.75;
    margin-bottom: 16px;
}

/*
  Representative works strip ? shown on major show cards.
  3?4 thumbnails give a visual preview before clicking.
  On mobile they stack 2-wide via flex-wrap.
*/
.show-preview-strip {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.show-preview-img {
    width: 80px;
    height: 60px;
    border-radius: 2px;
    object-fit: cover;
    display: block;
    background: var(--bg-inset);
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity var(--transition);
}

.show-card:hover .show-preview-img { opacity: 1; }

.show-preview-more {
    width: 80px;
    height: 60px;
    border-radius: 2px;
    border: 0.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.show-arrow {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--transition);
}


/* ????????????????????????????????????????????????
   MINOR SHOW ? accordion expand
???????????????????????????????????????????????? */
.show-minor {
    border-bottom: 0.5px solid var(--border);
}

.show-minor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    cursor: pointer;
    user-select: none;
}

.show-minor-header:hover .show-minor-title {
    color: var(--text-primary);
}

.show-minor-left { flex: 1; }

.show-minor-title {
    font-size: 18px;
    color: var(--text-secondary);
    transition: color var(--transition);
    margin-bottom: 3px;
}

.show-minor-meta {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

.show-minor-chevron {
    width: 10px; height: 10px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    margin-top: -4px;
    flex-shrink: 0;
    margin-left: 20px;
    transition: transform 0.3s ease, margin-top 0.3s ease;
}

.show-minor.open .show-minor-chevron {
    transform: rotate(225deg);
    margin-top: 4px;
}

/* Smooth accordion */
.show-minor-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
    overflow: hidden;
}
.show-minor.open .show-minor-body { grid-template-rows: 1fr; }
.show-minor-body-wrap { overflow: hidden; }

.show-minor-content {
    padding: 4px 0 28px;
}

.show-minor-desc {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 18px;
}

/*
  Thumbnail strip inside minor show accordion.
  Each thumbnail links directly to the painting's
  Catalogue Raisonné record.
*/
.show-minor-works {
    margin-bottom: 16px;
}

.show-minor-thumb-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/*
  Each thumb is a link to the Catalogue record ?
  so clicking a thumbnail takes you straight to
  that painting's full entry.
*/
.show-minor-thumb-link {
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}

.show-minor-thumb {
    width: 90px;
    height: 68px;
    border-radius: 2px;
    object-fit: cover;
    display: block;
    background: var(--bg-inset);
    transition: opacity var(--transition);
}

.show-minor-thumb-link:hover .show-minor-thumb { opacity: 0.75; }

.show-minor-thumb-title {
    font-family: var(--sans);
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.3;
    max-width: 90px;
}

/* Bottom links row: Catalogue filter + external if any */
.show-minor-links {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 0.5px solid var(--border);
}

.show-minor-cta {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-decoration: none;
    border: 0.5px solid var(--text-primary);
    padding: 8px 16px;
    border-radius: 2px;
    transition: background var(--transition), color var(--transition);
}

.show-minor-cta:hover {
    background: var(--text-primary);
    color: var(--bg);
}

.show-minor-ext-link {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.show-minor-ext-link:hover { color: var(--text-primary); }


/* end of shows styles */

/*
  studio.html ? page-specific styles.
  The page is structured as a guided tour through
  four distinct spaces, each with a full-bleed
  section image, intro text, and a masonry photo
  gallery of that space.
*/

/* ?? Space section ??????????????????????????????
   Each space (Outside, Entry, Living, Painting room)
   is a <section> with a consistent structure:
     - full-bleed hero photo of that space
     - space number + name
     - intro paragraph
     - masonry photo grid
???????????????????????????????????????????????? */
.space-section {
    border-top: 0.5px solid var(--border);
    padding: 56px 0;
}

/* Space number + name header */
.space-header {
    margin-bottom: 32px;
}

.space-number {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.space-name {
    font-family: var(--serif);
    font-size: 32px;
    font-style: italic;
    font-weight: var(--serif-weight);
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 16px;
}

.space-intro {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.85;
    color: var(--text-secondary);
}

/* ?? Full-bleed space hero ??????????????????????
   One key photograph leads each section.
   Chosen for its ability to establish the mood
   of that space before the gallery opens.
???????????????????????????????????????????????? */
.space-hero {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 3px;
    margin-bottom: 40px;
    background: var(--bg-inset);
}

/* ?? Pull quote ?????????????????????????????????  */
.space-pull {
    font-family: var(--serif);
    font-size: 18px;
    font-style: italic;
    line-height: 1.7;
    color: var(--text-primary);
    border-left: 2px solid var(--border-accent);
    padding-left: 20px;
    margin: 24px 0 32px;
}

/* ?? Masonry photo grid ?????????????????????????
   Each photo is a Bootstrap column.
   img-fluid fills column width at natural ratio ?
   no cropping, portraits stay tall, landscapes wide.
   Masonry JS packs into shortest column.
   Caption sits below each photo.
???????????????????????????????????????????????? */
.photo-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
}

.photo-link img {
    border-radius: 2px;
    transition: opacity var(--transition);
}

.photo-link:hover img { opacity: 0.88; }

.photo-caption {
    font-family: var(--sans);
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.4;
    padding: 0 2px;
}

/* ?? Hacienda fact bar ??????????????????????????
   Key facts about the building shown once,
   between the page intro and the first space.
???????????????????????????????????????????????? */
.fact-bar {
    background: var(--bg-inset);
    border-radius: 4px;
    padding: 28px 32px;
    margin-bottom: 0;
}

.fact-item-label {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.fact-item-value {
    font-family: var(--serif);
    font-size: 20px;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.2;
}

/* ?? Lightbox overlay ???????????????????????????
   Clicking any photo opens it full-screen.
   Click anywhere to close.
???????????????????????????????????????????????? */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,8,5,0.92);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}

.lightbox.active {
    display: flex;
}

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.6);
}

.lightbox-caption {
    position: fixed;
    bottom: 24px;
    left: 0; right: 0;
    text-align: center;
    font-family: var(--sans);
    font-size: 12px;
    font-style: italic;
    color: rgba(250,245,235,0.6);
    letter-spacing: 0.06em;
    pointer-events: none;
}

.lightbox-close {
    position: fixed;
    top: 20px; right: 24px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(250,245,235,0.5);
    cursor: pointer;
    transition: color 0.2s;
}

.lightbox-close:hover { color: rgba(250,245,235,0.9); }

/* Mobile: tighten spacing */
@media (max-width: 575.98px) {
    .space-section { padding: 36px 0; }
    .fact-bar { padding: 20px; }
    .space-pull { font-size: 16px; }
}

/*  end of the studio section */


/* Home page css */

.home-slideshow {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100dvh - 120px);
    overflow: hidden;
    background-color: #000;
}

.home-slideshow-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
}

.home-slideshow-image.fade-out {
    opacity: 0;
}

.home-slideshow-caption {
    font-family: "Helvetica Neue", sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 2rem;
    color: #faf9f7;
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.70),
            rgba(0, 0, 0, 0.00)
    );
    font-size: 1.1rem;
    text-align: center;
    pointer-events: none;
}

@media (max-width: 900px) {
    .home-slideshow {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        max-height: none;
        overflow: visible;
        background-color: #000;
    }

    .home-slideshow-image {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: calc(100dvh - 150px);
        object-fit: contain;
        object-position: top center;
        background-color: #000;
    }

    .home-slideshow-caption {
        font-family: "Helvetica Neue", sans-serif;
        position: static;
        width: 100%;
        padding: 0.65rem 1rem;
        color: #faf9f7;
        background: #000;
        font-size: 0.85rem;
        line-height: 1.25;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .home-slideshow-image {
        max-height: calc(100dvh - 135px);
    }

    .home-slideshow-caption {
        font-size: 0.8rem;
        padding: 0.55rem 0.75rem;
    }
}

/* end of home page section */

/*
        about.html ? page-specific styles.
        Tokens, nav, footer, page-header in styles.css.
      */

/* ?? Section divider ?????????????????????????????? */
.about-section {
    padding: 56px 0;
    border-top: 0.5px solid var(--border);
}

.about-section-label {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* ?? Artist statement ????????????????????????????? */
.artist-statement {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-secondary);
}
.artist-statement p + p { margin-top: 16px; }

.artist-pull {
    font-family: var(--serif);
    font-size: 20px;
    font-style: italic;
    line-height: 1.65;
    color: var(--text-primary);
    border-left: 2px solid var(--border-accent);
    padding-left: 20px;
    margin: 28px 0;
}

/* ?? Essay blocks ????????????????????????????????? */
.essay-block {
    padding: 40px 0;
    border-bottom: 0.5px solid var(--border);
}
.essay-block:last-child { border-bottom: none; }

.essay-author-block {
    margin-bottom: 28px;
}

.essay-title {
    font-family: var(--serif);
    font-size: 26px;
    font-style: italic;
    font-weight: var(--serif-weight);
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.2;
}

.essay-byline {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

.essay-text {
    font-family: var(--serif);
    font-weight: var(--serif-weight);
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-secondary);
}
.essay-text p + p { margin-top: 16px; }

.essay-pull {
    font-family: var(--serif);
    font-size: 18px;
    font-style: italic;
    color: var(--text-primary);
    border-left: 2px solid var(--border-accent);
    padding-left: 18px;
    margin: 24px 0;
    line-height: 1.65;
}

/* "Read full essay" / download link */
.essay-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-primary);
    border: 0.5px solid var(--text-primary);
    padding: 10px 18px;
    border-radius: 2px;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.essay-download:hover {
    background: var(--text-primary);
    color: var(--bg);
}

/* ?? Obituary ????????????????????????????????????? */
.obit-dateline {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.obit-portrait {
    max-height: 250px;
    object-position: center top;
    border-radius: 3px;
    display: block;
    background: var(--bg-inset);
}

.obit-text {
    font-family: var(--serif);
    font-weight: var(--serif-weight);
    font-size: 15px;
    line-height: 1.95;
    color: var(--text-secondary);
}
.obit-text p + p { margin-top: 18px; }

/* Ithaka poem ? set differently from prose */
.obit-poem {
    font-family: var(--serif);
    font-size: 15px;
    font-style: italic;
    line-height: 1.9;
    color: var(--text-primary);
    border-left: 2px solid var(--border-accent);
    padding-left: 20px;
    margin: 24px 0;
}

/* ?? Public collections ??????????????????????????? */
.collection-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.collection-item {
    border-bottom: 0.5px solid var(--border);
}
.collection-item:last-child { border-bottom: none; }

.collection-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 18px 0;
    text-decoration: none;     /* removes underline if it's an <a> */
    color: inherit;             /* prevents link-blue on text */
    transition: opacity var(--transition);
}

/* Hover feedback only matters when it's a real link */
a.collection-row:hover {
    opacity: 0.7;
}

.collection-name {
    font-family: var(--serif);
    font-size: 18px;
    font-style: italic;
    color: var(--text-primary);
    flex: 1;
}

.collection-location {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-align: right;
}

/* ?? Galleries ???????????????????????????????????? */
.gallery-card {
    padding: 28px 0;
    border-bottom: 0.5px solid var(--border);
}
.gallery-card:last-child { border-bottom: none; }

.gallery-name {
    font-family: var(--serif);
    font-size: 22px;
    font-style: italic;
    font-weight: var(--serif-weight);
    color: var(--text-primary);
    margin-bottom: 6px;
}

.gallery-location {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.gallery-desc {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.gallery-link {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}
.gallery-link:hover { color: var(--text-primary); }

/* ?? Press & Downloads ???????????????????????????? */
.download-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 0.5px solid var(--border);
}
.download-card:last-child { border-bottom: none; }

.download-thumb {
    width: 72px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 2px;
    object-fit: cover;
    background: var(--bg-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--border);
}

/* PDF icon placeholder */
.download-thumb-icon {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.download-info { flex: 1; }

.download-type {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.download-title {
    font-family: var(--serif);
    font-size: 18px;
    font-style: italic;
    font-weight: var(--serif-weight);
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.2;
}

.download-desc {
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    border: 0.5px solid var(--text-primary);
    padding: 8px 14px;
    border-radius: 2px;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.download-btn:hover {
    background: var(--text-primary);
    color: var(--bg);
}

/* ?? Contact form ????????????????????????????????? */
.contact-form-wrap {
    background: var(--bg-inset);
    border-radius: 4px;
    padding: 36px 40px;
}

.form-label-custom {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: block;
}

.form-control-custom {
    width: 100%;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg);
    border: 0.5px solid var(--border-accent);
    border-radius: 2px;
    padding: 10px 14px;
    outline: none;
    transition: border-color var(--transition);
    appearance: none;
}
.form-control-custom:focus {
    border-color: var(--text-secondary);
}

textarea.form-control-custom {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--text-primary);
    border: none;
    border-radius: 2px;
    padding: 12px 28px;
    cursor: pointer;
    transition: opacity var(--transition);
}
.form-submit:hover { opacity: 0.8; }

.form-note {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 12px;
    line-height: 1.6;
}

/* Mobile adjustments */
@media (max-width: 575.98px) {
    .contact-form-wrap { padding: 24px 20px; }
    .collection-item { flex-direction: column; gap: 4px; }
    .download-card { flex-direction: column; }
}

/* ?? Social media ????????????????????????????????? */
.social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
}

.social-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding-bottom: 4px;
    border-bottom: 0.5px solid transparent;
    transition: border-color var(--transition), opacity var(--transition);
}
.social-link:hover {
    opacity: 0.7;
    border-bottom-color: var(--border-accent);
}

.social-platform {
    font-family: var(--serif);
    font-size: 16px;
    font-style: italic;
    font-weight: var(--serif-weight);
    color: var(--text-primary);
}

.social-handle {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* ?? Press (articles) ????????????????????????????? */
.press-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 0.5px solid var(--border);
}
.press-card:last-child { border-bottom: none; }

.press-thumb {
    width: 72px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 2px;
    object-fit: cover;
    background: var(--bg-inset);
    border: 0.5px solid var(--border);
}

.press-info { flex: 1; }

.press-source {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.press-title {
    font-family: var(--serif);
    font-size: 18px;
    font-style: italic;
    font-weight: var(--serif-weight);
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.2;
}

.press-desc {
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.press-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.press-link,
.press-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    padding: 8px 14px;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* primary action ? identical treatment to .download-btn for visual consistency */
.press-link {
    color: var(--text-primary);
    border: 0.5px solid var(--text-primary);
}
.press-link:hover {
    background: var(--text-primary);
    color: var(--bg);
}

/* secondary action ? quieter, since "read it" should win over "download the scan" */
.press-download {
    color: var(--text-muted);
    border: 0.5px solid var(--border);
}
.press-download:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.press-thumb-icon {
    width: 72px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--bg-inset);
    border: 0.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.press-thumb-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.5;
}

.grecaptcha-badge {
    visibility: hidden;
}
.recaptcha-note {
    font-family: var(--sans);
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-top: 8px;
}

/* end of About section */

/*
     painting-detail.html ? page-specific styles.
     Tokens, nav, footer live in styles.css.

     In production this becomes paintingDisplay.ftl
     (or paintingDisplay.jsp).
     Replace all static values with bean/FreeMarker
     expressions as noted in comments.

     Admin blocks: hidden by default.
     Reveal by adding class="is-admin" to <body>
     server-side, same pattern as catalogue.ftl.
   */

/* ?? Admin visibility ????????????????????????????? */
.admin-only       { display: none !important; }
body.is-admin .admin-only { display: block !important; }
body.is-admin .admin-only-flex { display: flex !important; }

/* ?? Back link ???????????????????????????????????? */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    padding: 20px 0 0;
    transition: color var(--transition);
}
.back-link:hover { color: var(--text-primary); }

/* ?? Main detail layout ??????????????????????????? */
.detail-layout {
    padding: 28px 0 60px;
}

/* ?? Left: image column ??????????????????????????? */
.image-col { position: sticky; top: 72px; }

/*
  Main painting image.
  Fills the column at natural proportions.
  Clicking opens the zoom modal.
*/
.main-image {
    width: 100%;
    max-height: 80vh;      /* never taller than 80% of viewport height */
    height: auto;          /* preserve aspect ratio */
    object-fit: contain;   /* whole image visible, no cropping */
    display: block;
    margin: 0 auto;        /* center it if max-height kicks in before max-width */
    cursor: zoom-in;
    border-radius: 2px;
}

/* ?? Thumbnail strip ?????????????????????????????? */
.thumb-strip {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.thumb-btn {
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    transition: border-color var(--transition);
    flex-shrink: 0;
}
.thumb-btn.active,
.thumb-btn:hover { border-color: var(--text-primary); }

.thumb-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    display: block;
    border-radius: 1px;
}

.thumb-label {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin-top: 3px;
}

/* ?? Right: metadata column ??????????????????????? */
.meta-col {
    padding-left: 48px;
}

/* Painting title */
.painting-title {
    font-family: var(--serif);
    font-size: 32px;
    font-style: italic;
    font-weight: var(--serif-weight);
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 6px;
}

/* Year range */
.painting-years {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 24px;
}

/* ?? Metadata rows ???????????????????????????????? */
.meta-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 28px;
}

.meta-table td {
    padding: 10px 0;
    border-bottom: 0.5px solid var(--border);
    vertical-align: top;
}

.meta-table tr:last-child td { border-bottom: none; }

.meta-label {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    width: 110px;
    padding-right: 16px;
    padding-top: 12px;
}

.meta-value {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Size ? show both imperial and metric */
.size-imperial {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 400;
}
.size-metric {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.frame-note {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 3px;
}

/* Period text ? styled like the period pill on catalogue */
.period-pill {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    background: rgba(74,106,138,0.1);
    color: #4a6a8a;
    border: 0.5px solid rgba(74,106,138,0.25);
    text-decoration: none;
    margin-right: 4px;
    margin-bottom: 4px;
}
.period-pill:hover { background: rgba(74,106,138,0.2); }

/* Keyword / tag pills */
.kw-pill {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--bg-inset);
    color: var(--text-secondary);
    border: 0.5px solid var(--border-accent);
    text-decoration: none;
    margin-right: 4px;
    margin-bottom: 4px;
    transition: background var(--transition), color var(--transition);
}
.kw-pill:hover {
    background: var(--text-primary);
    color: var(--bg);
    border-color: var(--text-primary);
}

/* Attribute links (medium, gallery etc) */
.attr-link {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 0.5px solid var(--border-accent);
    transition: color var(--transition);
}
.attr-link:hover { color: var(--text-primary); }

/* External link (gallery site) */
.ext-link {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 0.08em;
    margin-left: 12px;
}
.ext-link:hover { color: var(--text-primary); }

/* Exhibition links */
.exhibition-link {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 0.5px solid var(--border-accent);
    transition: color var(--transition);
    margin-bottom: 4px;
}
/* Targets the final exhibition link inside the cell container and removes its border and margin */
.exhibition-link:last-child {
    border-bottom: none;
    margin-bottom: 0; /* Optional: drops the trailing layout margin to keep spacing neat */
}
.exhibition-link:hover { color: var(--text-primary); }

/* ?? Inquiry CTA ?????????????????????????????????? */
.inquiry-block {
    margin-top: 28px;
    padding: 24px 28px;
    background: var(--bg-inset);
    border-radius: 4px;
}

.inquiry-heading {
    font-family: var(--serif);
    font-size: 18px;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.inquiry-text {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 14px;
}

.inquiry-btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-primary);
    border: 0.5px solid var(--text-primary);
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.inquiry-btn:hover {
    background: var(--text-primary);
    color: var(--bg);
}

/* ?? Admin price block ???????????????????????????? */
.admin-price-block {
    display: none;
    margin-top: 20px;
    padding: 16px 20px;
    background: rgba(200,50,50,0.06);
    border: 0.5px solid rgba(200,50,50,0.2);
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text-secondary);
    gap: 24px;
    flex-wrap: wrap;
}

.admin-price-item { display: flex; flex-direction: column; gap: 2px; }
.admin-price-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.admin-price-value { font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.admin-price-value.sold { color: #c04040; }

/* ?? Admin edit link ?????????????????????????????? */
.admin-edit-link {
    display: none;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c04040;
    text-decoration: none;
    border: 0.5px solid #c04040;
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 16px;
}
.admin-edit-link:hover { background: #c04040; color: white; }
body.is-admin .admin-edit-link { display: inline-block; }
body.is-admin .admin-price-block { display: flex; }

/* ?? Zoom modal ??????????????????????????????????? */
.zoom-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,8,5,0.94);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: zoom-out;
}
.zoom-modal.open { display: flex; }

.zoom-modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
}

.zoom-close {
    position: fixed;
    top: 20px; right: 24px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250,245,235,0.5);
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
}
.zoom-close:hover { color: rgba(250,245,235,0.9); }

.zoom-caption {
    position: fixed;
    bottom: 24px;
    left: 0; right: 0;
    text-align: center;
    font-family: var(--sans);
    font-size: 12px;
    font-style: italic;
    color: rgba(250,245,235,0.5);
    pointer-events: none;
}

/* ?? Reference ID (admin only in display, always in URL) ?? */
.ref-id {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ?? Mobile ??????????????????????????????????????? */
@media (max-width: 767px) {
    .meta-col { padding-left: 0; margin-top: 28px; }
    .painting-title { font-size: 26px; }
    .image-col { position: static; }
}

/* end of display painting */

/*
  catalogue.html ? page-specific styles.
  Tokens, nav, footer, page-header in styles.css.

  Admin visibility:
  Elements with class .admin-only are hidden by default.
  Add class .is-admin to <body> (set server-side when
  the logged-in user has the admin role) to reveal them.

  Example in FreeMarker:
    <body <#if isAdmin>class="is-admin"</#if>>
*/

/* ?? Admin visibility ????????????????????????????? */
.admin-only { display: none; }
body.is-admin .admin-only { display: table-cell; }
body.is-admin .admin-only-block { display: block; }

/* ?? Search panel ????????????????????????????????? */
.search-panel {
    background: var(--bg-inset);
    border-bottom: 0.5px solid var(--border);
    padding: 16px 24px 18px;
}

.search-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.search-field { display: flex; flex-direction: column; gap: 4px; }

.search-label {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.search-input {
    font-family: var(--sans);
    font-size: 12px;
    padding: 6px 10px;
    border: 0.5px solid var(--border-accent);
    border-radius: 2px;
    background: var(--bg);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition);
}
.search-input:focus { border-color: var(--text-secondary); }

.w-60  { width: 60px; }
.w-80  { width: 80px; }
.w-110 { width: 110px; }
.w-150 { width: 150px; }
.w-180 { width: 180px; }

.radio-stack { display: flex; flex-direction: column; gap: 3px; }
.radio-item  {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--sans); font-size: 11px;
    color: var(--text-secondary); cursor: pointer;
}

.search-btn {
    padding: 7px 20px;
    font-family: var(--sans); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    background: var(--text-primary); color: var(--bg);
    border: none; border-radius: 2px; cursor: pointer;
    transition: opacity var(--transition);
}
.search-btn:hover { opacity: 0.82; }

.clear-btn {
    padding: 7px 14px;
    font-family: var(--sans); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    background: transparent; color: var(--text-secondary);
    border: 0.5px solid var(--border-accent);
    border-radius: 2px; cursor: pointer;
}
.clear-btn:hover { background: var(--bg-hover); }

/* ?? Results bar ?????????????????????????????????? */
.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    border-bottom: 0.5px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
}

.results-count {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text-secondary);
}
.results-count strong { color: var(--text-primary); }

.results-right { display: flex; align-items: center; gap: 14px; }

/* Per-page selector */
.per-page-select {
    font-family: var(--sans); font-size: 11px;
    padding: 4px 8px;
    border: 0.5px solid var(--border-accent);
    border-radius: 2px;
    background: var(--bg);
    color: var(--text-secondary);
}

/* View toggle */
.view-toggle {
    display: flex;
    border: 0.5px solid var(--border-accent);
    border-radius: 2px;
    overflow: hidden;
}
.view-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    font-family: var(--sans); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    background: transparent;
    border: none; cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}
.view-btn + .view-btn { border-left: 0.5px solid var(--border-accent); }
.view-btn.active {
    background: var(--text-primary);
    color: var(--bg);
}

/* Active filters strip */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 24px;
    border-bottom: 0.5px solid var(--border);
    min-height: 0;
}
.active-filters:empty { display: none; }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--sans);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--bg-inset);
    color: var(--text-secondary);
    border: 0.5px solid var(--border-accent);
}
.filter-chip-remove {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    border: none;
    background: none;
    padding: 0;
}
.filter-chip-remove:hover { color: var(--text-primary); }

/* ????????????????????????????????????????????????
     BROWSE VIEW ? CSS columns with hover overlay
     CSS columns handles
     the masonry-style packing natively.

     Column count scales with viewport:
       mobile  : 2 columns
       tablet  : 4 columns
       desktop : 6 columns (adjust to taste)

     The gap between images shows the page background
     colour (#e8e4df warm gray) as a gallery-wall effect.
  ???????????????????????????????????????????????? */

.browse-wrap {
    /* Warm gap colour bleeds through between images */
    background: #181512;
    padding: 3px;           /* sets the outer border thickness */
}

.browse-grid {
    columns: 6;
    column-gap: 3px;        /* horizontal gap between columns */
}

/* ?? Individual painting card ?????????????????????
   position:relative is required for the overlay.
   overflow:hidden clips the overlay gradient.
   break-inside:avoid prevents a card splitting
   across two columns.
???????????????????????????????????????????????? */
.painting-card {
    display: block;
    break-inside: avoid;
    margin-bottom: 3px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    position: relative;
    z-index: 1;

    transition:
            transform .25s ease,
            z-index .25s ease;
}

.painting-card:hover {
    transform: scale(1.04);
    z-index: 10;
    box-shadow:
            0 10px 30px rgba(0,0,0,.25);
}

/* The painting image ? fills card width at natural ratio */
.painting-thumb {
    width: 100%;
    height: auto;
    display: block;

    transition:
            transform .35s ease,
            filter .35s ease;
}

/* Subtle darken on hover so the overlay reads clearly */
.painting-card:hover .painting-thumb {
    transform: scale(1.02);
    filter:
            brightness(1.12)
            saturate(1.08);
}



.browse-grid:hover .painting-card:hover {
    opacity: 1;
}

/* ?? Hover overlay ????????????????????????????????
   Sits absolutely over the image.
   Invisible at rest (opacity:0), fades in on hover.
   Dark gradient rises from the bottom carrying
   title and size in light text.
???????????????????????????????????????????????? */
.card-overlay {
    position: static;
    color: rgba(255,255,255,.80);
    background: #55514d;
    padding: 4px 10px;
    display: block;
}

.painting-card:hover .card-overlay {
    opacity: 500%;
}

/* Title ? serif italic, light */
.overlay-title {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    color: #b8b1a7;
    line-height: 1.15;
    margin-bottom: 1px;
}


/* Year and size ? smaller, more muted */
.overlay-meta {
    font-size: 8px;
    color: rgba(255,255,255,.45);
    letter-spacing: .04em;
}

/* ?? Mobile: touch devices ????????????????????????
   On touch screens there is no hover. We make the
   overlay always partially visible on small screens
   so title is readable, and the card links directly
   to the detail page where all info is shown.
???????????????????????????????????????????????? */


/* ?? Responsive column counts ?????????????????????
   Adjust these breakpoints to suit your content.
   With very small paintings (< 20in) 6 columns
   works well. With large canvases 4 may be better.
???????????????????????????????????????????????? */
@media (max-width: 480px)  { .browse-grid { columns: 2; } }
@media (min-width: 481px)  and (max-width: 768px)  { .browse-grid { columns: 3; } }
@media (min-width: 769px)  and (max-width: 1024px) { .browse-grid { columns: 4; } }
@media (min-width: 1025px) and (max-width: 1400px) { .browse-grid { columns: 5; } }
@media (min-width: 1401px) { .browse-grid { columns: 6; } }

/* ????????????????????????????????????????????????
   LIST VIEW ? sortable table
   Column headers are links that re-submit the
   search form with a sort parameter.

   Clickable cell values (keyword, medium, period
   etc.) re-submit with that value as a filter,
   behaving exactly like the current site.

   Admin-only columns (collection, price) are
   hidden unless <body class="is-admin">.
???????????????????????????????????????????????? */
.list-wrap {
    padding: 0 24px 40px;
    overflow-x: auto;          /* horizontal scroll on small screens */
}

.list-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 12px;
    min-width: 760px;          /* prevents extreme squish */
}

/* Column header */
.list-table th {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 0.5px solid var(--border-accent);
    padding: 10px 12px 10px 0;
    text-align: left;
    white-space: nowrap;
    user-select: none;
}

/* Table body */
.list-table td {
    padding: 9px 12px 9px 0;
    border-bottom: 0.5px solid var(--border);
    vertical-align: middle;
    color: var(--text-secondary);
}

.list-table tr:hover td { background: var(--bg-inset); }

/* Thumbnail cell */
.list-thumb {
    width: 52px;
    min-width: 52px;
    height: 40px;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    background: var(--bg-inset);
    border: 0.5px solid var(--border);
    cursor: pointer;
}

/* Title ? primary link */
.list-title-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.list-title-link:hover { text-decoration: underline; }

@media (max-width: 992px) {

    .list-table th:nth-child(6),
    .list-table td:nth-child(6),   /* Size */

    .list-table th:nth-child(7),
    .list-table td:nth-child(7),   /* Sq In */

    .list-table th:nth-child(8),
    .list-table td:nth-child(8) /* period */
    {
        display:none;
    }

    .list-table {
        table-layout: fixed;
    }

    .list-table th:nth-child(1),
    .list-table td:nth-child(1) {
        width: 60px;
    }

    .list-table th:nth-child(2),
    .list-table td:nth-child(2) {
        width: 150px;
    }

    .list-table th:nth-child(3),
    .list-table td:nth-child(3) {
        width: 90px;
    }

    .list-table th:nth-child(5),
    .list-table td:nth-child(5) {
        width: auto;
    }

    .list-table th:nth-child(8),
    .list-table td:nth-child(8) {
        width: 55px;
    }
}

@media (max-width:500px) {

    .list-table {
        width: 400px;        /* your intentional mobile table width */
        min-width: 400px;
        table-layout: fixed;
    }

    .list-wrap {
        width: 100%;
        overflow-x: auto;
    }

    /* Hide Type */
    .list-table th:nth-child(4),
    .list-table td:nth-child(4),

    .list-table th:nth-child(9),
    .list-table td:nth-child(9) /* keywords */
    {
        display:none;
    }

    /* Thumbnail */
    .list-table th:nth-child(1),
    .list-table td:nth-child(1) {
        width:60px;
    }

    /* Title */
    .list-table th:nth-child(2),
    .list-table td:nth-child(2) {
        width:160px;
    }

    /* Year */
    .list-table th:nth-child(3),
    .list-table td:nth-child(3) {
        width:40px;
    }

    /* Medium */
    .list-table th:nth-child(5),
    .list-table td:nth-child(5) {
        width:50px;
    }

    /* Actions */
    .list-table th:nth-child(11),
    .list-table td:nth-child(11) {
        width:auto;
    }
}


/* Sortable header ? is an <a> tag */
.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

.sort-link:hover { color: var(--text-primary, #000); }

/* ----------------------------------------------------
   ACTIVE SORT STATES (Increased Visibility)
---------------------------------------------------- */
.sort-link.asc,
.sort-link.desc {
    color: #0056b3;             /* Use your theme's brand color for the active column */
    font-weight: 600;           /* Make the text heavier/bolder */
}

.sort-link.asc::after  { content: '\2191'; font-size: 12px; line-height: 1; font-weight: bold; opacity: 1; }  /* ? */
.sort-link.desc::after { content: '\2193'; font-size: 12px; line-height: 1; font-weight: bold; opacity: 1; }  /* ? */
.sort-link.none::after { content: '\2195'; opacity: 0.35; }  /* ? */


/*
  Attribute links ? clicking re-runs search filtered
  to that attribute value. Styled subtly so they don't
  overwhelm but are clearly interactive.
*/
.attr-link {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 0.5px solid var(--border-accent);
    transition: color var(--transition), border-color var(--transition);
}
.attr-link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-secondary);
}

/* Keyword pills ? each is a separate filter link */
.kw-pill {
    display: inline-block;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--bg-inset);
    color: var(--text-secondary);
    border: 0.5px solid var(--border-accent);
    text-decoration: none;
    margin: 1px 2px 1px 0;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.kw-pill:hover {
    background: var(--text-primary);
    color: var(--bg);
    border-color: var(--text-primary);
}

/* Period pill ? same idea but slightly coloured */
.period-pill {
    display: inline-block;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(74,106,138,0.1);
    color: #4a6a8a;
    border: 0.5px solid rgba(74,106,138,0.25);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition);
}
.period-pill:hover {
    background: rgba(74,106,138,0.2);
}

/* View / inquire links in last column */
.row-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.view-link {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.view-link:hover { color: var(--text-primary); }

.inquire-link-sm {
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4a6a8a;
    text-decoration: none;
    white-space: nowrap;
}
.inquire-link-sm:hover { text-decoration: underline; }

/* Admin price cell */
.price-cell { text-align: right; font-variant-numeric: tabular-nums; }

/* ?? Pagination ??????????????????????????????????  */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px 24px 40px;
    border-top: 0.5px solid var(--border);
}
.page-link {
    font-family: var(--sans);
    font-size: 11px;
    padding: 5px 10px;
    border: 0.5px solid var(--border-accent);
    border-radius: 2px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition);
}
.page-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.page-link.active {
    background: var(--text-primary);
    color: var(--bg);
    border-color: var(--text-primary);
}

/* ?? Mobile tweaks ???????????????????????????????? */
@media (max-width: 767px) {
    .search-panel { padding: 12px 16px; }
    .results-bar  { padding: 10px 16px; }
    .browse-wrap  { padding: 12px 16px 32px; }
    .list-wrap    { padding: 0 16px 32px; }
    .results-right { flex-wrap: wrap; }
}

/* end of catalog search styles */

/*
    painting-not-found.html
    ???????????????????????????????????????????????
    Displayed when a PaintingDisplay request is made
    with an externalId that returns no result
  */

.not-found-wrap {
    min-height: calc(100vh - 130px); /* fills page between nav and footer */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
}

.not-found-inner {
    max-width: 560px;
    text-align: center;
}

/* Large italic number ? very faint, purely decorative */
.not-found-id {
    font-family: var(--serif);
    font-size: 72px;
    font-style: italic;
    font-weight: 400;
    color: rgba(42, 37, 32, 0.08);
    line-height: 1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    display: block;
}

.not-found-heading {
    font-family: var(--serif);
    font-size: 28px;
    font-style: italic;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.2;
}

.not-found-text {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.not-found-text code {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    background: var(--bg-inset);
    padding: 2px 6px;
    border-radius: 2px;
    color: var(--text-secondary);
    border: 0.5px solid var(--border-accent);
}

/* Action links */
.not-found-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.nf-btn-primary {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--text-primary);
    border: 0.5px solid var(--text-primary);
    padding: 10px 22px;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity var(--transition);
}
.nf-btn-primary:hover { opacity: 0.8; color: var(--bg); }

.nf-btn-secondary {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: transparent;
    border: 0.5px solid var(--text-primary);
    padding: 10px 22px;
    border-radius: 2px;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.nf-btn-secondary:hover {
    background: var(--text-primary);
    color: var(--bg);
}

/* Divider between actions and contact suggestion */
.nf-divider {
    height: 0.5px;
    background: var(--border);
    margin: 32px auto;
    width: 48px;
}

.nf-contact-text {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}

.nf-contact-link {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 0.5px solid var(--border-accent);
    transition: color var(--transition);
}
.nf-contact-link:hover { color: var(--text-primary); }
/*
 *  legal.css
 *  Terms, Privacy Policy, Image License pages
 *  Matches tokens and patterns from styles.css
 *
 *  Copyright (c) 1999-2025
 *  Cal Holman - All Rights Reserved
 */

/* ??????????????????????????????????????????????
   LEGAL PAGE WRAPPER
   Add class="legal-page" to the outermost
   content <div> on each legal page.
?????????????????????????????????????????????? */

.legal-page {
    max-width: 740px;
    margin: 0 auto;
    padding: 56px 48px 80px;
}

@media (max-width: 575.98px) {
    .legal-page {
        padding: 32px 20px 60px;
    }
}

/* ?? Page eyebrow ???????????????????????????????
   Same pattern as .page-eyebrow and .label-caps
   in styles.css. Shows "Terms", "Privacy", etc.
   above the h1.
???????????????????????????????????????????????? */
.legal-eyebrow {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Hairline rule after the eyebrow label */
.legal-eyebrow::after {
    content: '';
    flex: 1;
    height: 0.5px;
    background: var(--border);
}

/* ?? h1 ?????????????????????????????????????????
   Matches .page-title sizing but one step down
   since legal pages are utility content, not
   hero moments. Italic serif, no bold.
???????????????????????????????????????????????? */
.legal-page h1 {
    font-family: var(--serif);
    font-size: 32px;
    font-style: italic;
    font-weight: var(--serif-weight);
    color: var(--text-primary);
    line-height: 1.15;
    margin: 0 0 8px;
}

/* ?? Effective / last-updated date ?????????????
   Small muted meta, same pattern as .era-period
   and .show-dates.
???????????????????????????????????????????????? */
.legal-date {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 32px;
}

/* ?? Intro paragraph ????????????????????????????
   Uses the left-rule pull treatment from .era-pull
   and .artist-pull, consistent with how the site
   introduces section content elsewhere.
???????????????????????????????????????????????? */
.legal-intro {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
    border-left: 2px solid var(--border-accent);
    padding-left: 18px;
    margin-bottom: 36px;
}

/* ?? h2 section headings ????????????????????????
   Smaller than the page h1, italic serif, with a
   hairline rule below ? same as the accordion
   items and show-card dividers on the site.
???????????????????????????????????????????????? */
.legal-page h2 {
    font-family: var(--serif);
    font-size: 18px;
    font-style: italic;
    font-weight: var(--serif-weight);
    color: var(--text-primary);
    margin: 36px 0 10px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid var(--border);
    line-height: 1.2;
}

/* First h2 gets less top margin since it follows
   the intro block rather than another section. */
.legal-page h2:first-of-type {
    margin-top: 0;
}

/* ?? Body paragraphs ????????????????????????????
   Matches .era-body-text and .artist-statement
   sizing and rhythm exactly.
???????????????????????????????????????????????? */
.legal-page p {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
    margin: 0 0 14px;
}

/* ?? Lists ??????????????????????????????????????
   Em-dash markers instead of bullets ? consistent
   with the site's typographic restraint. No
   default browser indent.
???????????????????????????????????????????????? */
.legal-page ul {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.legal-page ul li {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
    padding: 3px 0 3px 20px;
    position: relative;
}

.legal-page ul li::before {
    content: '\2013';  /* en dash ? safe across all encodings */
    position: absolute;
    left: 0;
    color: var(--text-muted);
}

/* Nested lists (definitions section in Privacy) */
.legal-page ul ul {
    margin: 8px 0 0 0;
}

/* Definition term inside a nested list */
.legal-page ul ul li strong {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: normal;
    margin-bottom: 2px;
}

/* ?? Links ??????????????????????????????????????
   Inherits text color, uses a faint border-bottom
   underline ? matches .gallery-link and
   .nf-contact-link pattern.
???????????????????????????????????????????????? */
.legal-page a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 0.5px solid var(--border-accent);
    transition: color var(--transition);
}

.legal-page a:hover {
    color: var(--text-primary);
}

/* ?? Contact block ??????????????????????????????
   Sits at the foot of each legal page. Matches
   the .show-cta / .inquiry-block inset treatment.
???????????????????????????????????????????????? */
.legal-contact {
    margin-top: 48px;
    padding: 24px 28px;
    background: var(--bg-inset);
    border-radius: 4px;
    border-top: none;
}

.legal-contact-label {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.legal-contact p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* ?? Page divider ???????????????????????????????
   Optional <hr> between major sections if needed.
???????????????????????????????????????????????? */
.legal-page hr {
    border: none;
    border-top: 0.5px solid var(--border);
    margin: 40px 0;
}

/* ?? Image License page specifics ???????????????
   The license page has two <h1> tags in the
   source. The second one (inside <body>) should
   be treated as a section heading visually.
   Override it to match h2 styling.
???????????????????????????????????????????????? */
.legal-page h1 + h1 {
    font-size: 18px;
    margin-top: 36px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid var(--border);
}