/*
Theme Name: asustin.net
Theme URI: https://asustin.net/
Author: Asustin Networks
Author URI: https://asustin.net/
Description: The shared theme of the asustin.net network of blogs and projects. A black top bar with the asustin.net wordmark, light and dark modes, an optional sidebar and a per-site accent color (Appearance → Editor → Styles).
Version: 2.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asustin
Tags: blog, one-column, two-columns, right-sidebar, block-patterns, full-site-editing, style-variations, translation-ready
*/

/* Tokens ######################################################################
   Colors come from theme.json (--wp--preset--color--*). Dark mode swaps them below; the accent stays the
   same in both modes, and the accent used for text and focus rings is derived from it so every accent
   variation gets readable links in light and dark. */

:root {
	--as-accent-ink: color-mix(in oklab, var(--wp--preset--color--accent) 60%, #000);
	--as-focus: var(--as-accent-ink);
	--as-scrim: rgba(0, 0, 0, 0.58);
	--as-bar-height: 48px;
	--as-content-max: 1120px;
	/* Gap between the content and the sidebar, and between the banner's text and picture: both are 2fr/1fr
	   grids with this gap, so the sidebar lines up with the banner's picture column. */
	--as-cols-gap: var(--wp--preset--spacing--7);
	/* One gutter for everything (bar, hero, columns, posts, footer) so all left/right edges line up at
	   every width: on wide screens they meet the 1120px wide size, on narrow ones the screen edge minus this. */
	--as-gutter: var(--wp--preset--spacing--5);
	--as-success: #0b705b;
	--as-success-soft: #e3f5f0;
	--as-warning: #8a5000;
	--as-warning-soft: #fbf0dc;
	--as-danger: #b8163f;
	--as-danger-soft: #fbe6ec;
	--as-info: #1f5fa8;
	--as-info-soft: #e6eef9;
	color-scheme: light;
}

/* Dark: explicit choice (data-theme set by the toggle) or the system preference when there's no choice. */
html[data-theme="dark"] {
	--wp--preset--color--surface: #101010;
	--wp--preset--color--surface-2: #191919;
	--wp--preset--color--surface-3: #242424;
	--wp--preset--color--bar: #000000;
	--wp--preset--color--ink: #f2f2ef;
	--wp--preset--color--ink-muted: #b0b0aa;
	--wp--preset--color--line: #333331;
	--wp--preset--color--line-strong: #7c7c77;
	--wp--preset--color--action: #f2f2ef;
	--wp--preset--color--action-hover: #ffffff;
	--wp--preset--color--on-action: #111111;
	--as-accent-ink: color-mix(in oklab, var(--wp--preset--color--accent) 72%, #fff);
	--as-scrim: rgba(0, 0, 0, 0.64);
	--as-success: #34d1b0;
	--as-success-soft: #10302a;
	--as-warning: #f0b35a;
	--as-warning-soft: #33270f;
	--as-danger: #ff6b8f;
	--as-danger-soft: #3a1520;
	--as-info: #7fb2f0;
	--as-info-soft: #14263d;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--wp--preset--color--surface: #101010;
		--wp--preset--color--surface-2: #191919;
		--wp--preset--color--surface-3: #242424;
		--wp--preset--color--bar: #000000;
		--wp--preset--color--ink: #f2f2ef;
		--wp--preset--color--ink-muted: #b0b0aa;
		--wp--preset--color--line: #333331;
		--wp--preset--color--line-strong: #7c7c77;
		--wp--preset--color--action: #f2f2ef;
		--wp--preset--color--action-hover: #ffffff;
		--wp--preset--color--on-action: #111111;
		--as-accent-ink: color-mix(in oklab, var(--wp--preset--color--accent) 72%, #fff);
		--as-scrim: rgba(0, 0, 0, 0.64);
		--as-success: #34d1b0;
		--as-success-soft: #10302a;
		--as-warning: #f0b35a;
		--as-warning-soft: #33270f;
		--as-danger: #ff6b8f;
		--as-danger-soft: #3a1520;
		--as-info: #7fb2f0;
		--as-info-soft: #14263d;
		color-scheme: dark;
	}
}

/* Base ######################################################################## */

body {
	-webkit-font-smoothing: antialiased;
	margin: 0;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--as-focus);
	outline-offset: 2px;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-thickness: 2px;
}

::selection {
	background: color-mix(in oklab, var(--wp--preset--color--accent) 35%, transparent);
}

/* Wordmark ####################################################################
   The original asustin.net header image in CSS: Arial Bold, the box 0.682em tall so the baseline sits on
   the bottom edge, and the lowest 17% fading out, as if the letters sink into the edge. */

.as-wordmark {
	display: inline-block;
	vertical-align: bottom;
	font-family: var(--wp--preset--font-family--wordmark);
	font-weight: 700;
	font-size: 44px;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	height: 0.682em;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 83%, rgba(0, 0, 0, 0.15) 100%);
	mask-image: linear-gradient(to bottom, #000 0, #000 83%, rgba(0, 0, 0, 0.15) 100%);
}

.as-wordmark > span {
	display: block;
	margin-top: -0.143em;
}

/* Top bar ##################################################################### */

.as-bar {
	/* Wordmark size: fills the bar height (box = 0.682em), capped so it fits beside the phone menu button. */
	--wm: min(calc(var(--as-bar-height) / 0.682), calc((100vw - 2 * var(--as-gutter) - 44px) / 5.3));
	background: var(--wp--preset--color--bar);
	color: var(--wp--preset--color--bar-ink);
	border-bottom: 1px solid var(--wp--preset--color--bar);
	position: relative;
	z-index: 20;
}

html[data-theme="dark"] .as-bar {
	border-bottom-color: var(--wp--preset--color--line);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .as-bar {
		border-bottom-color: var(--wp--preset--color--line);
	}
}

.as-bar-in {
	height: calc(var(--wm) * 0.682);
	max-width: var(--as-content-max);
	margin: 0 auto;
	padding: 0 var(--as-gutter);
	gap: var(--wp--preset--spacing--5) !important;
	align-items: stretch !important;
}

.as-bar-brand {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--2);
	/* Only the site name may give way (it ends in "…"); the wordmark itself never shrinks here. */
	flex-shrink: 1;
	min-width: 0;
}

.as-bar-brand > .as-wordmark {
	flex-shrink: 0;
}

.as-bar-brand a {
	color: var(--wp--preset--color--bar-ink);
	text-decoration: none;
}

.as-bar-brand .as-wordmark {
	font-size: var(--wm);
}

/* Path style (asustin.net/elblogdeedd) and host style (hup.asustin.net): the brand takes the bar's free space.
   When the whole address doesn't fit beside the menu button, bar.js adds .is-short and "asustin.net" goes,
   leaving "/elblogdeedd" (or ".asustin.net" goes, leaving "hup"). The wordmark only shrinks if even that
   doesn't fit. --as-wm-width(-short) are the texts' widths in em, measured by the brand block. */
.as-bar-brand.is-path,
.as-bar-brand.is-host {
	flex: 1 1 0;
	min-width: 0;
	container-type: inline-size;
	--as-wm-current: var(--as-wm-width, 5.3);
}

/* The host style has its menu in the bar, right after the name: until the bar collapses, the brand is only
   as wide as its wordmark (it can still shrink, for bar.js to measure). */
.as-bar:not(.is-collapsed) .as-bar-brand.is-host {
	flex: 0 1 calc(var(--as-wm-width, 5.3) * 1.02 * var(--wm));
}

.as-bar-brand.is-path.is-short,
.as-bar-brand.is-host.is-short {
	--as-wm-current: var(--as-wm-width-short, 5.3);
}

.as-bar-brand.is-path.is-short .as-wm-host,
.as-bar-brand.is-host.is-short .as-wm-host {
	display: none;
}

.as-bar-brand.is-path .as-wordmark,
.as-bar-brand.is-host .as-wordmark {
	/* 2% slack: glyphs like "x" draw slightly past their advance width and the wordmark clips overflow. */
	font-size: min(var(--wm), calc(100cqw / (var(--as-wm-current) * 1.02)));
}

.as-bar-brand.is-path .as-wordmark a,
.as-bar-brand.is-host .as-wordmark a {
	color: inherit;
	text-decoration: none;
}

.as-bar-brand.is-path .as-wordmark a:hover,
.as-bar-brand.is-host .as-wordmark a:hover {
	opacity: 0.8;
}

.as-bar-product {
	min-width: 0;
	font: italic 400 18px/24px var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--bar-ink-muted) !important;
	padding-bottom: 7px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.as-bar-product:hover {
	color: var(--wp--preset--color--bar-ink) !important;
}

/* Main navigation inside the bar: underline-on-bottom-edge tabs, like the mockup. */
.as-bar .as-bar-nav {
	align-self: stretch;
	align-items: flex-end;
	min-width: 0;
}

.as-bar .as-bar-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--4);
	align-items: flex-end;
	height: 100%;
}

.as-bar .as-bar-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--bar-ink-muted);
	text-decoration: none;
	padding: 0 0 7px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.as-bar .as-bar-nav .wp-block-navigation-item__content:hover,
.as-bar .as-bar-nav .current-menu-item > .wp-block-navigation-item__content,
.as-bar .as-bar-nav [aria-current="page"] {
	color: var(--wp--preset--color--bar-ink);
}

.as-bar .as-bar-nav .current-menu-item > .wp-block-navigation-item__content,
.as-bar .as-bar-nav .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Phone menu (core navigation overlay). */
.as-bar .wp-block-navigation__responsive-container-open {
	align-self: center;
	color: var(--wp--preset--color--bar-ink);
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: var(--wp--custom--radius--md);
}

/* assets/js/bar.js decides the bar's layout and adds .is-collapsed when the full-size wordmark, the menu and
   the controls don't fit on one line: then the menu and the controls go behind one menu button together.
   These rules override the navigation block's own breakpoint (600px, used when its "Overlay menu" setting
   is "Mobile", e.g. in a header customized in the Site Editor), so the bar always behaves the same way. */
.as-bar.is-collapsed .wp-block-navigation__responsive-container-open {
	display: grid !important;
	margin-left: auto;
}

.as-bar.is-collapsed .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: none !important;
}

.as-bar:not(.is-collapsed) .wp-block-navigation__responsive-container-open {
	display: none !important;
}

.as-bar:not(.is-collapsed) .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: flex !important;
	position: static;
	width: auto;
	background: transparent !important;
	height: 100%;
	align-items: flex-end;
}

.as-bar:not(.is-collapsed) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
.as-bar:not(.is-collapsed) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
.as-bar:not(.is-collapsed) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
	display: flex;
	height: 100%;
	align-items: flex-end;
}

.as-bar:not(.is-collapsed) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
	display: none;
}

.as-bar.is-collapsed .as-bar-nav {
	margin-left: auto !important;
	align-self: center;
}

.as-bar.is-collapsed .as-bar-in {
	gap: var(--wp--preset--spacing--2) !important;
}

/* Without a menu (blogs with the banner) the controls stay in the bar at every width, so on the smallest
   screens the bar keeps their height even when the wordmark is smaller. */
.as-bar:not(:has(.wp-block-navigation)) .as-bar-in {
	min-height: 36px;
}

/* In the editor bar.js doesn't run: let the bar wrap onto two lines instead of overlapping, so every part
   of the header stays visible and editable. */
.editor-styles-wrapper .as-bar-in {
	height: auto;
	min-height: calc(var(--wm) * 0.682);
	flex-wrap: wrap !important;
	row-gap: var(--wp--preset--spacing--2) !important;
}

/* Controls moved into the open menu panel by assets/js/bar.js. */
.as-bar .as-bar-menu-row {
	margin-left: 0 !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3) !important;
	margin: var(--wp--preset--spacing--4) 0 0;
	padding-top: var(--wp--preset--spacing--4);
}

.as-bar .wp-block-navigation__responsive-container-open:hover {
	background: rgba(255, 255, 255, 0.12);
}

.as-bar .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--bar) !important;
	color: var(--wp--preset--color--bar-ink) !important;
	padding: var(--wp--preset--spacing--4);
}

.as-bar .is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
	align-items: stretch !important;
}

.as-bar .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.as-bar .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-size: 16px;
	line-height: 24px;
	padding: var(--wp--preset--spacing--3) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.as-bar .is-menu-open .wp-block-navigation-item__content[aria-current="page"],
.as-bar .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: rgba(255, 255, 255, 0.14);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--3);
}

.as-bar-end {
	/* !important: WordPress's flex layout resets children's margins with a more specific selector. */
	margin-left: auto !important;
	align-items: center !important;
	gap: var(--wp--preset--spacing--3) !important;
	flex-shrink: 0;
}

/* Ghost buttons on the bar: sign in, search, color scheme toggle. */
.as-bar .wp-block-loginout a,
.as-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 var(--wp--preset--spacing--3);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: transparent;
	color: var(--wp--preset--color--bar-ink);
	font: 600 14px/1 var(--wp--preset--font-family--sans);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.as-bar .wp-block-loginout a:hover,
.as-ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}

.as-ghost.as-icon {
	width: 32px;
	padding: 0;
	font-size: 16px;
}

.as-bar .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--bar-ink);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	width: 32px;
	height: 32px;
	padding: 0;
	display: grid;
	place-items: center;
}

.as-bar .wp-block-search__button:hover {
	background: rgba(255, 255, 255, 0.12);
}

.as-bar .wp-block-search__button svg {
	fill: currentColor;
	width: 22px;
	height: 22px;
}

.as-bar .wp-block-search__inside-wrapper {
	align-items: center;
	border: 0;
	padding: 0;
}

.as-bar .wp-block-search.wp-block-search__searchfield-hidden .wp-block-search__input {
	width: 0;
	border: 0;
	padding: 0;
}

.as-bar .wp-block-search__input {
	height: 32px;
	background: transparent;
	color: var(--wp--preset--color--bar-ink);
	border: 1px solid var(--wp--preset--color--bar-ink-muted);
	border-radius: var(--wp--custom--radius--md);
	padding: 0 var(--wp--preset--spacing--3);
	font-size: 14px;
}

/* Keep the bar's dark background on hover/focus; the generic search-input rules below would
   swap in surface colors and hide the bar-ink text in light mode. */
.as-bar .wp-block-search__input:hover {
	background: rgba(255, 255, 255, 0.12);
}

.as-bar .wp-block-search__input:focus {
	background: transparent;
	border-color: var(--wp--preset--color--bar-ink);
}

/* Light/dark picker: an icon button (◐ System, ☀ Light, ☾ Dark) that opens a small menu. Hidden until
   JS enables it. */
.as-scheme {
	position: relative;
	display: inline-flex;
}

.as-scheme[hidden] {
	display: none;
}

.as-scheme-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	min-width: 150px;
	padding: var(--wp--preset--spacing--1);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.as-scheme-menu[hidden] {
	display: none;
}

.as-scheme-option {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	width: 100%;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: transparent;
	color: inherit;
	font: 600 14px/20px var(--wp--preset--font-family--sans);
	text-align: start;
	cursor: pointer;
}

.as-scheme-option:hover {
	background: var(--wp--preset--color--surface-2);
}

.as-scheme-option[aria-pressed="true"] {
	background: var(--wp--preset--color--surface-3);
}

.as-scheme-option[aria-pressed="true"]::after {
	content: "✓";
	margin-left: auto;
	color: var(--as-accent-ink);
}

.as-scheme-option-icon {
	width: 1.2em;
	text-align: center;
}

/* Inside the phone menu panel the button sits near the left edge, so the menu opens to the right. */
.as-bar-menu-row .as-scheme-menu {
	left: 0;
	right: auto;
}

/* Language switcher (block from the asustin-network mu-plugin). */
.as-lang {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--ink);
}

.as-bar .as-lang {
	color: var(--wp--preset--color--bar-ink-muted);
}

.as-bar .as-lang:hover {
	color: var(--wp--preset--color--bar-ink);
}

.as-lang select {
	appearance: none;
	-webkit-appearance: none;
	height: 32px;
	padding: 0 28px 0 12px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font: 600 13px/1 var(--wp--preset--font-family--sans);
	cursor: pointer;
}

.as-lang select option {
	color: #1a1a1a;
	background: #ffffff;
}

.as-lang [hidden] {
	display: none !important;
}

.as-lang:not(.has-select)::after {
	display: none;
}

.as-lang::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	pointer-events: none;
}

.as-lang-links {
	display: inline-flex;
	gap: var(--wp--preset--spacing--2);
	font: 600 13px/1 var(--wp--preset--font-family--sans);
}

.as-lang-links a {
	color: inherit;
}

@media (max-width: 640px) {
	.as-layout {
		padding-block: var(--wp--preset--spacing--6);
	}

	.as-post-header .wp-block-post-title {
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

.as-bar-brand.hide-name .as-bar-product {
	display: none;
}

/* Hero ######################################################################## */

.as-hero {
	position: relative;
	overflow: hidden;
}

.as-hero-in {
	position: relative;
	max-width: var(--as-content-max);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--7) var(--as-gutter) var(--wp--preset--spacing--6);
}

.as-hero-eyebrow {
	font: 600 12px/16px var(--wp--preset--font-family--sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink-muted);
}

.as-hero-title {
	font: 700 var(--wp--preset--font-size--xx-large) / 1.15 var(--wp--preset--font-family--serif);
	letter-spacing: -0.015em;
	margin: 0;
	max-width: 16ch;
}

.as-hero-lede {
	font: italic 400 20px/30px var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink-muted);
	margin: var(--wp--preset--spacing--3) 0 0;
	max-width: var(--wp--custom--measure);
}

/* Banner ("masthead") ##########################################################
   patterns/_masthead.php: title, tagline and menu slot on the left, an optional picture on the right, in a
   2fr/1fr grid that matches the layout with a sidebar. On blogs with the asustin.net/blog header it's under
   the bar on every page (parts/masthead.html) and holds the menu. Looks (block styles on the outer group):
   grey band (default), clean, background image. */

.as-masthead {
	position: relative;
	margin-block: 0;
	background: var(--wp--preset--color--surface-2);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* The header part puts the banner under the bar, flush. */
.as-header > .as-masthead-part,
.as-header .as-masthead-part > .as-masthead {
	margin-block: 0;
}

.as-masthead-in {
	box-sizing: border-box;
	/* !important: alignwide and the constrained layout of a page's content set their own widths. */
	max-width: var(--as-content-max) !important;
	margin: 0 auto !important;
	padding: var(--wp--preset--spacing--7) var(--as-gutter) 0;
}

/* A grid instead of the Columns block's flex, so the column widths and the gap match .as-layout. */
.as-masthead-cols.wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 0 var(--as-cols-gap);
	align-items: end;
	margin: 0;
}

.as-masthead-cols > .wp-block-column {
	min-width: 0;
	margin: 0 !important;
}

.as-masthead-text > * {
	margin-block: 0;
}

.as-masthead .as-hero-title {
	max-width: none;
}

/* The lede (the welcome on the main site, the tagline on blogs) gets the same spacing and room for two lines
   everywhere, so the banner keeps its height from page to page and site to site, and when a rotating
   tagline changes to a longer or shorter phrase. */
.as-masthead .as-hero-lede {
	margin-top: var(--wp--preset--spacing--2);
	min-height: 60px;
	min-height: 2lh;
}

.as-masthead .as-hero-title a {
	color: inherit;
	text-decoration: none;
}

.as-masthead .as-hero-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* The picture sits above the bottom edge, where the menu's underline runs. On two columns it's cropped to
   the text column's height (below), so choosing one never makes the banner taller. */
.as-masthead-media {
	align-self: center;
	padding-bottom: var(--wp--preset--spacing--6);
}

.as-masthead-media .wp-block-image {
	margin: 0;
}

.as-masthead-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
}

/* The text column alone sets the banner's height: the picture is as wide as the sidebar's column, in its
   own proportions, a little below the banner's top edge. When it's taller than the banner it hangs over the
   banner's bottom line, and what's below moves down by that much (--as-masthead-overhang, set by
   assets/js/masthead.js), so it never covers the sidebar. */
@media (min-width: 921px) {
	.as-masthead-media {
		align-self: stretch;
		position: relative;
		padding-bottom: 0;
	}

	.as-masthead-media .wp-block-image {
		position: absolute;
		/* Up through most of .as-masthead-in's top padding, to just below the band's edge. */
		inset: calc(var(--wp--preset--spacing--5) - var(--wp--preset--spacing--7)) 0 auto;
		z-index: 1;
	}

	.as-layout > .as-sidebar {
		margin-top: var(--as-masthead-overhang, 0px) !important;
	}

	/* No sidebar: the content's column runs under the picture, so all of it moves down. */
	.as-layout:not(:has(> .as-sidebar)) {
		padding-top: calc(var(--wp--preset--spacing--7) + var(--as-masthead-overhang, 0px));
	}

	.wp-site-blocks > main.as-main-wide {
		padding-top: var(--as-masthead-overhang, 0px);
	}

	/* A banner in a page, followed by its masthead.js: the next block moves down by the overhang, on top of
	   its usual gap. When that block is columns (the Podcast home pattern: the latest episode | Subscribe),
	   only the last column, the one under the picture, moves down. */
	.as-masthead + script + * {
		margin-block-start: calc(var(--wp--style--block-gap, 24px) + var(--as-masthead-overhang, 0px));
	}

	.as-masthead + script + .wp-block-columns {
		margin-block-start: var(--wp--style--block-gap, 24px);
	}

	.as-masthead + script + .wp-block-columns > .wp-block-column:last-child {
		margin-block-start: var(--as-masthead-overhang, 0px);
	}
}

/* Without a picture the column renders nothing; on one column it would only add space. Above the text, the
   picture is capped so a tall one doesn't push the title far down. */
@media (max-width: 920px) {
	.as-masthead-cols.wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.as-masthead-media {
		order: -1;
		padding: 0 0 var(--wp--preset--spacing--5);
	}

	.as-masthead-media img {
		max-height: 240px;
		object-fit: cover;
	}

	.as-masthead-media:not(:has(img[src])) {
		display: none;
	}
}

/* Menu slot (blocks/masthead-nav): the menu, or the same height of empty space. Tabs on the bottom edge
   with the current page underlined in the accent, like the top bar. */
.as-masthead-nav {
	display: flex;
	align-items: flex-end;
	min-height: 50px;
	margin-top: var(--wp--preset--spacing--5) !important;
}

.as-masthead-nav .wp-block-navigation {
	align-items: flex-end;
	font: 600 15px/20px var(--wp--preset--font-family--sans);
}

.as-masthead-nav .wp-block-navigation__container {
	gap: 0 var(--wp--preset--spacing--5);
	align-items: flex-end;
}

.as-masthead-nav .wp-block-navigation .wp-block-navigation-item__content {
	display: block;
	padding: var(--wp--preset--spacing--3) 0 13px;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}

.as-masthead-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.as-masthead-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.as-masthead-nav .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--ink);
}

.as-masthead-nav .wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--line-strong);
}

.as-masthead-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.as-masthead-nav .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Submenus open as small panels. */
.as-masthead-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
}

.as-masthead-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--2);
	border-bottom: 0;
}

/* Clean: no band, and the picture is a smaller rounded image in the middle of its column. */
.as-masthead.is-style-clean {
	background: transparent;
}

@media (min-width: 921px) {
	.as-masthead.is-style-clean .as-masthead-media {
		padding-bottom: var(--wp--preset--spacing--6);
	}

	.as-masthead.is-style-clean .as-masthead-media .wp-block-image {
		inset: 0 0 var(--wp--preset--spacing--6);
	}
}

.as-masthead.is-style-clean .as-masthead-media .wp-block-image {
	display: flex;
	justify-content: center;
	align-items: center;
}

.as-masthead.is-style-clean .as-masthead-media img {
	width: auto;
	max-width: min(100%, 220px);
	max-height: 220px;
	object-fit: cover;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--lg);
}

/* Background image: the image chosen in the inner group's Background settings, under a scrim, with white
   text. Without an image it's a dark band. */
.as-masthead.is-style-image {
	background: transparent;
	border-bottom: 0;
}

.as-masthead.is-style-image .as-masthead-in {
	position: relative;
	isolation: isolate;
	background-color: #1c1c1c;
	background-size: cover;
	background-position: center;
	color: #ffffff;
}

.as-masthead.is-style-image .as-masthead-in::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right, var(--as-scrim), rgba(0, 0, 0, 0.25));
}

.as-masthead.is-style-image :where(.as-hero-title, .as-hero-title a, h1, h2, h3) {
	color: #ffffff;
}

.as-masthead.is-style-image .as-hero-lede {
	color: rgba(255, 255, 255, 0.82);
}

.as-masthead.is-style-image .as-masthead-nav .wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.78);
}

.as-masthead.is-style-image .as-masthead-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.as-masthead.is-style-image .as-masthead-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.as-masthead.is-style-image .as-masthead-nav .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: #ffffff;
}

.as-masthead.is-style-image .as-masthead-nav .wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* Theme picture (Settings → asustin.net → Author, banner_background() in functions.php): the background image
   look, with the picture and the scrim across the whole window instead of the content's width. */
.as-masthead.has-theme-picture {
	isolation: isolate;
	background-color: #1c1c1c;
	background-size: cover;
	background-position: center;
}

.as-masthead.has-theme-picture::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right, var(--as-scrim), rgba(0, 0, 0, 0.25));
}

.as-masthead.has-theme-picture .as-masthead-in {
	background-color: transparent;
}

.as-masthead.has-theme-picture .as-masthead-in::before {
	content: none;
}

/* Theme picture with "Stretch across the whole window" off: the picture and the scrim inside the banner's
   side padding, exactly as wide as the top bar's contents and the page below, with the page's background
   on both sides. The title, tagline and menu move in a little so they don't start right at its edge; the
   picture column stays where it is, lined up with the sidebar. */
.as-masthead.has-theme-picture-page .as-masthead-in {
	background: none;
}

.as-masthead.has-theme-picture-page .as-masthead-in::before {
	inset: 0 var(--as-gutter);
	background:
		linear-gradient(to right, var(--as-scrim), rgba(0, 0, 0, 0.25)),
		#1c1c1c var(--as-theme-picture) center / cover no-repeat;
}

.as-masthead.has-theme-picture-page .as-masthead-text {
	padding-inline-start: var(--wp--preset--spacing--5);
}

/* On one column the text runs the picture's whole width: room on the right too. */
@media (max-width: 920px) {
	.as-masthead.has-theme-picture-page .as-masthead-text {
		padding-inline-end: var(--wp--preset--spacing--5);
	}
}

/* In the editor an empty picture shows the image block's placeholder; keep it small. */
.editor-styles-wrapper .as-masthead-media .components-placeholder {
	min-height: 120px;
}

/* Photo hero: a Cover block with the as-hero class keeps the scrim and white text. Headings (and the post
   title in the Article starter) would otherwise take the theme's dark heading color. */
.wp-block-cover.as-hero :where(h1, h2, h3, .wp-block-post-title, .wp-block-post-title a) {
	color: #ffffff;
}

.wp-block-cover.as-hero .as-hero-eyebrow,
.wp-block-cover.as-hero .as-hero-lede {
	color: rgba(255, 255, 255, 0.82);
}

/* Article hero: the text sits on the wide edge, like the wordmark, at every width. */
.wp-block-cover.as-article-hero {
	padding: 0 var(--as-gutter);
}

.as-article-hero .wp-block-cover__inner-container {
	box-sizing: border-box;
	/* !important: the Cover block's "content position" styles reset these with a more specific selector. */
	width: 100% !important;
	max-width: calc(var(--wp--style--global--wide-size) - 2 * var(--as-gutter));
	margin-inline: auto !important;
	padding-block: var(--wp--preset--spacing--7);
}

.as-article-hero .wp-block-cover__inner-container > * {
	margin-inline: 0;
}

/* A page that starts with a full-width block (a hero) starts right under the bar. */
.wp-site-blocks > main.as-main-wide {
	margin-block-start: 0;
}

.as-main-wide > .wp-block-post-content > .alignfull:first-child {
	margin-block-start: 0;
}

/* Magazine drop cap: bold serif, and it never runs into the next paragraph. */
.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-size: 4.6em;
	line-height: 0.82;
	margin: 0.06em 0.08em 0 0;
}

.has-drop-cap:not(:focus)::after {
	content: "";
	display: table;
	clear: both;
}

.as-article-body > .as-meta {
	margin-top: var(--wp--preset--spacing--6);
}

.as-article-after {
	padding-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
}

.as-article-after > * + * {
	margin-top: var(--wp--preset--spacing--6) !important;
}

/* Full-width pages: wide blocks stop one gutter short of the wide size, so their edges meet the wordmark and
   the hero text. On narrow screens the page's own padding (one gutter) takes over. Padding on the blocks
   themselves would stack with the page padding on phones. */
.as-main-wide .is-layout-constrained > .alignwide {
	max-width: calc(var(--wp--style--global--wide-size) - 2 * var(--as-gutter));
}

/* "Full width" pages: the title block above full-width content. */
.as-page-head {
	padding-top: var(--wp--preset--spacing--7);
	padding-bottom: var(--wp--preset--spacing--5);
}

.as-page-head .wp-block-post-title {
	font-size: var(--wp--preset--font-size--huge);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.as-page-head .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--lg);
}

.as-main-wide > .wp-block-post-content {
	padding-bottom: var(--wp--preset--spacing--7);
}

/* Link lists (projects, the network's blogs) ##################################### */

.as-list-title {
	font: 600 30px/36px var(--wp--preset--font-family--serif);
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink);
}

.as-list ul {
	margin-top: 0;
}

/* The list right under a column's title (the blogs block's wrapper or a hand-edited list) skips the column's
   block gap, so lists side by side start at the same height. */
.as-list > .as-list {
	margin-block-start: 0;
}

.as-list ul,
ul.as-list {
	list-style: none;
	margin-inline: 0;
	margin-bottom: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.as-list li,
ul.as-list > li {
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: 0;
}

.as-list-item {
	display: block;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2);
	text-decoration: none;
	color: inherit;
	border-radius: var(--wp--custom--radius--sm);
}

a.as-list-item:hover {
	background: var(--wp--preset--color--surface-2);
}

a.as-list-item:hover .as-list-name {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.as-list-head {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--2);
	flex-wrap: wrap;
}

.as-list-name {
	font: 600 20px/26px var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink);
}

.as-list-meta {
	margin-left: auto;
	font: 400 12px/16px var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--ink-muted);
}

.as-list-desc {
	font: 400 15px/22px var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink-muted);
	margin: 2px 0 0;
}

/* Hand-edited link lists (the projects on the network home, the "Link list" pattern): styled by structure,
   not by classes inside the text, because the editor doesn't add those to new items. In a list with the
   as-list class, each item is an entry: its link is the name (serif, text color), the rest is the
   description (small, muted). Put the description after a line break (Shift+Enter). */
ul.as-list > li {
	position: relative;
	isolation: isolate;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2);
	font: 400 15px/22px var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink-muted);
}

/* Each entry behaves like the blog list's (a.as-list-item): the whole tile is the name's link, and it gets
   the same hover background, drawn under the text and above the bottom border. */
ul.as-list > li::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--wp--custom--radius--sm);
}

ul.as-list > li:hover::before {
	background: var(--wp--preset--color--surface-2);
}

ul.as-list > li > a:first-child::after,
ul.as-list > li > strong:first-child > a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Any other link in the description stays clickable above the tile's link. */
ul.as-list > li > a:not(:first-child),
ul.as-list > li > :not(:first-child) a {
	position: relative;
	z-index: 1;
}

ul.as-list > li a {
	font: 600 20px/26px var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

ul.as-list > li a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

ul.as-list > li strong {
	font-weight: inherit;
}

/* The name's line as tall as the blog list's (.as-list-head, then the description's 2px margin). */
ul.as-list > li > a:first-child,
ul.as-list > li > strong:first-child {
	display: inline-block;
	margin-bottom: 2px;
}

/* Archived blogs: a disclosure under the list, only rendered when there are archived blogs. */
.as-list-archived {
	margin-top: var(--wp--preset--spacing--4);
}

.as-list-archived > summary {
	cursor: pointer;
	font: 600 14px/20px var(--wp--preset--font-family--sans);
	color: var(--as-accent-ink);
	width: fit-content;
}

.as-list-archived > summary:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.as-list-archived[open] > summary {
	margin-bottom: var(--wp--preset--spacing--3);
}

.as-list-archived .as-list-name {
	color: var(--wp--preset--color--ink-muted);
}

/* Network posts (asustin-network/network-posts): the core Latest Posts markup, with the blog's name. */
.as-network-posts.wp-block-latest-posts__list {
	padding: 0;
	margin-block: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.as-network-posts.wp-block-latest-posts__list > li {
	padding-block: var(--wp--preset--spacing--4);
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.as-network-posts .wp-block-latest-posts__post-title {
	font: 600 20px/26px var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.as-network-posts .wp-block-latest-posts__post-title:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.as-network-posts-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

.as-network-posts-meta > * + *::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--line-strong);
}

.as-network-posts-site {
	color: var(--as-accent-ink);
	font-weight: 600;
	text-decoration: none;
}

.as-network-posts-site:hover {
	text-decoration: underline;
}

.as-network-posts .wp-block-latest-posts__post-date {
	display: inline;
	font: 400 12px/20px var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--ink-muted);
}

.as-network-posts .wp-block-latest-posts__post-excerpt {
	margin: var(--wp--preset--spacing--2) 0 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--wp--preset--color--ink-muted);
}

/* Badges and notices ############################################################ */

.as-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--wp--custom--radius--sm);
	font: 600 11px/16px var(--wp--preset--font-family--sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
	background: var(--wp--preset--color--surface-3);
	color: var(--wp--preset--color--ink);
}

.as-badge-accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.as-notice {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	max-width: var(--as-content-max);
	margin: var(--wp--preset--spacing--4) auto 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--as-info);
	background: var(--as-info-soft);
	color: var(--wp--preset--color--ink);
	font: 400 15px/22px var(--wp--preset--font-family--sans);
}

.as-notice p {
	margin: 0;
}

/* Layout: content + optional sidebar ############################################### */

/* Its own top padding is the whole gap under the header: not WordPress's block gap as well. */
.wp-site-blocks > main.as-layout {
	margin-block-start: 0;
}

.as-layout {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--as-content-max);
	margin-inline: auto !important;
	padding-inline: var(--as-gutter);
	padding-block: var(--wp--preset--spacing--7);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--7);
}

.as-layout > * {
	margin-block: 0 !important;
}

/* Without a sidebar the content keeps a comfortable reading width. */
.as-layout:not(:has(> .as-sidebar)) > .as-content {
	width: 100%;
	max-width: 760px;
	margin-inline: auto !important;
}

@media (min-width: 921px) {
	.as-layout:has(> .as-sidebar) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--as-cols-gap);
	}
}

.as-sidebar {
	font-size: var(--wp--preset--font-size--small);
}

.as-sidebar h2 {
	font: 600 12px/16px var(--wp--preset--font-family--sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 var(--wp--preset--spacing--2);
}

.as-sidebar > * + * {
	margin-top: var(--wp--preset--spacing--6) !important;
}

.as-sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.as-sidebar li {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--2) 0;
	margin: 0;
}

/* Hide a section whose block rendered nothing (e.g. the tag cloud of a blog without tags). */
.as-sidebar-section:not(:has(> :not(.wp-block-heading))),
.as-sidebar-tags:not(:has(a)) {
	display: none;
}

.as-sidebar li a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.as-sidebar li a:hover {
	text-decoration: underline;
}

.as-sidebar .wp-block-social-links,
.as-sidebar .wp-block-tag-cloud {
	border: 0;
}

.as-sidebar .wp-block-social-links li {
	border: 0;
	padding: 0;
}

/* Author: the bio from Settings → asustin.net → Author (sidebar_author() in functions.php), under the same rule
   as the lists. */
.as-sidebar .as-author-bio {
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--wp--preset--color--line);
}

.as-sidebar .as-author-bio p {
	margin: 0;
}

.as-sidebar .as-author-bio p + p {
	margin-top: var(--wp--preset--spacing--2);
}

/* The podcast's social networks: a row of logos under its directories (patterns/_podcast-subscribe.php). */
.as-podcast-subscribe + .as-podcast-social {
	margin-top: var(--wp--preset--spacing--5);
}

/* Posts ########################################################################### */

.as-post-list > li + li {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--6);
}

.as-post-list > li + li,
.as-post-list > li {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--6);
}

.as-post-summary.is-layout-flow > * {
	margin-block: 0;
}

.as-post-summary.is-layout-flow > * + * {
	margin-top: var(--wp--preset--spacing--3);
}

.as-post-summary .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

.as-post-summary .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.as-post-summary .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--lg);
}

.as-meta {
	gap: var(--wp--preset--spacing--2) !important;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

.as-meta a {
	color: var(--wp--preset--color--ink-muted);
}

.as-meta > * + *::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--line-strong);
}

.as-read-more {
	font-weight: 600;
}

.as-post-header .wp-block-post-title {
	font-size: var(--wp--preset--font-size--huge);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.as-post-header .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--lg);
}

.as-content .wp-block-post-content {
	font-size: 18px;
	line-height: 1.7;
}

.as-content .wp-block-post-content > :where(h2, h3, h4) {
	margin-top: var(--wp--preset--spacing--7);
}

.as-tags a {
	display: inline-block;
	margin: 0 var(--wp--preset--spacing--1) var(--wp--preset--spacing--1) 0;
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface-3);
	color: var(--wp--preset--color--ink);
	font-size: 13px;
	text-decoration: none;
}

.as-tags .wp-block-post-terms__separator {
	display: none;
}

.as-author {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--5);
}

.as-author .wp-block-post-author__avatar img {
	border-radius: 50%;
}

.as-author .wp-block-post-author__name {
	font: 600 18px/24px var(--wp--preset--font-family--serif);
}

.as-author .wp-block-post-author__bio {
	color: var(--wp--preset--color--ink-muted);
	margin-top: var(--wp--preset--spacing--1);
}

.as-post-nav {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Podcasts (Seriously Simple Podcasting) ########################################
   SSP's player takes its colors from variables. Both of its modes get the theme's tokens, so the player
   follows the site's light/dark toggle (the palette swap) whatever SSP's "player mode" setting says. The
   doubled class outweighs SSP's own ".castos-player.dark-mode .x" rules, whichever stylesheet loads last. */

.castos-player.castos-player:is(.dark-mode, .light-mode) {
	--ssp-dark-mode-text-color: var(--wp--preset--color--ink);
	--ssp-dark-mode-bg1-color: var(--wp--preset--color--surface-2);
	--ssp-dark-mode-bg2-color: var(--wp--preset--color--surface-2);
	--ssp-dark-mode-player-panel-bg: var(--wp--preset--color--surface);
	--ssp-dark-mode-player-panel-input-bg: var(--wp--preset--color--surface-3);
	--ssp-light-mode-text-color: var(--wp--preset--color--ink);
	--ssp-light-mode-bg1-color: var(--wp--preset--color--surface-2);
	--ssp-light-mode-bg2-color: var(--wp--preset--color--surface-2);
	--ssp-light-mode-player-panel-bg: var(--wp--preset--color--surface);
	--ssp-light-mode-player-panel-input-bg: var(--wp--preset--color--surface-3);
	--ssp-progress-bar-color: var(--wp--preset--color--accent);
	--ssp-play-btn-color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--sans);
	border-radius: var(--wp--custom--radius--lg);
}

/* SSP sets Roboto and Poppins on many of its parts, some with long selectors. */
.castos-player:is(.dark-mode, .light-mode) * {
	font-family: inherit !important;
}

.castos-player.castos-player:is(.dark-mode, .light-mode) .player {
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
}

.castos-player.castos-player:is(.dark-mode, .light-mode) .episode-title {
	font-family: var(--wp--preset--font-family--serif) !important;
	font-weight: 700;
	font-size: 18px;
}

.castos-player.castos-player:is(.dark-mode, .light-mode) :is(.progress, .ssp-progress) {
	background-color: var(--wp--preset--color--line);
}

.castos-player.castos-player:is(.dark-mode, .light-mode) .player-panel .player-panel-row :is(input, textarea) {
	color: var(--wp--preset--color--ink);
}

.castos-player.castos-player:is(.dark-mode, .light-mode) .close-btn {
	background-color: var(--wp--preset--color--ink);
}

.castos-player.castos-player:is(.dark-mode, .light-mode) .close-btn span {
	background-color: var(--wp--preset--color--surface);
}

/* "Download file | Play in new window | Duration", under the player: links like the network posts' blog
   names, the separators faint. */
.podcast_meta {
	color: var(--wp--preset--color--line-strong);
	font-size: var(--wp--preset--font-size--small);
}

.podcast_meta p {
	margin: var(--wp--preset--spacing--2) 0 0;
}

.podcast_meta span {
	color: var(--wp--preset--color--ink-muted);
}

.podcast_meta a {
	color: var(--as-accent-ink);
	font-weight: 600;
	text-decoration: none;
}

.podcast_meta a:hover {
	text-decoration: underline;
}

/* SSP's episode list block (the /podcast/ page), styled like the post list (.as-post-list). */
.ssp-podcast-list .ssp-podcast-list__articles {
	gap: 0;
}

.ssp-podcast-list .ssp-podcast-list__articles > article {
	margin: 0;
	padding-block: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--preset--color--line);
}

.ssp-podcast-list .ssp-podcast-list__articles > article:first-child {
	padding-top: 0;
	border-top: 0;
}

.ssp-podcast-list article .ssp-episode-title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.ssp-podcast-list article .ssp-episode-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ssp-podcast-list article .ssp-episode-title a:hover {
	opacity: 1;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.ssp-podcast-list article .ssp-episode-list-content {
	color: var(--wp--preset--color--ink-muted);
}

.ssp-podcast-list .ssp-podcast-list__pagination a {
	color: var(--as-accent-ink);
	font-weight: 600;
	text-decoration: none;
}

.ssp-podcast-list .ssp-podcast-list__pagination a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Comments ######################################################################## */

.as-comments .wp-block-comment-template {
	list-style: none;
	padding: 0;
}

.as-comments .wp-block-comment-template li {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--4);
}

.as-comments .wp-block-avatar img {
	border-radius: 50%;
}

.as-comments :where(input[type="text"], input[type="email"], input[type="url"], textarea),
.wp-block-search__input {
	font: 400 16px/24px var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 2px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--md);
	padding: 8px 12px;
}

.as-comments :where(input, textarea):hover,
.wp-block-search__input:hover {
	background: var(--wp--preset--color--surface-2);
}

.as-comments :where(input, textarea):focus,
.wp-block-search__input:focus {
	border-color: var(--as-focus);
	background: var(--wp--preset--color--surface);
	outline: none;
}

.as-comments .comment-form label {
	font: 600 14px/20px var(--wp--preset--font-family--sans);
}

/* Buttons: block styles registered in functions.php ################################ */

.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-hover);
}

.wp-block-button.is-style-accent .wp-block-button__link:active {
	background: var(--wp--preset--color--accent-active);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--line-strong);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-2);
	border-color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-3);
}

/* Footer ########################################################################## */

.as-footer {
	background: var(--wp--preset--color--surface-2);
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

.as-footer-in {
	max-width: var(--as-content-max);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--5) var(--as-gutter);
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5) !important;
}

.as-footer-in > * {
	margin: 0;
}

.as-footer a {
	color: var(--wp--preset--color--ink);
}

.as-footer .wp-block-loginout a {
	color: var(--wp--preset--color--ink);
}

.as-footer-version {
	margin-left: auto !important;
	font: 400 12px/16px var(--wp--preset--font-family--mono);
}