/*
 * Any page that is mostly prose, the about page first.
 *
 * ⚠️ THE OLD SEARCH-AND-LINKS HOME PAGE'S RULES WENT WITH ITS BUILDER (D185).
 * `.oview-home*` styled a page the live home page replaced, and nothing had
 * rendered one since.
 *
 * ⚠️ Layout lives here, never on the elements. A `_display` setting generates a
 * `#brxe-{id}` rule, which is ID specificity and beats every class in this file.
 * The load more button lost its whole hover state to exactly that.
 *
 * Every value is a design token, so the next site changes the token.
 */

.oview-prose {
	width: 100%;
}

.oview-prose__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	width: 100%;
	/*
	 * ⚠️ 65ch, not a pixel width. A measure is about how many characters fit on
	 * a line, so it should be stated in characters - at 1280px this prose ran
	 * about 180 and was unreadable. (It was two rules, 1280px then 65ch, while
	 * the home page shared the first; one rule now it does not.)
	 */
	max-width: 65ch;
	margin-inline: auto;
	/*
	 * ⚠️ `--space-2xl-3` ABOVE, WHICH IS WHAT EVERY OTHER PAGE FRAME USES. At
	 * `--space-2xl` the About title started 7px higher than the four archives:
	 * near enough to look like a mistake and not near enough to be one.
	 */
	padding: var(--space-xxl) var(--space-m) var(--space-4xl);
}

/*
 * ⚠️ NO `font-size` AT ALL, WHICH IS THE POINT. This said `--text-xl`, so the
 * About page's `<h1>` rendered at 16px - body size - while the four archives
 * rendered theirs at 51. The fix is not a different token: an `h1` already
 * gets its size from ACSS's `--h1`, and stating one here is how this page
 * ended up 3px off the archives even after being "corrected" to `--text-h1`.
 * A page title is an `h1`; that is the whole rule.
 */
.oview-prose__title {
	margin: 0;
	line-height: 1.2;
	color: var(--color-text);
}

.oview-prose__p {
	margin: 0;
	font-size: var(--text-m);
	line-height: 1.6;
	color: var(--color-text-body);
}

@media (max-width: 600px) {
	.oview-prose__inner {
		padding: var(--space-xl) var(--space-s);
	}
}

/* --- the floor, where the design's scale went site-wide -------------------- */

/*
 * ⚠️ THE DESIGN'S OWN TOKENS MISS THE FLOOR IN TWO PLACES, and promoting its
 * scale to `html:root` carried that everywhere rather than into one card.
 *
 *   --text-xs           1.1rem, which is 11px against a 12px floor
 *   --color-text-muted  #8a8a94, which is 3.42:1 on white against 4.5:1
 *
 * `check-mobile.js` found both on the home page, on elements written long before
 * this design existed and correct under the values they were written against.
 *
 * ⚠️ RULES, NOT TOKENS, which is the same call `mockup-maps/mock4.json` makes
 * and for the same measured reason: overriding a token repaints every
 * DECORATIVE use of it too. Raising `--text-xs` would move every eyebrow and
 * count in the design, and darkening `--color-text-muted` would flatten the
 * three greys the cards are built from.
 */
.oview-footer__heading {
	font-size: var(--text-xs);
	color: var(--color-text-body);
}

/*
 * The same two corrections again on the footer's last line, which is the other
 * place this site set 11px muted text and was right to at the time.
 */
.oview-footer__bottom {
	font-size: var(--text-xs);
	color: var(--color-text-body);
}

/*
 * ⚠️ THE PRIMARY BUTTON'S CONTRAST CORRECTION IS GONE, because the thing it
 * corrected is gone.
 *
 * `--color-accent` was 3.72:1 under white type, so this pinned the button to a
 * hand-picked `#385dff`. The control system now uses `--color-accent-ink`,
 * which is the same hue at 4.9:1 and is what the design used all along - so this
 * rule was no longer a correction, it was the last thing keeping every real
 * page's primary button a different blue from the one on the page the design was
 * signed off on.
 *
 * A hex in a stylesheet outliving the token it was compensating for is its own
 * lesson: the correction should have named what it was for.
 */

/* ==========================================================================
 * One page's shape, adopted.
 *
 * ⚠️ MERGED, THEN SPLIT. These 37 rules were part of 101,894 bytes adopted
 * out of 26 promoted stylesheets, appended in the order those files used to
 * load. That preserved every collision exactly, which was the right thing to do
 * during the move and the wrong thing to leave behind: 64 selectors were
 * declared more than once and .ov-card was declared by NINE different drawings,
 * so what the site looked like depended on a filename sort.
 *
 * One selector, one home, one value. Merged property by property with the last
 * declaration winning, which is what the browser was already computing - so the
 * pages render identically and the file now says what it means.
 *
 * ⚠️ Classified on the LEFTMOST class. `.ov-col-side .ov-card` is a card seen
 * inside a sidebar, so it belongs with the sidebar rather than with the card.
 * ========================================================================== */

.ov-hero-card .ov-chips {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

.ov-hero-card .ov-chip-accord {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-on-accent);
	background: var(--color-error-ink);
	border-radius: var(--radius-full);
	padding: 0.7rem var(--space-s);
}

.ov-hero-card .ov-chip-accord--neutral {
	color: var(--color-text-body);
	background: var(--color-surface-sunk-2);
}

.ov-article-title {
	font-family: var(--font-serif);
	font-size: 5.4rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.12rem;
	margin: 0;
	text-wrap: pretty;
}

.ov-prose {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-m);
	max-width: 72rem;
	width: 100%;
	margin-inline: auto;
}

/*
 * ⚠️ A WRAPPER PASTED FROM ANOTHER SITE STEPS ASIDE. An imported article arrived
 * as `<article class="article">` round its paragraphs, and every paragraph sat
 * flush against the next. The rhythm here is ACSS's smart spacing, which spaces
 * the DIRECT children of the post content (`.brxe-post-content > * + p`), so
 * everything inside the wrapper got none. The same two spacing rules reach one
 * level down with ACSS's own variables, and the rules below style those
 * paragraphs like any other. A `div` is left alone: embeds and blocks are divs,
 * and they are one block each.
 *
 * ⚠️ A BLOCK, NOT `display: contents`, which was the first version and drew a
 * line across the top of the article on every load. Instagram's script holds
 * its iframe `position: absolute` while it loads, and an absolutely positioned
 * child of a FLEX container sits at the container's start, so with the wrapper
 * gone the column was that parent and the iframe's 1px border flashed at the
 * top until it resized. A block wrapper keeps it where the post is.
 */
.ov-prose > :is(article, section) {
	display: block;
	/* Text the paste left outside any <p> reads at the paragraph size. */
	font-size: var(--text-m);
	line-height: 1.75;
	color: var(--color-text-body);
}

/* The stray `</p>` such a paste ends its first line with becomes an empty <p>. */
.ov-prose > :is(article, section) > p:empty {
	display: none;
}

.ov-prose > p,
.ov-prose > :is(article, section) > p {
	font-size: var(--text-m);
	line-height: 1.75;
	color: var(--color-text-body);
	margin: 0;
	max-width: 68ch;
	text-wrap: pretty;
}

.ov-prose > :is(article, section) > * + * {
	margin-block-start: var(--flow-spacing, initial);
}

.ov-prose > :is(article, section) > * + p {
	margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial));
}

/*
 * ⚠️ NO FONT-SIZE. Prose used to run its own heading scale, one step below the
 * rest of the site: h2 at --text-2xl where an h2 is --text-3xl, and h3 at
 * --text-m, which is BODY SIZE - a third-level heading the same size as the
 * paragraph under it, distinguished only by weight.
 *
 * That is two scales for one document. A heading's size now comes from its
 * level, everywhere, and these rules carry only what is particular to prose:
 * the face, the weight, and the space above.
 *
 * Measured change on the specimen article: h2 21.57 -> 27.66, h3 15.83 ->
 * 21.57. Both are bigger, both by about one step, which is the step they were
 * missing.
 */
.ov-prose > h2,
.ov-prose > :is(article, section) > h2 {
	font-family: var(--font-serif);
	font-weight: 400;
	letter-spacing: -0.05rem;
	margin: var(--space-l) 0 0;
}

.ov-prose > h3,
.ov-prose > :is(article, section) > h3 {
	font-weight: 700;
	margin: var(--space-s) 0 0;
}

.ov-prose > ul,
.ov-prose > :is(article, section) > ul {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-xs);
	margin: 0;
	padding: 0 0 0 var(--space-l);
}

.ov-prose > ol,
.ov-prose > :is(article, section) > ol {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-xs);
	margin: 0;
	padding: 0 0 0 var(--space-l);
}

.ov-prose li {
	font-size: var(--text-m);
	line-height: 1.65;
	color: var(--color-text-body);
}

/*
 * ⚠️ TWO STYLESHEETS DREW THIS, AND THE PADDING WAS HALF OF EACH.
 *
 * ACSS styles every blockquote as a panel: a grey ground, a radius and padding
 * all round. This rule was written for a bare rule-and-indent quote and set
 * `padding: 0 0 0 ...`, which beats ACSS's zero-specificity `:where()` - so the
 * panel kept its ground and lost its padding, and the text sat against the top
 * edge with the credit against the bottom one. The panel is the design now, so
 * it gets padding on every side.
 *
 * ⚠️ AND THE BODY FACE, NOT THE DISPLAY ONE. Instrument Serif is a headline
 * face; at reading size inside a paragraph run it read as a heading that had
 * lost its size. A quote is somebody else's prose, so it is set as prose, in
 * the heading ink to lift it off the body grey.
 */
.ov-prose blockquote {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	border-left: 3px solid var(--color-accent);
	padding: var(--space-m) var(--space-l);
	margin: var(--space-l) 0;
}

.ov-prose blockquote p {
	font-family: var(--font-sans);
	font-size: var(--text-m);
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0;
	text-wrap: pretty;
}

.ov-prose blockquote cite {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-style: normal;
	/* WordPress wraps the credit in a <p>, which is set at the quote's weight. */
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
	/*
	 * Body ink, not muted, and solid: Bricks' own frontend stylesheet sets
	 * `blockquote cite { opacity: .5 }`, which on the panel's grey measured
	 * 2.56:1. The contrast gate could not see opacity until D180.
	 */
	color: var(--color-text-body);
	opacity: 1;
	margin: 0;
}

.ov-prose figure {
	display: block;
	margin: var(--space-l) 0;
}

.ov-prose figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.ov-prose figcaption {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: 1.5;
	margin: var(--space-xs) 0 0;
}

.ov-prose-flow {
	display: block;
	max-width: 72rem;
	width: 100%;
	margin-inline: auto;
	container-type: inline-size;
}

.ov-prose-flow > p {
	font-size: var(--text-m);
	line-height: 1.75;
	color: var(--color-text-body);
	margin: 0 0 var(--space-m);
	text-wrap: pretty;
}

.ov-hero-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-l);
	align-items: stretch;
}

.ov-hero-card {
	flex: 3 1 42rem;
	min-width: 0;
	border: var(--border-hair) solid var(--color-border);
	border-radius: var(--radius-2xl);
	padding: var(--space-l);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--space-l);
	box-sizing: border-box;
	container-type: inline-size;
}

.ov-hero-card:hover {
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

/*
 * ⚠️ 6rem WAS A NUMBER FROM NOWHERE, AND IT OUTGREW THE PAGE.
 *
 * The home page reads: `<h2>` "Most voted" at 26px, and inside it an `<h3>`
 * naming the fragrance at 60px. The card is a showcase, so its title being
 * larger than the label above it is correct editorial design and not the fault.
 * The fault is that 60px is on no scale this site owns, so it did not move when
 * everything around it did, and it ended up more than twice its own section
 * heading.
 *
 * `--h1` is the top of the heading scale, 36px on a phone and 54px on a
 * monitor. The card still dominates its section; it now does so by an amount
 * something decides.
 *
 * ⚠️ AND THE CONTAINER QUERY BELOW STAYS. This card appears at three
 * widths, and `--h1` answers the VIEWPORT while the card answers its CONTAINER.
 * A wide phone and a narrow sidebar are different questions.
 */
.ov-hero-title {
	font-family: var(--font-serif);
	font-size: var(--h1);
	font-weight: 400;
	line-height: 0.98;
	margin: 0 0 var(--space-s);
	letter-spacing: -0.1rem;
}

.ov-hero-copy {
	font-size: var(--text-m);
	line-height: 1.6;
	color: var(--color-text-body);
	margin: 0;
	max-width: 46ch;
	text-wrap: pretty;
}

.ov-hero-shot-frame {
	flex: 1 1 26rem;
	max-width: 33rem;
	min-width: 25rem;
	border: var(--border-hair) solid var(--color-border);
	border-radius: var(--radius-2xl);
	padding: var(--space-m);
	box-sizing: border-box;
}

.ov-hero-shot {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-m);
	background: repeating-linear-gradient(135deg, var(--color-surface-hover) 0 0.8rem, var(--color-surface-sunk) 0.8rem 1.6rem);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

@container (max-width: 34rem) {
	.ov-hero-card .ov-hero-title {
		font-size: var(--text-title);
	}

	.ov-hero-title {
		font-size: var(--text-title);
	}
}

@container (max-width: 40rem) {
	.ov-article-title {
		font-size: var(--text-title);
	}
}

@media (max-width: 47.9rem) {
	.ov-hero-shot-frame {
		flex: 1 1 100%;
		max-width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
 * THE FORUM, WHICH DRAWS ITS OWN MARKUP.
 *
 * ⚠️ ASGAROS SHIPS ITS OWN SIZES AND GREYS AND NEVER SAW OUR SCALE. The page
 * was added to the gate page list on 2026-08-31 and failed four accessibility
 * checks on its first ever run: `<small>` at 9 to 11px, `#888` on white at
 * 3.54:1, and a search field 16px tall.
 *
 * None of that is Asgaros being careless. Its defaults predate this site and
 * nothing here had ever told it otherwise, because nothing here had ever
 * LOOKED - which is the whole argument for a page belonging to no dataset
 * still being on the list.
 *
 * Scoped to `#af-wrapper`, which is the plugin's own root, so none of this can
 * reach a page we draw.
 * ========================================================================== */

#af-wrapper small,
#af-wrapper .forum-description,
#af-wrapper .forum-stats,
#af-wrapper .no-topics,
#af-wrapper #forum-header span,
#af-wrapper #forum-breadcrumbs span,
#af-wrapper #forum-breadcrumbs a {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/*
 * ⚠️ A 16px SEARCH FIELD AND A 20px LINK. WCAG 2.2 SC 2.5.8 wants 24, and a
 * forum is read on a phone more than anything else here.
 */
#af-wrapper input[type="search"],
#af-wrapper input[type="text"],
#af-wrapper input[type="submit"] {
	min-block-size: var(--tap-min);
	padding-block: var(--space-2xs);
}

#af-wrapper a.forum-title {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-min);
}

/*
 * The sign-in notice is olive on pale yellow: 4.49:1 against a 4.5 floor, which
 * is near enough to look fine and still fail, and is the reason a gate measures
 * rather than a person squinting.
 *
 * ⚠️ AND THIS RULE WAS PRESENT, CORRECT AND INERT FOR THE LINKS, TWICE.
 * `#af-wrapper .notice a` is what Asgaros itself declares, so the first attempt
 * TIED on specificity and lost on source order. Adding `[href]` beat it on
 * specificity and lost anyway, because Asgaros marks that declaration
 * `!important` - and nothing an author writes outranks another author's
 * `!important` except their own.
 *
 * ⚠️ SO THIS IS THE ONE PLACE `!important` IS THE ANSWER RATHER THAN A SMELL.
 * It is not raising our rule above the site's own cascade; it is meeting a
 * third-party plugin at the only level it left open. The `[href]` stays because
 * it says what is being coloured: the notice's plain text is the rule above.
 *
 * ⚠️ `--color-warning-ink` RATHER THAN `--color-text`, which is what this asked
 * for and never got. On the pale yellow that is 5.49:1 against the floor's 4.5,
 * and it still reads as a link in a warning; `--color-text` is 16.99:1 and reads
 * as body copy that happens to be underlined.
 */
#af-wrapper .notice {
	color: var(--color-text);
}

#af-wrapper .notice a[href] {
	color: var(--color-warning-ink) !important;
}

/*
 * ⚠️ The search field computes to a 16px box with no padding, and a rule on
 * `input[type="search"]` alone did not reach it. Naming the element as well as
 * the type is what Asgaros's own reset leaves room for.
 *
 * ⚠️ AND THAT WAS STILL NOT ENOUGH, for a reason worth writing down once:
 * Asgaros declares `#af-wrapper #forum-search input { min-height: initial }`,
 * which is TWO ids. Every attempt above is one id plus a class or an element,
 * so all of them lost on specificity to a reset that computes to 0 - the field
 * stayed 16px through three rules written to raise it.
 *
 * `min-height` and `min-block-size` are the same physical property here, so
 * writing the logical one does not sidestep the cascade either. Two ids and an
 * attribute is what wins, and nothing less does.
 */
#af-wrapper input {
	block-size: auto;
	min-block-size: var(--tap-min);
}

#af-wrapper #forum-search input[type="search"] {
	min-block-size: var(--tap-min);
	padding-block: var(--space-2xs);
}

/*
 * ⚠️ White on #999 is 2.85:1. Asgaros's own dark title bar, and the site has a
 * grey that carries white text: `--color-text-muted` is 5.35:1.
 */
#af-wrapper .title-element-dark {
	background-color: var(--color-text-muted);
}