@import url('https://fonts.cdnfonts.com/css/caveat');
:root{
  --ink:#1c1c1c;
  --grey:#8a8a8a;
  --line:#e7e7e7;
  --bg:#ffffff;
  --panel:#f4f4f4;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* Layout */
.layout{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:280px;
  flex:none;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  padding:48px 40px;
  position:sticky;
  top:0;
  height:100vh;
}
.logo{
  width:100%;
  max-width:180px;
  flex:none;
}
.logo img{width:100%;}
nav{
  flex:1;
  display:flex;
  align-items:center;
  padding-bottom:130px;
}
nav ul{list-style:none;width:100%;}
nav li{margin-bottom:22px;}
nav a{
  font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:15px;
  letter-spacing:.3px;
  color:var(--ink);
  transition:opacity .2s;
}
nav a:hover{opacity:.5;}
nav li.active a{
  border-bottom:1px solid var(--ink);
  padding-bottom:4px;
}
.sidebar-footer{font-size:11px;color:var(--grey);letter-spacing:.5px;}
.social{display:flex;gap:14px;margin-bottom:16px;}
.social a{
  width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  transition:.2s;
}
.social a:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

/* Main */
.main{flex:1;min-width:0;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;height:56px;border-bottom:1px solid var(--line);
  background:var(--panel);
  position:sticky;top:0;z-index:5;
}
.topbar .filter{font-size:11px;letter-spacing:2px;color:#555;}
.topbar .icon{font-size:15px;color:#555;cursor:pointer;}

.filter-tabs{display:flex;gap:26px;}
.filter-tabs .tab{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:#888;cursor:pointer;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.filter-tabs .tab:hover{color:var(--ink);}
.filter-tabs .tab.active{color:var(--ink);border-bottom-color:var(--ink);}

@media (max-width: 900px){
  .filter-tabs{gap:16px;flex-wrap:wrap;}
}

/* Carousel — full-bleed hero, one photo at a time, slow crossfade */
.carousel-viewport{
  position:relative;
  width:100%;
  height:calc(100vh - 56px);
  overflow:hidden;
  background:var(--line);
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.8s ease;
}
.slide.active{opacity:1;}
.slide img{
  width:100%;height:100%;object-fit:contain;
  background:var(--panel);
}

.carousel-arrows{
  position:absolute;
  bottom:28px;right:32px;
  display:flex;gap:10px;
  z-index:4;
}
.carousel-arrow{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;
  cursor:pointer;
  transition:opacity .2s;
}
.carousel-arrow:hover{opacity:.75;}

@media (max-width: 900px){
  .carousel-viewport{height:70vh;}
  .carousel-arrow{width:36px;height:36px;font-size:14px;}
}

.pagefoot{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;border-top:1px solid var(--line);
  background:var(--panel);
  font-size:11px;letter-spacing:1px;color:#666;
}

/* Content sections (about / contact pages) */
section{padding:80px 60px;border-bottom:1px solid var(--line);}
section h2{
  font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;
  font-weight:300;
  font-size:32px;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:24px;
}
section p{
  max-width:640px;
  line-height:1.8;
  color:#444;
  font-size:15px;
}
.about-wrap{display:flex;gap:60px;flex-wrap:wrap;align-items:flex-start;}
.about-photo{flex:none;width:280px;}
.about-photo img{width:100%;filter:grayscale(15%);}

.contact-form{display:grid;gap:16px;max-width:480px;margin-top:28px;}
.contact-form input, .contact-form textarea{
  border:none;border-bottom:1px solid var(--line);
  padding:10px 4px;font-size:14px;font-family:inherit;
  background:transparent;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none;border-color:var(--ink);}
.contact-form button{
  justify-self:start;margin-top:8px;
  background:var(--ink);color:#fff;border:none;
  padding:12px 30px;font-size:12px;letter-spacing:2px;cursor:pointer;
  transition:opacity .2s;
}
.contact-form button:hover{opacity:.8;}

footer{
  text-align:center;padding:28px;font-size:11px;color:var(--grey);letter-spacing:1px;
}

@media (max-width: 900px){
  .layout{flex-direction:column;}
  .sidebar{
    width:100%;height:auto;position:relative;
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:20px 24px;
  }
  .logo{margin-bottom:0;max-width:120px;}
  nav{flex:none;padding-bottom:0;}
  nav ul{display:flex;gap:16px;flex-wrap:wrap;}
  nav a{font-size:13px;}
  .sidebar-footer{display:none;}
  section{padding:48px 24px;}
}