/* =========================================================
   TALVAREN STUDIOS V2
   DOCUMENT AND READING SURFACES
========================================================= */

.page-document{
    width:min(980px,100%);
    margin:0 auto;
    padding:clamp(24px,5vw,52px);
    color:var(--talvaren-ink);
    background:linear-gradient(180deg,rgba(235,222,188,.97),rgba(207,188,145,.95));
    border:2px solid rgba(75,58,34,.42);
    border-radius:16px;
    box-shadow:0 16px 42px rgba(0,0,0,.40);
}

.page-document + .page-document{margin-top:28px;}
.page-document h1{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:18px;}
.page-document h2{font-size:clamp(1.55rem,3vw,2.35rem);margin:34px 0 14px;}
.page-document h3{font-size:1.25rem;margin:26px 0 10px;}
.page-document p{margin-bottom:18px;line-height:1.75;}
.page-document ul{margin:0 0 22px 1.25rem;}
.page-document li{margin-bottom:8px;}

.page-lede{
    max-width:820px;
    font-size:clamp(1.05rem,2vw,1.25rem);
    line-height:1.8;
}

.page-section-header{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:22px;
}

.page-section-header h1,
.page-section-header h2{margin:0;}

.status-chip{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:5px 10px;
    color:#f5ead4;
    background:#4b3a22;
    border:1px solid rgba(245,234,212,.28);
    border-radius:999px;
    font-size:.78rem;
    font-weight:bold;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.content-list{
    display:grid;
    gap:14px;
    margin:24px 0 0;
    padding:0;
    list-style:none;
}

.content-list-item{
    padding:18px 20px;
    background:rgba(255,255,255,.20);
    border:1px solid rgba(75,58,34,.24);
    border-radius:10px;
}

.content-list-item strong{display:block;margin-bottom:4px;}

.notice-panel{
    margin-top:26px;
    padding:18px 20px;
    background:rgba(75,58,34,.10);
    border-left:4px solid #6d5324;
    border-radius:8px;
}

.talvaren-document-preview{
    display:block;
    width:min(680px,100%);
    margin:0 auto;
    padding:0;
    overflow:hidden;
    background:transparent;
    border:2px solid rgba(229,207,160,.48);
    border-radius:14px;
    box-shadow:0 16px 42px rgba(0,0,0,.40);
    cursor:zoom-in;
}

.talvaren-document-preview img{
    display:block;
    width:100%;
    height:auto;
}

.talvaren-document-preview:focus-visible{
    outline:3px solid var(--talvaren-gold);
    outline-offset:4px;
}

.library-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin-top:24px;
}

.library-card{
    display:flex;
    flex-direction:column;
    min-height:190px;
    padding:22px;
    color:var(--talvaren-ink);
    background:rgba(255,255,255,.20);
    border:1px solid rgba(75,58,34,.28);
    border-radius:12px;
    text-decoration:none;
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
}

.library-card:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.32);
    border-color:rgba(75,58,34,.50);
}

.library-card h2,
.library-card h3{margin-bottom:10px;}
.library-card p{margin-bottom:0;}
.library-card .card-action{margin-top:auto;padding-top:18px;font-weight:bold;}


/* =========================================================
   CLASS AND RACE PROFILES
========================================================= */

.profile-roster{
    margin-left:0 !important;
    padding-left:0;
    list-style:none;
}

.profile-roster > li{
    padding:22px 0 10px;
    scroll-margin-top:24px;
    border-top:1px solid rgba(75,58,34,.24);
}

.profile-roster > li:first-child{
    padding-top:8px;
    border-top:0;
}

.profile-roster > li > strong{
    display:block;
    font-size:1.3rem;
}

.profile-facts{
    margin:12px 0 22px;
    padding:14px 16px;
    background:rgba(75,58,34,.08);
    border:1px solid rgba(75,58,34,.22);
    border-radius:9px;
}

.profile-facts-summary{
    margin-bottom:12px !important;
    font-style:italic;
}

.profile-facts dl{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin:0;
}

.profile-facts dl > div{
    min-width:0;
}

.profile-facts dt{
    font-size:.78rem;
    font-weight:bold;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.profile-facts dd{
    margin:2px 0 0;
    line-height:1.35;
}

.mobile-jump-index{
    display:block;
    margin:22px 0 28px;
    padding:14px;
    background:rgba(75,58,34,.08);
    border:1px solid rgba(75,58,34,.22);
    border-radius:9px;
}

.mobile-jump-index > strong,
.mobile-jump-group > span{
    display:block;
}

.mobile-jump-group{
    margin-top:10px;
}

.mobile-jump-group > span{
    margin-bottom:6px;
    font-size:.78rem;
    font-weight:bold;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.mobile-jump-links{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.mobile-jump-links button{
    min-height:38px;
    padding:7px 9px;
    color:var(--talvaren-ink);
    background:rgba(255,255,255,.24);
    border:1px solid rgba(75,58,34,.28);
    border-radius:6px;
    cursor:pointer;
}

@media(max-width:700px){
    .page-document{padding:24px 18px;border-radius:12px;}
    .library-grid{grid-template-columns:1fr;}

    .profile-facts dl{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}