/* ========================================
   HikaruMedia
   Version 1.0
======================================== */

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

:root {

    --bg: #0f0f10;
    --sidebar: #18181b;
    --border: #2b2b31;

    --text: #fafafa;
    --text-secondary: #a1a1aa;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: "Inter", sans-serif;
    background: var(--bg);
    color: var(--text);
    user-select:none;

}

a {

    color: inherit;
    text-decoration: none;

}

img {

    display: block;
    width: 100%;
    -webkit-touch-callout:none;

}

.layout {

    display: flex;
    min-height: 100vh;

}

/* ========================================
   Sidebar
======================================== */

.sidebar {

    width: 280px;
    min-width: 280px;

    padding: 48px 32px;

    background: var(--sidebar);

    border-right: 1px solid var(--border);

    position: sticky;
    top: 0;

    height: 100vh;

    display: flex;
    flex-direction: column;

}

.profile{

    margin-bottom:40px;

}

.logo{

    width:72px;
    height:72px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:24px;

}

.logo img{

    width:72px;
    height:72px;
    border-radius:18px;

}

.logo span{

    font-size:24px;
    font-weight:700;
    letter-spacing:2px;

}

.profile h1 {

    font-size: 28px;

    margin-bottom: 8px;

}

.profile span {

    display: block;

    color: var(--text-secondary);

    margin-bottom: 24px;

}

.profile p{

    color:var(--text-secondary);

    line-height:1.8;

    max-width:190px;

}

.social{

    margin:48px 0 32px;

}

.social a {

    color: var(--text-secondary);

    transition: .3s;

}

.social a:hover {

    color: white;

}

.copyright {

    margin-top:24px;

    color: var(--text-secondary);

    font-size: 14px;

}

/* ========================================
   Gallery
======================================== */

.gallery{

    column-count:3;
    column-gap:20px;

}

.content{

    flex:1;

    padding:24px;

}

@media(max-width:1200px){

    .gallery{

        column-count:2;

    }

}

@media(max-width:768px){

    .gallery{

        column-count:1;

    }

}

.photo{

    break-inside:avoid;

    margin-bottom:20px;

    overflow:hidden;

    border-radius:14px;

    position:relative;

}

.image-protection{

    position:absolute;

    inset:0;

    z-index:5;

    background:transparent;

}

.photo img{

    width:100%;

    display:block;

    cursor:pointer;

    transition:.35s;

}

.photo:hover img{

    transform:scale(1.03);

}

.photo{

    position: relative;

    overflow: hidden;

    border-radius:18px;

}

.photo img{

    transition:.35s;

}

.photo:hover img{

    transform:scale(1.04);

    filter:brightness(.75);

}

.photo-info{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:20px;

    color:white;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.85)

    );

    opacity:0;

    transition:.3s;

}

.photo:hover .photo-info{

    opacity:1;

}

.photo-info h3{

    font-size:18px;

    font-weight:600;

}

.empty-gallery{

    color:#888;

    font-size:20px;

    text-align:center;

    margin-top:120px;

}

/* ========================================
   Responsive
======================================== */

@media (max-width:1200px){

    .gallery{

        column-count:2;

    }

}

@media (max-width:768px){

    .layout{

        display:block;

    }

    .sidebar{

        width:100%;
        min-width:100%;
        height:auto;

        position:relative;

        border-right:none;

        border-bottom:1px solid var(--border);

    }

    .gallery{

        column-count:1;

    }

}


::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#2d2d2d;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#444;

}

/* ==========================================
   LIGHTBOX
========================================== */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:40px;

}

.lightbox.active{

    display:flex;

}

.lightbox-content{

    display:flex;

    gap:40px;

    align-items:flex-start;

    max-width:1400px;

    width:100%;

}

#lightbox-image{

    max-width:75%;

    max-height:90vh;

    border-radius:10px;

    object-fit:contain;

}

.lightbox-info{

    width:320px;

    color:#fff;

}

.lightbox-info h2{

    margin-bottom:15px;

    font-size:28px;

}

.lightbox-info p{

    color:#bfbfbf;

    line-height:1.7;

    margin-bottom:25px;

}

.meta{

    display:flex;

    flex-direction:column;

    gap:10px;

    color:#8d8d8d;

    font-size:14px;

}

.close{

    position:absolute;

    top:25px;

    right:35px;

    font-size:42px;

    cursor:pointer;

    color:#fff;

    transition:.2s;

}

.close:hover{

    opacity:.7;

}

/* ==========================================
   FEATURED PHOTO
========================================== */

.featured{

    margin-bottom:32px;

    border-radius:18px;

    overflow:hidden;

}

.featured img{

    width:100%;

    height:auto;

    display:block;

}

.featured:hover img{

    transform:scale(1.02);

}

.featured-overlay{

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 40px;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.8),
        rgba(0,0,0,0)
    );

    color: white;

}

.featured-overlay h2{

    font-size:42px;

    margin-bottom:10px;

}

.featured-overlay p{

    color:#ddd;

}

.gallery img,
.featured img,
#lightbox-image{

    -webkit-user-drag:none;
    user-select:none;
    pointer-events:auto;

}