{
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;

background: #111;
color: #fff;

font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;


}

/* ---------------------------------
Header
--------------------------------- */

.site-header {
position: fixed;

top: 0;
left: 0;
right: 0;

z-index: 10;

display: flex;
justify-content: space-between;
align-items: center;

padding: 22px 30px;

color: white;

pointer-events: none;

background: linear-gradient(
    to bottom,
    rgba(0,0,0,.65),
    rgba(0,0,0,0)
);


}

.site-title {
font-size: 16px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
}

.site-subtitle {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;

opacity: .65;


}

/* ---------------------------------
Main Gallery
--------------------------------- */

.gallery {
width: 100%;
max-width: 1600px;

margin: 0 auto;

padding: 80px 20px 100px;


}

/*

Each photograph gets its own large

vertical section.
*/

.gallery-item {
position: relative;

width: 100%;

margin: 0 0 70px;

cursor: zoom-in;

overflow: hidden;

background: #181818;


}

.gallery-item img {
display: block;

width: 100%;
height: auto;

max-height: 90vh;

object-fit: contain;

transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    opacity .5s ease;


}

/*

Subtle zoom when hovering over an image.
*/

.gallery-item:hover img {
transform: scale(1.015);
}

.gallery-item figcaption {
position: absolute;

left: 20px;
bottom: 20px;

padding: 7px 11px;

font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;

background: rgba(0,0,0,.55);

opacity: 0;

transition: opacity .3s ease;


}

.gallery-item:hover figcaption {
opacity: 1;
}

/* ---------------------------------
Fullscreen Viewer
--------------------------------- */

.lightbox {
position: fixed;

inset: 0;

z-index: 1000;

display: flex;
align-items: center;
justify-content: center;

background: rgba(0,0,0,.97);

opacity: 0;
visibility: hidden;

transition:
    opacity .35s ease,
    visibility .35s ease;


}

.lightbox.open {
opacity: 1;
visibility: visible;
}

/*

Image container
*/

.lightbox-content {
position: relative;

width: 100%;
height: 100%;

display: flex;
align-items: center;
justify-content: center;

padding: 50px 90px;


}

.lightbox-content img {
display: block;

max-width: 100%;
max-height: 100%;

width: auto;
height: auto;

object-fit: contain;

user-select: none;

opacity: 0;

transform: scale(.97);

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


}

.lightbox.open .lightbox-content img {
opacity: 1;
transform: scale(1);
}

/* ---------------------------------
Buttons
--------------------------------- */

.lightbox button {
position: absolute;

z-index: 10;

border: 0;

color: white;

background: rgba(0,0,0,.25);

cursor: pointer;

transition:
    background .2s ease,
    opacity .2s ease;


}

.lightbox button:hover {
background: rgba(255,255,255,.15);
}

/* Close */

.lightbox-close {
top: 20px;
right: 25px;

width: 50px;
height: 50px;

font-size: 36px;

font-weight: 200;

line-height: 1;


}

/* Previous */

.lightbox-prev {
left: 20px;

top: 50%;

transform: translateY(-50%);

width: 55px;
height: 80px;

font-size: 32px;


}

/* Next */

.lightbox-next {
right: 20px;

top: 50%;

transform: translateY(-50%);

width: 55px;
height: 80px;

font-size: 32px;


}

/* ---------------------------------
Caption
--------------------------------- */

.lightbox-caption {
position: absolute;

left: 50%;
bottom: 20px;

transform: translateX(-50%);

max-width: 80%;

padding: 7px 12px;

font-size: 12px;

letter-spacing: .08em;

text-transform: uppercase;

color: rgba(255,255,255,.8);

background: rgba(0,0,0,.5);


}

/* ---------------------------------
Counter
--------------------------------- */

.lightbox-counter {
position: absolute;

top: 25px;
left: 30px;

font-size: 12px;

letter-spacing: .1em;

color: rgba(255,255,255,.65);


}

/* ---------------------------------
Mobile
--------------------------------- */

@media (max-width: 700px) {

.site-header {
    padding: 16px 18px;
}

.site-title {
    font-size: 13px;
}

.site-subtitle {
    display: none;
}

.gallery {
    padding: 60px 0 60px;
}

.gallery-item {
    margin-bottom: 35px;
}

.gallery-item figcaption {
    opacity: 1;

    left: 10px;
    bottom: 10px;

    font-size: 9px;
}

.lightbox-content {
    padding: 30px 10px 50px;
}

.lightbox-prev,
.lightbox-next {
    width: 45px;
    height: 60px;

    background: rgba(0,0,0,.15);
}

.lightbox-prev {
    left: 5px;
}

.lightbox-next {
    right: 5px;
}

.lightbox-close {
    top: 10px;
    right: 10px;
}

.lightbox-counter {
    top: 18px;
    left: 18px;
}


}

/*

Prevent the background page from scrolling

while the fullscreen viewer is open.
*/

body.lightbox-open {
overflow: hidden;
}