/* ==========================================================================
   Statement — design tokens & base typography
   Change the brand here; everything else reads from these variables.
   ========================================================================== */

:root {
	/* Palette — Margo brand */
	--c-ink: #2a0a10;        /* deepest wine-black: hovers, overlays */
	--c-espresso: #4d0011;   /* brand wine: headings, UI, logo */
	--c-brown: #7d6969;      /* mauve: body text */
	--c-sand: #cbb8b2;       /* dusty rose */
	--c-cream: #eddcd2;      /* blush */
	--c-ivory: #fffefa;      /* page background */
	--c-wine: #4d0011;       /* buttons, accents */
	--c-wine-deep: #33000b;
	--c-line: rgba(125, 105, 105, 0.22);

	/* Type */
	--f-display: "Brittany Signature", "Snell Roundhand", "Segoe Script", cursive;   /* headings */
	--f-sub: "Futura LT Pro", Futura, "Century Gothic", "Trebuchet MS", sans-serif; /* subheadings, labels, buttons, nav */
	--f-body: "Hero", "Helvetica Neue", Arial, sans-serif;                           /* body text */

	--fs-xs: clamp(0.68rem, 0.66rem + 0.1vw, 0.75rem);
	--fs-sm: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
	--fs-base: clamp(0.94rem, 0.9rem + 0.18vw, 1.05rem);
	--fs-lg: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
	--fs-h3: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
	--fs-h2: clamp(2.2rem, 1.4rem + 3vw, 4.25rem);
	--fs-h1: clamp(2.8rem, 1.6rem + 4vw, 6rem);
	--fs-mega: clamp(3.4rem, 1.2rem + 7.5vw, 9.5rem);

	/* Space & motion */
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--section: clamp(4rem, 10vw, 10rem);
	--ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

body {
	font-family: var(--f-body);
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--c-brown);
	background: var(--c-ivory);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--f-display);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--c-espresso);
}

a { color: var(--c-espresso); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.3s; }
a:hover, a:focus { color: var(--c-brown); }
.elementor-heading-title a, h1 a, h2 a, h3 a { color: inherit; text-decoration: none; }

::selection { background: var(--c-wine); color: var(--c-ivory); }

img { display: block; max-width: 100%; height: auto; }

/* ---------- Type helpers (add as CSS Classes in Elementor > Advanced) ---------- */
.t-eyebrow,
body .t-eyebrow .elementor-heading-title,
.t-eyebrow p {
	font-family: var(--f-sub);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	line-height: 1.4;
}

body .t-mega .elementor-heading-title, .t-mega { font-size: var(--fs-mega); line-height: 1.05; }
/* Brittany's loops reach far above and below the line — give big script headings room
   (em = relative to the heading's own size, so it scales on every screen) */
body .t-mega .elementor-heading-title, h1.t-mega, h2.t-mega { padding: 0.24em 0 0.42em; }
body .t-h1 .elementor-heading-title, h1.t-h1, h2.t-h1 { padding: 0.25em 0 0.35em; }
body .t-h2 .elementor-heading-title, h2.t-h2 { padding: 0.2em 0 0.3em; }
body .t-h1 .elementor-heading-title, .t-h1 { font-size: var(--fs-h1); line-height: 1.1; }
body .t-h2 .elementor-heading-title, .t-h2 { font-size: var(--fs-h2); line-height: 1.15; }
body .t-h3 .elementor-heading-title, .t-h3 { font-size: var(--fs-h3); }
/* Futura subheading styles (weights 300/400/500/800) */
.t-sub, body .t-sub .elementor-heading-title { font-family: var(--f-sub); font-weight: 500; letter-spacing: 0.06em; line-height: 1.3; }
.t-sub-light, body .t-sub-light .elementor-heading-title { font-family: var(--f-sub); font-weight: 300; letter-spacing: 0.04em; line-height: 1.3; }
.t-sub-heavy, body .t-sub-heavy .elementor-heading-title { font-family: var(--f-sub); font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; text-transform: uppercase; }
.t-lead, .t-lead p { font-size: var(--fs-lg); line-height: 1.55; font-weight: 300; }
.t-caps, body .t-caps .elementor-heading-title { font-family: var(--f-sub); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; }

/* ---------- Colour scopes ---------- */
.on-dark { color: var(--c-cream); }
body .on-dark .elementor-heading-title,
.on-dark p,
.on-dark a:not(.elementor-button) { color: var(--c-cream); }
.bg-ink { background-color: var(--c-ink) !important; }
.bg-espresso { background-color: var(--c-espresso) !important; }
.bg-cream { background-color: var(--c-cream) !important; }
.bg-wine { background-color: var(--c-wine) !important; }

/* ---------- Buttons (Elementor Button widget + .btn-lux / .btn-ghost) ---------- */
.btn-lux .elementor-button,
.btn-ghost .elementor-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: 0;
	padding: 1.15em 2.6em;
	font-family: var(--f-sub);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	transition: color 0.6s var(--ease-lux), border-color 0.6s var(--ease-lux);
}

.btn-lux .elementor-button { background: var(--c-wine); color: var(--c-ivory); border: 1px solid var(--c-wine); }
.btn-ghost .elementor-button { background: transparent; color: currentColor; border: 1px solid currentColor; }

.btn-lux .elementor-button::before,
.btn-ghost .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.7s var(--ease-lux);
}
.btn-lux .elementor-button::before { background: var(--c-ink); }
.btn-ghost .elementor-button::before { background: var(--c-ink); }
.on-dark .btn-ghost .elementor-button::before, .btn-ghost.on-dark .elementor-button::before { background: var(--c-ivory); }

.btn-lux .elementor-button:hover::before,
.btn-ghost .elementor-button:hover::before { transform: scaleY(1); transform-origin: top; }
.btn-lux .elementor-button:hover { color: var(--c-ivory); border-color: var(--c-ink); }
.btn-ghost .elementor-button:hover { color: var(--c-ivory); border-color: var(--c-ink); }
.on-dark .btn-ghost .elementor-button:hover, .btn-ghost.on-dark .elementor-button:hover { color: var(--c-ink); border-color: var(--c-ivory); }

/* ---------- Link underline that draws in ---------- */
.link-lux a, a.link-lux {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.6s var(--ease-lux);
	padding-bottom: 2px;
}
.link-lux a:hover, a.link-lux:hover { background-size: 100% 1px; }

/* ---------- Layout helpers ---------- */
.sec-pad { padding-block: var(--section) !important; }
.full-bleed-media img,
.full-bleed-media video { width: 100%; height: 100%; object-fit: cover; }
.ratio-portrait img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.ratio-tall img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.ratio-wide img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.hairline-top { border-top: 1px solid var(--c-line); }
.hairline-bottom { border-bottom: 1px solid var(--c-line); }

/* ---------- Elementor globals → brand tokens ----------
   Newer Elementor has no "Disable default fonts/colors" switch, so we point
   its global variables at our tokens. body[class*="elementor-kit-"] outranks
   the kit's own .elementor-kit-N rule, so this wins regardless of load order. */
body[class*="elementor-kit-"] {
	--e-global-color-primary: var(--c-espresso);
	--e-global-color-secondary: var(--c-sand);
	--e-global-color-text: var(--c-brown);
	--e-global-color-accent: var(--c-wine);

	--e-global-typography-primary-font-family: var(--f-display);
	--e-global-typography-primary-font-weight: 400;
	--e-global-typography-secondary-font-family: var(--f-sub);
	--e-global-typography-secondary-font-weight: 500;
	--e-global-typography-text-font-family: var(--f-body);
	--e-global-typography-text-font-weight: 400;
	--e-global-typography-accent-font-family: var(--f-sub);
	--e-global-typography-accent-font-weight: 500;

	font-family: var(--f-body);
	color: var(--c-brown);
}