.president-page {
    position: relative;
    margin-left: var(--rail);
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 42% 40%, #092a49 0, #03172c 46%, #021224 82%)
}

.president-page::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 39%;
    height: 100%;
    background: linear-gradient(145deg, transparent 30%, rgba(207, 11, 23, .65) 31%, rgba(207, 11, 23, .12) 70%, transparent 71%);
    opacity: .6
}

.president-art {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 100px;
    width: 43%;
    height: 72%;
    background-image: linear-gradient(90deg, #03172c 0%, rgba(3, 23, 44, .18) 30%, transparent 55%), url('../images/president-narayana-swamy.png');
    background-size: cover;
    background-position: center top
}

.president-content {
    position: relative;
    z-index: 4;
    width: 66%;
    padding: 48px 0 70px 42px
}

.president-kicker {
    margin: 0;
    text-transform: uppercase;
    font: 700 42px Oswald, sans-serif
}

.president-content>h1 {
    position: relative;
    margin: 0 0 58px;
    color: var(--gold);
    text-transform: uppercase;
    font: 700 clamp(55px, 6vw, 86px)/.95 Oswald, sans-serif;
    font-style: italic;
    letter-spacing: -2px
}

.president-content>h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -22px;
    width: 92%;
    height: 7px;
    background: #e20d1b;
    clip-path: polygon(0 45%, 100% 0, 88% 80%, 8% 100%)
}

.statement-card {
    position: relative;
    margin: 0;
    padding: 38px 43px 32px;
    border: 3px solid var(--gold);
    border-top-width: 2px;
    border-radius: 0 24px 0 24px;
    background: linear-gradient(135deg, rgba(3, 23, 44, .94), rgba(1, 15, 29, .86))
}

.statement-card h2 {
    margin: 0 0 20px;
    color: var(--gold);
    font: 600 28px Oswald, sans-serif
}

.statement-card p {
    margin: 0 0 21px;
    max-width: 680px;
    font-size: 20px;
    line-height: 1.45
}

.statement-card strong {
    color: var(--gold);
    font-weight: 500
}

.quote-open,
.quote-close {
    position: absolute;
    color: var(--gold);
    font: 700 80px/1 Georgia, serif
}

.quote-open {
    left: -10px;
    top: -34px
}

.quote-close {
    right: -12px;
    bottom: -52px
}

.president-signature {
    position: absolute;
    z-index: 5;
    right: 5%;
    bottom: 9%;
    width: 350px;
    text-align: right;
}

.president-signature p {
    position: relative;
    margin: 0 0 10px;
    font-size: 27px
}

.president-signature p::after {
    content: '';
    display: inline-block;
    width: 180px;
    height: 2px;
    margin-left: 15px;
    vertical-align: middle;
    background: #e20d1b
}

.president-signature strong {
    display: block;
    color: var(--gold);
    font: 700 39px Oswald, sans-serif
}

.president-signature span {
    display: block;
    margin-top: 8px;
    font: 400 25px/1.35 Oswald, sans-serif
}

@media(max-width:1200px) {
    .president-content {
        width: 70%
    }

    .president-art {
        width: 48%;
        opacity: .8
    }

    .statement-card p {
        font-size: 17px
    }

    .president-signature {
        right: 3%;
        width: 280px
    }

    .president-signature strong {
        font-size: 31px
    }
}

@media(max-width:760px) {
    .president-page {
        margin-left: 0;
        padding-bottom: 430px
    }

    .president-content {
        width: auto;
        padding: 94px 22px 60px
    }

    .president-kicker {
        font-size: 31px
    }

    .president-content>h1 {
        font-size: 50px;
        margin-bottom: 48px
    }

    .statement-card {
        padding: 34px 22px
    }

    .statement-card h2 {
        font-size: 24px
    }

    .statement-card p {
        font-size: 15px
    }

    .president-art {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 510px;
        background-image: linear-gradient(180deg, #03172c 0%, rgba(3, 23, 44, .08) 35%), url('../images/president-narayana-swamy.png');
        background-position: center top
    }

    .president-signature {
        right: 22px;
        bottom: 28px;
        width: 280px;
        text-align: right
    }

    .president-signature p {
        font-size: 21px
    }

    .president-signature p::after {
        width: 90px
    }

    .president-signature strong {
        font-size: 31px
    }

    .president-signature span {
        font-size: 21px
    }

    .president-page::after {
        z-index: 3;
        width: 100%;
        height: 45%;
        top: auto;
        bottom: 0
    }
}