/**
 * The theme's one stylesheet: what theme.json can't say. The header and
 * footer, cards in lists, and posts written before the block editor
 * (floats, captions, tables, embedded videos).
 */

/*
 * Header: black, with the level-meter stripe under it. It stays at the top
 * of the screen, below the admin bar when that's showing.
 */
.atg-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 1000;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/*
 * On a short page the footer still reaches the bottom of the screen: the
 * main content takes up the room that's left. (The small viewport height:
 * the screen with a phone browser's toolbar showing.)
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

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

/*
 * Whatever the page scrolls to (a heading a link points to, a link reached
 * with the Tab key, the content the "Skip to content" link jumps to) stops
 * below the header.
 */
.atg-main,
.atg-main * {
	scroll-margin-top: 84px;
}

.atg-header::after,
.atg-footer::before {
	--s1: var(--wp--preset--color--red);
	--s2: var(--wp--preset--color--amber);
	--s3: var(--wp--preset--color--green);
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--s1) 54%, var(--s2) 0 82%, var(--s3) 0);
}

.atg-header__inner {
	position: relative;
	padding-block: 12px;
	gap: 24px;
}

.atg-header__logo {
	flex-shrink: 0;
	margin-right: auto;
}

.atg-header__logo a,
.atg-header__logo img {
	display: block;
	text-decoration: none;
}

.atg-header__nav {
	flex-grow: 1;
	gap: 18px;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.atg-header a,
.atg-header .wp-block-navigation-item__content {
	color: #f4efe9;
	text-decoration: none;
}

.atg-header a:hover,
.atg-header a:focus-visible {
	color: var(--wp--preset--color--amber);
}

.atg-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border: 0;
	border-radius: 6px;
	padding: 8px 0;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
}

/* The menu on phones: the whole screen, black. */
.atg-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.atg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0 1rem;
	background: transparent;
	box-shadow: none;
}

/* The button's place in the row; the search box itself lies over the header. */
.atg-header__search {
	min-width: 40px;
	min-height: 40px;
}

.atg-header__search .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
}

.atg-header__search .wp-block-search__button svg {
	display: block;
}

/*
 * The search box lies over the header instead of taking room in it: over the
 * menu on wide screens (never further left than where the menu starts, 210px
 * of logo and a 24px gap in), over the whole row on narrow ones. It's laid
 * out the same open or closed, and a rounded window over it (4px wider than
 * the button and the box, for their focus rings) grows out of the button to
 * open it and shrinks back to close it, so nothing in it moves. (WordPress
 * squeezes a closed box to nothing and grows it back, which made the button
 * jump.)
 */
.atg-header .atg-header__search.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: 1;
	align-items: center;
	gap: 8px;
	width: min(480px, 100% - 234px);
	overflow: visible;
	background: var(--wp--preset--color--ink);
	clip-path: inset(calc(50% - 24px) -4px calc(50% - 24px) calc(100% - 44px) round 24px);
	transition: clip-path 0.25s ease;
}

.atg-header .atg-header__search.wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	clip-path: inset(calc(50% - 24px) -4px calc(50% - 24px) -4px round 24px);
}

.atg-header .atg-header__search.wp-block-search.wp-block-search__button-only .wp-block-search__input {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0 !important;
	height: 40px;
	margin: 0;
	padding-block: 0;
	padding-inline: 16px !important;
	border-inline-width: 1px !important;
	border-radius: 20px;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {

	.atg-header .atg-header__search.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
		transition: none;
	}
}

/* The page between header and footer. */
.atg-main {
	padding-block: var(--wp--preset--spacing--40);
}

/*
 * A black band opens posts and lists: breadcrumbs, then what the page is (a
 * post's type and title, a category's name, a writer). It starts right
 * under the header.
 */
.atg-post,
.atg-archive {
	margin-top: 0;
	padding-top: 0;
}

.atg-band {
	padding-block: 40px 48px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.atg-band > :first-child {
	margin-top: 0;
}

.atg-band a:hover,
.atg-band a:focus-visible {
	color: var(--wp--preset--color--amber);
}

/* Breadcrumbs stay on one line; a long title ends in "…". */
.atg-band .yoast-breadcrumbs {
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
}

.atg-band .yoast-breadcrumbs nav {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.atg-band .yoast-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.atg-crumbs__sep {
	margin-inline: 0.25em;
}

.atg-band h1 {
	margin-top: 28px;
	font-size: clamp(2.125rem, 1.25rem + 3.6vw, 3.5rem);
	text-wrap: balance;
}

.atg-band .wp-block-term-description {
	margin-top: 16px;
	color: #e8e2db;
}

/* Kept narrow inside, since WordPress centres anything narrower in the band. */
.atg-band .wp-block-term-description p {
	max-width: 760px;
}

/* A post's band stretches under its lead image, which sits halfway over it. */
.atg-post {
	--atg-post-overlap: 170px;
}

.atg-post__hero {
	padding-bottom: calc(var(--atg-post-overlap) + 32px);
}

.atg-post:not(:has(.wp-block-post-featured-image)) .atg-post__hero {
	padding-bottom: 48px;
}

.atg-type-label {
	margin-top: 28px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.atg-band .atg-type-label a {
	color: var(--wp--preset--color--amber);
	text-decoration: none;
}

.atg-band .atg-type-label a:hover,
.atg-band .atg-type-label a:focus-visible {
	color: var(--wp--preset--color--paper);
}

.atg-band .atg-type-label + h1 {
	margin-top: 10px;
}

/* "By Christian de Looper and Jane Doe · September 30, 2026" */
.atg-band .atg-meta {
	margin-top: 24px;
	color: #e8e2db;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.atg-meta > * {
	display: inline;
	margin: 0;
	color: inherit;
	font-size: inherit;
}

.atg-meta > .wp-block-post-date::before {
	margin-inline: 0.4em;
	content: "·";
}

.atg-band .atg-byline a {
	color: var(--wp--preset--color--paper);
	font-weight: 700;
	text-decoration: none;
}

/* A writer's page: their photo beside their name, post count and bio. */
.atg-author-profile {
	display: flex;
	gap: 24px;
	align-items: center;
	margin-top: 28px;
}

.atg-author-profile__photo {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.atg-author-profile__photo--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--red);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	font-weight: 800;
}

.atg-band .atg-author-profile__name {
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.atg-author-profile__count {
	margin: 6px 0 0;
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
}

.atg-author-profile__bio {
	max-width: 720px;
	margin-top: 12px;
	color: #e8e2db;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.atg-author-profile__bio p {
	margin: 0;
}

.atg-author-profile__bio p + p {
	margin-top: 0.5em;
}

.atg-author-profile__bio a {
	color: var(--wp--preset--color--paper);
}

/* The search box in the band, on search results and "Page not found". */
.atg-band .atg-band__search {
	margin-top: 24px;
}

.atg-band__search .wp-block-search__inside-wrapper {
	gap: 8px;
	max-width: 560px;
}

.atg-band__search .wp-block-search__input {
	height: 48px;
	padding-inline: 20px;
	border: 0;
	border-radius: 24px;
	font-size: 1rem;
}

.atg-band__search .wp-block-search__button {
	height: 48px;
	margin: 0;
	padding-inline: 24px;
	border-radius: 24px;
}

/* A list's posts, under the band. */
.atg-archive__posts {
	margin-top: 40px;
}

.atg-cards .atg-type-label {
	margin: 14px 0 0;
	font-size: 0.75rem;
}

.atg-cards .atg-type-label a {
	color: var(--wp--preset--color--red-dark);
	text-decoration: none;
}

.atg-cards .atg-type-label + .atg-card__title {
	margin-top: 4px;
}

/* On a type's own page, every card would say the same type. */
.category-reviews .atg-cards .atg-type-label,
.category-guides .atg-cards .atg-type-label,
.category-tutorials .atg-cards .atg-type-label,
.category-news .atg-cards .atg-type-label {
	display: none;
}

/* The lead image: wide, but no wider than most originals. */
.atg-main > .wp-block-post-featured-image.alignwide {
	max-width: 1000px;
}

.atg-main > .wp-block-post-featured-image img {
	border-radius: 6px;
}

.atg-post > .wp-block-post-featured-image {
	position: relative;
	margin-top: calc(-1 * var(--atg-post-overlap));
}

.atg-post > .wp-block-post-content {
	margin-top: 32px;
}

/* About the authors: a black box after the post. */
.atg-author-box {
	margin-top: 56px;
	padding: 28px;
	border-radius: 6px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	line-height: 1.5;
}

.atg-author-box__heading {
	margin: 0 0 16px;
	color: inherit;
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.atg-author-box__author {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.atg-author-box__author + .atg-author-box__author {
	margin-top: 20px;
}

.atg-author-box__photo {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.atg-author-box__photo--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #3d3a37;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.atg-author-box__author:nth-of-type(even) .atg-author-box__photo--initials {
	background: var(--wp--preset--color--red);
}

.atg-author-box__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 800;
}

.atg-author-box__bio {
	margin-top: 4px;
	color: #d8d1c9;
	font-size: 0.9375rem;
}

.atg-author-box__bio p {
	margin: 0;
}

.atg-author-box__bio p + p {
	margin-top: 0.5em;
}

.atg-author-box__bio a {
	color: var(--wp--preset--color--paper);
}

.atg-author-box a.atg-author-box__more {
	display: inline-block;
	margin-top: 6px;
	color: var(--wp--preset--color--amber);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
}

.atg-author-box a:hover,
.atg-author-box a:focus-visible {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

/* More posts like this one, in cards like the ones in lists. */
.atg-related {
	margin-top: 64px;
}

.atg-related__heading {
	margin: 0 0 24px;
}

.atg-related__posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.atg-related__link {
	display: block;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.atg-related__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.atg-related__title {
	margin: 14px 0 0;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.atg-related__link:hover .atg-related__title,
.atg-related__link:focus-visible .atg-related__title {
	color: var(--wp--preset--color--red-dark);
}

.atg-related__date {
	display: block;
	margin-top: 6px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

/*
 * The homepage: the lead, Latest, then a section for each instrument, each
 * under an uppercase heading over a rule.
 */
.atg-home > .atg-home-hero {
	margin-top: 0;
}

.atg-home-latest,
.atg-home-section {
	margin-top: 64px;
}

.atg-home__header {
	display: flex;
	gap: 16px;
	align-items: flex-end;
	margin-bottom: 24px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.atg-home__heading {
	flex-grow: 1;
	margin: 0;
	font-size: 2rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.atg-home__more {
	color: var(--wp--preset--color--red-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

/* The lead: its photo, and beside it the type, title, summary and a button. */
.atg-home-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
}

.atg-home-hero__image {
	display: block;
	flex: 2 1 560px;
	overflow: hidden;
	border-radius: 6px;
}

.atg-home-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.atg-home-hero__text {
	flex: 1 1 320px;
}

.atg-home-hero__type {
	margin: 0;
	color: var(--wp--preset--color--red-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.atg-home-hero__title {
	margin: 10px 0 0;
	font-size: clamp(2rem, 1.25rem + 2.5vw, 3rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.atg-home-hero__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.atg-home-hero__dek {
	margin: 16px 0 0;
	color: #3d3a37;
}

.atg-home-hero__byline {
	margin: 16px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.atg-home-hero a.atg-home-hero__more {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	min-height: 44px;
	margin-top: 22px;
	padding: 10px 20px;
	border-radius: 6px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.atg-home-hero a.atg-home-hero__more:hover,
.atg-home-hero a.atg-home-hero__more:focus-visible {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
}

/* Latest: a row of numbered cards. */
.atg-home-latest__posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.atg-home-latest__link {
	display: block;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.atg-home-latest__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.atg-home-latest__title {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin: 14px 0 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

.atg-home-latest__number {
	flex: 0 0 36px;
	color: var(--wp--preset--color--red);
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1;
}

.atg-home-latest__meta {
	margin: 8px 0 0 48px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

/* A section: its newest post large, with a caption; the next beside it. */
.atg-home-section__posts {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.atg-home-section__lead {
	flex: 2 1 460px;
	min-width: 0;
}

.atg-home-section__lead-link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 6px;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.atg-home-section__lead-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.atg-home-section__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 78%;
	padding: 16px 20px 18px;
	background: var(--wp--preset--color--ink);
}

.atg-home-section__lead-title {
	margin: 0;
	color: var(--wp--preset--color--paper);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
}

.atg-home-section__lead-meta {
	margin: 0;
	color: #d8d1c9;
	font-size: 0.8125rem;
}

.atg-home-section__dek {
	margin: 14px 0 0;
	color: #3d3a37;
}

.atg-home-section__side {
	display: flex;
	flex: 1 1 300px;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.atg-home-section__item + .atg-home-section__item {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.atg-home-section__item-link {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.atg-home-section__item-image {
	flex-shrink: 0;
	width: 132px;
	height: auto;
	border-radius: 6px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.atg-home-section__item-text {
	display: flex;
	flex-direction: column;
}

.atg-home-section__item-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.3;
}

.atg-home-section__date {
	margin-top: 6px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

/*
 * Side by side but narrow, the lead is only as tall as three posts beside
 * it, so the fourth waits for a wider screen (or for the two to stack).
 */
@media (min-width: 836px) and (max-width: 1099.98px) {

	.atg-home-section__item:nth-child(n + 4) {
		display: none;
	}
}

.atg-home-latest__link:hover .atg-home-latest__title,
.atg-home-latest__link:focus-visible .atg-home-latest__title,
.atg-home-section__item-link:hover .atg-home-section__item-title,
.atg-home-section__item-link:focus-visible .atg-home-section__item-title,
.atg-home-hero__title a:hover,
.atg-home-hero__title a:focus-visible {
	color: var(--wp--preset--color--red-dark);
}

.atg-home-section__lead-link:hover .atg-home-section__lead-title,
.atg-home-section__lead-link:focus-visible .atg-home-section__lead-title {
	color: var(--wp--preset--color--amber);
}

/*
 * Ad slots: a dark strip under the header, a dark band on the homepage, and
 * two posts' space in a homepage section. An empty slot isn't there at all;
 * ?ad-slots on an address marks where they go.
 */
.wp-site-blocks > .atg-ad--site-banner {
	margin-block-start: 0;
}

.atg-ad--site-banner,
.atg-ad--home-banner {
	background: var(--wp--preset--color--night);
}

.atg-ad--site-banner {
	padding: 16px 24px;
}

.atg-ad--home-banner {
	margin-top: 64px;
	padding: 32px 24px;
}

.atg-ad__space {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	justify-content: center;
	max-width: var(--atg-ad-width);
	min-height: var(--atg-ad-height);
	margin: 0 auto;
	color: var(--wp--preset--color--mist);
	font-size: 0.8125rem;
	line-height: 1.4;
	text-align: center;
}

.atg-ad__space img {
	max-width: 100%;
	height: auto;
}

.atg-ad__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.atg-ad--preview .atg-ad__space {
	padding: 16px;
	border: 1px dashed #6b645d;
	border-radius: 6px;
}

.atg-ad--in-grid .atg-ad__space {
	max-width: none;
	border-radius: 6px;
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--muted);
}

.atg-ad--in-grid.atg-ad--preview .atg-ad__space {
	border-color: #8a8178;
}

/* Product cards in the theme's colours and fonts. */
.atg-main .atg-product-card {
	--atg-card-background: var(--wp--preset--color--cream);
	--atg-card-accent: var(--wp--preset--color--red);
	--atg-card-award: var(--wp--preset--color--ink);
	--atg-card-ink: var(--wp--preset--color--ink);
	--atg-card-muted: var(--wp--preset--color--muted);
	--atg-card-line: var(--wp--preset--color--line);
	--atg-card-heading-font: var(--wp--preset--font-family--heading);
}

/* Section titles: uppercase, over a rule. */
.atg-section-title,
.atg-related__heading {
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Cards in lists of posts. */
.atg-cards .wp-block-post-template {
	gap: 32px 24px;
}

.atg-cards .wp-block-post-featured-image img {
	border-radius: 6px;
}

.atg-card__title {
	margin-top: 14px;
	font-size: 1.125rem;
	line-height: 1.3;
}

.atg-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.atg-card__date {
	margin-top: 6px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Page numbers under a list: the current page in black. */
.atg-cards .wp-block-query-pagination {
	gap: 6px;
	margin-top: 48px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.atg-cards .wp-block-query-pagination-numbers {
	display: flex;
	gap: 6px;
}

.atg-cards .wp-block-query-pagination a,
.atg-cards .wp-block-query-pagination .page-numbers {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.atg-cards .wp-block-query-pagination a:hover,
.atg-cards .wp-block-query-pagination a:focus-visible {
	background: var(--wp--preset--color--stone);
}

.atg-cards .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.atg-cards .wp-block-query-pagination .page-numbers.dots {
	min-width: 0;
	padding-inline: 4px;
}

/* Footer: black, with the stripe over it. */
.atg-footer {
	margin-top: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--ink);
	color: #e8e2db;
}

.atg-footer__bar {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.atg-footer__disclosure {
	max-width: 420px;
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.atg-footer a,
.atg-footer .wp-block-navigation-item__content {
	color: #f4efe9;
	text-decoration: none;
}

.atg-footer a:hover,
.atg-footer a:focus-visible {
	color: var(--wp--preset--color--amber);
}

.atg-footer__nav {
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.atg-footer__copyright {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: 20px;
	border-top: 1px solid #3d3a37;
	color: #a9a097;
	font-size: 0.8125rem;
}

/* Posts written before the block editor. */
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.wp-block-post-content .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.wp-block-post-content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.wp-block-post-content .aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-block-post-content .wp-caption {
	max-width: 100%;
}

.wp-block-post-content .wp-caption-text {
	margin-top: 0.5em;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.wp-block-post-content iframe {
	max-width: 100%;
}

.wp-block-post-content iframe[src*="youtube"],
.wp-block-post-content iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.wp-block-post-content th,
.wp-block-post-content td {
	padding: 0.5em 0.75em;
	border: 1px solid var(--wp--preset--color--line);
	vertical-align: middle;
}

.wp-block-post-content blockquote:not(.wp-block-quote) {
	margin-left: 0;
	padding-left: 1.25rem;
	border-left: 4px solid var(--wp--preset--color--red);
}

/*
 * Below 720px the full menu doesn't fit beside the logo, so it folds into
 * the menu button (WordPress does that on its own only below 600px): menu
 * button on the left, logo in the middle, search on the right.
 */
@media (max-width: 719.98px) {

	.atg-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.atg-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.atg-header .atg-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		gap: 16px;
	}

	.atg-header__nav {
		grid-area: 1 / 1;
		justify-self: start;
	}

	.atg-header__logo {
		grid-area: 1 / 2;
		margin: 0;
	}

	.atg-header__search {
		grid-area: 1 / 3;
		justify-self: end;
	}

	/* A bigger target for thumbs, in the same place. */
	.atg-header .wp-block-navigation__responsive-container-open {
		margin: -8px;
		padding: 8px;
	}

	.atg-header .atg-header__search.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
		width: min(480px, 100%);
	}
}

@media (max-width: 600px) {

	/*
	 * On phones the admin bar scrolls away with the page, so the header
	 * doesn't wait below it, and nothing needs to leave room for it.
	 */
	.atg-header {
		top: 0;
	}

	:root {
		scroll-padding-top: 0;
	}

	.atg-main,
	.atg-main * {
		scroll-margin-top: 76px;
	}

	.atg-header__inner {
		padding-block: 8px;
	}

	.atg-header__logo img {
		max-width: 170px;
		height: auto;
	}

	.atg-post {
		--atg-post-overlap: 56px;
	}

	.atg-band {
		padding-top: 24px;
	}

	.atg-author-profile {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
	}

	.atg-author-profile__photo {
		width: 72px;
		height: 72px;
	}

	/* Page numbers a little smaller, so they fit on one line. */
	.atg-cards .wp-block-query-pagination,
	.atg-cards .wp-block-query-pagination-numbers {
		gap: 4px;
	}

	.atg-cards .wp-block-query-pagination a,
	.atg-cards .wp-block-query-pagination .page-numbers {
		min-width: 34px;
		height: 36px;
		padding-inline: 8px;
	}

	/* The date on a line of its own, so a long byline never leaves it dangling. */
	.atg-meta > .wp-block-post-date {
		display: block;
	}

	.atg-meta > .wp-block-post-date::before {
		content: none;
	}

	.atg-author-box {
		padding: 20px;
	}

	/* A section's lead keeps its caption under the photo, not over it. */
	.atg-home-section__caption {
		position: static;
		max-width: none;
	}

	.atg-home__heading {
		font-size: 1.625rem;
	}

	.wp-block-post-content .alignleft,
	.wp-block-post-content .alignright {
		float: none;
		margin-inline: auto;
	}
}