/* =========================================================
   NIGHTANGELS - ROYAUME.CSS
   UNIVERSAL KINGDOM PAGE
========================================================= */

body[data-page="royaume"]{

    --theme-primary:
    var(--accent-color,#c6a46a);

    --theme-secondary:
    var(--gold-light,#f2dfb8);

    --royaume-bg:#040404;

    --royaume-bg-secondary:#0b0b0d;

    --royaume-card:#111114;

    --royaume-border:
    rgba(255,255,255,0.08);

    --royaume-text:#f3f0ea;

    --royaume-text-secondary:#b4aea4;

    background:#040404;

    color:var(--royaume-text);

    overflow-x:hidden;
}

/* =========================================================
   BACKGROUND
========================================================= */

body[data-page="royaume"] .royaume-background{

    position:fixed;

    inset:0;

    z-index:-15;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.05);
}

body[data-page="royaume"] .royaume-noise{

    position:fixed;

    inset:0;

    z-index:-13;

    opacity:0.06;

    pointer-events:none;

    mix-blend-mode:soft-light;

    background-image:url('/images/noise.webp');
}

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

body[data-page="royaume"] .royaume-hero{

    position:relative;

    min-height:62vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:
    120px
    40px
    40px;

    text-align:center;
}

body[data-page="royaume"] .royaume-hero-inner{

    width:100%;

    max-width:1100px;
}

body[data-page="royaume"] .royaume-subtitle{

    margin-bottom:26px;

    font-size:0.9rem;

    letter-spacing:7px;

    text-transform:uppercase;

    color:var(--theme-primary);
}

body[data-page="royaume"] .royaume-title{

    font-size:clamp(3rem,8vw,6.2rem);

    line-height:0.92;

    text-transform:uppercase;

    color:var(--royaume-text);

    text-shadow:
    0 0 30px rgba(255,255,255,0.04),
    0 0 60px color-mix(
        in srgb,
        var(--theme-primary) 18%,
        transparent
    );
}

body[data-page="royaume"] .royaume-description{

    width:min(760px,100%);

    margin:
    28px auto 0;

    font-size:1.02rem;

    line-height:1.9;

    color:var(--royaume-text-secondary);
}

/* =========================================================
   STORIES SECTION
========================================================= */

body[data-page="royaume"] .royaume-stories{

    position:relative;

    width:min(1450px,100%);

    margin:auto;

    margin-top:-10px;

    padding:
    0
    40px
    120px;
}

body[data-page="royaume"] .royaume-section-header{

    margin-bottom:60px;
}

body[data-page="royaume"] .royaume-line{

    width:120px;

    height:1px;

    margin-bottom:24px;

    background:

    linear-gradient(
    to right,
    var(--theme-primary),
    transparent
    );
}

body[data-page="royaume"] .royaume-section-subtitle{

    margin-bottom:16px;

    font-size:0.78rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--theme-primary);
}

body[data-page="royaume"] .royaume-section-header h2{

    font-size:clamp(2.8rem,5vw,5rem);

    line-height:1;
}

/* =========================================================
   STORY GRID
========================================================= */

body[data-page="royaume"] .story-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(340px,1fr));

    gap:36px;
}

/* =========================================================
   STORY CARD
========================================================= */

body[data-page="royaume"] .story-card{

    position:relative;

    border-radius:34px;

    overflow:hidden;

    background:

    linear-gradient(
    145deg,
    rgba(14,14,16,0.94),
    rgba(4,4,5,0.98)
    );

    border:
    1px solid rgba(255,255,255,0.08);

    transition:
    transform 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

body[data-page="royaume"] .story-card:hover{

    transform:
    translateY(-8px);

    border-color:
    color-mix(
        in srgb,
        var(--theme-primary) 40%,
        rgba(255,255,255,0.08)
    );

    box-shadow:
    0 0 40px color-mix(
        in srgb,
        var(--theme-primary) 14%,
        transparent
    );
}

body[data-page="royaume"] .story-image{

    position:relative;

    aspect-ratio:16/10;

    overflow:hidden;
}

body[data-page="royaume"] .story-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
    transform 1s ease,
    filter 1s ease;
}

body[data-page="royaume"] .story-card:hover .story-image img{

    transform:scale(1.05);

    filter:
    brightness(0.75)
    saturate(1.05);
}

body[data-page="royaume"] .story-content{

    padding:34px;
}

body[data-page="royaume"] .story-category{

    margin-bottom:18px;

    font-size:0.72rem;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--theme-primary);
}

body[data-page="royaume"] .story-card h3{

    margin-bottom:16px;

    font-size:2rem;

    line-height:1;
}

body[data-page="royaume"] .story-card p{

    line-height:1.95;

    color:var(--royaume-text-secondary);
}

/* =========================================================
   BUTTON
========================================================= */

body[data-page="royaume"] .story-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:fit-content;

    margin:
    38px auto 0;

    min-width:240px;

    min-height:58px;

    padding:
    0
    34px;

    border-radius:18px;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:0.82rem;

    font-weight:600;

    color:white;

    border:
    1px solid color-mix(
        in srgb,
        var(--theme-primary) 30%,
        rgba(255,255,255,0.08)
    );

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,0.03),
        rgba(0,0,0,0.92)
    );

    backdrop-filter:blur(10px);

    box-shadow:

    0 0 20px color-mix(
        in srgb,
        var(--theme-primary) 10%,
        transparent
    ),

    inset 0 0 14px rgba(255,255,255,0.03);

    transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

body[data-page="royaume"] .story-button:hover{

    transform:
    translateY(-4px)
    scale(1.02);

    border-color:
    color-mix(
        in srgb,
        var(--theme-primary) 55%,
        rgba(255,255,255,0.08)
    );

    box-shadow:

    0 0 28px color-mix(
        in srgb,
        var(--theme-primary) 22%,
        transparent
    ),

    0 0 70px color-mix(
        in srgb,
        var(--theme-primary) 10%,
        transparent
    );
}

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

@media(max-width:1100px){

body[data-page="royaume"] .royaume-hero{

    min-height:auto;

    padding:
    120px
    20px
    30px;
}

body[data-page="royaume"] .royaume-subtitle{

    margin-bottom:18px;

    font-size:0.72rem;

    letter-spacing:5px;
}

body[data-page="royaume"] .royaume-title{

    font-size:clamp(2.7rem,13vw,4.6rem);

    line-height:0.9;
}

body[data-page="royaume"] .royaume-description{

    margin-top:24px;

    font-size:0.96rem;

    line-height:1.8;
}

body[data-page="royaume"] .royaume-stories{

    margin-top:0;

    padding:
    0
    20px
    90px;
}

body[data-page="royaume"] .royaume-section-header{

    margin-bottom:40px;
}

body[data-page="royaume"] .royaume-section-header h2{

    font-size:clamp(2rem,10vw,3.2rem);
}

body[data-page="royaume"] .story-grid{

    grid-template-columns:1fr;

    gap:24px;
}

body[data-page="royaume"] .story-content{

    padding:24px;
}

body[data-page="royaume"] .story-card h3{

    font-size:1.5rem;
}

}