/* =========================================================
COMPONENTS SYSTEM
MBVUMBO
========================================================= */

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

.site-header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        var(--z-header);

    padding:
        18px 0;

    transition:
        var(--transition);

    background:
        rgba(10,10,10,.18);

    backdrop-filter:
        blur(20px);
}

.site-header.scrolled {

    padding:
        14px 0;

    background:
        rgba(15,15,15,.92);

    box-shadow:
        var(--shadow-soft);
}

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

.header-wrapper {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}

/* =========================================================
LOGO
========================================================= */

.logo {

    color:
        white;

    font-family:
        var(--font-title);

    font-size:
        1.7rem;

    font-weight:
        700;

    letter-spacing:
        2px;

    transition:
        var(--transition);
}

.logo:hover {

    color:
        var(--gold);
}

/* =========================================================
NAVIGATION
========================================================= */

.main-nav ul {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;
}

.main-nav a {

    position:
        relative;

    color:
        rgba(255,255,255,.88);

    font-size:
        .95rem;

    font-weight:
        600;

    transition:
        var(--transition);
}

.main-nav a::after {

    content:'';

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        2px;

    background:
        var(--gold);

    transition:
        var(--transition);
}

.main-nav a:hover {

    color:
        white;
}

.main-nav a:hover::after {

    width:
        100%;
}

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

.hero-home {

    position:
        relative;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        #111;
}

.hero-background {

    position:
        absolute;

    inset:
        0;
}

.hero-background img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.02);
}

.hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        var(--gradient-dark);
}

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

.hero-content {

    position:
        relative;

    z-index:
        3;

    max-width:
        900px;

    color:
        white;
}

.hero-label {

    display:
        inline-block;

    margin-bottom:
        24px;

    padding:
        12px 22px;

    border-radius:
        100px;

    background:
        rgba(255,255,255,.12);

    backdrop-filter:
        blur(10px);

    color:
        white;

    font-size:
        .85rem;

    font-weight:
        600;

    letter-spacing:
        1px;
}

.hero-content h1 {

    margin-bottom:
        30px;

    color:
        white;
}

.hero-description {

    max-width:
        760px;

    margin-bottom:
        40px;

    font-size:
        1.15rem;

    color:
        rgba(255,255,255,.82);
}

/* =========================================================
BUTTONS
========================================================= */

.hero-buttons,
.button-group {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    flex-wrap:
        wrap;
}

.btn-primary-custom,
.btn-secondary-custom {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        58px;

    padding:
        0 34px;

    border-radius:
        100px;

    font-size:
        .95rem;

    font-weight:
        700;

    transition:
        var(--transition);
}

.btn-primary-custom {

    background:
        var(--gradient-gold);

    color:
        white;

    box-shadow:
        var(--shadow-soft);
}

.btn-primary-custom:hover {

    transform:
        translateY(-4px);

    color:
        white;
}

.btn-secondary-custom {

    border:
        1px solid rgba(255,255,255,.22);

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(10px);

    color:
        white;
}

.btn-secondary-custom:hover {

    background:
        rgba(255,255,255,.16);

    color:
        white;
}

/* =========================================================
CARDS
========================================================= */

.card-base {

    position:
        relative;

    height:
        100%;

    overflow:
        hidden;

    border-radius:
        var(--radius-lg);

    background:
        white;

    box-shadow:
        var(--shadow-soft);

    transition:
        var(--transition);
}

.card-base:hover {

    transform:
        translateY(-10px);

    box-shadow:
        var(--shadow-large);
}

/* =========================================================
CARD IMAGE
========================================================= */

.card-image {

    position:
        relative;

    display:
        block;

    overflow:
        hidden;
}

.card-image img {

    width:
        100%;

    height:
        280px;

    object-fit:
        cover;

    transition:
        transform var(--transition-slow);
}

.card-base:hover .card-image img {

    transform:
        scale(1.08);
}

/* =========================================================
CARD OVERLAY
========================================================= */

.card-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.4),
            transparent
        );

    opacity:
        .7;
}

/* =========================================================
CARD CONTENT
========================================================= */

.card-content {

    padding:
        35px;
}

.card-title {

    margin-bottom:
        18px;
}

.card-title a {

    color:
        var(--charcoal);

    transition:
        var(--transition);
}

.card-title a:hover {

    color:
        var(--forest);
}

/* =========================================================
CARD META
========================================================= */

.card-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        18px;

    font-size:
        .82rem;

    font-weight:
        600;

    color:
        var(--gold);
}

/* =========================================================
CARD EXCERPT
========================================================= */

.card-excerpt {

    margin-bottom:
        25px;

    color:
        var(--text-light);
}

/* =========================================================
CARD LINK
========================================================= */

.card-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--forest);

    font-weight:
        700;

    transition:
        var(--transition);
}

.card-link:hover {

    gap:
        16px;
}

/* =========================================================
TAGS
========================================================= */

.tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-bottom:
        24px;
}

.tags span {

    padding:
        8px 14px;

    border-radius:
        100px;

    background:
        rgba(31,77,58,.08);

    color:
        var(--forest);

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .5px;
}

/* =========================================================
TIMELINE
========================================================= */

.timeline-home-wrapper {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        30px;
}

.timeline-home-item {

    padding:
        40px;

    border-radius:
        var(--radius-lg);

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(20px);

    text-align:
        center;

    border:
        1px solid rgba(255,255,255,.08);
}

.timeline-home-item span {

    display:
        inline-block;

    margin-bottom:
        16px;

    color:
        var(--gold);

    font-size:
        .82rem;

    font-weight:
        700;

    letter-spacing:
        2px;
}

.timeline-home-item h3 {

    color:
        white;
}

/* =========================================================
GALLERY
========================================================= */

.gallery-card {

    position:
        relative;

    display:
        block;

    overflow:
        hidden;

    border-radius:
        var(--radius-lg);
}

.gallery-card img {

    width:
        100%;

    height:
        420px;

    object-fit:
        cover;

    transition:
        transform var(--transition-slow);
}

.gallery-card:hover img {

    transform:
        scale(1.08);
}

/* =========================================================
SEARCH
========================================================= */

.rubrique-search-wrapper {

    position:
        relative;

    max-width:
        700px;

    margin:
        0 auto 60px;
}

.rubrique-search-input {

    width:
        100%;

    height:
        70px;

    padding:
        0 30px;

    border:
        none;

    border-radius:
        100px;

    background:
        white;

    box-shadow:
        var(--shadow-soft);

    font-size:
        1rem;
}

.rubrique-search-input:focus {

    outline:
        none;
}

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

.sidebar-widget {

    margin-bottom:
        40px;

    padding:
        35px;

    border-radius:
        var(--radius-lg);

    background:
        white;

    box-shadow:
        var(--shadow-soft);
}

/* =========================================================
FOOTER
========================================================= */

.site-footer {

    position:
        relative;

    padding:
        120px 0 60px;

    background:
        #111;

    color:
        rgba(255,255,255,.72);
}

.site-footer h2,
.site-footer h3 {

    color:
        white;
}

/* =========================================================
FOOTER BOTTOM
========================================================= */

.footer-bottom {

    margin-top:
        80px;

    padding-top:
        30px;

    border-top:
        1px solid rgba(255,255,255,.08);

    text-align:
        center;
}

/* =========================================================
SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position:
        absolute;

    left:
        50%;

    bottom:
        40px;

    transform:
        translateX(-50%);

    z-index:
        3;

    color:
        white;

    text-align:
        center;
}

.scroll-line {

    width:
        2px;

    height:
        60px;

    margin:
        14px auto 0;

    background:
        rgba(255,255,255,.5);
}

/* =========================================================
DARK MODE
========================================================= */

body.dark-mode .card-base,
body.dark-mode .sidebar-widget {

    background:
        #171919;

    border:
        1px solid rgba(255,255,255,.05);
}

body.dark-mode .card-title a {

    color:
        white;
}

body.dark-mode .card-excerpt {

    color:
        rgba(255,255,255,.72);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:1200px){

.timeline-home-wrapper {

grid-template-columns:
repeat(2,1fr);
}

}

@media(max-width:991px){

.main-nav {

display:none;
}

.hero-content h1 {

font-size:
3.5rem;
}

.timeline-home-wrapper {

grid-template-columns:
1fr;
}

.gallery-card img {

height:
320px;
}

}

@media(max-width:768px){

.site-header {

padding:
16px 0;
}

.hero-home {

padding:
120px 0;
}

.hero-buttons {

flex-direction:
column;

align-items:
stretch;
}

.btn-primary-custom,
.btn-secondary-custom {

width:
100%;
}

.card-content {

padding:
28px;
}

.card-image img {

height:
240px;
}

.hero-content h1 {

font-size:
2.8rem;
}

}

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

.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}

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

.header-icon {

    width:
        46px;

    height:
        46px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(10px);

    color:
        white;

    font-size:
        1rem;

    transition:
        var(--transition);
}

.header-icon:hover {

    background:
        rgba(255,255,255,.18);
}

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

.mobile-toggle {

    display:
        none;

    width:
        52px;

    height:
        52px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(10px);

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        5px;

    padding:
        0 14px;
}

.mobile-toggle span {

    display:
        block;

    width:
        100%;

    height:
        2px;

    background:
        white;

    border-radius:
        20px;

    transition:
        var(--transition);
}

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

.mobile-menu {

    position:
        fixed;

    top:
        0;

    right:
        -100%;

    width:
        min(420px,100%);

    height:
        100vh;

    z-index:
        5000;

    padding:
        120px 40px 60px;

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

    backdrop-filter:
        blur(20px);

    transition:
        var(--transition-slow);

    overflow-y:
        auto;
}

.mobile-menu.active {

    right:
        0;
}

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

.mobile-close {

    position:
        absolute;

    top:
        24px;

    right:
        24px;

    width:
        50px;

    height:
        50px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.08);

    color:
        white;

    font-size:
        1.2rem;
}

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

.mobile-logo {

    margin-bottom:
        50px;

    color:
        white;

    font-size:
        2rem;

    font-family:
        var(--font-title);

    font-weight:
        700;
}

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

.mobile-nav ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        26px;
}

.mobile-nav a {

    color:
        white;

    font-size:
        1.15rem;

    font-weight:
        600;

    transition:
        var(--transition);
}

.mobile-nav a:hover {

    color:
        var(--gold);
}

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

.mobile-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        4000;

    background:
        rgba(0,0,0,.6);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        var(--transition);
}

.mobile-overlay.active {

    opacity:
        1;

    visibility:
        visible;
}

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

.site-header.scrolled {

    background:
        rgba(10,10,10,.92);

    box-shadow:
        0 10px 40px rgba(0,0,0,.18);
}

/* =========================================================
ACTIVE LINKS
========================================================= */

.main-nav a.active,
.mobile-nav a.active {

    color:
        var(--gold);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:991px){

.mobile-toggle {

display:
flex;
}

.main-nav {

display:
none;
}

}

/* =========================================================
FOOTER
========================================================= */

.site-footer {

    position:
        relative;

    overflow:
        hidden;

    background:
        #0E0E0E;

    color:
        rgba(255,255,255,.72);

    padding:
        120px 0 50px;
}

/* =========================================================
TEXTURE
========================================================= */

.footer-texture {

    position:
        absolute;

    inset:
        0;

    opacity:
        .05;

    background-image:
        url('../img/texture.webp');

    background-size:
        cover;

    pointer-events:
        none;
}

/* =========================================================
TOP
========================================================= */

.footer-top {

    position:
        relative;

    z-index:
        2;
}

/* =========================================================
BRAND
========================================================= */

.footer-brand h2 {

    margin-bottom:
        24px;

    color:
        white;

    font-size:
        2.2rem;
}

.footer-brand p {

    margin-bottom:
        30px;

    max-width:
        420px;

    color:
        rgba(255,255,255,.72);
}

/* =========================================================
SOCIALS
========================================================= */

.footer-socials {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;
}

.footer-socials a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        0 18px;

    border-radius:
        100px;

    background:
        rgba(255,255,255,.06);

    color:
        white;

    font-size:
        .85rem;

    transition:
        var(--transition);
}

.footer-socials a:hover {

    background:
        var(--gold);

    color:
        white;
}

/* =========================================================
LINKS
========================================================= */

.footer-links h3 {

    margin-bottom:
        24px;

    color:
        white;

    font-size:
        1.1rem;
}

.footer-links ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;
}

.footer-links a {

    color:
        rgba(255,255,255,.68);

    transition:
        var(--transition);
}

.footer-links a:hover {

    color:
        var(--gold);

    padding-left:
        6px;
}

/* =========================================================
QUOTE
========================================================= */

.footer-quote {

    padding:
        40px;

    border-radius:
        var(--radius-lg);

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);

    backdrop-filter:
        blur(10px);
}

.footer-quote span {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--gold);

    font-size:
        .8rem;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    font-weight:
        700;
}

.footer-quote blockquote {

    margin:
        0;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    color:
        white;

    font-size:
        1.1rem;

    line-height:
        1.8;
}

/* =========================================================
DIVIDER
========================================================= */

.footer-divider {

    margin:
        80px 0 40px;

    height:
        1px;

    background:
        rgba(255,255,255,.08);
}

/* =========================================================
BOTTOM
========================================================= */

.footer-bottom {

    position:
        relative;

    z-index:
        2;
}

.footer-bottom-wrapper {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    flex-wrap:
        wrap;
}

.footer-bottom p {

    margin:
        0;

    color:
        rgba(255,255,255,.52);

    font-size:
        .9rem;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:991px){

.footer-bottom-wrapper {

flex-direction:
column;

align-items:
flex-start;
}

}

@media(max-width:768px){

.site-footer {

padding:
90px 0 40px;
}

.footer-quote {

padding:
30px;
}

}

/* =========================================================
RUBRIQUE PAGE
========================================================= */

.rubrique-intro {

    position:
        relative;

    margin-top:
        -100px;

    z-index:
        10;
}

.rubrique-search-section {

    padding-top:
        40px;

    padding-bottom:
        20px;
}

.rubrique-content {

    background:
        var(--ivory);
}

.pagination-wrapper {

    margin-top:
        80px;

    display:
        flex;

    justify-content:
        center;
}

.pagination {

    display:
        flex;

    gap:
        12px;
}

.pagination a,
.pagination .on {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        white;

    box-shadow:
        var(--shadow-soft);
}

.pagination .on {

    background:
        var(--forest);

    color:
        white;
}

/* =========================================================
BREADCRUMBS
========================================================= */

.breadcrumbs-modern {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        28px;

    color:
        rgba(255,255,255,.72);

    font-size:
        .9rem;
}

.breadcrumbs-modern a {

    transition:
        var(--transition);
}

.breadcrumbs-modern a:hover {

    color:
        var(--gold);
}

/* =========================================================
SUB RUBRIQUES
========================================================= */

.subrubriques-section {

    background:
        white;
}

/* =========================================================
ARTICLE PAGE
========================================================= */

.article-main-section {

    position:
        relative;

    margin-top:
        -100px;

    z-index:
        10;
}

.article-chapo {

    margin-bottom:
        50px;

    padding:
        40px;

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

    background:
        rgba(200,169,107,.08);

    border-radius:
        var(--radius-md);

    font-size:
        1.15rem;

    line-height:
        2;
}

.article-ps {

    margin-top:
        80px;

    padding-top:
        40px;

    border-top:
        1px solid rgba(0,0,0,.08);
}

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

.sidebar-related {

    display:
        flex;

    flex-direction:
        column;

    gap:
        24px;
}

.sidebar-related-item {

    display:
        flex;

    gap:
        18px;

    align-items:
        center;
}

.sidebar-related-item img {

    width:
        90px;

    height:
        90px;

    object-fit:
        cover;

    border-radius:
        var(--radius-md);
}

.sidebar-related-item h4 {

    margin:
        0;

    font-size:
        1rem;

    line-height:
        1.4;
}

/* =========================================================
ARTICLE GALLERY
========================================================= */

.article-gallery {

    background:
        var(--ivory);
}

/* =========================================================
DARK MODE
========================================================= */

body.dark-mode .article-chapo {

    background:
        rgba(255,255,255,.04);
}

body.dark-mode .article-ps {

    border-color:
        rgba(255,255,255,.08);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:991px){

.article-main-section {

margin-top:
-60px;
}

}

@media(max-width:768px){

.article-chapo {

padding:
28px;
}

.sidebar-related-item {

align-items:
flex-start;
}

}

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

.sidebar-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}

.sidebar-links a {

    color:
        var(--text);

    transition:
        var(--transition);
}

.sidebar-links a:hover {

    color:
        var(--forest);

    padding-left:
        6px;
}

/* =========================================================
SEARCH SECTION
========================================================= */

.search-section {

    padding-top:
        40px;

    padding-bottom:
        20px;
}

/* =========================================================
GALLERY SECTION
========================================================= */

.gallery-section {

    background:
        white;
}

/* =========================================================
EMPTY STATES
========================================================= */

.empty-state {

    text-align:
        center;

    padding:
        100px 40px;

    border-radius:
        var(--radius-xl);

    background:
        white;

    box-shadow:
        var(--shadow-soft);
}

.empty-state h2 {

    margin-bottom:
        20px;
}

.empty-state p {

    max-width:
        600px;

    margin:
        0 auto;
}

/* =========================================================
DARK MODE
========================================================= */

body.dark-mode .empty-state,
body.dark-mode .gallery-section {

    background:
        #171717;
}

body.dark-mode .sidebar-links a {

    color:
        rgba(255,255,255,.72);
}

/* =========================================================
SCROLL TOP
========================================================= */

.scroll-top {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    width:
        56px;

    height:
        56px;

    border-radius:
        50%;

    z-index:
        3000;

    opacity:
        0;

    visibility:
        hidden;

    background:
        var(--gradient-gold);

    color:
        white;

    font-size:
        1.2rem;

    box-shadow:
        var(--shadow-medium);

    transition:
        var(--transition);
}

.scroll-top.active {

    opacity:
        1;

    visibility:
        visible;
}

.scroll-top:hover {

    transform:
        translateY(-5px);
}

/* =========================================================
TIMELINE LINKS
========================================================= */

.timeline-link {

    display:
        inline-flex;

    margin-top:
        18px;

    font-weight:
        600;

    color:
        var(--forest);

    transition:
        var(--transition);
}

.timeline-link:hover {

    color:
        var(--gold);

    transform:
        translateX(5px);
}
/* =========================================================
TYPOGRAPHY ENHANCEMENT SYSTEM
ADD-ON LAYER
========================================================= */

/* =========================================================
GLOBAL TEXT RENDERING
========================================================= */

body {

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}

/* =========================================================
SECTION TYPOGRAPHY
========================================================= */

.section-title h2 {

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

    line-height:
        1.08;

    letter-spacing:
        -1px;

    text-wrap:
        balance;
}

.section-title p {

    font-size:
        1.08rem;

    line-height:
        1.95;

    text-wrap:
        pretty;
}

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

.hero-content h1 {

    font-size:
        clamp(3.5rem,8vw,6.8rem);

    line-height:
        .95;

    letter-spacing:
        -3px;

    text-wrap:
        balance;
}

.hero-description {

    line-height:
        2;

    text-wrap:
        pretty;
}

/* =========================================================
CARD TYPOGRAPHY
========================================================= */

.card-title {

    font-size:
        1.55rem;

    line-height:
        1.28;

    letter-spacing:
        -.5px;
}

.card-excerpt {

    line-height:
        1.92;

    text-wrap:
        pretty;
}

/* =========================================================
ARTICLE TYPOGRAPHY
========================================================= */

.article-content {

    font-size:
        1.12rem;

    line-height:
        2;

    color:
        var(--text);

    text-wrap:
        pretty;
}

.article-content p {

    margin-bottom:
        1.9rem;

    text-align:
        justify;

    hyphens:
        auto;
}

.article-content h2 {

    margin-top:
        80px;

    margin-bottom:
        28px;

    font-size:
        clamp(2rem,4vw,3.4rem);

    line-height:
        1.12;

    letter-spacing:
        -1px;

    color:
        var(--forest);

    text-wrap:
        balance;
}

.article-content h3 {

    margin-top:
        60px;

    margin-bottom:
        24px;

    font-size:
        2rem;

    line-height:
        1.2;

    color:
        var(--heading);
}

.article-content h4 {

    margin-top:
        40px;

    margin-bottom:
        18px;

    font-size:
        1.35rem;

    color:
        var(--heading);
}

/* =========================================================
EMPHASIS
========================================================= */

.article-content strong {

    color:
        var(--forest);

    font-weight:
        700;
}

.article-content em {

    color:
        var(--gold);

    font-style:
        italic;
}

/* =========================================================
BLOCKQUOTE
========================================================= */

.article-content blockquote {

    position:
        relative;

    margin:
        60px 0;

    padding:
        50px;

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

    border-radius:
        var(--radius-lg);

    background:
        rgba(200,169,107,.08);

    font-size:
        1.22rem;

    line-height:
        1.9;

    font-style:
        italic;

    color:
        var(--forest);
}

.article-content blockquote::before {

    content:
        "“";

    position:
        absolute;

    top:
        0;

    left:
        20px;

    font-size:
        6rem;

    color:
        rgba(200,169,107,.2);

    line-height:
        1;
}

/* =========================================================
LISTS
========================================================= */

.article-content ul,
.article-content ol {

    margin:
        40px 0;

    padding-left:
        30px;
}

.article-content li {

    margin-bottom:
        14px;

    line-height:
        1.9;
}

/* =========================================================
LINKS
========================================================= */

.article-content a {

    color:
        var(--forest);

    text-decoration:
        underline;

    text-decoration-thickness:
        2px;

    text-underline-offset:
        4px;
}

.article-content a:hover {

    color:
        var(--gold);
}

/* =========================================================
IMAGES
========================================================= */

.article-content img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

    margin:
        70px auto;

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-medium);
}

/* =========================================================
CAPTIONS
========================================================= */

.article-content figcaption {

    margin-top:
        18px;

    text-align:
        center;

    font-size:
        .92rem;

    color:
        var(--text-light);

    font-style:
        italic;
}

/* =========================================================
TABLES
========================================================= */

.article-content table {

    width:
        100%;

    margin:
        50px 0;

    border-collapse:
        collapse;
}

.article-content th {

    padding:
        18px;

    background:
        var(--forest);

    color:
        white;

    text-align:
        left;
}

.article-content td {

    padding:
        18px;

    border:
        1px solid rgba(0,0,0,.08);
}

/* =========================================================
HORIZONTAL RULE
========================================================= */

.article-content hr {

    width:
        140px;

    height:
        2px;

    margin:
        80px auto;

    border:
        none;

    background:
        rgba(200,169,107,.25);
}

/* =========================================================
DARK MODE TYPOGRAPHY
========================================================= */

body.dark-mode .article-content,
body.dark-mode .article-content h2,
body.dark-mode .article-content h3,
body.dark-mode .article-content h4 {

    color:
        white;
}

body.dark-mode .article-content p {

    color:
        rgba(255,255,255,.76);
}

body.dark-mode .article-content blockquote {

    background:
        rgba(255,255,255,.04);
}

/* =========================================================
RESPONSIVE TYPOGRAPHY
========================================================= */

@media(max-width:991px){

.hero-content h1 {

font-size:
4rem;
}

.section-title h2 {

font-size:
3rem;
}

.article-content {

font-size:
1.04rem;
}

}

@media(max-width:768px){

.hero-content h1 {

font-size:
2.9rem;

letter-spacing:
-1px;
}

.section-title h2 {

font-size:
2.3rem;
}

.article-content h2 {

font-size:
2rem;
}

.article-content blockquote {

padding:
34px;
}

.article-content img {

margin:
50px auto;
}

}

/* =========================================================
FOOTER OPTIMIZATION LAYER
NON-DESTRUCTIVE FIX
========================================================= */

/* =========================================================
FOOTER GRID
========================================================= */

.footer-top .row {

    row-gap:
        60px;
}

/* =========================================================
FOOTER BRAND
========================================================= */

.footer-brand {

    max-width:
        420px;
}

.footer-brand h2 {

    margin-bottom:
        22px;

    line-height:
        1.1;
}

.footer-brand p {

    line-height:
        1.9;

    text-wrap:
        pretty;
}

/* =========================================================
FOOTER LINKS
========================================================= */

.footer-links ul {

    gap:
        12px;
}

.footer-links a {

    display:
        inline-flex;

    align-items:
        center;

    font-size:
        .95rem;

    line-height:
        1.6;
}

/* =========================================================
FOOTER QUOTE
========================================================= */

.footer-quote {

    max-width:
        360px;

    padding:
        36px;

    margin-left:
        auto;
}

.footer-quote blockquote {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    font-size:
        1.08rem;

    line-height:
        2;

    text-align:
        left;
}

/* =========================================================
VERTICAL QUOTE STYLE
========================================================= */

.footer-quote blockquote::before {

    content:
        "“";

    display:
        block;

    font-size:
        4rem;

    line-height:
        1;

    color:
        rgba(255,255,255,.14);

    font-family:
        serif;
}

/* =========================================================
FOOTER DIVIDER
========================================================= */

.footer-divider {

    margin:
        60px 0 30px;
}

/* =========================================================
BOTTOM
========================================================= */

.footer-bottom-wrapper {

    align-items:
        center;
}

.footer-bottom p {

    line-height:
        1.8;
}

/* =========================================================
SOCIALS
========================================================= */

.footer-socials {

    margin-top:
        24px;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:991px){

.footer-quote {

max-width:
100%;

margin-left:
0;
}

.footer-bottom-wrapper {

flex-direction:
column;

align-items:
flex-start;

gap:
16px;
}

}

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

@media(max-width:768px){

.site-footer {

padding:
90px 0 40px;
}

.footer-brand,
.footer-quote {

max-width:
100%;
}

.footer-quote {

padding:
28px;
}

.footer-links {

margin-bottom:
10px;
}

.footer-links ul {

gap:
10px;
}

.footer-quote blockquote {

font-size:
1rem;

line-height:
1.9;
}

}

/* =========================================================
FOOTER OPTIMIZATION LAYER
NON DESTRUCTIVE
========================================================= */

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

.footer-top {

    position:
        relative;

    z-index:
        2;
}

.footer-top .row {

    align-items:
        flex-start;

    row-gap:
        60px;
}

/* =========================================================
FOOTER BRAND
========================================================= */

.footer-brand {

    max-width:
        420px;
}

.footer-brand h2 {

    margin-bottom:
        22px;

    line-height:
        1.1;

    letter-spacing:
        -1px;
}

.footer-brand p {

    line-height:
        1.95;

    text-wrap:
        pretty;
}

/* =========================================================
FOOTER LINKS
========================================================= */

.footer-links {

    max-width:
        220px;
}

.footer-links ul {

    gap:
        12px;
}

.footer-links li {

    line-height:
        1.5;
}

.footer-links a {

    display:
        inline-flex;

    align-items:
        center;

    font-size:
        .95rem;

    line-height:
        1.6;
}

/* =========================================================
FOOTER QUOTE
========================================================= */

.footer-quote {

    max-width:
        340px;

    margin-left:
        auto;

    padding:
        38px;

    border-radius:
        var(--radius-lg);

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);

    backdrop-filter:
        blur(10px);
}

/* =========================================================
QUOTE LABEL
========================================================= */

.footer-quote span {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--gold);

    font-size:
        .78rem;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}

/* =========================================================
QUOTE BLOCK
========================================================= */

.footer-quote blockquote {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    margin:
        0;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    text-align:
        left;
}

/* =========================================================
VERTICAL QUOTE
========================================================= */

.footer-quote blockquote p {

    position:
        relative;

    margin:
        0;

    padding-left:
        28px;

    color:
        white;

    font-size:
        1.08rem;

    line-height:
        2;

    text-wrap:
        pretty;
}

.footer-quote blockquote p::before {

    content:
        "“";

    position:
        absolute;

    top:
        -12px;

    left:
        0;

    font-size:
        3.5rem;

    line-height:
        1;

    color:
        rgba(255,255,255,.12);

    font-family:
        serif;
}

/* =========================================================
QUOTE FOOTER
========================================================= */

.footer-quote blockquote footer {

    color:
        var(--gold);

    font-size:
        .82rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}

/* =========================================================
FOOTER DIVIDER
========================================================= */

.footer-divider {

    margin:
        70px 0 34px;
}

/* =========================================================
BOTTOM
========================================================= */

.footer-bottom-wrapper {

    align-items:
        center;
}

.footer-bottom p {

    margin:
        0;

    line-height:
        1.8;
}

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

.scroll-top {

    backdrop-filter:
        blur(12px);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:991px){

.footer-brand,
.footer-links,
.footer-quote {

max-width:
100%;
}

.footer-quote {

margin-left:
0;
}

.footer-bottom-wrapper {

flex-direction:
column;

align-items:
flex-start;

gap:
14px;
}

}

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

@media(max-width:768px){

.site-footer {

padding:
90px 0 40px;
}

.footer-quote {

padding:
28px;
}

.footer-quote blockquote p {

font-size:
1rem;

line-height:
1.9;
}

.footer-links {

margin-bottom:
10px;
}

}

/* =========================================================
LEXIQUE IMMERSIVE SYSTEM
========================================================= */

.lexique-page-body {

    background:
        var(--ivory);
}

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

.hero-small {

    position:
        relative;

    min-height:
        65vh;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;
}

/* =========================================================
SEARCH
========================================================= */

.lexique-search-section {

    position:
        relative;

    margin-top:
        -50px;

    z-index:
        10;
}

.lexique-search-wrapper {

    max-width:
        760px;

    margin:
        0 auto;
}

.lexique-search-input {

    width:
        100%;

    height:
        78px;

    padding:
        0 34px;

    border:
        none;

    border-radius:
        100px;

    background:
        white;

    box-shadow:
        var(--shadow-large);

    font-size:
        1rem;
}

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

.lexique-section {

    padding:
        100px 0;
}

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

.lexique-grid {

    display:
        grid;

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

    gap:
        40px;
}

/* =========================================================
ITEM
========================================================= */

.lexique-item {

    position:
        relative;

    overflow:
        hidden;

    padding:
        40px;

    border-radius:
        var(--radius-xl);

    background:
        white;

    box-shadow:
        var(--shadow-soft);

    transition:
        var(--transition);
}

.lexique-item:hover {

    transform:
        translateY(-10px);

    box-shadow:
        var(--shadow-large);
}

/* =========================================================
IMAGE
========================================================= */

.lexique-image {

    margin:
        -40px -40px 30px;
}

.lexique-image img {

    width:
        100%;

    height:
        240px;

    object-fit:
        cover;
}

/* =========================================================
WORD
========================================================= */

.lexique-word {

    margin-bottom:
        14px;

    color:
        var(--forest);

    font-size:
        2rem;

    line-height:
        1.1;
}

/* =========================================================
CATEGORY
========================================================= */

.lexique-category {

    margin-bottom:
        16px;

    color:
        var(--gold);

    font-size:
        .8rem;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}

/* =========================================================
PRONUNCIATION
========================================================= */

.lexique-pronunciation {

    margin-bottom:
        24px;

    font-style:
        italic;

    color:
        var(--text-light);
}

/* =========================================================
DEFINITION
========================================================= */

.lexique-definition {

    line-height:
        2;

    color:
        var(--text);
}

/* =========================================================
QUOTE
========================================================= */

.lexique-quote {

    margin:
        34px 0;

    padding-left:
        24px;

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

    font-style:
        italic;

    line-height:
        1.9;

    color:
        var(--forest);
}

/* =========================================================
AUDIO
========================================================= */

.lexique-audio {

    margin-top:
        28px;
}

.lexique-audio audio {

    width:
        100%;
}

/* =========================================================
LINK
========================================================= */

.lexique-link {

    display:
        inline-flex;

    margin-top:
        24px;

    color:
        var(--forest);

    font-weight:
        700;

    transition:
        var(--transition);
}

.lexique-link:hover {

    color:
        var(--gold);

    transform:
        translateX(6px);
}

/* =========================================================
DARK MODE
========================================================= */

body.dark-mode .lexique-item {

    background:
        #171717;
}

body.dark-mode .lexique-definition {

    color:
        rgba(255,255,255,.76);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:768px){

.lexique-grid {

grid-template-columns:
1fr;
}

.lexique-item {

padding:
30px;
}

.lexique-image {

margin:
-30px -30px 24px;
}

.lexique-word {

font-size:
1.7rem;
}

}