:root {
     color-scheme: light;
     --ink: #17332f;
     --muted: #66736f;
     --paper: #efefef;
     --panel: #ffffff;
     --line: #dedbd1;
     --accent: #0b6b53;
     --accent-strong: #064b3b;
     --shadow: 0 14px 40px rgba(23, 51, 47, 0.14);
 }

 .site-header {
     padding: clamp(28px, 7vw, 76px) clamp(18px, 5vw, 64px) clamp(18px, 4vw, 36px);
 }

 .intro {
     max-width: 980px;
     margin: 0 auto;
     display: grid;
     gap: 14px;
 }

 .brand {
     margin: 0;
     font-size: clamp(2rem, 8vw, 5.8rem);
     line-height: 0.95;
     letter-spacing: 0;
 }

 .intro p {
     max-width: 680px;
     margin: 0;
     color: var(--muted);
     font-size: clamp(1rem, 2vw, 1.2rem);
 }

 .gallery-wrap {
     padding: 0 clamp(12px, 3.5vw, 42px) clamp(42px, 7vw, 84px);
 }

 .gallery {
     max-width: 1360px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr;
     align-items: start;
     gap: clamp(12px, 2vw, 22px);
 }

 .painting {
     width: 100%;
     display: block;
     border: 1px solid var(--line);
     border-radius: 8px;
     background: var(--panel);
     box-shadow: 0 1px 0 rgba(23, 51, 47, 0.04);
     overflow: hidden;
 }

 .painting__open {
     width: 100%;
     padding: 0;
     display: block;
     border: 0;
     background: transparent;
     cursor: zoom-in;
     text-align: left;
 }

 .painting img {
     width: 100%;
     height: auto;
     display: block;
     background: #ece9df;
 }

 .painting__body {
     padding: 14px 14px 16px;
     display: grid;
     gap: 8px;
 }

 .painting__title {
     margin: 0;
     font-size: 1rem;
     line-height: 1.25;
     letter-spacing: 0;
 }

 .painting__description {
     margin: 0;
     color: var(--muted);
     font-size: 0.93rem;
 }

 .download-link {
     justify-self: start;
     min-height: 40px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     border: 1px solid var(--line);
     border-radius: 8px;
     background: #f7f5ee;
     color: var(--ink);
     font-size: 0.92rem;
     font-weight: 700;
     text-decoration: none;
 }

 .download-link:focus-visible,
 .painting__open:focus-visible,
 .lightbox__button:focus-visible,
 .lightbox__download:focus-visible {
     outline: 3px solid rgba(11, 107, 83, 0.32);
     outline-offset: 3px;
 }

 .lightbox {
     position: fixed;
     inset: 0;
     z-index: 20;
     display: none;
     background: rgba(12, 20, 18, 0.92);
     color: #fff;
 }

 .lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 9999;
    display: none;
    background: rgba(12, 20, 18, 0.92);
    color: #fff;
}

.lightbox.is-open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

 .lightbox.is-open {
     display: flex;
     flex-direction: column;
     height: 100dvh;
     max-height: 100dvh;
     overflow: hidden;
 }

 .lightbox__top,
 .lightbox__bottom {
     flex: 0 0 auto;
     padding: 12px max(14px, env(safe-area-inset-left)) 12px max(14px, env(safe-area-inset-right));
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .lightbox__top {
     justify-content: flex-end;
 }

 .lightbox__stage {
     flex: 1 1 auto;
     min-height: 0;
     max-height: calc(100dvh - var(--lightbox-chrome, 168px));
     display: grid;
     place-items: center;
     padding: 0 clamp(10px, 3vw, 28px);
     overflow: hidden;
 }

 .lightbox__image {
     max-width: 100%;
     max-height: calc(100dvh - var(--lightbox-chrome, 168px) - 2px);
     width: auto;
     height: auto;
     object-fit: contain;
     border-radius: 4px;
     box-shadow: var(--shadow);
 }

 .lightbox__bottom {
     justify-content: space-between;
     align-items: flex-end;
     gap: 18px;
     max-height: 38dvh;
     overflow: auto;
     overscroll-behavior: contain;
 }

 .lightbox__text {
     max-width: 780px;
     min-width: 0;
 }

 .lightbox__title {
     margin: 0 0 4px;
     font-size: clamp(1.05rem, 3vw, 1.55rem);
     line-height: 1.2;
     letter-spacing: 0;
     color: #efefef;
 }

 .lightbox__description {
     margin: 0;
     color: rgba(255, 255, 255, 0.74);
     font-size: 0.95rem;
 }

 .lightbox__actions {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .lightbox__button,
 .lightbox__download {
     min-width: 44px;
     min-height: 44px;
     display: inline-grid;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, 0.24);
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.08);
     color: #fff;
     font: inherit;
     text-decoration: none;
     cursor: pointer;
 }

 .lightbox__download {
     padding: 0 14px;
     font-weight: 700;
 }

 .lightbox__button svg,
 .download-link svg {
     width: 20px;
     height: 20px;
     display: block;
 }

 body.lightbox-open {
     overflow: hidden;
 }

 @media (min-width: 620px) {
     .gallery {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }

 @media (min-width: 980px) {
     .gallery {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }

 @media (min-width: 1280px) {
     .gallery {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 }

 @media (max-width: 640px) {
     .site-header {
         padding-top: 26px;
     }

     .painting__body {
         padding: 12px;
     }

     .lightbox__bottom {
         display: grid;
     }

     .lightbox__actions {
         width: 100%;
     }

     .lightbox__download {
         flex: 1;
     }
 }