body{
  margin:0;
  font-family:Helvetica,Arial,sans-serif;
  background:#fff;
  color:#111;
}
/*----------------------------------------------------------------*/
/* Header --------------------------------------------------------*/
/*----------------------------------------------------------------*/

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#ffffffb9;
  z-index:1000;

  transform:translateY(0);
  transition:transform 1s ease-in-out;
}

.header.hidden{
  transform:translateY(-120%);
}

.header-inner{
  max-width:1400px;
  width:97%;
  margin:0 auto;

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

.header #name{
  margin:20px 0;
  font-size:clamp(14px, 2.3vw, 20px);
}

#name a{
  color:inherit;
  text-decoration:none;
}

#name a:visited{
  color:inherit;
}

.nav{
  display:flex;
  align-items:center;
  gap:clamp(1px, 2vw, 20px);
}

.subpage{
  background:transparent;
  border:none;

  font-size:clamp(9px, 1.8vw, 18px);
  text-align:left;
  color:#8e8e8e;

  cursor:pointer;
  transition:transform .2s;
}

.nav .subpage:hover{
  transform:translateY(3px);
}

.photography:hover{
  transform:translateY(3px);
}

/* ------------------------------------------------------------- */
/* Contents   -------------------------------------------------- */
/* ------------------------------------------------------------- */
.wrap{
  /* max-width:1400px; */
  width:100%;
  margin:0 auto;
}

.intro {
  max-width: 1400px;
  width: 97%;
  margin: 50px auto;
  text-align: center;
}
.photo-filter {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 50px);
  margin-bottom: 30px;
}
.continent {
  background: transparent;
  font-size: clamp(9px, 1.8vw, 18px);
  text-align: left;
  gap: clamp(5px, 5vw, 50px);
  /* border: 1px solid #929292; */
  border: none;
  background-color: #cdd6dd;
  border-radius: 1vh;
  padding: 5px 30px;
  color: #363636;
  cursor:pointer;
  transition:transform 0.2s ease;
}
.continent:hover{
  transform:translateY(6px);
}

.text {
  font-size: clamp(12px, 2vw, 20px);
  font-family: Helvetica, Arial, sans-serif;
  color: #868686;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
}

.brand{
  font-weight:700;
  letter-spacing:.08em;
  font-size:20px;
}

.hero{
  position:relative;
  margin-top:100px;
  margin-bottom:50px;
  width:100%;
  overflow:hidden;
  aspect-ratio: 3/1;
}
@media (max-width:768px){
  .hero{ aspect-ratio:3/2; }
}
.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.heroText{
  position:absolute;
  left:32px;
  bottom:28px;
  color:#fff;
}

.heroTitle{
  margin:0;
  font-size:clamp(14px, 4vw, 40px);
  font-weight:300;
}

.heroSub{
  font-size:clamp(9px, 1.5vw, 15px);
  margin-top:10px;
  letter-spacing:.06em;
}
.gallery {
  max-width: 1800px;
  width: 96%;
  margin: 0 auto;
}
.masonry{
  column-count:4;
  column-gap:clamp(6px, 3vw, 40px);
}

@media (max-width:1600px){.masonry{column-count:4}}
@media (max-width:1200px){.masonry{column-count:3}}
@media (max-width:800px){.masonry{column-count:2}}
@media (max-width:300px){.masonry{column-count:1}}

.item{
  break-inside:avoid;
  margin:0 0 clamp(6px, 3vw, 40px);
}

.item img{
  width:100%;
  height:auto;
  display:block;

  cursor:pointer;
  transition:transform 0.2s ease;
}
.item img:hover{
  transform:translateY(6px);
}
.item.hide{
  display:none;
}
.photo-filter button.active{
  font-weight:700;
  color:black;
}
/* ------------------------------------------------------------- */
/* light box  -------------------------------------------------- */
/* ------------------------------------------------------------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.lightbox img{
  max-width:calc(92vw - 20px);
  max-height:calc(92vh - 20px);
  object-fit:contain;

  background:#fff;
  padding:clamp(3px, 2vw, 20px);
  box-sizing:content-box;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#fff;
  font-size:60px;
  cursor:pointer;
  padding:20px;
  user-select:none;
}

.prev{ left:20px; }
.next{ right:20px; }

.rcNotice {
  text-align:center;
  margin-top:100px;
  padding:10px 0;
  color:#000000;
  font-size:clamp(9px, 1.8vw, 18px);
}
.footer {
  text-align:center;
  padding:10px 0;
  margin-bottom: 30px;
  color:#000000;
  font-size:clamp(9px, 1.8vw, 18px);
}