:root {
    --ap-paper: #f5f2ec;
    --ap-ink: #26231f;
    --ap-muted: #6b655c;
    --ap-rule: #dcd5c9;
    --ap-measure: 38rem;
    --ap-plate: 62rem;
    --ap-gutter: 1.25rem;
    --ap-space: clamp(3.5rem, calc(2rem + 5vw), 7rem);
}

body.articlepage,
body.articlepage #page-container,
body.articlepage #main-content.ap {
    background-color: var(--ap-paper);
}

.ap {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--ap-gutter), 1fr)
        [plate-start] minmax(0, calc((var(--ap-plate) - var(--ap-measure)) / 2))
        [text-start] min(var(--ap-measure), calc(100% - 2 * var(--ap-gutter)))
        [text-end] minmax(0, calc((var(--ap-plate) - var(--ap-measure)) / 2))
        [plate-end] minmax(var(--ap-gutter), 1fr)
        [full-end];
    padding: var(--ap-space) 0 var(--ap-space);
    color: var(--ap-ink);
    font-family: var(--type-body-family);
}

.ap-article,
.ap-body {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: full;
}

.ap-article > *,
.ap-body > * {
    grid-column: text;
}

.ap :where(h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote) {
    margin: 0;
    padding: 0;
}

.ap .ap-kicker {
    margin-bottom: 1.5rem;
    font-size: var(--type-caps-sans-size);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: var(--type-caps-tracking);
    font-family: var(--type-caps-family);
    text-transform: uppercase;
    color: var(--ap-muted);
}

.ap .ap-title {
    margin-bottom: 0.5em;
    font-family: var(--type-heading-family);
    font-weight: var(--type-heading-weight);
    font-size: clamp(var(--type-h1-size-floor), var(--type-h1-size-fluid), var(--type-h1-size-ceiling));
    line-height: var(--type-h1-leading);
    letter-spacing: var(--type-heading-tracking);
    color: var(--ap-ink);
}

.ap .ap-lead {
    margin-bottom: 2.5rem;
    font-size: clamp(var(--type-lead-size-floor), var(--type-lead-size-fluid), var(--type-lead-size-ceiling));
    font-style: italic;
    line-height: var(--type-lead-leading);
    color: var(--ap-ink);
}

.ap .ap-colophon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--ap-rule);
    border-bottom: 1px solid var(--ap-rule);
}

.ap .ap-colophon > div:last-child:not(:first-child) {
    text-align: right;
}

.ap .ap-colophon dt {
    margin-bottom: 0.2rem;
    font-size: var(--type-caps-sans-size);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: var(--type-caps-tracking);
    font-family: var(--type-caps-family);
    text-transform: uppercase;
    color: var(--ap-muted);
}

.ap .ap-colophon dd {
    font-size: var(--type-small-size);
    line-height: 1.4;
    color: var(--ap-ink);
}

.ap .ap-plate,
.ap .ap-body :is(figure.wp-block-image, .wp-block-gallery, .wp-block-embed) {
    grid-column: plate;
    margin: var(--ap-space) 0;
}

.ap .ap-plate {
    margin-bottom: 0;
}

.ap figure img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 85vh;
    margin: 0 auto;
}

.ap figure figcaption {
    max-width: var(--ap-measure);
    margin: 0.9rem auto 0;
    font-size: var(--type-small-size);
    line-height: 1.5;
    text-align: left;
    color: var(--ap-muted);
}

.ap .ap-body {
    counter-reset: plate;
    margin-top: var(--ap-space);
}

.ap .ap-body figure.wp-block-image {
    counter-increment: plate;
}

.ap .ap-body figure.wp-block-image figcaption::before {
    content: "Fig. " counter(plate) ". ";
    font-weight: 600;
    color: var(--ap-ink);
}

.ap .ap-body p,
.ap .ap-body li {
    font-size: clamp(var(--type-body-size-floor), var(--type-body-size-fluid), var(--type-body-size-ceiling));
    line-height: var(--type-body-leading);
    color: var(--ap-ink);
}

.ap .ap-body p + p {
    margin-top: 1em;
}

.ap .ap-body :is(ul, ol) {
    margin: 1em 0 1em 1.25em;
}

.ap .ap-body ul {
    list-style-type: disc;
}

.ap .ap-body ol {
    list-style-type: decimal;
}

.ap .ap-body :is(h1, h2) {
    margin: 2.2em 0 0.5em;
    font-family: var(--type-heading-family);
    font-weight: var(--type-heading-weight);
    font-size: clamp(var(--type-h2-size-floor), var(--type-h2-size-fluid), var(--type-h2-size-ceiling));
    line-height: var(--type-h2-leading);
    letter-spacing: var(--type-heading-tracking);
    color: var(--ap-ink);
}

.ap .ap-body h3 {
    margin: 1.8em 0 0.4em;
    font-family: var(--type-heading-family);
    font-weight: var(--type-heading-weight);
    font-size: clamp(var(--type-h3-size-floor), var(--type-h3-size-fluid), var(--type-h3-size-ceiling));
    line-height: var(--type-h3-leading);
    letter-spacing: var(--type-heading-tracking);
    color: var(--ap-ink);
}

.ap .ap-body blockquote {
    margin: 2em 0;
    padding-left: 1.5rem;
    border-left: 1px solid var(--ap-ink);
    font-style: italic;
}

.ap a {
    color: var(--ap-ink);
    text-decoration: underline;
    text-decoration-color: var(--ap-muted);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.ap a:hover {
    text-decoration-color: var(--ap-ink);
}

.ap .ap-more {
    grid-column: text;
    margin-top: var(--ap-space);
    padding-top: var(--ap-space);
    border-top: 1px solid var(--ap-rule);
}

.ap .ap-more-title {
    margin-bottom: 1.5rem;
    font-family: var(--type-heading-family);
    font-weight: var(--type-heading-weight);
    font-size: clamp(var(--type-h3-size-floor), var(--type-h3-size-fluid), var(--type-h3-size-ceiling));
    line-height: var(--type-h3-leading);
    letter-spacing: var(--type-heading-tracking);
    color: var(--ap-ink);
}

.ap .ap-index {
    list-style: none;
}

.ap .ap-index li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 0.25rem 1.25rem;
    padding: 1rem 0;
    border-top: 1px solid var(--ap-rule);
}

.ap .ap-index-undated li {
    grid-template-columns: minmax(0, 1fr);
}

.ap .ap-index li:last-child {
    border-bottom: 1px solid var(--ap-rule);
}

.ap .ap-index-year {
    grid-row: span 2;
    padding-top: 0.2em;
    font-size: var(--type-small-size);
    color: var(--ap-muted);
}

.ap .ap-index a {
    font-size: clamp(var(--type-body-size-floor), var(--type-body-size-fluid), var(--type-body-size-ceiling));
    line-height: 1.4;
    text-decoration: none;
}

.ap .ap-index a:hover {
    text-decoration: underline;
}

.ap .ap-index-date {
    font-size: var(--type-small-size);
    color: var(--ap-muted);
}