/*
Theme Name: Splashpage
Theme URI: https://thebighead.ca/free-themes/splashpage
Author: The Big Head
Author URI: https://thebighead.ca/
Description: Every page is a comic-book page. Splashpage gives a blog or zine a masthead built like a comic cover — huge off-register lettering, an auto-numbered ISSUE box, a starburst — and lays posts out as inked panels in drawn page layouts, with yellow caption boxes, speech-bubble excerpts, Ben-Day halftone dots and sound-effect bursts. Single posts open on a splash panel; quotes are speech bubbles, pullquotes are shout bubbles, comments are LETTERS TO THE EDITOR. Four print presets (Newsprint, Noir, Pop, Midnight), 80+ Customizer settings, eight block patterns, bundled open-source fonts and no external requests of any kind.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: splashpage
Update URI: false
Tags: blog, news, entertainment, grid-layout, one-column, two-columns, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, sticky-post, threaded-comments, full-width-template, block-patterns, block-styles, wide-blocks, editor-style, translation-ready

Splashpage is free software distributed under the terms of the GNU GPL.
*/

/* ==========================================================================
   1. Type. Three families, all SIL OFL 1.1, all bundled.
   ========================================================================== */

@font-face {
	font-family: "Fira Sans";
	font-style: italic;
	font-weight: 900;
	font-display: swap;
	src: url("/free-themes/preview/splashpage/theme/assets/fonts/FiraSans-BlackItalic.woff2") format("woff2");
}
@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/free-themes/preview/splashpage/theme/assets/fonts/FiraSans-Bold.woff2") format("woff2");
}
@font-face {
	font-family: "Literata";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/free-themes/preview/splashpage/theme/assets/fonts/Literata72pt-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Literata";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/free-themes/preview/splashpage/theme/assets/fonts/Literata72pt-RegularItalic.woff2") format("woff2");
}
@font-face {
	font-family: "Literata";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/free-themes/preview/splashpage/theme/assets/fonts/Literata72pt-Bold.woff2") format("woff2");
}
@font-face {
	font-family: "Fira Code";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("/free-themes/preview/splashpage/theme/assets/fonts/FiraCode-VariableFont_wght.woff2") format("woff2");
}

/* ==========================================================================
   2. Tokens. The Customizer rewrites the colours in one inline block
      (functions.php); everything else reads from here.
   ========================================================================== */

:root {
	--sp-paper: #FFF4D6;
	--sp-ink: #12100E;
	--sp-red: #E4002B;
	--sp-yellow: #FFD500;
	--sp-blue: #0B6BD6;
	--sp-panel: #FFFBEF;
	--sp-muted: #5f5a52;
	--sp-deep: #12100E;
	--sp-on-deep: #FFF4D6;
	--sp-on-red: #FFF4D6;
	--sp-on-yellow: #12100E;
	--sp-on-blue: #FFF4D6;
	--sp-red-text: #c90026;
	--sp-blue-text: #0a63c6;
	--sp-shadow: #12100E;
	--sp-mis-a: #00AEEF;
	--sp-mis-b: #EC008C;
	--sp-dot-scale: 1;
	--sp-body-size: 19px;

	--sp-font-letter: "Fira Sans", "Arial Black", "Helvetica Neue", Impact, sans-serif;
	--sp-font-caption: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
	--sp-font-body: "Literata", Georgia, "Times New Roman", serif;
	--sp-font-mono: "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--sp-line: 4px;
	--sp-line-thin: 3px;
	--sp-drop: 6px;
	--sp-gap: 18px;
	--sp-wrap: 1240px;
	--sp-narrow: 720px;
	--sp-pad: clamp(16px, 3.5vw, 40px);

	--sp-dot-gap: calc(7px * var(--sp-dot-scale));
	--sp-dot-alpha: .2;
	--sp-cover-bg: var(--sp-yellow);
	--sp-cover-ink: var(--sp-on-yellow);
	--sp-ray: color-mix(in srgb, var(--sp-red) 24%, var(--sp-cover-bg));
	--sp-ease: cubic-bezier(.2, .8, .2, 1.2);

	/* Two staggered layers of round dots: a 45° Ben-Day screen in currentColor. */
	--sp-screen: radial-gradient(closest-side, currentColor 52%, transparent 58%), radial-gradient(closest-side, currentColor 52%, transparent 58%);

	--sp-burst-12: polygon(50.0% 1.8%,59.1% 16.0%,74.5% 7.5%,75.1% 24.9%,93.3% 25.0%,81.8% 41.5%,96.6% 50.0%,85.4% 59.5%,91.8% 74.2%,73.8% 73.8%,75.0% 93.3%,59.0% 83.7%,50.0% 100.0%,41.0% 83.7%,25.0% 93.3%,26.5% 73.5%,6.7% 75.0%,14.5% 59.5%,0.0% 50.0%,15.1% 40.6%,6.7% 25.0%,26.8% 26.8%,25.0% 6.7%,40.8% 15.8%);
	--sp-burst-16: polygon(55.2% 0.3%,61.6% 12.7%,73.9% 6.1%,75.6% 19.2%,88.9% 18.5%,85.3% 31.4%,95.2% 36.6%,87.7% 46.5%,99.7% 55.2%,86.9% 61.5%,93.9% 73.9%,77.9% 73.2%,81.3% 88.7%,67.2% 82.6%,64.2% 97.9%,53.5% 88.2%,45.1% 96.8%,39.1% 85.1%,26.8% 92.8%,24.5% 80.7%,11.1% 81.5%,17.7% 67.0%,2.1% 64.2%,13.8% 53.3%,0.3% 44.8%,15.3% 39.2%,8.7% 27.6%,19.5% 24.6%,19.6% 12.5%,32.9% 17.5%,35.8% 2.1%,46.4% 10.5%);
	--sp-burst-8: polygon(50.0% 0.0%,60.5% 24.6%,85.4% 14.6%,75.4% 39.5%,100.0% 50.0%,75.4% 60.5%,85.4% 85.4%,60.5% 75.4%,50.0% 100.0%,39.5% 75.4%,14.6% 85.4%,24.6% 60.5%,0.0% 50.0%,24.6% 39.5%,14.6% 14.6%,39.5% 24.6%);
	--sp-shout: polygon(50.0% 0.4%,57.0% 10.2%,67.1% 3.0%,69.9% 15.6%,82.1% 11.7%,81.1% 23.9%,90.8% 26.4%,87.7% 36.3%,99.2% 41.3%,92.1% 50.0%,95.6% 58.0%,86.3% 63.2%,90.1% 73.2%,82.3% 77.1%,82.1% 88.3%,68.4% 81.8%,67.1% 97.0%,57.5% 92.7%,50.0% 100.0%,42.9% 90.2%,34.0% 94.1%,31.7% 81.6%,17.9% 88.3%,21.8% 73.7%,9.1% 73.6%,14.2% 63.0%,4.9% 57.9%,10.3% 50.0%,1.3% 41.4%,10.1% 35.5%,6.7% 25.0%,18.6% 23.6%,17.9% 11.7%,29.4% 14.3%,33.0% 3.4%,43.3% 12.2%);
}

.halftone-off { --sp-dot-alpha: 0; }
.halftone-heavy { --sp-dot-alpha: .36; }
.is-dark-paper { --sp-cover-bg: var(--sp-panel); --sp-cover-ink: var(--sp-ink); --sp-ray: color-mix(in srgb, var(--sp-blue) 16%, var(--sp-cover-bg)); }
.preset-noir { --sp-ray: color-mix(in srgb, var(--sp-ink) 9%, var(--sp-cover-bg)); }

/* ==========================================================================
   3. Foundation
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
html.sp-menu-open { overflow: hidden; }

body {
	margin: 0;
	background: var(--sp-paper);
	color: var(--sp-ink);
	font-family: var(--sp-font-body);
	font-size: var(--sp-body-size);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img, video, iframe, svg { max-width: 100%; }
img { height: auto; display: block; }
.sp-icon { display: inline-block; vertical-align: -.18em; flex: none; }

a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--sp-blue); text-decoration-thickness: .14em; text-underline-offset: .2em; }
a:hover { background: var(--sp-yellow); color: var(--sp-on-yellow); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--sp-blue); outline-offset: 3px; }
.is-dark-paper :focus-visible, .site-footer :focus-visible, .sp-strip :focus-visible { outline-color: var(--sp-yellow); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sp-font-letter);
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -.005em;
	margin: 0 0 .5em;
	color: var(--sp-ink);
	text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
h4 { font-size: 1.1rem; font-family: var(--sp-font-caption); font-weight: 700; font-style: normal; letter-spacing: .04em; }
h5, h6 { font-size: .9rem; font-family: var(--sp-font-caption); font-weight: 700; font-style: normal; letter-spacing: .08em; color: var(--sp-muted); }

p { margin: 0 0 1.35em; }
strong, b { font-weight: 700; }
small { font-size: .82em; }
hr { border: 0; height: var(--sp-line); background: var(--sp-ink); margin: 2.4em 0; }
mark { background: var(--sp-yellow); color: var(--sp-on-yellow); padding: .05em .25em; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
::selection { background: var(--sp-red); color: var(--sp-on-red); }

.wrap { width: 100%; max-width: calc(var(--sp-wrap) + 2 * var(--sp-pad)); margin-inline: auto; padding-inline: var(--sp-pad); }
.sp-narrow { max-width: calc(var(--sp-narrow) + 2 * var(--sp-pad)); }
.site-main { display: block; padding-bottom: clamp(48px, 7vw, 96px); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto !important; clip-path: none; height: auto; width: auto; left: 12px; top: 12px; z-index: 1000;
	padding: 12px 18px; background: var(--sp-yellow); color: var(--sp-on-yellow); border: var(--sp-line) solid var(--sp-ink);
	font: 700 .9rem/1 var(--sp-font-caption); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
}

/* ---------- The shared comic vocabulary ---------- */

/* Caption box: the yellow narration box. */
.sp-caption {
	display: inline-block;
	margin: 0;
	padding: .42em .75em .36em;
	background: var(--sp-yellow);
	color: var(--sp-on-yellow);
	border: var(--sp-line-thin) solid var(--sp-ink);
	box-shadow: 3px 3px 0 var(--sp-shadow);
	font: 700 .74rem/1.2 var(--sp-font-caption);
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
}
a.sp-caption:hover { background: var(--sp-ink); color: var(--sp-paper); }

/* Lettering: Black Italic capitals with an ink outline, a stacked drop and —
   the signature — cyan and magenta plates that did not quite line up. */
.sp-lettering {
	font-family: var(--sp-font-letter);
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	line-height: .9;
	letter-spacing: -.012em;
	color: var(--sp-red);
	-webkit-text-stroke: .075em var(--sp-ink);
	paint-order: stroke fill;
	text-shadow:
		.02em .02em 0 var(--sp-ink), .04em .04em 0 var(--sp-ink), .06em .06em 0 var(--sp-ink), .08em .08em 0 var(--sp-ink);
}
.has-misreg .sp-lettering {
	text-shadow:
		.02em .02em 0 var(--sp-ink), .04em .04em 0 var(--sp-ink), .06em .06em 0 var(--sp-ink), .08em .08em 0 var(--sp-ink),
		-.05em -.028em 0 var(--sp-mis-a), .135em .05em 0 var(--sp-mis-b);
}
.sp-lettering a { color: inherit; text-decoration: none; background: none; }
.sp-lettering__line { display: block; white-space: nowrap; }

/* Burst: a jagged star with a word in it. */
.sp-burst {
	--sp-burst-size: 150px;
	position: relative;
	display: grid;
	place-items: center;
	width: var(--sp-burst-size);
	aspect-ratio: 1;
	isolation: isolate;
	filter: drop-shadow(5px 5px 0 var(--sp-shadow));
}
.sp-burst::before, .sp-burst::after { content: ""; position: absolute; clip-path: var(--sp-burst-16); z-index: -1; }
.sp-burst::before { inset: 0; background: var(--sp-ink); }
.sp-burst::after { inset: 5px; background: var(--sp-red); }
.sp-burst__text {
	max-width: 74%;
	font: italic 900 1rem/.92 var(--sp-font-letter);
	font-size: min(calc(var(--sp-burst-size) * .23), calc(var(--sp-burst-size) * 1.12 / var(--sp-chars, 5)));
	text-transform: uppercase;
	text-align: center;
	color: var(--sp-on-red);
	transform: rotate(-9deg);
	overflow-wrap: normal;
}
.sp-burst--yellow::after { background: var(--sp-yellow); }
.sp-burst--yellow .sp-burst__text { color: var(--sp-on-yellow); }

/* Speech bubble. */
.sp-bubble {
	position: relative;
	margin: 0;
	padding: .8em 1.1em .75em;
	background: var(--sp-panel);
	color: var(--sp-ink);
	border: var(--sp-line-thin) solid var(--sp-ink);
	border-radius: 1.5em;
	font: 700 .78rem/1.38 var(--sp-font-caption);
	letter-spacing: .025em;
	text-transform: uppercase;
}
.sp-bubble::before, .sp-bubble::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, 12% 100%); }
.sp-bubble::before { left: 2.1em; top: calc(100% - 1px); width: 26px; height: 24px; background: var(--sp-ink); }
.sp-bubble::after { left: calc(2.1em + 4px); top: calc(100% - 4px); width: 16px; height: 17px; background: var(--sp-panel); }
.sp-bubble--left::before { left: auto; right: 100%; top: 1.3em; width: 22px; height: 22px; margin-right: -1px; clip-path: polygon(100% 0, 100% 100%, 0 78%); }
.sp-bubble--left::after { left: auto; right: calc(100% - 4px); top: calc(1.3em + 4px); width: 16px; height: 13px; clip-path: polygon(100% 0, 100% 100%, 0 78%); }

/* Rubber stamp. */
.sp-stamp {
	display: inline-block;
	padding: .38em .7em .3em;
	border: var(--sp-line-thin) solid var(--sp-red-text);
	color: var(--sp-red-text);
	background: transparent;
	font: 700 .74rem/1.1 var(--sp-font-caption);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transform: rotate(-2deg);
	border-radius: 3px;
	box-shadow: inset 0 0 0 1.5px var(--sp-paper), inset 0 0 0 3px color-mix(in srgb, var(--sp-red-text) 55%, transparent);
}
li:nth-child(even) > .sp-stamp { transform: rotate(1.6deg); }
a.sp-stamp:hover { background: var(--sp-red); color: var(--sp-on-red); border-color: var(--sp-ink); }
.sp-stamp--small { font-size: .64rem; padding: .3em .55em .24em; }

/* Buttons and form controls. */
.sp-button, button.sp-button, input[type="submit"], .wp-block-button__link, .wp-block-search__button, .wp-block-file__button {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	min-height: 48px;
	padding: .7em 1.35em .62em;
	background: var(--sp-panel);
	color: var(--sp-ink);
	border: var(--sp-line) solid var(--sp-ink);
	border-radius: 0;
	box-shadow: 4px 4px 0 var(--sp-shadow);
	font: 700 .86rem/1 var(--sp-font-caption);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .14s var(--sp-ease), box-shadow .14s var(--sp-ease), background-color .14s;
	-webkit-appearance: none; appearance: none;
}
.sp-button:hover, input[type="submit"]:hover, .wp-block-button__link:hover, .wp-block-search__button:hover, .wp-block-file__button:hover {
	transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--sp-shadow); background: var(--sp-yellow); color: var(--sp-on-yellow);
}
.sp-button:active, input[type="submit"]:active, .wp-block-button__link:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sp-shadow); }
.sp-button--red, input[type="submit"], .wp-block-button:not(.is-style-outline):not(.is-style-ghost) > .wp-block-button__link { background: var(--sp-red); color: var(--sp-on-red); }
.sp-button--ghost, .is-style-outline > .wp-block-button__link { background: transparent; box-shadow: none; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], textarea, select {
	width: 100%;
	min-height: 48px;
	padding: .6em .85em;
	background: var(--sp-panel);
	color: var(--sp-ink);
	border: var(--sp-line-thin) solid var(--sp-ink);
	border-radius: 0;
	box-shadow: inset 3px 3px 0 color-mix(in srgb, var(--sp-ink) 10%, transparent);
	font: 400 1rem/1.4 var(--sp-font-body);
	-webkit-appearance: none; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--sp-ink) 50%), linear-gradient(135deg, var(--sp-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 13px) 55%; background-size: 7px 7px; background-repeat: no-repeat; padding-right: 2.4em; }
textarea { min-height: 9em; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--sp-blue); outline-offset: 2px; background: var(--sp-paper); }
::placeholder { color: var(--sp-muted); opacity: 1; }
label { font: 700 .76rem/1.3 var(--sp-font-caption); letter-spacing: .08em; text-transform: uppercase; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--sp-red); vertical-align: -.3em; margin-right: .4em; }

.search-form { display: flex; gap: 0; max-width: 560px; }
.search-form .search-field { flex: 1; min-width: 0; border-right: 0; }
.search-form .search-submit { flex: none; box-shadow: none; min-height: 48px; border-width: var(--sp-line-thin); background: var(--sp-ink); color: var(--sp-paper); }
.search-form .search-submit:hover { transform: none; box-shadow: none; background: var(--sp-red); color: var(--sp-on-red); }
@media (max-width: 480px) { .search-form .search-submit span { display: none; } }

/* Tone fields for picture-less panels and drawn avatars. */
.sp-tone-red { --sp-tone: var(--sp-red); --sp-on-tone: var(--sp-on-red); }
.sp-tone-blue { --sp-tone: var(--sp-blue); --sp-on-tone: var(--sp-on-blue); }
.sp-tone-yellow { --sp-tone: var(--sp-yellow); --sp-on-tone: var(--sp-on-yellow); }

/* ==========================================================================
   4. The cover (masthead)
   ========================================================================== */

.sp-strip { background: var(--sp-deep); color: var(--sp-on-deep); }
.sp-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.sp-strip__text { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 .8em; font: 700 .7rem/1.3 var(--sp-font-caption); letter-spacing: .14em; text-transform: uppercase; padding: 8px 0; }
.sp-strip__sep { color: var(--sp-yellow); font-size: .9em; }
.sp-strip__price { color: var(--sp-yellow); }

.sp-social { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; text-decoration: none; background: none; }
.sp-social a:hover { background: var(--sp-yellow); color: var(--sp-on-yellow); }
.sp-social--strip a { width: 36px; height: 36px; }

.sp-cover__sheet {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(14px, 2.4vw, 34px);
	margin-top: 22px;
	padding: clamp(20px, 3vw, 40px) clamp(18px, 3vw, 40px) clamp(26px, 3.4vw, 46px);
	background: var(--sp-cover-bg);
	color: var(--sp-cover-ink);
	border: var(--sp-line) solid var(--sp-ink);
	box-shadow: 8px 8px 0 var(--sp-shadow);
}
/* Sunburst rays, fanning out from under the title. */
.has-rays .sp-cover__sheet::before {
	content: ""; position: absolute; inset: -40% -10%; z-index: -2;
	background: repeating-conic-gradient(from 3deg at 50% 78%, transparent 0deg 6deg, var(--sp-ray) 6deg 12deg);
}
/* A graded Ben-Day screen climbing from the bottom edge. */
.sp-cover__sheet::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
	height: calc(150px * var(--sp-dot-scale));
	background: var(--sp-red);
	opacity: calc(var(--sp-dot-alpha) * 3.2);
	-webkit-mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%;
	mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%;
}

.sp-cover__corner {
	display: grid; justify-items: center; align-self: start;
	min-width: 112px;
	padding: 8px 12px 9px;
	background: var(--sp-panel); color: var(--sp-ink);
	border: var(--sp-line) solid var(--sp-ink);
	box-shadow: 4px 4px 0 var(--sp-shadow);
	text-align: center;
	transform: rotate(-2deg);
}
.sp-cover__corner-label { font: 700 .66rem/1 var(--sp-font-caption); letter-spacing: .2em; text-transform: uppercase; padding-bottom: 5px; border-bottom: 3px solid var(--sp-ink); width: 100%; }
.sp-cover__corner-no { font: italic 900 2.7rem/1 var(--sp-font-letter); padding: 6px 0 2px; color: var(--sp-red-text); }
.sp-cover__corner-month { font: 700 .66rem/1 var(--sp-font-caption); letter-spacing: .16em; text-transform: uppercase; padding-top: 5px; border-top: 3px solid var(--sp-ink); width: 100%; }

.sp-cover__brand { min-width: 0; display: grid; justify-items: center; text-align: center; gap: clamp(12px, 1.6vw, 22px); }
.site-title {
	--sp-title-space: calc(min(100vw, var(--sp-wrap)) - 500px);
	margin: 0;
	font-size: clamp(2.5rem, calc(var(--sp-title-space) / (var(--sp-fit, 10) * .6)), 10.5rem);
	transform: rotate(-2.2deg);
	padding: .04em .1em .1em 0;
}
.site-title a:hover { color: var(--sp-red); background: none; }
.site-description { font-size: clamp(.68rem, 1.05vw, .86rem); transform: rotate(-1deg); max-width: 100%; }
.sp-cover__logo img { max-height: 160px; width: auto; }

.sp-cover__burst { align-self: start; transform: rotate(9deg); }
.sp-cover__burst .sp-burst { --sp-burst-size: clamp(120px, 13vw, 172px); }
.sp-cover__sheet:hover .sp-cover__burst .sp-burst { animation: sp-wiggle .6s var(--sp-ease) 1; }
@keyframes sp-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg) scale(1.06); } 65% { transform: rotate(6deg) scale(1.03); } }

/* The compact cover, for inner pages. */
.cover-compact .sp-cover__sheet { padding: 14px clamp(14px, 2vw, 26px) 18px; margin-top: 18px; box-shadow: 6px 6px 0 var(--sp-shadow); grid-template-columns: auto minmax(0, 1fr) auto; }
.cover-compact .sp-cover__sheet::after { height: calc(70px * var(--sp-dot-scale)); }
.cover-compact .site-title { font-size: clamp(1.9rem, calc(var(--sp-title-space) / (var(--sp-fit, 10) * .6)), 4.2rem); transform: rotate(-1.5deg); }
.cover-compact .sp-cover__brand { justify-items: start; text-align: left; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; }
.cover-compact .site-description { justify-self: start; }
.cover-compact .sp-cover__corner { grid-auto-flow: column; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; align-self: center; }
.cover-compact .sp-cover__corner-label, .cover-compact .sp-cover__corner-month { border: 0; padding: 0; width: auto; }
.cover-compact .sp-cover__corner-no { font-size: 1.5rem; padding: 0; }
.cover-compact .sp-cover__burst { align-self: center; }
.cover-compact .sp-cover__burst .sp-burst { --sp-burst-size: 92px; }

/* ---------- The tabs ---------- */

.sp-tabs { position: relative; z-index: 20; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: calc(var(--sp-line) * -1); padding-left: clamp(8px, 2vw, 24px); padding-right: clamp(8px, 2vw, 24px); }
.main-navigation { flex: 1; min-width: 0; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation .menu, .main-navigation #primary-menu { display: flex; flex-wrap: wrap; align-items: flex-start; }
.main-navigation li { position: relative; }
.main-navigation .menu > li { margin: 0 calc(var(--sp-line) * -1) 0 0; }
.main-navigation a {
	display: flex; align-items: center; gap: .4em;
	min-height: 46px;
	padding: 10px clamp(12px, 1.5vw, 20px) 9px;
	background: var(--sp-panel); color: var(--sp-ink);
	border: var(--sp-line) solid var(--sp-ink);
	font: 700 .8rem/1.1 var(--sp-font-caption);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: padding .14s var(--sp-ease), background-color .14s;
}
.main-navigation .menu > li > a { border-radius: 0 0 10px 10px; }
.main-navigation .menu > li > a:hover, .main-navigation .menu > li:focus-within > a { background: var(--sp-yellow); color: var(--sp-on-yellow); padding-bottom: 15px; }
.main-navigation .current-menu-item > a, .main-navigation .current_page_item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_parent > a { background: var(--sp-ink); color: var(--sp-paper); padding-bottom: 15px; }
.nav-highlight .main-navigation .menu > li:last-child > a { background: var(--sp-red); color: var(--sp-on-red); }
.nav-highlight .main-navigation .menu > li:last-child > a:hover { background: var(--sp-yellow); color: var(--sp-on-yellow); }

.main-navigation .sub-menu, .main-navigation .children {
	position: absolute; top: calc(100% - var(--sp-line)); left: 0; z-index: 30;
	min-width: 230px;
	background: var(--sp-panel);
	border: var(--sp-line) solid var(--sp-ink);
	box-shadow: 6px 6px 0 var(--sp-shadow);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .14s, transform .14s var(--sp-ease), visibility .14s;
}
.main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu, .main-navigation li.is-open > .sub-menu,
.main-navigation li:hover > .children, .main-navigation li:focus-within > .children, .main-navigation li.is-open > .children { opacity: 1; visibility: visible; transform: none; }
.main-navigation .sub-menu a, .main-navigation .children a { border: 0; border-bottom: 2px solid var(--sp-ink); background: transparent; }
.main-navigation .sub-menu li:last-child > a, .main-navigation .children li:last-child > a { border-bottom: 0; }
.main-navigation .sub-menu a:hover, .main-navigation .children a:hover { background: var(--sp-yellow); color: var(--sp-on-yellow); }
.main-navigation .sub-menu .sub-menu, .main-navigation .children .children { top: calc(var(--sp-line) * -1); left: 100%; }
.main-navigation .menu-item-has-children > a::after, .main-navigation .page_item_has_children > a::after { content: "▾"; font-size: .9em; margin-left: .15em; }
.main-navigation .sub-menu .menu-item-has-children > a::after { content: "▸"; margin-left: auto; }
.submenu-toggle { display: none; }

.menu-toggle, .menu-close, .main-navigation__title, .main-navigation__extras { display: none; }

.sp-tabs__search { position: relative; flex: none; }
.search-toggle {
	display: grid; place-items: center; width: 52px; min-height: 46px;
	background: var(--sp-ink); color: var(--sp-paper);
	border: var(--sp-line) solid var(--sp-ink); border-radius: 0 0 10px 10px;
	cursor: pointer;
	transition: padding .14s var(--sp-ease), background-color .14s;
}
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--sp-yellow); color: var(--sp-on-yellow); padding-bottom: 6px; }
.sp-search-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: min(420px, calc(100vw - 2 * var(--sp-pad))); padding: 14px; background: var(--sp-yellow); border: var(--sp-line) solid var(--sp-ink); box-shadow: 6px 6px 0 var(--sp-shadow); }
.sp-search-panel[hidden] { display: none; }

/* ---------- Phone and tablet: a MENU tab, and the menu as a full page ---------- */

@media (max-width: 900px) {
	.site-title { --sp-title-space: calc(100vw - 2 * var(--sp-pad) - 56px); }

	.sp-cover__sheet { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "corner burst" "brand brand"; align-items: start; row-gap: 6px; box-shadow: 6px 6px 0 var(--sp-shadow); }
	.sp-cover__corner { grid-area: corner; justify-self: start; min-width: 0; padding: 6px 10px; grid-auto-flow: column; align-items: center; gap: 8px; }
	.sp-cover__corner-label, .sp-cover__corner-month { border: 0; padding: 0; width: auto; }
	.sp-cover__corner-no { font-size: 1.5rem; padding: 0; }
	.sp-cover__brand { grid-area: brand; }
	.sp-cover__burst { grid-area: burst; justify-self: end; margin: -8px -6px -34px 0; }
	.sp-cover__burst .sp-burst { --sp-burst-size: 96px; }
	.cover-full .site-title { margin-top: 18px; }

	.cover-compact .sp-cover__sheet { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand corner"; align-items: center; }
	.cover-compact .sp-cover__burst, .cover-compact .site-description { display: none; }
	.cover-compact .sp-cover__brand { grid-template-columns: minmax(0, 1fr); }
	.cover-compact .site-title { --sp-title-space: calc(100vw - 2 * var(--sp-pad) - 190px); font-size: clamp(1.5rem, calc(var(--sp-title-space) / (var(--sp-fit, 10) * .6)), 3rem); }
	.cover-compact .sp-cover__corner-month { display: none; }

	.sp-strip__topics, .sp-strip__topics + .sp-strip__sep, .sp-strip__sep:first-of-type { display: none; }
	.sp-strip__text { justify-content: space-between; width: 100%; gap: 0 1em; }
	.sp-social--strip { display: none; }

	.sp-tabs { padding-inline: 10px; }
	.menu-toggle {
		display: inline-flex; align-items: center; gap: 10px;
		min-height: 50px; padding: 10px 18px 9px;
		background: var(--sp-ink); color: var(--sp-paper);
		border: var(--sp-line) solid var(--sp-ink); border-radius: 0 0 10px 10px;
		font: 700 .84rem/1 var(--sp-font-caption); letter-spacing: .12em; text-transform: uppercase;
		cursor: pointer;
	}
	.menu-toggle__bars { display: grid; gap: 4px; width: 22px; }
	.menu-toggle__bars span { height: 3px; background: currentColor; }
	.search-toggle { min-height: 50px; }

	.main-navigation {
		position: fixed; inset: 0; z-index: 100;
		overflow-y: auto; overscroll-behavior: contain;
		background: var(--sp-cover-bg); color: var(--sp-cover-ink);
		visibility: hidden; opacity: 0; transform: translateY(-14px);
		transition: opacity .18s, transform .22s var(--sp-ease), visibility .18s;
	}
	.main-navigation.is-open { visibility: visible; opacity: 1; transform: none; }
	.main-navigation::before { content: ""; position: fixed; inset: 0; z-index: -1; color: var(--sp-red); opacity: calc(var(--sp-dot-alpha) * 1.4); background-image: var(--sp-screen); background-size: 14px 14px; background-position: 0 0, 7px 7px; -webkit-mask: linear-gradient(to top, #000, transparent 70%); mask: linear-gradient(to top, #000, transparent 70%); }
	.main-navigation__inner { min-height: 100%; padding: 18px var(--sp-pad) 40px; display: flex; flex-direction: column; gap: 18px; }
	.menu-close {
		display: inline-flex; align-items: center; gap: 8px; align-self: flex-end;
		min-height: 48px; padding: 8px 16px;
		background: var(--sp-ink); color: var(--sp-paper); border: var(--sp-line) solid var(--sp-ink);
		font: 700 .8rem/1 var(--sp-font-caption); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
	}
	.main-navigation__title { display: block; margin: 0; font: italic 900 clamp(2.6rem, 13vw, 4rem)/.9 var(--sp-font-letter); text-transform: uppercase; color: var(--sp-red); -webkit-text-stroke: .07em var(--sp-ink); paint-order: stroke fill; text-shadow: .05em .05em 0 var(--sp-ink); transform: rotate(-2deg); transform-origin: left; }
	.main-navigation .menu, .main-navigation #primary-menu { display: block; border: var(--sp-line) solid var(--sp-ink); background: var(--sp-panel); box-shadow: 6px 6px 0 var(--sp-shadow); }
	.main-navigation .menu > li { margin: 0; }
	.main-navigation li { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
	.main-navigation a, .main-navigation .menu > li > a { min-height: 56px; border: 0; border-bottom: 3px solid var(--sp-ink); border-radius: 0; font-size: 1.05rem; padding: 14px 16px; background: transparent; color: var(--sp-ink); }
	.main-navigation .menu > li:last-child > a { border-bottom: 0; }
	.main-navigation .menu > li > a:hover, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { padding-bottom: 14px; }
	.main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { background: var(--sp-ink); color: var(--sp-paper); }
	.main-navigation .menu-item-has-children > a::after, .main-navigation .page_item_has_children > a::after { content: none; }
	.submenu-toggle { display: grid; place-items: center; width: 56px; background: var(--sp-yellow); color: var(--sp-on-yellow); border: 0; border-left: 3px solid var(--sp-ink); border-bottom: 3px solid var(--sp-ink); font: 900 1.4rem/1 var(--sp-font-caption); cursor: pointer; }
	.main-navigation .sub-menu, .main-navigation .children { position: static; grid-column: 1 / -1; display: none; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; min-width: 0; background: color-mix(in srgb, var(--sp-ink) 8%, var(--sp-panel)); }
	.main-navigation li.is-open > .sub-menu, .main-navigation li.is-open > .children { display: block; }
	.main-navigation .sub-menu a, .main-navigation .children a { padding-left: 32px; font-size: .92rem; border-bottom: 2px solid var(--sp-ink); }
	.main-navigation .sub-menu .sub-menu a { padding-left: 48px; }
	.main-navigation__extras { display: grid; gap: 16px; margin-top: auto; }
	.main-navigation__extras .search-form { max-width: none; }
	.sp-social--menu a { border: var(--sp-line-thin) solid var(--sp-ink); background: var(--sp-panel); color: var(--sp-ink); }
}

/* ==========================================================================
   5. Panels. A comic page is a six-column grid; each page size has a drawn
      layout and a mirrored twin (inc/template-tags.php deals the posts out).
   ========================================================================== */

.sp-page {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: minmax(clamp(200px, 18vw, 238px), auto);
	gap: var(--sp-gap);
	margin-bottom: var(--sp-gap);
}
.sp-page--p5  { grid-template-areas: "a a a a b b" "a a a a c c" "d d d e e e"; }
.sp-page--p5m { grid-template-areas: "b b a a a a" "c c a a a a" "d d d e e e"; }
.sp-page--p4  { grid-template-areas: "a a b b b b" "a a c c d d"; }
.sp-page--p4m { grid-template-areas: "b b b b a a" "c c d d a a"; }
.sp-page--p3  { grid-template-areas: "a a a a c c" "b b b b c c"; }
.sp-page--p3m { grid-template-areas: "c c a a a a" "c c b b b b"; }
.sp-page--p2, .sp-page--p2m { grid-template-areas: "a a a b b b"; grid-auto-rows: minmax(clamp(240px, 24vw, 320px), auto); }
.sp-page--p1, .sp-page--p1m { grid-template-areas: "a a a a a a"; grid-auto-rows: minmax(clamp(260px, 30vw, 400px), auto); }
.sp-slot-0 { grid-area: a; } .sp-slot-1 { grid-area: b; } .sp-slot-2 { grid-area: c; } .sp-slot-3 { grid-area: d; } .sp-slot-4 { grid-area: e; }

.gutters-ink .sp-page { background: var(--sp-deep); padding: var(--sp-gap); border: var(--sp-line) solid var(--sp-ink); }

.sp-panel {
	--sp-tilt: 0deg; --sp-lift: 0px;
	position: relative; min-width: 0;
	transform: rotate(var(--sp-tilt)) translate(calc(var(--sp-lift) * -1), calc(var(--sp-lift) * -1));
	transition: transform .18s var(--sp-ease);
}
.has-tilt .sp-page > .sp-panel:nth-child(2) { --sp-tilt: .6deg; }
.has-tilt .sp-page > .sp-panel:nth-child(3) { --sp-tilt: -.6deg; }
.has-tilt .sp-page > .sp-panel:nth-child(5) { --sp-tilt: .5deg; }
.has-tilt .sp-page--p4 > .sp-panel:nth-child(1), .has-tilt .sp-page--p4m > .sp-panel:nth-child(1) { --sp-tilt: -.5deg; }
.has-tilt .sp-strip-row > .sp-panel:nth-child(odd) { --sp-tilt: -.6deg; }
.has-tilt .sp-strip-row > .sp-panel:nth-child(even) { --sp-tilt: .6deg; }
.sp-panel:hover, .sp-panel:focus-within { --sp-lift: 4px; z-index: 5; }

.sp-panel__frame {
	position: relative; isolation: isolate; overflow: hidden;
	height: 100%; min-height: inherit;
	display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
	padding: 12px;
	background: var(--sp-panel);
	border: var(--sp-line) solid var(--sp-ink);
	box-shadow: 0 0 0 var(--sp-shadow);
	transition: box-shadow .18s var(--sp-ease);
}
.sp-panel:hover .sp-panel__frame, .sp-panel:focus-within .sp-panel__frame { box-shadow: 9px 9px 0 var(--sp-shadow); }

.sp-panel__art { position: absolute; inset: 0; z-index: -1; background: var(--sp-tone, var(--sp-blue)); }
.sp-panel__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sp-ease); }
.sp-panel:hover .sp-panel__art img { transform: scale(1.04); }
/* Ben-Day screen over every picture: the whole page came off one press. */
.sp-panel__art::after, .sp-splash__art::after, .sp-next__art::after, .sp-row__art::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	color: var(--sp-deep); opacity: calc(var(--sp-dot-alpha) * .9);
	background-image: var(--sp-screen);
	background-size: var(--sp-dot-gap) var(--sp-dot-gap);
	background-position: 0 0, calc(var(--sp-dot-gap) / 2) calc(var(--sp-dot-gap) / 2);
	mix-blend-mode: multiply;
}

/* Picture-less panel: pure typography on a halftone field. */
.sp-panel__art--type { display: grid; place-items: center; overflow: hidden; }
.sp-panel__art--type::before {
	content: ""; position: absolute; inset: 0;
	color: var(--sp-deep); opacity: calc(.12 + var(--sp-dot-alpha) * .9);
	background-image: var(--sp-screen);
	background-size: calc(var(--sp-dot-gap) * 2.4) calc(var(--sp-dot-gap) * 2.4);
	background-position: 0 0, calc(var(--sp-dot-gap) * 1.2) calc(var(--sp-dot-gap) * 1.2);
	-webkit-mask: linear-gradient(135deg, transparent 12%, #000 95%); mask: linear-gradient(135deg, transparent 12%, #000 95%);
}
.sp-panel__glyph {
	position: relative;
	font: italic 900 clamp(9rem, 22vw, 17rem)/.8 var(--sp-font-letter);
	color: var(--sp-on-tone, var(--sp-paper)); opacity: .96;
	-webkit-text-stroke: .045em var(--sp-ink); paint-order: stroke fill;
	text-shadow: .05em .05em 0 var(--sp-ink);
	transform: rotate(10deg) translate(22%, -8%);
}

.sp-panel__top { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 8px; max-width: calc(100% - 24px); }

.sp-panel__caption {
	max-width: min(100%, 36em);
	padding: .6em .8em .55em;
	background: var(--sp-panel);
	border: var(--sp-line-thin) solid var(--sp-ink);
	box-shadow: 4px 4px 0 var(--sp-shadow);
}
.sp-panel__title { margin: 0; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.04; letter-spacing: 0; overflow-wrap: anywhere; }
.sp-panel__title a { color: inherit; text-decoration: none; background: none; }
.sp-panel__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sp-panel:hover .sp-panel__title a { text-decoration: underline; text-decoration-color: var(--sp-red); text-decoration-thickness: .12em; text-underline-offset: .14em; }
.sp-panel--splash .sp-panel__title, .sp-panel--full .sp-panel__title { font-size: clamp(1.5rem, 2.9vw, 2.6rem); line-height: .98; }
.sp-panel--wide .sp-panel__title, .sp-panel--half .sp-panel__title, .sp-panel--tall .sp-panel__title { font-size: clamp(1.1rem, 1.7vw, 1.5rem); }
.sp-panel--splash .sp-panel__caption, .sp-panel--full .sp-panel__caption { max-width: min(88%, 40em); padding: .8em 1em .7em; }
.sp-panel--wide .sp-panel__caption { max-width: 58%; }
/* A very long title must not swallow a small panel. */
.sp-panel--third .sp-panel__title a, .sp-panel--half .sp-panel__title a, .sp-panel--wide .sp-panel__title a { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.sp-meta { margin: .55em 0 0; display: flex; flex-wrap: wrap; gap: 0 .6em; font: 700 .66rem/1.3 var(--sp-font-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); }
.sp-meta__sep { color: var(--sp-red-text); }

.sp-panel__bubble { position: absolute; z-index: 0; top: 14px; right: 14px; max-width: min(46%, 330px); box-shadow: 3px 3px 0 var(--sp-shadow); }
.sp-panel--tall .sp-panel__bubble { top: 58px; left: 14px; right: 14px; max-width: none; }
.sp-panel--half .sp-panel__bubble { max-width: 56%; }
.sp-panel--wide .sp-panel__bubble { max-width: 36%; top: 50%; transform: translateY(-58%); }
.sp-panel--third .sp-panel__bubble { display: none; }

.sp-panel__flag {
	position: absolute; z-index: 6; top: -12px; right: -10px;
	padding: .36em .8em .3em;
	background: var(--sp-red); color: var(--sp-on-red);
	border: var(--sp-line-thin) solid var(--sp-ink);
	box-shadow: 3px 3px 0 var(--sp-shadow);
	font: italic 900 1.05rem/1 var(--sp-font-letter); text-transform: uppercase;
	transform: rotate(5deg);
}
.sp-panel__stamp, .sp-splash .sp-stamp {
	background: var(--sp-panel);
}
.sp-panel__stamp {
	position: absolute; z-index: 0; top: 42%; left: 50%;
	padding: .3em .6em .22em;
	border: 5px solid var(--sp-red-text); color: var(--sp-red-text);
	font: italic 900 clamp(1.4rem, 3vw, 2.4rem)/1 var(--sp-font-letter); text-transform: uppercase; white-space: nowrap;
	transform: translate(-50%, -50%) rotate(-11deg);
	box-shadow: inset 0 0 0 2px var(--sp-panel), inset 0 0 0 4px var(--sp-red-text);
}

.sp-panel__pop { position: absolute; z-index: 7; right: -16px; bottom: -18px; pointer-events: none; transform: scale(0) rotate(-30deg); transition: transform .22s var(--sp-ease); }
.sp-panel__pop .sp-burst { --sp-burst-size: 104px; }
.sp-panel__pop .sp-burst::after { background: var(--sp-yellow); }
.sp-panel__pop .sp-burst__text { color: var(--sp-on-yellow); }
.sp-panel:hover .sp-panel__pop, .sp-panel:focus-within .sp-panel__pop { transform: scale(1) rotate(8deg); }

/* A row of equal panels: related posts, the 404 rescue strip. */
.sp-strip-row { display: grid; gap: var(--sp-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); }
.sp-strip-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-strip-row .sp-panel { grid-area: auto; }

@media (max-width: 1000px) {
	.sp-page { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); }
	.sp-page--p5, .sp-page--p5m { grid-template-areas: "a a" "b c" "d e"; }
	.sp-page--p4 { grid-template-areas: "a b" "a c" "d d"; }
	.sp-page--p4m { grid-template-areas: "b a" "c a" "d d"; }
	.sp-page--p3 { grid-template-areas: "a a" "b c"; }
	.sp-page--p3m { grid-template-areas: "a a" "c b"; }
	.sp-page--p2, .sp-page--p2m { grid-template-areas: "a b"; }
	.sp-page--p1, .sp-page--p1m { grid-template-areas: "a a"; }
	.sp-panel--splash { min-height: clamp(340px, 56vw, 520px); }
	.sp-panel--wide .sp-panel__caption { max-width: 100%; }
	.sp-panel--wide .sp-panel__bubble { display: none; }
}
@media (max-width: 640px) {
	:root { --sp-gap: 16px; }
	.sp-page, .sp-strip-row, .sp-strip-row--2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: none !important; grid-auto-rows: auto; }
	.sp-page > .sp-panel { grid-area: auto; }
	.sp-panel { min-height: 0; }
	.sp-panel__frame { min-height: 0; aspect-ratio: 4 / 3; }
	.sp-panel--splash .sp-panel__frame, .sp-panel--tall .sp-panel__frame, .sp-panel--full .sp-panel__frame { aspect-ratio: 4 / 5; }
	.sp-panel--wide .sp-panel__frame { aspect-ratio: 16 / 11; }
	.sp-panel--splash .sp-panel__title, .sp-panel--full .sp-panel__title { font-size: clamp(1.45rem, 7vw, 2rem); }
	.sp-panel__title, .sp-panel--wide .sp-panel__title, .sp-panel--half .sp-panel__title, .sp-panel--tall .sp-panel__title { font-size: 1.15rem; }
	.sp-panel--splash .sp-panel__caption, .sp-panel--full .sp-panel__caption { max-width: 100%; }
	.sp-panel__bubble, .sp-panel--half .sp-panel__bubble, .sp-panel--tall .sp-panel__bubble { display: none; }
	.sp-panel--splash .sp-panel__bubble, .sp-panel--tall .sp-panel__bubble { display: block; top: 58px; left: 14px; right: 14px; max-width: none; }
	.sp-panel__pop { display: none; }
	.sp-panel__flag { right: -6px; }
}

/* ---------- The classic list ---------- */

.sp-list { display: grid; gap: clamp(28px, 4vw, 44px); margin-top: 12px; }
.sp-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.sp-row__art { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border: var(--sp-line) solid var(--sp-ink); background: var(--sp-tone, var(--sp-panel)); box-shadow: var(--sp-drop) var(--sp-drop) 0 var(--sp-shadow); transition: transform .18s var(--sp-ease), box-shadow .18s var(--sp-ease); }
.sp-row:nth-child(even) .sp-row__art { transform: rotate(.6deg); }
.sp-row:nth-child(odd) .sp-row__art { transform: rotate(-.6deg); }
.sp-row__art:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--sp-shadow); background: var(--sp-tone, var(--sp-panel)); }
.sp-row__art img { width: 100%; height: 100%; object-fit: cover; }
.sp-row__art .sp-panel__glyph { font-size: clamp(7rem, 16vw, 12rem); transform: rotate(10deg); }
.sp-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.sp-row__title { font-size: clamp(1.5rem, 3vw, 2.3rem); margin-bottom: .1em; overflow-wrap: anywhere; }
.sp-row__title a { text-decoration: none; background: none; color: inherit; }
.sp-row__title a:hover { text-decoration: underline; text-decoration-color: var(--sp-red); text-decoration-thickness: .1em; text-underline-offset: .12em; }
.sp-row .sp-meta { margin: .6em 0 1.2em; }
.sp-row .sp-bubble { font-size: .82rem; max-width: 40em; margin-bottom: 1.2em; box-shadow: 4px 4px 0 var(--sp-shadow); }
.sp-row__excerpt { margin: 0 0 1em; }
.sp-row__more { display: inline-flex; align-items: center; gap: .4em; font: 700 .78rem/1 var(--sp-font-caption); letter-spacing: .1em; text-transform: uppercase; text-decoration-color: var(--sp-red); }
@media (max-width: 700px) {
	.sp-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.sp-row .sp-bubble--left::before { right: auto; left: 2.1em; top: auto; bottom: calc(100% - 1px); clip-path: polygon(12% 0, 100% 100%, 0 100%); }
	.sp-row .sp-bubble--left::after { right: auto; left: calc(2.1em + 3px); top: auto; bottom: calc(100% - 4px); clip-path: polygon(12% 0, 100% 100%, 0 100%); }
}

/* ---------- Sidebar layout ---------- */

.has-sidebar .sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.has-sidebar .sp-article .sp-layout__main > * { margin-inline: 0; }
@media (max-width: 960px) { .has-sidebar .sp-layout { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   6. Section captions, banners, pagination
   ========================================================================== */

.sp-section-head { display: flex; align-items: center; gap: 16px; margin: clamp(30px, 4.4vw, 54px) 0 clamp(16px, 2vw, 24px); }
.sp-section-head__label {
	flex: none; max-width: 100%; margin: 0;
	padding: .42em .8em .34em;
	background: var(--sp-yellow); color: var(--sp-on-yellow);
	border: var(--sp-line) solid var(--sp-ink);
	box-shadow: 5px 5px 0 var(--sp-shadow);
	font: italic 900 clamp(1.15rem, 2.2vw, 1.6rem)/1 var(--sp-font-letter);
	text-transform: uppercase; letter-spacing: .005em;
	transform: rotate(-1.2deg);
}
/* …trailed by a line of dots that thins out, like a halftone running dry. */
.sp-section-head::after {
	content: ""; flex: 1; height: 14px; min-width: 40px;
	color: var(--sp-ink);
	background-image: radial-gradient(closest-side, currentColor 60%, transparent 66%);
	background-size: 14px 14px; background-repeat: repeat-x; background-position: left center;
	-webkit-mask: linear-gradient(to right, #000, transparent 92%); mask: linear-gradient(to right, #000, transparent 92%);
}
.site-main > .wrap > .sp-layout > .sp-layout__main > .sp-section-head:first-child { margin-top: clamp(26px, 3.4vw, 42px); }

.sp-banner {
	position: relative; isolation: isolate; overflow: hidden;
	margin: clamp(26px, 3.4vw, 44px) 0 clamp(26px, 3.4vw, 40px);
	padding: clamp(24px, 4vw, 52px) clamp(20px, 4vw, 56px) clamp(28px, 4vw, 56px);
	background: var(--sp-blue); color: var(--sp-on-blue);
	border: var(--sp-line) solid var(--sp-ink);
	box-shadow: 8px 8px 0 var(--sp-shadow);
}
.has-rays .sp-banner::before { content: ""; position: absolute; inset: -60% -20%; z-index: -2; background: repeating-conic-gradient(from 0deg at 12% 62%, transparent 0deg 7deg, color-mix(in srgb, var(--sp-on-blue) 11%, transparent) 7deg 14deg); }
.sp-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(120px * var(--sp-dot-scale)); background: var(--sp-deep); opacity: calc(var(--sp-dot-alpha) * 2.6); -webkit-mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; }
.sp-banner__kicker { margin-bottom: 18px; }
.sp-banner__title {
	margin: 0; max-width: 18em;
	font-size: clamp(2rem, 5.6vw, 4.4rem); line-height: .94;
	color: var(--sp-yellow);
	-webkit-text-stroke: .07em var(--sp-ink); paint-order: stroke fill;
	text-shadow: .03em .03em 0 var(--sp-ink), .06em .06em 0 var(--sp-ink);
	overflow-wrap: anywhere;
}
.has-misreg .sp-banner__title { text-shadow: .03em .03em 0 var(--sp-ink), .06em .06em 0 var(--sp-ink), -.045em -.025em 0 var(--sp-mis-a), .11em .04em 0 var(--sp-mis-b); }
.sp-banner__count { margin: 18px 0 0; font: 700 .76rem/1 var(--sp-font-caption); letter-spacing: .14em; text-transform: uppercase; }
.sp-banner .archive-description { margin: 22px 0 0 26px; max-width: 46em; box-shadow: 4px 4px 0 var(--sp-shadow); }
.sp-banner .archive-description p:last-child { margin: 0; }
.sp-banner .search-form { margin-top: 22px; }
.sp-banner--search { background: var(--sp-red); color: var(--sp-on-red); }

.sp-pagination { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 28px); margin: clamp(36px, 5vw, 64px) 0 0; }
.sp-pagination__arrow { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--sp-panel); color: var(--sp-ink); border: var(--sp-line) solid var(--sp-ink); box-shadow: 4px 4px 0 var(--sp-shadow); text-decoration: none; transition: transform .14s var(--sp-ease), box-shadow .14s var(--sp-ease), background-color .14s; }
a.sp-pagination__arrow:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--sp-shadow); background: var(--sp-yellow); color: var(--sp-on-yellow); }
.sp-pagination__arrow.is-disabled { opacity: .32; box-shadow: none; }
.sp-pagination__label { margin: 0; padding: .5em .9em .42em; background: var(--sp-yellow); color: var(--sp-on-yellow); border: var(--sp-line) solid var(--sp-ink); box-shadow: 5px 5px 0 var(--sp-shadow); font: italic 900 clamp(1.1rem, 2.6vw, 1.7rem)/1 var(--sp-font-letter); text-transform: uppercase; transform: rotate(-1deg); white-space: nowrap; }
.sp-pagination__label b { font-weight: 900; color: var(--sp-on-yellow); }
.sp-more-link { text-align: center; margin: 34px 0 0; }

/* ==========================================================================
   7. Single posts and pages
   ========================================================================== */

.entry-header { margin-top: clamp(24px, 3.2vw, 40px); }
.sp-splash {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
	min-height: clamp(340px, 46vw, 580px);
	padding: clamp(18px, 3.4vw, 44px);
	padding-top: 76px;
	background: var(--sp-tone, var(--sp-blue));
	border: var(--sp-line) solid var(--sp-ink);
	box-shadow: 8px 8px 0 var(--sp-shadow);
}
.sp-splash__art { position: absolute; inset: 0; z-index: -3; }
.sp-splash__art img { width: 100%; height: 100%; object-fit: cover; }
/* The foot of the picture sinks into a graded screen so the lettering reads. */
.sp-splash--art::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(to top, color-mix(in srgb, var(--sp-deep) 82%, transparent), color-mix(in srgb, var(--sp-deep) 30%, transparent) 46%, transparent 72%); }
.sp-splash--art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(200px * var(--sp-dot-scale)); background: var(--sp-deep); opacity: calc(.25 + var(--sp-dot-alpha) * 1.6); -webkit-mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; }
.sp-splash--plain::before { content: ""; position: absolute; inset: 0; z-index: -2; color: var(--sp-deep); opacity: calc(.1 + var(--sp-dot-alpha) * .9); background-image: var(--sp-screen); background-size: calc(var(--sp-dot-gap) * 2.4) calc(var(--sp-dot-gap) * 2.4); background-position: 0 0, calc(var(--sp-dot-gap) * 1.2) calc(var(--sp-dot-gap) * 1.2); -webkit-mask: linear-gradient(135deg, transparent 5%, #000 95%); mask: linear-gradient(135deg, transparent 5%, #000 95%); }
.has-rays .sp-splash--plain::after { content: ""; position: absolute; inset: -50% -20%; z-index: -3; background: repeating-conic-gradient(from 0deg at 85% 40%, transparent 0deg 7deg, color-mix(in srgb, var(--sp-on-tone, #fff) 14%, transparent) 7deg 14deg); }
.sp-article--page .sp-splash--plain { min-height: clamp(220px, 26vw, 330px); }

.sp-splash__top { position: absolute; top: clamp(14px, 2vw, 24px); left: clamp(14px, 2vw, 24px); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sp-splash__title {
	margin: 0; max-width: 17em;
	font-size: clamp(2.1rem, 6.2vw, 5.2rem);
	color: var(--sp-yellow);
	text-wrap: balance; overflow-wrap: anywhere;
}
.sp-splash--plain .sp-splash__title { color: var(--sp-panel); }
.sp-splash.sp-tone-yellow .sp-splash__title { color: var(--sp-red); }
.sp-splash--medium .sp-splash__title { font-size: clamp(1.9rem, 4.6vw, 4rem); max-width: 19em; }
.sp-splash--long .sp-splash__title { font-size: clamp(1.55rem, 3.3vw, 2.9rem); max-width: 24em; line-height: .96; }
.sp-splash--xlong .sp-splash__title { font-size: clamp(1.2rem, 2.3vw, 2rem); max-width: 30em; line-height: 1; -webkit-text-stroke-width: .09em; }

.sp-credits { list-style: none; display: flex; flex-wrap: wrap; margin: 22px 0 0; padding: 0; }
.sp-credits__item { display: grid; gap: 5px; margin: 0 calc(var(--sp-line-thin) * -1) calc(var(--sp-line-thin) * -1) 0; padding: 10px 18px 9px; background: var(--sp-panel); border: var(--sp-line-thin) solid var(--sp-ink); font: 700 .8rem/1.2 var(--sp-font-caption); letter-spacing: .06em; text-transform: uppercase; }
.sp-credits__item--by { background: var(--sp-yellow); color: var(--sp-on-yellow); }
.sp-credits__label { font-size: .62rem; letter-spacing: .16em; opacity: .78; }
.sp-credits__value { text-decoration: none; }
a.sp-credits__value { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; }

.sp-article .sp-layout__main > *, .sp-article > .wrap.sp-narrow > * { max-width: var(--sp-narrow); margin-inline: auto; }
.sp-article .sp-layout { margin-top: clamp(30px, 4.4vw, 56px); }
.sp-article > .wrap.sp-narrow { margin-top: clamp(30px, 4.4vw, 56px); }
.sp-article--wide .entry-content { margin-top: clamp(30px, 4.4vw, 56px); }

.sp-lead { font-size: 1.22em; line-height: 1.5; font-style: italic; margin-bottom: 1.6em; padding-left: 1em; border-left: var(--sp-line) solid var(--sp-red); }

/* ---------- The story ---------- */

.entry-content { overflow-wrap: break-word; }
.entry-content > * { margin-top: 0; margin-bottom: 1.35em; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2 { margin: 1.9em 0 .7em; padding-bottom: .32em; background: linear-gradient(var(--sp-ink), var(--sp-ink)) left bottom / 2.6em var(--sp-line) no-repeat; }
.entry-content h3 { margin: 1.7em 0 .55em; }
.entry-content h4, .entry-content h5, .entry-content h6 { margin: 1.6em 0 .5em; }
.entry-content .alignwide { width: min(100vw - 2 * var(--sp-pad), 1080px); max-width: none; margin-inline: calc((min(100vw - 2 * var(--sp-pad), 1080px) - 100%) / -2); }
.entry-content .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.has-sidebar .entry-content .alignwide, .has-sidebar .entry-content .alignfull, .sp-wide .alignwide { width: auto; max-width: 100%; margin-inline: 0; }
.entry-content .alignleft { float: left; margin: .3em 1.6em 1em 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: .3em 0 1em 1.6em; max-width: 50%; }
.entry-content .aligncenter { margin-inline: auto; }
.entry-content::after { content: ""; display: table; clear: both; }
.sp-wide > * { max-width: var(--sp-narrow); margin-inline: auto; }
.sp-wide > .alignwide, .sp-wide > .alignfull, .sp-wide > .wp-block-columns, .sp-wide > .wp-block-group, .sp-wide > .wp-block-cover, .sp-wide > .wp-block-media-text, .sp-wide > .sp-hero, .sp-wide > .sp-strip3 { max-width: none; }
.sp-front { padding-top: clamp(26px, 3.4vw, 44px); }

/* Drop cap: the first letter, in its own little ink panel. */
.has-dropcap .single-post .entry-content > p:first-of-type::first-letter,
.has-dropcap.single-post .entry-content > p:first-of-type::first-letter,
.entry-content > p.has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: .07em .16em 0 0;
	padding: .1em .16em .02em .1em;
	background: var(--sp-yellow); color: var(--sp-on-yellow);
	border: var(--sp-line) solid var(--sp-ink);
	box-shadow: 4px 4px 0 var(--sp-shadow);
	font: italic 900 3.5em/.84 var(--sp-font-letter);
	text-transform: uppercase;
}

/* Lists: burst bullets, numbers in ink boxes. */
.entry-content ul:not([class]), .entry-content ul.wp-block-list, .comment-content ul { list-style: none; padding-left: 1.7em; }
.entry-content ul:not([class]) > li, .entry-content ul.wp-block-list > li, .comment-content ul > li { position: relative; margin-bottom: .5em; }
.entry-content ul:not([class]) > li::before, .entry-content ul.wp-block-list > li::before, .comment-content ul > li::before { content: ""; position: absolute; left: -1.6em; top: .36em; width: .95em; height: .95em; background: var(--sp-red); clip-path: var(--sp-burst-8); }
.entry-content ol:not([class]), .entry-content ol.wp-block-list { list-style: none; counter-reset: sp-ol; padding-left: 2.5em; }
.entry-content ol:not([class]) > li, .entry-content ol.wp-block-list > li { position: relative; counter-increment: sp-ol; margin-bottom: .7em; }
.entry-content ol:not([class]) > li::before, .entry-content ol.wp-block-list > li::before { content: counter(sp-ol); position: absolute; left: -2.5em; top: .12em; min-width: 1.75em; height: 1.75em; padding: 0 .3em; display: grid; place-items: center; background: var(--sp-ink); color: var(--sp-paper); font: italic 900 .82em/1 var(--sp-font-letter); transform: rotate(-3deg); }
.entry-content li > ul, .entry-content li > ol { margin: .5em 0 0; }

/* Quote: a speech bubble with a tail. */
.entry-content blockquote, .wp-block-quote, .comment-content blockquote {
	position: relative;
	margin: 2em 0 3em;
	padding: 1.3em 1.6em 1.2em;
	background: var(--sp-panel);
	border: var(--sp-line) solid var(--sp-ink);
	border-radius: 2.2em;
	box-shadow: var(--sp-drop) var(--sp-drop) 0 var(--sp-shadow);
	font-size: 1.1em; line-height: 1.5; font-style: italic;
}
.entry-content blockquote::before, .entry-content blockquote::after, .wp-block-quote::before, .wp-block-quote::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, 8% 100%); }
.entry-content blockquote::before, .wp-block-quote::before { left: 3.2em; top: calc(100% - 1px); width: 40px; height: 38px; background: var(--sp-ink); }
.entry-content blockquote::after, .wp-block-quote::after { left: calc(3.2em + 5px); top: calc(100% - 5px); width: 27px; height: 28px; background: var(--sp-panel); }
.entry-content blockquote p:last-of-type, .wp-block-quote p:last-of-type { margin-bottom: 0; }
.entry-content blockquote cite, .wp-block-quote cite, .wp-block-pullquote cite { display: block; margin-top: .9em; font: 700 .74rem/1.3 var(--sp-font-caption); letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.entry-content blockquote cite::before, .wp-block-quote cite::before { content: "— "; }
/* …a thought bubble… */
.wp-block-quote.is-style-thought { border-radius: 3em; border-style: solid; }
.wp-block-quote.is-style-thought::before { clip-path: none; border-radius: 50%; width: 26px; height: 26px; left: 3em; top: calc(100% + 8px); background: var(--sp-panel); border: var(--sp-line) solid var(--sp-ink); }
.wp-block-quote.is-style-thought::after { clip-path: none; border-radius: 50%; width: 15px; height: 15px; left: 2em; top: calc(100% + 38px); background: var(--sp-panel); border: var(--sp-line-thin) solid var(--sp-ink); }
/* …and the narration box. */
.wp-block-quote.is-style-narration { border-radius: 0; background: var(--sp-yellow); color: var(--sp-on-yellow); font-style: normal; }
.wp-block-quote.is-style-narration::before, .wp-block-quote.is-style-narration::after { content: none; }

/* Pullquote: a jagged shout bubble. */
.wp-block-pullquote {
	position: relative; isolation: isolate;
	margin: 2.6em 0; padding: clamp(3em, 8vw, 4.6em) clamp(2.4em, 9vw, 5.4em);
	border: 0; text-align: center; color: var(--sp-on-yellow);
	filter: drop-shadow(var(--sp-drop) var(--sp-drop) 0 var(--sp-shadow));
}
.wp-block-pullquote::before, .wp-block-pullquote::after { content: ""; position: absolute; z-index: -1; clip-path: var(--sp-shout); }
.wp-block-pullquote::before { inset: 0; background: var(--sp-ink); }
.wp-block-pullquote::after { inset: 7px; background: var(--sp-yellow); }
.wp-block-pullquote blockquote, .entry-content .wp-block-pullquote blockquote { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 1em; }
.wp-block-pullquote blockquote::before, .wp-block-pullquote blockquote::after { content: none; }
.wp-block-pullquote p { margin: 0; font: italic 900 clamp(1.3rem, 3.4vw, 2rem)/1.02 var(--sp-font-letter); text-transform: uppercase; }
.wp-block-pullquote cite { margin-top: 1em; }

/* Pictures: framed as panels, captioned in a box. */
.entry-content .wp-block-image img, .entry-content .wp-caption img, .wp-block-gallery .wp-block-image img, .entry-content > p > img, .wp-block-media-text__media img, .wp-block-video video, .wp-block-embed iframe {
	border: var(--sp-line) solid var(--sp-ink);
}
.entry-content .wp-block-image, .entry-content .wp-caption { margin-bottom: 2em; max-width: 100%; }
.wp-block-image figcaption, .wp-caption-text, .wp-block-embed figcaption, .wp-block-video figcaption, .wp-block-table figcaption, .wp-element-caption {
	position: relative; z-index: 1;
	display: table; max-width: calc(100% - 28px);
	margin: -1.15em 0 0 14px; padding: .45em .8em .38em;
	background: var(--sp-yellow); color: var(--sp-on-yellow);
	border: var(--sp-line-thin) solid var(--sp-ink);
	box-shadow: 3px 3px 0 var(--sp-shadow);
	font: 700 .72rem/1.35 var(--sp-font-caption); letter-spacing: .06em; text-transform: uppercase; text-align: left;
}
.wp-block-table figcaption { margin-top: .8em; }
.wp-block-image.is-style-panel img, .wp-block-image.is-style-panel-tilt img { box-shadow: 8px 8px 0 var(--sp-shadow); }
.wp-block-image.is-style-panel-tilt { transform: rotate(-1.2deg); }
.wp-block-gallery.has-nested-images { gap: var(--sp-gap); }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { position: absolute; left: 10px; bottom: 10px; margin: 0; background: var(--sp-yellow); color: var(--sp-on-yellow); text-shadow: none; max-height: none; padding: .4em .7em .34em; }
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { content: none; }

/* Code: the computer readout. */
.entry-content pre, .wp-block-code, .wp-block-preformatted, .comment-content pre {
	position: relative;
	margin: 2em 0; padding: 3em 1.3em 1.3em;
	background: #07150d; color: #8dffa6;
	background-image: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255, 255, 255, .035) 3px 4px);
	border: var(--sp-line) solid var(--sp-ink); border-radius: 16px;
	box-shadow: var(--sp-drop) var(--sp-drop) 0 var(--sp-shadow);
	font: 500 .82em/1.6 var(--sp-font-mono);
	overflow-x: auto; white-space: pre; tab-size: 2;
}
.is-dark-paper .entry-content pre, .is-dark-paper .wp-block-code { border-color: #8dffa6; }
.entry-content pre::before, .wp-block-code::before { content: "▮ COMPUTER READOUT"; position: absolute; top: 0; left: 0; right: 0; padding: .7em 1.3em .6em; border-bottom: 2px solid rgba(141, 255, 166, .4); font: 700 .68rem/1 var(--sp-font-caption); letter-spacing: .2em; color: #8dffa6; }
.wp-block-code code { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.wp-block-preformatted::before { content: "▮ TRANSMISSION"; }
code, kbd, tt, samp { font: 500 .84em var(--sp-font-mono); padding: .12em .4em; background: color-mix(in srgb, var(--sp-ink) 9%, transparent); border: 2px solid var(--sp-ink); }
pre code { border: 0; padding: 0; background: none; }
.wp-block-verse { font: italic 400 1.05em/1.8 var(--sp-font-body); background: none; color: inherit; border: 0; border-left: var(--sp-line) solid var(--sp-blue); border-radius: 0; box-shadow: none; padding: .2em 0 .2em 1.2em; white-space: pre-wrap; }
.wp-block-verse::before { content: none; }

/* Tables: ink-ruled. */
.entry-content table, .comment-content table { width: 100%; border-collapse: collapse; border: var(--sp-line) solid var(--sp-ink); background: var(--sp-panel); font-size: .9em; line-height: 1.4; }
.wp-block-table { margin: 2em 0; overflow-x: auto; }
.wp-block-table table { box-shadow: none; }
.entry-content th, .entry-content td, .comment-content th, .comment-content td { padding: .7em .9em; border: 2px solid var(--sp-ink); text-align: left; vertical-align: top; }
.entry-content thead th, .entry-content table > tbody > tr > th { background: var(--sp-yellow); color: var(--sp-on-yellow); font: 700 .74rem/1.2 var(--sp-font-caption); letter-spacing: .1em; text-transform: uppercase; border-bottom-width: var(--sp-line); }
.entry-content tbody tr:nth-child(even) td { background-image: var(--sp-screen); background-size: 8px 8px; background-position: 0 0, 4px 4px; color: var(--sp-ink); background-color: var(--sp-panel); }
.entry-content tbody tr:nth-child(even) td { background-image: radial-gradient(closest-side, color-mix(in srgb, var(--sp-ink) 16%, transparent) 50%, transparent 56%), radial-gradient(closest-side, color-mix(in srgb, var(--sp-ink) 16%, transparent) 50%, transparent 56%); }
.entry-content tfoot td { font-weight: 700; border-top-width: var(--sp-line); }
.wp-block-table.is-style-stripes { border: 0; }

/* Separator: a run of Ben-Day dots; "wide" is a gutter rule. */
.wp-block-separator, .entry-content hr { border: 0; height: 16px; max-width: 220px; margin: 2.6em auto; background: none; color: var(--sp-ink); background-image: radial-gradient(closest-side, currentColor 62%, transparent 68%); background-size: 16px 16px; background-repeat: repeat-x; background-position: center; opacity: 1; }
.wp-block-separator.is-style-wide, .wp-block-separator.is-style-gutter { max-width: none; height: var(--sp-line); background: var(--sp-ink); }
.wp-block-separator.is-style-dots { max-width: none; }
.wp-block-separator.is-style-dots::before { content: none; }
.wp-block-separator.is-style-zigzag { max-width: none; height: 18px; background: var(--sp-ink); clip-path: polygon(0% 100%,0.00% 0%,2.50% 100%,5.00% 0%,7.50% 100%,10.00% 0%,12.50% 100%,15.00% 0%,17.50% 100%,20.00% 0%,22.50% 100%,25.00% 0%,27.50% 100%,30.00% 0%,32.50% 100%,35.00% 0%,37.50% 100%,40.00% 0%,42.50% 100%,45.00% 0%,47.50% 100%,50.00% 0%,52.50% 100%,55.00% 0%,57.50% 100%,60.00% 0%,62.50% 100%,65.00% 0%,67.50% 100%,70.00% 0%,72.50% 100%,75.00% 0%,77.50% 100%,80.00% 0%,82.50% 100%,85.00% 0%,87.50% 100%,90.00% 0%,92.50% 100%,95.00% 0%,97.50% 100%,100.00% 0%,100% 100%); }

/* Buttons, including the burst. */
.wp-block-buttons { gap: 16px; }
.wp-block-button.is-style-burst { filter: drop-shadow(5px 5px 0 var(--sp-shadow)); transition: transform .16s var(--sp-ease); }
.wp-block-button.is-style-burst:hover { transform: rotate(-4deg) scale(1.05); }
.wp-block-button.is-style-burst > .wp-block-button__link { position: relative; isolation: isolate; min-width: 11.5em; min-height: 8.2em; padding: 2.2em 2.6em; border: 0; box-shadow: none; background: none; color: var(--sp-on-red); font: italic 900 1.15rem/1 var(--sp-font-letter); letter-spacing: 0; transform: none; }
.wp-block-button.is-style-burst > .wp-block-button__link::before, .wp-block-button.is-style-burst > .wp-block-button__link::after { content: ""; position: absolute; z-index: -1; clip-path: var(--sp-shout); }
.wp-block-button.is-style-burst > .wp-block-button__link::before { inset: 0; background: var(--sp-ink); }
.wp-block-button.is-style-burst > .wp-block-button__link::after { inset: 6px; background: var(--sp-red); }
.wp-block-button.is-style-burst > .wp-block-button__link:hover { background: none; color: var(--sp-on-red); box-shadow: none; }

/* Paragraph and heading styles. */
p.is-style-caption { display: table; padding: .7em 1em .62em; background: var(--sp-yellow); color: var(--sp-on-yellow); border: var(--sp-line) solid var(--sp-ink); box-shadow: 4px 4px 0 var(--sp-shadow); font: 700 .84rem/1.4 var(--sp-font-caption); letter-spacing: .06em; text-transform: uppercase; }
p.is-style-speech { position: relative; padding: 1em 1.3em; background: var(--sp-panel); border: var(--sp-line) solid var(--sp-ink); border-radius: 1.8em; box-shadow: 4px 4px 0 var(--sp-shadow); font: 700 .9rem/1.4 var(--sp-font-caption); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 2.6em; }
p.is-style-speech::before, p.is-style-speech::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, 8% 100%); }
p.is-style-speech::before { left: 2.4em; top: calc(100% - 1px); width: 32px; height: 30px; background: var(--sp-ink); }
p.is-style-speech::after { left: calc(2.4em + 5px); top: calc(100% - 5px); width: 20px; height: 21px; background: var(--sp-panel); }
.is-style-lettering { font-family: var(--sp-font-letter); font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--sp-red); -webkit-text-stroke: .07em var(--sp-ink); paint-order: stroke fill; text-shadow: .03em .03em 0 var(--sp-ink), .06em .06em 0 var(--sp-ink); line-height: .95; padding-bottom: .12em; background: none !important; }
.has-misreg .is-style-lettering { text-shadow: .03em .03em 0 var(--sp-ink), .06em .06em 0 var(--sp-ink), -.045em -.025em 0 var(--sp-mis-a), .11em .04em 0 var(--sp-mis-b); }
.is-style-caption-heading { display: table; padding: .4em .75em .32em; background: var(--sp-yellow) !important; color: var(--sp-on-yellow); border: var(--sp-line) solid var(--sp-ink); box-shadow: 5px 5px 0 var(--sp-shadow); transform: rotate(-1.2deg); }

/* Groups, columns, cover, media & text. */
.wp-block-group.is-style-panel { padding: clamp(18px, 3vw, 34px); background: var(--sp-panel); border: var(--sp-line) solid var(--sp-ink); box-shadow: var(--sp-drop) var(--sp-drop) 0 var(--sp-shadow); }
.wp-block-group.is-style-halftone { position: relative; isolation: isolate; overflow: hidden; padding: clamp(20px, 3.4vw, 40px); background: var(--sp-yellow); color: var(--sp-on-yellow); border: var(--sp-line) solid var(--sp-ink); box-shadow: var(--sp-drop) var(--sp-drop) 0 var(--sp-shadow); }
.wp-block-group.is-style-halftone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(140px * var(--sp-dot-scale)); background: var(--sp-red); opacity: calc(var(--sp-dot-alpha) * 3); -webkit-mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; }
.wp-block-group.is-style-halftone :is(h1, h2, h3, h4) { color: inherit; }
.wp-block-columns { gap: var(--sp-gap) clamp(18px, 3vw, 36px); margin-bottom: 2em; }
.wp-block-cover { border: var(--sp-line) solid var(--sp-ink); box-shadow: 8px 8px 0 var(--sp-shadow); min-height: 380px; padding: clamp(20px, 4vw, 48px); }
.wp-block-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; color: #000; opacity: calc(var(--sp-dot-alpha) * .9); background-image: var(--sp-screen); background-size: var(--sp-dot-gap) var(--sp-dot-gap); background-position: 0 0, calc(var(--sp-dot-gap) / 2) calc(var(--sp-dot-gap) / 2); mix-blend-mode: multiply; }
.wp-block-cover .wp-block-cover__inner-container { z-index: 2; }
.wp-block-cover :is(h1, h2, h3) { color: inherit; }
.wp-block-media-text { gap: 0; border: var(--sp-line) solid var(--sp-ink); background: var(--sp-panel); box-shadow: var(--sp-drop) var(--sp-drop) 0 var(--sp-shadow); }
.wp-block-media-text .wp-block-media-text__media img { border: 0; }
.wp-block-media-text > .wp-block-media-text__content { padding: clamp(18px, 3vw, 36px); }
.wp-block-details { border: var(--sp-line) solid var(--sp-ink); background: var(--sp-panel); padding: 0; box-shadow: 4px 4px 0 var(--sp-shadow); }
.wp-block-details summary { padding: .85em 1.1em; font: 700 .84rem/1.3 var(--sp-font-caption); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; background: var(--sp-yellow); color: var(--sp-on-yellow); }
.wp-block-details[open] summary { border-bottom: var(--sp-line-thin) solid var(--sp-ink); }
.wp-block-details > :not(summary) { padding: 0 1.1em; margin: 1em 0; }
.wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; border: var(--sp-line-thin) dashed var(--sp-ink); }
.wp-block-search__inside-wrapper { gap: 0; }
.wp-block-search__input { border-right: 0 !important; }
.wp-block-search__label { display: block; margin-bottom: 8px; }
.wp-block-latest-posts, .wp-block-categories, .wp-block-archives, .wp-block-page-list { padding-left: 0; list-style: none; }
.wp-block-latest-posts > li, .wp-block-categories > li, .wp-block-archives > li { padding: .5em 0; border-bottom: 2px dotted var(--sp-ink); }
.wp-block-tag-cloud a, .tagcloud a { display: inline-block; margin: 0 6px 10px 0; padding: .38em .7em .3em; border: var(--sp-line-thin) solid var(--sp-red-text); color: var(--sp-red-text); font: 700 .74rem/1.1 var(--sp-font-caption) !important; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transform: rotate(-1.5deg); border-radius: 3px; }
.wp-block-tag-cloud a:nth-child(even), .tagcloud a:nth-child(even) { transform: rotate(1.5deg); }
.wp-block-tag-cloud a:hover, .tagcloud a:hover { background: var(--sp-red); color: var(--sp-on-red); border-color: var(--sp-ink); }

.page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2.4em 0 0; font: 700 .8rem/1 var(--sp-font-caption); letter-spacing: .1em; text-transform: uppercase; }
.page-links__label { margin-right: 6px; }
.page-links > a, .page-links > .current, .page-links > span:not(.page-links__label) { display: grid; place-items: center; min-width: 46px; height: 46px; border: var(--sp-line-thin) solid var(--sp-ink); border-radius: 50%; background: var(--sp-panel); text-decoration: none; }
.page-links > .current, .page-links > span.post-page-numbers { background: var(--sp-ink); color: var(--sp-paper); }

.entry-footer { margin-top: clamp(34px, 5vw, 56px) !important; }
.sp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 22px; border-top: var(--sp-line) solid var(--sp-ink); }
.sp-tags__label { font: 700 .72rem/1 var(--sp-font-caption); letter-spacing: .16em; text-transform: uppercase; }
.sp-tags ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; }
.sp-edit { margin-top: 18px; font: 700 .74rem/1 var(--sp-font-caption); letter-spacing: .1em; text-transform: uppercase; }

/* ABOUT THE CREATOR */
.sp-creator { position: relative; margin-top: clamp(40px, 6vw, 64px) !important; padding: clamp(26px, 4vw, 36px) clamp(18px, 3vw, 30px) clamp(20px, 3vw, 28px); background: var(--sp-panel); border: var(--sp-line) solid var(--sp-ink); box-shadow: var(--sp-drop) var(--sp-drop) 0 var(--sp-shadow); }
.sp-creator__head { position: absolute; top: -16px; left: 18px; transform: rotate(-1.5deg); }
.sp-creator__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 26px); align-items: start; }
.sp-creator__name { margin: 0 0 .3em; font: italic 900 1.5rem/1 var(--sp-font-letter); text-transform: uppercase; }
.sp-creator__bio { margin: 0 0 .8em; font-size: .92em; line-height: 1.6; }
.sp-creator__more { font: 700 .74rem/1 var(--sp-font-caption); letter-spacing: .1em; text-transform: uppercase; text-decoration-color: var(--sp-red); }
@media (max-width: 520px) { .sp-creator__inner { grid-template-columns: minmax(0, 1fr); } }

.sp-avatar { --sp-avatar: 64px; display: grid; place-items: center; flex: none; width: var(--sp-avatar); height: var(--sp-avatar); border-radius: 50%; overflow: hidden; background: var(--sp-tone, var(--sp-yellow)); color: var(--sp-on-tone, var(--sp-on-yellow)); border: var(--sp-line) solid var(--sp-ink); box-shadow: 3px 3px 0 var(--sp-shadow); position: relative; isolation: isolate; }
.sp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-avatar--drawn::before { content: ""; position: absolute; inset: 0; z-index: -1; color: var(--sp-deep); opacity: calc(.1 + var(--sp-dot-alpha)); background-image: var(--sp-screen); background-size: 8px 8px; background-position: 0 0, 4px 4px; -webkit-mask: linear-gradient(160deg, transparent 30%, #000); mask: linear-gradient(160deg, transparent 30%, #000); }
.sp-avatar--drawn span { font: italic 900 calc(var(--sp-avatar) * .56)/1 var(--sp-font-letter); -webkit-text-stroke: .05em var(--sp-ink); paint-order: stroke fill; text-shadow: .05em .05em 0 var(--sp-ink); padding-right: .08em; }

/* TO BE CONTINUED… */
.sp-after { display: grid; gap: clamp(34px, 5vw, 60px); margin-top: clamp(44px, 6vw, 80px); }
.sp-after > * { min-width: 0; }
.sp-after .sp-section-head { margin-top: 0; }
.sp-continued { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-gap); }
.sp-continued--single { grid-template-columns: minmax(0, 1fr); }
.sp-next { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px; min-height: clamp(220px, 24vw, 300px); padding: 18px; color: var(--sp-panel); background: var(--sp-tone, var(--sp-deep)); border: var(--sp-line) solid var(--sp-ink); text-decoration: none; transition: transform .18s var(--sp-ease), box-shadow .18s var(--sp-ease); }
.sp-next:hover { transform: translate(-4px, -4px); box-shadow: 9px 9px 0 var(--sp-shadow); background: var(--sp-tone, var(--sp-deep)); color: var(--sp-panel); }
.sp-next__art { position: absolute; inset: 0; z-index: -2; }
.sp-next__art img { width: 100%; height: 100%; object-fit: cover; }
.sp-next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--sp-deep) 88%, transparent), color-mix(in srgb, var(--sp-deep) 20%, transparent) 70%); }
.sp-next--plain::before { background: none; }
.sp-next__label { position: absolute; top: 16px; left: 16px; font-size: .8rem; }
.sp-next--next .sp-next__label { font: italic 900 clamp(1.05rem, 2vw, 1.5rem)/1 var(--sp-font-letter); letter-spacing: 0; padding: .4em .7em .3em; transform: rotate(-1.5deg); }
.sp-next__title { font: italic 900 clamp(1.2rem, 2.3vw, 1.9rem)/1 var(--sp-font-letter); text-transform: uppercase; max-width: 22em; text-wrap: balance; color: var(--sp-yellow); -webkit-text-stroke: .06em var(--sp-ink); paint-order: stroke fill; text-shadow: .05em .05em 0 var(--sp-ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; padding: 0 .12em .1em 0; }
.sp-next--plain .sp-next__title { color: var(--sp-panel); }
.sp-next--plain.sp-tone-yellow .sp-next__title { color: var(--sp-red); }
@media (max-width: 760px) { .sp-continued { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   8. Newsletter: SUBSCRIBE!
   ========================================================================== */

.sp-news {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(18px, 4vw, 52px);
	margin: clamp(30px, 4.4vw, 54px) 0;
	padding: clamp(22px, 3.6vw, 44px) clamp(20px, 4vw, 56px);
	background: var(--sp-blue); color: var(--sp-on-blue);
	border: var(--sp-line) solid var(--sp-ink);
	box-shadow: 8px 8px 0 var(--sp-shadow);
}
.sp-after .sp-news { margin: 0; }
.has-rays .sp-news::before { content: ""; position: absolute; inset: -80% -20%; z-index: -2; background: repeating-conic-gradient(from 0deg at 14% 50%, transparent 0deg 6deg, color-mix(in srgb, var(--sp-on-blue) 12%, transparent) 6deg 12deg); }
.sp-news::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(110px * var(--sp-dot-scale)); background: var(--sp-deep); opacity: calc(var(--sp-dot-alpha) * 2.4); -webkit-mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; }
.sp-news__burst { transform: rotate(-8deg); }
.sp-news__burst .sp-burst { --sp-burst-size: clamp(150px, 18vw, 230px); }
.sp-news__burst .sp-burst::after { background: var(--sp-yellow); }
.sp-news__burst .sp-burst__text { color: var(--sp-red-on-yellow, var(--sp-on-yellow)); }
.sp-news__title { margin: 0 0 .35em; font-size: clamp(1.7rem, 3.6vw, 2.9rem); color: var(--sp-on-blue); }
.sp-news__copy { margin: 0 0 1.2em; max-width: 38em; font-size: 1.02rem; line-height: 1.55; }
.sp-news__form { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; max-width: 620px; }
.sp-news__form input[type="email"] { flex: 1 1 240px; border-width: var(--sp-line); min-height: 52px; }
.sp-news__form .sp-button { min-height: 52px; }
.sp-news__small { margin: 14px 0 0; font: 700 .68rem/1.4 var(--sp-font-caption); letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.sp-news--page { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-block: clamp(34px, 6vw, 72px); }
.sp-news--page .sp-news__form { margin-inline: auto; justify-content: center; }
.sp-news--page .sp-news__copy { margin-inline: auto; }
@media (max-width: 720px) {
	.sp-news { grid-template-columns: minmax(0, 1fr); }
	.sp-news__burst { position: absolute; top: -18px; right: -14px; z-index: -1; opacity: .96; }
	.sp-news__burst .sp-burst { --sp-burst-size: 124px; }
	.sp-news--strip .sp-news__title, .sp-news--post .sp-news__title { padding-right: 96px; }
	.sp-news--page .sp-news__burst { position: static; }
}

/* ==========================================================================
   9. Comments: LETTERS TO THE EDITOR
   ========================================================================== */

.sp-letters { margin-top: clamp(50px, 7vw, 90px); }
.sp-letters__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: clamp(26px, 4vw, 40px); padding-bottom: 18px; border-bottom: var(--sp-line) solid var(--sp-ink); }
.sp-letters__title { margin: 0; font-size: clamp(1.8rem, 4.6vw, 3rem); color: var(--sp-red); -webkit-text-stroke: .06em var(--sp-ink); paint-order: stroke fill; text-shadow: .045em .045em 0 var(--sp-ink); padding: 0 .1em .08em 0; }
.has-misreg .sp-letters__title { text-shadow: .045em .045em 0 var(--sp-ink), -.04em -.02em 0 var(--sp-mis-a), .09em .03em 0 var(--sp-mis-b); }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.sp-letter { margin: 0 0 30px; }
.sp-letter__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.sp-letter__avatar { padding-top: 6px; }
.sp-letter__bubble { position: relative; padding: 1em 1.25em .9em; background: var(--sp-panel); border: var(--sp-line) solid var(--sp-ink); border-radius: 1.6em; box-shadow: 5px 5px 0 var(--sp-shadow); min-width: 0; }
.sp-letter__bubble::before, .sp-letter__bubble::after { content: ""; position: absolute; clip-path: polygon(100% 0, 100% 100%, 0 30%); }
.sp-letter__bubble::before { right: calc(100% - 1px); top: 22px; width: 22px; height: 24px; background: var(--sp-ink); }
.sp-letter__bubble::after { right: calc(100% - 5px); top: 26px; width: 15px; height: 15px; background: var(--sp-panel); }
/* Letters alternate sides, like a conversation across the gutter. */
.comment-list > .sp-letter:nth-child(even) > .sp-letter__body { grid-template-columns: minmax(0, 1fr) auto; }
.comment-list > .sp-letter:nth-child(even) > .sp-letter__body > .sp-letter__avatar { order: 2; }
.comment-list > .sp-letter:nth-child(even) > .sp-letter__body > .sp-letter__bubble::before { right: auto; left: calc(100% - 1px); clip-path: polygon(0 0, 0 100%, 100% 30%); }
.comment-list > .sp-letter:nth-child(even) > .sp-letter__body > .sp-letter__bubble::after { right: auto; left: calc(100% - 5px); clip-path: polygon(0 0, 0 100%, 100% 30%); }
/* Replies are thought bubbles: a cloud, and a trail of little circles. */
.comment-list .children { margin: 26px 0 0 clamp(18px, 7vw, 86px); }
.sp-letter--reply > .sp-letter__body > .sp-letter__bubble { border-radius: 2.4em; background: var(--sp-paper); border-style: solid; }
.sp-letter--reply > .sp-letter__body > .sp-letter__bubble::before { clip-path: none; border-radius: 50%; width: 18px; height: 18px; right: calc(100% + 1px); top: 26px; background: var(--sp-paper); border: var(--sp-line-thin) solid var(--sp-ink); }
.sp-letter--reply > .sp-letter__body > .sp-letter__bubble::after { clip-path: none; border-radius: 50%; width: 10px; height: 10px; right: calc(100% + 17px); top: 42px; background: var(--sp-paper); border: 2px solid var(--sp-ink); }
.sp-letter__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: .55em; font: 700 .74rem/1.2 var(--sp-font-caption); letter-spacing: .08em; text-transform: uppercase; }
.sp-letter__meta .fn { font: italic 900 1.05rem/1 var(--sp-font-letter); letter-spacing: 0; }
.sp-letter__meta .fn a { text-decoration: none; }
.sp-letter__date { color: var(--sp-muted); text-decoration: none; font-size: .66rem; letter-spacing: .12em; margin-left: auto; }
.sp-letter__text { font-size: .95em; line-height: 1.62; }
.sp-letter__text p { margin-bottom: .8em; }
.sp-letter__text p:last-child { margin-bottom: 0; }
.sp-letter__moderation { margin: 0 0 .8em; font: 700 .72rem/1.3 var(--sp-font-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--sp-red-text); }
.sp-letter__actions { display: flex; gap: 16px; margin-top: .8em; font: 700 .7rem/1 var(--sp-font-caption); letter-spacing: .12em; text-transform: uppercase; }
.sp-letter__actions a { display: inline-flex; align-items: center; gap: .35em; min-height: 32px; text-decoration-color: var(--sp-red); }
.sp-letter--ping .sp-letter__body { grid-template-columns: minmax(0, 1fr); }
.sp-letter--ping .sp-letter__bubble { border-radius: 0; border-style: dashed; box-shadow: none; }
.sp-letter--ping .sp-letter__bubble::before, .sp-letter--ping .sp-letter__bubble::after { content: none; }
.comment-navigation { margin: 0 0 30px; font: 700 .78rem/1 var(--sp-font-caption); letter-spacing: .1em; text-transform: uppercase; }
.comment-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; }
.no-comments { margin-top: 10px; }
@media (max-width: 560px) {
	.sp-letter__body { gap: 14px; }
	.sp-avatar { --sp-avatar: 48px !important; border-width: var(--sp-line-thin); }
	.sp-letter__bubble::before { top: 14px; }
	.sp-letter__bubble::after { top: 18px; }
	.sp-letter--reply > .sp-letter__body > .sp-letter__bubble::before { top: 16px; width: 14px; height: 14px; }
	.sp-letter--reply > .sp-letter__body > .sp-letter__bubble::after { display: none; }
	.sp-letter__date { margin-left: 0; }
}

/* The form: a coupon to clip and post. */
.comment-respond { position: relative; margin-top: clamp(40px, 6vw, 64px); padding: clamp(30px, 4vw, 44px) clamp(18px, 3.6vw, 40px) clamp(22px, 3.6vw, 36px); background: var(--sp-panel); border: var(--sp-line) dashed var(--sp-ink); }
.comment-respond::before { content: "✂"; position: absolute; top: -17px; right: 28px; font-size: 26px; line-height: 1; background: var(--sp-paper); padding: 0 8px; transform: rotate(180deg); }
.comment-list .comment-respond { margin: 22px 0 8px; }
.comment-reply-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; margin: 0 0 .5em; font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--sp-red); -webkit-text-stroke: .06em var(--sp-ink); paint-order: stroke fill; text-shadow: .045em .045em 0 var(--sp-ink); padding-bottom: .08em; }
.comment-reply-title small { font: 700 .72rem/1 var(--sp-font-caption); letter-spacing: .1em; -webkit-text-stroke: 0; text-shadow: none; color: var(--sp-ink); }
.comment-notes, .logged-in-as { margin-bottom: 1.4em; font-size: .86em; color: var(--sp-muted); }
.comment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.comment-form > * { grid-column: 1 / -1; margin: 0; }
.comment-form-author, .comment-form-email { grid-column: auto; }
.comment-form label { display: block; margin-bottom: 7px; }
.comment-form .required { color: var(--sp-red-text); }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 4px; }
.comment-form-cookies-consent label { margin: 2px 0 0; text-transform: none; letter-spacing: 0; font: 400 .84rem/1.45 var(--sp-font-body); }
.comment-form-cookies-consent input { flex: none; }
.form-submit { margin-top: 4px; }
@media (max-width: 600px) { .comment-form-author, .comment-form-email { grid-column: 1 / -1; } }

/* The sealed page. */
.sp-secret { position: relative; padding: clamp(26px, 5vw, 46px) clamp(18px, 4vw, 40px); background: var(--sp-panel); border: var(--sp-line) solid var(--sp-ink); box-shadow: var(--sp-drop) var(--sp-drop) 0 var(--sp-shadow); text-align: center; background-image: repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--sp-yellow) 55%, transparent) 22px 44px); }
.sp-secret__stamp { display: inline-block; margin: 0 0 18px; padding: .22em .55em .14em; border: 6px solid var(--sp-red-text); color: var(--sp-red-text); background: var(--sp-panel); font: italic 900 clamp(2rem, 7vw, 3.4rem)/1 var(--sp-font-letter); text-transform: uppercase; transform: rotate(-5deg); box-shadow: inset 0 0 0 2px var(--sp-panel), inset 0 0 0 5px var(--sp-red-text); }
.sp-secret__lead { max-width: 30em; margin: 0 auto 20px; padding: .5em .8em; background: var(--sp-panel); border: var(--sp-line-thin) solid var(--sp-ink); font-size: .95em; }
.sp-secret__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0; }
.sp-secret__row label { flex-basis: 100%; }
.sp-secret__row input { flex: 0 1 260px; }

/* ==========================================================================
   10. Widgets and the sidebar
   ========================================================================== */

.widget { margin: 0 0 34px; font-size: .9rem; line-height: 1.55; }
.widget ul, .widget ol { list-style: none; margin: 0; padding: 0; }
.widget li { padding: .5em 0; border-bottom: 2px dotted currentColor; }
.widget li:last-child { border-bottom: 0; }
.widget li li { padding-left: 1em; border: 0; }
.widget a { text-decoration-thickness: 2px; }
.widget select { margin-top: 6px; }
.sp-sidebar .widget { position: relative; padding: 30px 18px 18px; background: var(--sp-panel); border: var(--sp-line) solid var(--sp-ink); box-shadow: 5px 5px 0 var(--sp-shadow); }
.sp-sidebar .widget-title, .sp-sidebar .widget > .wp-block-heading, .sp-sidebar .widget .wp-block-group > .wp-block-heading:first-child { position: absolute; top: -15px; left: 14px; margin: 0; padding: .42em .75em .34em; background: var(--sp-yellow); color: var(--sp-on-yellow); border: var(--sp-line-thin) solid var(--sp-ink); box-shadow: 3px 3px 0 var(--sp-shadow); font: italic 900 .95rem/1 var(--sp-font-letter); transform: rotate(-1.5deg); }
.wp-calendar-table { width: 100%; border-collapse: collapse; text-align: center; font: 700 .78rem/1 var(--sp-font-caption); }
.wp-calendar-table caption { padding-bottom: 10px; font: 700 .78rem/1 var(--sp-font-caption); letter-spacing: .12em; text-transform: uppercase; }
.wp-calendar-table th, .wp-calendar-table td { padding: 8px 2px; border: 2px solid currentColor; }
.wp-calendar-nav { display: flex; justify-content: space-between; margin-top: 8px; font: 700 .74rem/1 var(--sp-font-caption); text-transform: uppercase; letter-spacing: .1em; }

/* ==========================================================================
   11. Footer: a halftone fade into solid ink, then the back-page classifieds
   ========================================================================== */

.site-footer { margin-top: clamp(20px, 4vw, 50px); }
.sp-fade { height: calc(170px * var(--sp-dot-scale)); background: var(--sp-deep); -webkit-mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; margin-bottom: -1px; }
.site-footer__ink { background: var(--sp-deep); color: var(--sp-on-deep); padding: clamp(26px, 4vw, 50px) 0 clamp(30px, 4vw, 46px); }

.sp-backpage__head { display: flex; align-items: center; gap: 18px; margin: 0 0 clamp(20px, 3vw, 32px); font: 700 .74rem/1 var(--sp-font-caption); letter-spacing: .3em; text-transform: uppercase; color: var(--sp-yellow); }
.sp-backpage__head::before, .sp-backpage__head::after { content: ""; flex: 1; height: 0; border-top: 3px double var(--sp-on-deep); opacity: .7; }
.sp-ads { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: stretch; }
.sp-ads .widget, .sp-ad {
	position: relative; margin: 0;
	padding: 16px 16px 15px;
	background: var(--sp-on-deep); color: var(--sp-deep);
	border: 3px double var(--sp-deep);
	outline: 3px solid var(--sp-on-deep);
	font: 400 .84rem/1.5 var(--sp-font-body);
}
.sp-ads .widget:nth-child(4n + 2), .sp-ad:nth-child(4n + 2) { background: var(--sp-yellow); outline-color: var(--sp-yellow); color: var(--sp-on-yellow); border-color: var(--sp-on-yellow); }
.sp-ads .widget:nth-child(4n + 3), .sp-ad:nth-child(4n + 3) { border-style: dashed; border-width: 2px; }
.sp-ads .widget-title, .sp-ads .wp-block-heading { margin: 0 0 .55em; padding-bottom: .35em; border-bottom: 3px solid currentColor; font: italic 900 1.25rem/1 var(--sp-font-letter); text-transform: uppercase; color: inherit; letter-spacing: 0; }
.sp-ads .widget:nth-child(4n + 1) .widget-title, .sp-ads .widget:nth-child(4n + 1) .wp-block-heading { margin: -16px -16px .7em; padding: .6em 16px .5em; background: var(--sp-deep); color: var(--sp-on-deep); border: 0; }
.sp-ads .widget a { color: inherit; text-decoration-color: currentColor; }
.sp-ads .widget a:hover { background: var(--sp-red); color: var(--sp-on-red); }
.sp-ads p { margin: 0 0 .7em; }
.sp-ads p:last-child { margin-bottom: 0; }
.sp-ads li { padding: .42em 0; border-bottom-width: 1.5px; }
.sp-ad__count { float: right; font: 700 .7rem/1.8 var(--sp-font-caption); letter-spacing: .08em; }
.sp-ads .search-form .search-field, .sp-ads input[type="search"], .sp-ads input[type="email"], .sp-ads input[type="text"] { background: #fff; color: #111; border-color: var(--sp-deep); box-shadow: none; min-height: 44px; font-size: .9rem; }
.sp-ads .search-form .search-submit span { display: none; }
.sp-ads .search-form .search-submit { background: var(--sp-deep); color: var(--sp-on-deep); border-color: var(--sp-deep); min-height: 44px; padding-inline: 14px; }
.sp-ads .tagcloud a, .sp-ads .wp-block-tag-cloud a { color: inherit; border-color: currentColor; }

.site-footer__base { display: grid; justify-items: center; gap: 14px; margin-top: clamp(30px, 4.4vw, 54px); padding-top: clamp(24px, 3vw, 36px); border-top: 3px double color-mix(in srgb, var(--sp-on-deep) 60%, transparent); text-align: center; }
.sp-lettering--small { margin: 0 0 6px; font-size: clamp(2rem, 5vw, 3.2rem); color: var(--sp-yellow); -webkit-text-stroke: 0; text-shadow: .05em .05em 0 var(--sp-red); transform: rotate(-2deg); }
.has-misreg .sp-lettering--small { text-shadow: .05em .05em 0 var(--sp-red), -.04em -.02em 0 var(--sp-mis-a); }
.sp-social--footer a { border: 2px solid color-mix(in srgb, var(--sp-on-deep) 55%, transparent); }
.footer-navigation ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin: 0; padding: 0; font: 700 .76rem/1 var(--sp-font-caption); letter-spacing: .12em; text-transform: uppercase; }
.footer-navigation a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer a { text-decoration-color: var(--sp-yellow); }
.site-footer__base a:hover { background: var(--sp-yellow); color: var(--sp-on-yellow); }
.site-copyright, .theme-credit { margin: 0; font-size: .82rem; line-height: 1.5; }
.theme-credit { font: 700 .72rem/1.4 var(--sp-font-caption); letter-spacing: .12em; text-transform: uppercase; }
.sp-to-top { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 10px; padding: 10px 18px; border: 3px solid var(--sp-on-deep); font: 700 .74rem/1 var(--sp-font-caption); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }

.site-footer--canvas { margin-top: 0; padding: 30px 0 40px; text-align: center; border-top: var(--sp-line) solid var(--sp-ink); }
.site-footer--canvas .wrap { display: grid; justify-items: center; gap: 10px; }

/* ==========================================================================
   12. 404, empty states, the back-issues index
   ========================================================================== */

.sp-404 { padding-bottom: 0; }
.sp-404__stage { position: relative; isolation: isolate; overflow: hidden; margin-top: 30px; padding: clamp(30px, 6vw, 80px) 0 clamp(50px, 8vw, 100px); background: var(--sp-red); color: var(--sp-on-red); border-block: var(--sp-line) solid var(--sp-ink); text-align: center; }
.sp-404__rays { position: absolute; inset: -60% -30%; z-index: -2; background: repeating-conic-gradient(from 0deg at 50% 42%, transparent 0deg 5deg, color-mix(in srgb, var(--sp-deep) 22%, transparent) 5deg 10deg); }
.sp-404__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(200px * var(--sp-dot-scale)); background: var(--sp-deep); opacity: calc(.2 + var(--sp-dot-alpha) * 1.6); -webkit-mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; }
.sp-404__inner { display: grid; justify-items: center; gap: 18px; }
.sp-404__burst { margin: 0; transform: rotate(-5deg); }
.sp-burst--giant { --sp-burst-size: clamp(280px, 56vw, 560px); filter: drop-shadow(10px 10px 0 var(--sp-shadow)); }
.sp-burst--giant::after { inset: 9px; background: var(--sp-yellow); }
.sp-burst--giant .sp-burst__text { max-width: 84%; font-size: min(calc(var(--sp-burst-size) * .27), calc(var(--sp-burst-size) * 1.25 / var(--sp-chars, 5))); color: var(--sp-red); -webkit-text-stroke: .07em var(--sp-ink); paint-order: stroke fill; text-shadow: .03em .03em 0 var(--sp-ink), .06em .06em 0 var(--sp-ink); padding: 0 .1em .1em 0; }
.has-misreg .sp-burst--giant .sp-burst__text { text-shadow: .03em .03em 0 var(--sp-ink), .06em .06em 0 var(--sp-ink), -.045em -.025em 0 var(--sp-mis-a), .11em .04em 0 var(--sp-mis-b); }
.sp-404__code { margin-top: -30px; position: relative; font-size: .9rem; transform: rotate(2deg); }
.sp-404__title { margin: 6px 0 0; font-size: clamp(2.2rem, 7vw, 5rem); color: var(--sp-panel); -webkit-text-stroke: .07em var(--sp-ink); paint-order: stroke fill; text-shadow: .03em .03em 0 var(--sp-ink), .06em .06em 0 var(--sp-ink); padding: 0 .1em .1em 0; }
.sp-404__text { max-width: 34em; margin: 4px 0 26px; font-size: .86rem; text-align: left; box-shadow: 5px 5px 0 var(--sp-shadow); }
.sp-404 .search-form { width: min(100%, 520px); }
.sp-404 .search-form .search-field { border-width: var(--sp-line); border-right: 0; }
.sp-404 .search-form .search-submit { border-width: var(--sp-line); }
.sp-404__actions { margin: 10px 0 0; }
.sp-404__recent { padding-bottom: clamp(48px, 7vw, 96px); }

.sp-empty { display: grid; justify-items: center; gap: 14px; max-width: 640px; margin: clamp(30px, 5vw, 60px) auto 0; padding: clamp(24px, 4vw, 44px); text-align: center; background: var(--sp-panel); border: var(--sp-line) solid var(--sp-ink); box-shadow: 8px 8px 0 var(--sp-shadow); }
.sp-empty__burst .sp-burst { --sp-burst-size: 170px; }
.sp-empty__burst .sp-burst::after { background: var(--sp-yellow); }
.sp-empty__burst .sp-burst__text { color: var(--sp-on-yellow); }
.sp-empty__title { margin: 0; font-size: clamp(1.8rem, 4.4vw, 2.8rem); }
.sp-empty p { margin: 0; }
.sp-empty .search-form { width: 100%; }

.sp-issues__list { list-style: none; margin: 0 0 10px; padding: 0; border-top: var(--sp-line) solid var(--sp-ink); }
.sp-issues__item { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; padding: 14px 4px; border-bottom: 2px dotted var(--sp-ink); }
.sp-issues__no { font: italic 900 1.5rem/1 var(--sp-font-letter); color: var(--sp-red-text); }
.sp-issues__title { font: 700 1.04rem/1.3 var(--sp-font-body); text-decoration-thickness: 2px; }
.sp-issues__meta { font: 700 .68rem/1.3 var(--sp-font-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); white-space: nowrap; }
.sp-issues__sections { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.sp-issues__sections .sp-ad__count { float: none; margin-left: .4em; padding: .1em .5em; background: var(--sp-ink); color: var(--sp-paper); }
@media (max-width: 600px) { .sp-issues__item { grid-template-columns: 3.4em minmax(0, 1fr); } .sp-issues__meta { grid-column: 2; } }

/* ==========================================================================
   13. Block patterns
   ========================================================================== */

/* Comic hero */
.sp-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px, 5vw, 70px) clamp(20px, 5vw, 70px) clamp(34px, 6vw, 84px) !important; background: var(--sp-blue); color: var(--sp-on-blue); border: var(--sp-line) solid var(--sp-ink); box-shadow: 8px 8px 0 var(--sp-shadow); }
.has-rays .sp-hero::before { content: ""; position: absolute; inset: -60% -20%; z-index: -2; background: repeating-conic-gradient(from 0deg at 78% 46%, transparent 0deg 6deg, color-mix(in srgb, var(--sp-on-blue) 12%, transparent) 6deg 12deg); }
.sp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(180px * var(--sp-dot-scale)); background: var(--sp-deep); opacity: calc(var(--sp-dot-alpha) * 2.6); -webkit-mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; mask: url("/free-themes/preview/splashpage/theme/assets/images/halftone-fade.svg") repeat-x bottom / auto 100%; }
.sp-hero .is-style-lettering { font-size: clamp(2.6rem, 8vw, 6.4rem); color: var(--sp-yellow); margin: .2em 0 .25em; }
.sp-hero .wp-block-columns { align-items: center; margin-bottom: 0; }
.sp-hero p:not([class]) { font-size: 1.08em; max-width: 30em; }
.sp-hero .wp-block-image img { box-shadow: 8px 8px 0 var(--sp-shadow); }
.sp-hero .wp-block-image { transform: rotate(1.6deg); margin-bottom: 0; }

/* Three-panel strip */
.sp-strip3 { gap: var(--sp-gap) !important; }
.sp-strip3 .wp-block-column { position: relative; padding: 0; background: var(--sp-panel); border: var(--sp-line) solid var(--sp-ink); transition: transform .18s var(--sp-ease), box-shadow .18s var(--sp-ease); }
.sp-strip3 .wp-block-column:hover { transform: translate(-4px, -4px); box-shadow: 9px 9px 0 var(--sp-shadow); }
.has-tilt .sp-strip3 .wp-block-column:nth-child(1) { rotate: -.6deg; }
.has-tilt .sp-strip3 .wp-block-column:nth-child(3) { rotate: .6deg; }
.sp-strip3 .wp-block-image { margin: 0; }
.sp-strip3 .wp-block-image img { border: 0; border-bottom: var(--sp-line) solid var(--sp-ink); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sp-strip3 .is-style-caption { position: absolute; top: 12px; left: 12px; margin: 0; font-size: .72rem; border-width: var(--sp-line-thin); padding: .42em .75em .36em; }
.sp-strip3 h3 { margin: 16px 16px 8px; font-size: 1.3rem; }
.sp-strip3 .wp-block-column > p:not(.is-style-caption) { margin: 0 16px 18px; font-size: .9rem; line-height: 1.55; }

/* Cast of characters */
.sp-cast { gap: clamp(18px, 3vw, 34px) !important; }
.sp-cast .wp-block-column { text-align: center; }
.sp-cast .wp-block-image { margin: 0 auto 16px; max-width: 210px; }
.sp-cast .wp-block-image img { border-radius: 50%; border-width: 5px; box-shadow: 6px 6px 0 var(--sp-shadow); aspect-ratio: 1; object-fit: cover; }
.sp-cast h3 { margin: 0 0 6px; font-size: 1.45rem; }
.sp-cast .is-style-caption { margin: 0 auto 12px; font-size: .68rem; border-width: var(--sp-line-thin); padding: .38em .7em .32em; }
.sp-cast .wp-block-column > p:not(.is-style-caption) { font-size: .9rem; line-height: 1.55; margin: 0; }

/* FAQ as Q/A bubbles */
.sp-faq { display: grid; gap: 8px; }
.sp-faq .is-style-speech { margin: 0 12% 30px 0; background: var(--sp-yellow); color: var(--sp-on-yellow); }
.sp-faq .is-style-speech::after { background: var(--sp-yellow); }
.sp-faq .sp-faq__a { margin: 0 0 34px 12%; text-transform: none; font: 400 .98rem/1.6 var(--sp-font-body); letter-spacing: 0; }
.sp-faq .sp-faq__a::before { left: auto; right: 2.4em; clip-path: polygon(0 0, 100% 0, 92% 100%); }
.sp-faq .sp-faq__a::after { left: auto; right: calc(2.4em + 7px); clip-path: polygon(0 0, 100% 0, 92% 100%); }

/* Subscribe burst */
.sp-subscribe { text-align: center; }
.sp-subscribe .wp-block-buttons { justify-content: center; }

/* Back-page ads pattern */
.sp-adsrow { gap: 14px !important; }
.sp-adsrow .wp-block-column { padding: 16px; border: 3px double var(--sp-ink); outline: 3px solid var(--sp-panel); background: var(--sp-panel); font-size: .86rem; line-height: 1.5; }
.sp-adsrow .wp-block-column:nth-child(2) { background: var(--sp-yellow); color: var(--sp-on-yellow); outline-color: var(--sp-yellow); }
.sp-adsrow .wp-block-column:nth-child(3) { border-style: dashed; border-width: 2px; }
.sp-adsrow h3, .sp-adsrow h4 { font: italic 900 1.2rem/1 var(--sp-font-letter); margin: 0 0 .5em; padding-bottom: .35em; border-bottom: 3px solid currentColor; color: inherit; letter-spacing: 0; }
.sp-adsrow p { margin: 0 0 .6em; }

/* ==========================================================================
   14. Reading progress: a stroke of ink across the top of the page
   ========================================================================== */

.sp-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 8px; pointer-events: none; }
.sp-progress__ink { display: block; height: 100%; width: calc(var(--sp-read, 0) * 100%); min-width: 0; background: var(--sp-red); border-bottom: 2px solid var(--sp-ink); position: relative; }
.sp-progress__ink::after { content: ""; position: absolute; left: 100%; top: 0; width: 22px; height: 12px; margin-left: -1px; background: var(--sp-red); clip-path: polygon(0 0, 100% 18%, 58% 36%, 88% 56%, 40% 70%, 66% 100%, 0 84%); }
.admin-bar .sp-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .sp-progress { top: 46px; } }

/* ==========================================================================
   15. Presets that need more than colour
   ========================================================================== */

/* Pop: the dots are part of the picture. */
.preset-pop { --sp-dot-gap: 12px; }
.preset-pop .sp-cover__sheet::after, .preset-pop .sp-banner::after, .preset-pop .sp-news::after { opacity: calc(var(--sp-dot-alpha) * 4.2); }
/* Noir: the second ink is a grey, so links underline in red instead. */
.preset-noir a { text-decoration-color: var(--sp-red); }
.preset-noir .sp-banner, .preset-noir .sp-news, .preset-noir .sp-hero { background: var(--sp-ink); color: var(--sp-paper); }
.preset-noir .sp-news__title { color: var(--sp-paper); }
/* Midnight: neon on navy. Shadows glow in the second ink; pictures keep their light. */
.is-dark-paper .sp-panel__art::after, .is-dark-paper .sp-splash__art::after, .is-dark-paper .sp-next__art::after, .is-dark-paper .sp-row__art::after { mix-blend-mode: normal; opacity: calc(var(--sp-dot-alpha) * .55); }
.is-dark-paper .sp-lettering, .is-dark-paper .site-title a:hover { color: var(--sp-red); }
.is-dark-paper .sp-stamp, .is-dark-paper .sp-panel__stamp { box-shadow: none; }
.is-dark-paper .sp-ads .widget, .is-dark-paper .sp-ad { background: var(--sp-panel); color: var(--sp-ink); outline-color: var(--sp-panel); border-color: var(--sp-ink); }
.is-dark-paper .sp-ads .widget:nth-child(4n + 2), .is-dark-paper .sp-ad:nth-child(4n + 2) { background: var(--sp-yellow); color: var(--sp-on-yellow); outline-color: var(--sp-yellow); border-color: var(--sp-on-yellow); }
.is-dark-paper .sp-ads .widget:nth-child(4n + 1) .widget-title { background: var(--sp-ink); color: var(--sp-paper); }
.is-dark-paper .sp-fade { background: var(--sp-deep); }

/* ==========================================================================
   16. Motion and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.sp-panel { --sp-lift: 0px !important; }
	.sp-panel:hover .sp-panel__art img { transform: none; }
	.sp-panel__pop { transform: scale(1) rotate(8deg); opacity: 0; }
	.sp-panel:hover .sp-panel__pop, .sp-panel:focus-within .sp-panel__pop { opacity: 1; }
	.sp-button:hover, .wp-block-button__link:hover, input[type="submit"]:hover, .sp-next:hover, .sp-row__art:hover, a.sp-pagination__arrow:hover, .sp-strip3 .wp-block-column:hover, .wp-block-button.is-style-burst:hover { transform: none; }
	.main-navigation { transform: none; }
}

@media print {
	.sp-strip, .sp-tabs, .sp-progress, .sp-fade, .sp-backpage, .sp-news, .sp-continued, .sp-related, .comment-respond, .sp-to-top, .sp-panel__pop { display: none !important; }
	body { background: #fff; color: #000; font-size: 12pt; }
	.sp-cover__sheet, .sp-splash, .sp-panel__frame { box-shadow: none; }
	.site-footer__ink { background: none; color: #000; }
	a { text-decoration: underline; }
}