/*
 * andycoates — supplementary styles
 *
 * theme.json owns the design tokens (colour, type scale, spacing, layout).
 * This file only handles what theme.json cannot express: the /// motif carried
 * over from seventhree, the two-column layout, the post list, and the classic
 * markup that fifteen years of posts were written in.
 */

/* ---------------------------------------------------------------------------
   1. Foundations
   ------------------------------------------------------------------------ */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* A single visible focus treatment for every interactive element. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.skip-link:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   2. Header
   ------------------------------------------------------------------------ */

/* The blog has no logo file, so the site title is set as a wordmark in the
   seventhree manner: orange slashes, then the name. The slashes are generated
   so the Site Title setting stays plain text. */
.ac-brand__title {
	font-size: clamp(1.125rem, 0.8rem + 1.2vw, 1.625rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0;
}

.ac-brand__title a {
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}

.ac-brand__title a::before {
	color: var(--wp--preset--color--accent);
	content: "///";
	font-style: italic;
	margin-right: 0.15em;
}

.ac-brand__title a:hover,
.ac-brand__title a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Inset by the width of the slashes so the tagline starts under the name. */
.ac-brand__tagline {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	margin: 0;
	padding-inline-start: 3.15ch;
}

/* Header nav: "/// HOME" from seventhree, slashes orange on hover and on the
   current page, the label staying white so it reads as position. */
.ac-nav {
	font-size: clamp(0.8125rem, 0.6rem + 0.5vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ac-nav .wp-block-navigation-item__content::before {
	content: "/// ";
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}

.ac-nav .wp-block-navigation-item__content:hover::before,
.ac-nav .wp-block-navigation-item__content:focus::before,
.ac-nav .current-menu-item .wp-block-navigation-item__content::before {
	color: var(--wp--preset--color--accent);
}

.ac-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

/* The header photograph. Held to a band with a fixed ratio so a replacement
 * image of any shape lands at the same height, cropped from the centre rather
 * than pushing the posts down. A new image should be at least 2480px wide to
 * stay sharp at 1240px on a retina screen.
 */
.ac-banner {
	margin-block: var(--wp--preset--spacing--20) 0;
}

.ac-banner img {
	aspect-ratio: 1240 / 240;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* At the desktop ratio a phone-width band is under 100px tall — a sliver. */
@media (max-width: 700px) {
	.ac-banner img {
		aspect-ratio: 3 / 1;
	}
}

.ac-header .is-style-slashed {
	margin-block: var(--wp--preset--spacing--20) 0;
}

/* ---------------------------------------------------------------------------
   3. Layout — content column and slim sidebar
   ------------------------------------------------------------------------ */

/* No padding above: the only space between the header rule and the first post
 * is WordPress's own 1.75rem gap between top-level blocks. V002 stacked header
 * padding and layout padding on top of it, 92px in all, which read as a hole.
 *
 * The content column is capped at the seventhree measure, 760px, and pushed to
 * the left edge; the sidebar sits on the right edge. Both line up with the
 * header above — the title on the left, the nav on the right.
 */
.ac-layout {
	display: grid;
	gap: var(--wp--preset--spacing--40) clamp(2.5rem, 6vw, 6rem);
	grid-template-columns: minmax(0, 760px) 240px;
	justify-content: space-between;
}

/* Grid items default to min-width:auto, which lets a wide table or a long URL
   in a post force the column past its track and push the sidebar off screen. */
.ac-layout__main {
	min-width: 0;
}

/* Core puts the block gap above every child of a flow layout; in a grid that
   would push the sidebar below the top of the column beside it. */
.ac-layout > * {
	margin-block: 0;
}

@media (max-width: 960px) {
	.ac-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ac-layout__side {
		border-top: 1px solid var(--wp--preset--color--hairline);
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* ---------------------------------------------------------------------------
   4. Post list — home, archives and search
   ------------------------------------------------------------------------ */

.ac-listing-head {
	margin-bottom: var(--wp--preset--spacing--30);
}

.ac-listing-title {
	font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	margin: 0;
}

.ac-listing-intro {
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
}

.ac-post-list {
	border-top: 1px solid var(--wp--preset--color--hairline);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ac-post-list > li {
	margin: 0;
}

/* The list bleeds out by the amount each row is padded, so the hover highlight
   has breathing room while the text lines up with the heading above — and the
   top rule and every row rule share the same two ends. */
.ac-post-list {
	margin-inline: calc(var(--wp--preset--spacing--20) * -1);
}

.ac-row {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	column-gap: var(--wp--preset--spacing--30);
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	position: relative;
	transition: background-color 0.18s ease;
}

.ac-row:hover,
.ac-row:focus-within {
	background-color: #0b0b0b;
}

.ac-row > * {
	margin-block: 0;
}

.ac-row__thumb {
	aspect-ratio: 3 / 2;
	background-color: #0b0b0b;
	border: 1px solid var(--wp--preset--color--hairline);
	margin: 0;
	overflow: hidden;
	transition: border-color 0.18s ease;
}

.ac-row:hover .ac-row__thumb {
	border-color: var(--wp--preset--color--accent);
}

.ac-row__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* A post with no library image still gets a tile, marked with the motif. */
.ac-row__thumb.is-empty {
	align-items: center;
	display: flex;
	justify-content: center;
}

.ac-row__thumb.is-empty::before {
	color: var(--wp--preset--color--hairline);
	content: "///";
	font-size: 2rem;
	font-style: italic;
	font-weight: 700;
}

.ac-row__body > * {
	margin-block: 0;
}

.ac-row__title {
	font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
	letter-spacing: -0.01em;
	margin-block: 0.35em 0;
}

.ac-row__title a {
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}

/* One link per row, stretched over the whole strip. */
.ac-row__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.ac-row:hover .ac-row__title a,
.ac-row__title a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.ac-row__excerpt {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-top: 0.6em;
}

.ac-row__excerpt p {
	margin: 0;
}

.ac-row__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

@media (max-width: 700px) {
	.ac-row {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.ac-row__thumb {
		aspect-ratio: 1;
	}

	.ac-row__excerpt {
		display: none;
	}
}

.ac-pagination {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	margin-top: var(--wp--preset--spacing--40);
	text-transform: uppercase;
}

.ac-pagination .page-numbers {
	color: var(--wp--preset--color--muted);
	padding: 0 0.35em;
}

.ac-pagination .page-numbers.current {
	color: var(--wp--preset--color--accent);
}

/* Home feed --------------------------------------------------------------
   Whole posts one after another, three to a page, as the blog always read.
   A slashed rule between them marks where one ends and the next begins. */

.ac-feed {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ac-feed > li {
	margin: 0;
}

.ac-feed > li + li {
	margin-top: var(--wp--preset--spacing--40);
}

.ac-feed > li + li::before {
	color: var(--wp--preset--color--hairline);
	content: "////////////////////////////////////////////////////////////////////////////////////////////////";
	display: block;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.4em;
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--40);
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	white-space: nowrap;
}

/* The same size as a single post's h1, so a post looks alike on its own page
   and in the feed, though here it is an h2 beneath the site title. */
h2.ac-feed__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
	text-wrap: balance;
}

h2.ac-feed__title a {
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}

h2.ac-feed__title a:hover,
h2.ac-feed__title a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.ac-feed__comments {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ac-feed__comments a {
	color: var(--wp--preset--color--muted);
	transition: color 0.18s ease;
}

.ac-feed__comments a::before {
	color: var(--wp--preset--color--accent);
	content: "/// ";
}

.ac-feed__comments a:hover,
.ac-feed__comments a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
   5. Meta line — date and categories
   ------------------------------------------------------------------------ */

.ac-meta {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	gap: 0.4em 1.25em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ac-meta > * {
	margin: 0;
}

/* Categories sit above the row's stretched link so they stay clickable. */
.ac-meta a {
	color: inherit;
	position: relative;
	transition: color 0.18s ease;
	z-index: 1;
}

.ac-meta a:hover,
.ac-meta a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.ac-meta .wp-block-post-terms::before {
	color: var(--wp--preset--color--accent);
	content: "/// ";
}

/* ---------------------------------------------------------------------------
   6. A single post
   ------------------------------------------------------------------------ */

.ac-article > * {
	margin-block: 0;
}

.ac-article > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ac-article__head .wp-block-post-title {
	margin: 0;
	text-wrap: balance;
}

/* Page titles carry the motif, as they do on seventhree. */
h1.ac-page-title {
	font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

.ac-page-title::before {
	color: var(--wp--preset--color--accent);
	content: "/// ";
}

.ac-tags {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	line-height: 2;
}

.ac-tags a {
	border: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--muted);
	display: inline-block;
	line-height: 1.6;
	margin: 0 0.25em 0.35em 0;
	padding: 0 0.5em;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.ac-tags a:hover,
.ac-tags a:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.ac-post-nav {
	border-block: 1px solid var(--wp--preset--color--hairline);
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
}

.ac-post-nav > * {
	flex: 1 1 0;
	margin: 0;
}

.ac-post-nav a {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-weight: 700;
	line-height: 1.35;
	transition: color 0.18s ease;
}

.ac-post-nav a:hover,
.ac-post-nav a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.ac-post-nav .post-navigation-link__label {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.14em;
	margin-bottom: 0.4em;
	text-transform: uppercase;
}

.ac-post-nav__older .post-navigation-link__label::before {
	color: var(--wp--preset--color--accent);
	content: "/// ";
}

.ac-post-nav__newer .post-navigation-link__label::after {
	color: var(--wp--preset--color--accent);
	content: " ///";
}

/* ---------------------------------------------------------------------------
   7. Post text
   ------------------------------------------------------------------------ */

/* Font, size, colour and line height for post text are set on core/post-content
 * in theme.json — the readable sans, slightly off-white against the black, with
 * Courier kept for headings, captions and everything around the post.
 *
 * Spacing between paragraphs is set here rather than with the block gap, which
 * at 1.75rem is right between page sections and too loose between paragraphs.
 * Core wraps its own rule in :where(), so a single class beats it.
 */
/* A few posts paste a full URL as link text, 60 to 90 characters with no
   space to break at; on a phone it ran out of the column. */
.ac-prose {
	overflow-wrap: break-word;
}

.ac-prose > * {
	margin-block: 0;
}

.ac-prose > * + * {
	margin-block-start: 1.2em;
}

.ac-prose h2,
.ac-prose h3,
.ac-prose h4 {
	color: var(--wp--preset--color--contrast);
	margin-block-start: 2em;
}

.ac-prose strong,
.ac-prose b {
	color: var(--wp--preset--color--contrast);
}

/* Floats from classic posts must not run into the tags and navigation below. */
.ac-prose::after {
	clear: both;
	content: "";
	display: table;
}

.ac-prose ul,
.ac-prose ol {
	padding-inline-start: 1.4em;
}

.ac-prose li + li {
	margin-top: 0.35em;
}

.ac-prose hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* Links: a permanent underline, as on seventhree, because orange-on-hover alone
   leaves a link invisible to anyone reading rather than hunting. */
.ac-prose a:not(.wp-element-button) {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--muted);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.ac-prose a:not(.wp-element-button):hover,
.ac-prose a:not(.wp-element-button):focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration-color: var(--wp--preset--color--accent);
}

/* An image link carries no underline; it would draw a line under the picture. */
.ac-prose a:has(> img) {
	text-decoration: none;
}

.ac-prose blockquote:not(.wp-block-pullquote blockquote) {
	border-left: 2px solid var(--wp--preset--color--accent);
	margin-inline: 0;
	padding-left: var(--wp--preset--spacing--30);
}

.ac-prose code,
.ac-prose pre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
}

.ac-prose table {
	border-collapse: collapse;
	width: 100%;
}

.ac-prose :is(td, th) {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: 0.5em 0.75em;
}

/* Classic editor markup ---------------------------------------------------
   Ninety of the posts predate the block editor. Their images, captions and
   videos were laid out by Twenty Ten's stylesheet, which goes with it, so the
   rules they depend on are restated here. */

/* Images were inserted at 1024px and wider, with width and height attributes
   that would otherwise overflow the column. */
.ac-prose img {
	height: auto;
	max-width: 100%;
}

/* Portrait phone shots fill the whole column and stand taller than the screen.
 * The height is capped to the viewport and the picture contained within its
 * box, so it shrinks to fit, centred, and the bands either side are the page's
 * own black. Landscape images never reach the cap.
 *
 * Not `width: auto`, which looks like the obvious way to let the width follow.
 * WordPress marks lazy images sizes="auto", telling the browser to pick a file
 * from the laid-out width — and with the width left to the image itself that is
 * circular, so Chrome settles on its 300px default for every picture.
 *
 * Top-level images only. Gallery tiles are .wp-block-image too, and their crop
 * depends on core's own sizing — reaching into a gallery would undo it.
 */
.ac-prose > :is(.wp-block-image, .wp-caption, p) img:not(.alignleft):not(.alignright) {
	display: block;
	margin-inline: auto;
	max-height: 85vh;
	object-fit: contain;
}

/* Classic posts often run text straight on after an image inside the same
   paragraph, so a centred image keeps a gap beneath it. */
.ac-prose img.aligncenter,
.ac-prose .aligncenter:not(.wp-block-image) {
	display: block;
	margin-block-end: 0.75em;
	margin-inline: auto;
}

.ac-prose .alignleft:not(.wp-block-image) {
	float: left;
	margin: 0.3em var(--wp--preset--spacing--30) 1em 0;
	max-width: 50%;
}

.ac-prose .alignright:not(.wp-block-image) {
	float: right;
	margin: 0.3em 0 1em var(--wp--preset--spacing--30);
	max-width: 50%;
}

/* The caption shortcode writes its width as an inline style — the image's
   natural width — so only !important keeps a wide one inside the column. */
.ac-prose .wp-caption {
	max-width: 100% !important;
}

.ac-prose .wp-caption img {
	display: block;
}

.ac-prose .wp-caption-text,
.ac-prose .gallery-caption {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.6em;
	text-align: center;
}

/* Every video in the archive was embedded at a fixed 640 by 360. Full column
   width at the same ratio instead. Iframes inside a core Embed block are left
   alone — responsive-embeds already sizes those. */
.ac-prose :not(.wp-block-embed__wrapper) > iframe:is([src*="youtube.com"], [src*="vimeo.com"]) {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	width: 100%;
}

.ac-prose iframe {
	max-width: 100%;
}

/* One 2012 post sets a sentence in black, written for Twenty Ten's white page.
   On this ground it would be invisible. Only an inline style can do that, so
   only !important can undo it. */
.ac-prose [style*="color: #000000"],
.ac-prose [style*="color:#000000"],
.ac-prose [style*="color: #000;"],
.ac-prose [style*="color: rgb(0, 0, 0)"] {
	color: inherit !important;
}

@media (max-width: 600px) {
	.ac-prose .alignleft:not(.wp-block-image),
	.ac-prose .alignright:not(.wp-block-image) {
		float: none;
		margin-inline: auto;
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   8. Comments
   ------------------------------------------------------------------------ */

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

.ac-comment {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding-block: var(--wp--preset--spacing--20);
}

.ac-comment .wp-block-comment-author-name {
	color: var(--wp--preset--color--contrast);
}

.ac-comment .wp-block-comment-content {
	color: var(--wp--preset--color--prose);
	font-family: var(--wp--preset--font-family--sans);
}

.ac-comments .comment-form label {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	margin-bottom: 0.4em;
	text-transform: uppercase;
}

/* Ruled underneath rather than boxed, as the seventhree contact form is. */
.ac-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.6em 0;
	transition: border-color 0.18s ease;
	width: 100%;
}

.ac-comments .comment-form :is(input, textarea):focus {
	border-bottom-color: var(--wp--preset--color--accent);
	outline: none;
}

/* ---------------------------------------------------------------------------
   9. Sidebar
   ------------------------------------------------------------------------ */

.ac-sidebar {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
}

.ac-sidebar h2.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.ac-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Each entry is a hairline row: the name on the left and its post count on the
   right. Core prints the count as bare text after the link, so the row is a
   flex line and the count simply falls to the far end. */
.ac-list li {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--muted);
	display: flex;
	gap: 1em;
	justify-content: space-between;
	margin: 0;
	padding: 0.45em 0;
}

.ac-list a {
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}

.ac-list a:hover,
.ac-list a:focus-visible,
.ac-list .current-cat > a {
	color: var(--wp--preset--color--accent);
}

/* Sixteen years in a two-column grid keeps the archive short. */
.ac-list--years {
	column-gap: 1.5em;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Search: one ruled line, no box, button inside on the right. */
/* Core paints the button-inside wrapper white; on this ground that is a slab. */
.ac-search .wp-block-search__inside-wrapper {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 0;
	transition: border-color 0.18s ease;
}

.ac-search .wp-block-search__inside-wrapper:focus-within {
	border-bottom-color: var(--wp--preset--color--accent);
}

.ac-search .wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.5em 0;
}

.ac-search .wp-block-search__input:focus,
.ac-search .wp-block-search__input:focus-visible {
	outline: none;
}

.ac-search .wp-block-search__button {
	border: 0;
	margin: 0;
	padding: 0.5em 0 0.5em 1em;
}

.ac-search .wp-block-search__button:hover,
.ac-search .wp-block-search__button:focus {
	background: transparent;
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
  10. Footer
   ------------------------------------------------------------------------ */

.ac-footer {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.1em;
}

.ac-footer p {
	margin: 0;
}

.ac-footer a {
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}

.ac-footer a:hover,
.ac-footer a:focus {
	color: var(--wp--preset--color--accent);
}

.ac-footer__studio a::before {
	color: var(--wp--preset--color--accent);
	content: "/// ";
}

/* ---------------------------------------------------------------------------
  11. Lightbox
   ------------------------------------------------------------------------ */

/* Block-editor images open full-screen on click; the overlay goes on the
   brand's black with the close button moved top-left, as on seventhree. */
body .wp-lightbox-overlay .close-button {
	left: calc(env(safe-area-inset-left) + 16px);
	right: auto;
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}

body .wp-lightbox-overlay .close-button:hover,
body .wp-lightbox-overlay .close-button:focus-visible {
	color: var(--wp--preset--color--accent);
}

body .wp-lightbox-overlay .scrim {
	background-color: var(--wp--preset--color--base) !important;
	opacity: 0.97;
}

/* ---------------------------------------------------------------------------
  12. Editor parity
   ------------------------------------------------------------------------ */

.editor-styles-wrapper {
	background-color: var(--wp--preset--color--base);
}