html:has(.project-gallery[open]) {
    overflow: hidden;
}

.original-project-grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 3.5rem);
}

.original-project-card { min-width: 0; }

.project-gallery-trigger { display: block; }

.original-project-cover {
    display: grid;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e8e8e5;
}

.original-project-cover img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: top;
    filter: grayscale(1);
    transition: filter 450ms, transform 600ms;
}

.project-gallery-trigger:hover img,
.project-gallery-trigger:focus-visible img { filter: none; transform: scale(1.035); }

.original-project-label {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #ddd;
}

.original-project-label > div { flex: 1 1 16rem; }
.original-project-label p { color: #525252; font-size: 0.9rem; }
.original-project-label .original-project-context, [data-gallery-category], .case-context {
    color: #525252;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.original-project-cta {
    border: 1px solid #bbb;
    border-radius: 2rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.project-gallery-trigger:hover .original-project-cta { background: #0f0f0f; color: #f4f4f2; }

.original-project-diagram {
    display: grid;
    align-content: center;
    gap: 0.65rem;
    width: 100%;
    height: 100%;
    padding: clamp(0.75rem, 3vw, 2rem);
    background: #202120;
    color: #f4f4f2;
}

.original-project-diagram small { text-transform: uppercase; letter-spacing: 0.15em; }
.original-project-diagram strong { font: italic clamp(1.3rem, 3vw, 2.4rem) 'Playfair Display', Georgia, serif; }
.original-project-diagram ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.original-project-diagram li { padding: 0.4rem; border: 1px solid #777; font-size: 0.75rem; overflow-wrap: anywhere; }

.original-archive li { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; border-top: 1px solid #ddd; padding: 0.85rem 0; font-size: 0.9rem; }
.original-archive strong { flex: 0 1 12rem; }
.original-archive span { flex: 1 1 14rem; color: #525252; }
.original-archive a, [data-case-live] { text-decoration: underline; text-underline-offset: 0.2em; }

.project-gallery-trigger:focus-visible,
.project-gallery-button:focus-visible {
    outline: 2px solid #0f0f0f;
    outline-offset: 4px;
}

.project-gallery {
    position: fixed;
    inset: 0;
    width: min(66rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    overflow: auto;
    overscroll-behavior: contain;
    background: #f4f4f2;
    color: #0f0f0f;
    font: 1rem 'Manrope', sans-serif;
    cursor: auto;
}

.project-gallery::backdrop {
    background: rgb(15 15 15 / 82%);
}

.project-gallery-content {
    padding: clamp(0.75rem, 2.8vw, 1.5rem);
}

.project-gallery-header,
.project-gallery-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.project-gallery-header h2 {
    margin: 0;
    font: italic clamp(1.4rem, 4vw, 2.2rem) 'Playfair Display', Georgia, serif;
}

.project-gallery-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f4f2;
    padding-block: 0.4rem;
}

.project-gallery-layout { display: grid; gap: 1rem; }
.project-gallery-layout > div { min-width: 0; }
.project-gallery-details { padding-top: 0.75rem; border-top: 1px solid #d0d0cc; font-size: 0.9rem; line-height: 1.55; }
.project-gallery-details p { margin-bottom: 0.6rem; }
.project-gallery-details h3 { font-weight: 700; margin-top: 0.75rem; }
.project-gallery-details ul { list-style: disc; padding-left: 1.1rem; }

.project-gallery figure {
    margin: 0.75rem 0;
}

.project-gallery-image {
    display: grid;
    place-items: center;
    height: min(58dvh, 37rem);
    background: #e5e5e3;
}

.project-gallery-image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.project-gallery figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.project-gallery figcaption span { display: block; color: #525252; }

.project-gallery-nav {
    justify-content: center;
    font-size: 0.875rem;
}

.project-gallery-nav[hidden] { display: none; }

.project-gallery-button {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid #a3a3a3;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.25rem;
    cursor: pointer;
}

.project-gallery-button:hover {
    background: #0f0f0f;
    color: #f4f4f2;
}

@media (min-width: 768px) {
    .original-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .original-project-wide { grid-column: 1 / -1; }
    .original-project-wide .original-project-cover { aspect-ratio: 2; max-height: 72vh; }
    .project-gallery-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.5rem; }
    .project-gallery-details { border-top: 0; border-left: 1px solid #d0d0cc; padding-left: 1.25rem; }
}

@media (max-width: 767px) {
    .project-gallery-image { height: min(40dvh, 58vw, 21rem); }
}

@media (prefers-reduced-motion: reduce) {
    .original-project-cover img { transition: none; }
    .project-gallery-trigger:hover img, .project-gallery-trigger:focus-visible img { transform: none; }
}