/*
Theme Name: McAllistron
Theme URI: https://blog.joshmcallister.com
Author: Joshua McAllister
Description: Swiss-style minimal blog theme. Black on off-white, one accent color, DIN-style Barlow type, a fixed photocopy texture, numbered posts, and a giant post number behind each title.
Version: 1.5.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mcallistron
*/

/* ------------------------------------------------------------------
   Fonts (self-hosted, SIL Open Font License; see assets/fonts)
   ------------------------------------------------------------------ */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Quote Marks"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------------
   Tokens (accent and texture strength come from the Customizer)
   ------------------------------------------------------------------ */
:root {
	--accent: #C8401A;
	--ink: #111111;
	--paper: #F7F6F3;
	--muted: #555555;
	--texture-opacity: 0.4;
	--pad: 64px;
	--gap: 24px;
	--sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
	--label: "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;
	--quote: "Quote Marks", Georgia, serif;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 20px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, video, iframe { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
.skip-link {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	background: var(--ink); color: var(--paper); padding: 10px 14px;
	font: 600 14px/1 var(--label); text-transform: uppercase; letter-spacing: .06em;
}
.skip-link:focus { top: 16px; color: var(--paper); }
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}

/* Photocopy texture: a fixed layer over the page, blended so only the grey shows. */
.paper {
	position: fixed; inset: 0; z-index: 50; pointer-events: none;
	background: url("assets/img/texture.webp") center / cover no-repeat;
	mix-blend-mode: multiply;
	opacity: var(--texture-opacity);
}
@media (max-width: 760px) {
	.paper { background-image: url("assets/img/texture-small.webp"); }
}
@media print { .paper { display: none; } }

/* 12-column grid */
.g12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	padding-inline: var(--pad);
}

/* Small uppercase label style */
.section-label, .card__meta, .card__more, .site-nav, .site-footer,
.post-nav__label, .entry-content figcaption, .entry-feature figcaption,
.wp-block-quote cite, .wp-block-pullquote cite, .entry-content h4, .entry-content h5, .entry-content h6 {
	font-family: var(--label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ------------------------------------------------------------------
   Header and footer
   ------------------------------------------------------------------ */
.site-header { padding-top: 28px; padding-bottom: 20px; align-items: end; row-gap: 8px; }
.site-title {
	grid-column: 1 / span 5;
	font: 700 20px/1 var(--sans);
	text-transform: uppercase; letter-spacing: .04em;
}
.site-nav { grid-column: 6 / span 7; font-size: 14px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 28px; }
.site-nav a { display: inline-block; padding: 12px 0; }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a { color: var(--accent); }

.site-footer {
	padding-top: 32px; padding-bottom: 40px; margin-top: 96px;
	font-size: 13px; color: var(--muted); row-gap: 8px; align-items: center;
}
.site-footer__tagline { grid-column: 1 / span 6; }
.site-footer__nav { grid-column: 7 / span 3; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.site-footer__nav a { color: var(--muted); display: inline-block; padding: 12px 0; }
.site-footer__copy { grid-column: 10 / span 3; justify-self: end; }
.site-footer a:hover { color: var(--accent); }

/* ------------------------------------------------------------------
   Listing (homepage, archives)
   ------------------------------------------------------------------ */
.home-hero { padding-top: 24px; }
.home-hero__figure { grid-column: 1 / -1; margin: 0; }
.home-hero__figure a { display: block; }
.home-hero__img { display: block; width: 100%; height: auto; }
.listing { padding-top: 64px; }
.section-label { grid-column: 1 / -1; margin: 0 0 28px; font-size: 14px; letter-spacing: .1em; color: var(--accent); }
.cards { row-gap: 64px; align-items: start; }
.card { grid-column: span 4; }
.card__link { display: flex; flex-direction: column; gap: 18px; color: var(--ink); }
.card__meta { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.card__num { color: var(--accent); }
.card__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #E6E6E6; }
.card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__title { margin: 0; font: 700 24px/1.05 var(--sans); text-transform: uppercase; letter-spacing: .01em; }
.card__excerpt { font-size: 17px; line-height: 1.55; color: #222; }
.card__more { font-size: 14px; color: var(--accent); }
.card__link:hover .card__title { color: var(--accent); }
.empty { grid-column: 1 / -1; }

.pagination { grid-column: 1 / -1; margin-top: 72px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 20px; font: 500 14px/1 var(--label); text-transform: uppercase; letter-spacing: .06em; }
.pagination .page-numbers { padding: 12px 0; }
.pagination .current { color: var(--accent); }

/* ------------------------------------------------------------------
   Post title: band over a giant number
   ------------------------------------------------------------------ */
.post-hero {
	position: relative; overflow: hidden;
	min-height: clamp(420px, 48vw, 680px);
	display: flex; flex-direction: column; justify-content: center;
}
.post-hero__num {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font: 700 clamp(260px, 44vw, 640px)/1 var(--sans);
	letter-spacing: -.03em; color: var(--ink);
	user-select: none; white-space: nowrap;
}
.post-hero__band { position: relative; background: var(--paper); padding: 22px 0 26px; }
.post-hero__band .g12 { row-gap: 14px; }
.post-hero__title {
	grid-column: 1 / -1; margin: 0;
	font: 700 clamp(36px, 4.6vw, 68px)/1 var(--sans);
	text-transform: uppercase; letter-spacing: .005em;
	overflow-wrap: break-word;
}
.slashes { color: var(--accent); white-space: nowrap; }
.post-hero__meta {
	grid-column: 1 / -1; margin: 0;
	display: flex; flex-wrap: wrap; gap: 0 14px;
	font: 600 24px/1.2 var(--label); text-transform: uppercase; letter-spacing: .04em;
}
.accent { color: var(--accent); }

.page-header { padding-top: 96px; padding-bottom: 32px; }

/* ------------------------------------------------------------------
   Post body
   ------------------------------------------------------------------ */
.entry { padding-top: 16px; }
.entry-feature { margin: 48px 0 0; row-gap: 12px; }
.entry-feature img { grid-column: 3 / span 8; width: 100%; display: block; }
.entry-feature figcaption { grid-column: 3 / span 8; font-size: 13px; color: var(--muted); }

/* Content column: lines up with the 12-column grid using widths, not grid placement,
   so blocks and plugin output always stack in one clean column. */
.entry-content {
	--col: calc((100% - 2 * var(--pad) - 11 * var(--gap)) / 12);
	--start: 3; --span: 6;
	--wide-start: 2; --wide-span: 8;
	--quote-span: 8;
	padding-top: 48px;
	counter-reset: fig;
}
.entry-content::after { content: ""; display: table; clear: both; }
.entry-content > * {
	box-sizing: border-box;
	max-width: none;
	margin-top: 0;
	margin-bottom: 22px;
	margin-left: calc(var(--pad) + var(--start) * (var(--col) + var(--gap)));
	margin-right: 0;
	width: calc(var(--span) * var(--col) + (var(--span) - 1) * var(--gap));
}
/* Keep lines of text to a comfortable reading length (about 70 characters). */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > .wp-block-buttons,
.entry-content > .wp-block-footnotes { max-width: 34em; }
.entry-content > .alignwide,
.entry-content > figure:not(.wp-block-image),
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-video,
.entry-content > .wp-block-columns {
	margin-left: calc(var(--pad) + var(--wide-start) * (var(--col) + var(--gap)));
	width: calc(var(--wide-span) * var(--col) + (var(--wide-span) - 1) * var(--gap));
	margin-top: 40px; margin-bottom: 48px;
}
.entry-content > .alignfull { margin-left: 0; width: 100%; margin-top: 40px; margin-bottom: 48px; }
/* Image blocks sit in the text column, lined up with its left edge.
   Set an image to Wide width or Full width in the editor to go bigger. */
.entry-content > figure.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	margin-left: calc(var(--pad) + var(--start) * (var(--col) + var(--gap))) !important;
	margin-right: 0 !important;
	width: calc(var(--span) * var(--col) + (var(--span) - 1) * var(--gap)) !important;
	max-width: none;
	margin-top: 120px; margin-bottom: 28px;
	text-align: left;
}
.entry-content > figure.wp-block-image.alignwide {
	margin-left: calc(var(--pad) + var(--wide-start) * (var(--col) + var(--gap)));
	width: calc(var(--wide-span) * var(--col) + (var(--wide-span) - 1) * var(--gap));
}
.entry-content > figure.wp-block-image img { margin-left: 0; margin-right: auto; }
.entry-content > .wp-block-image + .wp-block-heading { margin-top: 0; }
.entry-content > .wp-block-heading + figure.wp-block-image { margin-top: 32px !important; }
.entry-content > :first-child { margin-top: 0 !important; }
.entry-content > .alignleft {
	float: left; width: auto;
	max-width: calc(3 * var(--col) + 2 * var(--gap));
	margin-right: var(--gap);
}
.entry-content > .alignright {
	float: right; width: auto; margin-left: var(--gap);
	max-width: calc(3 * var(--col) + 2 * var(--gap));
	margin-right: calc(var(--pad) + (12 - var(--start) - var(--span)) * (var(--col) + var(--gap)));
}
.entry-content > .aligncenter { text-align: center; }
.entry-content figure img { display: block; width: 100%; height: auto; }

.entry-content a { font-weight: 700; color: var(--ink); }
.entry-content a:hover { color: var(--accent); }
.entry-content strong, .entry-content b { font-weight: 700; }

.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
	margin-top: 56px; margin-bottom: 20px; color: var(--ink);
}
.entry-content h2 {
	font: 700 clamp(26px, 2.6vw, 36px)/1.05 var(--sans);
	text-transform: uppercase; letter-spacing: .01em;
	margin-top: 112px;
}
.entry-content h3 {
	font: 700 clamp(21px, 1.8vw, 25px)/1.15 var(--sans);
	text-transform: uppercase; letter-spacing: .01em;
	margin-top: 64px;
}
.entry-content h4, .entry-content h5, .entry-content h6 {
	font-size: 15px; font-weight: 600; letter-spacing: .1em; line-height: 1.3; color: var(--accent);
}
.entry-content h2 em, .entry-content h3 em { font-style: italic; }

.entry-content ul, .entry-content ol { padding-left: 1.2em; }
.entry-content li { margin-bottom: 6px; }
.entry-content li::marker { color: var(--accent); }

.entry-content figcaption,
.entry-content .wp-element-caption { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 12px; text-align: left; }
.entry-content > figure.wp-block-image > figcaption::before,
.entry-content > .wp-block-image > figure > figcaption::before {
	counter-increment: fig;
	content: "Fig. " counter(fig);
	color: var(--accent);
	padding-right: 10px;
}

.entry-content hr, .entry-content .wp-block-separator { border: 0; height: 24px; background: none; }

.entry-content pre, .entry-content code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }
.entry-content pre { background: rgba(0,0,0,.04); padding: 18px; overflow-x: auto; }

.entry-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.entry-content th, .entry-content td { text-align: left; padding: 10px 12px 10px 0; vertical-align: top; }
.entry-content th { font: 600 13px/1.3 var(--label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Quotes: Quote block and Pullquote block look the same. Don't type quote marks; the theme adds them. */
.entry-content > .wp-block-quote,
.entry-content > figure.wp-block-pullquote,
.entry-content > blockquote {
	margin-left: calc(var(--pad) + var(--start) * (var(--col) + var(--gap)));
	width: calc(var(--quote-span) * var(--col) + (var(--quote-span) - 1) * var(--gap));
	margin-top: 64px; margin-bottom: 64px;
}
.wp-block-pullquote { padding: 0; border: 0; text-align: left; font-size: inherit; }
.wp-block-quote, .wp-block-pullquote blockquote, .entry-content > blockquote {
	margin: 0; padding: 0; border: 0;
	font: 700 clamp(28px, 3vw, 42px)/1.05 var(--sans);
	text-transform: uppercase; letter-spacing: .005em;
	color: var(--accent);
}
.wp-block-pullquote blockquote { margin: 0; }
.wp-block-quote p, .wp-block-pullquote p, .entry-content > blockquote p { margin: 0 0 .4em; font-size: inherit; line-height: inherit; }
.wp-block-quote p:last-of-type, .wp-block-pullquote p:last-of-type, .entry-content > blockquote p:last-of-type { margin-bottom: 0; }
.wp-block-quote p:first-of-type::before,
.wp-block-pullquote p:first-of-type::before,
.entry-content > blockquote p:first-of-type::before {
	content: "\201C";
	color: var(--accent);
	font-family: var(--quote); font-weight: 600;
	font-size: 2em; line-height: 0; vertical-align: -.3em;
	margin-left: -.45em; letter-spacing: 0;
}
.wp-block-quote p:last-of-type::after,
.wp-block-pullquote p:last-of-type::after,
.entry-content > blockquote p:last-of-type::after {
	content: "\201D";
	color: var(--accent);
	font-family: var(--quote); font-weight: 600;
	font-size: 2em; line-height: 0; vertical-align: -.3em; letter-spacing: 0;
}
.wp-block-quote cite, .wp-block-pullquote cite, .entry-content > blockquote cite {
	display: block; margin-top: 20px;
	font-size: 14px; font-style: normal; line-height: 1.4; color: var(--muted);
}

/* Final Tiles Grid Gallery (plugin): keep its floated tiles inside the gallery
   and size it to the wide column, so text below never wraps around the tiles. */
.entry-content > .final-tiles-gallery,
.entry-content > div[id^="ftg-"] {
	display: flow-root !important;
	clear: both;
	box-sizing: border-box;
	margin-left: calc(var(--pad) + var(--wide-start) * (var(--col) + var(--gap))) !important;
	margin-right: 0 !important;
	width: calc(var(--wide-span) * var(--col) + (var(--wide-span) - 1) * var(--gap)) !important;
	max-width: none !important;
	margin-top: 40px; margin-bottom: 48px;
}
.entry-content > .final-tiles-gallery + *,
.entry-content > div[id^="ftg-"] + * { clear: both; }

/* Buttons block: shown as red text links, whatever colors the block was given. */
.entry-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.entry-content .wp-block-button { margin: 0; }
.entry-content .wp-block-button__link,
.entry-content .wp-block-button .wp-element-button,
.entry-content .wp-block-file__button {
	display: inline-block;
	background: none !important;
	color: var(--accent) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 12px 0 !important;
	width: auto !important;
	font: 600 15px/1.2 var(--label) !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-decoration: none;
}
.entry-content .wp-block-button__link::after { content: " \2192"; }
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-file__button:hover { color: var(--ink) !important; }

/* Long quotes (added automatically when a quote runs past about 200 characters):
   regular-size text with an orange quote mark, so a long passage stays readable. */
.entry-content > .is-long-quote { max-width: 34em; margin-top: 56px; margin-bottom: 56px; }
.entry-content > .wp-block-quote.is-long-quote,
.entry-content > .wp-block-pullquote.is-long-quote blockquote {
	font: 400 23px/1.5 var(--sans);
	text-transform: none; letter-spacing: 0;
	color: var(--ink);
}
.entry-content > .is-long-quote p:first-of-type::before {
	color: var(--accent);
	font-size: 2.6em; vertical-align: -.42em; margin-left: -.42em;
}
.entry-content > .is-long-quote p:last-of-type::after {
	color: var(--accent);
	font-size: 1.3em; vertical-align: -.1em; margin-left: .05em;
}
.entry-content > .is-long-quote cite { margin-top: 16px; }

/* Footnotes (core Footnotes block) */
.entry-content sup.fn a, .entry-content sup a { color: var(--accent); font: 600 .65em var(--label); padding-left: 2px; }
.entry-content .wp-block-footnotes { margin-top: 56px; padding-left: 1.2em; font: 500 14px/1.6 var(--label); color: var(--accent); }
.entry-content .wp-block-footnotes a { color: var(--ink); }

/* Galleries */
.wp-block-gallery { gap: var(--gap); }

/* Page links */
.page-links { display: flex; gap: 16px; font: 600 14px/1 var(--label); text-transform: uppercase; }

/* ------------------------------------------------------------------
   Previous / next
   ------------------------------------------------------------------ */
.post-nav { margin-top: 120px; row-gap: 32px; }
.post-nav a { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.post-nav__prev { grid-column: 1 / span 6; }
.post-nav__next { grid-column: 7 / span 6; text-align: right; align-items: flex-end; }
.post-nav__label { font-size: 14px; color: var(--accent); }
.post-nav__title { font: 700 28px/1.05 var(--sans); text-transform: uppercase; letter-spacing: .01em; }

/* ------------------------------------------------------------------
   Comments
   ------------------------------------------------------------------ */
.comments { margin-top: 96px; }
.comments__inner { grid-column: 4 / span 6; }
.comments__title { font: 600 16px/1.3 var(--label); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 24px; }
.comment-list { list-style: none; margin: 0 0 56px; padding: 0; }
.comment-list .children { list-style: none; padding-left: 32px; }
.comment-body { margin-bottom: 32px; }
.comment-meta { font: 500 14px/1.4 var(--label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.comment-meta .fn { color: var(--ink); font-style: normal; font-weight: 600; }
.comment-meta a { color: var(--muted); }
.comment-content p { margin: 0 0 12px; }
.reply a { font: 600 13px/1 var(--label); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.comment-form label { display: block; font: 500 14px/1.4 var(--label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 12px; border: 1px solid var(--ink); border-radius: 0;
	background: transparent; font: 400 17px/1.5 var(--sans); color: var(--ink);
}
.comment-form p { margin: 0 0 18px; }
.comment-form .comment-form-cookies-consent label { display: inline; text-transform: none; letter-spacing: 0; }
.button, .comment-form input[type="submit"] {
	background: var(--ink); color: var(--paper); border: 0; border-radius: 0;
	padding: 14px 22px; min-height: 44px; cursor: pointer;
	font: 600 14px/1 var(--label); text-transform: uppercase; letter-spacing: .08em;
}
.button:hover, .comment-form input[type="submit"]:hover { background: var(--accent); }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
	.card { grid-column: span 6; }
	.entry-content { --start: 2; --span: 8; --wide-start: 1; --wide-span: 10; --quote-span: 9; }
	.comments__inner { grid-column: 3 / span 8; }
}

@media (max-width: 760px) {
	:root { --pad: 20px; --gap: 16px; }
	body { font-size: 18px; }
	.g12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.g12 > *, .entry-feature img, .entry-feature figcaption, .comments__inner { grid-column: 1 / -1; }
	.entry-content > *,
	.entry-content > .wp-block-quote, .entry-content > figure.wp-block-pullquote, .entry-content > blockquote,
	.entry-content > .alignwide, .entry-content > figure,
	.entry-content > .wp-block-gallery, .entry-content > .wp-block-embed, .entry-content > .wp-block-video,
	.entry-content > .wp-block-columns { margin-left: var(--pad); width: calc(100% - 2 * var(--pad)); }
	.entry-content > .alignleft, .entry-content > .alignright { float: none; max-width: none; margin-left: var(--pad); margin-right: var(--pad); }
	.entry-content > .alignfull { margin-left: 0; width: 100%; }
	.entry-content > .final-tiles-gallery, .entry-content > div[id^="ftg-"] { margin-left: var(--pad) !important; width: calc(100% - 2 * var(--pad)) !important; }
	.entry-content > figure.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) { margin-left: var(--pad) !important; width: calc(100% - 2 * var(--pad)) !important; }
	.site-nav ul { justify-content: flex-start; }
	.site-footer__copy { justify-self: start; }
	.post-hero { min-height: 0; padding-top: 24px; }
	.post-hero__num { position: relative; inset: auto; justify-content: flex-start; padding-inline: var(--pad); font-size: 54vw; line-height: .8; margin-bottom: -.32em; }
	.post-hero__meta { font-size: 18px; }
	.entry-content h2 { margin-top: 80px; }
	.entry-content > figure.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) { margin-top: 80px; }
	.entry-content > .is-long-quote p:first-of-type::before { margin-left: 0; }
	.post-nav__next { text-align: left; align-items: flex-start; }
	.wp-block-quote p:first-of-type::before,
	.wp-block-pullquote p:first-of-type::before,
	.entry-content > blockquote p:first-of-type::before { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}