/*======================================================
000 ARTICLE VARIABLES
======================================================*/

:root{

    --article-bg:#f8f5ef;

    --article-white:#ffffff;

    --article-text:#262626;

    --article-title:#0F3147;

    --article-accent:#E97932;

    --article-border:#DDD8CF;

    --article-max-width:1180px;

    --article-content-width:760px;

}

/*======================================================
001 ARTICLE RESET
======================================================*/

.article-hero,
.article-shell,
.article-section,
.article-content,
.share-dock,
.authors-section{

    box-sizing:border-box;

}

.article-shell *{

    box-sizing:border-box;

}

.article-shell img{

    display:block;

    max-width:100%;

    height:auto;

    margin-left:auto;

    margin-right:auto;

}

.article-shell ul,
.article-shell ol{

    margin:0;

    padding:0;

}

.article-shell li{

    margin:0;

}

.article-shell h1,
.article-shell h2,
.article-shell h3,
.article-shell h4,
.article-shell p{

    margin:0;

}


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

.article-hero{

    position:relative;

    width:100%;

    height:620px;

    overflow:hidden;

    background:#0F3147;

}

.article-hero > img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(15,49,71,.78) 0%,
        rgba(15,49,71,.55) 45%,
        rgba(15,49,71,.40) 100%
    );

    z-index:1;

}

.hero-content{

    position:absolute;

    top:47%;

    left:50%;

    transform:translate(-50%,-50%);

    width:min(1180px,90%);

    display:grid;

    grid-template-columns:180px 1fr;

    column-gap:70px;

    align-items:center;

    z-index:2;

}

.hero-logo{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-logo img{

    width:200px;

    height:auto;

    filter:brightness(0) invert(1)

}

.hero-information{

    position:relative;

    padding-left:60px;

}

.hero-information::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:3px;

    height:190px;

    background:var(--article-accent);

    border-radius:20px;

}

.hero-category{

    display:block;

    margin-bottom:22px;

    color:var(--article-accent);

    font-family:'Inter',sans-serif;

    font-size:13px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.hero-information h1{

    max-width:720px;

    margin-bottom:26px;

    color:#FFF;

    font-family:'moderat-medium';

    font-size:58px;

    font-weight:400;

    line-height:1.08;

    letter-spacing:-1px;

}

.hero-date{

    color:#FFF;

    font-family:'Inter',sans-serif;

    font-size:16px;

    font-weight:300;

    opacity:.85;

}

/*======================================================
004 ARTICLE BODY
======================================================*/

.article-shell{

    display:grid;

    grid-template-columns:60px minmax(0,900px);

    justify-content:center;

    column-gap:90px;

    max-width:1180px;

    margin:90px auto 140px;

    padding:0 30px;

    align-items:start;

}

.article-content{

    width:100%;
    text-align: justify;

}

.article-section{

    margin-bottom:85px;

}

.article-section:last-child{

    margin-bottom:0;

    margin-top: 80px;

}

/*======================================================
005 SHARE DOCK
======================================================*/

.share-dock{

    position:sticky;

    top:120px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}

.share-dock a{

    display:flex;

    justify-content:center;

    align-items:center;

    width:58px;

    height:58px;

    background:#FFF;

    border-radius:50%;

    border:1px solid #E6E6E6;

    transition:.30s;

    box-shadow:0 8px 22px rgba(0,0,0,.08);

}

.share-dock a:hover{

    transform:translateY(-4px);

    border-color:var(--article-accent);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.share-dock img{

    display:block;

    height:auto;

}

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

.article-intro{

    margin-bottom:60px;

    color:var(--article-title);

    font-family:'moderat-medium';

    font-size:30px;

    line-height:1.65;

    font-weight:400;

}

.article-content h2{

    margin:90px 0 35px;

    color:var(--article-title);

    font-family:'moderat-medium';

    font-size:46px;

    font-weight:400;

    line-height:1.15;

    letter-spacing:-.5px;

}

.article-content h2:first-child{

    margin-top:0;

}

.article-content h3{

    margin:70px 0 25px;

    color:var(--article-title);

    font-family:'moderat-medium';

    font-size:32px;

    font-weight:400;

}

.article-content p{

    margin-bottom:28px;

    color:var(--article-text);

    font-family:'Inter',sans-serif;

    font-size:18px;

    font-weight:400;

    line-height:2;

}

.article-content strong{

    color:var(--article-title);

    font-weight:600;

}

.article-content em{

    font-style:italic;

}

.article-content a{

    color:var(--article-accent);

    text-decoration:none;

    transition:.30s;

}

.article-content a:hover{

    color:var(--article-title);

}

.article-content sup{

    position:relative;

    top:-.35em;

    font-size:70%;

}

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

.article-list{

    margin:45px 0;

    padding-left:20px;

}

.article-list li{

    margin-bottom:24px;

    color:var(--article-text);

    font-size:18px;

    line-height:1.9;

}

.article-list li:last-child{

    margin-bottom:0;

}

.article-list strong{

    color:var(--article-title);

}

/*======================================================
008 FOOTNOTES
======================================================*/

.article-footnotes{

    margin-top:25px;

    padding-top:18px;

    border-top:1px solid var(--article-border);

}

.article-footnotes p{

    margin-bottom:18px;

    color:#6D6D6D;

    font-family:'Inter',sans-serif;

    font-size:14px;

    line-height:1.8;

}

.article-footnotes p:last-child{

    margin-bottom:0;

}

.article-footnotes sup{

    margin-right:4px;

    color:var(--article-accent);

    font-weight:600;

}

/*======================================================
008b DATA TABLES
======================================================*/

.article-table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

    font-family:'Inter',sans-serif;

    font-size:15px;

}

.article-table th,
.article-table td{

    padding:12px 16px;

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

    text-align:left;

    color:var(--article-text);

}

.article-table th{

    background:var(--article-title);

    color:#fff;

    font-weight:600;

}

.article-table-note,
.article-table-source{

    margin-top:-14px;

    margin-bottom:30px;

    color:#6D6D6D;

    font-family:'Inter',sans-serif;

    font-size:14px;

    line-height:1.6;

}

/*======================================================
008c COMPETITION AREAS GRID
======================================================*/

.competition-areas-grid{

    display:grid;

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

    gap:24px;

    margin:40px 0;

}

.competition-area-card{

    padding:28px 30px;

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

    border-radius:16px;

}

.competition-area-card-wide{

    grid-column:1 / -1;

}

.competition-area-card h4{

    margin-bottom:14px;

    padding-bottom:10px;

    border-bottom:2px solid var(--article-accent);

    color:var(--article-title);

    font-family:'moderat-medium';

    font-size:20px;

    font-weight:400;

}

.competition-area-card ul{

    list-style:disc;

    padding-left:20px;

}

.competition-area-card li{

    margin-bottom:8px;

    color:var(--article-text);

    font-family:'Inter',sans-serif;

    font-size:15px;

    line-height:1.6;

}

.competition-area-card li:last-child{

    margin-bottom:0;

}

/*======================================================
009 AUTHORS
======================================================*/

.authors-section{

    margin-top:140px;

}

.authors-title{

    margin-bottom:60px;

    color:var(--article-title);

    font-family:'moderat-medium';

    font-size:48px;

    font-weight:400;

}

.main-author-card{

    display:grid;

    grid-template-columns:220px 1fr;

    column-gap:50px;

    align-items:center;

    margin-bottom:110px;

}

.author-photo{

    width:220px;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:50%;

}

.author-name{

    margin-bottom:12px;

    color:var(--article-title);

    font-family:'moderat-medium';

    font-size:34px;

    line-height:1.2;

}

.author-role{

    margin-bottom:28px;

    color:var(--article-accent);

    font-family:'Inter',sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.author-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--article-title);

    font-family:'Inter',sans-serif;

    font-size:15px;

    text-decoration:none;

    transition:.30s;

}

.author-link:hover{

    color:var(--article-accent);

}

/*======================================================
010 COAUTHORS
======================================================*/

.coauthors-label{

    margin-bottom:45px;

    color:var(--article-title);

    font-family:'moderat-medium';

    font-size:36px;

}

.coauthors-grid{

    display:grid;

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

    gap:50px;

}

.author-card{

    text-align:center;

}

.author-card .author-photo{

    width:170px;

    margin:0 auto 28px;

}

.author-card .author-name{

    margin-bottom:10px;

    font-size:24px;

}

.author-card .author-role{

    margin-bottom:22px;

    font-size:14px;

}

.author-card .author-link{

    justify-content:center;

}

/*======================================================
011 ARTICLE NAVIGATION
======================================================*/

.article-navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:140px 0;

    padding-top:60px;

    border-top:1px solid var(--article-border);

}

.article-navigation a{

    color:var(--article-title);

    font-family:'moderat-medium';

    font-size:22px;

    text-decoration:none;

    transition:.30s;

}

.article-navigation a:hover{

    color:var(--article-accent);

}

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

@media (max-width:900px){

    .article-shell{

        grid-template-columns:1fr;

        row-gap:50px;

        padding:0 20px;

        margin:50px auto 90px;

    }

    .share-dock{

        position:static;

        flex-direction:row;

        justify-content:center;

        order:-1;

    }

}

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    .article-hero{

        height:auto;

        min-height:380px;

        padding:70px 0;

    }

    .hero-content{

        grid-template-columns:1fr;

        row-gap:26px;

        text-align:center;

    }

    .hero-logo{

        justify-content:center;

    }

    .hero-logo img{

        width:110px;

    }

    .hero-information{

        padding-left:0;

    }

    .hero-information::before{

        display:none;

    }

    .hero-information h1{

        max-width:100%;

        font-size:32px;

    }

    .hero-category{

        font-size:12px;

        letter-spacing:2px;

    }

    .article-intro{

        margin-bottom:40px;

        font-size:21px;

    }

    .article-content h2{

        margin:60px 0 22px;

        font-size:28px;

    }

    .article-content h3{

        margin:45px 0 18px;

        font-size:22px;

    }

    .article-content p{

        font-size:16px;

        line-height:1.8;

    }

    .article-list li{

        font-size:16px;

    }

    .article-table{

        font-size:13px;

    }

    .article-table th,
    .article-table td{

        padding:8px 10px;

    }

    .authors-section{

        margin-top:80px;

    }

    .main-author-card{

        grid-template-columns:1fr;

        justify-items:center;

        text-align:center;

        row-gap:20px;

        margin-bottom:70px;

    }

    .author-name{

        font-size:26px;

    }

    .coauthors-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .competition-areas-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .article-navigation{

        flex-direction:column;

        gap:20px;

        align-items:flex-start;

    }

}

@media (max-width:480px){

    .hero-information h1{

        font-size:26px;

    }

    .article-intro{

        font-size:19px;

    }

    .article-content h2{

        font-size:24px;

    }

    .share-dock a{

        width:48px;

        height:48px;

    }

}