/* Reset */
* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Global Elements */
html {
    font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
    color: #343434;
    font-family: "french-canon", Georgia, serif;
    font-weight: 400;
}
p {
    color: #343434;
    font: 400 0.8125rem/1.65em Helvetica, sans-serif;
}
em {
    font-style: italic;
}
a {
    padding-bottom: 0.2em;
    color: #343434;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #B6B6B6;
    text-decoration-thickness: 1px;
}
a:hover, a:focus {
    text-decoration-color: #C0C0C0;
    opacity: 0.7;
}
a:focus {
    border-radius: 1px;
    outline: 1px solid #A4A4A4;
    outline-offset: 2px;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}
@media screen and (min-width: 560px) {
    p, span.divider {
        font-size: 0.875rem;
    }
}

/* Body */
body {
    background-color: #F9F8F8;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
body p {
    letter-spacing: 0.03em;
}

@media screen and (min-width: 1024px) {
    body {
        gap: 0;
    }
}

/* Header */
.colophon {
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding: 30px 0 40px;
    background-image: url("https://www.dearkimlow.com/images/header-dearkimlow-kimberly-low@2x.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 95vw auto;
    margin: 0 15px;
}
.colophon .sitename {
    align-self: flex-start;
    border: none;
    font: 0.8125rem/1.15em "french-canon", Georgia, serif;
    letter-spacing: 0.15em;
    padding-bottom: 0;
    text-transform: uppercase;
    text-decoration-color: #F9F8F8;
}
.colophon a.sitename:hover {
    text-decoration-color: #D5D5D5;
}
.colophon .description {
    display: flex;
    flex: 1 auto;
    flex-direction: column;
    gap: 13px;
    max-width: 380px;
}
.colophon .description div {
    max-width: 572px;
}
.colophon .description p {
    font: 0.75rem/1.35em "courier-prime", Courier, monospace;
    letter-spacing: 0;
}
@media screen and (min-width: 560px) {
    .colophon {
        flex-direction: row;
        gap: 60px;
        padding: 41px 0;
        background-size: 560px auto;
        margin: 0 40px;
    }
    .colophon .description {
        gap: 13px;
        max-width: none;
    }
    .colophon .description p {
        font-size: 0.85rem;
    }
}
@media screen and (min-width: 690px) {
    .colophon {
        background-size: 650px auto;
    }
}
@media screen and (min-width: 1024px) {
    .colophon {
        margin: 0 66px;
    }
}

/* Chapters */
.chapter {
    padding-bottom: 80px;
}
.chapter .row, .chapter .column {
    display: flex;
    flex-direction: column;
}
.chapter img {
    align-self: center;
    padding-bottom: 35px;
}
.chapter span img {
    margin: 0 auto;
}
.chapter .text {
    padding: 0 15px;
}
.chapter p.quote {
    color: #343434;
    font: 400 1.4rem/140% "french-canon", Georgia, serif;
    letter-spacing: 0;
    padding-bottom: 15px;
    text-indent: -0.05rem;
    max-width: 440px;
}
.chapter p.quote.hanging {
    text-indent: -0.5rem;
}
.chapter p.description {
    padding-bottom: 40px;
    max-width: 350px;
}
@media screen and (min-width: 560px) {
    .chapter {
        padding-bottom: 120px;
    }
    .chapter .text {
        padding: 0 40px;
    }
    .chapter p.description {
        width: 65%;
        padding-bottom: 80px;
    }
    .chapter p.quote {
        max-width: 500px;
    }
}
@media screen and (min-width: 1024px) {
    .chapter {
        padding-bottom: 30px;
    }
    .chapter:last-of-type {
        padding-bottom: 100px;
    }
    .chapter .row {
        flex-direction: row-reverse;
        column-gap: 30px;
        justify-content: center;
        padding-top: 100px;
    }
    .chapter .row:first-of-type > * {
        flex: 1 1 50%;
    }
    .chapter .column {
        row-gap: 30px;
    }
    .chapter img {
        align-self: initial;
        padding: 0;
    }
    .chapter .text {
        padding: 15px 0 0;
    }
    .chapter p.quote {
        width: 83%;
        min-width: 380px;
    }
    .chapter p.description {
        width: 50%;
        min-width: 300px;
    }
}

/* Chapter: KQED Voter Guide */
#kqed-voter-guide span {
    background-color: #CCDCE6;
    margin: 0 auto 30px;
    width: calc(100% - 30px);
}
#kqed-voter-guide .row:last-child span {
    margin-bottom: 0;
}
#kqed-voter-guide span img {
    padding-bottom: 0;
}
#kqed-voter-guide .column img {
    width: 100%;
}
@media screen and (min-width: 560px) {
    #kqed-voter-guide span {
        margin: 0 auto 40px;
        width: calc(100% - 80px);
    }
}
@media screen and (min-width: 1024px) {
    #kqed-voter-guide span {
        background-color: initial;
        margin: 0;
    }
    #kqed-voter-guide .row:first-child img {
        margin: 0 12% 0 auto;
        width: 58%;
    }
    #kqed-voter-guide .row:first-child .column img {
        margin: 0;
        width: calc(100% - 66px);
    } 
    #kqed-voter-guide .row:last-child span {
        width: 100%;
    }
    #kqed-voter-guide .row:last-child span img {
        width: 100%;
    }
}

/* Chapter: KQED Support */
#kqed-support img {
    -webkit-filter: drop-shadow(1px 5px 10px #ccc);
    filter: drop-shadow(1px 5px 10px #ccc);
}
#kqed-support .column img {
    width: calc(100% - 30px);
}
#kqed-support .grid {
    display: flex;
    flex-direction: column;
    row-gap: 8%;
}
#kqed-support .grid .grid-row {
    margin: 0 14%;
}
#kqed-support .grid span {
    flex: 1 1 100%;
}
#kqed-support .grid img {
    width: 100%;
}
#kqed-support .grid img {
    padding-bottom: 0;
}
#kqed-support .grid .grid-row {
    display: flex;
    column-gap: 8%;
    justify-content: center;
    margin-top: 30px;
}
#kqed-support .grid-row span:last-of-type {
    margin-top: 40%;
}
#kqed-support .grid-row:first-of-type span:last-of-type {
    margin-bottom: -40%;
}
@media screen and (min-width: 560px) {
    #kqed-support .grid {
        margin-top: 20px;
        row-gap: 60px;
    }
    #kqed-support .column img {
        width: calc(100% - 80px);
    }
    #kqed-support .grid .grid-row {
        margin: 50px 14% 0;
        column-gap: 60px;
    }
}
@media screen and (min-width: 1024px) {
    #kqed-support .grid {
        margin-top: 0;
        width: 50%;
    }
    #kqed-support .grid .grid-row {
        justify-content: end;
        margin: 0 12%;
    }
    #kqed-support .row:first-child .column img {
        margin: 0;
        width: calc(100% - 66px);
    } 
}

/* Chapter: Cut Paper */
#cut-paper img {
    width: calc(100% - 30px);
}
@media screen and (min-width: 560px) {
    #cut-paper img {
        width: 80%;
        max-width: 500px;
        margin: 0 auto 0 40px;
    }
}
@media screen and (min-width: 1024px) {
    #cut-paper img {
        min-width: auto;
        margin: 0;
    }
    #cut-paper .row:first-of-type {
        align-items: center;
    }
    #cut-paper .row:first-of-type img {
        margin-left: 28%;
    }
    #cut-paper .row:last-of-type {
        margin: 0 6% 0 13.8%;
    }
    #cut-paper .row:last-of-type > * {
        flex: 1 1 33%;
    }
    #cut-paper .row img {
        max-width: 20vw;
    }
    #cut-paper .row:last-of-type .column {
        gap: 100px;
    }
}

/* Footer */
.about {
    border-top: 1px solid #C6C6C6;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding: 28px 0 100px;
    margin: 0 15px;
}
.about .title p, .about .more .copyright p {
    font: 0.75rem/1.35em "courier-prime", Courier, monospace;
}
.about .title {
    align-self: baseline;
    flex-grow: 2;
}
.about .bio {
    align-self: baseline;
    flex-grow: 10;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.about .bio p {
    max-width: 460px;
}
.about .more {
    flex-grow: 3;
    display: flex;
    flex-direction: column;
}
.about .more .links {
    align-self: baseline;
    display: flex;
    flex-direction: column;
    flex: 0 1 100%;
    padding: 12px 0 80px;
}
.about .more .links a {
    font: 400 0.8125rem/1.65em Helvetica, sans-serif;
    letter-spacing: 0.03em; 
}
.about .more .copyright p {
    color: #888;
}
@media screen and (min-width: 560px) {
    .about {
        margin: 0 40px;
    }
    .about .title p, .about .more .copyright p {
        font-size: 0.85rem;
    }
}
@media screen and (min-width: 690px) {
    .about {
        flex-direction: row;
        column-gap: 30px;
    }
    .about .bio p {
        max-width: 340px;
    }
}
@media screen and (min-width: 1024px) {
    .about {
        margin: 60px 66px 0;
    }
}