/* =========================================================
   BASIC
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
/*    background: #F4F0E9;*/
	background: #140f0b;
	
    color: #292725;
    font-family: "Newsreader", Georgia, serif;
    font-size: 21px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

button {
    font: inherit;
}


/* =========================================================
   GALLERY VIEWPORT

   IMPORTANT:
   This uses the original working exhibition system.

   The gallery is NOT a flex gallery.
   ========================================================= */

.gallery-container {
    position: relative;
}

.gallery-viewport {
    position: sticky;
    top: 0;

    width: 100%;

    /*
    Normally 75% of the browser height.

    The minimum prevents the entire exhibition from
    becoming ridiculously small in a shallow browser window.

    The maximum corresponds to the original 800px
    exhibition design height.
    */

    height: clamp(520px, 75vh, 800px);

    overflow-x: auto;
    overflow-y: hidden;

    cursor: grab;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    /*
    Normal mouse-wheel scrolling continues to move
    the page vertically.
    */

    overscroll-behavior-x: contain;
}

.gallery-viewport::-webkit-scrollbar {
    display: none;
}

.gallery-viewport.dragging {
    cursor: grabbing;

    user-select: none;
    -webkit-user-select: none;
}


/* =========================================================
   GALLERY TRACK

   JavaScript gives this the dimensions of the scaled
   7200 × 800 exhibition.
   ========================================================= */

.gallery-track {
    position: relative;
}


/* =========================================================
   GALLERY STAGE

   Fixed internal design coordinate system.
   ========================================================= */

.gallery-stage {
    position: absolute;

    left: 0;
    top: 0;

    width: 7202px;
    height: 800px;

    transform-origin: top left;
	
	background-color: #41332a;

    /*
    This is the original tiled exhibition wall.
    */

    background-image: url("../images/gallery_wall.jpg");

    background-size: auto 800px;
    background-position: left top;
    background-repeat: repeat-x;
}


/****************************************************************************************************
* SPOTLIGHTS
****************************************************************************************************/

.gallery-lighting {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 800px;
    pointer-events: none;
    z-index: 1;
}

.spotlight {
    position: absolute;
    top: 0;
    height: 800px;
    width: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}


/* =========================================================
   ARTWORKS
   ========================================================= */

.artwork {
    position: absolute;
	z-index: 2;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    color: inherit;
    text-decoration: none;

    cursor: pointer;

    -webkit-user-drag: none;
}


/*
The artwork-frame itself is exactly the size
of the painting.

The shadow may extend outside it.
*/

.artwork-frame {
    position: relative;

    display: block;

    width: 100%;

    overflow: visible;

    isolation: isolate;

    /*
    Controls the physical size of the entire shadow.

    All seven shadow pieces use the same scale,
    so their proportions and joins remain exact.
    */

    --shadow-scale: 0.10;
}


/* =========================================================
   SHADOW
   ========================================================= */

/*
Original source geometry:

PNG:
2200 × 2615

Painting inside source:
left:   425
top:      0
right:  425
bottom: 528

Slice boundaries:

horizontal:
830 | 540 | 830

vertical:
1260 | 425 | 930


At --shadow-scale: 0.10:

425  -> 42.5px
405  -> 40.5px
402  -> 40.2px
528  -> 52.8px

830  -> 83px
1260 -> 126px
930  -> 93px
*/


.artwork-shadow {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: visible;

    pointer-events: none;
}


.shadow-piece {
    position: absolute;

    display: block;

    max-width: none;

    margin: 0;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/* ---------------------------------------------------------
   TOP LEFT CORNER

   830 × 1260

   425px extends left of painting.
   Remaining 405px lies underneath painting.
   --------------------------------------------------------- */

.shadow-tl {
    left:
        calc(-425px * var(--shadow-scale));

    top: 0;

    width:
        calc(830px * var(--shadow-scale));

    height:
        calc(1260px * var(--shadow-scale));
}


/* ---------------------------------------------------------
   TOP RIGHT CORNER
   --------------------------------------------------------- */

.shadow-tr {
    right:
        calc(-425px * var(--shadow-scale));

    top: 0;

    width:
        calc(830px * var(--shadow-scale));

    height:
        calc(1260px * var(--shadow-scale));
}


/* ---------------------------------------------------------
   LEFT SIDE

   Source image: 830 × 1 px

   Width is scaled normally.
   Height is stretched to fill the space between
   the top-left and bottom-left corners.
   --------------------------------------------------------- */

.shadow-l {
    left:
        calc(-425px * var(--shadow-scale));

    top:
        calc(1260px * var(--shadow-scale));

    width:
        calc(830px * var(--shadow-scale));

    height:
        calc(
            100%
            - (1662px * var(--shadow-scale))
        );
}


/* ---------------------------------------------------------
   RIGHT SIDE
   --------------------------------------------------------- */

.shadow-r {
    right:
        calc(-425px * var(--shadow-scale));

    top:
        calc(1260px * var(--shadow-scale));

    width:
        calc(830px * var(--shadow-scale));

    height:
        calc(
            100%
            - (1662px * var(--shadow-scale))
        );
}

/* ---------------------------------------------------------
   BOTTOM LEFT CORNER

   830 × 930

   402px lies underneath painting.
   528px extends below painting.
   --------------------------------------------------------- */

.shadow-bl {
    left:
        calc(-425px * var(--shadow-scale));

    bottom:
        calc(-528px * var(--shadow-scale));

    width:
        calc(830px * var(--shadow-scale));

    height:
        calc(930px * var(--shadow-scale));
}


/* ---------------------------------------------------------
   BOTTOM RIGHT CORNER
   --------------------------------------------------------- */

.shadow-br {
    right:
        calc(-425px * var(--shadow-scale));

    bottom:
        calc(-528px * var(--shadow-scale));

    width:
        calc(830px * var(--shadow-scale));

    height:
        calc(930px * var(--shadow-scale));
}


/* ---------------------------------------------------------
   BOTTOM CENTRE

   Source image: 1 × 930 px

   Height is scaled normally.
   Width is stretched between the two bottom corners.
   --------------------------------------------------------- */

.shadow-b {
    left:
        calc(405px * var(--shadow-scale));

    bottom:
        calc(-528px * var(--shadow-scale));

    width:
        calc(
            100%
            - (810px * var(--shadow-scale))
        );

    height:
        calc(930px * var(--shadow-scale));
}


/* =========================================================
   PAINTING IMAGE
   ========================================================= */

.artwork-image {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* =========================================================
   ARTWORK NUMBERS
   ========================================================= */

.artwork-number {
    position: absolute;

    left: calc(100% + 15px);
    bottom: 0px;

    font-family: "DM Mono", monospace;
    font-size: 15px;
    font-weight: 340;
    line-height: 1;

    color: #b3974c;

    white-space: nowrap;
}

.artwork.active .artwork-number {
    color: #d1c5a2;
}


/* =========================================================
   ARTWORK POSITIONS

   Pixel Width = Artwork Width (in cm) x 2.4 + 8
   ========================================================= */

.artwork-00 {
    left: 195px;
    top: 265px;
    width: 250px;
}
.spotlight-00 {
    left: 113px;
}

.artwork-01 {
    left: 640px;
    top: 130px;
    width: 368px;
}
.spotlight-01 {
    left: 618px;
}


.artwork-02 {
    left: 1210px;
    top: 250px;
    width: 200px;
}
.spotlight-02 {
    left: 1105px;
}


.artwork-03 {
    left: 1624px;
    top: 164px;
    width: 104px;
}
.spotlight-03 {
    left: 1470px;
}


.artwork-04 {
    left: 1943px;
    top: 227px;
    width: 368px;
}
.spotlight-04 {
    left: 1920px;
}


.artwork-05 {
    left: 2573px;
    top: 190px;
    width: 440px;
}
.spotlight-05 {
    left: 2588px;
}


.artwork-06 {
    left: 3123px;
    top: 238px;
    width: 152px;
}
.spotlight-06 {
    left: 2993px;
}


.artwork-07 {
    left: 3385px;
    top: 286px;
    width: 210px;
}
.spotlight-07 {
    left: 3283px;
}


.artwork-08 {
    left: 3965px;
    top: 267px;
    width: 170px;
}
.spotlight-08 {
    left: 3845px;
}


.artwork-09 {
    left: 4505px;
    top: 130px;
    width: 224px;
}
.spotlight-09 {
    left: 4411px;
}


.artwork-10 {
    left: 4894px;
    top: 286px;
    width: 248px;
}
.spotlight-10 {
    left: 4812px;
}


.artwork-11 {
    left: 5305px;
    top: 225px;
    width: 237px;
}
.spotlight-11 {
    left: 5218px;
}


.artwork-12 {
    left: 5841px;
    top: 130px;
    width: 368px;
}
.spotlight-12 {
    left: 5818px;
}


/* =========================================================
   GALLERY END / PLINTH
   ========================================================= */

.gallery-end {
    position: absolute;

    left: 6451px;
    top: 0;

    height: 800px;
}

.gallery-end img {
    display: block;

    width: auto;
    height: 800px;

    max-width: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;
}

.spotlight-13 {
    left: 6551px;
}

.qa-hotspot {
    position: absolute;

    left: 16.5%;
    top: 53.5%;
    width: 11%;
    height: 12%;

    display: block;

    cursor: pointer;
}

.guestbook-hotspot {
    position: absolute;

    left: 36.2%;
    top: 59%;
    width: 25.6%;
    height: 6.7%;

    display: block;

    cursor: pointer;
}


/* =========================================================
   STORY
   ========================================================= */

.story-wrapper {
    padding:
        clamp(35px, 4vw, 55px)
        0
        100px;

    background: #F4F0E9;
}

.story {
    position: relative;

    width: min(86%, 760px);

    margin: 0 auto;
}


/* =========================================================
   LANGUAGE CONTROL
   ========================================================= */

.language-switch {
    width: clamp(24px, 2.5vw, 30px);
    height: clamp(24px, 2.5vw, 30px);

    padding: 0;
    margin: 0;

    border: 0;
    background: none;

    cursor: pointer;

    display: block;
    flex: 0 0 auto;
}

.language-switch img {
    display: block;

    width: 100%;
    height: 100%;
}

/* =========================================================
   CHAPTER HEADER
   ========================================================= */

/* Introduction link above Chapter 01a */

.introduction-link {
    position: absolute;

    left: 0;
    top: -33px;

    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 10px 10px 10px 0;

    border: 0;
    background: transparent;

    color: #d1c5a2;

    font-family: "DM Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .09em;

    cursor: pointer;
}

.introduction-link[hidden] {
    display: none;
}

.introduction-arrow {
    position: relative;
    top: 2px;

    margin-right: 8px;

    color: #d1c5a2;

    font-family: "Newsreader", serif;
    font-size: 23px;
    line-height: 1;

    letter-spacing: 0;

    transition: transform .18s ease;
}

.introduction-link:hover .introduction-arrow {
    transform: translateX(-4px);
	color: #b3974c;
}

.introduction-link[hidden] {
    display: none;
}

.introduction-arrow {
    font-size: 19px;
    letter-spacing: 0;
    line-height: 1;
}

.introduction-link:hover {
    color: #b3974c;
}

.chapter-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.chapter-header {
    margin-bottom: 22px;
}


.chapter-top-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-bottom: 18px;
}


.chapter-number {
    margin: 0;

    color: #d1c5a2;

    font-family: "DM Mono", monospace;

    font-size: clamp(30px, 3.55vw, 40px);
    font-weight: 340;
    line-height: 1.2;
}

.chapter-title {
    margin: 0 0 0.7em;

    color: #B3974C;

    font-size: clamp(42px, 5vw, 56px);
    font-weight: 420;

    line-height: 1.04;

    letter-spacing: -.02em;
}


/* =========================================================
   CHAPTER TEXT
   ========================================================= */

.chapter-content {
    /*
    Prevent chapter navigation from jumping upwards while
    another language/chapter is being fetched.
    */

    min-height: 320px;
    color: #312c29;
    font-size: 21px;
    line-height: 1.52;
}

.chapter-content > :first-child {
    margin-top: 0;
}

.chapter-content p {
    margin: 0 0 1.15em;
}

.chapter-content .subtitle,
.chapter-content > p:first-child.subtitle {
    margin-bottom: 2em;
    color: #1e1a18;
    font-size: 24px;
    font-weight: 540;
    line-height: 1.4;
}

.chapter-content .subtitle p {
    margin: 0 0 1.15em;
}

.chapter-content .subtitle p:last-child {
    margin-bottom: 0;
}

.chapter-content .subheader {
    margin: 0 0 1.15em;
    color: #191411;
    font-size: 24px;
    font-weight: 540;
    line-height: 1.28;
}

.chapter-content p + .subheader {
    margin-top: 1.7em;
}

.chapter-content h2 {
    margin: 1.8em 0 .80em;
    color: #B3974C;
    font-size: 30px;
    font-weight: 540;
    line-height: 1.2;
}

.chapter-content h2 + .subheader {
    margin-top: 1.1em;
}

.chapter-content blockquote {
    margin: 2em 0;
    padding-left: 25px;
    border-left: 3px solid rgba(149, 125, 63, .25);
	color: #957D3F;
	font-size: 22px;
	font-style: italic;
	font-weight: 480;
}

.chapter-content em {
    font-style: italic;
}

/* Images*/

.chapter-content .chapter-image {
    margin: 2.5em 0;
}

.chapter-content .chapter-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 2px;
}

.chapter-content .chapter-image figcaption {
    margin-top: .9em;
    color: #B3974C;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
}


/* =========================================================
   CHAPTER PREVIOUS / NEXT
   ========================================================= */

.chapter-navigation {
    display: flex;

    justify-content: space-between;

    gap: 30px;

    margin-top: 80px;
    padding-top: 28px;

    border-top:
        1px solid rgba(41, 39, 37, .15);
}

.chapter-nav-button {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;
}

.chapter-nav-button > span:not(.chapter-nav-arrow) {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.chapter-nav-next {
    justify-content: flex-end;

    text-align: right;
}

.chapter-nav-button small {
    display: block;

    margin-bottom: 4px;

    font-family: "DM Mono", monospace;
    font-weight: 300;

    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: .1em;

    opacity: .48;
}

.chapter-nav-button strong {
    display: block;

    width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 1em;
    font-weight: 400;

    line-height: 1.25;
}

@media (hover: hover) and (pointer: fine) {
    .chapter-nav-button:hover:not(:focus) strong {
        text-decoration: underline;
    }
}

.chapter-nav-arrow {
    flex: 0 0 auto;

    font-size: 24px;
    line-height: 1;
}

.chapter-nav-button:disabled {
    visibility: hidden;

    pointer-events: none;
}

/* =========================================================
   GALLERY FULLSCREEN
   ========================================================= */

.gallery-fullscreen {
    position: absolute;

    left: 50%;
    top: 94.7%;

    transform: translate(-50%, -50%);

    z-index: 50;

    width: clamp(34px, 4.5vw, 44px);
    height: clamp(34px, 4.5vw, 44px);

    padding: 0;
    border: 0;

	background: transparent;
	
    cursor: pointer;

}


/* Fullscreen icons */

.gallery-fullscreen img {
    width: 100%;
    height: 100%;
}

.gallery-fullscreen .fullscreen-expand {
    display: block;
}

.gallery-fullscreen .fullscreen-collapse {
    display: none;
}


/*
Fullscreen gallery mode
*/

body.gallery-fullscreen-active {
    overflow: hidden;
}

body.gallery-fullscreen-active .artwork:not(.no-zoom) {
    cursor: zoom-in;
}

body.gallery-fullscreen-active .artwork.no-zoom {
    cursor: grab;
}

body.gallery-fullscreen-active .artwork.no-zoom:active {
    cursor: grabbing;
}

body.gallery-fullscreen-active .gallery-container {
    height: 100svh;
}

body.gallery-fullscreen-active .gallery-viewport {
    height: 100svh;
    max-height: none;
}

body.gallery-fullscreen-active .story-wrapper {
    display: none;
}

body.gallery-fullscreen-active .gallery-fullscreen .fullscreen-expand {
    display: none;
}

body.gallery-fullscreen-active .gallery-fullscreen .fullscreen-collapse {
    display: block;
}

/* =========================================================
   FULLSCREEN LARGE ARTWORK
   ========================================================= */

.artwork-lightbox {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;
    justify-content: center;

    background: #241713;

    cursor: zoom-out;
}

.artwork-lightbox.open {
    display: flex;
}

.artwork-lightbox-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 90vw;
    max-height: 90vh;

    object-fit: contain;

    box-shadow: none;
	
	cursor: zoom-out;
}


/* =========================================================
   PANELS
   ========================================================= */

.panel.light {
	background: #f9f6f1;
	border: solid 1px #dfd8cd;
	border-radius: 20px;
	padding: 25px 30px;
	width: 100%;
}


/* =========================================================
   GUEST BOOK
   ========================================================= */

.guestbook-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7f5f1;

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

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.guestbook-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.guestbook-content {
    width: min(620px, calc(100% - 60px));

    text-align: center;

    color: #312c29;
}

.guestbook-content h2 {
    margin: 0 0 1.1em;

    color: #b3974c;

    font-size: clamp(38px, 5vw, 52px);
    font-weight: 420;
    line-height: 1.08;

    letter-spacing: -.02em;
}

.guestbook-content p {
    margin: 0;

    font-size: 21px;
    line-height: 1.52;
}

.guestbook-signature {
    margin-top: 1.5em !important;
}

.guestbook-contact-intro {
    margin-top: 90px !important;
}

.guestbook-email {
    display: inline-block;

    margin-top: 2em;
    padding: 12px 20px;

    border: 1px solid #b3974c;
	border-radius: 3px;

    color: #312c29;

    font-size: 18px;
    line-height: 1.2;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.guestbook-email:hover {
    background: #b3974c;
    color: #f7f5f1;
}

.guestbook-close {
    position: absolute;

    top: 28px;
    right: 32px;

    width: 60px;
    height: 60px;

    padding: 0;
    border: 0;
    background: transparent;

    color: #312c29;

    font-family: inherit;
    font-size: 60px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
}

@media (max-width: 600px) {

    .guestbook-content {
        width: calc(100% - 44px);
    }

    .guestbook-content h2 {
        font-size: 38px;
    }

    .guestbook-content p {
        font-size: 20px;
    }

    .guestbook-email {
        font-size: 17px;
    }

    .guestbook-close {
        top: 18px;
        right: 18px;
    }
}





/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    body {
        font-size: 20px;
    }

    .gallery-viewport {
        height: clamp(500px, 72vh, 760px);
    }

    .story {
        width: min(86%, 720px);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    /*
    Mobile shows the same full gallery as desktop,
    simply through a narrower viewport. The stage keeps
    its original proportions and is scaled by resizeGallery().
    */

    .gallery-viewport {
        height: 69svh;

        overflow-x: auto;
        overflow-y: hidden;

        cursor: grab;

        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    /* -----------------------------------------------------
       Story
       ----------------------------------------------------- */

    .story-wrapper {
        padding:
            38px
            0
            70px;
		background: #F4F0E9;
    }

    .story {
        width: calc(100% - 40px);
    }


    /* Language */

    .language-control {
        top: 1px;
    }

    .language-current {
        width: 28px;
        height: 19px;
    }


    /* Header */

	.chapter-title {
	    font-size: clamp(34px, 9.5vw, 44px);
	    line-height: 1.02;
	}
	
    /* Content */

    .chapter-content {
        min-height: 260px;

        font-size: 20px;
        line-height: 1.48;
    }

    .chapter-content .subtitle {
		font-size: 22px;
        line-height: 1.26;
    }
	
	.chapter-content .subheader {
    	font-size: 22px;
    	line-height: 1.26;
	}

    .chapter-content h2 {
        font-size: 28px;
    }


    /* Chapter navigation */

    .chapter-navigation {
        gap: 20px;

        margin-top: 60px;
    }

    .chapter-nav-button strong {
    	font-size: .88em;
	}

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

	.chapter-title {
    font-size: 34px;
	}
	
    .story {
        width: calc(100% - 32px);
    }

    .language-popup {
        width: 155px;
    }

}

/* Subtle wooden sides on every painting (01–12).
   No image rotation: only the side surfaces change with viewpoint.
   00 is a photograph, not a framed painting. */
.artwork:not(.artwork-00) .artwork-frame::before,
.artwork:not(.artwork-00) .artwork-frame::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}
/* Painting to the right of the viewer: show its left-hand side. */
.artwork:not(.artwork-00) .artwork-frame::before {
    right: 100%;
    width: var(--frame-left-depth, 0px);
    clip-path: polygon(100% 0%, 0% 3px, 0% calc(100% - 3px), 100% 100%);
    background: linear-gradient(90deg, #322119, #59402e 55%, #75553d);
}
/* Painting to the left of the viewer: show its right-hand side. */
.artwork:not(.artwork-00) .artwork-frame::after {
    left: 100%;
    width: var(--frame-right-depth, 0px);
    clip-path: polygon(0% 0%, 100% 3px, 100% calc(100% - 3px), 0% 100%);
    background: linear-gradient(90deg, #75553d 0%, #59402e 45%, #322119 100%);
}


/* V8: V7 fixed geometry; improved physical materials and softer shadow. */
.artwork-03.artwork-glass { height:418px; overflow:visible; }
.artwork-03 .glass-v12 {
    position:absolute;
    width:300px;
    height:470px;
    top:-25px;
    left:calc(50% - 150px);
    pointer-events:none;
}
.artwork-03.artwork-glass .artwork-number {
    left:50%; bottom:-48px; transform:translateX(-50%); z-index:15;
}


/* Fullscreen artwork: discreet loading indicator */
.artwork-lightbox.loading .artwork-lightbox-image,
.artwork-lightbox.load-error .artwork-lightbox-image {
    visibility: hidden;
}

.artwork-lightbox.loading::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(179, 151, 76, 0.22);
    border-top-color: #b3974c;
    border-radius: 50%;
    animation: artwork-loading-spin 0.8s linear infinite;
    pointer-events: none;
}

.artwork-lightbox.load-error::after {
    content: "Unable to load artwork";
    position: absolute;
    color: #b3974c;
    font-size: 16px;
    pointer-events: none;
}

@keyframes artwork-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .artwork-lightbox.loading::after {
        animation: none;
    }
}