/* style.css - paste into style.css on Neocities */
:root{
--sidebar-w:118px;
--dark:#0b0b0b;
--panel:#e9e9ea;
--accent:#cfcfd2;
--btn-shadow: rgba(0,0,0,0.45);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
body{display:flex;background:
radial-gradient(1200px 600px at 80% 40%, rgba(0,0,0,0.03), transparent 20%),
linear-gradient(180deg,#f5f5f6,#efeff0);
color:#111;}

/* SIDEBAR */
.sidebar{
width:var(--sidebar-w);
min-width:var(--sidebar-w);
background:linear-gradient(#060606,#141414);
color:white;
display:flex;
flex-direction:column;
align-items:center;
padding:16px 8px;
gap:18px;
position:relative;
box-shadow: 8px 0 20px rgba(0,0,0,0.25);
transition:transform .25s ease;
z-index:10;
}
.logo-wrap{width:80px;height:80px;border-radius:50%;background:linear-gradient(180deg,#222,#080808);
display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid rgba(255,255,255,0.06);}
.logo{width:72px;height:72px;object-fit:cover;filter:grayscale(1) contrast(.9);}

.nav{display:flex;flex-direction:column; gap:10px; width:100%; align-items:center;}
.nav-btn{
display:block;
width:86%;
padding:10px 6px;
text-align:center;
color:#100;
text-decoration:none;
background: linear-gradient(180deg,#efefef,#dcdcdc);
border-radius:12px;
font-family: 'UnifrakturCook', Inter, serif;
box-shadow: inset 0 4px 8px rgba(255,255,255,0.6), 0 6px 12px rgba(0,0,0,0.35);
border:1px solid rgba(0,0,0,0.25);
font-size:14px;
line-height:1;
}

/* credits/footer */
.credits{position:absolute;bottom:10px;font-size:11px;color:#cfcfcf;text-align:center;opacity:.9;padding:4px}

/* MAIN */
.main{flex:1;padding:18px 22px;min-height:100vh;position:relative;overflow:auto;}

/* top row - featured */
.top-row{display:flex;align-items:flex-start;justify-content:space-between; gap:12px;}

.featured{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.featured-title{
font-family:'UnifrakturCook', Inter, serif;
font-size:22px;color:#222;padding:6px 10px;border-radius:6px;
background:linear-gradient(180deg,#dcdcdc,#bfbfbf);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.featured-box{
width:310px;height:140px;background:linear-gradient(180deg,#d9d9db,#bfbfc1);
border-radius:6px;box-shadow: 0 12px 30px rgba(0,0,0,0.12) inset;
display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.featured-box img{width:100%;height:100%;object-fit:cover;opacity:.9}

/* search pill */
.search-section{margin-top:18px;display:flex;justify-content:flex-start;}
.search-pill{
display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;
background:linear-gradient(180deg,#f6f6f8,#e7e7e9);
box-shadow: 8px 12px 24px rgba(0,0,0,0.12), inset 0 6px 10px rgba(255,255,255,0.7);
width:84%;
max-width:720px;
}
.search-pill input[type="search"]{
border:0;outline:0;background:transparent;font-size:18px;flex:1;color:#222;
font-family:Inter, system-ui;
}
.menu-circle{
width:52px;height:52px;border-radius:50%;border:0;background:linear-gradient(#f2f2f3,#dedfe1);
box-shadow: 0 8px 16px rgba(0,0,0,0.14), inset 0 6px 10px rgba(255,255,255,0.7);
font-size:22px;
}
.search-icon{
width:42px;height:42px;border-radius:999px;border:0;background:transparent;font-size:20px;
}

/* hamburger (floating) */
.hamburger{
width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(#fff,#e6e6e6);
box-shadow: 6px 10px 18px rgba(0,0,0,0.16);
display:flex;align-items:center;justify-content:center;margin-left:6px;
}
.hamburger .hamburger-lines{
width:20px;height:2px;background:#333;display:block;box-shadow:0 6px 0 #333,0 -6px 0 #333;
}

/* content placeholder */
.content{margin-top:18px;padding:20px;border-radius:12px;background:rgba(255,255,255,0.45);min-height:300px;}

/* RESPONSIVE tweaks */
@media (max-width:880px){
:root{--sidebar-w:86px}
.featured-box{width:220px;height:120px}
.search-pill{width:92%}
}
@media (max-width:640px){
.sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(0);z-index:999;}
.sidebar:not(.show){transform:translateX(-110%);}
.main{padding:14px 14px 80px 14px;}
.featured{align-items:flex-start}
.featured-box{width:100%;height:140px}
}