:root{
    --accent-pink:#9a5ead;
    --bg:#0F1320;
    --sidebar-bg:#151A2B;
    --panel-bg:#1A1F33;
    --text:#E6E9F2;
    --muted:#9AA3C0;
    --border-light:rgba(230, 233, 242, 0.2);
    --shadow:0 20px 40px rgba(0, 0, 0, 0.55);
    font-family:system-ui,"Segoe UI"
}
*{
    box-sizing:border-box
}
body{
    background-color:var(--bg);
    background-size:cover;
    color:var(--text);
    margin:0
}
a{
    color:inherit;text-decoration:none
}
.page-shell{
    display: grid;
    grid-template-columns: clamp(212px, 22vw, 212px) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:"brand main""nav main""footer main";
}
.sidebar{
    grid-area:brand;
    padding:2rem 1.5rem;
    background-color:var(--sidebar-bg);
    display:flex;flex-direction:column;
    justify-content:flex-start;
    min-width: 0
}
.sidebar .logo{
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--text);
    display:inline-block
}
.sidebar .logo small{
    display:block;
    font-size:1rem;
    letter-spacing:.16em;
    margin-top:.35rem;
    color:var(--muted)
}
.sidebar-nav{
    grid-area:nav;
    display:flex;
    flex-direction:column;
    gap:0;
    margin:0;
    padding:1.75rem 1.5rem 1rem;
    background-color:var(--sidebar-bg);
    border-bottom:1px solid var(--border-light)
}
.sidebar-nav a{
    padding:.65rem .9rem;
    font-size:1rem;
    font-weight:600;
    letter-spacing:.1em;
    color:var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-nav a:hover{
    transition:color .17s ease,filter .17s ease;
    color:var(--text)
}
.sidebar-nav a.current{
    color:var(--text);
    background:var(--accent-pink);
    border-radius:0
}
.badge-wall{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    padding:0;
    margin:0;
    align-items:flex-start;
    background-color:transparent;
    line-height:0;
    font-size:0;
    justify-content:flex-start;
    align-content:flex-start
}
.badge-link{
    display:inline-flex;
    width:88px;
    height:31px;
    margin:0;
    text-decoration:none;
    padding:0;
    flex:0 0 auto
}
.badge-link img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    margin:0
}
.sidebar-footer{
    grid-area:footer;
    margin:0;
    padding:1.5rem;
    font-size:1rem;
    color:var(--muted);
    letter-spacing:.2em;
    background-color:#202530
}
main{
    flex:1;
    padding:2.25rem clamp(1.5rem,2vw,3rem);
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)),url("img/somnigradbg.avif");
    background-size: cover;
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    grid-area:main
}
.content{
    width:min(650px,100%);
    display:flex;
    flex-direction:column;
    gap:0
}
.content h1{
    color:#d2dcfd;
    font-size:clamp(2.3rem, 4vw, 3rem);
    letter-spacing:.022em;
    margin:0 0 .5rem
}
.eyebrow{
    font-size:.5rem;
    color:rgba(255,255,255,.55)
}
.content h2{
    color:#6acfff;
    font-size:clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing:.04em;margin-bottom:.25rem
}
.content h2 a:hover{
    transition:color .17s ease, filter .17s ease;
    color:#711e5b
}
.content p{
    color:var(--muted);
    font-size:1.25rem
}
.details-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:.85rem
}
.details-list span{
    display:block;
    font-size:1rem;
    letter-spacing:.1em;
    color:var(--muted)
}
.details-list strong{
    font-size:1.1rem;
    font-weight:600;
    color:var(--text)
}
.media-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr))
}
.media-grid figure{
    padding:.85rem;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    align-items:center
}
.media-grid figure .cover{
    width:100%;
    aspect-ratio:1/1;border-radius:0;
    overflow:hidden
}
.media-grid figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:saturate(1.2) contrast(1.05)
}
.media-grid figcaption{
    text-align:center;
    font-size:clamp(1.8rem,3vw,2.4rem);
    letter-spacing:.04em;color:#6acfff;
    margin:0;
}
.media-card{
    display:block;
    text-decoration:none;
    color:inherit
}
.media-card figure{
    margin:0
}
.media-card:hover figcaption{
    transition:color .17s ease, filter .17s ease;
    color:#711e5b;
}
.monospace{
    font-family:"Segoe UI";
    font-size:.85rem;
    letter-spacing:.1em;
    color:var(--muted)
}
.item-page .media-grid{
    grid-template-columns: repeat(2, 200px);
    justify-content:start;
    gap:1rem;
}
.item-page .content{
    max-width:460px;
}
@media (max-width: 768px){
    .item-page .media-grid{
        grid-template-columns:1fr;
        justify-items:center;
    }
}
.item-page .media-grid figure{
    width:100%;
    max-width:260px;
}
@media (max-width: 768px) {
    .page-shell {
        grid-template-columns:1fr;
        grid-template-areas:"brand""main""nav""footer";
    }
    .sidebar,.sidebar-nav,.sidebar-footer {
        border-right:none;
    }
}
.sidebar,.sidebar-footer,.sidebar-nav{
    border-right:none
}
main{
    padding:2rem
}