/* ==========================================================================
   1. GLOBAL VARIABLES, RESET, AND SHARED PAGE DEFAULTS
   ========================================================================== */

:root {
    --site-blue: #248BE6;
    --site-blue-dark: #225975;
    --site-blue-soft: #f5f9ff;
    --site-text: #222;
    --site-line: #d9dee3;
    --site-soft-line: #e8e8e8;

    --page-background: #f5f5f3;
    --panel-background: #ffffff;
    --text-color: #222222;
    --muted-color: #666666;
    --primary-color: #225975;
    --primary-hover: #193f54;
    --border-color: #ddddda;
    --soft-background: #f8f9f9;
    --shadow: 0 10px 30px rgb(0 0 0 / 7%);

    --blue: #248BE6;
    --blue-soft: #f5f9ff;
    --text: #222;
    --muted: #666;
    --page: #f4f4f4;
    --line: #d9dee3;
    --soft-line: #e8e8e8;
    --green-soft: #dff2e3;
    --green-text: #236132;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: #f4f4f4;
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}



/* ==========================================================================
   MANUAL SECTION BACKGROUNDS
   Add one of these classes directly to a section.
   The chosen color stays with that section even if sections are reordered.
   ========================================================================== */

.section-bg-white {
    background: #ffffff;
}

.section-bg-soft {
    background: var(--soft-background);
}

.section-bg-blue {
    background: var(--site-blue-soft);
}

/* ==========================================================================
   2. SHARED HEADER, NAVIGATION, FOOTER, AND INCLUDES
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 950;
    background: #fff;
    border-bottom: 1px solid var(--site-line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 18px 0;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 22px;
}

.site-nav a {
    position: relative;
    color: #444;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--site-blue);
}

.site-nav a[aria-current="page"] {
    color: var(--site-blue);
}

.site-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--site-blue);
    border-radius: 2px;
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: var(--site-text);
    cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
    background: var(--site-blue-soft);
    border-color: #bfd6ee;
}

.menu-toggle-lines,
.menu-toggle-lines::before,
.menu-toggle-lines::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.menu-toggle-lines {
    position: relative;
}

.menu-toggle-lines::before,
.menu-toggle-lines::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-toggle-lines::before { top: -6px; }
.menu-toggle-lines::after { top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle-lines {
    background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines::before {
    top: 0;
    transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines::after {
    top: 0;
    transform: rotate(-45deg);
}

.site-footer {
    padding: 28px 20px;
    background: #fff;
    border-top: 1px solid var(--site-line);
    color: #666;
    text-align: center;
    font-size: 0.86rem;
}

.include-error {
    width: min(1180px, calc(100% - 32px));
    margin: 12px auto;
    padding: 12px;
    border: 1px solid #d7a6a6;
    background: #fff4f4;
    color: #8a2424;
}

@media (max-width: 760px) {
    .header-inner {
        position: relative;
        justify-content: flex-end;
        min-height: 70px;
    }

    .menu-toggle {
        display: flex;
    }

    .site-nav {
        position: absolute;
        z-index: 50;
        top: 100%;
        left: -16px;
        right: -16px;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 8px 16px 14px;
        background: #fff;
        border-top: 1px solid var(--site-soft-line);
        border-bottom: 1px solid var(--site-line);
        box-shadow: 0 8px 18px rgb(0 0 0 / 8%);
    }

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

    .site-nav a {
        padding: 12px 10px;
        border-radius: 5px;
        text-align: center;
    }

    .site-nav a:hover,
    .site-nav a:focus-visible {
        background: var(--site-blue-soft);
    }

    .site-nav a[aria-current="page"]::after {
        display: none;
    }
}

/* ==========================================================================
   3. HOME PAGE
   Body marker: data-page="home"
   ========================================================================== */

body[data-page="home"] {
            --page-background: #f5f5f3;
            --panel-background: #ffffff;
            --text-color: #222222;
            --muted-color: #666666;
            --primary-color: #225975;
            --primary-hover: #193f54;
            --border-color: #ddddda;
            --soft-background: #f8f9f9;
            --shadow: 0 10px 30px rgb(0 0 0 / 7%);
        }

        body[data-page="home"] * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body[data-page="home"] {
            margin: 0;
            background: var(--page-background);
            color: var(--text-color);
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.65;
        }

        body[data-page="home"] a {
            color: inherit;
        }

        body[data-page="home"] .hero-header {
            padding: 30px 0px 30px 0px;
            background: #ffffff;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            text-align: center;
			margin-top: 20px;
        }

        body[data-page="home"] .eyebrow {
            margin: 0 0 12px;
            color: var(--primary-color);
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        body[data-page="home"] h1 {
            margin: 0;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(3rem, 8vw, 5rem);
            font-weight: normal;
            line-height: 1;
        }

		body[data-page="home"] .site-subtitle {
			max-width: 820px;
			color: var(--muted-color);
			font-size: clamp(0.9rem, 2vw, 1.2rem);
			margin: 18px auto 0;
		}

        body[data-page="home"] .header-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 58px;
            margin-top: 30px;
            padding: 14px 28px;
            border-radius: 8px;
            background: var(--primary-color);
            color: #ffffff;
            font-size: 1.05rem;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 0 7px 18px rgb(34 89 117 / 18%);
            transition:
                transform 140ms ease,
                background 140ms ease;
        }

        body[data-page="home"] .header-button:hover {
            transform: translateY(-2px);
            background: var(--primary-hover);
        }

        body[data-page="home"] .header-button:focus-visible,
body[data-page="home"] .catalog-button:focus-visible,
body[data-page="home"] .shop-button:focus-visible,
body[data-page="home"] .facebook-link:focus-visible {
            outline: 3px solid #4f9ac2;
            outline-offset: 4px;
        }

        body[data-page="home"] .page-content {
            width: min(1000px, calc(100% - 32px));
            margin: 36px auto 56px;
        }

        body[data-page="home"] .content-card {
            overflow: hidden;
            overflow: hidden;
            background: var(--panel-background);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            box-shadow: var(--shadow);
        }
		
		/* About photo */

		body[data-page="home"] .about-photo {
			display: block;
			width: 100%;
			max-width: 900px;
			height: auto;

			margin: 40px auto 0;

			border: 1px solid #d8d8d8;
			border-radius: 10px;

			box-shadow: 0 8px 24px rgba(0,0,0,.08);
		}
		
        body[data-page="home"] .bio-section {
            padding: 52px 54px 42px;
            text-align: center;
        }

        body[data-page="home"] .section-label {
            margin: 0 0 10px;
            color: var(--primary-color);
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.13em;
            text-transform: uppercase;
        }

        body[data-page="home"] .bio-section h2,
body[data-page="home"] .shop-section h2,
body[data-page="home"] .featured-section h2,
body[data-page="home"] .catalog-section h2 {
            margin: 0;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: normal;
        }

        body[data-page="home"] .bio-copy {
            max-width: 760px;
            margin: 24px auto 0;
            text-align: left;
            font-size: 1.06rem;
        }

        body[data-page="home"] .bio-copy p {
            margin: 0 0 18px;
        }

        body[data-page="home"] .shop-section {
            padding: 46px 40px 48px;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid #d7e5ef;
            text-align: center;
        }

        body[data-page="home"] .shop-section .section-label {
            margin-bottom: 8px;
        }

        body[data-page="home"] .shop-section-intro,
        body[data-page="home"] .shop-section-note {
            max-width: 720px;
            margin-left: auto;
            margin-right: auto;
        }

        body[data-page="home"] .shop-section-intro {
            margin-top: 16px;
            color: #3f4b53;
            font-size: 1.04rem;
        }

        body[data-page="home"] .shop-section-note {
            margin-top: 10px;
            color: var(--muted-color);
            font-size: 0.94rem;
        }

        body[data-page="home"] .shop-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 58px;
            margin-top: 26px;
            padding: 14px 28px;
            border-radius: 8px;
            background: var(--primary-color);
            color: #ffffff;
            font-size: 1.02rem;
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 7px 18px rgb(34 89 117 / 18%);
            transition:
                transform 140ms ease,
                background 140ms ease;
        }

        body[data-page="home"] .shop-button:hover {
            transform: translateY(-2px);
            background: var(--primary-hover);
        }

        body[data-page="home"] .featured-section {
            padding: 42px 40px 46px;
            border-top: 1px solid var(--border-color);
            text-align: center;
        }

        body[data-page="home"] .featured-section h2 {
            margin-bottom: 22px;
        }

        body[data-page="home"] .featured-frame {
            max-width: 820px;
            margin: 0 auto;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }

        body[data-page="home"] .featured-frame img {
            display: block;
            width: 100%;
            height: auto;
        }

        body[data-page="home"] .featured-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 18px 20px;
            border-top: 1px solid var(--border-color);
            text-align: left;
        }

        body[data-page="home"] .featured-title {
            margin: 0;
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.35rem;
        }

        body[data-page="home"] .featured-meta {
            margin: 3px 0 0;
            color: var(--muted-color);
            font-size: 0.92rem;
        }

        body[data-page="home"] .featured-link {
            flex: 0 0 auto;
            color: var(--primary-color);
            font-weight: bold;
            text-decoration: none;
        }

        body[data-page="home"] .featured-link:hover {
            text-decoration: underline;
        }

        body[data-page="home"] .featured-link:focus-visible {
            outline: 3px solid #4f9ac2;
            outline-offset: 4px;
        }

        body[data-page="home"] .catalog-section {
            padding: 42px 40px 48px;
            border-top: 1px solid var(--border-color);
            text-align: center;
        }

        body[data-page="home"] .catalog-section p {
            max-width: 680px;
            margin: 15px auto 0;
            color: var(--muted-color);
        }

        body[data-page="home"] .catalog-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 60px;
            margin-top: 28px;
            padding: 15px 30px;
            border-radius: 8px;
            background: var(--primary-color);
            color: #ffffff;
            font-size: 1.08rem;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 0 7px 18px rgb(34 89 117 / 18%);
            transition:
                transform 140ms ease,
                background 140ms ease;
        }

        body[data-page="home"] .catalog-button:hover {
            transform: translateY(-2px);
            background: var(--primary-hover);
        }

        body[data-page="home"] .facebook-section {
            padding: 28px 30px;
            border-top: 1px solid var(--border-color);
            text-align: center;
        }

        body[data-page="home"] .facebook-section p {
            margin: 0;
            color: var(--muted-color);
            font-size: 0.96rem;
        }

        body[data-page="home"] .facebook-link {
            display: inline-block;
            margin-top: 8px;
            color: var(--primary-color);
			font-weight: 600;
            text-decoration: none;
        }

        body[data-page="home"] .facebook-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 700px) {
            body[data-page="home"] .hero-header {
                padding: 52px 22px 38px;
            }

            body[data-page="home"] .header-button,
body[data-page="home"] .catalog-button {
                width: 100%;
                max-width: 360px;
            }

            body[data-page="home"] .page-content {
                margin-top: 22px;
            }
			
			body[data-page="home"] .about-photo {
				margin-top: 30px;
				border-radius: 8px;
			}

            body[data-page="home"] .bio-section {
                padding: 40px 24px 30px;
            }

            body[data-page="home"] .shop-section {
                padding: 38px 24px 40px;
            }

            body[data-page="home"] .shop-button {
                width: 100%;
                max-width: 360px;
            }

            body[data-page="home"] .featured-section {
                padding: 34px 18px 36px;
            }

            body[data-page="home"] .featured-info {
                display: block;
                text-align: center;
            }

            body[data-page="home"] .featured-link {
                display: inline-block;
                margin-top: 12px;
            }

            body[data-page="home"] .catalog-section {
                padding: 36px 24px 40px;
            }

            body[data-page="home"] .facebook-section {
                padding: 24px;
            }
        }

/* ==========================================================================
   4. CONTACT PAGE
   Body marker: data-page="contact"
   ========================================================================== */

body[data-page="contact"] {
    --contact-background: #f5f5f3;
    --contact-panel: #ffffff;
    --contact-text: #222222;
    --contact-muted: #666666;
    --contact-primary: #225975;
    --contact-primary-hover: #193f54;
    --contact-border: #ddddda;
    --contact-shadow: 0 10px 30px rgb(0 0 0 / 7%);

    margin: 0;
    background: var(--contact-background);
    color: var(--contact-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65;
}

body[data-page="contact"] .contact-hero {
    margin-top: 20px;
    padding: 30px 22px;
    background: #ffffff;
    border-top: 1px solid var(--contact-border);
    border-bottom: 1px solid var(--contact-border);
    text-align: center;
}

body[data-page="contact"] .contact-eyebrow {
    margin: 0 0 12px;
    color: var(--contact-primary);
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

body[data-page="contact"] .contact-hero h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 7vw, 4.7rem);
    font-weight: normal;
    line-height: 1.05;
}

body[data-page="contact"] .contact-subtitle {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--contact-muted);
    font-size: clamp(0.95rem, 2vw, 1.18rem);
}

body[data-page="contact"] .contact-page {
    width: min(1000px, calc(100% - 32px));
    margin: 36px auto 56px;
}

body[data-page="contact"] .contact-card {
    overflow: hidden;
    background: var(--contact-panel);
    border: 1px solid var(--contact-border);
    border-radius: 14px;
    box-shadow: var(--contact-shadow);
}

body[data-page="contact"] .contact-section {
    padding: 48px 54px 54px;
}

body[data-page="contact"] .contact-section h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: normal;
    line-height: 1.15;
    text-align: center;
}

body[data-page="contact"] .contact-section-intro {
    max-width: 700px;
    margin: 15px auto 0;
    color: var(--contact-muted);
    text-align: center;
}

body[data-page="contact"] .contact-form {
    display: grid;
    gap: 20px;
    max-width: 760px;
    margin: 32px auto 0;
}

body[data-page="contact"] .contact-inquiry-context {
    display: grid;
    gap: 2px;
    max-width: 760px;
    margin: 28px auto 0;
    padding: 16px 18px;
    border: 1px solid #c8dbe8;
    border-radius: 8px;
    background: #eef5f8;
    color: #33424c;
}

body[data-page="contact"] .contact-inquiry-context strong {
    color: var(--contact-primary);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body[data-page="contact"] .contact-inquiry-context span {
    font-size: 1rem;
    font-weight: 700;
}

body[data-page="contact"] .contact-inquiry-context small {
    color: var(--contact-muted);
}


body[data-page="contact"] .contact-purchase-request {
    gap: 14px;
}

body[data-page="contact"] .contact-purchase-request-list {
    display: grid;
    gap: 22px;
}

body[data-page="contact"] .contact-purchase-request-group {
    display: grid;
    gap: 2px;
}

body[data-page="contact"] .contact-purchase-request-group-heading {
    margin: 0 0 6px;
    color: var(--contact-primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

body[data-page="contact"] .contact-purchase-request-row,
body[data-page="contact"] .contact-purchase-request-total {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

body[data-page="contact"] .contact-purchase-request-row {
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 0;
    font-size: 0.92rem;
}

body[data-page="contact"] .contact-purchase-request-title {
    min-width: 0;
    color: #33424c;
    font-weight: 400;
    overflow-wrap: anywhere;
}

body[data-page="contact"] .contact-purchase-request-details {
    flex: 0 0 auto;
    color: #5f6b73;
    font-size: 0.88rem;
    font-weight: 400;
    white-space: nowrap;
}

body[data-page="contact"] .contact-purchase-request-summary {
    display: grid;
    gap: 2px;
    margin-top: 2px;
}

body[data-page="contact"] .contact-purchase-request-total {
    color: #33424c;
    font-weight: 400;
}

body[data-page="contact"] .contact-purchase-request-total b {
    flex: 0 0 auto;
    color: #33424c;
    font-weight: 600;
}

body[data-page="contact"] .contact-purchase-request-total:last-child {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #c8dbe8;
    color: var(--contact-primary);
    font-weight: 700;
}

body[data-page="contact"] .contact-purchase-request-total:last-child b {
    color: var(--contact-primary);
    font-weight: 700;
}

body[data-page="contact"] .contact-purchase-request-return {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 40px;
    margin-top: 2px;
    color: var(--contact-primary);
    font-size: 0.9rem;
    font-weight: 500;
}

body[data-page="contact"] .contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body[data-page="contact"] .contact-field {
    display: grid;
    gap: 7px;
}

body[data-page="contact"] .contact-field label {
    color: #303840;
    font-size: 0.95rem;
    font-weight: 700;
}

body[data-page="contact"] .contact-field input,
body[data-page="contact"] .contact-field select,
body[data-page="contact"] .contact-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #b8c3ca;
    border-radius: 7px;
    background: #ffffff;
    color: #1f2933;
    font: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

body[data-page="contact"] .contact-field textarea {
    min-height: 180px;
    resize: vertical;
}

body[data-page="contact"] .contact-field input:hover,
body[data-page="contact"] .contact-field select:hover,
body[data-page="contact"] .contact-field textarea:hover {
    border-color: #93a5b0;
}

body[data-page="contact"] .contact-field input:focus,
body[data-page="contact"] .contact-field select:focus,
body[data-page="contact"] .contact-field textarea:focus {
    outline: none;
    border-color: var(--contact-primary);
    box-shadow: 0 0 0 3px rgb(34 89 117 / 16%);
}

body[data-page="contact"] .contact-required {
    color: #9b2c2c;
}

body[data-page="contact"] .contact-help {
    margin: 0;
    color: var(--contact-muted);
    font-size: 0.88rem;
}

body[data-page="contact"] .contact-submit {
    justify-self: start;
    min-height: 56px;
    padding: 13px 28px;
    border: 0;
    border-radius: 8px;
    background: var(--contact-primary);
    color: #ffffff;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 7px 18px rgb(34 89 117 / 18%);
    transition: transform 140ms ease, background 140ms ease;
}

body[data-page="contact"] .contact-submit:hover {
    transform: translateY(-2px);
    background: var(--contact-primary-hover);
}

body[data-page="contact"] .contact-submit:focus-visible {
    outline: 3px solid #4f9ac2;
    outline-offset: 4px;
}

body[data-page="contact"] .contact-submit:disabled {
    background: #6c8594;
    cursor: wait;
    opacity: 0.9;
}

body[data-page="contact"] .contact-status {
    display: none;
    max-width: 760px;
    margin: 28px auto 0;
    padding: 14px 16px;
    border-radius: 7px;
    font-weight: 700;
}

body[data-page="contact"] .contact-status.is-success {
    display: block;
    border: 1px solid #7cb48b;
    background: #edf8f0;
    color: #245c32;
}

body[data-page="contact"] .contact-status.is-error {
    display: block;
    border: 1px solid #d59a9a;
    background: #fff1f1;
    color: #842929;
}

body[data-page="contact"] .contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 700px) {
    body[data-page="contact"] .contact-hero {
        padding: 52px 22px 38px;
    }

    body[data-page="contact"] .contact-page {
        margin-top: 22px;
    }

    body[data-page="contact"] .contact-section {
        padding: 40px 24px;
    }

    body[data-page="contact"] .contact-form-row {
        grid-template-columns: 1fr;
    }

    body[data-page="contact"] .contact-submit {
        width: 100%;
    }

    body[data-page="contact"] .contact-inquiry-context {
        padding: 14px 16px;
    }

    body[data-page="contact"] .contact-purchase-request-list {
        gap: 20px;
    }

    body[data-page="contact"] .contact-purchase-request-group-heading {
        font-size: 0.88rem;
    }

    body[data-page="contact"] .contact-purchase-request-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
        padding: 5px 0;
    }

    body[data-page="contact"] .contact-purchase-request-details {
        font-size: 0.84rem;
        white-space: normal;
    }

    body[data-page="contact"] .contact-purchase-request-total {
        align-items: baseline;
        gap: 12px;
    }

    body[data-page="contact"] .contact-purchase-request-return {
        min-height: 44px;
        padding: 6px 0;
    }
}

/* ==========================================================================
   5. ARTWORK CATALOG PAGE
   Body marker: data-page="catalog"
   ========================================================================== */

body[data-page="catalog"] * {
            box-sizing: border-box;
        }

        /*
            Elements marked with .dev-only are hidden from normal visitors.

            JavaScript removes this class only when the URL contains either:

                ?dev=true
                ?admin=true
        */
        body[data-page="catalog"] .dev-only {
            display: none !important;
        }

        body[data-page="catalog"] {
            margin: 0;
            background: #f4f4f4;
            color: #222;
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.5;
        }
		
		body[data-page="catalog"] .page-header {
			padding: .5rem 0 .5rem 0;
		}

		body[data-page="catalog"] .header-container {
			width: min(1400px, calc(100% - 80px));
			margin: 0 auto;
			text-align: center;
			position: relative;
		}
/*
            The controls use CSS Grid.

            On a wide screen, several controls appear in one row.
            On a small screen, they wrap into fewer columns automatically.
        */
        body[data-page="catalog"] .controls {
            display: grid;
            grid-template-columns:
                minmax(220px, 2fr)
                repeat(6, minmax(130px, 1fr));
            gap: 10px;
            width: min(1400px, calc(100% - 30px));
            margin: 20px auto;
        }

        /*
            Public mode has seven visible controls:
                Search, Status, Medium, Year, Orientation, Available As,
                Signature Works

            Development/admin mode adds the eighth Artwork Class filter.
        */
        body[data-page="catalog"].dev-mode .controls {
            grid-template-columns:
                minmax(220px, 2fr)
                repeat(7, minmax(130px, 1fr));
        }

        body[data-page="catalog"] .controls input,
body[data-page="catalog"] .controls select,
body[data-page="catalog"] .controls button {
            width: 100%;
            min-height: 44px;
            padding: 10px;
            border: 1px solid #bbb;
            border-radius: 5px;
            background: #fff;
            color: #222;
            font: inherit;
        }

        body[data-page="catalog"] .controls button {
            cursor: pointer;
        }

        body[data-page="catalog"] .signature-filter-control {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 44px;
            padding: 10px 12px;
            border: 1px solid #bbb;
            border-radius: 5px;
            background: #fff;
            color: #222;
            cursor: pointer;
            user-select: none;
        }

        body[data-page="catalog"] .signature-filter-control input {
            width: 18px;
            height: 18px;
            min-height: auto;
            margin: 0;
            padding: 0;
            accent-color: #248BE6;
            cursor: pointer;
        }

        body[data-page="catalog"] .signature-filter-control span {
            font-size: 0.94rem;
            font-weight: 500;
            white-space: nowrap;
        }

        body[data-page="catalog"] .catalog-summary {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            width: min(1400px, calc(100% - 30px));
            margin: 0 auto 15px;
            color: #555;
        }

        body[data-page="catalog"] .catalog-summary-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        body[data-page="catalog"] .about-catalog-link {
            flex: 0 0 auto;
            color: #225975;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 400;
            white-space: nowrap;
    display: inline-block;
    margin-top: 18px;   /* Adjust to taste */
        }

        body[data-page="catalog"] .about-catalog-link:hover {
            text-decoration: underline;
        }

        /*
            auto-fill creates as many card columns as will fit.

            minmax(280px, 1fr) means:
            - Cards will not normally get narrower than 280px
            - Cards expand to share available space
            - More columns automatically appear on larger screens
        */

        body[data-page="catalog"] .active-filter-group {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
            margin-left: auto;
            text-align: right;
        }

        body[data-page="catalog"] .clear-filters-button {
            flex: 0 0 auto;
            min-height: 34px;
            padding: 6px 12px;
            border: 1px solid #8B0000;
            border-radius: 5px;
            background: #fff;
            color: #8B0000;
            font: inherit;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background .15s ease, border-color .15s ease;
        }

        body[data-page="catalog"] .clear-filters-button:hover,
body[data-page="catalog"] .clear-filters-button:focus-visible {
            background: #eaf4fd;
            border-color: #a9ccef;
        }


        /*
            Gallery / Detail view switch.

            Detail View shows the complete catalog cards.
            Gallery View emphasizes artwork and hides most descriptive data.
        */
        body[data-page="catalog"] .view-toggle {
            display: inline-flex;
            overflow: hidden;
            border: 1px solid #b8c5ce;
            border-radius: 6px;
            background: #fff;
        }

        body[data-page="catalog"] .view-toggle-button {
            min-height: 34px;
            padding: 6px 12px;
            border: 0;
            border-right: 1px solid #b8c5ce;
            background: #fff;
            color: #225975;
            font: inherit;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
        }

        body[data-page="catalog"] .view-toggle-button:last-child {
            border-right: 0;
        }

        body[data-page="catalog"] .view-toggle-button:hover {
            background: #eef5f8;
        }

        body[data-page="catalog"] .view-toggle-button.is-active {
			background: #e8f3fb;
			color: #225975;
			font-weight: 700;
        }

        body[data-page="catalog"] .view-toggle-button.is-active::before {
            content: "✓";
            margin-right: 6px;
            font-weight: 800;
        }

        body[data-page="catalog"] .view-toggle-button:focus-visible {
            position: relative;
            z-index: 1;
            outline: 2px solid #225975;
            outline-offset: -2px;
        }

		body[data-page="catalog"] .sort-control {
			min-height: 36px;          /* was 34px */
			padding: 6px 36px 6px 12px;
			border: 1px solid #b8c5ce;
			border-radius: 6px;
			background: #fff;
			color: #225975;
			font: inherit;
			font-size: 0.9rem;
			font-weight: 400;          /* was 600 */
			line-height: 1.2;
			cursor: pointer;
		}

        body[data-page="catalog"] .sort-control:hover,
body[data-page="catalog"] .sort-control:focus-visible {
            background: #eef5f8;
            border-color: #9fb4c3;
        }

        body[data-page="catalog"] .sort-control:focus-visible {
            outline: 2px solid #225975;
            outline-offset: 2px;
        }

        /*
            Per-card artwork button.

            It is shown only in Gallery View. Clicking it opens the individual
            permanent artwork record.
        */
        body[data-page="catalog"] .card-details-toggle {
            display: none;
            width: 100%;
            margin-top: 8px;
            padding: 4px 8px;
            border: 1px solid #c8ddf8;
            border-radius: 4px;
            background: #f5f9ff;
            color: #1f5fa8;
            font: inherit;
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
        }

        body[data-page="catalog"] .card-details-toggle:hover,
body[data-page="catalog"] .card-details-toggle:focus-visible {
            background: #eaf4fd;
            border-color: #a9ccef;
        }

        /*
            Gallery View uses more columns and more compact cards.

            The artwork image, recognition bar, status, title, and catalog
            number stay visible. The long metadata is hidden until the visitor
            expands a particular card.
        */
        body[data-page="catalog"].gallery-view .catalog-grid {
            /* Three large gallery columns that fill the same width as the rest of the page */
            grid-template-columns: repeat(3, 1fr);
            width: min(1400px, calc(100% - 30px));
            gap: 22px;
        }

        body[data-page="catalog"].gallery-view .image-container {
            /* Slightly larger artwork display area than Detail View */
            height: 320px;
        }

        body[data-page="catalog"].gallery-view .card-content {
            flex: 0 0 auto;
            padding: 10px;
        }

        body[data-page="catalog"].gallery-view .art-card.gallery-card-expanded .card-content {
            flex: 1;
            padding: 13px;
        }

        body[data-page="catalog"].gallery-view .status {
            margin-bottom: 8px;
            font-size: 0.72rem;
        }

        body[data-page="catalog"].gallery-view .art-title {
            font-size: 1.08rem;
        }

        body[data-page="catalog"].gallery-view .catalog-number {
            margin-bottom: 0;
        }

        body[data-page="catalog"].gallery-view .status,
body[data-page="catalog"].gallery-view .art-title,
body[data-page="catalog"].gallery-view .catalog-number,
body[data-page="catalog"].gallery-view .details-list,
body[data-page="catalog"].gallery-view .description,
body[data-page="catalog"].gallery-view .special-notes,
body[data-page="catalog"].gallery-view .price,
body[data-page="catalog"].gallery-view .card-footer-row {
            display: none;
        }

        body[data-page="catalog"].gallery-view .catalog-product-availability-link {
            display: inline-block;
            margin: 0 0 8px;
            padding: 3px 7px;
            font-size: 0.78rem;
        }

body[data-page="catalog"].gallery-view .card-details-toggle {
            display: block;
        }

        /*
            An individually expanded Gallery View card temporarily shows all of
            its normal Detail View information.
        */
        body[data-page="catalog"].gallery-view .art-card.gallery-card-expanded .status {
            display: inline-block;
        }

        body[data-page="catalog"].gallery-view .art-card.gallery-card-expanded .art-title,
body[data-page="catalog"].gallery-view .art-card.gallery-card-expanded .catalog-number,
body[data-page="catalog"].gallery-view .art-card.gallery-card-expanded .details-list,
body[data-page="catalog"].gallery-view .art-card.gallery-card-expanded .description,
body[data-page="catalog"].gallery-view .art-card.gallery-card-expanded .special-notes,
body[data-page="catalog"].gallery-view .art-card.gallery-card-expanded .price {
            display: block;
        }

        body[data-page="catalog"].gallery-view .art-card.gallery-card-expanded .catalog-number {
            margin-bottom: 14px;
        }

        body[data-page="catalog"] .catalog-grid {
            display: grid;
            grid-template-columns:
                repeat(auto-fill, minmax(280px, 1fr));
            align-items: stretch;
            gap: 22px;
            width: min(1400px, calc(100% - 30px));
            margin: 0 auto;
            padding-bottom: 60px;
        }

        body[data-page="catalog"] .art-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            background: #fff;
            border: 1px solid #d3d3d3;
            border-radius: 8px;
            box-shadow: 0 3px 12px rgb(0 0 0 / 8%);
        }

        /*
            Every artwork receives the same fixed-size viewing area.

            This prevents very tall portrait artwork from making its card much
            taller than landscape artwork. The entire image remains visible:
            nothing is cropped or stretched.

            Landscape artwork uses the available width, while portrait artwork
            uses the available height. Both receive the same overall display
            area.
        */
        body[data-page="catalog"] .image-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 280px;
            overflow: hidden;
            padding: 12px;
            background: #fafbfc;
            border-bottom: 1px solid #e2e8f0;
        }

        /*
            Recognition bar.

            Every artwork card includes this same-height bar so the artwork
            images and lower card sections remain aligned across each row.

            Signature Works receive the blue highlighted version. Other works
            keep a quiet gray placeholder with no visible text.
        */
        body[data-page="catalog"] .recognition-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 36px;
            padding: 8px 14px;
            /*background: #f2f2f2;*/
            border-bottom: 1px solid #d9dee3;
            color: transparent;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            line-height: 1.2;
            text-align: center;
            text-transform: uppercase;
            pointer-events: none;
        }

        body[data-page="catalog"] .recognition-bar-signature {
            background: #248BE6;
            border-bottom-color: #19445b;
            color: #fdfdfd;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
        }

        body[data-page="catalog"] .recognition-bar-signature::before {
            content: "★";
            margin-right: 7px;
            font-size: 0.9rem;
        }

        body[data-page="catalog"] .image-container img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        body[data-page="catalog"] .missing-image {
            display: none;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 20px;
            color: #777;
            text-align: center;
        }

        body[data-page="catalog"] .card-content {
            display: flex;
            flex: 1;
            flex-direction: column;
            padding: 16px;
        }

        /*
            Award Winner watermark.

            JavaScript adds .award-winner when the structured
            Award / Recognition field contains a value. The watermark appears behind the information
            area in Detail View and behind an expanded card in Gallery View.
        */
        body[data-page="catalog"] .award-winner .card-content {
            position: relative;
            isolation: isolate;
        }

        body[data-page="catalog"] .award-winner .card-content > * {
            position: relative;
            z-index: 1;
        }

        body[data-page="catalog"]:not(.gallery-view) .award-winner .card-content::before,
body[data-page="catalog"].gallery-view
            .award-winner.gallery-card-expanded
            .card-content::before {
            content: "";
            position: absolute;
            z-index: 0;
            top: 48%;
            left: 50%;
            width: min(92%, 350px);
            aspect-ratio: 3 / 4;
            transform: translate(-50%, -50%);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 420'%3E%3Cg fill='%23248BE6'%3E%3Cpath d='M92 220 62 408l88-69 88 69-30-188z'/%3E%3Ccircle cx='150' cy='145' r='112'/%3E%3Ccircle cx='150' cy='145' r='82' fill='white'/%3E%3Ccircle cx='150' cy='145' r='69'/%3E%3Cpath fill='white' d='m150 84 18 38 42 6-30 29 7 42-37-20-37 20 7-42-30-29 42-6z'/%3E%3C/g%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            opacity: 0.065;
            pointer-events: none;
        }

        body[data-page="catalog"] .status {
            align-self: flex-start;
            margin-bottom: 10px;
            padding: 4px 9px;
            border-radius: 999px;
            background: #e8e8e8;
            font-size: 0.78rem;
            font-weight: bold;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        body[data-page="catalog"] .status-available {
            background: #dff2e3;
            color: #236132;
        }

        body[data-page="catalog"] .status-sold {
            background: #eeeeee;
            color: #c62828;
        }

        body[data-page="catalog"] .status-family-collection {
            background: #e4e8f6;
            color: #354d88;
        }

        body[data-page="catalog"] .art-title {
            margin: 0 0 4px;
            font-size: 1.35rem;
        }

        body[data-page="catalog"] .catalog-number {
            margin: 0 0 7px;
            color: #777;
            font-size: 0.95rem;
        }

        body[data-page="catalog"] .catalog-product-availability-link,
        body[data-page="catalog"] .catalog-product-availability-link:visited {
            display: inline-block;
            align-self: flex-start;
            margin: 0 0 10px;
            padding: 4px 8px;
            border: 1px solid #eadc9a;
            border-radius: 4px;
            background: #fff9dc;
            color: #225975;
            font-size: 0.82rem;
            font-weight: 600;
            line-height: 1.3;
            text-decoration: none;
        }

        body[data-page="catalog"] .catalog-product-availability-link:hover,
        body[data-page="catalog"] .catalog-product-availability-link:focus-visible {
            border-color: #d9c56c;
            background: #fff4bd;
            color: #193f54;
            text-decoration: none;
        }

        body[data-page="catalog"] .catalog-product-availability-link:focus-visible {
            outline: 2px solid #225975;
            outline-offset: 3px;
        }

		body[data-page="catalog"] .description {
			margin: 0 0 10px;

			font-size: 0.85rem;
			line-height: 1.45;
		}

        body[data-page="catalog"] .details-list {
            margin: 0;
        }

		body[data-page="catalog"] .detail-row {
			display: grid;
			grid-template-columns: 105px 1fr;
			gap: 8px;
			padding: 6px 0;
			border-top: 1px solid #eee;
		}

		body[data-page="catalog"] .details-list .detail-row:last-child {
			padding-bottom: 4px;
		}

        body[data-page="catalog"] .detail-row dt {
            color: #666;
        }

        body[data-page="catalog"] .detail-row dd {
            margin: 0;
        }
		
        body[data-page="catalog"] .special-notes {
            margin: 0;
            padding-top: 13px;
            border-top: 1px solid #eee;
            color: #555;
            /*font-style: italic;*/
			font-size: 0.85rem;
			line-height: 1.45;
        }

        body[data-page="catalog"] .card-footer-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            margin-top: auto;
            padding-top: 18px;
        }

        body[data-page="catalog"] .price {
            margin: 0;
            padding: 0;
            font-size: 1.2rem;
            font-weight: bold;
        }

        body[data-page="catalog"] .artwork-page-link,
        body[data-page="catalog"] .artwork-page-link:visited {
            flex: 0 0 auto;
            margin-left: auto;
            color: #225975;
            font-size: 0.82rem;
            font-weight: 600;
            line-height: 1.25;
            text-align: right;
            text-decoration: none;
        }

        body[data-page="catalog"] .artwork-page-link:hover,
        body[data-page="catalog"] .artwork-page-link:focus-visible {
            color: #193f54;
            text-decoration: none;
        }

        body[data-page="catalog"] .artwork-page-link:focus-visible {
            outline: 2px solid #225975;
            outline-offset: 3px;
        }

        body[data-page="catalog"] .empty-message,
body[data-page="catalog"] .error-message {
            grid-column: 1 / -1;
            padding: 60px 20px;
            background: #fff;
            border: 1px solid #ddd;
            text-align: center;
        }


        /*
            Artwork cards and images are clickable because they open the
            large-image lightbox.
        */
        body[data-page="catalog"] .art-card-image-link,
        body[data-page="catalog"] .art-title-link {
            color: inherit;
            text-decoration: none;
        }

        body[data-page="catalog"] .art-card-image-link {
            display: block;
        }

        body[data-page="catalog"] .art-card-image-link:focus-visible,
        body[data-page="catalog"] .art-title-link:focus-visible {
            outline: 3px solid #2563eb;
            outline-offset: 3px;
        }

        body[data-page="catalog"] .image-container img {
            transition: transform 160ms ease;
        }

        body[data-page="catalog"] .art-card-image-link:hover .image-container img {
            transform: scale(1.015);
        }

        body[data-page="catalog"] .art-title-link:hover {
            color: #225975;
        }


        /*
            Floating Return to Filters button.

            JavaScript reveals this control after the filter area scrolls out
            of view. It remains fixed to the lower-right corner of the browser
            and smoothly returns the visitor to the search and filter controls.
        */
        body[data-page="catalog"] .return-to-filters-button {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 900;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 10px 15px;
            border: 1px solid #19445b;
            border-radius: 999px;
            background: #225975;
            color: #fff;
            font: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 5px 18px rgb(0 0 0 / 22%);
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            transition:
                opacity .18s ease,
                transform .18s ease,
                visibility .18s ease,
                background-color .15s ease;
        }

        body[data-page="catalog"] .return-to-filters-button.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        body[data-page="catalog"] .return-to-filters-button:hover {
            background: #193f54;
        }

        body[data-page="catalog"] .return-to-filters-button:focus-visible {
            outline: 3px solid #8ec5e3;
            outline-offset: 3px;
        }

        /*
            Full-screen artwork lightbox.

            It remains hidden until JavaScript adds the "is-open" class.
        */
        body[data-page="catalog"] .lightbox {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgb(0 0 0 / 88%);
        }

        body[data-page="catalog"] .lightbox.is-open {
            display: flex;
        }

        body[data-page="catalog"] .lightbox-dialog {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: min(1200px, 100%);
            height: min(900px, calc(100vh - 48px));
        }

        body[data-page="catalog"] .lightbox-figure {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-width: 100%;
            max-height: 100%;
            margin: 0;
        }

        body[data-page="catalog"] .lightbox-image {
            display: block;
            max-width: 100%;
            max-height: calc(100vh - 120px);
            object-fit: contain;
            box-shadow: 0 8px 35px rgb(0 0 0 / 45%);
        }

        body[data-page="catalog"] .lightbox-caption {
            max-width: min(900px, 100%);
            margin-top: 12px;
            color: #fff;
            text-align: center;
        }

        body[data-page="catalog"] .lightbox-title {
            display: block;
            font-size: 1.1rem;
            font-weight: bold;
        }

        body[data-page="catalog"] .lightbox-catalog-number {
            display: block;
            margin-top: 2px;
            color: #d1d5db;
            font-size: 0.9rem;
        }

        body[data-page="catalog"] .lightbox-button {
            position: absolute;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 999px;
            background: rgb(255 255 255 / 90%);
            color: #111;
            cursor: pointer;
            font: inherit;
            line-height: 1;
        }

        body[data-page="catalog"] .lightbox-button:hover,
body[data-page="catalog"] .lightbox-button:focus-visible {
            background: #fff;
        }

        body[data-page="catalog"] .lightbox-close {
            top: 0;
            right: 0;
            width: 44px;
            height: 44px;
            font-size: 1.8rem;
        }

        body[data-page="catalog"] .lightbox-previous,
body[data-page="catalog"] .lightbox-next {
            top: 50%;
            width: 48px;
            height: 48px;
            transform: translateY(-50%);
            font-size: 2rem;
        }

        body[data-page="catalog"] .lightbox-previous {
            left: 0;
        }

        body[data-page="catalog"] .lightbox-next {
            right: 0;
        }

        body[data-page="catalog"] .lightbox-button[hidden] {
            display: none;
        }

        body[data-page="catalog"].lightbox-open {
            overflow: hidden;
        }

        /*
            Tablet layout.

            The controls become three columns instead of six.
        */
        @media (max-width: 1050px) {
            body[data-page="catalog"] .controls {
                grid-template-columns: repeat(3, 1fr);
            }

            body[data-page="catalog"] .search-control {
                grid-column: span 3;
            }
        }

        /*
            Gallery View is limited to three columns on large screens and
            drops to two columns when the available width becomes tighter.
        */
        @media (max-width: 950px) {
            body[data-page="catalog"].gallery-view .catalog-grid {
                grid-template-columns:
                    repeat(2, minmax(260px, 1fr));
            }

            body[data-page="catalog"].gallery-view .image-container {
                height: 280px;
            }
        }

        /*
            Phone layout.

            The controls become one column and the catalog becomes one card
            per row.
        */
        @media (max-width: 620px) {

            body[data-page="catalog"] .controls {
                grid-template-columns: 1fr;
            }

            body[data-page="catalog"] .search-control {
                grid-column: auto;
            }

            body[data-page="catalog"] .catalog-summary {
                flex-direction: column;
                gap: 8px;
            }

            body[data-page="catalog"] .catalog-summary-left {
                gap: 8px;
            }

            body[data-page="catalog"] .active-filter-group {
                width: 100%;
                flex-wrap: wrap;
                justify-content: flex-start;
                margin-left: 0;
                text-align: left;
            }

            body[data-page="catalog"] .catalog-grid {
                grid-template-columns: 1fr;
            }

            body[data-page="catalog"] .view-toggle {
                width: 100%;
            }

            body[data-page="catalog"] .view-toggle-button {
                flex: 1;
            }

            body[data-page="catalog"] .sort-control {
                width: 100%;
                min-height: 42px;
            }

            /*
                In the one-column mobile layout, let the image area follow the
                artwork's natural height instead of reserving a fixed 400px box.
                This removes excessive empty space around landscape artwork.
            */
            body[data-page="catalog"] .image-container {
                height: auto;
                min-height: 0;
                padding: 10px;
            }

            body[data-page="catalog"] .image-container img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 520px;
            }

            body[data-page="catalog"].gallery-view .catalog-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }

            body[data-page="catalog"].gallery-view .image-container {
                height: 220px;
                padding: 8px;
            }

            body[data-page="catalog"].gallery-view .recognition-bar {
                min-height: 32px;
                padding: 7px 8px;
                font-size: 0.68rem;
            }

            body[data-page="catalog"].gallery-view .card-content {
                padding: 11px;
            }

            body[data-page="catalog"].gallery-view .art-title {
                font-size: 1rem;
            }

            body[data-page="catalog"].gallery-view .catalog-number {
                font-size: 0.78rem;
            }

            body[data-page="catalog"].gallery-view .catalog-product-availability-link {
                font-size: 0.76rem;
            }

            body[data-page="catalog"] .return-to-filters-button {
                right: 12px;
                bottom: 12px;
                min-height: 42px;
                padding: 9px 13px;
                font-size: 0.84rem;
            }

            body[data-page="catalog"] .lightbox {
                padding: 12px;
            }

            body[data-page="catalog"] .lightbox-dialog {
                height: calc(100vh - 24px);
            }

            body[data-page="catalog"] .lightbox-image {
                max-height: calc(100vh - 105px);
            }

            body[data-page="catalog"] .lightbox-close {
                top: 2px;
                right: 2px;
            }

            body[data-page="catalog"] .lightbox-previous,
body[data-page="catalog"] .lightbox-next {
                top: auto;
                bottom: 4px;
                transform: none;
            }
        }

        @media (max-width: 430px) {
            body[data-page="catalog"].gallery-view .catalog-grid {
                grid-template-columns: 1fr;
            }

            /*
                Gallery View also becomes one column at this width, so its image
                area can use the same natural-height behavior.
            */
            body[data-page="catalog"].gallery-view .image-container {
                height: auto;
                min-height: 0;
                padding: 10px;
            }

            body[data-page="catalog"].gallery-view .image-container img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 520px;
            }
        }

/* ==========================================================================
   6. ABOUT THE ARTWORK CATALOG PAGE
   Body marker: data-page="about-catalog"
   ========================================================================== */

body[data-page="about-catalog"] {
    --catalog-about-background: #f5f5f3;
    --catalog-about-panel: #ffffff;
    --catalog-about-text: #222222;
    --catalog-about-muted: #666666;
    --catalog-about-primary: #225975;
    --catalog-about-primary-hover: #193f54;
    --catalog-about-border: #ddddda;
    --catalog-about-soft: #f8f9f9;
    --catalog-about-shadow: 0 10px 30px rgb(0 0 0 / 7%);

    margin: 0;
    background: var(--catalog-about-background);
    color: var(--catalog-about-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65;
}

body[data-page="about-catalog"] a {
    color: inherit;
}

/* Hero mirrors the homepage hero. */
body[data-page="about-catalog"] .catalog-about-hero {
    margin-top: 20px;
    padding: 30px 22px;
    background: #ffffff;
    border-top: 1px solid var(--catalog-about-border);
    border-bottom: 1px solid var(--catalog-about-border);
    text-align: center;
}

body[data-page="about-catalog"] .catalog-about-eyebrow {
    margin: 0 0 12px;
    color: var(--catalog-about-primary);
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

body[data-page="about-catalog"] .catalog-about-hero h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 7vw, 4.7rem);
    font-weight: normal;
    line-height: 1.05;
}

body[data-page="about-catalog"] .catalog-about-subtitle {
    max-width: 860px;
    margin: 18px auto 0;
    color: var(--catalog-about-muted);
    font-size: clamp(0.95rem, 2vw, 1.18rem);
}

body[data-page="about-catalog"] .catalog-about-header-button,
body[data-page="about-catalog"] .catalog-about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: bold;
    text-decoration: none;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

body[data-page="about-catalog"] .catalog-about-header-button {
    margin-top: 30px;
    background: var(--catalog-about-primary);
    color: #ffffff;
    box-shadow: 0 7px 18px rgb(34 89 117 / 18%);
}

body[data-page="about-catalog"] .catalog-about-header-button:hover,
body[data-page="about-catalog"] .catalog-about-button-primary:hover {
    transform: translateY(-2px);
    background: var(--catalog-about-primary-hover);
}

body[data-page="about-catalog"] .catalog-about-header-button:focus-visible,
body[data-page="about-catalog"] .catalog-about-button:focus-visible {
    outline: 3px solid #4f9ac2;
    outline-offset: 4px;
}

/* Main card and section flow mirror the homepage content card. */
body[data-page="about-catalog"] .catalog-about-page {
    width: min(1000px, calc(100% - 32px));
    margin: 36px auto 56px;
}

body[data-page="about-catalog"] .catalog-about-card {
    overflow: hidden;
    background: var(--catalog-about-panel);
    border: 1px solid var(--catalog-about-border);
    border-radius: 14px;
    box-shadow: var(--catalog-about-shadow);
}

body[data-page="about-catalog"] .catalog-about-section {
    padding: 48px 54px;
    text-align: center;
}

body[data-page="about-catalog"] .catalog-about-section + .catalog-about-section {
    border-top: 1px solid var(--catalog-about-border);
}

body[data-page="about-catalog"] .catalog-about-section h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: normal;
    line-height: 1.15;
}

body[data-page="about-catalog"] .catalog-about-section-intro {
    max-width: 700px;
    margin: 15px auto 0;
    color: var(--catalog-about-muted);
}

body[data-page="about-catalog"] .catalog-about-copy {
    max-width: 760px;
    margin: 24px auto 0;
    text-align: left;
    font-size: 1.04rem;
}

body[data-page="about-catalog"] .catalog-about-copy p {
    margin: 0 0 18px;
}

body[data-page="about-catalog"] .catalog-about-copy p:last-child {
    margin-bottom: 0;
}

body[data-page="about-catalog"] .catalog-about-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
    max-width: 800px;
    margin: 28px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

body[data-page="about-catalog"] .catalog-about-checklist li {
    position: relative;
    padding-left: 30px;
}

body[data-page="about-catalog"] .catalog-about-checklist li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--site-blue);
    font-weight: 800;
}

body[data-page="about-catalog"] .catalog-about-process-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
    text-align: left;
}

body[data-page="about-catalog"] .catalog-about-process-item {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--catalog-about-border);
    border-radius: 10px;
}

body[data-page="about-catalog"] .catalog-about-process-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #eef5f8;
    color: var(--catalog-about-primary);
    font-weight: 800;
}

body[data-page="about-catalog"] .catalog-about-process-item h3,
body[data-page="about-catalog"] .catalog-about-sample-content h3,
body[data-page="about-catalog"] .catalog-about-standard-item h3 {
    margin: 0 0 6px;
    color: var(--catalog-about-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
}

body[data-page="about-catalog"] .catalog-about-process-item h3 {
    font-size: 1.32rem;
}

body[data-page="about-catalog"] .catalog-about-process-item p,
body[data-page="about-catalog"] .catalog-about-sample-content p,
body[data-page="about-catalog"] .catalog-about-standard-item p {
    margin: 0;
    color: #555;
}

body[data-page="about-catalog"] .catalog-about-sample-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 30px;
    text-align: left;
}

body[data-page="about-catalog"] .catalog-about-sample-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--catalog-about-border);
    border-radius: 10px;
}

body[data-page="about-catalog"] .catalog-about-sample-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--catalog-about-border);
}

body[data-page="about-catalog"] .catalog-about-sample-image img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
}

body[data-page="about-catalog"] .catalog-about-placeholder {
    width: 100%;
    padding: 42px 14px;
    border: 2px dashed #cfd8e3;
    color: #718096;
    text-align: center;
    overflow-wrap: anywhere;
}

body[data-page="about-catalog"] .catalog-about-placeholder[hidden] {
    display: none;
}

body[data-page="about-catalog"] .catalog-about-sample-content {
    padding: 20px;
}

body[data-page="about-catalog"] .catalog-about-sample-content h3 {
    font-size: 1.28rem;
}

body[data-page="about-catalog"] .catalog-about-standards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
    text-align: left;
}

body[data-page="about-catalog"] .catalog-about-standard-item {
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--catalog-about-border);
    border-radius: 10px;
}

body[data-page="about-catalog"] .catalog-about-standard-item h3 {
    color: var(--catalog-about-primary);
    font-size: 1.28rem;
}

body[data-page="about-catalog"] .catalog-about-standard-wide {
    grid-column: 1 / -1;
}

body[data-page="about-catalog"] .catalog-about-closing-copy {
    max-width: 720px;
    text-align: center;
}

body[data-page="about-catalog"] .catalog-about-button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

body[data-page="about-catalog"] .catalog-about-button-primary {
    background: var(--catalog-about-primary);
    color: #ffffff;
    box-shadow: 0 7px 18px rgb(34 89 117 / 18%);
}

body[data-page="about-catalog"] .catalog-about-button-secondary {
    background: #ffffff;
    border: 1px solid #aac3d1;
    color: var(--catalog-about-primary);
}

body[data-page="about-catalog"] .catalog-about-button-secondary:hover {
    transform: translateY(-2px);
    background: #eef5f8;
    border-color: #8eafc0;
}

@media (max-width: 820px) {
    body[data-page="about-catalog"] .catalog-about-checklist,
    body[data-page="about-catalog"] .catalog-about-process-grid,
    body[data-page="about-catalog"] .catalog-about-standards-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="about-catalog"] .catalog-about-standard-wide {
        grid-column: auto;
    }

    body[data-page="about-catalog"] .catalog-about-sample-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="about-catalog"] .catalog-about-sample-card {
        max-width: 620px;
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    body[data-page="about-catalog"] .catalog-about-hero {
        padding: 52px 22px 38px;
    }

    body[data-page="about-catalog"] .catalog-about-header-button,
    body[data-page="about-catalog"] .catalog-about-button {
        width: 100%;
        max-width: 360px;
    }

    body[data-page="about-catalog"] .catalog-about-page {
        margin-top: 22px;
    }

    body[data-page="about-catalog"] .catalog-about-section {
        padding: 40px 24px;
    }

    body[data-page="about-catalog"] .catalog-about-process-item {
        grid-template-columns: 42px 1fr;
        padding: 18px;
    }

    body[data-page="about-catalog"] .catalog-about-process-number {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 440px) {
    body[data-page="about-catalog"] .catalog-about-process-item {
        grid-template-columns: 1fr;
    }

    body[data-page="about-catalog"] .catalog-about-process-number {
        margin: 0 auto;
    }

    body[data-page="about-catalog"] .catalog-about-process-item {
        text-align: center;
    }
}


/* Homepage CTA group */
body[data-page="home"] .hero-actions{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
margin-top:30px;
}
body[data-page="home"] .hero-actions .header-button,
body[data-page="home"] .hero-actions .catalog-button{
margin-top:0;
}
body[data-page="home"] .about-catalog-link{
color:var(--primary-color);
text-decoration:none;
font-size:.95rem;
font-weight:400;
}
body[data-page="home"] .about-catalog-link:hover{
text-decoration:underline;
}
/* About Catalog hero link */
body[data-page="about-catalog"] .catalog-about-hero-link {
    display: inline-block;
    margin-top: 22px;
    color: var(--catalog-about-primary);
    font-size: 0.95rem;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
}

body[data-page="about-catalog"] .catalog-about-hero-link:hover {
    text-decoration: underline;
}


/* ==========================================================================
   7. EARLY ARTWORK OWNER DOCUMENTATION PAGE
   Body marker: data-page="owner-documentation"
   ========================================================================== */

body[data-page="owner-documentation"] {
    --owner-doc-background: #f5f5f3;
    --owner-doc-panel: #ffffff;
    --owner-doc-text: #222222;
    --owner-doc-muted: #666666;
    --owner-doc-primary: #225975;
    --owner-doc-primary-hover: #193f54;
    --owner-doc-border: #ddddda;
    --owner-doc-shadow: 0 10px 30px rgb(0 0 0 / 7%);

    margin: 0;
    background: var(--owner-doc-background);
    color: var(--owner-doc-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65;
}

body[data-page="owner-documentation"] .owner-doc-hero {
    margin-top: 20px;
    padding: 42px 22px 38px;
    background: #ffffff;
    border-top: 1px solid var(--owner-doc-border);
    border-bottom: 1px solid var(--owner-doc-border);
    text-align: center;
}

body[data-page="owner-documentation"] .owner-doc-hero h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 7vw, 4.7rem);
    font-weight: normal;
    line-height: 1.05;
}

body[data-page="owner-documentation"] .owner-doc-subtitle {
    max-width: 880px;
    margin: 20px auto 0;
    color: var(--owner-doc-muted);
    font-size: clamp(0.95rem, 2vw, 1.18rem);
}

body[data-page="owner-documentation"] .owner-doc-hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 22px;
}

body[data-page="owner-documentation"] .owner-doc-hero-links a {
    color: var(--owner-doc-primary);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

body[data-page="owner-documentation"] .owner-doc-hero-links a:hover {
    text-decoration: underline;
}

body[data-page="owner-documentation"] .owner-doc-page {
    width: min(1000px, calc(100% - 32px));
    margin: 36px auto 56px;
}

body[data-page="owner-documentation"] .owner-doc-card {
    overflow: hidden;
    background: var(--owner-doc-panel);
    border: 1px solid var(--owner-doc-border);
    border-radius: 14px;
    box-shadow: var(--owner-doc-shadow);
}

body[data-page="owner-documentation"] .owner-doc-section {
    padding: 48px 54px;
    text-align: center;
}

body[data-page="owner-documentation"] .owner-doc-section + .owner-doc-section {
    border-top: 1px solid var(--owner-doc-border);
}

body[data-page="owner-documentation"] .owner-doc-section h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: normal;
    line-height: 1.15;
}

body[data-page="owner-documentation"] .owner-doc-section-intro {
    max-width: 720px;
    margin: 15px auto 0;
    color: var(--owner-doc-muted);
}

body[data-page="owner-documentation"] .owner-doc-copy {
    max-width: 760px;
    margin: 24px auto 0;
    text-align: left;
    font-size: 1.04rem;
}

body[data-page="owner-documentation"] .owner-doc-copy p {
    margin: 0 0 18px;
}

body[data-page="owner-documentation"] .owner-doc-copy p:last-child {
    margin-bottom: 0;
}

body[data-page="owner-documentation"] .owner-doc-copy-centered {
    text-align: center;
}

body[data-page="owner-documentation"] .owner-doc-benefits-grid,
body[data-page="owner-documentation"] .owner-doc-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
    text-align: left;
}

body[data-page="owner-documentation"] .owner-doc-info-card {
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--owner-doc-border);
    border-radius: 10px;
}

body[data-page="owner-documentation"] .owner-doc-info-card h3,
body[data-page="owner-documentation"] .owner-doc-request-card h3,
body[data-page="owner-documentation"] .owner-doc-note h3 {
    margin: 0 0 6px;
    color: var(--owner-doc-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.28rem;
    font-weight: normal;
}

body[data-page="owner-documentation"] .owner-doc-info-card p,
body[data-page="owner-documentation"] .owner-doc-request-card p,
body[data-page="owner-documentation"] .owner-doc-note p {
    margin: 0;
    color: #555;
}

body[data-page="owner-documentation"] .owner-doc-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
    text-align: left;
}

body[data-page="owner-documentation"] .owner-doc-request-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--owner-doc-border);
    border-radius: 10px;
}

body[data-page="owner-documentation"] .owner-doc-request-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #e6f0f8;
    color: var(--owner-doc-primary);
    font-weight: 800;
}

body[data-page="owner-documentation"] .owner-doc-note {
    max-width: 800px;
    margin: 26px auto 0;
    padding: 22px 24px;
    background: #fffaf0;
    border: 1px solid #e6d4ad;
    border-radius: 10px;
    text-align: left;
}

body[data-page="owner-documentation"] .owner-doc-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
    max-width: 820px;
    margin: 28px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

body[data-page="owner-documentation"] .owner-doc-checklist li {
    position: relative;
    padding-left: 30px;
}

body[data-page="owner-documentation"] .owner-doc-checklist li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--site-blue);
    font-weight: 800;
}

body[data-page="owner-documentation"] .owner-doc-button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

body[data-page="owner-documentation"] .owner-doc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

body[data-page="owner-documentation"] .owner-doc-button-primary {
    background: var(--owner-doc-primary);
    color: #ffffff;
    box-shadow: 0 7px 18px rgb(34 89 117 / 18%);
}

body[data-page="owner-documentation"] .owner-doc-button-primary:hover {
    transform: translateY(-2px);
    background: var(--owner-doc-primary-hover);
}

body[data-page="owner-documentation"] .owner-doc-button-secondary {
    background: #ffffff;
    border: 1px solid #aac3d1;
    color: var(--owner-doc-primary);
}

body[data-page="owner-documentation"] .owner-doc-button-secondary:hover {
    transform: translateY(-2px);
    background: #eef5f8;
    border-color: #8eafc0;
}

body[data-page="owner-documentation"] .owner-doc-button:focus-visible,
body[data-page="owner-documentation"] .owner-doc-hero-links a:focus-visible {
    outline: 3px solid #4f9ac2;
    outline-offset: 4px;
}

body[data-page="owner-documentation"] .owner-doc-thanks-section {
    padding-top: 42px;
    padding-bottom: 44px;
}

@media (max-width: 820px) {
    body[data-page="owner-documentation"] .owner-doc-benefits-grid,
    body[data-page="owner-documentation"] .owner-doc-services-grid,
    body[data-page="owner-documentation"] .owner-doc-request-grid,
    body[data-page="owner-documentation"] .owner-doc-checklist {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body[data-page="owner-documentation"] .owner-doc-hero {
        padding: 52px 22px 38px;
    }

    body[data-page="owner-documentation"] .owner-doc-page {
        margin-top: 22px;
    }

    body[data-page="owner-documentation"] .owner-doc-section {
        padding: 40px 24px;
    }

    body[data-page="owner-documentation"] .owner-doc-request-card {
        grid-template-columns: 42px 1fr;
        padding: 18px;
    }

    body[data-page="owner-documentation"] .owner-doc-request-number {
        width: 42px;
        height: 42px;
    }

    body[data-page="owner-documentation"] .owner-doc-button {
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 440px) {
    body[data-page="owner-documentation"] .owner-doc-request-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    body[data-page="owner-documentation"] .owner-doc-request-number {
        margin: 0 auto;
    }
}
.owner-doc-more-info {
    display: block;
    padding-top: 8px;
    color: #666;
}

.owner-doc-more-info a,
.owner-doc-more-info a:visited {
    color: #1f5f84;
    text-decoration: none;
    font-weight: 500;
}

.owner-doc-more-info a:hover {
    text-decoration: underline;
}

/* Owner documentation progress summary */
body[data-page="owner-documentation"] .owner-doc-progress-section {
    padding: 34px 40px;
    background: linear-gradient(135deg, #edf6fc 0%, #f8fbfd 100%);
    border-bottom: 1px solid var(--owner-doc-border);
}

body[data-page="owner-documentation"] .owner-doc-progress-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 30px 34px;
    background: #ffffff;
    border: 1px solid #c8dbe8;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(34 89 117 / 10%);
    text-align: center;
}

body[data-page="owner-documentation"] .owner-doc-progress-kicker {
    margin: 0 0 4px;
    color: var(--owner-doc-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body[data-page="owner-documentation"] .owner-doc-progress-number {
    margin: 0;
    color: var(--owner-doc-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4.5rem, 12vw, 7rem);
    font-weight: normal;
    line-height: 0.95;
}

body[data-page="owner-documentation"] .owner-doc-progress-card h2 {
    margin: 12px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: normal;
    line-height: 1.15;
}

body[data-page="owner-documentation"] .owner-doc-progress-summary {
    max-width: 620px;
    margin: 14px auto 0;
    color: #555;
}

body[data-page="owner-documentation"] .owner-doc-progress-bar {
    width: min(560px, 100%);
    height: 10px;
    margin: 22px auto 0;
    overflow: hidden;
    background: #dce7ee;
    border-radius: 999px;
}

body[data-page="owner-documentation"] .owner-doc-progress-bar span {
    display: block;
    width: 86%;
    height: 100%;
    background: var(--owner-doc-primary);
    border-radius: inherit;
}

body[data-page="owner-documentation"] .owner-doc-progress-note {
    margin: 12px 0 0;
    color: var(--owner-doc-muted);
    font-size: 0.86rem;
}

@media (max-width: 700px) {
    body[data-page="owner-documentation"] .owner-doc-progress-section {
        padding: 24px 18px;
    }

    body[data-page="owner-documentation"] .owner-doc-progress-card {
        padding: 26px 20px;
    }
}


/* About Catalog owner callout */
body[data-page="about-catalog"] .catalog-about-owner-callout{
    max-width:720px;
    margin:34px auto 0;
    padding:26px 28px;
    background:#eef5f8;
    border:1px solid #c8dbe8;
    border-radius:10px;
    text-align:center;
}
body[data-page="about-catalog"] .catalog-about-owner-callout h3{
    margin:0 0 10px;
    color:var(--catalog-about-primary);
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.6rem;
    font-weight:normal;
}
body[data-page="about-catalog"] .catalog-about-owner-callout p{
    margin:0;
    color:#555;
}
body[data-page="about-catalog"] .catalog-about-owner-link{
    display:inline-block;
    margin-top:18px;
    color:var(--catalog-about-primary);
    font-weight:600;
    text-decoration:none;
}
body[data-page="about-catalog"] .catalog-about-owner-link:hover{
    text-decoration:underline;
}

/* ==========================================================================
   CATALOG PAGE: EARLY ARTWORK OWNER FOOTER
   ========================================================================== */

body[data-page="catalog"] .catalog-owner-footer {
    width:min(760px,calc(100% - 32px));
    margin:18px auto 42px;
    padding:34px 28px;
    background:#eef5f8;
    border:1px solid #c8dbe8;
    border-radius:10px;
    text-align:center;
}

body[data-page="catalog"] .catalog-owner-footer h2 {
    margin: 0 0 10px;
    color: var(--site-blue-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
    font-weight: normal;
    line-height: 1.2;
}

body[data-page="catalog"] .catalog-owner-footer p {
    max-width: 680px;
    margin: 0 auto;
    color: #666666;
}

body[data-page="catalog"] .catalog-owner-footer a,
body[data-page="catalog"] .catalog-owner-footer a:visited {
    display: inline-block;
    margin-top: 16px;
    color: var(--site-blue-dark);
    font-weight: 600;
    text-decoration: none;
}

body[data-page="catalog"] .catalog-owner-footer a:hover,
body[data-page="catalog"] .catalog-owner-footer a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 620px) {
    body[data-page="catalog"] .catalog-owner-footer {
        margin: 10px auto 30px;
        padding: 24px 16px;
    }

    body[data-page="catalog"] .catalog-owner-footer h2 {
        font-size: 1.5rem;
    }
}
.page-hero {
    margin-top: 20px;
    padding: 30px 22px;
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.page-hero h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 7vw, 4.7rem);
    font-weight: normal;
    line-height: 1.05;
}

.page-subtitle {
    max-width: 860px;
    margin: 18px auto 0;
    color: var(--muted-color);
    font-size: clamp(0.95rem, 2vw, 1.18rem);
}

/* ==========================================================================
   GLOBAL LINK STYLE
   Text links throughout the site are intentionally not underlined.
   Buttons and other component-specific link styling remain unchanged.
   ========================================================================== */

a,
a:visited,
a:hover,
a:focus-visible {
    text-decoration: none;
}



/* ==========================================================================
   CATALOG V2 ARTWORK PAGE LINKS
   ========================================================================== */

body[data-page="catalog"] .art-title-link {
    display: inline;
    color: inherit;
}

body[data-page="catalog"] .art-card-image-link {
    border-radius: 0;
}

body[data-page="catalog"] .card-details-toggle {
    text-decoration: none;
}


/* ==========================================================================
   MOBILE NAVIGATION — ALWAYS VISIBLE
   The primary links remain visible on mobile instead
   of collapsing them behind a hamburger. "Artwork Catalog" shortens to
   "Catalog" on narrow screens.
   ========================================================================== */

.nav-label-mobile {
    display: none;
}

@media (max-width: 760px) {
    .header-inner {
        position: static;
        justify-content: center;
        min-height: 0;
        width: min(100%, calc(100% - 16px));
        padding: 12px 0;
    }

    .menu-toggle {
        display: none !important;
    }

    .site-nav,
    .site-nav.is-open {
        position: static;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: clamp(6px, 2.4vw, 16px);
        width: 100%;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .site-nav a {
        flex: 0 1 auto;
        padding: 6px 2px;
        border-radius: 0;
        font-size: clamp(0.76rem, 3.7vw, 0.9rem);
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    .site-nav a:hover,
    .site-nav a:focus-visible {
        background: transparent;
    }

    .site-nav a[aria-current="page"]::after {
        display: block;
        bottom: -3px;
    }

    .nav-label-desktop {
        display: none;
    }

    .nav-label-mobile {
        display: inline;
    }
}

@media (max-width: 360px) {
    .header-inner {
        width: calc(100% - 10px);
        padding: 10px 0;
    }

    .site-nav,
    .site-nav.is-open {
        gap: 8px;
    }

    .site-nav a {
        font-size: 0.72rem;
        padding-left: 1px;
        padding-right: 1px;
    }
}


/* ==========================================================================
   ABOUT CATALOG: DYNAMIC CATALOG STATUS
   ========================================================================== */

body[data-page="about-catalog"] .catalog-about-status-section {
    text-align: center;
}

body[data-page="about-catalog"] .catalog-status-summary {
    max-width: 760px;
    margin: 30px auto 0;
}

body[data-page="about-catalog"] .catalog-status-primary {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

body[data-page="about-catalog"] .catalog-status-big-number {
    color: var(--catalog-about-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.3rem, 9vw, 5.5rem);
    font-weight: normal;
    line-height: 0.95;
}

body[data-page="about-catalog"] .catalog-status-big-label {
    color: #44515a;
    font-size: 1rem;
    font-weight: 600;
}

body[data-page="about-catalog"] .catalog-status-summary-text {
    margin: 12px auto 0;
    color: #555;
    font-size: 1rem;
}

body[data-page="about-catalog"] .catalog-status-bar-wrap {
    max-width: 820px;
    margin: 30px auto 0;
}

body[data-page="about-catalog"] .catalog-status-bar {
    display: flex;
    width: 100%;
    min-height: 34px;
    overflow: hidden;
    border: 1px solid #b9cbd7;
    border-radius: 999px;
    background: #eef3f6;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 6%);
}

body[data-page="about-catalog"] .catalog-status-segment {
    min-width: 2px;
    transition: filter 140ms ease;
}

body[data-page="about-catalog"] .catalog-status-segment:hover {
    filter: brightness(0.95);
}

body[data-page="about-catalog"] .catalog-status-available {
    background: #9fd3a9;
}

body[data-page="about-catalog"] .catalog-status-sold {
    background: #d7a0a0;
}

body[data-page="about-catalog"] .catalog-status-family-collection {
    background: #9fb1dc;
}

body[data-page="about-catalog"] .catalog-status-gifted {
    background: #d8bf8a;
}

body[data-page="about-catalog"] .catalog-status-not-for-sale {
    background: #b6bcc2;
}

body[data-page="about-catalog"] .catalog-status-unknown {
    background: #c8b6d8;
}

body[data-page="about-catalog"] .catalog-status-undocumented {
    background:
        repeating-linear-gradient(
            135deg,
            #d9e1e6 0,
            #d9e1e6 8px,
            #eef3f6 8px,
            #eef3f6 16px
        );
}

body[data-page="about-catalog"] .catalog-status-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
    max-width: 820px;
    margin: 24px auto 0;
    text-align: left;
}

body[data-page="about-catalog"] .catalog-status-legend-item {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 9px;
    align-items: start;
}

body[data-page="about-catalog"] .catalog-status-swatch {
    width: 12px;
    height: 12px;
    margin-top: 5px;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 3px;
}

body[data-page="about-catalog"] .catalog-status-legend-copy {
    color: #3f4a52;
    font-size: 0.9rem;
    line-height: 1.35;
}

body[data-page="about-catalog"] .catalog-status-legend-copy strong {
    display: block;
    color: #222;
    font-size: 0.93rem;
}

body[data-page="about-catalog"] .catalog-status-note {
    max-width: 760px;
    margin: 22px auto 0;
    color: var(--catalog-about-muted);
    font-size: 0.86rem;
}

body[data-page="about-catalog"] .catalog-status-error {
    max-width: 760px;
    margin: 24px auto 0;
    padding: 14px 16px;
    border: 1px solid #d7a6a6;
    border-radius: 8px;
    background: #fff4f4;
    color: #8a2424;
}

@media (max-width: 760px) {
    body[data-page="about-catalog"] .catalog-status-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="about-catalog"] .catalog-status-bar {
        min-height: 30px;
    }
}

@media (max-width: 480px) {
    body[data-page="about-catalog"] .catalog-status-legend {
        grid-template-columns: 1fr;
    }

    body[data-page="about-catalog"] .catalog-status-big-label {
        width: 100%;
    }
}


/* ==========================================================================
   OWNER DOCUMENTATION: DYNAMIC CATALOG ESTIMATE
   ========================================================================== */

body[data-page="owner-documentation"] .owner-doc-progress-section {
    padding: 38px 40px;
    background: linear-gradient(135deg, #edf6fc 0%, #f8fbfd 100%);
    border-bottom: 1px solid var(--owner-doc-border);
}

body[data-page="owner-documentation"] .owner-doc-progress-card {
    max-width: 800px;
    margin: 0 auto;
    padding: 34px 38px 30px;
    background: #ffffff;
    border: 1px solid #c8dbe8;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgb(34 89 117 / 11%);
    text-align: center;
}

body[data-page="owner-documentation"] .owner-doc-progress-kicker {
    margin: 0 0 12px;
    color: var(--owner-doc-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body[data-page="owner-documentation"] .owner-doc-progress-primary {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

body[data-page="owner-documentation"] .owner-doc-progress-number {
    margin: 0;
    color: var(--owner-doc-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4.6rem, 12vw, 7rem);
    font-weight: normal;
    line-height: 0.9;
}

body[data-page="owner-documentation"] .owner-doc-progress-number-label {
    max-width: 250px;
    color: #44515a;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

body[data-page="owner-documentation"] .owner-doc-progress-card h2 {
    margin: 18px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    font-weight: normal;
    line-height: 1.15;
}

body[data-page="owner-documentation"] .owner-doc-progress-summary {
    max-width: 650px;
    margin: 14px auto 0;
    color: #555;
    font-size: 1rem;
}

body[data-page="owner-documentation"] .owner-doc-progress-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 650px;
    margin: 26px auto 0;
}

body[data-page="owner-documentation"] .owner-doc-progress-stat {
    padding: 14px 10px;
    background: #f7fafc;
    border: 1px solid #d9e5ec;
    border-radius: 9px;
}

body[data-page="owner-documentation"] .owner-doc-progress-stat strong {
    display: block;
    color: var(--owner-doc-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    font-weight: normal;
    line-height: 1.05;
}

body[data-page="owner-documentation"] .owner-doc-progress-stat span {
    display: block;
    margin-top: 4px;
    color: #5e6970;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
}

body[data-page="owner-documentation"] .owner-doc-progress-bar {
    width: min(600px, 100%);
    height: 12px;
    margin: 24px auto 0;
    overflow: hidden;
    background: #dce7ee;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 6%);
}

body[data-page="owner-documentation"] .owner-doc-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--owner-doc-primary);
    border-radius: inherit;
    transition: width 350ms ease;
}

body[data-page="owner-documentation"] .owner-doc-progress-note {
    max-width: 650px;
    margin: 13px auto 0;
    color: var(--owner-doc-muted);
    font-size: 0.85rem;
}

body[data-page="owner-documentation"] .owner-doc-progress-error {
    color: #8a2424;
}

@media (max-width: 700px) {
    body[data-page="owner-documentation"] .owner-doc-progress-section {
        padding: 24px 18px;
    }

    body[data-page="owner-documentation"] .owner-doc-progress-card {
        padding: 28px 20px 24px;
    }

    body[data-page="owner-documentation"] .owner-doc-progress-primary {
        display: block;
    }

    body[data-page="owner-documentation"] .owner-doc-progress-number-label {
        display: block;
        max-width: none;
        margin: 8px auto 0;
        text-align: center;
    }

    body[data-page="owner-documentation"] .owner-doc-progress-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="owner-documentation"] .owner-doc-progress-stat {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 11px 14px;
        text-align: left;
    }

    body[data-page="owner-documentation"] .owner-doc-progress-stat strong {
        font-size: 1.35rem;
    }

    body[data-page="owner-documentation"] .owner-doc-progress-stat span {
        margin-top: 0;
        text-align: right;
    }
}


/* ==========================================================================
   OWNER DOCUMENTATION: SIMPLIFIED ESTIMATE CARD
   ========================================================================== */

body[data-page="owner-documentation"] .owner-doc-progress-primary {
    display: block;
    text-align: center;
}

body[data-page="owner-documentation"] .owner-doc-progress-number {
    display: block;
    text-align: center;
}

body[data-page="owner-documentation"] .owner-doc-progress-card h2 {
    margin-top: 14px;
}

body[data-page="owner-documentation"] .owner-doc-progress-summary {
    max-width: 620px;
    margin-top: 14px;
}

body[data-page="owner-documentation"] .owner-doc-progress-bar {
    margin-top: 24px;
}

body[data-page="owner-documentation"] .owner-doc-progress-note {
    margin-top: 12px;
}

/* ==========================================================================
   8. PURCHASE INFORMATION PAGES
   Body markers: data-page="originals" and data-page="products"
   ========================================================================== */

body[data-page="originals"],
body[data-page="products"] {
    --purchase-background: #f5f5f3;
    --purchase-panel: #ffffff;
    --purchase-text: #222222;
    --purchase-muted: #666666;
    --purchase-primary: #225975;
    --purchase-primary-hover: #193f54;
    --purchase-border: #ddddda;
    --purchase-shadow: 0 10px 30px rgb(0 0 0 / 7%);

    margin: 0;
    background: var(--purchase-background);
    color: var(--purchase-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65;
}

body[data-page="originals"] .purchase-info-page,
body[data-page="products"] .purchase-info-page {
    width: min(1000px, calc(100% - 32px));
    margin: 36px auto 56px;
}

body[data-page="originals"] .purchase-info-card,
body[data-page="products"] .purchase-info-card {
    overflow: hidden;
    background: var(--purchase-panel);
    border: 1px solid var(--purchase-border);
    border-radius: 14px;
    box-shadow: var(--purchase-shadow);
}

body[data-page="originals"] .purchase-info-section,
body[data-page="products"] .purchase-info-section {
    padding: 48px 54px;
    text-align: center;
}

body[data-page="originals"] .purchase-info-section + .purchase-info-section,
body[data-page="products"] .purchase-info-section + .purchase-info-section {
    border-top: 1px solid var(--purchase-border);
}

body[data-page="originals"] .purchase-info-section h2,
body[data-page="products"] .purchase-info-section h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: normal;
    line-height: 1.15;
}

body[data-page="originals"] .purchase-info-section-intro,
body[data-page="products"] .purchase-info-section-intro {
    max-width: 720px;
    margin: 15px auto 0;
    color: var(--purchase-muted);
}

body[data-page="originals"] .purchase-info-copy,
body[data-page="products"] .purchase-info-copy {
    max-width: 760px;
    margin: 24px auto 0;
    text-align: left;
    font-size: 1.04rem;
}

body[data-page="originals"] .purchase-info-copy p,
body[data-page="products"] .purchase-info-copy p {
    margin: 0 0 18px;
}

body[data-page="originals"] .purchase-info-copy p:last-child,
body[data-page="products"] .purchase-info-copy p:last-child {
    margin-bottom: 0;
}

body[data-page="originals"] .purchase-info-button-row,
body[data-page="products"] .purchase-info-button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

body[data-page="originals"] .purchase-info-button,
body[data-page="products"] .purchase-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

body[data-page="originals"] .purchase-info-button-primary,
body[data-page="products"] .purchase-info-button-primary {
    background: var(--purchase-primary);
    color: #ffffff;
    box-shadow: 0 7px 18px rgb(34 89 117 / 18%);
}

body[data-page="originals"] .purchase-info-button-primary:hover,
body[data-page="products"] .purchase-info-button-primary:hover {
    transform: translateY(-2px);
    background: var(--purchase-primary-hover);
}

body[data-page="originals"] .purchase-info-button-secondary,
body[data-page="products"] .purchase-info-button-secondary {
    background: #ffffff;
    border: 1px solid #aac3d1;
    color: var(--purchase-primary);
}

body[data-page="originals"] .purchase-info-button-secondary:hover,
body[data-page="products"] .purchase-info-button-secondary:hover {
    transform: translateY(-2px);
    background: #eef5f8;
    border-color: #8eafc0;
}

/* Products inventory */

body[data-page="products"] .products-status-message {
    max-width: 760px;
    margin: 28px auto 0;
    color: var(--purchase-muted);
}

body[data-page="products"] .products-status-error {
    padding: 14px 16px;
    border: 1px solid #d7a6a6;
    border-radius: 8px;
    background: #fff4f4;
    color: #8a2424;
}

body[data-page="products"] .products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 30px;
    text-align: left;
}

body[data-page="products"] .products-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--purchase-border);
    border-radius: 10px;
}

body[data-page="products"] .products-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 14px;
    background: #fafbfc;
    border-bottom: 1px solid var(--purchase-border);
}

body[data-page="products"] .products-image-link img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
}

body[data-page="products"] .products-card-content {
    padding: 18px;
}

body[data-page="products"] .products-card-content h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.28rem;
    font-weight: normal;
    line-height: 1.25;
}

body[data-page="products"] .products-card-content h3 a {
    color: var(--purchase-primary);
}

body[data-page="products"] .products-catalog-number {
    margin: 4px 0 14px;
    color: #777777;
    font-size: 0.86rem;
}

body[data-page="products"] .products-inventory {
    display: grid;
    gap: 12px;
}

body[data-page="products"] .products-inventory-row {
    display: grid;
    gap: 2px;
}

body[data-page="products"] .products-inventory-label {
    color: #555555;
    font-size: 0.88rem;
    line-height: 1.4;
}

body[data-page="products"] .products-inventory-count {
    color: #333333;
    font-size: 0.8rem;
}

body[data-page="products"] .products-inventory-count.is-low-stock {
    color: #c62828;
}

@media (max-width: 820px) {
    body[data-page="products"] .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body[data-page="originals"] .purchase-info-page,
    body[data-page="products"] .purchase-info-page {
        margin-top: 22px;
    }

    body[data-page="originals"] .purchase-info-section,
    body[data-page="products"] .purchase-info-section {
        padding: 40px 24px;
    }

    body[data-page="originals"] .purchase-info-button,
    body[data-page="products"] .purchase-info-button {
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 560px) {
    body[data-page="products"] .products-grid {
        grid-template-columns: 1fr;
    }
}