/*
 * pages.css - the static page templates.
 *
 * Scope: /about/, /gallery/, /contact/, /ring-size-guide/ and the four legal
 * pages. Every rule is scoped to one of the mode classes page.php puts on the
 * <article>, so cart, checkout, my account, the blogroll and the front page
 * (mode "app") are untouched by this file. That is deliberate: those five are
 * owned by other packages and three of them are the highest-risk surfaces on
 * the project.
 *
 * What this file does NOT own:
 *   - the /gallery/ grid itself. Snippet 40 prints it inline at wp_head
 *     priority 100, after this stylesheet, and wins the specificity war on
 *     purpose with a :not(#individual-image) trick. Nothing here restates a
 *     property snippet 40 sets; the tile treatment below only adds properties
 *     it leaves alone.
 *   - in-content link colour (snippet 31)
 *   - the pill button (legacy-customizer.css). The Contact Form 7 submit is
 *     given the pill here because CF7 is this template's furniture, and a
 *     square grey submit is the only button on the site that is not a pill.
 *
 * The measure. Body copy on this site is Catamaran 300 at 19px. The live pages
 * run it the full width of the container, which is 1312px on /about/ and about
 * 918px on /privacy-policy/: 145 and 100 characters a line against the 60-80
 * that is readable. Articles already solve this - snippet 22 FIX 11 caps a
 * single post at 800px, giving a 672px text column - so the number below is the
 * site's own answer applied to the pages that never got it.
 */

/* ==========================================================================
   1. The reading frame

   ONE column, set on the container, not on each child.

   Round 1 capped the children individually and let tables step out to a wider
   960px track that shared the page's centre line. On /ring-size-guide/ that put
   the conversion chart's left edge 140px outside the left edge of its own H2 -
   (960 - 680) / 2 to the pixel - which reads as a component that escaped its
   container. The measure is now a property of the container, so a child cannot
   disagree with its heading about where the page starts. Wide data is handled
   by making the table scroll inside the column (section 3), not by widening it.
   ========================================================================== */

.rlj-page--prose {
	/* 680px of Catamaran 300 19px is about 76 characters. */
	--page-measure: 680px;
}

.rlj-page--prose > .inside-article {
	margin-inline: auto;
	max-width: var(--page-measure);
}

/*
 * base.css indents lists with margin-left: 3em. Nothing overrides the left
 * margin any more now that the children are not individually centred, so the
 * indent has to be moved explicitly or it lands on top of the container's own
 * left edge and doubles.
 */
.rlj-page--prose .entry-content > ul,
.rlj-page--prose .entry-content > ol {
	margin-left: 0;
	padding-left: 3em;
}

/*
 * /privacy-policy/ and any other page that inherits the WooCommerce sidebar.
 * Centring the copy inside the 854px column would indent it away from the
 * sidebar it sits beside, so here the measure is a left-aligned cap and wide
 * furniture takes the whole column. Both still start on the same left edge,
 * which is the thing that matters; only the right edge differs.
 *
 * The sidebar itself is not this file's call. It is on /privacy-policy/ and the
 * 404 page because GP's global layout option was never set, and open item O8
 * rules that the accident is reproduced through the cutover so a page-layout
 * change and a whole-theme swap never land in the same window.
 */
body.right-sidebar .rlj-page--prose {
	/*
	 * A touch wider than the centred case. The column here is 854px, so 680
	 * would leave a 174px gutter of nothing between the copy and the sidebar,
	 * which reads as a hole rather than as a margin.
	 */
	--page-measure: 720px;
}

body.right-sidebar .rlj-page--prose > .inside-article {
	max-width: none;
}

body.right-sidebar .rlj-page--prose .entry-header,
body.right-sidebar .rlj-page--prose .entry-content > * {
	max-width: var(--page-measure);
}

body.right-sidebar .rlj-page--prose .entry-content > figure.wp-block-table,
body.right-sidebar .rlj-page--prose .entry-content > .rlj-table-scroll {
	max-width: none;
}

@media (max-width: 768px) {

	.rlj-page--prose {
		--page-measure: 100%;
	}

	.rlj-page--prose .entry-content > ul,
	.rlj-page--prose .entry-content > ol {
		padding-left: 1.5em;
	}
}

/* ==========================================================================
   2. Editorial rhythm

   The live pages give headings no top margin at all, so on /privacy-policy/
   every section title sits 28px under the paragraph it is meant to be
   separated from and the page reads as one undifferentiated column. Sizes,
   families and weights are untouched - those are graded against the baseline -
   only the space around them changes.
   ========================================================================== */

/*
 * h1 carries the 20px heading margin every heading gets, which is the space
 * inside a paragraph, not the space under a page title. 30 more makes the step
 * below the title 50px, the same step an h2 gets from its 2em top margin, so
 * the page has one interval rather than two.
 */
.rlj-page--prose .entry-header,
.rlj-page--gallery .entry-header {
	margin-bottom: 30px;
}

.rlj-page--prose .entry-content > h2,
.rlj-page--gallery .entry-content > h2 {
	margin-top: 2em;
}

.rlj-page--prose .entry-content > h3,
.rlj-page--prose .entry-content > h4 {
	margin-top: 1.6em;
}

.rlj-page--prose .entry-content > *:first-child {
	margin-top: 0;
}

/*
 * The opening paragraph, one step up in size. On the legal pages that is the
 * effective-date line, on /about/ it is the introduction, and on /gallery/ it
 * is what the page is for. Pages whose first block is an image or a form do
 * not match, which is why this is :first-child and not :first-of-type.
 */
.rlj-page--prose .entry-content > p:first-child,
.rlj-page--gallery .entry-content > p:first-child {
	font-size: 21px;
	line-height: 1.55;
}

/* Bullets in brand gold rather than UA black. The same value as the card
   category label, which is the contrast-corrected gold (4.73:1 on white). */
.rlj-page--prose .entry-content li::marker {
	color: var(--card-cat);
}

.rlj-page--prose .entry-content li + li {
	margin-top: 0.5em;
}

.rlj-page--prose .entry-content > hr {
	margin: 3em auto;
}

/* Photographs and diagrams pick up the radius the rest of the site uses. */
.rlj-page--prose .entry-content figure.wp-block-image img {
	border-radius: var(--radius-image);
}

/*
 * A block spacer is an editor-era shim for the margin the theme should have
 * been supplying. There is exactly one in this whole page set, the 23px above
 * the conversion chart heading on /ring-size-guide/, and it was the middle
 * term in a 105px gap under the diagram against a 20px gap above it. Rhythm
 * comes from the type scale here, so the shim is dropped.
 */
.rlj-page--prose .entry-content > .wp-block-spacer {
	display: none;
}

/*
 * The leading diagram plate. /ring-size-guide/ is the only page in this set
 * whose content opens with an image, and its source is one 620x300 JPEG holding
 * two separate ring photographs whose backgrounds do not match: the left one is
 * warmer and darker than the right. Standing them on a shared tinted plate that
 * spans the full measure gives them a common ground, hides the mismatch, and
 * makes the picture read as a deliberate figure rather than a pasted-in photo.
 *
 * margin-bottom is zero because the h2 underneath brings its own 2em (50px),
 * which is the same step the title above the plate now uses.
 */
.rlj-page--prose .entry-content > figure.wp-block-image:first-child {
	background-color: var(--base-2);
	border-radius: var(--radius-card);
	margin-bottom: 0;
	padding: 24px;
}

.rlj-page--prose .entry-content > figure.wp-block-image:first-child img {
	margin-inline: auto;
}

/* ==========================================================================
   3. Tables

   Two live tables depend on this: the ring size conversion chart (5 columns of
   short data, 17 rows) and the cookie table on /privacy-policy/ (4 columns of
   sentences). Both render as a full grid of 1px boxes out of the box, which is
   the `border="1"` HTML attribute plus GP's cell borders. Horizontal rules and
   a banded body carry a data table far better, and on the cookie table the
   vertical rules were actively fighting the wrapped text.

   The chart is a bare <table> in the page content with no figure around it, so
   nothing gave it a scroll box and at 390px it decided the width of the whole
   document: 421px against a 390px viewport, an 8% sideways scroll on a page
   people open on a phone with a ring in their hand. page.php now wraps any
   unwrapped table in .rlj-table-scroll (base.css gives that overflow-x: auto),
   so the data scrolls and the page does not.
   ========================================================================== */

.rlj-page--prose .entry-content > .rlj-table-scroll {
	margin-bottom: var(--paragraph-margin-bottom);
}

.rlj-page--prose .entry-content .rlj-table-scroll > table {
	margin-bottom: 0;
}

.rlj-page--prose .entry-content table {
	border: 0;
	font-size: 17px;
	line-height: 1.5;
}

.rlj-page--prose .entry-content table th,
.rlj-page--prose .entry-content table td {
	border: 0;
	border-bottom: 1px solid var(--rule-color);

	/*
	 * 14px, not 16. Five columns of the conversion chart need about 650px of
	 * ink at this size and the measure is 680, so the two extra pixels a side
	 * are the difference between the chart sitting inside the column and
	 * needing a scrollbar it does not deserve on a desktop.
	 */
	padding: 12px 14px;
	vertical-align: top;
}

.rlj-page--prose .entry-content table thead th {
	background-color: var(--base-2);
	border-bottom: 2px solid var(--contrast);
	font-weight: 600;
}

.rlj-page--prose .entry-content table tbody tr:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.02);
}

.rlj-page--prose .entry-content table tbody tr:last-child th,
.rlj-page--prose .entry-content table tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 768px) {

	.rlj-page--prose .entry-content table {
		font-size: 15px;
	}

	.rlj-page--prose .entry-content table th,
	.rlj-page--prose .entry-content table td {
		padding: 9px 10px;

		/*
		 * `break-word`, deliberately not `anywhere`. Only `anywhere` lowers a
		 * cell's min-content width, and the cookie table on /privacy-policy/
		 * needs about 500px for four columns at this size, so `anywhere` is
		 * the difference between the table fitting a 390px phone and not.
		 * Both were built and read: fitting costs mid-word breaks in the prose
		 * columns ("WooC omm erce", "Rememb ers which"), which looks like a
		 * rendering fault. The honest trade is clean words inside a scroll box.
		 */
		overflow-wrap: break-word;
	}
}

/* ==========================================================================
   4. /gallery/ (page 3525)

   23 bench photographs in snippet 40's three-column square grid. The lede gets
   the reading measure; the grid keeps the full column.

   Round 1 put a 1px hairline and a radius on every tile so the cut-out-on-white
   shots would have an edge. Read back, 23 hairline boxes are the single most
   "WordPress gallery plugin" tell on the page, and a frame around an already
   frameless piece of jewelry gives the eye two edges to read past. The tiles
   are borderless now. What they get instead is a warm ground under the
   photograph, which does the same job (an edge where the shot is lighter than
   the page) without drawing a box, and a lift on hover so it is still obvious
   every tile is a link to the full-size file.
   ========================================================================== */

.rlj-page--gallery {
	--page-measure: 720px;
}

.rlj-page--gallery .entry-header,
.rlj-page--gallery .entry-content > p {
	max-width: var(--page-measure);
}

.rlj-page--gallery .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image a {
	background-color: var(--card-thumb-bg);
	border-radius: var(--radius-image);
	transition: var(--transition-card);
}

.rlj-page--gallery .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image a:hover,
.rlj-page--gallery .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image a:focus-visible {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

/* ==========================================================================
   5. /about/ (page 3236) - the sign-off

   The page ends with three blocks the editor left as three unrelated things in
   a column: a signature scan, a 200px square portrait, and the bold words
   "Richard Lewis" sitting 6px under it. At those settings the name reads as a
   filename printed under an image, not as a credit.

   There is no wrapper to hang a lockup on and this package does not rewrite
   page content, so the group is assembled from what the markup already
   guarantees: the signature is the only figure that follows a paragraph, the
   portrait is the only figure that follows a figure, and the name is the only
   paragraph that both follows a figure and closes the page.
   ========================================================================== */

/* The signature. A rule and real space mark where the biography stops. */
.rlj-page--prose .entry-content > p + figure.wp-block-image {
	border-top: 1px solid var(--rule-color);
	margin-bottom: 22px;
	margin-top: 3.2em;
	padding-top: 2.6em;
}

/*
 * The portrait, floated so the name sits beside it instead of under it. 96px
 * and circular: at 200px square it was competing with the signature, which is
 * the better artefact of the two.
 */
.rlj-page--prose .entry-content > figure.wp-block-image + figure.wp-block-image {
	float: left;
	margin: 0 20px 0 0;
}

.rlj-page--prose .entry-content > figure.wp-block-image + figure.wp-block-image img {
	border-radius: 50%;

	/* The editor wrote width/height into a style attribute, so this needs the
	   same weight to answer it. */
	height: 96px !important;
	width: 96px !important;
}

/* The name, set as a credit: nav face, small, letterspaced, optically centred
   against the portrait beside it. */
.rlj-page--prose .entry-content > figure.wp-block-image + p:last-child {
	color: var(--muted);
	font-family: var(--font-nav);
	font-size: 13px;
	letter-spacing: 0.12em;
	margin-bottom: 0;
	min-height: 96px;
	padding-top: 37px;
	text-transform: uppercase;
}

.rlj-page--prose .entry-content > figure.wp-block-image + p:last-child strong {
	font-weight: 700;
}

/* The float above has to be contained or it escapes into the footer. */
.rlj-page--prose .entry-content::after {
	clear: both;
	content: "";
	display: block;
}

/* ==========================================================================
   6. /contact/ (page 3395)

   The live page is the worst-looking template on the site and has a real
   layout bug behind it. GenerateBlocks generated the same uniqueIds for this
   page and for the site-wide footer element, so style-3395.css carries both,
   and `.gb-container-e1bd60bb{width:200%}` - written for a footer column -
   lands on the contact card here. The document is 2688px wide at a 1440px
   viewport and the page scrolls sideways.

   Ruling C4 renames these blocks to rlj-* and WP3 owns rewriting page 3395's
   content. Until that lands the markup is what it is, so the rules below beat
   the generated CSS on specificity rather than editing the page. Every one of
   them survives the rewrite as a no-op.
   ========================================================================== */

.rlj-page--contact {
	--page-measure: 780px;
}

.rlj-page--contact > .inside-article {
	margin-inline: auto;
	max-width: var(--page-measure);
}

/* The 100px block spacer between the form and the card. Spacing here is the
   card's own margin, so the spacer would only double it. */
.rlj-page--contact .entry-content > .wp-block-spacer {
	display: none;
}

/* -------- Contact Form 7 (form 3394) -------- */

/*
 * CF7 nests the field inside its label: `<label>Your name<br><span
 * class="wpcf7-form-control-wrap"><input></span></label>`. So the label styling
 * has to be undone again on the control, because base.css gives every input
 * `font: inherit`.
 */
.rlj-page--contact .wpcf7 label {
	color: var(--muted);
	display: block;
	font-family: var(--font-nav);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.rlj-page--contact .wpcf7 label br {
	display: none;
}

.rlj-page--contact .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

.rlj-page--contact .wpcf7 input[type="text"],
.rlj-page--contact .wpcf7 input[type="email"],
.rlj-page--contact .wpcf7 input[type="tel"],
.rlj-page--contact .wpcf7 textarea {
	background-color: var(--form-bg);
	border: 1px solid var(--form-border);
	border-radius: var(--radius-image);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: var(--fw-body);
	letter-spacing: normal;
	padding: 13px 16px;
	text-transform: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.rlj-page--contact .wpcf7 input[type="text"]:focus,
.rlj-page--contact .wpcf7 input[type="email"]:focus,
.rlj-page--contact .wpcf7 input[type="tel"]:focus,
.rlj-page--contact .wpcf7 textarea:focus {
	background-color: var(--form-bg-focus);
	border-color: var(--card-cat);
	box-shadow: 0 0 0 3px rgba(154, 106, 0, 0.15);
}

/*
 * The field carries rows="10", which at 17px and a 1.6 line height is a 300px
 * box that dominates the page and dwarfs the three inputs above it. Height
 * rather than min-height, so the rows attribute stops winning, and resizable so
 * anyone writing a long message can still have the room.
 */
.rlj-page--contact .wpcf7 textarea {
	display: block;
	height: 190px;
	min-height: 120px;
	resize: vertical;
}

/*
 * Name and email share a row on anything wider than a phone. The grid is on
 * the form rather than on a wrapper because CF7 emits one <p> per field and
 * there is nothing else to hang it on. Everything that is not one of the first
 * two paragraphs spans both columns, including the hidden-fields fieldset, the
 * honeypot from snippet 34 and the response output.
 */
.rlj-page--contact .wpcf7-form {
	column-gap: 24px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rlj-page--contact .wpcf7-form > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.rlj-page--contact .wpcf7-form > p:nth-of-type(1) {
	grid-column: 1;
}

.rlj-page--contact .wpcf7-form > p:nth-of-type(2) {
	grid-column: 2;
}

@media (max-width: 600px) {

	.rlj-page--contact .wpcf7-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.rlj-page--contact .wpcf7-form > p:nth-of-type(1),
	.rlj-page--contact .wpcf7-form > p:nth-of-type(2) {
		grid-column: 1 / -1;
	}
}

/*
 * The pill. Every other call to action on this site is one, including the
 * "Contact me" button in the footer directly below this form; the submit is a
 * square grey box only because live rule 8 in the Customizer block never
 * listed input[type=submit]. base.css keeps that GP-equivalent default for
 * bare buttons site-wide, so this widening is scoped to the contact form.
 */
.rlj-page--contact .wpcf7 input[type="submit"] {
	background-color: var(--btn-bg);
	border: 0;
	border-radius: var(--radius-button);
	color: var(--btn-text);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: var(--fw-button);
	letter-spacing: 0.06em;
	padding: 14px 40px;
	text-transform: uppercase;
	transition: var(--transition-button);
	width: auto;
}

.rlj-page--contact .wpcf7 input[type="submit"]:hover,
.rlj-page--contact .wpcf7 input[type="submit"]:focus {
	background-color: var(--btn-bg-hover);
}

.rlj-page--contact .wpcf7 .wpcf7-spinner {
	margin: 0 0 0 14px;
}

/* Validation. CF7's own tip is a red-bordered yellow block that inherits the
   uppercase label styling above; this returns it to a plain field message. */
.rlj-page--contact .wpcf7 .wpcf7-not-valid-tip {
	color: #b3261e;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	margin-top: 6px;
	text-transform: none;
}

.rlj-page--contact .wpcf7 .wpcf7-form-control.wpcf7-not-valid {
	border-color: #b3261e;
}

.rlj-page--contact .wpcf7 form .wpcf7-response-output {
	background-color: var(--cream);
	border: 1px solid var(--cream-border);
	border-radius: var(--radius-card);
	font-size: 16px;
	margin: 28px 0 0;
	padding: 14px 20px;
}

/* -------- The contact card -------- */

/*
 * The form's last <p> already carries a 28px bottom margin, so 32 here makes
 * the step from the submit button to the card 60px, which is the interval the
 * gaps between fields run on. Round 1 used 56 and the step measured about 90,
 * the one gap on the page that was out of scale with every other one.
 */
.rlj-page--contact .gb-container-b085631c {
	margin-top: 32px;
}

/*
 * width:200% is the collision described at the top of this section. height:100%
 * is meaningless outside the footer's flex row and only ever produced a
 * scrollbar. The card treatment is the same cream panel used by the mid-article
 * CTA and the author box, so it reads as part of the same family.
 *
 * column-gap is zero because the two halves are separated by a rule that pays
 * for its own space: 40px of air, the hairline, 40px of air. Round 1 had the
 * phone number starting at 55% of the card against nothing at all, which read
 * as a line that had drifted rather than as a second column.
 */
.rlj-page--contact .gb-container-e1bd60bb {
	background-color: var(--cream);
	border: 1px solid var(--cream-border);
	border-radius: var(--radius-card);
	column-gap: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	height: auto;
	padding: 32px 36px 36px;
	width: 100%;
}

/*
 * 22px, not the 36px `has-large-font-size` emits. This is the secondary route
 * to a jeweler who would rather you used the form above it; at 36px Playfair
 * bold it was the loudest thing on a page whose subject is the form.
 */
.rlj-page--contact .gb-container-e1bd60bb > h2 {
	font-size: 22px;
	grid-column: 1 / -1;
	margin-bottom: 24px;
}

/*
 * 19px, not the 22px GenerateBlocks emits. Build spec 4.7 anomaly 1: the same
 * address block renders at 19px in the footer on every other page, and the
 * 22px here is the other half of the uniqueId collision.
 */
.rlj-page--contact .gb-headline-37420255,
.rlj-page--contact .gb-headline-bf8e162e {
	font-size: var(--fs-footer-contact);
	line-height: 1.7;
	margin-bottom: 0;
}

.rlj-page--contact .gb-headline-37420255 {
	padding-right: 40px;
}

/*
 * One line against four wants centring, not top alignment, or it hangs.
 *
 * display:flex and align-items:center are LOAD-BEARING, not decoration. This
 * markup is a GenerateBlocks headline left in page 3395's content, and it is the
 * plugin that used to supply `p.gb-headline-bf8e162e{display:flex;align-items:
 * center}` (see spec/assets/gb-file-3395-contact.css). When GenerateBlocks was
 * deactivated at cutover that rule went with it, and this block restyled the
 * element without carrying it over, so the icon span and the number stopped
 * sharing a line: the svg fell back to inline layout, the number dropped
 * beneath it, and the 40px padding below read as an indent. Reported
 * 2026-08-10. Nothing else on the page depends on the plugin.
 */
.rlj-page--contact .gb-headline-bf8e162e {
	align-items: center;
	align-self: center;
	border-left: 1px solid var(--cream-border);
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5em;
	padding-left: 40px;
}

/*
 * line-height:0 collapses the span to the glyph so align-items has a box the
 * same height as the icon to centre. GB paired it with padding-top:.1em, which
 * grew the box at the top and pushed the glyph low; the gap above replaces its
 * padding-right and nothing offsets the cross axis.
 */
.rlj-page--contact .gb-headline-bf8e162e .gb-icon {
	flex: 0 0 auto;
	line-height: 0;
}

.rlj-page--contact .gb-headline-bf8e162e .gb-icon svg {
	fill: currentColor;
	height: 1.1em;
	width: 1.1em;
}

@media (max-width: 600px) {

	/*
	 * 30px inside the card against the 16px the page runs outside it. Round 1
	 * used 22 and the card's own edge and the text inside it were within a few
	 * pixels of colliding, so the panel read as a tint rather than as an object.
	 */
	.rlj-page--contact .gb-container-e1bd60bb {
		grid-template-columns: minmax(0, 1fr);
		padding: 28px 30px 32px;
		row-gap: 20px;
	}

	.rlj-page--contact .gb-headline-37420255 {
		padding-right: 0;
	}

	/* The rule turns with the layout: a divider between rows, not columns. */
	.rlj-page--contact .gb-headline-bf8e162e {
		border-left: 0;
		border-top: 1px solid var(--cream-border);
		padding-left: 0;
		padding-top: 20px;
	}
}

/* ==========================================================================
   7. Reduced motion

   a11y.css already collapses transition durations globally, which leaves the
   hover transform still moving instantly. For a grid of 23 tiles that is worth
   removing outright.
   ========================================================================== */

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

	.rlj-page--gallery .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image a:hover,
	.rlj-page--gallery .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image a:focus-visible {
		transform: none;
	}
}