/**
 * Generated lettering — Almendra Display.
 *
 * Self-hosted: no third-party font request, no privacy surface, no extra DNS lookup.
 * The face is OFL, which permits commercial use and self-hosting.
 *
 * Class names use the full `aethyrdancer-` prefix, never `ad-`: ad blockers apply
 * generic cosmetic filters to `ad-*` and silently hide the element with no console
 * error. See the note at the top of tokens.css.
 */

/*
 * Amarante carries the quiet pair and the product title — see the `ui`, `meta` and
 * `title` variants in inc/lettering.php. Self-hosted for the same reasons as the other
 * face: no third-party request, no privacy surface, no extra DNS lookup. OFL.
 */
@font-face {
	font-family: 'Amarante';
	src: url('../fonts/Amarante-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Almendra Display';
	src: url('../fonts/AlmendraDisplay-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.aethyrdancer-lettering {
	display: inline-block;
	line-height: 0; /* the SVG is the whole box; no baseline gap under it */
	max-width: 100%;
}


/*
 * NEITHER FACE HAS A BOLD, SO THE BROWSER WAS DRAWING ONE.
 *
 * Astra sets `font-weight: 600` on `.site-title`, and the header lockup is nested inside
 * it, so every glyph in it inherited 600. Almendra Display and Voidthorn each ship a
 * single 400 weight — so the browser synthesised the bold, which for a display face built
 * out of thorns means smearing the outlines until the internal filigree closes up. The
 * mark came out fatter and flatter than it was ever dialled in as, and nothing in the SVG
 * said so, because the SVG is correct: the weight arrives by inheritance from a parent
 * three levels up that has nothing to do with the wordmark.
 *
 * Measured against the lettering lab with both renders frozen at the same gradient phase:
 * 13.8% of pixels differed by more than 60 with the synthetic bold, 0.1% without.
 *
 * `font-synthesis: none` is the part that keeps it fixed. Setting the weight back to 400
 * only cures today's cause; `font-synthesis` tells the browser never to invent a weight or
 * a slant for these elements whatever the cascade does, which is the honest instruction —
 * there is no bold cut, so there is no bold.
 */
.aethyrdancer-lettering,
.aethyrdancer-lettering__svg,
.aethyrdancer-lettering__svg text {
	font-weight: 400;
	font-synthesis: none;
}

.aethyrdancer-lettering__svg {
	display: block;
	overflow: visible; /* glow and drop shadow spill past the viewBox */
}

/*
 * NOTHING ELSE MAY SHADOW THE LETTERING.
 *
 * `text-shadow` is inherited, and it applies to SVG <text> exactly as it does to HTML —
 * including text painted through <use>. text-fx.css puts a magenta drop shadow at 5px 5px
 * on the archive's quiet surfaces, which is the CSS *approximation* of this very effect,
 * built before those surfaces could carry the real thing. Put real lettering inside one of
 * them and both run: the SVG's own black shadow, and a violet one from a stylesheet three
 * files away. It reads as a violet drop shadow where a subtle violet glow was asked for,
 * and nothing in the SVG hints at the cause.
 *
 * The lettering brings its own complete paint stack. Anything the cascade adds on top is
 * by definition a second one, so this is a blanket refusal rather than a fix for the one
 * rule that happened to reach it today.
 */
.aethyrdancer-lettering,
.aethyrdancer-lettering__svg,
.aethyrdancer-lettering__svg text,
.aethyrdancer-lettering__svg use {
	text-shadow: none;
}

/*
 * lettering.js sets the measured intrinsic width and height, so both variants render at
 * their literal size. The difference is what happens when the container is narrower.
 */

/*
 * Nav wordmark: 1:1 wherever it fits — 22px means 22px. It may scale *down* but never
 * up. "Aethyrdancer Designs" at 22px with the locked 9.5 tracking measures 428px, which
 * overflows a 375px phone and puts the whole page into horizontal scroll; capping is not
 * optional. If the shrunk mark reads too small on a phone, the fix is a shorter mobile
 * wordmark, not a wider viewport.
 */
.aethyrdancer-lettering--nav .aethyrdancer-lettering__svg {
	max-width: 100%;
	height: auto;
}

/*
 * Fluid variants: hold their measured size until the container forces them down, then
 * scale. Keyed off data-fit rather than the variant name, so a new fluid variant gets
 * this automatically — the card title was added without it and overflowed a 375px
 * viewport by 92px, because lettering.js sets an explicit width attribute.
 */
.aethyrdancer-lettering__svg[data-fit='fluid'] {
	max-width: 100%;
	height: auto;
}

/*
 * Until lettering.js has measured the glyphs and tightened the viewBox, the box is
 * provisional and wider than the word. Fading in avoids a visible reflow on load.
 */
.aethyrdancer-lettering__svg {
	opacity: 0;
	transition: opacity 120ms linear;
}

.aethyrdancer-lettering__svg.is-fitted,
.no-js .aethyrdancer-lettering__svg {
	opacity: 1;
}

/*
 * No JavaScript means no fitting pass and no animation. The lettering must still be
 * visible — a failed enhancement may not take the wordmark with it.
 */
@media (scripting: none) {
	.aethyrdancer-lettering__svg {
		opacity: 1;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * THE SORTING CONTROL, WHICH CANNOT HAVE THE TREATMENT.
 *
 * "Default sorting" is the selected `<option>` of a native `<select>`, and an option may
 * contain text and nothing else — no SVG, no elements at all. The only way to letter it
 * would be to replace the select with a custom listbox, which means rebuilding keyboard
 * interaction, typeahead and the mobile picker for a control that this catalogue barely
 * needs; the archive already hides it entirely on a collection of four or fewer.
 *
 * So it gets the half of the treatment that CSS can carry — the face, the size and a
 * paint stack a text-shadow can express — and none of the half that needs SVG. It reads
 * as the same family as the result count beside it without pretending to be the same
 * thing.
 *
 * THE DECLARATIONS USED TO LIVE HERE AND NO LONGER DO. They are in text-fx.css, under
 * "Dropdowns", together with the variation selects and the option-row rule. Two files
 * styling one control is what produced the washed-out fill this comment once described:
 * the rule here won the fill at (0,2,0) while text-fx.css won the shadow, and neither
 * author could see the result. Add dropdown styling there, not here.
 */

/*
 * The result count is now an inline-block SVG inside core's `<p>`, and the SVG's own box
 * carries the leading. Without this the paragraph keeps the line-height it had as text and
 * the row sits low against the sorting control beside it.
 */
.woocommerce-result-count {
	display: flex;
	align-items: center;
	margin-bottom: 0;
	line-height: 0;
}