@import url(
'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;1,400&display=swap'
);

:root {

--bg: #080808;

--surface: #111111;

--surface-2: #171717;

--text: #f2f2f0;

--muted: #858585;

--line: rgba(255,255,255,.12);

}
/* =========================
RESET
========================= */

{
margin: 0;

padding: 0;

box-sizing: border-box;
}
html {

scroll-behavior: smooth;

}
body {

background: var(--bg);

color: var(--text);

font-family: "Inter", sans-serif;

font-weight: 300;

overflow-x: hidden;

}
a {

color: inherit;

text-decoration: none;

}
button,
input,
select,
textarea {

font-family: inherit;

}
/* =========================
HEADER
========================= */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 80px;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 5vw;

z-index: 100;

mix-blend-mode: difference;

}
.logo {

font-size: 12px;

letter-spacing: .22em;

text-transform: uppercase;

}
nav {

display: flex;

gap: 35px;

}
nav a {

position: relative;

font-size: 10px;

letter-spacing: .18em;

text-transform: uppercase;

}
nav a::after {

content: "";

position: absolute;

left: 0;

bottom: -7px;

width: 0;

height: 1px;

background: white;

transition: width .3s ease;

}
nav a:hover::after {

width: 100%;

}
/* =========================
HERO
========================= */

.hero {

position: relative;

width: 100%;

height: 100vh;

min-height: 650px;

overflow: hidden;

isolation: isolate;

display: flex;

align-items: flex-end;

padding: 0 7vw 8vh;

background: #080808;

}
/* =========================
HERO SLIDES
========================= */

.hero-slides {

position: relative;

inset: 0;

width: 100%;

height: 100%;

overflow: hidden;

z-index: 0;

}
/* =========================
SLIDE
========================= */

.hero-slide {

position: relative;

inset: 0;

width: 100%;

height: 100%;

overflow: hidden;

opacity: 0;

visibility: hidden;

transition:
    opacity 1.2s ease,
    visibility 1.2s ease;

}
.hero-slide.active {

opacity: 1;

visibility: visible;

}
/* =========================
HERO IMAGE
========================= */

.hero-slide img {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

display: block;

object-fit: cover;

object-position: center center;

transform: scale(1.03);

transition:
    transform 7s ease-out;

}
.hero-slide.active img {

transform: scale(1);

}
/* =========================
HERO OVERLAY
========================= */

.hero-slides::after {

content: "";

position: absolute;

inset: 0;

z-index: 5;

pointer-events: none;

background:

    linear-gradient(
        to bottom,
        rgba(0,0,0,.05),
        rgba(0,0,0,.85)
    );

}
.hero-slides::before {

content: "";

position: absolute;

inset: 0;

z-index: 5;

pointer-events: none;

background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.35),
        transparent 70%
    );

}
/* =========================
HERO CONTENT
========================= */

.hero-content {

position: relative;

z-index: 10;

width: 100%;

max-width: 900px;

}
.eyebrow {

font-size: 10px;

letter-spacing: .3em;

text-transform: uppercase;

color: #aaa;

margin-bottom: 25px;

}
.hero h1 {

font-family:
    "Playfair Display",
    serif;

font-size:
    clamp(55px, 9vw, 125px);

font-weight: 400;

line-height: .9;

letter-spacing: -.045em;

}
.hero h1 em {

font-style: italic;

}
.hero-content p {

margin-top: 35px;

max-width: 460px;

color: #aaa;

font-size: 14px;

line-height: 1.8;

}
/* =========================
HERO ARROWS
========================= */

.hero-arrow {

position: absolute;

top: 50%;

z-index: 30;

width: 52px;

height: 52px;

padding: 0;

display: flex;

align-items: center;

justify-content: center;

border:
    1px solid rgba(255,255,255,.45);

border-radius: 50%;

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

color: white;

font-size: 34px;

font-weight: 300;

line-height: 1;

cursor: pointer;

transform:
    translateY(-50%);

transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;

}
.hero-prev {

left: 30px;

}
.hero-next {

right: 30px;

}
.hero-arrow:hover {

background:
    rgba(255,255,255,.18);

border-color: white;

transform:
    translateY(-50%) scale(1.05);

}
/* =========================
HERO DOTS
========================= */

.hero-dots {

position: absolute;

left: 50%;

bottom: 55px;

z-index: 30;

display: flex;

align-items: center;

gap: 9px;

transform:
    translateX(-50%);

}
.hero-dot {

width: 7px;

height: 7px;

padding: 0;

border: 0;

border-radius: 50%;

background:
    rgba(255,255,255,.4);

cursor: pointer;

transition:
    width .35s ease,
    background .35s ease;

}
.hero-dot.active {

width: 30px;

background: white;

}
/* =========================
SCROLL
========================= */

.hero .scroll {

position: absolute;

right: 5vw;

bottom: 7vh;

z-index: 30;

writing-mode: vertical-rl;

font-size: 9px;

letter-spacing: .3em;

text-transform: uppercase;

color: #aaa;

}
/* =========================
INTRO
========================= */

.intro {

padding: 160px 10vw;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 10vw;

align-items: center;

}
.section-label {

color: var(--muted);

font-size: 10px;

text-transform: uppercase;

letter-spacing: .25em;

margin-bottom: 25px;

}
.intro h2,
.about h2 {

font-family:
    "Playfair Display",
    serif;

font-weight: 400;

font-size:
    clamp(35px, 4vw, 60px);

line-height: 1.05;

}
.intro-text {

color: #999;

font-size: 14px;

line-height: 2;

max-width: 500px;

}
.intro-text p + p {

margin-top: 25px;

}
/* =========================
PORTFOLIO
========================= */

.portfolio {

padding: 0 5vw 150px;

}
.category {

margin-bottom: 150px;

}
.category-header {

display: flex;

justify-content: space-between;

align-items: baseline;

border-bottom:
    1px solid var(--line);

padding-bottom: 18px;

margin-bottom: 45px;

}
.category-title {

font-family:
    "Playfair Display",
    serif;

font-size:
    clamp(30px, 4vw, 50px);

font-weight: 400;

}
.category-number {

font-size: 10px;

color: var(--muted);

letter-spacing: .2em;

}
.gallery {

display: grid;

grid-template-columns:
    repeat(12, 1fr);

gap: 20px;

}
.photo {

position: relative;

overflow: hidden;

cursor: pointer;

background: #151515;

}
.photo:nth-child(1) {

grid-column: span 7;

aspect-ratio: 1.35 / 1;

}
.photo:nth-child(2) {

grid-column: span 5;

aspect-ratio: .9 / 1;

}
.photo:nth-child(3) {

grid-column: span 4;

aspect-ratio: 1 / 1.15;

}
.photo:nth-child(4) {

grid-column: span 8;

aspect-ratio: 1.6 / 1;

}
.photo img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

filter: brightness(.85);

transition:
    transform .8s ease,
    filter .5s ease;

}
.photo:hover img {

transform: scale(1.05);

filter: brightness(1);

}
.photo-info {

position: absolute;

left: 20px;

bottom: 18px;

z-index: 2;

opacity: 0;

transform:
    translateY(10px);

transition: .4s ease;

}
.photo:hover .photo-info {

opacity: 1;

transform:
    translateY(0);

}
.photo-info span {

font-size: 10px;

text-transform: uppercase;

letter-spacing: .15em;

color: white;

text-shadow:
    0 1px 10px black;

}
/* =========================
ABOUT
========================= */

.about {

min-height: 80vh;

padding: 150px 10vw;

border-top:
    1px solid var(--line);

display: grid;

grid-template-columns:
    1fr 1fr;

gap: 10vw;

align-items: center;

}
.about h2 {

font-size:
    clamp(45px, 6vw, 80px);

line-height: .95;

}
.about h2 em {

color: #777;

}
.about-text {

color: #999;

line-height: 2;

font-size: 14px;

}
.about-text p + p {

margin-top: 25px;

}
/* =========================
CONTACT
========================= */

.contact {

min-height: 70vh;

padding: 150px 10vw;

border-top:
    1px solid var(--line);

display: flex;

flex-direction: column;

justify-content: center;

}
.contact h2 {

font-family:
    "Playfair Display",
    serif;

font-size:
    clamp(55px, 9vw, 120px);

font-weight: 400;

line-height: .9;

margin-bottom: 50px;

}
.contact h2 em {

color: #777;

}
.contact-link {

font-size: 13px;

letter-spacing: .1em;

text-transform: uppercase;

border-bottom:
    1px solid #555;

padding-bottom: 10px;

width: fit-content;

}
.contact-link:hover {

border-color: white;

}
/* =========================
FOOTER
========================= */

footer {

border-top:
    1px solid var(--line);

padding: 30px 5vw;

display: flex;

justify-content: space-between;

color: #666;

font-size: 9px;

letter-spacing: .18em;

text-transform: uppercase;

}
/* =========================
LIGHTBOX
========================= */

.lightbox {

position: fixed;

inset: 0;

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

z-index: 1000;

display: none;

align-items: center;

justify-content: center;

padding: 5vw;

}
.lightbox.active {

display: flex;

}
.lightbox img {

max-width: 92vw;

max-height: 90vh;

object-fit: contain;

}
.close {

position: absolute;

top: 25px;

right: 35px;

background: none;

border: 0;

color: white;

font-size: 35px;

cursor: pointer;

}
.lightbox-caption {

position: absolute;

bottom: 25px;

left: 50%;

transform:
    translateX(-50%);

color: #aaa;

font-size: 10px;

letter-spacing: .2em;

text-transform: uppercase;

}
/* =========================
ADMIN / LOGIN
========================= */

.admin-page {

min-height: 100vh;

}
.login-container {

min-height: 100vh;

max-width: 500px;

margin: auto;

padding: 180px 30px 100px;

}
.login-container h1,
.admin-container > h1 {

font-family:
    "Playfair Display",
    serif;

font-weight: 400;

font-size:
    clamp(50px, 7vw, 80px);

line-height: 1;

}
.login-description {

margin-top: 25px;

color: #777;

line-height: 1.8;

}
form {

margin-top: 50px;

}
label {

display: block;

margin-bottom: 10px;

color: #aaa;

font-size: 10px;

text-transform: uppercase;

letter-spacing: .18em;

}
input,
select,
textarea {

width: 100%;

padding: 15px;

margin-bottom: 25px;

border:
    1px solid var(--line);

background:
    var(--surface);

color: white;

outline: none;

}
textarea {

min-height: 130px;

resize: vertical;

}
input:focus,
select:focus,
textarea:focus {

border-color:
    rgba(255,255,255,.5);

}
.admin-button {

border:
    1px solid white;

background: white;

color: black;

padding: 15px 25px;

cursor: pointer;

font-size: 10px;

text-transform: uppercase;

letter-spacing: .18em;

transition: .3s;

}
.admin-button:hover {

background: transparent;

color: white;

}
.admin-button:disabled {

opacity: .5;

cursor: wait;

}
.error {

color: #d77;

font-size: 12px;

margin-top: 20px;

}
.status {

margin-top: 20px;

font-size: 12px;

}
.status.success {

color: #8dbb9a;

}
.status.error {

color: #d77;

}
/* =========================
ADMIN
========================= */

.admin-container {

max-width: 1200px;

margin: auto;

padding: 160px 5vw 100px;

}
.admin-card {

background:
    var(--surface);

border:
    1px solid var(--line);

padding: 40px;

margin-top: 70px;

}
.admin-card h2 {

font-family:
    "Playfair Display",
    serif;

font-size: 32px;

font-weight: 400;

}
.admin-section-header {

display: flex;

justify-content: space-between;

align-items: center;

}
.admin-section-header span {

color: #777;

font-size: 10px;

text-transform: uppercase;

letter-spacing: .15em;

}
.admin-gallery {

display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 20px;

margin-top: 40px;

}
.admin-photo {

background:
    var(--surface-2);

border:
    1px solid var(--line);

}
.admin-photo img {

width: 100%;

aspect-ratio: 1 / 1;

object-fit: cover;

display: block;

}
.admin-photo-content {

padding: 20px;

}
.admin-photo-content h3 {

font-size: 14px;

font-weight: 400;

}
.admin-photo-content span {

display: block;

margin-top: 8px;

color: #777;

font-size: 9px;

text-transform: uppercase;

letter-spacing: .15em;

}
.delete-button {

margin-top: 20px;

background: transparent;

color: #b77;

border: 1px solid #553333;

padding: 10px 15px;

cursor: pointer;

font-size: 9px;

text-transform: uppercase;

letter-spacing: .15em;

}
.delete-button:hover {

background: #553333;

color: white;

}
.logout-button {

background: none;

color: white;

border:
    1px solid rgba(255,255,255,.4);

padding: 10px 15px;

cursor: pointer;

font-size: 9px;

text-transform: uppercase;

letter-spacing: .15em;

}
/* =========================
MOBILE
========================= */

@media (max-width: 700px) {

header {

    height: 70px;

    padding: 0 6vw;

}

.logo {

    font-size: 9px;

}

nav {

    gap: 14px;

}

nav a {

    font-size: 8px;

}

.hero {

    height: 100svh;

    min-height: 600px;

    padding:
        0 7vw 10vh;

}

.hero h1 {

    font-size:
        clamp(50px, 16vw, 85px);

}

.hero-content p {

    font-size: 13px;

}

.hero-arrow {

    width: 42px;

    height: 42px;

    font-size: 28px;

}

.hero-prev {

    left: 12px;

}

.hero-next {

    right: 12px;

}

.hero-dots {

    bottom: 35px;

}

.hero-dot {

    width: 6px;

    height: 6px;

}

.hero-dot.active {

    width: 24px;

}

.scroll {

    display: none;

}

.intro {

    padding:
        100px 7vw;

    display: block;

}

.intro-text {

    margin-top: 50px;

}

.portfolio {

    padding:
        0 5vw 80px;

}

.category {

    margin-bottom: 100px;

}

.gallery {

    display: block;

}

.photo {

    margin-bottom: 15px;

    aspect-ratio:
        1.2 / 1 !important;

}

.photo-info {

    opacity: 1;

    transform: none;

}

.about {

    padding:
        100px 7vw;

    display: block;

}

.about-text {

    margin-top: 60px;

}

.contact {

    min-height: 60vh;

    padding:
        100px 7vw;

}

footer {

    padding:
        25px 6vw;

    flex-direction:
        column;

    gap: 15px;

}

.admin-container {

    padding:
        130px 6vw 70px;

}

.admin-card {

    padding: 25px;

}

.admin-gallery {

    grid-template-columns: 1fr;

}

}