/* RESET */

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

body{
background:#040404;
color:#eaeaea;
font-family:"JetBrains Mono", monospace;
overflow-x:hidden;
}


/* HEADER */

.header{
text-align:center;
padding:4rem 1rem;
position:relative;
}

.kanji{
font-family:"Noto Sans JP";
font-size:clamp(3rem,10vw,8rem);
letter-spacing:0.2em;
text-shadow:
0 0 10px rgba(120,200,255,0.25);
}

.hud-line{
height:1px;
width:60%;
margin:1rem auto;
background:linear-gradient(to right,transparent,#3aa8ff,transparent);
opacity:0.5;
}


/* GRID ARCHIVE */

.archive{

max-width:1100px;
margin:auto;
padding:2rem;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:2rem;

}


/* CARD */

.card{

position:relative;
background:#090909;
border:1px solid #151515;
padding:1.5rem;
border-radius:12px;
transition:0.35s ease;

}

.card.sketch img {
display: block;
margin-left: auto;
margin-right: auto;
}


.card:hover{

border-color:#3aa8ff;
transform:translateY(-6px) scale(1.02);
box-shadow:0 0 25px rgba(80,160,255,0.1);

}


/* VERTICAL LABEL */

.vertical-label{

position:absolute;
left:-22px;
top:40px;
writing-mode:vertical-rl;
font-size:0.7rem;
letter-spacing:0.3em;
color:#3aa8ff;
opacity:0.7;

}


/* SKETCH */

.preview{

width:100%;
max-width: 600px;
height: auto;
margin:1rem 0;
border-radius:6px;
cursor:pointer;
transition:0.3s;

}

.preview:hover{
transform:scale(1.03);
}


/* LIGHTBOX */

.lightbox{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
align-items:center;
justify-content:center;
z-index:999;

}

.lightbox img{
max-width:90%;
max-height:90%;
}


/* SUBTLE SCANLINE EFFECT */

body::after{

content:"";
pointer-events:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:
repeating-linear-gradient(
transparent,
transparent 2px,
rgba(255,255,255,0.015) 3px
);

}


/* MOBILE */

@media(max-width:600px){

.archive{
padding:1rem;
}

.vertical-label{
display:none;
}

}
/* RESET */

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

body{
background:#040404;
color:#eaeaea;
font-family:"JetBrains Mono", monospace;
overflow-x:hidden;
}


/* HEADER */

.header{
text-align:center;
padding:4rem 1rem;
position:relative;
}

.kanji{
font-family:"Noto Sans JP";
font-size:clamp(3rem,10vw,8rem);
letter-spacing:0.2em;
text-shadow:
0 0 10px rgba(120,200,255,0.25);
}

.hud-line{
height:1px;
width:60%;
margin:1rem auto;
background:linear-gradient(to right,transparent,#3aa8ff,transparent);
opacity:0.5;
}


/* GRID ARCHIVE */

.archive{

max-width:1100px;
margin:auto;
padding:2rem;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:2rem;

}


/* CARD */

.card{

position:relative;
background:#090909;
border:1px solid #151515;
padding:1.5rem;
border-radius:12px;
transition:0.35s ease;

}

.card:hover{

border-color:#3aa8ff;
transform:translateY(-6px) scale(1.02);
box-shadow:0 0 25px rgba(80,160,255,0.1);

}


/* VERTICAL LABEL */

.vertical-label{

position:absolute;
left:-22px;
top:40px;
writing-mode:vertical-rl;
font-size:0.7rem;
letter-spacing:0.3em;
color:#3aa8ff;
opacity:0.7;

}


/* SKETCH */

.preview{

width:100%;
margin:1rem 0;
border-radius:6px;
cursor:pointer;
transition:0.3s;

}

.preview:hover{
transform:scale(1.03);
}


/* LIGHTBOX */

.lightbox{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
align-items:center;
justify-content:center;
z-index:999;

}

.lightbox img{
max-width:90%;
max-height:90%;
}



/* SUBTLE SCANLINE EFFECT */

body::after{

content:"";
pointer-events:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:
repeating-linear-gradient(
transparent,
transparent 2px,
rgba(255,255,255,0.015) 3px
);

}


/* MOBILE */

@media(max-width:600px){

.archive{
padding:1rem;
}

.vertical-label{
display:none;
}

.preview {
  max-width: 100%;
}

}