/* ==================================================
   ROOT
================================================== */

:root {

    --primary: #123b66;
    --primary-dark: #082a4b;
    --primary-light: #1769aa;

    --blue: #2f80ed;

    --green: #16a36c;
    --green-light: #2bc987;

    --purple: #7b2ff7;

    --red: #d71950;

    --orange: #f59e0b;

    --dark: #142033;
    --text: #475467;
    --muted: #667085;

    --white: #ffffff;

}


/* ==================================================
   GLOBAL
================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    color:
        var(--dark);

    line-height:
        1.7;

    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(23,105,170,.06),
            transparent 28%
        ),

        radial-gradient(
            circle at 92% 75%,
            rgba(22,163,108,.07),
            transparent 28%
        ),

        linear-gradient(
            180deg,
            #fbfdff,
            #eef9f4
        );

}


h1,
h2,
h3,
h4,
h5 {

    font-family:
        "Manrope",
        sans-serif;

}


a {

    text-decoration:
        none;

}



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

.top-bar {

    color:
        #dbe7f2;

    background:

        linear-gradient(
            90deg,
            #071f39,
            #104d78
        );

    font-size:
        12px;

}


.top-bar-inner {

    min-height:
        40px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

}


.top-bar-inner span {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.top-bar i {

    color:
        #4bd89a;

}



/* ==================================================
   NAVBAR
================================================== */

.main-navbar {

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

    backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid
        rgba(18,59,102,.08);

    box-shadow:
        0 8px 30px
        rgba(18,59,102,.06);

}


.brand-wrap {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.brand-logo {

    width:
        60px;

    height:
        60px;

    object-fit:
        contain;

}


.brand-name {

    font-family:
        "Manrope",
        sans-serif;

    color:
        var(--primary);

    font-size:
        24px;

    font-weight:
        800;

}


.brand-subtitle {

    max-width:
        330px;

    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.35;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;

}


.nav-link {

    padding:
        24px 9px !important;

    color:
        #344054 !important;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        .25s;

}


.nav-link:hover,
.nav-link.active {

    color:
        var(--primary-light) !important;

}


.submit-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-left:
        15px;

    padding:
        11px 18px;

    color:
        #fff;

    border-radius:
        12px;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-light),
            var(--green)
        );

    font-size:
        13px;

    font-weight:
        800;

    box-shadow:
        0 11px 26px
        rgba(18,59,102,.20);

    transition:
        .25s;

}


.submit-btn:hover {

    color:
        #fff;

    transform:
        translateY(-3px);

    background:

        linear-gradient(
            135deg,
            var(--purple),
            #2f80ed,
            var(--green)
        );

    box-shadow:
        0 17px 35px
        rgba(76,85,205,.25);

}


.navbar-toggler {

    border:
        0;

    box-shadow:
        none !important;

}


.navbar-toggler i {

    color:
        var(--primary);

    font-size:
        28px;

}



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

.archive-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        52px 0 74px;

    background:

        radial-gradient(
            circle at 87% 18%,
            rgba(28,192,121,.19),
            transparent 27%
        ),

        radial-gradient(
            circle at 11% 85%,
            rgba(47,128,237,.13),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #eef8ff,
            #effaf4
        );

}


.hero-orb {

    position:
        absolute;

    border:
        1px solid
        rgba(18,100,145,.10);

    border-radius:
        50%;

}


.hero-orb-one {

    width:
        510px;

    height:
        510px;

    right:
        -280px;

    top:
        -300px;

}


.hero-orb-two {

    width:
        320px;

    height:
        320px;

    left:
        -175px;

    bottom:
        -220px;

    border-color:
        rgba(22,163,108,.12);

}


.breadcrumb-wrap {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        39px;

    font-size:
        13px;

}


.breadcrumb-wrap a {

    color:
        var(--primary-light);

    font-weight:
        700;

}


.breadcrumb-wrap span {

    color:
        var(--muted);

}


.breadcrumb-wrap i {

    color:
        #98a2b3;

    font-size:
        9px;

}


.hero-kicker {

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .13em;

}


.archive-hero h1 {

    margin:
        8px 0 14px;

    color:
        #102d4b;

    font-size:
        clamp(
            2.7rem,
            6vw,
            4.8rem
        );

    line-height:
        .98;

    letter-spacing:
        -.05em;

}


.hero-description {

    max-width:
        720px;

    color:
        #637488;

    font-size:
        16px;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        25px;

}


.btn-main,
.btn-outline {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        13px 18px;

    border-radius:
        13px;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        .25s;

}


.btn-main {

    color:
        #fff;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-light),
            var(--green)
        );

    box-shadow:
        0 12px 28px
        rgba(18,59,102,.19);

}


.btn-main:hover {

    color:
        #fff;

    transform:
        translateY(-3px);

    background:

        linear-gradient(
            135deg,
            var(--purple),
            #2f80ed,
            var(--green)
        );

    box-shadow:
        0 18px 36px
        rgba(70,82,211,.26);

}


.btn-outline {

    color:
        var(--primary);

    border:
        1px solid
        rgba(18,59,102,.18);

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

}


.btn-outline:hover {

    color:
        #fff;

    transform:
        translateY(-3px);

    border-color:
        transparent;

    background:

        linear-gradient(
            135deg,
            var(--primary-light),
            var(--green)
        );

    box-shadow:
        0 15px 30px
        rgba(23,105,170,.18);

}



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

.archive-highlight {

    position:
        relative;

    z-index:
        2;

    padding:
        29px;

    color:
        #fff;

    border-radius:
        25px;

    background:

        radial-gradient(
            circle at 80% 17%,
            rgba(47,220,157,.22),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #082a4b,
            #12669e 60%,
            #15976b
        );

    box-shadow:
        0 25px 50px
        rgba(18,59,102,.20);

}


.archive-highlight-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

}


.archive-highlight-top span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #afeed3;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .07em;

}


.archive-highlight-top strong {

    padding:
        6px 9px;

    border-radius:
        8px;

    color:
        #fff;

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

    font-size:
        10px;

}


.archive-big-number {

    margin-top:
        25px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        92px;

    font-weight:
        800;

    line-height:
        .83;

    letter-spacing:
        -.08em;

}


.archive-highlight > p {

    margin:
        13px 0 0;

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

    font-size:
        14px;

}


.archive-divider {

    height:
        1px;

    margin:
        22px 0;

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

}


.archive-mini-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

}


.archive-mini-grid strong {

    display:
        block;

    color:
        #fff;

    font-size:
        13px;

}


.archive-mini-grid small {

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

    font-size:
        10px;

}



/* ==================================================
   MAIN ARCHIVE CONTENT
================================================== */

.archive-content {

    padding:
        78px 0 85px;

}


.archive-layout {

    display:
        grid;

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

    gap:
        32px;

    align-items:
        start;

}



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

.archive-sidebar {

    position:
        sticky;

    top:
        105px;

}


.sidebar-card {

    margin-bottom:
        18px;

    padding:
        22px;

    border:
        1px solid
        rgba(18,59,102,.10);

    border-radius:
        20px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(245,250,255,.98),
            rgba(231,249,240,.95)
        );

    box-shadow:
        0 13px 32px
        rgba(20,40,65,.07);

}


.sidebar-summary {

    color:
        #fff;

    background:

        radial-gradient(
            circle at 85% 12%,
            rgba(46,220,159,.20),
            transparent 29%
        ),

        linear-gradient(
            145deg,
            #092b4d,
            #146397 60%,
            #15966d
        );

}


.sidebar-label {

    display:
        block;

    color:
        #b2efd4;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .13em;

}


.sidebar-number {

    margin-top:
        16px;

    color:
        #fff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        66px;

    font-weight:
        800;

    line-height:
        .85;

}


.sidebar-summary h3 {

    margin:
        12px 0 1px;

    color:
        #fff;

    font-size:
        21px;

}


.sidebar-summary > p {

    margin:
        0;

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

    font-size:
        12px;

}


.sidebar-divider {

    height:
        1px;

    margin:
        20px 0;

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

}


.sidebar-stat {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        11px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

    font-size:
        10px;

}


.sidebar-stat:last-child {

    border-bottom:
        0;

}


.sidebar-stat span {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

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

}


.sidebar-stat span i {

    color:
        #56dba2;

}


.sidebar-stat strong {

    color:
        #fff;

    font-size:
        10px;

    text-align:
        right;

}



/* QUICK NAV */

.sidebar-card h4 {

    margin-bottom:
        12px;

    color:
        #102d4b;

    font-size:
        17px;

}


.sidebar-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    margin-bottom:
        5px;

    padding:
        11px 9px;

    color:
        #58677a;

    border-radius:
        10px;

    font-size:
        10px;

    font-weight:
        700;

    transition:
        .22s;

}


.sidebar-link span {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.sidebar-link:hover {

    color:
        var(--primary-light);

    background:
        #edf7fc;

}


.sidebar-link.active {

    color:
        #fff;

    background:

        linear-gradient(
            135deg,
            var(--primary-light),
            var(--green)
        );

    box-shadow:
        0 9px 20px
        rgba(23,105,170,.15);

}


.sidebar-link i {

    color:
        var(--primary-light);

}


.sidebar-link.active i {

    color:
        #fff;

}



/* SIDEBAR CTA */

.archive-submit {

    padding:
        23px;

    color:
        #fff;

    border-radius:
        20px;

    background:

        linear-gradient(
            145deg,
            var(--purple),
            #2f80ed 52%,
            #16b978
        );

    box-shadow:
        0 18px 38px
        rgba(76,73,199,.19);

}


.archive-submit-icon {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        13px;

    color:
        #fff;

    border-radius:
        12px;

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

}


.archive-submit h4 {

    margin:
        0 0 8px;

    color:
        #fff;

    font-size:
        18px;

}


.archive-submit p {

    margin:
        0 0 17px;

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

    font-size:
        11px;

}


.archive-submit a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        9px 12px;

    color:
        #17314e;

    border-radius:
        10px;

    background:
        #fff;

    font-size:
        10px;

    font-weight:
        800;

    transition:
        .22s;

}


.archive-submit a:hover {

    color:
        #fff;

    transform:
        translateY(-2px);

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

}



/* ==================================================
   ARCHIVE HEADING
================================================== */

.archive-heading {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        27px;

}


.section-kicker {

    color:
        var(--green);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .14em;

}


.archive-heading h2 {

    margin:
        7px 0 8px;

    color:
        #102d4b;

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

    line-height:
        1.05;

    letter-spacing:
        -.04em;

}


.archive-heading p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;

}


.archive-total {

    flex-shrink:
        0;

    min-width:
        110px;

    padding:
        13px;

    text-align:
        center;

    border-radius:
        15px;

    background:

        linear-gradient(
            145deg,
            #edf7ff,
            #e9f9f2
        );

}


.archive-total strong {

    display:
        block;

    color:
        var(--primary-light);

    font-size:
        14px;

}


.archive-total span {

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        700;

}



/* ==================================================
   VOLUME CARD
================================================== */

.volume-card {

    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        18px;

    padding:
        25px;

    border:
        1px solid
        rgba(18,59,102,.10);

    border-radius:
        21px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(246,251,255,.97),
            rgba(231,249,240,.94)
        );

    box-shadow:
        0 12px 32px
        rgba(20,40,65,.06);

    transition:
        .28s;

}


.volume-card::after {

    content:
        "";

    position:
        absolute;

    width:
        160px;

    height:
        160px;

    top:
        -95px;

    right:
        -90px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(22,163,108,.13),
            transparent 68%
        );

}


.volume-card:hover {

    border-color:
        rgba(23,105,170,.19);

    box-shadow:
        0 19px 42px
        rgba(18,67,105,.10);

}


.featured-volume {

    border-color:
        rgba(23,105,170,.19);

    box-shadow:
        0 18px 42px
        rgba(23,105,170,.10);

}


.volume-header {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        22px;

}


.volume-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.year-badge {

    width:
        57px;

    height:
        57px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    color:
        #fff;

    border-radius:
        15px;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-light),
            var(--green)
        );

    box-shadow:
        0 10px 22px
        rgba(18,59,102,.17);

    font-size:
        11px;

    font-weight:
        800;

}


.volume-heading h3 {

    margin:
        0 0 2px;

    color:
        #102d4b;

    font-size:
        22px;

}


.volume-heading p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        10px;

}


.latest-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px 10px;

    color:
        #0b8053;

    border-radius:
        50px;

    background:
        #e4f8ee;

    font-size:
        9px;

    font-weight:
        800;

}



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

.issue-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        11px;

}


.issue-item {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    min-width:
        0;

    padding:
        12px;

    color:
        var(--dark);

    border:
        1px solid
        rgba(18,59,102,.08);

    border-radius:
        13px;

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

    transition:
        transform .23s ease,
        border-color .23s ease,
        box-shadow .23s ease,
        background .23s ease;

}


.issue-item:hover {

    color:
        var(--dark);

    transform:
        translateY(-3px);

    border-color:
        rgba(23,105,170,.22);

    background:
        #fff;

    box-shadow:
        0 10px 22px
        rgba(23,105,170,.11);

}


.issue-icon {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    color:
        var(--primary-light);

    border-radius:
        10px;

    background:

        linear-gradient(
            145deg,
            #ebf5ff,
            #e8f8ef
        );

    font-size:
        9px;

    font-weight:
        800;

}


.issue-text {

    min-width:
        0;

    flex:
        1;

}


.issue-text strong {

    display:
        block;

    color:
        #173350;

    font-size:
        11px;

}


.issue-text span {

    display:
        block;

    margin-top:
        1px;

    color:
        #7a8999;

    font-size:
        9px;

}


.issue-item > i {

    flex-shrink:
        0;

    color:
        #98a7b6;

    font-size:
        10px;

}


.issue-item.current {

    border-color:
        rgba(22,163,108,.22);

    background:

        linear-gradient(
            145deg,
            #f2fbf7,
            #e8f7ef
        );

}


.issue-item.current
.issue-icon {

    color:
        #fff;

    background:

        linear-gradient(
            135deg,
            var(--green),
            var(--primary-light)
        );

}


.current-tag {

    flex-shrink:
        0;

    padding:
        4px 6px;

    color:
        #0d8054;

    border-radius:
        50px;

    background:
        #dff6e9;

    font-size:
        8px;

    font-weight:
        800;

}


.old-volume {

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

}



/* ==================================================
   ARCHIVE NOTE
================================================== */

.archive-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    margin-top:
        22px;

    padding:
        18px;

    border:
        1px solid
        rgba(18,59,102,.09);

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #edf7ff,
            #edf9f4
        );

}


.archive-note-icon {

    width:
        37px;

    height:
        37px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    color:
        var(--primary-light);

    border-radius:
        10px;

    background:
        #fff;

}


.archive-note strong {

    color:
        #173552;

    font-size:
        11px;

}


.archive-note p {

    margin:
        2px 0 0;

    color:
        var(--muted);

    font-size:
        10px;

}



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

.archive-cta {

    padding:
        0 0 80px;

}


.archive-cta-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        45px;

    color:
        #fff;

    border-radius:
        27px;

    background:

        radial-gradient(
            circle at 83% 15%,
            rgba(43,220,158,.20),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #082a4b,
            #14699f 55%,
            #15976b
        );

    box-shadow:
        0 24px 54px
        rgba(18,59,102,.18);

}


.archive-cta-card > div:first-child span {

    color:
        #a8efd1;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .14em;

}


.archive-cta-card h2 {

    margin:
        7px 0 9px;

    font-size:
        clamp(
            1.9rem,
            4vw,
            3rem
        );

    letter-spacing:
        -.04em;

}


.archive-cta-card p {

    max-width:
        620px;

    margin:
        0;

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

    font-size:
        13px;

}


.cta-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-shrink:
        0;

}


.cta-outline,
.cta-main {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        13px 17px;

    border-radius:
        12px;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        .25s;

}


.cta-outline {

    color:
        #fff;

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

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

}


.cta-outline:hover {

    color:
        #fff;

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

}


.cta-main {

    color:
        #12304d;

    background:
        #fff;

}


.cta-main:hover {

    color:
        #fff;

    transform:
        translateY(-3px);

    background:

        linear-gradient(
            135deg,
            var(--purple),
            #2f80ed,
            var(--green)
        );

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.17);

}



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

.footer {

    padding:
        62px 0 24px;

    color:
        #aebdcd;

    background:
        #081c30;

}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        18px;

}


.footer-brand img {

    width:
        66px;

    height:
        66px;

    object-fit:
        contain;

}


.footer-brand h4 {

    margin:
        0 0 3px;

    color:
        #fff;

}


.footer-brand p {

    margin:
        0;

    color:
        #aebdcd;

    font-size:
        11px;

}


.footer-description {

    max-width:
        500px;

    color:
        #9fb0c2;

    font-size:
        13px;

}


.footer h5 {

    margin-bottom:
        18px;

    color:
        #fff;

    font-size:
        15px;

}


.footer a {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #aebdcd;

    font-size:
        12px;

    transition:
        .2s;

}


.footer a:hover {

    color:
        #55dda0;

    padding-left:
        3px;

}


.footer p {

    color:
        #aebdcd;

    font-size:
        12px;

}


.footer p i {

    margin-right:
        7px;

    color:
        #43d59a;

}


.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    flex-wrap:
        wrap;

    margin-top:
        42px;

    padding-top:
        20px;

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

    color:
        #7f94a9;

    font-size:
        10px;

}



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

@media (max-width: 1199px) {

    .nav-link {

        padding-left:
            6px !important;

        padding-right:
            6px !important;

        font-size:
            12px;

    }

}


@media (max-width: 991px) {

    .top-extra {

        display:
            none !important;

    }


    .nav-link {

        padding:
            10px 0 !important;

    }


    .submit-btn {

        margin:
            10px 0 15px;

    }


    .archive-layout {

        grid-template-columns:
            1fr;

    }


    .archive-sidebar {

        position:
            static;

        display:
            grid;

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

        gap:
            18px;

    }


    .sidebar-card,
    .archive-submit {

        margin-bottom:
            0;

    }


    .archive-submit {

        grid-column:
            span 2;

    }


    .issue-grid {

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

    }


    .author-cta,
    .archive-cta-card {

        align-items:
            flex-start;

    }


    .archive-cta-card {

        flex-direction:
            column;

    }

}


@media (max-width: 767px) {

    .top-bar-inner {

        justify-content:
            center;

        padding:
            7px 0;

        min-height:
            0;

    }


    .top-bar-inner span {

        font-size:
            10px;

    }


    .brand-subtitle {

        display:
            none;

    }


    .brand-logo {

        width:
            53px;

        height:
            53px;

    }


    .archive-hero {

        padding:
            40px 0 60px;

    }


    .archive-hero h1 {

        font-size:
            2.55rem;

    }


    .hero-description {

        font-size:
            14px;

    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .btn-main,
    .btn-outline {

        width:
            100%;

    }


    .archive-content {

        padding:
            58px 0 68px;

    }


    .archive-sidebar {

        display:
            flex;

        flex-direction:
            column;

    }


    .archive-submit {

        width:
            100%;

    }


    .archive-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .archive-total {

        align-self:
            flex-start;

    }


    .volume-card {

        padding:
            20px;

    }


    .volume-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .issue-grid {

        grid-template-columns:
            1fr;

    }


    .old-volume {

        grid-template-columns:
            1fr;

    }


    .archive-cta-card {

        padding:
            33px 24px;

    }


    .cta-buttons {

        width:
            100%;

        flex-direction:
            column;

    }


    .cta-outline,
    .cta-main {

        width:
            100%;

    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}