*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
background:#fff;
color:#050505;
font-family:'Inter',sans-serif;
-webkit-font-smoothing:antialiased;
animation:siteFade 1.4s ease;
}

@keyframes siteFade{from{opacity:0;}to{opacity:1;}}

img{width:100%;display:block;object-fit:cover;}

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

.page{
width:100%;
max-width:1520px;
margin:0 auto;
overflow:hidden;
background:#fff;
transition:opacity .45s ease;
}

.page.is-fading{opacity:.18;}

/* HEADER */

header{
padding:28px 52px 24px;
display:flex;
justify-content:space-between;
align-items:flex-start;
border-bottom:1px solid #ececec;
}

.logo-wrap{cursor:pointer;line-height:1;}

.logo{
font-family:'Cormorant Garamond',serif;
font-size:50px;
font-weight:600;
letter-spacing:.12em;
}

.logo-sub{
font-size:8px;
letter-spacing:.08em;
text-transform:lowercase;
margin-top:2px;
}

nav{
display:flex;
gap:52px;
padding-top:22px;
font-size:9px;
letter-spacing:.34em;
text-transform:uppercase;
font-weight:600;
}

/* VIEWS */

.view{display:none;opacity:0;}

.view.active{
display:block;
opacity:1;
animation:viewFade 1.1s ease;
}

@keyframes viewFade{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}

/* HERO */

.hero{
height:720px;
overflow:hidden;
background:#000;
}

.hero img{height:100%;}

/* INTRO */

.intro{
padding:72px 24px 58px;
text-align:center;
}

.intro h1{
font-family:'Cormorant Garamond',serif;
font-size:58px;
font-weight:300;
text-transform:uppercase;
margin-bottom:16px;
}

.place{
font-size:10px;
letter-spacing:.42em;
text-transform:uppercase;
margin-bottom:34px;
}

.line{
width:32px;
height:1px;
background:#111;
margin:0 auto 34px;
}

.intro p{
max-width:620px;
margin:0 auto;
font-family:'Cormorant Garamond',serif;
font-size:22px;
line-height:1.45;
font-weight:300;
}

/* GRID */

.gallery{
padding:0 10px 90px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}

.gallery-item{
height:640px;
overflow:hidden;
}

.gallery-item img{height:100%;}

/* SIGNATURE */

.signature{
padding:0 18vw 110px;
text-align:center;
}

.signature p{
font-family:'Cormorant Garamond',serif;
font-size:30px;
line-height:1.28;
font-weight:300;
}

/* ABOUT */

.about{
padding:105px 90px 120px;
display:grid;
grid-template-columns:.9fr 1.2fr;
gap:90px;
align-items:start;
border-top:1px solid #ececec;
}

.about-image img{aspect-ratio:4/5;}

.about-kicker{
font-size:9px;
letter-spacing:.36em;
text-transform:uppercase;
margin-bottom:34px;
}

.about h2{
font-family:'Cormorant Garamond',serif;
font-size:68px;
line-height:.92;
font-weight:300;
margin-bottom:38px;
}

.about-content{
display:flex;
flex-direction:column;
height:100%;
}

.about-main{
max-width:760px;
margin-bottom:34px;
font-family:'Cormorant Garamond',serif;
font-size:28px;
line-height:1.34;
font-weight:300;
color:#111;
}

.about-secondary{
max-width:760px;
font-family:'Inter',sans-serif;
font-size:14px;
line-height:2;
font-weight:300;
color:#4a4a4a;
margin-bottom:58px;
}

.featured-vogue{
font-family:'Cormorant Garamond',serif;
font-size:38px;
letter-spacing:.14em;
font-weight:300;
margin-bottom:170px;
}

.about-link{
display:inline-block;
width:fit-content;
font-size:10px;
letter-spacing:.42em;
text-transform:uppercase;
border-bottom:1px solid #111;
padding-bottom:10px;
cursor:pointer;
transition:opacity .3s ease;
}

.about-link:hover{opacity:.55;}

/* CONTACT */

.contact-section{
padding:130px 24px 120px;
border-top:1px solid #ececec;
text-align:center;
background:#f7f7f7;
}

.contact-kicker{
font-size:9px;
letter-spacing:.42em;
text-transform:uppercase;
margin-bottom:42px;
font-weight:600;
}

.contact-section h2{
font-family:'Cormorant Garamond',serif;
font-size:76px;
line-height:.95;
font-weight:300;
margin-bottom:42px;
}

.contact-main{
max-width:880px;
margin:0 auto 42px;
font-family:'Cormorant Garamond',serif;
font-size:31px;
line-height:1.34;
font-weight:300;
}

.contact-secondary{
max-width:760px;
margin:0 auto 78px;
font-size:14px;
line-height:2;
font-weight:300;
color:#4f4f4f;
}

.contact-email{
display:inline-block;
font-family:'Cormorant Garamond',serif;
font-size:28px;
font-weight:300;
border-bottom:1px solid #111;
padding-bottom:10px;
margin-bottom:130px;
transition:opacity .3s ease;
}

.contact-email:hover{opacity:.55;}

.back-top{
width:fit-content;
margin:0 auto;
font-size:10px;
letter-spacing:.42em;
text-transform:uppercase;
border-bottom:1px solid #111;
padding-bottom:10px;
cursor:pointer;
transition:opacity .3s ease;
}

.back-top:hover{opacity:.55;}

/* PORTFOLIO */

.portfolio-intro{
padding:110px 24px 78px;
text-align:center;
border-top:1px solid #ececec;
}

.portfolio-intro h1{
font-family:'Cormorant Garamond',serif;
font-size:82px;
line-height:.92;
font-weight:300;
text-transform:uppercase;
margin-bottom:32px;
}

.portfolio-intro p{
max-width:700px;
margin:0 auto;
font-family:'Cormorant Garamond',serif;
font-size:26px;
line-height:1.32;
font-weight:300;
}

.portfolio-featured{
padding:0 52px 86px;
display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
gap:64px;
align-items:center;
}

.featured-cover{
aspect-ratio:16/9;
cursor:pointer;
overflow:hidden;
background:#f7f7f7;
}

.featured-cover img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .8s ease;
}

.featured-cover:hover img{transform:scale(1.015);}

.featured-info{
cursor:pointer;
padding:0 0 10px;
}

.country{
display:block;
font-family:'Cormorant Garamond',serif;
font-size:78px;
line-height:.88;
font-weight:300;
letter-spacing:.04em;
text-transform:uppercase;
}

.story-name{
display:block;
font-family:'Cormorant Garamond',serif;
font-size:34px;
font-weight:300;
margin-top:18px;
}

.featured-vogue-line{
display:block;
margin-top:56px;
font-family:'Cormorant Garamond',serif;
font-size:32px;
letter-spacing:.14em;
font-weight:300;
text-transform:uppercase;
}

.featured-label{
display:inline-block;
margin-top:24px;
font-size:10px;
letter-spacing:.34em;
text-transform:uppercase;
border-bottom:1px solid #111;
padding-bottom:8px;
transition:opacity .3s ease;
}

.featured-label:hover{opacity:.55;}

.portfolio-secondary{
padding:0 52px 76px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}

.small-wedding{cursor:pointer;}

.small-wedding-image{
aspect-ratio:16/9;
overflow:hidden;
margin-bottom:26px;
background:#f7f7f7;
}

.small-wedding-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .8s ease;
}

.small-wedding:hover img{transform:scale(1.015);}

.small-country{
display:block;
font-family:'Cormorant Garamond',serif;
font-size:36px;
line-height:.95;
font-weight:300;
letter-spacing:.04em;
text-transform:uppercase;
}

.small-story{
display:block;
font-family:'Cormorant Garamond',serif;
font-size:17px;
font-weight:300;
margin-top:10px;
}

/* FILMS */

.films-page{
padding:140px 24px 160px;
text-align:center;
border-top:1px solid #ececec;
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.films-kicker{
font-size:10px;
letter-spacing:.42em;
text-transform:uppercase;
margin-bottom:38px;
}

.films-page h1{
font-family:'Cormorant Garamond',serif;
font-size:92px;
line-height:.9;
font-weight:300;
margin-bottom:42px;
text-transform:uppercase;
}

.films-text{
max-width:760px;
margin:0 auto 70px;
font-family:'Cormorant Garamond',serif;
font-size:30px;
line-height:1.4;
font-weight:300;
color:#111;
}

.films-secondary{
max-width:700px;
margin:0 auto 90px;
font-size:14px;
line-height:2;
font-weight:300;
color:#4f4f4f;
}

.films-button{
display:inline-block;
font-size:10px;
letter-spacing:.42em;
text-transform:uppercase;
border-bottom:1px solid #111;
padding-bottom:10px;
transition:opacity .3s ease;
margin-bottom:90px;
}

.films-button:hover{opacity:.55;}

/* STORY GALLERY */

.portfolio-gallery{
padding:0 52px 120px;
display:grid;
grid-template-columns:1fr;
gap:20px;
}

.portfolio-gallery img{
width:100%;
height:auto;
background:#f5f5f5;
}

/* BACK */

.back-home{
text-align:center;
padding:90px 24px 80px;
}

.portfolio-back{
padding:20px 24px 110px;
}

.back-home a{
display:inline-block;
margin:0 18px;
font-size:10px;
letter-spacing:.42em;
text-transform:uppercase;
border-bottom:1px solid #111;
padding-bottom:8px;
}

/* FOOTER */

footer{
text-align:center;
padding:60px 24px 70px;
}

footer p{
font-size:8px;
letter-spacing:.42em;
text-transform:uppercase;
margin-bottom:28px;
}

/* MOBILE */

@media(max-width:900px){

header{
flex-direction:column;
gap:18px;
padding:24px 18px 18px;
}

nav{
gap:18px;
flex-wrap:wrap;
padding-top:0;
}

.hero{
height:72vh;
min-height:420px;
}

.gallery{
grid-template-columns:1fr;
padding:0 12px 52px;
}

.gallery-item{height:auto;}

/* FIX PORTFOLIO MOBILE */

.portfolio-intro{
padding:76px 22px 54px;
}

.portfolio-intro h1{
font-size:46px;
line-height:1;
}

.portfolio-intro p{
font-size:22px;
line-height:1.35;
max-width:340px;
}

.about{
grid-template-columns:1fr;
padding:70px 22px 80px;
gap:34px;
}

.about h2{font-size:52px;}

.about-main{font-size:24px;}

.about-secondary{
font-size:13px;
line-height:1.9;
}

.featured-vogue{
font-size:28px;
margin-bottom:90px;
}

.contact-section{padding:90px 22px 90px;}

.contact-section h2{font-size:54px;}

.contact-main{font-size:24px;}

.contact-secondary{
font-size:13px;
line-height:1.9;
}

.contact-email{
font-size:22px;
margin-bottom:90px;
}

.portfolio-featured{
grid-template-columns:1fr;
gap:30px;
padding:0 14px 58px;
}

.featured-info{padding:0 6px;}

.portfolio-secondary{
grid-template-columns:1fr;
gap:46px;
padding:0 14px 60px;
}

.country{font-size:42px;}

.story-name{font-size:26px;}

.featured-vogue-line{
font-size:21px;
margin-top:34px;
}

.small-country{font-size:30px;}

.small-story{font-size:16px;}

.portfolio-gallery{padding:0 14px 80px;}

.films-page{padding:110px 22px 120px;}

.films-page h1{font-size:58px;}

.films-text{font-size:24px;}

.films-secondary{
font-size:13px;
line-height:1.9;
}

}