/*
Theme Name: Peter Fougere
Theme URI:
Description: Minimalist black and white portfolio theme for Peter Fougere.
Author: Peter Fougere
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Private
*/

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #fff;
    color: #000;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

/* =====================================================
   NAV
   ===================================================== */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 28px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.3s ease, padding 0.3s ease;
}

/* The hero's own gradient darkens the bottom for the title and leaves the top
   at full brightness, so white nav text disappears over any pale image. This
   scrim travels with the nav instead, protecting it on every page. It sits
   behind the links via z-index and gives way to the solid scrolled state. */
.site-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.42) 60%,
        transparent 100%
    );
    transition: opacity 0.3s ease;
}

.site-nav.scrolled::before {
    opacity: 0;
}

.site-nav.scrolled {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 18px 56px;
    border-bottom: 1px solid #eee;
}

.nav-logo {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    transition: color 0.3s, text-shadow 0.3s;
}

.site-nav.scrolled .nav-logo {
    color: #000;
    text-shadow: none;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 36px;
    align-items: center;
}

.nav-links a {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    transition: color 0.3s, opacity 0.2s, text-shadow 0.3s;
    opacity: 1;
}

.site-nav.scrolled .nav-links a {
    color: #000;
    text-shadow: none;
}

.nav-links a:hover {
    opacity: 1;
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.hero-slides {
    position: absolute;
    inset: 0;
    background-color: #111;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}

.hero-slide.is-active {
    opacity: 1;
}

/* Painted after the slides, so it sits over whichever one is showing. */
.hero-slides::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        transparent 100%
    );
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 0 56px 64px;
    color: #fff;
    max-width: 700px;
}

.hero-title {
    font-size: clamp(42px, 7vw, 88px);
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.05;
    margin-bottom: 20px;
}

.hero-blurb {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.7;
    opacity: 0.75;
    max-width: 440px;
}

.hero-scroll {
    position: absolute;
    bottom: 40px;
    right: 56px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.hero-scroll-line {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.3);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 0.8; transform: scaleY(0.7); }
}

/* =====================================================
   SHARED SECTION STYLES
   ===================================================== */
.section-eyebrow {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 40px;
    display: block;
}

/* =====================================================
   COLLECTIONS
   ===================================================== */
.collections-section {
    padding: 120px 56px;
    background: #fff;
}

.collections-header {
    margin-bottom: 56px;
}

.collections-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 300;
    letter-spacing: 0.03em;
    color: #000;
}

.collections-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    cursor: grab;
    user-select: none;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
}

.collections-row:active {
    cursor: grabbing;
}

.collections-row::-webkit-scrollbar {
    height: 4px;
}

.collections-row::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.collections-row::-webkit-scrollbar-thumb {
    background: #ccc;
}

.collection-card {
    flex: 0 0 320px;
    aspect-ratio: 2 / 3;
    position: relative;
    overflow: hidden;
    display: block;
    background: #1a1a1a;
}

.collection-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.5s ease;
}

.collection-card:hover .collection-card-img {
    transform: scale(1.05);
    filter: grayscale(80%);
}

.collection-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.1) 45%,
        transparent 70%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    transition: background 0.4s;
}

.collection-card:hover .collection-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.2) 45%,
        transparent 70%
    );
}

.card-name {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.card-count {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    letter-spacing: 0.15em;
}

.card-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s, transform 0.3s;
}

.card-arrow svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.5;
}

.collection-card:hover .card-arrow {
    opacity: 1;
    transform: translateY(0);
}

/* Empty collections state */
.collections-empty {
    padding: 80px 0;
    color: #ccc;
    font-size: 13px;
    letter-spacing: 0.1em;
}

/* =====================================================
   CONTACT
   ===================================================== */
.contact-section {
    position: relative;
    padding: 120px 56px;
    background: #000;
    color: #fff;
    overflow: hidden;
}

/* Backdrop photo. Heavily dimmed - it is atmosphere behind a form, so
   legibility of the inputs wins over fidelity of the image. */
.contact-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    opacity: 0.44;
    filter: grayscale(100%) contrast(1.05) brightness(1.15);
    pointer-events: none;
}

/* Bottom-weighted scrim so the lower half of the form stays readable
   against whatever falls behind it. */
.contact-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.6) 100%);
}

.contact-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
}

.about-body {
    color: #c9c9c9;
    font-size: 14px;
    line-height: 1.75;
    max-width: 52ch;
}

.about-body p + p {
    margin-top: 16px;
}

/* The rest of the site sits on flat black, so its greys are tuned dark. Over
   a photo they disappear - these are lifted for this section only. */
.contact-section .section-eyebrow {
    color: #b0b0b0;
}

.contact-section .form-field label {
    color: #a0a0a0;
}

.contact-section .form-field input,
.contact-section .form-field textarea {
    border-bottom-color: #5c5c5c;
}

.contact-section .form-field input::placeholder,
.contact-section .form-field textarea::placeholder {
    color: #909090;
}

.contact-title {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 300;
    letter-spacing: 0.03em;
    margin-bottom: 40px;
    line-height: 1.1;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-field label {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #555;
}

.form-field input,
.form-field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #222;
    color: #fff;
    font-size: 15px;
    padding: 10px 0;
    outline: none;
    font-family: inherit;
    transition: border-color 0.25s;
    width: 100%;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #333;
}

.form-field input:focus,
.form-field textarea:focus {
    border-bottom-color: #fff;
}

.form-field textarea {
    resize: none;
    height: 130px;
    line-height: 1.7;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 12px;
}

.form-submit {
    background: #fff;
    color: #000;
    border: none;
    padding: 14px 48px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.25s, color 0.25s;
}

.form-submit:hover {
    background: #e0e0e0;
}

.form-submit:active {
    background: #ccc;
}

.form-message {
    font-size: 12px;
    letter-spacing: 0.1em;
    padding: 16px 20px;
    border: 1px solid #222;
}

.form-message.success {
    border-color: #fff;
    color: #fff;
}

.form-message.error {
    border-color: #555;
    color: #999;
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
    background: #000;
    border-top: 1px solid #222;
    padding: 28px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* #333 on black is 1.66:1 - roughly a quarter of the 4.5:1 WCAG wants for
   text this size. These match the greys already used in the About and
   Exhibitions sections. */
.footer-copy {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #8a8a8a;   /* 6.1:1 */
}

.footer-links {
    display: flex;
    gap: 28px;
    list-style: none;
}

.footer-links a {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9a9a9a;   /* 7.5:1 - a touch brighter than the copyright, since
                         these are interactive */
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #fff;
}

/* =====================================================
   GALLERY VIEWER (single work)
   ===================================================== */
.gallery-viewer {
    background: #000;
    color: #fff;
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 60px;
}

.viewer-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 56px;
    margin-bottom: 48px;
}

.viewer-meta {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.collection-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.collection-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: #999;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 0 26px 0 0;
    cursor: pointer;
    outline: none;
    transition: color 0.25s;
}

.collection-select:hover,
.collection-select:focus {
    color: #fff;
}

.collection-select option {
    background: #000;
    color: #fff;
    text-transform: none;
    letter-spacing: normal;
}

.select-caret {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    stroke: #999;
    fill: none;
    stroke-width: 1.5;
    pointer-events: none;
}

.piece-name {
    font-size: clamp(24px, 3.2vw, 40px);
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.15;
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.piece-year {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #666;
}

.viewer-count {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: #555;
    white-space: nowrap;
    padding-bottom: 4px;
}

.viewer-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 0 56px;
}

.viewer-arrow {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s, background 0.25s, transform 0.2s;
}

.viewer-arrow svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.5;
}

.viewer-arrow:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.viewer-arrow:active {
    transform: scale(0.94);
}

.viewer-arrow.is-disabled {
    opacity: 0.15;
    pointer-events: none;
}

/* Height is fixed rather than driven by the image so that sliding between a
   portrait and a landscape piece doesn't make the page jump. overflow clips
   the outgoing slide at the frame edge. */
.viewer-image-wrap {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
    max-width: 900px;
    height: 68vh;
    overflow: hidden;
}

.viewer-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
}

.viewer-slide.is-animating {
    transition: transform 0.52s cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 0.52s ease;
}

.viewer-image-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .viewer-slide.is-animating,
    .viewer-pair.is-animating {
        transition: opacity 0.2s ease;
        transform: none !important;
    }
}

.viewer-strip-wrap {
    margin-top: 56px;
    padding: 0 56px;
}

.viewer-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: #333 #111;
}

.viewer-strip:active {
    cursor: grabbing;
}

.viewer-strip::-webkit-scrollbar {
    height: 4px;
}

.viewer-strip::-webkit-scrollbar-track {
    background: #111;
}

.viewer-strip::-webkit-scrollbar-thumb {
    background: #333;
}

.strip-item {
    position: relative;
    flex: 0 0 88px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
}

.strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 0.35s, opacity 0.35s;
}

.strip-item:hover img {
    filter: grayscale(40%);
    opacity: 0.85;
}

.strip-item.active img {
    filter: grayscale(0%);
    opacity: 1;
}

.strip-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transition: transform 0.3s;
}

.strip-item.active::after {
    transform: scaleX(1);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
/* Two columns need real width. Below this the form fields get too narrow to
   type in comfortably, so stack before that happens. */
@media (max-width: 1100px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 72px;
        max-width: 620px;
    }

    .about-body {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .site-nav,
    .site-nav.scrolled {
        padding: 20px 28px;
    }

    .hero-content {
        padding: 0 28px 52px;
    }

    .hero-scroll {
        right: 28px;
    }

    .collections-section {
        padding: 80px 28px;
    }

    .collection-card {
        flex: 0 0 260px;
    }

    .contact-section {
        padding: 80px 28px;
    }

    .site-footer {
        padding: 24px 28px;
    }

    .viewer-top,
    .viewer-stage,
    .viewer-strip-wrap {
        padding-left: 28px;
        padding-right: 28px;
    }

    .viewer-stage {
        gap: 16px;
    }

    .viewer-arrow {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: 38px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .collection-card {
        flex: 0 0 220px;
    }

    .hero-scroll {
        display: none;
    }

    .gallery-viewer {
        padding-top: 110px;
    }

    .viewer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .viewer-count {
        padding-bottom: 0;
    }

    .viewer-arrow {
        width: 36px;
        height: 36px;
    }

    .viewer-arrow svg {
        width: 14px;
        height: 14px;
    }

    .viewer-image-wrap {
        height: 50vh;
    }

    .strip-item {
        flex: 0 0 68px;
    }

    .site-footer {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* =====================================================
   LAYERS  (sliding-sheet piece)
   ===================================================== */
.layers-page {
    padding: 140px 56px 100px;
    background: #000;
    color: #fff;
    min-height: 100vh;
}

.layers-head {
    max-width: 640px;
    margin-bottom: 56px;
}

.layers-title {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.05;
    margin-bottom: 24px;
}

.layers-intro {
    color: #b4b4b4;
    font-size: 14px;
    line-height: 1.75;
}

.layers-wrap {
    max-width: 1280px;
}

/* The stage is the lightbox. Aspect is fixed so the sheet proportions stay
   predictable as the window changes. */
.layers-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0a0a0a;
    overflow: hidden;
    touch-action: pan-y;
}

.layers-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.layers-stage.is-ready .layers-canvas {
    opacity: 1;
}

.layers-stage.is-dragging {
    cursor: grabbing;
}

.layers-stage.is-dragging .layers-canvas {
    cursor: grabbing;
}

/* Plain side-by-side view for no-WebGL, and the pre-load state. */
.layers-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 2px;
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.layers-fallback img {
    flex: 1 1 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layers-stage.is-ready .layers-fallback {
    opacity: 0;
}

.layers-stage.is-fallback .layers-fallback {
    opacity: 1;
}

.layers-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 20px;
}

.layers-hint {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #777;
}

.layers-reset {
    background: transparent;
    border: 1px solid #333;
    color: #aaa;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    transition: border-color 0.25s, color 0.25s;
}

.layers-reset:hover {
    border-color: #888;
    color: #fff;
}

@media (max-width: 900px) {
    .layers-page {
        padding: 110px 28px 72px;
    }

    .layers-stage {
        aspect-ratio: 4 / 3;
    }

    .layers-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =====================================================
   EXHIBITIONS
   ===================================================== */
.exhibitions-page {
    padding: 140px 56px 100px;
    background: #000;
    color: #fff;
    min-height: 100vh;
}

.exhibitions-head {
    max-width: 640px;
    margin-bottom: 80px;
}

.exhibitions-title {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.05;
}

.exhibitions-list {
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.exhibition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

/* Alternate the photograph's side so a long list keeps some rhythm. */
.exhibition.is-reversed .exhibition-figure {
    order: 2;
}

.exhibition-figure img {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.exhibition:hover .exhibition-figure img {
    filter: grayscale(70%);
}

.exhibition-dates {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 16px;
}

.exhibition-name {
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.15;
    margin-bottom: 18px;
}

.exhibition-where {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 22px;
}

.exhibition-venue {
    display: block;
    color: #e0e0e0;
    letter-spacing: 0.04em;
}

.exhibition-address {
    display: block;
    color: #8a8a8a;
}

.exhibition-about {
    color: #b4b4b4;
    font-size: 14px;
    line-height: 1.75;
    max-width: 52ch;
}

.exhibition-about p + p {
    margin-top: 14px;
}

@media (max-width: 900px) {
    .exhibitions-page {
        padding: 110px 28px 72px;
    }

    .exhibitions-head {
        margin-bottom: 56px;
    }

    .exhibitions-list {
        gap: 72px;
    }

    .exhibition {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Stacked, the image always leads - alternating sides means nothing here. */
    .exhibition.is-reversed .exhibition-figure {
        order: 0;
    }

    .exhibition-figure img {
        max-height: 320px;
    }
}

/* =====================================================
   NAV DROPDOWN
   ===================================================== */
.nav-item {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: -18px;
    list-style: none;
    min-width: 220px;
    /* Bridges the gap between the link and the panel, so moving the pointer
       down doesn't cross dead space and close the menu. */
    padding: 14px 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

/* focus-within keeps this usable from the keyboard, not just the mouse. */
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown li {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nav-dropdown li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-dropdown li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-dropdown a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 18px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: none;
    opacity: 0.75;
    transition: opacity 0.2s, background 0.2s;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus {
    opacity: 1;
    background: rgba(255, 255, 255, 0.07);
}

.dropdown-count {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: #777;
}

/* Once the bar goes solid white, the panel follows so the two read as one. */
.site-nav.scrolled .nav-dropdown li {
    background: rgba(255, 255, 255, 0.97);
    border-color: #eee;
}

.site-nav.scrolled .nav-dropdown a {
    color: #000;
}

.site-nav.scrolled .nav-dropdown a:hover,
.site-nav.scrolled .nav-dropdown a:focus {
    background: rgba(0, 0, 0, 0.05);
}

.site-nav.scrolled .dropdown-count {
    color: #999;
}

/* =====================================================
   MOBILE MENU
   Breakpoint is 860px, not 600px: with five items plus the
   wordmark the bar starts crowding well before phone widths.
   ===================================================== */
.nav-toggle {
    display: none;
    position: relative;
    z-index: 2;
    width: 30px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 1px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s;
}

.site-nav.scrolled .nav-toggle-bar {
    background: #000;
}

/* Bars fold into a cross. The panel is dark even when the bar is
   scrolled-white, so force them back to white while open. */
.site-nav.menu-open .nav-toggle-bar,
.site-nav.scrolled.menu-open .nav-toggle-bar {
    background: #fff;
}

.site-nav.menu-open .nav-toggle-bar:first-child {
    transform: translateY(4px) rotate(45deg);
}

.site-nav.menu-open .nav-toggle-bar:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 860px) {
    .nav-toggle {
        display: flex;
    }

    /* The scrim is for legibility over the hero; the open panel is opaque. */
    .site-nav.menu-open::before {
        opacity: 0;
    }

    .site-nav.menu-open,
    .site-nav.scrolled.menu-open {
        background: transparent;
        border-bottom: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Static content paints below the positioned panel, so lift the wordmark
       to sit alongside the toggle rather than behind the menu. */
    .site-nav.menu-open .nav-logo {
        color: #fff;
        position: relative;
        z-index: 2;
        text-shadow: none;
    }

    .nav-links {
        position: fixed;
        inset: 0;
        z-index: 1;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        padding: 96px 32px 48px;
        background: rgba(8, 8, 8, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
    }

    .site-nav.menu-open .nav-links {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links > li {
        width: 100%;
    }

    /* The scrolled-state rule outside this media query paints nav links black
       for the white bar. The panel is dark whatever the bar is doing, so that
       selector has to be matched and beaten here or the links vanish. */
    .nav-links > li > a,
    .site-nav.scrolled .nav-links > li > a {
        display: block;
        padding: 16px 0;
        font-size: 20px;
        letter-spacing: 0.08em;
        text-transform: none;
        color: #fff;
        text-shadow: none;
        opacity: 1;
    }

    .nav-links > li + li > a {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* No hover on touch - the collections just sit under Work as a sublist. */
    .nav-dropdown {
        position: static;
        min-width: 0;
        padding: 0 0 12px;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .nav-dropdown li,
    .site-nav.scrolled .nav-dropdown li {
        background: transparent;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nav-dropdown li:first-child,
    .nav-dropdown li + li {
        border-top: none;
    }

    .nav-dropdown a,
    .site-nav.scrolled .nav-dropdown a {
        justify-content: flex-start;
        gap: 12px;
        padding: 9px 0 9px 18px;
        font-size: 12px;
        color: #9a9a9a;
    }

    .nav-dropdown a:hover,
    .nav-dropdown a:focus,
    .site-nav.scrolled .nav-dropdown a:hover {
        background: transparent;
        color: #fff;
    }

    .dropdown-count,
    .site-nav.scrolled .dropdown-count {
        color: #5e5e5e;
    }
}

/* Set while the panel is open so the page behind cannot scroll. */
body.nav-locked {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .nav-links,
    .nav-toggle-bar {
        transition: none;
    }
}

/* =====================================================
   VIEWER: THEN / NOW PAIR
   ===================================================== */
.viewer-image-wrap.is-pair {
    max-width: 1180px;
}

.viewer-pair {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    overflow: hidden;
    touch-action: pan-y;
}

.viewer-pair .layers-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.viewer-pair.is-ready .layers-canvas {
    opacity: 1;
}

.viewer-pair.is-dragging,
.viewer-pair.is-dragging .layers-canvas {
    cursor: grabbing;
}

/* Sliding away from a pair: the stage leaves the flow so the incoming
   photograph lands over it rather than beneath it, and travels on the same
   curve as any other slide. */
.viewer-pair.is-animating {
    position: absolute;
    inset: 0;
    transition: transform 0.52s cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 0.52s ease;
}

.viewer-pair-hint {
    margin: 18px 56px 0;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #6f6f6f;
    text-align: center;
}

@media (max-width: 900px) {
    .viewer-pair-hint {
        margin: 14px 28px 0;
    }
}

/* =====================================================
   VIEWER ON SMALL SCREENS
   The arrows used to flank the image inside a flex row, so between them,
   the gaps and the stage padding, roughly 40% of the screen width went to
   chrome and the photograph got the rest. Overlay them instead.
   ===================================================== */
@media (max-width: 900px) {
    .gallery-viewer {
        padding-top: 100px;
    }

    .viewer-stage {
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        gap: 0;
    }

    .viewer-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        /* Sitting over the photograph now, so it needs its own ground. */
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border-color: rgba(255, 255, 255, 0.35);
    }

    .viewer-arrow-prev {
        left: 6px;
    }

    .viewer-arrow-next {
        right: 6px;
    }

    .viewer-arrow.is-disabled {
        display: none;
    }

    .viewer-image-wrap,
    .viewer-image-wrap.is-pair {
        height: 62vh;
        max-width: none;
    }
}

/* Portrait photographs are height-constrained here, so the frame has to be
   tall enough for them to reach the new width. Landscape ones gain some
   letterboxing in exchange - the fixed height is what stops the page jumping
   when you slide between the two orientations. */
@media (max-width: 600px) {
    .viewer-image-wrap,
    .viewer-image-wrap.is-pair {
        height: 64vh;
    }
}