:root {

    /* =======================================================
       Primary Background / Structure
       ======================================================= */

    --bg-main: #f4efe8;
    --bg-soft: #ebe3d8;
    --bg-panel: #fffaf4;

    /* =======================================================
       Deep Tropical Greens
       ======================================================= */

    --green-deep: #17351f;
    --green-forest: #245132;
    --green-leaf: #3c6d49;
    --green-soft: #73927d;

    /* =======================================================
       Warm Earth / Hawaiian Textile Tones
       ======================================================= */

    --earth-dark: #5e241d;
    --earth-bark: #7b3127;
    --earth-clay: #a24834;
    --earth-warm: #c96c4b;

    /* =======================================================
       Floral Accent Colors
       ======================================================= */

    --pink-bright: #e63f8c;
    --pink-soft: #f07ab0;
    --rose: #c34b6d;
    --rose-deep: #8e2f4c;

    /* =======================================================
       Typography
       ======================================================= */

    --text-main: #2a241f;
    --text-soft: #5e544b;
    --text-light: #8f857c;

    /* =======================================================
       Borders / Shadows
       ======================================================= */

    --border-soft: #d7c8b8;
    --shadow-dark: rgba(25, 20, 15, 0.18);

    /* =======================================================
       Functional UI
       ======================================================= */

    --link: #8e2f4c;
    --link-hover: #e63f8c;

}

* {

    box-sizing: border-box;
}

body {

    margin: 0;
    padding: 0;

    background: var(--bg-main);

    color: var(--text-main);

    font-family: "Open Sans", Arial, sans-serif;

    line-height: 1.75;
}

/* ==========================================================
   Hero Header
   ========================================================== */

.page-header {

    background:
        linear-gradient(
            rgba(23,53,31,.58),
            rgba(23,53,31,.58)
        ),
        url('../img/ferns-flowers-banner-01-1200.jpg');

    background-size: cover;

    background-position: center 30%;

    background-repeat: no-repeat;

    color: white;

    text-align: center;

    padding:
        78px
        40px
        52px
        40px;

    border-bottom:
        6px
        solid
        var(--earth-warm);

    overflow: hidden;
}

.page-header h1 {

    margin:
        0
        0
        6px
        0;

    font-size: 3.3rem;

    font-weight: 700;

    letter-spacing: 1px;

    line-height: 1.05;
}

.page-header p {

    margin-top: 0;

    margin-bottom: 0;

    font-size: 1.02rem;

    color:
        rgba(255,255,255,.88);
}


/* ==========================================================
   Main Content
   ========================================================== */

.container {

    max-width: 1150px;

    margin:
        40px
        auto;

    padding:
        0
        24px;
}

.board-member {

    background:
        var(--bg-panel);

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

    box-shadow:
        0
        8px
        30px
        var(--shadow-dark);

    padding:
        42px;
}

.board-member h2 {

    margin-top: 0;

    margin-bottom: 8px;

    font-size: 2.4rem;

    color:
        var(--green-deep);
}

.board-member h3 {

    margin-top: 40px;

    margin-bottom: 14px;

    color:
        var(--earth-bark);

    border-left:
        5px
        solid
        var(--pink-bright);

    padding-left: 14px;

    font-size: 1.2rem;
}

.board-member img + h3 {

    margin-top: 0;
}

.board-member p {

    margin-bottom: 18px;

    font-size: 1.03rem;
}

.board-member a {

    color:
        var(--link);

    text-decoration: none;

    font-weight: 600;
}

.board-member a:hover {

    color:
        var(--link-hover);

    text-decoration: underline;
}

.profile-photo {

    float: left;

    width: 40%;

    margin:
        0
        24px
        18px
        0;

    border-radius: 6px;

    box-shadow:
        0
        4px
        16px
        rgba(0,0,0,.18);
}

.board-member ul {

    padding-left: 26px;
}

.board-member li {

    margin-bottom: 10px;
}

.timestamp {

    margin-top: 42px;

    padding-top: 18px;

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

    color:
        var(--text-light);

    font-size: .92rem;
}

/* ==========================================================
   Footer
   ========================================================== */


footer {

    text-align: center;

    padding:
        40px
        20px;

    color:
        var(--text-light);

    font-size: .92rem;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.email-link {

    margin-top: 18px;

    font-size: 0.6rem;

    letter-spacing: .08em;

    font-weight: 600;
}

.email-link a {

    color: var(--rose-deep);

    text-decoration: none;

    border-bottom:
        1px
        solid
        rgba(142,47,76,.28);

    padding-bottom: 2px;

    transition:
        color .25s ease,
        border-color .25s ease;
}

.email-link a:hover {

    color: var(--pink-bright);

    border-bottom:
        1px
        solid
        var(--pink-bright);
}

/* ==========================================================
   Mobile
   ========================================================== */

@media screen and (max-width: 768px) {

    .page-header {

        padding:
            70px
            20px;
    }

    .page-header h1 {

        font-size: 1.8rem;
    }

    .board-member {

        padding: 24px;
    }

    .profile-photo {

        float: none;

        width: 100%;

        margin:
            0
            0
            20px
            0;
    }

    .board-member p {

        font-size: 0.8rem;
    }
}