/**
 * hosanna Skincare — brand-only styling.
 *
 * Almost everything this brand needs is expressed as a token in functions.php.
 * What remains here are the few treatments genuinely specific to this brand's
 * identity rather than to its palette, and that therefore have no place in a
 * parent theme other brands will use.
 *
 * Rule of thumb before adding anything below: if a different brand would want the
 * same rule with different values, it belongs in the parent as a token.
 *
 * Precedence: this sheet is enqueued after the parent bundle and, like it, is
 * unlayered — so it overrides parent components by ordinary source order at equal
 * specificity. Do not wrap these rules in `@layer`; a layer would lose to the
 * parent's unlayered component styles no matter how specific it was written.
 *
 * Keep selectors targeted. A broad structural rule here (`body > *`, `div`, …)
 * reaches parent components it was never meant to touch — a `body > * { position:
 * relative }` written for a background effect is enough to defeat
 * `.hs-drawer { position: fixed }` and break every overlay in the theme.
 */

/*
 * Cormorant Garamond sits optically small next to Plus Jakarta Sans and reads
 * light at display sizes. Nudging weight and tracking is a property of this
 * typeface pairing, not of the theme's type scale.
 */
h1,
h2,
h3,
.hs-brand,
.hs-card__title,
.hs-drawer__title {
	font-weight: 500;
	letter-spacing: -0.005em;
}

/* The monogram is a single glyph inside a circular rule; Cormorant's cap height
   leaves it sitting high without a small optical correction. */
.hs-brand__mark {
	padding-block-start: 0.1em;
	font-weight: 500;
}

/*
 * Paper grain.
 *
 * Applied as a background layer on `body` rather than as an overlay
 * pseudo-element. An overlay would have to sit above the background but below the
 * content, which means promoting every child of `body` into its own stacking
 * context — and that quietly overrides the positioning of any overlay the parent
 * owns (drawer, dialogs, sticky header).
 *
 * As a background layer it composites under all content for free, with no
 * stacking side effects at all. The alpha is baked into the SVG so the element's
 * own opacity is left alone.
 */
body {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* The hanko is this brand's signature mark. Its slight rotation is deliberate —
   a stamp pressed by hand is never quite square. */
.hs-hanko {
	rotate: -4deg;
}

@media (prefers-reduced-motion: no-preference) {
	.hs-hanko {
		transition: rotate var(--hosanna-duration-slow) var(--hosanna-ease-out);
	}

	.hs-footer:hover .hs-hanko {
		rotate: 0deg;
	}
}