/* Reading pages (/writing/*): one typed sheet, cover pinned to its corner. Layout in read.js. */

html, body { margin: 0; padding: 0; }
body {
    padding: 48px 20px 200px;
    background: #d1d1d1;
    color: #1a1a1a;
    font-family: "Ehrhardt", "Janson", "Times New Roman", serif;
}

.sheet {
    position: relative;
    width: min(600px, 100%);
    margin: 0 auto;
    padding: 54px 58px 60px;
    box-sizing: border-box;
    background: #ececE6;
    border: 1px solid #1a1a1a;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, .18);
}
.sheet::after { content: ""; display: block; clear: both; }

h1 {
    margin: 0 0 6px;
    font-family: Janson, "Times New Roman", serif;
    font-size: 2.2rem;
    font-weight: normal;
    line-height: 1.15;
}
h2 { margin: 1.6em 0 .5em; font-family: Janson, serif; font-size: 1.4rem; font-weight: normal; }
.date {
    margin: 0 0 34px;
    font-family: Janson, serif;
    font-style: italic;
    color: #4a4a4a;
}

.sheet p {
    margin: 0 0 1.1em;
    font-size: 1.08rem;
    line-height: 1.65;
    white-space: pre-line;          /* keep the author's line breaks */
    overflow-wrap: break-word;
}

.sheet p.doc { margin: 1.4em 0; clear: both; }
.doc a { color: #1a1a1a; text-underline-offset: 3px; }

/* the cover is its own print, pinned across the sheet's corner */
.cover {
    float: right;
    width: 250px;
    margin: -30px -96px 18px 26px;
    background: #d9d9d9;
    border: 1px solid #1a1a1a;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, .22);
    transform: rotate(3deg);
}
.cover img { display: block; width: 100%; height: auto; }

figure { margin: 1.6em 0; clear: both; }
figure img { display: block; width: 100%; height: auto; border: 1px solid #1a1a1a; }
figcaption { margin-top: .5em; font-size: .9rem; font-style: italic; color: #555; text-align: center; }
.video { position: relative; margin: 1.6em 0; aspect-ratio: 16 / 9; background: #000; clear: both; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
    .cover { margin-right: -46px; }
}
@media (max-width: 640px) {
    body { padding: 24px 12px 160px; }
    .sheet { padding: 30px 22px 38px; }
    h1 { font-size: 1.8rem; }
    .cover { float: none; width: 72%; margin: 0 auto 26px; transform: rotate(-2deg); }
}