*{box-sizing:border-box}
body{
margin:0;
font-family:"IBM Plex Sans",sans-serif;
background:#fff;
color:#2b2b2b;
line-height:1.6;
}
main{
    max-width:1700px;
    margin:0 auto;
    padding:80px 40px;
}
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 28px 8%;

    border-bottom: 1px solid #eaeaea;

    position: sticky;
    top: 0;

    background: #fff;

    z-index: 1000;
}
nav a {
    margin-left: 28px;
    text-decoration: none;
    color: #444;
    transition: color 0.2s ease;
}

nav a:hover {
    color: #000;
}

.site-title {
    text-decoration: none;
    color: #2b2b2b;
    font-weight: 500;
}

.site-title:hover {
    color: #2b2b2b;
}
.hero {
    position: relative;
    width: 100%;
    max-width: 1700px;
    margin: 0 auto 50px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background:#fff;
}

.hero-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;
    transition: opacity 2.5s ease;
}

.hero-image.active {
    opacity: 1;
}
h1{
font-size:4rem;
font-weight:400;
margin:0 0 24px;
}
.lead{
font-size:1.35rem;
color:#666;
max-width:700px;
}
.feature {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 70px 8%;

    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px;
    align-items: center;
}

.feature-image {
    width: 100%;
    display: block;
    object-fit: contain;
}

.feature-reverse {
    grid-template-columns: 0.8fr 1fr;
}

.feature-reverse .feature-image {
    order: 2;
}

.placeholder{
background:#ececec;
height:520px;
}
footer{
padding:10px 8%;
border-top:1px solid #eaeaea;
color:#777;
}
.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 60px 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

.environment-page{
    max-width:1700px;
    margin:0 auto;
    padding:80px 40px;
}

.page-intro {
    max-width: 700px;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 120px;
}

.capture-project {
    margin-bottom: 180px;
}

.capture-project h2 {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 40px;
}

.project-hero-image {
    width: 100%;
    display: block;
    margin-bottom: 40px;
}

.project-description {
    max-width: 750px;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 70px;
}

.process-animation {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:#fff;
    margin-bottom: 20px;
}

.process-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;
    transition: opacity 2s ease;
}

.process-image.active {
    opacity: 1;
}

.process-caption {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 70px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 80px;
}

.process-stage img {
    width: 100%;
    display: block;
    margin-bottom: 18px;
}

.process-stage h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 8px;
}

.process-stage p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.atmosphere-page {
    max-width:1700px;
    margin:0 auto;
    padding:80px 40px;
}

.atmosphere-intro {
    max-width: 700px;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 100px;
}

.atmosphere-section {
    margin-bottom: 180px;
}

.atmosphere-section h2 {
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0 0 30px;
}

.atmosphere-section-description {
    max-width: 750px;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 50px;
}

.atmosphere-large-image {
    width: 100%;
    display: block;
    margin-bottom: 30px;
}

.atmosphere-image-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 30px;
}

.atmosphere-image-pair img {
    width: 100%;
    display: block;
}

@media (max-width: 900px) {

    .atmosphere-image-pair {
        grid-template-columns: 1fr;
    }

}

.acquisition-page {
    max-width:1700px;
    margin:0 auto;
    padding:80px 40px;
}

.acquisition-intro {
    max-width: 700px;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 100px;
}

.acquisition-section {
    margin-bottom: 180px;
}

.acquisition-section h2 {
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0 0 30px;
}

.acquisition-section-description {
    max-width: 750px;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 50px;
}

.acquisition-large-image {
    width: 100%;
    display: block;
    margin-bottom: 30px;
}

.acquisition-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 30px;
}

.acquisition-image-grid img {
    width: 100%;
    display: block;
}

.about-page {
    max-width:1700px;
    margin:0 auto;
    padding:80px 40px;
}

.about-large-image {
    width: 100%;
    display: block;
    margin-bottom: 60px;
}

.about-bio {
    max-width: 750px;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 100px;
}

.about-image-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
}

.about-image-row img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-image-row .portrait {
    grid-column: 3;
    grid-row: 1 / 3;
}
/* ---------- CONTACT PAGE ---------- */

.contact-page{

    max-width:1700px;
    margin:0 auto;
    padding:8%;

}

.contact-layout{

    display:grid;
    grid-template-columns:1.4fr 0.8fr;
    gap:70px;
    align-items:start;

}

.contact-form{

    display:flex;
    flex-direction:column;

}

.contact-form form{

    display:flex;
    flex-direction:column;

}

.contact-form label{

    margin:22px 0 8px;
    font-weight:500;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:14px;

    font:inherit;

    border:1px solid #ddd;

    background:#fff;

}

.contact-form textarea{

    min-height:180px;

    resize:vertical;

}

.contact-form button{

    margin-top:30px;

    width:220px;

    padding:14px;

    border:none;

    background:#222;

    color:#fff;

    cursor:pointer;

}

.contact-form button:hover{

    background:#444;

}

.privacy-note{

    margin-top:35px;

    padding-top:30px;

    border-top:1px solid #e5e5e5;

    font-size:.9rem;

    line-height:1.8;

    color:#777;

}

.privacy-note a{

    color:#555;

    text-decoration:none;

}

.privacy-note a:hover{

    color:#000;

}

.contact-photo img{

    width:100%;

    display:block;

}

@media (max-width:900px){

    .contact-layout{

        grid-template-columns:1fr;

    }

    .contact-photo{

        margin-top:60px;

    }

}
.feature-image a{

    display:block;

}

.feature-image img{

    display:block;

    transition:transform .25s ease,
               opacity .25s ease;

}

.feature-image img:hover{

    transform:scale(1.01);

    opacity:.96;

}
.feature h2 a{

    color:inherit;

    text-decoration:none;

}

.feature h2 a{

    color:inherit;

    text-decoration:none;

    transition:opacity .2s ease;

}

.feature h2 a:hover{

    opacity:.7;

}
/* ---------- THANK YOU PAGE ---------- */


.thank-you-page {
    text-align: center;
}

.thankyou-image{

    display:block;

    width:100%;

    max-width:900px;

    margin:0 auto 50px;

}

.thank-you-page p {
    text-align: center;
}

/* ---------- EXHIBITION PAGE ---------- */

.exhibition-page{

    max-width:1700px;

    margin:0 auto;

    padding:40px 8%;

}


.exhibition-page > h1 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 60px;
}


/* TWO LARGE INTRODUCTORY IMAGES */

.exhibition-intro{

    display:grid;

    grid-template-columns:1fr;

    gap:40px;

}


.exhibition-intro img{

    width:100%;

    height:auto;

    display:block;

}


/* COMMENTARY */

.exhibition-text{

    max-width:800px;

    margin:60px auto 100px;

    font-size:1.05rem;

    line-height:1.8;

    color:#555;

    text-align:justify;

}


/* SLIDESHOW */

.exhibition-slideshow{

    width:100%;

}


.slideshow-image-container{

    width:100%;

    display:flex;

    justify-content:center;

}


.slide{

    display:none;

    width:auto;

    max-width:100%;

    height:auto;

    max-height:80vh;

}


.slide.active{

    display:block;

}


/* CONTROLS */

.slideshow-controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    margin-top:24px;

}


.slideshow-controls button{

    border:none;

    background:none;

    font:inherit;

    font-size:1.4rem;

    cursor:pointer;

    padding:8px 14px;

}


.slideshow-controls button:hover{

    opacity:.6;

}


#slideshow-counter{

    font-size:.9rem;

    color:#777;

}

/* ---------- EXHIBITION VIDEO ---------- */

.exhibition-video{

    width:100%;

    max-width:none;

    margin:100px auto 0;

}

.exhibition-video h2{

    margin-bottom:30px;

}

.exhibition-video-frame{

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

}

.exhibition-video-frame iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:0;

}

/* ---------- EXHIBITION FILMSTRIP ---------- */

.slideshow-filmstrip{

    position:relative;

    width:100%;

    margin-top:28px;

    overflow:hidden;

}


.slideshow-filmstrip::before,
.slideshow-filmstrip::after{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    width:70px;

    z-index:2;

    pointer-events:none;

}


.slideshow-filmstrip::before{

    left:0;

    background:
        linear-gradient(
            to right,
            white,
            rgba(255,255,255,0)
        );

}


.slideshow-filmstrip::after{

    right:0;

    background:
        linear-gradient(
            to left,
            white,
            rgba(255,255,255,0)
        );

}


.filmstrip-track{

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding:4px 70px 8px;

    scrollbar-width:thin;

    scroll-behavior:smooth;

}


.thumbnail{

    flex:0 0 110px;

    height:70px;

    padding:0;

    border:2px solid transparent;

    background:none;

    cursor:pointer;

    opacity:.55;

    transition:
        opacity .2s ease,
        border-color .2s ease;

}


.thumbnail:hover{

    opacity:.85;

}


.thumbnail.active{

    opacity:1;

    border-color:#222;

}


.thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* ---------- FINAL EXHIBITION SECTION ---------- */

.exhibition-final {

    width:100%;

    margin:140px auto 0;

}


.exhibition-final h2 {

    width:100%;

    margin:0 0 50px;

    text-align:center;

    font-size:clamp(1.8rem, 2.6vw, 2.8rem);

    line-height:1.2;

    font-weight:400;

}


.exhibition-final-images {

    width:100%;

    display:flex;

    flex-direction:column;

    gap:50px;

}


.exhibition-final-images img {

    width:100%;

    height:auto;

    display:block;

}