/* Werkseiten unter works/. Generiert aus data/content.json.
   Gleiche Schriften und Farben wie Raster und CV. */

.work-page {
    background: #FAFAF8;
}

.work-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 5vh 8vw 3vh;
    border-bottom: 1px solid #E8E8E6;
}

.site-name {
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: var(--track-data);
    font-family: var(--font-data);
    text-transform: uppercase;
}

.site-name a {
    color: #C026D3;
    text-decoration: none;
}

.work-nav {
    display: flex;
    gap: 2rem;
}

.work-nav a {
    font-size: 0.75rem;
    font-weight: 400;
    font-family: var(--font-data);
    text-transform: uppercase;
    letter-spacing: var(--track-data);
    color: #555;
    text-decoration: none;
}

.work-nav a:hover {
    color: #000;
}

.work-main {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 6vh 8vw 10vh;
}

.work-main h1 {
    font-weight: var(--weight-title);
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    letter-spacing: var(--track-title);
    font-family: var(--font-data);
    color: var(--ink);
    line-height: 1.3;
    text-transform: uppercase;
}

.work-kicker {
    margin-top: 0.8rem;
    font-size: 0.8rem;
    font-family: var(--font-data);
    text-transform: uppercase;
    letter-spacing: var(--track-data);
    color: #555;
}

.work-summary {
    margin: 2rem 0 3rem;
    max-width: 44em;
    font-family: var(--font-text);
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Galerie: erstes Bild gross, danach zwei Spalten */
.work-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    margin-bottom: 4rem;
}

.work-figure {
    margin: 0;
}

.work-figure.is-lead {
    grid-column: 1 / -1;
}

.work-figure img {
    display: block;
    width: 100%;
    height: auto;
    background: #F0F0EE;
}

.work-figure.is-lead img {
    max-height: 80vh;
    object-fit: contain;
}

.work-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0;
    color: #555;
    font-family: var(--font-text);
}

.work-text,
.work-facts,
.work-shows {
    max-width: 44em;
    margin-bottom: 3rem;
}

.work-main h2 {
    font-size: 0.8rem;
    font-weight: 400;
    font-family: var(--font-data);
    text-transform: uppercase;
    letter-spacing: var(--track-data);
    color: #C026D3;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #000;
    margin-bottom: 1.2rem;
}

.work-text p {
    font-family: var(--font-text);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.work-facts dl {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.6rem 1.5rem;
}

.work-facts dt {
    font-size: 0.75rem;
    font-family: var(--font-data);
    text-transform: uppercase;
    letter-spacing: var(--track-data);
    color: #555;
    padding-top: 0.2rem;
}

.work-facts dd {
    font-family: var(--font-text);
    line-height: 1.6;
}

.work-shows ul {
    list-style: none;
}

.work-shows li {
    font-family: var(--font-text);
    line-height: 1.8;
}

.work-shows a,
.work-links a,
.work-pager a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #C026D3;
}

.work-shows a:hover,
.work-links a:hover,
.work-pager a:hover {
    color: #C026D3;
}

.work-links {
    margin-bottom: 3rem;
    font-size: 0.85rem;
    letter-spacing: var(--track-data);
    font-family: var(--font-data);
    text-transform: uppercase;
}

.work-pager {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid #E8E8E6;
    font-size: 0.8rem;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .work-header {
        padding: 4vh 6vw 2.5vh;
    }

    .work-nav {
        gap: 1.25rem;
    }

    .work-main {
        padding: 4vh 6vw 8vh;
    }

    .work-gallery {
        grid-template-columns: 1fr;
    }

    .work-facts dl {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .work-facts dd {
        margin-bottom: 0.7rem;
    }

    .work-pager {
        flex-direction: column;
    }
}