/**
 * Lupet global visual system.
 *
 * Tokens are global so every future Lupet section can share the same values.
 * Visual rules are opt-in through `lupet-*` classes and therefore do not restyle
 * Blocksy, Elementor, WooCommerce, or the frozen Quiet Icon Hero.
 */

:root {
	/* Layout: 1440px content plus responsive outer gutters. */
	--lupet-layout-content-max: 90rem;
	--lupet-layout-reading-max: 45rem;
	--lupet-layout-copy-max: 37.5rem;
	--lupet-layout-gutter: 1.25rem;
	--lupet-layout-grid-columns: 4;
	--lupet-layout-grid-gap: 1rem;

	/* Breakpoint references for PHP/JavaScript. CSS media queries repeat them. */
	--lupet-breakpoint-tablet: 48rem;
	--lupet-breakpoint-desktop: 75rem;

	/* Spacing: a restrained 4px base scale. */
	--lupet-space-1: 0.25rem;
	--lupet-space-2: 0.5rem;
	--lupet-space-3: 0.75rem;
	--lupet-space-4: 1rem;
	--lupet-space-5: 1.5rem;
	--lupet-space-6: 2rem;
	--lupet-space-7: 2.5rem;
	--lupet-space-8: 3rem;
	--lupet-space-9: 4rem;
	--lupet-space-10: 5rem;
	--lupet-space-11: 6rem;
	--lupet-space-12: 7.5rem;
	--lupet-space-13: 9rem;
	--lupet-section-space: var(--lupet-space-10);
	--lupet-section-space-compact: var(--lupet-space-9);

	/* Typography: display serif with a robust sans-serif interface face. */
	--lupet-font-serif: "Cormorant Garamond", "Iowan Old Style", Baskerville, "Times New Roman", serif;
	--lupet-font-sans: Manrope, "Helvetica Neue", Arial, sans-serif;
	--lupet-font-size-h1: clamp(3.25rem, 7vw, 5.25rem);
	--lupet-font-size-h2: clamp(2.375rem, 5vw, 4rem);
	--lupet-font-size-h3: clamp(1.625rem, 2.5vw, 2.25rem);
	--lupet-font-size-body-large: clamp(1.0625rem, 1.4vw, 1.25rem);
	--lupet-font-size-body: 1rem;
	--lupet-font-size-small: 0.875rem;
	--lupet-font-size-caption: 0.6875rem;
	--lupet-line-height-h1: 0.95;
	--lupet-line-height-h2: 1.02;
	--lupet-line-height-h3: 1.15;
	--lupet-line-height-body-large: 1.55;
	--lupet-line-height-body: 1.65;
	--lupet-line-height-small: 1.55;
	--lupet-line-height-caption: 1.4;
	--lupet-letter-spacing-display: -0.035em;
	--lupet-letter-spacing-heading: -0.02em;
	--lupet-letter-spacing-body: 0;
	--lupet-letter-spacing-label: 0.16em;
	--lupet-font-weight-regular: 400;
	--lupet-font-weight-medium: 500;
	--lupet-font-weight-semibold: 600;

	/* Direction A palette. Accent is deliberately reserved for emphasis. */
	--lupet-color-canvas: #f2eee6;
	--lupet-color-paper: #f8f5ef;
	--lupet-color-ink: #171714;
	--lupet-color-text: #24231f;
	--lupet-color-text-muted: #5f5b53;
	--lupet-color-accent: #5b2727;
	--lupet-color-accent-strong: #461b1b;
	--lupet-color-accent-soft: #b99086;
	--lupet-color-line: #c9c2b7;
	--lupet-color-line-subtle: rgba(23, 23, 20, 0.14);
	--lupet-color-line-inverse: rgba(242, 238, 230, 0.28);
	--lupet-color-inverse: #f2eee6;
	--lupet-color-inverse-muted: rgba(242, 238, 230, 0.72);
	--lupet-color-inverse-emphasis: rgba(242, 238, 230, 0.78);
	--lupet-color-inverse-subtle: rgba(242, 238, 230, 0.52);
	--lupet-color-on-media: rgba(248, 245, 239, 0.82);
	--lupet-color-on-media-muted: rgba(242, 238, 230, 0.68);
	--lupet-color-media-placeholder-light: #d8d0c4;
	--lupet-color-media-placeholder-dark: #322f2b;
	--lupet-color-focus: #5b2727;

	/* Square corners are intentional; components must opt into any radius. */
	--lupet-radius-none: 0;

	/* Motion: one quiet family for reveal, state change, and image hover. */
	--lupet-motion-duration-fast: 180ms;
	--lupet-motion-duration-base: 280ms;
	--lupet-motion-duration-reveal: 650ms;
	--lupet-motion-duration-image: 900ms;
	--lupet-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--lupet-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--lupet-motion-distance: 0.75rem;
	--lupet-motion-delay: 0ms;
}

@media (min-width: 48rem) {
	:root {
		--lupet-layout-gutter: 2.5rem;
		--lupet-layout-grid-columns: 8;
		--lupet-layout-grid-gap: 1.5rem;
		--lupet-section-space: 6.5rem;
		--lupet-section-space-compact: 5rem;
	}
}

@media (min-width: 75rem) {
	:root {
		--lupet-layout-gutter: 5rem;
		--lupet-layout-grid-columns: 12;
		--lupet-layout-grid-gap: 2rem;
		--lupet-section-space: 9rem;
		--lupet-section-space-compact: 6.5rem;
	}
}

/* Layout primitives. */
.lupet-container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--lupet-layout-content-max) + var(--lupet-layout-gutter) + var(--lupet-layout-gutter));
	margin-inline: auto;
	padding-inline: var(--lupet-layout-gutter);
}

.lupet-container--reading {
	max-width: calc(var(--lupet-layout-reading-max) + var(--lupet-layout-gutter) + var(--lupet-layout-gutter));
}

.lupet-container--copy {
	max-width: calc(var(--lupet-layout-copy-max) + var(--lupet-layout-gutter) + var(--lupet-layout-gutter));
}

.lupet-container--full {
	max-width: none;
}

.lupet-section {
	position: relative;
	box-sizing: border-box;
	padding-block: var(--lupet-section-space);
}

.lupet-section--compact {
	padding-block: var(--lupet-section-space-compact);
}

.lupet-section--flush {
	padding-block: 0;
}

.lupet-grid {
	display: grid;
	grid-template-columns: repeat(var(--lupet-layout-grid-columns), minmax(0, 1fr));
	gap: var(--lupet-layout-grid-gap);
}

.lupet-grid__item {
	min-width: 0;
	grid-column: var(--lupet-grid-start-mobile, auto) / span var(--lupet-grid-span-mobile, 4);
}

.lupet-stack {
	display: flex;
	flex-direction: column;
	gap: var(--lupet-stack-space, var(--lupet-space-5));
}

.lupet-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lupet-cluster-space, var(--lupet-space-4));
}

@media (min-width: 48rem) {
	.lupet-grid__item {
		grid-column: var(--lupet-grid-start-tablet, auto) / span var(--lupet-grid-span-tablet, 8);
	}
}

@media (min-width: 75rem) {
	.lupet-grid__item {
		grid-column: var(--lupet-grid-start-desktop, auto) / span var(--lupet-grid-span-desktop, 12);
	}
}

/* Opt-in type roles. Margins stay with the owning component. */
.lupet-type-h1,
.lupet-type-h2,
.lupet-type-h3 {
	margin: 0;
	color: var(--lupet-color-ink);
	font-family: var(--lupet-font-serif);
	font-weight: var(--lupet-font-weight-medium);
	text-wrap: balance;
}

.lupet-type-h1 {
	font-size: var(--lupet-font-size-h1);
	letter-spacing: var(--lupet-letter-spacing-display);
	line-height: var(--lupet-line-height-h1);
}

.lupet-type-h2 {
	font-size: var(--lupet-font-size-h2);
	letter-spacing: var(--lupet-letter-spacing-display);
	line-height: var(--lupet-line-height-h2);
}

.lupet-type-h3 {
	font-size: var(--lupet-font-size-h3);
	letter-spacing: var(--lupet-letter-spacing-heading);
	line-height: var(--lupet-line-height-h3);
}

.lupet-type-body-large,
.lupet-type-body,
.lupet-type-small,
.lupet-type-caption,
.lupet-eyebrow {
	margin: 0;
	color: var(--lupet-color-text);
	font-family: var(--lupet-font-sans);
	font-weight: var(--lupet-font-weight-regular);
}

.lupet-type-body-large {
	font-size: var(--lupet-font-size-body-large);
	letter-spacing: var(--lupet-letter-spacing-body);
	line-height: var(--lupet-line-height-body-large);
}

.lupet-type-body {
	font-size: var(--lupet-font-size-body);
	letter-spacing: var(--lupet-letter-spacing-body);
	line-height: var(--lupet-line-height-body);
}

.lupet-type-small {
	font-size: var(--lupet-font-size-small);
	line-height: var(--lupet-line-height-small);
}

.lupet-type-caption,
.lupet-eyebrow {
	font-size: var(--lupet-font-size-caption);
	font-weight: var(--lupet-font-weight-semibold);
	letter-spacing: var(--lupet-letter-spacing-label);
	line-height: var(--lupet-line-height-caption);
	text-transform: uppercase;
}

.lupet-type-muted {
	color: var(--lupet-color-text-muted);
}

.lupet-type-inverse {
	color: var(--lupet-color-inverse);
}

/* Action primitives. */
.lupet-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 3.25rem;
	padding: 0.9rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--lupet-radius-none);
	font-family: var(--lupet-font-sans);
	font-size: var(--lupet-font-size-caption);
	font-weight: var(--lupet-font-weight-semibold);
	letter-spacing: var(--lupet-letter-spacing-label);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color var(--lupet-motion-duration-base) var(--lupet-motion-ease-standard),
		border-color var(--lupet-motion-duration-base) var(--lupet-motion-ease-standard),
		color var(--lupet-motion-duration-base) var(--lupet-motion-ease-standard);
}

.lupet-button--primary {
	border-color: var(--lupet-color-ink);
	background: var(--lupet-color-ink);
	color: var(--lupet-color-inverse);
}

.lupet-button--secondary {
	border-color: var(--lupet-color-ink);
	background: transparent;
	color: var(--lupet-color-ink);
}

.lupet-button--inverse {
	border-color: var(--lupet-color-inverse);
	background: var(--lupet-color-inverse);
	color: var(--lupet-color-ink);
}

.lupet-button:focus-visible,
.lupet-text-link:focus-visible {
	outline: 2px solid var(--lupet-color-focus);
	outline-offset: 4px;
}

.lupet-button[aria-disabled="true"],
.lupet-button:disabled {
	cursor: not-allowed;
	opacity: 0.48;
}

.lupet-text-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--lupet-space-2);
	min-height: 2.75rem;
	padding-block: var(--lupet-space-2);
	border-bottom: 1px solid currentColor;
	color: var(--lupet-color-ink);
	font-family: var(--lupet-font-sans);
	font-size: var(--lupet-font-size-caption);
	font-weight: var(--lupet-font-weight-semibold);
	letter-spacing: var(--lupet-letter-spacing-label);
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--lupet-motion-duration-fast) var(--lupet-motion-ease-standard);
}

.lupet-text-link__icon {
	width: 1.125rem;
	height: 1.125rem;
	transition: transform var(--lupet-motion-duration-fast) var(--lupet-motion-ease-out);
}

.lupet-text-link--inverse {
	color: var(--lupet-color-inverse);
}

.lupet-button--inverse:focus-visible,
.lupet-text-link--inverse:focus-visible {
	outline-color: var(--lupet-color-inverse);
}

@media (hover: hover) and (pointer: fine) {
	.lupet-button--primary:hover {
		border-color: var(--lupet-color-accent);
		background: var(--lupet-color-accent);
	}

	.lupet-button--secondary:hover {
		border-color: var(--lupet-color-accent);
		color: var(--lupet-color-accent);
	}

	.lupet-button--inverse:hover {
		background: transparent;
		color: var(--lupet-color-inverse);
	}

	.lupet-text-link:hover {
		color: var(--lupet-color-accent);
	}

	.lupet-text-link:hover .lupet-text-link__icon {
		transform: translateX(0.25rem);
	}
}

/* Image roles. Each component chooses a declared ratio instead of ad hoc sizes. */
.lupet-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--lupet-color-paper);
}

.lupet-media--square,
.lupet-media--product {
	aspect-ratio: 1 / 1;
}

.lupet-media--portrait {
	aspect-ratio: 4 / 5;
}

.lupet-media--editorial {
	aspect-ratio: 2 / 3;
}

.lupet-media--landscape {
	aspect-ratio: 3 / 2;
}

.lupet-media--wide {
	aspect-ratio: 16 / 9;
}

.lupet-media > img,
.lupet-media > video,
.lupet-media > picture,
.lupet-media > picture > img {
	display: block;
	width: 100%;
	height: 100%;
}

.lupet-media > img,
.lupet-media > video,
.lupet-media > picture > img {
	object-fit: cover;
	object-position: var(--lupet-media-position, 50% 50%);
}

.lupet-media--contain > img,
.lupet-media--contain > video,
.lupet-media--contain > picture > img {
	object-fit: contain;
}

.lupet-media--hover > img,
.lupet-media--hover > picture > img {
	transition: transform var(--lupet-motion-duration-image) var(--lupet-motion-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.lupet-media--hover:hover > img,
	.lupet-media--hover:hover > picture > img {
		transform: scale(1.018);
	}
}

/* Surface roles. */
.lupet-surface--canvas {
	background: var(--lupet-color-canvas);
	color: var(--lupet-color-text);
}

.lupet-surface--paper {
	background: var(--lupet-color-paper);
	color: var(--lupet-color-text);
}

.lupet-surface--ink {
	background: var(--lupet-color-ink);
	color: var(--lupet-color-inverse);
}

.lupet-surface--accent {
	background: var(--lupet-color-accent);
	color: var(--lupet-color-inverse);
}

/*
 * Progressive-enhancement motion. Content remains visible unless a future
 * reveal controller explicitly adds `.lupet-motion-ready` to an ancestor.
 */
.lupet-reveal,
.lupet-fade {
	opacity: 1;
	transform: none;
}

.lupet-motion-ready .lupet-reveal,
.lupet-motion-ready .lupet-fade {
	opacity: 0;
	transition:
		opacity var(--lupet-motion-duration-reveal) var(--lupet-motion-ease-out) var(--lupet-motion-delay),
		transform var(--lupet-motion-duration-reveal) var(--lupet-motion-ease-out) var(--lupet-motion-delay);
}

.lupet-motion-ready .lupet-reveal {
	transform: translateY(var(--lupet-motion-distance));
}

.lupet-motion-ready .lupet-reveal.is-visible,
.lupet-motion-ready .lupet-fade.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lupet-button,
	.lupet-text-link,
	.lupet-text-link__icon,
	.lupet-media--hover > img,
	.lupet-media--hover > picture > img,
	.lupet-reveal,
	.lupet-fade {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	.lupet-reveal,
	.lupet-fade {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (forced-colors: active) {
	.lupet-button {
		border-color: ButtonText;
	}
}