/* =========================================================
   THE WOUNDED LEGACY
   LORE — V4
   Layout/sidebar/header compartilhados fora deste arquivo
========================================================= */

:root {
--dark: #15182B;
    --dark-2: #101321;
    --dark-3: #0B0E1A;

    --panel: #181B2D;

    --gold: #B29758;
    --gold-light: #CFB46D;

    --cream: #E8E2D5;
    --text: #CBC6BD;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px;
}

body {
    margin: 0;

    min-width: 0;
    min-height: 100vh;

    overflow-x: hidden;

    background:
        var(--dark);

    color:
        var(--text);

    font-family:
        "Poppins",
        sans-serif;
}

a {
    color: inherit;

    text-decoration: none;
}

button,
input {
    font: inherit;
}


/* =========================================================
   LAYOUT
========================================================= */


/* =========================================================
   SIDEBAR
========================================================= */


/* =========================================================
   HEADER
========================================================= */


/* =========================================================
   BUSCA
========================================================= */


/* =========================================================
   CTA
========================================================= */


/* =========================================================
   HERO
========================================================= */

.lore-hero {
    position:
        relative;

    min-height:
        355px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        url("../images/hero.png")
        center 35% /
        cover
        no-repeat;

    border-bottom:
        1px solid
        rgba(178,151,88,.14);
}

.lore-hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(8,12,28,.95),
            rgba(10,14,31,.81) 45%,
            rgba(12,16,33,.62)
        ),

        linear-gradient(
            to bottom,
            rgba(10,13,28,.25),
            rgba(21,24,43,.92)
        );
}

.lore-hero-inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            1180px,
            calc(100% - 70px)
        );

    margin:
        0 auto;

    padding:
        48px 0;
}

.lore-eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        12px;

    color:
        var(--gold);

    font-family:
        "Cinzel",
        serif;

    font-size:
        9px;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;
}

.lore-eyebrow span {
    width:
        30px;

    height:
        1px;

    background:
        rgba(178,151,88,.68);
}

.lore-hero h1 {
    max-width:
        850px;

    margin:
        0;

    color:
        var(--cream);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            42px,
            4vw,
            66px
        );

    line-height:
        1.05;

    font-weight:
        400;

    text-transform:
        uppercase;
}

.lore-hero h1 strong {
    display:
        block;

    color:
        var(--gold);

    font-weight:
        500;
}

.lore-title-divider {
    position:
        relative;

    width:
        290px;

    height:
        24px;

    margin:
        14px
        0;
}

.lore-title-divider::before {
    content: "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:
        linear-gradient(
            to right,
            var(--gold),
            transparent
        );
}

.lore-title-divider span {
    position:
        absolute;

    top:
        50%;

    left:
        34%;

    width:
        8px;

    height:
        8px;

    border:
        1px solid
        var(--gold);

    transform:
        translateY(-50%)
        rotate(45deg);
}

.lore-hero p {
    max-width:
        760px;

    margin:
        0;

    color:
        #DDD6C8;

    font-size:
        13px;

    line-height:
        1.8;
}


/* =========================================================
   ÍNDICE HORIZONTAL STICKY
========================================================= */

.lore-scroll-nav {
    position:
        sticky;

    top:
        0;

    z-index:
        35;

    width:
        100%;

    background:
        rgba(12,15,28,.96);

    border-top:
        1px solid
        rgba(178,151,88,.08);

    border-bottom:
        1px solid
        rgba(178,151,88,.18);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.12);
}

.lore-scroll-nav-inner {
    width:
        min(
            1180px,
            calc(100% - 70px)
        );

    min-height:
        68px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items:
        center;

    gap:
        28px;
}


/* título pequeno */

.lore-scroll-heading {
    position:
        relative;

    padding-right:
        28px;

    white-space:
        nowrap;
}

.lore-scroll-heading::after {
    content: "";

    position:
        absolute;

    top:
        50%;

    right:
        0;

    width:
        1px;

    height:
        28px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(178,151,88,.38),
            transparent
        );
}

.lore-scroll-heading span {
    color:
        rgba(178,151,88,.68);

    font-family:
        "Cinzel",
        serif;

    font-size:
        8px;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


/* links */

.lore-scroll-links {
    min-width:
        0;

    display:
        flex;

    align-items:
        stretch;

    justify-content:
        space-between;

    gap:
        4px;
}

.lore-scroll-links a {
    position:
        relative;

    min-width:
        0;

    min-height:
        67px;

    padding:
        0
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        rgba(203,198,189,.54);

    font-size:
        9px;

    white-space:
        nowrap;

    transition:
        color .22s ease,
        background .22s ease;
}

.lore-scroll-links a span {
    color:
        rgba(178,151,88,.37);

    font-family:
        "Cinzel",
        serif;

    font-size:
        7px;

    transition:
        color .22s ease;
}

.lore-scroll-links a::after {
    content: "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -1px;

    width:
        0;

    height:
        2px;

    background:
        var(--gold);

    transform:
        translateX(-50%);

    transition:
        width .25s ease;
}

.lore-scroll-links a::before {
    content: "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -4px;

    width:
        6px;

    height:
        6px;

    border:
        1px solid
        var(--gold);

    background:
        #0C0F1C;

    opacity:
        0;

    transform:
        translateX(-50%)
        rotate(45deg)
        scale(.4);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.lore-scroll-links a:hover {
    color:
        var(--gold);

    background:
        rgba(178,151,88,.025);
}

.lore-scroll-links a:hover span {
    color:
        rgba(178,151,88,.78);
}

.lore-scroll-links a.active {
    color:
        var(--gold);

    background:
        linear-gradient(
            to bottom,
            rgba(178,151,88,.035),
            rgba(178,151,88,.015)
        );
}

.lore-scroll-links a.active span {
    color:
        var(--gold);
}

.lore-scroll-links a.active::after {
    width:
        calc(100% - 24px);
}

.lore-scroll-links a.active::before {
    opacity:
        1;

    transform:
        translateX(-50%)
        rotate(45deg)
        scale(1);
}


/* =========================================================
   CORPO
========================================================= */

.lore-page {
    width:
        min(
            980px,
            calc(100% - 70px)
        );

    margin:
        0 auto;

    padding:
        65px
        0
        85px;
}

.lore-content {
    min-width:
        0;
}


/* =========================================================
   CAPÍTULOS
========================================================= */

.lore-chapter {
    position:
        relative;

    padding:
        0
        0
        62px;

    margin-bottom:
        62px;

    border-bottom:
        1px solid
        rgba(178,151,88,.12);
}

.chapter-number {
    position:
        absolute;

    top:
        -18px;

    right:
        0;

    color:
        rgba(178,151,88,.052);

    font-family:
        "Cinzel",
        serif;

    font-size:
        82px;

    line-height:
        1;

    font-weight:
        600;

    pointer-events:
        none;
}

.chapter-heading {
    position:
        relative;

    z-index:
        2;
}

.chapter-heading > span {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--gold);

    font-family:
        "Cinzel",
        serif;

    font-size:
        8px;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}

.chapter-heading h2 {
    max-width:
        760px;

    margin:
        0;

    color:
        var(--cream);

    font-family:
        "Cinzel",
        serif;

    font-size:
        32px;

    line-height:
        1.12;

    font-weight:
        500;

    text-transform:
        uppercase;
}

.chapter-divider {
    width:
        135px;

    height:
        1px;

    margin:
        16px
        0
        21px;

    background:
        linear-gradient(
            to right,
            var(--gold),
            transparent
        );
}

.lore-chapter p {
    max-width:
        900px;

    margin:
        0
        0
        16px;

    color:
        #CBC6BD;

    font-size:
        11.8px;

    line-height:
        1.95;

    text-align:
        justify;
}

.lore-chapter p strong {
    color:
        #E8E2D5;

    font-weight:
        500;
}

.lore-chapter .chapter-lead {
    max-width:
        860px;

    color:
        #E3DDD1;

    font-size:
        13.5px;

    line-height:
        1.9;
}


/* =========================================================
   CITAÇÃO
========================================================= */

.lore-chapter blockquote {
    position:
        relative;

    max-width:
        800px;

    margin:
        30px
        0
        5px;

    padding:
        20px
        25px;

    color:
        #E8E2D5;

    border-left:
        2px solid
        var(--gold);

    background:
        rgba(178,151,88,.045);

    font-family:
        "Cinzel",
        serif;

    font-size:
        13px;

    line-height:
        1.75;

    font-style:
        italic;
}


/* =========================================================
   CAPÍTULO FINAL
========================================================= */

.final-chapter {
    padding-bottom:
        25px;

    margin-bottom:
        0;

    border-bottom:
        0;
}

.final-quote {
    max-width:
        820px;

    margin-top:
        36px;

    padding:
        19px
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    border-top:
        1px solid
        rgba(178,151,88,.22);

    border-bottom:
        1px solid
        rgba(178,151,88,.22);

    color:
        var(--gold);

    text-align:
        center;
}

.final-quote span {
    font-size:
        11px;
}

.final-quote strong {
    color:
        var(--cream);

    font-family:
        "Cinzel",
        serif;

    font-size:
        12px;

    letter-spacing:
        .6px;

    font-weight:
        500;

    text-transform:
        uppercase;
}


/* =========================================================
   BUSCA
========================================================= */

.search-feedback {
    position:
        fixed;

    top:
        16px;

    right:
        16px;

    z-index:
        2000;

    padding:
        10px
        13px;

    border:
        1px solid
        rgba(178,151,88,.38);

    background:
        #161A2C;

    color:
        var(--cream);

    font-size:
        9px;

    opacity:
        0;

    transform:
        translateY(-8px);

    pointer-events:
        none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.search-feedback.show {
    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   ANIMAÇÃO
========================================================= */


/* =========================================================
   ATÉ 1500px
========================================================= */

@media (max-width: 1500px) {
.lore-hero-inner,
    .lore-scroll-nav-inner {
        width:
            calc(100% - 56px);
    }

    .lore-scroll-nav-inner {
        gap:
            19px;
    }

    .lore-scroll-heading {
        padding-right:
            19px;
    }

    .lore-scroll-links a {
        padding:
            0 8px;

        font-size:
            8.5px;
    }
}


/* =========================================================
   ATÉ 1200px
========================================================= */

@media (max-width: 1200px) {
.lore-scroll-nav-inner {
        display:
            block;

        padding:
            9px
            0
            0;
    }

    .lore-scroll-heading {
        padding:
            0
            0
            7px;

        text-align:
            center;
    }

    .lore-scroll-heading::after {
        display:
            none;
    }

    .lore-scroll-links a {
        min-height:
            48px;
    }
}


/* =========================================================
   ATÉ 900px
========================================================= */

@media (max-width: 900px) {
html {
        scroll-padding-top:
            80px;
    }

    

    

    

    

    

    .lore-hero {
        min-height:
            315px;
    }

    .lore-hero-inner {
        width:
            calc(100% - 40px);
    }

    .lore-hero h1 {
        font-size:
            44px;
    }

    .lore-scroll-nav-inner {
        width:
            100%;

        padding-top:
            8px;
    }

    .lore-scroll-heading {
        padding-left:
            20px;

        padding-right:
            20px;

        text-align:
            left;
    }

    .lore-scroll-links {
        justify-content:
            flex-start;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        padding:
            0
            14px;

        scrollbar-width:
            none;

        scroll-behavior:
            smooth;
    }

    .lore-scroll-links::-webkit-scrollbar {
        display:
            none;
    }

    .lore-scroll-links a {
        flex:
            0 0 auto;

        min-height:
            48px;

        padding:
            0 15px;
    }

    .lore-page {
        width:
            calc(100% - 40px);

        padding:
            48px
            0
            65px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {


    

    

    

    

    

    

    

    

    

    

    

    .lore-hero {
        min-height:
            285px;
    }

    .lore-hero-inner {
        width:
            calc(100% - 28px);

        padding:
            36px
            0;
    }

    .lore-hero h1 {
        font-size:
            clamp(
                30px,
                9vw,
                38px
            );
    }

    .lore-hero p {
        font-size:
            10px;
    }

    .lore-scroll-heading {
        padding-left:
            15px;

        padding-right:
            15px;
    }

    .lore-scroll-links {
        padding:
            0
            7px;
    }

    .lore-scroll-links a {
        padding:
            0
            12px;

        font-size:
            8px;
    }

    .lore-page {
        width:
            calc(100% - 28px);

        padding:
            38px
            0
            50px;
    }

    .chapter-number {
        font-size:
            55px;
    }

    .chapter-heading h2 {
        font-size:
            22px;
    }

    .lore-chapter p,
    .lore-chapter .chapter-lead {
        font-size:
            9.5px;

        line-height:
            1.75;

        text-align:
            left;
    }

    .lore-chapter blockquote {
        font-size:
            10.5px;
    }
}


/* =========================================================
   MOBILE PEQUENO
========================================================= */


/* =========================================================
   FULL HD — 1920 × 1080
========================================================= */

@media (min-width: 1600px)
and (min-height: 900px) {
.lore-hero {
        min-height:
            390px;
    }

    .lore-hero-inner,
    .lore-scroll-nav-inner {
        width:
            min(
                1280px,
                calc(100% - 90px)
            );
    }

    .lore-hero h1 {
        font-size:
            70px;
    }

    .lore-hero p {
        font-size:
            14px;
    }

    .lore-scroll-nav-inner {
        min-height:
            72px;
    }

    .lore-scroll-heading span {
        font-size:
            8.5px;
    }

    .lore-scroll-links a {
        min-height:
            71px;

        font-size:
            9.5px;
    }

    .lore-scroll-links a span {
        font-size:
            7.5px;
    }

    .lore-page {
        width:
            min(
                1040px,
                calc(100% - 90px)
            );

        padding:
            72px
            0
            95px;
    }

    .chapter-number {
        font-size:
            90px;
    }

    .chapter-heading h2 {
        font-size:
            35px;
    }

    .chapter-heading > span {
        font-size:
            9px;
    }

    .lore-chapter p {
        font-size:
            12.7px;
    }

    .lore-chapter .chapter-lead {
        font-size:
            14.3px;
    }
}