/* ==========================================================================
Pruinae Enneis - Shared Character Page Styles
La Guerre de l'Hérésie

This stylesheet is intended to be reusable by other character pages.
Character-specific content and imagery remain in the HTML file.
========================================================================== */

/* --------------------------------------------------------------------------
1. Theme variables and global document styles
-------------------------------------------------------------------------- */
:root {
    --gold: #d8b46a;
    --gold2: #806132;
    --ink: #080b13;
    --paper: #e9dfc7;
    --ruby: #8d2639;
    --blue:#80c7ff}

    * {
        box-sizing:border-box}

        html {
            scroll-behavior:smooth}

            body {
                margin: 0;
                color: var(--paper);
                font-family: Georgia,'Times New Roman',serif;
                background: radial-gradient(circle at 15% 15%,#182847 0,transparent 30%),radial-gradient(circle at 82% 22%,#3b1220 0,transparent 25%),linear-gradient(#05070c,#0a0e19 55%,#05070b);
                min-height:100vh}

                /* --------------------------------------------------------------------------
                2. Magical star field and page frame
                -------------------------------------------------------------------------- */

                .stars {
                    position: fixed;
                    inset: 0;
                    pointer-events: none;
                    opacity: .55;
                    background-image: radial-gradient(#fff 1px,transparent 1px),radial-gradient(#d7b56c 1px,transparent 1px);
                    background-size: 83px 83px,131px 131px;
                    background-position: 0 0,35px 22px;
                    mask-image:linear-gradient(to bottom,#000,transparent 90%)}

                    body:before {
                        content: '';
                        position: fixed;
                        inset: 10px;
                        border: 1px solid #6d522b;
                        box-shadow: inset 0 0 45px #000;
                        pointer-events: none;
                        z-index:20}

                        /* --------------------------------------------------------------------------
                        3. Header and primary navigation
                        -------------------------------------------------------------------------- */

                        .top {
                            height: 88px;
                            padding: 15px 5vw;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            border-bottom: 1px solid #6e542d;
                            background: #05070dcc;
                            backdrop-filter: blur(10px);
                            position: relative;
                            z-index:10}

                            .brand {
                                display: flex;
                                align-items: center;
                                gap: 13px;
                                letter-spacing: .1em;
                                color:#ead19a}

                                .sigil {
                                    font-size: 38px;
                                    text-shadow:0 0 18px #ffd778}

                                    .top nav {
                                        display: flex;
                                        gap:28px}

                                        .top a {
                                            color: #cdbb98;
                                            text-decoration: none;
                                            font-size: 14px;
                                            letter-spacing:.08em}

                                            .top a:hover {
                                                color: #fff3c7;
                                                text-shadow:0 0 12px #e9c46a}

                                                /* --------------------------------------------------------------------------
                                                4. Main page container and breadcrumbs
                                                -------------------------------------------------------------------------- */

                                                .page {
                                                    width: min(1260px,92vw);
                                                    margin:auto}

                                                    /* --------------------------------------------------------------------------
                                                    5. Character hero, portrait and magical ornamentation
                                                    -------------------------------------------------------------------------- */

                                                    .hero {
                                                        min-height: 780px;
                                                        display: grid;
                                                        grid-template-columns: 52% 48%;
                                                        border-left: 1px solid #70552e;
                                                        border-right: 1px solid #70552e;
                                                        position: relative;
                                                        box-shadow:0 0 70px #000}

                                                        .portrait-wrap {
                                                            position: relative;
                                                            min-height: 780px;
                                                            overflow: hidden;
                                                            background:radial-gradient(circle at 50% 38%,#395c86 0,#17243b 28%,#090d16 65%)}

                                                            .portrait-wrap:after {
                                                                content: '';
                                                                position: absolute;
                                                                inset: 0;
                                                                box-shadow: inset -70px 0 100px #090b12,inset 0 -90px 100px #06080d;
                                                                pointer-events:none}

                                                                .portrait {
                                                                    width: 100%;
                                                                    height: 100%;
                                                                    object-fit: cover;
                                                                    position: absolute;
                                                                    z-index:3}

                                                                    .fallback {
                                                                        display: none;
                                                                        place-items: center;
                                                                        text-align: center;
                                                                        position: absolute;
                                                                        inset: 0;
                                                                        z-index: 3;
                                                                        font-size: 28px;
                                                                        color:#c9b990}

                                                                        .fallback small {
                                                                            font-size:13px}

                                                                            .arcane-ring {
                                                                                position: absolute;
                                                                                border: 1px solid #d8c68a88;
                                                                                border-radius: 50%;
                                                                                z-index: 2;
                                                                                box-shadow:0 0 25px #7cc8ff55,inset 0 0 25px #7cc8ff33}

                                                                                .r1 {
                                                                                    width: 470px;
                                                                                    height: 470px;
                                                                                    left: 50%;
                                                                                    top: 42%;
                                                                                    transform:translate(-50%,-50%)}

                                                                                    .r2 {
                                                                                        width: 390px;
                                                                                        height: 390px;
                                                                                        left: 50%;
                                                                                        top: 42%;
                                                                                        transform: translate(-50%,-50%) rotate(25deg);
                                                                                        border-style:dashed}

                                                                                        .runes {
                                                                                            position: absolute;
                                                                                            z-index: 2;
                                                                                            top: 18%;
                                                                                            left: 5%;
                                                                                            right: 5%;
                                                                                            text-align: center;
                                                                                            color: #f1d78c;
                                                                                            letter-spacing: 15px;
                                                                                            text-shadow:0 0 13px #8ed8ff}

                                                                                            .portrait-label {
                                                                                                position: absolute;
                                                                                                z-index: 5;
                                                                                                bottom: 28px;
                                                                                                left: 35px;
                                                                                                font-size: 12px;
                                                                                                letter-spacing: .28em;
                                                                                                color:#e3c884}

                                                                                                .hero-copy {
                                                                                                    padding: 52px 55px 45px;
                                                                                                    background: linear-gradient(135deg,#0c101bd9,#080a10f2),repeating-linear-gradient(45deg,transparent 0 12px,#ffffff05 12px 13px);
                                                                                                    position:relative}

                                                                                                    .hero-copy:before,.registry:before,.lore:before {
                                                                                                        content: '✦';
                                                                                                        position: absolute;
                                                                                                        color: #d7b367;
                                                                                                        text-shadow:0 0 12px #e6c475}

                                                                                                        .hero-copy:before {
                                                                                                            right: 22px;
                                                                                                            top:18px}

                                                                                                            .eyebrow {
                                                                                                                color: #cda85c;
                                                                                                                letter-spacing: .25em;
                                                                                                                font-size: 11px;
                                                                                                                text-align:center}

                                                                                                                h1 {
                                                                                                                    font-weight: 400;
                                                                                                                    font-size: 66px;
                                                                                                                    line-height: .9;
                                                                                                                    margin: 42px 0 10px;
                                                                                                                    text-align: center;
                                                                                                                    text-shadow:0 2px 18px #000}

                                                                                                                    h1 span {
                                                                                                                        display: block;
                                                                                                                        color:#f1dfb6}

                                                                                                                        .ornament {
                                                                                                                            text-align: center;
                                                                                                                            color: #b18b4c;
                                                                                                                            margin:23px}

                                                                                                                            .hero-copy h2 {
                                                                                                                                text-align: center;
                                                                                                                                text-transform: uppercase;
                                                                                                                                letter-spacing: .17em;
                                                                                                                                font-size: 17px;
                                                                                                                                font-weight: 400;
                                                                                                                                color:#dfcda9}

                                                                                                                                .hero-copy blockquote {
                                                                                                                                    text-align: center;
                                                                                                                                    font-style: italic;
                                                                                                                                    line-height: 1.7;
                                                                                                                                    color: #d9d2c5;
                                                                                                                                    margin:28px 25px}

                                                                                                                                    /* --------------------------------------------------------------------------
                                                                                                                                    6. Character registry
                                                                                                                                    -------------------------------------------------------------------------- */

                                                                                                                                    .registry {
                                                                                                                                        margin-top: 35px;
                                                                                                                                        padding: 20px 30px 25px;
                                                                                                                                        border: 1px solid #806238;
                                                                                                                                        position: relative;
                                                                                                                                        background: linear-gradient(#191611cc,#0c0c0ddd);
                                                                                                                                        box-shadow:inset 0 0 25px #000,0 0 22px #000}

                                                                                                                                        .registry:after {
                                                                                                                                            content: '';
                                                                                                                                            position: absolute;
                                                                                                                                            inset: 5px;
                                                                                                                                            border: 1px solid #5b462b;
                                                                                                                                            pointer-events:none}

                                                                                                                                            .registry h3 {
                                                                                                                                                text-align: center;
                                                                                                                                                margin: 0 0 17px;
                                                                                                                                                color: #e0bd74;
                                                                                                                                                font-weight: 400;
                                                                                                                                                font-size:25px}

                                                                                                                                                .registry dl {
                                                                                                                                                    display: grid;
                                                                                                                                                    grid-template-columns: 42% 58%;
                                                                                                                                                    margin: 0;
                                                                                                                                                    font-size: 14px;
                                                                                                                                                    line-height:1.65}

                                                                                                                                                    .registry dt {
                                                                                                                                                        color:#c6a766}

                                                                                                                                                        .registry dd {
                                                                                                                                                            margin: 0;
                                                                                                                                                            color:#eee4cf}

                                                                                                                                                            /* --------------------------------------------------------------------------
                                                                                                                                                            7. Lore chapters
                                                                                                                                                            -------------------------------------------------------------------------- */

                                                                                                                                                            .lore {
                                                                                                                                                                position: relative;
                                                                                                                                                                display: grid;
                                                                                                                                                                grid-template-columns: 100px 1fr;
                                                                                                                                                                gap: 25px;
                                                                                                                                                                padding: 58px 55px;
                                                                                                                                                                margin: 22px 0;
                                                                                                                                                                border: 1px solid #66502e;
                                                                                                                                                                background: linear-gradient(110deg,#111723ed,#080b11ed);
                                                                                                                                                                box-shadow:inset 0 0 45px #000,0 18px 40px #0007}

                                                                                                                                                                .lore:before {
                                                                                                                                                                    right: 22px;
                                                                                                                                                                    top:16px}

                                                                                                                                                                    .lore h2 {
                                                                                                                                                                        font-weight: 400;
                                                                                                                                                                        color: #e3c17a;
                                                                                                                                                                        font-size: 31px;
                                                                                                                                                                        margin: 0 0 20px;
                                                                                                                                                                        text-transform: uppercase;
                                                                                                                                                                        letter-spacing: .08em;
                                                                                                                                                                        border-bottom: 1px solid #55452e;
                                                                                                                                                                        padding-bottom:12px}

                                                                                                                                                                        .lore p {
                                                                                                                                                                            font-size: 17px;
                                                                                                                                                                            line-height: 1.8;
                                                                                                                                                                            color: #d9d5cc;
                                                                                                                                                                            margin:0}

                                                                                                                                                                            .lore b {
                                                                                                                                                                                color: #f0d596;
                                                                                                                                                                                font-weight:400}

                                                                                                                                                                                .chapter-mark {
                                                                                                                                                                                    font-size: 58px;
                                                                                                                                                                                    color: #c9a65e;
                                                                                                                                                                                    text-align: center;
                                                                                                                                                                                    border-right: 1px solid #59462c;
                                                                                                                                                                                    padding-top: 5px;
                                                                                                                                                                                    text-shadow:0 0 18px #8fbfff55}

                                                                                                                                                                                    .drop {
                                                                                                                                                                                        float: left;
                                                                                                                                                                                        font-size: 60px;
                                                                                                                                                                                        line-height: .75;
                                                                                                                                                                                        margin: 8px 8px 0 0;
                                                                                                                                                                                        color: #e1bb68;
                                                                                                                                                                                        text-shadow:0 0 12px #dcae55}

                                                                                                                                                                                        .lore:nth-of-type(even) {
                                                                                                                                                                                            background:linear-gradient(110deg,#161019ed,#080b11ed)}

                                                                                                                                                                                            /* --------------------------------------------------------------------------
                                                                                                                                                                                            9. Footer
                                                                                                                                                                                            -------------------------------------------------------------------------- */

                                                                                                                                                                                            footer {
                                                                                                                                                                                                text-align: center;
                                                                                                                                                                                                color: #c4a460;
                                                                                                                                                                                                padding: 48px 0 60px;
                                                                                                                                                                                                letter-spacing: .22em;
                                                                                                                                                                                                font-size:13px}

                                                                                                                                                                                                @media(max-width:850px) {
                                                                                                                                                                                                    .top nav {
                                                                                                                                                                                                        display:none}

                                                                                                                                                                                                        .hero {
                                                                                                                                                                                                            grid-template-columns:1fr}

                                                                                                                                                                                                            .portrait-wrap {
                                                                                                                                                                                                                min-height:600px}

                                                                                                                                                                                                                .hero-copy {
                                                                                                                                                                                                                    padding:42px 28px}

                                                                                                                                                                                                                    h1 {
                                                                                                                                                                                                                        font-size:52px}

                                                                                                                                                                                                                        .lore {
                                                                                                                                                                                                                            grid-template-columns: 55px 1fr;
                                                                                                                                                                                                                            padding: 40px 25px;
                                                                                                                                                                                                                            gap:18px}

                                                                                                                                                                                                                            .chapter-mark {
                                                                                                                                                                                                                                font-size:35px}

                                                                                                                                                                                                                                .lore h2 {
                                                                                                                                                                                                                                    font-size:24px}

                                                                                                                                                                                                                                    .lore p {
                                                                                                                                                                                                                                        font-size:16px}

                                                                                                                                                                                                                                    }


                                                                                                                                                                                                                                    .brand {
                                                                                                                                                                                                                                        text-decoration: none;
                                                                                                                                                                                                                                        color:inherit}

                                                                                                                                                                                                                                        .breadcrumbs {
                                                                                                                                                                                                                                            display: flex;
                                                                                                                                                                                                                                            gap: .7rem;
                                                                                                                                                                                                                                            align-items: center;
                                                                                                                                                                                                                                            flex-wrap: wrap;
                                                                                                                                                                                                                                            margin: 1rem 0 1.5rem;
                                                                                                                                                                                                                                            color: #a9997d;
                                                                                                                                                                                                                                            font-size: .78rem;
                                                                                                                                                                                                                                            letter-spacing: .08em;
                                                                                                                                                                                                                                            text-transform:uppercase}

                                                                                                                                                                                                                                            .breadcrumbs a {
                                                                                                                                                                                                                                                color: #d5b778;
                                                                                                                                                                                                                                                text-decoration:none}

                                                                                                                                                                                                                                                .hero-subtitle {
                                                                                                                                                                                                                                                    font-family: Georgia,'Times New Roman',serif;
                                                                                                                                                                                                                                                    font-size: clamp(1.25rem,2vw,2rem);
                                                                                                                                                                                                                                                    letter-spacing: .12em;
                                                                                                                                                                                                                                                    text-transform: uppercase;
                                                                                                                                                                                                                                                    color: #e8d9b9;
                                                                                                                                                                                                                                                    text-align: center;
                                                                                                                                                                                                                                                    margin:.35rem 0 1rem}

                                                                                                                                                                                                                                                    /* --------------------------------------------------------------------------
                                                                                                                                                                                                                                                    8. Related universe links
                                                                                                                                                                                                                                                    -------------------------------------------------------------------------- */

                                                                                                                                                                                                                                                    .portal {
                                                                                                                                                                                                                                                        margin: 4rem 0 2rem;
                                                                                                                                                                                                                                                        text-align: center;
                                                                                                                                                                                                                                                        padding: 2.5rem 1rem;
                                                                                                                                                                                                                                                        border-top: 1px solid rgba(200,163,91,.35);
                                                                                                                                                                                                                                                        border-bottom: 1px solid rgba(200,163,91,.35);
                                                                                                                                                                                                                                                        background:linear-gradient(90deg,transparent,rgba(55,39,69,.22),transparent)}

                                                                                                                                                                                                                                                        .portal h2 {
                                                                                                                                                                                                                                                            font-family: Georgia,'Times New Roman',serif;
                                                                                                                                                                                                                                                            color: #e7cf9a;
                                                                                                                                                                                                                                                            font-weight: 400;
                                                                                                                                                                                                                                                            font-size: clamp(1.8rem,4vw,3rem);
                                                                                                                                                                                                                                                            margin:.5rem 0 1.6rem}

                                                                                                                                                                                                                                                            .portal-links {
                                                                                                                                                                                                                                                                display: grid;
                                                                                                                                                                                                                                                                grid-template-columns: repeat(3,1fr);
                                                                                                                                                                                                                                                                gap:1rem}

                                                                                                                                                                                                                                                                .portal-links a {
                                                                                                                                                                                                                                                                    display: grid;
                                                                                                                                                                                                                                                                    gap: .35rem;
                                                                                                                                                                                                                                                                    padding: 1.3rem;
                                                                                                                                                                                                                                                                    border: 1px solid rgba(199,158,81,.35);
                                                                                                                                                                                                                                                                    background: rgba(9,11,18,.65);
                                                                                                                                                                                                                                                                    color: #eee2c7;
                                                                                                                                                                                                                                                                    text-decoration: none;
                                                                                                                                                                                                                                                                    transition:.25s}

                                                                                                                                                                                                                                                                    .portal-links a:hover {
                                                                                                                                                                                                                                                                        transform: translateY(-3px);
                                                                                                                                                                                                                                                                        border-color: #d3ad65;
                                                                                                                                                                                                                                                                        box-shadow:0 0 30px rgba(108,77,153,.18)}

                                                                                                                                                                                                                                                                        .portal-links span {
                                                                                                                                                                                                                                                                            font-size: 1.35rem;
                                                                                                                                                                                                                                                                            color:#d3ad65}

                                                                                                                                                                                                                                                                            .portal-links small {
                                                                                                                                                                                                                                                                                color:#aaa2a0}

                                                                                                                                                                                                                                                                                .portrait {
                                                                                                                                                                                                                                                                                    object-position:center top}

                                                                                                                                                                                                                                                                                    footer a {
                                                                                                                                                                                                                                                                                        color: inherit;
                                                                                                                                                                                                                                                                                        text-decoration:none}

                                                                                                                                                                                                                                                                                        @media(max-width:760px) {
                                                                                                                                                                                                                                                                                            .portal-links {
                                                                                                                                                                                                                                                                                                grid-template-columns:1fr}

                                                                                                                                                                                                                                                                                                .breadcrumbs {
                                                                                                                                                                                                                                                                                                    margin-top:.5rem}

                                                                                                                                                                                                                                                                                                }

/* Official white logo in the main brand position */
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand-white-logo { display:block; width:clamp(180px, 25vw, 420px); height:auto; max-width:100%; margin:0; object-fit:contain; }
.brand-white-logo:hover { transform:none; }
.character-name, .character-title, h1 { white-space:nowrap; }

/* Header logo size override: isolated from legacy global img rules */
a.brand { display:inline-flex; align-items:center; width:auto; height:auto; flex:0 0 auto; }
a.brand > img.brand-white-logo {
    display:block;
    width:190px !important;
    max-width:190px !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain;
    transform:none !important;
}
a.brand:hover > img.brand-white-logo { transform:none !important; }
@media screen and (max-width:700px) {
    a.brand > img.brand-white-logo { width:145px !important; max-width:145px !important; }
}


/* ==========================================================================
   Character identity: always one line
   ========================================================================== */

/* Give the text block the full available width instead of a narrow text column. */
.hero-copy,
.hero-content,
.character-identity,
.character-heading {
    min-width: 0;
    width: 100%;
    max-width: none;
}

/* Pruinae Enneis: one line at every supported viewport width. */
.hero h1,
.character-name,
h1.character-name {
    display: block;
    width: 100%;
    max-width: none;
    white-space: nowrap !important;
    overflow: visible;
    font-size: clamp(2rem, 5.2vw, 5.2rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.01em;
}

/* La Sylphide du lac Azur: one line too. */
.character-title,
.character-title-nowrap,
.hero-subtitle,
.hero .subtitle {
    display: block;
    width: 100%;
    max-width: none;
    white-space: nowrap !important;
    overflow: visible;
    font-size: clamp(0.8rem, 2vw, 1.55rem) !important;
    line-height: 1.15 !important;
    letter-spacing: clamp(0.04em, 0.25vw, 0.14em);
}

/* On narrow screens shrink the typography instead of wrapping it. */
@media screen and (max-width: 700px) {
    .hero h1,
    .character-name,
    h1.character-name {
        font-size: clamp(1.65rem, 8.8vw, 3rem) !important;
        letter-spacing: 0 !important;
    }

    .character-title,
    .character-title-nowrap,
    .hero-subtitle,
    .hero .subtitle {
        font-size: clamp(0.64rem, 3.25vw, 1rem) !important;
        letter-spacing: 0.055em;
    }
}


/* Definitive Pruinae name fix: fit the real hero text column, never wrap. */
h1.character-name-fixed {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: clamp(2.15rem, 4.15vw, 4.35rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
}

@media screen and (max-width: 900px) {
    h1.character-name-fixed { font-size: clamp(1.85rem, 7vw, 3.2rem) !important; }
}

@media screen and (max-width: 520px) {
    h1.character-name-fixed { font-size: clamp(1.55rem, 8.3vw, 2.35rem) !important; }
}


/* ==========================================================================
   HARD FIX: Pruinae Enneis must be one physical visual line
   ========================================================================== */
h1.character-name-force {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: pre !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    font-size: clamp(2rem, 4vw, 4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
}

/* Scale to fit narrow screens, but never create a second line. */
@media screen and (max-width: 600px) {
    h1.character-name-force {
        font-size: clamp(1.65rem, 8vw, 2.55rem) !important;
    }
}
@media screen and (max-width: 390px) {
    h1.character-name-force {
        font-size: 1.65rem !important;
    }
}

/* Register book selector */
.book-selector { display:flex; align-items:center; justify-content:center; gap:.55rem; margin:.25rem 0 1rem; color:#d4b36c; font-family:inherit; font-size:.82rem; letter-spacing:.08em; }
.book-selector span { margin-right:.1rem; opacity:.8; }
.book-link { appearance:none; border:0; border-bottom:1px solid transparent; padding:.12rem .2rem; background:none; color:inherit; font:inherit; cursor:pointer; opacity:.5; }
.book-link:hover { opacity:.85; }
.book-link.active { opacity:1; border-bottom-color:currentColor; text-shadow:0 0 10px rgba(212,179,108,.45); }

/* Register book selector: centered with extra spacing */
.registry .book-selector {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    gap:.7rem;
    margin:1rem auto 1.8rem;
    text-align:center;
}
.registry .book-selector span { margin-right:.35rem; }

/* Larger register details */
.registry dl { font-size:1.08rem; }
.registry dt { font-size:.78rem; letter-spacing:.08em; }
.registry dd { font-size:1.12rem; line-height:1.25; }

/* Register: labels and values at the same size, with more vertical breathing room */
.registry dl { row-gap:.85rem !important; }
.registry dt,
.registry dd {
    font-size:1.12rem !important;
    line-height:1.35 !important;
}
.registry dt { letter-spacing:.06em; }


/* ==========================================================================
   Shared character-page consistency
   ========================================================================== */
.hero-copy > h1.character-name {
    display:block !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
    writing-mode:horizontal-tb !important;
    font-size:clamp(2rem,4vw,4rem) !important;
    line-height:1.05 !important;
    letter-spacing:-.035em !important;
}
.registry dl { row-gap:.85rem !important; }
.registry dt,.registry dd { font-size:1.12rem !important; line-height:1.35 !important; }
.registry dt { letter-spacing:.06em; }
.lore p a.character-link { color:var(--gold,#d4b36c); text-decoration:none; border-bottom:1px solid rgba(212,179,108,.35); }
.lore p a.character-link:hover { border-bottom-color:currentColor; }
@media screen and (max-width:600px) {
    .hero-copy > h1.character-name { font-size:clamp(1.55rem,7.2vw,2.5rem) !important; }
}

/* Character wiki + directory */
.wiki-page-link { display:block; width:max-content; margin:.55rem auto 1rem; color:var(--gold,#d4b36c); font-size:.82rem; letter-spacing:.08em; text-decoration:none; border-bottom:1px solid rgba(212,179,108,.35); }
.wiki-page-link:hover { border-bottom-color:currentColor; }
.character-directory { padding:3rem 0 5rem; text-align:center; }
.character-directory > h1 { margin:.25rem 0 .65rem; }
.directory-intro { opacity:.78; margin-bottom:2rem; }
.character-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.25rem; text-align:left; }
.character-card { border:1px solid rgba(212,179,108,.28); background:rgba(5,9,24,.58); padding:.8rem; }
.character-card-link { display:grid; grid-template-columns:74px 1fr; gap:1rem; align-items:center; color:inherit; text-decoration:none; }
.character-thumb { width:74px; height:92px; overflow:hidden; border:1px solid rgba(212,179,108,.4); }
.character-thumb img { width:100% !important; height:100% !important; object-fit:cover; margin:0 !important; transform:none !important; }
.character-card h2 { margin:0 0 .25rem; font-size:1.15rem; }
.character-card p { margin:0; opacity:.65; font-size:.82rem; }
.image-path { display:block; margin-top:.7rem; padding:.45rem .5rem; overflow-wrap:anywhere; font-size:.68rem; opacity:.58; border-top:1px solid rgba(212,179,108,.15); }

.hero-rank{width:max-content;max-width:100%;margin:.55rem auto 1rem;color:var(--gold,#d4b36c);font-size:.9rem;letter-spacing:.08em;text-align:center}
.characters-simple{padding:3rem 0 5rem;text-align:center}.characters-simple>h1{margin:.25rem 0 1.7rem}
.mini-character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem;max-width:1000px;margin:0 auto}
.mini-character-card{display:flex;align-items:center;gap:.7rem;min-height:68px;padding:.45rem;color:inherit;text-decoration:none;text-align:left;border:1px solid rgba(212,179,108,.28);background:rgba(5,9,24,.58)}
.mini-character-card:hover{border-color:rgba(212,179,108,.65);transform:translateY(-2px)}
.mini-character-card>img{flex:0 0 48px;width:48px!important;height:54px!important;margin:0!important;object-fit:cover;transform:none!important;border:1px solid rgba(212,179,108,.35)}
.mini-character-card strong{display:block;font-size:.88rem;line-height:1.15}.mini-character-card small{display:block;margin-top:.2rem;font-size:.66rem;line-height:1.2;opacity:.58}
.portal-links{grid-template-columns:repeat(3,minmax(0,1fr))!important}@media(max-width:700px){.portal-links{grid-template-columns:1fr!important}}

/* Portrait-first character directory, responsive across all viewports */
.characters-simple .mini-character-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;max-width:1150px;margin:0 auto; }
.characters-simple .mini-character-card {display:flex;flex-direction:column;align-items:stretch;text-align:center;gap:.55rem;min-width:0;padding:.65rem;border-radius:5px;background:linear-gradient(160deg,rgba(33,29,34,.78),rgba(5,9,24,.72));}
.characters-simple .mini-character-card>img {display:block;width:100%!important;height:auto!important;aspect-ratio:4/5;flex:none;object-fit:cover;object-position:center top;border-radius:3px;}
.characters-simple .mini-character-card span {display:block;min-width:0;}
.characters-simple .mini-character-card strong {font-size:1rem;line-height:1.25;overflow-wrap:anywhere;color:#f0dfbc;}
.characters-simple .mini-character-card small {font-size:.75rem;line-height:1.35;color:#d6ba7f;opacity:.9;}
@media(max-width:1050px){.characters-simple .mini-character-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:720px){.characters-simple .mini-character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;}}
@media(max-width:500px){.characters-simple .mini-character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;}}
/* Avoid overlapping REGISTRE columns on narrow screens */
@media(max-width:850px){.registry dl{grid-template-columns:minmax(0,44%) minmax(0,1fr)!important;column-gap:12px!important}.registry dt,.registry dd{min-width:0;overflow-wrap:anywhere;font-size:.9rem!important}}

/* Character directory: portrait-first cards, responsive grid */
.characters-simple .mini-character-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;max-width:1200px;margin-inline:auto;text-align:center}
.characters-simple .mini-character-card{display:flex;flex-direction:column;align-items:stretch;gap:.65rem;padding:.65rem;min-height:0;text-align:center;border:1px solid rgba(212,179,108,.35);border-radius:7px;background:linear-gradient(145deg,rgba(27,25,36,.9),rgba(8,12,24,.92));transition:transform .2s,border-color .2s}
.characters-simple .mini-character-card>img{display:block;flex:none;width:100%!important;height:auto!important;aspect-ratio:3/4;object-fit:cover;object-position:center top;margin:0!important;border-radius:4px;border:1px solid rgba(212,179,108,.25)}
.characters-simple .mini-character-card span{display:block;min-width:0}
.characters-simple .mini-character-card strong{display:block;font-size:clamp(.85rem,1.15vw,1.05rem);line-height:1.3;color:#ead7ab}
.characters-simple .mini-character-card small{display:block;margin-top:.3rem;font-size:.76rem;line-height:1.3;color:#c6b99d;opacity:1}
@media(max-width:1100px){.characters-simple .mini-character-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.characters-simple .mini-character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.characters-simple .mini-character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.characters-simple .mini-character-card{padding:.45rem}.characters-simple .mini-character-card strong{font-size:.88rem}}

/* Character codex cards: dedicated desktop and mobile design */
.characters-simple .codex-grid {display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:18px!important;max-width:1240px!important;margin:0 auto!important;align-items:stretch!important;}
.characters-simple .codex-grid > a.codex-card {display:flex!important;flex-direction:column!important;align-items:stretch!important;min-width:0!important;min-height:0!important;overflow:hidden!important;text-align:center!important;text-decoration:none!important;color:#eadfc8!important;border:1px solid #8b6d42!important;border-radius:8px!important;background:linear-gradient(145deg,#202333,#0b101c)!important;box-shadow:0 12px 26px #0007!important;transition:transform .2s,border-color .2s!important;}
.characters-simple .codex-grid > a.codex-card:hover {transform:translateY(-5px)!important;border-color:#edce86!important;}
.characters-simple .codex-card-image {width:100%!important;aspect-ratio:4/5!important;overflow:hidden!important;border-bottom:1px solid #876839!important;background:#131b2c!important;}
.characters-simple .codex-card-image > img {display:block!important;position:static!important;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;object-fit:cover!important;object-position:center top!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;transform:none!important;}
.characters-simple .codex-card-text {display:flex!important;flex:1!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:14px 8px 16px!important;}
.characters-simple .codex-card-text strong {display:block!important;font-size:1rem!important;line-height:1.2!important;font-weight:normal!important;color:#f4dca5!important;overflow-wrap:anywhere!important;}
.characters-simple .codex-card-text small {display:block!important;font-size:.77rem!important;line-height:1.35!important;color:#d2c5ad!important;opacity:1!important;overflow-wrap:anywhere!important;}
@media(max-width:1100px){.characters-simple .codex-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}}
@media(max-width:800px){.characters-simple .codex-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}}
@media(max-width:560px){.characters-simple .codex-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}.characters-simple .codex-card-text{padding:10px 5px 12px!important;}.characters-simple .codex-card-text strong{font-size:.89rem!important;}}