.dv-doc-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px;
    gap:2rem
}

.dv-record-strip{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-top:1rem;
    color:var(--dv-muted);
    font-size:.7rem
}
.dv-record-strip span{
    padding:.35rem .55rem;
    background:var(--dv-bg-alt);
    border-radius:0px
}





/******************************************************************
 * outdated
 * 
 */



 .dv-codex,.dv-character{
    width:min(var(--dv-width),92%);
    margin-inline:auto;
    padding-block:3.5rem
}
.dv-codex__hero{
    text-align:center;
    max-width:860px;
    margin:0 auto 2rem
}
.dv-codex__seal{
    display:grid;
    place-items:center;
    width:74px;
    height:74px;
    margin:0 auto 1rem;
    color:var(--dv-accent);
    background:var(--dv-accent-soft);
    border:1px solid var(--dv-border);
    border-radius:50%;
    font-size:2rem
}
.dv-codex__hero h1{
    margin:.2em 0
}
.dv-codex__intro{
    color:var(--dv-muted)
}
.dv-codex__metrics{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:.75rem;
    margin:1.2rem 0
}
.dv-codex__metrics span{
    padding:.45rem .7rem;
    background:var(--dv-surface);
    border:1px solid var(--dv-border);
    border-radius:999px;
    font-size:.7rem
}



.dv-search{
    display:flex;
    align-items:center;
    gap:.6rem;
    max-width:680px;
    margin-inline:auto;
    padding:.5rem;
    background:var(--dv-surface);
    border:1px solid var(--dv-border);
}
.dv-search input{
    flex:1;
    border:0;
    background:transparent
}



.dv-codex-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem
}
.dv-codex-card{
    display:flex;
    flex-direction:column;
    min-height:250px;
    padding:1.4rem;
    color:var(--dv-text);
    background:var(--dv-surface);
    border:1px solid var(--dv-border);
    border-radius:var(--dv-radius-lg);
    box-shadow:var(--dv-shadow);
    text-decoration:none
}
.dv-codex-card:hover{
    border-color:var(--dv-accent);
    box-shadow:var(--dv-shadow-lg)
}
.dv-codex-card__topline{
    display:flex;
    justify-content:space-between;
    color:var(--dv-muted);
    font-size:.67rem
}
.dv-codex-card__glyph{
    margin:auto;
    color:var(--dv-accent);
    font-size:2.5rem
}
.dv-codex-card h2{
    margin:.5rem 0
}
.dv-codex-card p{
    color:var(--dv-muted);
    font-size:.9rem
}
.dv-codex-card__link{
    margin-top:auto;
    color:var(--dv-accent);
    font-size:.72rem;
    font-weight:800
}
.dv-codex-card--placeholder{
    opacity:.68
}



 .dv-character{
    --dv-character-accent:var(--dv-accent)
}
.dv-character__hero{
    display:grid;
    grid-template-columns:minmax(260px,38%) minmax(0,1fr);
    gap:2.5rem;
    align-items:center;
    margin-bottom:2rem
}
.dv-character__portrait-frame{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:var(--dv-bg-alt);
    border:1px solid var(--dv-border);
    /* border-radius:var(--dv-radius-lg) */
}
.dv-character__portrait-image{
    width:100%;
    height:100%;
    object-fit:cover
}
.dv-character__portrait-placeholder{
    display:grid;
    place-items:center;
    align-content:center;
    width:100%;
    height:100%;
    color:var(--dv-character-accent)
}
.dv-character__portrait-placeholder span{
    font-size:6rem
}
.dv-character__portrait-placeholder small{
    letter-spacing:.12em
}
.dv-character__record-code{
    display:flex;
    justify-content:space-between;
    margin-top:.6rem;
    color:var(--dv-muted);
    font-size:.7rem
}
.dv-character__classification,.dv-character__epithet{
    color:var(--dv-character-accent);
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase
}
.dv-character__identity h1{
    margin:.15em 0
}
.dv-character__summary{
    color:var(--dv-muted);
    font-size:1.1rem
}
.dv-character__tags{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem
}
.dv-character__tags span{
    padding:.35rem .6rem;
    background:var(--dv-accent-soft);
    border-radius:999px;
    font-size:.72rem
}



.dv-character__quote{
    margin-top:1.5rem
}
.dv-character__dossier{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:2rem
}
.dv-character__facts,.dv-character__section,.dv-character__related{
    padding:1.5rem;
    background:var(--dv-surface);
    border:1px solid var(--dv-border);
    border-radius:var(--dv-radius-lg);
    box-shadow:var(--dv-shadow)
}
.dv-character__facts header span,.dv-character__section-head span{
    color:var(--dv-muted);
    font-size:.68rem
}
.dv-character__facts h2,.dv-character__section-head h2{
    margin:.2rem 0 1rem
}
.dv-character__facts dl div{
    display:grid;
    grid-template-columns:95px 1fr;
    gap:.5rem;
    padding:.55rem 0;
    border-bottom:1px solid var(--dv-border)
}
.dv-character__facts dt{
    color:var(--dv-muted);
    font-size:.75rem
}
.dv-character__facts dd{
    margin:0;
    font-weight:700
}
.dv-character__content{
    display:grid;
    gap:1rem
}
.dv-character__stats{
    display:grid;
    gap:.8rem
}
.dv-character__stat>div:first-child{
    display:flex;
    justify-content:space-between
}
.dv-character__stat-track{
    height:8px;
    overflow:hidden;
    background:var(--dv-bg-alt);
    border-radius:999px
}
.dv-character__stat-track i{
    display:block;
    height:100%;
    background:var(--dv-character-accent)
}
.dv-character__abilities{
    display:grid;
    gap:.5rem;
    margin:0;
    padding:0;
    list-style:none
}
.dv-character__abilities li{
    display:flex;
    gap:.7rem;
    padding:.65rem;
    background:var(--dv-bg-alt);
    border-radius:var(--dv-radius)
}
.dv-character__related{
    margin-top:2rem
}
.dv-character__related>div{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem
}
.dv-character__related a{
    display:flex;
    align-items:center;
    gap:.8rem;
    text-decoration:none
}
.dv-character__related img{
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:50%
}



 @media(max-width:950px){
    .dv-doc-layout{
        grid-template-columns:1fr
    }
    .dv-toc{
        order:-1
    }
    .dv-toc__panel{
        position:static
    }
    .dv-codex-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .dv-character__hero,.dv-character__dossier{
        grid-template-columns:1fr
    }
    .dv-character__portrait{
        max-width:440px
    }
}
 @media(max-width:600px){
    .dv-codex-grid,.dv-character__related>div{
        grid-template-columns:1fr
    }
    .dv-search{
        align-items:stretch;
        flex-wrap:wrap
    }
    .dv-search input{
        flex-basis:70%
    }
    .dv-character{
        padding-block:2rem
    }
}