/* Three Blocks - A Free Design by Bryant Smith (bryantsmith.com)
   All of the colours, spacing and layout on the page are gathered here.
   Look for the section headings below to find what you want to change. */


/* ---- RESET: a clean slate on every browser ---- */

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


/* ---- BODY: the warm "desk" the page rests on ---- */

body {
    background: #eceae3;
    color: #26302f;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.7;
    padding: 40px 16px;
    text-align: center;
}


/* ---- PAGE: the white sheet everything sits on ---- */

#page {
    background: #ffffff;
    border-top: 6px solid #c05b2e;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 18px 40px rgba(0, 0, 0, 0.09);
    margin: 0 auto;
    max-width: 940px;
    padding: 0 48px 40px 48px;
    text-align: left;
}


/* ---- HEADER: a compact bar with the title and menu ---- */

#masthead {
    align-items: center;
    border-bottom: 3px double #e4ded3;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    padding: 28px 0 22px 0;
}

#brand h1 {
    color: #1e2726;
    font-size: 28px;
    font-weight: normal;
    letter-spacing: -0.3px;
    line-height: 1.1;
}

#brand .tagline {
    color: #a8461f;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 2.5px;
    margin-top: 5px;
    text-transform: uppercase;
}


/* ---- MENU: the row of links in the header ---- */

#menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

#menu a,
#menu a:visited {
    border-bottom: 2px solid transparent;
    color: #4a4f4e;
    margin-left: 18px;
    padding-bottom: 4px;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#menu a:hover,
#menu a:focus {
    border-bottom-color: #c05b2e;
    color: #a8461f;
}


/* ---- LINKS: the shared link colour for body text ---- */

a,
a:visited {
    border-bottom: 1px solid #e6c3b1;
    color: #a8461f;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover,
a:focus {
    border-bottom-color: #c05b2e;
    color: #7d2f13;
}


/* ---- LEAD: the short intro line under the header ---- */

.lead {
    border-left: 3px solid #e8c3b0;
    color: #3d4443;
    font-size: 19px;
    line-height: 1.65;
    margin: 28px 0 0 0;
    padding-left: 20px;
}


/* ---- COLUMNS: three equal columns of content ---- */

#columns {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 40px;
}

.block {
    border-left: 1px solid #e4ded3;
    padding: 0 28px;
}

.block:first-child {
    border-left: none;
    padding-left: 0;
}

.block:last-child {
    padding-right: 0;
}

.block h2 {
    border-bottom: 1px solid #eee9e0;
    color: #1e2726;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    position: relative;
    text-transform: uppercase;
}

.block h2::after {
    background: #c05b2e;
    bottom: -1px;
    content: "";
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    width: 40px;
}

.block h2 .num {
    color: #a8461f;
    margin-right: 8px;
}

.block p {
    color: #3d4443;
    font-size: 15px;
    margin-bottom: 14px;
}


/* ---- PROJECT LIST: links with a small year underneath ---- */

.project-list,
.notes {
    list-style: none;
}

.project-list li {
    border-bottom: 1px solid #f0ece4;
    padding: 10px 0;
}

.project-list li:last-child {
    border-bottom: none;
}

.project-list .meta {
    color: #726d62;
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    margin-top: 2px;
    text-transform: uppercase;
}


/* ---- NOTES: the dated list of recent entries ---- */

.notes li {
    border-bottom: 1px solid #f0ece4;
    font-size: 15px;
    padding: 10px 0;
}

.notes li:last-child {
    border-bottom: none;
}

.notes .date {
    color: #726d62;
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ---- HOW TO: the friendly tinted tips band ---- */

#howto {
    background: #faf4ef;
    border-left: 4px solid #c05b2e;
    margin-top: 44px;
    padding: 24px 30px;
}

#howto h2 {
    color: #1e2726;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

#howto p {
    color: #4a4f4e;
    font-size: 15px;
}


/* ---- FOOTER: the required credit link ---- */

#footer {
    border-top: 3px double #e4ded3;
    color: #6f6a60;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    margin-top: 48px;
    padding-top: 22px;
    text-align: center;
    text-transform: uppercase;
}

#footer a,
#footer a:visited {
    border-bottom: none;
    color: #5a564d;
    text-decoration: none;
}

#footer a:hover,
#footer a:focus {
    color: #a8461f;
}


/* ---- TABLET: the three columns stack into one ---- */

@media (max-width: 820px) {
    #page {
        padding: 0 32px 32px 32px;
    }

    #columns {
        grid-template-columns: 1fr;
    }

    .block {
        border-left: none;
        border-top: 1px solid #e4ded3;
        padding: 28px 0 0 0;
    }

    .block:first-child {
        border-top: none;
        padding-top: 0;
    }
}


/* ---- SMALL SCREENS: pull things in on phones ---- */

@media (max-width: 640px) {
    body {
        padding: 20px 12px;
    }

    #page {
        border-top-width: 5px;
        padding: 0 22px 26px 22px;
    }

    #masthead {
        padding: 22px 0 18px 0;
    }

    #brand h1 {
        font-size: 24px;
    }

    #menu a,
    #menu a:visited {
        margin: 0 16px 0 0;
    }

    .lead {
        font-size: 17px;
        padding-left: 16px;
    }

    #howto {
        padding: 20px;
    }
}


/* ---- PRINT: drop the desk and shadows for a clean sheet ---- */

@media print {
    body {
        background: #ffffff;
        padding: 0;
    }

    #page {
        border-top: none;
        box-shadow: none;
        max-width: 100%;
        padding: 0;
    }

    #menu {
        display: none;
    }
}