:root {
    --page-color: #FFFDFC;
    --basic-brown: #4D4640;
    --header-brown: #8C7E71;
    --near-white-cream: #f2eade;
    --normal-width: 32em;
    --page-margin: 1em;
}

@font-face {
    font-family: "Buket Retro Basic";
    src: url(../font/BuketRetroBasic.otf);
    font-display: swap;
}

@font-face {
    font-family: "Adobe Garamond Pro";
    src: url(../font/AGaramondPro-Regular.otf);
    font-display: swap;
}

@font-face {
    font-family: "Adobe Garamond Pro";
    src: url(../font/AGaramondPro-Italic.otf);
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Rosewood";
    src: url(../font/RosewoodStd-Fill.otf);
    font-display: swap;
}

html {
    font-size: 3vmin;
}

body {
    font-family: "Adobe Garamond Pro", Garamond, Georgia, serif;
    font-size: 14pt;
    margin: 0;
    padding: 0;
    background: var(--page-color);
    color: var(--basic-brown);
    line-height: 1.5;
}

body > *:not(header) {
    padding: var(--page-margin);
}

@media (max-device-width: 520px) {
    body {
        font-size: 16pt;
    }
    main.contents .entries {
        font-size: 12pt;
    }
}

a {
    text-decoration: none;
    color: inherit;
}

.button {
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.disabled {
    pointer-events: none;
    cursor: auto;
    filter: brightness(1.75) grayscale(0.75);
}

.transitioning {
    pointer-events: none;
    cursor: auto;
}

.overlay-text {
    text-shadow: 
        -3px 0 3px var(--page-color),
        3px 0 3px var(--page-color),
        0 -3px 3px var(--page-color),
        0 3px 3px var(--page-color);
}

header {
    font-family: "Buket Retro Basic";
}

header .title-group {
    letter-spacing: 0.05em;
}

header .author {
    font-size: 60%;
}

footer {
    max-width: var(--normal-width);
    margin: 0 auto;
    margin-top: 2em;
    margin-bottom: 1em;
    position: relative;
    z-index: 2000;
    color: var(--header-brown);
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    text-transform: capitalize;

}

footer .copyright {
    text-align: center;
    font-size: 8pt;
    color: #484441;
    font-family: "Buket Retro Basic";
    text-wrap-mode: nowrap;
}

.adjacent-entry-link {
    font-style: italic;
    font-size: calc(min(16pt, 4vw));
    width: 9em;
}

.adjacent-entry-link.next {
    text-align: right;
}

article {
    margin: 0 auto;
}

article h1 {
    text-align: right;
    margin-bottom: 1.25em;
    font-size: 100%;
}

.chapter-title {
    text-align: left;
    font-family: "Buket Retro Basic";
    font-weight: normal;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.35em;
}


article h1 .datetime {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
}

article h1 .writer {
    font-style: italic;
}

article p {
    margin: 0;
    text-align: justify;
    text-indent: 2em;
}

.end-matter {
    margin: 5em 0;
}

.subscribe-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    --default-width: 12em;
    transition: height 2s ease-in-out;
}

.subscribe-area.pending, .subscribe-area.completed {
    pointer-events: none;
    cursor: auto;
}

.subscribe-area.pending .explanation, .subscribe-area.pending input, .subscribe-area.completed .explanation, .subscribe-area.completed input {
    opacity: 50%;
}

input, textarea {
    box-sizing: border-box;
    max-width: 100%;
    display: block;
}

input[type="email"] {
    padding: 8px 8px;
    border-radius: 4px;
    font-size: 90%;
    font-family: "Adobe Garamond Pro", Garamond, Georgia, serif;
    border: none;
    box-shadow: 0 1px 4px #40404080;
    overflow: visible;
    background-color: var(--near-white-cream);
}

.subscribe-area #email {
    width: 24em;
    max-width: calc(100vw - 2.5em);
}

.subscribe-area #email:autofill {
    background-color: #ffffff;    
}

.subscribe-area.minimized #email {
    opacity: 0;
}

.subscribe-area .explanation {
    line-height: 1.2;
    font-family: "Adobe Garamond Pro", Garamond, Georgia, serif;
    font-style: italic;
    text-align: left;
}

.subscribe-area .subscribe-button {
    position: relative;
    color: black;
    font-family: "Buket Retro Basic", sans-serif;
    border-radius: 16px;
    background: var(--near-white-cream);
    box-shadow: 0 1px 2px #4D4640C0;
    text-align: center;
    width: var(--default-width);
}

.subscribe-area .subscribe-button .label {
    position: relative;
    top: 3px;
    padding: 3px;
}

.subscribe-area.minimized .subscribe-button {
    transform: translate(0, -44px);
    cursor: s-resize;
}

.subscribe-area.completed .subscribe-button {
    display: none;
}

.subscribe-conclusion-options {
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subscribe-completed-message, .subscribe-failed-message {
    display: none;
    font-size: 76%;
    font-family: "Adobe Garamond Pro", Garamond, Georgia, serif;
    font-style: italic;
    color: var(--basic-brown);
}

.subscribe-area.completed .subscribe-completed-message {
    display: block;
}

.subscribe-area .boom {
    display: block;
    font-style: normal;
    font-family: "Buket Retro Basic", sans-serif;
}

.subscribe-area.failed .subscribe-failed-message {
    display: block;
}

.section-heading {
    margin: 8em auto;
    padding-bottom: 2.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
}

.section-heading .part-label {
    font-family: "Buket Retro Basic", sans-serif;
}

.section-heading .title {
    font-family: "Rosewood", "Buket Retro Basic", sans-serif;
    font-size: 200%;
}