/*
 * Cascade armour  -  generated file, do not hand-edit.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * The compiled Tailwind build places every utility inside "@layer utilities".
 * In the CSS cascade an UNLAYERED rule beats EVERY layered rule, regardless of
 * specificity. So a single
 *
 *     a { color: #fff }
 *
 * coming from the active theme or from WordPress' global-styles block silently
 * overrules a utility like .text-[#1A1712]/70. That is precisely why the footer
 * text rendered white, and why the red CTA buttons only showed their background
 * on hover (":hover" happened to out-specify the theme rule, the base state did
 * not).
 *
 * This stylesheet re-states the colours the design already uses - unlayered,
 * scoped to .rrr-homepage, marked !important - so no third-party stylesheet can
 * reach inside the homepage.
 *
 * IT CHANGES NOTHING VISUALLY. Every declaration was copied mechanically out of
 * assets/css/theme.css by tools/generate-armor.cjs. The values are copies, not
 * new design decisions.
 *
 * Scope: .rrr-homepage. Nothing outside the homepage is touched.
 */

.rrr-homepage.rrr-homepage .border-\[\#C9120A\] {
	border-color: #C9120A !important;
}

.rrr-homepage.rrr-homepage .border-\[rgba\(26\,23\,18\,0\.1\)\] {
	border-color: rgba(26,23,18,0.1) !important;
}

.rrr-homepage.rrr-homepage .border-\[rgba\(26\,23\,18\,0\.2\)\] {
	border-color: rgba(26,23,18,0.2) !important;
}

.rrr-homepage.rrr-homepage .border-\[rgba\(26\,23\,18\,0\.3\)\] {
	border-color: rgba(26,23,18,0.3) !important;
}

.rrr-homepage.rrr-homepage .border-\[rgba\(26\,23\,18\,0\.12\)\] {
	border-color: rgba(26,23,18,0.12) !important;
}

.rrr-homepage.rrr-homepage .border-\[rgba\(26\,23\,18\,0\.15\)\] {
	border-color: rgba(26,23,18,0.15) !important;
}

.rrr-homepage.rrr-homepage .border-transparent {
	border-color: transparent !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#0A0A0A\] {
	background-color: #0A0A0A !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#1A1712\] {
	background-color: #1A1712 !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#C9120A\] {
	background-color: #C9120A !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#DACEB1\] {
	background-color: #DACEB1 !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#DACEB1\]\/60 {
	background-color: color-mix(in oklab, #DACEB1 60%, transparent) !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#DFD3B7\] {
	background-color: #DFD3B7 !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#DFD3B7\]\/50 {
	background-color: color-mix(in oklab, #DFD3B7 50%, transparent) !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#E9DDC1\] {
	background-color: #E9DDC1 !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#E9DDC1\]\/90 {
	background-color: color-mix(in oklab, #E9DDC1 90%, transparent) !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#E9DDC1\]\/95 {
	background-color: color-mix(in oklab, #E9DDC1 95%, transparent) !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#EDE8DF\]\/40 {
	background-color: color-mix(in oklab, #EDE8DF 40%, transparent) !important;
}

.rrr-homepage.rrr-homepage .bg-\[\#FF2010\] {
	background-color: #FF2010 !important;
}

.rrr-homepage.rrr-homepage .bg-transparent {
	background-color: transparent !important;
}

.rrr-homepage.rrr-homepage .text-\[\#1A1712\] {
	color: #1A1712 !important;
}

.rrr-homepage.rrr-homepage .text-\[\#1A1712\]\/60 {
	color: color-mix(in oklab, #1A1712 60%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#1A1712\]\/70 {
	color: color-mix(in oklab, #1A1712 70%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#1A1712\]\/75 {
	color: color-mix(in oklab, #1A1712 75%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#1A1712\]\/80 {
	color: color-mix(in oklab, #1A1712 80%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#1A1712\]\/85 {
	color: color-mix(in oklab, #1A1712 85%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#1A1712\]\/90 {
	color: color-mix(in oklab, #1A1712 90%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#1A1712\]\/\[0\.05\] {
	color: color-mix(in oklab, #1A1712 5%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#1A1712\]\/\[0\.06\] {
	color: color-mix(in oklab, #1A1712 6%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#C9120A\] {
	color: #C9120A !important;
}

.rrr-homepage.rrr-homepage .text-\[\#EDE8DF\] {
	color: #EDE8DF !important;
}

.rrr-homepage.rrr-homepage .text-\[\#EDE8DF\]\/60 {
	color: color-mix(in oklab, #EDE8DF 60%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#EDE8DF\]\/80 {
	color: color-mix(in oklab, #EDE8DF 80%, transparent) !important;
}

.rrr-homepage.rrr-homepage .text-\[\#EDE8DF\]\/90 {
	color: color-mix(in oklab, #EDE8DF 90%, transparent) !important;
}

.rrr-homepage.rrr-homepage .placeholder-\[\#1A1712\]\/50::placeholder {
	color: color-mix(in oklab, #1A1712 50%, transparent) !important;
}

.rrr-homepage.rrr-homepage .selection\:bg-\[\#C9120A\] ::selection {
	background-color: #C9120A !important;
}

.rrr-homepage.rrr-homepage .selection\:bg-\[\#C9120A\]::selection {
	background-color: #C9120A !important;
}

.rrr-homepage.rrr-homepage .selection\:text-\[\#EDE8DF\] ::selection {
	color: #EDE8DF !important;
}

.rrr-homepage.rrr-homepage .selection\:text-\[\#EDE8DF\]::selection {
	color: #EDE8DF !important;
}

.rrr-homepage.rrr-homepage .hover\:border-\[\#C9120A\]:hover {
	border-color: #C9120A !important;
}

.rrr-homepage.rrr-homepage .hover\:bg-\[\#C9120A\]:hover {
	background-color: #C9120A !important;
}

.rrr-homepage.rrr-homepage .hover\:bg-\[\#E9DDC1\]:hover {
	background-color: #E9DDC1 !important;
}

.rrr-homepage.rrr-homepage .hover\:bg-\[\#EDE8DF\]:hover {
	background-color: #EDE8DF !important;
}

.rrr-homepage.rrr-homepage .hover\:text-\[\#1A1712\]:hover {
	color: #1A1712 !important;
}

.rrr-homepage.rrr-homepage .hover\:text-\[\#C9120A\]:hover {
	color: #C9120A !important;
}

.rrr-homepage.rrr-homepage .hover\:text-\[\#EDE8DF\]:hover {
	color: #EDE8DF !important;
}

.rrr-homepage.rrr-homepage .hover\:underline:hover {
	text-decoration-line: underline !important;
}

.rrr-homepage.rrr-homepage .focus\:border-\[\#C9120A\]:focus {
	border-color: #C9120A !important;
}

/* ---------------------------------------------------------------
 * Buttons.
 *
 * .btn-primary / .btn-ghost / .btn-ghost-dark come from the original
 * src/index.css and are unlayered, so they survive a bare "a {}" rule - but a
 * theme rule like ".entry-content a" (specificity 0,1,1) outranks a single
 * class (0,1,0), which is what stripped the red background while leaving
 * :hover intact. Scoping under .rrr-homepage lifts them to 0,2,0.
 *
 * Values identical to assets/css/theme.css.
 * ------------------------------------------------------------- */

.rrr-homepage.rrr-homepage .btn-primary {
	background-color: var(--red) !important;
	color: #EDE8DF !important;
	border: none !important;
	text-decoration: none !important;
}

.rrr-homepage.rrr-homepage .btn-primary:hover {
	background-color: var(--red-hi) !important;
	color: #EDE8DF !important;
}

.rrr-homepage.rrr-homepage .btn-ghost {
	background-color: transparent !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
	text-decoration: none !important;
}

.rrr-homepage.rrr-homepage .btn-ghost:hover {
	border-color: var(--red) !important;
	color: var(--red) !important;
}

.rrr-homepage.rrr-homepage .btn-ghost-dark {
	background-color: transparent !important;
	border: 1px solid rgba(237, 232, 223, 0.35) !important;
	color: #EDE8DF !important;
	text-decoration: none !important;
}

.rrr-homepage.rrr-homepage .btn-ghost-dark:hover {
	border-color: var(--red) !important;
	color: var(--red) !important;
}

/* ---------------------------------------------------------------
 * Link underlines.
 *
 * Tailwind's preflight neutralises the browser default, but preflight lives in
 * "@layer base" and therefore loses to an unlayered theme rule. The design has
 * no underlined links except the Instagram link on hover.
 *
 * Editor content (.rrr-entry) keeps its underlines - the higher specificity
 * below wins on its own, independent of source order.
 * ------------------------------------------------------------- */

.rrr-homepage.rrr-homepage a {
	text-decoration: none !important;
}

.rrr-homepage.rrr-homepage a.hover\:underline:hover {
	text-decoration: underline !important;
}

.rrr-homepage.rrr-homepage .rrr-entry a {
	text-decoration: underline !important;
	color: var(--red) !important;
}

.rrr-homepage.rrr-homepage .rrr-entry a:hover {
	color: var(--red-hi) !important;
}

/* ---------------------------------------------------------------
 * Inheritance net.
 *
 * The design colours many elements purely by INHERITANCE - a link inside an
 * already-coloured heading, the legal links inside the footer bar, the
 * Instagram link inside its red wrapper. That works in the original React app
 * because nothing else styles those tags. Inside WordPress a theme rule such as
 *
 *     a { color: #fff }   or   footer p { color: #fff }
 *
 * matches the element DIRECTLY, and a direct match always defeats an inherited
 * value - which is what turned the footer text and the product-name links white.
 *
 * Restoring "color: inherit" for the generic tags re-establishes the design's
 * own inheritance. Elements that DO carry a colour utility are unaffected:
 * .rrr-homepage .text-[...] scores 0,2,0 and outranks the 0,1,1 rules below.
 * ------------------------------------------------------------- */

.rrr-homepage.rrr-homepage a,
.rrr-homepage.rrr-homepage p,
.rrr-homepage.rrr-homepage span,
.rrr-homepage.rrr-homepage div,
.rrr-homepage.rrr-homepage li,
.rrr-homepage.rrr-homepage ul,
.rrr-homepage.rrr-homepage strong,
.rrr-homepage.rrr-homepage em,
.rrr-homepage.rrr-homepage small,
.rrr-homepage.rrr-homepage label,
.rrr-homepage.rrr-homepage h1,
.rrr-homepage.rrr-homepage h2,
.rrr-homepage.rrr-homepage h3,
.rrr-homepage.rrr-homepage h4,
.rrr-homepage.rrr-homepage h5,
.rrr-homepage.rrr-homepage h6 {
	color: inherit !important;
}

/* ---------------------------------------------------------------
 * Footer regions.
 *
 * Restates the exact inherited colours of the two link groups that the design
 * coloured through inheritance rather than through a class of their own.
 * ------------------------------------------------------------- */

.rrr-homepage.rrr-homepage .rrr-footer-social a {
	color: var(--red) !important;
}

.rrr-homepage.rrr-homepage .rrr-footer-bottom,
.rrr-homepage.rrr-homepage .rrr-footer-bottom a {
	color: color-mix(in oklab, #1A1712 70%, transparent) !important;
}

.rrr-homepage.rrr-homepage .rrr-footer-bottom a:hover {
	color: var(--red) !important;
}

/* ---------------------------------------------------------------
 * Surfaces and typography that themes commonly reset.
 * ------------------------------------------------------------- */

/* ---------------------------------------------------------------
 * Root surface.
 *
 * Deliberately THREE times the class. The inheritance net above matches
 * ".rrr-homepage.rrr-homepage div" (0,2,1) and the root element IS a div - so a
 * two-class root rule (0,2,0) would lose to it, the root would resolve to
 * "color: inherit", and the whole page would then inherit the surrounding
 * body colour. On a dark-themed builder kit that turns every inheriting
 * element white, which is exactly the failure this guards against.
 * ------------------------------------------------------------- */

.rrr-homepage.rrr-homepage.rrr-homepage {
	background-color: #E9DDC1 !important;
	color: #1A1712 !important;
	font-family: var(--font-body) !important;
}

.rrr-homepage.rrr-homepage .font-display { font-family: var(--font-display) !important; }
.rrr-homepage.rrr-homepage .font-label   { font-family: var(--font-label) !important; }
.rrr-homepage.rrr-homepage .font-body    { font-family: var(--font-body) !important; }

.rrr-homepage.rrr-homepage button {
	font-family: inherit !important;
}