body {
    background-color: #eee;
    padding:4em;
    font-family: helvetica, arial, sans-serif;
}

@media only screen and (max-width: 800px) {
    body { padding:2em; }
  }

body:first-child {
    margin-top: 0;
}

/* utility classes */

.margin-top-zero {
    margin-top: 0;
}

.margin-bottom-zero {
    margin-bottom: 0;
}

.padding-top-zero {
    padding-top: 0 !important;
}

.padding-bottom-zero {
    padding-bottom: 0 !important;
}

/* Structure */

.content-row {
    width:100%;
    padding:4em 0;
}

.content-row .section-title { 
    width: 30%;
    max-width: 300px;
    border-top: 3px solid #000;
    padding-top: 0.4em;
    display: inline-block;
    vertical-align: top;
}

.content-row .section-title h3 { 
    font-family: gloock, serif;
    font-size: 1.8em;
    margin-top: 0px;
    width:100%;
}

.content-row .content-pane {
    width: calc(68% - 4em);
    padding:0 2em;
    font-size:1.2em;
    max-width:1000px;
    display: inline-block;
}

.content-row .content-pane:first-child {
    margin-top:0;
}

.work-card {
    padding: 1em 0;
}

@media only screen and (max-width: 800px) {
    .content-row .section-title { 
        width: 100%;
        max-width:none;
    }

    .content-row .content-pane {
        width: 100%;
        padding: 0;
    }
  }

/* Header */

.top-strip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 700;
    background-image: url(../img/signature-strip.png);
    background-repeat: no-repeat;
    background-size: 100% 5px;
}

header {
    margin-bottom: 4em;
}

header h1 {
    font-size: 1.4em;
    font-family: helvetica, arial, sans-serif;
}

header h2 {
    max-width: 640px;
    margin-top: 0px;
    font-size: 5em;
    font-family: gloock, serif;
    margin-bottom: 0.5em;
}

@media only screen and (max-width: 800px) {
    header h2 {
        font-size: 3.5em;
        font-family: gloock, serif;
        margin-bottom: 0.5em;
    }
}

nav ul { 
    list-style:none; 
    padding: 0;
    margin: 0;
    font-size: 1.2em;
}

nav ul li {
    display:inline-block;
    margin-right:1em;
}

@media only screen and (max-width: 800px) {
    nav ul li {
        display:block;
        margin-bottom:0.5em;
    }
  }

nav ul li a, nav ul li a:visited { 
    text-decoration: none;
    color:#1F5F9D;
}

nav ul li a:hover { 
    text-decoration: underline;
    text-decoration-thickness: 3px;
    color:#1F5F9D;
}

/* Typography */

p {
    max-width:600px;
    line-height: 1.5em;
}

a, a:visited { color:#1F5F9D; }
a:hover { color:#1F5F9D; text-decoration-thickness: 3px; }
a:active { background-color:#FFF; text-decoration-thickness: 3px; }

/* Get in touch list */

.get-in-touch-list, .writing-list {
    list-style:none;
    margin-top: 0;
    margin-left: 0;
    margin-block-start: 0;
    margin-inline-start: 0;
    padding-inline-start: 0;
}

.get-in-touch-list li, .writing-list li {
    vertical-align:top;
    margin-bottom:0.6em;
}

.get-in-touch-list img {
    width:1.8em;
    height:1.8em;
    margin-right:0.5em;
}

.get-in-touch-list li a {
    vertical-align: top;
    margin-top:0.4em;
    display:inline-block;
}

/* Selected work */

.work-card img { width:100%; }