:root {
    --ink: #0C1526;
    --ink-2: #16233F;
    --bone: #E9E4D8;
    --bone-dim: #B9B2A2;
    --ochre: #C99A3E;
    --sable: #7E7359;
    --rule: rgba(233, 228, 216, .18);
    --max: 1180px;

    /* Colour the hero wash starts from at the top. Change this one value to
       recolour the gradient; it fades to --ink at the bottom either way. */
    --hero-wash: rgb(15, 25, 45);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    -webkit-text-size-adjust: 100%
}

body {
    background: #0c1526;
    color: white;
    font-family: 'Archivo', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 22px
}

/* ---- Hero -------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 40vh
}


.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    top: -15px;
    z-index: -2;
    background: url("../img/raedcenter.webp") center/cover no-repeat;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(180deg, var(--hero-wash) 0%,
            rgba(12, 21, 38, .58) 58%);
}

.hero .wrap {
    flex: 1;
    display: flex;
    flex-direction: column
}

header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    padding: 16px 0px;
    border-bottom: 1px solid #404a5f7a;
}
.eyebrow--ar{
        font-family: 'Amiri', serif;

}

.eyebrow--ar,
.eyebrow {
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 100;
}

/* Signature element: the two names facing each other across an axis. */
.axis {
    margin: auto 0;
    padding: clamp(56px, 9vw, 110px) 0;
    gap: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.axis__ar {
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}


.name {
    font-family: 'Amiri', Georgia, serif;
    font-weight: 600;
    font-size: clamp(38px, 7.4vw, 86px);
    line-height: 0.8;
}

.name em {
    font-style: normal;
    color: var(--ochre)
}

.name--ar {
    font-size: clamp(38px, 7.4vw, 74px);
    line-height: 1
}

.qual {
    font-size: 14px;
    text-transform: capitalize;
    color: var(--bone);
    font-weight: 100;
    margin-top: 14px;
}

.qual--ar {
    font-family: 'Amiri', serif;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none
}

/* ---- Body -------------------------------------------------- */
.thesis {
    margin: clamp(52px, 8vw, 96px) 0 0;
    font-family: 'Amiri', Georgia, serif;
    font-size: clamp(26px, 3.5vw, 42px);
    line-height: 1.28
}

.wrap h2 {
    padding-top: 60px;
    padding-bottom: 44px;
    font-family: 'Amiri', Georgia, serif;
    line-height: 1;
    font-size: clamp(30px, 3.5vw, 42px);
    max-width: 23ch;
    font-weight: 550;
    letter-spacing: 0%;
    color: white;
    word-spacing: -1px;
}


.wrap h2 .accent {
    color: var(--ochre)
}

.ccc-p {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.wrap .ccc p {
    color: oklch(85.378% 0.01199 264.564);
    font-size: 16px;
    line-height: 22px;
    max-width: 80%;
    font-weight: 100;
}

.ccc {
    padding-bottom: 60px;
    border-bottom: 1px solid #d6d6d68c;
}

.list-c h3 {
    padding-top: 50px;
    padding-bottom: 20px;
    line-height: 1;
    font-size: 22px;
    font-weight: 500;
    color: white;
}

.list-c ul {
    color: oklch(85.378% 0.01199 264.564);
    list-style: none;
    font-weight: lighter;
}

.list-c ul li {
    display: flex;
    gap: 12px;
    align-items: center;
}

footer {
    padding: 40px 0 46px;
    border-top: 1px solid #404a5f7a;
    background-color: #0c1526;
}

.ff {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0px 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 22px;
}

.list-c {
    padding-bottom: 60px;
}

.status {
    font-size: 14px;
    color: rgb(218, 214, 214);
    max-width: 46ch;
    font-weight: 100;
}

.status strong {
    color: white;
    font-weight: 600;
}

.contact a {
    color: var(--ochre);
    text-decoration: none;
    font-size: 14px;
}

.contact a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

a:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 3px
}


.eqen {
    text-align: left;
    margin-top: 18px;
}

@media (min-width:720px) {
    .axis__en {
        text-align: right;
        display: flex;
        justify-content: start;
        align-items: start;
        flex-direction: column;
    }

    .axis__ar {
        text-align: left
    }

    .axis__rule {
        width: 1px;
        height: auto;
        min-height: 120px;
        align-self: stretch;
        background: linear-gradient(180deg, transparent, var(--ochre) 18%, var(--ochre) 82%, transparent);
        transform: scaleY(0);
        transform-origin: center;
        animation: drawy 1.1s cubic-bezier(.2, .7, .3, 1) .35s forwards;
    }

    .thesis {
        max-width: 24ch
    }

    .lede {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 64px)
    }
}

@media (max-width:768px) {
    .wrap {
        padding: 0px 24px;
    }

    .ccc {
        padding-bottom: 24px;
    }

    .wrap h2{
        padding-top: 32px;
        padding-bottom: 32px;
        max-width: none;
    }
    
    .wrap .ccc p{
        width: 100%;
        max-width: none;
    }

    .axis{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        gap: 24px;
    }

    .axis__en{
        width: 100%;
    }
    .axis__ar{
        width: 100%;
    }

    .list-c h3{
        padding: 24px 0px;
    }
    .list-c{
        padding-bottom: 24px;
    }
}

@media (max-width:375px) {
    header {
        display: none;
    }
}