body{margin:0;background:#000;font-family:'Noto Serif JP',serif;color:#fff}

.logo{
 position:fixed;top:25px;left:40px;
 letter-spacing:.6em;font-size:18px;opacity:.7;z-index:200
}

.mail{
 position:fixed;top:25px;right:40px;
 font-size:13px;letter-spacing:.2em;opacity:.7;z-index:200
}
.mail a{color:#fff;text-decoration:none}

.hero{height:100vh;overflow:hidden}
.hero-video{width:100%;height:100%;object-fit:cover}

.grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
 gap:0;
}

.tile{aspect-ratio:9/16;overflow:hidden;cursor:pointer}
.tile video{
 width:100%;height:100%;object-fit:cover;
 opacity:0;transition:transform 1.2s ease,opacity 1s ease
}
.tile video.visible{opacity:1}
.tile:hover video{transform:scale(1.05)}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:300}
.modal.active{display:flex}
.modal-bg{
 position:absolute;inset:0;
 background:rgba(0,0,0,.85);
 backdrop-filter:blur(10px)
}
.modal-inner{
 width:min(500px,90%);
 aspect-ratio:9/16;
 transform:scale(.8);opacity:0;
 transition:all .4s ease;z-index:2
}
.modal.active .modal-inner{transform:scale(1);opacity:1}
.modal-inner video{width:100%;height:100%;object-fit:cover}

/* Sand close effect */
.sand{
 position:fixed;inset:0;pointer-events:none;
 background:radial-gradient(circle at center,
 rgba(194,162,136,.6) 0%,
 rgba(194,162,136,.4) 30%,
 rgba(194,162,136,.2) 50%,
 rgba(194,162,136,0) 70%);
 opacity:0;transform:scale(.6);
 transition:all .5s ease;z-index:250
}
.sand.active{opacity:1;transform:scale(1.4)}

/* Mobile */
@media(max-width:768px){
 .logo{top:18px;left:18px;font-size:12px;letter-spacing:.4em}
 .mail{top:18px;right:18px;font-size:10px;letter-spacing:.15em}
 .grid{grid-template-columns:repeat(3,1fr)}
 .tile{aspect-ratio:1/1}
}