/* =========================================================
   HONOURS PAGE
   AWARDS / ORATIONS / HONORARY ACADEMIC APPOINTMENTS
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

:root {

    --navy: #061b2b;
    --navy-dark: #03131f;
    --navy-light: #0b2d43;

    --gold: #b78a48;
    --gold-light: #d8b777;

    --ivory: #f7f4ed;
    --cream: #eeeadf;

    --white: #ffffff;

    --text: #243b49;
    --muted: #74838b;

}

body {

    margin: 0;
    padding: 0;

    background: #ffffff;

    color: var(--text);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;
}

img {

    display: block;
    width: 100%;

}

.honours-page {

    position: relative;

    overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width:
        min(1180px,
            calc(100% - 40px));

    margin: 0 auto;

}


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

.global-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

}


.global-wave {

    position: absolute;

    width: 950px;

    height: 950px;

    border-radius:
        48% 52% 60% 40%;

    border:
        1px solid rgba(183, 138, 72, .07);

}


.wave-a {

    right: -650px;

    top: 900px;

    transform:
        rotate(30deg) scaleX(1.3);

}


.wave-b {

    left: -700px;

    top: 2400px;

    border-color:
        rgba(20, 80, 110, .06);

    transform:
        rotate(-25deg) scaleX(1.35);

}


.wave-c {

    right: -700px;

    top: 4200px;

    border-color:
        rgba(183, 138, 72, .055);

    transform:
        rotate(20deg) scaleX(1.4);

}


/* =========================================================
   CIRCLES
========================================================= */

.global-circle {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(183, 138, 72, .055);

}


.circle-a {

    width: 700px;
    height: 700px;

    top: 1300px;

    right: -560px;

}


.circle-b {

    width: 600px;
    height: 600px;

    top: 2700px;

    left: -500px;

    border-color:
        rgba(20, 80, 110, .05);

}


.circle-c {

    width: 750px;
    height: 750px;

    top: 4200px;

    right: -600px;

}


/* =========================================================
   GLOWS
========================================================= */

.global-glow {

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    filter: blur(80px);

}


.glow-a {

    top: 1500px;

    right: -250px;

    background:
        rgba(183, 138, 72, .045);

}


.glow-b {

    top: 3000px;

    left: -250px;

    background:
        rgba(24, 101, 132, .04);

}


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

.bg-grid {

    position: absolute;

    inset: 0;

    opacity: .17;

    background-image:

        linear-gradient(rgba(7, 29, 45, .035) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(7, 29, 45, .035) 1px,
            transparent 1px);

    background-size:
        75px 75px;

}


/* =========================================================
   DOTS
========================================================= */

.bg-dots {

    position: absolute;

    width: 140px;

    height: 140px;

    opacity: .28;

    background-image:

        radial-gradient(var(--gold) 1px,
            transparent 1px);

    background-size:
        13px 13px;

}


.dots-a {

    top: 1400px;

    right: 5%;

}


.dots-b {

    top: 2800px;

    left: 5%;

}


.dots-c {

    top: 4500px;

    right: 6%;

}


/* =========================================================
   COMMON SECTION LABEL
========================================================= */

.section-label {

    display: block;

    margin-bottom: 15px;

    color: var(--gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


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

.honours-hero {

    position: relative;

    z-index: 2;

    min-height: 690px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #ffffff;

    background:

        radial-gradient(circle at 78% 18%,
            rgba(183, 138, 72, .17),
            transparent 25%),

        radial-gradient(circle at 95% 80%,
            rgba(35, 110, 145, .20),
            transparent 35%),

        var(--navy);

}


.honours-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,
            rgba(3, 17, 28, .98),
            rgba(3, 17, 28, .87),
            rgba(3, 17, 28, .52));

}


.hero-waves {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.hero-wave {

    position: absolute;

    border:
        1px solid rgba(216, 183, 119, .12);

    border-radius: 50%;

}


.hero-wave-1 {

    width: 850px;

    height: 850px;

    right: -420px;

    top: -250px;

}


.hero-wave-2 {

    width: 700px;

    height: 700px;

    right: -340px;

    top: -170px;

    border-color:
        rgba(216, 183, 119, .075);

}


.hero-wave-3 {

    width: 550px;

    height: 550px;

    right: -250px;

    top: -80px;

    border-color:
        rgba(216, 183, 119, .05);

}


.honours-hero .container {

    position: relative;

    z-index: 3;

}


.hero-top {

    display: flex;

    justify-content: space-between;

    padding-bottom: 20px;

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

}


.hero-label {

    color: var(--gold-light);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

}


.hero-year {

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

    font-size: 8px;

    letter-spacing: 2px;

}


.hero-content {

    display: grid;

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

    gap: 70px;

    align-items: end;

    padding:
        100px 0 95px;

}


.hero-title {

    position: relative;

}


.hero-number {

    position: absolute;

    top: -90px;

    left: -15px;

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

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 230px;

    line-height: .8;

}


.hero-title>span {

    position: relative;

    z-index: 2;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

}


.hero-title h1 {

    position: relative;

    z-index: 2;

    margin: 18px 0 0;

    color: #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(65px,
            9vw,
            120px);

    font-weight: 400;

    line-height: .87;

    letter-spacing: -4px;

}


.hero-title h1 em {

    display: block;

    color: var(--gold-light);

    font-style: normal;

}


.gold-line {

    width: 55px;

    height: 2px;

    margin-bottom: 23px;

    background: var(--gold);

}


.hero-description p {

    margin: 0;

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

    font-size: 13px;

    line-height: 2;

}


.hero-bottom {

    display: flex;

    justify-content: space-between;

    padding-top: 20px;

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

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

}


.hero-scroll {

    display: flex;

    align-items: center;

    gap: 12px;

}


.hero-scroll i {

    width: 30px;

    height: 1px;

    background: var(--gold);

}


/* =========================================================
   INTRO
========================================================= */

.intro-section {

    position: relative;

    z-index: 2;

    padding:
        110px 0;

    background:
        linear-gradient(135deg,
            #f8f5ee,
            #f0ece3);

}


.intro-layout {

    display: grid;

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

    gap: 55px;

    align-items: center;

}


.intro-number {

    display: flex;

    flex-direction: column;

    align-items: center;

}


.intro-number span {

    color: var(--gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 28px;

}


.intro-number div {

    width: 1px;

    height: 80px;

    margin:
        18px 0;

    background: var(--gold);

}


.intro-number small {

    color: #96938c;

    font-size: 7px;

    letter-spacing: 1.5px;

    writing-mode: vertical-rl;

}


.intro-content h2 {

    margin:
        0 0 25px;

    color: var(--navy);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(45px,
            5vw,
            68px);

    font-weight: 400;

    line-height: 1.05;

}


.intro-content h2 em {

    color: var(--gold);

    font-style: normal;

}


.intro-content p {

    max-width: 650px;

    margin: 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 2;

}


.intro-mark {

    width: 145px;

    height: 145px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(183, 138, 72, .45);

    border-radius: 50%;

}


.intro-mark span {

    color: var(--navy);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 48px;

}


.intro-mark small {

    color: var(--muted);

    font-size: 7px;

    font-weight: 800;

    line-height: 1.5;

    letter-spacing: 1px;

    text-align: center;

}


/* =========================================================
   MAIN SECTIONS
========================================================= */

.honour-section {

    position: relative;

    z-index: 2;

    padding:
        125px 0;

}


.awards-section {

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

}


.orations-section {

    background:
        linear-gradient(135deg,
            #061b2b,
            #082a3f);

    color: #ffffff;

}


.appointments-section {

    background:
        rgba(247, 244, 237, .94);

}


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

.section-heading {

    display: grid;

    grid-template-columns:
        110px minmax(0, 700px);

    gap: 45px;

    margin-bottom: 90px;

}


.heading-number {

    color:
        rgba(183, 138, 72, .22);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 90px;

    line-height: .8;

}


.heading-content h2 {

    margin: 0;

    color: var(--navy);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(55px,
            6vw,
            85px);

    font-weight: 400;

    line-height: .95;

}


.heading-content h2 em {

    color: var(--gold);

    font-style: normal;

}


.heading-content p {

    max-width: 550px;

    margin:
        25px 0 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.9;

}


.heading-right {

    justify-content: end;

    text-align: right;

}


.heading-right .heading-content p {

    margin-left: auto;

}


.orations-section .heading-content h2 {

    color: #ffffff;

}


.orations-section .heading-content p {

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

}


/* =========================================================
   HONOUR CARD
========================================================= */

.honour-card {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr) minmax(0, .95fr);

    min-height: 500px;

    margin-bottom: 100px;

}


.honour-card:last-child {

    margin-bottom: 0;

}


.honour-card.reverse .card-image {

    order: 2;

}


.honour-card.reverse .card-content {

    order: 1;

}


.card-number {

    position: absolute;

    z-index: 4;

    top: -55px;

    right: 25px;

    color:
        rgba(183, 138, 72, .11);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 150px;

    line-height: 1;

    pointer-events: none;

}


.card-image {

    position: relative;

    min-height: 500px;

    overflow: hidden;

    background: var(--navy);

    box-shadow:
        0 30px 70px rgba(5, 25, 40, .12);

}


.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 1s ease;

}


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

    transform: scale(1.05);

}


.image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(3, 17, 28, .02),
            rgba(3, 17, 28, .58));

}


.card-image>span {

    position: absolute;

    z-index: 3;

    left: 25px;

    bottom: 23px;

    padding:
        8px 12px;

    color: #ffffff;

    background:
        rgba(3, 17, 28, .65);

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.5px;

    backdrop-filter: blur(7px);

}


.card-content {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        55px;

    background:
        rgba(247, 244, 237, .96);

    border:
        1px solid rgba(7, 29, 45, .06);

}


.card-meta {

    display: block;

    margin-bottom: 13px;

    color: var(--gold);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.card-content h3 {

    max-width: 560px;

    margin: 0;

    color: var(--navy);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(34px,
            3.7vw,
            52px);

    font-weight: 400;

    line-height: 1.07;

}


.card-content h4 {

    max-width: 520px;

    margin:
        0 0 13px;

    color: #425763;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.7;

}


.card-line {

    width: 50px;

    height: 2px;

    margin:
        22px 0;

    background: var(--gold);

}


.location {

    margin-bottom: 17px;

    color: #7f8a8e;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .3px;

}


.card-content p {

    max-width: 540px;

    margin: 0;

    color: var(--muted);

    font-size: 11.5px;

    line-height: 1.95;

}


.card-content strong {

    color: var(--navy);

    font-weight: 700;

}


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

.dark-card .card-content {

    background:
        rgba(4, 22, 35, .86);

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

}


.dark-card .card-content h3 {

    color: #ffffff;

}


.dark-card .card-content h4 {

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

}


.dark-card .card-content p {

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

}


.dark-card .location {

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

}


.dark-card .card-number {

    color:
        rgba(216, 183, 119, .09);

}


/* =========================================================
   APPOINTMENTS
========================================================= */

.appointment-grid {

    display: grid;

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

    gap: 30px;

}


.appointment-card {

    position: relative;

    min-height: 430px;

    padding:
        35px;

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

    border:
        1px solid rgba(7, 29, 45, .08);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.appointment-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 60px rgba(6, 27, 43, .10);

}


.appointment-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.appointment-top>span {

    color: var(--gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 25px;

}


.appointment-top i {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--gold);

    border:
        1px solid rgba(183, 138, 72, .35);

    border-radius: 50%;

    font-style: normal;

}


.appointment-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        55px 0 25px;

    border:
        1px solid rgba(183, 138, 72, .35);

    border-radius: 50%;

}


.appointment-icon span {

    width: 20px;

    height: 20px;

    display: block;

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

    border-radius: 50%;

}


.appointment-label {

    color: var(--gold);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.appointment-card h3 {

    max-width: 450px;

    margin:
        13px 0;

    color: var(--navy);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(31px,
            3vw,
            42px);

    font-weight: 400;

    line-height: 1.08;

}


.appointment-card h4 {

    margin:
        0 0 15px;

    color: #425763;

    font-size: 12px;

    line-height: 1.7;

}


.appointment-line {

    width: 40px;

    height: 2px;

    margin:
        20px 0;

    background: var(--gold);

}


.appointment-card p {

    margin: 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.9;

}


/* =========================================================
   CLOSING
========================================================= */

.honours-closing {

    position: relative;

    z-index: 2;

    min-height: 500px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #ffffff;

    background:

        radial-gradient(circle at 80% 15%,
            rgba(183, 138, 72, .16),
            transparent 28%),

        var(--navy-dark);

}


.closing-waves {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.closing-waves span {

    position: absolute;

    border:
        1px solid rgba(216, 183, 119, .10);

    border-radius: 50%;

}


.closing-waves span:nth-child(1) {

    width: 900px;

    height: 900px;

    right: -500px;

    top: -300px;

}


.closing-waves span:nth-child(2) {

    width: 700px;

    height: 700px;

    right: -400px;

    top: -200px;

}


.closing-waves span:nth-child(3) {

    width: 500px;

    height: 500px;

    right: -300px;

    top: -100px;

}


.honours-closing .container {

    position: relative;

    z-index: 3;

}


.honours-closing h2 {

    max-width: 900px;

    margin: 0;

    color: #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(45px,
            6vw,
            78px);

    font-weight: 400;

    line-height: 1.05;

}


.honours-closing h2 em {

    color: var(--gold-light);

    font-style: normal;

}


.closing-line {

    width: 60px;

    height: 2px;

    margin:
        28px 0 22px;

    background: var(--gold);

}


.honours-closing p {

    max-width: 570px;

    margin: 0;

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

    font-size: 12px;

    line-height: 1.9;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .hero-content {

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

        gap: 40px;

    }


    .intro-layout {

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

        gap: 30px;

    }


    .honour-card {

        grid-template-columns:
            minmax(0, 1fr) minmax(0, .9fr);

    }

}


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

@media (max-width: 760px) {

    .container {

        width:
            calc(100% - 30px);

    }


    /* HERO */

    .honours-hero {

        min-height: 600px;

    }


    .hero-content {

        display: block;

        padding:
            70px 0;

    }


    .hero-number {

        top: -45px;

        font-size: 150px;

    }


    .hero-title h1 {

        font-size: 60px;

        letter-spacing: -2px;

    }


    .hero-description {

        max-width: 500px;

        margin-top: 45px;

    }


    /* INTRO */

    .intro-section {

        padding:
            75px 0;

    }


    .intro-layout {

        display: block;

    }


    .intro-number {

        display: none;

    }


    .intro-content h2 {

        font-size: 43px;

    }


    .intro-mark {

        margin-top: 35px;

    }


    /* SECTION */

    .honour-section {

        padding:
            80px 0;

    }


    .section-heading {

        display: block;

        margin-bottom: 60px;

    }


    .heading-number {

        font-size: 65px;

        margin-bottom: 15px;

    }


    .heading-content h2 {

        font-size: 55px;

    }


    .heading-right {

        text-align: left;

    }


    .heading-right .heading-content p {

        margin-left: 0;

    }


    /* CARDS */

    .honour-card {

        display: flex;

        flex-direction: column;

        min-height: auto;

        margin-bottom: 70px;

    }


    .honour-card.reverse .card-image {

        order: 1;

    }


    .honour-card.reverse .card-content {

        order: 2;

    }


    .card-image {

        width: 100%;

        height: 300px;

        min-height: 300px;

    }


    .card-content {

        padding:
            35px 25px;

    }


    .card-content h3 {

        font-size: 38px;

    }


    .card-number {

        top: -35px;

        right: 10px;

        font-size: 110px;

    }


    /* APPOINTMENTS */

    .appointment-grid {

        grid-template-columns:
            1fr;

    }


    /* CLOSING */

    .honours-closing {

        min-height: 420px;

    }


    .honours-closing h2 {

        font-size: 45px;

    }

}


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

@media (max-width: 450px) {

    .hero-label {

        font-size: 7px;

        letter-spacing: 2px;

    }


    .hero-year {

        font-size: 7px;

    }


    .hero-content {

        padding:
            65px 0;

    }


    .hero-title h1 {

        font-size: 48px;

    }


    .hero-number {

        top: -30px;

        font-size: 115px;

    }


    .hero-bottom {

        font-size: 7px;

    }


    .hero-scroll {

        display: none;

    }


    .intro-content h2 {

        font-size: 37px;

    }


    .heading-content h2 {

        font-size: 45px;

    }


    .card-image {

        height: 240px;

        min-height: 240px;

    }


    .card-content h3 {

        font-size: 33px;

    }


    .honours-closing h2 {

        font-size: 38px;

    }

}