@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:#fff;
  color:#1c1c1c;
  font-family:'Lora', serif;
  font-size:19px;
  line-height:1.6;
}
img{display:block; max-width:100%;}
a{color:inherit;}

/* ---- NAV ---- */
header{
  padding:26px 48px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-bottom:1px solid #eee;
  flex-wrap:wrap;
  row-gap:14px;
}
.nav-left{display:flex; flex-direction:column; gap:6px;}
.nav-left .row1{display:flex; gap:34px; font-size:16px;}
.nav-left .row2{font-size:16px;}
header a{text-decoration:none; color:#1c1c1c;}
header a.active{text-decoration:underline; text-underline-offset:5px;}
header a:hover{text-decoration:underline; text-underline-offset:5px;}
.logo{
  font-family:'Cormorant Garamond', serif;
  font-size:34px;
  font-weight:500;
  letter-spacing:.01em;
  align-self:center;
}
.socials{display:flex; gap:22px; align-self:center;}
.socials a{display:flex; align-items:center; justify-content:center;}
.socials svg{width:20px; height:20px; fill:#1c1c1c;}

/* ---- SECTIONS ---- */
.panel{
  background:#E8EFF9;
  padding:80px 90px;
}
.panel + .panel{border-top:1px solid #d7e0ef;}
h1.title{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:96px;
  margin:0 0 40px;
  line-height:1;
}
h2.subtitle{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:64px;
  margin:0 0 30px;
  line-height:1;
}
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:flex-start;
}
.two-col p{margin:0 0 26px;}
.two-col p:last-child{margin-bottom:0;}
.blob-photo{
  border-radius: 44% 56% 61% 39% / 46% 41% 59% 54%;
  overflow:hidden;
}
.blob-photo img{width:100%; height:100%; object-fit:cover;}
.plain-photo img{width:100%; height:auto; object-fit:cover;}

/* Activities 3-column */
.act-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:70px;
  margin-top:10px;
}
.act-cols h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:56px;
  margin:0 0 24px;
  line-height:1;
}
.act-cols p{margin:0 0 24px; font-size:18px;}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:60px;
}
.photo-grid img{width:100%; height:280px; object-fit:cover;}
.photo-grid.row-six{
  grid-template-columns:repeat(6,1fr);
  margin-top:20px;
}
.photo-grid.row-six img{height:200px;}
@media (max-width: 1000px){
  .photo-grid{grid-template-columns:repeat(2,1fr);}
  .photo-grid.row-six{grid-template-columns:repeat(3,1fr);}
}

/* Passions blocks */
.passion-photos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:50px;
}
.passion-photos img{width:100%; height:260px; object-fit:cover;}
.passion-photos.three{grid-template-columns:repeat(3,1fr);}
.passion-photos.three img{height:340px;}
.passion-photos.three img:last-child{grid-column:auto;}
section.passion + section.passion{margin-top:10px;}

/* Portfolio */
.port-category{margin-bottom:70px;}
.port-category:last-child{margin-bottom:0;}
.port-category h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:44px;
  margin:0 0 30px;
}
.port-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.port-grid img{width:100%; height:260px; object-fit:cover; background:#d9e1ef;}
@media (max-width: 1000px){
  .port-grid{grid-template-columns:repeat(2,1fr);}
}

/* Portfolio category landing */
.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top:50px;
}
.category-card{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:4px;
  text-decoration:none;
  color:inherit;
}
.category-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.category-card:hover img{transform:scale(1.05);}
.category-card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 45%);
  display:flex; align-items:flex-end;
  padding:26px;
}
.category-card .cat-title{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:40px;
  color:#fff;
  letter-spacing:.01em;
}
@media (max-width: 1000px){
  .category-grid{grid-template-columns:repeat(2,1fr);}
}

/* Gallery pages (per category) */
.gallery-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:44px;
}
.back-link{
  font-family:'Cormorant Garamond', serif;
  font-size:22px;
  text-decoration:none;
  color:#1c1c1c;
  border-bottom:1px solid #1c1c1c;
  padding-bottom:2px;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.gallery-grid img{
  width:100%; height:280px; object-fit:cover; border-radius:4px;
  cursor:pointer;
}
@media (max-width: 1000px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
.gallery-nav{
  display:flex; justify-content:space-between; margin-top:60px;
  font-family:'Cormorant Garamond', serif; font-size:24px;
}
.gallery-nav a{text-decoration:none; color:#1c1c1c;}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(20,20,20,.9);
  display:none; align-items:center; justify-content:center;
  z-index:100; padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:90vh; border-radius:4px;}
.lightbox-close{
  position:absolute; top:28px; right:40px;
  color:#fff; font-size:34px; cursor:pointer; font-family:'Cormorant Garamond', serif;
}

/* Contact footer bar */
.contact{
  background:#E8EFF9;
  padding:60px 90px 90px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  font-family:'Cormorant Garamond', serif;
  font-size:34px;
}
.contact a{text-decoration:none;}

@media (max-width: 880px){
  header{padding:20px 22px;}
  .panel{padding:56px 24px;}
  .contact{padding:40px 24px 60px;}
  .two-col, .act-cols{grid-template-columns:1fr; gap:36px;}
  .photo-grid, .passion-photos, .port-grid{grid-template-columns:repeat(2,1fr);}
  h1.title{font-size:60px;}
  h2.subtitle{font-size:44px;}
  .logo{font-size:26px;}
}